From 4f8dcfe6f9ca4add5173bd16adc541565be48929 Mon Sep 17 00:00:00 2001
From: Oriol Brufau <obrufau@igalia.com>
Date: Thu, 9 Jan 2025 06:06:26 -0800
Subject: [PATCH] layout: Set padding to zero on tables in collapsed-borders
 mode (#34908)

https://drafts.csswg.org/css2/#collapsing-borders
> in this model, a table does not have padding

https://drafts.csswg.org/css-tables/#collapsed-style-overrides
> The padding of the table-root is ignored (as if it was set to 0px).

Signed-off-by: Oriol Brufau <obrufau@igalia.com>
---
 components/layout_2020/geom.rs                |  2 +-
 components/layout_2020/style_ext.rs           | 26 ++++++----
 tests/wpt/meta/MANIFEST.json                  | 52 +++++++++++++++++++
 .../tables/collapsing-border-model-011.html   | 17 ++++++
 .../tables/collapsing-border-model-012.html   | 17 ++++++
 .../tables/collapsing-border-model-013.html   | 22 ++++++++
 .../tables/collapsing-border-model-014.html   | 22 ++++++++
 7 files changed, 147 insertions(+), 11 deletions(-)
 create mode 100644 tests/wpt/tests/css/CSS2/tables/collapsing-border-model-011.html
 create mode 100644 tests/wpt/tests/css/CSS2/tables/collapsing-border-model-012.html
 create mode 100644 tests/wpt/tests/css/CSS2/tables/collapsing-border-model-013.html
 create mode 100644 tests/wpt/tests/css/CSS2/tables/collapsing-border-model-014.html

diff --git a/components/layout_2020/geom.rs b/components/layout_2020/geom.rs
index 67cfc9d3c97..d4c805ceafb 100644
--- a/components/layout_2020/geom.rs
+++ b/components/layout_2020/geom.rs
@@ -343,7 +343,7 @@ impl<T: Copy> LogicalSides<T> {
     }
 }
 
-impl LogicalSides<&'_ LengthPercentage> {
+impl LogicalSides<LengthPercentage> {
     pub fn percentages_relative_to(&self, basis: Au) -> LogicalSides<Au> {
         self.map(|value| value.to_used_value(basis))
     }
diff --git a/components/layout_2020/style_ext.rs b/components/layout_2020/style_ext.rs
index 04ad55ddaac..7df170f227c 100644
--- a/components/layout_2020/style_ext.rs
+++ b/components/layout_2020/style_ext.rs
@@ -3,6 +3,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 
 use app_units::Au;
+use style::computed_values::border_collapse::T as BorderCollapse;
 use style::computed_values::direction::T as Direction;
 use style::computed_values::mix_blend_mode::T as ComputedMixBlendMode;
 use style::computed_values::position::T as ComputedPosition;
@@ -276,10 +277,8 @@ pub(crate) trait ComputedValuesExt {
         writing_mode: WritingMode,
         containing_block_inline_size: Au,
     ) -> PaddingBorderMargin;
-    fn padding(
-        &self,
-        containing_block_writing_mode: WritingMode,
-    ) -> LogicalSides<&LengthPercentage>;
+    fn padding(&self, containing_block_writing_mode: WritingMode)
+        -> LogicalSides<LengthPercentage>;
     fn border_style(&self, containing_block_writing_mode: WritingMode)
         -> LogicalSides<BorderStyle>;
     fn border_width(&self, containing_block_writing_mode: WritingMode) -> LogicalSides<Au>;
@@ -579,14 +578,21 @@ impl ComputedValuesExt for ComputedValues {
     fn padding(
         &self,
         containing_block_writing_mode: WritingMode,
-    ) -> LogicalSides<&LengthPercentage> {
-        let padding = self.get_padding();
+    ) -> LogicalSides<LengthPercentage> {
+        if self.get_box().display.inside() == stylo::DisplayInside::Table &&
+            self.get_inherited_table().border_collapse == BorderCollapse::Collapse
+        {
+            // https://drafts.csswg.org/css-tables/#collapsed-style-overrides
+            // > The padding of the table-root is ignored (as if it was set to 0px).
+            return LogicalSides::zero();
+        }
+        let padding = self.get_padding().clone();
         LogicalSides::from_physical(
             &PhysicalSides::new(
-                &padding.padding_top.0,
-                &padding.padding_right.0,
-                &padding.padding_bottom.0,
-                &padding.padding_left.0,
+                padding.padding_top.0,
+                padding.padding_right.0,
+                padding.padding_bottom.0,
+                padding.padding_left.0,
             ),
             containing_block_writing_mode,
         )
diff --git a/tests/wpt/meta/MANIFEST.json b/tests/wpt/meta/MANIFEST.json
index 142efac0ba5..c20e582b917 100644
--- a/tests/wpt/meta/MANIFEST.json
+++ b/tests/wpt/meta/MANIFEST.json
@@ -105991,6 +105991,58 @@
         {}
        ]
       ],
+      "collapsing-border-model-011.html": [
+       "9c03ddeda9051c6e823ca1f31729eed0d8a8ac7b",
+       [
+        null,
+        [
+         [
+          "/css/reference/ref-filled-green-100px-square-only.html",
+          "=="
+         ]
+        ],
+        {}
+       ]
+      ],
+      "collapsing-border-model-012.html": [
+       "39b176ce375994ece4ca6c05b7484ef59fcd1c79",
+       [
+        null,
+        [
+         [
+          "/css/reference/ref-filled-green-100px-square-only.html",
+          "=="
+         ]
+        ],
+        {}
+       ]
+      ],
+      "collapsing-border-model-013.html": [
+       "5e5f57694c9015c5a74082a9525bb2ce44d39bfc",
+       [
+        null,
+        [
+         [
+          "/css/reference/ref-filled-green-100px-square-only.html",
+          "=="
+         ]
+        ],
+        {}
+       ]
+      ],
+      "collapsing-border-model-014.html": [
+       "18177526b824cfebbc95467031c30d04b7b3ff79",
+       [
+        null,
+        [
+         [
+          "/css/reference/ref-filled-green-100px-square-only.html",
+          "=="
+         ]
+        ],
+        {}
+       ]
+      ],
       "column-visibility-004.xht": [
        "60d233fa9402f0b57a45f299405dacca5abc8ee6",
        [
diff --git a/tests/wpt/tests/css/CSS2/tables/collapsing-border-model-011.html b/tests/wpt/tests/css/CSS2/tables/collapsing-border-model-011.html
new file mode 100644
index 00000000000..9c03ddeda90
--- /dev/null
+++ b/tests/wpt/tests/css/CSS2/tables/collapsing-border-model-011.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<title>CSS Test: Tables under the collapsing borders model don't have padding</title>
+<link rel="author" title="Oriol Brufau" href="obrufau@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#collapsing-borders">
+<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
+<style>
+table {
+  border-collapse: collapse;
+  box-sizing: content-box;
+  width: 100px;
+  height: 100px;
+  padding: 100px;
+  background: green;
+}
+</style>
+<p>Test passes if there is a filled green square.</p>
+<table></table>
diff --git a/tests/wpt/tests/css/CSS2/tables/collapsing-border-model-012.html b/tests/wpt/tests/css/CSS2/tables/collapsing-border-model-012.html
new file mode 100644
index 00000000000..39b176ce375
--- /dev/null
+++ b/tests/wpt/tests/css/CSS2/tables/collapsing-border-model-012.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<title>CSS Test: Tables under the collapsing borders model don't have padding</title>
+<link rel="author" title="Oriol Brufau" href="obrufau@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#collapsing-borders">
+<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
+<style>
+table {
+  border-collapse: collapse;
+  box-sizing: border-box;
+  width: 100px;
+  height: 100px;
+  padding: 100px;
+  background: green;
+}
+</style>
+<p>Test passes if there is a filled green square.</p>
+<table></table>
diff --git a/tests/wpt/tests/css/CSS2/tables/collapsing-border-model-013.html b/tests/wpt/tests/css/CSS2/tables/collapsing-border-model-013.html
new file mode 100644
index 00000000000..5e5f57694c9
--- /dev/null
+++ b/tests/wpt/tests/css/CSS2/tables/collapsing-border-model-013.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<title>CSS Test: Tables under the collapsing borders model don't have padding</title>
+<link rel="author" title="Oriol Brufau" href="obrufau@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#collapsing-borders">
+<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
+<style>
+div {
+  float: left;
+  background: green;
+}
+table {
+  border-collapse: collapse;
+  box-sizing: content-box;
+  width: 100px;
+  height: 100px;
+  padding: 100px;
+}
+</style>
+<p>Test passes if there is a filled green square.</p>
+<div>
+  <table></table>
+</div>
diff --git a/tests/wpt/tests/css/CSS2/tables/collapsing-border-model-014.html b/tests/wpt/tests/css/CSS2/tables/collapsing-border-model-014.html
new file mode 100644
index 00000000000..18177526b82
--- /dev/null
+++ b/tests/wpt/tests/css/CSS2/tables/collapsing-border-model-014.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<title>CSS Test: Tables under the collapsing borders model don't have padding</title>
+<link rel="author" title="Oriol Brufau" href="obrufau@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#collapsing-borders">
+<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
+<style>
+div {
+  float: left;
+  background: green;
+}
+table {
+  border-collapse: collapse;
+  box-sizing: border-box;
+  width: 100px;
+  height: 100px;
+  padding: 100px;
+}
+</style>
+<p>Test passes if there is a filled green square.</p>
+<div>
+  <table></table>
+</div>