third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-column-row-get-set.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <link href="resources/grid.css" rel="stylesheet">
   5 <style>
   6 .grid {
   7     grid-template-areas: "firstArea secondArea"
   8                          "thirdArea thirdArea";
   9
  10     grid-template-columns: [first nav] 10px 10px;
  11     grid-template-rows: [last] 10px 10px;
  12 }
  13
  14 .gridItemWithPositiveInteger {
  15     grid-column: 10;
  16     grid-row: 15;
  17 }
  18 .gridItemWithNegativeInteger {
  19     grid-column: -10;
  20     grid-row: -15;
  21 }
  22 .gridItemWithAuto {
  23     grid-column: auto;
  24     grid-row: auto;
  25 }
  26 .gridItemWith2Integer {
  27     grid-column: 10 / 15;
  28     grid-row: 5 / 5;
  29 }
  30 .gridItemWithNegativePositiveInteger {
  31     grid-column: 10 / -10;
  32     grid-row: -8 / 5;
  33 }
  34 .gridItemWithBeforeSpan {
  35     grid-column: span 2 / 4;
  36     grid-row: 3 / span 5;
  37 }
  38 .gridItemWithAfterSpan {
  39     grid-column: 2 span / 4;
  40     grid-row: 3 / 5 span;
  41 }
  42 .gridItemWith2OnlySpan {
  43     grid-column: span / span;
  44     grid-row: span / span;
  45 }
  46 .gridItemWith2Auto {
  47     grid-column: auto / auto;
  48     grid-row: auto / auto;
  49 }
  50 .gridItemWithBothLongHand {
  51     grid-column-end: 11;
  52     grid-row-start: 4;
  53 }
  54 .gridItemWithNoSpace {
  55     grid-column: auto/1;
  56     grid-row: 5/auto;
  57 }
  58 .gridItemWithCustomIdent {
  59     grid-column: first;
  60     grid-row: last;
  61 }
  62 .gridItemWithNonExistingCustomIdent {
  63     grid-column: nav;
  64     grid-row: foo;
  65 }
  66 .gridItemWithSpanCustomIdent {
  67     grid-column: 1 /span first;
  68     grid-row: -1 / span last;
  69 }
  70 .gridItemWithSpanNumberCustomIdent {
  71     grid-column: 1 /span 3 first;
  72     grid-row: -1 / last 2 span ;
  73 }
  74 .gridItemWithSingleNamedGridArea {
  75     grid-column: thirdArea;
  76     grid-row: firstArea;
  77 }
  78 .gridItemWithNamedGridAreaAndSpan {
  79     grid-column: thirdArea / span;
  80     grid-row: firstArea / span 2;
  81 }
  82 </style>
  83 <script src="resources/grid-item-column-row-parsing-utils.js"></script>
  84 <script src="../../resources/js-test.js"></script>
  85 </head>
  86 <body>
  87 <div class="grid">
  88     <!-- The first has no properties set on it. -->
  89     <div id="gridItemWithNoCSSRule"></div>
  90     <div class="gridItemWithPositiveInteger" id="gridItemWithPositiveInteger"></div>
  91     <div class="gridItemWithNegativeInteger" id="gridItemWithNegativeInteger"></div>
  92     <div class="gridItemWithAuto" id="gridItemWithAutoElement"></div>
  93     <div class="gridItemWith2Integer" id="gridItemWith2IntegerElement"></div>
  94     <div class="gridItemWithNegativePositiveInteger" id="gridItemWithNegativePositiveIntegerElement"></div>
  95     <div class="gridItemWith2Auto" id="gridItemWith2AutoElement"></div>
  96     <div class="gridItemWithBeforeSpan" id="gridItemWithBeforeSpanElement"></div>
  97     <div class="gridItemWithAfterSpan" id="gridItemWithAfterSpanElement"></div>
  98     <div class="gridItemWith2OnlySpan" id="gridItemWith2OnlySpanElement"></div>
  99     <div class="gridItemWithNegativePositiveInteger gridItemWithBothLongHand" id="gridItemWithBothShortLongHandElement"></div>
 100     <div class="gridItemWithNoSpace" id="gridItemWithNoSpaceElement"></div>
 101     <div class="gridItemWithCustomIdent" id="gridItemWithCustomIdent"></div>
 102     <div class="gridItemWithNonExistingCustomIdent" id="gridItemWithNonExistingCustomIdent"></div>
 103     <div class="gridItemWithSpanCustomIdent" id="gridItemWithSpanCustomIdent"></div>
 104     <div class="gridItemWithSpanNumberCustomIdent" id="gridItemWithSpanNumberCustomIdent"></div>
 105     <div class="gridItemWithSingleNamedGridArea" id="gridItemWithSingleNamedGridArea"></div>
 106     <div class="gridItemWithNamedGridAreaAndSpan" id="gridItemWithNamedGridAreaAndSpan"></div>
 107 </div>
 108 <script>
 109     description('Test that setting and getting grid-column and grid-row works as expected');
 110
 111     debug("Test getting grid-column and grid-row set through CSS");
 112     testColumnRowCSSParsing("gridItemWithNoCSSRule", "auto / auto", "auto / auto");
 113     testColumnRowCSSParsing("gridItemWithPositiveInteger", "10 / auto", "15 / auto");
 114     testColumnRowCSSParsing("gridItemWithNegativeInteger", "-10 / auto", "-15 / auto");
 115     testColumnRowCSSParsing("gridItemWithAutoElement", "auto / auto", "auto / auto");
 116     testColumnRowCSSParsing("gridItemWith2IntegerElement", "10 / 15", "5 / 5");
 117     testColumnRowCSSParsing("gridItemWithNegativePositiveIntegerElement", "10 / -10", "-8 / 5");
 118     testColumnRowCSSParsing("gridItemWithBeforeSpanElement", "span 2 / 4", "3 / span 5");
 119     testColumnRowCSSParsing("gridItemWith2OnlySpanElement", "span 1 / span 1", "span 1 / span 1");
 120     testColumnRowCSSParsing("gridItemWith2AutoElement", "auto / auto" , "auto / auto");
 121     testColumnRowCSSParsing("gridItemWithBothShortLongHandElement", "10 / 11", "4 / 5");
 122     testColumnRowCSSParsing("gridItemWithNoSpaceElement", "auto / 1", "5 / auto");
 123     testColumnRowCSSParsing("gridItemWithCustomIdent", "first / first", "last / last");
 124     testColumnRowCSSParsing("gridItemWithNonExistingCustomIdent", "nav / nav", "foo / foo");
 125     testColumnRowCSSParsing("gridItemWithSpanCustomIdent", "1 / span 1 first", "-1 / span 1 last");
 126     testColumnRowCSSParsing("gridItemWithSpanNumberCustomIdent", "1 / span 3 first", "-1 / span 2 last");
 127     testColumnRowCSSParsing("gridItemWithSingleNamedGridArea", "thirdArea / thirdArea", "firstArea / firstArea");
 128     testColumnRowCSSParsing("gridItemWithNamedGridAreaAndSpan", "thirdArea / span 1", "firstArea / span 2");
 129
 130     debug("");
 131     debug("Test the initial value");
 132     var element = document.createElement("div");
 133     document.body.appendChild(element);
 134     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "'auto / auto'");
 135     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-start')", "'auto'");
 136     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-end')", "'auto'");
 137     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'auto / auto'");
 138     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-start')", "'auto'");
 139     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-end')", "'auto'");
 140
 141     debug("");
 142     debug("Test getting and setting grid-column and grid-row through JS");
 143     testColumnRowJSParsing("18", "66", "18 / auto", "66 / auto");
 144     testColumnRowJSParsing("-55", "-40", "-55 / auto", "-40 / auto");
 145     testColumnRowJSParsing("auto", "auto", "auto / auto", "auto / auto");
 146     testColumnRowJSParsing("10 / 55", "1 / 10");
 147     testColumnRowJSParsing("span 5 / 5", "4 / span 4");
 148     testColumnRowJSParsing("-5 / 5", "4 / -4");
 149     testColumnRowJSParsing("4 / auto", "5 / auto");
 150     testColumnRowJSParsing("auto / 5", "auto / 8");
 151     testColumnRowJSParsing("span / 3", "5 / span", "span 1 / 3", "5 / span 1");
 152     testColumnRowJSParsing("first span / 3", "5 / last span", "span 1 first / 3", "5 / span 1 last");
 153     testColumnRowJSParsing("first / last", "nav / last span", "first / last", "nav / span 1 last");
 154     testColumnRowJSParsing("3 first / 2 last", "5 nav / last 7 span", "3 first / 2 last", "5 nav / span 7 last");
 155     testColumnRowJSParsing("3 first span / -3 last", "last 2 span / -1 nav", "span 3 first / -3 last", "span 2 last / -1 nav");
 156     testColumnRowJSParsing("5 / none", "8 / foobar");
 157     testColumnRowJSParsing("nonExistent / none", "nonExistent / foobar");
 158     testColumnRowJSParsing("span first 3 / none", "last span / foobar", "span 3 first / none", "span 1 last / foobar");
 159     testColumnRowJSParsing("5 span / span 2", "span first / last span", "span 5 / span 2", "span 1 first / span 1 last");
 160     testColumnRowJSParsing("span 5 first / span last 2", "3 first span / last 7 span", "span 5 first / span 2 last", "span 3 first / span 7 last");
 161
 162     debug("");
 163     debug("Test setting grid-column and grid-row back to 'auto' through JS");
 164     element.style.gridColumn = "18 / 19";
 165     element.style.gridRow = "66 / 68";
 166     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "'18 / 19'");
 167     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-start')", "'18'");
 168     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-end')", "'19'");
 169     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'66 / 68'");
 170     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-start')", "'66'");
 171     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-end')", "'68'");
 172
 173     element.style.gridColumn = "auto";
 174     element.style.gridRow = "auto";
 175     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "'auto / auto'");
 176     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-start')", "'auto'");
 177     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-end')", "'auto'");
 178     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'auto / auto'");
 179     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-start')", "'auto'");
 180     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-end')", "'auto'");
 181
 182     debug("");
 183     debug("Test getting and setting 'initial' grid-column and grid-row through JS");
 184     testColumnRowInitialJSParsing();
 185
 186     debug("");
 187     debug("Test getting and setting 'inherit' grid-column and grid-row through JS");
 188     testColumnRowInheritJSParsing("1 / auto", "inherit");
 189     testColumnRowInheritJSParsing("inherit", "1 / auto");
 190     testColumnRowInheritJSParsing("inherit", "inherit");
 191
 192     debug("");
 193     debug("Test getting and setting invalid grid-column and grid-row through JS");
 194     testColumnRowInvalidJSParsing("4 5", "5 8");
 195     testColumnRowInvalidJSParsing("4 /", "5 /");
 196     testColumnRowInvalidJSParsing("5 5", "8 auto");
 197     testColumnRowInvalidJSParsing("5 / /", "8 / /");
 198
 199     // 0 is invalid.
 200     testColumnRowInvalidJSParsing("0 / 5", "0 / 6");
 201     testColumnRowInvalidJSParsing("6 / 0", "8 / 0");
 202     testColumnRowInvalidJSParsing("0", "0");
 203
 204     // 'span' and 'auto' are not valid <custom-ident>
 205     testColumnRowInvalidJSParsing("span span / span span", "span span / span span");
 206     testColumnRowInvalidJSParsing("span auto / span auto", "span auto / span auto");
 207
 208     // CSS wide keywords are not valid <custom-ident>
 209     testColumnRowInvalidJSParsing("span default / span default", "span default / span default");
 210     testColumnRowInvalidJSParsing("span inherit / span inherit", "span inherit / span inherit");
 211     testColumnRowInvalidJSParsing("span initial / span initial", "span initial / span initial");
 212
 213     // More than 1 <integer> and / or <string>.
 214     testColumnRowInvalidJSParsing("5 5 / span 2", "4 4 / 3 span");
 215     testColumnRowInvalidJSParsing("5 first last / span 2", "first 4 last / 3 span");
 216     testColumnRowInvalidJSParsing("5 / first last 2", "4 / first 3 last");
 217     testColumnRowInvalidJSParsing("first last / span 2", "first last / 3 span");
 218     testColumnRowInvalidJSParsing("5 / first last", "4 / first last");
 219     testColumnRowInvalidJSParsing("5 5 span / 2", "span 4 4 / 3");
 220     testColumnRowInvalidJSParsing("span 3 5 / 1", "5 span 4 / 3");
 221     testColumnRowInvalidJSParsing("span last first / 1", "span first last / 3");
 222     testColumnRowInvalidJSParsing("2 / span last first", "3 / span first last");
 223     testColumnRowInvalidJSParsing("span 1 last first / 1", "span first last 7 / 3");
 224     testColumnRowInvalidJSParsing("2 / span last 3 first", "3 / span first 5 last");
 225     testColumnRowInvalidJSParsing("1 span 2 first / 1", "1 span last 7 / 3");
 226     testColumnRowInvalidJSParsing("2 / 3 span 3 first", "3 / 5 span first 5");
 227
 228     // Negative integer or 0 are invalid for spans.
 229     testColumnRowInvalidJSParsing("span -1 / -2", "-3 span / -4");
 230     testColumnRowInvalidJSParsing("-1 / -2 span", "-3 / span -4");
 231     testColumnRowInvalidJSParsing("0 span / 0", "span 0 / 0");
 232     testColumnRowInvalidJSParsing("0 / span 0", "0 / 0 span");
 233     testColumnRowInvalidJSParsing("span -3 'first' / 3 last", "last -2 span / 1 nav");
 234
 235     // We don't allow span to be between the <integer> and the <string>.
 236     testColumnRowInvalidJSParsing("first span 1 / last", "2 span first / last");
 237     testColumnRowInvalidJSParsing("3 first / 2 span last", "5 nav / last span 7");
 238     testColumnRowInvalidJSParsing("3 / 1 span 2", "5 / 3 span 3");
 239 </script>
 240 </body>
 241 </html>