<!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>
