<!DOCTYPE html>
<head>
<link href="resources/grid.css" rel="stylesheet">
<style>
.grid {
    grid-template-rows: minmax(min-content, 9px);
    grid-template-columns: min-content;
    height: 10px;
}
.firstRowFirstColumn {
    font: 10px/1 Ahem;
}
</style>
<script src="../../resources/js-test.js"></script>
<script type="text/javascript">
if (window.testRunner)
    testRunner.dumpAsText();
 document.addEventListener("DOMContentLoaded", crash, false);

function crash() {
    var grid = document.getElementById("grid");
    shouldBeEqualToString("window.getComputedStyle(grid, '').getPropertyValue('grid-template-rows')", "10px");

    var child = document.createElement("div");
    child.className = "firstRowFirstColumn";
    child.innerHTML = "XXXX XXXX";
    grid.appendChild(child);
    shouldBeEqualToString("window.getComputedStyle(grid, '').getPropertyValue('grid-template-rows')", "20px");
}
</script>
</head>
<body>
    <p>The test has passed if it does not CRASH in Debug builds.</p>
    <div class="grid" id="grid">
	<div class="firstRowFirstColumn">XXXX</div>
    </div>
</body>