grid-track-intrinsic-sizing-001-ref.html (4106B)
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: Distribute space beyond growth limits</title> 9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212"> 10 <style type="text/css"> 11 body,html { color:black; background:white; font-family:monospace; font-size:16px; padding:0; margin:0; } 12 13 .grid { 14 display: block; 15 border: 1px solid; 16 width: 500px; 17 } 18 .grid div.c1 { 19 display: table-row; 20 } 21 .grid div { 22 display: table-cell; 23 } 24 25 .c1 { } 26 x { display:block; width:396px; border:2px solid; } 27 .c2 { background: grey; } 28 .c3 { background: blue; } 29 .h10 { height:10px; } 30 </style> 31 </head> 32 <body> 33 34 <div class="grid t1"> 35 <table border="0" cellpadding="0" cellspacing="0"><tr> 36 <td colspan="2"><x>1 2 3 4 5</x></td> 37 </tr><tr> 38 <td class="c2"> </td> 39 <td class="c3"> </td> 40 </tr></table> 41 </div> 42 <div class="grid t1"> 43 <table border="0" cellpadding="0" cellspacing="0"><tr> 44 <td colspan="2"><x>1 2 3 4 5</x></td> 45 </tr><tr> 46 <td class="c2"> </td> 47 <td class="c3"> </td> 48 </tr></table> 49 </div> 50 <div class="grid t1"> 51 <table border="0" cellpadding="0" cellspacing="0"><tr> 52 <td colspan="2"><x>1 2 3 4 5</x></td> 53 </tr><tr> 54 <td class="c2 h10"></td> 55 <td class="c3 h10"></td> 56 </tr></table> 57 </div> 58 <div class="grid t1"> 59 <table border="0" cellpadding="0" cellspacing="0"><tr> 60 <td colspan="2"><x>1 2 3 4 5 6 7 8 9 0 1 2 3 4 5</x></td> 61 </tr><tr> 62 <td class="c2"> </td> 63 <td class="c3"> </td> 64 </tr></table> 65 </div> 66 <div class="grid t1"> 67 <table border="0" cellpadding="0" cellspacing="0"><tr> 68 <td colspan="2"><x>1 2 3 4 5 6 7 8 9 0 1 2 3 4 5</x></td> 69 </tr><tr> 70 <td class="c2"> </td> 71 <td class="c3"> </td> 72 </tr></table> 73 </div> 74 <div class="grid t1"> 75 <table border="0" cellpadding="0" cellspacing="0"><tr> 76 <td colspan="2"><x>1 2 3 4 5 6 7 8 9 0 1 2 3 4 5</x></td> 77 </tr><tr> 78 <td class="c2 h10"></td> 79 <td class="c3 h10"></td> 80 </tr></table> 81 </div> 82 <div class="grid t1"> 83 <table border="0" cellpadding="0" cellspacing="0"><tr> 84 <td colspan="2"><x style="width:-webkit-max-content;width:max-content">1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4</x></td> 85 </tr><tr> 86 <td class="c2"> </td> 87 <td class="c3"> </td> 88 </tr></table> 89 </div> 90 <div class="grid t2"> 91 <table border="0" cellpadding="0" cellspacing="0"><tr> 92 <td colspan="2"><x style="width:auto">1 2 3 4 5 </x></td> 93 </tr><tr> 94 <td class="c2"> </td> 95 <td class="c3"> </td> 96 </tr></table> 97 </div> 98 <div class="grid t2"> 99 <table border="0" cellpadding="0" cellspacing="0"><tr> 100 <td colspan="2"><x style="width:auto">1 2 3 4 5 </x></td> 101 </tr><tr> 102 <td class="c2"> </td> 103 <td class="c3"> </td> 104 </tr></table> 105 </div> 106 <div class="grid t2"> 107 <table border="0" cellpadding="0" cellspacing="0"><tr> 108 <td colspan="2"><x style="width:auto">1 2 3 4 5</x></td> 109 </tr><tr> 110 <td class="c2"></td> 111 <td class="c3"> </td> 112 </tr></table> 113 </div> 114 <div class="grid t2"> 115 <table border="0" cellpadding="0" cellspacing="0"><tr> 116 <td colspan="2"><x style="width:auto">1 2 3 4 5</x></td> 117 </tr><tr> 118 <td class="c3 h10" colspan="2"></td> 119 </tr></table> 120 </div> 121 <div class="grid t2"> 122 <table border="0" cellpadding="0" cellspacing="0"><tr> 123 <td colspan="2"><x style="width:auto">1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 </x></td> 124 </tr><tr> 125 <td class="c2"> </td> 126 <td class="c3"> </td> 127 </tr></table> 128 </div> 129 <div class="grid t2"> 130 <table border="0" cellpadding="0" cellspacing="0"><tr> 131 <td colspan="2"><x style="width:auto">1 2 3 4 5 </x></td> 132 </tr><tr> 133 <td class="c2"> </td> 134 <td class="c3"> </td> 135 </tr></table> 136 </div> 137 138 </body> 139 </html>