135 lines
5.3 KiB
HTML
135 lines
5.3 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; }
|
|
|
|
.gridAutoAndMaxContent {
|
|
grid-template-columns: auto max-content;
|
|
}
|
|
.gridFixedMinContentAndFixedMaxContent {
|
|
grid-template-columns: minmax(10px, min-content) minmax(10px, max-content);
|
|
}
|
|
.gridMinContentAndMaxContent {
|
|
grid-template-columns: min-content max-content;
|
|
}
|
|
|
|
.gridMinContentAndFixedAndMaxContent {
|
|
grid-template-columns: min-content 20px max-content;
|
|
}
|
|
|
|
.gridMaxContentAndFixedAndAuto {
|
|
grid-template-columns: max-content 20px auto;
|
|
}
|
|
|
|
.gridRepeatTwoMaxContentAndMinContent {
|
|
grid-template-columns: repeat(2, max-content min-content);
|
|
}
|
|
|
|
.gridRepeatTwoAutoAndMaxContent {
|
|
grid-template-columns: repeat(2, auto max-content);
|
|
}
|
|
|
|
.columns1And2 { grid-column: 1 / span 2; }
|
|
.columns2And3 { grid-column: 2 / span 2; }
|
|
.columns3And4 { grid-column: 3 / span 2; }
|
|
.columns1To3 { grid-column: 1 / span 3; }
|
|
.columns1To4 { grid-column: 1 / span 4; }
|
|
</style>
|
|
<script src="../../resources/js-test.js"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="constrainedContainer">
|
|
<div class="grid gridAutoAndMaxContent" id="gridAutoAndMaxContent">
|
|
<div class="columns1And2">XXXX XXXX</div>
|
|
<div class="columns1And2">XXXXX X</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid gridFixedMinContentAndFixedMaxContent" id="gridFixedMinContentAndFixedMaxContent">
|
|
<div class="columns1And2">XXXX XXXX</div>
|
|
<div class="columns1And2">XXXXX XXXXX</div>
|
|
</div>
|
|
|
|
<div class="grid gridMinContentAndMaxContent" id="gridMinContentAndMaxContent">
|
|
<div class="columns1And2">XX XX</div>
|
|
<div class="columns1And2">XXX XX XXX</div>
|
|
</div>
|
|
|
|
<div class="grid gridMinContentAndFixedAndMaxContent" id="gridMinContentAndFixedAndMaxContent">
|
|
<div class="columns1To3">XXXX XXXX</div>
|
|
<div class="columns1To3">XXXXX XXX XXXX</div>
|
|
</div>
|
|
|
|
<div class="grid gridMaxContentAndFixedAndAuto justifyContentStart" id="gridMaxContentAndFixedAndAuto">
|
|
<div class="columns1To3">XXXX XXXX</div>
|
|
<div class="columns1To3">XXXXX XXX XXXX</div>
|
|
</div>
|
|
|
|
<div class="grid gridRepeatTwoMaxContentAndMinContent" id="gridRepeatTwoMaxContentAndMinContentTwoOverlapping">
|
|
<div class="columns1And2">XXXX XXXX</div>
|
|
<div class="columns3And4">XX XX</div>
|
|
<div class="columns1And2">XXXXX XXX XXXX</div>
|
|
<div class="columns3And4">XXX XX XXX</div>
|
|
</div>
|
|
|
|
<div class="grid gridRepeatTwoMaxContentAndMinContent" id="gridRepeatTwoMaxContentAndMinContentThreeOverlapping">
|
|
<div class="columns2And3">XXXXX XXX XXXX</div>
|
|
<div class="columns3And4">XXX XX XXX</div>
|
|
<div class="columns1And2">XXXX XXXX</div>
|
|
</div>
|
|
|
|
<div class="grid gridRepeatTwoMaxContentAndMinContent" id="gridRepeatTwoMaxContentAndMinContentTwoAndFourOverlapping">
|
|
<div class="columns1To4">XXXX XXXX</div>
|
|
<div class="columns3And4">XX XX</div>
|
|
<div class="columns1To4">XXXXX XXX XXXX</div>
|
|
<div class="columns1And2">XXX XX XXX</div>
|
|
<div class="columns3And4">X X X X X</div>
|
|
<div class="columns1And2">XXXXXX</div>
|
|
</div>
|
|
|
|
<div class="grid gridRepeatTwoAutoAndMaxContent justifyContentStart" id="gridRepeatTwoAutoAndMaxContentTwoOverlapping">
|
|
<div class="columns1And2">XXXX XXXX</div>
|
|
<div class="columns3And4">XX XX</div>
|
|
<div class="columns1And2">XXXXX XXX XXXX</div>
|
|
<div class="columns3And4">XXX XX XXX</div>
|
|
</div>
|
|
|
|
<div class="grid gridRepeatTwoAutoAndMaxContent justifyContentStart" id="gridRepeatTwoAutoAndMaxContentThreeOverlapping">
|
|
<div class="columns2And3">XXXXX XXX XXXX</div>
|
|
<div class="columns3And4">XXX XX XXX</div>
|
|
<div class="columns1And2">XXXX XXXX</div>
|
|
</div>
|
|
|
|
<div class="grid gridRepeatTwoAutoAndMaxContent justifyContentStart" id="gridRepeatTwoAutoAndMaxContentTwoAndFourOverlapping">
|
|
<div class="columns1To4">XXXX XXXX</div>
|
|
<div class="columns3And4">XX XX</div>
|
|
<div class="columns1To4">XXXXX XXX XXXX</div>
|
|
<div class="columns1And2">XXX XX XXX</div>
|
|
<div class="columns3And4">X X X X X</div>
|
|
<div class="columns1And2">XXXXXX</div>
|
|
</div>
|
|
|
|
<script>
|
|
function testGridColumnsValues(id, computedColumnValue)
|
|
{
|
|
shouldBeEqualToString("window.getComputedStyle(" + id + ", '').getPropertyValue('grid-template-columns')", computedColumnValue);
|
|
}
|
|
|
|
debug("Check that tracks are updated after distributing the extra space for all the items in the same group span.");
|
|
testGridColumnsValues("gridAutoAndMaxContent", "25px 65px");
|
|
testGridColumnsValues("gridFixedMinContentAndFixedMaxContent", "25px 85px");
|
|
testGridColumnsValues("gridMinContentAndMaxContent", "15px 85px");
|
|
testGridColumnsValues("gridMinContentAndFixedAndMaxContent", "15px 20px 105px");
|
|
testGridColumnsValues("gridMaxContentAndFixedAndAuto", "105px 20px 15px");
|
|
testGridColumnsValues("gridRepeatTwoMaxContentAndMinContentTwoOverlapping", "115px 25px 85px 15px");
|
|
testGridColumnsValues("gridRepeatTwoMaxContentAndMinContentThreeOverlapping", "65px 25px 115px 15px");
|
|
testGridColumnsValues("gridRepeatTwoMaxContentAndMinContentTwoAndFourOverlapping", "70px 30px 80px 10px");
|
|
testGridColumnsValues("gridRepeatTwoAutoAndMaxContentTwoOverlapping", "25px 115px 15px 85px");
|
|
testGridColumnsValues("gridRepeatTwoAutoAndMaxContentThreeOverlapping", "20px 115px 25px 75px");
|
|
testGridColumnsValues("gridRepeatTwoAutoAndMaxContentTwoAndFourOverlapping", "30px 70px 10px 80px");
|
|
</script>
|
|
</body>
|