Do not create a shape object outside of the layout context
[WebKit-https.git] / LayoutTests / fast / block / float / centered-float-avoidance-complexity.html
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2
3 <html>
4
5  <head>
6
7   <meta http-equiv="content-type" content="text/html; charset=UTF-8">
8
9   <title>Floats and BFCs with horizontal margins</title>
10
11
12   <style type="text/css">
13   div.container
14   {
15   border: silver solid 5px;
16   margin: 1em;
17   width: 640px;
18   }
19
20   div.floatL
21   {
22   background-color: lime;
23   float: left;
24   height: 1em;
25   }
26
27   div.floatR
28   {
29   background-color: lime;
30   float: right;
31   height: 1em;
32   }
33
34   div.overflow
35   {
36   background-color: orange;
37   margin-left: 100px;
38   margin-right: 100px;
39   overflow: auto;
40   }
41
42   .width0 {width: 0;}
43
44   .width50 {width: 50px;}
45
46   .width100 {width: 100px;}
47
48   .width150 {width: 150px;}
49   </style>
50
51  </head>
52
53  <body>
54
55   <h1>Margins and block formating contexts (<a href="http://lists.w3.org/Archives/Public/www-style/2012Feb/0975.html">additional tests from Alan Gresley</a>)</h1> 
56
57   <!--
58   non-positioned block boxes created before and after the float box 
59   flow vertically as if the float did not exist.
60   http://www.w3.org/TR/CSS21/visuren.html#floats
61   
62   The border box of (...) an element in the normal flow that 
63   establishes a new block formatting context (such as an element with 
64   'overflow' other than 'visible') must not overlap the margin box of 
65   any floats in the same block formatting context as the element itself.
66   http://www.w3.org/TR/CSS21/visuren.html#floats
67   -->
68
69   <h3>The orange stripe has 'overflow: auto', 'margin-left: 100px' and 'margin-right: 100px'<br> The lime stripes are floats with various width (topmost is 0, bottommost is 150px)<br>The wrapping container has a solid silver border.</h3>
70
71   <div class="container"><div class="width0 floatL">floatL</div><div 
72 class="overflow">&lt;div&gt; with 'overflow: auto'</div></div>
73
74   <div class="container"><div class="width50 floatL">floatL</div><div 
75 class="overflow">&lt;div&gt; with 'overflow: auto'</div></div>
76
77   <div class="container"><div class="width100 floatL">floatL</div><div 
78 class="overflow">&lt;div&gt; with 'overflow: auto'</div></div>
79
80   <div class="container"><div class="width150 floatL">floatL 150px</div><div 
81 class="overflow">&lt;div&gt; with 'overflow: auto'</div></div>
82
83   <div class="container"><div class="width0 floatR">floatR</div><div 
84 class="overflow">&lt;div&gt; with 'overflow: auto'</div></div>
85
86   <div class="container"><div class="width50 floatR">floatR</div><div 
87 class="overflow">&lt;div&gt; with 'overflow: auto'</div></div>
88
89   <div class="container"><div class="width100 floatR">floatR</div><div 
90 class="overflow">&lt;div&gt; with 'overflow: auto'</div></div>
91
92   <div class="container"><div class="width150 floatR">floatR 150px</div><div 
93 class="overflow">&lt;div&gt; with 'overflow: auto'</div></div>
94
95   <!--
96   non-positioned block boxes created before and after the float box 
97   flow vertically as if the float did not exist.
98   http://www.w3.org/TR/CSS21/visuren.html#floats  
99   
100   The border box of (...) an element in the normal flow that 
101   establishes a new block formatting context (such as an element with 
102   'overflow' other than 'visible') must not overlap the margin box of 
103   any floats in the same block formatting context as the element itself.
104   http://www.w3.org/TR/CSS21/visuren.html#floats
105   -->
106
107   <h3>The orange stripe has 'overflow: auto', 'margin-left: auto' and 'margin-right: auto'<br> The lime stripes are floats with various width (topmost is 0, bottommost is 150px)<br>The wrapping container has a solid silver border.</h3>
108
109  </body>
110 </html>