| 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: box offsets - position relative</title> |
| 8 |
| 9 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserB
ugsSection/css21testsuite/" /> |
| 10 <link rel="help" title="7.1 Principles of Layout in Vertical Writing Modes" hr
ef="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" /> |
| 11 <link rel="match" href="abs-pos-non-replaced-vrl-012-ref.xht" /> |
| 12 |
| 13 <meta content="image" name="flags" /> |
| 14 <meta content="The 'top', 'right', 'bottom', 'left' property, for relative pos
itioning, specify the offset of the box itself from its normal in-flow position,
from the position it would have had if it had been static. The 'top', 'right',
'bottom', 'left' offset property are physical properties, not logical ones in ve
rtical writing-modes." name="assert" /> |
| 15 |
| 16 <style type="text/css"><![CDATA[ |
| 17 html |
| 18 { |
| 19 -webkit-writing-mode: vertical-rl; |
| 20 } |
| 21 |
| 22 img |
| 23 { |
| 24 position: relative; |
| 25 } |
| 26 |
| 27 img.moves-toward-left |
| 28 { |
| 29 right: 80px; |
| 30 } |
| 31 |
| 32 img.moves-toward-top |
| 33 { |
| 34 bottom: 80px; |
| 35 } |
| 36 |
| 37 img.moves-toward-right |
| 38 { |
| 39 left: 80px; |
| 40 } |
| 41 |
| 42 img.moves-toward-bottom |
| 43 { |
| 44 top: 80px; |
| 45 } |
| 46 |
| 47 /* |
| 48 In this testcase, 7 red 80px by 80px squares overlap |
| 49 another red 80px by 80px square (placed in the center of |
| 50 a 3 by 3 grid of squares) and then, at the end, one single |
| 51 green 80px by 80px square overlaps all 8 other red squares. |
| 52 */ |
| 53 ]]></style> |
| 54 |
| 55 </head> |
| 56 |
| 57 <body> |
| 58 |
| 59 <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="3
6" alt="Image download support must be enabled" /></p> |
| 60 |
| 61 <div><img class="moves-toward-bottom moves-toward-left" src="support/100x100-r
ed.png" width="80" height="80" alt="Image download support must be enabled" /><i
mg class="moves-toward-left" src="support/100x100-red.png" width="80" height="80
" alt="Image download support must be enabled" /><img class="moves-toward-left m
oves-toward-top" src="support/100x100-red.png" width="80" height="80" alt="Image
download support must be enabled" /></div> |
| 62 |
| 63 <div><img class="moves-toward-bottom" src="support/100x100-red.png" width="80"
height="80" alt="Image download support must be enabled" /><img src="support/10
0x100-red.png" width="80" height="80" alt="Image download support must be enable
d" /><img class="moves-toward-top" src="support/100x100-red.png" width="80" heig
ht="80" alt="Image download support must be enabled" /></div> |
| 64 |
| 65 <div><img class="moves-toward-right moves-toward-bottom" src="support/100x100-
red.png" width="80" height="80" alt="Image download support must be enabled" /><
img class="moves-toward-right" src="support/100x100-red.png" width="80" height="
80" alt="Image download support must be enabled" /><img class="moves-toward-righ
t moves-toward-top" src="support/swatch-green.png" width="80" height="80" alt="I
mage download support must be enabled" /></div> |
| 66 |
| 67 </body> |
| 68 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1161223002:
Import csswg-test/css-writing-modes-3/ (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master