| 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' - 'left' an
d 'right' are 'auto', 'width' is not 'auto' with 'direction: ltr' in initial con
taining 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="../css21/reference/ref-filled-green-100px-square.xht"
/> |
| 12 |
| 13 <meta content="" name="flags" /> |
| 14 <meta content="This test checks that when the initial containing block's writi
ng-mode is 'horizontal-tb' and its 'direction' is 'ltr', then an absolutely posi
tioned box (with 'left' and 'right' are 'auto', 'width' is not 'auto') whose con
taining block is the initial containing block and whose direction is 'ltr' must
set left to static position 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 html |
| 18 { |
| 19 direction: ltr; |
| 20 } |
| 21 |
| 22 div#green-overlapping-test |
| 23 { |
| 24 background-color: green; |
| 25 border-left: green solid 35px; |
| 26 border-right: green solid 15px; |
| 27 height: 100px; |
| 28 left: auto; |
| 29 position: absolute; |
| 30 right: auto; |
| 31 width: 50px; |
| 32 -webkit-writing-mode: vertical-rl; |
| 33 } |
| 34 |
| 35 /* |
| 36 " |
| 37 2. 'left' and 'right' are 'auto' and 'width' is not 'auto', then if the 'direc
tion' property of the element establishing the static-position containing block
is 'ltr' set 'left' to the static position (...) Then solve for (...) 'right' (i
f 'direction' is 'ltr'). |
| 38 " |
| 39 10.3.7 Absolutely positioned, non-replaced elements |
| 40 http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width |
| 41 |
| 42 So: |
| 43 |
| 44 auto : left |
| 45 + |
| 46 0px : margin-left |
| 47 + |
| 48 35px : border-left-width |
| 49 + |
| 50 0px : padding-left |
| 51 + |
| 52 50px : width |
| 53 + |
| 54 0px : padding-right |
| 55 + |
| 56 15px : border-right-width |
| 57 + |
| 58 0px : margin-right |
| 59 + |
| 60 auto : right |
| 61 ==================== |
| 62 : width of containing block (width of Initial Containing Block) |
| 63 |
| 64 becomes |
| 65 |
| 66 8px : left (set to static position) |
| 67 + |
| 68 0px : margin-left |
| 69 + |
| 70 35px : border-left-width |
| 71 + |
| 72 0px : padding-left |
| 73 + |
| 74 50px : width |
| 75 + |
| 76 0px : padding-right |
| 77 + |
| 78 15px : border-right-width |
| 79 + |
| 80 0px : margin-right |
| 81 + |
| 82 solve : right |
| 83 ==================== |
| 84 : width of containing block (width of Initial Containing Block) |
| 85 */ |
| 86 |
| 87 div#red-overlapped-reference |
| 88 { |
| 89 background-color: red; |
| 90 height: 100px; |
| 91 position: relative; |
| 92 width: 100px; |
| 93 z-index: -1; |
| 94 } |
| 95 ]]></style> |
| 96 </head> |
| 97 |
| 98 <body> |
| 99 |
| 100 <p>Test passes if there is a filled green square and <strong>no red</strong>.<
/p> |
| 101 |
| 102 <div id="green-overlapping-test"></div> |
| 103 |
| 104 <div id="red-overlapped-reference"></div> |
| 105 |
| 106 </body> |
| 107 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1157103007:
update-w3c-deps import using blink b712b6ce0eb599d90d890aa609f596c7852fb824 (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master