third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-positioned-items-background-expected.html

   1 <!DOCTYPE html>
   2 <html>
   3 <style>
   4 .grid {
   5     width: 400px;
   6     height: 300px;
   7     border: 5px solid black;
   8     margin: 30px;
   9     padding: 15px;
  10     background-color: grey;
  11 }
  12
  13 .container {
  14     position: relative;
  15     float: left;
  16 }
  17
  18 .absolute {
  19     position: absolute;
  20 }
  21
  22 .green {
  23     background-color: green;
  24 }
  25 </style>
  26 <body>
  27
  28 <p>This test checks that the background of positioned items is painted in the right position.</p>
  29
  30 <p>The test passes if you see 4 green boxes and no red.</p>
  31
  32 <div class="container">
  33     <div class="grid"></div>
  34     <div class="absolute green" style="left: 55px; top: 50px; width: 100px; height: 50px"></div>
  35     <div class="absolute green" style="left: 290px; top: 50px; width: 50px; height: 20px"></div>
  36     <div class="absolute green" style="left: 50px; top: 115px; width: 50px; height: 30px"></div>
  37     <div class="absolute green" style="left: 175px; top: 135px; width: 145px; height: 75px"></div>
  38 </div>
  39
  40 </body>