| <!DOCTYPE html> |
| <html> |
| <link href="resources/grid.css" rel="stylesheet"> |
| <link href="resources/grid-alignment.css" rel="stylesheet"> |
| <script src="../../resources/check-layout.js"></script> |
| <script> |
| function testLayout(gridElementID, gridTracks, size) |
| { |
| var gridElement = document.getElementById(gridElementID); |
| gridElement.style.gridTemplateColumns = gridTracks.columns; |
| 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, document.getElementById("test-output")); |
| } |
| |
| function updateRowsColumns() |
| { |
| // In the constrained grid case, we will always end up sizing after the min width. This means we don't test max width changes as they would not be detectable. |
| testLayout("constrainedGrid", { 'rows': 'minmax(20px, 50px)', 'columns': 'minmax(30px, 50px)' }, { 'width': '30', 'height': '20' }); |
| testLayout("constrainedGrid", { 'rows': 'minmax(40px, 50px)', 'columns': 'minmax(30px, 50px)' }, { 'width': '30', 'height': '40' }); |
| testLayout("constrainedGrid", { 'rows': 'minmax(40px, 50px)', 'columns': 'minmax(50px, 50px)' }, { 'width': '50', 'height': '40' }); |
| testLayout("constrainedGrid", { 'rows': 'auto', 'columns': 'minmax(50px, 50px)' }, { 'width': '50', 'height': '20' }); |
| testLayout("constrainedGrid", { 'rows': 'auto', 'columns': 'minmax(max-content, 50px)' }, { 'width': '120', 'height': '10' }); |
| testLayout("constrainedGrid", { 'rows': '70px', 'columns': 'minmax(max-content, 50px)' }, { 'width': '120', 'height': '70' }); |
| |
| testLayout("constrainedGridUndefinedHeight", { 'rows': 'minmax(20px, 50px)', 'columns': 'minmax(30px, 50px)' }, { 'width': '30', 'height': '50' }); |
| testLayout("constrainedGridUndefinedHeight", { 'rows': 'minmax(40px, 50px)', 'columns': 'minmax(30px, 50px)' }, { 'width': '30', 'height': '50' }); |
| testLayout("constrainedGridUndefinedHeight", { 'rows': 'minmax(40px, 50px)', 'columns': 'minmax(50px, 50px)' }, { 'width': '50', 'height': '50' }); |
| testLayout("constrainedGridUndefinedHeight", { 'rows': 'auto', 'columns': 'minmax(50px, 50px)' }, { 'width': '50', 'height': '20' }); |
| testLayout("constrainedGridUndefinedHeight", { 'rows': 'auto', 'columns': 'minmax(max-content, 50px)' }, { 'width': '120', 'height': '10' }); |
| testLayout("constrainedGridUndefinedHeight", { 'rows': '70px', 'columns': 'minmax(max-content, 50px)' }, { 'width': '120', 'height': '70' }); |
| |
| testLayout("unconstrainedGrid", { 'rows': 'minmax(20px, 50px)', 'columns': 'minmax(20px, 60px)' }, { 'width': '60', 'height': '50' }); |
| testLayout("unconstrainedGrid", { 'rows': 'minmax(20px, 50px)', 'columns': 'minmax(20px, 40px)' }, { 'width': '40', 'height': '50' }); |
| testLayout("unconstrainedGrid", { 'rows': 'minmax(20px, 30px)', 'columns': 'minmax(20px, 40px)' }, { 'width': '40', 'height': '30' }); |
| testLayout("unconstrainedGrid", { 'rows': 'auto', 'columns': 'minmax(20px, 40px)' }, { 'width': '40', 'height': '20' }); |
| testLayout("unconstrainedGrid", { 'rows': 'auto', 'columns': 'minmax(20px, max-content)' }, { 'width': '120', 'height': '10' }); |
| testLayout("unconstrainedGrid", { 'rows': 'auto', 'columns': 'minmax(150px, max-content)' }, { 'width': '150', 'height': '10' }); |
| testLayout("unconstrainedGrid", { 'rows': 'auto', 'columns': 'auto' }, { 'width': '120', 'height': '10' }); |
| testLayout("unconstrainedGrid", { 'rows': 'auto', 'columns': 'minmax(min-content, 1fr) 3fr' }, { 'width': '250', 'height': '10' }); |
| testLayout("unconstrainedGrid", { 'rows': 'auto', 'columns': 'minmax(min-content, 3fr) 3fr' }, { 'width': '500', 'height': '10' }); |
| } |
| |
| window.addEventListener("load", updateRowsColumns, false); |
| </script> |
| <body> |
| <div>This test checks that grid-{rows|columns} dynamic updates properly relayout the grid items.</div> |
| <div class="constrainedContainer"> |
| <div class="grid" id="constrainedGrid" style="height: 100%"> |
| <div class="sizedToGridArea">XXXXX XXXXXX</div> |
| </div> |
| </div> |
| |
| <div class="constrainedContainer"> |
| <div class="grid" id="constrainedGridUndefinedHeight"> |
| <div class="sizedToGridArea">XXXXX XXXXXX</div> |
| </div> |
| </div> |
| |
| <div class="unconstrainedContainer"> |
| <div class="grid justifyContentStart" id="unconstrainedGrid"> |
| <div class="sizedToGridArea">XXXXX XXXXXX</div> |
| </div> |
| </div> |
| |
| <div id="test-output"></div> |
| |
| </body> |
| </html> |
