Bug 1552978 [wpt PR 16926] - Scrollable table cell child with % heigh…

…t 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 <[email protected]> Reviewed-by: Christian Biesinger <[email protected]> Reviewed-by: Emil A Eklund <[email protected]> Cr-Commit-Position: refs/heads/master@{#661682} -- wp5At-commits: 90af87b59f220ee2a4e618ff2a06ba42ee1bac19 wpt-pr: 16926
xeonchen · Jun 19, 2019 · ead52a6 · ead52a6
1 parent c7c43cb
commit ead52a6
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 0 deletions.
diff --git a/...form/tests/css/css-tables/percent-height-overflow-auto-in-restricted-block-size-cell.html b/...form/tests/css/css-tables/percent-height-overflow-auto-in-restricted-block-size-cell.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:[email protected]">
+<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>
diff --git a/...ss/css-tables/percent-height-overflow-auto-in-unrestricted-block-size-cell.tentative.html b/...ss/css-tables/percent-height-overflow-auto-in-unrestricted-block-size-cell.tentative.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:[email protected]">
+<link rel="help" href="https://drafts.csswg.org/css-tables-3/#row-layout">
+<link rel="help" href="http://crbug.com/964282">
+<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
+<p>Test passes if there is a filled green square.</p>
+<div style="display:table;">
+  <div style="overflow:auto; height:100%; background:green;">
+    <div style="width:100px; height:100px;"></div>
+  </div>
+</div>