2020-06-07 23:10:45 +02:00
|
|
|
|
/*
|
2025-02-21 00:43:26 +01:00
|
|
|
|
* Copyright (c) 2020-2025, Andreas Kling <andreas@ladybird.org>
|
2024-08-06 21:55:36 +01:00
|
|
|
|
* Copyright (c) 2024, Jamie Mansfield <jmansfield@cadixdev.org>
|
2020-06-07 23:10:45 +02:00
|
|
|
|
*
|
2021-04-22 01:24:48 -07:00
|
|
|
|
* SPDX-License-Identifier: BSD-2-Clause
|
2020-06-07 23:10:45 +02:00
|
|
|
|
*/
|
|
|
|
|
|
|
2026-04-18 10:54:06 +02:00
|
|
|
|
#include <LibWeb/Bindings/HTMLTableCellElement.h>
|
2022-09-30 17:16:16 -06:00
|
|
|
|
#include <LibWeb/Bindings/Intrinsics.h>
|
2024-12-20 11:32:17 +01:00
|
|
|
|
#include <LibWeb/CSS/ComputedProperties.h>
|
2021-07-30 19:31:46 +01:00
|
|
|
|
#include <LibWeb/CSS/Parser/Parser.h>
|
2025-08-08 11:24:15 +01:00
|
|
|
|
#include <LibWeb/CSS/StyleValues/ColorStyleValue.h>
|
2023-07-07 11:42:25 +02:00
|
|
|
|
#include <LibWeb/CSS/StyleValues/ImageStyleValue.h>
|
2025-08-08 10:28:41 +01:00
|
|
|
|
#include <LibWeb/CSS/StyleValues/KeywordStyleValue.h>
|
2023-08-21 23:44:07 +00:00
|
|
|
|
#include <LibWeb/CSS/StyleValues/LengthStyleValue.h>
|
2025-12-09 10:47:00 +13:00
|
|
|
|
#include <LibWeb/CSS/StyleValues/StyleValueList.h>
|
2023-07-07 11:42:25 +02:00
|
|
|
|
#include <LibWeb/DOM/Document.h>
|
2024-08-06 21:55:36 +01:00
|
|
|
|
#include <LibWeb/DOM/HTMLCollection.h>
|
2020-07-26 15:08:16 +02:00
|
|
|
|
#include <LibWeb/HTML/HTMLTableCellElement.h>
|
2023-08-21 23:44:07 +00:00
|
|
|
|
#include <LibWeb/HTML/HTMLTableElement.h>
|
2023-07-23 20:03:43 +03:00
|
|
|
|
#include <LibWeb/HTML/Numbers.h>
|
2022-03-26 14:29:52 +01:00
|
|
|
|
#include <LibWeb/HTML/Parser/HTMLParser.h>
|
2020-06-07 23:10:45 +02:00
|
|
|
|
|
2020-07-28 18:20:36 +02:00
|
|
|
|
namespace Web::HTML {
|
2020-06-07 23:10:45 +02:00
|
|
|
|
|
2024-11-15 04:01:23 +13:00
|
|
|
|
GC_DEFINE_ALLOCATOR(HTMLTableCellElement);
|
2023-11-19 19:47:52 +01:00
|
|
|
|
|
2022-02-18 21:00:52 +01:00
|
|
|
|
HTMLTableCellElement::HTMLTableCellElement(DOM::Document& document, DOM::QualifiedName qualified_name)
|
2021-02-07 11:20:15 +01:00
|
|
|
|
: HTMLElement(document, move(qualified_name))
|
2020-06-07 23:10:45 +02:00
|
|
|
|
{
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2022-03-14 13:21:51 -06:00
|
|
|
|
HTMLTableCellElement::~HTMLTableCellElement() = default;
|
2020-06-07 23:10:45 +02:00
|
|
|
|
|
2023-08-07 08:41:28 +02:00
|
|
|
|
void HTMLTableCellElement::initialize(JS::Realm& realm)
|
2023-01-10 06:28:20 -05:00
|
|
|
|
{
|
2024-03-16 13:13:08 +01:00
|
|
|
|
WEB_SET_PROTOTYPE_FOR_INTERFACE(HTMLTableCellElement);
|
2025-04-20 16:22:57 +02:00
|
|
|
|
Base::initialize(realm);
|
2023-01-10 06:28:20 -05:00
|
|
|
|
}
|
|
|
|
|
|
|
2024-12-23 17:51:10 +01:00
|
|
|
|
bool HTMLTableCellElement::is_presentational_hint(FlyString const& name) const
|
|
|
|
|
|
{
|
|
|
|
|
|
if (Base::is_presentational_hint(name))
|
|
|
|
|
|
return true;
|
|
|
|
|
|
|
|
|
|
|
|
return first_is_one_of(name,
|
|
|
|
|
|
HTML::AttributeNames::align,
|
|
|
|
|
|
HTML::AttributeNames::background,
|
|
|
|
|
|
HTML::AttributeNames::bgcolor,
|
|
|
|
|
|
HTML::AttributeNames::height,
|
2025-02-21 11:13:11 +00:00
|
|
|
|
HTML::AttributeNames::nowrap,
|
2024-12-23 17:51:10 +01:00
|
|
|
|
HTML::AttributeNames::valign,
|
|
|
|
|
|
HTML::AttributeNames::width);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2026-04-30 10:44:26 +01:00
|
|
|
|
void HTMLTableCellElement::apply_presentational_hints(Vector<CSS::StyleProperty>& properties) const
|
2020-06-12 22:47:51 +02:00
|
|
|
|
{
|
2026-04-30 10:44:26 +01:00
|
|
|
|
Base::apply_presentational_hints(properties);
|
2020-06-12 22:47:51 +02:00
|
|
|
|
for_each_attribute([&](auto& name, auto& value) {
|
|
|
|
|
|
if (name == HTML::AttributeNames::bgcolor) {
|
2023-05-28 15:06:12 +12:00
|
|
|
|
// https://html.spec.whatwg.org/multipage/rendering.html#tables-2:rules-for-parsing-a-legacy-colour-value
|
|
|
|
|
|
auto color = parse_legacy_color_value(value);
|
2020-06-12 22:47:51 +02:00
|
|
|
|
if (color.has_value())
|
2026-04-30 10:44:26 +01:00
|
|
|
|
properties.append({ .property_id = CSS::PropertyID::BackgroundColor, .value = CSS::ColorStyleValue::create_from_color(color.value(), CSS::ColorSyntax::Legacy) });
|
2020-06-13 15:16:56 +02:00
|
|
|
|
return;
|
|
|
|
|
|
}
|
2023-07-04 12:57:12 +02:00
|
|
|
|
if (name == HTML::AttributeNames::valign) {
|
2025-02-05 12:08:27 +00:00
|
|
|
|
if (auto parsed_value = parse_css_value(CSS::Parser::ParsingParams { document() }, value, CSS::PropertyID::VerticalAlign))
|
2026-04-30 10:44:26 +01:00
|
|
|
|
properties.append({ .property_id = CSS::PropertyID::VerticalAlign, .value = parsed_value.release_nonnull() });
|
2023-07-04 12:57:12 +02:00
|
|
|
|
return;
|
|
|
|
|
|
}
|
2020-06-13 15:16:56 +02:00
|
|
|
|
if (name == HTML::AttributeNames::align) {
|
2026-04-30 11:15:16 +01:00
|
|
|
|
if (auto parsed_value = parse_table_child_element_align_value(value))
|
2026-04-30 10:44:26 +01:00
|
|
|
|
properties.append({ .property_id = CSS::PropertyID::TextAlign, .value = parsed_value.release_nonnull() });
|
2020-06-13 15:16:56 +02:00
|
|
|
|
return;
|
2020-06-12 22:47:51 +02:00
|
|
|
|
}
|
2020-06-28 14:30:03 +02:00
|
|
|
|
if (name == HTML::AttributeNames::width) {
|
2022-03-26 14:19:00 +01:00
|
|
|
|
if (auto parsed_value = parse_nonzero_dimension_value(value))
|
2026-04-30 10:44:26 +01:00
|
|
|
|
properties.append({ .property_id = CSS::PropertyID::Width, .value = parsed_value.release_nonnull() });
|
2020-06-28 14:30:03 +02:00
|
|
|
|
return;
|
2022-03-26 14:19:00 +01:00
|
|
|
|
} else if (name == HTML::AttributeNames::height) {
|
|
|
|
|
|
if (auto parsed_value = parse_nonzero_dimension_value(value))
|
2026-04-30 10:44:26 +01:00
|
|
|
|
properties.append({ .property_id = CSS::PropertyID::Height, .value = parsed_value.release_nonnull() });
|
2022-03-26 14:19:00 +01:00
|
|
|
|
return;
|
2023-07-07 11:42:25 +02:00
|
|
|
|
} else if (name == HTML::AttributeNames::background) {
|
2024-12-06 16:24:08 -05:00
|
|
|
|
// https://html.spec.whatwg.org/multipage/rendering.html#tables-2:encoding-parsing-and-serializing-a-url
|
2025-01-23 19:40:57 +13:00
|
|
|
|
if (auto parsed_value = document().encoding_parse_url(value); parsed_value.has_value())
|
2026-04-30 10:44:26 +01:00
|
|
|
|
properties.append({ .property_id = CSS::PropertyID::BackgroundImage, .value = CSS::StyleValueList::create({ CSS::ImageStyleValue::create(*parsed_value) }, CSS::StyleValueList::Separator::Comma) });
|
2023-07-07 11:42:25 +02:00
|
|
|
|
return;
|
2025-02-21 11:13:11 +00:00
|
|
|
|
} else if (name == HTML::AttributeNames::nowrap) {
|
2026-04-30 10:44:26 +01:00
|
|
|
|
properties.append({ .property_id = CSS::PropertyID::TextWrapMode, .value = CSS::KeywordStyleValue::create(CSS::Keyword::Nowrap) });
|
2025-02-21 11:13:11 +00:00
|
|
|
|
return;
|
2020-06-28 14:30:03 +02:00
|
|
|
|
}
|
2020-06-12 22:47:51 +02:00
|
|
|
|
});
|
2023-11-19 22:19:32 +04:00
|
|
|
|
|
2024-03-09 20:53:43 +01:00
|
|
|
|
auto const table_element = first_ancestor_of_type<HTMLTableElement>();
|
|
|
|
|
|
if (!table_element)
|
|
|
|
|
|
return;
|
|
|
|
|
|
|
2025-02-21 00:43:26 +01:00
|
|
|
|
if (auto padding = table_element->cellpadding(); padding.has_value()) {
|
2026-04-30 10:44:26 +01:00
|
|
|
|
properties.append({ .property_id = CSS::PropertyID::PaddingTop, .value = CSS::LengthStyleValue::create(CSS::Length::make_px(*padding)) });
|
|
|
|
|
|
properties.append({ .property_id = CSS::PropertyID::PaddingBottom, .value = CSS::LengthStyleValue::create(CSS::Length::make_px(*padding)) });
|
|
|
|
|
|
properties.append({ .property_id = CSS::PropertyID::PaddingLeft, .value = CSS::LengthStyleValue::create(CSS::Length::make_px(*padding)) });
|
|
|
|
|
|
properties.append({ .property_id = CSS::PropertyID::PaddingRight, .value = CSS::LengthStyleValue::create(CSS::Length::make_px(*padding)) });
|
2023-11-19 22:19:32 +04:00
|
|
|
|
}
|
|
|
|
|
|
|
2024-03-09 20:53:43 +01:00
|
|
|
|
auto border = table_element->border();
|
2023-11-19 22:19:32 +04:00
|
|
|
|
|
2023-08-21 23:44:07 +00:00
|
|
|
|
if (!border)
|
|
|
|
|
|
return;
|
|
|
|
|
|
auto apply_border_style = [&](CSS::PropertyID style_property, CSS::PropertyID width_property, CSS::PropertyID color_property) {
|
2026-04-30 10:44:26 +01:00
|
|
|
|
properties.append({ .property_id = style_property, .value = CSS::KeywordStyleValue::create(CSS::Keyword::Inset) });
|
|
|
|
|
|
properties.append({ .property_id = width_property, .value = CSS::LengthStyleValue::create(CSS::Length::make_px(1)) });
|
|
|
|
|
|
properties.append({ .property_id = color_property, .value = table_element->computed_properties()->property(color_property) });
|
2023-08-21 23:44:07 +00:00
|
|
|
|
};
|
|
|
|
|
|
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);
|
2020-06-12 22:47:51 +02:00
|
|
|
|
}
|
|
|
|
|
|
|
2023-07-23 20:06:02 +03:00
|
|
|
|
// This implements step 8 in the spec here:
|
|
|
|
|
|
// https://html.spec.whatwg.org/multipage/tables.html#algorithm-for-processing-rows
|
2024-11-30 22:29:22 +00:00
|
|
|
|
WebIDL::UnsignedLong HTMLTableCellElement::col_span() const
|
2022-03-28 23:27:56 +02:00
|
|
|
|
{
|
2025-11-27 12:49:51 +00:00
|
|
|
|
// If the current cell has a colspan attribute, then parse that attribute's value, and let colspan be the result.
|
|
|
|
|
|
// If parsing that value failed, or returned zero, or if the attribute is absent, then let colspan be 1, instead.
|
2024-11-30 22:29:22 +00:00
|
|
|
|
auto col_span_attribute = get_attribute(HTML::AttributeNames::colspan);
|
|
|
|
|
|
if (!col_span_attribute.has_value())
|
|
|
|
|
|
return 1;
|
|
|
|
|
|
|
|
|
|
|
|
auto optional_value_digits = Web::HTML::parse_non_negative_integer_digits(*col_span_attribute);
|
2023-07-23 20:06:02 +03:00
|
|
|
|
|
2024-11-30 22:29:22 +00:00
|
|
|
|
if (!optional_value_digits.has_value())
|
2023-07-23 20:06:02 +03:00
|
|
|
|
return 1;
|
2024-11-30 22:29:22 +00:00
|
|
|
|
|
|
|
|
|
|
auto optional_value = optional_value_digits->to_number<i64>(TrimWhitespace::No);
|
|
|
|
|
|
if (optional_value == 0)
|
|
|
|
|
|
return 1;
|
|
|
|
|
|
|
2025-11-27 12:49:51 +00:00
|
|
|
|
// NB: If there is no value at this point the value must be larger than NumericLimits<i64>::max(), so return the maximum value of 1000.
|
2024-11-30 22:29:22 +00:00
|
|
|
|
if (!optional_value.has_value())
|
|
|
|
|
|
return 1000;
|
2023-07-23 20:06:02 +03:00
|
|
|
|
|
|
|
|
|
|
auto value = optional_value.value();
|
|
|
|
|
|
|
|
|
|
|
|
// If colspan is greater than 1000, let it be 1000 instead.
|
|
|
|
|
|
if (value > 1000) {
|
|
|
|
|
|
return 1000;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
return value;
|
2022-03-28 23:27:56 +02:00
|
|
|
|
}
|
|
|
|
|
|
|
2025-10-31 12:30:47 +00:00
|
|
|
|
void HTMLTableCellElement::set_col_span(WebIDL::UnsignedLong value)
|
2022-03-28 23:27:56 +02:00
|
|
|
|
{
|
2024-11-30 22:29:22 +00:00
|
|
|
|
if (value > 2147483647)
|
|
|
|
|
|
value = 1;
|
2025-10-31 12:30:47 +00:00
|
|
|
|
set_attribute_value(HTML::AttributeNames::colspan, String::number(value));
|
2022-03-28 23:27:56 +02:00
|
|
|
|
}
|
|
|
|
|
|
|
2023-07-23 20:06:02 +03:00
|
|
|
|
// This implements step 9 in the spec here:
|
|
|
|
|
|
// https://html.spec.whatwg.org/multipage/tables.html#algorithm-for-processing-rows
|
2024-11-30 22:29:22 +00:00
|
|
|
|
WebIDL::UnsignedLong HTMLTableCellElement::row_span() const
|
2022-03-28 23:36:10 +02:00
|
|
|
|
{
|
2025-11-27 12:49:51 +00:00
|
|
|
|
// If the current cell has a rowspan attribute, then parse that attribute's value, and let rowspan be the result.
|
|
|
|
|
|
// If parsing that value failed or if the attribute is absent, then let rowspan be 1, instead.
|
2024-11-30 22:29:22 +00:00
|
|
|
|
auto row_span_attribute = get_attribute(HTML::AttributeNames::rowspan);
|
|
|
|
|
|
if (!row_span_attribute.has_value())
|
|
|
|
|
|
return 1;
|
|
|
|
|
|
|
|
|
|
|
|
auto optional_value_digits = Web::HTML::parse_non_negative_integer_digits(*row_span_attribute);
|
|
|
|
|
|
if (!optional_value_digits.has_value())
|
|
|
|
|
|
return 1;
|
|
|
|
|
|
|
|
|
|
|
|
auto optional_value = optional_value_digits->to_number<i64>(TrimWhitespace::No);
|
2023-07-23 20:06:02 +03:00
|
|
|
|
|
|
|
|
|
|
// If rowspan is greater than 65534, let it be 65534 instead.
|
2025-11-27 12:49:51 +00:00
|
|
|
|
// NB: If there is no value at this point the value must be larger than NumericLimits<i64>::max(), so return the maximum value of 65534.
|
2024-11-30 22:29:22 +00:00
|
|
|
|
if (!optional_value.has_value() || *optional_value > 65534)
|
2023-07-23 20:06:02 +03:00
|
|
|
|
return 65534;
|
|
|
|
|
|
|
2024-11-30 22:29:22 +00:00
|
|
|
|
return *optional_value;
|
2022-03-28 23:36:10 +02:00
|
|
|
|
}
|
|
|
|
|
|
|
2025-10-31 12:30:47 +00:00
|
|
|
|
void HTMLTableCellElement::set_row_span(WebIDL::UnsignedLong value)
|
2022-03-28 23:36:10 +02:00
|
|
|
|
{
|
2024-11-30 22:29:22 +00:00
|
|
|
|
if (value > 2147483647)
|
|
|
|
|
|
value = 1;
|
2025-10-31 12:30:47 +00:00
|
|
|
|
set_attribute_value(HTML::AttributeNames::rowspan, String::number(value));
|
2022-03-28 23:36:10 +02:00
|
|
|
|
}
|
|
|
|
|
|
|
2024-08-06 21:55:36 +01:00
|
|
|
|
// https://html.spec.whatwg.org/multipage/tables.html#dom-tdth-cellindex
|
|
|
|
|
|
WebIDL::Long HTMLTableCellElement::cell_index() const
|
|
|
|
|
|
{
|
|
|
|
|
|
// The cellIndex IDL attribute must, if the element has a parent tr element, return the index of the cell's
|
|
|
|
|
|
// element in the parent element's cells collection. If there is no such parent element, then the attribute
|
|
|
|
|
|
// must return −1.
|
|
|
|
|
|
auto const* parent = first_ancestor_of_type<HTMLTableRowElement>();
|
|
|
|
|
|
if (!parent)
|
|
|
|
|
|
return -1;
|
|
|
|
|
|
|
|
|
|
|
|
auto rows = parent->cells()->collect_matching_elements();
|
|
|
|
|
|
for (size_t i = 0; i < rows.size(); ++i) {
|
|
|
|
|
|
if (rows[i] == this)
|
|
|
|
|
|
return i;
|
|
|
|
|
|
}
|
|
|
|
|
|
return -1;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2023-01-28 22:23:16 +00:00
|
|
|
|
Optional<ARIA::Role> HTMLTableCellElement::default_role() const
|
2022-11-28 17:58:13 -06:00
|
|
|
|
{
|
2024-12-07 18:21:31 +09:00
|
|
|
|
if (local_name() == TagNames::th) {
|
2025-04-18 14:19:19 +12:00
|
|
|
|
for (auto ancestor = parent_element(); ancestor; ancestor = ancestor->parent_element()) {
|
2024-12-07 18:21:31 +09:00
|
|
|
|
// AD-HOC: The ancestor checks here aren’t explicitly defined in the spec, but implicitly follow from what
|
|
|
|
|
|
// the spec does state, and from the physical placement/layout of elements. Also, the el-th and el-th-in-row
|
|
|
|
|
|
// tests at https://wpt.fyi/results/html-aam/table-roles.html require doing these ancestor checks — and
|
|
|
|
|
|
// implementing them causes the behavior to match that of other engines.
|
|
|
|
|
|
// https://w3c.github.io/html-aam/#el-th-columnheader
|
|
|
|
|
|
if (get_attribute(HTML::AttributeNames::scope) == "columnheader" || ancestor->local_name() == TagNames::thead)
|
|
|
|
|
|
return ARIA::Role::columnheader;
|
|
|
|
|
|
// https://w3c.github.io/html-aam/#el-th-rowheader
|
|
|
|
|
|
if (get_attribute(HTML::AttributeNames::scope) == "rowheader" || ancestor->local_name() == TagNames::tbody)
|
|
|
|
|
|
return ARIA::Role::rowheader;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
auto const* table_element = first_ancestor_of_type<HTMLTableElement>();
|
|
|
|
|
|
// https://w3c.github.io/html-aam/#el-td
|
|
|
|
|
|
// https://w3c.github.io/html-aam/#el-th/
|
|
|
|
|
|
// (ancestor table element has table role)
|
|
|
|
|
|
if (table_element->role_or_default() == ARIA::Role::table)
|
|
|
|
|
|
return ARIA::Role::cell;
|
|
|
|
|
|
// https://w3c.github.io/html-aam/#el-td-gridcell
|
|
|
|
|
|
// https://w3c.github.io/html-aam/#el-th-gridcell
|
|
|
|
|
|
// (ancestor table element has grid or treegrid role)
|
|
|
|
|
|
if (first_is_one_of(table_element->role_or_default(), ARIA::Role::grid, ARIA::Role::gridcell))
|
|
|
|
|
|
return ARIA::Role::gridcell;
|
2022-11-28 17:58:13 -06:00
|
|
|
|
return {};
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2020-06-07 23:10:45 +02:00
|
|
|
|
}
|