clearance-calculations-vrl-008.xht (2200B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 5 <head> 6 7 <title>CSS Writing Modes Test: clearance calculations</title> 8 9 <!-- 10 This test is the verticalized version of 11 http://test.csswg.org/suites/css2.1/latest/html4/clear-clearance-calculation-004.htm 12 --> 13 14 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> 15 <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" /> 16 <link rel="match" href="clearance-calculations-vrl-008-ref.xht" /> 17 18 <meta content="image" name="flags" /> 19 <meta content="In this test, the right border edge of div#clearing-left must be on the left side of div#floated-left, i.e., 50px further on its left-hand side. That means that the margin-left of div#preceding-sibling must not collapse with the right margin of the div#clearing-left and clearance must be added such that clearance + margin-right of div#clearing-left = 50px, i.e., clearance = 50px - margin-right of div#clearing-left; therefore clearance is equal to 50px - 75px = - 25px." name="assert" /> 20 21 <style type="text/css"><![CDATA[ 22 html 23 { 24 height: 116px; 25 writing-mode: vertical-rl; 26 } 27 28 div#preceding-sibling 29 { 30 margin-left: 25px; 31 width: 25px; 32 } 33 34 div#floated-left 35 { 36 float: left; 37 width: 50px; 38 } 39 40 div#clearing-left 41 { 42 background-color: green; 43 clear: left; 44 margin-left: 8px; 45 margin-right: 75px; 46 width: 100px; 47 } 48 49 div#reference-overlapped-red 50 { 51 background-color: red; 52 height: 100px; 53 position: absolute; 54 right: 108px; 55 top: 8px; 56 width: 100px; 57 z-index: -1; 58 } 59 ]]></style> 60 61 </head> 62 63 <body> 64 65 <div id="preceding-sibling"></div> 66 67 <div id="floated-left"></div> 68 69 <div id="clearing-left"></div> 70 71 <div><img src="support/pass-cdts-clearance-calculations.png" width="474" height="17" alt="Image download support must be enabled" /></div> 72 73 <div id="reference-overlapped-red"></div> 74 75 </body> 76 </html>