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