LibWeb: Support cellpadding attribute on table elements

implicitfield · awesomekling · commit 00c1da8cbceb · 2023-11-21T16:54:02.000+01:00
diff --git a/Tests/LibWeb/Layout/expected/table/table-cellpadding.txt b/Tests/LibWeb/Layout/expected/table/table-cellpadding.txt
@@ -0,0 +1,38 @@
+Viewport <#document> at (0,0) content-size 800x600 children: not-inline
+  BlockContainer <html> at (0,0) content-size 800x220 [BFC] children: not-inline
+    BlockContainer <body> at (8,8) content-size 784x204 children: not-inline
+      TableWrapper <(anonymous)> at (8,8) content-size 498.1875x204 [BFC] children: not-inline
+        Box <table> at (9,9) content-size 496.1875x202 table-box [TFC] children: not-inline
+          Box <tbody> at (9,9) content-size 488.1875x198 table-row-group children: not-inline
+            Box <tr> at (11,11) content-size 488.1875x198 table-row children: not-inline
+              BlockContainer <td> at (71,71) content-size 26.640625x17.46875 table-cell [BFC] children: inline
+                line 0 width: 26.640625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+                  frag 0 from TextNode start: 0, length: 3, rect: [71,71 26.640625x17.46875]
+                    "top"
+                TextNode <#text>
+              BlockContainer <td> at (219.640625,101.265625) content-size 45.4375x17.46875 table-cell [BFC] children: inline
+                line 0 width: 45.4375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+                  frag 0 from TextNode start: 0, length: 6, rect: [219.640625,101.265625 45.4375x17.46875]
+                    "middle"
+                TextNode <#text>
+              BlockContainer <td> at (387.078125,131.53125) content-size 56.109375x17.46875 table-cell [BFC] children: inline
+                line 0 width: 56.109375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+                  frag 0 from TextNode start: 0, length: 6, rect: [387.078125,131.53125 56.109375x17.46875]
+                    "bottom"
+                TextNode <#text>
+              BlockContainer <(anonymous)> (not painted) children: inline
+                TextNode <#text>
+
+ViewportPaintable (Viewport<#document>) [0,0 800x600]
+  PaintableWithLines (BlockContainer<HTML>) [0,0 800x220]
+    PaintableWithLines (BlockContainer<BODY>) [8,8 784x204]
+      PaintableWithLines (TableWrapper(anonymous)) [8,8 498.1875x204]
+        PaintableBox (Box<TABLE>) [8,8 498.1875x204]
+          PaintableBox (Box<TBODY>) [9,9 488.1875x198] overflow: [9,9 494.1875x200]
+            PaintableBox (Box<TR>) [11,11 488.1875x198] overflow: [11,11 492.1875x198]
+              PaintableWithLines (BlockContainer<TD>) [11,11 146.640625x198]
+                TextPaintable (TextNode<#text>)
+              PaintableWithLines (BlockContainer<TD>) [159.640625,11 165.4375x198]
+                TextPaintable (TextNode<#text>)
+              PaintableWithLines (BlockContainer<TD>) [327.078125,11 176.109375x198]
+                TextPaintable (TextNode<#text>)
diff --git a/Tests/LibWeb/Layout/input/table/table-cellpadding.html b/Tests/LibWeb/Layout/input/table/table-cellpadding.html
@@ -0,0 +1,6 @@
+<!doctype html><style>
+table {
+    height: 200px;
+    border: 1px solid black;
+}
+</style><table cellpadding="60"><td valign=top>top</td><td valign=middle>middle</td><td valign=bottom>bottom</td>
diff --git a/Userland/Libraries/LibWeb/HTML/HTMLTableCellElement.cpp b/Userland/Libraries/LibWeb/HTML/HTMLTableCellElement.cpp
@@ -85,7 +85,16 @@ void HTMLTableCellElement::apply_presentational_hints(CSS::StyleProperties& styl
         }
     });
     auto const& table_element = table_containing_cell(*this);
+
+    if (auto padding = table_element.padding()) {
+        style.set_property(CSS::PropertyID::PaddingTop, CSS::LengthStyleValue::create(CSS::Length::make_px(padding)));
+        style.set_property(CSS::PropertyID::PaddingBottom, CSS::LengthStyleValue::create(CSS::Length::make_px(padding)));
+        style.set_property(CSS::PropertyID::PaddingLeft, CSS::LengthStyleValue::create(CSS::Length::make_px(padding)));
+        style.set_property(CSS::PropertyID::PaddingRight, CSS::LengthStyleValue::create(CSS::Length::make_px(padding)));
+    }
+
     auto border = table_element.border();
+
     if (!border)
         return;
     auto apply_border_style = [&](CSS::PropertyID style_property, CSS::PropertyID width_property, CSS::PropertyID color_property) {
diff --git a/Userland/Libraries/LibWeb/HTML/HTMLTableElement.cpp b/Userland/Libraries/LibWeb/HTML/HTMLTableElement.cpp
@@ -16,6 +16,7 @@
 #include <LibWeb/HTML/HTMLTableColElement.h>
 #include <LibWeb/HTML/HTMLTableElement.h>
 #include <LibWeb/HTML/HTMLTableRowElement.h>
+#include <LibWeb/HTML/Numbers.h>
 #include <LibWeb/HTML/Parser/HTMLParser.h>
 #include <LibWeb/Namespace.h>
 
@@ -100,6 +101,19 @@ void HTMLTableElement::apply_presentational_hints(CSS::StyleProperties& style) c
     });
 }
 
+void HTMLTableElement::attribute_changed(FlyString const& name, Optional<String> const& value)
+{
+    Base::attribute_changed(name, value);
+    if (name == HTML::AttributeNames::cellpadding) {
+        if (value.has_value())
+            m_padding = max(0, parse_integer(value.value()).value_or(0));
+        else
+            m_padding = 1;
+
+        return;
+    }
+}
+
 // https://html.spec.whatwg.org/multipage/tables.html#dom-table-caption
 JS::GCPtr<HTMLTableCaptionElement> HTMLTableElement::caption()
 {
@@ -424,4 +438,9 @@ unsigned int HTMLTableElement::border() const
     return parse_border(deprecated_attribute(HTML::AttributeNames::border));
 }
 
+unsigned int HTMLTableElement::padding() const
+{
+    return m_padding;
+}
+
 }
diff --git a/Userland/Libraries/LibWeb/HTML/HTMLTableElement.h b/Userland/Libraries/LibWeb/HTML/HTMLTableElement.h
@@ -47,6 +47,7 @@ class HTMLTableElement final : public HTMLElement {
     virtual Optional<ARIA::Role> default_role() const override { return ARIA::Role::table; }
 
     unsigned border() const;
+    unsigned padding() const;
 
 private:
     HTMLTableElement(DOM::Document&, DOM::QualifiedName);
@@ -57,9 +58,11 @@ class HTMLTableElement final : public HTMLElement {
     virtual void visit_edges(Cell::Visitor&) override;
 
     virtual void apply_presentational_hints(CSS::StyleProperties&) const override;
+    virtual void attribute_changed(FlyString const& name, Optional<String> const& value) override;
 
     JS::GCPtr<DOM::HTMLCollection> mutable m_rows;
     JS::GCPtr<DOM::HTMLCollection> mutable m_t_bodies;
+    unsigned m_padding { 1 };
 };
 
 }
