<!DOCTYPE html>
<html>
<link href="resources/grid.css" rel="stylesheet">
<style>
.grid {
    grid-template-columns: 50px 100px;
    grid-template-rows: 70px 140px;
}

#minHeightPercent {
    height: 10px;
    min-height: 50%;
}

#maxHeightPercent {
    height: 100px;
    max-height: 50%;
}
</style>
<script src="../../resources/check-layout.js"></script>
<script>
function testLayout(gridElementID, gridTracks, size)
{
    var gridElement = document.getElementById(gridElementID);
    gridElement.style.gridTemplateRows = gridTracks.rows;
    var gridItem = gridElement.firstChild.nextSibling;
    gridItem.setAttribute("data-expected-width", size.width);
    gridItem.setAttribute("data-expected-height", size.height);
    checkLayout("#" + gridElementID)
}

function runTests()
{
    testLayout("gridWithMinHeightItem", { "rows": "70px 140px" }, { "width": "50px", "height": "35px" });
    testLayout("gridWithMinHeightItem", { "rows": "100px 140px" }, { "width": "50px", "height": "50px" });
    testLayout("gridWithMinHeightItem", { "rows": "100px 240px" }, { "width": "50px", "height": "50px" });
    testLayout("gridWithMinHeightItem", { "rows": "10px 240px" }, { "width": "50px", "height": "10px" });

    testLayout("gridWithMaxHeightItem", { "rows": "70px 140px" }, { "width": "50px", "height": "35px" });
    testLayout("gridWithMaxHeightItem", { "rows": "100px 140px" }, { "width": "50px", "height": "50px" });
    testLayout("gridWithMaxHeightItem", { "rows": "100px 240px" }, { "width": "50px", "height": "50px" });
    testLayout("gridWithMaxHeightItem", { "rows": "1000px 240px" }, { "width": "50px", "height": "100px" });
}

window.addEventListener("load", runTests, false);
</script>
<body>

<p>Test that grid items with a percentage logical min-height or max-height resolve their size properly.</p>

<div id="gridWithMinHeightItem" class="grid">
    <div id="minHeightPercent"></div>
</div>

<div id="gridWithMaxHeightItem" class="grid">
    <div id="maxHeightPercent"></div>
</div>

</body>
</html>