grid-auto-min-sizing-percent-001-ref.html (4042B)
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: 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 <style type="text/css"> 11 body,html { color:black; background:white; font-size:10px; padding:0; margin:0; } 12 13 .wrap { 14 float: left; 15 } 16 17 .grid { 18 display: grid; 19 float: left; 20 grid-template-columns: minmax(0,0) 1fr; 21 grid-auto-rows: 10px; 22 border: 1px solid; 23 } 24 25 .item { 26 grid-row: 1 / 2; 27 grid-column: 1 / 2; 28 background:lime; 29 min-height:10px; 30 } 31 32 .item2 { 33 grid-row: 2 / 3; 34 grid-column: 1 / 2; 35 min-width:0; 36 min-height:10px; 37 justify-self:stretch; 38 background:grey; 39 } 40 41 br { clear:both; } 42 43 #px-border .item { border-left:20px solid blue; } 44 #percent-border .item { padding-left:10%; } 45 46 #px-border .grid { grid-template-columns: minmax(20px,0) 1fr; } 47 .c100 { grid-template-columns: minmax(100px,0) 1fr; } 48 .c100100 { grid-template-columns: minmax(100px,0) 100px; } 49 .c200 { grid-template-columns: 200px; } 50 #px-border .c100 { grid-template-columns: minmax(120px,0) 1fr; } 51 #px-border .c100calc100 { grid-template-columns: minmax(120px,0) 1fr; } 52 #px-border .c100100 { grid-template-columns: minmax(120px,0) 120px; } 53 #px-border .c200 { grid-template-columns: 240px; } 54 .c10 { grid-template-columns: minmax(10px,0) 1fr; } 55 #px-border .c10 { grid-template-columns: minmax(30px,0) 1fr; } 56 57 #percent-border .c100 { grid-template-columns: 100px 0; } 58 #percent-border .c100calc100 { grid-template-columns: 100px 10px; } 59 #percent-border .c10 { grid-template-columns: minmax(10px,0) 0; } 60 #percent-border .c100100 { grid-template-columns: minmax(100px,0) 150px; } 61 #percent-border .c200 { grid-template-columns: 250px; } 62 </style> 63 </head> 64 <body> 65 66 <table border="1"> 67 <tr><th>no border/padding/margin</th><th>'border-left:20px'</th><th>'padding-left:10%'</th> 68 <tr><td id="no-border"></td><td id="px-border"></td><td id="percent-border"></td> 69 </tr></table> 70 71 <script> 72 var styles = [ 73 "width:50%", 74 "width:50%; max-width:1px", 75 "width:50%; min-width:100px", 76 "width:calc(100px)", 77 "width:calc(100px + 50%)", 78 "width:100px; padding-right:50%", 79 "width:calc(100px + 50%); min-width:10px", 80 "width:calc(10px + 50%); min-width:100px", 81 "width:calc(75px + 50%); min-width:100px", 82 "width:calc(100px + 50%); max-width:1px", 83 "width:calc(100px + 50%); max-width:150px", 84 "min-width:50%", 85 "min-width:50%; max-width:1px", 86 "min-width:50%; width:100px", 87 "min-width:calc(100px)", 88 "min-width:calc(100px + 50%)", 89 "min-width:100px; padding-right:50%", 90 "min-width:calc(100px + 50%); width:10px", 91 "min-width:calc(10px + 50%); width:100px", 92 "min-width:calc(75px + 50%); width:100px", 93 "min-width:calc(100px + 50%); max-width:1px", 94 "min-width:calc(100px + 50%); max-width:150px", 95 ]; 96 var grids = [ 97 "grid", 98 "grid", 99 "grid c100", 100 "grid c100", 101 "grid", 102 "grid c100", 103 "grid c10", 104 "grid c100", 105 "grid c100", 106 "grid", 107 "grid", 108 "grid", 109 "grid", 110 "grid c100", 111 "grid c100", 112 "grid", 113 "grid c100", 114 "grid c10", 115 "grid c100", 116 "grid c100", 117 "grid", 118 "grid", 119 ]; 120 var containers = [ "no-border", "px-border", "percent-border" ]; 121 for (var i = 0; i < containers.length; ++i) { 122 var c = document.querySelector("#"+containers[i]); 123 for (var j = 0; j < styles.length; ++j) { 124 c.appendChild(document.createElement('br')); 125 c.appendChild(document.createTextNode(styles[j])); 126 c.appendChild(document.createElement('br')); 127 var item = document.createElement('div'); 128 item.setAttribute("class","item"); 129 item.setAttribute("style", styles[j]); 130 var item2 = document.createElement('div'); 131 item2.setAttribute("class","item2"); 132 var grid = document.createElement('div'); 133 grid.setAttribute("class",grids[j]); 134 grid.appendChild(item); 135 grid.appendChild(item2); 136 var wrap = document.createElement('div'); 137 wrap.setAttribute("class","wrap"); 138 wrap.appendChild(grid); 139 c.appendChild(wrap); 140 } 141 } 142 </script> 143 144 145 146 </body> 147 </html>