| OLD | NEW |
| (Empty) | |
| 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/x
html1/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 - clearing box has narro
wer margin than clearance</title> |
| 8 |
| 9 <!-- |
| 10 This test is the verticalized version of |
| 11 http://test.csswg.org/suites/css2.1/latest/html4/clear-clearance-calculation-0
02.htm |
| 12 --> |
| 13 |
| 14 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserB
ugsSection/css21testsuite/" /> |
| 15 <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#vertical-layo
ut" title="7.1 Principles of Layout in Vertical Writing Modes" /> |
| 16 <link rel="match" href="clearance-calculations-vrl-004-ref.xht" /> |
| 17 |
| 18 <meta content="ahem image" name="flags" /> |
| 19 <meta content="This test checks that if, after margin collapsing, the position
of the clearing element is on the right of the float or would be hypothetically
positioned within the layout position of the float, then the clearing element i
s positioned directly on the left of the floated element." name="assert" /> |
| 20 |
| 21 <style type="text/css"><![CDATA[ |
| 22 div |
| 23 { |
| 24 height: 5em; /* computes to 100px */ |
| 25 } |
| 26 |
| 27 div#parent |
| 28 { |
| 29 background: red url("support/clearance-calculation-vrl-004.png"); |
| 30 font: 1.25em/1 Ahem; /* computes to 20px/20px */ |
| 31 min-width: 8em; |
| 32 -webkit-writing-mode: vertical-rl; |
| 33 } |
| 34 |
| 35 div > div |
| 36 { |
| 37 background-color: green; |
| 38 width: 1em; |
| 39 } |
| 40 |
| 41 div#preceding-sibling |
| 42 { |
| 43 margin-left: 4em; |
| 44 } |
| 45 |
| 46 div#floated-left |
| 47 { |
| 48 float: left; |
| 49 width: 2em; |
| 50 } |
| 51 |
| 52 div#clearing-left |
| 53 { |
| 54 clear: left; |
| 55 margin-right: 3em; |
| 56 } |
| 57 ]]></style> |
| 58 |
| 59 </head> |
| 60 |
| 61 <body> |
| 62 |
| 63 <p>Test passes if there is <strong>no red</strong>.</p> |
| 64 |
| 65 <div id="parent"> |
| 66 <div id="preceding-sibling"></div> |
| 67 <div id="floated-left"></div> |
| 68 <div id="clearing-left"></div> |
| 69 </div> |
| 70 |
| 71 </body> |
| 72 </html> |
| OLD | NEW |