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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/fast/alignment/parse-align-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/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
23 #alignSelfStart { 19 #alignSelfStart {
24 align-self: start; 20 align-self: start;
25 } 21 }
26 22
27 #alignSelfEnd { 23 #alignSelfEnd {
28 align-self: end; 24 align-self: end;
29 } 25 }
30 26
31 #alignSelfCenter { 27 #alignSelfCenter {
32 align-self: center; 28 align-self: center;
(...skipping 53 matching lines...) Expand 10 before | Expand all | Expand 10 after
86 82
87 #alignSelfFlexEndSafe { 83 #alignSelfFlexEndSafe {
88 align-self: flex-end safe; 84 align-self: flex-end safe;
89 } 85 }
90 </style> 86 </style>
91 <p>Test that setting and getting align-self works as expected</p> 87 <p>Test that setting and getting align-self works as expected</p>
92 <div id="alignSelfBaseline"></div> 88 <div id="alignSelfBaseline"></div>
93 <div id="alignSelfFirstBaseline"></div> 89 <div id="alignSelfFirstBaseline"></div>
94 <div id="alignSelfLastBaseline"></div> 90 <div id="alignSelfLastBaseline"></div>
95 <div id="alignSelfStretch"></div> 91 <div id="alignSelfStretch"></div>
96 <div id="alignSelfNormal"></div>
97 <div id="alignSelfStart"></div> 92 <div id="alignSelfStart"></div>
98 <div id="alignSelfEnd"></div> 93 <div id="alignSelfEnd"></div>
99 <div id="alignSelfCenter"></div> 94 <div id="alignSelfCenter"></div>
100 <div id="alignSelfSelfStart"></div> 95 <div id="alignSelfSelfStart"></div>
101 <div id="alignSelfSelfEnd"></div> 96 <div id="alignSelfSelfEnd"></div>
102 <div id="alignSelfLeft"></div> 97 <div id="alignSelfLeft"></div>
103 <div id="alignSelfRight"></div> 98 <div id="alignSelfRight"></div>
104 <div id="alignSelfFlexStart"></div> 99 <div id="alignSelfFlexStart"></div>
105 <div id="alignSelfFlexEnd"></div> 100 <div id="alignSelfFlexEnd"></div>
106 101
(...skipping 11 matching lines...) Expand all
118 <script> 113 <script>
119 test(function() { 114 test(function() {
120 var alignSelfBaseline = document.getElementById("alignSelfBaseline"); 115 var alignSelfBaseline = document.getElementById("alignSelfBaseline");
121 checkValues(alignSelfBaseline, "alignSelf", "align-self", "", "baseline"); 116 checkValues(alignSelfBaseline, "alignSelf", "align-self", "", "baseline");
122 var alignSelfFirstBaseline = document.getElementById("alignSelfFirstBaseline "); 117 var alignSelfFirstBaseline = document.getElementById("alignSelfFirstBaseline ");
123 checkValues(alignSelfFirstBaseline, "alignSelf", "align-self", "", "baseline "); 118 checkValues(alignSelfFirstBaseline, "alignSelf", "align-self", "", "baseline ");
124 var alignSelfLastBaseline = document.getElementById("alignSelfLastBaseline") ; 119 var alignSelfLastBaseline = document.getElementById("alignSelfLastBaseline") ;
125 checkValues(alignSelfLastBaseline, "alignSelf", "align-self", "", "last base line"); 120 checkValues(alignSelfLastBaseline, "alignSelf", "align-self", "", "last base line");
126 var alignSelfStretch = document.getElementById("alignSelfStretch"); 121 var alignSelfStretch = document.getElementById("alignSelfStretch");
127 checkValues(alignSelfStretch, "alignSelf", "align-self", "", "stretch"); 122 checkValues(alignSelfStretch, "alignSelf", "align-self", "", "stretch");
128 var alignSelfNormal = document.getElementById("alignSelfNormal");
129 checkValues(alignSelfNormal, "alignSelf", "align-self", "", "normal");
130 var alignSelfStart = document.getElementById("alignSelfStart"); 123 var alignSelfStart = document.getElementById("alignSelfStart");
131 checkValues(alignSelfStart, "alignSelf", "align-self", "", "start"); 124 checkValues(alignSelfStart, "alignSelf", "align-self", "", "start");
132 var alignSelfEnd = document.getElementById("alignSelfEnd"); 125 var alignSelfEnd = document.getElementById("alignSelfEnd");
133 checkValues(alignSelfEnd, "alignSelf", "align-self", "", "end"); 126 checkValues(alignSelfEnd, "alignSelf", "align-self", "", "end");
134 var alignSelfCenter = document.getElementById("alignSelfCenter"); 127 var alignSelfCenter = document.getElementById("alignSelfCenter");
135 checkValues(alignSelfCenter, "alignSelf", "align-self", "", "center"); 128 checkValues(alignSelfCenter, "alignSelf", "align-self", "", "center");
136 var alignSelfSelfEnd = document.getElementById("alignSelfSelfEnd"); 129 var alignSelfSelfEnd = document.getElementById("alignSelfSelfEnd");
137 checkValues(alignSelfSelfEnd, "alignSelf", "align-self", "", "self-end"); 130 checkValues(alignSelfSelfEnd, "alignSelf", "align-self", "", "self-end");
138 var alignSelfSelfStart = document.getElementById("alignSelfSelfStart"); 131 var alignSelfSelfStart = document.getElementById("alignSelfSelfStart");
139 checkValues(alignSelfSelfStart, "alignSelf", "align-self", "", "self-start") ; 132 checkValues(alignSelfSelfStart, "alignSelf", "align-self", "", "self-start") ;
(...skipping 20 matching lines...) Expand all
160 checkValues(alignSelfLeftUnsafe, "alignSelf", "align-self", "", "left unsafe "); 153 checkValues(alignSelfLeftUnsafe, "alignSelf", "align-self", "", "left unsafe ");
161 var alignSelfFlexStartUnsafe = document.getElementById("alignSelfFlexStartUn safe"); 154 var alignSelfFlexStartUnsafe = document.getElementById("alignSelfFlexStartUn safe");
162 checkValues(alignSelfFlexStartUnsafe, "alignSelf", "align-self", "", "flex-s tart unsafe"); 155 checkValues(alignSelfFlexStartUnsafe, "alignSelf", "align-self", "", "flex-s tart unsafe");
163 var alignSelfFlexEndSafe = document.getElementById("alignSelfFlexEndSafe"); 156 var alignSelfFlexEndSafe = document.getElementById("alignSelfFlexEndSafe");
164 checkValues(alignSelfFlexEndSafe, "alignSelf", "align-self", "", "flex-end s afe"); 157 checkValues(alignSelfFlexEndSafe, "alignSelf", "align-self", "", "flex-end s afe");
165 }, "Test getting align-self set through CSS."); 158 }, "Test getting align-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, "alignSelf", "align-self", "", "auto"); 163 checkValues(element, "alignSelf", "align-self", "", "normal");
171 }, "Test initial value of align-self through JS"); 164 }, "Test initial value of align-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.alignSelf = "center"; 171 element.style.alignSelf = "center";
179 checkValues(element, "alignSelf", "align-self", "center", "center"); 172 checkValues(element, "alignSelf", "align-self", "center", "center");
180 173
181 element.style.alignSelf = "unsafe start"; 174 element.style.alignSelf = "unsafe start";
182 checkValues(element, "alignSelf", "align-self", "start unsafe", "start unsa fe"); 175 checkValues(element, "alignSelf", "align-self", "start unsafe", "start unsa fe");
183 176
184 element.style.alignSelf = "flex-end safe"; 177 element.style.alignSelf = "flex-end safe";
185 checkValues(element, "alignSelf", "align-self", "flex-end safe", "flex-end safe"); 178 checkValues(element, "alignSelf", "align-self", "flex-end safe", "flex-end safe");
186 179
187 element.style.alignSelf = "right"; 180 element.style.alignSelf = "right";
188 checkValues(element, "alignSelf", "align-self", "right", "right"); 181 checkValues(element, "alignSelf", "align-self", "right", "right");
189 182
190 element.style.alignSelf = "center"; 183 element.style.alignSelf = "center";
191 checkValues(element, "alignSelf", "align-self", "center", "center"); 184 checkValues(element, "alignSelf", "align-self", "center", "center");
192 185
193 element.style.alignSelf = "self-start"; 186 element.style.alignSelf = "self-start";
194 checkValues(element, "alignSelf", "align-self", "self-start", "self-start") ; 187 checkValues(element, "alignSelf", "align-self", "self-start", "self-start") ;
195 188
196 element.style.alignSelf = "normal";
197 checkValues(element, "alignSelf", "align-self", "normal", "normal");
198
199 element.style.alignSelf = "auto"; 189 element.style.alignSelf = "auto";
200 checkValues(element, "alignSelf", "align-self", "auto", "auto"); 190 checkValues(element, "alignSelf", "align-self", "auto", "normal");
201 191
202 container.style.display = "flex"; 192 container.style.display = "flex";
203 element.style.alignSelf = "auto"; 193 element.style.alignSelf = "auto";
204 checkValues(element, "alignSelf", "align-self", "auto", "auto"); 194 checkValues(element, "alignSelf", "align-self", "auto", "normal");
205 195
206 container.style.display = "grid"; 196 container.style.display = "grid";
207 element.style.alignSelf = "auto"; 197 element.style.alignSelf = "auto";
208 checkValues(element, "alignSelf", "align-self", "auto", "auto"); 198 checkValues(element, "alignSelf", "align-self", "auto", "normal");
209 199
210 element.style.alignSelf = "self-end"; 200 element.style.alignSelf = "self-end";
211 checkValues(element, "alignSelf", "align-self", "self-end", "self-end"); 201 checkValues(element, "alignSelf", "align-self", "self-end", "self-end");
212 }, "Test getting and setting align-self through JS"); 202 }, "Test getting and setting align-self through JS");
213 203
214 test(function() { 204 test(function() {
215 document.documentElement.style.alignSelf = "auto"; 205 document.documentElement.style.alignSelf = "auto";
216 checkValues(document.documentElement, "alignSelf", "align-self", "auto", "a uto"); 206 checkValues(document.documentElement, "alignSelf", "align-self", "auto", "n ormal");
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, "alignSelf", "align-self", "auto safe"); 215 checkBadValues(element, "alignSelf", "align-self", "auto safe");
226 checkBadValues(element, "alignSelf", "align-self", "auto left"); 216 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");
230 checkBadValues(element, "alignSelf", "align-self", "baseline safe"); 217 checkBadValues(element, "alignSelf", "align-self", "baseline safe");
231 checkBadValues(element, "alignSelf", "align-self", "baseline center"); 218 checkBadValues(element, "alignSelf", "align-self", "baseline center");
232 checkBadValues(element, "alignSelf", "align-self", "stretch unsafe"); 219 checkBadValues(element, "alignSelf", "align-self", "stretch unsafe");
233 checkBadValues(element, "alignSelf", "align-self", "stretch right"); 220 checkBadValues(element, "alignSelf", "align-self", "stretch right");
234 checkBadValues(element, "alignSelf", "align-self", "unsafe unsafe"); 221 checkBadValues(element, "alignSelf", "align-self", "unsafe unsafe");
235 checkBadValues(element, "alignSelf", "align-self", "unsafe safe"); 222 checkBadValues(element, "alignSelf", "align-self", "unsafe safe");
236 checkBadValues(element, "alignSelf", "align-self", "center start"); 223 checkBadValues(element, "alignSelf", "align-self", "center start");
237 checkBadValues(element, "alignSelf", "align-self", "stretch unsafe"); 224 checkBadValues(element, "alignSelf", "align-self", "stretch unsafe");
238 checkBadValues(element, "alignSelf", "align-self", "safe stretch"); 225 checkBadValues(element, "alignSelf", "align-self", "safe stretch");
239 checkBadValues(element, "alignSelf", "align-self", "baseline safe"); 226 checkBadValues(element, "alignSelf", "align-self", "baseline safe");
240 checkBadValues(element, "alignSelf", "align-self", "unsafe baseline"); 227 checkBadValues(element, "alignSelf", "align-self", "unsafe baseline");
241 checkBadValues(element, "alignSelf", "align-self", "unsafe safe left"); 228 checkBadValues(element, "alignSelf", "align-self", "unsafe safe left");
242 checkBadValues(element, "alignSelf", "align-self", "unsafe left safe"); 229 checkBadValues(element, "alignSelf", "align-self", "unsafe left safe");
243 checkBadValues(element, "alignSelf", "align-self", "left safe unsafe safe") ; 230 checkBadValues(element, "alignSelf", "align-self", "left safe unsafe safe") ;
244 checkBadValues(element, "alignSelf", "align-self", "legacy start"); 231 checkBadValues(element, "alignSelf", "align-self", "legacy start");
245 checkBadValues(element, "alignSelf", "align-self", "legacy end"); 232 checkBadValues(element, "alignSelf", "align-self", "legacy end");
246 checkBadValues(element, "alignSelf", "align-self", "legacy right unsafe"); 233 checkBadValues(element, "alignSelf", "align-self", "legacy right unsafe");
247 checkBadValues(element, "alignSelf", "align-self", "legacy auto"); 234 checkBadValues(element, "alignSelf", "align-self", "legacy auto");
248 checkBadValues(element, "alignSelf", "align-self", "legacy stretch"); 235 checkBadValues(element, "alignSelf", "align-self", "legacy stretch");
249 checkBadValues(element, "alignSelf", "align-self", "legacy"); 236 checkBadValues(element, "alignSelf", "align-self", "legacy");
250 checkBadValues(element, "alignSelf", "align-self", "legacy left right"); 237 checkBadValues(element, "alignSelf", "align-self", "legacy left right");
251 }, "Test bad combinations of align-self"); 238 }, "Test bad combinations of align-self");
252 239
253 test(function() { 240 test(function() {
254 container.style.display = ""; 241 container.style.display = "";
255 checkInitialValues(element, "alignSelf", "align-self", "center", "auto"); 242 checkInitialValues(element, "alignSelf", "align-self", "center", "normal");
256 }, "Test the value 'initial'"); 243 }, "Test the value 'initial'");
257 244
258 test(function() { 245 test(function() {
259 container.style.display = "grid"; 246 container.style.display = "grid";
260 checkInitialValues(element, "alignSelf", "align-self", "left safe", "auto"); 247 checkInitialValues(element, "alignSelf", "align-self", "left safe", "normal" );
261 }, "Test the value 'initial' for grid containers"); 248 }, "Test the value 'initial' for grid containers");
262 249
263 test(function() { 250 test(function() {
264 container.style.display = "flex"; 251 container.style.display = "flex";
265 checkInitialValues(element, "alignSelf", "align-self", "right unsafe", "auto "); 252 checkInitialValues(element, "alignSelf", "align-self", "right unsafe", "norm al");
266 }, "Test the value 'initial' for flex containers"); 253 }, "Test the value 'initial' for flex containers");
267 254
268 test(function() { 255 test(function() {
269 container.style.display = ""; 256 container.style.display = "";
270 element.style.position = "absolute"; 257 element.style.position = "absolute";
271 checkInitialValues(element, "alignSelf", "align-self", "left", "auto"); 258 checkInitialValues(element, "alignSelf", "align-self", "left", "normal");
272 }, "Test the value 'initial' for positioned elements"); 259 }, "Test the value 'initial' for positioned elements");
273 260
274 test(function() { 261 test(function() {
275 container.style.display = "grid"; 262 container.style.display = "grid";
276 element.style.position = "absolute"; 263 element.style.position = "absolute";
277 checkInitialValues(element, "alignSelf", "align-self", "right", "auto"); 264 checkInitialValues(element, "alignSelf", "align-self", "right", "normal");
278 }, "Test the value 'initial' for positioned elements in grid containers"); 265 }, "Test the value 'initial' for positioned elements in grid containers");
279 266
280 test(function() { 267 test(function() {
281 container.style.display = "flex"; 268 container.style.display = "flex";
282 element.style.position = "absolute"; 269 element.style.position = "absolute";
283 checkInitialValues(element, "alignSelf", "align-self", "end", "auto"); 270 checkInitialValues(element, "alignSelf", "align-self", "end", "normal");
284 }, "Test the value 'initial' for positioned elements in grid containers"); 271 }, "Test the value 'initial' for positioned elements in grid containers");
285 272
286 test(function() { 273 test(function() {
287 checkInheritValues("alignSelf", "align-self", "end"); 274 checkInheritValues("alignSelf", "align-self", "end");
288 checkInheritValues("alignSelf", "align-self", "left safe"); 275 checkInheritValues("alignSelf", "align-self", "left safe");
289 checkInheritValues("alignSelf", "align-self", "center unsafe"); 276 checkInheritValues("alignSelf", "align-self", "center unsafe");
290 }, "Test the value 'inherit'"); 277 }, "Test the value 'inherit'");
291 </script> 278 </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
This is Rietveld 408576698