layout/reftests/css-grid/grid-track-intrinsic-sizing-004.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>CSS Grid Test: Intrinsic track sizing (with span:1)</title>
   9   <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
  10   <link rel="help" href="https://drafts.csswg.org/css-grid/#algo-content">
  11   <link rel="match" href="grid-track-intrinsic-sizing-004-ref.html">
  12   <style type="text/css">
  13 body,html { color:black; background:white; font-family:monospace; font-size:16px; padding:0; margin:0; }
  14
  15 .grid {
  16  display: grid;
  17  border: 1px solid black;
  18  width: 500px;
  19  justify-content: start;
  20  align-content: start;
  21 }
  22 .float { width:auto; float:left; }
  23 .g1 {
  24  grid-template-columns: minmax(0,auto)
  25                         minmax(max-content,auto)
  26                         minmax(max-content,max-content);
  27 }
  28 .g2 {
  29  grid-template-columns: minmax(max-content,auto)
  30                         minmax(min-content,auto)
  31                         minmax(max-content,max-content);
  32 }
  33 .g2f {
  34  grid-template-columns: minmax(max-content,auto)
  35                         minmax(1fr,auto)
  36                         minmax(max-content,max-content);
  37 }
  38 .g3 {
  39  grid-template-columns: minmax(max-content,max-content)
  40                         minmax(min-content,max-content)
  41                         minmax(max-content,max-content);
  42 }
  43 .g4 {
  44  grid-template-columns: minmax(max-content,max-content)
  45                         minmax(min-content,max-content)
  46                         minmax(min-content,max-content);
  47 }
  48 .g4f {
  49  grid-template-columns: minmax(max-content,max-content)
  50                         minmax(1fr,max-content)
  51                         minmax(min-content,max-content);
  52 }
  53 .g5 {
  54  grid-template-columns: minmax(max-content,auto)
  55                         minmax(min-content,max-content)
  56                         minmax(min-content,auto);
  57 }
  58 .g6 {
  59  grid-template-columns: minmax(min-content,auto)
  60                         minmax(min-content,max-content)
  61                         minmax(min-content,auto);
  62 }
  63 .g6f {
  64  grid-template-columns: minmax(1fr,auto)
  65                         minmax(min-content,max-content)
  66                         minmax(min-content,auto);
  67 }
  68 .g7 {
  69  grid-template-columns: minmax(min-content,auto)
  70                         minmax(min-content,auto)
  71                         minmax(min-content,auto);
  72 }
  73 .g8 {
  74  grid-template-columns: minmax(auto,min-content)
  75                         minmax(200px,min-content)
  76                         minmax(min-content,min-content);
  77 }
  78 .g9 {
  79  grid-template-columns: minmax(auto,auto)
  80                         minmax(auto,auto)
  81                         minmax(auto,auto);
  82 }
  83 .gA {
  84  grid-template-columns: minmax(auto,auto)
  85                         minmax(min-content,min-content)
  86                         minmax(min-content,min-content);
  87 }
  88 .gB {
  89  grid-template-columns: minmax(auto,auto)
  90                         minmax(max-content,min-content)
  91                         minmax(min-content,min-content);
  92 }
  93 .gC {
  94  grid-template-columns: minmax(auto,auto)
  95                         minmax(max-content,min-content)
  96                         minmax(min-content,max-content);
  97 }
  98 .gD {
  99  grid-template-columns: minmax(auto,auto)
 100                         minmax(max-content,max-content)
 101                         minmax(min-content,max-content);
 102 }
 103
 104 .t { grid-column: span 3; border:2px solid; }
 105 .c1 { grid-column: 1; height:10px; }
 106 .c2 { grid-column: 2; background: grey; height:10px; }
 107 .c3 { grid-column: 3; background: blue; height:10px; }
 108 div { min-width:0; min-height:10px; }
 109 t { display:inline-block; width:20px; }
 110
 111   </style>
 112 </head>
 113 <body>
 114
 115 <div class="g1 grid">
 116   <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
 117   <div class="c1"></div>
 118   <div class="c2"></div>
 119   <div class="c3"><t>&nbsp;</t></div>
 120 </div>
 121
 122 <div class="g2 grid">
 123   <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
 124   <div class="c1"></div>
 125   <div class="c2"></div>
 126   <div class="c3"><t>&nbsp;</t></div>
 127 </div>
 128 <div class="g2f grid">
 129   <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
 130   <div class="c1"></div>
 131   <div class="c2"></div>
 132   <div class="c3"><t>&nbsp;</t></div>
 133 </div>
 134
 135 <div class="g3 grid">
 136   <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
 137   <div class="c1"></div>
 138   <div class="c2"></div>
 139   <div class="c3"><t>&nbsp;</t></div>
 140 </div>
 141
 142 <div class="g4 grid">
 143   <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
 144   <div class="c1"></div>
 145   <div class="c2"></div>
 146   <div class="c3"><t>&nbsp;</t></div>
 147 </div>
 148 <div class="g4f grid">
 149   <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
 150   <div class="c1"></div>
 151   <div class="c2"></div>
 152   <div class="c3"><t>&nbsp;</t></div>
 153 </div>
 154
 155 <div class="g5 grid">
 156   <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
 157   <div class="c1"></div>
 158   <div class="c2"></div>
 159   <div class="c3"><t>&nbsp;</t></div>
 160 </div>
 161
 162 <div class="g6 grid">
 163   <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
 164   <div class="c1"></div>
 165   <div class="c2"></div>
 166   <div class="c3"><t>&nbsp;</t></div>
 167 </div>
 168 <div class="g6f grid">
 169   <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
 170   <div class="c1"></div>
 171   <div class="c2"></div>
 172   <div class="c3"><t>&nbsp;</t></div>
 173 </div>
 174
 175 <div class="g7 grid">
 176   <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
 177   <div class="c1"></div>
 178   <div class="c2"></div>
 179   <div class="c3"><t>&nbsp;</t></div>
 180 </div>
 181
 182 <div class="g8 grid">
 183   <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
 184   <div class="c1"></div>
 185   <div class="c2"></div>
 186   <div class="c3"><t>&nbsp;</t></div>
 187 </div>
 188
 189 <div class="g9 grid">
 190   <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
 191   <div class="c1"></div>
 192   <div class="c2"></div>
 193   <div class="c3"><t>&nbsp;</t></div>
 194 </div>
 195
 196 <div class="gA grid">
 197   <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
 198   <div class="c1"></div>
 199   <div class="c2"></div>
 200   <div class="c3"><t>&nbsp;</t></div>
 201 </div>
 202
 203 <div class="gB grid">
 204   <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
 205   <div class="c1"></div>
 206   <div class="c2"></div>
 207   <div class="c3"><t>&nbsp;</t></div>
 208 </div>
 209
 210 <div class="gC grid">
 211   <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
 212   <div class="c1"></div>
 213   <div class="c2"></div>
 214   <div class="c3"><t>&nbsp;</t></div>
 215 </div>
 216
 217 <div class="gD grid">
 218   <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
 219   <div class="c1"></div>
 220   <div class="c2"></div>
 221   <div class="c3"><t>&nbsp;</t></div>
 222 </div>
 223
 224 </body>
 225 </html>