| <!doctype html> |
| <title>TD box sizing</title> |
| <script src='/resources/testharness.js'></script> |
| <script src='/resources/testharnessreport.js'></script> |
| <script src="/resources/check-layout-th.js"></script> |
| <link rel='stylesheet' href='../support/base.css' /> |
| <link rel='stylesheet' href='/fonts/ahem.css' /> |
| <link rel="author" title="Aleks Totic" href="[email protected]" /> |
| <link rel="help" href="https://drafts.csswg.org/css-tables-3/#computing-cell-measures" /> |
| <style> |
| main table { |
| border-spacing: 0; |
| } |
| main td { |
| background: gray; |
| width:100px; |
| padding: 0; |
| } |
| .bb { |
| box-sizing: border-box; |
| } |
| </style> |
| <main> |
| <p>Tests of intrinsic cell sizing wrt border/padding, and box-sizing.</p> |
| <p>box-sizing: content-box; border px; padding px. |
| <table> |
| <tbody> |
| <tr> |
| <td data-expected-width="100"> |
| <div style="width:50px;height:50px;background:yellow">0,0</div> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| <table> |
| <tbody> |
| <tr data-expected-width="120"> |
| <td data-expected-width="120" style="border:10px solid black"> |
| <div style="height:50px;background:yellow">0,0</div> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| <table> |
| <tbody> |
| <tr data-expected-width="140"> |
| <td data-expected-width="140" style="border:10px solid black;padding: 10px"> |
| <div style="height:50px;background:yellow">0,0</div> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| <p>box-sizing: border-box, border px, padding px. |
| <table> |
| <tbody> |
| <tr> |
| <td data-expected-width="100" class="bb"> |
| <div style="height:50px;background:yellow">0,0</div> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| <table> |
| <tbody> |
| <tr> |
| <td data-expected-width="100" class="bb" style="border:10px solid black" > |
| <div style="height:50px;background:yellow">0,0</div> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| <table> |
| <tbody> |
| <tr> |
| <td data-expected-width="100" class="bb" style="border:10px solid black;padding: 10px"> |
| <div style="height:50px;background:yellow">0,0</div> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| |
| <p>box-sizing: border-box;padding: px, width px</p> |
| <li>td's intrinsic width must be >= border + padding</li> |
| |
| <table style="width:300px;table-layout:fixed"> |
| <tbody> |
| <tr> |
| <td style="box-sizing:border-box;padding-left:50px;padding-right:50px;width:30px" data-expected-width=100></td> |
| <td>auto</td> |
| <td>auto</td> |
| </tr> |
| </tbody> |
| </table> |
| |
| <p>box-sizing: border-box; border px; padding %.</p> |
| <li>intrinsic size of % padding is 0. |
| <li>final size of % padding is computed against table's width. |
| <table data-expected-width="240"> |
| <tbody> |
| <tr> |
| <td data-expected-width="120" style="border:10px solid black;padding: 30%"> |
| <div data-offset-x="72" data-offset-y="72" style="width:50px;height:50px;background:yellow">0,0</div> |
| </td> |
| <td style="border:10px solid black;padding: 30%"> |
| <div style="width:50px;height:50px;background:yellow">0,0</div> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| <table data-expected-width="300"> |
| <caption><div style="width:300px;background:#ddd">300px caption</div></caption> |
| <tbody> |
| <tr> |
| <td data-expected-width="150" style="border:10px solid black;padding: 30%"> |
| <div data-offset-x="90" data-offset-y="90" style="width:50px;height:50px;background:yellow">0,0</div> |
| </td> |
| <td style="border:10px solid black;padding: 30%"> |
| <div style="width:50px;height:50px;background:yellow">0,0</div> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| |
| <p>Block percentage resolution of TD children + row fixed height during intrinsic pass</p> |
| <li>Chrome Legacy/Edge/Safari do not use row fixed height for percetage block size resolution.</li> |
| <li>FF uses row height as %ge resolution size.</li> |
| <li>Proposal: file an issue on what is the right thing to do.</li> |
| <table> |
| <tr> |
| <td style="height:100px;font: 50px/1 Ahem;" id="cell" data-expected-height="100"> |
| y<div style="display:inline-block;height:100%;width:50px;background:yellow" |
| data-expected-height="100"></div> |
| </td> |
| </tr> |
| </table> |
| <table> |
| <tr style="height:100px"> |
| <td style="font: 50px/1 Ahem;" id="cell" data-expected-height="100"> |
| y<div style="display:inline-block;height:100%;width:50px;background:yellow" data-expected-height="0"></div> |
| </td> |
| </tr> |
| </table> |
| |
| |
| </main> |
| <script> |
| checkLayout("table"); |
| </script> |
