td-box-sizing-003.html (4362B)
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' href='../support/base.css' /> 7 <link rel='stylesheet' href='/fonts/ahem.css' /> 8 <link rel="author" title="Aleks Totic" href="atotic@chromium.org" /> 9 <link rel="help" href="https://drafts.csswg.org/css-tables-3/#computing-cell-measures" /> 10 <style> 11 main table { 12 border-spacing: 0; 13 } 14 main td { 15 background: gray; 16 width:100px; 17 padding: 0; 18 } 19 .bb { 20 box-sizing: border-box; 21 } 22 </style> 23 <main> 24 <p>Tests of intrinsic cell sizing wrt border/padding, and box-sizing.</p> 25 <p>box-sizing: content-box; border px; padding px. 26 <table> 27 <tbody> 28 <tr> 29 <td data-expected-width="100"> 30 <div style="width:50px;height:50px;background:yellow">0,0</div> 31 </td> 32 </tr> 33 </tbody> 34 </table> 35 <table> 36 <tbody> 37 <tr data-expected-width="120"> 38 <td data-expected-width="120" style="border:10px solid black"> 39 <div style="height:50px;background:yellow">0,0</div> 40 </td> 41 </tr> 42 </tbody> 43 </table> 44 <table> 45 <tbody> 46 <tr data-expected-width="140"> 47 <td data-expected-width="140" style="border:10px solid black;padding: 10px"> 48 <div style="height:50px;background:yellow">0,0</div> 49 </td> 50 </tr> 51 </tbody> 52 </table> 53 <p>box-sizing: border-box, border px, padding px. 54 <table> 55 <tbody> 56 <tr> 57 <td data-expected-width="100" class="bb"> 58 <div style="height:50px;background:yellow">0,0</div> 59 </td> 60 </tr> 61 </tbody> 62 </table> 63 <table> 64 <tbody> 65 <tr> 66 <td data-expected-width="100" class="bb" style="border:10px solid black" > 67 <div style="height:50px;background:yellow">0,0</div> 68 </td> 69 </tr> 70 </tbody> 71 </table> 72 <table> 73 <tbody> 74 <tr> 75 <td data-expected-width="100" class="bb" style="border:10px solid black;padding: 10px"> 76 <div style="height:50px;background:yellow">0,0</div> 77 </td> 78 </tr> 79 </tbody> 80 </table> 81 82 <p>box-sizing: border-box;padding: px, width px</p> 83 <li>td's intrinsic width must be >= border + padding</li> 84 85 <table style="width:300px;table-layout:fixed"> 86 <tbody> 87 <tr> 88 <td style="box-sizing:border-box;padding-left:50px;padding-right:50px;width:30px" data-expected-width=100></td> 89 <td>auto</td> 90 <td>auto</td> 91 </tr> 92 </tbody> 93 </table> 94 95 <p>box-sizing: border-box; border px; padding %.</p> 96 <li>intrinsic size of % padding is 0. 97 <li>final size of % padding is computed against table's width. 98 <table data-expected-width="240"> 99 <tbody> 100 <tr> 101 <td data-expected-width="120" style="border:10px solid black;padding: 30%"> 102 <div data-offset-x="72" data-offset-y="72" style="width:50px;height:50px;background:yellow">0,0</div> 103 </td> 104 <td style="border:10px solid black;padding: 30%"> 105 <div style="width:50px;height:50px;background:yellow">0,0</div> 106 </td> 107 </tr> 108 </tbody> 109 </table> 110 <table data-expected-width="300"> 111 <caption><div style="width:300px;background:#ddd">300px caption</div></caption> 112 <tbody> 113 <tr> 114 <td data-expected-width="150" style="border:10px solid black;padding: 30%"> 115 <div data-offset-x="90" data-offset-y="90" style="width:50px;height:50px;background:yellow">0,0</div> 116 </td> 117 <td style="border:10px solid black;padding: 30%"> 118 <div style="width:50px;height:50px;background:yellow">0,0</div> 119 </td> 120 </tr> 121 </tbody> 122 </table> 123 124 <p>Block percentage resolution of TD children + row fixed height during intrinsic pass</p> 125 <li>Chrome Legacy/Edge/Safari do not use row fixed height for percetage block size resolution.</li> 126 <li>FF uses row height as %ge resolution size.</li> 127 <li>Proposal: file an issue on what is the right thing to do.</li> 128 <table> 129 <tr> 130 <td style="height:100px;font: 50px/1 Ahem;" id="cell" data-expected-height="100"> 131 y<div style="display:inline-block;height:100%;width:50px;background:yellow" 132 data-expected-height="100"></div> 133 </td> 134 </tr> 135 </table> 136 <table> 137 <tr style="height:100px"> 138 <td style="font: 50px/1 Ahem;" id="cell" data-expected-height="100"> 139 y<div style="display:inline-block;height:100%;width:50px;background:yellow" data-expected-height="0"></div> 140 </td> 141 </tr> 142 </table> 143 144 145 </main> 146 <script> 147 checkLayout("table"); 148 </script>