layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-005.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: stretching intrinsic ratio item with min/max-size:auto and automatic minimum size clamping</title>
   9   <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1218178">
  10   <link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto">
  11   <link rel="match" href="grid-item-intrinsic-ratio-stretch-005-ref.html">
  12   <style type="text/css">
  13 body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
  14
  15 .grid {
  16   display: inline-grid;
  17   border: 1px solid;
  18   margin: 5px;
  19   place-items: stretch;
  20 }
  21 .vertical-tests img { writing-mode: vertical-rl; }
  22 .vertical-tests div { vertical-align:bottom }
  23   </style>
  24 </head>
  25 <body>
  26
  27 <div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 20px)">
  28 <img src="support/lime-2x24.png" style="max-width:4px">
  29 </div>
  30 <div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 4px)">
  31 <img src="support/lime-2x24.png" style="max-height:12px">
  32 </div>
  33
  34 <div class="grid" style="grid: minmax(auto, 8px) / minmax(auto, 20px)">
  35 <img src="support/lime-24x2.png" style="max-width:12px">
  36 </div>
  37 <div class="grid" style="grid: minmax(auto, 8px) / minmax(auto, 100px)">
  38 <img src="support/lime-24x2.png" style="max-height:6px">
  39 </div>
  40
  41 <div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 20px)">
  42 <img src="support/lime-2x24.png" style="align-self:start; max-height:48px">
  43 </div>
  44 <div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 4px)">
  45 <img src="support/lime-2x24.png" style="align-self:start; max-height:12px">
  46 </div>
  47
  48 <div class="grid" style="grid: minmax(auto, 8px) / minmax(auto, 100px)">
  49 <img src="support/lime-24x2.png" style="justify-self:start; max-width:48px">
  50 </div>
  51 <div class="grid" style="grid: minmax(auto, 8px) / minmax(auto, 10px)">
  52 <img src="support/lime-24x2.png" style="justify-self:start; max-width:48px">
  53 </div>
  54
  55 <br>
  56
  57 <div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 20px)">
  58 <img src="support/lime-2x24.png" style="min-width:10px">
  59 </div>
  60 <div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 4px)">
  61 <img src="support/lime-2x24.png" style="min-width:6px">
  62 </div>
  63
  64 <div class="grid" style="grid: minmax(auto, 8px) / minmax(auto, 20px)">
  65 <img src="support/lime-24x2.png" style="min-height:2px">
  66 </div>
  67 <div class="grid" style="grid: minmax(auto, 8px) / minmax(auto, 100px)">
  68 <img src="support/lime-24x2.png" style="min-height:10px">
  69 </div>
  70
  71 <div class="grid" style="grid: minmax(auto, 48px) / minmax(auto, 6px)">
  72 <img src="support/lime-2x24.png" style="align-self:start; min-height:80px">
  73 </div>
  74 <!--
  75 <div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 4px)">
  76 <img src="support/lime-2x24.png" style="align-self:start; min-height:72px">
  77 </div>
  78
  79 <div class="grid" style="grid: minmax(auto, 4px) / minmax(auto, 100px)">
  80 <img src="support/lime-24x2.png" style="justify-self:start; min-width:72px">
  81 </div>
  82 -->
  83 <div class="grid" style="grid: minmax(auto, 4px) / minmax(auto, 10px)">
  84 <img src="support/lime-24x2.png" style="justify-self:start; min-width:72px">
  85 </div>
  86
  87 <br>
  88
  89 <div class="vertical-tests">
  90
  91 <div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 20px)">
  92 <img src="support/lime-2x24.png" style="max-width:4px">
  93 </div>
  94 <div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 4px)">
  95 <img src="support/lime-2x24.png" style="max-height:12px">
  96 </div>
  97
  98 <div class="grid" style="grid: minmax(auto, 8px) / minmax(auto, 20px)">
  99 <img src="support/lime-24x2.png" style="max-width:12px">
 100 </div>
 101 <div class="grid" style="grid: minmax(auto, 8px) / minmax(auto, 100px)">
 102 <img src="support/lime-24x2.png" style="max-height:6px">
 103 </div>
 104
 105 <div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 20px)">
 106 <img src="support/lime-2x24.png" style="align-self:start; max-height:48px">
 107 </div>
 108 <div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 4px)">
 109 <img src="support/lime-2x24.png" style="align-self:start; max-height:12px">
 110 </div>
 111
 112 <div class="grid" style="grid: minmax(auto, 8px) / minmax(auto, 100px)">
 113 <img src="support/lime-24x2.png" style="justify-self:start; max-width:48px">
 114 </div>
 115 <div class="grid" style="grid: minmax(auto, 8px) / minmax(auto, 10px)">
 116 <img src="support/lime-24x2.png" style="justify-self:start; max-width:48px">
 117 </div>
 118
 119 <br>
 120
 121 <div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 20px)">
 122 <img src="support/lime-2x24.png" style="min-width:10px">
 123 </div>
 124 <div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 4px)">
 125 <img src="support/lime-2x24.png" style="min-width:6px">
 126 </div>
 127
 128 <div class="grid" style="grid: minmax(auto, 8px) / minmax(auto, 20px)">
 129 <img src="support/lime-24x2.png" style="min-height:2px">
 130 </div>
 131 <div class="grid" style="grid: minmax(auto, 8px) / minmax(auto, 100px)">
 132 <img src="support/lime-24x2.png" style="min-height:10px">
 133 </div>
 134
 135 <div class="grid" style="grid: minmax(auto, 48px) / minmax(auto, 6px)">
 136 <img src="support/lime-2x24.png" style="align-self:start; min-height:80px">
 137 </div>
 138 <!--
 139 <div class="grid" style="grid: minmax(auto, 96px) / minmax(auto, 4px)">
 140 <img src="support/lime-2x24.png" style="align-self:start; min-height:72px">
 141 </div>
 142
 143 <div class="grid" style="grid: minmax(auto, 4px) / minmax(auto, 100px)">
 144 <img src="support/lime-24x2.png" style="justify-self:start; min-width:72px">
 145 </div>
 146 -->
 147 <div class="grid" style="grid: minmax(auto, 4px) / minmax(auto, 10px)">
 148 <img src="support/lime-24x2.png" style="justify-self:start; min-width:72px">
 149 </div>
 150
 151 </div>
 152
 153 </body>
 154 </html>