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

@@ -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))
     }

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(
+    fn padding(&self, containing_block_writing_mode: WritingMode)
-        &self,
+        -> LogicalSides<LengthPercentage>;
-        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> {
+    ) -> LogicalSides<LengthPercentage> {
-        let padding = self.get_padding();
+        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_top.0,
-                &padding.padding_right.0,
+                padding.padding_right.0,
-                &padding.padding_bottom.0,
+                padding.padding_bottom.0,
-                &padding.padding_left.0,
+                padding.padding_left.0,
             ),
             containing_block_writing_mode,
         )

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",
        [

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>

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>

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>

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>