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

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-121.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-119-expected.xht ('k') | LayoutTests/imported/csswg-test/css-writing-modes-3/abs-pos-non-replaced-vlr-121-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 'top' and 'height' are 'auto' and 'bottom' is not 'auto'</tit le> 7 <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'd irection: ltr' and 'top' and 'height' are 'auto' and 'bottom' is not 'auto'</tit le>
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-013-ref.xht" /> 12 <link rel="match" href="abs-pos-non-replaced-vrl-002-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 'top' and 'height' are 'auto' and 'bottom' is not 'auto', then the height is based on the content a nd then solve for 'top'." /> 15 <meta name="assert" content="When 'direction' is 'ltr' and 'top' and 'height' are 'auto' and 'bottom' is not 'auto', then the height is based on content and t hen solve for 'top'." />
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
23 div#containing-block 18 div#containing-block
24 { 19 {
25 background: red url("support/bg-red-2col-2row-320x320.png"); 20 background: red url("support/bg-red-3col-3row-320x320.png");
26 color: transparent; 21 color: transparent;
27 direction: ltr; 22 direction: ltr;
28 font: 80px/1 Ahem; 23 font: 80px/1 Ahem;
29 height: 320px; 24 height: 320px;
30 position: relative; 25 position: relative;
31 width: 320px; 26 width: 320px;
32 } 27 }
33 28
34 div#containing-block > span 29 div#containing-block > span
35 { 30 {
36 background-color: red; 31 background-color: red;
37 bottom: 2em; 32 bottom: 1em;
38 color: green; 33 color: green;
39 height: auto; 34 height: auto;
40 position: absolute; 35 position: absolute;
41 top: auto; 36 top: auto;
37 -webkit-writing-mode: vertical-lr;
42 } 38 }
43 39
44 /* 40 /*
45 " 41 "
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. 42 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'
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, *-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.
52
53 "
54 1. 'left' and 'width' are 'auto' and 'right' is not 'auto', then the width is sh rink-to-fit. Then solve for 'left'
55 " 43 "
56 44
57 'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding- bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of contain ing block 45 'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding- bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of contain ing block
58 46
59 So: 47 So:
60 48
61 (solve) : top: auto 49 (solve) : top: auto
62 + 50 +
63 0px : margin-top 51 0px : margin-top
64 + 52 +
65 0px : border-top-width 53 0px : border-top-width
66 + 54 +
67 0px : padding-top 55 0px : padding-top
68 + 56 +
69 (based on the content) : height: auto 57 (based on content) : height: auto
70 + 58 +
71 0px : padding-bottom 59 0px : padding-bottom
72 + 60 +
73 0px : border-bottom-width 61 0px : border-bottom-width
74 + 62 +
75 0px : margin-bottom 63 0px : margin-bottom
76 + 64 +
77 160px : bottom 65 80px : bottom: auto
78 ===================== 66 =====================
79 320px : height of containing block 67 320px : height of containing block
80 68
81 gives us: 69 gives us:
82 70
83 (solve) : top: auto 71 (solve) : top: auto
84 + 72 +
85 0px : margin-top 73 0px : margin-top
86 + 74 +
87 0px : border-top-width 75 0px : border-top-width
88 + 76 +
89 0px : padding-top 77 0px : padding-top
90 + 78 +
91 80px : (based on the content) : height: auto 79 80px : (based on content) : height: auto
92 + 80 +
93 0px : padding-bottom 81 0px : padding-bottom
94 + 82 +
95 0px : border-bottom-width 83 0px : border-bottom-width
96 + 84 +
97 0px : margin-bottom 85 0px : margin-bottom
98 + 86 +
99 160px : bottom 87 80px : bottom: auto
100 ===================== 88 =====================
101 320px : height of containing block 89 320px : height of containing block
102 90
103 And so computed top value must be 80px . 91 And so computed top value must be 160px .
104 */ 92 */
105 93
106 ]]></style> 94 ]]></style>
107 95
108 </head> 96 </head>
109 97
110 <body> 98 <body>
111 99
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> 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>
113 101
114 <div id="containing-block">1 2 34<span>X</span></div> 102 <div id="containing-block">1 2 34<span>X</span></div>
115 103
116 </body> 104 </body>
117 </html> 105 </html>
OLDNEW
« no previous file with comments | « LayoutTests/imported/csswg-test/css-writing-modes-3/abs-pos-non-replaced-vlr-119-expected.xht ('k') | LayoutTests/imported/csswg-test/css-writing-modes-3/abs-pos-non-replaced-vlr-121-expected.xht » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698