grid-item-auto-min-size-clamp-004-ref.html (5956B)
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: Clamp 'automatic minimum size' to definite max-sizing for orthogonal intrinsic ratio item</title> 9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1300369"> 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: grid; 15 grid-template-columns: repeat(2,minmax(auto, 15px)); 16 grid-template-rows: repeat(2,minmax(auto, 10px)); 17 grid-gap: 1px; 18 align-items: start; 19 justify-items: start; 20 float: left; 21 border: 1px dashed; 22 margin-left: 16px; 23 margin-bottom: 14px; 24 } 25 .sz { 26 width: 40px; 27 height: 40px; 28 } 29 30 .definite { 31 grid-template-columns: repeat(2,15px); 32 grid-template-rows: repeat(2,10px); 33 } 34 .min { 35 grid-template-columns: repeat(2,minmax(min-content, 15px)); 36 grid-template-rows: repeat(2,minmax(min-content, 10px)); 37 } 38 .max { 39 grid-template-columns: repeat(2,minmax(max-content, 15px)); 40 grid-template-rows: repeat(2,minmax(max-content, 10px)); 41 } 42 43 .larger .grid { 44 grid-template-columns: repeat(2,minmax(auto, 25px)); 45 grid-template-rows: repeat(2,minmax(auto, 28px)); 46 } 47 .larger .definite { 48 grid-template-columns: repeat(2,25px); 49 grid-template-rows: repeat(2,28px); 50 } 51 .larger .min { 52 grid-template-columns: repeat(2,minmax(min-content, 25px)); 53 grid-template-rows: repeat(2,minmax(min-content, 28px)); 54 } 55 .larger .max { 56 grid-template-columns: repeat(2,minmax(max-content, 25px)); 57 grid-template-rows: repeat(2,minmax(max-content, 28px)); 58 } 59 60 .stretch .grid { 61 align-items: stretch; 62 justify-items: stretch; 63 } 64 .grid.a { 65 width:54px; 66 } 67 .grid.a2 { 68 width:38px; 69 } 70 .larger .grid.a { 71 width:64px; 72 } 73 .larger .grid.a2 { 74 width:51px; 75 } 76 .grid.x1 { 77 grid-template-columns:38px 15px; 78 } 79 .larger .grid.x1 { 80 grid-template-columns:38px 25px; 81 } 82 .grid.x2, .grid.x3 { 83 grid-template-columns:18.5px 18.5px; 84 } 85 .larger .grid.x2 { 86 grid-template-columns:25px 25px; 87 } 88 .larger .grid.x3 { 89 grid-template-columns:19.5px 19.5px; 90 } 91 92 img { 93 writing-mode: vertical-rl; 94 grid-area: 1 / 1; 95 border: 1px solid; 96 padding: 1px 3px 5px 7px; 97 margin: 3px 5px 7px 1px; 98 width: 0; 99 height: 0; 100 } 101 .span2 { 102 grid-area: 1 / 1 / span 2 / span 2; 103 } 104 105 x { 106 grid-area: 1 / 1; 107 min-width: 0; 108 min-height: 0; 109 align-self: stretch; 110 justify-self: stretch; 111 background: cyan; 112 } 113 114 br { 115 clear: both; 116 } 117 </style> 118 </head> 119 <body> 120 121 <div id="tests"> 122 <div class="grid a"><x></x><img src="support/solidblue-20x32.png"></div> 123 <div class="grid definite"><x></x><img src="support/solidblue-20x32.png"></div> 124 <div class="grid a2"><x></x><img class="span2" src="support/solidblue-20x32.png"></div> 125 <div class="grid definite"><x></x><img class="span2" src="support/solidblue-20x32.png"></div> 126 127 <div class="grid sz"><x></x><img src="support/solidblue-20x32.png"></div> 128 <div class="grid sz definite"><x></x><img src="support/solidblue-20x32.png"></div> 129 <div class="grid sz"><x></x><img class="span2" src="support/solidblue-20x32.png"></div> 130 <div class="grid sz definite"><x></x><img class="span2" src="support/solidblue-20x32.png"></div> 131 132 <br> 133 134 <div class="grid min"><x></x><img src="support/solidblue-20x32.png"></div> 135 <div class="grid min"><x></x><img class="span2" src="support/solidblue-20x32.png"></div> 136 <div class="grid sz min"><x></x><img src="support/solidblue-20x32.png"></div> 137 <div class="grid sz min"><x></x><img class="span2" src="support/solidblue-20x32.png"></div> 138 139 <div class="grid x1 max"><x></x><img src="support/solidblue-20x32.png"></div> 140 <div class="grid x2 max"><x></x><img class="span2" src="support/solidblue-20x32.png"></div> 141 <div class="grid x1 sz max"><x></x><img src="support/solidblue-20x32.png"></div> 142 <div class="grid x3 sz max"><x></x><img class="span2" src="support/solidblue-20x32.png"></div> 143 144 <br> 145 146 </div> 147 148 <script> 149 var tests = document.getElementById('tests'); 150 151 var n = tests.cloneNode(true); 152 var wrap = document.createElement('div'); 153 wrap.className = 'larger'; 154 wrap.appendChild(n); 155 document.body.appendChild(wrap); 156 157 var n = tests.cloneNode(true); 158 var wrap = document.createElement('div'); 159 wrap.className = 'stretch'; 160 wrap.appendChild(n); 161 document.body.appendChild(wrap); 162 163 var n = tests.cloneNode(true); 164 var wrap = document.createElement('div'); 165 wrap.className = 'stretch larger'; 166 wrap.appendChild(n); 167 document.body.appendChild(wrap); 168 169 </script> 170 171 <script> 172 var imgSizes = 173 [ 174 ['0px', '0px'], 175 ['0px', '0px'], 176 ['2px', '3px'], 177 ['2px', '3px'], 178 ['0px', '0px'], 179 ['0px', '0px'], 180 ['2px', '3px'], 181 ['2px', '3px'], 182 ['0px', '0px'], 183 ['2px', '3px'], 184 ['0px', '0px'], 185 ['2px', '3px'], 186 ['13px', '20px'], 187 ['13px', '20px'], 188 ['13px', '20px'], 189 ['13px', '20px'], 190 ['6px', '10px'], 191 ['6px', '10px'], 192 ['20px', '32px'], 193 ['20px', '32px'], 194 ['6px', '10px'], 195 ['6px', '10px'], 196 ['14px', '22px'], 197 ['20px', '32px'], 198 ['6px', '10px'], 199 ['20px', '32px'], 200 ['6px', '10px'], 201 ['14px', '22px'], 202 ['13px', '20px'], 203 ['20px', '32px'], 204 ['13px', '20px'], 205 ['14px', '22px'], 206 ['0px', '0px'], 207 ['0px', '0px'], 208 ['13px', '3px'], 209 ['13px', '3px'], 210 ['0px', '0px'], 211 ['0px', '0px'], 212 ['13px', '3px'], 213 ['13px', '3px'], 214 ['0px', '0px'], 215 ['13px', '3px'], 216 ['0px', '0px'], 217 ['13px', '3px'], 218 ['20px', '20px'], 219 ['20px', '20px'], 220 ['20px', '20px'], 221 ['20px', '20px'], 222 ['7px', '10px'], 223 ['7px', '10px'], 224 ['33px', '39px'], 225 ['33px', '39px'], 226 ['7px', '10px'], 227 ['7px', '10px'], 228 ['22px', '22px'], 229 ['33px', '39px'], 230 ['7px', '10px'], 231 ['33px', '39px'], 232 ['7px', '10px'], 233 ['22px', '22px'], 234 ['20px', '20px'], 235 ['33px', '39px'], 236 ['20px', '20px'], 237 ['22px', '22px'], 238 ]; 239 var imgs = document.querySelectorAll('img'); 240 for (var i = 0; i < imgs.length; ++i) { 241 imgs[i].style.width = imgSizes[i][0]; 242 imgs[i].style.height = imgSizes[i][1]; 243 } 244 </script> 245 246 </body></html>