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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/fast/alignment/parse-align-self.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
« no previous file with comments | « third_party/WebKit/LayoutTests/fast/alignment/parse-align-items-expected.txt ('k') | third_party/WebKit/LayoutTests/fast/alignment/parse-align-self-expected.txt » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html> 2 <html>
3 <head> 3 <head>
4 <style> 4 <style>
5 #alignSelfBaseline { 5 #alignSelfBaseline {
6 align-self: baseline; 6 align-self: baseline;
7 } 7 }
8 8
9 #alignSelfLastBaseline { 9 #alignSelfLastBaseline {
10 align-self: last-baseline; 10 align-self: last-baseline;
(...skipping 32 matching lines...) Expand 10 before | Expand all | Expand 10 after
43 } 43 }
44 44
45 #alignSelfFlexStart { 45 #alignSelfFlexStart {
46 align-self: flex-start; 46 align-self: flex-start;
47 } 47 }
48 48
49 #alignSelfFlexEnd { 49 #alignSelfFlexEnd {
50 align-self: flex-end; 50 align-self: flex-end;
51 } 51 }
52 52
53 #alignSelfEndTrue { 53 #alignSelfEndUnsafe {
54 align-self: end true; 54 align-self: end unsafe;
55 } 55 }
56 56
57 #alignSelfCenterTrue { 57 #alignSelfCenterUnsafe {
58 align-self: center true; 58 align-self: center unsafe;
59 } 59 }
60 60
61 #alignSelfSelfEndSafe { 61 #alignSelfSelfEndSafe {
62 align-self: self-end safe; 62 align-self: self-end safe;
63 } 63 }
64 64
65 #alignSelfSelfStartSafe { 65 #alignSelfSelfStartSafe {
66 align-self: self-start safe; 66 align-self: self-start safe;
67 } 67 }
68 68
69 #alignSelfRightSafe { 69 #alignSelfRightSafe {
70 align-self: right safe; 70 align-self: right safe;
71 } 71 }
72 72
73 #alignSelfLeftTrue { 73 #alignSelfLeftUnsafe {
74 align-self: left true; 74 align-self: left unsafe;
75 } 75 }
76 76
77 #alignSelfFlexStartTrue { 77 #alignSelfFlexStartUnsafe {
78 align-self: flex-start true; 78 align-self: flex-start unsafe;
79 } 79 }
80 80
81 #alignSelfFlexEndSafe { 81 #alignSelfFlexEndSafe {
82 align-self: flex-end safe; 82 align-self: flex-end safe;
83 } 83 }
84 </style> 84 </style>
85 <script src="../../resources/js-test.js"></script> 85 <script src="../../resources/js-test.js"></script>
86 </head> 86 </head>
87 <body> 87 <body>
88 <div id="alignSelfBaseline"></div> 88 <div id="alignSelfBaseline"></div>
89 <div id="alignSelfLastBaseline"></div> 89 <div id="alignSelfLastBaseline"></div>
90 <div id="alignSelfStretch"></div> 90 <div id="alignSelfStretch"></div>
91 <div id="alignSelfStart"></div> 91 <div id="alignSelfStart"></div>
92 <div id="alignSelfEnd"></div> 92 <div id="alignSelfEnd"></div>
93 <div id="alignSelfCenter"></div> 93 <div id="alignSelfCenter"></div>
94 <div id="alignSelfSelfStart"></div> 94 <div id="alignSelfSelfStart"></div>
95 <div id="alignSelfSelfEnd"></div> 95 <div id="alignSelfSelfEnd"></div>
96 <div id="alignSelfLeft"></div> 96 <div id="alignSelfLeft"></div>
97 <div id="alignSelfRight"></div> 97 <div id="alignSelfRight"></div>
98 <div id="alignSelfFlexStart"></div> 98 <div id="alignSelfFlexStart"></div>
99 <div id="alignSelfFlexEnd"></div> 99 <div id="alignSelfFlexEnd"></div>
100 100
101 <div id="alignSelfEndTrue"></div> 101 <div id="alignSelfEndUnsafe"></div>
102 <div id="alignSelfCenterTrue"></div> 102 <div id="alignSelfCenterUnsafe"></div>
103 <div id="alignSelfSelfEndSafe"></div> 103 <div id="alignSelfSelfEndSafe"></div>
104 <div id="alignSelfSelfStartSafe"></div> 104 <div id="alignSelfSelfStartSafe"></div>
105 <div id="alignSelfRightSafe"></div> 105 <div id="alignSelfRightSafe"></div>
106 <div id="alignSelfLeftTrue"></div> 106 <div id="alignSelfLeftUnsafe"></div>
107 <div id="alignSelfFlexStartTrue"></div> 107 <div id="alignSelfFlexStartUnsafe"></div>
108 <div id="alignSelfFlexEndSafe"></div> 108 <div id="alignSelfFlexEndSafe"></div>
109 <script src="resources/alignment-parsing-utils.js"></script> 109 <script src="resources/alignment-parsing-utils.js"></script>
110 <script> 110 <script>
111 description('Test that setting and getting align-self works as expected'); 111 description('Test that setting and getting align-self works as expected');
112 112
113 debug("Test getting align-self set through CSS"); 113 debug("Test getting align-self set through CSS");
114 var alignSelfBaseline = document.getElementById("alignSelfBaseline"); 114 var alignSelfBaseline = document.getElementById("alignSelfBaseline");
115 shouldBe("getComputedStyle(alignSelfBaseline, '').getPropertyValue('align-self') ", "'baseline'"); 115 shouldBe("getComputedStyle(alignSelfBaseline, '').getPropertyValue('align-self') ", "'baseline'");
116 116
117 var alignSelfLastBaseline = document.getElementById("alignSelfLastBaseline"); 117 var alignSelfLastBaseline = document.getElementById("alignSelfLastBaseline");
(...skipping 22 matching lines...) Expand all
140 140
141 var alignSelfRight = document.getElementById("alignSelfRight"); 141 var alignSelfRight = document.getElementById("alignSelfRight");
142 shouldBe("getComputedStyle(alignSelfRight, '').getPropertyValue('align-self')", "'right'"); 142 shouldBe("getComputedStyle(alignSelfRight, '').getPropertyValue('align-self')", "'right'");
143 143
144 var alignSelfFlexStart = document.getElementById("alignSelfFlexStart"); 144 var alignSelfFlexStart = document.getElementById("alignSelfFlexStart");
145 shouldBe("getComputedStyle(alignSelfFlexStart, '').getPropertyValue('align-self' )", "'flex-start'"); 145 shouldBe("getComputedStyle(alignSelfFlexStart, '').getPropertyValue('align-self' )", "'flex-start'");
146 146
147 var alignSelfFlexEnd = document.getElementById("alignSelfFlexEnd"); 147 var alignSelfFlexEnd = document.getElementById("alignSelfFlexEnd");
148 shouldBe("getComputedStyle(alignSelfFlexEnd, '').getPropertyValue('align-self')" , "'flex-end'"); 148 shouldBe("getComputedStyle(alignSelfFlexEnd, '').getPropertyValue('align-self')" , "'flex-end'");
149 149
150 var alignSelfEndTrue = document.getElementById("alignSelfEndTrue"); 150 var alignSelfEndUnsafe = document.getElementById("alignSelfEndUnsafe");
151 shouldBe("getComputedStyle(alignSelfEndTrue, '').getPropertyValue('align-self')" , "'end true'"); 151 shouldBe("getComputedStyle(alignSelfEndUnsafe, '').getPropertyValue('align-self' )", "'end unsafe'");
152 152
153 var alignSelfCenterTrue = document.getElementById("alignSelfCenterTrue"); 153 var alignSelfCenterUnsafe = document.getElementById("alignSelfCenterUnsafe");
154 shouldBe("getComputedStyle(alignSelfCenterTrue, '').getPropertyValue('align-self ')", "'center true'"); 154 shouldBe("getComputedStyle(alignSelfCenterUnsafe, '').getPropertyValue('align-se lf')", "'center unsafe'");
155 155
156 var alignSelfSelfEndSafe = document.getElementById("alignSelfSelfEndSafe"); 156 var alignSelfSelfEndSafe = document.getElementById("alignSelfSelfEndSafe");
157 shouldBe("getComputedStyle(alignSelfSelfEndSafe, '').getPropertyValue('align-sel f')", "'self-end safe'"); 157 shouldBe("getComputedStyle(alignSelfSelfEndSafe, '').getPropertyValue('align-sel f')", "'self-end safe'");
158 158
159 var alignSelfSelfStartSafe = document.getElementById("alignSelfSelfStartSafe"); 159 var alignSelfSelfStartSafe = document.getElementById("alignSelfSelfStartSafe");
160 shouldBe("getComputedStyle(alignSelfSelfStartSafe, '').getPropertyValue('align-s elf')", "'self-start safe'"); 160 shouldBe("getComputedStyle(alignSelfSelfStartSafe, '').getPropertyValue('align-s elf')", "'self-start safe'");
161 161
162 var alignSelfRightSafe = document.getElementById("alignSelfRightSafe"); 162 var alignSelfRightSafe = document.getElementById("alignSelfRightSafe");
163 shouldBe("getComputedStyle(alignSelfRightSafe, '').getPropertyValue('align-self' )", "'right safe'"); 163 shouldBe("getComputedStyle(alignSelfRightSafe, '').getPropertyValue('align-self' )", "'right safe'");
164 164
165 var alignSelfLeftTrue = document.getElementById("alignSelfLeftTrue"); 165 var alignSelfLeftUnsafe = document.getElementById("alignSelfLeftUnsafe");
166 shouldBe("getComputedStyle(alignSelfLeftTrue, '').getPropertyValue('align-self') ", "'left true'"); 166 shouldBe("getComputedStyle(alignSelfLeftUnsafe, '').getPropertyValue('align-self ')", "'left unsafe'");
167 167
168 var alignSelfFlexStartTrue = document.getElementById("alignSelfFlexStartTrue"); 168 var alignSelfFlexStartUnsafe = document.getElementById("alignSelfFlexStartUnsafe ");
169 shouldBe("getComputedStyle(alignSelfFlexStartTrue, '').getPropertyValue('align-s elf')", "'flex-start true'"); 169 shouldBe("getComputedStyle(alignSelfFlexStartUnsafe, '').getPropertyValue('align -self')", "'flex-start unsafe'");
170 170
171 var alignSelfFlexEndSafe = document.getElementById("alignSelfFlexEndSafe"); 171 var alignSelfFlexEndSafe = document.getElementById("alignSelfFlexEndSafe");
172 shouldBe("getComputedStyle(alignSelfFlexEndSafe, '').getPropertyValue('align-sel f')", "'flex-end safe'"); 172 shouldBe("getComputedStyle(alignSelfFlexEndSafe, '').getPropertyValue('align-sel f')", "'flex-end safe'");
173 173
174 debug(""); 174 debug("");
175 debug("Test initial value of align-self through JS"); 175 debug("Test initial value of align-self through JS");
176 element = document.createElement("div"); 176 element = document.createElement("div");
177 document.body.appendChild(element); 177 document.body.appendChild(element);
178 shouldBe("getComputedStyle(element, '').getPropertyValue('align-self')", "'start '"); 178 shouldBe("getComputedStyle(element, '').getPropertyValue('align-self')", "'start '");
179 179
180 debug(""); 180 debug("");
181 debug("Test getting and setting align-self through JS"); 181 debug("Test getting and setting align-self through JS");
182 container = document.createElement("div"); 182 container = document.createElement("div");
183 element = document.createElement("div"); 183 element = document.createElement("div");
184 container.appendChild(element); 184 container.appendChild(element);
185 document.body.appendChild(container); 185 document.body.appendChild(container);
186 element.style.alignSelf = "center"; 186 element.style.alignSelf = "center";
187 checkValues(element, "alignSelf", "align-self", "center", "center"); 187 checkValues(element, "alignSelf", "align-self", "center", "center");
188 188
189 element.style.alignSelf = "true start"; 189 element.style.alignSelf = "unsafe start";
190 checkValues(element, "alignSelf", "align-self", "start true", "start true"); 190 checkValues(element, "alignSelf", "align-self", "start unsafe", "start unsafe") ;
191 191
192 element.style.alignSelf = "flex-end safe"; 192 element.style.alignSelf = "flex-end safe";
193 checkValues(element, "alignSelf", "align-self", "flex-end safe", "flex-end safe "); 193 checkValues(element, "alignSelf", "align-self", "flex-end safe", "flex-end safe ");
194 194
195 element.style.alignSelf = "right"; 195 element.style.alignSelf = "right";
196 checkValues(element, "alignSelf", "align-self", "right", "right"); 196 checkValues(element, "alignSelf", "align-self", "right", "right");
197 197
198 element.style.alignSelf = "center"; 198 element.style.alignSelf = "center";
199 checkValues(element, "alignSelf", "align-self", "center", "center"); 199 checkValues(element, "alignSelf", "align-self", "center", "center");
200 200
(...skipping 14 matching lines...) Expand all
215 element.style.alignSelf = "self-end"; 215 element.style.alignSelf = "self-end";
216 checkValues(element, "alignSelf", "align-self", "self-end", "self-end"); 216 checkValues(element, "alignSelf", "align-self", "self-end", "self-end");
217 217
218 debug(""); 218 debug("");
219 debug("Test bad combinations of align-self"); 219 debug("Test bad combinations of align-self");
220 container = document.createElement("div"); 220 container = document.createElement("div");
221 element = document.createElement("div"); 221 element = document.createElement("div");
222 container.appendChild(element); 222 container.appendChild(element);
223 document.body.appendChild(container); 223 document.body.appendChild(container);
224 224
225 checkBadValues(element, "alignSelf", "align-self", "true auto"); 225 checkBadValues(element, "alignSelf", "align-self", "unsafe auto");
226 checkBadValues(element, "alignSelf", "align-self", "auto safe"); 226 checkBadValues(element, "alignSelf", "align-self", "auto safe");
227 checkBadValues(element, "alignSelf", "align-self", "auto left"); 227 checkBadValues(element, "alignSelf", "align-self", "auto left");
228 checkBadValues(element, "alignSelf", "align-self", "baseline safe"); 228 checkBadValues(element, "alignSelf", "align-self", "baseline safe");
229 checkBadValues(element, "alignSelf", "align-self", "baseline center"); 229 checkBadValues(element, "alignSelf", "align-self", "baseline center");
230 checkBadValues(element, "alignSelf", "align-self", "stretch true"); 230 checkBadValues(element, "alignSelf", "align-self", "stretch unsafe");
231 checkBadValues(element, "alignSelf", "align-self", "stretch right"); 231 checkBadValues(element, "alignSelf", "align-self", "stretch right");
232 checkBadValues(element, "alignSelf", "align-self", "true true"); 232 checkBadValues(element, "alignSelf", "align-self", "unsafe unsafe");
233 checkBadValues(element, "alignSelf", "align-self", "true safe"); 233 checkBadValues(element, "alignSelf", "align-self", "unsafe safe");
234 checkBadValues(element, "alignSelf", "align-self", "center start"); 234 checkBadValues(element, "alignSelf", "align-self", "center start");
235 checkBadValues(element, "alignSelf", "align-self", "stretch true"); 235 checkBadValues(element, "alignSelf", "align-self", "stretch unsafe");
236 checkBadValues(element, "alignSelf", "align-self", "safe stretch"); 236 checkBadValues(element, "alignSelf", "align-self", "safe stretch");
237 checkBadValues(element, "alignSelf", "align-self", "baseline safe"); 237 checkBadValues(element, "alignSelf", "align-self", "baseline safe");
238 checkBadValues(element, "alignSelf", "align-self", "true baseline"); 238 checkBadValues(element, "alignSelf", "align-self", "unsafe baseline");
239 checkBadValues(element, "alignSelf", "align-self", "true safe left"); 239 checkBadValues(element, "alignSelf", "align-self", "unsafe safe left");
240 checkBadValues(element, "alignSelf", "align-self", "true left safe"); 240 checkBadValues(element, "alignSelf", "align-self", "unsafe left safe");
241 checkBadValues(element, "alignSelf", "align-self", "left safe true safe"); 241 checkBadValues(element, "alignSelf", "align-self", "left safe unsafe safe");
242 checkBadValues(element, "alignSelf", "align-self", "legacy start"); 242 checkBadValues(element, "alignSelf", "align-self", "legacy start");
243 checkBadValues(element, "alignSelf", "align-self", "legacy end"); 243 checkBadValues(element, "alignSelf", "align-self", "legacy end");
244 checkBadValues(element, "alignSelf", "align-self", "legacy right true"); 244 checkBadValues(element, "alignSelf", "align-self", "legacy right unsafe");
245 checkBadValues(element, "alignSelf", "align-self", "legacy auto"); 245 checkBadValues(element, "alignSelf", "align-self", "legacy auto");
246 checkBadValues(element, "alignSelf", "align-self", "legacy stretch"); 246 checkBadValues(element, "alignSelf", "align-self", "legacy stretch");
247 checkBadValues(element, "alignSelf", "align-self", "legacy"); 247 checkBadValues(element, "alignSelf", "align-self", "legacy");
248 checkBadValues(element, "alignSelf", "align-self", "legacy left right"); 248 checkBadValues(element, "alignSelf", "align-self", "legacy left right");
249 249
250 debug(""); 250 debug("");
251 debug("Test the value 'initial'"); 251 debug("Test the value 'initial'");
252 container.style.display = ""; 252 container.style.display = "";
253 checkInitialValues(element, "alignSelf", "align-self", "center", "start"); 253 checkInitialValues(element, "alignSelf", "align-self", "center", "start");
254 254
255 debug(""); 255 debug("");
256 debug("Test the value 'initial' for grid containers"); 256 debug("Test the value 'initial' for grid containers");
257 container.style.display = "grid"; 257 container.style.display = "grid";
258 checkInitialValues(element, "alignSelf", "align-self", "left safe", "stretch"); 258 checkInitialValues(element, "alignSelf", "align-self", "left safe", "stretch");
259 259
260 debug(""); 260 debug("");
261 debug("Test the value 'initial' for flex containers"); 261 debug("Test the value 'initial' for flex containers");
262 container.style.display = "flex"; 262 container.style.display = "flex";
263 checkInitialValues(element, "alignSelf", "align-self", "right true", "stretch"); 263 checkInitialValues(element, "alignSelf", "align-self", "right unsafe", "stretch" );
264 264
265 debug(""); 265 debug("");
266 debug("Test the value 'initial' for positioned elements"); 266 debug("Test the value 'initial' for positioned elements");
267 container.style.display = ""; 267 container.style.display = "";
268 element.style.position = "absolute"; 268 element.style.position = "absolute";
269 checkInitialValues(element, "alignSelf", "align-self", "left", "stretch"); 269 checkInitialValues(element, "alignSelf", "align-self", "left", "stretch");
270 270
271 debug(""); 271 debug("");
272 debug("Test the value 'initial' for positioned elements in grid containers"); 272 debug("Test the value 'initial' for positioned elements in grid containers");
273 container.style.display = "grid"; 273 container.style.display = "grid";
274 element.style.position = "absolute"; 274 element.style.position = "absolute";
275 checkInitialValues(element, "alignSelf", "align-self", "right", "stretch"); 275 checkInitialValues(element, "alignSelf", "align-self", "right", "stretch");
276 276
277 debug(""); 277 debug("");
278 debug("Test the value 'initial' for positioned elements in grid containers"); 278 debug("Test the value 'initial' for positioned elements in grid containers");
279 container.style.display = "flex"; 279 container.style.display = "flex";
280 element.style.position = "absolute"; 280 element.style.position = "absolute";
281 checkInitialValues(element, "alignSelf", "align-self", "end", "stretch"); 281 checkInitialValues(element, "alignSelf", "align-self", "end", "stretch");
282 282
283 debug(""); 283 debug("");
284 debug("Test the value 'inherit'"); 284 debug("Test the value 'inherit'");
285 checkInheritValues("alignSelf", "align-self", "end"); 285 checkInheritValues("alignSelf", "align-self", "end");
286 checkInheritValues("alignSelf", "align-self", "left safe"); 286 checkInheritValues("alignSelf", "align-self", "left safe");
287 checkInheritValues("alignSelf", "align-self", "center true"); 287 checkInheritValues("alignSelf", "align-self", "center unsafe");
288 288
289 </script> 289 </script>
290 </body> 290 </body>
291 </html> 291 </html>
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/fast/alignment/parse-align-items-expected.txt ('k') | third_party/WebKit/LayoutTests/fast/alignment/parse-align-self-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698