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