beenull/ladybird
1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2024-11-22 23:50:19 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

LibWeb: Support border attribute on the table element

Browse source 
Fixes #19938.
This commit is contained in:
Andi Gallo 2023-08-21 23:44:07 +00:00 committed by Alexander Kalenik
parent fb4a20ade5
commit b13fe9397d
Notes: sideshowbarker 2024-07-17 00:47:29 +09:00 
Author: https://github.com/axgallo
Commit: https://github.com/SerenityOS/serenity/commit/b13fe9397d
Pull-request: https://github.com/SerenityOS/serenity/pull/20721
Issue: https://github.com/SerenityOS/serenity/issues/19938
Reviewed-by: https://github.com/AtkinsSJ
Reviewed-by: https://github.com/kalenikaliaksandr ✅
8 changed files with 105 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
Tests/LibWeb/Layout/expected/table/border-attribute-overridden-by-css.txt Normal file
View file

@ -0,0 +1,22 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x45.46875 children: not-inline
TableWrapper <(anonymous)> at (8,8) content-size 42.265625x45.46875 [BFC] children: not-inline
Box <table> at (18,18) content-size 22.265625x25.46875 table-box [TFC] children: not-inline
Box <tbody> at (18,18) content-size 18.265625x21.46875 table-row-group children: not-inline
Box <tr> at (20,20) content-size 18.265625x21.46875 table-row children: not-inline
BlockContainer <td> at (22,22) content-size 14.265625x17.46875 table-cell [BFC] children: inline
line 0 width: 14.265625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [22,22 14.265625x17.46875]
"A"
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x600]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x45.46875]
PaintableWithLines (TableWrapper(anonymous)) [8,8 42.265625x45.46875]
PaintableBox (Box<TABLE>) [8,8 42.265625x45.46875]
PaintableBox (Box<TBODY>) [18,18 18.265625x21.46875] overflow: [18,18 20.265625x23.46875]
PaintableBox (Box<TR>) [20,20 18.265625x21.46875]
PaintableWithLines (BlockContainer<TD>) [20,20 18.265625x21.46875]
TextPaintable (TextNode<#text>)

22
Tests/LibWeb/Layout/expected/table/border-attribute.txt Normal file
View file

@ -0,0 +1,22 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x35.46875 children: not-inline
TableWrapper <(anonymous)> at (8,8) content-size 32.265625x35.46875 [BFC] children: not-inline
Box <table> at (13,13) content-size 22.265625x25.46875 table-box [TFC] children: not-inline
Box <tbody> at (13,13) content-size 18.265625x21.46875 table-row-group children: not-inline
Box <tr> at (15,15) content-size 18.265625x21.46875 table-row children: not-inline
BlockContainer <td> at (17,17) content-size 14.265625x17.46875 table-cell [BFC] children: inline
line 0 width: 14.265625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [17,17 14.265625x17.46875]
"A"
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x600]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x35.46875]
PaintableWithLines (TableWrapper(anonymous)) [8,8 32.265625x35.46875]
PaintableBox (Box<TABLE>) [8,8 32.265625x35.46875]
PaintableBox (Box<TBODY>) [13,13 18.265625x21.46875] overflow: [13,13 20.265625x23.46875]
PaintableBox (Box<TR>) [15,15 18.265625x21.46875]
PaintableWithLines (BlockContainer<TD>) [15,15 18.265625x21.46875]
TextPaintable (TextNode<#text>)

6
Tests/LibWeb/Layout/input/table/border-attribute-overridden-by-css.html Normal file
View file

@ -0,0 +1,6 @@
<style>
table {
border: 10px solid black;
}
</style>
<table border="5"><tr><td>A</td></tr></table>

1
Tests/LibWeb/Layout/input/table/border-attribute.html Normal file
View file

@ -0,0 +1 @@
<table border="5"><tr><td>A</td></tr></table>

2
Tests/LibWeb/Layout/input/table/rowspan.html
View file

@ -6,7 +6,7 @@
</head>
<body>
<table border="1">
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>

25
Userland/Libraries/LibWeb/HTML/HTMLTableCellElement.cpp
View file

@ -10,8 +10,10 @@
#include <LibWeb/CSS/StyleValues/ColorStyleValue.h>
#include <LibWeb/CSS/StyleValues/IdentifierStyleValue.h>
#include <LibWeb/CSS/StyleValues/ImageStyleValue.h>
#include <LibWeb/CSS/StyleValues/LengthStyleValue.h>
#include <LibWeb/DOM/Document.h>
#include <LibWeb/HTML/HTMLTableCellElement.h>
#include <LibWeb/HTML/HTMLTableElement.h>
#include <LibWeb/HTML/Parser/HTMLParser.h>
namespace Web::HTML {
@ -29,6 +31,16 @@ void HTMLTableCellElement::initialize(JS::Realm& realm)
set_prototype(&Bindings::ensure_web_prototype<Bindings::HTMLTableCellElementPrototype>(realm, "HTMLTableCellElement"));
}
static const HTML::HTMLTableElement* table_containing_cell(const DOM::Node* node)
{
if (!is<const HTML::HTMLTableCellElement>(node))
return nullptr;
auto parent_node = node->parent();
while (!is<HTML::HTMLTableElement>(parent_node))
parent_node = parent_node->parent();
return static_cast<const HTML::HTMLTableElement*>(parent_node);
}
void HTMLTableCellElement::apply_presentational_hints(CSS::StyleProperties& style) const
{
for_each_attribute([&](auto& name, auto& value) {
@ -67,6 +79,19 @@ void HTMLTableCellElement::apply_presentational_hints(CSS::StyleProperties& styl
return;
}
});
auto table_element = table_containing_cell(this);
auto border = table_element->border();
if (!border)
return;
auto apply_border_style = [&](CSS::PropertyID style_property, CSS::PropertyID width_property, CSS::PropertyID color_property) {
style.set_property(style_property, CSS::IdentifierStyleValue::create(CSS::ValueID::Inset));
style.set_property(width_property, CSS::LengthStyleValue::create(CSS::Length::make_px(1)));
style.set_property(color_property, table_element->computed_css_values()->property(color_property));
};
apply_border_style(CSS::PropertyID::BorderLeftStyle, CSS::PropertyID::BorderLeftWidth, CSS::PropertyID::BorderLeftColor);
apply_border_style(CSS::PropertyID::BorderTopStyle, CSS::PropertyID::BorderTopWidth, CSS::PropertyID::BorderTopColor);
apply_border_style(CSS::PropertyID::BorderRightStyle, CSS::PropertyID::BorderRightWidth, CSS::PropertyID::BorderRightColor);
apply_border_style(CSS::PropertyID::BorderBottomStyle, CSS::PropertyID::BorderBottomWidth, CSS::PropertyID::BorderBottomColor);
}
unsigned int HTMLTableCellElement::col_span() const

26
Userland/Libraries/LibWeb/HTML/HTMLTableElement.cpp
View file

@ -9,6 +9,8 @@
#include <LibWeb/CSS/Parser/Parser.h>
#include <LibWeb/CSS/StyleProperties.h>
#include <LibWeb/CSS/StyleValues/ColorStyleValue.h>
#include <LibWeb/CSS/StyleValues/IdentifierStyleValue.h>
#include <LibWeb/CSS/StyleValues/LengthStyleValue.h>
#include <LibWeb/DOM/ElementFactory.h>
#include <LibWeb/DOM/HTMLCollection.h>
#include <LibWeb/HTML/HTMLTableColElement.h>
@ -39,6 +41,11 @@ void HTMLTableElement::visit_edges(Cell::Visitor& visitor)
visitor.visit(m_t_bodies);
}
static unsigned parse_border(DeprecatedString const& value)
{
return value.to_uint().value_or(0);
}
void HTMLTableElement::apply_presentational_hints(CSS::StyleProperties& style) const
{
for_each_attribute([&](auto& name, auto& value) {
@ -64,6 +71,20 @@ void HTMLTableElement::apply_presentational_hints(CSS::StyleProperties& style) c
style.set_property(CSS::PropertyID::BorderSpacing, parsed_value.release_nonnull());
return;
}
if (name == HTML::AttributeNames::border) {
auto border = parse_border(value);
if (!border)
return;
auto apply_border_style = [&](CSS::PropertyID style_property, CSS::PropertyID width_property) {
auto legacy_line_style = CSS::IdentifierStyleValue::create(CSS::ValueID::Outset);
style.set_property(style_property, legacy_line_style);
style.set_property(width_property, CSS::LengthStyleValue::create(CSS::Length::make_px(border)));
};
apply_border_style(CSS::PropertyID::BorderLeftStyle, CSS::PropertyID::BorderLeftWidth);
apply_border_style(CSS::PropertyID::BorderTopStyle, CSS::PropertyID::BorderTopWidth);
apply_border_style(CSS::PropertyID::BorderRightStyle, CSS::PropertyID::BorderRightWidth);
apply_border_style(CSS::PropertyID::BorderBottomStyle, CSS::PropertyID::BorderBottomWidth);
}
});
}
@ -386,4 +407,9 @@ WebIDL::ExceptionOr<void> HTMLTableElement::delete_row(long index)
return {};
}
unsigned int HTMLTableElement::border() const
{
return parse_border(attribute(HTML::AttributeNames::border));
}
}

2
Userland/Libraries/LibWeb/HTML/HTMLTableElement.h
View file

@ -45,6 +45,8 @@ public:
// https://www.w3.org/TR/html-aria/#el-table
virtual Optional<ARIA::Role> default_role() const override { return ARIA::Role::table; }
unsigned border() const;
private:
HTMLTableElement(DOM::Document&, DOM::QualifiedName);