OLD | NEW |
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> |
OLD | NEW |