Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(245)

Side by Side Diff: LayoutTests/imported/csswg-test/css-writing-modes-3/abs-pos-non-replaced-vlr-141.xht

Issue 1212773004: update-w3c-deps import using blink 6cad48f506ac504dcc1e1e445ac3f55734ab3daa: (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Created 5 years, 5 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
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 'left' and 'right' are 'auto' and 'width' is not 'auto'</titl e> 7 <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'd irection: ltr' and 'left' and 'right' are 'auto' and 'width' is not 'auto'</titl e>
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-vlr-003-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 'left' and 'right' are 'auto' and 'width' is not 'auto', then set 'left' to the static position and then solve for 'right'." /> 15 <meta name="assert" content="When 'direction' is 'ltr' and 'left' and 'right' are 'auto' and 'width' is not 'auto' and 'writing-mode' is 'vertical-lr', then s et 'left' to the static position and then solve for 'right'." />
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-2col-3row-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-lr;
27 } 28 }
28 29
29 div#containing-block > span 30 div#containing-block > span
30 { 31 {
31 background-color: red; 32 background-color: green;
32 color: green; 33 height: 1em;
33 left: auto; 34 left: auto;
34 position: absolute; 35 position: absolute;
35 right: auto; 36 right: auto;
36 width: 1em; 37 width: 1em;
37 -webkit-writing-mode: vertical-lr; 38 -webkit-writing-mode: horizontal-tb;
38 } 39 }
39 40
40 /* 41 /*
41 " 42 "
42 2. 'left' and 'right' are 'auto' and 'width' is not 'auto', then if the 'directi on' property of the element establishing the static-position containing block is 'ltr' set 'left' to the static position, otherwise set 'right' to the static po sition. Then solve for 'left' (if 'direction is 'rtl') or 'right' (if 'direction ' is 'ltr'). 43 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.
44 "
45 7.1 Principles of Layout in Vertical Writing Modes
46 http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
47
48 So here, *left properties and *right properties are input into the §10.6.4 algor ithms where *left properties refer to *top properties in the layout rules and wh ere *right properties refer to *bottom properties in the layout rules.
49
50 "
51 2. 'top' and 'bottom' are 'auto' and 'height' is not 'auto', then set 'top' to t he static position, set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'bottom'
43 " 52 "
44 53
45 'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'paddi ng-right' + 'border-right-width' + 'margin-right' + 'right' = width of containin g block 54 'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'paddi ng-right' + 'border-right-width' + 'margin-right' + 'right' = width of containin g block
46 55
47 So: 56 So:
48 57
49 160px : left: auto: set to static position 58 (solve) : right: auto
59 +
60 0px : margin-right
61 +
62 0px : border-right-width
63 +
64 0px : padding-right
65 +
66 80px : width
67 +
68 0px : padding-left
69 +
70 0px : border-left-width
50 + 71 +
51 0px : margin-left 72 0px : margin-left
52 + 73 +
53 0px : border-left-width 74 80px : left: auto: set to static position
54 +
55 0px : padding-left
56 +
57 80px : width
58 +
59 0px : padding-right
60 +
61 0px : border-right-width
62 +
63 0px : margin-right
64 +
65 (solve) : right: auto
66 ===================== 75 =====================
67 320px : width of containing block 76 320px : width of containing block
68 77
69 gives us: 78 And so computed right value must be 160px .
70
71 160px : left: auto: set to static position
72 +
73 0px : margin-left
74 +
75 0px : border-left-width
76 +
77 0px : padding-left
78 +
79 80px : width
80 +
81 0px : padding-right
82 +
83 0px : border-right-width
84 +
85 0px : margin-right
86 +
87 (solve) : right: auto
88 =====================
89 320px : width of containing block
90
91 And so computed right value must be 80px .
92 */ 79 */
93 80
94 ]]></style> 81 ]]></style>
95 82
96 </head> 83 </head>
97 84
98 <body> 85 <body>
99 86
100 <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="3 6" alt="Image download support must be enabled" /></p> 87 <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="3 6" alt="Image download support must be enabled" /></p>
101 88
102 <div id="containing-block">1 2 34<span>X</span></div> 89 <div id="containing-block">1 2 34<span></span></div>
103 90
104 </body> 91 </body>
105 </html> 92 </html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698