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

Side by Side Diff: third_party/WebKit/LayoutTests/fast/alignment/parse-justify-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
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html>
3 <head>
4 <style> 2 <style>
5 #justifySelfBaseline { 3 #justifySelfBaseline {
6 justify-self: baseline; 4 justify-self: baseline;
7 } 5 }
8 6
7 #justifySelfFirstBaseline {
8 justify-self: first baseline;
9 }
10
9 #justifySelfLastBaseline { 11 #justifySelfLastBaseline {
10 justify-self: last-baseline; 12 justify-self: last baseline;
11 } 13 }
12 14
13 #justifySelfStretch { 15 #justifySelfStretch {
14 justify-self: stretch; 16 justify-self: stretch;
15 } 17 }
16 18
17 #justifySelfStart { 19 #justifySelfStart {
18 justify-self: start; 20 justify-self: start;
19 } 21 }
20 22
(...skipping 54 matching lines...) Expand 10 before | Expand all | Expand 10 after
75 } 77 }
76 78
77 #justifySelfFlexStartUnsafe { 79 #justifySelfFlexStartUnsafe {
78 justify-self: flex-start unsafe; 80 justify-self: flex-start unsafe;
79 } 81 }
80 82
81 #justifySelfFlexEndSafe { 83 #justifySelfFlexEndSafe {
82 justify-self: flex-end safe; 84 justify-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 justify-self works as expected</p>
86 </head>
87 <body>
88 <div id="justifySelfBaseline"></div> 88 <div id="justifySelfBaseline"></div>
89 <div id="justifySelfFirstBaseline"></div>
89 <div id="justifySelfLastBaseline"></div> 90 <div id="justifySelfLastBaseline"></div>
90 <div id="justifySelfStretch"></div> 91 <div id="justifySelfStretch"></div>
91 <div id="justifySelfStart"></div> 92 <div id="justifySelfStart"></div>
92 <div id="justifySelfEnd"></div> 93 <div id="justifySelfEnd"></div>
93 <div id="justifySelfCenter"></div> 94 <div id="justifySelfCenter"></div>
94 <div id="justifySelfSelfStart"></div> 95 <div id="justifySelfSelfStart"></div>
95 <div id="justifySelfSelfEnd"></div> 96 <div id="justifySelfSelfEnd"></div>
96 <div id="justifySelfLeft"></div> 97 <div id="justifySelfLeft"></div>
97 <div id="justifySelfRight"></div> 98 <div id="justifySelfRight"></div>
98 <div id="justifySelfFlexStart"></div> 99 <div id="justifySelfFlexStart"></div>
99 <div id="justifySelfFlexEnd"></div> 100 <div id="justifySelfFlexEnd"></div>
100 101
101 <div id="justifySelfEndUnsafe"></div> 102 <div id="justifySelfEndUnsafe"></div>
102 <div id="justifySelfCenterUnsafe"></div> 103 <div id="justifySelfCenterUnsafe"></div>
103 <div id="justifySelfSelfEndSafe"></div> 104 <div id="justifySelfSelfEndSafe"></div>
104 <div id="justifySelfSelfStartSafe"></div> 105 <div id="justifySelfSelfStartSafe"></div>
105 <div id="justifySelfRightSafe"></div> 106 <div id="justifySelfRightSafe"></div>
106 <div id="justifySelfLeftUnsafe"></div> 107 <div id="justifySelfLeftUnsafe"></div>
107 <div id="justifySelfFlexStartUnsafe"></div> 108 <div id="justifySelfFlexStartUnsafe"></div>
108 <div id="justifySelfFlexEndSafe"></div> 109 <div id="justifySelfFlexEndSafe"></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 justify-self works as expected'); 114 test(function() {
115 var justifySelfBaseline = document.getElementById("justifySelfBaseline");
116 checkValues(justifySelfBaseline, "justifySelf", "justify-self", "", "baselin e");
117 var justifySelfFirstBaseline = document.getElementById("justifySelfFirstBase line");
118 checkValues(justifySelfFirstBaseline, "justifySelf", "justify-self", "", "ba seline");
119 var justifySelfLastBaseline = document.getElementById("justifySelfLastBaseli ne");
120 checkValues(justifySelfLastBaseline, "justifySelf", "justify-self", "", "las t baseline");
121 var justifySelfStretch = document.getElementById("justifySelfStretch");
122 checkValues(justifySelfStretch, "justifySelf", "justify-self", "", "stretch" );
123 var justifySelfStart = document.getElementById("justifySelfStart");
124 checkValues(justifySelfStart, "justifySelf", "justify-self", "", "start");
125 var justifySelfEnd = document.getElementById("justifySelfEnd");
126 checkValues(justifySelfEnd, "justifySelf", "justify-self", "", "end");
127 var justifySelfCenter = document.getElementById("justifySelfCenter");
128 checkValues(justifySelfCenter, "justifySelf", "justify-self", "", "center");
129 var justifySelfSelfEnd = document.getElementById("justifySelfSelfEnd");
130 checkValues(justifySelfSelfEnd, "justifySelf", "justify-self", "", "self-end ");
131 var justifySelfSelfStart = document.getElementById("justifySelfSelfStart");
132 checkValues(justifySelfSelfStart, "justifySelf", "justify-self", "", "self-s tart");
133 var justifySelfLeft = document.getElementById("justifySelfLeft");
134 checkValues(justifySelfLeft, "justifySelf", "justify-self", "", "left");
135 var justifySelfRight = document.getElementById("justifySelfRight");
136 checkValues(justifySelfRight, "justifySelf", "justify-self", "", "right");
137 var justifySelfFlexStart = document.getElementById("justifySelfFlexStart");
138 checkValues(justifySelfFlexStart, "justifySelf", "justify-self", "", "flex-s tart");
139 var justifySelfFlexEnd = document.getElementById("justifySelfFlexEnd");
140 checkValues(justifySelfFlexEnd, "justifySelf", "justify-self", "", "flex-end ");
112 141
113 debug("Test getting justify-self set through CSS"); 142 var justifySelfEndUnsafe = document.getElementById("justifySelfEndUnsafe");
114 var justifySelfBaseline = document.getElementById("justifySelfBaseline"); 143 checkValues(justifySelfEndUnsafe, "justifySelf", "justify-self", "", "end un safe");
115 shouldBe("getComputedStyle(justifySelfBaseline, '').getPropertyValue('justify-se lf')", "'baseline'"); 144 var justifySelfCenterUnsafe = document.getElementById("justifySelfCenterUnsa fe");
145 checkValues(justifySelfCenterUnsafe, "justifySelf", "justify-self", "", "cen ter unsafe");
146 var justifySelfSelfEndSafe = document.getElementById("justifySelfSelfEndSafe ");
147 checkValues(justifySelfSelfEndSafe, "justifySelf", "justify-self", "", "self -end safe");
148 var justifySelfSelfStartSafe = document.getElementById("justifySelfSelfStart Safe");
149 checkValues(justifySelfSelfStartSafe, "justifySelf", "justify-self", "", "se lf-start safe");
150 var justifySelfRightSafe = document.getElementById("justifySelfRightSafe");
151 checkValues(justifySelfRightSafe, "justifySelf", "justify-self", "", "right safe");
152 var justifySelfLeftUnsafe = document.getElementById("justifySelfLeftUnsafe") ;
153 checkValues(justifySelfLeftUnsafe, "justifySelf", "justify-self", "", "left unsafe");
154 var justifySelfFlexStartUnsafe = document.getElementById("justifySelfFlexSta rtUnsafe");
155 checkValues(justifySelfFlexStartUnsafe, "justifySelf", "justify-self", "", " flex-start unsafe");
156 var justifySelfFlexEndSafe = document.getElementById("justifySelfFlexEndSafe ");
157 checkValues(justifySelfFlexEndSafe, "justifySelf", "justify-self", "", "flex -end safe");
158 }, "Test getting justify-self set through CSS.");
116 159
117 var justifySelfLastBaseline = document.getElementById("justifySelfLastBaseline") ; 160 test(function() {
118 shouldBe("getComputedStyle(justifySelfLastBaseline, '').getPropertyValue('justif y-self')", "'last-baseline'"); 161 element = document.createElement("div");
162 document.body.appendChild(element);
163 checkValues(element, "justifySelf", "justify-self", "", "normal");
164 }, "Test initial value of justify-self through JS");
119 165
120 var justifySelfStretch = document.getElementById("justifySelfStretch"); 166 test(function() {
121 shouldBe("getComputedStyle(justifySelfStretch, '').getPropertyValue('justify-sel f')", "'stretch'"); 167 container = document.createElement("div");
168 element = document.createElement("div");
169 container.appendChild(element);
170 document.body.appendChild(container);
171 element.style.justifySelf = "center";
172 checkValues(element, "justifySelf", "justify-self", "center", "center");
122 173
123 var justifySelfStart = document.getElementById("justifySelfStart"); 174 element.style.justifySelf = "unsafe start";
124 shouldBe("getComputedStyle(justifySelfStart, '').getPropertyValue('justify-self' )", "'start'"); 175 checkValues(element, "justifySelf", "justify-self", "start unsafe", "start unsafe");
125 176
126 var justifySelfEnd = document.getElementById("justifySelfEnd"); 177 element.style.justifySelf = "flex-end safe";
127 shouldBe("getComputedStyle(justifySelfEnd, '').getPropertyValue('justify-self')" , "'end'"); 178 checkValues(element, "justifySelf", "justify-self", "flex-end safe", "flex- end safe");
128 179
129 var justifySelfCenter = document.getElementById("justifySelfCenter"); 180 element.style.justifySelf = "right";
130 shouldBe("getComputedStyle(justifySelfCenter, '').getPropertyValue('justify-self ')", "'center'"); 181 checkValues(element, "justifySelf", "justify-self", "right", "right");
131 182
132 var justifySelfSelfEnd = document.getElementById("justifySelfSelfEnd"); 183 element.style.justifySelf = "center";
133 shouldBe("getComputedStyle(justifySelfSelfEnd, '').getPropertyValue('justify-sel f')", "'self-end'"); 184 checkValues(element, "justifySelf", "justify-self", "center", "center");
134 185
135 var justifySelfSelfStart = document.getElementById("justifySelfSelfStart"); 186 element.style.justifySelf = "self-start";
136 shouldBe("getComputedStyle(justifySelfSelfStart, '').getPropertyValue('justify-s elf')", "'self-start'"); 187 checkValues(element, "justifySelf", "justify-self", "self-start", "self-sta rt");
137 188
138 var justifySelfLeft = document.getElementById("justifySelfLeft"); 189 element.style.justifySelf = "auto";
139 shouldBe("getComputedStyle(justifySelfLeft, '').getPropertyValue('justify-self') ", "'left'"); 190 checkValues(element, "justifySelf", "justify-self", "auto", "normal");
140 191
141 var justifySelfRight = document.getElementById("justifySelfRight"); 192 container.style.display = "flex";
142 shouldBe("getComputedStyle(justifySelfRight, '').getPropertyValue('justify-self' )", "'right'"); 193 element.style.justifySelf = "auto";
194 checkValues(element, "justifySelf", "justify-self", "auto", "normal");
143 195
144 var justifySelfFlexStart = document.getElementById("justifySelfFlexStart"); 196 container.style.display = "grid";
145 shouldBe("getComputedStyle(justifySelfFlexStart, '').getPropertyValue('justify-s elf')", "'flex-start'"); 197 element.style.justifySelf = "auto";
198 checkValues(element, "justifySelf", "justify-self", "auto", "normal");
146 199
147 var justifySelfFlexEnd = document.getElementById("justifySelfFlexEnd"); 200 element.style.justifySelf = "self-end";
148 shouldBe("getComputedStyle(justifySelfFlexEnd, '').getPropertyValue('justify-sel f')", "'flex-end'"); 201 checkValues(element, "justifySelf", "justify-self", "self-end", "self-end") ;
202 }, "Test getting and setting justify-self through JS");
149 203
150 var justifySelfEndUnsafe = document.getElementById("justifySelfEndUnsafe"); 204 test(function() {
151 shouldBe("getComputedStyle(justifySelfEndUnsafe, '').getPropertyValue('justify-s elf')", "'end unsafe'"); 205 document.documentElement.style.justifySelf = "auto";
206 checkValues(document.documentElement, "justifySelf", "justify-self", "auto" , "normal");
207 }, "Test 'auto' value resolution for the root node");
152 208
153 var justifySelfCenterUnsafe = document.getElementById("justifySelfCenterUnsafe") ; 209 test(function() {
154 shouldBe("getComputedStyle(justifySelfCenterUnsafe, '').getPropertyValue('justif y-self')", "'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 justifySelfSelfEndSafe = document.getElementById("justifySelfSelfEndSafe"); 215 checkBadValues(element, "justifySelf", "justify-self", "unsafe auto");
157 shouldBe("getComputedStyle(justifySelfSelfEndSafe, '').getPropertyValue('justify -self')", "'self-end safe'"); 216 checkBadValues(element, "justifySelf", "justify-self", "auto safe");
217 checkBadValues(element, "justifySelf", "justify-self", "auto left");
218 checkBadValues(element, "justifySelf", "justify-self", "baseline safe");
219 checkBadValues(element, "justifySelf", "justify-self", "baseline center");
220 checkBadValues(element, "justifySelf", "justify-self", "stretch unsafe");
221 checkBadValues(element, "justifySelf", "justify-self", "stretch right");
222 checkBadValues(element, "justifySelf", "justify-self", "unsafe unsafe");
223 checkBadValues(element, "justifySelf", "justify-self", "unsafe safe");
224 checkBadValues(element, "justifySelf", "justify-self", "center start");
225 checkBadValues(element, "justifySelf", "justify-self", "stretch unsafe");
226 checkBadValues(element, "justifySelf", "justify-self", "safe stretch");
227 checkBadValues(element, "justifySelf", "justify-self", "baseline safe");
228 checkBadValues(element, "justifySelf", "justify-self", "unsafe baseline");
229 checkBadValues(element, "justifySelf", "justify-self", "unsafe safe left");
230 checkBadValues(element, "justifySelf", "justify-self", "unsafe left safe");
231 checkBadValues(element, "justifySelf", "justify-self", "left safe unsafe sa fe");
232 checkBadValues(element, "justifySelf", "justify-self", "legacy start");
233 checkBadValues(element, "justifySelf", "justify-self", "legacy end");
234 checkBadValues(element, "justifySelf", "justify-self", "legacy right unsafe ");
235 checkBadValues(element, "justifySelf", "justify-self", "legacy auto");
236 checkBadValues(element, "justifySelf", "justify-self", "legacy stretch");
237 checkBadValues(element, "justifySelf", "justify-self", "legacy");
238 checkBadValues(element, "justifySelf", "justify-self", "legacy left right") ;
239 }, "Test bad combinations of justify-self");
158 240
159 var justifySelfSelfStartSafe = document.getElementById("justifySelfSelfStartSafe "); 241 test(function() {
160 shouldBe("getComputedStyle(justifySelfSelfStartSafe, '').getPropertyValue('justi fy-self')", "'self-start safe'"); 242 container.style.display = "";
243 checkInitialValues(element, "justifySelf", "justify-self", "center", "normal ");
244 }, "Test the value 'initial'");
161 245
162 var justifySelfRightSafe = document.getElementById("justifySelfRightSafe"); 246 test(function() {
163 shouldBe("getComputedStyle(justifySelfRightSafe, '').getPropertyValue('justify-s elf')", "'right safe'"); 247 container.style.display = "grid";
248 checkInitialValues(element, "justifySelf", "justify-self", "left safe", "nor mal");
249 }, "Test the value 'initial' for grid containers");
164 250
165 var justifySelfLeftUnsafe = document.getElementById("justifySelfLeftUnsafe"); 251 test(function() {
166 shouldBe("getComputedStyle(justifySelfLeftUnsafe, '').getPropertyValue('justify- self')", "'left unsafe'"); 252 container.style.display = "flex";
253 checkInitialValues(element, "justifySelf", "justify-self", "right unsafe", " normal");
254 }, "Test the value 'initial' for flex containers");
167 255
168 var justifySelfFlexStartUnsafe = document.getElementById("justifySelfFlexStartUn safe"); 256 test(function() {
169 shouldBe("getComputedStyle(justifySelfFlexStartUnsafe, '').getPropertyValue('jus tify-self')", "'flex-start unsafe'"); 257 container.style.display = "";
258 element.style.position = "absolute";
259 checkInitialValues(element, "justifySelf", "justify-self", "left", "normal") ;
260 }, "Test the value 'initial' for positioned elements");
170 261
171 var justifySelfFlexEndSafe = document.getElementById("justifySelfFlexEndSafe"); 262 test(function() {
172 shouldBe("getComputedStyle(justifySelfFlexEndSafe, '').getPropertyValue('justify -self')", "'flex-end safe'"); 263 container.style.display = "grid";
264 element.style.position = "absolute";
265 checkInitialValues(element, "justifySelf", "justify-self", "right", "normal" );
266 }, "Test the value 'initial' for positioned elements in grid containers");
173 267
174 debug(""); 268 test(function() {
175 debug("Test initial value of justify-self through JS"); 269 container.style.display = "flex";
176 element = document.createElement("div"); 270 element.style.position = "absolute";
177 document.body.appendChild(element); 271 checkInitialValues(element, "justifySelf", "justify-self", "end", "normal");
178 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'nor mal'"); 272 }, "Test the value 'initial' for positioned elements in grid containers");
179 273
180 debug(""); 274 test(function() {
181 debug("Test getting and setting justify-self through JS"); 275 checkInheritValues("justifySelf", "justify-self", "end");
182 container = document.createElement("div"); 276 checkInheritValues("justifySelf", "justify-self", "left safe");
183 element = document.createElement("div"); 277 checkInheritValues("justifySelf", "justify-self", "center unsafe");
184 container.appendChild(element); 278 }, "Test the value 'inherit'");
185 document.body.appendChild(container);
186 element.style.justifySelf = "center";
187 checkValues(element, "justifySelf", "justify-self", "center", "center");
188
189 element.style.justifySelf = "unsafe start";
190 checkValues(element, "justifySelf", "justify-self", "start unsafe", "start unsa fe");
191
192 element.style.justifySelf = "flex-end safe";
193 checkValues(element, "justifySelf", "justify-self", "flex-end safe", "flex-end safe");
194
195 element.style.justifySelf = "right";
196 checkValues(element, "justifySelf", "justify-self", "right", "right");
197
198 element.style.justifySelf = "center";
199 checkValues(element, "justifySelf", "justify-self", "center", "center");
200
201 element.style.justifySelf = "self-start";
202 checkValues(element, "justifySelf", "justify-self", "self-start", "self-start") ;
203
204 element.style.justifySelf = "auto";
205 checkValues(element, "justifySelf", "justify-self", "auto", "normal");
206
207 container.style.display = "flex";
208 element.style.justifySelf = "auto";
209 checkValues(element, "justifySelf", "justify-self", "auto", "normal");
210
211 container.style.display = "grid";
212 element.style.justifySelf = "auto";
213 checkValues(element, "justifySelf", "justify-self", "auto", "normal");
214
215 element.style.justifySelf = "self-end";
216 checkValues(element, "justifySelf", "justify-self", "self-end", "self-end");
217
218 debug("");
219 debug("Test 'auto' value resolution for the root node");
220 document.documentElement.style.justifySelf = "auto";
221 checkValues(document.documentElement, "justifySelf", "justify-self", "auto", "n ormal");
222
223 debug("");
224 debug("Test bad combinations of justify-self");
225 container = document.createElement("div");
226 element = document.createElement("div");
227 container.appendChild(element);
228 document.body.appendChild(container);
229
230 checkBadValues(element, "justifySelf", "justify-self", "unsafe auto");
231 checkBadValues(element, "justifySelf", "justify-self", "auto safe");
232 checkBadValues(element, "justifySelf", "justify-self", "auto left");
233 checkBadValues(element, "justifySelf", "justify-self", "baseline safe");
234 checkBadValues(element, "justifySelf", "justify-self", "baseline center");
235 checkBadValues(element, "justifySelf", "justify-self", "stretch unsafe");
236 checkBadValues(element, "justifySelf", "justify-self", "stretch right");
237 checkBadValues(element, "justifySelf", "justify-self", "unsafe unsafe");
238 checkBadValues(element, "justifySelf", "justify-self", "unsafe safe");
239 checkBadValues(element, "justifySelf", "justify-self", "center start");
240 checkBadValues(element, "justifySelf", "justify-self", "stretch unsafe");
241 checkBadValues(element, "justifySelf", "justify-self", "safe stretch");
242 checkBadValues(element, "justifySelf", "justify-self", "baseline safe");
243 checkBadValues(element, "justifySelf", "justify-self", "unsafe baseline");
244 checkBadValues(element, "justifySelf", "justify-self", "unsafe safe left");
245 checkBadValues(element, "justifySelf", "justify-self", "unsafe left safe");
246 checkBadValues(element, "justifySelf", "justify-self", "left safe unsafe safe") ;
247 checkBadValues(element, "justifySelf", "justify-self", "legacy start");
248 checkBadValues(element, "justifySelf", "justify-self", "legacy end");
249 checkBadValues(element, "justifySelf", "justify-self", "legacy right unsafe");
250 checkBadValues(element, "justifySelf", "justify-self", "legacy auto");
251 checkBadValues(element, "justifySelf", "justify-self", "legacy stretch");
252 checkBadValues(element, "justifySelf", "justify-self", "legacy");
253 checkBadValues(element, "justifySelf", "justify-self", "legacy left right");
254
255 debug("");
256 debug("Test the value 'initial'");
257 container.style.display = "";
258 checkInitialValues(element, "justifySelf", "justify-self", "center", "normal");
259
260 debug("");
261 debug("Test the value 'initial' for grid containers");
262 container.style.display = "grid";
263 checkInitialValues(element, "justifySelf", "justify-self", "left safe", "normal" );
264
265 debug("");
266 debug("Test the value 'initial' for flex containers");
267 container.style.display = "flex";
268 checkInitialValues(element, "justifySelf", "justify-self", "right unsafe", "norm al");
269
270 debug("");
271 debug("Test the value 'initial' for positioned elements");
272 container.style.display = "";
273 element.style.position = "absolute";
274 checkInitialValues(element, "justifySelf", "justify-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, "justifySelf", "justify-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, "justifySelf", "justify-self", "end", "normal");
287
288 debug("");
289 debug("Test the value 'inherit'");
290 checkInheritValues("justifySelf", "justify-self", "end");
291 checkInheritValues("justifySelf", "justify-self", "left safe");
292 checkInheritValues("justifySelf", "justify-self", "center unsafe");
293
294 </script> 279 </script>
295 </body>
296 </html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698