src/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-auto-columns-rows-get-set.html

   1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
   2 <html>
   3 <head>
   4 <link href="resources/grid.css" rel="stylesheet">
   5 <style>
   6 .gridAutoFixedFixed {
   7     grid-auto-rows: 30px;
   8     grid-auto-columns: 50px;
   9 }
  10
  11 .gridAutoMinMax {
  12     grid-auto-rows: minmax(10%, 15px);
  13     grid-auto-columns: minmax(30%, 100px);
  14 }
  15
  16 .gridAutoMinMaxContent {
  17     grid-auto-rows: min-content;
  18     grid-auto-columns: max-content;
  19 }
  20
  21 .gridAutoFixedFixedWithFixedFixed {
  22     grid-auto-rows: 30px;
  23     grid-auto-columns: 40px;
  24     grid-template-rows: 15px;
  25     grid-template-columns: 20px;
  26 }
  27
  28 </style>
  29 <script src="../../resources/js-test.js"></script>
  30 <script src="resources/grid-definitions-parsing-utils.js"></script>
  31 </head>
  32 <body>
  33 <div class="grid gridAutoFixedFixed" id="gridAutoFixedFixed"></div>
  34 <div class="grid gridAutoMinMax" id="gridAutoMinMax"></div>
  35 <div class="grid gridAutoMinMaxContent" id="gridAutoMinMaxContent"></div>
  36 <div class="grid gridAutoFixedFixed" id="gridAutoFixedFixedWithChildren">
  37     <div class="sizedToGridArea firstRowFirstColumn"></div>
  38 </div>
  39 <div class="grid gridAutoFixedFixedWithFixedFixed" id="gridAutoFixedFixedWithFixedFixedWithChildren">
  40     <div class="sizedToGridArea thirdRowAutoColumn"></div>
  41     <div class="sizedToGridArea autoRowThirdColumn"></div>
  42 </div>
  43 <script>
  44 description('Test that setting and getting grid-auto-columns and grid-auto-rows works as expected');
  45
  46 debug("Test getting grid-auto-columns and grid-auto-rows set through CSS");
  47 testGridAutoDefinitionsValues(document.getElementById("gridAutoFixedFixed"), "30px", "50px");
  48 testGridAutoDefinitionsValues(document.getElementById("gridAutoMinMax"), "minmax(10%, 15px)", "minmax(30%, 100px)");
  49 testGridAutoDefinitionsValues(document.getElementById("gridAutoMinMaxContent"), "min-content", "max-content");
  50
  51 debug("");
  52 debug("Test that getting grid-template-columns and grid-template-rows set through CSS lists every track listed whether implicitly or explicitly created");
  53 testGridAutoDefinitionsValues(document.getElementById("gridAutoFixedFixedWithChildren"), "30px", "50px");
  54 testGridDefinitionsValues(document.getElementById("gridAutoFixedFixedWithChildren"), "50px", "30px");
  55 testGridAutoDefinitionsValues(document.getElementById("gridAutoFixedFixedWithFixedFixedWithChildren"), "30px", "40px");
  56 testGridDefinitionsValues(document.getElementById("gridAutoFixedFixedWithFixedFixedWithChildren"), "20px", "15px", "20px 40px 40px", "15px 30px 30px");
  57
  58 debug("");
  59 debug("Test that grid-template-* definitions are not affected by grid-auto-* definitions");
  60 testGridDefinitionsValues(document.getElementById("gridAutoFixedFixed"), "none", "none");
  61 testGridDefinitionsValues(document.getElementById("gridAutoMinMax"), "none", "none");
  62 testGridDefinitionsValues(document.getElementById("gridAutoMinMaxContent"), "none", "none");
  63
  64 debug("");
  65 debug("Test the initial value");
  66 var element = document.createElement("div");
  67 document.body.appendChild(element);
  68 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-columns')", "'auto'");
  69 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-rows')", "'auto'");
  70
  71 debug("");
  72 debug("Test getting and setting grid-auto-columns and grid-auto-rows through JS");
  73 element.style.font = "10px Ahem";
  74 element.style.gridAutoColumns = "18em";
  75 element.style.gridAutoRows = "66em";
  76 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-columns')", "'180px'");
  77 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-rows')", "'660px'");
  78
  79 element = document.createElement("div");
  80 document.body.appendChild(element);
  81 element.style.gridAutoColumns = "minmax(min-content, 8vh)";
  82 element.style.gridAutoRows = "minmax(10vw, min-content)";
  83 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-columns')", "'minmax(min-content, 48px)'");
  84 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-rows')", "'minmax(80px, min-content)'");
  85
  86 element = document.createElement("div");
  87 document.body.appendChild(element);
  88 element.style.gridAutoColumns = "minmax(min-content, max-content)";
  89 element.style.gridAutoRows = "minmax(max-content, min-content)";
  90 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-columns')", "'minmax(min-content, max-content)'");
  91 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-rows')", "'minmax(max-content, min-content)'");
  92
  93 debug("");
  94 debug("Test setting grid-auto-columns and grid-auto-rows to bad minmax value through JS");
  95 element = document.createElement("div");
  96 document.body.appendChild(element);
  97 // No comma.
  98 element.style.gridAutoColumns = "minmax(10px 20px)";
  99 // Only 1 argument provided.
 100 element.style.gridAutoRows = "minmax(10px)";
 101 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-columns')", "'auto'");
 102 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-rows')", "'auto'");
 103
 104 element = document.createElement("div");
 105 document.body.appendChild(element);
 106 // Nested minmax.
 107 element.style.gridAutoColumns = "minmax(minmax(10px, 20px), 20px)";
 108 // Only 2 arguments are allowed.
 109 element.style.gridAutoRows = "minmax(10px, 20px, 30px)";
 110 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-columns')", "'auto'");
 111 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-rows')", "'auto'");
 112
 113 element = document.createElement("div");
 114 document.body.appendChild(element);
 115 // No breadth value.
 116 element.style.gridAutoColumns = "minmax()";
 117 // No comma.
 118 element.style.gridAutoRows = "minmax(30px 30% 30em)";
 119 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-columns')", "'auto'");
 120 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-rows')", "'auto'");
 121
 122 element = document.createElement("div");
 123 document.body.appendChild(element);
 124 // Auto is not allowed inside minmax.
 125 element.style.gridAutoColumns = "minmax(auto, 8vh)";
 126 element.style.gridAutoRows = "minmax(10vw, auto)";
 127 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-columns')", "'auto'");
 128 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-rows')", "'auto'");
 129
 130 element = document.createElement("div");
 131 document.body.appendChild(element);
 132 // None is not allowed for grid-auto-{rows|columns}.
 133 element.style.gridAutoColumns = "none";
 134 element.style.gridAutoRows = "none";
 135 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-columns')", "'auto'");
 136 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-rows')", "'auto'");
 137
 138 function testInherit()
 139 {
 140     var parentElement = document.createElement("div");
 141     document.body.appendChild(parentElement);
 142     parentElement.style.gridAutoColumns = "50px";
 143     parentElement.style.gridAutoRows = "101%";
 144
 145     element = document.createElement("div");
 146     parentElement.appendChild(element);
 147     element.style.gridAutoColumns = "inherit";
 148     element.style.gridAutoRows = "inherit";
 149     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-columns')", "'50px'");
 150     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-rows')", "'101%'");
 151
 152     document.body.removeChild(parentElement);
 153 }
 154 debug("");
 155 debug("Test setting grid-auto-columns and grid-auto-rows to 'inherit' through JS");
 156 testInherit();
 157
 158 function testInitial()
 159 {
 160     element = document.createElement("div");
 161     document.body.appendChild(element);
 162     element.style.gridAutoColumns = "150%";
 163     element.style.gridAutoRows = "1fr";
 164     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-columns')", "'150%'");
 165     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-rows')", "'1fr'");
 166
 167     element.style.gridAutoColumns = "initial";
 168     element.style.gridAutoRows = "initial";
 169     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-columns')", "'auto'");
 170     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-rows')", "'auto'");
 171
 172     document.body.removeChild(element);
 173 }
 174 debug("");
 175 debug("Test setting grid-auto-columns and grid-auto-rows to 'initial' through JS");
 176 testInitial();
 177 </script>
 178 </body>
 179 </html>