forked from mirrors/gecko-dev
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
20 lines
901 B
HTML
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>
|