| <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> |
| <html> |
| <head> |
| <link href="resources/grid.css" rel="stylesheet"> |
| <style> |
| .gridAutoFixedFixed { |
| -webkit-grid-auto-rows: 30px; |
| -webkit-grid-auto-columns: 50px; |
| } |
| |
| .gridAutoMinMax { |
| -webkit-grid-auto-rows: minmax(10%, 15px); |
| -webkit-grid-auto-columns: minmax(30%, 100px); |
| } |
| |
| .gridAutoMinMaxContent { |
| -webkit-grid-auto-rows: -webkit-min-content; |
| -webkit-grid-auto-columns: -webkit-max-content; |
| } |
| |
| |
| .gridAutoFixedFixedWithFixedFixed { |
| -webkit-grid-auto-rows: 30px; |
| -webkit-grid-auto-columns: 40px; |
| -webkit-grid-template-rows: 15px; |
| -webkit-grid-template-columns: 20px; |
| } |
| |
| </style> |
| <script src="../../resources/js-test-pre.js"></script> |
| <script src="resources/grid-definitions-parsing-utils.js"></script> |
| </head> |
| <body> |
| <div class="grid gridAutoFixedFixed" id="gridAutoFixedFixed"></div> |
| <div class="grid gridAutoMinMax" id="gridAutoMinMax"></div> |
| <div class="grid gridAutoMinMaxContent" id="gridAutoMinMaxContent"></div> |
| <div class="grid gridAutoFixedFixed" id="gridAutoFixedFixedWithChildren"> |
| <div class="sizedToGridArea firstRowFirstColumn"></div> |
| </div> |
| <div class="grid gridAutoFixedFixedWithFixedFixed" id="gridAutoFixedFixedWithFixedFixedWithChildren"> |
| <div class="sizedToGridArea thirdRowAutoColumn"></div> |
| <div class="sizedToGridArea autoRowThirdColumn"></div> |
| </div> |
| <script> |
| description('Test that setting and getting grid-auto-columns and grid-auto-rows works as expected'); |
| |
| debug("Test getting -webkit-grid-auto-columns and -webkit-grid-auto-rows set through CSS"); |
| testGridAutoDefinitionsValues(document.getElementById("gridAutoFixedFixed"), "30px", "50px"); |
| testGridAutoDefinitionsValues(document.getElementById("gridAutoMinMax"), "minmax(10%, 15px)", "minmax(30%, 100px)"); |
| testGridAutoDefinitionsValues(document.getElementById("gridAutoMinMaxContent"), "-webkit-min-content", "-webkit-max-content"); |
| |
| debug(""); |
| debug("Test that getting grid-template-columns and grid-template-rows set through CSS lists every track listed whether implicitly or explicitly created"); |
| testGridAutoDefinitionsValues(document.getElementById("gridAutoFixedFixedWithChildren"), "30px", "50px"); |
| testGridTemplatesValues(document.getElementById("gridAutoFixedFixedWithChildren"), "50px", "30px"); |
| testGridAutoDefinitionsValues(document.getElementById("gridAutoFixedFixedWithFixedFixedWithChildren"), "30px", "40px"); |
| testGridTemplatesValues(document.getElementById("gridAutoFixedFixedWithFixedFixedWithChildren"), "20px", "15px", "20px 40px 40px", "15px 30px 30px"); |
| |
| debug(""); |
| debug("Test that grid-template-* definitions are not affected by grid-auto-* definitions"); |
| testGridTemplatesValues(document.getElementById("gridAutoFixedFixed"), "none", "none"); |
| testGridTemplatesValues(document.getElementById("gridAutoMinMax"), "none", "none"); |
| testGridTemplatesValues(document.getElementById("gridAutoMinMaxContent"), "none", "none"); |
| |
| debug(""); |
| debug("Test the initial value"); |
| var element = document.createElement("div"); |
| document.body.appendChild(element); |
| shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-columns')", "'auto'"); |
| shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-rows')", "'auto'"); |
| |
| debug(""); |
| debug("Test getting and setting -webkit-grid-auto-columns and -webkit-grid-auto-rows through JS"); |
| element.style.font = "10px Ahem"; |
| element.style.webkitGridAutoColumns = "18em"; |
| element.style.webkitGridAutoRows = "66em"; |
| shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-columns')", "'180px'"); |
| shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-rows')", "'660px'"); |
| |
| element = document.createElement("div"); |
| document.body.appendChild(element); |
| element.style.webkitGridAutoColumns = "minmax(-webkit-min-content, 8vh)"; |
| element.style.webkitGridAutoRows = "minmax(10vw, -webkit-min-content)"; |
| shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-columns')", "'minmax(-webkit-min-content, 48px)'"); |
| shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-rows')", "'minmax(80px, -webkit-min-content)'"); |
| |
| element = document.createElement("div"); |
| document.body.appendChild(element); |
| element.style.webkitGridAutoColumns = "minmax(-webkit-min-content, -webkit-max-content)"; |
| element.style.webkitGridAutoRows = "minmax(-webkit-max-content, -webkit-min-content)"; |
| shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-columns')", "'minmax(-webkit-min-content, -webkit-max-content)'"); |
| shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-rows')", "'minmax(-webkit-max-content, -webkit-min-content)'"); |
| |
| debug(""); |
| debug("Test setting grid-auto-columns and grid-auto-rows to bad minmax value through JS"); |
| element = document.createElement("div"); |
| document.body.appendChild(element); |
| // No comma. |
| element.style.webkitGridAutoColumns = "minmax(10px 20px)"; |
| // Only 1 argument provided. |
| element.style.webkitGridAutoRows = "minmax(10px)"; |
| shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-columns')", "'auto'"); |
| shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-rows')", "'auto'"); |
| |
| element = document.createElement("div"); |
| document.body.appendChild(element); |
| // Nested minmax. |
| element.style.webkitGridAutoColumns = "minmax(minmax(10px, 20px), 20px)"; |
| // Only 2 arguments are allowed. |
| element.style.webkitGridAutoRows = "minmax(10px, 20px, 30px)"; |
| shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-columns')", "'auto'"); |
| shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-rows')", "'auto'"); |
| |
| element = document.createElement("div"); |
| document.body.appendChild(element); |
| // No breadth value. |
| element.style.webkitGridAutoColumns = "minmax()"; |
| // No comma. |
| element.style.webkitGridAutoRows = "minmax(30px 30% 30em)"; |
| shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-columns')", "'auto'"); |
| shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-rows')", "'auto'"); |
| |
| element = document.createElement("div"); |
| document.body.appendChild(element); |
| // Auto is not allowed inside minmax. |
| element.style.webkitGridAutoColumns = "minmax(auto, 8vh)"; |
| element.style.webkitGridAutoRows = "minmax(10vw, auto)"; |
| shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-columns')", "'auto'"); |
| shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-rows')", "'auto'"); |
| |
| element = document.createElement("div"); |
| document.body.appendChild(element); |
| // None is not allowed for grid-auto-{rows|columns}. |
| element.style.webkitGridAutoColumns = "none"; |
| element.style.webkitGridAutoRows = "none"; |
| shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-columns')", "'auto'"); |
| shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-rows')", "'auto'"); |
| |
| function testInherit() |
| { |
| var parentElement = document.createElement("div"); |
| document.body.appendChild(parentElement); |
| parentElement.style.webkitGridAutoColumns = "50px"; |
| parentElement.style.webkitGridAutoRows = "101%"; |
| |
| element = document.createElement("div"); |
| parentElement.appendChild(element); |
| element.style.webkitGridAutoColumns = "inherit"; |
| element.style.webkitGridAutoRows = "inherit"; |
| shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-columns')", "'50px'"); |
| shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-rows')", "'101%'"); |
| |
| document.body.removeChild(parentElement); |
| } |
| debug(""); |
| debug("Test setting grid-auto-columns and grid-auto-rows to 'inherit' through JS"); |
| testInherit(); |
| |
| function testInitial() |
| { |
| element = document.createElement("div"); |
| document.body.appendChild(element); |
| element.style.webkitGridAutoColumns = "150%"; |
| element.style.webkitGridAutoRows = "1fr"; |
| shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-columns')", "'150%'"); |
| shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-rows')", "'1fr'"); |
| |
| element.style.webkitGridAutoColumns = "initial"; |
| element.style.webkitGridAutoRows = "initial"; |
| shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-columns')", "'auto'"); |
| shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-rows')", "'auto'"); |
| |
| document.body.removeChild(element); |
| } |
| debug(""); |
| debug("Test setting grid-auto-columns and grid-auto-rows to 'initial' through JS"); |
| testInitial(); |
| </script> |
| <script src="../../resources/js-test-post.js"></script> |
| </body> |
| </html> |
