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