src/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-container-change-named-grid-lines-recompute-child.html

   1 <!DOCTYPE html>
   2 <html>
   3 <link href="resources/grid.css" rel="stylesheet">
   4 <script src="../../resources/check-layout.js"></script>
   5 <style>
   6 .grid {
   7     grid-auto-flow: row;
   8 }
   9 #firstGridItem {
  10     grid-row: auto;
  11     grid-column: 'column';
  12 }
  13
  14 #secondGridItem {
  15     grid-row: 'row';
  16     grid-column: auto;
  17 }
  18
  19 #thirdGridItem {
  20     grid-row: auto;
  21     grid-column: auto;
  22 }
  23 </style>
  24 <script>
  25 function testGridDefinitions(gridTemplateRows, gridTemplateColumns, firstGridItemData, secondGridItemData, thirdGridItemData)
  26 {
  27     var gridElement = document.getElementsByClassName("grid")[0];
  28     gridElement.style.gridTemplateRows = gridTemplateRows;
  29     gridElement.style.gridTemplateColumns = gridTemplateColumns;
  30
  31     var firstGridItem = document.getElementById("firstGridItem");
  32     firstGridItem.setAttribute("data-expected-width", firstGridItemData.width);
  33     firstGridItem.setAttribute("data-expected-height", firstGridItemData.height);
  34     firstGridItem.setAttribute("data-offset-x", firstGridItemData.x);
  35     firstGridItem.setAttribute("data-offset-y", firstGridItemData.y);
  36
  37     var secondGridItem = document.getElementById("secondGridItem");
  38     secondGridItem.setAttribute("data-expected-width", secondGridItemData.width);
  39     secondGridItem.setAttribute("data-expected-height", secondGridItemData.height);
  40     secondGridItem.setAttribute("data-offset-x", secondGridItemData.x);
  41     secondGridItem.setAttribute("data-offset-y", secondGridItemData.y);
  42
  43     var thirdGridItem = document.getElementById("thirdGridItem");
  44     thirdGridItem.setAttribute("data-expected-width", thirdGridItemData.width);
  45     thirdGridItem.setAttribute("data-expected-height", thirdGridItemData.height);
  46     thirdGridItem.setAttribute("data-offset-x", thirdGridItemData.x);
  47     thirdGridItem.setAttribute("data-offset-y", thirdGridItemData.y);
  48
  49     checkLayout(".grid");
  50 }
  51
  52 function testChangingGridDefinitions()
  53 {
  54     testGridDefinitions('10px (row) 20px', '30px (column)', { 'width': '0', 'height': '10', 'x': '30', 'y': '0' }, { 'width': '30', 'height': '20', 'x': '0', 'y': '10' }, { 'width': '30', 'height': '10', 'x': '0', 'y': '0' });
  55     testGridDefinitions('10px (row) 20px', '30px', { 'width': '30', 'height': '10', 'x': '0', 'y': '0' }, { 'width': '30', 'height': '20', 'x': '0', 'y': '10' }, { 'width': '30', 'height': '0', 'x': '0', 'y': '30' });
  56     testGridDefinitions('10px 20px (row)', '30px', { 'width': '30', 'height': '10', 'x': '0', 'y': '0' }, { 'width': '30', 'height': '0', 'x': '0', 'y': '30' }, { 'width': '30', 'height': '20', 'x': '0', 'y': '10' });
  57     testGridDefinitions('10px 20px (row)', '30px (column)', { 'width': '0', 'height': '10', 'x': '30', 'y': '0' }, { 'width': '30', 'height': '0', 'x': '0', 'y': '30' }, { 'width': '30', 'height': '10', 'x': '0', 'y': '0' });
  58 }
  59
  60 window.addEventListener("load", testChangingGridDefinitions, false);
  61 </script>
  62 <body>
  63 <div>This test checks that updating the named grid lines definitions in grid-template-{rows|columns} recomputes the positions of automatically placed grid items.</div>
  64
  65 <div style="position: relative">
  66     <div class="grid">
  67         <div class="sizedToGridArea" id="firstGridItem"></div>
  68         <div class="sizedToGridArea" id="secondGridItem"></div>
  69         <div class="sizedToGridArea" id="thirdGridItem"></div>
  70     </div>
  71 </div>
  72
  73 </body>
  74 </html>