91 lines
3.5 KiB
HTML
91 lines
3.5 KiB
HTML
<!DOCTYPE HTML>
|
|
<link href="resources/grid.css" rel="stylesheet">
|
|
<link href="resources/grid-alignment.css" rel="stylesheet">
|
|
<style>
|
|
.grid {
|
|
font: 50px/1 Ahem;
|
|
}
|
|
|
|
.singleNamedGridLines {
|
|
grid-template-columns: [a] auto [b];
|
|
grid-template-rows: [x] auto [y];
|
|
}
|
|
|
|
.multipleNamedGridLines {
|
|
grid-template-columns: [a b c] auto [d e];
|
|
grid-template-rows: [x y z] auto [v w];
|
|
}
|
|
</style>
|
|
<script src="../../resources/js-test.js"></script>
|
|
|
|
<div class="grid singleNamedGridLines justifyContentStart" id="gridOneColumnSingle">
|
|
<div>XXXX</div>
|
|
<div>XXX</div>
|
|
<div>XX</div>
|
|
<div>X</div>
|
|
</div>
|
|
|
|
<div class="grid singleNamedGridLines justifyContentStart" id="gridTwoColumnsSingle">
|
|
<div class="firstRowAutoColumn">XXXX</div>
|
|
<div class="firstRowAutoColumn">XXX</div>
|
|
<div>XX</div>
|
|
<div>X</div>
|
|
</div>
|
|
|
|
<div class="grid singleNamedGridLines justifyContentStart" id="gridThreeColumnsSingle">
|
|
<div class="firstRowAutoColumn">XXXX</div>
|
|
<div class="firstRowAutoColumn">XXX</div>
|
|
<div class="firstRowAutoColumn">XX</div>
|
|
<div>X</div>
|
|
</div>
|
|
|
|
<div class="grid singleNamedGridLines justifyContentStart" id="gridFourColumnsSingle">
|
|
<div class="firstRowAutoColumn">XXXX</div>
|
|
<div class="firstRowAutoColumn">XXX</div>
|
|
<div class="firstRowAutoColumn">XX</div>
|
|
<div class="firstRowAutoColumn">X</div>
|
|
</div>
|
|
|
|
<div class="grid multipleNamedGridLines justifyContentStart" id="gridOneColumnMultiple">
|
|
<div>XXXX</div>
|
|
<div>XXX</div>
|
|
<div>XX</div>
|
|
<div>X</div>
|
|
</div>
|
|
|
|
<div class="grid multipleNamedGridLines justifyContentStart" id="gridTwoColumnsMultiple">
|
|
<div class="firstRowAutoColumn">XXXX</div>
|
|
<div class="firstRowAutoColumn">XXX</div>
|
|
<div>XX</div>
|
|
<div>X</div>
|
|
</div>
|
|
|
|
<div class="grid multipleNamedGridLines justifyContentStart" id="gridThreeColumnsMultiple">
|
|
<div class="firstRowAutoColumn">XXXX</div>
|
|
<div class="firstRowAutoColumn">XXX</div>
|
|
<div class="firstRowAutoColumn">XX</div>
|
|
<div>X</div>
|
|
</div>
|
|
|
|
<div class="grid multipleNamedGridLines justifyContentStart" id="gridFourColumnsMultiple">
|
|
<div class="firstRowAutoColumn">XXXX</div>
|
|
<div class="firstRowAutoColumn">XXX</div>
|
|
<div class="firstRowAutoColumn">XX</div>
|
|
<div class="firstRowAutoColumn">X</div>
|
|
</div>
|
|
|
|
<script src="resources/grid-definitions-parsing-utils.js"></script>
|
|
<script>
|
|
description('Test that computed style for grid-template-columns and grid-template-rows works as expected with named grid lines and implicit tracks');
|
|
|
|
testGridTemplatesValues(document.getElementById("gridOneColumnSingle"), "[a] 200px [b]", "[x] 50px [y] 50px 50px 50px");
|
|
testGridTemplatesValues(document.getElementById("gridTwoColumnsSingle"), "[a] 200px [b] 150px", "[x] 50px [y] 50px");
|
|
testGridTemplatesValues(document.getElementById("gridThreeColumnsSingle"), "[a] 200px [b] 150px 100px", "[x] 50px [y] 50px");
|
|
testGridTemplatesValues(document.getElementById("gridFourColumnsSingle"), "[a] 200px [b] 150px 100px 50px", "[x] 50px [y]");
|
|
|
|
testGridTemplatesValues(document.getElementById("gridOneColumnMultiple"), "[a b c] 200px [d e]", "[x y z] 50px [v w] 50px 50px 50px");
|
|
testGridTemplatesValues(document.getElementById("gridTwoColumnsMultiple"), "[a b c] 200px [d e] 150px", "[x y z] 50px [v w] 50px");
|
|
testGridTemplatesValues(document.getElementById("gridThreeColumnsMultiple"), "[a b c] 200px [d e] 150px 100px", "[x y z] 50px [v w] 50px");
|
|
testGridTemplatesValues(document.getElementById("gridFourColumnsMultiple"), "[a b c] 200px [d e] 150px 100px 50px", "[x y z] 50px [v w]");
|
|
</script>
|