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