90 lines
3.4 KiB
HTML
90 lines
3.4 KiB
HTML
<!DOCTYPE html>
|
|
<head>
|
|
<link href="resources/grid.css" rel="stylesheet"/>
|
|
<link href="resources/grid-alignment.css" rel="stylesheet"/>
|
|
<style>
|
|
.grid {
|
|
font: 10px/1 Ahem;
|
|
}
|
|
.gridAutoAndAuto {
|
|
grid-template-columns: auto auto;
|
|
}
|
|
.gridFixedMinContentFixedMaxContent {
|
|
grid-template-columns: minmax(50px, min-content) minmax(40px, max-content);
|
|
}
|
|
.gridMaxContentAndAuto {
|
|
grid-template-columns: max-content auto;
|
|
}
|
|
.gridMinContentAndAuto {
|
|
grid-template-columns: min-content auto;
|
|
}
|
|
</style>
|
|
<script src="../../resources/js-test.js"></script>
|
|
</head>
|
|
<body>
|
|
<div class="grid gridAutoAndAuto justifyContentStart" id="gridAutoAndAuto">
|
|
<div class="firstRowFirstColumn">X</div>
|
|
<div class="firstRowBothColumn">XXX XX XXX</div>
|
|
</div>
|
|
|
|
<div class="grid gridAutoAndAuto justifyContentStart" id="gridAutoAndAutoReversed">
|
|
<div class="firstRowSecondColumn">X</div>
|
|
<div class="firstRowBothColumn">XXX XX XXX</div>
|
|
</div>
|
|
|
|
<div class="grid gridFixedMinContentFixedMaxContent" id="gridFixedMinContentFixedMaxContent">
|
|
<div class="sizedToGridArea firstRowFirstColumn"></div>
|
|
<div class="firstRowBothColumn">XXX XX XXX</div>
|
|
</div>
|
|
|
|
<div class="grid gridFixedMinContentFixedMaxContent" id="gridFixedMinContentFixedMaxContentTwoEmptyChildren">
|
|
<div class="sizedToGridArea firstRowFirstColumn"></div>
|
|
<div class="sizedToGridArea firstRowSecondColumn"></div>
|
|
<div class="firstRowBothColumn">XXX XX XXX</div>
|
|
</div>
|
|
|
|
<div class="grid gridFixedMinContentFixedMaxContent" id="gridFixedMinContentFixedMaxContentFixedSizeChild">
|
|
<div class="firstRowFirstColumn">XXXXXX</div>
|
|
<div class="firstRowBothColumn">XXX XX XXX</div>
|
|
</div>
|
|
|
|
<div class="grid gridMaxContentAndAuto justifyContentStart" id="gridMaxContentAndAuto">
|
|
<div class="firstRowFirstColumn">X</div>
|
|
<div class="firstRowBothColumn">XXX XX XXX</div>
|
|
</div>
|
|
|
|
<div class="grid gridMaxContentAndAuto justifyContentStart" id="gridMaxContentAndAutoReversed">
|
|
<div class="firstRowSecondColumn">X</div>
|
|
<div class="firstRowBothColumn">XXX XX XXX</div>
|
|
</div>
|
|
|
|
<div class="grid gridMinContentAndAuto justifyContentStart" id="gridMinContentAndAuto">
|
|
<div class="firstRowFirstColumn">X</div>
|
|
<div class="firstRowBothColumn">XXX XX XXX</div>
|
|
</div>
|
|
|
|
<div class="grid gridMinContentAndAuto justifyContentStart" id="gridMinContentAndAutoReversed">
|
|
<div class="firstRowSecondColumn">X</div>
|
|
<div class="firstRowBothColumn">XXX XX XXX</div>
|
|
</div>
|
|
|
|
<script>
|
|
function testGridColumnsValues(id, computedColumnValue)
|
|
{
|
|
shouldBeEqualToString("window.getComputedStyle(" + id + ", '').getPropertyValue('grid-template-columns')", computedColumnValue);
|
|
}
|
|
|
|
description('This test checks that content sized tracks are initialized using non-spanning grid items.');
|
|
|
|
testGridColumnsValues("gridAutoAndAuto", "10px 90px");
|
|
testGridColumnsValues("gridAutoAndAutoReversed", "90px 10px");
|
|
testGridColumnsValues("gridFixedMinContentFixedMaxContent", "50px 50px");
|
|
testGridColumnsValues("gridFixedMinContentFixedMaxContentTwoEmptyChildren", "50px 50px");
|
|
testGridColumnsValues("gridFixedMinContentFixedMaxContentFixedSizeChild", "60px 40px");
|
|
testGridColumnsValues("gridMaxContentAndAuto", "80px 20px");
|
|
testGridColumnsValues("gridMaxContentAndAutoReversed", "90px 10px");
|
|
testGridColumnsValues("gridMinContentAndAuto", "10px 90px");
|
|
testGridColumnsValues("gridMinContentAndAutoReversed", "20px 80px");
|
|
</script>
|
|
</body>
|