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

   1 <!DOCTYPE html>
   2 <html>
   3 <link href="resources/grid.css" rel="stylesheet">
   4 <style>
   5
   6 .grid {
   7     width: 200px;
   8     height: 200px;
   9     border: 5px solid black;
  10     margin: 30px;
  11     padding: 15px;
  12     /* Ensures that the grid container is the containing block of the absolutely positioned grid children. */
  13     position: relative;
  14 }
  15
  16 .grid-columns-rows {
  17     grid-template-columns: 100px;
  18     grid-template-rows: 50px;
  19 }
  20
  21 .absolute {
  22     position: absolute;
  23 }
  24
  25 </style>
  26 <script src="../../resources/check-layout.js"></script>
  27 <body onload="checkLayout('.grid')">
  28
  29 <p>This test checks the behavior of the absolutely positioned grid items placed on the implicit grid.</p>
  30
  31 <div class="grid">
  32     <div class="sizedToGridArea absolute secondRowSecondColumn"
  33         data-offset-x="15" data-offset-y="15" data-expected-width="215" data-expected-height="215">
  34     </div>
  35     <div class="sizedToGridArea absolute endSecondRowEndSecondColumn"
  36         data-offset-x="15" data-offset-y="15" data-expected-width="15" data-expected-height="15">
  37     </div>
  38     <div class="sizedToGridArea absolute onlySecondRowOnlySecondColumn"
  39         data-offset-x="15" data-offset-y="15" data-expected-width="0" data-expected-height="0">
  40     </div>
  41 </div>
  42
  43 <div class="grid grid-columns-rows">
  44     <div class="sizedToGridArea absolute secondRowSecondColumn"
  45         data-offset-x="115" data-offset-y="65" data-expected-width="115" data-expected-height="165">
  46     </div>
  47     <div class="sizedToGridArea absolute endSecondRowEndSecondColumn"
  48         data-offset-x="15" data-offset-y="15" data-expected-width="115" data-expected-height="65">
  49     </div>
  50     <div class="sizedToGridArea absolute onlySecondRowOnlySecondColumn"
  51         data-offset-x="115" data-offset-y="65" data-expected-width="0" data-expected-height="0">
  52     </div>
  53 </div>
  54
  55 </body>
  56 </html>