src/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-start-before-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
  11 .gridItemWithPositiveInteger {
  12     grid-column-start: 10;
  13     grid-row-start: 15;
  14 }
  15 .gridItemWithNegativeInteger {
  16     grid-column-start: -10;
  17     grid-row-start: -15;
  18 }
  19 .gridItemWithBeforeSpan {
  20     grid-column-start: span 2;
  21     grid-row-start: span 8;
  22 }
  23 .gridItemWithAfterSpan {
  24     grid-column-start: 2 span;
  25     grid-row-start: 8 span;
  26 }
  27 .gridItemWithOnlySpan {
  28     grid-column-start: span;
  29     grid-row-start: span;
  30 }
  31 .gridItemWithAuto {
  32     grid-column-start: auto;
  33     grid-row-start: auto;
  34 }
  35 .gridItemWithString {
  36     grid-column-start: "first";
  37     grid-row-start: "last";
  38 }
  39 .gridItemWithSpanString {
  40     grid-column-start: "first" span;
  41     grid-row-start: span "last";
  42 }
  43 .gridItemWithSpanNumberString {
  44     grid-column-start: 2 "first" span;
  45     grid-row-start: "last" 3 span;
  46 }
  47 .gridItemWithArea {
  48     grid-column-start: firstArea;
  49     grid-row-start: thirdArea;
  50 }
  51 </style>
  52 <script src="resources/grid-item-column-row-parsing-utils.js"></script>
  53 <script src="../../resources/js-test.js"></script>
  54 </head>
  55 <body>
  56 <div class="grid">
  57     <!-- The first has no properties set on it. -->
  58     <div id="gridElement"></div>
  59     <div class="gridItemWithPositiveInteger" id="gridItemWithPositiveInteger"></div>
  60     <div class="gridItemWithNegativeInteger" id="gridItemWithNegativeInteger"></div>
  61     <div class="gridItemWithBeforeSpan" id="gridItemWithBeforeSpan"></div>
  62     <div class="gridItemWithAfterSpan" id="gridItemWithAfterSpan"></div>
  63     <div class="gridItemWithOnlySpan" id="gridItemWithOnlySpan"></div>
  64     <div class="gridItemWithAuto" id="gridItemWithAutoElement"></div>
  65     <div class="gridItemWithString" id="gridItemWithStringElement"></div>
  66     <div class="gridItemWithSpanString" id="gridItemWithSpanStringElement"></div>
  67     <div class="gridItemWithSpanNumberString" id="gridItemWithSpanNumberStringElement"></div>
  68     <div class="gridItemWithArea" id="gridItemWithArea"></div>
  69 </div>
  70 <script>
  71     description('Test that setting and getting grid-column-start and grid-row-start works as expected');
  72
  73     debug("Test getting grid-column-start and grid-row-start set through CSS");
  74     var gridElement = document.getElementById("gridElement");
  75     shouldBe("getComputedStyle(gridElement, '').getPropertyValue('grid-column-start')", "'auto'");
  76     shouldBe("getComputedStyle(gridElement, '').getPropertyValue('grid-column')", "'auto / auto'");
  77     shouldBe("getComputedStyle(gridElement, '').getPropertyValue('grid-row-start')", "'auto'");
  78     shouldBe("getComputedStyle(gridElement, '').getPropertyValue('grid-row')", "'auto / auto'");
  79
  80     testColumnRowCSSParsing("gridItemWithPositiveInteger", "10 / auto", "15 / auto");
  81     testColumnRowCSSParsing("gridItemWithNegativeInteger", "-10 / auto", "-15 / auto");
  82     testColumnRowCSSParsing("gridItemWithBeforeSpan", "span 2 / auto", "span 8 / auto");
  83     testColumnRowCSSParsing("gridItemWithAfterSpan", "span 2 / auto", "span 8 / auto");
  84     testColumnRowCSSParsing("gridItemWithOnlySpan", "span 1 / auto", "span 1 / auto");
  85     testColumnRowCSSParsing("gridItemWithAutoElement", "auto / auto", "auto / auto");
  86     testColumnRowCSSParsing("gridItemWithStringElement", "1 first / auto", "1 last / auto");
  87     testColumnRowCSSParsing("gridItemWithSpanStringElement", "span 1 first / auto", "span 1 last / auto");
  88     testColumnRowCSSParsing("gridItemWithSpanNumberStringElement", "span 2 first / auto", "span 3 last / auto");
  89     testColumnRowCSSParsing("gridItemWithArea", "firstArea / auto", "thirdArea / auto");
  90
  91     debug("");
  92     debug("Test the initial value");
  93     var element = document.createElement("div");
  94     document.body.appendChild(element);
  95     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-start')", "'auto'");
  96     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "'auto / auto'");
  97     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-start')", "'auto'");
  98     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'auto / auto'");
  99
 100     debug("");
 101     debug("Test getting and setting grid-column-start and grid-row-start through JS");
 102     testColumnStartRowStartJSParsing("18", "66");
 103     testColumnStartRowStartJSParsing("-55", "-40");
 104     testColumnStartRowStartJSParsing("'nav'", "'last'", "1 nav", "1 last");
 105     testColumnStartRowStartJSParsing("span 3", "span 20");
 106     testColumnStartRowStartJSParsing("span 'nav'", "span 'last'", "span 1 nav", "span 1 last");
 107     testColumnStartRowStartJSParsing("auto", "auto");
 108     testColumnStartRowStartJSParsing("thirdArea", "secondArea");
 109     testColumnStartRowStartJSParsing("nonExistentArea", "secondArea", "auto", "secondArea");
 110     testColumnStartRowStartJSParsing("secondArea", "nonExistentArea", "secondArea", "auto");
 111
 112     debug("");
 113     debug("Test setting grid-column-start and grid-row-start to 'inherit' through JS");
 114     testColumnStartRowStartInheritJSParsing("inherit", "18");
 115     testColumnStartRowStartInheritJSParsing("2", "inherit");
 116     testColumnStartRowStartInheritJSParsing("inherit", "inherit");
 117
 118     debug("");
 119     debug("Test setting grid-column-start and grid-row-start to 'initial' through JS");
 120     testColumnStartRowStartInitialJSParsing();
 121
 122     debug("");
 123     debug("Test setting grid-column-start and grid-row-start back to 'auto' through JS");
 124     element.style.gridColumnStart = "18";
 125     element.style.gridRowStart = "66";
 126     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-start')", "'18'");
 127     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "'18 / auto'");
 128     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-start')", "'66'");
 129     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'66 / auto'");
 130     element.style.gridColumnStart = "auto";
 131     element.style.gridRowStart = "auto";
 132     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-start')", "'auto'");
 133     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "'auto / auto'");
 134     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-start')", "'auto'");
 135     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'auto / auto'");
 136 </script>
 137 </body>
 138 </html>