109 lines
4.0 KiB
HTML
109 lines
4.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<link href="resources/grid.css" rel="stylesheet">
|
|
<style>
|
|
.grid {
|
|
font: 10px/1 Ahem;
|
|
}
|
|
|
|
.gridFixedAndMinContentAndFlex {
|
|
grid-template-columns: 20px min-content 1fr;
|
|
}
|
|
|
|
.gridMinMaxFixedFlexAndMaxContentAndAuto {
|
|
grid-template-columns: minmax(20px, 1fr) max-content auto;
|
|
}
|
|
|
|
.gridMinMaxAutoFixedAndMinContentAndFixed {
|
|
grid-template-columns: minmax(auto, 35px) min-content 25px;
|
|
}
|
|
|
|
.gridMinContentAndMinMaxFixedMinContentAndFlex {
|
|
grid-template-columns: min-content minmax(20px, min-content) 2fr;
|
|
}
|
|
|
|
.gridMaxContentAndMinMaxFixedMaxContentAndFlex {
|
|
grid-template-columns: max-content minmax(20px, max-content) 1fr;
|
|
}
|
|
|
|
</style>
|
|
<script src="../../resources/js-test.js"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<p>Test that resolving auto tracks on grid items works properly.</p>
|
|
|
|
<div style="position: relative; width: 100px;">
|
|
<div id="gridFixedAndMinContentAndFlex" class="grid gridFixedAndMinContentAndFlex">
|
|
<div style="grid-column: 2 / span 2;">XXXXXXXX</div>
|
|
<div style="grid-column: 1 / span 2; grid-row: 2;">XXXXX</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="position: relative; width: 100px;">
|
|
<div id="gridFixedAndMinContentAndFlexMultipleOverlap" class="grid gridFixedAndMinContentAndFlex">
|
|
<div style="grid-column: 1 / span 2;">XXX XXX</div>
|
|
<div style="grid-column: 1 / -1; grid-row: 2;">XXXX</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="position: relative; width: 100px;">
|
|
<div id="gridMinMaxFixedFlexAndMaxContentAndAuto" class="grid gridMinMaxFixedFlexAndMaxContentAndAuto">
|
|
<div style="grid-column: 1 / span 2;">XXX XXX</div>
|
|
<div style="grid-column: 2 / span 2; grid-row: 2;">XXXX</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="position: relative; width: 100px;">
|
|
<div id="gridMinMaxFixedFlexAndMaxContentAndAutoNoFlexSpanningItems" class="grid gridMinMaxFixedFlexAndMaxContentAndAuto">
|
|
<div style="grid-column: 1 / -1;">XXX XXX</div>
|
|
<div style="grid-column: 1 / span 2; grid-row: 2;">XXXX XXXX</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="position: relative; width: 100px;">
|
|
<div id="gridMinMaxAutoFixedAndMinContentAndFixed" class="grid gridMinMaxAutoFixedAndMinContentAndFixed">
|
|
<div style="grid-column: 1 / span 2;">XXXX XXXX</div>
|
|
<div style="grid-column: 2 / span 2; grid-row: 2;">XXX XXX</div>
|
|
<div style="grid-column: 1 / -1; grid-row: 3;">XXXXX XXXXX</div>
|
|
<div style="grid-column: 2 / span 2; grid-row: 4;">XX XX XX XX</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="position: relative; width: 100px;">
|
|
<div id="gridMinContentAndMinMaxFixedMinContentAndFlex" class="grid gridMinContentAndMinMaxFixedMinContentAndFlex">
|
|
<div style="grid-column: 2 / span 2;">XXXXX</div>
|
|
<div style="grid-column: 1 / -1; grid-row: 2;">XXX XXX XXX</div>
|
|
<div style="grid-column: 1 / span 2; grid-row: 3;">XXXX XXXX</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="position: relative; width: 100px;">
|
|
<div id="gridMaxContentAndMinMaxFixedMaxContentAndFlex" class="grid gridMaxContentAndMinMaxFixedMaxContentAndFlex">
|
|
<div style="grid-column: 2 / span 2;">XXXXX</div>
|
|
<div style="grid-column: 1 / -1; grid-row: 2;">XXX XXX XXX</div>
|
|
<div style="grid-column: 1 / span 2; grid-row: 3;">XXXX XXXX</div>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
<script src="resources/grid-definitions-parsing-utils.js"></script>
|
|
<script>
|
|
function checkColumns(gridId, columnValue)
|
|
{
|
|
window.gridElement = document.getElementById(gridId);
|
|
shouldBeEqualToString("window.getComputedStyle(" + gridId + ", '').getPropertyValue('grid-template-columns')", columnValue);
|
|
}
|
|
|
|
checkColumns("gridFixedAndMinContentAndFlex", "20px 30px 50px");
|
|
checkColumns("gridFixedAndMinContentAndFlexMultipleOverlap", "20px 10px 70px");
|
|
checkColumns("gridMinMaxFixedFlexAndMaxContentAndAuto", "60px 20px 20px");
|
|
checkColumns("gridMinMaxFixedFlexAndMaxContentAndAutoNoFlexSpanningItems", "100px 0px 0px");
|
|
checkColumns("gridMinMaxAutoFixedAndMinContentAndFixed", "35px 20px 25px");
|
|
checkColumns("gridMinContentAndMinMaxFixedMinContentAndFlex", "20px 20px 60px");
|
|
checkColumns("gridMaxContentAndMinMaxFixedMaxContentAndFlex", "70px 20px 10px");
|
|
|
|
</script>
|
|
</html>
|