grid-max-sizing-flex-004.html (8576B)
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 track sizing</title> 9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212"> 10 <link rel="help" href="http://dev.w3.org/csswg/css-grid/#algo-track-sizing"> 11 <link rel="match" href="grid-max-sizing-flex-004-ref.html"> 12 <style type="text/css"> 13 body,html { color:black; background:white; font-size:8px; line-height:10px; padding:0; margin:0; } 14 15 body { width: 800px; } 16 .grid { 17 display: grid; 18 border: 3px dashed blue; 19 margin-bottom:20px; 20 float: left; 21 clear: left; 22 } 23 .flex { 24 grid-auto-rows: minmax(0,1fr); 25 grid-auto-columns: minmax(0,1fr); 26 } 27 .flex10 { 28 grid-auto-rows: minmax(0,1fr); 29 grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 30 minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 31 minmax(0,1fr) minmax(0,1fr); 32 } 33 .mm { 34 grid-auto-rows: minmax(min-content,max-content); 35 grid-auto-columns: minmax(min-content,max-content); 36 } 37 .zero { 38 grid-auto-rows: minmax(0,0); 39 grid-auto-columns: minmax(0,0); 40 } 41 42 .c1 { grid-column: 1 / span 2; min-height:10px; min-width:0px; } 43 .c2 { grid-column: 2 / span 3; min-height:20px; min-width:10px; } 44 .c3 { grid-column: 3 / span 1; min-height:0; min-width:20px; } 45 .r1 { grid-row: 1; } 46 .x1 { grid-row: 1; min-height:10px; min-width:0px; border-style:none; } 47 48 span { 49 background: gray; 50 border-style: solid; 51 border-width: 1px 3px 5px 7px; 52 } 53 54 x { display:inline-block; height:10px; width:18px; } 55 </style> 56 </head> 57 <body> 58 59 <div class="grid flex" style="width:0;height:0;"></div> 60 <div class="grid flex" style="width:1px;height:1px;"></div> 61 <div class="grid mm" style="width:0;height:0;"></div> 62 <div class="grid mm" style="width:1px;height:1px;"></div> 63 <div class="grid zero" style="width:0;height:0;"></div> 64 <div class="grid zero" style="width:1px;height:1px;"></div> 65 66 <!-- TODO: fails due to broken align:stretch 67 <div class="grid flex" style="width:0;height:0;"><span class="c1"><x></x></span><span class="c2"><x></x></span></div> 68 <div class="grid flex" style="width:1px;height:1px;"><span class="c1"><x></x></span><span class="c2"><x></x></span></div> 69 --> 70 <div class="grid mm" style="width:0;height:0;"><span class="c1"><x></x></span><span class="c2"><x></x></span></div> 71 <div class="grid mm" style="width:1px;height:1px;"><span class="c1"><x></x></span><span class="c2"><x></x></span></div> 72 <!-- TODO: fails due to broken align:stretch 73 <div class="grid zero" style="width:0;height:0;"><span class="c1"><x></x></span><span class="c2"><x></x></span></div> 74 <div class="grid zero" style="width:1px;height:1px;"><span class="c1"><x></x></span><span class="c2"><x></x></span></div> 75 --> 76 77 <div class="grid flex"> 78 <span class="c1 r1"><x></x></span><span class="c1 r1"><x></x></span> 79 <span class="c1 r1"><x></x></span><span class="c1 r1"><x></x></span> 80 </div> 81 82 <div class="grid flex10"> 83 <span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span> 84 <span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span> 85 </div> 86 87 <div class="grid flex10" style="width:0.010px; clear:none;"> 88 <span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span> 89 <span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span> 90 </div> 91 92 <div class="grid flex10" style="width:0.020px; clear:none;"> 93 <span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span> 94 <span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span> 95 </div> 96 97 <div class="grid flex10" style="width:0.040px; clear:none;"> 98 <span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span> 99 <span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span> 100 </div> 101 102 <div class="grid flex10" style="width:0.15px; clear:none;"> 103 <span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span> 104 <span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span> 105 </div> 106 107 <div class="grid flex10" style="width:0.18px; clear:none;"> 108 <span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span> 109 <span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span> 110 </div> 111 112 <div class="grid flex10" style="width:0.19px; clear:none;"> 113 <span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span> 114 <span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span> 115 </div> 116 117 <div class="grid flex10" style="width:1px; clear:none;"> 118 <span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span> 119 <span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span> 120 </div> 121 122 <div class="grid flex10" style="width:2px; clear:none;"> 123 <span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span> 124 <span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span> 125 </div> 126 127 <div class="grid flex10" style="width:3px; clear:none;"> 128 <span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span> 129 <span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span> 130 </div> 131 132 <div class="grid flex10" style="width:4px; clear:none;"> 133 <span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span> 134 <span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span> 135 </div> 136 137 <div class="grid flex10" style="width:5px; clear:none;"> 138 <span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span> 139 <span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span> 140 </div> 141 142 <div class="grid flex10" style="width:6px; clear:none;"> 143 <span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span> 144 <span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span> 145 </div> 146 147 <div class="grid flex10" style="width:7px; clear:none;"> 148 <span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span> 149 <span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span> 150 </div> 151 152 <div class="grid flex10" style="width:8px; clear:none;"> 153 <span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span> 154 <span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span> 155 </div> 156 157 <div class="grid flex10" style="width:9px; clear:none;"> 158 <span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span> 159 <span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span> 160 </div> 161 162 <div class="grid flex10" style="width:10px; clear:none;"> 163 <span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span> 164 <span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span> 165 </div> 166 167 <div class="grid flex10" style="width:11px; clear:none;"> 168 <span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span> 169 <span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span><span class="x1"></span> 170 </div> 171 172 </body> 173 </html>