grid-auto-min-sizing-min-content-min-size-003-ref.html (2055B)
1 <!DOCTYPE HTML> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 https://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html><head> 7 <meta charset="utf-8"> 8 <title>Reference: Testing track 'auto' min-sizing function with 'min-height:min-content' on an item with an intrinsic aspect ratio</title> 9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1218178"> 10 <style type="text/css"> 11 html,body { color:black; background-color:white; font:12px monospace; padding:0; margin:0; } 12 13 .grid { 14 display: grid; 15 float: left; 16 border: 1px solid; 17 align-items: start; 18 justify-items: start; 19 margin-bottom:1em; 20 } 21 22 .row { } 23 .row img { min-width:0; } 24 25 br { clear:both; } 26 27 </style> 28 </head> 29 <body> 30 31 <script> 32 var coltest = [ 33 "12px", "12px", "4px", "1px", "2px", "1px", "1px", "1px", "1px", "3px", "5px" 34 ]; 35 var rowtest = [ 36 "width:12px; max-height:48px", "width:12px; height:48px", "width:4px; height:12px", 37 "height:12px", "max-height:48px", "max-height:12px", "width:1px", "max-width:1px", 38 "width:1px; height:20px", "min-width:3px", "min-width:5px; max-height:30px" 39 ]; 40 var results = [ 41 "48px", "48px", "12px", "12px", "24px", "12px", "12px", "12px", "20px", "36px", "30px" 42 ]; 43 44 var h3 = document.createElement('h3'); 45 h3.appendChild(document.createTextNode("grid-template-rows:minmax(auto,0.0001fr)")); 46 document.body.appendChild(h3); 47 for (var i = 0; i < rowtest.length; ++i) { 48 var grid = document.createElement('div'); 49 grid.setAttribute("class","grid row"); 50 grid.setAttribute("style","grid:minmax("+results[i]+",0) / " + coltest[i]); 51 var img = document.createElement('img'); 52 img.setAttribute("src","support/lime-2x24.png"); 53 img.setAttribute("style",rowtest[i] + "; min-height:"+ results[i]); 54 grid.appendChild(img); 55 document.body.appendChild(document.createTextNode(`Test ${i+1}: 24x2.png -- ${rowtest[i]}`)); 56 document.body.appendChild(document.createElement('br')); 57 document.body.appendChild(grid); 58 document.body.appendChild(document.createElement('br')); 59 } 60 </script> 61 62 </body> 63 </html>