OLD | NEW |
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/x
html1/DTD/xhtml1-strict.dtd"> | 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/x
html1/DTD/xhtml1-strict.dtd"> |
2 | 2 |
3 <html xmlns="http://www.w3.org/1999/xhtml"> | 3 <html xmlns="http://www.w3.org/1999/xhtml"> |
4 | 4 |
5 <head> | 5 <head> |
6 | 6 |
7 <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'd
irection: ltr' and 'height' and 'bottom' are 'auto' and 'top' is not 'auto'</tit
le> | 7 <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'd
irection: ltr' and 'top', 'height', and 'bottom' are 'auto'</title> |
8 | 8 |
9 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserB
ugsSection/css21testsuite/" /> | 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" /> | 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="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replace
d-width" title="10.3.7 Absolutely positioned, non-replaced elements" /> | 11 <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replace
d-height" title="10.6.4 Absolutely positioned, non-replaced elements" /> |
12 <link rel="match" href="abs-pos-non-replaced-vrl-004-ref.xht" /> | 12 <link rel="match" href="abs-pos-non-replaced-vrl-004-ref.xht" /> |
13 | 13 |
14 <meta name="flags" content="ahem image" /> | 14 <meta name="flags" content="ahem image" /> |
15 <meta name="assert" content="When 'direction' is 'ltr' and 'height' and 'botto
m' are 'auto' and 'top' is not 'auto', then the height is based on the content a
nd then solve for 'bottom'." /> | 15 <meta name="assert" content="When 'direction' is 'ltr' and 'top', 'height' and
'bottom' are 'auto', then set 'top' to the static position, the height is based
on content and then solve for 'bottom'." /> |
16 | 16 |
17 <style type="text/css"><![CDATA[ | 17 <style type="text/css"><![CDATA[ |
18 div#containing-block | 18 div#containing-block |
19 { | 19 { |
20 background: red url("support/bg-red-3col-2row-320x320.png"); | 20 background: red url("support/bg-red-3col-2row-320x320.png"); |
21 color: transparent; | 21 color: transparent; |
22 direction: ltr; | 22 direction: ltr; |
23 font: 80px/1 Ahem; | 23 font: 80px/1 Ahem; |
24 height: 320px; | 24 height: 320px; |
25 position: relative; | 25 position: relative; |
26 width: 320px; | 26 width: 320px; |
27 -webkit-writing-mode: vertical-rl; | |
28 } | 27 } |
29 | 28 |
30 div#containing-block > span | 29 div#containing-block > span |
31 { | 30 { |
32 background-color: red; | 31 background-color: red; |
33 bottom: auto; | 32 bottom: auto; |
34 color: green; | 33 color: green; |
35 height: auto; | 34 height: auto; |
36 position: absolute; | 35 position: absolute; |
37 top: 1em; | 36 top: auto; |
| 37 -webkit-writing-mode: vertical-rl; |
38 } | 38 } |
39 | 39 |
40 /* | 40 /* |
41 " | 41 " |
42 Layout calculation rules (such as those in CSS2.1, Section 10.3) that apply to t
he horizontal dimension in horizontal writing modes instead apply to the vertica
l dimension in vertical writing modes. | 42 If all three of 'top', 'height', and 'bottom' are auto, set 'top' to the static
position and apply rule number three below. |
43 " | |
44 7.1 Principles of Layout in Vertical Writing Modes | |
45 http://www.w3.org/TR/css-writing-modes-3/#vertical-layout | |
46 | 43 |
47 So here, *-top and *-bottom properties are input into the §10.3.7 algorithms whe
re *-top properties refer to *-left properties in the layout rules and where *-b
ottom properties refer to *-right properties in the layout rules. | 44 3. 'height' and 'bottom' are 'auto' and 'top' is not 'auto', then the height is
based on the content per 10.6.7, set 'auto' values for 'margin-top' and 'margin-
bottom' to 0, and solve for 'bottom' |
48 | |
49 " | |
50 3. 'width' and 'right' are 'auto' and 'left' is not 'auto', then the width is sh
rink-to-fit . Then solve for 'right' | |
51 " | 45 " |
52 | 46 |
53 'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-
bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of contain
ing block | 47 'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-
bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of contain
ing block |
54 | 48 |
55 So: | 49 So: |
56 | 50 |
57 80px : top | 51 80px : top: auto: set to static position |
58 + | 52 + |
59 0px : margin-top | 53 0px : margin-top |
60 + | 54 + |
61 0px : border-top-width | 55 0px : border-top-width |
62 + | 56 + |
63 0px : padding-top | 57 0px : padding-top |
64 + | 58 + |
65 (based on the content) : height: auto | 59 (shrink-to-fit) : height: auto |
66 + | 60 + |
67 0px : padding-bottom | 61 0px : padding-bottom |
68 + | 62 + |
69 0px : border-bottom-width | 63 0px : border-bottom-width |
70 + | 64 + |
71 0px : margin-bottom | 65 0px : margin-bottom |
72 + | 66 + |
73 (solve) : bottom: auto | 67 (solve) : bottom: auto |
74 ===================== | 68 ===================== |
75 320px : height of containing block | 69 320px : height of containing block |
76 | 70 |
77 gives us: | 71 gives us: |
78 | 72 |
79 80px : top | 73 80px : top: auto: set to static position |
80 + | 74 + |
81 0px : margin-top | 75 0px : margin-top |
82 + | 76 + |
83 0px : border-top-width | 77 0px : border-top-width |
84 + | 78 + |
85 0px : padding-top | 79 0px : padding-top |
86 + | 80 + |
87 80px : (based on the content) : height: auto | 81 80px : (shrink-to-fit) : height: auto |
88 + | 82 + |
89 0px : padding-bottom | 83 0px : padding-bottom |
90 + | 84 + |
91 0px : border-bottom-width | 85 0px : border-bottom-width |
92 + | 86 + |
93 0px : margin-bottom | 87 0px : margin-bottom |
94 + | 88 + |
95 (solve) : bottom: auto | 89 (solve) : bottom: auto |
96 ===================== | 90 ===================== |
97 320px : height of containing block | 91 320px : height of containing block |
98 | 92 |
99 And so computed bottom value must be 160px . | 93 And so computed bottom value must be 160px . |
100 */ | 94 */ |
101 | 95 |
102 ]]></style> | 96 ]]></style> |
103 | 97 |
104 </head> | 98 </head> |
105 | 99 |
106 <body> | 100 <body> |
107 | 101 |
108 <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="3
6" alt="Image download support must be enabled" /></p> | 102 <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="3
6" alt="Image download support must be enabled" /></p> |
109 | 103 |
110 <div id="containing-block">1 2 34<span>X</span></div> | 104 <div id="containing-block">1 2 34<span>X</span></div> |
111 | 105 |
112 </body> | 106 </body> |
113 </html> | 107 </html> |
OLD | NEW |