grid-auto-min-sizing-percent-001.html (3028B)
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>CSS Grid Test: Testing 'auto' min-sizing with percentage sizes</title> 9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176775"> 10 <link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto"> 11 <link rel="match" href="grid-auto-min-sizing-percent-001-ref.html"> 12 <style type="text/css"> 13 body,html { color:black; background:white; font-size:10px; padding:0; margin:0; } 14 15 .wrap { 16 float: left; 17 } 18 19 .grid { 20 display: grid; 21 float: left; 22 grid-template-columns: minmax(auto,0) 1fr; 23 grid-auto-rows: 10px; 24 border: 1px solid; 25 } 26 27 .item { 28 grid-row: 1 / 2; 29 grid-column: 1 / 2; 30 background:lime; 31 min-height:10px; 32 } 33 34 .item2 { 35 grid-row: 2 / 3; 36 grid-column: 1 / 2; 37 min-width:0; 38 min-height:10px; 39 justify-self:stretch; 40 background:grey; 41 } 42 43 br { clear:both; } 44 45 #px-border .item { border-left:20px solid blue; } 46 #percent-border .item { padding-left:10%; } 47 48 </style> 49 </head> 50 <body> 51 52 <table border="1"> 53 <tr><th>no border/padding/margin</th><th>'border-left:20px'</th><th>'padding-left:10%'</th> 54 <tr><td id="no-border"></td><td id="px-border"></td><td id="percent-border"></td> 55 </tr></table> 56 57 <script> 58 var styles = [ 59 "width:50%", 60 "width:50%; max-width:1px", 61 "width:50%; min-width:100px", 62 "width:calc(100px)", 63 "width:calc(100px + 50%)", 64 "width:100px; padding-right:50%", 65 "width:calc(100px + 50%); min-width:10px", 66 "width:calc(10px + 50%); min-width:100px", 67 "width:calc(75px + 50%); min-width:100px", 68 "width:calc(100px + 50%); max-width:1px", 69 "width:calc(100px + 50%); max-width:150px", 70 "min-width:50%", 71 "min-width:50%; max-width:1px", 72 "min-width:50%; width:100px", 73 "min-width:calc(100px)", 74 "min-width:calc(100px + 50%)", 75 "min-width:100px; padding-right:50%", 76 "min-width:calc(100px + 50%); width:10px", 77 "min-width:calc(10px + 50%); width:100px", 78 "min-width:calc(75px + 50%); width:100px", 79 "min-width:calc(100px + 50%); max-width:1px", 80 "min-width:calc(100px + 50%); max-width:150px", 81 ]; 82 var containers = [ "no-border", "px-border", "percent-border" ]; 83 for (var i = 0; i < containers.length; ++i) { 84 var c = document.querySelector("#"+containers[i]); 85 for (var j = 0; j < styles.length; ++j) { 86 c.appendChild(document.createElement('br')); 87 c.appendChild(document.createTextNode(styles[j])); 88 c.appendChild(document.createElement('br')); 89 var item = document.createElement('div'); 90 item.setAttribute("class","item"); 91 item.setAttribute("style", styles[j]); 92 var item2 = document.createElement('div'); 93 item2.setAttribute("class","item2"); 94 var grid = document.createElement('div'); 95 grid.setAttribute("class","grid"); 96 grid.appendChild(item); 97 grid.appendChild(item2); 98 var wrap = document.createElement('div'); 99 wrap.setAttribute("class","wrap"); 100 wrap.appendChild(grid); 101 c.appendChild(wrap); 102 } 103 } 104 </script> 105 106 107 108 </body> 109 </html>