<!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="atotic@chromium.org" />
<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>
