third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-painting-items-only-once.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4     <link href="resources/grid.css" rel="stylesheet">
   5     <style>
   6         .grid2Rows2Columns {
   7             grid-template-columns: auto auto;
   8             grid-template-rows: auto auto;
   9         }
  10
  11         .gridAreas2Rows {
  12             grid-template-areas: "a a"
  13                                  "b b";
  14         }
  15
  16         .gridAreas2Columns {
  17             grid-template-areas: "a b"
  18                                  "a b";
  19         }
  20
  21         .areaA {
  22             grid-area: a;
  23         }
  24
  25         .areaB {
  26             grid-area: b;
  27         }
  28     </style>
  29 </head>
  30 <body>
  31     <div>
  32         This test shows 4 grids where all the items are placed in several cells (span or areas).<br>
  33         It passes if these grid items are painted only once.
  34     </div>
  35     <div class="grid grid2Rows2Columns">
  36         <div class="firstRowBothColumn">item</div>
  37         <div class="secondRowBothColumn">item</div>
  38     </div>
  39     <div class="grid grid2Rows2Columns">
  40         <div class="bothRowFirstColumn">item</div>
  41         <div class="bothRowSecondColumn">item</div>
  42     </div>
  43     <div class="grid gridAreas2Rows">
  44         <div class="areaA">item</div>
  45         <div class="areaB">item</div>
  46     </div>
  47     <div class="grid gridAreas2Columns">
  48         <div class="areaA">item</div>
  49         <div class="areaB">item</div>
  50     </div>
  51 </body>
  52 </html>