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

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 2746453005: [css-align] Adapt self-alignment properties to the new baseline syntax (Closed)
Patch Set: More layout tests fixes. Created 3 years, 9 months 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>
3 <head>
4 <style> 2 <style>
5 #alignSelfBaseline { 3 #alignSelfBaseline {
6 align-self: baseline; 4 align-self: baseline;
7 } 5 }
8 6
7 #alignSelfFirstBaseline {
8 align-self: first baseline;
9 }
10
9 #alignSelfLastBaseline { 11 #alignSelfLastBaseline {
10 align-self: last-baseline; 12 align-self: last baseline;
11 } 13 }
12 14
13 #alignSelfStretch { 15 #alignSelfStretch {
14 align-self: stretch; 16 align-self: stretch;
15 } 17 }
16 18
17 #alignSelfStart { 19 #alignSelfStart {
18 align-self: start; 20 align-self: start;
19 } 21 }
20 22
(...skipping 54 matching lines...) Expand 10 before | Expand all | Expand 10 after
75 } 77 }
76 78
77 #alignSelfFlexStartUnsafe { 79 #alignSelfFlexStartUnsafe {
78 align-self: flex-start unsafe; 80 align-self: flex-start unsafe;
79 } 81 }
80 82
81 #alignSelfFlexEndSafe { 83 #alignSelfFlexEndSafe {
82 align-self: flex-end safe; 84 align-self: flex-end safe;
83 } 85 }
84 </style> 86 </style>
85 <script src="../../resources/js-test.js"></script> 87 <p>Test that setting and getting align-self works as expected</p>
86 </head>
87 <body>
88 <div id="alignSelfBaseline"></div> 88 <div id="alignSelfBaseline"></div>
89 <div id="alignSelfFirstBaseline"></div>
89 <div id="alignSelfLastBaseline"></div> 90 <div id="alignSelfLastBaseline"></div>
90 <div id="alignSelfStretch"></div> 91 <div id="alignSelfStretch"></div>
91 <div id="alignSelfStart"></div> 92 <div id="alignSelfStart"></div>
92 <div id="alignSelfEnd"></div> 93 <div id="alignSelfEnd"></div>
93 <div id="alignSelfCenter"></div> 94 <div id="alignSelfCenter"></div>
94 <div id="alignSelfSelfStart"></div> 95 <div id="alignSelfSelfStart"></div>
95 <div id="alignSelfSelfEnd"></div> 96 <div id="alignSelfSelfEnd"></div>
96 <div id="alignSelfLeft"></div> 97 <div id="alignSelfLeft"></div>
97 <div id="alignSelfRight"></div> 98 <div id="alignSelfRight"></div>
98 <div id="alignSelfFlexStart"></div> 99 <div id="alignSelfFlexStart"></div>
99 <div id="alignSelfFlexEnd"></div> 100 <div id="alignSelfFlexEnd"></div>
100 101
101 <div id="alignSelfEndUnsafe"></div> 102 <div id="alignSelfEndUnsafe"></div>
102 <div id="alignSelfCenterUnsafe"></div> 103 <div id="alignSelfCenterUnsafe"></div>
103 <div id="alignSelfSelfEndSafe"></div> 104 <div id="alignSelfSelfEndSafe"></div>
104 <div id="alignSelfSelfStartSafe"></div> 105 <div id="alignSelfSelfStartSafe"></div>
105 <div id="alignSelfRightSafe"></div> 106 <div id="alignSelfRightSafe"></div>
106 <div id="alignSelfLeftUnsafe"></div> 107 <div id="alignSelfLeftUnsafe"></div>
107 <div id="alignSelfFlexStartUnsafe"></div> 108 <div id="alignSelfFlexStartUnsafe"></div>
108 <div id="alignSelfFlexEndSafe"></div> 109 <div id="alignSelfFlexEndSafe"></div>
109 <script src="resources/alignment-parsing-utils.js"></script> 110 <script src="../../resources/testharness.js"></script>
111 <script src="../../resources/testharnessreport.js"></script>
112 <script src="resources/alignment-parsing-utils-th.js"></script>
110 <script> 113 <script>
111 description('Test that setting and getting align-self works as expected'); 114 test(function() {
115 var alignSelfBaseline = document.getElementById("alignSelfBaseline");
116 checkValues(alignSelfBaseline, "alignSelf", "align-self", "", "baseline");
117 var alignSelfFirstBaseline = document.getElementById("alignSelfFirstBaseline ");
118 checkValues(alignSelfFirstBaseline, "alignSelf", "align-self", "", "baseline ");
119 var alignSelfLastBaseline = document.getElementById("alignSelfLastBaseline") ;
120 checkValues(alignSelfLastBaseline, "alignSelf", "align-self", "", "last base line");
121 var alignSelfStretch = document.getElementById("alignSelfStretch");
122 checkValues(alignSelfStretch, "alignSelf", "align-self", "", "stretch");
123 var alignSelfStart = document.getElementById("alignSelfStart");
124 checkValues(alignSelfStart, "alignSelf", "align-self", "", "start");
125 var alignSelfEnd = document.getElementById("alignSelfEnd");
126 checkValues(alignSelfEnd, "alignSelf", "align-self", "", "end");
127 var alignSelfCenter = document.getElementById("alignSelfCenter");
128 checkValues(alignSelfCenter, "alignSelf", "align-self", "", "center");
129 var alignSelfSelfEnd = document.getElementById("alignSelfSelfEnd");
130 checkValues(alignSelfSelfEnd, "alignSelf", "align-self", "", "self-end");
131 var alignSelfSelfStart = document.getElementById("alignSelfSelfStart");
132 checkValues(alignSelfSelfStart, "alignSelf", "align-self", "", "self-start") ;
133 var alignSelfLeft = document.getElementById("alignSelfLeft");
134 checkValues(alignSelfLeft, "alignSelf", "align-self", "", "left");
135 var alignSelfRight = document.getElementById("alignSelfRight");
136 checkValues(alignSelfRight, "alignSelf", "align-self", "", "right");
137 var alignSelfFlexStart = document.getElementById("alignSelfFlexStart");
138 checkValues(alignSelfFlexStart, "alignSelf", "align-self", "", "flex-start") ;
139 var alignSelfFlexEnd = document.getElementById("alignSelfFlexEnd");
140 checkValues(alignSelfFlexEnd, "alignSelf", "align-self", "", "flex-end");
112 141
113 debug("Test getting align-self set through CSS"); 142 var alignSelfEndUnsafe = document.getElementById("alignSelfEndUnsafe");
114 var alignSelfBaseline = document.getElementById("alignSelfBaseline"); 143 checkValues(alignSelfEndUnsafe, "alignSelf", "align-self", "", "end unsafe") ;
115 shouldBe("getComputedStyle(alignSelfBaseline, '').getPropertyValue('align-self') ", "'baseline'"); 144 var alignSelfCenterUnsafe = document.getElementById("alignSelfCenterUnsafe") ;
145 checkValues(alignSelfCenterUnsafe, "alignSelf", "align-self", "", "center un safe");
146 var alignSelfSelfEndSafe = document.getElementById("alignSelfSelfEndSafe");
147 checkValues(alignSelfSelfEndSafe, "alignSelf", "align-self", "", "self-end s afe");
148 var alignSelfSelfStartSafe = document.getElementById("alignSelfSelfStartSafe ");
149 checkValues(alignSelfSelfStartSafe, "alignSelf", "align-self", "", "self-sta rt safe");
150 var alignSelfRightSafe = document.getElementById("alignSelfRightSafe");
151 checkValues(alignSelfRightSafe, "alignSelf", "align-self", "", "right safe") ;
152 var alignSelfLeftUnsafe = document.getElementById("alignSelfLeftUnsafe");
153 checkValues(alignSelfLeftUnsafe, "alignSelf", "align-self", "", "left unsafe ");
154 var alignSelfFlexStartUnsafe = document.getElementById("alignSelfFlexStartUn safe");
155 checkValues(alignSelfFlexStartUnsafe, "alignSelf", "align-self", "", "flex-s tart unsafe");
156 var alignSelfFlexEndSafe = document.getElementById("alignSelfFlexEndSafe");
157 checkValues(alignSelfFlexEndSafe, "alignSelf", "align-self", "", "flex-end s afe");
158 }, "Test getting align-self set through CSS.");
116 159
117 var alignSelfLastBaseline = document.getElementById("alignSelfLastBaseline"); 160 test(function() {
118 shouldBe("getComputedStyle(alignSelfLastBaseline, '').getPropertyValue('align-se lf')", "'last-baseline'"); 161 element = document.createElement("div");
162 document.body.appendChild(element);
163 checkValues(element, "alignSelf", "align-self", "", "normal");
164 }, "Test initial value of align-self through JS");
119 165
120 var alignSelfStretch = document.getElementById("alignSelfStretch"); 166 test(function() {
121 shouldBe("getComputedStyle(alignSelfStretch, '').getPropertyValue('align-self')" , "'stretch'"); 167 container = document.createElement("div");
168 element = document.createElement("div");
169 container.appendChild(element);
170 document.body.appendChild(container);
171 element.style.alignSelf = "center";
172 checkValues(element, "alignSelf", "align-self", "center", "center");
122 173
123 var alignSelfStart = document.getElementById("alignSelfStart"); 174 element.style.alignSelf = "unsafe start";
124 shouldBe("getComputedStyle(alignSelfStart, '').getPropertyValue('align-self')", "'start'"); 175 checkValues(element, "alignSelf", "align-self", "start unsafe", "start unsa fe");
125 176
126 var alignSelfEnd = document.getElementById("alignSelfEnd"); 177 element.style.alignSelf = "flex-end safe";
127 shouldBe("getComputedStyle(alignSelfEnd, '').getPropertyValue('align-self')", "' end'"); 178 checkValues(element, "alignSelf", "align-self", "flex-end safe", "flex-end safe");
128 179
129 var alignSelfCenter = document.getElementById("alignSelfCenter"); 180 element.style.alignSelf = "right";
130 shouldBe("getComputedStyle(alignSelfCenter, '').getPropertyValue('align-self')", "'center'"); 181 checkValues(element, "alignSelf", "align-self", "right", "right");
131 182
132 var alignSelfSelfEnd = document.getElementById("alignSelfSelfEnd"); 183 element.style.alignSelf = "center";
133 shouldBe("getComputedStyle(alignSelfSelfEnd, '').getPropertyValue('align-self')" , "'self-end'"); 184 checkValues(element, "alignSelf", "align-self", "center", "center");
134 185
135 var alignSelfSelfStart = document.getElementById("alignSelfSelfStart"); 186 element.style.alignSelf = "self-start";
136 shouldBe("getComputedStyle(alignSelfSelfStart, '').getPropertyValue('align-self' )", "'self-start'"); 187 checkValues(element, "alignSelf", "align-self", "self-start", "self-start") ;
137 188
138 var alignSelfLeft = document.getElementById("alignSelfLeft"); 189 element.style.alignSelf = "auto";
139 shouldBe("getComputedStyle(alignSelfLeft, '').getPropertyValue('align-self')", " 'left'"); 190 checkValues(element, "alignSelf", "align-self", "auto", "normal");
140 191
141 var alignSelfRight = document.getElementById("alignSelfRight"); 192 container.style.display = "flex";
142 shouldBe("getComputedStyle(alignSelfRight, '').getPropertyValue('align-self')", "'right'"); 193 element.style.alignSelf = "auto";
194 checkValues(element, "alignSelf", "align-self", "auto", "normal");
143 195
144 var alignSelfFlexStart = document.getElementById("alignSelfFlexStart"); 196 container.style.display = "grid";
145 shouldBe("getComputedStyle(alignSelfFlexStart, '').getPropertyValue('align-self' )", "'flex-start'"); 197 element.style.alignSelf = "auto";
198 checkValues(element, "alignSelf", "align-self", "auto", "normal");
146 199
147 var alignSelfFlexEnd = document.getElementById("alignSelfFlexEnd"); 200 element.style.alignSelf = "self-end";
148 shouldBe("getComputedStyle(alignSelfFlexEnd, '').getPropertyValue('align-self')" , "'flex-end'"); 201 checkValues(element, "alignSelf", "align-self", "self-end", "self-end");
202 }, "Test getting and setting align-self through JS");
149 203
150 var alignSelfEndUnsafe = document.getElementById("alignSelfEndUnsafe"); 204 test(function() {
151 shouldBe("getComputedStyle(alignSelfEndUnsafe, '').getPropertyValue('align-self' )", "'end unsafe'"); 205 document.documentElement.style.alignSelf = "auto";
206 checkValues(document.documentElement, "alignSelf", "align-self", "auto", "n ormal");
207 }, "Test 'auto' value resolution for the root node");
152 208
153 var alignSelfCenterUnsafe = document.getElementById("alignSelfCenterUnsafe"); 209 test(function() {
154 shouldBe("getComputedStyle(alignSelfCenterUnsafe, '').getPropertyValue('align-se lf')", "'center unsafe'"); 210 container = document.createElement("div");
211 element = document.createElement("div");
212 container.appendChild(element);
213 document.body.appendChild(container);
155 214
156 var alignSelfSelfEndSafe = document.getElementById("alignSelfSelfEndSafe"); 215 checkBadValues(element, "alignSelf", "align-self", "auto safe");
157 shouldBe("getComputedStyle(alignSelfSelfEndSafe, '').getPropertyValue('align-sel f')", "'self-end safe'"); 216 checkBadValues(element, "alignSelf", "align-self", "auto left");
217 checkBadValues(element, "alignSelf", "align-self", "baseline safe");
218 checkBadValues(element, "alignSelf", "align-self", "baseline center");
219 checkBadValues(element, "alignSelf", "align-self", "stretch unsafe");
220 checkBadValues(element, "alignSelf", "align-self", "stretch right");
221 checkBadValues(element, "alignSelf", "align-self", "unsafe unsafe");
222 checkBadValues(element, "alignSelf", "align-self", "unsafe safe");
223 checkBadValues(element, "alignSelf", "align-self", "center start");
224 checkBadValues(element, "alignSelf", "align-self", "stretch unsafe");
225 checkBadValues(element, "alignSelf", "align-self", "safe stretch");
226 checkBadValues(element, "alignSelf", "align-self", "baseline safe");
227 checkBadValues(element, "alignSelf", "align-self", "unsafe baseline");
228 checkBadValues(element, "alignSelf", "align-self", "unsafe safe left");
229 checkBadValues(element, "alignSelf", "align-self", "unsafe left safe");
230 checkBadValues(element, "alignSelf", "align-self", "left safe unsafe safe") ;
231 checkBadValues(element, "alignSelf", "align-self", "legacy start");
232 checkBadValues(element, "alignSelf", "align-self", "legacy end");
233 checkBadValues(element, "alignSelf", "align-self", "legacy right unsafe");
234 checkBadValues(element, "alignSelf", "align-self", "legacy auto");
235 checkBadValues(element, "alignSelf", "align-self", "legacy stretch");
236 checkBadValues(element, "alignSelf", "align-self", "legacy");
237 checkBadValues(element, "alignSelf", "align-self", "legacy left right");
238 }, "Test bad combinations of align-self");
158 239
159 var alignSelfSelfStartSafe = document.getElementById("alignSelfSelfStartSafe"); 240 test(function() {
160 shouldBe("getComputedStyle(alignSelfSelfStartSafe, '').getPropertyValue('align-s elf')", "'self-start safe'"); 241 container.style.display = "";
242 checkInitialValues(element, "alignSelf", "align-self", "center", "normal");
243 }, "Test the value 'initial'");
161 244
162 var alignSelfRightSafe = document.getElementById("alignSelfRightSafe"); 245 test(function() {
163 shouldBe("getComputedStyle(alignSelfRightSafe, '').getPropertyValue('align-self' )", "'right safe'"); 246 container.style.display = "grid";
247 checkInitialValues(element, "alignSelf", "align-self", "left safe", "normal" );
248 }, "Test the value 'initial' for grid containers");
164 249
165 var alignSelfLeftUnsafe = document.getElementById("alignSelfLeftUnsafe"); 250 test(function() {
166 shouldBe("getComputedStyle(alignSelfLeftUnsafe, '').getPropertyValue('align-self ')", "'left unsafe'"); 251 container.style.display = "flex";
252 checkInitialValues(element, "alignSelf", "align-self", "right unsafe", "norm al");
253 }, "Test the value 'initial' for flex containers");
167 254
168 var alignSelfFlexStartUnsafe = document.getElementById("alignSelfFlexStartUnsafe "); 255 test(function() {
169 shouldBe("getComputedStyle(alignSelfFlexStartUnsafe, '').getPropertyValue('align -self')", "'flex-start unsafe'"); 256 container.style.display = "";
257 element.style.position = "absolute";
258 checkInitialValues(element, "alignSelf", "align-self", "left", "normal");
259 }, "Test the value 'initial' for positioned elements");
170 260
171 var alignSelfFlexEndSafe = document.getElementById("alignSelfFlexEndSafe"); 261 test(function() {
172 shouldBe("getComputedStyle(alignSelfFlexEndSafe, '').getPropertyValue('align-sel f')", "'flex-end safe'"); 262 container.style.display = "grid";
263 element.style.position = "absolute";
264 checkInitialValues(element, "alignSelf", "align-self", "right", "normal");
265 }, "Test the value 'initial' for positioned elements in grid containers");
173 266
174 debug(""); 267 test(function() {
175 debug("Test initial value of align-self through JS"); 268 container.style.display = "flex";
176 element = document.createElement("div"); 269 element.style.position = "absolute";
177 document.body.appendChild(element); 270 checkInitialValues(element, "alignSelf", "align-self", "end", "normal");
178 shouldBe("getComputedStyle(element, '').getPropertyValue('align-self')", "'norma l'"); 271 }, "Test the value 'initial' for positioned elements in grid containers");
179 272
180 debug(""); 273 test(function() {
181 debug("Test getting and setting align-self through JS"); 274 checkInheritValues("alignSelf", "align-self", "end");
182 container = document.createElement("div"); 275 checkInheritValues("alignSelf", "align-self", "left safe");
183 element = document.createElement("div"); 276 checkInheritValues("alignSelf", "align-self", "center unsafe");
184 container.appendChild(element); 277 }, "Test the value 'inherit'");
185 document.body.appendChild(container);
186 element.style.alignSelf = "center";
187 checkValues(element, "alignSelf", "align-self", "center", "center");
188
189 element.style.alignSelf = "unsafe start";
190 checkValues(element, "alignSelf", "align-self", "start unsafe", "start unsafe") ;
191
192 element.style.alignSelf = "flex-end safe";
193 checkValues(element, "alignSelf", "align-self", "flex-end safe", "flex-end safe ");
194
195 element.style.alignSelf = "right";
196 checkValues(element, "alignSelf", "align-self", "right", "right");
197
198 element.style.alignSelf = "center";
199 checkValues(element, "alignSelf", "align-self", "center", "center");
200
201 element.style.alignSelf = "self-start";
202 checkValues(element, "alignSelf", "align-self", "self-start", "self-start");
203
204 element.style.alignSelf = "auto";
205 checkValues(element, "alignSelf", "align-self", "auto", "normal");
206
207 container.style.display = "flex";
208 element.style.alignSelf = "auto";
209 checkValues(element, "alignSelf", "align-self", "auto", "normal");
210
211 container.style.display = "grid";
212 element.style.alignSelf = "auto";
213 checkValues(element, "alignSelf", "align-self", "auto", "normal");
214
215 element.style.alignSelf = "self-end";
216 checkValues(element, "alignSelf", "align-self", "self-end", "self-end");
217
218 debug("");
219 debug("Test 'auto' value resolution for the root node");
220 document.documentElement.style.alignSelf = "auto";
221 checkValues(document.documentElement, "alignSelf", "align-self", "auto", "norma l");
222
223 debug("");
224 debug("Test bad combinations of align-self");
225 container = document.createElement("div");
226 element = document.createElement("div");
227 container.appendChild(element);
228 document.body.appendChild(container);
229
230 checkBadValues(element, "alignSelf", "align-self", "unsafe auto");
231 checkBadValues(element, "alignSelf", "align-self", "auto safe");
232 checkBadValues(element, "alignSelf", "align-self", "auto left");
233 checkBadValues(element, "alignSelf", "align-self", "baseline safe");
234 checkBadValues(element, "alignSelf", "align-self", "baseline center");
235 checkBadValues(element, "alignSelf", "align-self", "stretch unsafe");
236 checkBadValues(element, "alignSelf", "align-self", "stretch right");
237 checkBadValues(element, "alignSelf", "align-self", "unsafe unsafe");
238 checkBadValues(element, "alignSelf", "align-self", "unsafe safe");
239 checkBadValues(element, "alignSelf", "align-self", "center start");
240 checkBadValues(element, "alignSelf", "align-self", "stretch unsafe");
241 checkBadValues(element, "alignSelf", "align-self", "safe stretch");
242 checkBadValues(element, "alignSelf", "align-self", "baseline safe");
243 checkBadValues(element, "alignSelf", "align-self", "unsafe baseline");
244 checkBadValues(element, "alignSelf", "align-self", "unsafe safe left");
245 checkBadValues(element, "alignSelf", "align-self", "unsafe left safe");
246 checkBadValues(element, "alignSelf", "align-self", "left safe unsafe safe");
247 checkBadValues(element, "alignSelf", "align-self", "legacy start");
248 checkBadValues(element, "alignSelf", "align-self", "legacy end");
249 checkBadValues(element, "alignSelf", "align-self", "legacy right unsafe");
250 checkBadValues(element, "alignSelf", "align-self", "legacy auto");
251 checkBadValues(element, "alignSelf", "align-self", "legacy stretch");
252 checkBadValues(element, "alignSelf", "align-self", "legacy");
253 checkBadValues(element, "alignSelf", "align-self", "legacy left right");
254
255 debug("");
256 debug("Test the value 'initial'");
257 container.style.display = "";
258 checkInitialValues(element, "alignSelf", "align-self", "center", "normal");
259
260 debug("");
261 debug("Test the value 'initial' for grid containers");
262 container.style.display = "grid";
263 checkInitialValues(element, "alignSelf", "align-self", "left safe", "normal");
264
265 debug("");
266 debug("Test the value 'initial' for flex containers");
267 container.style.display = "flex";
268 checkInitialValues(element, "alignSelf", "align-self", "right unsafe", "normal") ;
269
270 debug("");
271 debug("Test the value 'initial' for positioned elements");
272 container.style.display = "";
273 element.style.position = "absolute";
274 checkInitialValues(element, "alignSelf", "align-self", "left", "normal");
275
276 debug("");
277 debug("Test the value 'initial' for positioned elements in grid containers");
278 container.style.display = "grid";
279 element.style.position = "absolute";
280 checkInitialValues(element, "alignSelf", "align-self", "right", "normal");
281
282 debug("");
283 debug("Test the value 'initial' for positioned elements in grid containers");
284 container.style.display = "flex";
285 element.style.position = "absolute";
286 checkInitialValues(element, "alignSelf", "align-self", "end", "normal");
287
288 debug("");
289 debug("Test the value 'inherit'");
290 checkInheritValues("alignSelf", "align-self", "end");
291 checkInheritValues("alignSelf", "align-self", "left safe");
292 checkInheritValues("alignSelf", "align-self", "center unsafe");
293
294 </script> 278 </script>
295 </body>
296 </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