layout/reftests/css-grid/grid-item-intrinsic-ratio-stretch-002.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 definite min/max-size</title>
   9   <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176775">
  10   <link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-stretch">
  11   <link rel="match" href="grid-item-intrinsic-ratio-stretch-002-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 .grid > * {
  22   min-width: 0;
  23   min-height: 0;
  24 }
  25 .vertical-tests img { writing-mode: vertical-rl; }
  26 .vertical-tests div { vertical-align:bottom }
  27   </style>
  28 </head>
  29 <body>
  30
  31 <div class="grid" style="grid: 96px / 20px">
  32 <img src="support/lime-2x24.png" style="max-width:4px">
  33 </div>
  34 <div class="grid" style="grid: 96px / 4px">
  35 <img src="support/lime-2x24.png" style="max-height:12px">
  36 </div>
  37
  38 <div class="grid" style="grid: 8px / 20px">
  39 <img src="support/lime-24x2.png" style="max-width:12px">
  40 </div>
  41 <div class="grid" style="grid: 8px / 100px">
  42 <img src="support/lime-24x2.png" style="max-height:6px">
  43 </div>
  44
  45 <div class="grid" style="grid: 96px / 20px">
  46 <img src="support/lime-2x24.png" style="align-self:start; max-height:48px">
  47 </div>
  48 <div class="grid" style="grid: 96px / 4px">
  49 <img src="support/lime-2x24.png" style="align-self:start; max-height:12px">
  50 </div>
  51
  52 <div class="grid" style="grid: 8px / 100px">
  53 <img src="support/lime-24x2.png" style="justify-self:start; max-width:48px">
  54 </div>
  55 <div class="grid" style="grid: 8px / 10px">
  56 <img src="support/lime-24x2.png" style="justify-self:start; max-width:48px">
  57 </div>
  58
  59 <br>
  60
  61 <div class="grid" style="grid: 96px / 20px">
  62 <img src="support/lime-2x24.png" style="min-width:10px">
  63 </div>
  64 <div class="grid" style="grid: 96px / 4px">
  65 <img src="support/lime-2x24.png" style="min-width:6px">
  66 </div>
  67
  68 <div class="grid" style="grid: 8px / 20px">
  69 <img src="support/lime-24x2.png" style="min-height:2px">
  70 </div>
  71 <div class="grid" style="grid: 8px / 100px">
  72 <img src="support/lime-24x2.png" style="min-height:10px">
  73 </div>
  74
  75 <div class="grid" style="grid: 48px / 6px">
  76 <img src="support/lime-2x24.png" style="align-self:start; min-height:80px">
  77 </div>
  78 <div class="grid" style="grid: 96px / 4px">
  79 <img src="support/lime-2x24.png" style="align-self:start; min-height:72px">
  80 </div>
  81
  82 <div class="grid" style="grid: 8px / 100px">
  83 <img src="support/lime-24x2.png" style="justify-self:start; min-width:98px">
  84 </div>
  85 <div class="grid" style="grid: 4px / 10px">
  86 <img src="support/lime-24x2.png" style="justify-self:start; min-width:72px">
  87 </div>
  88
  89 <br>
  90
  91 <div class="vertical-tests">
  92
  93 <div class="grid" style="grid: 96px / 20px">
  94 <img src="support/lime-2x24.png" style="max-width:4px">
  95 </div>
  96 <div class="grid" style="grid: 96px / 4px">
  97 <img src="support/lime-2x24.png" style="max-height:12px">
  98 </div>
  99
 100 <div class="grid" style="grid: 8px / 20px">
 101 <img src="support/lime-24x2.png" style="max-width:12px">
 102 </div>
 103 <div class="grid" style="grid: 8px / 100px">
 104 <img src="support/lime-24x2.png" style="max-height:6px">
 105 </div>
 106
 107 <div class="grid" style="grid: 96px / 20px">
 108 <img src="support/lime-2x24.png" style="align-self:start; max-height:48px">
 109 </div>
 110 <div class="grid" style="grid: 96px / 4px">
 111 <img src="support/lime-2x24.png" style="align-self:start; max-height:12px">
 112 </div>
 113
 114 <div class="grid" style="grid: 8px / 100px">
 115 <img src="support/lime-24x2.png" style="justify-self:start; max-width:48px">
 116 </div>
 117 <div class="grid" style="grid: 8px / 10px">
 118 <img src="support/lime-24x2.png" style="justify-self:start; max-width:48px">
 119 </div>
 120
 121 <br>
 122
 123 <div class="grid" style="grid: 96px / 20px">
 124 <img src="support/lime-2x24.png" style="min-width:10px">
 125 </div>
 126 <div class="grid" style="grid: 96px / 4px">
 127 <img src="support/lime-2x24.png" style="min-width:6px">
 128 </div>
 129
 130 <div class="grid" style="grid: 8px / 20px">
 131 <img src="support/lime-24x2.png" style="min-height:2px">
 132 </div>
 133 <div class="grid" style="grid: 8px / 100px">
 134 <img src="support/lime-24x2.png" style="min-height:10px">
 135 </div>
 136
 137 <div class="grid" style="grid: 48px / 6px">
 138 <img src="support/lime-2x24.png" style="align-self:start; min-height:80px">
 139 </div>
 140 <div class="grid" style="grid: 96px / 4px">
 141 <img src="support/lime-2x24.png" style="align-self:start; min-height:72px">
 142 </div>
 143
 144 <div class="grid" style="grid: 8px / 100px">
 145 <img src="support/lime-24x2.png" style="justify-self:start; min-width:98px">
 146 </div>
 147 <div class="grid" style="grid: 4px / 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>