layout/reftests/css-grid/grid-abspos-items-001.html

   1 <!DOCTYPE HTML>
   2 <!--
   3      Any copyright is dedicated to the Public Domain.
   4      http://creativecommons.org/publicdomain/zero/1.0/
   5 -->
   6 <html><head>
   7   <title>CSS Test: Testing basic placement and layout of abs.pos. grid items</title>
   8   <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107783">
   9   <link rel="help" href="http://dev.w3.org/csswg/css-grid/#abspos-items">
  10   <link rel="match" href="grid-abspos-items-001-ref.html">
  11   <meta charset="utf-8">
  12   <style type="text/css">
  13 body,html { color:black; background:white; font-size:16px; padding:0; margin:0; }
  14
  15 .grid {
  16  display: grid;
  17  position: relative;
  18  border: 1px solid;
  19  grid-auto-flow: row;
  20  grid-auto-columns: 23px;
  21  grid-auto-rows: 7px;
  22  padding: 17px 7px 11px 13px;
  23  width: 100px;
  24  height: 60px;
  25 }
  26 .zero-size { width:0; height:0; }
  27 .auto-size { width:auto; height:auto; }
  28
  29 .a {
  30   grid-column: 1 / 3;
  31   grid-row:    3 / 5;
  32   background: blue;
  33 }
  34
  35 .abs {
  36   position: absolute;
  37   top:3px; left:1px; right:5px; bottom:1px;
  38   opacity: 0.7;
  39 }
  40 .b {
  41   grid-column:  auto / 2;
  42   grid-row:     auto / auto;
  43 }
  44 .c {
  45   grid-column:  9 / auto;  /* 9 is outside the grid */
  46   grid-row:     9 / auto;  /* 9 is outside the grid */
  47 }
  48 .d {
  49   grid-column:  auto / 1;
  50   grid-row:     2 / 1;
  51 }
  52 .e {
  53   grid-column:  4 / auto;
  54   grid-row:     3 / auto;
  55 }
  56 .f {
  57   grid-column:  4 / auto;
  58   grid-row:     auto / 1;
  59 }
  60 .g {
  61   grid-column:  1 / 3;
  62   grid-row:     2 / 3;
  63 }
  64 .h {
  65   grid-column:  auto / auto;
  66   grid-row:     auto / auto;
  67 }
  68 .i {
  69   grid-column:  span 1 / span 2;
  70   grid-row:     span 2 / span A;
  71   background: lime;
  72 }
  73 .j {
  74   grid-column:  span A / span 2;
  75   grid-row:     span 2 / span 1;
  76   background: lime;
  77 }
  78 span {
  79   background: lime;
  80   border: 1px solid;
  81 }
  82   </style>
  83 </head>
  84 <body>
  85
  86 <div style="float:left">
  87
  88 <div class="grid">
  89 <span class="a"></span>
  90 <span class="b abs">b</span>
  91 </div>
  92
  93 <div class="grid">
  94 <span class="a"></span>
  95 <span class="c abs">c</span>
  96 </div>
  97
  98 <div class="grid">
  99 <span class="a"></span>
 100 <span class="d abs">d</span>
 101 </div>
 102
 103 <div class="grid">
 104 <span class="a"></span>
 105 <span class="e abs">e</span>
 106 </div>
 107
 108 <div class="grid">
 109 <span class="a"></span>
 110 <span class="f abs">f</span>
 111 </div>
 112
 113 <div class="grid">
 114 <span class="a"></span>
 115 <span class="g abs">g</span>
 116 </div>
 117
 118 </div><div style="float:left">
 119
 120 <div class="grid">
 121 <span class="a"></span>
 122 <div><span class="b abs">b</span></div>
 123 </div>
 124
 125 <div class="grid">
 126 <span class="a"></span>
 127 <x><span class="c abs">c</span></x>
 128 </div>
 129
 130 <div class="grid">
 131 <span class="a"></span>
 132 <span class="d abs">d</span>
 133 </div>
 134
 135 <div class="grid">
 136 <span class="a"></span>
 137 <div><span class="e abs">e</span></div>
 138 </div>
 139
 140 <div class="grid">
 141 <span class="a"></span>
 142 <span class="f abs">f</span>
 143 </div>
 144
 145 <div class="grid">
 146 <span class="a"></span>
 147 <x><span class="g abs">g</span></x>
 148 </div>
 149
 150 </div><div style="float:left">
 151
 152 <div class="grid zero-size">
 153 <span class="b abs">b</span>
 154 </div>
 155
 156 <div class="grid auto-size">
 157 <span class="h abs">h</span>
 158 </div>
 159
 160 <div class="grid" style="height:auto">
 161 <div style="grid-column: 1 / span 3"></div>
 162 <div class="i abs">i</div>
 163 </div>
 164
 165 <div class="grid" style="height:auto">
 166 <div style="grid-column: 1 / span 3"></div>
 167 <div class="j abs">j</div>
 168 </div>
 169
 170 <div class="grid" style="width:43px; height:53px">
 171 <span class="abs" style="grid-column-end:1; grid-row-end:1;">a</span>
 172 <span class="abs" style="grid-column-start:1; grid-row-end:1;">b</span>
 173 <span class="abs" style="grid-column-end:1; grid-row-start:1;">c</span>
 174 <span class="abs" style="grid-column-start:1; grid-row-start:1;">d</span>
 175 </div>
 176
 177 <div class="grid" style="width:0px; height:0px; border-width:0;">
 178 <span class="abs" style="grid-column-start:2; grid-row-end:1;"></span>
 179 </div>
 180 <div class="grid" style="width:0px; height:0px; border-width:0;">
 181 <span class="abs" style="grid-column-end:1; grid-row-start:2;"></span>
 182 </div>
 183 <div class="grid" style="width:0px; height:0px; border-width:0;">
 184 <span class="abs" style="grid-column-start:2; grid-row-start:2;"></span>
 185 </div>
 186
 187 </div>
 188
 189 </body>
 190 </html>