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

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

Issue 2455093002: [css-align] Don't resolve 'auto' values for computed style. (Closed)
Patch Set: Patch for landing. 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
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html> 2 <html>
3 <head> 3 <head>
4 <style> 4 <style>
5 #placeSelfNormal { 5 #placeSelfNormal {
6 place-self: normal; 6 place-self: normal;
7 } 7 }
8 #placeSelfCenterAuto { 8 #placeSelfCenterAuto {
9 place-self: center auto; 9 place-self: center auto;
10 } 10 }
(...skipping 40 matching lines...) Expand 10 before | Expand all | Expand 10 after
51 } 51 }
52 #placeSelfNone { 52 #placeSelfNone {
53 place-self: none; 53 place-self: none;
54 } 54 }
55 #placeSelfSafe { 55 #placeSelfSafe {
56 place-self: safe; 56 place-self: safe;
57 } 57 }
58 #placeSelfStartSafe { 58 #placeSelfStartSafe {
59 place-self: start safe; 59 place-self: start safe;
60 } 60 }
61 #placeSelfBaselineSafe {
62 place-self: baseline safe;
63 }
61 #placeSelfStartEndLeft { 64 #placeSelfStartEndLeft {
62 place-self: start end left; 65 place-self: start end left;
63 } 66 }
64 </style> 67 </style>
65 <script src="../../resources/testharness.js"></script> 68 <script src="../../resources/testharness.js"></script>
66 <script src="../../resources/testharnessreport.js"></script> 69 <script src="../../resources/testharnessreport.js"></script>
67 <script src="resources/alignment-parsing-utils-th.js"></script> 70 <script src="resources/alignment-parsing-utils-th.js"></script>
68 </head> 71 </head>
69 <body> 72 <body>
70 <p>Test to verify that the new place-self alignment shorthand is parsed as exp ected and correctly sets the longhand values.</p> 73 <p>Test to verify that the new place-self alignment shorthand is parsed as exp ected and correctly sets the longhand values.</p>
(...skipping 35 matching lines...) Expand 10 before | Expand all | Expand 10 after
106 document.body.appendChild(element); 109 document.body.appendChild(element);
107 element.style.placeSelf = value; 110 element.style.placeSelf = value;
108 checkValues(element, "placeSelf", "place-self", value, alignValue + ' ' + just ifyValue) 111 checkValues(element, "placeSelf", "place-self", value, alignValue + ' ' + just ifyValue)
109 checkPlaceSelfValues(element, value, alignValue, justifyValue) 112 checkPlaceSelfValues(element, value, alignValue, justifyValue)
110 } 113 }
111 114
112 function checkPlaceSelfValuesBadJS(value) 115 function checkPlaceSelfValuesBadJS(value)
113 { 116 {
114 element.style.placeSelf = ""; 117 element.style.placeSelf = "";
115 element.style.placeSelf = value; 118 element.style.placeSelf = value;
116 checkPlaceSelfValues(element, "", "normal", "normal") 119 checkPlaceSelfValues(element, "", "auto", "auto")
117 } 120 }
118 121
119 test(function() { 122 test(function() {
120 checkValues(placeSelfNormal, "placeSelf", "place-self", "", "normal normal"); 123 checkValues(placeSelfNormal, "placeSelf", "place-self", "", "normal normal");
121 checkPlaceSelfValues(placeSelfNormal, "", "normal", "normal"); 124 checkPlaceSelfValues(placeSelfNormal, "", "normal", "normal");
122 }, "Test getting the Computed Value of place-self's longhand properties when set ting 'normal' value through CSS."); 125 }, "Test getting the Computed Value of place-self's longhand properties when set ting 'normal' value through CSS.");
123 126
124 test(function() { 127 test(function() {
125 checkValues(placeSelfCenterAuto, "placeSelf", "place-self", "", "center normal "); 128 checkValues(placeSelfCenterAuto, "placeSelf", "place-self", "", "center auto") ;
126 checkPlaceSelfValues(placeSelfCenterAuto, "", "center", "normal"); 129 checkPlaceSelfValues(placeSelfCenterAuto, "", "center", "auto");
127 }, "Test getting the Computed Value of place-self's longhand properties when set ting 'center auto' value through CSS."); 130 }, "Test getting the Computed Value of place-self's longhand properties when set ting 'center auto' value through CSS.");
128 131
129 test(function() { 132 test(function() {
130 checkValues(placeSelfBaseline, "placeSelf", "place-self", "", "baseline baseli ne"); 133 checkValues(placeSelfBaseline, "placeSelf", "place-self", "", "baseline baseli ne");
131 checkPlaceSelfValues(placeSelfBaseline, "", "baseline", "baseline"); 134 checkPlaceSelfValues(placeSelfBaseline, "", "baseline", "baseline");
132 }, "Test getting the Computed Value of place-self's longhand properties when set ting 'baseline' value through CSS."); 135 }, "Test getting the Computed Value of place-self's longhand properties when set ting 'baseline' value through CSS.");
133 136
134 test(function() { 137 test(function() {
135 checkValues(placeSelfFirstBaseline, "placeSelf", "place-self", "", "baseline b aseline"); 138 checkValues(placeSelfFirstBaseline, "placeSelf", "place-self", "", "baseline b aseline");
136 checkPlaceSelfValues(placeSelfFirstBaseline, "", "baseline", "baseline"); 139 checkPlaceSelfValues(placeSelfFirstBaseline, "", "baseline", "baseline");
(...skipping 38 matching lines...) Expand 10 before | Expand all | Expand 10 after
175 checkValues(placeSelfStartSelfEnd, "placeSelf", "place-self", "", "start self- end"); 178 checkValues(placeSelfStartSelfEnd, "placeSelf", "place-self", "", "start self- end");
176 checkPlaceSelfValues(placeSelfStartSelfEnd, "", "start", "self-end"); 179 checkPlaceSelfValues(placeSelfStartSelfEnd, "", "start", "self-end");
177 }, "Test getting the Computed Value of place-self's longhand properties when set ting 'start self-end' value through CSS."); 180 }, "Test getting the Computed Value of place-self's longhand properties when set ting 'start self-end' value through CSS.");
178 181
179 test(function() { 182 test(function() {
180 checkValues(placeSelfStartBaseline, "placeSelf", "place-self", "", "start base line"); 183 checkValues(placeSelfStartBaseline, "placeSelf", "place-self", "", "start base line");
181 checkPlaceSelfValues(placeSelfStartBaseline, "", "start", "baseline"); 184 checkPlaceSelfValues(placeSelfStartBaseline, "", "start", "baseline");
182 }, "Test getting the Computed Value of place-self's longhand properties when set ting 'start baseline' value through CSS."); 185 }, "Test getting the Computed Value of place-self's longhand properties when set ting 'start baseline' value through CSS.");
183 186
184 test(function() { 187 test(function() {
185 checkValues(placeSelfAuto, "placeSelf", "place-self", "", "normal normal"); 188 checkValues(placeSelfEmpty, "placeSelf", "place-self", "", "auto auto");
186 checkPlaceSelfValues(placeSelfAuto, "", "normal", "normal"); 189 checkPlaceSelfValues(placeSelfEmpty, "", "auto", "auto");
187 }, "Test setting '' as incorrect value through CSS."); 190 }, "Test setting '' as incorrect value through CSS.");
188 191
189 test(function() { 192 test(function() {
190 checkValues(placeSelfAuto, "placeSelf", "place-self", "", "normal normal"); 193 checkValues(placeSelfAuto, "placeSelf", "place-self", "", "auto auto");
191 checkPlaceSelfValues(placeSelfAuto, "", "normal", "normal"); 194 checkPlaceSelfValues(placeSelfAuto, "", "auto", "auto");
192 }, "Test setting 'auto' as incorrect value through CSS."); 195 }, "Test setting 'auto' as incorrect value through CSS.");
193 196
194 test(function() { 197 test(function() {
195 checkValues(placeSelfNone, "placeSelf", "place-self", "", "normal normal"); 198 checkValues(placeSelfNone, "placeSelf", "place-self", "", "auto auto");
196 checkPlaceSelfValues(placeSelfNone, "", "normal", "normal"); 199 checkPlaceSelfValues(placeSelfNone, "", "auto", "auto");
197 }, "Test setting 'none' as incorrect value through CSS."); 200 }, "Test setting 'none' as incorrect value through CSS.");
198 201
199 test(function() { 202 test(function() {
200 checkValues(placeSelfSafe, "placeSelf", "place-self", "", "normal normal"); 203 checkValues(placeSelfSafe, "placeSelf", "place-self", "", "auto auto");
201 checkPlaceSelfValues(placeSelfSafe, "", "normal", "normal"); 204 checkPlaceSelfValues(placeSelfSafe, "", "auto", "auto");
202 }, "Test setting 'safe' as incorrect value through CSS."); 205 }, "Test setting 'safe' as incorrect value through CSS.");
203 206
204 test(function() { 207 test(function() {
205 checkValues(placeSelfStartSafe, "placeSelf", "place-self", "", "normal normal" ); 208 checkValues(placeSelfStartSafe, "placeSelf", "place-self", "", "auto auto");
206 checkPlaceSelfValues(placeSelfStartSafe, "", "normal", "normal"); 209 checkPlaceSelfValues(placeSelfStartSafe, "", "auto", "auto");
207 }, "Test setting 'start safe' as incorrect value through CSS."); 210 }, "Test setting 'start safe' as incorrect value through CSS.");
208 211
209 test(function() { 212 test(function() {
210 checkValues(placeSelfStartSafe, "placeSelf", "place-self", "", "normal normal" ); 213 checkValues(placeSelfBaselineSafe, "placeSelf", "place-self", "", "auto auto") ;
211 checkPlaceSelfValues(placeSelfStartSafe, "", "normal", "normal"); 214 checkPlaceSelfValues(placeSelfBaselineSafe, "", "auto", "auto");
212 }, "Test setting 'baseline safe' as incorrect value through CSS."); 215 }, "Test setting 'baseline safe' as incorrect value through CSS.");
213 216
214 test(function() { 217 test(function() {
215 checkValues(placeSelfStartEndLeft, "placeSelf", "place-self", "", "normal norm al"); 218 checkValues(placeSelfStartEndLeft, "placeSelf", "place-self", "", "auto auto") ;
216 checkPlaceSelfValues(placeSelfStartEndLeft, "", "normal", "normal"); 219 checkPlaceSelfValues(placeSelfStartEndLeft, "", "auto", "auto");
217 }, "Test setting 'start end left' as incorrect value through CSS."); 220 }, "Test setting 'start end left' as incorrect value through CSS.");
218 221
219 test(function() { 222 test(function() {
220 checkPlaceSelfValuesJS("center", "center", "center"); 223 checkPlaceSelfValuesJS("center", "center", "center");
221 checkPlaceSelfValuesJS("center start", "center", "start"); 224 checkPlaceSelfValuesJS("center start", "center", "start");
222 checkPlaceSelfValuesJS("self-start end", "self-start", "end"); 225 checkPlaceSelfValuesJS("self-start end", "self-start", "end");
223 checkPlaceSelfValuesJS("normal end", "normal", "end"); 226 checkPlaceSelfValuesJS("normal end", "normal", "end");
227 checkPlaceSelfValuesJS("auto right", "auto", "right");
224 }, "Test setting values through JS."); 228 }, "Test setting values through JS.");
225 229
226 test(function() { 230 test(function() {
227 checkPlaceSelfValuesBadJS("space-between", "normal", "normal"); 231 checkPlaceSelfValuesBadJS("space-between");
228 checkPlaceSelfValuesBadJS("center safe", "normal", "normal"); 232 checkPlaceSelfValuesBadJS("center safe");
229 checkPlaceSelfValuesBadJS("center self-start center", "normal", "normal"); 233 checkPlaceSelfValuesBadJS("center self-start center");
230 checkPlaceSelfValuesBadJS("asrt", "normal", "normal"); 234 checkPlaceSelfValuesBadJS("asrt");
231 checkPlaceSelfValuesBadJS("10px", "normal", "normal"); 235 checkPlaceSelfValuesBadJS("10px");
232 checkPlaceSelfValuesBadJS("stretch safe", "normal", "normal"); 236 checkPlaceSelfValuesBadJS("stretch safe");
233 checkPlaceSelfValuesBadJS("self-start start end", "normal", "normal"); 237 checkPlaceSelfValuesBadJS("self-start start end");
234 checkPlaceSelfValuesBadJS("", "normal", "normal"); 238 checkPlaceSelfValuesBadJS("");
235 }, "Test setting incorrect values through JS."); 239 }, "Test setting incorrect values through JS.");
236 240
237 test(function() { 241 test(function() {
238 element = document.createElement("div"); 242 element = document.createElement("div");
239 document.body.appendChild(element); 243 document.body.appendChild(element);
240 checkValues(element, "placeSelf", "place-self", "", "normal normal"); 244 checkValues(element, "placeSelf", "place-self", "", "auto auto");
241 element.style.placeSelf = "center"; 245 element.style.placeSelf = "center";
242 checkPlaceSelfValues(element, "center", "center", "center"); 246 checkPlaceSelfValues(element, "center", "center", "center");
243 element.style.placeSelf = "initial"; 247 element.style.placeSelf = "initial";
244 checkValues(element, "placeSelf", "place-self", "initial", "normal normal"); 248 checkValues(element, "placeSelf", "place-self", "initial", "auto auto");
245 checkPlaceSelfValues(element, "initial", "normal", "normal"); 249 checkPlaceSelfValues(element, "initial", "auto", "auto");
246 }, "Test the 'initial' value of the place-self shorthand and its longhand proper ties' Computed value"); 250 }, "Test the 'initial' value of the place-self shorthand and its longhand proper ties' Computed value");
247 251
248 test(function() { 252 test(function() {
249 document.body.style.placeSelf = "start"; 253 document.body.style.placeSelf = "start";
250 var anotherElement = document.createElement("div"); 254 var anotherElement = document.createElement("div");
251 document.body.appendChild(anotherElement); 255 document.body.appendChild(anotherElement);
252 checkPlaceSelfValues(anotherElement, "", "normal", "normal"); 256 checkPlaceSelfValues(anotherElement, "", "auto", "auto");
253 anotherElement.style.placeSelf = "inherit"; 257 anotherElement.style.placeSelf = "inherit";
254 checkPlaceSelfValues(anotherElement, "inherit", "start", "start"); 258 checkPlaceSelfValues(anotherElement, "inherit", "start", "start");
255 }, "Test the 'inherit' value of the place-self shorthand and its longhand proper ties' Computed value"); 259 }, "Test the 'inherit' value of the place-self shorthand and its longhand proper ties' Computed value");
256 </script> 260 </script>
257 </body> 261 </body>
258 </html> 262 </html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698