third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-painting-respect-dom-order-expected.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4     <style>
   5         .grid {
   6             display: inline-block;
   7             width: 300px;
   8             height: 175px;
   9         }
  10
  11         .item {
  12             width: 100px;
  13             height: 100px;
  14         }
  15
  16         .grid :nth-child(1) {
  17             background-color: #CCC;
  18         }
  19
  20         .grid :nth-child(2) {
  21             background-color: #999;
  22         }
  23
  24         .grid :nth-child(3) {
  25             background-color: #333;
  26         }
  27
  28         .firstRowFirstColumn {
  29             position: relative;
  30             left: 0px;
  31         }
  32
  33         .secondRowFirstColumn {
  34             position: relative;
  35             left: 10px;
  36         }
  37
  38         .bothRowFirstColumn {
  39             position: relative;
  40             left: 20px;
  41         }
  42
  43         #grid1 .firstRowFirstColumn {
  44             top: 0px;
  45         }
  46
  47         #grid1 .secondRowFirstColumn {
  48             top: -40px;
  49         }
  50
  51         #grid1 .bothRowFirstColumn {
  52             top: -180px;
  53         }
  54
  55         #grid2 .firstRowFirstColumn {
  56             top: -200px;
  57         }
  58
  59         #grid2 .secondRowFirstColumn {
  60             top: 60px;
  61         }
  62
  63         #grid2 .bothRowFirstColumn {
  64             top: -80px;
  65         }
  66
  67         #grid3 .firstRowFirstColumn {
  68             top: -100px;
  69         }
  70
  71         #grid3 .secondRowFirstColumn {
  72             top: -140px;
  73         }
  74
  75         #grid3 .bothRowFirstColumn {
  76             top: 20px;
  77         }
  78
  79         #grid4 .firstRowFirstColumn {
  80             top: -100px;
  81         }
  82
  83         #grid4 .secondRowFirstColumn {
  84             top: 60px;
  85         }
  86
  87         #grid4 .bothRowFirstColumn {
  88             top: -180px;
  89         }
  90
  91         #grid5 .firstRowFirstColumn {
  92             top: 0px;
  93         }
  94
  95         #grid5 .secondRowFirstColumn {
  96             top: -140px;
  97         }
  98
  99         #grid5 .bothRowFirstColumn {
 100             top: -80px;
 101         }
 102
 103         #grid6 .firstRowFirstColumn {
 104             top: -200px;
 105         }
 106
 107         #grid6 .secondRowFirstColumn {
 108             top: -40px;
 109         }
 110
 111         #grid6 .bothRowFirstColumn {
 112             top: 20px;
 113         }
 114     </style>
 115 </head>
 116 <body>
 117     <div>
 118         The test shows 6 grids each of them with 3 items sorted differently in the DOM.<br>
 119         Grid items should be painted from lighter (bottom) to darker (top) according to DOM ordering.
 120     </div>
 121     <div id="grid1" class="grid">
 122         <div class="item firstRowFirstColumn"></div>
 123         <div class="item secondRowFirstColumn"></div>
 124         <div class="item bothRowFirstColumn"></div>
 125     </div>
 126     <div id="grid2" class="grid">
 127         <div class="item secondRowFirstColumn"></div>
 128         <div class="item bothRowFirstColumn"></div>
 129         <div class="item firstRowFirstColumn"></div>
 130     </div>
 131     <div id="grid3" class="grid">
 132         <div class="item bothRowFirstColumn"></div>
 133         <div class="item firstRowFirstColumn"></div>
 134         <div class="item secondRowFirstColumn"></div>
 135     </div>
 136     <div id="grid4" class="grid">
 137         <div class="item secondRowFirstColumn"></div>
 138         <div class="item firstRowFirstColumn"></div>
 139         <div class="item bothRowFirstColumn"></div>
 140     </div>
 141     <div id="grid5" class="grid">
 142         <div class="item firstRowFirstColumn"></div>
 143         <div class="item bothRowFirstColumn"></div>
 144         <div class="item secondRowFirstColumn"></div>
 145     </div>
 146     <div id="grid6" class="grid">
 147         <div class="item bothRowFirstColumn"></div>
 148         <div class="item secondRowFirstColumn"></div>
 149         <div class="item firstRowFirstColumn"></div>
 150     </div>
 151 </body>
 152 </html>