Blitz - WPT: subpixel-table-cell-width-002.html

wpt / css / css-tables / subpixel-table-cell-width-002.html

/css/css-tables/subpixel-table-cell-width-002.html

<!DOCTYPE html>
<link rel="author" title="David Grogan" href="dgrogan@chromium.org">
<link rel="help" href="https://www.w3.org/TR/CSS21/cascade.html#value-stages">
<link rel="match" href="subpixel-table-cell-width-001-ref.html">
<meta name="assert" content="When a cell has a specified percent width that results in a fractional used width, the cell's actual width should match that of a block whose specified fixed width is the cell's used width" />

<style>
.table {
  display: table;
  height: 20px;
  background: red;
}
.cell {
  display: table-cell;
}
div > div:first-child {
  background: blue;
}
div > div:nth-child(2) {
  background: lime;
}
</style>


<div class=table style="width:7.2px;">
  <div class=cell style="width:50%;"></div>
  <div class=cell style="width:50%;"></div>
</div>

<br><br>

<div class=table style="width:6.6px;">
  <div class=cell style="width:50%;"></div>
  <div class=cell style="width:50%;"></div>
</div>

/css/css-tables/subpixel-table-cell-width-001-ref.html

<!DOCTYPE html>
<style>
  div {
    font-size: 0; /* so I can leave spaces between the child divs */
    height: 20px;
  }
  div > div {
    display: inline-block;
  }
  div > div:first-child {
    background: blue;
  }
  div > div:nth-child(2) {
    background: lime;
  }
</style>

<div>
  <div style="width:3.6px;"></div>
  <div style="width:3.6px;"></div>
</div>

<br><br>

<div>
  <div style="width:3.3px;"></div>
  <div style="width:3.3px;"></div>
</div>