third_party/WebKit/LayoutTests/fast/css-grid-layout/positioned-grid-items-should-not-take-up-space.html

   1 <!DOCTYPE html>
   2 <html>
   3 <link href="resources/grid.css" rel="stylesheet">
   4 <style>
   5
   6 .grid {
   7     grid-template-columns: 50px 100px;
   8     grid-template-rows: 50px 100px;
   9     width: 150px;
  10     height: 150px;
  11     /* Ensures that the grid container is the containing block of the absolutely positioned grid children. */
  12     position: relative;
  13     /* Ensures that the grid container is the containing block of the fixed positioned grid children. */
  14     transform: translate(10px, 20px);
  15 }
  16
  17 .absolute {
  18     position: absolute;
  19 }
  20
  21 .fixed {
  22     position: fixed;
  23 }
  24
  25 .offsetLeft100 {
  26     left: 100px;
  27 }
  28
  29 </style>
  30 <script src="../../resources/check-layout.js"></script>
  31 <body onload="checkLayout('.grid')">
  32
  33 <p>This test checks that positioned items shouldn't take up space or otherwise participate in the layout of the grid.</p>
  34
  35 <p>Absolutely positioned:</p>
  36
  37 <div class="grid">
  38     <div class="sizedToGridArea absolute autoRowAutoColumn"
  39         data-offset-x="0" data-offset-y="0" data-expected-width="150" data-expected-height="150">
  40     </div>
  41     <div class="sizedToGridArea autoRowAutoColumn"
  42         data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">
  43     </div>
  44 </div>
  45
  46 <div class="grid">
  47     <div class="sizedToGridArea absolute autoRowAutoColumn offsetLeft100"
  48         data-offset-x="100" data-offset-y="0" data-expected-width="150" data-expected-height="150">
  49     </div>
  50     <div class="sizedToGridArea autoRowAutoColumn"
  51         data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">
  52     </div>
  53 </div>
  54
  55 <div class="grid">
  56     <div class="sizedToGridArea autoRowAutoColumn"
  57         data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">
  58     </div>
  59     <div class="sizedToGridArea absolute autoRowAutoColumn"
  60         data-offset-x="0" data-offset-y="0" data-expected-width="150" data-expected-height="150">
  61     </div>
  62     <div class="sizedToGridArea autoRowAutoColumn"
  63         data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50">
  64     </div>
  65 </div>
  66
  67 <div class="grid">
  68     <div class="sizedToGridArea autoRowAutoColumn"
  69         data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">
  70     </div>
  71     <div class="sizedToGridArea absolute autoRowAutoColumn offsetLeft100"
  72         data-offset-x="100" data-offset-y="0" data-expected-width="150" data-expected-height="150">
  73     </div>
  74     <div class="sizedToGridArea autoRowAutoColumn"
  75         data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50">
  76     </div>
  77 </div>
  78
  79 <div class="grid">
  80     <div class="sizedToGridArea autoRowAutoColumn"
  81         data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">
  82     </div>
  83     <div class="sizedToGridArea autoRowAutoColumn"
  84         data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50">
  85         <div class="sizedToGridArea absolute autoRowAutoColumn"
  86             data-offset-x="50" data-offset-y="0" data-expected-width="150" data-expected-height="150">
  87         </div>
  88     </div>
  89     <div class="sizedToGridArea autoRowAutoColumn"
  90         data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100">
  91     </div>
  92 </div>
  93
  94 <div class="grid">
  95     <div class="sizedToGridArea autoRowAutoColumn"
  96         data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">
  97     </div>
  98     <div class="sizedToGridArea autoRowAutoColumn"
  99         data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50">
 100         <div class="sizedToGridArea absolute autoRowAutoColumn offsetLeft100"
 101             data-offset-x="100" data-offset-y="0" data-expected-width="150" data-expected-height="150">
 102         </div>
 103     </div>
 104     <div class="sizedToGridArea autoRowAutoColumn"
 105         data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100">
 106     </div>
 107 </div>
 108
 109 <p>Fixed positioned:</p>
 110
 111 <div class="grid">
 112     <div class="sizedToGridArea fixed autoRowAutoColumn"
 113         data-offset-x="0" data-offset-y="0" data-expected-width="150" data-expected-height="150">
 114     </div>
 115     <div class="sizedToGridArea autoRowAutoColumn"
 116         data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">
 117     </div>
 118 </div>
 119
 120 <div class="grid">
 121     <div class="sizedToGridArea fixed autoRowAutoColumn offsetLeft100"
 122         data-offset-x="100" data-offset-y="0" data-expected-width="150" data-expected-height="150">
 123     </div>
 124     <div class="sizedToGridArea autoRowAutoColumn"
 125         data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">
 126     </div>
 127 </div>
 128
 129 <div class="grid">
 130     <div class="sizedToGridArea autoRowAutoColumn"
 131         data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">
 132     </div>
 133     <div class="sizedToGridArea fixed autoRowAutoColumn"
 134         data-offset-x="0" data-offset-y="0" data-expected-width="150" data-expected-height="150">
 135     </div>
 136     <div class="sizedToGridArea autoRowAutoColumn"
 137         data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50">
 138     </div>
 139 </div>
 140
 141 <div class="grid">
 142     <div class="sizedToGridArea autoRowAutoColumn"
 143         data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">
 144     </div>
 145     <div class="sizedToGridArea fixed autoRowAutoColumn offsetLeft100"
 146         data-offset-x="100" data-offset-y="0" data-expected-width="150" data-expected-height="150">
 147     </div>
 148     <div class="sizedToGridArea autoRowAutoColumn"
 149         data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50">
 150     </div>
 151 </div>
 152
 153 <div class="grid">
 154     <div class="sizedToGridArea autoRowAutoColumn"
 155         data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">
 156     </div>
 157     <div class="sizedToGridArea autoRowAutoColumn"
 158         data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50">
 159         <div class="sizedToGridArea fixed autoRowAutoColumn"
 160             data-offset-x="50" data-offset-y="0" data-expected-width="150" data-expected-height="150">
 161         </div>
 162     </div>
 163     <div class="sizedToGridArea autoRowAutoColumn"
 164         data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100">
 165     </div>
 166 </div>
 167
 168 <div class="grid">
 169     <div class="sizedToGridArea autoRowAutoColumn"
 170         data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">
 171     </div>
 172     <div class="sizedToGridArea autoRowAutoColumn"
 173         data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50">
 174         <div class="sizedToGridArea fixed autoRowAutoColumn offsetLeft100"
 175             data-offset-x="100" data-offset-y="0" data-expected-width="150" data-expected-height="150">
 176         </div>
 177     </div>
 178     <div class="sizedToGridArea autoRowAutoColumn"
 179         data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100">
 180     </div>
 181 </div>
 182
 183 </body>
 184 </html>