Chromium Code Reviews

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

Issue 2915773002: Reland of [css-align] Don't resolve 'auto' values for computed style. (Closed)
Patch Set: Applied suggested changes 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/parse-alignment-of-root-elements-expected.txt ('k') | third_party/WebKit/LayoutTests/fast/alignment/parse-place-content.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 #justifySelfBaseline { 3 #justifySelfBaseline {
4 justify-self: baseline; 4 justify-self: baseline;
5 } 5 }
6 6
7 #justifySelfFirstBaseline { 7 #justifySelfFirstBaseline {
8 justify-self: first baseline; 8 justify-self: first baseline;
9 } 9 }
10 10
11 #justifySelfLastBaseline { 11 #justifySelfLastBaseline {
12 justify-self: last baseline; 12 justify-self: last baseline;
13 } 13 }
14 14
15 #justifySelfStretch { 15 #justifySelfStretch {
16 justify-self: stretch; 16 justify-self: stretch;
17 } 17 }
18 18
19 #justifySelfNormal {
20 justify-self: normal;
21 }
22
19 #justifySelfStart { 23 #justifySelfStart {
20 justify-self: start; 24 justify-self: start;
21 } 25 }
22 26
23 #justifySelfEnd { 27 #justifySelfEnd {
24 justify-self: end; 28 justify-self: end;
25 } 29 }
26 30
27 #justifySelfCenter { 31 #justifySelfCenter {
28 justify-self: center; 32 justify-self: center;
(...skipping 53 matching lines...)
82 86
83 #justifySelfFlexEndSafe { 87 #justifySelfFlexEndSafe {
84 justify-self: flex-end safe; 88 justify-self: flex-end safe;
85 } 89 }
86 </style> 90 </style>
87 <p>Test that setting and getting justify-self works as expected</p> 91 <p>Test that setting and getting justify-self works as expected</p>
88 <div id="justifySelfBaseline"></div> 92 <div id="justifySelfBaseline"></div>
89 <div id="justifySelfFirstBaseline"></div> 93 <div id="justifySelfFirstBaseline"></div>
90 <div id="justifySelfLastBaseline"></div> 94 <div id="justifySelfLastBaseline"></div>
91 <div id="justifySelfStretch"></div> 95 <div id="justifySelfStretch"></div>
96 <div id="justifySelfNormal"></div>
92 <div id="justifySelfStart"></div> 97 <div id="justifySelfStart"></div>
93 <div id="justifySelfEnd"></div> 98 <div id="justifySelfEnd"></div>
94 <div id="justifySelfCenter"></div> 99 <div id="justifySelfCenter"></div>
95 <div id="justifySelfSelfStart"></div> 100 <div id="justifySelfSelfStart"></div>
96 <div id="justifySelfSelfEnd"></div> 101 <div id="justifySelfSelfEnd"></div>
97 <div id="justifySelfLeft"></div> 102 <div id="justifySelfLeft"></div>
98 <div id="justifySelfRight"></div> 103 <div id="justifySelfRight"></div>
99 <div id="justifySelfFlexStart"></div> 104 <div id="justifySelfFlexStart"></div>
100 <div id="justifySelfFlexEnd"></div> 105 <div id="justifySelfFlexEnd"></div>
101 106
(...skipping 11 matching lines...)
113 <script> 118 <script>
114 test(function() { 119 test(function() {
115 var justifySelfBaseline = document.getElementById("justifySelfBaseline"); 120 var justifySelfBaseline = document.getElementById("justifySelfBaseline");
116 checkValues(justifySelfBaseline, "justifySelf", "justify-self", "", "baselin e"); 121 checkValues(justifySelfBaseline, "justifySelf", "justify-self", "", "baselin e");
117 var justifySelfFirstBaseline = document.getElementById("justifySelfFirstBase line"); 122 var justifySelfFirstBaseline = document.getElementById("justifySelfFirstBase line");
118 checkValues(justifySelfFirstBaseline, "justifySelf", "justify-self", "", "ba seline"); 123 checkValues(justifySelfFirstBaseline, "justifySelf", "justify-self", "", "ba seline");
119 var justifySelfLastBaseline = document.getElementById("justifySelfLastBaseli ne"); 124 var justifySelfLastBaseline = document.getElementById("justifySelfLastBaseli ne");
120 checkValues(justifySelfLastBaseline, "justifySelf", "justify-self", "", "las t baseline"); 125 checkValues(justifySelfLastBaseline, "justifySelf", "justify-self", "", "las t baseline");
121 var justifySelfStretch = document.getElementById("justifySelfStretch"); 126 var justifySelfStretch = document.getElementById("justifySelfStretch");
122 checkValues(justifySelfStretch, "justifySelf", "justify-self", "", "stretch" ); 127 checkValues(justifySelfStretch, "justifySelf", "justify-self", "", "stretch" );
128 var justifySelfNormal = document.getElementById("justifySelfNormal");
129 checkValues(justifySelfNormal, "justifySelf", "justify-self", "", "normal");
123 var justifySelfStart = document.getElementById("justifySelfStart"); 130 var justifySelfStart = document.getElementById("justifySelfStart");
124 checkValues(justifySelfStart, "justifySelf", "justify-self", "", "start"); 131 checkValues(justifySelfStart, "justifySelf", "justify-self", "", "start");
125 var justifySelfEnd = document.getElementById("justifySelfEnd"); 132 var justifySelfEnd = document.getElementById("justifySelfEnd");
126 checkValues(justifySelfEnd, "justifySelf", "justify-self", "", "end"); 133 checkValues(justifySelfEnd, "justifySelf", "justify-self", "", "end");
127 var justifySelfCenter = document.getElementById("justifySelfCenter"); 134 var justifySelfCenter = document.getElementById("justifySelfCenter");
128 checkValues(justifySelfCenter, "justifySelf", "justify-self", "", "center"); 135 checkValues(justifySelfCenter, "justifySelf", "justify-self", "", "center");
129 var justifySelfSelfEnd = document.getElementById("justifySelfSelfEnd"); 136 var justifySelfSelfEnd = document.getElementById("justifySelfSelfEnd");
130 checkValues(justifySelfSelfEnd, "justifySelf", "justify-self", "", "self-end "); 137 checkValues(justifySelfSelfEnd, "justifySelf", "justify-self", "", "self-end ");
131 var justifySelfSelfStart = document.getElementById("justifySelfSelfStart"); 138 var justifySelfSelfStart = document.getElementById("justifySelfSelfStart");
132 checkValues(justifySelfSelfStart, "justifySelf", "justify-self", "", "self-s tart"); 139 checkValues(justifySelfSelfStart, "justifySelf", "justify-self", "", "self-s tart");
(...skipping 20 matching lines...)
153 checkValues(justifySelfLeftUnsafe, "justifySelf", "justify-self", "", "left unsafe"); 160 checkValues(justifySelfLeftUnsafe, "justifySelf", "justify-self", "", "left unsafe");
154 var justifySelfFlexStartUnsafe = document.getElementById("justifySelfFlexSta rtUnsafe"); 161 var justifySelfFlexStartUnsafe = document.getElementById("justifySelfFlexSta rtUnsafe");
155 checkValues(justifySelfFlexStartUnsafe, "justifySelf", "justify-self", "", " flex-start unsafe"); 162 checkValues(justifySelfFlexStartUnsafe, "justifySelf", "justify-self", "", " flex-start unsafe");
156 var justifySelfFlexEndSafe = document.getElementById("justifySelfFlexEndSafe "); 163 var justifySelfFlexEndSafe = document.getElementById("justifySelfFlexEndSafe ");
157 checkValues(justifySelfFlexEndSafe, "justifySelf", "justify-self", "", "flex -end safe"); 164 checkValues(justifySelfFlexEndSafe, "justifySelf", "justify-self", "", "flex -end safe");
158 }, "Test getting justify-self set through CSS."); 165 }, "Test getting justify-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, "justifySelf", "justify-self", "", "normal"); 170 checkValues(element, "justifySelf", "justify-self", "", "auto");
164 }, "Test initial value of justify-self through JS"); 171 }, "Test initial value of justify-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.justifySelf = "center"; 178 element.style.justifySelf = "center";
172 checkValues(element, "justifySelf", "justify-self", "center", "center"); 179 checkValues(element, "justifySelf", "justify-self", "center", "center");
173 180
174 element.style.justifySelf = "unsafe start"; 181 element.style.justifySelf = "unsafe start";
175 checkValues(element, "justifySelf", "justify-self", "start unsafe", "start unsafe"); 182 checkValues(element, "justifySelf", "justify-self", "start unsafe", "start unsafe");
176 183
177 element.style.justifySelf = "flex-end safe"; 184 element.style.justifySelf = "flex-end safe";
178 checkValues(element, "justifySelf", "justify-self", "flex-end safe", "flex- end safe"); 185 checkValues(element, "justifySelf", "justify-self", "flex-end safe", "flex- end safe");
179 186
180 element.style.justifySelf = "right"; 187 element.style.justifySelf = "right";
181 checkValues(element, "justifySelf", "justify-self", "right", "right"); 188 checkValues(element, "justifySelf", "justify-self", "right", "right");
182 189
183 element.style.justifySelf = "center"; 190 element.style.justifySelf = "center";
184 checkValues(element, "justifySelf", "justify-self", "center", "center"); 191 checkValues(element, "justifySelf", "justify-self", "center", "center");
185 192
186 element.style.justifySelf = "self-start"; 193 element.style.justifySelf = "self-start";
187 checkValues(element, "justifySelf", "justify-self", "self-start", "self-sta rt"); 194 checkValues(element, "justifySelf", "justify-self", "self-start", "self-sta rt");
188 195
196 element.style.justifySelf = "normal";
197 checkValues(element, "justifySelf", "justify-self", "normal", "normal");
198
189 element.style.justifySelf = "auto"; 199 element.style.justifySelf = "auto";
190 checkValues(element, "justifySelf", "justify-self", "auto", "normal"); 200 checkValues(element, "justifySelf", "justify-self", "auto", "auto");
191 201
192 container.style.display = "flex"; 202 container.style.display = "flex";
193 element.style.justifySelf = "auto"; 203 element.style.justifySelf = "auto";
194 checkValues(element, "justifySelf", "justify-self", "auto", "normal"); 204 checkValues(element, "justifySelf", "justify-self", "auto", "auto");
195 205
196 container.style.display = "grid"; 206 container.style.display = "grid";
197 element.style.justifySelf = "auto"; 207 element.style.justifySelf = "auto";
198 checkValues(element, "justifySelf", "justify-self", "auto", "normal"); 208 checkValues(element, "justifySelf", "justify-self", "auto", "auto");
199 209
200 element.style.justifySelf = "self-end"; 210 element.style.justifySelf = "self-end";
201 checkValues(element, "justifySelf", "justify-self", "self-end", "self-end") ; 211 checkValues(element, "justifySelf", "justify-self", "self-end", "self-end") ;
202 }, "Test getting and setting justify-self through JS"); 212 }, "Test getting and setting justify-self through JS");
203 213
204 test(function() { 214 test(function() {
205 document.documentElement.style.justifySelf = "auto"; 215 document.documentElement.style.justifySelf = "auto";
206 checkValues(document.documentElement, "justifySelf", "justify-self", "auto" , "normal"); 216 checkValues(document.documentElement, "justifySelf", "justify-self", "auto" , "auto");
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, "justifySelf", "justify-self", "unsafe auto"); 225 checkBadValues(element, "justifySelf", "justify-self", "unsafe auto");
216 checkBadValues(element, "justifySelf", "justify-self", "auto safe"); 226 checkBadValues(element, "justifySelf", "justify-self", "auto safe");
217 checkBadValues(element, "justifySelf", "justify-self", "auto left"); 227 checkBadValues(element, "justifySelf", "justify-self", "auto left");
228 checkBadValues(element, "justifySelf", "justify-self", "normal unsafe");
229 checkBadValues(element, "justifySelf", "justify-self", "normal stretch");
230 checkBadValues(element, "justifySelf", "justify-self", "baseline normal");
218 checkBadValues(element, "justifySelf", "justify-self", "baseline safe"); 231 checkBadValues(element, "justifySelf", "justify-self", "baseline safe");
219 checkBadValues(element, "justifySelf", "justify-self", "baseline center"); 232 checkBadValues(element, "justifySelf", "justify-self", "baseline center");
220 checkBadValues(element, "justifySelf", "justify-self", "stretch unsafe"); 233 checkBadValues(element, "justifySelf", "justify-self", "stretch unsafe");
221 checkBadValues(element, "justifySelf", "justify-self", "stretch right"); 234 checkBadValues(element, "justifySelf", "justify-self", "stretch right");
222 checkBadValues(element, "justifySelf", "justify-self", "unsafe unsafe"); 235 checkBadValues(element, "justifySelf", "justify-self", "unsafe unsafe");
223 checkBadValues(element, "justifySelf", "justify-self", "unsafe safe"); 236 checkBadValues(element, "justifySelf", "justify-self", "unsafe safe");
224 checkBadValues(element, "justifySelf", "justify-self", "center start"); 237 checkBadValues(element, "justifySelf", "justify-self", "center start");
225 checkBadValues(element, "justifySelf", "justify-self", "stretch unsafe"); 238 checkBadValues(element, "justifySelf", "justify-self", "stretch unsafe");
226 checkBadValues(element, "justifySelf", "justify-self", "safe stretch"); 239 checkBadValues(element, "justifySelf", "justify-self", "safe stretch");
227 checkBadValues(element, "justifySelf", "justify-self", "baseline safe"); 240 checkBadValues(element, "justifySelf", "justify-self", "baseline safe");
228 checkBadValues(element, "justifySelf", "justify-self", "unsafe baseline"); 241 checkBadValues(element, "justifySelf", "justify-self", "unsafe baseline");
229 checkBadValues(element, "justifySelf", "justify-self", "unsafe safe left"); 242 checkBadValues(element, "justifySelf", "justify-self", "unsafe safe left");
230 checkBadValues(element, "justifySelf", "justify-self", "unsafe left safe"); 243 checkBadValues(element, "justifySelf", "justify-self", "unsafe left safe");
231 checkBadValues(element, "justifySelf", "justify-self", "left safe unsafe sa fe"); 244 checkBadValues(element, "justifySelf", "justify-self", "left safe unsafe sa fe");
232 checkBadValues(element, "justifySelf", "justify-self", "legacy start"); 245 checkBadValues(element, "justifySelf", "justify-self", "legacy start");
233 checkBadValues(element, "justifySelf", "justify-self", "legacy end"); 246 checkBadValues(element, "justifySelf", "justify-self", "legacy end");
234 checkBadValues(element, "justifySelf", "justify-self", "legacy right unsafe "); 247 checkBadValues(element, "justifySelf", "justify-self", "legacy right unsafe ");
235 checkBadValues(element, "justifySelf", "justify-self", "legacy auto"); 248 checkBadValues(element, "justifySelf", "justify-self", "legacy auto");
236 checkBadValues(element, "justifySelf", "justify-self", "legacy stretch"); 249 checkBadValues(element, "justifySelf", "justify-self", "legacy stretch");
237 checkBadValues(element, "justifySelf", "justify-self", "legacy"); 250 checkBadValues(element, "justifySelf", "justify-self", "legacy");
238 checkBadValues(element, "justifySelf", "justify-self", "legacy left right") ; 251 checkBadValues(element, "justifySelf", "justify-self", "legacy left right") ;
239 }, "Test bad combinations of justify-self"); 252 }, "Test bad combinations of justify-self");
240 253
241 test(function() { 254 test(function() {
242 container.style.display = ""; 255 container.style.display = "";
243 checkInitialValues(element, "justifySelf", "justify-self", "center", "normal "); 256 checkInitialValues(element, "justifySelf", "justify-self", "center", "auto") ;
244 }, "Test the value 'initial'"); 257 }, "Test the value 'initial'");
245 258
246 test(function() { 259 test(function() {
247 container.style.display = "grid"; 260 container.style.display = "grid";
248 checkInitialValues(element, "justifySelf", "justify-self", "left safe", "nor mal"); 261 checkInitialValues(element, "justifySelf", "justify-self", "left safe", "aut o");
249 }, "Test the value 'initial' for grid containers"); 262 }, "Test the value 'initial' for grid containers");
250 263
251 test(function() { 264 test(function() {
252 container.style.display = "flex"; 265 container.style.display = "flex";
253 checkInitialValues(element, "justifySelf", "justify-self", "right unsafe", " normal"); 266 checkInitialValues(element, "justifySelf", "justify-self", "right unsafe", " auto");
254 }, "Test the value 'initial' for flex containers"); 267 }, "Test the value 'initial' for flex containers");
255 268
256 test(function() { 269 test(function() {
257 container.style.display = ""; 270 container.style.display = "";
258 element.style.position = "absolute"; 271 element.style.position = "absolute";
259 checkInitialValues(element, "justifySelf", "justify-self", "left", "normal") ; 272 checkInitialValues(element, "justifySelf", "justify-self", "left", "auto");
260 }, "Test the value 'initial' for positioned elements"); 273 }, "Test the value 'initial' for positioned elements");
261 274
262 test(function() { 275 test(function() {
263 container.style.display = "grid"; 276 container.style.display = "grid";
264 element.style.position = "absolute"; 277 element.style.position = "absolute";
265 checkInitialValues(element, "justifySelf", "justify-self", "right", "normal" ); 278 checkInitialValues(element, "justifySelf", "justify-self", "right", "auto");
266 }, "Test the value 'initial' for positioned elements in grid containers"); 279 }, "Test the value 'initial' for positioned elements in grid containers");
267 280
268 test(function() { 281 test(function() {
269 container.style.display = "flex"; 282 container.style.display = "flex";
270 element.style.position = "absolute"; 283 element.style.position = "absolute";
271 checkInitialValues(element, "justifySelf", "justify-self", "end", "normal"); 284 checkInitialValues(element, "justifySelf", "justify-self", "end", "auto");
272 }, "Test the value 'initial' for positioned elements in grid containers"); 285 }, "Test the value 'initial' for positioned elements in grid containers");
273 286
274 test(function() { 287 test(function() {
275 checkInheritValues("justifySelf", "justify-self", "end"); 288 checkInheritValues("justifySelf", "justify-self", "end");
276 checkInheritValues("justifySelf", "justify-self", "left safe"); 289 checkInheritValues("justifySelf", "justify-self", "left safe");
277 checkInheritValues("justifySelf", "justify-self", "center unsafe"); 290 checkInheritValues("justifySelf", "justify-self", "center unsafe");
278 }, "Test the value 'inherit'"); 291 }, "Test the value 'inherit'");
279 </script> 292 </script>
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/fast/alignment/parse-alignment-of-root-elements-expected.txt ('k') | third_party/WebKit/LayoutTests/fast/alignment/parse-place-content.html » ('j') | no next file with comments »

Powered by Google App Engine