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