third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-auto-columns-rows-update.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <head>
   4 <link href="resources/grid.css" rel="stylesheet">
   5 <style>
   6 .grid {
   7     grid-template-rows: 20px;
   8     grid-template-columns: 10px;
   9     grid-auto-rows: 30px;
  10     grid-auto-columns: 50px;
  11     font: 10px/1 Ahem;
  12 }
  13 </style>
  14 </head>
  15 <script src="../../resources/check-layout.js"></script>
  16 <script>
  17 function updateAndCheck(gridElementID, defaultSizing, gridItemSize)
  18 {
  19     var gridElement = document.getElementById(gridElementID);
  20     gridElement.style.gridAutoRows = defaultSizing.rows;
  21     gridElement.style.gridAutoColumns = defaultSizing.columns;
  22
  23     var gridItem = gridElement.firstChild.nextSibling;
  24     gridItem.setAttribute("data-expected-width", gridItemSize.width);
  25     gridItem.setAttribute("data-expected-height", gridItemSize.height);
  26
  27     checkLayout("#" + gridElementID, document.getElementById("test-output"));
  28 }
  29
  30 function updateGridAutoRowsColumns()
  31 {
  32     checkLayout('.grid', document.getElementById("test-output"));
  33
  34     // The constrained example is always sized to the min width so we don't test max width.
  35     updateAndCheck("constrainedGrid", { 'rows': 'minmax(20em, 15px)', 'columns': '50px' }, { 'width': '50', 'height': '200' });
  36     updateAndCheck("constrainedGrid", { 'rows': 'minmax(20em, 15px)', 'columns': 'minmax(10%, 100px)' }, { 'width': '1', 'height': '200' });
  37     updateAndCheck("constrainedGrid", { 'rows': 'minmax(min-content, 15px)', 'columns': 'minmax(10%, 100px)' }, { 'width': '1', 'height': '20' });
  38     updateAndCheck("constrainedGrid", { 'rows': 'minmax(min-content, 15px)', 'columns': 'minmax(max-content, 100px)' }, { 'width': '120', 'height': '10' });
  39     updateAndCheck("constrainedGrid", { 'rows': 'minmax(40em, 15px)', 'columns': 'minmax(max-content, 100px)' }, { 'width': '120', 'height': '400' });
  40     updateAndCheck("constrainedGrid", { 'rows': 'minmax(40em, 15px)', 'columns': 'minmax(10%, 100px)' }, { 'width': '1', 'height': '400' });
  41     updateAndCheck("constrainedGrid", { 'rows': 'minmax(40em, 15px)', 'columns': 'auto' }, { 'width': '60', 'height': '400' });
  42     updateAndCheck("constrainedGrid", { 'rows': 'auto', 'columns': 'auto' }, { 'width': '60', 'height': '20' });
  43
  44     updateAndCheck("unconstrainedGrid", { 'rows': 'minmax(20em, 15px)', 'columns': '50px' }, { 'width': '50', 'height': '200' });
  45     updateAndCheck("unconstrainedGrid", { 'rows': 'minmax(20em, 15px)', 'columns': 'minmax(10%, 100px)' }, { 'width': '100', 'height': '200' });
  46     updateAndCheck("unconstrainedGrid", { 'rows': 'minmax(min-content, 15px)', 'columns': 'minmax(10%, 100px)' }, { 'width': '100', 'height': '20' });
  47     updateAndCheck("unconstrainedGrid", { 'rows': 'minmax(min-content, 15px)', 'columns': 'minmax(10%, max-content)' }, { 'width': '120', 'height': '15' });
  48     updateAndCheck("unconstrainedGrid", { 'rows': 'minmax(min-content, 15px)', 'columns': 'minmax(10%, max-content)' }, { 'width': '120', 'height': '15' });
  49     updateAndCheck("unconstrainedGrid", { 'rows': 'auto', 'columns': 'minmax(10em, max-content)' }, { 'width': '120', 'height': '10' });
  50     updateAndCheck("unconstrainedGrid", { 'rows': 'auto', 'columns': 'minmax(20em, max-content)' }, { 'width': '200', 'height': '10' });
  51     updateAndCheck("unconstrainedGrid", { 'rows': 'auto', 'columns': 'auto' }, { 'width': '120', 'height': '10' });
  52
  53     updateAndCheck("constrainedGridUndefinedHeight", { 'rows': 'minmax(20em, 15px)', 'columns': '50px' }, { 'width': '50', 'height': '200' });
  54     updateAndCheck("constrainedGridUndefinedHeight", { 'rows': 'minmax(20em, 15px)', 'columns': 'minmax(10%, 100px)' }, { 'width': '1', 'height': '200' });
  55     updateAndCheck("constrainedGridUndefinedHeight", { 'rows': 'minmax(min-content, 15px)', 'columns': 'minmax(10%, 100px)' }, { 'width': '1', 'height': '20' });
  56     updateAndCheck("constrainedGridUndefinedHeight", { 'rows': 'minmax(min-content, 15px)', 'columns': 'minmax(max-content, 100px)' }, { 'width': '120', 'height': '15' });
  57     updateAndCheck("constrainedGridUndefinedHeight", { 'rows': 'minmax(40em, 15px)', 'columns': 'minmax(max-content, 100px)' }, { 'width': '120', 'height': '400' });
  58     updateAndCheck("constrainedGridUndefinedHeight", { 'rows': 'minmax(40em, 15px)', 'columns': 'minmax(10%, 100px)' }, { 'width': '1', 'height': '400' });
  59     updateAndCheck("constrainedGridUndefinedHeight", { 'rows': 'minmax(40em, 15px)', 'columns': 'auto' }, { 'width': '60', 'height': '400' });
  60     updateAndCheck("constrainedGridUndefinedHeight", { 'rows': 'auto', 'columns': 'auto' }, { 'width': '60', 'height': '20' });
  61 }
  62
  63 window.addEventListener("load", updateGridAutoRowsColumns, false);
  64 </script>
  65 <body>
  66
  67 <div>This test checks that grid-auto-{row|column} updates properly recomputes the grid items' sizes.</div>
  68
  69 <div class="constrainedContainer" style="position: relative">
  70     <div class="grid" id="constrainedGrid" style="height: 100%; width: 100%;">
  71         <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="10" data-offset-y="20" data-expected-width="50" data-expected-height="30">XXXXX XXXXXX</div>
  72     </div>
  73 </div>
  74
  75 <div class="unconstrainedContainer" style="position: relative">
  76     <div class="grid" id="unconstrainedGrid">
  77         <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="10" data-offset-y="20" data-expected-width="50" data-expected-height="30">XXXXX XXXXXX</div>
  78     </div>
  79 </div>
  80
  81 <div class="constrainedContainer" style="position: relative;">
  82     <div class="grid" id="constrainedGridUndefinedHeight" style="width: 100%;">
  83         <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="10" data-offset-y="20" data-expected-width="50" data-expected-height="30">XXXXX XXXXXX</div>
  84     </div>
  85 </div>
  86
  87 <div id="test-output"></div>
  88
  89 </body>
  90 </html>