c414-flt-ln-002.xht (4064B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 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"><![CDATA[ 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 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 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>