149 lines
6.5 KiB
HTML
149 lines
6.5 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
|
|
<html>
|
|
<head>
|
|
<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
|
|
<link href="resources/grid.css" rel="stylesheet">
|
|
<link href="resources/grid-alignment.css" rel="stylesheet">
|
|
<style>
|
|
.definite {
|
|
/* Give an explicit size to the grid so that percentage grid tracks have a consistent resolution */
|
|
width: 800px;
|
|
height: 600px;
|
|
}
|
|
.gridItem {
|
|
grid-column: 1;
|
|
grid-row: 1;
|
|
width: 33px;
|
|
height: 44px;
|
|
}
|
|
|
|
.gridItem2 {
|
|
grid-column: 2;
|
|
grid-row: 2;
|
|
width: 66px;
|
|
height: 77px;
|
|
}
|
|
|
|
.singleSingleTrackRepeat {
|
|
grid-template-rows: repeat(1, 18px);
|
|
grid-template-columns: repeat(1, 15%);
|
|
}
|
|
|
|
.twoSingleTrackRepeat {
|
|
grid-template-rows: repeat(2, auto);
|
|
grid-template-columns: repeat(2, minmax(15px, 50%));
|
|
}
|
|
|
|
.twoDoubleTrackRepeat {
|
|
grid-template-rows: repeat(2, minmax(5px, 10px) auto);
|
|
grid-template-columns: repeat(2, auto minmax(100px, 120px));
|
|
}
|
|
|
|
.twoDoubleTrackWithNamedGridLineRepeat {
|
|
grid-template-rows: repeat(2, 10px [start] auto [end]);
|
|
grid-template-columns: repeat(2, auto [middle] 250px [end]);
|
|
}
|
|
|
|
.twoDoubleTrackWithTrailingNamedGridLineRepeat {
|
|
grid-template-rows: repeat(2, [before] 10px);
|
|
grid-template-columns: repeat(2, [before] auto);
|
|
}
|
|
|
|
.trailingNamedGridLineRepeat {
|
|
grid-template-rows: repeat(1, 10px) [end];
|
|
grid-template-columns: repeat(1, 250px) [end];
|
|
}
|
|
|
|
.leadingNamedGridLineRepeat {
|
|
grid-template-rows: [start] repeat(2, 10px);
|
|
grid-template-columns: [start] repeat(2, 250px);
|
|
}
|
|
|
|
.mixRepeatAfterNonRepeat {
|
|
grid-template-rows: auto repeat(2, 10px);
|
|
grid-template-columns: [start] 140px repeat(2, 250px);
|
|
}
|
|
|
|
.mixNonRepeatAfterRepeat {
|
|
grid-template-rows: repeat(2, 10px) [end] auto;
|
|
grid-template-columns: repeat(2, 250px) 15% [last];
|
|
}
|
|
|
|
.multipleTrackRepeat {
|
|
grid-template-rows: repeat(3, min-content [a] max-content [b c] 20px [d]) [e] 1em;
|
|
grid-template-columns: [start] 20px repeat(2, [a] minmax(20px, min-content) max-content [b]) 200px [c] min-content [end];
|
|
}
|
|
|
|
</style>
|
|
<script src="../../resources/js-test-pre.js"></script>
|
|
</head>
|
|
<body>
|
|
<div class="grid definite singleSingleTrackRepeat" id="singleSingleTrackRepeatWithSize"></div>
|
|
<div class="grid min-content singleSingleTrackRepeat" id="singleSingleTrackRepeatWithoutSize"></div>
|
|
<div class="grid definite twoSingleTrackRepeat alignContentStart" id="twoSingleTrackRepeat"></div>
|
|
<div class="grid definite twoSingleTrackRepeat alignContentStart" id="twoSingleTrackRepeatWithChildren">
|
|
<div class="gridItem"></div>
|
|
<div class="gridItem2"></div>
|
|
</div>
|
|
<div class="grid definite twoDoubleTrackRepeat contentStart" id="twoDoubleTrackRepeat">
|
|
<div class="gridItem"></div>
|
|
<div class="gridItem2"></div>
|
|
</div>
|
|
<div class="grid definite twoDoubleTrackWithNamedGridLineRepeat contentStart" id="twoDoubleTrackWithNamedGridLineRepeat">
|
|
<div class="gridItem"></div>
|
|
<div class="gridItem2"></div>
|
|
</div>
|
|
<div class="grid definite twoDoubleTrackWithTrailingNamedGridLineRepeat justifyContentStart" id="twoDoubleTrackWithTrailingNamedGridLineRepeat"></div>
|
|
<div class="grid definite trailingNamedGridLineRepeat" id="trailingNamedGridLineRepeat"></div>
|
|
<div class="grid definite leadingNamedGridLineRepeat" id="leadingNamedGridLineRepeat"></div>
|
|
<div class="grid definite mixRepeatAfterNonRepeat alignContentStart" id="mixRepeatAfterNonRepeat">
|
|
<div class="gridItem"></div>
|
|
</div>
|
|
<div class="grid definite mixNonRepeatAfterRepeat alignContentStart" id="mixNonRepeatAfterRepeat"></div>
|
|
<div class="grid multipleTrackRepeat" id="multipleTrackRepeat"></div>
|
|
|
|
<script src="resources/grid-definitions-parsing-utils.js"></script>
|
|
<script>
|
|
description('Test that setting and getting grid-template-columns and grid-template-rows with repeat() works as expected');
|
|
|
|
debug("Test getting grid-template-columns and grid-template-rows set through CSS");
|
|
testGridTemplatesValues(document.getElementById("singleSingleTrackRepeatWithSize"), "120px", "18px");
|
|
testGridTemplatesValues(document.getElementById("singleSingleTrackRepeatWithoutSize"), "0px", "18px");
|
|
testGridTemplatesValues(document.getElementById("twoSingleTrackRepeat"), "400px 400px", "0px 0px");
|
|
testGridTemplatesValues(document.getElementById("twoSingleTrackRepeatWithChildren"), "400px 400px", "44px 77px");
|
|
testGridTemplatesValues(document.getElementById("twoDoubleTrackRepeat"), "33px 120px 0px 120px", "10px 77px 10px 0px");
|
|
testGridTemplatesValues(document.getElementById("twoDoubleTrackWithNamedGridLineRepeat"), "33px [middle] 250px [end] 0px [middle] 250px [end]", "10px [start] 77px [end] 10px [start] 0px [end]");
|
|
testGridTemplatesValues(document.getElementById("twoDoubleTrackWithTrailingNamedGridLineRepeat"), "[before] 0px [before] 0px", "[before] 10px [before] 10px");
|
|
testGridTemplatesValues(document.getElementById("trailingNamedGridLineRepeat"), "250px [end]", "10px [end]");
|
|
testGridTemplatesValues(document.getElementById("leadingNamedGridLineRepeat"), "[start] 250px 250px", "[start] 10px 10px");
|
|
testGridTemplatesValues(document.getElementById("mixRepeatAfterNonRepeat"), "[start] 140px 250px 250px", "44px 10px 10px");
|
|
testGridTemplatesValues(document.getElementById("mixNonRepeatAfterRepeat"), "250px 250px 120px [last]", "10px 10px [end] 0px");
|
|
testGridTemplatesValues(document.getElementById("multipleTrackRepeat"), "[start] 20px [a] 20px 0px [b a] 20px 0px [b] 200px [c] 0px [end]", "0px [a] 0px [b c] 20px [d] 0px [a] 0px [b c] 20px [d] 0px [a] 0px [b c] 20px [d e] 16px");
|
|
|
|
debug("");
|
|
debug("Test invalid repeat syntax.");
|
|
function testInvalidSyntax(gridColumns) {
|
|
element = document.createElement("div");
|
|
document.body.appendChild(element);
|
|
element.style.gridTemplateColumns = gridColumns;
|
|
shouldBeEqualToString("window.getComputedStyle(element, '').getPropertyValue('grid-template-columns')", "none");
|
|
document.body.removeChild(element);
|
|
}
|
|
testInvalidSyntax("repeat(");
|
|
testInvalidSyntax("repeat()");
|
|
testInvalidSyntax("repeat(3 / auto)");
|
|
testInvalidSyntax("repeat(3 , ,)");
|
|
testInvalidSyntax("repeat(0, 15px)");
|
|
testInvalidSyntax("repeat(-1, auto)");
|
|
testInvalidSyntax("repeat(1, [foo])");
|
|
testInvalidSyntax("repeat(1, )");
|
|
testInvalidSyntax("repeat(1)");
|
|
testInvalidSyntax("repeat(3, [a] [a] 100px 200px)");
|
|
// Nesting is no allowed.
|
|
testInvalidSyntax("repeat(2, repeat(1, auto))");
|
|
testInvalidSyntax("repeat(2, [a] 100px 200px repeat(2, 20px))");
|
|
</script>
|
|
<script src="../../resources/js-test-post.js"></script>
|
|
</body>
|
|
</html>
|