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

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4     <link href="resources/grid.css" rel="stylesheet">
   5     <style>
   6         .grid {
   7             display: inline-grid;
   8             grid-template-columns: 50px;
   9             grid-template-rows: 50px 50px;
  10             width: 300px;
  11             height: 175px;
  12             background-color: transparent;
  13         }
  14
  15         .item {
  16             width: 100px;
  17             height: 100px;
  18         }
  19
  20         .grid :nth-child(1) {
  21             background-color: #CCC;
  22         }
  23
  24         .grid :nth-child(2) {
  25             background-color: #999;
  26         }
  27
  28         .grid :nth-child(3) {
  29             background-color: #333;
  30         }
  31
  32         .secondRowFirstColumn {
  33             margin-left: 10px;
  34             margin-top: 10px;
  35         }
  36
  37         .bothRowFirstColumn {
  38             margin-left: 20px;
  39             margin-top: 20px;
  40         }
  41     </style>
  42 </head>
  43 <body>
  44     <div>
  45         The test shows 6 grids each of them with 3 items sorted differently in the DOM.<br>
  46         Grid items should be painted from lighter (bottom) to darker (top) according to DOM ordering.
  47     </div>
  48     <div class="grid">
  49         <div class="item firstRowFirstColumn"></div>
  50         <div class="item secondRowFirstColumn"></div>
  51         <div class="item bothRowFirstColumn"></div>
  52     </div>
  53     <div class="grid">
  54         <div class="item secondRowFirstColumn"></div>
  55         <div class="item bothRowFirstColumn"></div>
  56         <div class="item firstRowFirstColumn"></div>
  57     </div>
  58     <div class="grid">
  59         <div class="item bothRowFirstColumn"></div>
  60         <div class="item firstRowFirstColumn"></div>
  61         <div class="item secondRowFirstColumn"></div>
  62     </div>
  63     <div class="grid">
  64         <div class="item secondRowFirstColumn"></div>
  65         <div class="item firstRowFirstColumn"></div>
  66         <div class="item bothRowFirstColumn"></div>
  67     </div>
  68     <div class="grid">
  69         <div class="item firstRowFirstColumn"></div>
  70         <div class="item bothRowFirstColumn"></div>
  71         <div class="item secondRowFirstColumn"></div>
  72     </div>
  73     <div class="grid">
  74         <div class="item bothRowFirstColumn"></div>
  75         <div class="item secondRowFirstColumn"></div>
  76         <div class="item firstRowFirstColumn"></div>
  77     </div>
  78 </body>
  79 </html>