grid-item-intrinsic-ratio-normal-003-ref.html (7320B)
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 items with 'normal' and/or 'stretch' and min/max-size, with Automatic Minimum Size clamping</title> 9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id="> 10 <style type="text/css"> 11 * { vertical-align: bottom; } 12 .grid { 13 display: inline-grid; 14 border: 3px solid grey; 15 grid: 32px / 4px; 16 margin-right:20px; 17 } 18 .r { grid: 4px / 32px; } 19 20 .start {align-self:start; justify-self:start} 21 .na {align-self:start; justify-self:start} 22 .sa {align-self:start; justify-self:start} 23 .an {align-self:start; justify-self:start} 24 .as {align-self:start; justify-self:start} 25 .w20 { width: 20px; min-width: 0px; } 26 .w16 { width: 16px; } 27 .w10 { width: 10px; } 28 .w4 { width: 4px; } 29 .mw20 { min-width: 20px } 30 .mw0 { min-width: 0px } 31 32 .h20 { height: 20px; min-height: 0px; } 33 .mh20 { min-height: 20px } 34 .mh0 { min-height: 0px } 35 36 </style> 37 </head> 38 <body> 39 40 <div class="grid r"><img></div> 41 <div class="grid r"><img class="start"></div> 42 <div class="grid r"><img class="sa"></div> 43 <div class="grid r"><img class="sa mxw10"></div> 44 <div class="grid r"><img class="na"></div> 45 <div class="grid r"><img class="na mxw2"></div> 46 47 <pre><!--min-height:20px--></pre> 48 <div class="grid r mh20"><img class="mh20"></div> 49 <div class="grid r mh20"><img class="mh20 mxw10"></div> 50 <div class="grid r mh20"><img class="start mh20"></div> 51 <div class="grid r mh20"><img class="start mh20 mxw10"></div> 52 <div class="grid r mh20"><img class="sa mh20"></div> 53 <div class="grid r mh20"><img class="sa mh20 mxw10"></div> 54 <div class="grid r mh20"><img class="na mh20"></div> 55 <div class="grid r mh20"><img class="na mh20 mxw10"></div> 56 57 <pre><!--min-height:0--></pre> 58 <div class="grid r"><img class="mh0"></div> 59 <div class="grid r"><img class="mh0 mxw10"></div> 60 <div class="grid r"><img class="start mh0"></div> 61 <div class="grid r"><img class="start mh0 mxw10"></div> 62 <div class="grid r"><img class="sa mh0"></div> 63 <div class="grid r"><img class="sa mh0 mxw10"></div> 64 <div class="grid r"><img class="na mh0"></div> 65 <div class="grid r"><img class="na mh0 mxw2"></div> 66 67 <pre><!----></pre> 68 69 <div class="grid w4"><img></div> 70 <div class="grid w4"><img class="mxw2"></div> 71 <div class="grid w4"><img class="start"></div> 72 <div class="grid w4"><img class="start mxw2"></div> 73 <div class="grid w4"><img class="sa"></div> 74 <div class="grid w4"><img class="sa mxw2"></div> 75 <div class="grid w4"><img class="na"></div> 76 <div class="grid w4"><img class="na mxw2"></div> 77 78 <pre><!--min-width:20px--></pre> 79 <div class="grid mw20"><img class="mw20"></div> 80 <div class="grid mw20"><img class="mw20 mxh10"></div> 81 <div class="grid mw20"><img class="start mw20"></div> 82 <div class="grid mw20"><img class="start mw20 mxh10"></div> 83 <div class="grid mw20"><img class="sa mw20"></div> 84 <div class="grid mw20"><img class="sa mw20 mxh10"></div> 85 <div class="grid mw20"><img class="na mw20"></div> 86 <div class="grid mw20"><img class="na mw20 mxh10"></div> 87 88 <pre><!--min-width:0--></pre> 89 <div class="grid w4"><img class="mw0"></div> 90 <div class="grid w4"><img class="mw0 mxh10"></div> 91 <div class="grid w4"><img class="start mw0"></div> 92 <div class="grid w4"><img class="start mw0 mxh10"></div> 93 <div class="grid w4"><img class="sa mw0"></div> 94 <div class="grid w4"><img class="sa mw0 mxh10"></div> 95 <div class="grid w4"><img class="na mw0"></div> 96 <div class="grid w4"><img class="na mw0 mxh10"></div> 97 98 <pre><!--width:20px--></pre> 99 100 <div class="grid r"><img class="w20"></div> 101 <div class="grid r"><img class="w20 mxh10"></div> 102 <div class="grid r"><img class="start w20"></div> 103 <div class="grid r"><img class="start w20 mxh10"></div> 104 <div class="grid r"><img class="sa w20"></div> 105 <div class="grid r"><img class="sa w20 mxh2"></div> 106 <div class="grid r"><img class="na w20"></div> 107 <div class="grid r"><img class="na w20 mxh2"></div> 108 109 <pre><!--width:20px--></pre> 110 111 <div class="grid mw20"><img class="start w20"></div> 112 <div class="grid mw20"><img class="start w20 mxh10"></div> 113 <div class="grid mw20"><img class="start w20"></div> 114 <div class="grid mw20"><img class="start w20 mxh10"></div> 115 <div class="grid mw20"><img class="sa w20"></div> 116 <div class="grid mw20"><img class="sa w20 mxh10"></div> 117 <div class="grid mw20"><img class="na w20"></div> 118 <div class="grid mw20"><img class="na w20 mxh10"></div> 119 120 <pre><!--height:20px--></pre> 121 122 <div class="grid r mh20"><img class="h20"></div> 123 <div class="grid r mh20"><img class="h20 mxw10"></div> 124 <div class="grid r mh20"><img class="start h20"></div> 125 <div class="grid r mh20"><img class="start h20 mxw10"></div> 126 <div class="grid r mh20"><img class="as h20"></div> 127 <div class="grid r mh20"><img class="as h20 mxw10"></div> 128 <div class="grid r mh20"><img class="an h20"></div> 129 <div class="grid r mh20"><img class="an h20 mxw10"></div> 130 131 <pre><!--height:20px--></pre> 132 133 <div class="grid w4"><img class="h20"></div> 134 <div class="grid w4"><img class="h20 mxw2"></div> 135 <div class="grid w4"><img class="start h20"></div> 136 <div class="grid w4"><img class="start h20 mxw10"></div> 137 <div class="grid w4"><img class="as h20"></div> 138 <div class="grid w4"><img class="as h20 mxw2"></div> 139 <div class="grid w4"><img class="an h20"></div> 140 <div class="grid w4"><img class="an h20 mxw10"></div> 141 142 <script> 143 var url = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAEElEQVQoz2NgGAWjYBTAAAADEAABaJFtwwAAAABJRU5ErkJggg%3D%3D"; 144 var imgs = document.querySelectorAll('img'); 145 var imgSizes = 146 [ 147 ['16px', '16px'], 148 ['16px', '16px'], 149 ['4px', '4px'], 150 ['4px', '4px'], 151 ['16px', '16px'], 152 ['2px', '2px'], 153 ['20px', '20px'], 154 ['10px', '20px'], 155 ['20px', '20px'], 156 ['10px', '20px'], 157 ['20px', '20px'], 158 ['10px', '20px'], 159 ['20px', '20px'], 160 ['10px', '20px'], 161 ['16px', '16px'], 162 ['10px', '10px'], 163 ['16px', '16px'], 164 ['10px', '10px'], 165 ['4px', '4px'], 166 ['4px', '4px'], 167 ['16px', '16px'], 168 ['2px', '2px'], 169 ['16px', '16px'], 170 ['2px', '2px'], 171 ['16px', '16px'], 172 ['2px', '2px'], 173 ['32px', '32px'], 174 ['2px', '32px'], 175 ['16px', '16px'], 176 ['2px', '2px'], 177 ['20px', '20px'], 178 ['20px', '10px'], 179 ['20px', '20px'], 180 ['20px', '10px'], 181 ['32px', '32px'], 182 ['32px', '10px'], 183 ['20px', '20px'], 184 ['20px', '10px'], 185 ['16px', '16px'], 186 ['10px', '10px'], 187 ['16px', '16px'], 188 ['10px', '10px'], 189 ['32px', '32px'], 190 ['32px', '10px'], 191 ['16px', '16px'], 192 ['10px', '10px'], 193 ['20px', '20px'], 194 ['20px', '10px'], 195 ['20px', '20px'], 196 ['20px', '10px'], 197 ['20px', '4px'], 198 ['20px', '2px'], 199 ['20px', '20px'], 200 ['20px', '2px'], 201 ['20px', '20px'], 202 ['20px', '10px'], 203 ['20px', '20px'], 204 ['20px', '10px'], 205 ['20px', '32px'], 206 ['20px', '10px'], 207 ['20px', '20px'], 208 ['20px', '10px'], 209 ['20px', '20px'], 210 ['10px', '20px'], 211 ['20px', '20px'], 212 ['10px', '20px'], 213 ['32px', '20px'], 214 ['10px', '20px'], 215 ['20px', '20px'], 216 ['10px', '20px'], 217 ['20px', '20px'], 218 ['2px', '20px'], 219 ['20px', '20px'], 220 ['10px', '20px'], 221 ['4px', '20px'], 222 ['2px', '20px'], 223 ['20px', '20px'], 224 ['10px', '20px'], 225 ]; 226 for (var i = 0; i < imgs.length; ++i) { 227 var img = imgs[i]; 228 img.src = url; 229 img.style.width = imgSizes[i][0]; 230 img.style.height = imgSizes[i][1]; 231 } 232 233 </script> 234 235 </body> 236 </html>