third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-order-paint-order.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <link href="resources/grid.css" rel="stylesheet">
   5 <style>
   6 .grid {
   7     grid-template-rows: 100px;
   8     grid-template-columns: 100px;
   9     width: -webkit-fit-content;
  10 }
  11 .sizedToGridArea {
  12     background-color: green;
  13 }
  14
  15 .red {
  16     background-color: red;
  17 }
  18
  19 .negativeOrder {
  20     order: -1;
  21 }
  22
  23 .positiveOrder {
  24     order: 10;
  25 }
  26 </style>
  27 </head>
  28 <body>
  29     <p>This test checks that 'order' changes the paint ordering.</p>
  30     <p>There should be 2 green squares below.</p>
  31     <div class="grid">
  32         <div class="sizedToGridArea firstRowFirstColumn"></div>
  33         <div class="sizedToGridArea firstRowFirstColumn negativeOrder red"></div>
  34     </div>
  35
  36     <div class="grid">
  37         <div class="sizedToGridArea firstRowFirstColumn positiveOrder"></div>
  38         <div class="sizedToGridArea firstRowFirstColumn red"></div>
  39     </div>
  40 </body>
  41 </html>