grid-item-table-stretch-002-ref.html (16827B)
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: stretching table items that has a caption with 'normal' and/or 'stretch' and min/max-size, with Automatic Minimum Size clamping</title> 9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1316051"> 10 <style type="text/css"> 11 * { vertical-align: bottom; } 12 .grid { 13 display: inline-grid; 14 border: 3px solid grey; 15 grid: 32px / 4px; 16 margin-right:20px; 17 align-items: start; 18 justify-items: start; 19 width: 4px; 20 } 21 .r { grid: 4px / 32px; width: 32px;} 22 .r2 { grid: 38px / 32px; width: 32px;} 23 .r26 { grid-template-rows:26px; } 24 .r32 { grid:32px/20px; width: 20px; } 25 .c18 { grid:32px/18px; width: 18px; } 26 .r38 { grid: 38px / 4px; } 27 28 table { 29 border: 1px solid; 30 padding: 0; 31 margin: 0; 32 background: lightgrey; 33 } 34 caption { border: 1px dashed blue; } 35 x { display:block; width:16px; height:16px; } 36 t { display:block; width:6px; height:6px; } 37 38 .w20 { width: 20px } 39 .mxw2 { width: 2px } 40 .mxw10 { width: 10px } 41 .mw20 { width: 20px } 42 .wfill { width:32px } 43 .w6 { width: 6px } 44 45 .h20 { height: 20px } 46 .mxh10 { height: 10px } 47 .mxh2 { height: 2px } 48 .mh20 { height: 20px } 49 .h16 { height: 16px } /* XXX to workaround bug 307866 */ 50 .h8 { height: 8px } /* XXX to workaround bug 307866 */ 51 .w8 { width: 8px } /* XXX to workaround bug 307866 */ 52 .hfill { height:14px } 53 54 .as, .an, .end { margin-top:6px; } 55 .sa, .na, .end { margin-left:-4px; } 56 .sa.mw20, .na.mw20, .end.mw20 { margin-left:-16px; } 57 .sa.w20, .na.w20, .end.w20 { margin-left:-16px; } 58 .sa caption, .na caption, .end caption { width:6px; } 59 .sa.mw20 caption, .na.mw20 caption, .end.mw20 caption { width:18px; } 60 .sa.w20 caption, .na.w20 caption, .end.w20 caption { width:18px; } 61 .r .as, .r .an, .r .end { margin-top:-22px; } 62 .as.h20, .an.h20, .end.h20 { margin-top:-6px; } 63 .r .as.h20, .r .an.h20, .r .end.h20 { margin-top:-34px; } 64 .r .sa, .r .na, .r .end { margin-left:14px; } 65 .r .sa.w20, .r .na.w20, .r .end.w20 { margin-left:12px; } 66 .r .sa caption, .r .na caption, .r .end caption { width:auto; } 67 </style> 68 </head> 69 <body> 70 71 <div class="grid r"><table cellpadding=0 cellspacing=0 class="wfill"><caption><x></x></caption><td><t></t></td></table></div> 72 <div class="grid r"><table cellpadding=0 cellspacing=0 class="sa"><caption><x></x></caption><td><t></t></td></table></div> 73 <div class="grid r"><table cellpadding=0 cellspacing=0 class="sa w8"><caption><x></x></caption><td><t></t></td></table></div> 74 <div class="grid r"><table cellpadding=0 cellspacing=0 class="na"><caption><x></x></caption><td><t></t></td></table></div> 75 <div class="grid r"><table cellpadding=0 cellspacing=0 class="na mxw2"><caption><x></x></caption><td><t></t></td></table></div> 76 <div class="grid r"><table cellpadding=0 cellspacing=0 class="wfill as"><caption><x></x></caption><td><t></t></td></table></div> 77 <div class="grid r"><table cellpadding=0 cellspacing=0 class="as mxw10"><caption><x></x></caption><td><t></t></td></table></div> 78 <div class="grid r"><table cellpadding=0 cellspacing=0 class="wfill an"><caption><x></x></caption><td><t></t></td></table></div> 79 <div class="grid r"><table cellpadding=0 cellspacing=0 class="an mxw2"><caption><x></x></caption><td><t></t></td></table></div> 80 81 <pre><!--min-height:20px--></pre> 82 <div class="grid r r2"><table cellpadding=0 cellspacing=0 class="wfill mh20"><caption><x></x></caption><td><t></t></td></table></div> 83 <div class="grid r r2"><table cellpadding=0 cellspacing=0 class="mh20 mxw10"><caption><x></x></caption><td><t></t></td></table></div> 84 <div class="grid r r2"><table cellpadding=0 cellspacing=0 class="end mh20 w8" style="margin-top:0"><caption><x></x></caption><td><t></t></td></table></div> 85 <div class="grid r r2"><table cellpadding=0 cellspacing=0 class="sa mh20"><caption><x></x></caption><td><t></t></td></table></div> 86 <div class="grid r r2"><table cellpadding=0 cellspacing=0 class="sa mh20 w8"><caption><x></x></caption><td><t></t></td></table></div> 87 <div class="grid r r2"><table cellpadding=0 cellspacing=0 class="na mh20"><caption><x></x></caption><td><t></t></td></table></div> 88 <div class="grid r r2"><table cellpadding=0 cellspacing=0 class="na mh20 w8"><caption><x></x></caption><td><t></t></td></table></div> 89 <div class="grid r r2"><table cellpadding=0 cellspacing=0 class="wfill mh20" style="margin-top:0"><caption><x></x></caption><td><t></t></td></table></div> 90 <div class="grid r r2"><table cellpadding=0 cellspacing=0 class="wfill mh20" style="margin-top:0"><caption><x></x></caption><td><t></t></td></table></div> 91 92 <pre><!--min-height:0--></pre> 93 <div class="grid r r26"><table cellpadding=0 cellspacing=0 class="wfill mh0"><caption><x></x></caption><td><t></t></td></table></div> 94 <div class="grid r r26"><table cellpadding=0 cellspacing=0 class="mh0 mxw10"><caption><x></x></caption><td><t></t></td></table></div> 95 <div class="grid r r26"><table cellpadding=0 cellspacing=0 class="sa mh0"><caption><x></x></caption><td><t></t></td></table></div> 96 <div class="grid r r26"><table cellpadding=0 cellspacing=0 class="sa w8 mh0 mxw10"><caption><x></x></caption><td><t></t></td></table></div> 97 <div class="grid r r26"><table cellpadding=0 cellspacing=0 class="na mh0"><caption><x></x></caption><td><t></t></td></table></div> 98 <div class="grid r r26"><table cellpadding=0 cellspacing=0 class="na mh0 mxw2"><caption><x></x></caption><td><t></t></td></table></div> 99 <div class="grid r r26"><table cellpadding=0 cellspacing=0 class="wfill as mh0" style="margin-top:0"><caption><x></x></caption><td><t></t></td></table></div> 100 <div class="grid r r26"><table cellpadding=0 cellspacing=0 class="wfill an mh0" style="margin-top:0"><caption><x></x></caption><td><t></t></td></table></div> 101 102 <pre><!----></pre> 103 104 <div class="grid"><table cellpadding=0 cellspacing=0 class="hfill"><caption class="w6"><x></x></caption><td><t></t></td></table></div> 105 <div class="grid"><table cellpadding=0 cellspacing=0 class="hfill mxw2"><caption class="w6"><x></x></caption><td><t></t></td></table></div> 106 <div class="grid"><table cellpadding=0 cellspacing=0 class="" style="margin-left:-14px; margin-top:6px"><caption><x></x></caption><td><t></t></td></table></div> 107 <div class="grid"><table cellpadding=0 cellspacing=0 class="" style="margin-left:-14px; margin-top:6px"><caption><x></x></caption><td><t></t></td></table></div> 108 <div class="grid"><table cellpadding=0 cellspacing=0 class="hfill" style="margin-left:-14px"><caption><x></x></caption><td><t></t></td></table></div> 109 <div class="grid"><table cellpadding=0 cellspacing=0 class="hfill" style="margin-left:-14px"><caption><x></x></caption><td><t></t></td></table></div> 110 <div class="grid"><table cellpadding=0 cellspacing=0 class="hfill" style="margin-left:-14px"><caption><x></x></caption><td><t></t></td></table></div> 111 <div class="grid"><table cellpadding=0 cellspacing=0 class="hfill" style="margin-left:-14px"><caption><x></x></caption><td><t></t></td></table></div> 112 <div class="grid"><table cellpadding=0 cellspacing=0 class="as"><caption class="w6"><x></x></caption><td><t></t></td></table></div> 113 <div class="grid"><table cellpadding=0 cellspacing=0 class="as mxw2"><caption class="w6"><x></x></caption><td><t></t></td></table></div> 114 <div class="grid"><table cellpadding=0 cellspacing=0 class="an"><caption class="w6"><x></x></caption><td><t></t></td></table></div> 115 <div class="grid"><table cellpadding=0 cellspacing=0 class="an mxw2"><caption class="w6"><x></x></caption><td><t></t></td></table></div> 116 117 <pre><!--min-width:20px--></pre> 118 <div class="grid r32"><table cellpadding=0 cellspacing=0 class="hfill mw20"><caption><x></x></caption><td><t></t></td></table></div> 119 <div class="grid r32"><table cellpadding=0 cellspacing=0 class="mw20 mxh10"><caption><x></x></caption><td><t></t></td></table></div> 120 <div class="grid r32"><table cellpadding=0 cellspacing=0 class="mw20" style="margin-top:6px"><caption><x></x></caption><td><t></t></td></table></div> 121 <div class="grid r32"><table cellpadding=0 cellspacing=0 class="h8 mw20 mxh10" style="margin-top:6px"><caption><x></x></caption><td><t></t></td></table></div> 122 <div class="grid r32"><table cellpadding=0 cellspacing=0 class="hfill sa mw20" style="margin-left:0"><caption><x></x></caption><td><t></t></td></table></div> 123 <div class="grid r32"><table cellpadding=0 cellspacing=0 class="sa mw20 mxh10" style="margin-left:0"><caption><x></x></caption><td><t></t></td></table></div> 124 <div class="grid r32"><table cellpadding=0 cellspacing=0 class="hfill na mw20" style="margin-left:0"><caption><x></x></caption><td><t></t></td></table></div> 125 <div class="grid r32"><table cellpadding=0 cellspacing=0 class="na mw20 mxh10" style="margin-left:0"><caption><x></x></caption><td><t></t></td></table></div> 126 <div class="grid r32"><table cellpadding=0 cellspacing=0 class="as mw20"><caption><x></x></caption><td><t></t></td></table></div> 127 <div class="grid r32"><table cellpadding=0 cellspacing=0 class="as h8 mw20 mxh10"><caption><x></x></caption><td><t></t></td></table></div> 128 <div class="grid r32"><table cellpadding=0 cellspacing=0 class="an mw20"><caption><x></x></caption><td><t></t></td></table></div> 129 <div class="grid r32"><table cellpadding=0 cellspacing=0 class="an h8 mw20 mxh10"><caption><x></x></caption><td><t></t></td></table></div> 130 131 <pre><!--min-width:0--></pre> 132 <div class="grid c18"><table cellpadding=0 cellspacing=0 class="hfill mw0"><caption><x></x></caption><td class="w20"><t></t></td></table></div> 133 <div class="grid c18"><table cellpadding=0 cellspacing=0 class="mw0 mxh10"><caption><x></x></caption><td class="w20"><t></t></td></table></div> 134 <div class="grid c18"><table cellpadding=0 cellspacing=0 class="mw0" style="margin-top:6px"><caption><x></x></caption><td><t></t></td></table></div> 135 <div class="grid c18"><table cellpadding=0 cellspacing=0 class="mw0" style="margin-top:6px"><caption><x></x></caption><td><t></t></td></table></div> 136 <div class="grid c18"><table cellpadding=0 cellspacing=0 class="hfill mw0" style="margin-top:0px"><caption><x></x></caption><td><t></t></td></table></div> 137 <div class="grid c18"><table cellpadding=0 cellspacing=0 class="mw0" style="margin-top:0px"><caption><x></x></caption><td class="h8"><t></t></td></table></div> 138 <div class="grid c18"><table cellpadding=0 cellspacing=0 class="hfill mw0" style="margin-top:0px"><caption><x></x></caption><td><t></t></td></table></div> 139 <div class="grid c18"><table cellpadding=0 cellspacing=0 class="mw0" style="margin-top:0px"><caption><x></x></caption><td class="h8"><t></t></td></table></div> 140 <div class="grid c18"><table cellpadding=0 cellspacing=0 class="mw0" style="margin-top:6px"><caption><x></x></caption><td class="w20"><t></t></td></table></div> 141 <div class="grid c18"><table cellpadding=0 cellspacing=0 class="mw0" style="margin-top:6px"><caption><x></x></caption><td class="w20"><t></t></td></table></div> 142 <div class="grid c18"><table cellpadding=0 cellspacing=0 class="mw0" style="margin-top:6px"><caption><x></x></caption><td class="w20"><t></t></td></table></div> 143 <div class="grid c18"><table cellpadding=0 cellspacing=0 class="mw0" style="margin-top:6px"><caption><x></x></caption><td class="w20"><t></t></td></table></div> 144 145 <pre><!--width:20px--></pre> 146 147 <div class="grid r"><table cellpadding=0 cellspacing=0 class="w20"><caption><x></x></caption><td><t></t></td></table></div> 148 <div class="grid r"><table cellpadding=0 cellspacing=0 class="h8 w20 mxh10"><caption><x></x></caption><td><t></t></td></table></div> 149 <div class="grid r"><table cellpadding=0 cellspacing=0 class="h8 end w20 mxh10"><caption><x></x></caption><td><t></t></td></table></div> 150 <div class="grid r"><table cellpadding=0 cellspacing=0 class="sa w20"><caption><x></x></caption><td><t></t></td></table></div> 151 <div class="grid r"><table cellpadding=0 cellspacing=0 class="na w20"><caption><x></x></caption><td><t></t></td></table></div> 152 <div class="grid r"><table cellpadding=0 cellspacing=0 class="as w20"><caption><x></x></caption><td><t></t></td></table></div> 153 <div class="grid r"><table cellpadding=0 cellspacing=0 class="an w20"><caption><x></x></caption><td><t></t></td></table></div> 154 <div class="grid r"><table cellpadding=0 cellspacing=0 class="an w20 mxh2"><caption><x></x></caption><td><t></t></td></table></div> 155 156 <pre><!--width:20px--></pre> 157 158 <div class="grid r32"><table cellpadding=0 cellspacing=0 class="an w20"><caption><x></x></caption><td><t></t></td></table></div> 159 <div class="grid r32"><table cellpadding=0 cellspacing=0 class="an w20"><caption><x></x></caption><td><t></t></td></table></div> 160 <div class="grid r32"><table cellpadding=0 cellspacing=0 class="an w20"><caption><x></x></caption><td><t></t></td></table></div> 161 <div class="grid r32"><table cellpadding=0 cellspacing=0 class="an w20"><caption><x></x></caption><td><t></t></td></table></div> 162 <div class="grid r32"><table cellpadding=0 cellspacing=0 class="hfill w20"><caption><x></x></caption><td><t></t></td></table></div> 163 <div class="grid r32"><table cellpadding=0 cellspacing=0 class="w20 mxh10"><caption><x></x></caption><td><t></t></td></table></div> 164 <div class="grid r32"><table cellpadding=0 cellspacing=0 class="hfill w20"><caption><x></x></caption><td><t></t></td></table></div> 165 <div class="grid r32"><table cellpadding=0 cellspacing=0 class="w20 mxh10"><caption><x></x></caption><td><t></t></td></table></div> 166 <div class="grid r32"><table cellpadding=0 cellspacing=0 class="as w20"><caption><x></x></caption><td><t></t></td></table></div> 167 <div class="grid r32"><table cellpadding=0 cellspacing=0 class="h8 as w20 mxh10"><caption><x></x></caption><td><t></t></td></table></div> 168 <div class="grid r32"><table cellpadding=0 cellspacing=0 class="an w20"><caption><x></x></caption><td><t></t></td></table></div> 169 <div class="grid r32"><table cellpadding=0 cellspacing=0 class="h8 an w20 mxh10"><caption><x></x></caption><td><t></t></td></table></div> 170 171 <pre><!--height:20px--></pre> 172 173 <div class="grid r r2"><table cellpadding=0 cellspacing=0 class="wfill h20"><caption><x></x></caption><td><t></t></td></table></div> 174 <div class="grid r r2"><table cellpadding=0 cellspacing=0 class="h20 mxw10"><caption><x></x></caption><td><t></t></td></table></div> 175 <div class="grid r r2"><table cellpadding=0 cellspacing=0 class="h20" style="margin-left:14px"><caption><x></x></caption><td><t></t></td></table></div> 176 <div class="grid r r2"><table cellpadding=0 cellspacing=0 class="h20" style="margin-left:14px"><caption><x></x></caption><td><t></t></td></table></div> 177 <div class="grid r r2"><table cellpadding=0 cellspacing=0 class="wfill h20"><caption><x></x></caption><td><t></t></td></table></div> 178 <div class="grid r r2"><table cellpadding=0 cellspacing=0 class="h20 mxw10"><caption><x></x></caption><td><t></t></td></table></div> 179 <div class="grid r r2"><table cellpadding=0 cellspacing=0 class="wfill h20"><caption><x></x></caption><td><t></t></td></table></div> 180 <div class="grid r r2"><table cellpadding=0 cellspacing=0 class="h20 mxw10"><caption><x></x></caption><td><t></t></td></table></div> 181 182 <pre><!--height:20px--></pre> 183 184 <div class="grid r38"><table cellpadding=0 cellspacing=0 class="h20"><caption class="w6"><x></x></caption><td><t></t></td></table></div> 185 <div class="grid r38"><table cellpadding=0 cellspacing=0 class="h20 mxw2"><caption class="w6"><x></x></caption><td><t></t></td></table></div> 186 <div class="grid r38"><table cellpadding=0 cellspacing=0 class="h20" style="margin-left:-14px"><caption><x></x></caption><td><t></t></td></table></div> 187 <div class="grid r38"><table cellpadding=0 cellspacing=0 class="h20" style="margin-left:-14px"><caption><x></x></caption><td><t></t></td></table></div> 188 <div class="grid r38"><table cellpadding=0 cellspacing=0 class="h20" style="margin-left:-14px"><caption><x></x></caption><td><t></t></td></table></div> 189 <div class="grid r38"><table cellpadding=0 cellspacing=0 class="h20" style="margin-left:-14px"><caption><x></x></caption><td><t></t></td></table></div> 190 <div class="grid r38"><table cellpadding=0 cellspacing=0 class="h20" style="margin-left:-14px"><caption><x></x></caption><td><t></t></td></table></div> 191 <div class="grid r38"><table cellpadding=0 cellspacing=0 class="h20" style="margin-left:-14px"><caption><x></x></caption><td><t></t></td></table></div> 192 <div class="grid r38"><table cellpadding=0 cellspacing=0 class="h20"><caption class="w6"><x></x></caption><td><t></t></td></table></div> 193 <div class="grid r38"><table cellpadding=0 cellspacing=0 class="h20 mxw2"><caption class="w6"><x></x></caption><td><t></t></td></table></div> 194 <div class="grid r38"><table cellpadding=0 cellspacing=0 class="h20"><caption class="w6"><x></x></caption><td><t></t></td></table></div> 195 <div class="grid r38"><table cellpadding=0 cellspacing=0 class="w8 h20 mxw10"><caption class="w6"><x></x></caption><td><t></t></td></table></div> 196 197 </body> 198 </html>