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