layout: Fix clientWidth & friends for tables (#35096)

`clientWidth` shouldn't include the borders of a box. The problem was
that we pretend that table wrapper boxes have the border specified on
the table element, even though this border actually applies to the
table grid box instead of the table wrapper box.

Therefore, `clientWidth` was wrong when it subtracted the borders.
This patch fixes it.

Signed-off-by: Oriol Brufau <obrufau@igalia.com>

components/layout_2020/display_list/mod.rs

@@ -908,7 +908,7 @@ impl<'a> BuilderForBoxFragment<'a> {
         }
 
         let style_color = match &self.fragment.detailed_layout_info {
-            Some(SpecificLayoutInfo::TableOrTableCell(table_info)) => {
+            Some(SpecificLayoutInfo::TableGridOrTableCell(table_info)) => {
                 table_info.border_style_color.clone()
             },
             _ => BorderStyleColor::from_border(border),

components/layout_2020/fragment_tree/box_fragment.rs

@@ -19,7 +19,7 @@ use crate::geom::{
     AuOrAuto, LengthPercentageOrAuto, PhysicalPoint, PhysicalRect, PhysicalSides, ToLogical,
 };
 use crate::style_ext::ComputedValuesExt;
-use crate::table::SpecificTableOrTableCellInfo;
+use crate::table::SpecificTableGridOrTableCellInfo;
 use crate::taffy::SpecificTaffyGridInfo;
 
 /// Describes how a [`BoxFragment`] paints its background.
@@ -43,7 +43,8 @@ pub(crate) struct ExtraBackground {
 #[derive(Clone, Debug)]
 pub(crate) enum SpecificLayoutInfo {
     Grid(Box<SpecificTaffyGridInfo>),
-    TableOrTableCell(Box<SpecificTableOrTableCellInfo>),
+    TableGridOrTableCell(Box<SpecificTableGridOrTableCellInfo>),
+    TableWrapper,
 }
 
 pub(crate) struct BoxFragment {
@@ -346,4 +347,13 @@ impl BoxFragment {
         self.style.get_box().display.is_inline_flow() &&
             !self.base.flags.contains(FragmentFlags::IS_REPLACED)
     }
+
+    /// Whether this is a table wrapper box.
+    /// <https://www.w3.org/TR/css-tables-3/#table-wrapper-box>
+    pub(crate) fn is_table_wrapper(&self) -> bool {
+        matches!(
+            self.detailed_layout_info,
+            Some(SpecificLayoutInfo::TableWrapper)
+        )
+    }
 }

components/layout_2020/fragment_tree/fragment_tree.rs

@@ -14,7 +14,7 @@ use webrender_traits::display_list::ScrollSensitivity;
 use super::{ContainingBlockManager, Fragment, Tag};
 use crate::display_list::StackingContext;
 use crate::flow::CanvasBackground;
-use crate::geom::PhysicalRect;
+use crate::geom::{PhysicalPoint, PhysicalRect};
 
 pub struct FragmentTree {
     /// Fragments at the top-level of the tree.
@@ -142,13 +142,17 @@ impl FragmentTree {
                     if fragment.is_inline_box() {
                         return Some(Rect::zero());
                     }
-
-                    let border = fragment.style.get_border();
-                    let padding_rect = fragment.padding_rect();
-                    Rect::new(
-                        Point2D::new(border.border_left_width, border.border_top_width),
-                        Size2D::new(padding_rect.size.width, padding_rect.size.height),
-                    )
+                    if fragment.is_table_wrapper() {
+                        // For tables the border actually belongs to the table grid box,
+                        // so we need to include it in the dimension of the table wrapper box.
+                        let mut rect = fragment.border_rect();
+                        rect.origin = PhysicalPoint::zero();
+                        rect
+                    } else {
+                        let mut rect = fragment.padding_rect();
+                        rect.origin = PhysicalPoint::new(fragment.border.left, fragment.border.top);
+                        rect
+                    }
                 },
                 Fragment::Positioning(fragment) => fragment.borrow().rect.cast_unit(),
                 _ => return None,

components/layout_2020/table/layout.rs

@@ -41,7 +41,7 @@ use crate::sizing::{ComputeInlineContentSizes, ContentSizes, InlineContentSizesR
 use crate::style_ext::{
     BorderStyleColor, Clamp, ComputedValuesExt, LayoutStyle, PaddingBorderMargin,
 };
-use crate::table::{SpecificTableOrTableCellInfo, TableSlotCoordinates};
+use crate::table::{SpecificTableGridOrTableCellInfo, TableSlotCoordinates};
 use crate::{
     ConstraintSpace, ContainingBlock, ContainingBlockSize, IndefiniteContainingBlock, WritingMode,
 };
@@ -50,8 +50,8 @@ fn detailed_layout_info(
     border_style_color: Option<LogicalSides<BorderStyleColor>>,
     writing_mode: WritingMode,
 ) -> Option<SpecificLayoutInfo> {
-    Some(SpecificLayoutInfo::TableOrTableCell(Box::new(
-        SpecificTableOrTableCellInfo {
+    Some(SpecificLayoutInfo::TableGridOrTableCell(Box::new(
+        SpecificTableGridOrTableCellInfo {
             border_style_color: border_style_color?.to_physical(writing_mode),
         },
     )))
@@ -1697,7 +1697,7 @@ impl<'a> TableLayout<'a> {
             content_inline_size_for_table: None,
             baselines: Baselines::default(),
             depends_on_block_constraints,
-            detailed_layout_info: None,
+            detailed_layout_info: Some(SpecificLayoutInfo::TableWrapper),
         };
 
         table_layout

components/layout_2020/table/mod.rs

@@ -318,7 +318,7 @@ pub struct TableCaption {
 }
 
 #[derive(Clone, Debug)]
-pub(crate) struct SpecificTableOrTableCellInfo {
+pub(crate) struct SpecificTableGridOrTableCellInfo {
     /// For tables is in collapsed-borders mode, this is used as an override for the
     /// style and color of the border of the table and table cells.
     pub border_style_color: PhysicalSides<BorderStyleColor>,

tests/wpt/meta/css/cssom-view/table-client-props.html.ini

@@ -1,6 +0,0 @@
-[table-client-props.html]
-  [Table with separated border]
-    expected: FAIL
-
-  [Table with collapsed border]
-    expected: FAIL

tests/wpt/meta/css/cssom-view/table-with-border-client-width-height.html.ini

@@ -1,4 +0,0 @@
-[table-with-border-client-width-height.html]
-  [Table's clientWidth/Height and OffsetWidth/Height should be the same]
-    expected: FAIL
-