grid-template-columns-rows-changes-001.html (5012B)
1 <!DOCTYPE html> 2 <html> 3 <title>CSS Grid: grid-tempalte-{rows|colums} dynamic updates</title> 4 <link rel="author" title="Julien Chaffraix" href="mailto:jchaffraix@chromium.org"> 5 <link rel="help" href="https://drafts.csswg.org/css-grid-1/#track-sizing"> 6 <link rel="help" href="https://bugs.webkit.org/show_bug.cgi?id=112501"> 7 <link rel="stylesheet" href="/css/support/grid.css"> 8 <link rel="stylesheet" href="/css/support/alignment.css"> 9 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"/> 10 <meta name="assert" content="This test checks that grid-tempalte-{rows|colums} dynamic updates properly relayout the grid items."> 11 <script src="/resources/testharness.js"></script> 12 <script src="/resources/testharnessreport.js"></script> 13 <script src="/resources/check-layout-th.js"></script> 14 <script> 15 setup({ explicit_done: true }); 16 17 function testLayout(gridElementID, gridTracks, size, last = false) 18 { 19 var gridElement = document.getElementById(gridElementID); 20 gridElement.style.gridTemplateColumns = gridTracks.columns; 21 gridElement.style.gridTemplateRows = gridTracks.rows; 22 var gridItem = gridElement.firstChild.nextSibling; 23 gridItem.setAttribute("data-expected-width", size.width); 24 gridItem.setAttribute("data-expected-height", size.height); 25 checkLayout("#" + gridElementID, last); 26 } 27 28 function updateRowsColumns() 29 { 30 // 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. 31 testLayout("constrainedGrid", { 'rows': 'minmax(20px, 50px)', 'columns': 'minmax(30px, 50px)' }, { 'width': '30', 'height': '20' }); 32 testLayout("constrainedGrid", { 'rows': 'minmax(40px, 50px)', 'columns': 'minmax(30px, 50px)' }, { 'width': '30', 'height': '40' }); 33 testLayout("constrainedGrid", { 'rows': 'minmax(40px, 50px)', 'columns': 'minmax(50px, 50px)' }, { 'width': '50', 'height': '40' }); 34 testLayout("constrainedGrid", { 'rows': 'auto', 'columns': 'minmax(50px, 50px)' }, { 'width': '50', 'height': '20' }); 35 testLayout("constrainedGrid", { 'rows': 'auto', 'columns': 'minmax(max-content, 50px)' }, { 'width': '120', 'height': '10' }); 36 testLayout("constrainedGrid", { 'rows': '70px', 'columns': 'minmax(max-content, 50px)' }, { 'width': '120', 'height': '70' }); 37 38 testLayout("constrainedGridUndefinedHeight", { 'rows': 'minmax(20px, 50px)', 'columns': 'minmax(30px, 50px)' }, { 'width': '30', 'height': '50' }); 39 testLayout("constrainedGridUndefinedHeight", { 'rows': 'minmax(40px, 50px)', 'columns': 'minmax(30px, 50px)' }, { 'width': '30', 'height': '50' }); 40 testLayout("constrainedGridUndefinedHeight", { 'rows': 'minmax(40px, 50px)', 'columns': 'minmax(50px, 50px)' }, { 'width': '50', 'height': '50' }); 41 testLayout("constrainedGridUndefinedHeight", { 'rows': 'auto', 'columns': 'minmax(50px, 50px)' }, { 'width': '50', 'height': '20' }); 42 testLayout("constrainedGridUndefinedHeight", { 'rows': 'auto', 'columns': 'minmax(max-content, 50px)' }, { 'width': '120', 'height': '10' }); 43 testLayout("constrainedGridUndefinedHeight", { 'rows': '70px', 'columns': 'minmax(max-content, 50px)' }, { 'width': '120', 'height': '70' }); 44 45 testLayout("unconstrainedGrid", { 'rows': 'minmax(20px, 50px)', 'columns': 'minmax(20px, 60px)' }, { 'width': '60', 'height': '50' }); 46 testLayout("unconstrainedGrid", { 'rows': 'minmax(20px, 50px)', 'columns': 'minmax(20px, 40px)' }, { 'width': '40', 'height': '50' }); 47 testLayout("unconstrainedGrid", { 'rows': 'minmax(20px, 30px)', 'columns': 'minmax(20px, 40px)' }, { 'width': '40', 'height': '30' }); 48 testLayout("unconstrainedGrid", { 'rows': 'auto', 'columns': 'minmax(20px, 40px)' }, { 'width': '40', 'height': '20' }); 49 testLayout("unconstrainedGrid", { 'rows': 'auto', 'columns': 'minmax(20px, max-content)' }, { 'width': '120', 'height': '10' }); 50 testLayout("unconstrainedGrid", { 'rows': 'auto', 'columns': 'minmax(150px, max-content)' }, { 'width': '150', 'height': '10' }); 51 testLayout("unconstrainedGrid", { 'rows': 'auto', 'columns': 'auto' }, { 'width': '120', 'height': '10' }); 52 testLayout("unconstrainedGrid", { 'rows': 'auto', 'columns': 'minmax(min-content, 1fr) 3fr' }, { 'width': '250', 'height': '10' }); 53 testLayout("unconstrainedGrid", { 'rows': 'auto', 'columns': 'minmax(min-content, 3fr) 3fr' }, { 'width': '500', 'height': '10' }, true); 54 } 55 </script> 56 <body onload="document.fonts.ready.then(() => { updateRowsColumns(); })"> 57 <div class="constrainedContainer"> 58 <div class="grid" id="constrainedGrid" style="height: 100%"> 59 <div class="sizedToGridArea">XXXXX XXXXXX</div> 60 </div> 61 </div> 62 63 <div class="constrainedContainer"> 64 <div class="grid" id="constrainedGridUndefinedHeight"> 65 <div class="sizedToGridArea">XXXXX XXXXXX</div> 66 </div> 67 </div> 68 69 <div class="unconstrainedContainer"> 70 <div class="grid justifyContentStart" id="unconstrainedGrid"> 71 <div class="sizedToGridArea">XXXXX XXXXXX</div> 72 </div> 73 </div> 74 75 </body> 76 </html>