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

Issues Search
    My Issues | Starred     Open | Closed | All

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

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