c414-flt-ln-002

Vertical Position of Floats

WeasyPrint

This browser

Flags
interact

Source

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 2 <html>
 3  <head>
 4   <title>CSS Test: Vertical Position of Floats</title>
 5   <link rel="help" href="http://www.w3.org/TR/REC-CSS1#floating-elements">
 6   <link rel="author" title="CSS1 Test Suite Contributors" href="http://www.w3.org/Style/CSS/Test/CSS1/current/tsack.html">
 7   <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch">
 8   <meta name="flags" content="interact">
 9   <style type="text/css">
10   .gutter { width: 9em; background: yellow; border-left: solid 9em aqua;
11             margin-left: auto; /* CSS1 agents */
12             position: absolute; top: 0; right: 0; bottom: 0; z-index: -1; /* CSS2 agents */ }
13    p, ul { color: navy; }
14    .test { position: relative; font: 1em/1.25 serif;
15            border: 5px solid gray; margin: 1em; color: silver; }
16    .test p { width: 7em; padding: 1em; margin: 0; }
17    .test p, .test span { color: white; }
18    .test .a { background-color: blue; }
19    .test p.a { float: left; }
20    .test .b { background-color: purple; }
21    .test p.b { float: right; }
22    .test .c { background-color: orange; }
23    .test p.c { float: left; }
24    .test .d { background-color: green; }
25    .test p.d { float: left; }
26   </style>
27   <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#float-position" title="9.5.1 Positioning the float: the 'float' property">
28  </head>
29  <body>
30   <p>Test passes if for each matching pair of colored boxes either:</p>
31   <ul>
32     <li>the top of the small box is level with the top of the big box <em>or</em></li>
33     <li>the top of the big box is level with the bottom of the the small box
34       and either
35       <ul>
36         <li>the small box crosses into the righthand region marked by the yellow box or</li>
37         <li>the small box crosses into the righthand region marked by the aqua box and
38           the region marked by the yellow box on the small box's line is filled by another big box</li>
39       </ul>
40     </li>
41   </ul>
42   <p>These conditions must hold true even if the window is resized or the font
43   size changed.</p>
44   <div class="test">
45    <div class="gutter"></div>
46    dummy text dummy text dummy text dummy text dummy text dummy text
47    dummy text
48    <span class="a">A</span>
49    <p class="a">AAAA</p>
50    dummy text dummy text dummy text dummy text dummy text dummy text
51    <span class="b">B</span>
52    <p class="b">BBBB</p>
53    dummy text dummy text dummy text
54    <span class="c">C</span>
55    <p class="c">CCCC</p>
56    dummy text dummy text dummy text dummy text dummy text dummy text
57    <span class="d">D</span>
58    <p class="d">DDDD</p>
59    dummy text dummy text dummy text dummy text dummy text dummy text
60    dummy text dummy text dummy text dummy text dummy text dummy text
61    dummy text dummy text dummy text dummy text dummy text dummy text
62    dummy text dummy text dummy text dummy text dummy text dummy text
63    dummy text dummy text dummy text dummy text dummy text dummy text
64    dummy text dummy text dummy text dummy text dummy text dummy text
65    dummy text dummy text dummy text dummy text dummy text dummy text
66    dummy text dummy text dummy text dummy text dummy text dummy text
67    dummy text dummy text dummy text dummy text dummy text dummy text
68    dummy text dummy text dummy text dummy text dummy text dummy text
69    dummy text dummy text dummy text dummy text dummy text dummy text
70    dummy text dummy text dummy text dummy text dummy text dummy text
71    dummy text dummy text dummy text dummy text dummy text dummy text
72    dummy text dummy text dummy text dummy text dummy text dummy text
73    dummy text dummy text dummy text dummy text dummy text dummy text
74    dummy text dummy text dummy text dummy text dummy text dummy text
75    dummy text dummy text dummy text dummy text dummy text dummy text
76    dummy text dummy text dummy text dummy text dummy text dummy text
77    dummy text dummy text dummy text dummy text dummy text dummy text
78    dummy text dummy text dummy text dummy text dummy text dummy text
79   </div>
80  </body>
81 </html>