OLD | NEW |
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 Loading... |
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 Loading... |
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 Loading... |
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> |
OLD | NEW |