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

Side by Side Diff: LayoutTests/imported/csswg-test/css-writing-modes-3/abs-pos-non-replaced-vlr-105.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 '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-lr;
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>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698