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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/fast/alignment/parse-align-items.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
« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/fast/alignment/parse-align-items-expected.txt » ('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 <html>
3 <head>
4 <style> 2 <style>
5 #alignItemsBaseline { 3 #alignItemsBaseline {
6 align-items: baseline; 4 align-items: baseline;
7 } 5 }
8 6
7 #alignItemsFirstBaseline {
8 align-items: first baseline;
9 }
10
9 #alignItemsLastBaseline { 11 #alignItemsLastBaseline {
10 align-items: last-baseline; 12 align-items: last baseline;
11 } 13 }
12 14
13 #alignItemsStretch { 15 #alignItemsStretch {
14 align-items: stretch; 16 align-items: stretch;
15 } 17 }
16 18
17 #alignItemsStart { 19 #alignItemsStart {
18 align-items: start; 20 align-items: start;
19 } 21 }
20 22
(...skipping 53 matching lines...) Expand 10 before | Expand all | Expand 10 after
74 align-items: left unsafe; 76 align-items: left unsafe;
75 } 77 }
76 78
77 #alignItemsFlexStartUnsafe { 79 #alignItemsFlexStartUnsafe {
78 align-items: flex-start unsafe; 80 align-items: flex-start unsafe;
79 } 81 }
80 82
81 #alignItemsFlexEndSafe { 83 #alignItemsFlexEndSafe {
82 align-items: flex-end safe; 84 align-items: flex-end safe;
83 } 85 }
84
85 </style> 86 </style>
86 <script src="../../resources/js-test.js"></script> 87 <p>Test that setting and getting align-items works as expected</p>
87 </head>
88 <body>
89 <div id="alignItemsBaseline"></div> 88 <div id="alignItemsBaseline"></div>
89 <div id="alignItemsFirstBaseline"></div>
90 <div id="alignItemsLastBaseline"></div> 90 <div id="alignItemsLastBaseline"></div>
91 <div id="alignItemsStretch"></div> 91 <div id="alignItemsStretch"></div>
92 <div id="alignItemsStart"></div> 92 <div id="alignItemsStart"></div>
93 <div id="alignItemsEnd"></div> 93 <div id="alignItemsEnd"></div>
94 <div id="alignItemsCenter"></div> 94 <div id="alignItemsCenter"></div>
95 <div id="alignItemsSelfStart"></div> 95 <div id="alignItemsSelfStart"></div>
96 <div id="alignItemsSelfEnd"></div> 96 <div id="alignItemsSelfEnd"></div>
97 <div id="alignItemsLeft"></div> 97 <div id="alignItemsLeft"></div>
98 <div id="alignItemsRight"></div> 98 <div id="alignItemsRight"></div>
99 <div id="alignItemsFlexStart"></div> 99 <div id="alignItemsFlexStart"></div>
100 <div id="alignItemsFlexEnd"></div> 100 <div id="alignItemsFlexEnd"></div>
101 101
102 <div id="alignItemsEndUnsafe"></div> 102 <div id="alignItemsEndUnsafe"></div>
103 <div id="alignItemsCenterUnsafe"></div> 103 <div id="alignItemsCenterUnsafe"></div>
104 <div id="alignItemsSelfEndSafe"></div> 104 <div id="alignItemsSelfEndSafe"></div>
105 <div id="alignItemsSelfStartSafe"></div> 105 <div id="alignItemsSelfStartSafe"></div>
106 <div id="alignItemsRightSafe"></div> 106 <div id="alignItemsRightSafe"></div>
107 <div id="alignItemsLeftUnsafe"></div> 107 <div id="alignItemsLeftUnsafe"></div>
108 <div id="alignItemsFlexStartUnsafe"></div> 108 <div id="alignItemsFlexStartUnsafe"></div>
109 <div id="alignItemsFlexEndSafe"></div> 109 <div id="alignItemsFlexEndSafe"></div>
110 <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>
111 <script> 113 <script>
112 description('Test that setting and getting align-items works as expected'); 114 test(function() {
115 var alignItemsBaseline = document.getElementById("alignItemsBaseline");
116 checkValues(alignItemsBaseline, "alignItems", "align-items", "", "baseline") ;
117 var alignItemsFirstBaseline = document.getElementById("alignItemsFirstBaseli ne");
118 checkValues(alignItemsFirstBaseline, "alignItems", "align-items", "", "basel ine");
119 var alignItemsLastBaseline = document.getElementById("alignItemsLastBaseline ");
120 checkValues(alignItemsLastBaseline, "alignItems", "align-items", "", "last b aseline");
121 var alignItemsStretch = document.getElementById("alignItemsStretch");
122 checkValues(alignItemsStretch, "alignItems", "align-items", "", "stretch");
123 var alignItemsStart = document.getElementById("alignItemsStart");
124 checkValues(alignItemsStart, "alignItems", "align-items", "", "start");
125 var alignItemsEnd = document.getElementById("alignItemsEnd");
126 checkValues(alignItemsEnd, "alignItems", "align-items", "", "end");
127 var alignItemsCenter = document.getElementById("alignItemsCenter");
128 checkValues(alignItemsCenter, "alignItems", "align-items", "", "center");
129 var alignItemsSelfEnd = document.getElementById("alignItemsSelfEnd");
130 checkValues(alignItemsSelfEnd, "alignItems", "align-items", "", "self-end");
131 var alignItemsSelfStart = document.getElementById("alignItemsSelfStart");
132 checkValues(alignItemsSelfStart, "alignItems", "align-items", "", "self-star t");
133 var alignItemsLeft = document.getElementById("alignItemsLeft");
134 checkValues(alignItemsLeft, "alignItems", "align-items", "", "left");
135 var alignItemsRight = document.getElementById("alignItemsRight");
136 checkValues(alignItemsRight, "alignItems", "align-items", "", "right");
137 var alignItemsFlexStart = document.getElementById("alignItemsFlexStart");
138 checkValues(alignItemsFlexStart, "alignItems", "align-items", "", "flex-star t");
139 var alignItemsFlexEnd = document.getElementById("alignItemsFlexEnd");
140 checkValues(alignItemsFlexEnd, "alignItems", "align-items", "", "flex-end");
113 141
114 debug("Test getting align-items set through CSS"); 142 var alignItemsEndUnsafe = document.getElementById("alignItemsEndUnsafe");
115 var alignItemsBaseline = document.getElementById("alignItemsBaseline"); 143 checkValues(alignItemsEndUnsafe, "alignItems", "align-items", "", "end unsaf e");
116 shouldBe("getComputedStyle(alignItemsBaseline, '').getPropertyValue('align-items ')", "'baseline'"); 144 var alignItemsCenterUnsafe = document.getElementById("alignItemsCenterUnsafe ");
145 checkValues(alignItemsCenterUnsafe, "alignItems", "align-items", "", "center unsafe");
146 var alignItemsSelfEndSafe = document.getElementById("alignItemsSelfEndSafe") ;
147 checkValues(alignItemsSelfEndSafe, "alignItems", "align-items", "", "self-en d safe");
148 var alignItemsSelfStartSafe = document.getElementById("alignItemsSelfStartSa fe");
149 checkValues(alignItemsSelfStartSafe, "alignItems", "align-items", "", "self- start safe");
150 var alignItemsRightSafe = document.getElementById("alignItemsRightSafe");
151 checkValues(alignItemsRightSafe, "alignItems", "align-items", "", "right saf e");
152 var alignItemsLeftUnsafe = document.getElementById("alignItemsLeftUnsafe");
153 checkValues(alignItemsLeftUnsafe, "alignItems", "align-items", "", "left uns afe");
154 var alignItemsFlexStartUnsafe = document.getElementById("alignItemsFlexStart Unsafe");
155 checkValues(alignItemsFlexStartUnsafe, "alignItems", "align-items", "", "fle x-start unsafe");
156 var alignItemsFlexEndSafe = document.getElementById("alignItemsFlexEndSafe") ;
157 checkValues(alignItemsFlexEndSafe, "alignItems", "align-items", "", "flex-en d safe");
158 }, "Test getting align-items set through CSS.");
117 159
118 var alignItemsLastBaseline = document.getElementById("alignItemsLastBaseline"); 160 test(function() {
119 shouldBe("getComputedStyle(alignItemsLastBaseline, '').getPropertyValue('align-i tems')", "'last-baseline'"); 161 element = document.createElement("div");
162 document.body.appendChild(element);
163 checkValues(element, "alignItems", "align-items", "", "normal");
164 }, "Test initial value of align-items through JS");
120 165
121 var alignItemsStretch = document.getElementById("alignItemsStretch"); 166 test(function() {
122 shouldBe("getComputedStyle(alignItemsStretch, '').getPropertyValue('align-items' )", "'stretch'"); 167 element = document.createElement("div");
168 document.body.appendChild(element);
169 element.style.alignItems = "center";
170 checkValues(element, "alignItems", "align-items", "center", "center");
123 171
124 var alignItemsStart = document.getElementById("alignItemsStart"); 172 element.style.alignItems = "unsafe start";
125 shouldBe("getComputedStyle(alignItemsStart, '').getPropertyValue('align-items')" , "'start'"); 173 checkValues(element, "alignItems", "align-items", "start unsafe", "start un safe");
126 174
127 var alignItemsEnd = document.getElementById("alignItemsEnd"); 175 element.style.alignItems = "flex-end safe";
128 shouldBe("getComputedStyle(alignItemsEnd, '').getPropertyValue('align-items')", "'end'"); 176 checkValues(element, "alignItems", "align-items", "flex-end safe", "flex-en d safe");
129 177
130 var alignItemsCenter = document.getElementById("alignItemsCenter"); 178 element.style.alignItems = "right";
131 shouldBe("getComputedStyle(alignItemsCenter, '').getPropertyValue('align-items') ", "'center'"); 179 checkValues(element, "alignItems", "align-items", "right", "right");
132 180
133 var alignItemsSelfEnd = document.getElementById("alignItemsSelfEnd"); 181 element.style.alignItems = "center";
134 shouldBe("getComputedStyle(alignItemsSelfEnd, '').getPropertyValue('align-items' )", "'self-end'"); 182 checkValues(element, "alignItems", "align-items", "center", "center");
135 183
136 var alignItemsSelfStart = document.getElementById("alignItemsSelfStart"); 184 element.style.alignItems = "self-start";
137 shouldBe("getComputedStyle(alignItemsSelfStart, '').getPropertyValue('align-item s')", "'self-start'"); 185 checkValues(element, "alignItems", "align-items", "self-start", "self-start ");
138 186
139 var alignItemsLeft = document.getElementById("alignItemsLeft"); 187 // The 'auto' value is not valid for the align-items property.
140 shouldBe("getComputedStyle(alignItemsLeft, '').getPropertyValue('align-items')", "'left'"); 188 element.style.alignItems = "";
189 element.style.alignItems = "auto";
190 checkValues(element, "alignItems", "align-items", "", "normal");
141 191
142 var alignItemsRight = document.getElementById("alignItemsRight"); 192 element.style.display = "flex";
143 shouldBe("getComputedStyle(alignItemsRight, '').getPropertyValue('align-items')" , "'right'"); 193 element.style.alignItems = "auto";
194 checkValues(element, "alignItems", "align-items", "", "normal");
144 195
145 var alignItemsFlexStart = document.getElementById("alignItemsFlexStart"); 196 element.style.display = "grid";
146 shouldBe("getComputedStyle(alignItemsFlexStart, '').getPropertyValue('align-item s')", "'flex-start'"); 197 element.style.alignItems = "auto";
198 checkValues(element, "alignItems", "align-items", "", "normal");
147 199
148 var alignItemsFlexEnd = document.getElementById("alignItemsFlexEnd"); 200 element.style.alignItems = "self-end";
149 shouldBe("getComputedStyle(alignItemsFlexEnd, '').getPropertyValue('align-items' )", "'flex-end'"); 201 checkValues(element, "alignItems", "align-items", "self-end", "self-end");
202 }, "Test getting and setting align-items through JS");
150 203
151 var alignItemsEndUnsafe = document.getElementById("alignItemsEndUnsafe"); 204 test(function() {
152 shouldBe("getComputedStyle(alignItemsEndUnsafe, '').getPropertyValue('align-item s')", "'end unsafe'"); 205 element = document.createElement("div");
206 document.body.appendChild(element);
153 207
154 var alignItemsCenterUnsafe = document.getElementById("alignItemsCenterUnsafe"); 208 checkBadValues(element, "alignItems", "align-items", "auto");
155 shouldBe("getComputedStyle(alignItemsCenterUnsafe, '').getPropertyValue('align-i tems')", "'center unsafe'"); 209 checkBadValues(element, "alignItems", "align-items", "unsafe auto");
210 checkBadValues(element, "alignItems", "align-items", "auto safe");
211 checkBadValues(element, "alignItems", "align-items", "auto left");
212 checkBadValues(element, "alignItems", "align-items", "baseline safe");
213 checkBadValues(element, "alignItems", "align-items", "baseline center");
214 checkBadValues(element, "alignItems", "align-items", "first baseline center ");
215 checkBadValues(element, "alignItems", "align-items", "last baseline center" );
216 checkBadValues(element, "alignItems", "align-items", "baseline last");
217 checkBadValues(element, "alignItems", "align-items", "baseline first");
218 checkBadValues(element, "alignItems", "align-items", "stretch unsafe");
219 checkBadValues(element, "alignItems", "align-items", "stretch right");
220 checkBadValues(element, "alignItems", "align-items", "unsafe unsafe");
221 checkBadValues(element, "alignItems", "align-items", "unsafe safe");
222 checkBadValues(element, "alignItems", "align-items", "center start");
223 checkBadValues(element, "alignItems", "align-items", "stretch unsafe");
224 checkBadValues(element, "alignItems", "align-items", "safe stretch");
225 checkBadValues(element, "alignItems", "align-items", "baseline safe");
226 checkBadValues(element, "alignItems", "align-items", "unsafe baseline");
227 checkBadValues(element, "alignItems", "align-items", "unsafe safe left");
228 checkBadValues(element, "alignItems", "align-items", "unsafe left safe");
229 checkBadValues(element, "alignItems", "align-items", "left safe unsafe safe ");
230 checkBadValues(element, "alignItems", "align-items", "legacy start");
231 checkBadValues(element, "alignItems", "align-items", "legacy end");
232 checkBadValues(element, "alignItems", "align-items", "legacy right unsafe") ;
233 checkBadValues(element, "alignItems", "align-items", "legacy auto");
234 checkBadValues(element, "alignItems", "align-items", "legacy stretch");
235 checkBadValues(element, "alignItems", "align-items", "legacy");
236 checkBadValues(element, "alignItems", "align-items", "legacy left right");
237 }, "Test bad combinations of align-items");
156 238
157 var alignItemsSelfEndSafe = document.getElementById("alignItemsSelfEndSafe"); 239 test(function() {
158 shouldBe("getComputedStyle(alignItemsSelfEndSafe, '').getPropertyValue('align-it ems')", "'self-end safe'"); 240 element.style.display = "";
241 checkInitialValues(element, "alignItems", "align-items", "center", "normal") ;
242 }, "Test the value 'initial'");
159 243
160 var alignItemsSelfStartSafe = document.getElementById("alignItemsSelfStartSafe") ; 244 test(function() {
161 shouldBe("getComputedStyle(alignItemsSelfStartSafe, '').getPropertyValue('align- items')", "'self-start safe'"); 245 element.style.display = "grid";
246 checkInitialValues(element, "alignItems", "align-items", "left safe", "norma l");
247 }, "Test the value 'initial' for grid containers");
162 248
163 var alignItemsRightSafe = document.getElementById("alignItemsRightSafe"); 249 test(function() {
164 shouldBe("getComputedStyle(alignItemsRightSafe, '').getPropertyValue('align-item s')", "'right safe'"); 250 element.style.display = "flex";
251 checkInitialValues(element, "alignItems", "align-items", "right unsafe", "no rmal");
252 }, "Test the value 'initial' for flex containers");
165 253
166 var alignItemsLeftUnsafe = document.getElementById("alignItemsLeftUnsafe"); 254 test(function() {
167 shouldBe("getComputedStyle(alignItemsLeftUnsafe, '').getPropertyValue('align-ite ms')", "'left unsafe'"); 255 checkInheritValues("alignItems", "align-items", "end");
168 256 checkInheritValues("alignItems", "align-items", "left safe");
169 var alignItemsFlexStartUnsafe = document.getElementById("alignItemsFlexStartUnsa fe"); 257 checkInheritValues("alignItems", "align-items", "center unsafe");
170 shouldBe("getComputedStyle(alignItemsFlexStartUnsafe, '').getPropertyValue('alig n-items')", "'flex-start unsafe'"); 258 }, "Test the value 'inherit'");
171
172 var alignItemsFlexEndSafe = document.getElementById("alignItemsFlexEndSafe");
173 shouldBe("getComputedStyle(alignItemsFlexEndSafe, '').getPropertyValue('align-it ems')", "'flex-end safe'");
174
175 debug("");
176 debug("Test initial value of align-items through JS");
177 element = document.createElement("div");
178 document.body.appendChild(element);
179 shouldBe("getComputedStyle(element, '').getPropertyValue('align-items')", "'norm al'");
180
181 debug("");
182 debug("Test getting and setting align-items through JS");
183 element = document.createElement("div");
184 document.body.appendChild(element);
185 element.style.alignItems = "center";
186 checkValues(element, "alignItems", "align-items", "center", "center");
187
188 element.style.alignItems = "unsafe start";
189 checkValues(element, "alignItems", "align-items", "start unsafe", "start unsafe ");
190
191 element.style.alignItems = "flex-end safe";
192 checkValues(element, "alignItems", "align-items", "flex-end safe", "flex-end sa fe");
193
194 element.style.alignItems = "right";
195 checkValues(element, "alignItems", "align-items", "right", "right");
196
197 element.style.alignItems = "center";
198 checkValues(element, "alignItems", "align-items", "center", "center");
199
200 element.style.alignItems = "self-start";
201 checkValues(element, "alignItems", "align-items", "self-start", "self-start");
202
203 // The 'auto' value is not valid for the align-items property.
204 element.style.alignItems = "";
205 element.style.alignItems = "auto";
206 checkValues(element, "alignItems", "align-items", "", "normal");
207
208 element.style.display = "flex";
209 element.style.alignItems = "auto";
210 checkValues(element, "alignItems", "align-items", "", "normal");
211
212 element.style.display = "grid";
213 element.style.alignItems = "auto";
214 checkValues(element, "alignItems", "align-items", "", "normal");
215
216 element.style.alignItems = "self-end";
217 checkValues(element, "alignItems", "align-items", "self-end", "self-end");
218
219 debug("");
220 debug("Test bad combinations of align-items");
221 element = document.createElement("div");
222 document.body.appendChild(element);
223
224 checkBadValues(element, "alignItems", "align-items", "auto");
225 checkBadValues(element, "alignItems", "align-items", "unsafe auto");
226 checkBadValues(element, "alignItems", "align-items", "auto safe");
227 checkBadValues(element, "alignItems", "align-items", "auto left");
228 checkBadValues(element, "alignItems", "align-items", "baseline safe");
229 checkBadValues(element, "alignItems", "align-items", "baseline center");
230 checkBadValues(element, "alignItems", "align-items", "stretch unsafe");
231 checkBadValues(element, "alignItems", "align-items", "stretch right");
232 checkBadValues(element, "alignItems", "align-items", "unsafe unsafe");
233 checkBadValues(element, "alignItems", "align-items", "unsafe safe");
234 checkBadValues(element, "alignItems", "align-items", "center start");
235 checkBadValues(element, "alignItems", "align-items", "stretch unsafe");
236 checkBadValues(element, "alignItems", "align-items", "safe stretch");
237 checkBadValues(element, "alignItems", "align-items", "baseline safe");
238 checkBadValues(element, "alignItems", "align-items", "unsafe baseline");
239 checkBadValues(element, "alignItems", "align-items", "unsafe safe left");
240 checkBadValues(element, "alignItems", "align-items", "unsafe left safe");
241 checkBadValues(element, "alignItems", "align-items", "left safe unsafe safe");
242 checkBadValues(element, "alignItems", "align-items", "legacy start");
243 checkBadValues(element, "alignItems", "align-items", "legacy end");
244 checkBadValues(element, "alignItems", "align-items", "legacy right unsafe");
245 checkBadValues(element, "alignItems", "align-items", "legacy auto");
246 checkBadValues(element, "alignItems", "align-items", "legacy stretch");
247 checkBadValues(element, "alignItems", "align-items", "legacy");
248 checkBadValues(element, "alignItems", "align-items", "legacy left right");
249
250 debug("");
251 debug("Test the value 'initial'");
252 element.style.display = "";
253 checkInitialValues(element, "alignItems", "align-items", "center", "normal");
254
255 debug("");
256 debug("Test the value 'initial' for grid containers");
257 element.style.display = "grid";
258 checkInitialValues(element, "alignItems", "align-items", "left safe", "normal");
259
260 debug("");
261 debug("Test the value 'initial' for flex containers");
262 element.style.display = "flex";
263 checkInitialValues(element, "alignItems", "align-items", "right unsafe", "normal ");
264
265 debug("");
266 debug("Test the value 'inherit'");
267 checkInheritValues("alignItems", "align-items", "end");
268 checkInheritValues("alignItems", "align-items", "left safe");
269 checkInheritValues("alignItems", "align-items", "center unsafe");
270
271 </script> 259 </script>
272 </body>
273 </html>
OLDNEW
« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/fast/alignment/parse-align-items-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698