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

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