Do not create a shape object outside of the layout context
[WebKit-https.git] / LayoutTests / fast / block / float / 021.html
1 <html>
2 <head>
3 <style>
4 .black {
5   border:10px solid black;
6   margin: 1em 0;
7   height:220px;
8   width:700px;
9 }
10
11 .blue {
12   float:left;
13   width:1500px;
14   height:100px;
15   background-color: blue;
16 }
17
18 .green {
19  float:left;
20   width:1500px;
21   height:100px;
22   background-color: green;
23 }
24
25 .bluesnug {
26   float:left;
27   width:698px;
28   height:100px;
29   background-color: blue;
30 }
31
32 .greensnug {
33  float:left;
34   width:698px;
35   height:100px;
36   background-color: green;
37 }
38 </style>
39 </head>
40 <body >
41 In all of the examples, you should be able to see blue and green rectangles that spill way out of their
42 containing blocks.  They should be 100px tall and not overlap one another at all. They should be stacked
43 vertically.
44
45 <div class="black">
46 You should see blue and green rectangles below.<br>
47 <div class="blue"></div>
48 <div class="green"></div>
49 </div>
50
51 <div class="black">
52 You should see blue and 
53 <div class="blue"></div>
54 <div class="green"></div>
55 green rectangles below.
56 </div>
57
58 <div class="black">
59 <div class="blue"></div>
60 <div class="green"></div><br>
61 You should see blue and green rectangles above.
62 </div>
63
64
65 <div class="black">
66 <div class="blue"></div>
67 <div class="green"></div>
68 You should see blue and green rectangles above.
69 </div>
70
71 <div class="black">
72 <div class="blue"></div>
73 You should see blue above and green below.
74 <div class="green"></div>
75 </div>
76
77 <div class="black">
78 <div class="blue"></div>
79 You should see blue above and green below.<br>
80 <div class="green"></div>
81 </div>
82
83 The next examples should have blue and green rectangles that snugly fit without spilling out.
84
85 <div class="black">
86 You should see blue and green rectangles below.<br>
87 <div class="bluesnug"></div>
88 <div class="greensnug"></div>
89 </div>
90
91 <div class="black">
92 You should see blue and green rectangles below.
93 <div class="bluesnug"></div>
94 <div class="greensnug"></div>
95 </div>
96
97 <div class="black">
98 <div class="bluesnug"></div>
99 <div class="greensnug"></div><br>
100 You should see blue and green rectangles above.
101 </div>
102
103 <div class="black">
104 <div class="bluesnug"></div>
105 <div class="greensnug"></div>
106 You should see blue and green rectangles above.
107 </div>
108
109 <div class="black">
110 <div class="bluesnug"></div>
111 You should see blue above and green below.
112 <div class="greensnug"></div>
113 </div>
114
115 <div class="black">
116 <div class="bluesnug"></div>
117 You should see blue above and green below.<br>
118 <div class="greensnug"></div>
119 </div>
120
121
122 </body>
123 </html>