127 lines
4.3 KiB
HTML
127 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<link href="resources/grid.css" rel="stylesheet"/>
|
|
<link href="resources/grid-alignment.css" rel="stylesheet"/>
|
|
<style>
|
|
.grid {
|
|
font: 10px/1 Ahem;
|
|
}
|
|
.gridFixedMinContentAndFixedMaxContent {
|
|
grid-template-columns: minmax(20px, min-content) minmax(20px, max-content);
|
|
}
|
|
.gridMaxContentFixedAndMinContentFixed {
|
|
grid-template-columns: minmax(max-content, 50px) minmax(min-content, 50px);
|
|
}
|
|
.gridFixedMinContentAndAuto {
|
|
grid-template-columns: minmax(20px, min-content) auto;
|
|
}
|
|
.gridFixedMaxContentAndAuto {
|
|
grid-template-columns: minmax(20px, max-content) auto;
|
|
}
|
|
.gridMaxContentAndAuto {
|
|
grid-template-columns: max-content auto;
|
|
}
|
|
.gridAutoAndMaxContent {
|
|
grid-template-columns: auto max-content;
|
|
}
|
|
.gridMinContentAndAuto {
|
|
grid-template-columns: min-content auto;
|
|
}
|
|
.gridAutoAndMinContent {
|
|
grid-template-columns: min-content auto;
|
|
}
|
|
.spanTwo {
|
|
grid-column: 1 / 3;
|
|
}
|
|
</style>
|
|
<script src="../../resources/js-test.js"></script>
|
|
</head>
|
|
<body>
|
|
<div style="position: relative">
|
|
<div id="gridFixedMinContentAndFixedMaxContent" class="grid gridFixedMinContentAndFixedMaxContent">
|
|
<div class="firstRowFirstColumn">XXXXX</div>
|
|
<div class="spanTwo secondRowFirstColumn">XXX XXX</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="position: relative">
|
|
<div id="gridMaxContentFixedAndMinContentFixed" class="grid gridMaxContentFixedAndMinContentFixed">
|
|
<div class="firstRowFirstColumn">XXXXX</div>
|
|
<div class="spanTwo secondRowFirstColumn">XXX XXX</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="position: relative">
|
|
<div id="gridFixedMinContentAndAuto" class="grid contentStart gridFixedMinContentAndAuto">
|
|
<div class="firstRowFirstColumn">XXXXX</div>
|
|
<div class="spanTwo secondRowFirstColumn">XXX XXX</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="position: relative">
|
|
<div id="gridFixedMaxContentAndAuto" class="grid contentStart gridFixedMaxContentAndAuto">
|
|
<div class="firstRowFirstColumn">XXXXX</div>
|
|
<div class="spanTwo secondRowFirstColumn">XXX XXX</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="position: relative">
|
|
<div id="gridMaxContentAndAuto" class="grid contentStart gridMaxContentAndAuto">
|
|
<div class="firstRowFirstColumn">XXXXX</div>
|
|
<div class="spanTwo secondRowFirstColumn">XXX XXX</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="position: relative">
|
|
<div id="gridAutoAndMaxContent" class="grid contentStart gridAutoAndMaxContent">
|
|
<div class="firstRowFirstColumn">XXXXX</div>
|
|
<div class="spanTwo secondRowFirstColumn">XXX XXX</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="position: relative">
|
|
<div id="gridMinContentAndAuto" class="grid contentStart gridMinContentAndAuto">
|
|
<div class="firstRowFirstColumn">XXXXX</div>
|
|
<div class="spanTwo secondRowFirstColumn">XXX XXX</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="position: relative">
|
|
<div id="gridAutoAndMinContent" class="grid contentStart gridAutoAndMinContent">
|
|
<div class="firstRowFirstColumn">XXXXX</div>
|
|
<div class="spanTwo secondRowFirstColumn">XXX XXX</div>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
<script src="resources/grid-definitions-parsing-utils.js"></script>
|
|
<script>
|
|
|
|
function checkTrackBreadthAfterItemRowSwap(gridId)
|
|
{
|
|
window.gridElement = document.getElementById(gridId);
|
|
var oldValue = getComputedStyle(gridElement, '').getPropertyValue('grid-template-columns');
|
|
var firstChildRow = getComputedStyle(gridElement.children[0],'').getPropertyValue('grid-row');
|
|
gridElement.children[0].style.gridRow = getComputedStyle(gridElement.children[1],'').getPropertyValue('grid-row');
|
|
gridElement.children[1].style.gridRow = firstChildRow;
|
|
var newValue = getComputedStyle(gridElement, '').getPropertyValue('grid-template-columns');
|
|
|
|
if (newValue == oldValue)
|
|
testPassed("grid-template-columns is " + newValue + " after grid row swap.");
|
|
else
|
|
testFailed("grid-template-columns should be " + oldValue + ". Was " + newValue + ".");
|
|
}
|
|
|
|
checkTrackBreadthAfterItemRowSwap("gridFixedMinContentAndFixedMaxContent");
|
|
checkTrackBreadthAfterItemRowSwap("gridMaxContentFixedAndMinContentFixed");
|
|
checkTrackBreadthAfterItemRowSwap("gridFixedMinContentAndAuto");
|
|
checkTrackBreadthAfterItemRowSwap("gridFixedMaxContentAndAuto");
|
|
checkTrackBreadthAfterItemRowSwap("gridMaxContentAndAuto");
|
|
checkTrackBreadthAfterItemRowSwap("gridAutoAndMaxContent");
|
|
checkTrackBreadthAfterItemRowSwap("gridMinContentAndAuto");
|
|
checkTrackBreadthAfterItemRowSwap("gridAutoAndMinContent");
|
|
|
|
</script>
|
|
</html>
|