src/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-dynamic-updates-relayout.html

   1 <!DOCTYPE html>
   2 <html>
   3 <script>
   4 if (window.testRunner)
   5     testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
   6 </script>
   7 <link href="resources/grid.css" rel="stylesheet">
   8 <script src="../../resources/check-layout.js"></script>
   9 <script>
  10 function testLayout(gridElementID, gridTracks, size)
  11 {
  12     var gridElement = document.getElementById(gridElementID);
  13     gridElement.style.gridTemplateColumns = gridTracks.columns;
  14     gridElement.style.gridTemplateRows = gridTracks.rows;
  15     var gridItem = gridElement.firstChild.nextSibling;
  16     gridItem.setAttribute("data-expected-width", size.width);
  17     gridItem.setAttribute("data-expected-height", size.height);
  18     checkLayout("#" + gridElementID);
  19 }
  20
  21 function updateRowsColumns()
  22 {
  23     // 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.
  24     testLayout("constrainedGrid", { 'rows': 'minmax(20px, 50px)', 'columns': 'minmax(30px, 50px)' }, { 'width': '30', 'height': '20' });
  25     testLayout("constrainedGrid", { 'rows': 'minmax(40px, 50px)', 'columns': 'minmax(30px, 50px)' }, { 'width': '30', 'height': '40' });
  26     testLayout("constrainedGrid", { 'rows': 'minmax(40px, 50px)', 'columns': 'minmax(50px, 50px)' }, { 'width': '50', 'height': '40' });
  27     testLayout("constrainedGrid", { 'rows': 'auto', 'columns': 'minmax(50px, 50px)' }, { 'width': '50', 'height': '20' });
  28     testLayout("constrainedGrid", { 'rows': 'auto', 'columns': 'minmax(max-content, 50px)' }, { 'width': '120', 'height': '10' });
  29     testLayout("constrainedGrid", { 'rows': '70px', 'columns': 'minmax(max-content, 50px)' }, { 'width': '120', 'height': '70' });
  30
  31     testLayout("constrainedGridUndefinedHeight", { 'rows': 'minmax(20px, 50px)', 'columns': 'minmax(30px, 50px)' }, { 'width': '30', 'height': '50' });
  32     testLayout("constrainedGridUndefinedHeight", { 'rows': 'minmax(40px, 50px)', 'columns': 'minmax(30px, 50px)' }, { 'width': '30', 'height': '50' });
  33     testLayout("constrainedGridUndefinedHeight", { 'rows': 'minmax(40px, 50px)', 'columns': 'minmax(50px, 50px)' }, { 'width': '50', 'height': '50' });
  34     testLayout("constrainedGridUndefinedHeight", { 'rows': 'auto', 'columns': 'minmax(50px, 50px)' }, { 'width': '50', 'height': '20' });
  35     testLayout("constrainedGridUndefinedHeight", { 'rows': 'auto', 'columns': 'minmax(max-content, 50px)' }, { 'width': '120', 'height': '10' });
  36     testLayout("constrainedGridUndefinedHeight", { 'rows': '70px', 'columns': 'minmax(max-content, 50px)' }, { 'width': '120', 'height': '70' });
  37
  38     testLayout("unconstrainedGrid", { 'rows': 'minmax(20px, 50px)', 'columns': 'minmax(20px, 60px)' }, { 'width': '60', 'height': '50' });
  39     testLayout("unconstrainedGrid", { 'rows': 'minmax(20px, 50px)', 'columns': 'minmax(20px, 40px)' }, { 'width': '40', 'height': '50' });
  40     testLayout("unconstrainedGrid", { 'rows': 'minmax(20px, 30px)', 'columns': 'minmax(20px, 40px)' }, { 'width': '40', 'height': '30' });
  41     testLayout("unconstrainedGrid", { 'rows': 'auto', 'columns': 'minmax(20px, 40px)' }, { 'width': '40', 'height': '20' });
  42     testLayout("unconstrainedGrid", { 'rows': 'auto', 'columns': 'minmax(20px, max-content)' }, { 'width': '120', 'height': '10' });
  43     testLayout("unconstrainedGrid", { 'rows': 'auto', 'columns': 'minmax(150px, max-content)' }, { 'width': '150', 'height': '10' });
  44     testLayout("unconstrainedGrid", { 'rows': 'auto', 'columns': 'auto' }, { 'width': '120', 'height': '10' });
  45     testLayout("unconstrainedGrid", { 'rows': 'auto', 'columns': 'minmax(min-content, 1fr) 3fr' }, { 'width': '250', 'height': '10' });
  46     testLayout("unconstrainedGrid", { 'rows': 'auto', 'columns': 'minmax(min-content, 3fr) 3fr' }, { 'width': '500', 'height': '10' });
  47 }
  48
  49 window.addEventListener("load", updateRowsColumns, false);
  50 </script>
  51 <body>
  52 <div>This test checks that grid-{rows|columns} dynamic updates properly relayout the grid items.</div>
  53 <div class="constrainedContainer">
  54     <div class="grid" id="constrainedGrid" style="height: 100%">
  55         <div class="sizedToGridArea">XXXXX XXXXXX</div>
  56     </div>
  57 </div>
  58
  59 <div class="constrainedContainer">
  60     <div class="grid" id="constrainedGridUndefinedHeight">
  61         <div class="sizedToGridArea">XXXXX XXXXXX</div>
  62     </div>
  63 </div>
  64
  65 <div class="unconstrainedContainer">
  66     <div class="grid" id="unconstrainedGrid">
  67         <div class="sizedToGridArea">XXXXX XXXXXX</div>
  68     </div>
  69 </div>
  70 </body>
  71 </html>