| 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: rtl' 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="abs-pos-non-replaced-icb-vrl-004-ref.xht" /> |
| 12 |
| 13 <meta content="image" 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 'rtl', 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 'rtl' must
set right to static position and then solve for 'left'. 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: rtl; |
| 20 } |
| 21 |
| 22 img |
| 23 { |
| 24 vertical-align: top; |
| 25 } |
| 26 |
| 27 div#green-overlapping-test |
| 28 { |
| 29 background-color: green; |
| 30 border-left: green solid 35px; |
| 31 border-right: green solid 15px; |
| 32 height: 100px; |
| 33 left: auto; |
| 34 position: absolute; |
| 35 right: auto; |
| 36 width: 50px; |
| 37 -webkit-writing-mode: vertical-rl; |
| 38 } |
| 39 |
| 40 /* |
| 41 " |
| 42 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 'rtl' set 'right' to the static position (...) Then solve for 'left' (if 'dir
ection is 'rtl'). |
| 43 " |
| 44 10.3.7 Absolutely positioned, non-replaced elements |
| 45 http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width |
| 46 |
| 47 So: |
| 48 |
| 49 auto : left |
| 50 + |
| 51 0px : margin-left |
| 52 + |
| 53 35px : border-left-width |
| 54 + |
| 55 0px : padding-left |
| 56 + |
| 57 50px : width |
| 58 + |
| 59 0px : padding-right |
| 60 + |
| 61 15px : border-right-width |
| 62 + |
| 63 0px : margin-right |
| 64 + |
| 65 auto : right (set to static position) |
| 66 ==================== |
| 67 : width of containing block (width of Initial Containing Block) |
| 68 |
| 69 becomes |
| 70 |
| 71 solve : left |
| 72 + |
| 73 0px : margin-left |
| 74 + |
| 75 35px : border-left-width |
| 76 + |
| 77 0px : padding-left |
| 78 + |
| 79 50px : width |
| 80 + |
| 81 0px : padding-right |
| 82 + |
| 83 15px : border-right-width |
| 84 + |
| 85 0px : margin-right |
| 86 + |
| 87 8px : right (static position) |
| 88 ==================== |
| 89 : width of containing block (width of Initial Containing Block) |
| 90 */ |
| 91 |
| 92 div#red-overlapped-reference |
| 93 { |
| 94 background-color: red; |
| 95 height: 100px; |
| 96 position: relative; |
| 97 width: 100px; |
| 98 z-index: -1; |
| 99 } |
| 100 ]]></style> |
| 101 </head> |
| 102 |
| 103 <body> |
| 104 |
| 105 <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="3
6" alt="Image download support must be enabled" /></p> |
| 106 |
| 107 <!-- |
| 108 The image says: |
| 109 Test passes if there is a filled green square and <strong>no red</strong>. |
| 110 --> |
| 111 |
| 112 <div id="green-overlapping-test"></div> |
| 113 |
| 114 <div id="red-overlapped-reference"></div> |
| 115 |
| 116 </body> |
| 117 </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