layout/reftests/css-grid/grid-item-intrinsic-ratio-normal-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 'normal' and/or 'stretch', with Automatic Minimum Size clamping</title>
   9   <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1315383">
  10   <style type="text/css">
  11 .grid {
  12   display: inline-grid;
  13   border: 1px solid;
  14   margin: 5px;
  15   grid-column-gap: 10px;
  16   align-items: start;
  17   justify-items: start;
  18 }
  19
  20 x { width:32px; height:2px; background:cyan; }
  21 .w24 > x { width:24px; }
  22 .w8  > x { width:8px; }
  23 .w4  > x { width:4px; }
  24
  25   </style>
  26 </head>
  27 <body>
  28
  29 <div class="grid" style="grid:24px 10px 24px / repeat(7, 32px); grid-column-gap: 10px;">
  30 <div style="height:24px; width:2px; background:cyan; grid-row:1"></div>
  31 <div style="height:10px; grid-row:2; grid-column: span 7"></div>
  32 <div style="height:24px; grid-row:3"></div>
  33 <x style="grid-row:4"></x>
  34 </div>
  35
  36 <br>
  37
  38 <div class="grid w24" style="grid:32px 10px 32px / repeat(7, 24px); grid-column-gap: 10px;">
  39 <div style="height:32px; width:2px; background:cyan; grid-row:1"></div>
  40 <div style="height:10px; grid-row:2; grid-column: span 7"></div>
  41 <div style="height:32px; grid-row:3"></div>
  42 <x style="grid-row:4"></x>
  43 </div>
  44
  45 <br>
  46
  47 <div class="grid w4" style="grid:8px 10px 8px / repeat(7, 4px); grid-column-gap:32px; width:220px">
  48 <div style="height:8px; width:2px; background:cyan; grid-row:1"></div>
  49 <div style="height:10px; grid-row:2; grid-column: span 7"></div>
  50 <div style="height:8px; grid-row:3"></div>
  51 <x style="grid-row:4"></x>
  52 </div>
  53
  54 <br>
  55
  56 <div class="grid w4" style="grid:32px 10px 32px / repeat(7, 4px); grid-column-gap:32px; width:220px">
  57 <div style="height:32px; width:2px; background:cyan; grid-row:1"></div>
  58 <div style="height:10px; grid-row:2; grid-column: span 7"></div>
  59 <div style="height:32px; grid-row:3"></div>
  60 <x style="grid-row:4"></x>
  61 </div>
  62
  63 <br>
  64
  65 <div class="grid w8" style="grid:4px 10px 4px 2px 2px / repeat(7, 8px); grid-gap:8px; width:104px">
  66 <div style="height:4px; width:2px; background:cyan; grid-row:1"></div>
  67 <div style="height:10px; grid-row:2; grid-column: span 7"></div>
  68 <div style="height:4px; grid-row:3"></div>
  69 <x style="grid-row:4"></x>
  70 </div>
  71
  72 <br>
  73
  74 <div class="grid" style="grid:8px 10px 8px 2px 2px / repeat(7, 32px); grid-gap:16px; ">
  75 <div style="height:4px; width:2px; background:cyan; grid-row:1"></div>
  76 <div style="height:10px; grid-row:2; grid-column: span 7"></div>
  77 <div style="height:4px; grid-row:3"></div>
  78 <x style="grid-row:4"></x>
  79 </div>
  80
  81 <br>
  82
  83 <script>
  84 var url = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAEElEQVQoz2NgGAWjYBTAAAADEAABaJFtwwAAAABJRU5ErkJggg%3D%3D";
  85 var grids = document.querySelectorAll('.grid');
  86 var js = [ "normal", "start", "center", "stretch" ];
  87 var as = [ "normal", "start", "center", "stretch" ];
  88 var imgSizes =
  89 [
  90   ['16px', '16px'],
  91   ['16px', '16px'],
  92   ['16px', '16px'],
  93   ['16px', '24px'],
  94   ['16px', '16px'],
  95   ['16px', '24px'],
  96   ['16px', '16px'],
  97   ['16px', '24px'],
  98   ['32px', '16px'],
  99   ['32px', '16px'],
 100   ['32px', '16px'],
 101   ['32px', '24px'],
 102   ['16px', '16px'],
 103   ['16px', '16px'],
 104   ['16px', '16px'],
 105   ['16px', '32px'],
 106   ['16px', '16px'],
 107   ['16px', '32px'],
 108   ['16px', '16px'],
 109   ['16px', '32px'],
 110   ['24px', '16px'],
 111   ['24px', '16px'],
 112   ['24px', '16px'],
 113   ['24px', '32px'],
 114   ['4px', '4px'],
 115   ['4px', '4px'],
 116   ['4px', '4px'],
 117   ['4px', '8px'],
 118   ['8px', '8px'],
 119   ['16px', '8px'],
 120   ['8px', '8px'],
 121   ['16px', '8px'],
 122   ['4px', '8px'],
 123   ['4px', '16px'],
 124   ['4px', '16px'],
 125   ['4px', '8px'],
 126   ['4px', '4px'],
 127   ['4px', '4px'],
 128   ['4px', '4px'],
 129   ['4px', '32px'],
 130   ['16px', '16px'],
 131   ['16px', '32px'],
 132   ['16px', '16px'],
 133   ['16px', '32px'],
 134   ['4px', '16px'],
 135   ['4px', '16px'],
 136   ['4px', '16px'],
 137   ['4px', '32px'],
 138   ['4px', '4px'],
 139   ['8px', '8px'],
 140   ['8px', '8px'],
 141   ['8px', '4px'],
 142   ['4px', '4px'],
 143   ['16px', '4px'],
 144   ['4px', '4px'],
 145   ['16px', '4px'],
 146   ['8px', '4px'],
 147   ['8px', '16px'],
 148   ['8px', '16px'],
 149   ['8px', '4px'],
 150   ['8px', '8px'],
 151   ['16px', '16px'],
 152   ['16px', '16px'],
 153   ['16px', '8px'],
 154   ['8px', '8px'],
 155   ['16px', '8px'],
 156   ['8px', '8px'],
 157   ['16px', '8px'],
 158   ['32px', '8px'],
 159   ['32px', '16px'],
 160   ['32px', '16px'],
 161   ['32px', '8px'],
 162 ];
 163
 164 var index = 0;  // imgSizes index
 165 for (var i = 0; i < grids.length; ++i) {
 166   for (var j = 0; j < js.length; j++) {
 167     for (var a = 0; a < as.length; a++) {
 168       if (as[a] != "normal" && as[a] != "stretch" &&
 169           js[j] != "normal" && js[j] != "stretch") {
 170         continue;
 171       }
 172       var img = document.createElement('img');
 173       img.style.width = imgSizes[index][0];
 174       img.style.height = imgSizes[index][1];
 175       if (as[a] != "normal" && as[a] != "stretch")
 176         img.style.alignSelf = as[a];
 177       if (js[j] != "normal" && js[j] != "stretch")
 178         img.style.justifySelf = js[j];
 179       img.src = url;
 180       img.setAttribute('title', as[a] + ' / ' + js[j]);
 181       grids[i].appendChild(img);
 182       index++;
 183     }
 184   }
 185   for (var j = 0; j < js.length; j++) {
 186     for (var a = 0; a < as.length; a++) {
 187       if (as[a] != "normal" && as[a] != "stretch" &&
 188           js[j] != "normal" && js[j] != "stretch") {
 189         continue;
 190       }
 191       var x = document.createElement('x');
 192       grids[i].appendChild(x);
 193     }
 194   }
 195 }
 196 </script>
 197
 198 </body>
 199 </html>