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