td-box-sizing-001.html (6603B)
1 <!doctype html> 2 <title>TD box sizing</title> 3 <script src='/resources/testharness.js'></script> 4 <script src='/resources/testharnessreport.js'></script> 5 <script src="/resources/check-layout-th.js"></script> 6 <link rel="stylesheet" type="text/css" href="./support/table-tentative.css"> 7 <link rel="author" title="Aleks Totic" href="atotic@chromium.org" /> 8 <link rel="help" href="https://www.w3.org/TR/css-tables-3/" /> 9 <style> 10 main table { 11 background: gray; 12 border-spacing: 10px 10px; 13 table-layout: auto; 14 } 15 main td { 16 padding: 20px; 17 background: #BFB; 18 font-size: 10px; 19 box-sizing: border-box; 20 } 21 main td > div { 22 display: inline-block; 23 background: rgba(56,162,56,0.3); 24 } 25 </style> 26 <main> 27 <h1>TD and box sizing</h1> 28 29 <p>TD defaults to box-sizing: content-box. How does box-sizing affect final TD size?</p> 30 <ol> 31 <li>Auto table layout</li> 32 <ol> 33 <li>Percent cells ignore box-sizing, it is always border-box.</li> 34 <li>Fixed cells respect box-sizing.</li> 35 </ol> 36 <li>Fixed table layout</li> 37 <ol> 38 <li>Percent cells respect box sizing when computing cell width from assignable width.</li> 39 <li>Percent cells ignore box sizing when computing grid max from cell width.</li> 40 </ol> 41 </ol> 42 <h2>Table-layout: auto</h2> 43 <h4>TD width:%</h4> 44 <p class="testdesc">content-box, C0:50%/100 C1:Auto 45 Percent gets resolved to compute grid max size. 46 C0 max_width is max_width + 2 padding = 100 + 2*20 = 140 47 Table width is 1/50%*140 + 3*padding = 280+30 = 310 48 <table data-expected-width=310> 49 <tr> 50 <td style="width:50%;box-sizing:content-box" data-expected-width=140> 51 <div style="width:100px">50%/100</td> 52 <td data-expected-width=140>Auto</td> 53 </tr> 54 </table> 55 <p class="testdesc">border-box, C0:50%/100 C1:Auto 56 Same test as above, but box-sizing is border-box. 57 <table data-expected-width=310> 58 <tr> 59 <td style="width:50%;box-sizing:border-box" data-expected-width=140> 60 <div style="width:100px">50%/100</td> 61 <td data-expected-width=140>Auto</td> 62 </tr> 63 </table> 64 <p class="testdesc">content-box, C0:80%/100 C1:Auto 65 Percent gets resolved to compute final cell size from assignable width. 66 C0 border box width is 500 * 80% 67 <table style="width:530px" data-expected-width=530> 68 <tr> 69 <td style="width:80%;box-sizing:content-box" data-expected-width=400> 70 <div style="width:100px">80%/100</td> 71 <td data-expected-width=100>Auto</td> 72 </tr> 73 </table> 74 75 <p class="testdesc">border-box, C0:80%/100 C1:Auto 76 Same as above, but border-box 77 <table style="width:530px" data-expected-width=530> 78 <tr> 79 <td style="width:80%;box-sizing:border-box" data-expected-width=400> 80 <div style="width:100px">80%/100</td> 81 <td data-expected-width=100>Auto</td> 82 </tr> 83 </table> 84 85 86 <h4>TD width:fixed</h4> 87 88 <p class="testdesc">content-box, C0:100/Auto C1:100/Auto 89 Tests whether box-sizing affects how percentages are computed. 90 C0 max_width is max_width + 2 padding = 100 + 2*20 = 140 91 Table width is 1/50%*140 + 3*padding = 280+30 = 310 92 <table data-expected-width=310> 93 <tr> 94 <td style="width:100px;box-sizing:content-box" data-expected-width=140>100</td> 95 <td style="width:100px;box-sizing:content-box">100</td> 96 </tr> 97 </table> 98 99 <p class="testdesc">border-box, C0:100/Auto C1:100/Auto 100 Same test as above, but box-sizing is border-box. 101 <table data-expected-width=230> 102 <tr> 103 <td style="width:100px;box-sizing:border-box" data-expected-width=100>100</td> 104 <td style="width:100px;box-sizing:border-box" data-expected-width=100>100</td> 105 </tr> 106 </table> 107 108 <h4>TD height: fixed</h4> 109 110 <p class="testdesc">content-box, C0 height:100px 111 <table data-expected-height=160> 112 <tr> 113 <td style="height:100px;box-sizing:content-box" data-expected-height=140>100 height</td> 114 </tr> 115 </table> 116 117 <p class="testdesc">border-box, C0 height:100px 118 <table data-expected-height=120> 119 <tr> 120 <td style="height:100px;box-sizing:border-box" data-expected-height=100>100 height</td> 121 </tr> 122 </table> 123 124 <h2>Table-layout: fixed</h2> 125 126 <h4>TD width:%</h4> 127 128 <p class="testdesc">content-box, C0:50%/100 C1:Auto 129 Percent gets resolved to compute grid max size. 130 C0 max_width is max_width + 2 padding = 100 + 2*20 = 140 131 Table width is 1/50%*140 + 3*padding = 280+30 = 310 132 <table style="table-layout:fixed" data-expected-width=310> 133 <tr> 134 <td style="width:50%;box-sizing:content-box" data-expected-width=140> 135 <div style="width:100px">50%/100</td> 136 <td data-expected-width=140>Auto</td> 137 </tr> 138 </table> 139 140 <p class="testdesc">border-box, C0:50%/100 C1:Auto 141 Same test as above, but box-sizing is border-box. 142 <table style="table-layout:fixed" data-expected-width=310> 143 <tr> 144 <td style="width:50%;box-sizing:border-box" data-expected-width=140> 145 <div style="width:100px">50%/100</td> 146 <td data-expected-width=140>Auto</td> 147 </tr> 148 </table> 149 150 <p class="testdesc">content-box, C0:60%/100 C1:Auto 151 Percent gets resolved to compute final cell size from assignable width. 152 Assignable width is 530 - 3*10 = 500 153 C0 content box width is 500 * 60% + 40px padding = 340 154 C1 is 500 - 340 = 160 155 <p class="error">Legacy/Edge treat %ge TD as border box, and end up with 300px</p> 156 <table style="table-layout:fixed;width:530px" data-expected-width=530> 157 <tr> 158 <td style="width:60%;box-sizing:content-box" data-expected-width=340> 159 <div style="width:100px">60%/100</td> 160 <td data-expected-width=160>Auto</td> 161 </tr> 162 </table> 163 164 <p class="testdesc">border-box, C0:60%/100 C1:Auto 165 Same as above, but border-box 166 <table style="table-layout:fixed;width:530px" data-expected-width=530> 167 <tr> 168 <td style="width:60%;box-sizing:border-box" data-expected-width=300> 169 <div style="width:100px">80%/100</td> 170 <td data-expected-width=200>Auto</td> 171 </tr> 172 </table> 173 174 175 <h4>TD width:fixed</h4> 176 <p class="testdesc">content-box, C0:100/Auto C1:100/Auto 177 Tests whether box-sizing affects how percentages are computed. 178 C0 max_width is max_width + 2 padding = 100 + 2*20 = 140 179 Table width is 1/50%*140 + 3*padding = 280+30 = 310 180 <table style="table-layout:fixed" data-expected-width=310> 181 <tr> 182 <td style="width:100px;box-sizing:content-box" data-expected-width=140>100</td> 183 <td style="width:100px;box-sizing:content-box">100</td> 184 </tr> 185 </table> 186 <p class="testdesc">border-box, C0:100/Auto C1:100/Auto 187 Same test as above, but box-sizing is border-box. 188 <table style="table-layout:fixed" data-expected-width=230> 189 <tr> 190 <td style="width:100px;box-sizing:border-box" data-expected-width=100>100</td> 191 <td style="width:100px;box-sizing:border-box" data-expected-width=100>100</td> 192 </tr> 193 </table> 194 </main> 195 <script> 196 checkLayout("table"); 197 </script>