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

   1 <!DOCTYPE html>
   2 <html>
   3 <link href="resources/grid.css" rel="stylesheet">
   4 <style>
   5
   6 .grid {
   7     grid-template-columns: 100px 200px;
   8     grid-template-rows: 50px 150px;
   9     width: 400px;
  10     height: 300px;
  11     border: 5px solid black;
  12     margin: 30px;
  13     padding: 15px;
  14     /* Ensures that the grid container is the containing block of the absolutely positioned grid children. */
  15     position: relative;
  16 }
  17
  18 .container {
  19     position: relative;
  20     float: left;
  21 }
  22
  23 .absolute {
  24     position: absolute;
  25 }
  26
  27 .grid > div {
  28     background-color: green;
  29 }
  30
  31 .lengthSize {
  32     width: 50px;
  33     height: 20px;
  34 }
  35
  36 .percentageSize {
  37     width: 50%;
  38     height: 20%;
  39 }
  40
  41 .offsetsSize {
  42     left: 25px;
  43     right: 30px;
  44     top: 35px;
  45     bottom: 40px;
  46 }
  47
  48 .red {
  49     background-color: red;
  50 }
  51 </style>
  52 <body>
  53
  54 <p>This test checks that the background of positioned items is painted in the right position.</p>
  55
  56 <p>The test passes if you see 4 green boxes and no red.</p>
  57
  58 <div class="container">
  59     <div class="absolute red" style="left: 55px; top: 50px; width: 100px; height: 50px"></div>
  60     <div class="absolute red" style="left: 290px; top: 50px; width: 50px; height: 20px"></div>
  61     <div class="absolute red" style="left: 50px; top: 115px; width: 50px; height: 30px"></div>
  62     <div class="absolute red" style="left: 175px; top: 135px; width: 145px; height: 75px"></div>
  63     <div class="grid">
  64         <div class="absolute onlyFirstRowOnlyFirstColumn sizedToGridArea"
  65             style="left: 5px;">
  66         </div>
  67         <div class="absolute onlyFirstRowOnlySecondColumn lengthSize"
  68             style="right: 10px;">
  69         </div>
  70         <div class="absolute onlySecondRowOnlyFirstColumn percentageSize"
  71             style="top: 15px;">
  72         </div>
  73         <div class="absolute onlySecondRowOnlySecondColumn offsetsSize"></div>
  74     </div>
  75 </div>
  76
  77 </body>