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

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

Powered by Google App Engine
This is Rietveld 408576698