third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-change-order-auto-flow.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     grid-template-rows: 50px 100px;
   9     grid-template-columns: 40px;
  10 }
  11
  12 #firstGridItem {
  13     grid-row: auto;
  14     grid-column: 1;
  15 }
  16
  17 #secondGridItem {
  18     grid-row: 1;
  19     grid-column: auto;
  20 }
  21
  22 #thirdGridItem {
  23     grid-row: auto;
  24     grid-column: auto;
  25 }
  26 </style>
  27 <script>
  28 function testGridItemsOrder(firstGridItemData, secondGridItemData, thirdGridItemData)
  29 {
  30     var firstGridItem = document.getElementById("firstGridItem");
  31     firstGridItem.style.order = firstGridItemData.order;
  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.style.order = secondGridItemData.order;
  39     secondGridItem.setAttribute("data-expected-width", secondGridItemData.width);
  40     secondGridItem.setAttribute("data-expected-height", secondGridItemData.height);
  41     secondGridItem.setAttribute("data-offset-x", secondGridItemData.x);
  42     secondGridItem.setAttribute("data-offset-y", secondGridItemData.y);
  43
  44     var thirdGridItem = document.getElementById("thirdGridItem");
  45     thirdGridItem.style.order = thirdGridItemData.order;
  46     thirdGridItem.setAttribute("data-expected-width", thirdGridItemData.width);
  47     thirdGridItem.setAttribute("data-expected-height", thirdGridItemData.height);
  48     thirdGridItem.setAttribute("data-offset-x", thirdGridItemData.x);
  49     thirdGridItem.setAttribute("data-offset-y", thirdGridItemData.y);
  50
  51     checkLayout(".grid");
  52 }
  53
  54 function testChangingGridItemsOrder()
  55 {
  56     testGridItemsOrder({ 'order': '0', 'width': '40', 'height': '100', 'x': '0', 'y': '50' }, { 'order': '0', 'width': '40', 'height': '50', 'x': '0', 'y': '0' }, { 'order': '0', 'width': '40', 'height': '0', 'x': '0', 'y': '150' });
  57     testGridItemsOrder({ 'order': '0', 'width': '40', 'height': '100', 'x': '0', 'y': '50' }, { 'order': '-1', 'width': '40', 'height': '50', 'x': '0', 'y': '0' }, { 'order': '0', 'width': '40', 'height': '0', 'x': '0', 'y': '150' });
  58     testGridItemsOrder({ 'order': '1', 'width': '40', 'height': '0', 'x': '0', 'y': '150' }, { 'order': '-1', 'width': '40', 'height': '50', 'x': '0', 'y': '0' }, { 'order': '0', 'width': '40', 'height': '100', 'x': '0', 'y': '50' });
  59     testGridItemsOrder({ 'order': '1', 'width': '40', 'height': '100', 'x': '0', 'y': '50' }, { 'order': '-1', 'width': '40', 'height': '50', 'x': '0', 'y': '0' }, { 'order': '10', 'width': '40', 'height': '0', 'x': '0', 'y': '150' });
  60 }
  61
  62 window.addEventListener("load", testChangingGridItemsOrder, false);
  63 </script>
  64 <body>
  65 <div>This test checks that grid items' 'order' dynamic updates recomputes the positions of automatically placed grid items.</div>
  66
  67 <div style="position: relative">
  68     <div class="grid">
  69         <div class="sizedToGridArea" id="firstGridItem"></div>
  70         <div class="sizedToGridArea" id="secondGridItem"></div>
  71         <div class="sizedToGridArea" id="thirdGridItem"></div>
  72     </div>
  73 </div>
  74
  75 </body>
  76 </html>