fune/testing/web-platform/tests/css/css-tables/percent-height-overflow-auto-in-restricted-block-size-cell.html
Morten Stenshorne 3eeb348530 Bug 1552978 [wpt PR 16926] - Scrollable table cell child with % height may affect table height., a=testonly
Automatic update from web-platform-tests
Scrollable table cell child with % height may affect table height.

There's a rule in the table spec (which is marked as not ready for
implementation) [1] that percentage block-size children of a table cell
do not contribute to the block-size of the cell or table, if said child
has overflow 'auto' or 'scroll'. However, this shouldn't be applied if
the block-size of the table cell is unrestricted (auto), since the child
in question may very well be the only child of the cell, and the cell
may be the only child of its row, in which case we'd end up with zero
block-size for the content.

There's similar code in the legacy engine, in
LayoutBox::ContainingBlockLogicalHeightForPercentageResolution().

Just like in legacy, we'll just check the block-size of the cell and the
table, and ignore e.g. min-block-size.

[1] https://drafts.csswg.org/css-tables-3/#row-layout

Bug: 964282
Change-Id: I312f683282d848f0ae71a27c1128a0eb16ad20f8
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1621166
Commit-Queue: Morten Stenshorne <mstensho@chromium.org>
Reviewed-by: Christian Biesinger <cbiesinger@chromium.org>
Reviewed-by: Emil A Eklund <eae@chromium.org>
Cr-Commit-Position: refs/heads/master@{#661682}

--

wp5At-commits: 90af87b59f220ee2a4e618ff2a06ba42ee1bac19
wpt-pr: 16926
2019-06-19 11:05:45 -07:00

20 lines
901 B
HTML

<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-tables-3/#row-layout">
<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
<style>
.table { display:table; height:100px; background:pink; }
.cell { overflow:auto; width:100px; height:100%; background:blue; }
</style>
<p>There should be a 100px tall pink block below, with a scrollable box inside.</p>
<div id="container" class="table" data-expected-height="100">
<div class="cell" data-expected-height="100" data-expected-scroll-height="500">
<div style="width:100px; height:500px;"></div>
</div>
</div>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<script>
checkLayout("#container");
</script>