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

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