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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/fast/alignment/parse-alignment-of-root-elements.html

Issue 2455093002: [css-align] Don't resolve 'auto' values for computed style. (Closed)
Patch Set: Removed some outdated comments. Created 3 years, 6 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
« third_party/WebKit/LayoutTests/fast/alignment/alignment-and-anomymous-boxes-expected.html ('K') | « third_party/WebKit/LayoutTests/fast/alignment/parse-align-self.html ('k') | third_party/WebKit/LayoutTests/fast/alignment/parse-alignment-of-root-elements-expected.txt » ('j') | third_party/WebKit/LayoutTests/fast/alignment/parse-place-self.html » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <script src="../../resources/testharness.js"></script> 2 <script src="../../resources/testharness.js"></script>
3 <script src="../../resources/testharnessreport.js"></script> 3 <script src="../../resources/testharnessreport.js"></script>
4 <script src="resources/alignment-parsing-utils-th.js"></script> 4 <script src="resources/alignment-parsing-utils-th.js"></script>
5 <html> 5 <html>
6 <body> 6 <body>
7 <p>Test to verify auto value resolution works as expected in root elements (eg. document root / shadow roots / slotted elements / elements inside slot)</p> 7 <p>Test to verify auto value resolution works as expected in root elements (eg. document root / shadow roots / slotted elements / elements inside slot)</p>
8 <div id="log"></div> 8 <div id="log"></div>
9 9
10 <div id="host"> 10 <div id="host">
11 <div id="slotted" slot="s1"></div> 11 <div id="slotted" slot="s1"></div>
12 </div> 12 </div>
13 <script> 13 <script>
14 14
15 var block = document.getElementById("host"); 15 var block = document.getElementById("host");
16 16
17 console.log(""); 17 console.log("");
18 console.log("*** Test 'auto' value resolution for the document root node. ***"); 18 console.log("*** Test 'auto' value resolution for the document root node. ***");
19 19
20 test(function() { 20 test(function() {
21 document.documentElement.style.alignSelf = "center"; 21 document.documentElement.style.alignSelf = "center";
22 checkValues(document.documentElement, "alignSelf", "align-self", "center", " center"); 22 checkValues(document.documentElement, "alignSelf", "align-self", "center", " center");
23 document.documentElement.style.alignSelf = "auto"; 23 document.documentElement.style.alignSelf = "auto";
24 checkValues(document.documentElement, "alignSelf", "align-self", "auto", "no rmal"); 24 checkValues(document.documentElement, "alignSelf", "align-self", "auto", "au to");
25 }, "Check out how the DOM's root element resolves the align-self 'auto' values." ); 25 }, "Check out how the DOM's root element resolves the align-self 'auto' values." );
26 26
27 test(function() { 27 test(function() {
28 document.documentElement.style.alignItems = "center"; 28 document.documentElement.style.alignItems = "center";
29 checkValues(document.documentElement, "alignItems", "align-items", "center", "center"); 29 checkValues(document.documentElement, "alignItems", "align-items", "center", "center");
30 document.body.style.alignItems = "auto"; // The 'auto' value is not valid fo r align-items. 30 document.body.style.alignItems = "auto"; // The 'auto' value is not valid fo r align-items.
31 document.body.style.alignSelf = "auto"; 31 document.body.style.alignSelf = "auto";
32 checkValues(document.body, "alignItems", "align-items", "", "normal"); 32 checkValues(document.body, "alignItems", "align-items", "", "normal");
33 checkValues(document.body, "alignSelf", "align-self", "auto", "center"); 33 checkValues(document.body, "alignSelf", "align-self", "auto", "auto");
34 block.style.alignItems = ""; // Default value is 'normal' for align-items. 34 block.style.alignItems = ""; // Default value is 'normal' for align-items.
35 block.style.alignSelf = "auto"; 35 block.style.alignSelf = "auto";
36 checkValues(block, "alignItems", "align-items", "", "normal"); 36 checkValues(block, "alignItems", "align-items", "", "normal");
37 checkValues(block, "alignSelf", "align-self", "auto", "normal"); 37 checkValues(block, "alignSelf", "align-self", "auto", "auto");
38 }, "Check out how the DOM's root element align-items's value is used to resolve its children's align-self 'auto' values."); 38 }, "Check out how the DOM's root element align-items's value is used to resolve its children's align-self 'auto' values.");
39 39
40 test(function() { 40 test(function() {
41 document.documentElement.style.alignItems = "auto"; // The 'auto' value is n ot valid for align-items. 41 document.documentElement.style.alignItems = "auto"; // The 'auto' value is n ot valid for align-items.
42 checkValues(document.documentElement, "alignItems", "align-items", "center", "center"); 42 checkValues(document.documentElement, "alignItems", "align-items", "center", "center");
43 document.documentElement.style.alignItems = ""; // Default value is 'normal' for align-items. 43 document.documentElement.style.alignItems = ""; // Default value is 'normal' for align-items.
44 checkValues(document.documentElement, "alignItems", "align-items", "", "norm al"); 44 checkValues(document.documentElement, "alignItems", "align-items", "", "norm al");
45 }, "Check out how the DOM's root element deals with 'auto' value in align-items. "); 45 }, "Check out how the DOM's root element deals with 'auto' value in align-items. ");
46 46
47 test(function() { 47 test(function() {
48 document.documentElement.style.justifySelf = "left"; 48 document.documentElement.style.justifySelf = "left";
49 checkValues(document.documentElement, "justifySelf", "justify-self", "left", "left"); 49 checkValues(document.documentElement, "justifySelf", "justify-self", "left", "left");
50 document.documentElement.style.justifySelf = "auto"; 50 document.documentElement.style.justifySelf = "auto";
51 checkValues(document.documentElement, "justifySelf", "justify-self", "auto", "normal"); 51 checkValues(document.documentElement, "justifySelf", "justify-self", "auto", "auto");
52 }, "Check out how the DOM's root element resolves the justify-self 'auto' values ."); 52 }, "Check out how the DOM's root element resolves the justify-self 'auto' values .");
53 53
54 test(function() { 54 test(function() {
55 console.log(); 55 console.log();
56 document.documentElement.style.justifyItems = "center"; 56 document.documentElement.style.justifyItems = "center";
57 checkValues(document.documentElement, "justifyItems", "justify-items", "cent er", "center"); 57 checkValues(document.documentElement, "justifyItems", "justify-items", "cent er", "center");
58 document.body.style.justifyItems = "auto"; 58 document.body.style.justifyItems = "auto";
59 document.body.style.justifySelf = "auto"; 59 document.body.style.justifySelf = "auto";
60 checkValues(document.body, "justifyItems", "justify-items", "auto", "normal" ); 60 checkValues(document.body, "justifyItems", "justify-items", "auto", "normal" );
61 checkValues(document.body, "justifySelf", "justify-self", "auto", "center"); 61 checkValues(document.body, "justifySelf", "justify-self", "auto", "auto");
62 block.style.justifyItems = "auto"; 62 block.style.justifyItems = "auto";
63 block.style.justifySelf = "auto"; 63 block.style.justifySelf = "auto";
64 checkValues(block, "justifyItems", "justify-items", "auto", "normal"); 64 checkValues(block, "justifyItems", "justify-items", "auto", "normal");
65 checkValues(block, "justifySelf", "justify-self", "auto", "normal"); 65 checkValues(block, "justifySelf", "justify-self", "auto", "auto");
66 }, "Check out how the DOM's root element align-items's value is used to resolve its children's align-self 'auto' values."); 66 }, "Check out how the DOM's root element justify-items's value is used to resolv e its children's justify-self 'auto' values.");
67 67
68 test(function() { 68 test(function() {
69 document.documentElement.style.justifyItems = "auto"; 69 document.documentElement.style.justifyItems = "auto";
70 checkValues(document.documentElement, "justifyItems", "justify-items", "auto ", "normal"); 70 checkValues(document.documentElement, "justifyItems", "justify-items", "auto ", "normal");
71 checkValues(document.body, "justifySelf", "justify-self", "auto", "normal") ; 71 checkValues(document.body, "justifySelf", "justify-self", "auto", "auto");
72 checkValues(block, "justifySelf", "justify-self", "auto", "normal"); 72 checkValues(block, "justifySelf", "justify-self", "auto", "auto");
73 }, "Check out how the DOM's root element deals with 'auto' value in justify-item s."); 73 }, "Check out how the DOM's root element deals with 'auto' value in justify-item s.");
74 74
75 test(function() { 75 test(function() {
76 document.documentElement.style.justifyItems = "legacy center"; 76 document.documentElement.style.justifyItems = "legacy center";
77 checkValues(document.documentElement, "justifyItems", "justify-items", "leg acy center", "legacy center"); 77 checkValues(document.documentElement, "justifyItems", "justify-items", "leg acy center", "legacy center");
78 document.body.style.justifyItems = "auto"; 78 document.body.style.justifyItems = "auto";
79 document.body.style.justifySelf = "auto"; 79 document.body.style.justifySelf = "auto";
80 checkValues(document.body, "justifyItems", "justify-items", "auto", "legacy center"); 80 checkValues(document.body, "justifyItems", "justify-items", "auto", "legacy center");
81 checkValues(document.body, "justifySelf", "justify-self", "auto", "center") ; 81 checkValues(document.body, "justifySelf", "justify-self", "auto", "auto");
82 block.style.justifyItems = "auto"; 82 block.style.justifyItems = "auto";
83 block.style.justifySelf = "auto"; 83 block.style.justifySelf = "auto";
84 checkValues(block, "justifyItems", "justify-items", "auto", "legacy center" ); 84 checkValues(block, "justifyItems", "justify-items", "auto", "legacy center" );
85 checkValues(block, "justifySelf", "justify-self", "auto", "center"); 85 checkValues(block, "justifySelf", "justify-self", "auto", "auto");
86 }, "Check out how the DOM's root element justify-items's value with 'legacy' key word is used to resolve any descendant's justify-items 'auto' values."); 86 }, "Check out how the DOM's root element justify-items's value with 'legacy' key word is used to resolve any descendant's justify-items 'auto' values.");
87 87
88 test(function() { 88 test(function() {
89 document.documentElement.style.justifyItems = "auto"; 89 document.documentElement.style.justifyItems = "auto";
90 checkValues(document.body, "justifyItems", "justify-items", "auto", "normal "); 90 checkValues(document.body, "justifyItems", "justify-items", "auto", "normal ");
91 checkValues(document.body, "justifySelf", "justify-self", "auto", "normal") ; 91 checkValues(document.body, "justifySelf", "justify-self", "auto", "auto");
92 checkValues(block, "justifyItems", "justify-items", "auto", "normal"); 92 checkValues(block, "justifyItems", "justify-items", "auto", "normal");
93 checkValues(block, "justifySelf", "justify-self", "auto", "normal"); 93 checkValues(block, "justifySelf", "justify-self", "auto", "auto");
94 }, "Check out how the DOM's root element recomputes its descendant's style when 'legacy' keyword is removed from its justify-items value."); 94 }, "Check out how the DOM's root element recomputes its descendant's style when 'legacy' keyword is removed from its justify-items value.");
95 95
96 console.log(""); 96 console.log("");
97 console.log("*** Test 'auto' value resolution for the shadow DOM root node. ***" ); 97 console.log("*** Test 'auto' value resolution for the shadow DOM root node. ***" );
98 98
99 var shadowHost = document.getElementById("host") 99 var shadowHost = document.getElementById("host")
100 var shadowRoot = shadowHost.attachShadow({mode:"open"}); 100 var shadowRoot = shadowHost.attachShadow({mode:"open"});
101 var shadowNode = document.createElement('div'); 101 var shadowNode = document.createElement('div');
102 shadowRoot.appendChild(shadowNode); 102 shadowRoot.appendChild(shadowNode);
103 103
104 console.log(""); 104 console.log("");
105 console.log(); 105 console.log();
106 106
107 test(function() { 107 test(function() {
108 shadowHost.style.alignItems = "center"; 108 shadowHost.style.alignItems = "center";
109 shadowNode.style.alignItems = "right"; 109 shadowNode.style.alignItems = "right";
110 checkValues(shadowHost, "alignItems", "align-items", "center", "center"); 110 checkValues(shadowHost, "alignItems", "align-items", "center", "center");
111 checkValues(shadowNode, "alignItems", "align-items", "right", "right"); 111 checkValues(shadowNode, "alignItems", "align-items", "right", "right");
112 shadowNode.style.alignItems = ""; 112 shadowNode.style.alignItems = "";
113 checkValues(shadowNode, "alignItems", "align-items", "", "normal"); 113 checkValues(shadowNode, "alignItems", "align-items", "", "normal");
114 shadowNode.style.alignSelf = "auto"; 114 shadowNode.style.alignSelf = "auto";
115 checkValues(shadowNode, "alignSelf", "align-self", "auto", "center"); 115 checkValues(shadowNode, "alignSelf", "align-self", "auto", "auto");
116 }, "Shadow Node inherits from ShadowHost to resolve the 'auto' values for align- self."); 116 }, "Shadow Node inherits from ShadowHost to resolve the 'auto' values for align- self.");
117 117
118 test(function() { 118 test(function() {
119 shadowHost.style.justifyItems = "center"; 119 shadowHost.style.justifyItems = "center";
120 shadowNode.style.justifyItems = "right"; 120 shadowNode.style.justifyItems = "right";
121 checkValues(shadowHost, "justifyItems", "justify-items", "center", "center") ; 121 checkValues(shadowHost, "justifyItems", "justify-items", "center", "center") ;
122 checkValues(shadowNode, "justifyItems", "justify-items", "right", "right"); 122 checkValues(shadowNode, "justifyItems", "justify-items", "right", "right");
123 shadowNode.style.justifyItems = ""; 123 shadowNode.style.justifyItems = "";
124 checkValues(shadowNode, "justifyItems", "justify-items", "", "normal"); 124 checkValues(shadowNode, "justifyItems", "justify-items", "", "normal");
125 shadowNode.style.justifySelf = "auto"; 125 shadowNode.style.justifySelf = "auto";
126 checkValues(shadowNode, "justifySelf", "justify-self", "auto", "center"); 126 checkValues(shadowNode, "justifySelf", "justify-self", "auto", "auto");
127 }, "Shadow Node inherits from ShadowHost to resolve the 'auto' values for justif y-self."); 127 }, "Shadow Node inherits from ShadowHost to resolve the 'auto' values for justif y-self.");
128 128
129 test(function() { 129 test(function() {
130 shadowHost.style.justifyItems = "auto"; 130 shadowHost.style.justifyItems = "auto";
131 shadowNode.style.justifyItems = "right"; 131 shadowNode.style.justifyItems = "right";
132 shadowNode.style.justifySelf = "auto"; 132 shadowNode.style.justifySelf = "auto";
133 checkValues(shadowHost, "justifyItems", "justify-items", "auto", "normal"); 133 checkValues(shadowHost, "justifyItems", "justify-items", "auto", "normal");
134 checkValues(shadowNode, "justifyItems", "justify-items", "right", "right"); 134 checkValues(shadowNode, "justifyItems", "justify-items", "right", "right");
135 checkValues(shadowNode, "justifySelf", "justify-self", "auto", "normal"); 135 checkValues(shadowNode, "justifySelf", "justify-self", "auto", "auto");
136 136
137 checkValues(shadowHost, "justifyItems", "justify-items", "auto", "normal"); 137 checkValues(shadowHost, "justifyItems", "justify-items", "auto", "normal");
138 document.documentElement.style.justifyItems = "legacy center"; 138 document.documentElement.style.justifyItems = "legacy center";
139 checkValues(document.documentElement, "justifyItems", "justify-items", "leg acy center", "legacy center"); 139 checkValues(document.documentElement, "justifyItems", "justify-items", "leg acy center", "legacy center");
140 checkValues(shadowHost, "justifyItems", "justify-items", "auto", "legacy ce nter"); 140 checkValues(shadowHost, "justifyItems", "justify-items", "auto", "legacy ce nter");
141 checkValues(shadowNode, "justifyItems", "justify-items", "right", "right"); 141 checkValues(shadowNode, "justifyItems", "justify-items", "right", "right");
142 checkValues(shadowNode, "justifySelf", "justify-self", "auto", "center"); 142 checkValues(shadowNode, "justifySelf", "justify-self", "auto", "auto");
143 shadowNode.style.justifyItems = "auto"; 143 shadowNode.style.justifyItems = "auto";
144 checkValues(shadowNode, "justifyItems", "justify-items", "auto", "legacy cen ter"); 144 checkValues(shadowNode, "justifyItems", "justify-items", "auto", "legacy cen ter");
145 document.documentElement.style.justifyItems = "auto"; 145 document.documentElement.style.justifyItems = "auto";
146 }, "Check out how the 'legacy' keyword in justify-items propagates from the DOM Tree to the Shadow Node."); 146 }, "Check out how the 'legacy' keyword in justify-items propagates from the DOM Tree to the Shadow Node.");
147 147
148 148
149 console.log(""); 149 console.log("");
150 console.log("*** Test 'auto' value resolution for the shadow DOM 'slotted' eleme nts. ***"); 150 console.log("*** Test 'auto' value resolution for the shadow DOM 'slotted' eleme nts. ***");
151 151
152 var slotted = document.getElementById("slotted"); 152 var slotted = document.getElementById("slotted");
153 153
154 test(function() { 154 test(function() {
155 shadowHost.style.alignItems = "center"; 155 shadowHost.style.alignItems = "center";
156 shadowNode.style.alignItems = "right"; 156 shadowNode.style.alignItems = "right";
157 slotted.style.alignItems = "left"; 157 slotted.style.alignItems = "left";
158 checkValues(slotted, "alignItems", "align-items", "left", "left"); 158 checkValues(slotted, "alignItems", "align-items", "left", "left");
159 slotted.style.alignItems = ""; 159 slotted.style.alignItems = "";
160 checkValues(slotted, "alignItems", "align-items", "", "normal"); 160 checkValues(slotted, "alignItems", "align-items", "", "normal");
161 slotted.style.alignSelf = "start"; 161 slotted.style.alignSelf = "start";
162 checkValues(slotted, "alignSelf", "align-self", "start", "start"); 162 checkValues(slotted, "alignSelf", "align-self", "start", "start");
163 slotted.style.alignSelf = "auto"; 163 slotted.style.alignSelf = "auto";
164 checkValues(slotted, "alignSelf", "align-self", "auto", "normal"); 164 checkValues(slotted, "alignSelf", "align-self", "auto", "auto");
165 }, "Check out how align-self uses the 'shadowHost' as 'slotted' element's parent while 'slot' is not assigned."); 165 }, "Check out how align-self uses the 'shadowHost' as 'slotted' element's parent while 'slot' is not assigned.");
166 166
167 test(function() { 167 test(function() {
168 shadowHost.style.justifyItems = "center"; 168 shadowHost.style.justifyItems = "center";
169 shadowNode.style.justifyItems = "right"; 169 shadowNode.style.justifyItems = "right";
170 slotted.style.justifyItems = "left"; 170 slotted.style.justifyItems = "left";
171 checkValues(slotted, "justifyItems", "justify-items", "left", "left"); 171 checkValues(slotted, "justifyItems", "justify-items", "left", "left");
172 slotted.style.justifyItems = ""; 172 slotted.style.justifyItems = "";
173 checkValues(slotted, "justifyItems", "justify-items", "", "normal"); 173 checkValues(slotted, "justifyItems", "justify-items", "", "normal");
174 slotted.style.justifySelf = "start"; 174 slotted.style.justifySelf = "start";
175 checkValues(slotted, "justifySelf", "justify-self", "start", "start"); 175 checkValues(slotted, "justifySelf", "justify-self", "start", "start");
176 slotted.style.justifySelf = "auto"; 176 slotted.style.justifySelf = "auto";
177 checkValues(slotted, "justifySelf", "justify-self", "auto", "normal"); 177 checkValues(slotted, "justifySelf", "justify-self", "auto", "auto");
178 }, "Check out how justify-self uses the 'shadowHost' as 'slotted' element's pare nt while 'slot' is not assigned."); 178 }, "Check out how justify-self uses the 'shadowHost' as 'slotted' element's pare nt while 'slot' is not assigned.");
179 179
180 test(function() { 180 test(function() {
181 shadowHost.style.justifyItems = "auto"; 181 shadowHost.style.justifyItems = "auto";
182 shadowNode.style.justifyItems = "right"; 182 shadowNode.style.justifyItems = "right";
183 checkValues(shadowHost, "justifyItems", "justify-items", "auto", "normal"); 183 checkValues(shadowHost, "justifyItems", "justify-items", "auto", "normal");
184 checkValues(shadowNode, "justifyItems", "justify-items", "right", "right"); 184 checkValues(shadowNode, "justifyItems", "justify-items", "right", "right");
185 document.documentElement.style.justifyItems = "legacy center"; 185 document.documentElement.style.justifyItems = "legacy center";
186 checkValues(document.documentElement, "justifyItems", "justify-items", "leg acy center", "legacy center"); 186 checkValues(document.documentElement, "justifyItems", "justify-items", "leg acy center", "legacy center");
187 checkValues(shadowHost, "justifyItems", "justify-items", "auto", "legacy ce nter"); 187 checkValues(shadowHost, "justifyItems", "justify-items", "auto", "legacy ce nter");
188 slotted.style.justifyItems = "auto"; 188 slotted.style.justifyItems = "auto";
189 checkValues(slotted, "justifyItems", "justify-items", "auto", "normal"); 189 checkValues(slotted, "justifyItems", "justify-items", "auto", "normal");
190 slotted.style.justifySelf = "auto"; 190 slotted.style.justifySelf = "auto";
191 checkValues(slotted, "justifySelf", "justify-self", "auto", "normal"); 191 checkValues(slotted, "justifySelf", "justify-self", "auto", "auto");
192 shadowNode.style.justifyItems = "auto"; 192 shadowNode.style.justifyItems = "auto";
193 checkValues(shadowNode, "justifyItems", "justify-items", "auto", "legacy cen ter"); 193 checkValues(shadowNode, "justifyItems", "justify-items", "auto", "legacy cen ter");
194 checkValues(slotted, "justifyItems", "justify-items", "auto", "normal"); 194 checkValues(slotted, "justifyItems", "justify-items", "auto", "normal");
195 checkValues(slotted, "justifySelf", "justify-self", "auto", "normal"); 195 checkValues(slotted, "justifySelf", "justify-self", "auto", "auto");
196 document.documentElement.style.justifyItems = "auto"; 196 document.documentElement.style.justifyItems = "auto";
197 }, "Check out how the 'legacy' keyword in justify-items affects the 'slotted' el ements while 'slot' is not assigned."); 197 }, "Check out how the 'legacy' keyword in justify-items affects the 'slotted' el ements while 'slot' is not assigned.");
198 198
199 // Slot element is assigned now. 199 // Slot element is assigned now.
200 var slot = document.createElement('slot'); 200 var slot = document.createElement('slot');
201 slot.setAttribute('name', 's1'); 201 slot.setAttribute('name', 's1');
202 shadowNode.appendChild(slot); 202 shadowNode.appendChild(slot);
203 203
204 test(function() { 204 test(function() {
205 shadowHost.style.alignItems = "center"; 205 shadowHost.style.alignItems = "center";
206 shadowNode.style.alignItems = "right"; 206 shadowNode.style.alignItems = "right";
207 slotted.style.alignItems = "left"; 207 slotted.style.alignItems = "left";
208 checkValues(slotted, "alignItems", "align-items", "left", "left"); 208 checkValues(slotted, "alignItems", "align-items", "left", "left");
209 slotted.style.alignItems = ""; 209 slotted.style.alignItems = "";
210 checkValues(slotted, "alignItems", "align-items", "", "normal"); 210 checkValues(slotted, "alignItems", "align-items", "", "normal");
211 slotted.style.alignSelf = "start"; 211 slotted.style.alignSelf = "start";
212 checkValues(slotted, "alignSelf", "align-self", "start", "start"); 212 checkValues(slotted, "alignSelf", "align-self", "start", "start");
213 slotted.style.alignSelf = "auto"; 213 slotted.style.alignSelf = "auto";
214 checkValues(slotted, "alignSelf", "align-self", "auto", "right"); 214 checkValues(slotted, "alignSelf", "align-self", "auto", "auto");
215 }, "Check out how align-self uses the 'slot' element's parent (Shadow Node) as ' slotted' element' s parent after the 'slot' is assigned."); 215 }, "Check out how align-self uses the 'slot' element's parent (Shadow Node) as ' slotted' element' s parent after the 'slot' is assigned.");
216 216
217 test(function() { 217 test(function() {
218 shadowHost.style.justifyItems = "center"; 218 shadowHost.style.justifyItems = "center";
219 shadowNode.style.justifyItems = "right"; 219 shadowNode.style.justifyItems = "right";
220 slotted.style.justifyItems = "left"; 220 slotted.style.justifyItems = "left";
221 checkValues(slotted, "justifyItems", "justify-items", "left", "left"); 221 checkValues(slotted, "justifyItems", "justify-items", "left", "left");
222 slotted.style.justifyItems = ""; 222 slotted.style.justifyItems = "";
223 checkValues(slotted, "justifyItems", "justify-items", "", "normal"); 223 checkValues(slotted, "justifyItems", "justify-items", "", "normal");
224 slotted.style.justifySelf = "start"; 224 slotted.style.justifySelf = "start";
225 checkValues(slotted, "justifySelf", "justify-self", "start", "start"); 225 checkValues(slotted, "justifySelf", "justify-self", "start", "start");
226 slotted.style.justifySelf = "auto"; 226 slotted.style.justifySelf = "auto";
227 checkValues(slotted, "justifySelf", "justify-self", "auto", "right"); 227 checkValues(slotted, "justifySelf", "justify-self", "auto", "auto");
228 }, "Check out how justify-self uses the 'slot' element's parent (Shadow Node) as 'slotted' element' s parent after the 'slot' is assigned."); 228 }, "Check out how justify-self uses the 'slot' element's parent (Shadow Node) as 'slotted' element' s parent after the 'slot' is assigned.");
229 229
230 test(function() { 230 test(function() {
231 shadowHost.style.justifyItems = "auto"; 231 shadowHost.style.justifyItems = "auto";
232 shadowNode.style.justifyItems = "right"; 232 shadowNode.style.justifyItems = "right";
233 checkValues(shadowHost, "justifyItems", "justify-items", "auto", "normal"); 233 checkValues(shadowHost, "justifyItems", "justify-items", "auto", "normal");
234 checkValues(shadowNode, "justifyItems", "justify-items", "right", "right"); 234 checkValues(shadowNode, "justifyItems", "justify-items", "right", "right");
235 document.documentElement.style.justifyItems = "legacy center"; 235 document.documentElement.style.justifyItems = "legacy center";
236 checkValues(document.documentElement, "justifyItems", "justify-items", "leg acy center", "legacy center"); 236 checkValues(document.documentElement, "justifyItems", "justify-items", "leg acy center", "legacy center");
237 checkValues(shadowHost, "justifyItems", "justify-items", "auto", "legacy cen ter"); 237 checkValues(shadowHost, "justifyItems", "justify-items", "auto", "legacy cen ter");
238 slotted.style.justifyItems = "auto"; 238 slotted.style.justifyItems = "auto";
239 checkValues(slotted, "justifyItems", "justify-items", "auto", "normal"); // Shadow host is not the parent now, but ShadowNode. 239 checkValues(slotted, "justifyItems", "justify-items", "auto", "normal"); // Shadow host is not the parent now, but ShadowNode.
240 slotted.style.justifySelf = "auto"; 240 slotted.style.justifySelf = "auto";
241 checkValues(slotted, "justifySelf", "justify-self", "auto", "right"); // Sha dow host is not the parent now, but ShadowNode. 241 checkValues(slotted, "justifySelf", "justify-self", "auto", "auto"); // Shad ow host is not the parent now, but ShadowNode.
242 shadowNode.style.justifyItems = "auto"; 242 shadowNode.style.justifyItems = "auto";
243 checkValues(shadowNode, "justifyItems", "justify-items", "auto", "legacy cen ter"); 243 checkValues(shadowNode, "justifyItems", "justify-items", "auto", "legacy cen ter");
244 checkValues(slotted, "justifyItems", "justify-items", "auto", "legacy center "); // Now that shadowNode is auto, 'legacy' applies. 244 checkValues(slotted, "justifyItems", "justify-items", "auto", "legacy center "); // Now that shadowNode is auto, 'legacy' applies.
245 checkValues(slotted, "justifySelf", "justify-self", "auto", "center"); // No w that shadowNode is auto, 'legacy' applies. 245 checkValues(slotted, "justifySelf", "justify-self", "auto", "auto"); // Now that shadowNode is auto, 'legacy' applies.
246 document.documentElement.style.justifyItems = "auto"; 246 document.documentElement.style.justifyItems = "auto";
247 }, "Check out how the 'legacy' keyword affects the 'slotted' elements after the 'slot' is assigned."); 247 }, "Check out how the 'legacy' keyword affects the 'slotted' elements after the 'slot' is assigned.");
248 248
249 test(function() { 249 test(function() {
250 shadowHost.style.alignItems = "center"; 250 shadowHost.style.alignItems = "center";
251 shadowNode.style.alignItems = "right"; 251 shadowNode.style.alignItems = "right";
252 slot.style.alignItems = "left"; 252 slot.style.alignItems = "left";
253 checkValues(slot, "alignItems", "align-items", "left", "left"); 253 checkValues(slot, "alignItems", "align-items", "left", "left");
254 slot.style.alignItems = ""; 254 slot.style.alignItems = "";
255 checkValues(slot, "alignItems", "align-items", "", "normal"); 255 checkValues(slot, "alignItems", "align-items", "", "normal");
256 slot.style.alignSelf = "left"; 256 slot.style.alignSelf = "left";
257 checkValues(slot, "alignSelf", "align-self", "left", "left"); 257 checkValues(slot, "alignSelf", "align-self", "left", "left");
258 slot.style.alignSelf = "auto"; 258 slot.style.alignSelf = "auto";
259 checkValues(slot, "alignSelf", "align-self", "auto", "normal"); 259 checkValues(slot, "alignSelf", "align-self", "auto", "auto");
260 }, "The 'slot' element should not use its parent inside the ShadowDOM tree to re solve the align-self 'auto' values because Blink does not support slots in the f lat tree."); 260 }, "The 'slot' element should not use its parent inside the ShadowDOM tree to re solve the align-self 'auto' values because Blink does not support slots in the f lat tree.");
261 261
262 test(function() { 262 test(function() {
263 shadowHost.style.justifyItems = "center"; 263 shadowHost.style.justifyItems = "center";
264 shadowNode.style.justifyItems = "right"; 264 shadowNode.style.justifyItems = "right";
265 265
266 slot.style.justifyItems = "left"; 266 slot.style.justifyItems = "left";
267 checkValues(slot, "justifyItems", "justify-items", "left", "left"); 267 checkValues(slot, "justifyItems", "justify-items", "left", "left");
268 slot.style.justifyItems = "auto"; 268 slot.style.justifyItems = "auto";
269 checkValues(slot, "justifyItems", "justify-items", "auto", "normal"); 269 checkValues(slot, "justifyItems", "justify-items", "auto", "normal");
270 slot.style.justifySelf = "left"; 270 slot.style.justifySelf = "left";
271 checkValues(slot, "justifySelf", "justify-self", "left", "left"); 271 checkValues(slot, "justifySelf", "justify-self", "left", "left");
272 slot.style.justifySelf = "auto"; 272 slot.style.justifySelf = "auto";
273 checkValues(slot, "justifySelf", "justify-self", "auto", "normal"); 273 checkValues(slot, "justifySelf", "justify-self", "auto", "auto");
274 }, "The 'slot' element should not use its parent inside the ShadowDOM tree to re solve the justify-self 'auto' values because Blink does not support slots in the flat tree."); 274 }, "The 'slot' element should not use its parent inside the ShadowDOM tree to re solve the justify-self 'auto' values because Blink does not support slots in the flat tree.");
275 275
276 </script> 276 </script>
277 277
278 </body> 278 </body>
279 </html> 279 </html>
OLDNEW
« third_party/WebKit/LayoutTests/fast/alignment/alignment-and-anomymous-boxes-expected.html ('K') | « third_party/WebKit/LayoutTests/fast/alignment/parse-align-self.html ('k') | third_party/WebKit/LayoutTests/fast/alignment/parse-alignment-of-root-elements-expected.txt » ('j') | third_party/WebKit/LayoutTests/fast/alignment/parse-place-self.html » ('J')

Powered by Google App Engine
This is Rietveld 408576698