mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2024-11-22 15:40:19 +00:00
LibWeb: Add ol start and li value attributes support
This commit is contained in:
Bastiaan van der Plaat
Andreas Kling
parent
d2fbc15f5d
commit
1cdbfc2ff1
Notes:
sideshowbarker
2024-07-16 21:39:23 +09:00
Author: https://github.com/bplaat Commit: https://github.com/SerenityOS/serenity/commit/1cdbfc2ff1 Pull-request: https://github.com/SerenityOS/serenity/pull/21408 Reviewed-by: https://github.com/AtkinsSJ
10 changed files with 189 additions and 16 deletions
|
|
@ -106,6 +106,21 @@
|
|||
<li>Third</li>
|
||||
</ol>
|
||||
|
||||
<p>with start offset</p>
|
||||
<ol start="20">
|
||||
<li>Item 20</li>
|
||||
<li>Item 21</li>
|
||||
<li>Item 22</li>
|
||||
</ol>
|
||||
|
||||
<p>with different order</p>
|
||||
<ol>
|
||||
<li>Item 1</li>
|
||||
<li value="5">Item 5</li>
|
||||
<li value="2">Item 2</li>
|
||||
<li>Item 3</li>
|
||||
</ol>
|
||||
|
||||
<p>list-style: decimal</p>
|
||||
<ol style="list-style: decimal;">
|
||||
<li>First</li>
|
||||
|
|
@ -118,8 +133,8 @@
|
|||
<li>First</li>
|
||||
<li>Second</li>
|
||||
<li>Third</li>
|
||||
<li>Another Entry</li>
|
||||
<li>Another Entry</li>
|
||||
<li value="5">Another Entry</li>
|
||||
<li value="2">Another Entry</li>
|
||||
<li>Another Entry</li>
|
||||
<li>Another Entry</li>
|
||||
<li>Another Entry</li>
|
||||
|
|
@ -132,8 +147,8 @@
|
|||
<li>First</li>
|
||||
<li>Second</li>
|
||||
<li>Third</li>
|
||||
<li>Another Entry</li>
|
||||
<li>Another Entry</li>
|
||||
<li value="5">Another Entry</li>
|
||||
<li value="2">Another Entry</li>
|
||||
<li>Another Entry</li>
|
||||
<li>Another Entry</li>
|
||||
<li>Another Entry</li>
|
||||
|
|
@ -166,8 +181,8 @@
|
|||
<li>First</li>
|
||||
<li>Second</li>
|
||||
<li>Third</li>
|
||||
<li>Another Entry</li>
|
||||
<li>Another Entry</li>
|
||||
<li value="5">Another Entry</li>
|
||||
<li value="2">Another Entry</li>
|
||||
<li>Another Entry</li>
|
||||
<li>Another Entry</li>
|
||||
<li>Another Entry</li>
|
||||
|
|
@ -200,8 +215,8 @@
|
|||
<li>First</li>
|
||||
<li>Second</li>
|
||||
<li>Third</li>
|
||||
<li>Another Entry</li>
|
||||
<li>Another Entry</li>
|
||||
<li value="5">Another Entry</li>
|
||||
<li value="2">Another Entry</li>
|
||||
<li>Another Entry</li>
|
||||
<li>Another Entry</li>
|
||||
<li>Another Entry</li>
|
||||
|
|
@ -223,8 +238,8 @@
|
|||
<li>First</li>
|
||||
<li>Second</li>
|
||||
<li>Third</li>
|
||||
<li>Another Entry</li>
|
||||
<li>Another Entry</li>
|
||||
<li value="5">Another Entry</li>
|
||||
<li value="2">Another Entry</li>
|
||||
<li>Another Entry</li>
|
||||
<li>Another Entry</li>
|
||||
<li>Another Entry</li>
|
||||
|
|
@ -246,8 +261,8 @@
|
|||
<li>First</li>
|
||||
<li>Second</li>
|
||||
<li>Third</li>
|
||||
<li>Another Entry</li>
|
||||
<li>Another Entry</li>
|
||||
<li value="5">Another Entry</li>
|
||||
<li value="2">Another Entry</li>
|
||||
<li>Another Entry</li>
|
||||
<li>Another Entry</li>
|
||||
<li>Another Entry</li>
|
||||
|
|
|
|||
107
Tests/LibWeb/Layout/expected/ordered-list.txt
Normal file
107
Tests/LibWeb/Layout/expected/ordered-list.txt
Normal file
|
|
@ -0,0 +1,107 @@
|
|||
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,16) content-size 784x138.28125 children: not-inline
|
||||
BlockContainer <ol> at (48,16) content-size 744x52.40625 children: not-inline
|
||||
BlockContainer <(anonymous)> at (48,16) content-size 744x0 children: inline
|
||||
TextNode <#text>
|
||||
ListItemBox <li> at (48,16) content-size 744x17.46875 children: inline
|
||||
line 0 width: 58.78125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 7, rect: [48,16 58.78125x17.46875]
|
||||
"Item 20"
|
||||
TextNode <#text>
|
||||
ListItemMarkerBox <(anonymous)> at (13.25,16.234375) content-size 22.75x17 children: not-inline
|
||||
BlockContainer <(anonymous)> at (48,33.46875) content-size 744x0 children: inline
|
||||
TextNode <#text>
|
||||
ListItemBox <li> at (48,33.46875) content-size 744x17.46875 children: inline
|
||||
line 0 width: 55.53125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 7, rect: [48,33.46875 55.53125x17.46875]
|
||||
"Item 21"
|
||||
TextNode <#text>
|
||||
ListItemMarkerBox <(anonymous)> at (16.5,33.703125) content-size 19.5x17 children: not-inline
|
||||
BlockContainer <(anonymous)> at (48,50.9375) content-size 744x0 children: inline
|
||||
TextNode <#text>
|
||||
ListItemBox <li> at (48,50.9375) content-size 744x17.46875 children: inline
|
||||
line 0 width: 58, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 7, rect: [48,50.9375 58x17.46875]
|
||||
"Item 22"
|
||||
TextNode <#text>
|
||||
ListItemMarkerBox <(anonymous)> at (14.03125,51.171875) content-size 21.96875x17 children: not-inline
|
||||
BlockContainer <(anonymous)> at (48,68.40625) content-size 744x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,84.40625) content-size 784x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <ol> at (48,84.40625) content-size 744x69.875 children: not-inline
|
||||
BlockContainer <(anonymous)> at (48,84.40625) content-size 744x0 children: inline
|
||||
TextNode <#text>
|
||||
ListItemBox <li> at (48,84.40625) content-size 744x17.46875 children: inline
|
||||
line 0 width: 46.71875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 6, rect: [48,84.40625 46.71875x17.46875]
|
||||
"Item 1"
|
||||
TextNode <#text>
|
||||
ListItemMarkerBox <(anonymous)> at (25.3125,84.640625) content-size 10.6875x17 children: not-inline
|
||||
BlockContainer <(anonymous)> at (48,101.875) content-size 744x0 children: inline
|
||||
TextNode <#text>
|
||||
ListItemBox <li> at (48,101.875) content-size 744x17.46875 children: inline
|
||||
line 0 width: 48.828125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 6, rect: [48,101.875 48.828125x17.46875]
|
||||
"Item 5"
|
||||
TextNode <#text>
|
||||
ListItemMarkerBox <(anonymous)> at (23.203125,102.109375) content-size 12.796875x17 children: not-inline
|
||||
BlockContainer <(anonymous)> at (48,119.34375) content-size 744x0 children: inline
|
||||
TextNode <#text>
|
||||
ListItemBox <li> at (48,119.34375) content-size 744x17.46875 children: inline
|
||||
line 0 width: 49.109375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 6, rect: [48,119.34375 49.109375x17.46875]
|
||||
"Item 6"
|
||||
TextNode <#text>
|
||||
ListItemMarkerBox <(anonymous)> at (22.921875,119.578125) content-size 13.078125x17 children: not-inline
|
||||
BlockContainer <(anonymous)> at (48,136.8125) content-size 744x0 children: inline
|
||||
TextNode <#text>
|
||||
ListItemBox <li> at (48,136.8125) content-size 744x17.46875 children: inline
|
||||
line 0 width: 49.09375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||
frag 0 from TextNode start: 0, length: 6, rect: [48,136.8125 49.09375x17.46875]
|
||||
"Item 7"
|
||||
TextNode <#text>
|
||||
ListItemMarkerBox <(anonymous)> at (22.9375,137.046875) content-size 13.0625x17 children: not-inline
|
||||
BlockContainer <(anonymous)> at (48,154.28125) content-size 744x0 children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,170.28125) content-size 784x0 children: inline
|
||||
TextNode <#text>
|
||||
|
||||
ViewportPaintable (Viewport<#document>) [0,0 800x600]
|
||||
PaintableWithLines (BlockContainer<HTML>) [0,0 800x600]
|
||||
PaintableWithLines (BlockContainer<BODY>) [8,16 784x138.28125] overflow: [8,16 784x154.28125]
|
||||
PaintableWithLines (BlockContainer<OL>) [8,16 784x52.40625]
|
||||
PaintableWithLines (BlockContainer(anonymous)) [48,16 744x0]
|
||||
PaintableWithLines (ListItemBox<LI>) [48,16 744x17.46875]
|
||||
TextPaintable (TextNode<#text>)
|
||||
MarkerPaintable (ListItemMarkerBox(anonymous)) [13.25,16.234375 22.75x17]
|
||||
PaintableWithLines (BlockContainer(anonymous)) [48,33.46875 744x0]
|
||||
PaintableWithLines (ListItemBox<LI>) [48,33.46875 744x17.46875]
|
||||
TextPaintable (TextNode<#text>)
|
||||
MarkerPaintable (ListItemMarkerBox(anonymous)) [16.5,33.703125 19.5x17]
|
||||
PaintableWithLines (BlockContainer(anonymous)) [48,50.9375 744x0]
|
||||
PaintableWithLines (ListItemBox<LI>) [48,50.9375 744x17.46875]
|
||||
TextPaintable (TextNode<#text>)
|
||||
MarkerPaintable (ListItemMarkerBox(anonymous)) [14.03125,51.171875 21.96875x17]
|
||||
PaintableWithLines (BlockContainer(anonymous)) [48,68.40625 744x0]
|
||||
PaintableWithLines (BlockContainer(anonymous)) [8,84.40625 784x0]
|
||||
PaintableWithLines (BlockContainer<OL>) [8,84.40625 784x69.875]
|
||||
PaintableWithLines (BlockContainer(anonymous)) [48,84.40625 744x0]
|
||||
PaintableWithLines (ListItemBox<LI>) [48,84.40625 744x17.46875]
|
||||
TextPaintable (TextNode<#text>)
|
||||
MarkerPaintable (ListItemMarkerBox(anonymous)) [25.3125,84.640625 10.6875x17]
|
||||
PaintableWithLines (BlockContainer(anonymous)) [48,101.875 744x0]
|
||||
PaintableWithLines (ListItemBox<LI>) [48,101.875 744x17.46875]
|
||||
TextPaintable (TextNode<#text>)
|
||||
MarkerPaintable (ListItemMarkerBox(anonymous)) [23.203125,102.109375 12.796875x17]
|
||||
PaintableWithLines (BlockContainer(anonymous)) [48,119.34375 744x0]
|
||||
PaintableWithLines (ListItemBox<LI>) [48,119.34375 744x17.46875]
|
||||
TextPaintable (TextNode<#text>)
|
||||
MarkerPaintable (ListItemMarkerBox(anonymous)) [22.921875,119.578125 13.078125x17]
|
||||
PaintableWithLines (BlockContainer(anonymous)) [48,136.8125 744x0]
|
||||
PaintableWithLines (ListItemBox<LI>) [48,136.8125 744x17.46875]
|
||||
TextPaintable (TextNode<#text>)
|
||||
MarkerPaintable (ListItemMarkerBox(anonymous)) [22.9375,137.046875 13.0625x17]
|
||||
PaintableWithLines (BlockContainer(anonymous)) [48,154.28125 744x0]
|
||||
PaintableWithLines (BlockContainer(anonymous)) [8,170.28125 784x0]
|
||||
11
Tests/LibWeb/Layout/input/ordered-list.html
Normal file
11
Tests/LibWeb/Layout/input/ordered-list.html
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<ol start="20">
|
||||
<li>Item 20</li>
|
||||
<li>Item 21</li>
|
||||
<li>Item 22</li>
|
||||
</ol>
|
||||
<ol>
|
||||
<li>Item 1</li>
|
||||
<li value="5">Item 5</li>
|
||||
<li>Item 6</li>
|
||||
<li>Item 7</li>
|
||||
</ol>
|
||||
|
|
@ -223,6 +223,7 @@ namespace AttributeNames {
|
|||
__ENUMERATE_HTML_ATTRIBUTE(srclang) \
|
||||
__ENUMERATE_HTML_ATTRIBUTE(srcset) \
|
||||
__ENUMERATE_HTML_ATTRIBUTE(standby) \
|
||||
__ENUMERATE_HTML_ATTRIBUTE(start) \
|
||||
__ENUMERATE_HTML_ATTRIBUTE(step) \
|
||||
__ENUMERATE_HTML_ATTRIBUTE(style) \
|
||||
__ENUMERATE_HTML_ATTRIBUTE(summary) \
|
||||
|
|
|
|||
|
|
@ -20,6 +20,12 @@ public:
|
|||
// https://www.w3.org/TR/html-aria/#el-li
|
||||
virtual Optional<ARIA::Role> default_role() const override { return ARIA::Role::listitem; }
|
||||
|
||||
i32 value() { return get_attribute(AttributeNames::value).value_or("0"_string).to_number<i32>().value_or(0); }
|
||||
void set_value(i32 value)
|
||||
{
|
||||
set_attribute(AttributeNames::value, MUST(String::number(value))).release_value_but_fixme_should_propagate_errors();
|
||||
}
|
||||
|
||||
private:
|
||||
HTMLLIElement(DOM::Document&, DOM::QualifiedName);
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ interface HTMLLIElement : HTMLElement {
|
|||
|
||||
[HTMLConstructor] constructor();
|
||||
|
||||
// FIXME: [CEReactions] attribute long value;
|
||||
[CEReactions] attribute long value;
|
||||
|
||||
// Obsolete
|
||||
[CEReactions, Reflect] attribute DOMString type;
|
||||
|
|
|
|||
|
|
@ -20,6 +20,12 @@ public:
|
|||
// https://www.w3.org/TR/html-aria/#el-ol
|
||||
virtual Optional<ARIA::Role> default_role() const override { return ARIA::Role::list; }
|
||||
|
||||
i32 start() { return get_attribute(AttributeNames::start).value_or("1"_string).to_number<i32>().value_or(1); }
|
||||
void set_start(i32 start)
|
||||
{
|
||||
set_attribute(AttributeNames::start, MUST(String::number(start))).release_value_but_fixme_should_propagate_errors();
|
||||
}
|
||||
|
||||
private:
|
||||
HTMLOListElement(DOM::Document&, DOM::QualifiedName);
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ interface HTMLOListElement : HTMLElement {
|
|||
[HTMLConstructor] constructor();
|
||||
|
||||
[CEReactions, Reflect] attribute boolean reversed;
|
||||
// FIXME: [CEReactions] attribute long start;
|
||||
[CEReactions] attribute long start;
|
||||
[CEReactions, Reflect] attribute DOMString type;
|
||||
|
||||
// Obsolete
|
||||
|
|
|
|||
|
|
@ -20,6 +20,8 @@
|
|||
#include <LibWeb/Dump.h>
|
||||
#include <LibWeb/HTML/HTMLButtonElement.h>
|
||||
#include <LibWeb/HTML/HTMLInputElement.h>
|
||||
#include <LibWeb/HTML/HTMLLIElement.h>
|
||||
#include <LibWeb/HTML/HTMLOListElement.h>
|
||||
#include <LibWeb/HTML/HTMLProgressElement.h>
|
||||
#include <LibWeb/HTML/HTMLSlotElement.h>
|
||||
#include <LibWeb/Layout/ListItemBox.h>
|
||||
|
|
@ -251,6 +253,30 @@ 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;
|
||||
}
|
||||
|
||||
ErrorOr<void> TreeBuilder::create_layout_tree(DOM::Node& dom_node, TreeBuilder::Context& context)
|
||||
{
|
||||
JS::GCPtr<Layout::Node> layout_node;
|
||||
|
|
@ -349,9 +375,8 @@ ErrorOr<void> TreeBuilder::create_layout_tree(DOM::Node& dom_node, TreeBuilder::
|
|||
|
||||
if (is<ListItemBox>(*layout_node)) {
|
||||
auto& element = static_cast<DOM::Element&>(dom_node);
|
||||
int child_index = layout_node->parent()->index_of_child<ListItemBox>(*layout_node).value();
|
||||
auto marker_style = TRY(style_computer.compute_style(element, CSS::Selector::PseudoElement::Marker));
|
||||
auto list_item_marker = document.heap().allocate_without_realm<ListItemMarkerBox>(document, layout_node->computed_values().list_style_type(), layout_node->computed_values().list_style_position(), child_index + 1, *marker_style);
|
||||
auto list_item_marker = document.heap().allocate_without_realm<ListItemMarkerBox>(document, layout_node->computed_values().list_style_type(), layout_node->computed_values().list_style_position(), calculate_list_item_index(dom_node), *marker_style);
|
||||
static_cast<ListItemBox&>(*layout_node).set_marker(list_item_marker);
|
||||
element.set_pseudo_element_node({}, CSS::Selector::PseudoElement::Marker, list_item_marker);
|
||||
layout_node->append_child(*list_item_marker);
|
||||
|
|
|
|||
|
|
@ -25,6 +25,8 @@ private:
|
|||
bool has_svg_root = false;
|
||||
};
|
||||
|
||||
i32 calculate_list_item_index(DOM::Node&);
|
||||
|
||||
ErrorOr<void> create_layout_tree(DOM::Node&, Context&);
|
||||
|
||||
void push_parent(Layout::NodeWithStyle& node) { m_ancestor_stack.append(node); }
|
||||
|
|
|
|||
Loading…
Reference in a new issue