61 lines
2.0 KiB
HTML
61 lines
2.0 KiB
HTML
<!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>
|