Make color-filter affect caret-color
[WebKit-https.git] / LayoutTests / css3 / parse-alignment-of-root-elements.html
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", "auto");
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 for align-items.
31     document.body.style.alignSelf = "auto";
32     checkValues(document.body, "alignItems", "align-items", "", "normal");
33     checkValues(document.body, "alignSelf", "align-self", "auto", "auto");
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", "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.");
39
40 test(function() {
41     document.documentElement.style.alignItems = "auto"; // The 'auto' value is not 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", "", "normal");
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", "auto");
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", "center", "center");
58     document.body.style.justifyItems = "legacy";
59     document.body.style.justifySelf = "auto";
60     checkValues(document.body, "justifyItems", "justify-items", "legacy", "normal");
61     checkValues(document.body, "justifySelf", "justify-self", "auto", "auto");
62     block.style.justifyItems = "legacy";
63     block.style.justifySelf = "auto";
64     checkValues(block, "justifyItems", "justify-items",  "legacy", "normal");
65     checkValues(block, "justifySelf", "justify-self",  "auto", "auto");
66 }, "Check out how the DOM's root element justify-items's value is used to resolve its children's justify-self 'auto' values.");
67
68 test(function() {
69     document.documentElement.style.justifyItems = "legacy";
70     checkValues(document.documentElement, "justifyItems", "justify-items", "legacy", "normal");
71     checkValues(document.body, "justifySelf", "justify-self",  "auto", "auto");
72     checkValues(block, "justifySelf", "justify-self",  "auto", "auto");
73 }, "Check out how the DOM's root element deals with 'auto' value in justify-items.");
74
75 test(function() {
76     document.documentElement.style.justifyItems = "legacy center";
77     checkValues(document.documentElement, "justifyItems", "justify-items",  "legacy center", "legacy center");
78     document.body.style.justifyItems = "legacy";
79     document.body.style.justifySelf = "auto";
80     checkValues(document.body, "justifyItems", "justify-items",  "legacy", "legacy center");
81     checkValues(document.body, "justifySelf", "justify-self",  "auto", "auto");
82     block.style.justifyItems = "legacy";
83     block.style.justifySelf = "auto";
84     checkValues(block, "justifyItems", "justify-items",  "legacy", "legacy center");
85     checkValues(block, "justifySelf", "justify-self",  "auto", "auto");
86 }, "Check out how the DOM's root element justify-items's value with 'legacy' keyword is used to resolve any descendant's justify-items 'auto' values.");
87
88 test(function() {
89     document.documentElement.style.justifyItems = "legacy";
90     checkValues(document.body, "justifyItems", "justify-items",  "legacy", "normal");
91     checkValues(document.body, "justifySelf", "justify-self",  "auto", "auto");
92     checkValues(block, "justifyItems", "justify-items",  "legacy", "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.");
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 = "end";
110     checkValues(shadowHost, "alignItems", "align-items", "center", "center");
111     checkValues(shadowNode, "alignItems", "align-items", "end", "end");
112     shadowNode.style.alignItems = "";
113     checkValues(shadowNode, "alignItems", "align-items", "", "normal");
114     shadowNode.style.alignSelf = "auto";
115     checkValues(shadowNode, "alignSelf", "align-self", "auto", "auto");
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", "auto");
127 }, "Shadow Node inherits from ShadowHost to resolve the 'auto' values for justify-self.");
128
129 test(function() {
130     shadowHost.style.justifyItems = "legacy";
131     shadowNode.style.justifyItems = "right";
132     shadowNode.style.justifySelf = "auto";
133     checkValues(shadowHost, "justifyItems", "justify-items", "legacy", "normal");
134     checkValues(shadowNode, "justifyItems", "justify-items", "right", "right");
135     checkValues(shadowNode, "justifySelf", "justify-self", "auto", "auto");
136
137     checkValues(shadowHost, "justifyItems", "justify-items", "legacy", "normal");
138     document.documentElement.style.justifyItems = "legacy center";
139     checkValues(document.documentElement, "justifyItems", "justify-items",  "legacy center", "legacy center");
140     checkValues(shadowHost, "justifyItems", "justify-items",  "legacy", "legacy center");
141     checkValues(shadowNode, "justifyItems", "justify-items", "right", "right");
142     checkValues(shadowNode, "justifySelf", "justify-self", "auto", "auto");
143     shadowNode.style.justifyItems = "legacy";
144     checkValues(shadowNode, "justifyItems", "justify-items", "legacy", "legacy center");
145     document.documentElement.style.justifyItems = "legacy";
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' elements. ***");
151
152 var slotted = document.getElementById("slotted");
153
154 test(function() {
155     shadowHost.style.alignItems = "center";
156     shadowNode.style.alignItems = "start";
157     slotted.style.alignItems = "end";
158     checkValues(slotted, "alignItems", "align-items", "end", "end");
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", "auto");
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", "auto");
178 }, "Check out how justify-self uses the 'shadowHost' as 'slotted' element's parent while 'slot' is not assigned.");
179
180 test(function() {
181     shadowHost.style.justifyItems = "legacy";
182     shadowNode.style.justifyItems = "right";
183     checkValues(shadowHost, "justifyItems", "justify-items", "legacy", "normal");
184     checkValues(shadowNode, "justifyItems", "justify-items", "right", "right");
185     document.documentElement.style.justifyItems = "legacy center";
186     checkValues(document.documentElement, "justifyItems", "justify-items",  "legacy center", "legacy center");
187     checkValues(shadowHost, "justifyItems", "justify-items",  "legacy", "legacy center");
188     slotted.style.justifyItems = "legacy";
189     checkValues(slotted, "justifyItems", "justify-items",  "legacy", "normal");
190     slotted.style.justifySelf = "auto";
191     checkValues(slotted, "justifySelf", "justify-self",  "auto", "auto");
192     shadowNode.style.justifyItems = "legacy";
193     checkValues(shadowNode, "justifyItems", "justify-items", "legacy", "legacy center");
194     checkValues(slotted, "justifyItems", "justify-items", "legacy", "normal");
195     checkValues(slotted, "justifySelf", "justify-self", "auto", "auto");
196     document.documentElement.style.justifyItems = "legacy";
197 }, "Check out how the 'legacy' keyword in justify-items affects the 'slotted' elements 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 = "end";
207     slotted.style.alignItems = "start";
208     checkValues(slotted, "alignItems", "align-items", "start", "start");
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", "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.");
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", "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.");
229
230 test(function() {
231     shadowHost.style.justifyItems = "legacy";
232     shadowNode.style.justifyItems = "right";
233     checkValues(shadowHost, "justifyItems", "justify-items", "legacy", "normal");
234     checkValues(shadowNode, "justifyItems", "justify-items", "right", "right");
235     document.documentElement.style.justifyItems = "legacy center";
236     checkValues(document.documentElement, "justifyItems", "justify-items",  "legacy center", "legacy center");
237     checkValues(shadowHost, "justifyItems", "justify-items", "legacy", "legacy center");
238     slotted.style.justifyItems = "legacy";
239     checkValues(slotted, "justifyItems", "justify-items", "legacy", "normal"); // Shadow host is not the parent now, but ShadowNode.
240     slotted.style.justifySelf = "auto";
241     checkValues(slotted, "justifySelf", "justify-self", "auto", "auto"); // Shadow host is not the parent now, but ShadowNode.
242     shadowNode.style.justifyItems = "legacy";
243     checkValues(shadowNode, "justifyItems", "justify-items", "legacy", "legacy center");
244     checkValues(slotted, "justifyItems", "justify-items", "legacy", "legacy center"); // Now 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 = "legacy";
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 = "end";
252     slot.style.alignItems = "start";
253     checkValues(slot, "alignItems", "align-items",  "start", "start");
254     slot.style.alignItems = "";
255     checkValues(slot, "alignItems", "align-items", "", "normal");
256     slot.style.alignSelf = "start";
257     checkValues(slot, "alignSelf", "align-self",  "start", "start");
258     slot.style.alignSelf = "auto";
259     checkValues(slot, "alignSelf", "align-self",  "auto", "auto");
260 }, "The 'slot' element should not use its parent inside the ShadowDOM tree to resolve the align-self 'auto' values because Blink does not support slots in the flat tree.");
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 = "legacy";
269     checkValues(slot, "justifyItems", "justify-items", "legacy", "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", "auto");
274 }, "The 'slot' element should not use its parent inside the ShadowDOM tree to resolve the justify-self 'auto' values because Blink does not support slots in the flat tree.");
275
276 </script>
277
278 </body>
279 </html>