third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-end-after-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-end: 10;
  13     grid-row-end: 15;
  14 }
  15 .gridItemWithNegativeInteger {
  16     grid-column-end: -10;
  17     grid-row-end: -15;
  18 }
  19 .gridItemWithBeforeSpan {
  20     grid-column-end: span 2;
  21     grid-row-end: span 9;
  22 }
  23 .gridItemWithAfterSpan {
  24     grid-column-end: 2 span;
  25     grid-row-end: 9 span;
  26 }
  27 .gridItemWithOnlySpan {
  28     grid-column-end: span;
  29     grid-row-end: span;
  30 }
  31 .gridItemWithAuto {
  32     grid-column-end: auto;
  33     grid-row-end: auto;
  34 }
  35 .gridItemWithCustomIdent {
  36     grid-column-end: first;
  37     grid-row-end: last;
  38 }
  39 .gridItemWithNumberCustomIdent {
  40     grid-column-end: first 2;
  41     grid-row-end: 3 last;
  42 }
  43 .gridItemWithSpanCustomIdent {
  44     grid-column-end: first span;
  45     grid-row-end: span last;
  46 }
  47 .gridItemWithSpanNumberCustomIdent {
  48     grid-column-end: 2 first span;
  49     grid-row-end: last 3 span;
  50 }
  51 .gridItemWithArea {
  52     grid-column-end: firstArea;
  53     grid-row-end: 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-end and grid-row-end works as expected');
  77
  78     debug("Test getting grid-column-end and grid-row-end set through CSS");
  79     testColumnRowCSSParsing("gridElement", "auto / auto", "auto / auto");
  80     testColumnRowCSSParsing("gridItemWithPositiveInteger", "auto / 10", "auto / 15");
  81     testColumnRowCSSParsing("gridItemWithNegativeInteger", "auto / -10", "auto / -15");
  82     testColumnRowCSSParsing("gridItemWithBeforeSpan", "auto / span 2", "auto / span 9");
  83     testColumnRowCSSParsing("gridItemWithAfterSpan", "auto / span 2", "auto / span 9");
  84     testColumnRowCSSParsing("gridItemWithOnlySpan", "auto / span 1", "auto / span 1");
  85     testColumnRowCSSParsing("gridItemWithAutoElement", "auto / auto", "auto / auto");
  86     testColumnRowCSSParsing("gridItemWithCustomIdent", "auto / first", "auto / last");
  87     testColumnRowCSSParsing("gridItemWithNumberCustomIdent", "auto / 2 first", "auto / 3 last");
  88     testColumnRowCSSParsing("gridItemWithSpanCustomIdentElement", "auto / span 1 first", "auto / span 1 last");
  89     testColumnRowCSSParsing("gridItemWithSpanNumberCustomIdentElement", "auto / span 2 first", "auto / span 3 last");
  90     testColumnRowCSSParsing("gridItemWithArea", "auto / firstArea", "auto / thirdArea");
  91
  92     debug("");
  93     debug("Test the initial value");
  94     var element = document.createElement("div");
  95     document.body.appendChild(element);
  96     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-end')", "'auto'");
  97     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "'auto / auto'");
  98     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-end')", "'auto'");
  99     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'auto / auto'");
 100
 101     debug("");
 102     debug("Test getting and setting grid-column-end and grid-row-end through JS");
 103     testColumnEndRowEndJSParsing("18", "66");
 104     testColumnEndRowEndJSParsing("-55", "-40");
 105     testColumnEndRowEndJSParsing("first", "last", "first", "last");
 106     testColumnEndRowEndJSParsing("span 7", "span 2");
 107     testColumnEndRowEndJSParsing("span first", "span last", "span 1 first", "span 1 last");
 108     testColumnEndRowEndJSParsing("auto", "auto");
 109     testColumnEndRowEndJSParsing("thirdArea", "secondArea");
 110     testColumnEndRowEndJSParsing("nonExistentArea", "secondArea");
 111     testColumnEndRowEndJSParsing("secondArea", "nonExistentArea");
 112
 113     debug("");
 114     debug("Test setting grid-column-start and grid-row-start to 'inherit' through JS");
 115     testColumnEndRowEndInheritJSParsing("inherit", "18");
 116     testColumnEndRowEndInheritJSParsing("2", "inherit");
 117     testColumnEndRowEndInheritJSParsing("inherit", "inherit");
 118
 119     debug("");
 120     debug("Test setting grid-column-start and grid-row-start to 'initial' through JS");
 121     testEndAfterInitialJSParsing();
 122
 123     debug("");
 124     debug("Test setting grid-column-end and grid-row-end back to 'auto' through JS");
 125     element.style.gridColumnEnd = "18";
 126     element.style.gridRowEnd = "66";
 127     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-end')", "'18'");
 128     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "'auto / 18'");
 129     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-end')", "'66'");
 130     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'auto / 66'");
 131     element.style.gridColumnEnd = "auto";
 132     element.style.gridRowEnd = "auto";
 133     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-end')", "'auto'");
 134     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "'auto / auto'");
 135     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-end')", "'auto'");
 136     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'auto / auto'");
 137 </script>
 138 </body>
 139 </html>