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