layout/reftests/css-grid/grid-flex-min-sizing-002-ref.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   <meta charset="utf-8">
   8   <title>Reference: flex/auto min-sizing</title>
   9   <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
  10   <style type="text/css">
  11 body,html { color:black; background:white; font-family:monospace; font-size:16px; padding:0; margin:0; }
  12
  13 .grid {
  14  display: grid;
  15  border: 1px solid;
  16  float: left;
  17 }
  18
  19 .g0 {
  20  display: grid;
  21  grid-template-columns: minmax(min-content,min-content);
  22  border:1px solid;
  23  float: left;
  24  margin-right: 20px;
  25 }
  26
  27 .g1 {
  28  grid-template-columns: 24px
  29                         minmax(0,0)
  30                         minmax(0,0)
  31                         1fr;
  32  min-width: 24px;
  33 }
  34
  35 .g2 {
  36  grid-template-columns: min-content
  37                         0
  38                         0
  39                         1fr;
  40 }
  41
  42 .g3 {
  43  grid-template-columns: min-content
  44                         0
  45                         0
  46                         1fr;
  47 }
  48
  49 .g4 {
  50  grid-template-columns: minmax(2px,0)
  51                         1px
  52                         1px
  53                         20px;
  54 }
  55
  56 .g5 {
  57  grid-template-columns: minmax(20px,0)
  58                         minmax(0,0)
  59                         minmax(0,0)
  60                         4px;
  61 }
  62
  63 .g6 {
  64  grid-template-columns: minmax(1.333333px,0)
  65                         minmax(1.333333px,0)
  66                         minmax(1.333333px,0)
  67                         20px;
  68  min-width: 44px;
  69 }
  70
  71 .g7 {
  72  grid-template-columns: minmax(20px,1fr)
  73                         minmax(min-content,0)
  74                         minmax(min-content,0)
  75                         20px;
  76 }
  77
  78 .g8 {
  79  grid-template-columns: minmax(min-content,1fr)
  80                         minmax(min-content,0)
  81                         minmax(min-content,0)
  82                         20px;
  83 }
  84
  85 .g9 {
  86  grid-template-columns: 20px
  87                         30px
  88                         minmax(min-content,0)
  89                         10px;
  90 }
  91
  92 .gA {
  93  grid-template-columns: minmax(min-content,0)
  94                         minmax(min-content,40px)
  95                         minmax(min-content,0)
  96                         20px;
  97 }
  98
  99 .gB {
 100  grid-template-columns: 24px
 101                         0
 102                         0
 103                         20px;
 104  min-width: 44px;
 105 }
 106
 107 .gC {
 108  grid-template-columns: minmax(24px,0)
 109                         0
 110                         0
 111                         20px;
 112  min-width: 44px;
 113 }
 114
 115 .gD {
 116  grid-template-columns: minmax(24px,0)
 117                         0
 118                         0
 119                         0;
 120 }
 121
 122 .gE {
 123  grid-template-columns: minmax(8px,0)
 124                         minmax(8px,0)
 125                         minmax(8px,0)
 126                         0px;
 127 }
 128
 129 .gF {
 130  grid-template-columns: 2px
 131                         20px
 132                         2px
 133                         0;
 134 }
 135
 136
 137 .t { grid-column: span 3; border:2px solid; }
 138 .d1 { grid-column: 1 / span 2; background: grey; }
 139 .d3 { grid-column: 3 / span 2; background: blue; }
 140 div { min-width:0; min-height:10px; }
 141 t { display:inline-block; width:20px; }
 142
 143   </style>
 144 </head>
 145 <body>
 146
 147
 148 <div class="g0">
 149 <div class="g1 grid">
 150   <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
 151   <div class="d1"></div>
 152   <div class="d3"></div>
 153 </div>
 154 </div>
 155
 156 <div class="g0">
 157 <div class="g2 grid">
 158   <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
 159   <div class="d1"></div>
 160   <div class="d3"></div>
 161 </div>
 162 </div>
 163
 164 <div class="g0">
 165 <div class="g3 grid">
 166   <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
 167   <div class="d1"></div>
 168   <div class="d3"></div>
 169 </div>
 170 </div>
 171
 172 <div class="g0">
 173 <div class="g4 grid">
 174   <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
 175   <div class="d1"></div>
 176   <div class="d3"></div>
 177 </div>
 178 </div>
 179
 180 <div class="g0">
 181 <div class="g5 grid">
 182   <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
 183   <div class="d1"></div>
 184   <div class="d3"></div>
 185 </div>
 186 </div>
 187
 188 <br clear="all" style="margin-top:100px">
 189
 190 <div class="g0">
 191 <div class="g6 grid">
 192   <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
 193   <div class="d1"></div>
 194   <div class="d3"></div>
 195 </div>
 196 </div>
 197
 198 <div class="g0">
 199 <div class="g7 grid">
 200   <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
 201   <div class="d1"></div>
 202   <div class="d3"></div>
 203 </div>
 204 </div>
 205
 206 <div class="g0">
 207 <div class="g8 grid">
 208   <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
 209   <div class="d1"></div>
 210   <div class="d3"></div>
 211 </div>
 212 </div>
 213
 214 <div class="g0">
 215 <div class="g9 grid">
 216   <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
 217   <div class="d1"></div>
 218   <div class="d3"></div>
 219 </div>
 220 </div>
 221
 222 <br clear="all" style="margin-top:100px">
 223
 224 <div class="g0">
 225 <div class="gA grid">
 226   <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
 227   <div class="d1"></div>
 228   <div class="d3"></div>
 229 </div>
 230 </div>
 231
 232 <div class="g0">
 233 <div class="gB grid">
 234   <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
 235   <div class="d1"></div>
 236   <div class="d3"></div>
 237 </div>
 238 </div>
 239
 240 <div class="g0">
 241 <div class="gC grid">
 242   <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
 243   <div class="d1"></div>
 244   <div class="d3"></div>
 245 </div>
 246 </div>
 247
 248 <div class="g0">
 249 <div class="gD grid">
 250   <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
 251   <div class="d1"></div>
 252   <div class="d3"></div>
 253 </div>
 254 </div>
 255
 256 <div class="g0">
 257 <div class="gE grid">
 258   <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
 259   <div class="d1"></div>
 260   <div class="d3"></div>
 261 </div>
 262 </div>
 263
 264 <div class="g0">
 265 <div class="gF grid">
 266   <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
 267   <div class="d1"></div>
 268   <div class="d3"></div>
 269 </div>
 270 </div>
 271
 272
 273 </body>
 274 </html>