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