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