Replaced content percentage height resolution inside tables

[mstensho]

There's an undocumented quirk regarding percentage block-size replaced elements inside table cells. This quirk is implemented by EdgeHTML, Chromium, and WebKit (but not Gecko, it seems, at least not with the test I'm presenting here):

<!-- quirks mode -->
<style>
  .cell {
    display: table-cell;
    width: 400px;
    height: 400px;
    background: red;
  }

  .descendant {
    display: block;
    margin: 0;
    border: none;
    padding: 0;
    width: 100%;
    height: 100%;
    background: green;
  }
</style>

<p>Green square below?</p>
<div class="cell">
  <div>
    <iframe class="descendant"></iframe>
  </div>
</div>

The percentage height specified on .cell is used to resolve the height of .descendant. This doesn't happen if .descendant is a DIV instead of an IFRAME.

This quirk is not documented at https://quirks.spec.whatwg.org/

[zcorpan]

Interesting. Is the quirk needed for web compat?

[mstensho]

I don't know. Chromium only has two tests that depend on this [*]:

• tables/mozilla/bugs/bug137388-2.html
• tables/mozilla/bugs/bug137388-3.html

[*] I tried to remove it to see what happened: https://chromium-review.googlesource.com/c/chromium/src/+/1662410

Pretty interesting with "mozilla" in the name, since I just suggested that this quirk doesn't exist in Gecko. I guess it does / did, to some extent, then.

Following the bug number in the name of those tests: https://bugzilla.mozilla.org/show_bug.cgi?id=137388

So.. I guess this mattered 17 years ago, at least. :)

Digging through the change log of Blink could potentially provide some hints (I know we've attempted to fix table compat issues recently (I mean this decade), and probably crossed paths with this quirk), although test coverage is rather poor.

[zcorpan]

https://quirks.spec.whatwg.org/#the-percentage-height-calculation-quirk basically avoids defining what should happen with tables. Now that https://drafts.csswg.org/css-tables/ exists, it could maybe be better defined.