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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/imported/csswg-test/css-writing-modes-3/abs-pos-non-replaced-vlr-123.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
« no previous file with comments | « LayoutTests/imported/csswg-test/css-writing-modes-3/abs-pos-non-replaced-vlr-121-expected.xht ('k') | LayoutTests/imported/csswg-test/css-writing-modes-3/abs-pos-non-replaced-vlr-123-expected.xht » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
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 'width' and 'right' are 'auto' and 'left' is not 'auto'</titl e> 7 <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'd irection: ltr' and 'width' and 'right' are 'auto' and 'left' 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-vlr-009-ref.xht" /> 12 <link rel="match" href="abs-pos-non-replaced-vlr-007-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 'width' and 'right' are 'auto' and 'left' is not 'auto', then the width becomes shrink-to-fit and t hen solve for 'right'." /> 15 <meta name="assert" content="When 'direction' is 'ltr' and 'width' and 'right' are 'auto' and 'left' is not 'auto' and 'writing-mode' is 'vertical-rl', then t he width is based on the content and then solve for 'right'." />
16 16
17 <style type="text/css"><![CDATA[ 17 <style type="text/css"><![CDATA[
18 html
19 {
20 -webkit-writing-mode: vertical-lr;
21 }
22
18 div#containing-block 23 div#containing-block
19 { 24 {
20 background: red url("support/bg-red-2col-2row-320x320.png"); 25 background: red url("support/bg-red-2col-3row-320x320.png");
21 color: transparent; 26 color: transparent;
22 direction: ltr; 27 direction: ltr;
23 font: 80px/1 Ahem; 28 font: 80px/1 Ahem;
24 height: 320px; 29 height: 320px;
25 position: relative; 30 position: relative;
26 width: 320px; 31 width: 320px;
27 } 32 }
28 33
29 div#containing-block > span 34 div#containing-block > span
30 { 35 {
31 background-color: red; 36 background-color: red;
32 color: green; 37 color: green;
33 left: 1em; 38 left: 1em;
34 position: absolute; 39 position: absolute;
35 right: auto; 40 right: auto;
36 width: auto; 41 width: auto;
37 -webkit-writing-mode: vertical-lr;
38 } 42 }
39 43
40 /* 44 /*
45 "
46 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.
47 "
48 7.1 Principles of Layout in Vertical Writing Modes
49 http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
50
51 So here, *left and *right properties are input into the §10.6.4 algorithms where *left properties refer to *top properties in the layout rules and where *right properties refer to *bottom properties in the layout rules.
41 52
42 " 53 "
43 3. 'width' and 'right' are 'auto' and 'left' is not 'auto', then the width is sh rink-to-fit . Then solve for 'right' 54 1. 'top' and 'height' are 'auto' and 'bottom' 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 'top'
44 " 55 "
45 56
46 'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'paddi ng-right' + 'border-right-width' + 'margin-right' + 'right' = width of containin g block 57 'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'paddi ng-right' + 'border-right-width' + 'margin-right' + 'right' = width of containin g block
47 58
48 So: 59 So:
49 60
50 80px : left 61 (solve) : right: auto
62 +
63 0px : margin-right
64 +
65 0px : border-right-width
66 +
67 0px : padding-right
68 +
69 (based on the content) : width: auto
70 +
71 0px : padding-left
72 +
73 0px : border-left-width
51 + 74 +
52 0px : margin-left 75 0px : margin-left
53 + 76 +
54 0px : border-left-width 77 80px : left: auto
55 +
56 0px : padding-left
57 +
58 (shrink-to-fit) : width: auto
59 +
60 0px : padding-right
61 +
62 0px : border-right-width
63 +
64 0px : margin-right
65 +
66 (solve) : right: auto
67 ===================== 78 =====================
68 320px : width of containing block 79 320px : width of containing block
69 80
70 gives us: 81 gives us:
71 82
72 80px : left 83 (solve) : right: auto
84 +
85 0px : margin-right
86 +
87 0px : border-right-width
88 +
89 0px : padding-right
90 +
91 80px : (based on the content) : width: auto
92 +
93 0px : padding-left
94 +
95 0px : border-left-width
73 + 96 +
74 0px : margin-left 97 0px : margin-left
75 + 98 +
76 0px : border-top-width 99 80px : left: auto
77 +
78 0px : padding-top
79 +
80 80px : (shrink-to-fit) : width: auto
81 +
82 0px : padding-right
83 +
84 0px : border-right-width
85 +
86 0px : margin-right
87 +
88 (solve) : right: auto
89 ===================== 100 =====================
90 320px : width of containing block 101 320px : width of containing block
91 102
92 And so computed right value must be 160px . 103 And so computed right value must be 160px .
93 */ 104 */
94 105
95 ]]></style> 106 ]]></style>
96 107
97 </head> 108 </head>
98 109
99 <body> 110 <body>
100 111
101 <p><img src="support/pass-cdts-abs-pos-non-replaced.png" width="246" height="3 6" alt="Image download support must be enabled" /></p> 112 <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 113
103 <div id="containing-block">1 2 34<span>X</span></div> 114 <div id="containing-block">1 2 34<span>X</span></div>
104 115
105 </body> 116 </body>
106 </html> 117 </html>
OLDNEW
« no previous file with comments | « LayoutTests/imported/csswg-test/css-writing-modes-3/abs-pos-non-replaced-vlr-121-expected.xht ('k') | LayoutTests/imported/csswg-test/css-writing-modes-3/abs-pos-non-replaced-vlr-123-expected.xht » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698