OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
4 <style> | 4 <style> |
5 #alignItemsBaseline { | 5 #alignItemsBaseline { |
6 align-items: baseline; | 6 align-items: baseline; |
7 } | 7 } |
8 | 8 |
9 #alignItemsLastBaseline { | 9 #alignItemsLastBaseline { |
10 align-items: last-baseline; | 10 align-items: last-baseline; |
(...skipping 32 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
43 } | 43 } |
44 | 44 |
45 #alignItemsFlexStart { | 45 #alignItemsFlexStart { |
46 align-items: flex-start; | 46 align-items: flex-start; |
47 } | 47 } |
48 | 48 |
49 #alignItemsFlexEnd { | 49 #alignItemsFlexEnd { |
50 align-items: flex-end; | 50 align-items: flex-end; |
51 } | 51 } |
52 | 52 |
53 #alignItemsEndTrue { | 53 #alignItemsEndUnsafe { |
54 align-items: end true; | 54 align-items: end unsafe; |
55 } | 55 } |
56 | 56 |
57 #alignItemsCenterTrue { | 57 #alignItemsCenterUnsafe { |
58 align-items: center true; | 58 align-items: center unsafe; |
59 } | 59 } |
60 | 60 |
61 #alignItemsSelfEndSafe { | 61 #alignItemsSelfEndSafe { |
62 align-items: self-end safe; | 62 align-items: self-end safe; |
63 } | 63 } |
64 | 64 |
65 #alignItemsSelfStartSafe { | 65 #alignItemsSelfStartSafe { |
66 align-items: self-start safe; | 66 align-items: self-start safe; |
67 } | 67 } |
68 | 68 |
69 #alignItemsRightSafe { | 69 #alignItemsRightSafe { |
70 align-items: right safe; | 70 align-items: right safe; |
71 } | 71 } |
72 | 72 |
73 #alignItemsLeftTrue { | 73 #alignItemsLeftUnsafe { |
74 align-items: left true; | 74 align-items: left unsafe; |
75 } | 75 } |
76 | 76 |
77 #alignItemsFlexStartTrue { | 77 #alignItemsFlexStartUnsafe { |
78 align-items: flex-start true; | 78 align-items: flex-start unsafe; |
79 } | 79 } |
80 | 80 |
81 #alignItemsFlexEndSafe { | 81 #alignItemsFlexEndSafe { |
82 align-items: flex-end safe; | 82 align-items: flex-end safe; |
83 } | 83 } |
84 | 84 |
85 </style> | 85 </style> |
86 <script src="../../resources/js-test.js"></script> | 86 <script src="../../resources/js-test.js"></script> |
87 </head> | 87 </head> |
88 <body> | 88 <body> |
89 <div id="alignItemsBaseline"></div> | 89 <div id="alignItemsBaseline"></div> |
90 <div id="alignItemsLastBaseline"></div> | 90 <div id="alignItemsLastBaseline"></div> |
91 <div id="alignItemsStretch"></div> | 91 <div id="alignItemsStretch"></div> |
92 <div id="alignItemsStart"></div> | 92 <div id="alignItemsStart"></div> |
93 <div id="alignItemsEnd"></div> | 93 <div id="alignItemsEnd"></div> |
94 <div id="alignItemsCenter"></div> | 94 <div id="alignItemsCenter"></div> |
95 <div id="alignItemsSelfStart"></div> | 95 <div id="alignItemsSelfStart"></div> |
96 <div id="alignItemsSelfEnd"></div> | 96 <div id="alignItemsSelfEnd"></div> |
97 <div id="alignItemsLeft"></div> | 97 <div id="alignItemsLeft"></div> |
98 <div id="alignItemsRight"></div> | 98 <div id="alignItemsRight"></div> |
99 <div id="alignItemsFlexStart"></div> | 99 <div id="alignItemsFlexStart"></div> |
100 <div id="alignItemsFlexEnd"></div> | 100 <div id="alignItemsFlexEnd"></div> |
101 | 101 |
102 <div id="alignItemsEndTrue"></div> | 102 <div id="alignItemsEndUnsafe"></div> |
103 <div id="alignItemsCenterTrue"></div> | 103 <div id="alignItemsCenterUnsafe"></div> |
104 <div id="alignItemsSelfEndSafe"></div> | 104 <div id="alignItemsSelfEndSafe"></div> |
105 <div id="alignItemsSelfStartSafe"></div> | 105 <div id="alignItemsSelfStartSafe"></div> |
106 <div id="alignItemsRightSafe"></div> | 106 <div id="alignItemsRightSafe"></div> |
107 <div id="alignItemsLeftTrue"></div> | 107 <div id="alignItemsLeftUnsafe"></div> |
108 <div id="alignItemsFlexStartTrue"></div> | 108 <div id="alignItemsFlexStartUnsafe"></div> |
109 <div id="alignItemsFlexEndSafe"></div> | 109 <div id="alignItemsFlexEndSafe"></div> |
110 <script src="resources/alignment-parsing-utils.js"></script> | 110 <script src="resources/alignment-parsing-utils.js"></script> |
111 <script> | 111 <script> |
112 description('Test that setting and getting align-items works as expected'); | 112 description('Test that setting and getting align-items works as expected'); |
113 | 113 |
114 debug("Test getting align-items set through CSS"); | 114 debug("Test getting align-items set through CSS"); |
115 var alignItemsBaseline = document.getElementById("alignItemsBaseline"); | 115 var alignItemsBaseline = document.getElementById("alignItemsBaseline"); |
116 shouldBe("getComputedStyle(alignItemsBaseline, '').getPropertyValue('align-items
')", "'baseline'"); | 116 shouldBe("getComputedStyle(alignItemsBaseline, '').getPropertyValue('align-items
')", "'baseline'"); |
117 | 117 |
118 var alignItemsLastBaseline = document.getElementById("alignItemsLastBaseline"); | 118 var alignItemsLastBaseline = document.getElementById("alignItemsLastBaseline"); |
(...skipping 22 matching lines...) Expand all Loading... |
141 | 141 |
142 var alignItemsRight = document.getElementById("alignItemsRight"); | 142 var alignItemsRight = document.getElementById("alignItemsRight"); |
143 shouldBe("getComputedStyle(alignItemsRight, '').getPropertyValue('align-items')"
, "'right'"); | 143 shouldBe("getComputedStyle(alignItemsRight, '').getPropertyValue('align-items')"
, "'right'"); |
144 | 144 |
145 var alignItemsFlexStart = document.getElementById("alignItemsFlexStart"); | 145 var alignItemsFlexStart = document.getElementById("alignItemsFlexStart"); |
146 shouldBe("getComputedStyle(alignItemsFlexStart, '').getPropertyValue('align-item
s')", "'flex-start'"); | 146 shouldBe("getComputedStyle(alignItemsFlexStart, '').getPropertyValue('align-item
s')", "'flex-start'"); |
147 | 147 |
148 var alignItemsFlexEnd = document.getElementById("alignItemsFlexEnd"); | 148 var alignItemsFlexEnd = document.getElementById("alignItemsFlexEnd"); |
149 shouldBe("getComputedStyle(alignItemsFlexEnd, '').getPropertyValue('align-items'
)", "'flex-end'"); | 149 shouldBe("getComputedStyle(alignItemsFlexEnd, '').getPropertyValue('align-items'
)", "'flex-end'"); |
150 | 150 |
151 var alignItemsEndTrue = document.getElementById("alignItemsEndTrue"); | 151 var alignItemsEndUnsafe = document.getElementById("alignItemsEndUnsafe"); |
152 shouldBe("getComputedStyle(alignItemsEndTrue, '').getPropertyValue('align-items'
)", "'end true'"); | 152 shouldBe("getComputedStyle(alignItemsEndUnsafe, '').getPropertyValue('align-item
s')", "'end unsafe'"); |
153 | 153 |
154 var alignItemsCenterTrue = document.getElementById("alignItemsCenterTrue"); | 154 var alignItemsCenterUnsafe = document.getElementById("alignItemsCenterUnsafe"); |
155 shouldBe("getComputedStyle(alignItemsCenterTrue, '').getPropertyValue('align-ite
ms')", "'center true'"); | 155 shouldBe("getComputedStyle(alignItemsCenterUnsafe, '').getPropertyValue('align-i
tems')", "'center unsafe'"); |
156 | 156 |
157 var alignItemsSelfEndSafe = document.getElementById("alignItemsSelfEndSafe"); | 157 var alignItemsSelfEndSafe = document.getElementById("alignItemsSelfEndSafe"); |
158 shouldBe("getComputedStyle(alignItemsSelfEndSafe, '').getPropertyValue('align-it
ems')", "'self-end safe'"); | 158 shouldBe("getComputedStyle(alignItemsSelfEndSafe, '').getPropertyValue('align-it
ems')", "'self-end safe'"); |
159 | 159 |
160 var alignItemsSelfStartSafe = document.getElementById("alignItemsSelfStartSafe")
; | 160 var alignItemsSelfStartSafe = document.getElementById("alignItemsSelfStartSafe")
; |
161 shouldBe("getComputedStyle(alignItemsSelfStartSafe, '').getPropertyValue('align-
items')", "'self-start safe'"); | 161 shouldBe("getComputedStyle(alignItemsSelfStartSafe, '').getPropertyValue('align-
items')", "'self-start safe'"); |
162 | 162 |
163 var alignItemsRightSafe = document.getElementById("alignItemsRightSafe"); | 163 var alignItemsRightSafe = document.getElementById("alignItemsRightSafe"); |
164 shouldBe("getComputedStyle(alignItemsRightSafe, '').getPropertyValue('align-item
s')", "'right safe'"); | 164 shouldBe("getComputedStyle(alignItemsRightSafe, '').getPropertyValue('align-item
s')", "'right safe'"); |
165 | 165 |
166 var alignItemsLeftTrue = document.getElementById("alignItemsLeftTrue"); | 166 var alignItemsLeftUnsafe = document.getElementById("alignItemsLeftUnsafe"); |
167 shouldBe("getComputedStyle(alignItemsLeftTrue, '').getPropertyValue('align-items
')", "'left true'"); | 167 shouldBe("getComputedStyle(alignItemsLeftUnsafe, '').getPropertyValue('align-ite
ms')", "'left unsafe'"); |
168 | 168 |
169 var alignItemsFlexStartTrue = document.getElementById("alignItemsFlexStartTrue")
; | 169 var alignItemsFlexStartUnsafe = document.getElementById("alignItemsFlexStartUnsa
fe"); |
170 shouldBe("getComputedStyle(alignItemsFlexStartTrue, '').getPropertyValue('align-
items')", "'flex-start true'"); | 170 shouldBe("getComputedStyle(alignItemsFlexStartUnsafe, '').getPropertyValue('alig
n-items')", "'flex-start unsafe'"); |
171 | 171 |
172 var alignItemsFlexEndSafe = document.getElementById("alignItemsFlexEndSafe"); | 172 var alignItemsFlexEndSafe = document.getElementById("alignItemsFlexEndSafe"); |
173 shouldBe("getComputedStyle(alignItemsFlexEndSafe, '').getPropertyValue('align-it
ems')", "'flex-end safe'"); | 173 shouldBe("getComputedStyle(alignItemsFlexEndSafe, '').getPropertyValue('align-it
ems')", "'flex-end safe'"); |
174 | 174 |
175 debug(""); | 175 debug(""); |
176 debug("Test initial value of align-items through JS"); | 176 debug("Test initial value of align-items through JS"); |
177 element = document.createElement("div"); | 177 element = document.createElement("div"); |
178 document.body.appendChild(element); | 178 document.body.appendChild(element); |
179 shouldBe("getComputedStyle(element, '').getPropertyValue('align-items')", "'star
t'"); | 179 shouldBe("getComputedStyle(element, '').getPropertyValue('align-items')", "'star
t'"); |
180 | 180 |
181 debug(""); | 181 debug(""); |
182 debug("Test getting and setting align-items through JS"); | 182 debug("Test getting and setting align-items through JS"); |
183 element = document.createElement("div"); | 183 element = document.createElement("div"); |
184 document.body.appendChild(element); | 184 document.body.appendChild(element); |
185 element.style.alignItems = "center"; | 185 element.style.alignItems = "center"; |
186 checkValues(element, "alignItems", "align-items", "center", "center"); | 186 checkValues(element, "alignItems", "align-items", "center", "center"); |
187 | 187 |
188 element.style.alignItems = "true start"; | 188 element.style.alignItems = "unsafe start"; |
189 checkValues(element, "alignItems", "align-items", "start true", "start true"); | 189 checkValues(element, "alignItems", "align-items", "start unsafe", "start unsafe
"); |
190 | 190 |
191 element.style.alignItems = "flex-end safe"; | 191 element.style.alignItems = "flex-end safe"; |
192 checkValues(element, "alignItems", "align-items", "flex-end safe", "flex-end sa
fe"); | 192 checkValues(element, "alignItems", "align-items", "flex-end safe", "flex-end sa
fe"); |
193 | 193 |
194 element.style.alignItems = "right"; | 194 element.style.alignItems = "right"; |
195 checkValues(element, "alignItems", "align-items", "right", "right"); | 195 checkValues(element, "alignItems", "align-items", "right", "right"); |
196 | 196 |
197 element.style.alignItems = "center"; | 197 element.style.alignItems = "center"; |
198 checkValues(element, "alignItems", "align-items", "center", "center"); | 198 checkValues(element, "alignItems", "align-items", "center", "center"); |
199 | 199 |
(...skipping 12 matching lines...) Expand all Loading... |
212 checkValues(element, "alignItems", "align-items", "auto", "stretch"); | 212 checkValues(element, "alignItems", "align-items", "auto", "stretch"); |
213 | 213 |
214 element.style.alignItems = "self-end"; | 214 element.style.alignItems = "self-end"; |
215 checkValues(element, "alignItems", "align-items", "self-end", "self-end"); | 215 checkValues(element, "alignItems", "align-items", "self-end", "self-end"); |
216 | 216 |
217 debug(""); | 217 debug(""); |
218 debug("Test bad combinations of align-items"); | 218 debug("Test bad combinations of align-items"); |
219 element = document.createElement("div"); | 219 element = document.createElement("div"); |
220 document.body.appendChild(element); | 220 document.body.appendChild(element); |
221 | 221 |
222 checkBadValues(element, "alignItems", "align-items", "true auto"); | 222 checkBadValues(element, "alignItems", "align-items", "unsafe auto"); |
223 checkBadValues(element, "alignItems", "align-items", "auto safe"); | 223 checkBadValues(element, "alignItems", "align-items", "auto safe"); |
224 checkBadValues(element, "alignItems", "align-items", "auto left"); | 224 checkBadValues(element, "alignItems", "align-items", "auto left"); |
225 checkBadValues(element, "alignItems", "align-items", "baseline safe"); | 225 checkBadValues(element, "alignItems", "align-items", "baseline safe"); |
226 checkBadValues(element, "alignItems", "align-items", "baseline center"); | 226 checkBadValues(element, "alignItems", "align-items", "baseline center"); |
227 checkBadValues(element, "alignItems", "align-items", "stretch true"); | 227 checkBadValues(element, "alignItems", "align-items", "stretch unsafe"); |
228 checkBadValues(element, "alignItems", "align-items", "stretch right"); | 228 checkBadValues(element, "alignItems", "align-items", "stretch right"); |
229 checkBadValues(element, "alignItems", "align-items", "true true"); | 229 checkBadValues(element, "alignItems", "align-items", "unsafe unsafe"); |
230 checkBadValues(element, "alignItems", "align-items", "true safe"); | 230 checkBadValues(element, "alignItems", "align-items", "unsafe safe"); |
231 checkBadValues(element, "alignItems", "align-items", "center start"); | 231 checkBadValues(element, "alignItems", "align-items", "center start"); |
232 checkBadValues(element, "alignItems", "align-items", "stretch true"); | 232 checkBadValues(element, "alignItems", "align-items", "stretch unsafe"); |
233 checkBadValues(element, "alignItems", "align-items", "safe stretch"); | 233 checkBadValues(element, "alignItems", "align-items", "safe stretch"); |
234 checkBadValues(element, "alignItems", "align-items", "baseline safe"); | 234 checkBadValues(element, "alignItems", "align-items", "baseline safe"); |
235 checkBadValues(element, "alignItems", "align-items", "true baseline"); | 235 checkBadValues(element, "alignItems", "align-items", "unsafe baseline"); |
236 checkBadValues(element, "alignItems", "align-items", "true safe left"); | 236 checkBadValues(element, "alignItems", "align-items", "unsafe safe left"); |
237 checkBadValues(element, "alignItems", "align-items", "true left safe"); | 237 checkBadValues(element, "alignItems", "align-items", "unsafe left safe"); |
238 checkBadValues(element, "alignItems", "align-items", "left safe true safe"); | 238 checkBadValues(element, "alignItems", "align-items", "left safe unsafe safe"); |
239 checkBadValues(element, "alignItems", "align-items", "legacy start"); | 239 checkBadValues(element, "alignItems", "align-items", "legacy start"); |
240 checkBadValues(element, "alignItems", "align-items", "legacy end"); | 240 checkBadValues(element, "alignItems", "align-items", "legacy end"); |
241 checkBadValues(element, "alignItems", "align-items", "legacy right true"); | 241 checkBadValues(element, "alignItems", "align-items", "legacy right unsafe"); |
242 checkBadValues(element, "alignItems", "align-items", "legacy auto"); | 242 checkBadValues(element, "alignItems", "align-items", "legacy auto"); |
243 checkBadValues(element, "alignItems", "align-items", "legacy stretch"); | 243 checkBadValues(element, "alignItems", "align-items", "legacy stretch"); |
244 checkBadValues(element, "alignItems", "align-items", "legacy"); | 244 checkBadValues(element, "alignItems", "align-items", "legacy"); |
245 checkBadValues(element, "alignItems", "align-items", "legacy left right"); | 245 checkBadValues(element, "alignItems", "align-items", "legacy left right"); |
246 | 246 |
247 debug(""); | 247 debug(""); |
248 debug("Test the value 'initial'"); | 248 debug("Test the value 'initial'"); |
249 element.style.display = ""; | 249 element.style.display = ""; |
250 checkInitialValues(element, "alignItems", "align-items", "center", "start"); | 250 checkInitialValues(element, "alignItems", "align-items", "center", "start"); |
251 | 251 |
252 debug(""); | 252 debug(""); |
253 debug("Test the value 'initial' for grid containers"); | 253 debug("Test the value 'initial' for grid containers"); |
254 element.style.display = "grid"; | 254 element.style.display = "grid"; |
255 checkInitialValues(element, "alignItems", "align-items", "left safe", "stretch")
; | 255 checkInitialValues(element, "alignItems", "align-items", "left safe", "stretch")
; |
256 | 256 |
257 debug(""); | 257 debug(""); |
258 debug("Test the value 'initial' for flex containers"); | 258 debug("Test the value 'initial' for flex containers"); |
259 element.style.display = "flex"; | 259 element.style.display = "flex"; |
260 checkInitialValues(element, "alignItems", "align-items", "right true", "stretch"
); | 260 checkInitialValues(element, "alignItems", "align-items", "right unsafe", "stretc
h"); |
261 | 261 |
262 debug(""); | 262 debug(""); |
263 debug("Test the value 'inherit'"); | 263 debug("Test the value 'inherit'"); |
264 checkInheritValues("alignItems", "align-items", "end"); | 264 checkInheritValues("alignItems", "align-items", "end"); |
265 checkInheritValues("alignItems", "align-items", "left safe"); | 265 checkInheritValues("alignItems", "align-items", "left safe"); |
266 checkInheritValues("alignItems", "align-items", "center true"); | 266 checkInheritValues("alignItems", "align-items", "center unsafe"); |
267 | 267 |
268 </script> | 268 </script> |
269 </body> | 269 </body> |
270 </html> | 270 </html> |
OLD | NEW |