Chromium Code Reviews

Side by Side Diff: third_party/WebKit/LayoutTests/fast/alignment/parse-align-self.html

Issue 2455093002: [css-align] Don't resolve 'auto' values for computed style. (Closed)
Patch Set: Patch for landing. Created 3 years, 6 months ago
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View unified diff |
« no previous file with comments | « third_party/WebKit/LayoutTests/fast/alignment/new-alignment-values-invalid-if-grid-not-enabled.html ('k') | third_party/WebKit/LayoutTests/fast/alignment/parse-alignment-of-root-elements.html » ('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 <style> 2 <style>
3 #alignSelfBaseline { 3 #alignSelfBaseline {
4 align-self: baseline; 4 align-self: baseline;
5 } 5 }
6 6
7 #alignSelfFirstBaseline { 7 #alignSelfFirstBaseline {
8 align-self: first baseline; 8 align-self: first baseline;
9 } 9 }
10 10
11 #alignSelfLastBaseline { 11 #alignSelfLastBaseline {
12 align-self: last baseline; 12 align-self: last baseline;
13 } 13 }
14 14
15 #alignSelfStretch { 15 #alignSelfStretch {
16 align-self: stretch; 16 align-self: stretch;
17 } 17 }
18 18
19 #alignSelfNormal {
20 align-self: normal;
21 }
22
19 #alignSelfStart { 23 #alignSelfStart {
20 align-self: start; 24 align-self: start;
21 } 25 }
22 26
23 #alignSelfEnd { 27 #alignSelfEnd {
24 align-self: end; 28 align-self: end;
25 } 29 }
26 30
27 #alignSelfCenter { 31 #alignSelfCenter {
28 align-self: center; 32 align-self: center;
(...skipping 53 matching lines...)
82 86
83 #alignSelfFlexEndSafe { 87 #alignSelfFlexEndSafe {
84 align-self: flex-end safe; 88 align-self: flex-end safe;
85 } 89 }
86 </style> 90 </style>
87 <p>Test that setting and getting align-self works as expected</p> 91 <p>Test that setting and getting align-self works as expected</p>
88 <div id="alignSelfBaseline"></div> 92 <div id="alignSelfBaseline"></div>
89 <div id="alignSelfFirstBaseline"></div> 93 <div id="alignSelfFirstBaseline"></div>
90 <div id="alignSelfLastBaseline"></div> 94 <div id="alignSelfLastBaseline"></div>
91 <div id="alignSelfStretch"></div> 95 <div id="alignSelfStretch"></div>
96 <div id="alignSelfNormal"></div>
92 <div id="alignSelfStart"></div> 97 <div id="alignSelfStart"></div>
93 <div id="alignSelfEnd"></div> 98 <div id="alignSelfEnd"></div>
94 <div id="alignSelfCenter"></div> 99 <div id="alignSelfCenter"></div>
95 <div id="alignSelfSelfStart"></div> 100 <div id="alignSelfSelfStart"></div>
96 <div id="alignSelfSelfEnd"></div> 101 <div id="alignSelfSelfEnd"></div>
97 <div id="alignSelfLeft"></div> 102 <div id="alignSelfLeft"></div>
98 <div id="alignSelfRight"></div> 103 <div id="alignSelfRight"></div>
99 <div id="alignSelfFlexStart"></div> 104 <div id="alignSelfFlexStart"></div>
100 <div id="alignSelfFlexEnd"></div> 105 <div id="alignSelfFlexEnd"></div>
101 106
(...skipping 11 matching lines...)
113 <script> 118 <script>
114 test(function() { 119 test(function() {
115 var alignSelfBaseline = document.getElementById("alignSelfBaseline"); 120 var alignSelfBaseline = document.getElementById("alignSelfBaseline");
116 checkValues(alignSelfBaseline, "alignSelf", "align-self", "", "baseline"); 121 checkValues(alignSelfBaseline, "alignSelf", "align-self", "", "baseline");
117 var alignSelfFirstBaseline = document.getElementById("alignSelfFirstBaseline "); 122 var alignSelfFirstBaseline = document.getElementById("alignSelfFirstBaseline ");
118 checkValues(alignSelfFirstBaseline, "alignSelf", "align-self", "", "baseline "); 123 checkValues(alignSelfFirstBaseline, "alignSelf", "align-self", "", "baseline ");
119 var alignSelfLastBaseline = document.getElementById("alignSelfLastBaseline") ; 124 var alignSelfLastBaseline = document.getElementById("alignSelfLastBaseline") ;
120 checkValues(alignSelfLastBaseline, "alignSelf", "align-self", "", "last base line"); 125 checkValues(alignSelfLastBaseline, "alignSelf", "align-self", "", "last base line");
121 var alignSelfStretch = document.getElementById("alignSelfStretch"); 126 var alignSelfStretch = document.getElementById("alignSelfStretch");
122 checkValues(alignSelfStretch, "alignSelf", "align-self", "", "stretch"); 127 checkValues(alignSelfStretch, "alignSelf", "align-self", "", "stretch");
128 var alignSelfNormal = document.getElementById("alignSelfNormal");
129 checkValues(alignSelfNormal, "alignSelf", "align-self", "", "normal");
123 var alignSelfStart = document.getElementById("alignSelfStart"); 130 var alignSelfStart = document.getElementById("alignSelfStart");
124 checkValues(alignSelfStart, "alignSelf", "align-self", "", "start"); 131 checkValues(alignSelfStart, "alignSelf", "align-self", "", "start");
125 var alignSelfEnd = document.getElementById("alignSelfEnd"); 132 var alignSelfEnd = document.getElementById("alignSelfEnd");
126 checkValues(alignSelfEnd, "alignSelf", "align-self", "", "end"); 133 checkValues(alignSelfEnd, "alignSelf", "align-self", "", "end");
127 var alignSelfCenter = document.getElementById("alignSelfCenter"); 134 var alignSelfCenter = document.getElementById("alignSelfCenter");
128 checkValues(alignSelfCenter, "alignSelf", "align-self", "", "center"); 135 checkValues(alignSelfCenter, "alignSelf", "align-self", "", "center");
129 var alignSelfSelfEnd = document.getElementById("alignSelfSelfEnd"); 136 var alignSelfSelfEnd = document.getElementById("alignSelfSelfEnd");
130 checkValues(alignSelfSelfEnd, "alignSelf", "align-self", "", "self-end"); 137 checkValues(alignSelfSelfEnd, "alignSelf", "align-self", "", "self-end");
131 var alignSelfSelfStart = document.getElementById("alignSelfSelfStart"); 138 var alignSelfSelfStart = document.getElementById("alignSelfSelfStart");
132 checkValues(alignSelfSelfStart, "alignSelf", "align-self", "", "self-start") ; 139 checkValues(alignSelfSelfStart, "alignSelf", "align-self", "", "self-start") ;
(...skipping 20 matching lines...)
153 checkValues(alignSelfLeftUnsafe, "alignSelf", "align-self", "", "left unsafe "); 160 checkValues(alignSelfLeftUnsafe, "alignSelf", "align-self", "", "left unsafe ");
154 var alignSelfFlexStartUnsafe = document.getElementById("alignSelfFlexStartUn safe"); 161 var alignSelfFlexStartUnsafe = document.getElementById("alignSelfFlexStartUn safe");
155 checkValues(alignSelfFlexStartUnsafe, "alignSelf", "align-self", "", "flex-s tart unsafe"); 162 checkValues(alignSelfFlexStartUnsafe, "alignSelf", "align-self", "", "flex-s tart unsafe");
156 var alignSelfFlexEndSafe = document.getElementById("alignSelfFlexEndSafe"); 163 var alignSelfFlexEndSafe = document.getElementById("alignSelfFlexEndSafe");
157 checkValues(alignSelfFlexEndSafe, "alignSelf", "align-self", "", "flex-end s afe"); 164 checkValues(alignSelfFlexEndSafe, "alignSelf", "align-self", "", "flex-end s afe");
158 }, "Test getting align-self set through CSS."); 165 }, "Test getting align-self set through CSS.");
159 166
160 test(function() { 167 test(function() {
161 element = document.createElement("div"); 168 element = document.createElement("div");
162 document.body.appendChild(element); 169 document.body.appendChild(element);
163 checkValues(element, "alignSelf", "align-self", "", "normal"); 170 checkValues(element, "alignSelf", "align-self", "", "auto");
164 }, "Test initial value of align-self through JS"); 171 }, "Test initial value of align-self through JS");
165 172
166 test(function() { 173 test(function() {
167 container = document.createElement("div"); 174 container = document.createElement("div");
168 element = document.createElement("div"); 175 element = document.createElement("div");
169 container.appendChild(element); 176 container.appendChild(element);
170 document.body.appendChild(container); 177 document.body.appendChild(container);
171 element.style.alignSelf = "center"; 178 element.style.alignSelf = "center";
172 checkValues(element, "alignSelf", "align-self", "center", "center"); 179 checkValues(element, "alignSelf", "align-self", "center", "center");
173 180
174 element.style.alignSelf = "unsafe start"; 181 element.style.alignSelf = "unsafe start";
175 checkValues(element, "alignSelf", "align-self", "start unsafe", "start unsa fe"); 182 checkValues(element, "alignSelf", "align-self", "start unsafe", "start unsa fe");
176 183
177 element.style.alignSelf = "flex-end safe"; 184 element.style.alignSelf = "flex-end safe";
178 checkValues(element, "alignSelf", "align-self", "flex-end safe", "flex-end safe"); 185 checkValues(element, "alignSelf", "align-self", "flex-end safe", "flex-end safe");
179 186
180 element.style.alignSelf = "right"; 187 element.style.alignSelf = "right";
181 checkValues(element, "alignSelf", "align-self", "right", "right"); 188 checkValues(element, "alignSelf", "align-self", "right", "right");
182 189
183 element.style.alignSelf = "center"; 190 element.style.alignSelf = "center";
184 checkValues(element, "alignSelf", "align-self", "center", "center"); 191 checkValues(element, "alignSelf", "align-self", "center", "center");
185 192
186 element.style.alignSelf = "self-start"; 193 element.style.alignSelf = "self-start";
187 checkValues(element, "alignSelf", "align-self", "self-start", "self-start") ; 194 checkValues(element, "alignSelf", "align-self", "self-start", "self-start") ;
188 195
196 element.style.alignSelf = "normal";
197 checkValues(element, "alignSelf", "align-self", "normal", "normal");
198
189 element.style.alignSelf = "auto"; 199 element.style.alignSelf = "auto";
190 checkValues(element, "alignSelf", "align-self", "auto", "normal"); 200 checkValues(element, "alignSelf", "align-self", "auto", "auto");
191 201
192 container.style.display = "flex"; 202 container.style.display = "flex";
193 element.style.alignSelf = "auto"; 203 element.style.alignSelf = "auto";
194 checkValues(element, "alignSelf", "align-self", "auto", "normal"); 204 checkValues(element, "alignSelf", "align-self", "auto", "auto");
195 205
196 container.style.display = "grid"; 206 container.style.display = "grid";
197 element.style.alignSelf = "auto"; 207 element.style.alignSelf = "auto";
198 checkValues(element, "alignSelf", "align-self", "auto", "normal"); 208 checkValues(element, "alignSelf", "align-self", "auto", "auto");
199 209
200 element.style.alignSelf = "self-end"; 210 element.style.alignSelf = "self-end";
201 checkValues(element, "alignSelf", "align-self", "self-end", "self-end"); 211 checkValues(element, "alignSelf", "align-self", "self-end", "self-end");
202 }, "Test getting and setting align-self through JS"); 212 }, "Test getting and setting align-self through JS");
203 213
204 test(function() { 214 test(function() {
205 document.documentElement.style.alignSelf = "auto"; 215 document.documentElement.style.alignSelf = "auto";
206 checkValues(document.documentElement, "alignSelf", "align-self", "auto", "n ormal"); 216 checkValues(document.documentElement, "alignSelf", "align-self", "auto", "a uto");
207 }, "Test 'auto' value resolution for the root node"); 217 }, "Test 'auto' value resolution for the root node");
208 218
209 test(function() { 219 test(function() {
210 container = document.createElement("div"); 220 container = document.createElement("div");
211 element = document.createElement("div"); 221 element = document.createElement("div");
212 container.appendChild(element); 222 container.appendChild(element);
213 document.body.appendChild(container); 223 document.body.appendChild(container);
214 224
215 checkBadValues(element, "alignSelf", "align-self", "auto safe"); 225 checkBadValues(element, "alignSelf", "align-self", "auto safe");
216 checkBadValues(element, "alignSelf", "align-self", "auto left"); 226 checkBadValues(element, "alignSelf", "align-self", "auto left");
227 checkBadValues(element, "alignSelf", "align-self", "normal unsafe");
228 checkBadValues(element, "alignSelf", "align-self", "normal stretch");
229 checkBadValues(element, "alignSelf", "align-self", "baseline normal");
217 checkBadValues(element, "alignSelf", "align-self", "baseline safe"); 230 checkBadValues(element, "alignSelf", "align-self", "baseline safe");
218 checkBadValues(element, "alignSelf", "align-self", "baseline center"); 231 checkBadValues(element, "alignSelf", "align-self", "baseline center");
219 checkBadValues(element, "alignSelf", "align-self", "stretch unsafe"); 232 checkBadValues(element, "alignSelf", "align-self", "stretch unsafe");
220 checkBadValues(element, "alignSelf", "align-self", "stretch right"); 233 checkBadValues(element, "alignSelf", "align-self", "stretch right");
221 checkBadValues(element, "alignSelf", "align-self", "unsafe unsafe"); 234 checkBadValues(element, "alignSelf", "align-self", "unsafe unsafe");
222 checkBadValues(element, "alignSelf", "align-self", "unsafe safe"); 235 checkBadValues(element, "alignSelf", "align-self", "unsafe safe");
223 checkBadValues(element, "alignSelf", "align-self", "center start"); 236 checkBadValues(element, "alignSelf", "align-self", "center start");
224 checkBadValues(element, "alignSelf", "align-self", "stretch unsafe"); 237 checkBadValues(element, "alignSelf", "align-self", "stretch unsafe");
225 checkBadValues(element, "alignSelf", "align-self", "safe stretch"); 238 checkBadValues(element, "alignSelf", "align-self", "safe stretch");
226 checkBadValues(element, "alignSelf", "align-self", "baseline safe"); 239 checkBadValues(element, "alignSelf", "align-self", "baseline safe");
227 checkBadValues(element, "alignSelf", "align-self", "unsafe baseline"); 240 checkBadValues(element, "alignSelf", "align-self", "unsafe baseline");
228 checkBadValues(element, "alignSelf", "align-self", "unsafe safe left"); 241 checkBadValues(element, "alignSelf", "align-self", "unsafe safe left");
229 checkBadValues(element, "alignSelf", "align-self", "unsafe left safe"); 242 checkBadValues(element, "alignSelf", "align-self", "unsafe left safe");
230 checkBadValues(element, "alignSelf", "align-self", "left safe unsafe safe") ; 243 checkBadValues(element, "alignSelf", "align-self", "left safe unsafe safe") ;
231 checkBadValues(element, "alignSelf", "align-self", "legacy start"); 244 checkBadValues(element, "alignSelf", "align-self", "legacy start");
232 checkBadValues(element, "alignSelf", "align-self", "legacy end"); 245 checkBadValues(element, "alignSelf", "align-self", "legacy end");
233 checkBadValues(element, "alignSelf", "align-self", "legacy right unsafe"); 246 checkBadValues(element, "alignSelf", "align-self", "legacy right unsafe");
234 checkBadValues(element, "alignSelf", "align-self", "legacy auto"); 247 checkBadValues(element, "alignSelf", "align-self", "legacy auto");
235 checkBadValues(element, "alignSelf", "align-self", "legacy stretch"); 248 checkBadValues(element, "alignSelf", "align-self", "legacy stretch");
236 checkBadValues(element, "alignSelf", "align-self", "legacy"); 249 checkBadValues(element, "alignSelf", "align-self", "legacy");
237 checkBadValues(element, "alignSelf", "align-self", "legacy left right"); 250 checkBadValues(element, "alignSelf", "align-self", "legacy left right");
238 }, "Test bad combinations of align-self"); 251 }, "Test bad combinations of align-self");
239 252
240 test(function() { 253 test(function() {
241 container.style.display = ""; 254 container.style.display = "";
242 checkInitialValues(element, "alignSelf", "align-self", "center", "normal"); 255 checkInitialValues(element, "alignSelf", "align-self", "center", "auto");
243 }, "Test the value 'initial'"); 256 }, "Test the value 'initial'");
244 257
245 test(function() { 258 test(function() {
246 container.style.display = "grid"; 259 container.style.display = "grid";
247 checkInitialValues(element, "alignSelf", "align-self", "left safe", "normal" ); 260 checkInitialValues(element, "alignSelf", "align-self", "left safe", "auto");
248 }, "Test the value 'initial' for grid containers"); 261 }, "Test the value 'initial' for grid containers");
249 262
250 test(function() { 263 test(function() {
251 container.style.display = "flex"; 264 container.style.display = "flex";
252 checkInitialValues(element, "alignSelf", "align-self", "right unsafe", "norm al"); 265 checkInitialValues(element, "alignSelf", "align-self", "right unsafe", "auto ");
253 }, "Test the value 'initial' for flex containers"); 266 }, "Test the value 'initial' for flex containers");
254 267
255 test(function() { 268 test(function() {
256 container.style.display = ""; 269 container.style.display = "";
257 element.style.position = "absolute"; 270 element.style.position = "absolute";
258 checkInitialValues(element, "alignSelf", "align-self", "left", "normal"); 271 checkInitialValues(element, "alignSelf", "align-self", "left", "auto");
259 }, "Test the value 'initial' for positioned elements"); 272 }, "Test the value 'initial' for positioned elements");
260 273
261 test(function() { 274 test(function() {
262 container.style.display = "grid"; 275 container.style.display = "grid";
263 element.style.position = "absolute"; 276 element.style.position = "absolute";
264 checkInitialValues(element, "alignSelf", "align-self", "right", "normal"); 277 checkInitialValues(element, "alignSelf", "align-self", "right", "auto");
265 }, "Test the value 'initial' for positioned elements in grid containers"); 278 }, "Test the value 'initial' for positioned elements in grid containers");
266 279
267 test(function() { 280 test(function() {
268 container.style.display = "flex"; 281 container.style.display = "flex";
269 element.style.position = "absolute"; 282 element.style.position = "absolute";
270 checkInitialValues(element, "alignSelf", "align-self", "end", "normal"); 283 checkInitialValues(element, "alignSelf", "align-self", "end", "auto");
271 }, "Test the value 'initial' for positioned elements in grid containers"); 284 }, "Test the value 'initial' for positioned elements in grid containers");
272 285
273 test(function() { 286 test(function() {
274 checkInheritValues("alignSelf", "align-self", "end"); 287 checkInheritValues("alignSelf", "align-self", "end");
275 checkInheritValues("alignSelf", "align-self", "left safe"); 288 checkInheritValues("alignSelf", "align-self", "left safe");
276 checkInheritValues("alignSelf", "align-self", "center unsafe"); 289 checkInheritValues("alignSelf", "align-self", "center unsafe");
277 }, "Test the value 'inherit'"); 290 }, "Test the value 'inherit'");
278 </script> 291 </script>
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/fast/alignment/new-alignment-values-invalid-if-grid-not-enabled.html ('k') | third_party/WebKit/LayoutTests/fast/alignment/parse-alignment-of-root-elements.html » ('j') | no next file with comments »

Powered by Google App Engine