blob: 5e088fedb6c04ed7013fd6c057380360b53b4b09 [file] [log] [blame]
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<script>
if (window.testRunner)
testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
</script>
<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: -webkit-min-content;
grid-auto-columns: -webkit-max-content;
}
</style>
<script src="../js/resources/js-test-pre.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>
<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");
var gridAutoFixedFixed = document.getElementById("gridAutoFixedFixed");
shouldBe("getComputedStyle(gridAutoFixedFixed, '').getPropertyValue('grid-auto-rows')", "'30px'");
shouldBe("getComputedStyle(gridAutoFixedFixed, '').getPropertyValue('grid-auto-columns')", "'50px'");
var gridAutoMinMax = document.getElementById("gridAutoMinMax");
shouldBe("getComputedStyle(gridAutoMinMax, '').getPropertyValue('grid-auto-rows')", "'minmax(10%, 15px)'");
shouldBe("getComputedStyle(gridAutoMinMax, '').getPropertyValue('grid-auto-columns')", "'minmax(30%, 100px)'");
var gridAutoMinMaxContent = document.getElementById("gridAutoMinMaxContent");
shouldBe("getComputedStyle(gridAutoMinMaxContent, '').getPropertyValue('grid-auto-rows')", "'-webkit-min-content'");
shouldBe("getComputedStyle(gridAutoMinMaxContent, '').getPropertyValue('grid-auto-columns')", "'-webkit-max-content'");
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'");
debug("");
debug("Test getting and setting grid-auto-columns and grid-auto-rows through JS");
element.style.font = "10px Ahem";
element.style.gridAutoColumns = "18em";
element.style.gridAutoRows = "66em";
shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-columns')", "'180px'");
shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-rows')", "'660px'");
element = document.createElement("div");
document.body.appendChild(element);
element.style.gridAutoColumns = "minmax(-webkit-min-content, 8vh)";
element.style.gridAutoRows = "minmax(10vw, -webkit-min-content)";
shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-columns')", "'minmax(-webkit-min-content, 48px)'");
shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-rows')", "'minmax(80px, -webkit-min-content)'");
element = document.createElement("div");
document.body.appendChild(element);
element.style.gridAutoColumns = "minmax(-webkit-min-content, -webkit-max-content)";
element.style.gridAutoRows = "minmax(-webkit-max-content, -webkit-min-content)";
shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-columns')", "'minmax(-webkit-min-content, -webkit-max-content)'");
shouldBe("getComputedStyle(element, '').getPropertyValue('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.gridAutoColumns = "minmax(10px 20px)";
// Only 1 argument provided.
element.style.gridAutoRows = "minmax(10px)";
shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-columns')", "'auto'");
shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-rows')", "'auto'");
element = document.createElement("div");
document.body.appendChild(element);
// Nested minmax.
element.style.gridAutoColumns = "minmax(minmax(10px, 20px), 20px)";
// Only 2 arguments are allowed.
element.style.gridAutoRows = "minmax(10px, 20px, 30px)";
shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-columns')", "'auto'");
shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-rows')", "'auto'");
element = document.createElement("div");
document.body.appendChild(element);
// No breadth value.
element.style.gridAutoColumns = "minmax()";
// No comma.
element.style.gridAutoRows = "minmax(30px 30% 30em)";
shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-columns')", "'auto'");
shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-rows')", "'auto'");
element = document.createElement("div");
document.body.appendChild(element);
// Auto is not allowed inside minmax.
element.style.gridAutoColumns = "minmax(auto, 8vh)";
element.style.gridAutoRows = "minmax(10vw, auto)";
shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-columns')", "'auto'");
shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-rows')", "'auto'");
element = document.createElement("div");
document.body.appendChild(element);
// None is not allowed for grid-auto-{rows|columns}.
element.style.gridAutoColumns = "none";
element.style.gridAutoRows = "none";
shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-columns')", "'auto'");
shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-rows')", "'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="../js/resources/js-test-post.js"></script>
</body>
</html>