src/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-area-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 #oneValueGridArea {
  12     grid-area: 1;
  13 }
  14
  15 #oneValueIdentGridArea {
  16     grid-area: thirdArea;
  17 }
  18
  19 #twoValueGridArea {
  20     grid-area: -1 / span 1;
  21 }
  22
  23 #twoValueIdentGridArea {
  24     grid-area: firstArea / secondArea;
  25 }
  26
  27 #threeValueGridArea {
  28     grid-area: span / 10 / -1;
  29 }
  30
  31 #fourValueGridArea {
  32     grid-area: -5 / 5 span / span 8 / 9;
  33 }
  34
  35 #fourValueMixedGridArea {
  36     grid-area: firstArea / span / nonExistent / "foobar";
  37 }
  38 </style>
  39 <script src="../js/resources/js-test-pre.js"></script>
  40 </head>
  41 <body>
  42 <div class="grid">
  43     <div id="oneValueGridArea"></div>
  44     <div id="oneValueIdentGridArea"></div>
  45     <div id="twoValueGridArea"></div>
  46     <div id="twoValueIdentGridArea"></div>
  47     <div id="threeValueGridArea"></div>
  48     <div id="fourValueGridArea"></div>
  49     <div id="fourValueMixedGridArea"></div>
  50 </div>
  51 <script>
  52     description('This test checks that grid-area is properly parsed and stored internally.');
  53     function valueOrDefaultGridPosition(gridPosition)
  54     {
  55         return gridPosition === undefined ? "auto" : gridPosition;
  56     }
  57
  58     function checkColumnRowValues(gridItem, gridRowStart, gridColumnStart, gridRowEnd, gridColumnEnd)
  59     {
  60         this.gridItem = gridItem;
  61         shouldBeEqualToString("getComputedStyle(gridItem, '').getPropertyValue('grid-row-start')", gridRowStart);
  62         shouldBeEqualToString("getComputedStyle(gridItem, '').getPropertyValue('grid-column-start')", valueOrDefaultGridPosition(gridColumnStart));
  63         shouldBeEqualToString("getComputedStyle(gridItem, '').getPropertyValue('grid-row-end')", valueOrDefaultGridPosition(gridRowEnd));
  64         shouldBeEqualToString("getComputedStyle(gridItem, '').getPropertyValue('grid-column-end')", valueOrDefaultGridPosition(gridColumnEnd));
  65     }
  66
  67     function testGridAreaCSSParsing(gridItemId, gridRowStart, gridColumnStart, gridRowEnd, gridColumnEnd)
  68     {
  69         checkColumnRowValues(document.getElementById(gridItemId), gridRowStart, gridColumnStart, gridRowEnd, gridColumnEnd);
  70     }
  71
  72     function testGridAreaJSParsing(gridAreaValue)
  73     {
  74         var element = document.createElement("div");
  75         document.body.appendChild(element);
  76         // Pre-fill it with values to detect that we properly handle and reset unset values.
  77         element.style.gridArea = "1 / 2 / 3 / 4";
  78         element.style.gridArea = gridAreaValue;
  79
  80         // Get the different values.
  81         var gridColumnRowValues = gridAreaValue.split("/");
  82         var gridRowStart = gridColumnRowValues[1] ? gridColumnRowValues[1].trim() : undefined;
  83         var gridColumnEnd = gridColumnRowValues[2] ? gridColumnRowValues[2].trim() : undefined;
  84         var gridRowEnd = gridColumnRowValues[3] ? gridColumnRowValues[3].trim() : undefined;
  85         checkColumnRowValues(element, gridColumnRowValues[0].trim(), gridRowStart, gridColumnEnd, gridRowEnd);
  86         document.body.removeChild(element);
  87     }
  88
  89     function testGridAreaInvalidJSParsing(gridAreaValue)
  90     {
  91         var element = document.createElement("div");
  92         document.body.appendChild(element);
  93         checkColumnRowValues(element, "auto", "auto", "auto", "auto");
  94         document.body.removeChild(element);
  95     }
  96
  97     function testInitialGridArea()
  98     {
  99         var element = document.createElement("div");
 100         document.body.appendChild(element);
 101         element.style.gridArea = "1 / 2 / 3 / 4";
 102         checkColumnRowValues(element, "1", "2", "3", "4");
 103
 104         element.style.gridArea = "initial";
 105         checkColumnRowValues(element, "auto", "auto", "auto", "auto");
 106
 107         document.body.removeChild(element);
 108     }
 109
 110     function testInheritGridArea()
 111     {
 112         var parentElement = document.createElement("div");
 113         document.body.appendChild(parentElement);
 114         parentElement.style.gridArea = "1 / 2 / 3 / 4";
 115         checkColumnRowValues(parentElement, "1", "2", "3", "4");
 116
 117         var element = document.createElement("div");
 118         parentElement.appendChild(element);
 119         element.style.gridArea = "inherit";
 120         checkColumnRowValues(element, "1", "2", "3", "4");
 121
 122         document.body.removeChild(parentElement);
 123     }
 124
 125     debug("Test getting grid-area set through CSS");
 126     testGridAreaCSSParsing("oneValueGridArea", "1");
 127     testGridAreaCSSParsing("oneValueIdentGridArea", "thirdArea", "thirdArea", "thirdArea", "thirdArea");
 128     testGridAreaCSSParsing("twoValueGridArea", "-1", "span 1");
 129     testGridAreaCSSParsing("twoValueIdentGridArea", "firstArea", "secondArea", "firstArea", "secondArea");
 130     testGridAreaCSSParsing("threeValueGridArea", "span 1", "10", "-1");
 131     testGridAreaCSSParsing("fourValueGridArea", "-5", "span 5", "span 8", "9");
 132     testGridAreaCSSParsing("fourValueMixedGridArea", "firstArea", "span 1", "auto", "1 foobar");
 133
 134     debug("");
 135     debug("Test getting and setting grid-area set through JS");
 136     testGridAreaJSParsing("-1");
 137     testGridAreaJSParsing("-1 / span 5");
 138     testGridAreaJSParsing("-1 / 10 / span 3");
 139
 140     debug("");
 141     debug("Test setting grid-area to 'initial' through JS");
 142     testInitialGridArea();
 143
 144     debug("");
 145     debug("Test setting grid-area to 'inherit' through JS");
 146     testInheritGridArea();
 147
 148     debug("");
 149     debug("Test setting some positions to invalid values through JS");
 150     testGridAreaInvalidJSParsing("span / span / span /");
 151     testGridAreaInvalidJSParsing("1/ span span / 1 / span");
 152     testGridAreaInvalidJSParsing("span / 1 / -1 / 1 -1");
 153     testGridAreaInvalidJSParsing("span / 1 / -1 / 1 span -1");
 154 </script>
 155 </body>
 156 </html>