LayoutTests/css3/parse-place-items.html

   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 expected 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 + ' ' + justifyValue)
 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 setting 'normal' value through CSS.");
 123
 124 test(function() {
 125   checkValues(placeItemsCenterAuto, "placeItems", "place-items", "", "center normal");
 126   checkPlaceItemsValues(placeItemsCenterAuto, "", "center", "normal");
 127 }, "Test getting the Computed Value of place-items's longhand properties when setting 'center auto' value through CSS.");
 128
 129 test(function() {
 130   checkValues(placeItemsBaseline, "placeItems", "place-items", "", "baseline baseline");
 131   checkPlaceItemsValues(placeItemsBaseline, "", "baseline", "baseline");
 132 }, "Test getting the Computed Value of place-items's longhand properties when setting 'baseline' value through CSS.");
 133
 134 test(function() {
 135   checkValues(placeItemsFirstBaseline, "placeItems", "place-items", "", "baseline baseline");
 136   checkPlaceItemsValues(placeItemsFirstBaseline, "", "baseline", "baseline");
 137 }, "Test getting the Computed Value of place-items's longhand properties when setting 'first baseline' value through CSS.");
 138
 139 test(function() {
 140   checkValues(placeItemsLastBaseline, "placeItems", "place-items", "", "last baseline last baseline");
 141   checkPlaceItemsValues(placeItemsLastBaseline, "", "last baseline", "last baseline");
 142 }, "Test getting the Computed Value of place-items's longhand properties when setting '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 setting '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 setting '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 setting '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 setting 'self-start' value through CSS.");
 163
 164 test(function() {
 165   checkValues(placeItemsStretch, "placeItems", "place-items", "", "stretch stretch");
 166   checkPlaceItemsValues(placeItemsStretch, "", "stretch", "stretch");
 167 }, "Test getting the Computed Value of place-items's longhand properties when setting '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 setting 'start end' value through CSS.");
 173
 174 test(function() {
 175   checkValues(placeItemsStartSelfEnd, "placeItems", "place-items", "", "start self-end");
 176   checkPlaceItemsValues(placeItemsStartSelfEnd, "", "start", "self-end");
 177 }, "Test getting the Computed Value of place-items's longhand properties when setting 'start self-end' value through CSS.");
 178
 179 test(function() {
 180   checkValues(placeItemsStartBaseline, "placeItems", "place-items", "", "start baseline");
 181   checkPlaceItemsValues(placeItemsStartBaseline, "", "start", "baseline");
 182 }, "Test getting the Computed Value of place-items's longhand properties when setting '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 normal");
 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 normal");
 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 normal");
 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 properties' 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 properties' Computed value");
 258 </script>
 259 </body>
 260 </html>