blob: f63b9f60017f004f61d4d4aea17741c8ceff8be4 [file] [log] [blame]
<!DOCTYPE HTML>
<html>
<head>
<script>
if (window.testRunner)
testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
</script>
<link href="resources/grid.css" rel="stylesheet">
<style>
.gridWithFixed {
grid-columns: "first" 10px;
grid-rows: "first" 15px;
}
.gridWithPercent {
grid-columns: 53% "last";
grid-rows: 27% "last";
}
.gridWithAuto {
grid-columns: "first" auto;
grid-rows: auto "last";
}
.gridWithMinMax {
grid-columns: "first" minmax(10%, 15px);
grid-rows: minmax(20px, 50%) "last";
}
.gridWithFixedMultiple {
grid-columns: "first" "nav" 10px "last";
grid-rows: "first" "nav" 15px "last";
}
.gridWithPercentageSameStringMultipleTimes {
grid-columns: "first" "nav" 10% "nav" 15% "last";
grid-rows: "first" "nav2" 25% "nav2" 75% "last";
}
</style>
<script src="../js/resources/js-test-pre.js"></script>
</head>
<body>
<div class="grid gridWithFixed" id="gridWithFixedElement"></div>
<div class="grid gridWithPercent" id="gridWithPercentElement"></div>
<div class="grid gridWithAuto" id="gridWithAutoElement"></div>
<div class="grid gridWithMinMax" id="gridWithMinMax"></div>
<div class="grid gridWithFixedMultiple" id="gridWithFixedMultiple"></div>
<div class="grid gridWithPercentageSameStringMultipleTimes" id="gridWithPercentageSameStringMultipleTimes"></div>
<script>
description('Test that setting and getting grid-columns and grid-rows works as expected');
function testValue(gridElement, namedGridColumns, namedGridRows)
{
this.gridElement = gridElement;
shouldBeEqualToString("getComputedStyle(gridElement, '').getPropertyValue('grid-columns')", namedGridColumns);
shouldBeEqualToString("getComputedStyle(gridElement, '').getPropertyValue('grid-rows')", namedGridRows);
}
function testCSSValue(gridElementId, namedGridColumns, namedGridRows)
{
testValue(document.getElementById(gridElementId), namedGridColumns, namedGridRows);
}
debug("Test getting grid-columns and grid-rows set through CSS");
testCSSValue("gridWithFixedElement", "first 10px", "first 15px");
testCSSValue("gridWithPercentElement", "53% last", "27% last");
testCSSValue("gridWithAutoElement", "first auto", "auto last");
testCSSValue("gridWithMinMax", "first minmax(10%, 15px)", "minmax(20px, 50%) last");
testCSSValue("gridWithFixedMultiple", "nav first 10px last", "nav first 15px last");
testCSSValue("gridWithPercentageSameStringMultipleTimes", "nav first 10% nav 15% last", "first nav2 25% nav2 75% last");
debug("");
debug("Test getting and setting grid-columns and grid-rows through JS");
var element = document.createElement("div");
document.body.appendChild(element);
element.style.gridColumns = "'first' 18px";
element.style.gridRows = "66px 'last'";
testValue(element, "first 18px", "66px last");
element = document.createElement("div");
document.body.appendChild(element);
element.style.gridColumns = "'first' 55%";
element.style.gridRows = "40% 'last'";
testValue(element, "first 55%", "40% last");
element = document.createElement("div");
document.body.appendChild(element);
element.style.gridColumns = "'first' auto";
element.style.gridRows = "auto 'last'";
testValue(element, "first auto", "auto last");
element = document.createElement("div");
document.body.appendChild(element);
element.style.gridColumns = "'first' -webkit-min-content";
element.style.gridRows = "-webkit-min-content 'last'";
testValue(element, "first -webkit-min-content", "-webkit-min-content last");
element = document.createElement("div");
document.body.appendChild(element);
element.style.gridColumns = "'first' -webkit-max-content";
element.style.gridRows = "-webkit-max-content 'last'";
testValue(element, "first -webkit-max-content", "-webkit-max-content last");
element = document.createElement("div");
document.body.appendChild(element);
element.style.gridColumns = "'first' minmax(55%, 45px)";
element.style.gridRows = "minmax(30px, 40%) 'last'";
testValue(element, "first minmax(55%, 45px)", "minmax(30px, 40%) last");
element = document.createElement("div");
document.body.appendChild(element);
element.style.font = "10px Ahem";
element.style.gridColumns = "'first' minmax(22em, -webkit-max-content)";
element.style.gridRows = "minmax(-webkit-max-content, 5em) 'last'";
testValue(element, "first minmax(220px, -webkit-max-content)", "minmax(-webkit-max-content, 50px) last");
element = document.createElement("div");
document.body.appendChild(element);
element.style.font = "10px Ahem";
element.style.gridColumns = "'first' minmax(22em, -webkit-max-content)";
element.style.gridRows = "minmax(-webkit-max-content, 5em) 'last'";
testValue(element, "first minmax(220px, -webkit-max-content)", "minmax(-webkit-max-content, 50px) last");
element = document.createElement("div");
document.body.appendChild(element);
element.style.gridColumns = "'first' minmax(-webkit-min-content, -webkit-max-content)";
element.style.gridRows = "minmax(-webkit-max-content, -webkit-min-content) 'last'";
testValue(element, "first minmax(-webkit-min-content, -webkit-max-content)", "minmax(-webkit-max-content, -webkit-min-content) last");
element = document.createElement("div");
document.body.appendChild(element);
element.style.gridColumns = "'first' 'nav' minmax(-webkit-min-content, -webkit-max-content) 'last'";
element.style.gridRows = "'first' 'nav' minmax(-webkit-max-content, -webkit-min-content) 'last'";
testValue(element, "nav first minmax(-webkit-min-content, -webkit-max-content) last", "nav first minmax(-webkit-max-content, -webkit-min-content) last");
element = document.createElement("div");
document.body.appendChild(element);
element.style.gridColumns = "'first' 'nav' minmax(-webkit-min-content, -webkit-max-content) 'nav' auto 'last'";
element.style.gridRows = "'first' 'nav2' minmax(-webkit-max-content, -webkit-min-content) 'nav2' minmax(10px, 15px) 'last'";
testValue(element, "nav first minmax(-webkit-min-content, -webkit-max-content) nav auto last", "first nav2 minmax(-webkit-max-content, -webkit-min-content) nav2 minmax(10px, 15px) last");
element = document.createElement("div");
document.body.appendChild(element);
element.style.gridColumns = "'foo' 'bar' auto 'foo' auto 'bar'";
element.style.gridRows = "'foo' 'bar' auto 'foo' auto 'bar'";
testValue(element, "foo bar auto foo auto bar", "foo bar auto foo auto bar");
debug("");
debug("Test getting and setting invalid grid-columns and grid-rows through JS");
element = document.createElement("div");
document.body.appendChild(element);
element.style.gridColumns = "'foo'";
element.style.gridRows = "'bar";
testValue(element, "none", "none");
</script>
<script src="../js/resources/js-test-post.js"></script>
</body>
</html>