src/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-addition-track-breadth-update.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 <style>
   9 .gridFixedContent {
  10     grid-definition-columns: 50px minmax(min-content, 50px) minmax(max-content, 50px) minmax(50px, min-content);
  11     grid-definition-rows: 70px minmax(max-content, 70px) minmax(50px, min-content) minmax(65px, max-content);
  12 }
  13
  14 .sizedToGridArea {
  15     font: 10px/1 Ahem;
  16     /* Make us fit our grid area. */
  17     width: 100%;
  18     height: 100%;
  19 }
  20 </style>
  21 <script src="../../resources/check-layout.js"></script>
  22 <script>
  23 function testPosition(gridElementID, content, position, size)
  24 {
  25     var gridItem = document.createElement("div");
  26     gridItem.classList.add("sizedToGridArea");
  27     gridItem.innerHTML = content;
  28     gridItem.style.gridColumn = position.column;
  29     gridItem.style.gridRow = position.row;
  30     gridItem.setAttribute("data-expected-width", size.width);
  31     gridItem.setAttribute("data-expected-height", size.height);
  32     var gridElement = document.getElementById(gridElementID);
  33     gridElement.appendChild(gridItem);
  34     checkLayout("#" + gridElementID);
  35 }
  36
  37 function updateImplicitGridColumn()
  38 {
  39     testPosition("constrainedGrid", "XXXX XXXX XXXX", { 'column': '10', 'row': '15' }, { 'width': '40', 'height': '30' });
  40
  41     testPosition("constrainedGrid", "XXXX XXXX XXXX", { 'column': '1', 'row': '1' }, { 'width': '50', 'height': '70' });
  42     testPosition("constrainedGrid", "XXXX XXXX XXXX", { 'column': '1', 'row': '2' }, { 'width': '50', 'height': '30' });
  43     testPosition("constrainedGrid", "XXXX XXXX XXXX", { 'column': '1', 'row': '3' }, { 'width': '50', 'height': '50' });
  44     testPosition("constrainedGrid", "XXXX XXXX XXXX", { 'column': '1', 'row': '4' }, { 'width': '50', 'height': '65' });
  45     testPosition("constrainedGrid", "XXXX XXXX XXXX", { 'column': '1', 'row': '5' }, { 'width': '50', 'height': '30' });
  46
  47     testPosition("constrainedGrid", "XXXX XXXX XXXX", { 'column': '2', 'row': '1' }, { 'width': '40', 'height': '70' });
  48     testPosition("constrainedGrid", "XXXX XXXX XXXX", { 'column': '2', 'row': '2' }, { 'width': '40', 'height': '30' });
  49     testPosition("constrainedGrid", "XXXX XXXX XXXX", { 'column': '2', 'row': '3' }, { 'width': '40', 'height': '50' });
  50     testPosition("constrainedGrid", "XXXX XXXX XXXX", { 'column': '2', 'row': '4' }, { 'width': '40', 'height': '65' });
  51     testPosition("constrainedGrid", "XXXX XXXX XXXX", { 'column': '2', 'row': '5' }, { 'width': '40', 'height': '30' });
  52
  53     testPosition("constrainedGrid", "XXXX XXXX XXXX", { 'column': '3', 'row': '1' }, { 'width': '140', 'height': '70' });
  54     testPosition("constrainedGrid", "XXXX XXXX XXXX", { 'column': '3', 'row': '2' }, { 'width': '140', 'height': '30' });
  55     testPosition("constrainedGrid", "XXXX XXXX XXXX", { 'column': '3', 'row': '3' }, { 'width': '140', 'height': '50' });
  56     testPosition("constrainedGrid", "XXXX XXXX XXXX", { 'column': '3', 'row': '4' }, { 'width': '140', 'height': '65' });
  57     testPosition("constrainedGrid", "XXXX XXXX XXXX", { 'column': '3', 'row': '5' }, { 'width': '140', 'height': '30' });
  58
  59     testPosition("constrainedGrid", "XXXX XXXX XXXX", { 'column': '4', 'row': '1' }, { 'width': '50', 'height': '70' });
  60     testPosition("constrainedGrid", "XXXX XXXX XXXX", { 'column': '4', 'row': '2' }, { 'width': '50', 'height': '30' });
  61     testPosition("constrainedGrid", "XXXX XXXX XXXX", { 'column': '4', 'row': '3' }, { 'width': '50', 'height': '50' });
  62     testPosition("constrainedGrid", "XXXX XXXX XXXX", { 'column': '4', 'row': '4' }, { 'width': '50', 'height': '65' });
  63     testPosition("constrainedGrid", "XXXX XXXX XXXX", { 'column': '4', 'row': '5' }, { 'width': '50', 'height': '30' });
  64
  65     testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '10', 'row': '15' }, { 'width': '130', 'height': '10' });
  66
  67     testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '1', 'row': '1' }, { 'width': '50', 'height': '70' });
  68     testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '2', 'row': '1' }, { 'width': '60', 'height': '70' });
  69     testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '3', 'row': '1' }, { 'width': '130', 'height': '70' });
  70     testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '4', 'row': '1' }, { 'width': '60', 'height': '70' });
  71     testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '5', 'row': '1' }, { 'width': '130', 'height': '70' });
  72
  73     testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '1', 'row': '2' }, { 'width': '50', 'height': '70' });
  74     testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '2', 'row': '2' }, { 'width': '60', 'height': '70' });
  75     testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '3', 'row': '2' }, { 'width': '130', 'height': '70' });
  76     testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '4', 'row': '2' }, { 'width': '60', 'height': '70' });
  77     testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '5', 'row': '2' }, { 'width': '130', 'height': '70' });
  78
  79     testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '1', 'row': '3' }, { 'width': '50', 'height': '50' });
  80     testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '2', 'row': '3' }, { 'width': '60', 'height': '50' });
  81     testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '3', 'row': '3' }, { 'width': '130', 'height': '50' });
  82     testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '4', 'row': '3' }, { 'width': '60', 'height': '50' });
  83     testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '5', 'row': '3' }, { 'width': '130', 'height': '50' });
  84
  85     testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '1', 'row': '4' }, { 'width': '50', 'height': '65' });
  86     testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '2', 'row': '4' }, { 'width': '60', 'height': '65' });
  87     testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '3', 'row': '4' }, { 'width': '130', 'height': '65' });
  88     testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '4', 'row': '4' }, { 'width': '60', 'height': '65' });
  89     testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '5', 'row': '4' }, { 'width': '130', 'height': '65' });
  90 }
  91 window.addEventListener("load", updateImplicitGridColumn, false);
  92 </script>
  93 <body>
  94
  95 <p>This test checks that we properly recompute our grid tracks' sizes when we add more grid items.</p>
  96
  97 <div class="constrainedContainer">
  98     <div class="grid gridFixedContent" id="constrainedGrid"></div>
  99 </div>
 100
 101 <!-- Allow the extra logical space distribution to occur. -->
 102 <div style="width: 1000px; height: 1000px">
 103     <div class="grid gridFixedContent" id="unconstrainedGrid"><div class="sizedToGridArea">XXXXXX XXXXXX</div></div>
 104 </div>
 105
 106 </body>
 107 </html>