Google Git
Sign in
webkit / WebKit / 6b7c45f751131450b1675ef5b4b89fb3a0e35aba / . / LayoutTests / fast / css-grid-layout / non-named-grid-line-get-set.html
blob: d15d4baa8c0f6941bdb0eb472be37562df60c0ab [file] [log] [blame]
<!DOCTYPE HTML>
<html>
<head>
<link href="resources/grid.css" rel="stylesheet">
<style>
.gridItem {
grid-column: 1;
grid-row: 1;
height: 22px;
width: 77px;
}
.gridWithFixed {
grid-template-columns: [first] 10px;
grid-template-rows: [first] 15px;
}
.gridWithPercent {
grid-template-columns: 53% [last];
grid-template-rows: 27% [last];
}
.gridWithAuto {
grid-template-columns: [first] auto;
grid-template-rows: auto [last];
}
.gridWithMinMax {
grid-template-columns: [first] minmax(10%, 15px);
grid-template-rows: minmax(20px, 50%) [last];
}
.gridWithFixedMultiple {
grid-template-columns: [first nav] 10px [last];
grid-template-rows: [first nav] 15px [last];
}
.gridWithPercentageSameStringMultipleTimes {
grid-template-columns: [first nav] 10% [nav] 15% [last];
grid-template-rows: [first nav2] 25% [nav2] 75% [last];
}
</style>
<script src="../../resources/js-test-pre.js"></script>
</head>
<body>
<div class="gridWithFixed" id="gridWithFixedElement"></div>
<div class="gridWithPercent" id="gridWithPercentElement"></div>
<div class="gridWithAuto" id="gridWithAutoElement"></div>
<div class="gridWithAuto" id="gridWithAutoWithChildrenElement">
<div class="gridItem"></div>
</div>
<div class="gridWithMinMax" id="gridWithMinMax"></div>
<div class="gridWithFixedMultiple" id="gridWithFixedMultiple"></div>
<div class="gridWithPercentageSameStringMultipleTimes" id="gridWithPercentageSameStringMultipleTimes"></div>
<script src="resources/grid-definitions-parsing-utils.js"></script>
<script>
description('Test that setting and getting grid-template-columns and grid-template-rows works as expected');
debug("Test getting grid-template-columns and grid-template-rows set through CSS");
testGridTemplatesValues(document.getElementById("gridWithFixedElement"), "[first] 10px", "[first] 15px");
testGridTemplatesValues(document.getElementById("gridWithPercentElement"), "53% [last]", "27% [last]");
testGridTemplatesValues(document.getElementById("gridWithAutoElement"), "[first] auto", "auto [last]");
testGridTemplatesValues(document.getElementById("gridWithMinMax"), "[first] minmax(10%, 15px)", "minmax(20px, 50%) [last]");
testGridTemplatesValues(document.getElementById("gridWithFixedMultiple"), "[first nav] 10px [last]", "[first nav] 15px [last]");
testGridTemplatesValues(document.getElementById("gridWithPercentageSameStringMultipleTimes"), "[first nav] 10% [nav] 15% [last]", "[first nav2] 25% [nav2] 75% [last]");
debug("");
debug("Test getting and setting grid-template-columns and grid-template-rows through JS");
testNonGridTemplatesSetJSValues("[first] 18px", "66px [last]", "[first] 18px", "66px [last]", "[first] 18px", "66px [last]");
testNonGridTemplatesSetJSValues("[first] 55%", "40% [last]", "[first] 55%", "40% [last]", "[first] 55%", "40% [last]");
testNonGridTemplatesSetJSValues("[first] auto", "auto [last]", "[first] auto", "auto [last]", "[first] auto", "auto [last]");
testNonGridTemplatesSetJSValues("[first] min-content", "min-content [last]", "[first] min-content", "min-content [last]", "[first] min-content", "min-content [last]");
testNonGridTemplatesSetJSValues("[first] max-content", "max-content [last]", "[first] max-content", "max-content [last]", "[first] max-content", "max-content [last]");
testNonGridTemplatesSetJSValues("[first] minmax(55%, 45px)", "minmax(30px, 40%) [last]", "[first] minmax(55%, 45px)", "minmax(30px, 40%) [last]", "[first] minmax(55%, 45px)", "minmax(30px, 40%) [last]");
testNonGridTemplatesSetJSValues("[first] minmax(22em, max-content)", "minmax(max-content, 5em) [last]", "[first] minmax(220px, max-content)", "minmax(max-content, 50px) [last]", "[first] minmax(22em, max-content)", "minmax(max-content, 5em) [last]", "[first] minmax(220px, max-content)", "minmax(max-content, 50px) [last]", "minmax(max-content, 50px) [last]");
testNonGridTemplatesSetJSValues("[first] minmax(22em, min-content)", "minmax(min-content, 5em) [last]", "[first] minmax(220px, min-content)", "minmax(min-content, 50px) [last]", "[first] minmax(22em, min-content)", "minmax(min-content, 5em) [last]", "[first] minmax(220px, min-content)", "minmax(min-content, 50px) [last]", "minmax(min-content, 50px) [last]");
testNonGridTemplatesSetJSValues("[first] minmax(min-content, max-content)", "minmax(max-content, min-content) [last]", "[first] minmax(min-content, max-content)", "minmax(max-content, min-content) [last]", "[first] minmax(min-content, max-content)", "minmax(max-content, min-content) [last]");
testNonGridTemplatesSetJSValues("[first nav] minmax(min-content, max-content) [last]", "[first nav] minmax(max-content, min-content) [last]", "[first nav] minmax(min-content, max-content) [last]", "[first nav] minmax(max-content, min-content) [last]", "[first nav] minmax(min-content, max-content) [last]", "[first nav] minmax(max-content, min-content) [last]");
testNonGridTemplatesSetJSValues("[first nav] minmax(min-content, max-content) [nav] auto [last]", "[first nav2] minmax(max-content, min-content) [nav2] minmax(10px, 15px) [last]", "[first nav] minmax(min-content, max-content) [nav] auto [last]", "[first nav2] minmax(max-content, min-content) [nav2] minmax(10px, 15px) [last]", "[first nav] minmax(min-content, max-content) [nav] auto [last]", "[first nav2] minmax(max-content, min-content) [nav2] minmax(10px, 15px) [last]");;
testNonGridTemplatesSetJSValues("[foo bar] auto [foo] auto [bar]", "[foo bar] auto [foo] auto [bar]", "[foo bar] auto [foo] auto [bar]", "[foo bar] auto [foo] auto [bar]", "[foo bar] auto [foo] auto [bar]", "[foo bar] auto [foo] auto [bar]");
debug("");
debug("Test getting and setting invalid grid-template-columns and grid-template-rows through JS");
element = document.createElement("div");
document.body.appendChild(element);
element.style.gridTemplateColumns = "[foo]";
element.style.gridTemplateRows = "[bar]";
shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid-template-columns')", "none");
shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid-template-rows')", "none");
element = document.createElement("div");
document.body.appendChild(element);
element.style.gridTemplateColumns = "[foo bar]";
element.style.gridTemplateRows = "(bar foo)";
shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid-template-columns')", "none");
shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid-template-rows')", "none");
</script>
<script src="../../resources/js-test-post.js"></script>
</body>
</html>