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>