LibWeb: Support reversed ordered lists
Some checks are pending
CI / Lagom (false, NO_FUZZ, macos-15, macOS, Clang) (push) Waiting to run
CI / Lagom (false, NO_FUZZ, ubuntu-24.04, Linux, GNU) (push) Waiting to run
CI / Lagom (true, NO_FUZZ, ubuntu-24.04, Linux, Clang) (push) Waiting to run
CI / Lagom (false, FUZZ, ubuntu-24.04, Linux, Clang) (push) Waiting to run
Package the js repl as a binary artifact / build-and-package (macos-14, macOS, macOS-universal2) (push) Waiting to run
Package the js repl as a binary artifact / build-and-package (ubuntu-24.04, Linux, Linux-x86_64) (push) Waiting to run
Run test262 and test-wasm / run_and_update_results (push) Waiting to run
Lint Code / lint (push) Waiting to run
Label PRs with merge conflicts / auto-labeler (push) Waiting to run
Push notes / build (push) Waiting to run

This PR adds support for the `reversed` attribute of
ordered lists.
This commit is contained in:
Glenn Skrzypczak 2025-01-27 18:50:27 +01:00 committed by Tim Ledbetter
commit 0750513993
Notes: github-actions[bot] 2025-02-21 04:24:29 +00:00
11 changed files with 214 additions and 55 deletions

View file

@ -12,56 +12,63 @@ namespace Web::Layout {
GC_DEFINE_ALLOCATOR(ListItemMarkerBox);
ListItemMarkerBox::ListItemMarkerBox(DOM::Document& document, CSS::ListStyleType style_type, CSS::ListStylePosition style_position, size_t index, GC::Ref<CSS::ComputedProperties> style)
ListItemMarkerBox::ListItemMarkerBox(DOM::Document& document, CSS::ListStyleType style_type, CSS::ListStylePosition style_position, GC::Ref<DOM::Element> list_item_element, GC::Ref<CSS::ComputedProperties> style)
: Box(document, nullptr, move(style))
, m_list_style_type(style_type)
, m_list_style_position(style_position)
, m_index(index)
, m_list_item_element(list_item_element)
{
m_list_style_type.visit(
[this](CSS::CounterStyleNameKeyword keyword) {
}
ListItemMarkerBox::~ListItemMarkerBox() = default;
Optional<String> ListItemMarkerBox::text() const
{
auto index = m_list_item_element->ordinal_value();
return m_list_style_type.visit(
[index](CSS::CounterStyleNameKeyword keyword) -> Optional<String> {
switch (keyword) {
case CSS::CounterStyleNameKeyword::Square:
case CSS::CounterStyleNameKeyword::Circle:
case CSS::CounterStyleNameKeyword::Disc:
case CSS::CounterStyleNameKeyword::DisclosureClosed:
case CSS::CounterStyleNameKeyword::DisclosureOpen:
break;
return {};
case CSS::CounterStyleNameKeyword::Decimal:
m_text = MUST(String::formatted("{}.", m_index));
break;
return MUST(String::formatted("{}.", index));
case CSS::CounterStyleNameKeyword::DecimalLeadingZero:
// This is weird, but in accordance to spec.
m_text = m_index < 10 ? MUST(String::formatted("0{}.", m_index)) : MUST(String::formatted("{}.", m_index));
break;
return MUST(index < 10 ? String::formatted("0{}.", index) : String::formatted("{}.", index));
case CSS::CounterStyleNameKeyword::LowerAlpha:
case CSS::CounterStyleNameKeyword::LowerLatin:
m_text = String::bijective_base_from(m_index - 1, String::Case::Lower);
break;
return String::bijective_base_from(index - 1, String::Case::Lower);
case CSS::CounterStyleNameKeyword::UpperAlpha:
case CSS::CounterStyleNameKeyword::UpperLatin:
m_text = String::bijective_base_from(m_index - 1, String::Case::Upper);
break;
return String::bijective_base_from(index - 1, String::Case::Upper);
case CSS::CounterStyleNameKeyword::LowerRoman:
m_text = String::roman_number_from(m_index, String::Case::Lower);
break;
return String::roman_number_from(index, String::Case::Lower);
case CSS::CounterStyleNameKeyword::UpperRoman:
m_text = String::roman_number_from(m_index, String::Case::Upper);
break;
return String::roman_number_from(index, String::Case::Upper);
case CSS::CounterStyleNameKeyword::None:
break;
return {};
default:
VERIFY_NOT_REACHED();
}
},
[this](String const& string) {
m_text = string;
[](String const& string) -> Optional<String> {
return string;
});
}
ListItemMarkerBox::~ListItemMarkerBox() = default;
GC::Ptr<Painting::Paintable> ListItemMarkerBox::create_paintable() const
{
return Painting::MarkerPaintable::create(*this);
}
void ListItemMarkerBox::visit_edges(Cell::Visitor& visitor)
{
Base::visit_edges(visitor);
visitor.visit(m_list_item_element);
}
}

View file

@ -17,10 +17,10 @@ class ListItemMarkerBox final : public Box {
GC_DECLARE_ALLOCATOR(ListItemMarkerBox);
public:
explicit ListItemMarkerBox(DOM::Document&, CSS::ListStyleType, CSS::ListStylePosition, size_t index, GC::Ref<CSS::ComputedProperties>);
explicit ListItemMarkerBox(DOM::Document&, CSS::ListStyleType, CSS::ListStylePosition, GC::Ref<DOM::Element>, GC::Ref<CSS::ComputedProperties>);
virtual ~ListItemMarkerBox() override;
Optional<String> const& text() const { return m_text; }
Optional<String> text() const;
virtual GC::Ptr<Painting::Paintable> create_paintable() const override;
@ -28,14 +28,14 @@ public:
CSS::ListStylePosition list_style_position() const { return m_list_style_position; }
private:
virtual void visit_edges(Cell::Visitor&) override;
virtual bool is_list_item_marker_box() const final { return true; }
virtual bool can_have_children() const override { return false; }
CSS::ListStyleType m_list_style_type { CSS::CounterStyleNameKeyword::None };
CSS::ListStylePosition m_list_style_position { CSS::ListStylePosition::Outside };
size_t m_index;
Optional<String> m_text {};
GC::Ref<DOM::Element> m_list_item_element;
};
template<>

View file

@ -214,7 +214,7 @@ void TreeBuilder::create_pseudo_element_if_needed(DOM::Element& element, CSS::Se
document,
pseudo_element_node->computed_values().list_style_type(),
pseudo_element_node->computed_values().list_style_position(),
0,
element,
marker_style);
static_cast<ListItemBox&>(*pseudo_element_node).set_marker(list_item_marker);
element.set_pseudo_element_node({}, CSS::Selector::PseudoElement::Type::Marker, list_item_marker);
@ -421,30 +421,6 @@ static bool is_ignorable_whitespace(Layout::Node const& node)
return false;
}
i32 TreeBuilder::calculate_list_item_index(DOM::Node& dom_node)
{
if (is<HTML::HTMLLIElement>(dom_node)) {
auto& li = static_cast<HTML::HTMLLIElement&>(dom_node);
if (li.value() != 0)
return li.value();
}
if (dom_node.previous_sibling() != nullptr) {
DOM::Node* current = dom_node.previous_sibling();
while (current != nullptr) {
if (is<HTML::HTMLLIElement>(*current))
return calculate_list_item_index(*current) + 1;
current = current->previous_sibling();
}
}
if (is<HTML::HTMLOListElement>(*dom_node.parent())) {
auto& ol = static_cast<HTML::HTMLOListElement&>(*dom_node.parent());
return ol.start();
}
return 1;
}
void TreeBuilder::update_layout_tree(DOM::Node& dom_node, TreeBuilder::Context& context, MustCreateSubtree must_create_subtree)
{
bool should_create_layout_node = must_create_subtree == MustCreateSubtree::Yes
@ -708,7 +684,7 @@ void TreeBuilder::update_layout_tree_after_children(DOM::Node& dom_node, GC::Ref
if (is<ListItemBox>(*layout_node)) {
auto& element = static_cast<DOM::Element&>(dom_node);
auto marker_style = style_computer.compute_style(element, CSS::Selector::PseudoElement::Type::Marker);
auto list_item_marker = document.heap().allocate<ListItemMarkerBox>(document, layout_node->computed_values().list_style_type(), layout_node->computed_values().list_style_position(), calculate_list_item_index(dom_node), marker_style);
auto list_item_marker = document.heap().allocate<ListItemMarkerBox>(document, layout_node->computed_values().list_style_type(), layout_node->computed_values().list_style_position(), element, marker_style);
static_cast<ListItemBox&>(*layout_node).set_marker(list_item_marker);
element.set_pseudo_element_node({}, CSS::Selector::PseudoElement::Type::Marker, list_item_marker);
layout_node->append_child(*list_item_marker);