Take overflow: clip into account when computing table overflow

https://bugs.webkit.org/show_bug.cgi?id=251909 Reviewed by Alan Baradlay. When computing table overflow overflow: clip should be treated like overflow: hidden: https://github.com/w3c/csswg-drafts/pull/7492/files * LayoutTests/imported/w3c/web-platform-tests/css/css-overflow/overflow-clip-rounded-table-expected.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-overflow/overflow-clip-rounded-table.html: Added. * Source/WebCore/style/StyleAdjuster.cpp: (WebCore::Style::Adjuster::adjust const): Canonical link: https://commits.webkit.org/264849@main
WebKit · Jun 3, 2023 · 0e5a15b · 0e5a15b
1 parent 74200f5
commit 0e5a15b
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 2 deletions.
diff --git a/...mported/w3c/web-platform-tests/css/css-overflow/overflow-clip-rounded-table-expected.html b/...mported/w3c/web-platform-tests/css/css-overflow/overflow-clip-rounded-table-expected.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8">
+<title>Verifies overflow-clip on table with rounded border renders correctly</title>
+<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#valdef-overflow-clip">
+<style>
+table {
+    border-radius: 10px;
+    border-collapse: collapse;
+    overflow: hidden;
+}
+thead {
+    background: green;
+}
+</style>
+</head><body><p>You should see a green table with rounded corners</p>
+<table>
+ <thead>
+    <tr>
+      <th>One</th>
+      <th>Two</th>
+    </tr>
+  </thead>
+</table>
+</body></html>
diff --git a/...utTests/imported/w3c/web-platform-tests/css/css-overflow/overflow-clip-rounded-table.html b/...utTests/imported/w3c/web-platform-tests/css/css-overflow/overflow-clip-rounded-table.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8">
+<title>Verifies overflow-clip on table with rounded border renders correctly</title>
+<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#valdef-overflow-clip">
+<link rel="match" href="overflow-clip-rounded-table-ref.html">
+<style>
+table {
+    border-radius: 10px;
+    border-collapse: collapse;
+    overflow: clip;
+}
+thead {
+    background: green;
+}
+</style>
+</head><body><p>You should see a green table with rounded corners</p>
+<table>
+ <thead>
+    <tr>
+      <th>One</th>
+      <th>Two</th>
+    </tr>
+  </thead>
+</table>
+</body></html>
diff --git a/Source/WebCore/style/StyleAdjuster.cpp b/Source/WebCore/style/StyleAdjuster.cpp
@@ -485,9 +485,9 @@ void Adjuster::adjust(RenderStyle& style, const RenderStyle* userAgentAppearance
     // FIXME: Eventually table sections will support auto and scroll.
     if (style.display() == DisplayType::Table || style.display() == DisplayType::InlineTable
         || style.display() == DisplayType::TableRowGroup || style.display() == DisplayType::TableRow) {
-        if (style.overflowX() != Overflow::Visible && style.overflowX() != Overflow::Hidden)
+        if (style.overflowX() != Overflow::Visible && style.overflowX() != Overflow::Hidden && style.overflowX() != Overflow::Clip)
             style.setOverflowX(Overflow::Visible);
-        if (style.overflowY() != Overflow::Visible && style.overflowY() != Overflow::Hidden)
+        if (style.overflowY() != Overflow::Visible && style.overflowY() != Overflow::Hidden && style.overflowY() != Overflow::Clip)
             style.setOverflowY(Overflow::Visible);
     }