<!DOCTYPE html>
<html>
<head>
<link href="resources/grid.css" rel="stylesheet"/>
<style>
.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 gridFixedMinContentAndAuto">
<div class="firstRowFirstColumn">XXXXX</div>
<div class="spanTwo secondRowFirstColumn">XXX XXX</div>
</div>
</div>
<div style="position: relative">
<div id="gridFixedMaxContentAndAuto" class="grid gridFixedMaxContentAndAuto">
<div class="firstRowFirstColumn">XXXXX</div>
<div class="spanTwo secondRowFirstColumn">XXX XXX</div>
</div>
</div>
<div style="position: relative">
<div id="gridMaxContentAndAuto" class="grid gridMaxContentAndAuto">
<div class="firstRowFirstColumn">XXXXX</div>
<div class="spanTwo secondRowFirstColumn">XXX XXX</div>
</div>
</div>
<div style="position: relative">
<div id="gridAutoAndMaxContent" class="grid gridAutoAndMaxContent">
<div class="firstRowFirstColumn">XXXXX</div>
<div class="spanTwo secondRowFirstColumn">XXX XXX</div>
</div>
</div>
<div style="position: relative">
<div id="gridMinContentAndAuto" class="grid gridMinContentAndAuto">
<div class="firstRowFirstColumn">XXXXX</div>
<div class="spanTwo secondRowFirstColumn">XXX XXX</div>
</div>
</div>
<div style="position: relative">
<div id="gridAutoAndMinContent" class="grid 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 are identical 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>
Codebase Browser
chromium