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

Side by Side Diff: third_party/WebKit/LayoutTests/fast/alignment/parse-align-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 #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
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
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
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>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698