src/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 .gridItemWithString {
  36     grid-column-end: "first";
  37     grid-row-end: "last";
  38 }
  39 .gridItemWithSpanString {
  40     grid-column-end: "first" span;
  41     grid-row-end: span "last";
  42 }
  43 .gridItemWithSpanNumberString {
  44     grid-column-end: 2 "first" span;
  45     grid-row-end: "last" 3 span;
  46 }
  47 .gridItemWithArea {
  48     grid-column-end: firstArea;
  49     grid-row-end: 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-end and grid-row-end works as expected');
  72
  73     debug("Test getting grid-column-end and grid-row-end set through CSS");
  74     testColumnRowCSSParsing("gridElement", "auto / auto", "auto / auto");
  75     testColumnRowCSSParsing("gridItemWithPositiveInteger", "auto / 10", "auto / 15");
  76     testColumnRowCSSParsing("gridItemWithNegativeInteger", "auto / -10", "auto / -15");
  77     testColumnRowCSSParsing("gridItemWithBeforeSpan", "auto / span 2", "auto / span 9");
  78     testColumnRowCSSParsing("gridItemWithAfterSpan", "auto / span 2", "auto / span 9");
  79     testColumnRowCSSParsing("gridItemWithOnlySpan", "auto / span 1", "auto / span 1");
  80     testColumnRowCSSParsing("gridItemWithAutoElement", "auto / auto", "auto / auto");
  81     testColumnRowCSSParsing("gridItemWithStringElement", "auto / 1 first", "auto / 1 last");
  82     testColumnRowCSSParsing("gridItemWithSpanStringElement", "auto / span 1 first", "auto / span 1 last");
  83     testColumnRowCSSParsing("gridItemWithSpanNumberStringElement", "auto / span 2 first", "auto / span 3 last");
  84     testColumnRowCSSParsing("gridItemWithArea", "auto / firstArea", "auto / thirdArea");
  85
  86     debug("");
  87     debug("Test the initial value");
  88     var element = document.createElement("div");
  89     document.body.appendChild(element);
  90     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-end')", "'auto'");
  91     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "'auto / auto'");
  92     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-end')", "'auto'");
  93     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'auto / auto'");
  94
  95     debug("");
  96     debug("Test getting and setting grid-column-end and grid-row-end through JS");
  97     testColumnEndRowEndJSParsing("18", "66");
  98     testColumnEndRowEndJSParsing("-55", "-40");
  99     testColumnEndRowEndJSParsing("'first'", "'last'", "1 first", "1 last");
 100     testColumnEndRowEndJSParsing("span 7", "span 2");
 101     testColumnEndRowEndJSParsing("span 'first'", "span 'last'", "span 1 first", "span 1 last");
 102     testColumnEndRowEndJSParsing("auto", "auto");
 103     testColumnEndRowEndJSParsing("thirdArea", "secondArea");
 104     testColumnEndRowEndJSParsing("nonExistentArea", "secondArea", "auto", "secondArea");
 105     testColumnEndRowEndJSParsing("secondArea", "nonExistentArea", "secondArea", "auto");
 106
 107     debug("");
 108     debug("Test setting grid-column-start and grid-row-start to 'inherit' through JS");
 109     testColumnEndRowEndInheritJSParsing("inherit", "18");
 110     testColumnEndRowEndInheritJSParsing("2", "inherit");
 111     testColumnEndRowEndInheritJSParsing("inherit", "inherit");
 112
 113     debug("");
 114     debug("Test setting grid-column-start and grid-row-start to 'initial' through JS");
 115     testEndAfterInitialJSParsing();
 116
 117     debug("");
 118     debug("Test setting grid-column-end and grid-row-end back to 'auto' through JS");
 119     element.style.gridColumnEnd = "18";
 120     element.style.gridRowEnd = "66";
 121     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-end')", "'18'");
 122     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "'auto / 18'");
 123     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-end')", "'66'");
 124     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'auto / 66'");
 125     element.style.gridColumnEnd = "auto";
 126     element.style.gridRowEnd = "auto";
 127     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-end')", "'auto'");
 128     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "'auto / auto'");
 129     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-end')", "'auto'");
 130     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'auto / auto'");
 131 </script>
 132 </body>
 133 </html>