[css-tables] Percentage sizing of table cell replaced children with s…

…crollbar https://bugs.webkit.org/show_bug.cgi?id=255854 Reviewed by Simon Fraser. This patch aligns Webkit with Blink / Chromium. Merge: https://chromium.googlesource.com/chromium/src.git/+/bf802aa687ff50a9f4017376cf92da49915f6f8b When computing the percentage height of table cell replaced children, if the table cell has horizontal scrollbar we have to subtract its height from the overridingLogicalHeight(). * Source/WebCore/rendering/RenderBox.cpp: (RenderBox::availableLogicalHeightUsing): As per commit message * LayoutTests/imported/w3c/web-platform-tests/css/css-tables/height-distribution/support/scrollbars.css: Support file * LayoutTests/imported/w3c/web-platform-tests/css/css-tables/height-distribution/percentage-sizing-of-table-cell-replaced-children-001.html: Add Test * LayoutTests/imported/w3c/web-platform-tests/css/css-tables/height-distribution/percentage-sizing-of-table-cell-replaced-children-001-ref.html: Add WPT Reference File * LayoutTests/imported/w3c/web-platform-tests/css/css-tables/height-distribution/percentage-sizing-of-table-cell-replaced-children-001-expected.html: Add Test Case Expectation Canonical link: https://commits.webkit.org/263318@main
WebKit · Apr 24, 2023 · f1b46a8 · f1b46a8
1 parent 997b59a
commit f1b46a8
Show file tree

Hide file tree

Showing 5 changed files with 127 additions and 1 deletion.
diff --git a/...s/height-distribution/percentage-sizing-of-table-cell-replaced-children-001-expected.html b/...s/height-distribution/percentage-sizing-of-table-cell-replaced-children-001-expected.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Reference: Percentage sizing of table cell children with margin, border, padding and scrollbar</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<style>
+.table {
+  display: block;
+  border: solid 5px black;
+  width: 150px;
+  height: 100px;
+}
+
+.td {
+  background: cyan;
+  overflow: scroll;
+  padding: 5px 15px 10px 20px;
+  border: solid magenta;
+  border-width: 12px 9px 6px 3px;
+  height: 100px;
+  box-sizing: border-box;
+}
+
+img {
+  display: block;
+  background: yellow;
+  width: 100%;
+  height: 100%;
+}
+</style>
+<link rel="stylesheet" type="text/css" href="support/scrollbars.css">
+
+<p>The test passes if you see scrollbars but there's no overflow, so you cannot actually scroll.</p>
+
+<div class="table">
+  <div class="td">
+    <img />
+  </div>
+</div>
diff --git a/...tables/height-distribution/percentage-sizing-of-table-cell-replaced-children-001-ref.html b/...tables/height-distribution/percentage-sizing-of-table-cell-replaced-children-001-ref.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Reference: Percentage sizing of table cell children with margin, border, padding and scrollbar</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<style>
+.table {
+  display: block;
+  border: solid 5px black;
+  width: 150px;
+  height: 100px;
+}
+
+.td {
+  background: cyan;
+  overflow: scroll;
+  padding: 5px 15px 10px 20px;
+  border: solid magenta;
+  border-width: 12px 9px 6px 3px;
+  height: 100px;
+  box-sizing: border-box;
+}
+
+img {
+  display: block;
+  background: yellow;
+  width: 100%;
+  height: 100%;
+}
+</style>
+<link rel="stylesheet" type="text/css" href="support/scrollbars.css">
+
+<p>The test passes if you see scrollbars but there's no overflow, so you cannot actually scroll.</p>
+
+<div class="table">
+  <div class="td">
+    <img />
+  </div>
+</div>
diff --git a/...css-tables/height-distribution/percentage-sizing-of-table-cell-replaced-children-001.html b/...css-tables/height-distribution/percentage-sizing-of-table-cell-replaced-children-001.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Table Test: Percentage sizing of table cell replaced children with margin, border, padding and scrollbar</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-tables-3/#content-measure">
+<link rel="match" href="percentage-sizing-of-table-cell-replaced-children-001-ref.html">
+<meta name="assert" content="Checks that table cell replaced children resolve properly their percentage sizes, even when the table cell has margin, border, padding and scrollbar.">
+<style>
+.table {
+  display: table;
+  border: solid 5px black;
+  width: 150px;
+  height: 100px;
+}
+
+.td {
+  display: table-cell;
+  background: cyan;
+  overflow: scroll;
+  padding: 5px 15px 10px 20px;
+  border: solid magenta;
+  border-width: 12px 9px 6px 3px;
+}
+
+img {
+  display: block;
+  background: yellow;
+  width: 100%;
+  height: 100%;
+}
+</style>
+<link rel="stylesheet" type="text/css" href="support/scrollbars.css">
+
+<p>The test passes if you see scrollbars but there's no overflow, so you cannot actually scroll.</p>
+
+<div class="table">
+  <div class="td">
+    <img />
+  </div>
+</div>
diff --git a/...imported/w3c/web-platform-tests/css/css-tables/height-distribution/support/scrollbars.css b/...imported/w3c/web-platform-tests/css/css-tables/height-distribution/support/scrollbars.css
@@ -0,0 +1,10 @@
+/* This makes the scrollbars visible on mac, both to humans and screenshots.*/
+
+::-webkit-scrollbar {
+    -webkit-appearance: none;
+}
+
+::-webkit-scrollbar-track {
+    background-color: #eee;
+    border-radius: 8px;
+}
diff --git a/Source/WebCore/rendering/RenderBox.cpp b/Source/WebCore/rendering/RenderBox.cpp
@@ -3761,7 +3761,7 @@ LayoutUnit RenderBox::availableLogicalHeightUsing(const Length& h, AvailableLogi
     // height, and then when we lay out again we'll use the calculation below.
     if (isTableCell() && (h.isAuto() || h.isPercentOrCalculated())) {
         if (hasOverridingLogicalHeight())
-            return overridingLogicalHeight() - computedCSSPaddingBefore() - computedCSSPaddingAfter() - borderBefore() - borderAfter();
+            return overridingLogicalHeight() - computedCSSPaddingBefore() - computedCSSPaddingAfter() - borderBefore() - borderAfter() - scrollbarLogicalHeight();
         return logicalHeight() - borderAndPaddingLogicalHeight();
     }