LibWeb: Support cellpadding attribute on table elements

lanmonster · Nov 21, 2023 · 00c1da8 · 00c1da8
1 parent 3d1fbcb
commit 00c1da8
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 0 deletions.
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 };
 };
 
 }