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

Side by Side Diff: third_party/WebKit/LayoutTests/fast/alignment/parse-justify-items.html

Issue 1497403002: [css-align] Overflow alignment value 'true' renamed to 'unsafe' (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Fixed repaint tests issues. Created 5 years 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
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html> 2 <html>
3 <head> 3 <head>
4 <style> 4 <style>
5 #justifyItemsBaseline { 5 #justifyItemsBaseline {
6 justify-items: baseline; 6 justify-items: baseline;
7 } 7 }
8 8
9 #justifyItemsLastBaseline { 9 #justifyItemsLastBaseline {
10 justify-items: last-baseline; 10 justify-items: last-baseline;
(...skipping 32 matching lines...) Expand 10 before | Expand all | Expand 10 after
43 } 43 }
44 44
45 #justifyItemsFlexStart { 45 #justifyItemsFlexStart {
46 justify-items: flex-start; 46 justify-items: flex-start;
47 } 47 }
48 48
49 #justifyItemsFlexEnd { 49 #justifyItemsFlexEnd {
50 justify-items: flex-end; 50 justify-items: flex-end;
51 } 51 }
52 52
53 #justifyItemsEndTrue { 53 #justifyItemsEndUnsafe {
54 justify-items: end true; 54 justify-items: end unsafe;
55 } 55 }
56 56
57 #justifyItemsCenterTrue { 57 #justifyItemsCenterUnsafe {
58 justify-items: center true; 58 justify-items: center unsafe;
59 } 59 }
60 60
61 #justifyItemsSelfEndSafe { 61 #justifyItemsSelfEndSafe {
62 justify-items: self-end safe; 62 justify-items: self-end safe;
63 } 63 }
64 64
65 #justifyItemsSelfStartSafe { 65 #justifyItemsSelfStartSafe {
66 justify-items: self-start safe; 66 justify-items: self-start safe;
67 } 67 }
68 68
69 #justifyItemsRightSafe { 69 #justifyItemsRightSafe {
70 justify-items: right safe; 70 justify-items: right safe;
71 } 71 }
72 72
73 #justifyItemsLeftTrue { 73 #justifyItemsLeftUnsafe {
74 justify-items: left true; 74 justify-items: left unsafe;
75 } 75 }
76 76
77 #justifyItemsFlexStartTrue { 77 #justifyItemsFlexStartUnsafe {
78 justify-items: flex-start true; 78 justify-items: flex-start unsafe;
79 } 79 }
80 80
81 #justifyItemsFlexEndSafe { 81 #justifyItemsFlexEndSafe {
82 justify-items: flex-end safe; 82 justify-items: flex-end safe;
83 } 83 }
84 84
85 #justifyItemsLegacyLeft { 85 #justifyItemsLegacyLeft {
86 justify-items: legacy left; 86 justify-items: legacy left;
87 } 87 }
88 88
(...skipping 26 matching lines...) Expand all
115 <div id="justifyItemsStart"></div> 115 <div id="justifyItemsStart"></div>
116 <div id="justifyItemsEnd"></div> 116 <div id="justifyItemsEnd"></div>
117 <div id="justifyItemsCenter"></div> 117 <div id="justifyItemsCenter"></div>
118 <div id="justifyItemsSelfStart"></div> 118 <div id="justifyItemsSelfStart"></div>
119 <div id="justifyItemsSelfEnd"></div> 119 <div id="justifyItemsSelfEnd"></div>
120 <div id="justifyItemsLeft"></div> 120 <div id="justifyItemsLeft"></div>
121 <div id="justifyItemsRight"></div> 121 <div id="justifyItemsRight"></div>
122 <div id="justifyItemsFlexStart"></div> 122 <div id="justifyItemsFlexStart"></div>
123 <div id="justifyItemsFlexEnd"></div> 123 <div id="justifyItemsFlexEnd"></div>
124 124
125 <div id="justifyItemsEndTrue"></div> 125 <div id="justifyItemsEndUnsafe"></div>
126 <div id="justifyItemsCenterTrue"></div> 126 <div id="justifyItemsCenterUnsafe"></div>
127 <div id="justifyItemsSelfEndSafe"></div> 127 <div id="justifyItemsSelfEndSafe"></div>
128 <div id="justifyItemsSelfStartSafe"></div> 128 <div id="justifyItemsSelfStartSafe"></div>
129 <div id="justifyItemsRightSafe"></div> 129 <div id="justifyItemsRightSafe"></div>
130 <div id="justifyItemsLeftTrue"></div> 130 <div id="justifyItemsLeftUnsafe"></div>
131 <div id="justifyItemsFlexStartTrue"></div> 131 <div id="justifyItemsFlexStartUnsafe"></div>
132 <div id="justifyItemsFlexEndSafe"></div> 132 <div id="justifyItemsFlexEndSafe"></div>
133 <div id="justifyItemsLegacyLeft"></div> 133 <div id="justifyItemsLegacyLeft"></div>
134 <div id="justifyItemsLegacyCenter"></div> 134 <div id="justifyItemsLegacyCenter"></div>
135 <div id="justifyItemsLegacyRight"></div> 135 <div id="justifyItemsLegacyRight"></div>
136 <div id="justifyItemsLeftLegacy"></div> 136 <div id="justifyItemsLeftLegacy"></div>
137 <div id="justifyItemsCenterLegacy"></div> 137 <div id="justifyItemsCenterLegacy"></div>
138 <div id="justifyItemsRightLegacy"></div> 138 <div id="justifyItemsRightLegacy"></div>
139 <script src="resources/alignment-parsing-utils.js"></script> 139 <script src="resources/alignment-parsing-utils.js"></script>
140 <script> 140 <script>
141 description('Test that setting and getting justify-items works as expected'); 141 description('Test that setting and getting justify-items works as expected');
(...skipping 28 matching lines...) Expand all
170 170
171 var justifyItemsRight = document.getElementById("justifyItemsRight"); 171 var justifyItemsRight = document.getElementById("justifyItemsRight");
172 shouldBe("getComputedStyle(justifyItemsRight, '').getPropertyValue('justify-item s')", "'right'"); 172 shouldBe("getComputedStyle(justifyItemsRight, '').getPropertyValue('justify-item s')", "'right'");
173 173
174 var justifyItemsFlexStart = document.getElementById("justifyItemsFlexStart"); 174 var justifyItemsFlexStart = document.getElementById("justifyItemsFlexStart");
175 shouldBe("getComputedStyle(justifyItemsFlexStart, '').getPropertyValue('justify- items')", "'flex-start'"); 175 shouldBe("getComputedStyle(justifyItemsFlexStart, '').getPropertyValue('justify- items')", "'flex-start'");
176 176
177 var justifyItemsFlexEnd = document.getElementById("justifyItemsFlexEnd"); 177 var justifyItemsFlexEnd = document.getElementById("justifyItemsFlexEnd");
178 shouldBe("getComputedStyle(justifyItemsFlexEnd, '').getPropertyValue('justify-it ems')", "'flex-end'"); 178 shouldBe("getComputedStyle(justifyItemsFlexEnd, '').getPropertyValue('justify-it ems')", "'flex-end'");
179 179
180 var justifyItemsEndTrue = document.getElementById("justifyItemsEndTrue"); 180 var justifyItemsEndUnsafe = document.getElementById("justifyItemsEndUnsafe");
181 shouldBe("getComputedStyle(justifyItemsEndTrue, '').getPropertyValue('justify-it ems')", "'end true'"); 181 shouldBe("getComputedStyle(justifyItemsEndUnsafe, '').getPropertyValue('justify- items')", "'end unsafe'");
182 182
183 var justifyItemsCenterTrue = document.getElementById("justifyItemsCenterTrue"); 183 var justifyItemsCenterUnsafe = document.getElementById("justifyItemsCenterUnsafe ");
184 shouldBe("getComputedStyle(justifyItemsCenterTrue, '').getPropertyValue('justify -items')", "'center true'"); 184 shouldBe("getComputedStyle(justifyItemsCenterUnsafe, '').getPropertyValue('justi fy-items')", "'center unsafe'");
185 185
186 var justifyItemsSelfEndSafe = document.getElementById("justifyItemsSelfEndSafe") ; 186 var justifyItemsSelfEndSafe = document.getElementById("justifyItemsSelfEndSafe") ;
187 shouldBe("getComputedStyle(justifyItemsSelfEndSafe, '').getPropertyValue('justif y-items')", "'self-end safe'"); 187 shouldBe("getComputedStyle(justifyItemsSelfEndSafe, '').getPropertyValue('justif y-items')", "'self-end safe'");
188 188
189 var justifyItemsSelfStartSafe = document.getElementById("justifyItemsSelfStartSa fe"); 189 var justifyItemsSelfStartSafe = document.getElementById("justifyItemsSelfStartSa fe");
190 shouldBe("getComputedStyle(justifyItemsSelfStartSafe, '').getPropertyValue('just ify-items')", "'self-start safe'"); 190 shouldBe("getComputedStyle(justifyItemsSelfStartSafe, '').getPropertyValue('just ify-items')", "'self-start safe'");
191 191
192 var justifyItemsRightSafe = document.getElementById("justifyItemsRightSafe"); 192 var justifyItemsRightSafe = document.getElementById("justifyItemsRightSafe");
193 shouldBe("getComputedStyle(justifyItemsRightSafe, '').getPropertyValue('justify- items')", "'right safe'"); 193 shouldBe("getComputedStyle(justifyItemsRightSafe, '').getPropertyValue('justify- items')", "'right safe'");
194 194
195 var justifyItemsLeftTrue = document.getElementById("justifyItemsLeftTrue"); 195 var justifyItemsLeftUnsafe = document.getElementById("justifyItemsLeftUnsafe");
196 shouldBe("getComputedStyle(justifyItemsLeftTrue, '').getPropertyValue('justify-i tems')", "'left true'"); 196 shouldBe("getComputedStyle(justifyItemsLeftUnsafe, '').getPropertyValue('justify -items')", "'left unsafe'");
197 197
198 var justifyItemsFlexStartTrue = document.getElementById("justifyItemsFlexStartTr ue"); 198 var justifyItemsFlexStartUnsafe = document.getElementById("justifyItemsFlexStart Unsafe");
199 shouldBe("getComputedStyle(justifyItemsFlexStartTrue, '').getPropertyValue('just ify-items')", "'flex-start true'"); 199 shouldBe("getComputedStyle(justifyItemsFlexStartUnsafe, '').getPropertyValue('ju stify-items')", "'flex-start unsafe'");
200 200
201 var justifyItemsFlexEndSafe = document.getElementById("justifyItemsFlexEndSafe") ; 201 var justifyItemsFlexEndSafe = document.getElementById("justifyItemsFlexEndSafe") ;
202 shouldBe("getComputedStyle(justifyItemsFlexEndSafe, '').getPropertyValue('justif y-items')", "'flex-end safe'"); 202 shouldBe("getComputedStyle(justifyItemsFlexEndSafe, '').getPropertyValue('justif y-items')", "'flex-end safe'");
203 203
204 var justifyItemsLegacyLeft = document.getElementById("justifyItemsLegacyLeft"); 204 var justifyItemsLegacyLeft = document.getElementById("justifyItemsLegacyLeft");
205 shouldBe("getComputedStyle(justifyItemsLegacyLeft, '').getPropertyValue('justify -items')", "'legacy left'"); 205 shouldBe("getComputedStyle(justifyItemsLegacyLeft, '').getPropertyValue('justify -items')", "'legacy left'");
206 206
207 var justifyItemsLegacyCenter = document.getElementById("justifyItemsLegacyCenter "); 207 var justifyItemsLegacyCenter = document.getElementById("justifyItemsLegacyCenter ");
208 shouldBe("getComputedStyle(justifyItemsLegacyCenter, '').getPropertyValue('justi fy-items')", "'legacy center'"); 208 shouldBe("getComputedStyle(justifyItemsLegacyCenter, '').getPropertyValue('justi fy-items')", "'legacy center'");
209 209
(...skipping 15 matching lines...) Expand all
225 document.body.appendChild(element); 225 document.body.appendChild(element);
226 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'st art'"); 226 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'st art'");
227 227
228 debug(""); 228 debug("");
229 debug("Test getting and setting justify-items through JS"); 229 debug("Test getting and setting justify-items through JS");
230 element = document.createElement("div"); 230 element = document.createElement("div");
231 document.body.appendChild(element); 231 document.body.appendChild(element);
232 element.style.justifyItems = "center"; 232 element.style.justifyItems = "center";
233 checkValues(element, "justifyItems", "justify-items", "center", "center"); 233 checkValues(element, "justifyItems", "justify-items", "center", "center");
234 234
235 element.style.justifyItems = "true start"; 235 element.style.justifyItems = "unsafe start";
236 checkValues(element, "justifyItems", "justify-items", "start true", "start true "); 236 checkValues(element, "justifyItems", "justify-items", "start unsafe", "start un safe");
237 237
238 element.style.justifyItems = "flex-end safe"; 238 element.style.justifyItems = "flex-end safe";
239 checkValues(element, "justifyItems", "justify-items", "flex-end safe", "flex-en d safe"); 239 checkValues(element, "justifyItems", "justify-items", "flex-end safe", "flex-en d safe");
240 240
241 element.style.justifyItems = "right legacy"; 241 element.style.justifyItems = "right legacy";
242 checkValues(element, "justifyItems", "justify-items", "legacy right", "legacy r ight"); 242 checkValues(element, "justifyItems", "justify-items", "legacy right", "legacy r ight");
243 243
244 element.style.justifyItems = "center legacy"; 244 element.style.justifyItems = "center legacy";
245 checkValues(element, "justifyItems", "justify-items", "legacy center", "legacy center"); 245 checkValues(element, "justifyItems", "justify-items", "legacy center", "legacy center");
246 246
(...skipping 12 matching lines...) Expand all
259 checkValues(element, "justifyItems", "justify-items", "auto", "stretch"); 259 checkValues(element, "justifyItems", "justify-items", "auto", "stretch");
260 260
261 element.style.justifyItems = "self-end"; 261 element.style.justifyItems = "self-end";
262 checkValues(element, "justifyItems", "justify-items", "self-end", "self-end"); 262 checkValues(element, "justifyItems", "justify-items", "self-end", "self-end");
263 263
264 debug(""); 264 debug("");
265 debug("Test bad combinations of justify-items"); 265 debug("Test bad combinations of justify-items");
266 element = document.createElement("div"); 266 element = document.createElement("div");
267 document.body.appendChild(element); 267 document.body.appendChild(element);
268 268
269 checkBadValues(element, "justifyItems", "justify-items", "true auto"); 269 checkBadValues(element, "justifyItems", "justify-items", "unsafe auto");
270 checkBadValues(element, "justifyItems", "justify-items", "auto safe"); 270 checkBadValues(element, "justifyItems", "justify-items", "auto safe");
271 checkBadValues(element, "justifyItems", "justify-items", "auto left"); 271 checkBadValues(element, "justifyItems", "justify-items", "auto left");
272 checkBadValues(element, "justifyItems", "justify-items", "baseline safe"); 272 checkBadValues(element, "justifyItems", "justify-items", "baseline safe");
273 checkBadValues(element, "justifyItems", "justify-items", "baseline center"); 273 checkBadValues(element, "justifyItems", "justify-items", "baseline center");
274 checkBadValues(element, "justifyItems", "justify-items", "stretch true"); 274 checkBadValues(element, "justifyItems", "justify-items", "stretch unsafe");
275 checkBadValues(element, "justifyItems", "justify-items", "stretch right"); 275 checkBadValues(element, "justifyItems", "justify-items", "stretch right");
276 checkBadValues(element, "justifyItems", "justify-items", "true true"); 276 checkBadValues(element, "justifyItems", "justify-items", "unsafe unsafe");
277 checkBadValues(element, "justifyItems", "justify-items", "true safe"); 277 checkBadValues(element, "justifyItems", "justify-items", "unsafe safe");
278 checkBadValues(element, "justifyItems", "justify-items", "center start"); 278 checkBadValues(element, "justifyItems", "justify-items", "center start");
279 checkBadValues(element, "justifyItems", "justify-items", "stretch true"); 279 checkBadValues(element, "justifyItems", "justify-items", "stretch unsafe");
280 checkBadValues(element, "justifyItems", "justify-items", "safe stretch"); 280 checkBadValues(element, "justifyItems", "justify-items", "safe stretch");
281 checkBadValues(element, "justifyItems", "justify-items", "baseline safe"); 281 checkBadValues(element, "justifyItems", "justify-items", "baseline safe");
282 checkBadValues(element, "justifyItems", "justify-items", "true baseline"); 282 checkBadValues(element, "justifyItems", "justify-items", "unsafe baseline");
283 checkBadValues(element, "justifyItems", "justify-items", "true safe left"); 283 checkBadValues(element, "justifyItems", "justify-items", "unsafe safe left");
284 checkBadValues(element, "justifyItems", "justify-items", "true left safe"); 284 checkBadValues(element, "justifyItems", "justify-items", "unsafe left safe");
285 checkBadValues(element, "justifyItems", "justify-items", "left safe true safe") ; 285 checkBadValues(element, "justifyItems", "justify-items", "left safe unsafe safe ");
286 checkBadValues(element, "justifyItems", "justify-items", "legacy start"); 286 checkBadValues(element, "justifyItems", "justify-items", "legacy start");
287 checkBadValues(element, "justifyItems", "justify-items", "legacy end"); 287 checkBadValues(element, "justifyItems", "justify-items", "legacy end");
288 checkBadValues(element, "justifyItems", "justify-items", "legacy right true"); 288 checkBadValues(element, "justifyItems", "justify-items", "legacy right unsafe") ;
289 checkBadValues(element, "justifyItems", "justify-items", "legacy auto"); 289 checkBadValues(element, "justifyItems", "justify-items", "legacy auto");
290 checkBadValues(element, "justifyItems", "justify-items", "legacy stretch"); 290 checkBadValues(element, "justifyItems", "justify-items", "legacy stretch");
291 checkBadValues(element, "justifyItems", "justify-items", "legacy"); 291 checkBadValues(element, "justifyItems", "justify-items", "legacy");
292 checkBadValues(element, "justifyItems", "justify-items", "legacy left right"); 292 checkBadValues(element, "justifyItems", "justify-items", "legacy left right");
293 293
294 debug(""); 294 debug("");
295 debug("Test the value 'initial'"); 295 debug("Test the value 'initial'");
296 element.style.display = ""; 296 element.style.display = "";
297 checkInitialValues(element, "justifyItems", "justify-items", "legacy center", "s tart"); 297 checkInitialValues(element, "justifyItems", "justify-items", "legacy center", "s tart");
298 298
299 debug(""); 299 debug("");
300 debug("Test the value 'initial' for grid containers"); 300 debug("Test the value 'initial' for grid containers");
301 element.style.display = "grid"; 301 element.style.display = "grid";
302 checkInitialValues(element, "justifyItems", "justify-items", "left safe", "stret ch"); 302 checkInitialValues(element, "justifyItems", "justify-items", "left safe", "stret ch");
303 303
304 debug(""); 304 debug("");
305 debug("Test the value 'initial' for flex containers"); 305 debug("Test the value 'initial' for flex containers");
306 element.style.display = "flex"; 306 element.style.display = "flex";
307 checkInitialValues(element, "justifyItems", "justify-items", "right true", "stre tch"); 307 checkInitialValues(element, "justifyItems", "justify-items", "right unsafe", "st retch");
308 308
309 debug(""); 309 debug("");
310 debug("Test the value 'inherit'"); 310 debug("Test the value 'inherit'");
311 checkInheritValues("justifyItems", "justify-items", "end"); 311 checkInheritValues("justifyItems", "justify-items", "end");
312 checkInheritValues("justifyItems", "justify-items", "left safe"); 312 checkInheritValues("justifyItems", "justify-items", "left safe");
313 checkInheritValues("justifyItems", "justify-items", "legacy center"); 313 checkInheritValues("justifyItems", "justify-items", "legacy center");
314 314
315 debug(""); 315 debug("");
316 debug("Test the value 'legacy'"); 316 debug("Test the value 'legacy'");
317 checkLegacyValues("justifyItems", "justify-items", "legacy left"); 317 checkLegacyValues("justifyItems", "justify-items", "legacy left");
318 checkLegacyValues("justifyItems", "justify-items", "legacy center"); 318 checkLegacyValues("justifyItems", "justify-items", "legacy center");
319 checkLegacyValues("justifyItems", "justify-items", "legacy right"); 319 checkLegacyValues("justifyItems", "justify-items", "legacy right");
320 320
321 </script> 321 </script>
322 </body> 322 </body>
323 </html> 323 </html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698