| OLD | NEW |
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <html> | 2 <html> |
| 3 <head> | 3 <head> |
| 4 <style> | 4 <style> |
| 5 #placeItemsNormal { | 5 #placeSelfNormal { |
| 6 place-items: normal; | 6 place-self: normal; |
| 7 } | 7 } |
| 8 #placeItemsCenterAuto { | 8 #placeSelfCenterAuto { |
| 9 place-items: center auto; | 9 place-self: center auto; |
| 10 } | 10 } |
| 11 #placeItemsBaseline { | 11 #placeSelfBaseline { |
| 12 place-items: baseline; | 12 place-self: baseline; |
| 13 } | 13 } |
| 14 #placeItemsFirstBaseline { | 14 #placeSelfFirstBaseline { |
| 15 place-items: first baseline; | 15 place-self: first baseline; |
| 16 } | 16 } |
| 17 #placeItemsLastBaseline { | 17 #placeSelfLastBaseline { |
| 18 place-items: last baseline; | 18 place-self: last baseline; |
| 19 } | 19 } |
| 20 #placeItemsStart { | 20 #placeSelfStart { |
| 21 place-items: start; | 21 place-self: start; |
| 22 } | 22 } |
| 23 #placeItemsFlexStart { | 23 #placeSelfFlexStart { |
| 24 place-items: flex-start; | 24 place-self: flex-start; |
| 25 } | 25 } |
| 26 #placeItemsEnd { | 26 #placeSelfEnd { |
| 27 place-items: end; | 27 place-self: end; |
| 28 } | 28 } |
| 29 #placeItemsSelfStart { | 29 #placeSelfSelfStart { |
| 30 place-items: self-start; | 30 place-self: self-start; |
| 31 } | 31 } |
| 32 #placeItemsStretch { | 32 #placeSelfStretch { |
| 33 place-items: stretch; | 33 place-self: stretch; |
| 34 } | 34 } |
| 35 #placeItemsStartEnd { | 35 #placeSelfStartEnd { |
| 36 place-items: start end; | 36 place-self: start end; |
| 37 } | 37 } |
| 38 #placeItemsStartSelfEnd { | 38 #placeSelfStartSelfEnd { |
| 39 place-items: start self-end; | 39 place-self: start self-end; |
| 40 } | 40 } |
| 41 #placeItemsStartBaseline { | 41 #placeSelfStartBaseline { |
| 42 place-items: start baseline; | 42 place-self: start baseline; |
| 43 } | 43 } |
| 44 | 44 |
| 45 <!-- Invalid CSS cases --> | 45 <!-- Invalid CSS cases --> |
| 46 #placeItemsEmpty { | 46 #placeSelfEmpty { |
| 47 place-items:; | 47 place-self:; |
| 48 } | 48 } |
| 49 #placeItemsAuto { | 49 #placeSelfAuto { |
| 50 place-items: auto; | 50 place-self: auto; |
| 51 } | 51 } |
| 52 #placeItemsNone { | 52 #placeSelfNone { |
| 53 place-items: none; | 53 place-self: none; |
| 54 } | 54 } |
| 55 #placeItemsSafe { | 55 #placeSelfSafe { |
| 56 place-items: safe; | 56 place-self: safe; |
| 57 } | 57 } |
| 58 #placeItemsStartSafe { | 58 #placeSelfStartSafe { |
| 59 place-items: start safe; | 59 place-self: start safe; |
| 60 } | 60 } |
| 61 #placeItemsStartEndLeft { | 61 #placeSelfStartEndLeft { |
| 62 place-items: start end left; | 62 place-self: start end left; |
| 63 } | 63 } |
| 64 </style> | 64 </style> |
| 65 <script src="../../resources/testharness.js"></script> | 65 <script src="../../resources/testharness.js"></script> |
| 66 <script src="../../resources/testharnessreport.js"></script> | 66 <script src="../../resources/testharnessreport.js"></script> |
| 67 <script src="resources/alignment-parsing-utils-th.js"></script> | 67 <script src="resources/alignment-parsing-utils-th.js"></script> |
| 68 </head> | 68 </head> |
| 69 <body> | 69 <body> |
| 70 <p>Test to verify that the new place-items alignment shorthand is parsed as ex
pected and correctly sets the longhand values.</p> | 70 <p>Test to verify that the new place-self alignment shorthand is parsed as exp
ected and correctly sets the longhand values.</p> |
| 71 <div id="log"></div> | 71 <div id="log"></div> |
| 72 | 72 |
| 73 <div id="placeItemsNormal"></div> | 73 <div id="placeSelfNormal"></div> |
| 74 <div id="placeItemsCenterAuto"></div> | 74 <div id="placeSelfCenterAuto"></div> |
| 75 <div id="placeItemsBaseline"></div> | 75 <div id="placeSelfBaseline"></div> |
| 76 <div id="placeItemsFirstBaseline"></div> | 76 <div id="placeSelfFirstBaseline"></div> |
| 77 <div id="placeItemsLastBaseline"></div> | 77 <div id="placeSelfLastBaseline"></div> |
| 78 <div id="placeItemsStart"></div> | 78 <div id="placeSelfStart"></div> |
| 79 <div id="placeItemsFlexStart"></div> | 79 <div id="placeSelfFlexStart"></div> |
| 80 <div id="placeItemsEnd"></div> | 80 <div id="placeSelfEnd"></div> |
| 81 <div id="placeItemsSelfStart"></div> | 81 <div id="placeSelfSelfStart"></div> |
| 82 <div id="placeItemsStretch"></div> | 82 <div id="placeSelfStretch"></div> |
| 83 <div id="placeItemsStartEnd"></div> | 83 <div id="placeSelfStartEnd"></div> |
| 84 <div id="placeItemsStartSelfEnd"></div> | 84 <div id="placeSelfStartSelfEnd"></div> |
| 85 <div id="placeItemsStartBaseline"></div> | 85 <div id="placeSelfStartBaseline"></div> |
| 86 | 86 |
| 87 <div id="placeItemsEmpty"></div> | 87 <div id="placeSelfEmpty"></div> |
| 88 <div id="placeItemsAuto"></div> | 88 <div id="placeSelfAuto"></div> |
| 89 <div id="placeItemsNone"></div> | 89 <div id="placeSelfNone"></div> |
| 90 <div id="placeItemsSafe"></div> | 90 <div id="placeSelfSafe"></div> |
| 91 <div id="placeItemsStartSafe"></div> | 91 <div id="placeSelfStartSafe"></div> |
| 92 <div id="placeItemsBaselineSafe"></div> | 92 <div id="placeSelfBaselineSafe"></div> |
| 93 <div id="placeItemsStartEndLeft"></div> | 93 <div id="placeSelfStartEndLeft"></div> |
| 94 <script> | 94 <script> |
| 95 function checkPlaceItemsValues(element, value, alignValue, justifyValue) { | 95 function checkPlaceSelfValues(element, value, alignValue, justifyValue) { |
| 96 var res = value.split(" "); | 96 var res = value.split(" "); |
| 97 if (res.length < 2) | 97 if (res.length < 2) |
| 98 res[1] = res[0]; | 98 res[1] = res[0]; |
| 99 checkValues(element, "alignItems", "align-items", res[0], alignValue); | 99 checkValues(element, "alignSelf", "align-self", res[0], alignValue); |
| 100 checkValues(element, "justifyItems", "justify-items", res[1], justifyValue); | 100 checkValues(element, "justifySelf", "justify-self", res[1], justifyValue); |
| 101 } | 101 } |
| 102 | 102 |
| 103 function checkPlaceItemsValuesJS(value, alignValue, justifyValue) | 103 function checkPlaceSelfValuesJS(value, alignValue, justifyValue) |
| 104 { | 104 { |
| 105 element = document.createElement("div"); | 105 element = document.createElement("div"); |
| 106 document.body.appendChild(element); | 106 document.body.appendChild(element); |
| 107 element.style.placeItems = value; | 107 element.style.placeSelf = value; |
| 108 checkValues(element, "placeItems", "place-items", value, alignValue + ' ' + ju
stifyValue) | 108 checkValues(element, "placeSelf", "place-self", value, alignValue + ' ' + just
ifyValue) |
| 109 checkPlaceItemsValues(element, value, alignValue, justifyValue) | 109 checkPlaceSelfValues(element, value, alignValue, justifyValue) |
| 110 } | 110 } |
| 111 | 111 |
| 112 function checkPlaceItemsValuesBadJS(value) | 112 function checkPlaceSelfValuesBadJS(value) |
| 113 { | 113 { |
| 114 element.style.placeItems = ""; | 114 element.style.placeSelf = ""; |
| 115 element.style.placeItems = value; | 115 element.style.placeSelf = value; |
| 116 checkPlaceItemsValues(element, "", "normal", "normal") | 116 checkPlaceSelfValues(element, "", "normal", "normal") |
| 117 } | 117 } |
| 118 | 118 |
| 119 test(function() { | 119 test(function() { |
| 120 checkValues(placeItemsNormal, "placeItems", "place-items", "", "normal normal"
); | 120 checkValues(placeSelfNormal, "placeSelf", "place-self", "", "normal normal"); |
| 121 checkPlaceItemsValues(placeItemsNormal, "", "normal", "normal"); | 121 checkPlaceSelfValues(placeSelfNormal, "", "normal", "normal"); |
| 122 }, "Test getting the Computed Value of place-items's longhand properties when se
tting 'normal' value through CSS."); | 122 }, "Test getting the Computed Value of place-self's longhand properties when set
ting 'normal' value through CSS."); |
| 123 | 123 |
| 124 test(function() { | 124 test(function() { |
| 125 checkValues(placeItemsCenterAuto, "placeItems", "place-items", "", "center nor
mal"); | 125 checkValues(placeSelfCenterAuto, "placeSelf", "place-self", "", "center normal
"); |
| 126 checkPlaceItemsValues(placeItemsCenterAuto, "", "center", "normal"); | 126 checkPlaceSelfValues(placeSelfCenterAuto, "", "center", "normal"); |
| 127 }, "Test getting the Computed Value of place-items's longhand properties when se
tting 'center auto' value through CSS."); | 127 }, "Test getting the Computed Value of place-self's longhand properties when set
ting 'center auto' value through CSS."); |
| 128 | 128 |
| 129 test(function() { | 129 test(function() { |
| 130 checkValues(placeItemsBaseline, "placeItems", "place-items", "", "baseline bas
eline"); | 130 checkValues(placeSelfBaseline, "placeSelf", "place-self", "", "baseline baseli
ne"); |
| 131 checkPlaceItemsValues(placeItemsBaseline, "", "baseline", "baseline"); | 131 checkPlaceSelfValues(placeSelfBaseline, "", "baseline", "baseline"); |
| 132 }, "Test getting the Computed Value of place-items's longhand properties when se
tting 'baseline' value through CSS."); | 132 }, "Test getting the Computed Value of place-self's longhand properties when set
ting 'baseline' value through CSS."); |
| 133 | 133 |
| 134 test(function() { | 134 test(function() { |
| 135 checkValues(placeItemsFirstBaseline, "placeItems", "place-items", "", "baselin
e baseline"); | 135 checkValues(placeSelfFirstBaseline, "placeSelf", "place-self", "", "baseline b
aseline"); |
| 136 checkPlaceItemsValues(placeItemsFirstBaseline, "", "baseline", "baseline"); | 136 checkPlaceSelfValues(placeSelfFirstBaseline, "", "baseline", "baseline"); |
| 137 }, "Test getting the Computed Value of place-items's longhand properties when se
tting 'first baseline' value through CSS."); | 137 }, "Test getting the Computed Value of place-self's longhand properties when set
ting 'first baseline' value through CSS."); |
| 138 | 138 |
| 139 test(function() { | 139 test(function() { |
| 140 checkValues(placeItemsLastBaseline, "placeItems", "place-items", "", "last bas
eline last baseline"); | 140 checkValues(placeSelfLastBaseline, "placeSelf", "place-self", "", "last baseli
ne last baseline"); |
| 141 checkPlaceItemsValues(placeItemsLastBaseline, "", "last baseline", "last basel
ine"); | 141 checkPlaceSelfValues(placeSelfLastBaseline, "", "last baseline", "last baselin
e"); |
| 142 }, "Test getting the Computed Value of place-items's longhand properties when se
tting 'last baseline' value through CSS."); | 142 }, "Test getting the Computed Value of place-self's longhand properties when set
ting 'last baseline' value through CSS."); |
| 143 | 143 |
| 144 test(function() { | 144 test(function() { |
| 145 checkValues(placeItemsStart, "placeItems", "place-items", "", "start start"); | 145 checkValues(placeSelfStart, "placeSelf", "place-self", "", "start start"); |
| 146 checkPlaceItemsValues(placeItemsStart, "", "start", "start"); | 146 checkPlaceSelfValues(placeSelfStart, "", "start", "start"); |
| 147 }, "Test getting the Computed Value of place-items's longhand properties when se
tting 'start' value through CSS."); | 147 }, "Test getting the Computed Value of place-self's longhand properties when set
ting 'start' value through CSS."); |
| 148 | 148 |
| 149 test(function() { | 149 test(function() { |
| 150 checkValues(placeItemsFlexStart, "placeItems", "place-items", "", "flex-start
flex-start"); | 150 checkValues(placeSelfFlexStart, "placeSelf", "place-self", "", "flex-start fle
x-start"); |
| 151 checkPlaceItemsValues(placeItemsFlexStart, "", "flex-start", "flex-start"); | 151 checkPlaceSelfValues(placeSelfFlexStart, "", "flex-start", "flex-start"); |
| 152 }, "Test getting the Computed Value of place-items's longhand properties when se
tting 'flex-start' value through CSS."); | 152 }, "Test getting the Computed Value of place-self's longhand properties when set
ting 'flex-start' value through CSS."); |
| 153 | 153 |
| 154 test(function() { | 154 test(function() { |
| 155 checkValues(placeItemsEnd, "placeItems", "place-items", "", "end end"); | 155 checkValues(placeSelfEnd, "placeSelf", "place-self", "", "end end"); |
| 156 checkPlaceItemsValues(placeItemsEnd, "", "end", "end"); | 156 checkPlaceSelfValues(placeSelfEnd, "", "end", "end"); |
| 157 }, "Test getting the Computed Value of place-items's longhand properties when se
tting 'end' value through CSS."); | 157 }, "Test getting the Computed Value of place-self's longhand properties when set
ting 'end' value through CSS."); |
| 158 | 158 |
| 159 test(function() { | 159 test(function() { |
| 160 checkValues(placeItemsSelfStart, "placeItems", "place-items", "", "self-start
self-start"); | 160 checkValues(placeSelfSelfStart, "placeSelf", "place-self", "", "self-start sel
f-start"); |
| 161 checkPlaceItemsValues(placeItemsSelfStart, "", "self-start", "self-start"); | 161 checkPlaceSelfValues(placeSelfSelfStart, "", "self-start", "self-start"); |
| 162 }, "Test getting the Computed Value of place-items's longhand properties when se
tting 'self-start' value through CSS."); | 162 }, "Test getting the Computed Value of place-self's longhand properties when set
ting 'self-start' value through CSS."); |
| 163 | 163 |
| 164 test(function() { | 164 test(function() { |
| 165 checkValues(placeItemsStretch, "placeItems", "place-items", "", "stretch stret
ch"); | 165 checkValues(placeSelfStretch, "placeSelf", "place-self", "", "stretch stretch"
); |
| 166 checkPlaceItemsValues(placeItemsStretch, "", "stretch", "stretch"); | 166 checkPlaceSelfValues(placeSelfStretch, "", "stretch", "stretch"); |
| 167 }, "Test getting the Computed Value of place-items's longhand properties when se
tting 'stretch' value through CSS."); | 167 }, "Test getting the Computed Value of place-self's longhand properties when set
ting 'stretch' value through CSS."); |
| 168 | 168 |
| 169 test(function() { | 169 test(function() { |
| 170 checkValues(placeItemsStartEnd, "placeItems", "place-items", "", "start end"); | 170 checkValues(placeSelfStartEnd, "placeSelf", "place-self", "", "start end"); |
| 171 checkPlaceItemsValues(placeItemsStartEnd, "", "start", "end"); | 171 checkPlaceSelfValues(placeSelfStartEnd, "", "start", "end"); |
| 172 }, "Test getting the Computed Value of place-items's longhand properties when se
tting 'start end' value through CSS."); | 172 }, "Test getting the Computed Value of place-self's longhand properties when set
ting 'start end' value through CSS."); |
| 173 | 173 |
| 174 test(function() { | 174 test(function() { |
| 175 checkValues(placeItemsStartSelfEnd, "placeItems", "place-items", "", "start se
lf-end"); | 175 checkValues(placeSelfStartSelfEnd, "placeSelf", "place-self", "", "start self-
end"); |
| 176 checkPlaceItemsValues(placeItemsStartSelfEnd, "", "start", "self-end"); | 176 checkPlaceSelfValues(placeSelfStartSelfEnd, "", "start", "self-end"); |
| 177 }, "Test getting the Computed Value of place-items's longhand properties when se
tting 'start self-end' value through CSS."); | 177 }, "Test getting the Computed Value of place-self's longhand properties when set
ting 'start self-end' value through CSS."); |
| 178 | 178 |
| 179 test(function() { | 179 test(function() { |
| 180 checkValues(placeItemsStartBaseline, "placeItems", "place-items", "", "start b
aseline"); | 180 checkValues(placeSelfStartBaseline, "placeSelf", "place-self", "", "start base
line"); |
| 181 checkPlaceItemsValues(placeItemsStartBaseline, "", "start", "baseline"); | 181 checkPlaceSelfValues(placeSelfStartBaseline, "", "start", "baseline"); |
| 182 }, "Test getting the Computed Value of place-items's longhand properties when se
tting 'start baseline' value through CSS."); | 182 }, "Test getting the Computed Value of place-self's longhand properties when set
ting 'start baseline' value through CSS."); |
| 183 | 183 |
| 184 test(function() { | 184 test(function() { |
| 185 checkValues(placeItemsAuto, "placeItems", "place-items", "", "normal normal"); | 185 checkValues(placeSelfAuto, "placeSelf", "place-self", "", "normal normal"); |
| 186 checkPlaceItemsValues(placeItemsAuto, "", "normal", "normal"); | 186 checkPlaceSelfValues(placeSelfAuto, "", "normal", "normal"); |
| 187 }, "Test setting '' as incorrect value through CSS."); | 187 }, "Test setting '' as incorrect value through CSS."); |
| 188 | 188 |
| 189 test(function() { | 189 test(function() { |
| 190 checkValues(placeItemsAuto, "placeItems", "place-items", "", "normal normal"); | 190 checkValues(placeSelfAuto, "placeSelf", "place-self", "", "normal normal"); |
| 191 checkPlaceItemsValues(placeItemsAuto, "", "normal", "normal"); | 191 checkPlaceSelfValues(placeSelfAuto, "", "normal", "normal"); |
| 192 }, "Test setting 'auto' as incorrect value through CSS."); | 192 }, "Test setting 'auto' as incorrect value through CSS."); |
| 193 | 193 |
| 194 test(function() { | 194 test(function() { |
| 195 checkValues(placeItemsNone, "placeItems", "place-items", "", "normal normal"); | 195 checkValues(placeSelfNone, "placeSelf", "place-self", "", "normal normal"); |
| 196 checkPlaceItemsValues(placeItemsNone, "", "normal", "normal"); | 196 checkPlaceSelfValues(placeSelfNone, "", "normal", "normal"); |
| 197 }, "Test setting 'none' as incorrect value through CSS."); | 197 }, "Test setting 'none' as incorrect value through CSS."); |
| 198 | 198 |
| 199 test(function() { | 199 test(function() { |
| 200 checkValues(placeItemsSafe, "placeItems", "place-items", "", "normal normal"); | 200 checkValues(placeSelfSafe, "placeSelf", "place-self", "", "normal normal"); |
| 201 checkPlaceItemsValues(placeItemsSafe, "", "normal", "normal"); | 201 checkPlaceSelfValues(placeSelfSafe, "", "normal", "normal"); |
| 202 }, "Test setting 'safe' as incorrect value through CSS."); | 202 }, "Test setting 'safe' as incorrect value through CSS."); |
| 203 | 203 |
| 204 test(function() { | 204 test(function() { |
| 205 checkValues(placeItemsStartSafe, "placeItems", "place-items", "", "normal norm
al"); | 205 checkValues(placeSelfStartSafe, "placeSelf", "place-self", "", "normal normal"
); |
| 206 checkPlaceItemsValues(placeItemsStartSafe, "", "normal", "normal"); | 206 checkPlaceSelfValues(placeSelfStartSafe, "", "normal", "normal"); |
| 207 }, "Test setting 'start safe' as incorrect value through CSS."); | 207 }, "Test setting 'start safe' as incorrect value through CSS."); |
| 208 | 208 |
| 209 test(function() { | 209 test(function() { |
| 210 checkValues(placeItemsStartSafe, "placeItems", "place-items", "", "normal norm
al"); | 210 checkValues(placeSelfStartSafe, "placeSelf", "place-self", "", "normal normal"
); |
| 211 checkPlaceItemsValues(placeItemsStartSafe, "", "normal", "normal"); | 211 checkPlaceSelfValues(placeSelfStartSafe, "", "normal", "normal"); |
| 212 }, "Test setting 'baseline safe' as incorrect value through CSS."); | 212 }, "Test setting 'baseline safe' as incorrect value through CSS."); |
| 213 | 213 |
| 214 test(function() { | 214 test(function() { |
| 215 checkValues(placeItemsStartEndLeft, "placeItems", "place-items", "", "normal n
ormal"); | 215 checkValues(placeSelfStartEndLeft, "placeSelf", "place-self", "", "normal norm
al"); |
| 216 checkPlaceItemsValues(placeItemsStartEndLeft, "", "normal", "normal"); | 216 checkPlaceSelfValues(placeSelfStartEndLeft, "", "normal", "normal"); |
| 217 }, "Test setting 'start end left' as incorrect value through CSS."); | 217 }, "Test setting 'start end left' as incorrect value through CSS."); |
| 218 | 218 |
| 219 test(function() { | 219 test(function() { |
| 220 checkPlaceItemsValuesJS("center", "center", "center"); | 220 checkPlaceSelfValuesJS("center", "center", "center"); |
| 221 checkPlaceItemsValuesJS("center start", "center", "start"); | 221 checkPlaceSelfValuesJS("center start", "center", "start"); |
| 222 checkPlaceItemsValuesJS("self-start end", "self-start", "end"); | 222 checkPlaceSelfValuesJS("self-start end", "self-start", "end"); |
| 223 checkPlaceItemsValuesJS("normal end", "normal", "end"); | 223 checkPlaceSelfValuesJS("normal end", "normal", "end"); |
| 224 }, "Test setting values through JS."); | 224 }, "Test setting values through JS."); |
| 225 | 225 |
| 226 test(function() { | 226 test(function() { |
| 227 checkPlaceItemsValuesBadJS("auto normal", "normal", "normal"); | 227 checkPlaceSelfValuesBadJS("space-between", "normal", "normal"); |
| 228 checkPlaceItemsValuesBadJS("space-between", "normal", "normal"); | 228 checkPlaceSelfValuesBadJS("center safe", "normal", "normal"); |
| 229 checkPlaceItemsValuesBadJS("center safe", "normal", "normal"); | 229 checkPlaceSelfValuesBadJS("center self-start center", "normal", "normal"); |
| 230 checkPlaceItemsValuesBadJS("center self-start center", "normal", "normal"); | 230 checkPlaceSelfValuesBadJS("asrt", "normal", "normal"); |
| 231 checkPlaceItemsValuesBadJS("asrt", "normal", "normal"); | 231 checkPlaceSelfValuesBadJS("10px", "normal", "normal"); |
| 232 checkPlaceItemsValuesBadJS("auto", "normal", "normal"); | 232 checkPlaceSelfValuesBadJS("stretch safe", "normal", "normal"); |
| 233 checkPlaceItemsValuesBadJS("10px", "normal", "normal"); | 233 checkPlaceSelfValuesBadJS("self-start start end", "normal", "normal"); |
| 234 checkPlaceItemsValuesBadJS("stretch safe", "normal", "normal"); | 234 checkPlaceSelfValuesBadJS("", "normal", "normal"); |
| 235 checkPlaceItemsValuesBadJS("self-start start end", "normal", "normal"); | |
| 236 checkPlaceItemsValuesBadJS("", "normal", "normal"); | |
| 237 }, "Test setting incorrect values through JS."); | 235 }, "Test setting incorrect values through JS."); |
| 238 | 236 |
| 239 test(function() { | 237 test(function() { |
| 240 element = document.createElement("div"); | 238 element = document.createElement("div"); |
| 241 document.body.appendChild(element); | 239 document.body.appendChild(element); |
| 242 checkValues(element, "placeItems", "place-items", "", "normal normal"); | 240 checkValues(element, "placeSelf", "place-self", "", "normal normal"); |
| 243 element.style.placeItems = "center"; | 241 element.style.placeSelf = "center"; |
| 244 checkPlaceItemsValues(element, "center", "center", "center"); | 242 checkPlaceSelfValues(element, "center", "center", "center"); |
| 245 element.style.placeItems = "initial"; | 243 element.style.placeSelf = "initial"; |
| 246 checkValues(element, "placeItems", "place-items", "initial", "normal normal"); | 244 checkValues(element, "placeSelf", "place-self", "initial", "normal normal"); |
| 247 checkPlaceItemsValues(element, "initial", "normal", "normal"); | 245 checkPlaceSelfValues(element, "initial", "normal", "normal"); |
| 248 }, "Test the 'initial' value of the place-items shorthand and its longhand prope
rties' Computed value"); | 246 }, "Test the 'initial' value of the place-self shorthand and its longhand proper
ties' Computed value"); |
| 249 | 247 |
| 250 test(function() { | 248 test(function() { |
| 251 document.body.style.placeItems = "start"; | 249 document.body.style.placeSelf = "start"; |
| 252 var anotherElement = document.createElement("div"); | 250 var anotherElement = document.createElement("div"); |
| 253 document.body.appendChild(anotherElement); | 251 document.body.appendChild(anotherElement); |
| 254 checkPlaceItemsValues(anotherElement, "", "normal", "normal"); | 252 checkPlaceSelfValues(anotherElement, "", "normal", "normal"); |
| 255 anotherElement.style.placeItems = "inherit"; | 253 anotherElement.style.placeSelf = "inherit"; |
| 256 checkPlaceItemsValues(anotherElement, "inherit", "start", "start"); | 254 checkPlaceSelfValues(anotherElement, "inherit", "start", "start"); |
| 257 }, "Test the 'inherit' value of the place-items shorthand and its longhand prope
rties' Computed value"); | 255 }, "Test the 'inherit' value of the place-self shorthand and its longhand proper
ties' Computed value"); |
| 258 </script> | 256 </script> |
| 259 </body> | 257 </body> |
| 260 </html> | 258 </html> |
| OLD | NEW |