stretch-table-001.html (2982B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <link rel="help" 4 href="https://drafts.csswg.org/css-sizing-4/#stretch-fit-sizing"> 5 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> 6 <script src='/resources/testharness.js'></script> 7 <script src='/resources/testharnessreport.js'></script> 8 <script src="/resources/check-layout-th.js"></script> 9 <meta name="assert" 10 content="The stretch keyword should work as a block-size for table parts"> 11 <style> 12 table { 13 border-spacing: 0; 14 margin-bottom: 3px; 15 } 16 td { 17 border: 0; 18 padding: 0; 19 } 20 .stretch { 21 height: -webkit-fill-available; 22 height: stretch; 23 } 24 .spacer { 25 height: 10px; 26 width: 20px; 27 background: tan; 28 } 29 </style> 30 <body onload="checkLayout('.stretch')"> 31 <!-- 'stretch' on a table: --> 32 <table class="stretch" 33 data-expected-width="40" 34 data-expected-height="10"> 35 <tbody> 36 <tr> 37 <td><div class="spacer"></div></td> 38 <td><div class="spacer"></div></td> 39 </tr> 40 </tbody> 41 </table> 42 43 <!-- 'stretch' on a table in a fixed-height div: --> 44 <div style="height: 30px"> 45 <table class="stretch" 46 data-expected-width="40" 47 data-expected-height="30"> 48 <tbody> 49 <tr> 50 <td><div class="spacer"></div></td> 51 <td><div class="spacer"></div></td> 52 </tr> 53 </tbody> 54 </table> 55 </div> 56 57 <!-- 'stretch' on a tbody: --> 58 <table> 59 <tbody class="stretch" 60 data-expected-width="40" 61 data-expected-height="10"> 62 <tr> 63 <td><div class="spacer"></div></td> 64 <td><div class="spacer"></div></td> 65 </tr> 66 </tbody> 67 </table> 68 69 <!-- 'stretch' on a table row: --> 70 <table> 71 <tbody> 72 <tr class="stretch" 73 data-expected-width="40" 74 data-expected-height="10"> 75 <td><div class="spacer"></div></td> 76 <td><div class="spacer"></div></td> 77 </tr> 78 </tbody> 79 </table> 80 81 <!-- 'stretch' on a table cell: --> 82 <table> 83 <tbody> 84 <tr> 85 <td class="stretch" 86 data-expected-width="20" 87 data-expected-height="10"> 88 <div class="spacer"></div> 89 </td> 90 <td><div class="spacer"></div></td> 91 </tr> 92 </tbody> 93 </table> 94 95 <!-- 'stretch' on a row-spanning table cell: --> 96 <table> 97 <tbody> 98 <tr> 99 <td><div class="spacer"></div></td> 100 <td class="stretch" 101 data-expected-width="20" 102 data-expected-height="20" rowspan="2"> 103 <div class="spacer"></div> 104 </td> 105 </tr> 106 <tr><td><div class="spacer"></div></td></tr> 107 </tbody> 108 </table> 109 110 <!-- 'stretch' on a caption: --> 111 <table> 112 <caption class="stretch" 113 data-expected-width="40" 114 data-expected-height="10"> 115 <div class="spacer"></div> 116 </caption> 117 <tbody> 118 <tr> 119 <td><div class="spacer"></div></td> 120 <td><div class="spacer"></div></td> 121 </tr> 122 </tbody> 123 </table> 124 </body>