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

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

Issue 363133003: [CSS Grid Layout] Adapting align-self, align-items and justify-self to the last CSS 3 spec. (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Resolve grid and flex cases during cascade, the rest will wait for layout. Created 6 years, 4 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> 2 <html>
3 <head> 3 <head>
4 <style> 4 <style>
5 #alignSelfBaseline { 5 #alignSelfBaseline {
6 align-self: baseline; 6 align-self: baseline;
7 } 7 }
8 8
9 #alignSelfLastBaseline {
10 align-self: last-baseline;
11 }
12
9 #alignSelfStretch { 13 #alignSelfStretch {
10 align-self: stretch; 14 align-self: stretch;
11 } 15 }
12 16
13 #alignSelfStart { 17 #alignSelfStart {
14 align-self: start; 18 align-self: start;
15 } 19 }
16 20
17 #alignSelfEnd { 21 #alignSelfEnd {
18 align-self: end; 22 align-self: end;
(...skipping 12 matching lines...) Expand all
31 } 35 }
32 36
33 #alignSelfLeft { 37 #alignSelfLeft {
34 align-self: left; 38 align-self: left;
35 } 39 }
36 40
37 #alignSelfRight { 41 #alignSelfRight {
38 align-self: right; 42 align-self: right;
39 } 43 }
40 44
45 #alignSelfFlexStart {
46 align-self: flex-start;
47 }
48
49 #alignSelfFlexEnd {
50 align-self: flex-end;
51 }
52
41 #alignSelfEndTrue { 53 #alignSelfEndTrue {
42 align-self: end true; 54 align-self: end true;
43 } 55 }
44 56
45 #alignSelfCenterTrue { 57 #alignSelfCenterTrue {
46 align-self: center true; 58 align-self: center true;
47 } 59 }
48 60
49 #alignSelfSelfEndSafe { 61 #alignSelfSelfEndSafe {
50 align-self: self-end safe; 62 align-self: self-end safe;
51 } 63 }
52 64
53 #alignSelfSelfStartSafe { 65 #alignSelfSelfStartSafe {
54 align-self: self-start safe; 66 align-self: self-start safe;
55 } 67 }
56 68
57 #alignSelfRightSafe { 69 #alignSelfRightSafe {
58 align-self: right safe; 70 align-self: right safe;
59 } 71 }
60 72
61 #alignSelfLeftTrue { 73 #alignSelfLeftTrue {
62 align-self: left true; 74 align-self: left true;
63 } 75 }
76
77 #alignSelfFlexStartTrue {
78 align-self: flex-start true;
79 }
80
81 #alignSelfFlexEndSafe {
82 align-self: flex-end safe;
83 }
64 </style> 84 </style>
65 <script src="../../resources/js-test.js"></script> 85 <script src="../../resources/js-test.js"></script>
66 </head> 86 </head>
67 <body> 87 <body>
68 <div id="alignSelfBaseline"></div> 88 <div id="alignSelfBaseline"></div>
89 <div id="alignSelfLastBaseline"></div>
69 <div id="alignSelfStretch"></div> 90 <div id="alignSelfStretch"></div>
70 <div id="alignSelfStart"></div> 91 <div id="alignSelfStart"></div>
71 <div id="alignSelfEnd"></div> 92 <div id="alignSelfEnd"></div>
72 <div id="alignSelfCenter"></div> 93 <div id="alignSelfCenter"></div>
73 <div id="alignSelfSelfStart"></div> 94 <div id="alignSelfSelfStart"></div>
74 <div id="alignSelfSelfEnd"></div> 95 <div id="alignSelfSelfEnd"></div>
75 <div id="alignSelfLeft"></div> 96 <div id="alignSelfLeft"></div>
76 <div id="alignSelfRight"></div> 97 <div id="alignSelfRight"></div>
98 <div id="alignSelfFlexStart"></div>
99 <div id="alignSelfFlexEnd"></div>
77 100
78 <div id="alignSelfEndTrue"></div> 101 <div id="alignSelfEndTrue"></div>
79 <div id="alignSelfCenterTrue"></div> 102 <div id="alignSelfCenterTrue"></div>
80 <div id="alignSelfSelfEndSafe"></div> 103 <div id="alignSelfSelfEndSafe"></div>
81 <div id="alignSelfSelfStartSafe"></div> 104 <div id="alignSelfSelfStartSafe"></div>
82 <div id="alignSelfRightSafe"></div> 105 <div id="alignSelfRightSafe"></div>
83 <div id="alignSelfLeftTrue"></div> 106 <div id="alignSelfLeftTrue"></div>
107 <div id="alignSelfFlexStartTrue"></div>
108 <div id="alignSelfFlexEndSafe"></div>
109 <script src="resources/alignment-parsing-utils.js"></script>
84 <script> 110 <script>
85 description('Test that setting and getting align-self works as expected'); 111 description('Test that setting and getting align-self works as expected');
86 112
87 debug("Test getting align-self set through CSS"); 113 debug("Test getting align-self set through CSS");
88 var alignSelfBaseline = document.getElementById("alignSelfBaseline"); 114 var alignSelfBaseline = document.getElementById("alignSelfBaseline");
89 shouldBe("getComputedStyle(alignSelfBaseline, '').getPropertyValue('align-self') ", "'baseline'"); 115 shouldBe("getComputedStyle(alignSelfBaseline, '').getPropertyValue('align-self') ", "'baseline'");
90 116
117 var alignSelfLastBaseline = document.getElementById("alignSelfLastBaseline");
118 shouldBe("getComputedStyle(alignSelfLastBaseline, '').getPropertyValue('align-se lf')", "'last-baseline'");
119
91 var alignSelfStretch = document.getElementById("alignSelfStretch"); 120 var alignSelfStretch = document.getElementById("alignSelfStretch");
92 shouldBe("getComputedStyle(alignSelfStretch, '').getPropertyValue('align-self')" , "'stretch'"); 121 shouldBe("getComputedStyle(alignSelfStretch, '').getPropertyValue('align-self')" , "'stretch'");
93 122
94 var alignSelfStart = document.getElementById("alignSelfStart"); 123 var alignSelfStart = document.getElementById("alignSelfStart");
95 shouldBe("getComputedStyle(alignSelfStart, '').getPropertyValue('align-self')", "'start'"); 124 shouldBe("getComputedStyle(alignSelfStart, '').getPropertyValue('align-self')", "'start'");
96 125
97 var alignSelfEnd = document.getElementById("alignSelfEnd"); 126 var alignSelfEnd = document.getElementById("alignSelfEnd");
98 shouldBe("getComputedStyle(alignSelfEnd, '').getPropertyValue('align-self')", "' end'"); 127 shouldBe("getComputedStyle(alignSelfEnd, '').getPropertyValue('align-self')", "' end'");
99 128
100 var alignSelfCenter = document.getElementById("alignSelfCenter"); 129 var alignSelfCenter = document.getElementById("alignSelfCenter");
101 shouldBe("getComputedStyle(alignSelfCenter, '').getPropertyValue('align-self')", "'center'"); 130 shouldBe("getComputedStyle(alignSelfCenter, '').getPropertyValue('align-self')", "'center'");
102 131
103 var alignSelfSelfEnd = document.getElementById("alignSelfSelfEnd"); 132 var alignSelfSelfEnd = document.getElementById("alignSelfSelfEnd");
104 shouldBe("getComputedStyle(alignSelfSelfEnd, '').getPropertyValue('align-self')" , "'self-end'"); 133 shouldBe("getComputedStyle(alignSelfSelfEnd, '').getPropertyValue('align-self')" , "'self-end'");
105 134
106 var alignSelfSelfStart = document.getElementById("alignSelfSelfStart"); 135 var alignSelfSelfStart = document.getElementById("alignSelfSelfStart");
107 shouldBe("getComputedStyle(alignSelfSelfStart, '').getPropertyValue('align-self' )", "'self-start'"); 136 shouldBe("getComputedStyle(alignSelfSelfStart, '').getPropertyValue('align-self' )", "'self-start'");
108 137
109 var alignSelfLeft = document.getElementById("alignSelfLeft"); 138 var alignSelfLeft = document.getElementById("alignSelfLeft");
110 shouldBe("getComputedStyle(alignSelfLeft, '').getPropertyValue('align-self')", " 'left'"); 139 shouldBe("getComputedStyle(alignSelfLeft, '').getPropertyValue('align-self')", " 'left'");
111 140
112 var alignSelfRight = document.getElementById("alignSelfRight"); 141 var alignSelfRight = document.getElementById("alignSelfRight");
113 shouldBe("getComputedStyle(alignSelfRight, '').getPropertyValue('align-self')", "'right'"); 142 shouldBe("getComputedStyle(alignSelfRight, '').getPropertyValue('align-self')", "'right'");
114 143
144 var alignSelfFlexStart = document.getElementById("alignSelfFlexStart");
145 shouldBe("getComputedStyle(alignSelfFlexStart, '').getPropertyValue('align-self' )", "'flex-start'");
146
147 var alignSelfFlexEnd = document.getElementById("alignSelfFlexEnd");
148 shouldBe("getComputedStyle(alignSelfFlexEnd, '').getPropertyValue('align-self')" , "'flex-end'");
149
115 var alignSelfEndTrue = document.getElementById("alignSelfEndTrue"); 150 var alignSelfEndTrue = document.getElementById("alignSelfEndTrue");
116 shouldBe("getComputedStyle(alignSelfEndTrue, '').getPropertyValue('align-self')" , "'end true'"); 151 shouldBe("getComputedStyle(alignSelfEndTrue, '').getPropertyValue('align-self')" , "'end true'");
117 152
118 var alignSelfCenterTrue = document.getElementById("alignSelfCenterTrue"); 153 var alignSelfCenterTrue = document.getElementById("alignSelfCenterTrue");
119 shouldBe("getComputedStyle(alignSelfCenterTrue, '').getPropertyValue('align-self ')", "'center true'"); 154 shouldBe("getComputedStyle(alignSelfCenterTrue, '').getPropertyValue('align-self ')", "'center true'");
120 155
121 var alignSelfSelfEndSafe = document.getElementById("alignSelfSelfEndSafe"); 156 var alignSelfSelfEndSafe = document.getElementById("alignSelfSelfEndSafe");
122 shouldBe("getComputedStyle(alignSelfSelfEndSafe, '').getPropertyValue('align-sel f')", "'self-end safe'"); 157 shouldBe("getComputedStyle(alignSelfSelfEndSafe, '').getPropertyValue('align-sel f')", "'self-end safe'");
123 158
124 var alignSelfSelfStartSafe = document.getElementById("alignSelfSelfStartSafe"); 159 var alignSelfSelfStartSafe = document.getElementById("alignSelfSelfStartSafe");
125 shouldBe("getComputedStyle(alignSelfSelfStartSafe, '').getPropertyValue('align-s elf')", "'self-start safe'"); 160 shouldBe("getComputedStyle(alignSelfSelfStartSafe, '').getPropertyValue('align-s elf')", "'self-start safe'");
126 161
127 var alignSelfRightSafe = document.getElementById("alignSelfRightSafe"); 162 var alignSelfRightSafe = document.getElementById("alignSelfRightSafe");
128 shouldBe("getComputedStyle(alignSelfRightSafe, '').getPropertyValue('align-self' )", "'right safe'"); 163 shouldBe("getComputedStyle(alignSelfRightSafe, '').getPropertyValue('align-self' )", "'right safe'");
129 164
130 var alignSelfLeftTrue = document.getElementById("alignSelfLeftTrue"); 165 var alignSelfLeftTrue = document.getElementById("alignSelfLeftTrue");
131 shouldBe("getComputedStyle(alignSelfLeftTrue, '').getPropertyValue('align-self') ", "'left true'"); 166 shouldBe("getComputedStyle(alignSelfLeftTrue, '').getPropertyValue('align-self') ", "'left true'");
132 167
168 var alignSelfFlexStartTrue = document.getElementById("alignSelfFlexStartTrue");
169 shouldBe("getComputedStyle(alignSelfFlexStartTrue, '').getPropertyValue('align-s elf')", "'flex-start true'");
170
171 var alignSelfFlexEndSafe = document.getElementById("alignSelfFlexEndSafe");
172 shouldBe("getComputedStyle(alignSelfFlexEndSafe, '').getPropertyValue('align-sel f')", "'flex-end safe'");
173
133 debug(""); 174 debug("");
134 debug("Test initial value of align-self through JS"); 175 debug("Test initial value of align-self through JS");
135 element = document.createElement("div"); 176 element = document.createElement("div");
136 document.body.appendChild(element); 177 document.body.appendChild(element);
137 // align-self: auto ends up returning the default value of align-items which is 'stretch'. 178 shouldBe("getComputedStyle(element, '').getPropertyValue('align-self')", "'start '");
138 shouldBe("getComputedStyle(element, '').getPropertyValue('align-self')", "'stret ch'");
139 179
140 debug(""); 180 debug("");
141 debug("Test getting and setting align-self through JS"); 181 debug("Test getting and setting align-self through JS");
182 container = document.createElement("div");
142 element = document.createElement("div"); 183 element = document.createElement("div");
143 document.body.appendChild(element); 184 container.appendChild(element);
185 document.body.appendChild(container);
144 element.style.alignSelf = "center"; 186 element.style.alignSelf = "center";
145 shouldBe("getComputedStyle(element, '').getPropertyValue('align-self')", "'cente r'"); 187 checkValues(element, "alignSelf", "align-self", "center", "center");
146 188
147 element = document.createElement("div");
148 document.body.appendChild(element);
149 element.style.alignSelf = "true start"; 189 element.style.alignSelf = "true start";
150 shouldBe("getComputedStyle(element, '').getPropertyValue('align-self')", "'start true'"); 190 checkValues(element, "alignSelf", "align-self", "start true", "start true");
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");
151 203
152 element.style.alignSelf = "auto"; 204 element.style.alignSelf = "auto";
153 // See explanation for the initial value as to why this is correct. 205 checkValues(element, "alignSelf", "align-self", "auto", "start");
154 shouldBe("getComputedStyle(element, '').getPropertyValue('align-self')", "'stret ch'"); 206
207 container.style.display = "flex";
208 element.style.alignSelf = "auto";
209 checkValues(element, "alignSelf", "align-self", "auto", "stretch");
210
211 container.style.display = "grid";
212 element.style.alignSelf = "auto";
213 checkValues(element, "alignSelf", "align-self", "auto", "stretch");
214
215 element.style.alignSelf = "self-end";
216 checkValues(element, "alignSelf", "align-self", "self-end", "self-end");
155 217
156 debug(""); 218 debug("");
157 debug("Test bad combinaisons of align-self"); 219 debug("Test bad combinations of align-self");
220 container = document.createElement("div");
158 element = document.createElement("div"); 221 element = document.createElement("div");
159 document.body.appendChild(element); 222 container.appendChild(element);
160 element.style.alignSelf = "true auto"; 223 document.body.appendChild(container);
161 shouldBe("getComputedStyle(element, '').getPropertyValue('align-self')", "'stret ch'");
162 224
163 element.style.alignSelf = "auto safe"; 225 checkBadValues(element, "alignSelf", "align-self", "true auto");
164 shouldBe("getComputedStyle(element, '').getPropertyValue('align-self')", "'stret ch'"); 226 checkBadValues(element, "alignSelf", "align-self", "auto safe");
165 227 checkBadValues(element, "alignSelf", "align-self", "auto left");
166 element.style.alignSelf = "auto left"; 228 checkBadValues(element, "alignSelf", "align-self", "baseline safe");
167 shouldBe("getComputedStyle(element, '').getPropertyValue('align-self')", "'stret ch'"); 229 checkBadValues(element, "alignSelf", "align-self", "baseline center");
168 230 checkBadValues(element, "alignSelf", "align-self", "stretch true");
169 element.style.alignSelf = "baseline safe"; 231 checkBadValues(element, "alignSelf", "align-self", "stretch right");
170 shouldBe("getComputedStyle(element, '').getPropertyValue('align-self')", "'stret ch'"); 232 checkBadValues(element, "alignSelf", "align-self", "true true");
171 233 checkBadValues(element, "alignSelf", "align-self", "true safe");
172 element.style.alignSelf = "baseline center"; 234 checkBadValues(element, "alignSelf", "align-self", "center start");
173 shouldBe("getComputedStyle(element, '').getPropertyValue('align-self')", "'stret ch'"); 235 checkBadValues(element, "alignSelf", "align-self", "stretch true");
174 236 checkBadValues(element, "alignSelf", "align-self", "safe stretch");
175 element.style.alignSelf = "stretch true"; 237 checkBadValues(element, "alignSelf", "align-self", "baseline safe");
176 shouldBe("getComputedStyle(element, '').getPropertyValue('align-self')", "'stret ch'"); 238 checkBadValues(element, "alignSelf", "align-self", "true baseline");
177 239 checkBadValues(element, "alignSelf", "align-self", "true safe left");
178 element.style.alignSelf = "stretch right"; 240 checkBadValues(element, "alignSelf", "align-self", "true left safe");
179 shouldBe("getComputedStyle(element, '').getPropertyValue('align-self')", "'stret ch'"); 241 checkBadValues(element, "alignSelf", "align-self", "left safe true safe");
180 242 checkBadValues(element, "alignSelf", "align-self", "legacy start");
181 element.style.alignSelf = "true true"; 243 checkBadValues(element, "alignSelf", "align-self", "legacy end");
182 shouldBe("getComputedStyle(element, '').getPropertyValue('align-self')", "'stret ch'"); 244 checkBadValues(element, "alignSelf", "align-self", "legacy right true");
183 245 checkBadValues(element, "alignSelf", "align-self", "legacy auto");
184 element.style.alignSelf = "true safe"; 246 checkBadValues(element, "alignSelf", "align-self", "legacy stretch");
185 shouldBe("getComputedStyle(element, '').getPropertyValue('align-self')", "'stret ch'"); 247 checkBadValues(element, "alignSelf", "align-self", "legacy");
186 248 checkBadValues(element, "alignSelf", "align-self", "legacy left right");
187 element.style.alignSelf = "center start";
188 shouldBe("getComputedStyle(element, '').getPropertyValue('align-self')", "'stret ch'");
189
190 element.style.alignSelf = "stretch true";
191 shouldBe("getComputedStyle(element, '').getPropertyValue('align-self')", "'stret ch'");
192
193 element.style.alignSelf = "safe stretch";
194 shouldBe("getComputedStyle(element, '').getPropertyValue('align-self')", "'stret ch'");
195
196 element.style.alignSelf = "baseline safe";
197 shouldBe("getComputedStyle(element, '').getPropertyValue('align-self')", "'stret ch'");
198
199 element.style.alignSelf = "true baseline";
200 shouldBe("getComputedStyle(element, '').getPropertyValue('align-self')", "'stret ch'");
201
202 element.style.alignSelf = "true safe";
203 shouldBe("getComputedStyle(element, '').getPropertyValue('align-self')", "'stret ch'");
204
205 element.style.alignSelf = "true safe left";
206 shouldBe("getComputedStyle(element, '').getPropertyValue('align-self')", "'stret ch'");
207
208 element.style.alignSelf = "true left safe";
209 shouldBe("getComputedStyle(element, '').getPropertyValue('align-self')", "'stret ch'");
210
211 element.style.alignSelf = "left safe true safe";
212 shouldBe("getComputedStyle(element, '').getPropertyValue('align-self')", "'stret ch'");
213 249
214 debug(""); 250 debug("");
215 debug("Test the value 'initial'"); 251 debug("Test the value 'initial'");
216 element.style.alignSelf = "center"; 252 container.style.display = "";
217 shouldBe("getComputedStyle(element, '').getPropertyValue('align-self')", "'cente r'"); 253 checkInitialValues(element, "alignSelf", "align-self", "center", "start");
218 element.style.alignSelf = "initial"; 254
219 shouldBe("getComputedStyle(element, '').getPropertyValue('align-self')", "'stret ch'"); 255 debug("");
256 debug("Test the value 'initial' for grid containers");
257 container.style.display = "grid";
258 checkInitialValues(element, "alignSelf", "align-self", "left safe", "stretch");
259
260 debug("");
261 debug("Test the value 'initial' for flex containers");
262 container.style.display = "flex";
263 checkInitialValues(element, "alignSelf", "align-self", "right true", "stretch");
264
265 debug("");
266 debug("Test the value 'initial' for positioned elements");
267 container.style.display = "";
268 element.style.position = "absolute";
269 checkInitialValues(element, "alignSelf", "align-self", "left", "stretch");
270
271 debug("");
272 debug("Test the value 'initial' for positioned elements in grid containers");
273 container.style.display = "grid";
274 element.style.position = "absolute";
275 checkInitialValues(element, "alignSelf", "align-self", "right", "stretch");
276
277 debug("");
278 debug("Test the value 'initial' for positioned elements in grid containers");
279 container.style.display = "flex";
280 element.style.position = "absolute";
281 checkInitialValues(element, "alignSelf", "align-self", "end", "stretch");
220 282
221 debug(""); 283 debug("");
222 debug("Test the value 'inherit'"); 284 debug("Test the value 'inherit'");
223 parentElement = document.createElement("div"); 285 checkInheritValues("alignSelf", "align-self", "end");
224 document.body.appendChild(parentElement); 286 checkInheritValues("alignSelf", "align-self", "left safe");
225 parentElement.style.alignSelf = "end"; 287 checkInheritValues("alignSelf", "align-self", "center true");
226 shouldBe("getComputedStyle(parentElement, '').getPropertyValue('align-self')", " 'end'");
227 288
228 element = document.createElement("div");
229 parentElement.appendChild(element);
230 element.style.alignSelf = "inherit";
231 shouldBe("getComputedStyle(element, '').getPropertyValue('align-self')", "'end'" );
232 </script> 289 </script>
233 </body> 290 </body>
234 </html> 291 </html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698