LayoutTests/fast/css-grid-layout/grid-auto-columns-rows-get-set.html - WebKit - Git at Google

 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
 <html>
 <head>
 <link href="resources/grid.css" rel="stylesheet">
 <style>
 .gridAutoFixedFixed {
     grid-auto-rows: 30px;
     grid-auto-columns: 50px;
 }

 .gridAutoMinMax {
     grid-auto-rows: minmax(10%, 15px);
     grid-auto-columns: minmax(30%, 100px);
 }

 .gridAutoMinMaxContent {
     grid-auto-rows: min-content;
     grid-auto-columns: max-content;
 }


 .gridAutoFixedFixedWithFixedFixed {
     grid-auto-rows: 30px;
     grid-auto-columns: 40px;
     grid-template-rows: 15px;
     grid-template-columns: 20px;
 }

 .gridAutoAutoInMinMax {
     grid-auto-rows: minmax(auto, 8vh);
     grid-auto-columns: minmax(10vw, auto);
 }

 .gridAutoMultipleTracks {
     width: 100px;
     height: 50px;
     grid-auto-rows: 10px 20px 30px;
     grid-auto-columns: 25px 50px 100px;
 }

 .gridAutoFitContent {
     height: 50px;
     grid-auto-columns: fit-content(30px);
     grid-auto-rows: fit-content(50%);
 }

 </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 gridAutoAutoInMinMax" id="gridAutoAutoInMinMax"></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>
 <div class="grid gridAutoMultipleTracks" id="gridAutoMultipleTracks">
     <div style="grid-column: 1; grid-row: 1"></div>
     <div style="grid-column: 2; grid-row: 2"></div>
     <div style="grid-column: 3; grid-row: 3"></div>
     <div style="grid-column: 4; grid-row: 4"></div>
 </div>
 <div class="grid gridAutoMultipleTracks" id="gridAutoMultipleTracksNegativeIndexes">
     <div style="grid-column: -2; grid-row: -2"></div>
     <div style="grid-column: -3; grid-row: -3"></div>
     <div style="grid-column: -4; grid-row: -4"></div>
     <div style="grid-column: -5; grid-row: -5"></div>
 </div>
 <div class="grid gridAutoFitContent" id="gridAutoFitContent"></div>

 <script>
 description('Test that setting and getting grid-auto-columns and grid-auto-rows works as expected');

 debug("Test getting grid-auto-columns and 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"), "min-content", "max-content");
 testGridAutoDefinitionsValues(document.getElementById("gridAutoAutoInMinMax"), "minmax(auto, 48px)", "minmax(80px, auto)");
 testGridAutoDefinitionsValues(document.getElementById("gridAutoFitContent"), "fit-content(50%)", "fit-content(30px)");

 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");
 testGridTemplatesValues(document.getElementById("gridAutoMultipleTracks"), "25px 50px 100px 25px", "10px 20px 30px 10px");
 testGridTemplatesValues(document.getElementById("gridAutoMultipleTracksNegativeIndexes"), "100px 25px 50px 100px", "30px 10px 20px 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('grid-auto-columns')", "'auto'");
 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-rows')", "'auto'");

 function testAutoValues(autoCols, autoRows, computedAutoCols, computedAutoRows) {
      element = document.createElement("div");
      document.body.appendChild(element);
      element.style.fontSize = "10px";
      element.style.gridAutoColumns = autoCols;
      element.style.gridAutoRows = autoRows;
      shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid-auto-columns')", computedAutoCols || autoCols);
      shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid-auto-rows')", computedAutoRows || autoRows);
 }

 debug("");
 debug("Test getting and setting grid-auto-columns and grid-auto-rows through JS");
 testAutoValues("18em", "66em", "180px", "660px");
 testAutoValues("minmax(min-content, 8vh)", "minmax(10vw, min-content)", "minmax(min-content, 48px)", "minmax(80px, min-content)");
 testAutoValues("minmax(min-content, max-content)", "minmax(max-content, min-content)");
 testAutoValues("minmax(min-content, 10px) 48px 5%", "auto 30px minmax(10%, 60%)");
 testAutoValues("fit-content(10px) fit-content(30%)", "fit-content(5%) fit-content(calc(20px + 2em))", "fit-content(10px) fit-content(30%)", "fit-content(5%) fit-content(40px)");
 testAutoValues("minmax(auto, 2fr)", "minmax(auto, 1fr)", "2fr", "1fr");

 debug("");
 debug("Test setting grid-auto-columns and grid-auto-rows to bad minmax value through JS");
 testAutoValues("minmax(10px 20px)", "minmax(10px)", "auto", "auto");
 testAutoValues("minmax(minmax(10px, 20px), 20px)", "minmax(10px, 20px, 30px)", "auto", "auto");
 testAutoValues("minmax()", "minmax(30px 30% 30em)", "auto", "auto");
 testAutoValues("none", "none", "auto", "auto");
 testAutoValues("10px [a] 20px", "[z] auto [y] min-content", "auto", "auto");
 testAutoValues("repeat(2, 10px [a] 20px)", "[z] repeat(auto-fit, 100px)", "auto", "auto");
 testAutoValues("fit-content(min-content) fit-content(auto)", "fit-content(fit-content(3%)) fit-content(minmax(2px, 30px))", "auto", "auto");

 function testInherit()
 {
     var parentElement = document.createElement("div");
     document.body.appendChild(parentElement);
     parentElement.style.gridAutoColumns = "50px";
     parentElement.style.gridAutoRows = "101%";

     element = document.createElement("div");
     parentElement.appendChild(element);
     element.style.gridAutoColumns = "inherit";
     element.style.gridAutoRows = "inherit";
     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-columns')", "'50px'");
     shouldBe("getComputedStyle(element, '').getPropertyValue('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.gridAutoColumns = "150%";
     element.style.gridAutoRows = "1fr";
     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-columns')", "'150%'");
     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-rows')", "'1fr'");

     element.style.gridAutoColumns = "initial";
     element.style.gridAutoRows = "initial";
     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-columns')", "'auto'");
     shouldBe("getComputedStyle(element, '').getPropertyValue('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>
	<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
	<html>
	<head>
	<link href="resources/grid.css" rel="stylesheet">
	<style>
	.gridAutoFixedFixed {
	grid-auto-rows: 30px;
	grid-auto-columns: 50px;
	}

	.gridAutoMinMax {
	grid-auto-rows: minmax(10%, 15px);
	grid-auto-columns: minmax(30%, 100px);
	}

	.gridAutoMinMaxContent {
	grid-auto-rows: min-content;
	grid-auto-columns: max-content;
	}


	.gridAutoFixedFixedWithFixedFixed {
	grid-auto-rows: 30px;
	grid-auto-columns: 40px;
	grid-template-rows: 15px;
	grid-template-columns: 20px;
	}

	.gridAutoAutoInMinMax {
	grid-auto-rows: minmax(auto, 8vh);
	grid-auto-columns: minmax(10vw, auto);
	}

	.gridAutoMultipleTracks {
	width: 100px;
	height: 50px;
	grid-auto-rows: 10px 20px 30px;
	grid-auto-columns: 25px 50px 100px;
	}

	.gridAutoFitContent {
	height: 50px;
	grid-auto-columns: fit-content(30px);
	grid-auto-rows: fit-content(50%);
	}

	</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 gridAutoAutoInMinMax" id="gridAutoAutoInMinMax"></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>
	<div class="grid gridAutoMultipleTracks" id="gridAutoMultipleTracks">
	<div style="grid-column: 1; grid-row: 1"></div>
	<div style="grid-column: 2; grid-row: 2"></div>
	<div style="grid-column: 3; grid-row: 3"></div>
	<div style="grid-column: 4; grid-row: 4"></div>
	</div>
	<div class="grid gridAutoMultipleTracks" id="gridAutoMultipleTracksNegativeIndexes">
	<div style="grid-column: -2; grid-row: -2"></div>
	<div style="grid-column: -3; grid-row: -3"></div>
	<div style="grid-column: -4; grid-row: -4"></div>
	<div style="grid-column: -5; grid-row: -5"></div>
	</div>
	<div class="grid gridAutoFitContent" id="gridAutoFitContent"></div>

	<script>
	description('Test that setting and getting grid-auto-columns and grid-auto-rows works as expected');

	debug("Test getting grid-auto-columns and 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"), "min-content", "max-content");
	testGridAutoDefinitionsValues(document.getElementById("gridAutoAutoInMinMax"), "minmax(auto, 48px)", "minmax(80px, auto)");
	testGridAutoDefinitionsValues(document.getElementById("gridAutoFitContent"), "fit-content(50%)", "fit-content(30px)");

	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");
	testGridTemplatesValues(document.getElementById("gridAutoMultipleTracks"), "25px 50px 100px 25px", "10px 20px 30px 10px");
	testGridTemplatesValues(document.getElementById("gridAutoMultipleTracksNegativeIndexes"), "100px 25px 50px 100px", "30px 10px 20px 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('grid-auto-columns')", "'auto'");
	shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-rows')", "'auto'");

	function testAutoValues(autoCols, autoRows, computedAutoCols, computedAutoRows) {
	element = document.createElement("div");
	document.body.appendChild(element);
	element.style.fontSize = "10px";
	element.style.gridAutoColumns = autoCols;
	element.style.gridAutoRows = autoRows;
	shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid-auto-columns')", computedAutoCols \|\| autoCols);
	shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid-auto-rows')", computedAutoRows \|\| autoRows);
	}

	debug("");
	debug("Test getting and setting grid-auto-columns and grid-auto-rows through JS");
	testAutoValues("18em", "66em", "180px", "660px");
	testAutoValues("minmax(min-content, 8vh)", "minmax(10vw, min-content)", "minmax(min-content, 48px)", "minmax(80px, min-content)");
	testAutoValues("minmax(min-content, max-content)", "minmax(max-content, min-content)");
	testAutoValues("minmax(min-content, 10px) 48px 5%", "auto 30px minmax(10%, 60%)");
	testAutoValues("fit-content(10px) fit-content(30%)", "fit-content(5%) fit-content(calc(20px + 2em))", "fit-content(10px) fit-content(30%)", "fit-content(5%) fit-content(40px)");
	testAutoValues("minmax(auto, 2fr)", "minmax(auto, 1fr)", "2fr", "1fr");

	debug("");
	debug("Test setting grid-auto-columns and grid-auto-rows to bad minmax value through JS");
	testAutoValues("minmax(10px 20px)", "minmax(10px)", "auto", "auto");
	testAutoValues("minmax(minmax(10px, 20px), 20px)", "minmax(10px, 20px, 30px)", "auto", "auto");
	testAutoValues("minmax()", "minmax(30px 30% 30em)", "auto", "auto");
	testAutoValues("none", "none", "auto", "auto");
	testAutoValues("10px [a] 20px", "[z] auto [y] min-content", "auto", "auto");
	testAutoValues("repeat(2, 10px [a] 20px)", "[z] repeat(auto-fit, 100px)", "auto", "auto");
	testAutoValues("fit-content(min-content) fit-content(auto)", "fit-content(fit-content(3%)) fit-content(minmax(2px, 30px))", "auto", "auto");

	function testInherit()
	{
	var parentElement = document.createElement("div");
	document.body.appendChild(parentElement);
	parentElement.style.gridAutoColumns = "50px";
	parentElement.style.gridAutoRows = "101%";

	element = document.createElement("div");
	parentElement.appendChild(element);
	element.style.gridAutoColumns = "inherit";
	element.style.gridAutoRows = "inherit";
	shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-columns')", "'50px'");
	shouldBe("getComputedStyle(element, '').getPropertyValue('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.gridAutoColumns = "150%";
	element.style.gridAutoRows = "1fr";
	shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-columns')", "'150%'");
	shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-rows')", "'1fr'");

	element.style.gridAutoColumns = "initial";
	element.style.gridAutoRows = "initial";
	shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-columns')", "'auto'");
	shouldBe("getComputedStyle(element, '').getPropertyValue('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>