third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-order-auto-flow-resolution.html

   1 <!DOCTYPE html>
   2 <html>
   3 <link href="resources/grid.css" rel="stylesheet">
   4 <style>
   5 .grid {
   6     grid-template-columns: 50px 100px;
   7     grid-template-rows: 50px 100px;
   8 }
   9
  10 .negativeOrder {
  11     order: -1;
  12 }
  13
  14 .positiveOrder {
  15     order: 10;
  16 }
  17 </style>
  18 </head>
  19 <script src="../../resources/check-layout.js"></script>
  20 <body onload="checkLayout('.grid')">
  21     <p>This test checks that the auto-placement algorithm takes 'order' into account when placing grid items.</p>
  22
  23     <!-- Step 1, grid item with a major-axis position that is not 'auto'. -->
  24     <div style="position: relative">
  25         <div class="grid gridAutoFlowRowDense">
  26             <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
  27             <div class="sizedToGridArea firstRowAutoColumn negativeOrder" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
  28         </div>
  29     </div>
  30
  31     <div style="position: relative">
  32         <div class="grid gridAutoFlowRowDense">
  33             <div class="sizedToGridArea firstRowAutoColumn positiveOrder" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
  34             <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
  35         </div>
  36     </div>
  37
  38     <!-- Step 4.1, grid items with a minor-axis position that is not 'auto'. -->
  39     <div style="position: relative">
  40         <div class="grid gridAutoFlowColumnDense">
  41             <div class="sizedToGridArea secondRowAutoColumn" data-offset-x="50" data-offset-y="50" data-expected-width="100" data-expected-height="100"></div>
  42             <div class="sizedToGridArea secondRowAutoColumn negativeOrder" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
  43         </div>
  44     </div>
  45
  46     <div style="position: relative">
  47         <div class="grid gridAutoFlowColumnDense">
  48             <div class="sizedToGridArea secondRowAutoColumn positiveOrder" data-offset-x="50" data-offset-y="50" data-expected-width="100" data-expected-height="100"></div>
  49             <div class="sizedToGridArea secondRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
  50         </div>
  51     </div>
  52
  53     <!-- Step 4.2, both minor and major-axis position are 'auto'. -->
  54     <div style="position: relative">
  55         <div class="grid gridAutoFlowColumnDense">
  56             <div class="sizedToGridArea" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
  57             <div class="sizedToGridArea negativeOrder" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
  58         </div>
  59     </div>
  60
  61     <div style="position: relative">
  62         <div class="grid gridAutoFlowColumnDense">
  63             <div class="sizedToGridArea positiveOrder" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
  64             <div class="sizedToGridArea" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
  65         </div>
  66     </div>
  67
  68 </body>
  69 </html>