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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/imported/csswg-test/css-writing-modes-3/abs-pos-non-replaced-vrl-128.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-vrl-126-expected.xht ('k') | LayoutTests/imported/csswg-test/css-writing-modes-3/abs-pos-non-replaced-vrl-128-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: rtl' and 'top' is 'auto' and 'height' and 'bottom' are not 'auto'</tit le> 7 <title>CSS Writing Modes Test: absolutely positioned non-replaced element - 'd irection: rtl' 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-003-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 'rtl' and 'top' is 'auto' and 'height' and 'bottom' are not 'auto', then solve for 'top'." /> 15 <meta name="assert" content="When 'direction' is 'rtl' 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 div#containing-block 18 div#containing-block
19 { 19 {
20 background: red url("support/bg-red-2col-3row-320x320.png"); 20 background: red url("support/bg-red-2col-3row-320x320.png");
21 color: transparent; 21 color: transparent;
22 direction: rtl; 22 direction: rtl;
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;
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: 1em; 32 bottom: 1em;
34 color: green; 33 color: green;
35 height: 1em; 34 height: auto;
36 position: absolute; 35 position: absolute;
37 top: auto; 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 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'
43 "
44 7.1 Principles of Layout in Vertical Writing Modes
45 http://www.w3.org/TR/css-writing-modes-3/#vertical-layout
46
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.
48
49 "
50 4. 'left' is 'auto', 'width' and 'right' are not 'auto', then solve for 'left'
51 " 43 "
52 44
53 '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
54 46
55 So: 47 So:
56 48
57 (solve) : top: auto 49 (solve) : top: auto
58 + 50 +
59 0px : margin-top 51 0px : margin-top
60 + 52 +
61 0px : border-top-width 53 0px : border-top-width
62 + 54 +
63 0px : padding-top 55 0px : padding-top
64 + 56 +
65 80px : height 57 (based on content) : height: auto
66 + 58 +
67 0px : padding-bottom 59 0px : padding-bottom
68 + 60 +
61 0px : border-bottom-width
62 +
63 0px : margin-bottom
64 +
65 80px : bottom
66 =====================
67 320px : height of containing block
68
69 gives us:
70
71 (solve) : top: auto
72 +
73 0px : margin-top
74 +
75 0px : border-top-width
76 +
77 0px : padding-top
78 +
79 80px : (based on content) : height: auto
80 +
81 0px : padding-bottom
82 +
69 0px : border-bottom-width 83 0px : border-bottom-width
70 + 84 +
71 0px : margin-bottom 85 0px : margin-bottom
72 + 86 +
73 80px : bottom 87 80px : bottom
74 ===================== 88 =====================
75 320px : height of containing block 89 320px : height of containing block
76 90
77 And so computed top value must be 160px . 91 And so computed top value must be 160px .
78 */ 92 */
79 93
80 ]]></style> 94 ]]></style>
81 95
82 </head> 96 </head>
83 97
84 <body> 98 <body>
85 99
86 <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>
87 101
88 <div id="containing-block">1 2 34<span>X</span></div> 102 <div id="containing-block">1 2 34<span>X</span></div>
89 103
90 </body> 104 </body>
91 </html> 105 </html>
OLDNEW
« no previous file with comments | « LayoutTests/imported/csswg-test/css-writing-modes-3/abs-pos-non-replaced-vrl-126-expected.xht ('k') | LayoutTests/imported/csswg-test/css-writing-modes-3/abs-pos-non-replaced-vrl-128-expected.xht » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698