| 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: position absolute and 'vertical-rl' - 'width' a
nd 'right' are 'auto' and 'left' is not 'auto' with 'direction: ltr' in initial
containing block</title> |
| 8 |
| 9 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserB
ugsSection/css21testsuite/" /> |
| 10 <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" /> |
| 11 <link rel="match" href="abs-pos-non-replaced-icb-vrl-008-ref.xht" /> |
| 12 |
| 13 <meta content="" name="flags" /> |
| 14 <meta content="This test checks that when initial containing block's writing-m
ode is 'horizontal-tb' and its 'direction' is 'ltr', then an absolutely position
ed box (with 'width' and 'right' are 'auto' and 'left' is not 'auto') whose cont
aining block is the initial containing block must set width to shrink-to-fit and
then solve for 'right'. Whether such absolutely positioned box's 'writing-mode'
is vertical or not is irrelevant." name="assert" /> |
| 15 |
| 16 <style type="text/css"><![CDATA[ |
| 17 object#overlapping-green |
| 18 { |
| 19 height: 116px; |
| 20 width: 500px; /* 60% of 500px == 300px (offset of green square) */ |
| 21 vertical-align: top; |
| 22 } |
| 23 |
| 24 div#red-overlapped-reference |
| 25 { |
| 26 background-color: red; |
| 27 bottom: 116px; |
| 28 height: 100px; |
| 29 left: 300px; |
| 30 position: relative; |
| 31 width: 100px; |
| 32 z-index: -1; |
| 33 } |
| 34 ]]></style> |
| 35 </head> |
| 36 |
| 37 <body> |
| 38 |
| 39 <p>Test passes if there is a filled green square and <strong>no red</strong>.<
/p> |
| 40 |
| 41 <div><object data="support/embedded-doc-abs-pos-non-replaced-icb-vrl-014.html"
type="text/html" id="overlapping-green">This test requires a browser with capab
ility to embed an HTML document thanks to the HTML <object> element.</obje
ct></div> |
| 42 |
| 43 <div id="red-overlapped-reference"></div> |
| 44 |
| 45 </body> |
| 46 </html> |
| OLD | NEW |