| <!DOCTYPE html> |
| <html> |
| <link href="resources/grid.css" rel="stylesheet"> |
| <link href="resources/grid-alignment.css" rel="stylesheet"> |
| <style> |
| .gridFixedContent { |
| grid-template-columns: 50px minmax(min-content, 50px) minmax(max-content, 50px) minmax(50px, min-content); |
| grid-template-rows: 70px minmax(max-content, 70px) minmax(50px, min-content) minmax(65px, max-content); |
| } |
| </style> |
| <script src="../../resources/check-layout.js"></script> |
| <script> |
| function testPosition(gridElementID, position, size) |
| { |
| gridItem = document.getElementById(gridElementID).firstChild; |
| gridItem.style.gridColumn = position.column; |
| gridItem.style.gridRow = position.row; |
| gridItem.setAttribute("data-expected-width", size.width); |
| gridItem.setAttribute("data-expected-height", size.height); |
| checkLayout("#" + gridElementID, document.getElementById("test-output")); |
| } |
| |
| function updateImplicitGridColumn() |
| { |
| testPosition("constrainedGrid", { 'column': '1', 'row': '1' }, { 'width': '50', 'height': '70' }); |
| testPosition("constrainedGrid", { 'column': '1', 'row': '2' }, { 'width': '50', 'height': '30' }); |
| testPosition("constrainedGrid", { 'column': '1', 'row': '3' }, { 'width': '50', 'height': '50' }); |
| testPosition("constrainedGrid", { 'column': '1', 'row': '4' }, { 'width': '50', 'height': '65' }); |
| testPosition("constrainedGrid", { 'column': '1', 'row': '5' }, { 'width': '50', 'height': '30' }); |
| |
| testPosition("constrainedGrid", { 'column': '2', 'row': '1' }, { 'width': '40', 'height': '70' }); |
| testPosition("constrainedGrid", { 'column': '2', 'row': '2' }, { 'width': '40', 'height': '30' }); |
| testPosition("constrainedGrid", { 'column': '2', 'row': '3' }, { 'width': '40', 'height': '50' }); |
| testPosition("constrainedGrid", { 'column': '2', 'row': '4' }, { 'width': '40', 'height': '65' }); |
| testPosition("constrainedGrid", { 'column': '2', 'row': '5' }, { 'width': '40', 'height': '30' }); |
| |
| testPosition("constrainedGrid", { 'column': '3', 'row': '1' }, { 'width': '140', 'height': '70' }); |
| testPosition("constrainedGrid", { 'column': '3', 'row': '2' }, { 'width': '140', 'height': '10' }); |
| testPosition("constrainedGrid", { 'column': '3', 'row': '3' }, { 'width': '140', 'height': '50' }); |
| testPosition("constrainedGrid", { 'column': '3', 'row': '4' }, { 'width': '140', 'height': '65' }); |
| testPosition("constrainedGrid", { 'column': '3', 'row': '5' }, { 'width': '140', 'height': '10' }); |
| |
| testPosition("constrainedGrid", { 'column': '4', 'row': '1' }, { 'width': '50', 'height': '70' }); |
| testPosition("constrainedGrid", { 'column': '4', 'row': '2' }, { 'width': '50', 'height': '30' }); |
| testPosition("constrainedGrid", { 'column': '4', 'row': '3' }, { 'width': '50', 'height': '50' }); |
| testPosition("constrainedGrid", { 'column': '4', 'row': '4' }, { 'width': '50', 'height': '65' }); |
| testPosition("constrainedGrid", { 'column': '4', 'row': '5' }, { 'width': '50', 'height': '30' }); |
| |
| testPosition("constrainedGrid", { 'column': '10', 'row': '15' }, { 'width': '40', 'height': '30' }); |
| |
| testPosition("constrainedGridUndefinedHeight", { 'column': '1', 'row': '1' }, { 'width': '50', 'height': '70' }); |
| testPosition("constrainedGridUndefinedHeight", { 'column': '1', 'row': '2' }, { 'width': '50', 'height': '70' }); |
| testPosition("constrainedGridUndefinedHeight", { 'column': '1', 'row': '3' }, { 'width': '50', 'height': '50' }); |
| testPosition("constrainedGridUndefinedHeight", { 'column': '1', 'row': '4' }, { 'width': '50', 'height': '65' }); |
| testPosition("constrainedGridUndefinedHeight", { 'column': '1', 'row': '5' }, { 'width': '50', 'height': '30' }); |
| |
| testPosition("constrainedGridUndefinedHeight", { 'column': '2', 'row': '1' }, { 'width': '40', 'height': '70' }); |
| testPosition("constrainedGridUndefinedHeight", { 'column': '2', 'row': '2' }, { 'width': '40', 'height': '70' }); |
| testPosition("constrainedGridUndefinedHeight", { 'column': '2', 'row': '3' }, { 'width': '40', 'height': '50' }); |
| testPosition("constrainedGridUndefinedHeight", { 'column': '2', 'row': '4' }, { 'width': '40', 'height': '65' }); |
| testPosition("constrainedGridUndefinedHeight", { 'column': '2', 'row': '5' }, { 'width': '40', 'height': '30' }); |
| |
| testPosition("constrainedGridUndefinedHeight", { 'column': '3', 'row': '1' }, { 'width': '140', 'height': '70' }); |
| testPosition("constrainedGridUndefinedHeight", { 'column': '3', 'row': '2' }, { 'width': '140', 'height': '70' }); |
| testPosition("constrainedGridUndefinedHeight", { 'column': '3', 'row': '3' }, { 'width': '140', 'height': '50' }); |
| testPosition("constrainedGridUndefinedHeight", { 'column': '3', 'row': '4' }, { 'width': '140', 'height': '65' }); |
| testPosition("constrainedGridUndefinedHeight", { 'column': '3', 'row': '5' }, { 'width': '140', 'height': '10' }); |
| |
| testPosition("constrainedGridUndefinedHeight", { 'column': '4', 'row': '1' }, { 'width': '50', 'height': '70' }); |
| testPosition("constrainedGridUndefinedHeight", { 'column': '4', 'row': '2' }, { 'width': '50', 'height': '70' }); |
| testPosition("constrainedGridUndefinedHeight", { 'column': '4', 'row': '3' }, { 'width': '50', 'height': '50' }); |
| testPosition("constrainedGridUndefinedHeight", { 'column': '4', 'row': '4' }, { 'width': '50', 'height': '65' }); |
| testPosition("constrainedGridUndefinedHeight", { 'column': '4', 'row': '5' }, { 'width': '50', 'height': '30' }); |
| |
| testPosition("constrainedGridUndefinedHeight", { 'column': '10', 'row': '15' }, { 'width': '40', 'height': '30' }); |
| |
| testPosition("unconstrainedGrid", { 'column': '1', 'row': '1' }, { 'width': '50', 'height': '70' }); |
| testPosition("unconstrainedGrid", { 'column': '2', 'row': '1' }, { 'width': '60', 'height': '70' }); |
| testPosition("unconstrainedGrid", { 'column': '3', 'row': '1' }, { 'width': '130', 'height': '70' }); |
| testPosition("unconstrainedGrid", { 'column': '4', 'row': '1' }, { 'width': '60', 'height': '70' }); |
| testPosition("unconstrainedGrid", { 'column': '5', 'row': '1' }, { 'width': '130', 'height': '70' }); |
| |
| testPosition("unconstrainedGrid", { 'column': '1', 'row': '2' }, { 'width': '50', 'height': '70' }); |
| testPosition("unconstrainedGrid", { 'column': '2', 'row': '2' }, { 'width': '60', 'height': '70' }); |
| testPosition("unconstrainedGrid", { 'column': '3', 'row': '2' }, { 'width': '130', 'height': '70' }); |
| testPosition("unconstrainedGrid", { 'column': '4', 'row': '2' }, { 'width': '60', 'height': '70' }); |
| testPosition("unconstrainedGrid", { 'column': '5', 'row': '2' }, { 'width': '130', 'height': '70' }); |
| |
| testPosition("unconstrainedGrid", { 'column': '1', 'row': '3' }, { 'width': '50', 'height': '50' }); |
| testPosition("unconstrainedGrid", { 'column': '2', 'row': '3' }, { 'width': '60', 'height': '50' }); |
| testPosition("unconstrainedGrid", { 'column': '3', 'row': '3' }, { 'width': '130', 'height': '50' }); |
| testPosition("unconstrainedGrid", { 'column': '4', 'row': '3' }, { 'width': '60', 'height': '50' }); |
| testPosition("unconstrainedGrid", { 'column': '5', 'row': '3' }, { 'width': '130', 'height': '50' }); |
| |
| testPosition("unconstrainedGrid", { 'column': '1', 'row': '4' }, { 'width': '50', 'height': '65' }); |
| testPosition("unconstrainedGrid", { 'column': '2', 'row': '4' }, { 'width': '60', 'height': '65' }); |
| testPosition("unconstrainedGrid", { 'column': '3', 'row': '4' }, { 'width': '130', 'height': '65' }); |
| testPosition("unconstrainedGrid", { 'column': '4', 'row': '4' }, { 'width': '60', 'height': '65' }); |
| testPosition("unconstrainedGrid", { 'column': '5', 'row': '4' }, { 'width': '130', 'height': '65' }); |
| |
| testPosition("unconstrainedGrid", { 'column': '10', 'row': '15' }, { 'width': '130', 'height': '10' }); |
| } |
| window.addEventListener("load", updateImplicitGridColumn, false); |
| </script> |
| <body> |
| |
| <p>This test checks that we properly recompute our grid tracks' sizes when a grid item changes its grid-row or grid-column.</p> |
| |
| <div class="constrainedContainer"> |
| <div class="grid gridFixedContent" id="constrainedGrid" style="height: 100%"><div class="sizedToGridArea">XXXX XXXX XXXX</div></div> |
| </div> |
| |
| <div class="constrainedContainer"> |
| <div class="grid gridFixedContent" id="constrainedGridUndefinedHeight"><div class="sizedToGridArea">XXXX XXXX XXXX</div></div> |
| </div> |
| |
| <!-- Allow the extra logical space distribution to occur. --> |
| <div style="width: 1000px; height: 1000px"> |
| <div class="grid gridFixedContent justifyContentStart" id="unconstrainedGrid"><div class="sizedToGridArea">XXXXXX XXXXXX</div></div> |
| </div> |
| |
| <div id="test-output"></div> |
| |
| </body> |
| </html> |
