LadybirdBrowser/ladybird
1
1
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2024-09-20 09:49:15 +03:00
Code Issues Packages Projects Releases Wiki Activity

LibWeb: Create a shadow tree for details elements with manual slots

Browse Source 
The spec requires that details elements be assigned a shadow tree with
two slots. The first slot is assigned the first summary child element of
the details element. The second slot is assigned all other children.
This commit is contained in:
Timothy Flynn 2023-09-05 15:24:20 -04:00 committed by Andreas Kling
parent bdf2323b3f
commit b1632c58bf
Notes: sideshowbarker 2024-07-17 00:47:29 +09:00 
Author: https://github.com/trflynn89
Commit: https://github.com/SerenityOS/serenity/commit/b1632c58bf
Pull-request: https://github.com/SerenityOS/serenity/pull/20965
Reviewed-by: https://github.com/Lubrsi
Reviewed-by: https://github.com/shannonbooth
6 changed files with 166 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
Tests/LibWeb/Layout/expected/details-closed.txt Normal file
View File

@ -0,0 +1,23 @@
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 784x17.46875 children: not-inline
BlockContainer <(anonymous)> at (8,8) content-size 784x0 children: inline
InlineNode <details>
ListItemBox <summary> at (37,8) content-size 755x17.46875 children: inline
line 0 width: 114.625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 13, rect: [37,8 114.625x17.46875]
"I'm a summary"
TextNode <#text>
ListItemMarkerBox <(anonymous)> at (8,8.234375) content-size 17x17 children: not-inline
BlockContainer <(anonymous)> at (8,25.46875) content-size 784x0 children: inline
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x600]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x17.46875]
PaintableWithLines (BlockContainer(anonymous)) [8,8 784x0]
InlinePaintable (InlineNode<DETAILS>)
PaintableWithLines (ListItemBox<SUMMARY>) [37,8 755x17.46875]
TextPaintable (TextNode<#text>)
MarkerPaintable (ListItemMarkerBox(anonymous)) [8,8.234375 17x17]
PaintableWithLines (BlockContainer(anonymous)) [8,25.46875 784x0]

35
Tests/LibWeb/Layout/expected/details-open.txt Normal file
View File

@ -0,0 +1,35 @@
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 784x34.9375 children: not-inline
BlockContainer <(anonymous)> at (8,8) content-size 784x0 children: inline
InlineNode <details>
ListItemBox <summary> at (37,8) content-size 755x17.46875 children: inline
line 0 width: 114.625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 13, rect: [37,8 114.625x17.46875]
"I'm a summary"
TextNode <#text>
ListItemMarkerBox <(anonymous)> at (8,8.234375) content-size 17x17 children: not-inline
BlockContainer <slot> at (8,25.46875) content-size 784x17.46875 children: inline
line 0 width: 82.3125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 10, rect: [8,25.46875 82.3125x17.46875]
"I'm a node"
TextNode <#text>
TextNode <#text>
InlineNode <span>
TextNode <#text>
TextNode <#text>
BlockContainer <(anonymous)> at (8,42.9375) content-size 784x0 children: inline
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x600]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x34.9375]
PaintableWithLines (BlockContainer(anonymous)) [8,8 784x0]
InlinePaintable (InlineNode<DETAILS>)
PaintableWithLines (ListItemBox<SUMMARY>) [37,8 755x17.46875]
TextPaintable (TextNode<#text>)
MarkerPaintable (ListItemMarkerBox(anonymous)) [8,8.234375 17x17]
PaintableWithLines (BlockContainer<SLOT>) [8,25.46875 784x17.46875]
InlinePaintable (InlineNode<SPAN>)
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer(anonymous)) [8,42.9375 784x0]

4
Tests/LibWeb/Layout/input/details-closed.html Normal file
View File

@ -0,0 +1,4 @@
<details>
<summary>I'm a summary</summary>
<span>I'm a node</span>
</details>

4
Tests/LibWeb/Layout/input/details-open.html Normal file
View File

@ -0,0 +1,4 @@
<details open>
<summary>I'm a summary</summary>
<span>I'm a node</span>
</details>

89
Userland/Libraries/LibWeb/HTML/HTMLDetailsElement.cpp
View File

@ -1,15 +1,21 @@
/*
* Copyright (c) 2020, the SerenityOS developers.
* Copyright (c) 2023, Tim Flynn <trflynn89@serenityos.org>
*
* SPDX-License-Identifier: BSD-2-Clause
*/
#include <LibWeb/Bindings/Intrinsics.h>
#include <LibWeb/DOM/ElementFactory.h>
#include <LibWeb/DOM/Event.h>
#include <LibWeb/DOM/ShadowRoot.h>
#include <LibWeb/DOM/Text.h>
#include <LibWeb/HTML/EventLoop/TaskQueue.h>
#include <LibWeb/HTML/HTMLDetailsElement.h>
#include <LibWeb/HTML/HTMLSlotElement.h>
#include <LibWeb/HTML/HTMLSummaryElement.h>
#include <LibWeb/HTML/ToggleEvent.h>
#include <LibWeb/Namespace.h>
namespace Web::HTML {
@ -20,10 +26,19 @@ HTMLDetailsElement::HTMLDetailsElement(DOM::Document& document, DOM::QualifiedNa
HTMLDetailsElement::~HTMLDetailsElement() = default;
void HTMLDetailsElement::visit_edges(Cell::Visitor& visitor)
{
Base::visit_edges(visitor);
visitor.visit(m_summary_slot);
visitor.visit(m_descendants_slot);
}
void HTMLDetailsElement::initialize(JS::Realm& realm)
{
Base::initialize(realm);
set_prototype(&Bindings::ensure_web_prototype<Bindings::HTMLDetailsElementPrototype>(realm, "HTMLDetailsElement"));
create_shadow_tree(realm).release_value_but_fixme_should_propagate_errors();
}
void HTMLDetailsElement::attribute_changed(DeprecatedFlyString const& name, DeprecatedString const& value)
@ -40,9 +55,17 @@ void HTMLDetailsElement::attribute_changed(DeprecatedFlyString const& name, Depr
else {
queue_a_details_toggle_event_task("open"_string, "closed"_string);
}
update_shadow_tree_style();
}
}
void HTMLDetailsElement::children_changed()
{
Base::children_changed();
update_shadow_tree_slots();
}
// https://html.spec.whatwg.org/multipage/interactive-elements.html#queue-a-details-toggle-event-task
void HTMLDetailsElement::queue_a_details_toggle_event_task(String old_state, String new_state)
{
@ -81,4 +104,70 @@ void HTMLDetailsElement::queue_a_details_toggle_event_task(String old_state, Str
};
}
// https://html.spec.whatwg.org/#the-details-and-summary-elements
WebIDL::ExceptionOr<void> HTMLDetailsElement::create_shadow_tree(JS::Realm& realm)
{
// The element is also expected to have an internal shadow tree with two slots.
auto shadow_root = heap().allocate<DOM::ShadowRoot>(realm, document(), *this, Bindings::ShadowRootMode::Closed);
shadow_root->set_slot_assignment(Bindings::SlotAssignmentMode::Manual);
// The first slot is expected to take the details element's first summary element child, if any.
auto summary_slot = TRY(DOM::create_element(document(), HTML::TagNames::slot, Namespace::HTML));
MUST(shadow_root->append_child(summary_slot));
// The second slot is expected to take the details element's remaining descendants, if any.
auto descendants_slot = TRY(DOM::create_element(document(), HTML::TagNames::slot, Namespace::HTML));
MUST(shadow_root->append_child(descendants_slot));
m_summary_slot = static_cast<HTML::HTMLSlotElement&>(*summary_slot);
m_descendants_slot = static_cast<HTML::HTMLSlotElement&>(*descendants_slot);
set_shadow_root(shadow_root);
return {};
}
void HTMLDetailsElement::update_shadow_tree_slots()
{
Vector<HTMLSlotElement::SlottableHandle> summary_assignment;
Vector<HTMLSlotElement::SlottableHandle> descendants_assignment;
auto* summary = first_child_of_type<HTMLSummaryElement>();
if (summary != nullptr)
summary_assignment.append(JS::make_handle(static_cast<DOM::Element&>(*summary)));
for_each_in_subtree([&](auto& child) {
if (&child == summary)
return IterationDecision::Continue;
if (!child.is_slottable())
return IterationDecision::Continue;
child.as_slottable().visit([&](auto& node) {
descendants_assignment.append(JS::make_handle(node));
});
return IterationDecision::Continue;
});
m_summary_slot->assign(move(summary_assignment));
m_descendants_slot->assign(move(descendants_assignment));
update_shadow_tree_style();
}
// https://html.spec.whatwg.org/#the-details-and-summary-elements:the-details-element-6
void HTMLDetailsElement::update_shadow_tree_style()
{
if (has_attribute(HTML::AttributeNames::open)) {
MUST(m_descendants_slot->set_attribute(HTML::AttributeNames::style, R"~~~(
display: block;
)~~~"));
} else {
// FIXME: Should be `display: block` but we do not support `content-visibility: hidden`.
MUST(m_descendants_slot->set_attribute(HTML::AttributeNames::style, R"~~~(
display: none;
content-visibility: hidden;
)~~~"));
}
}
}

11
Userland/Libraries/LibWeb/HTML/HTMLDetailsElement.h
View File

@ -1,5 +1,6 @@
/*
* Copyright (c) 2020, the SerenityOS developers.
* Copyright (c) 2023, Tim Flynn <trflynn89@serenityos.org>
*
* SPDX-License-Identifier: BSD-2-Clause
*/
@ -10,6 +11,7 @@
#include <LibWeb/ARIA/Roles.h>
#include <LibWeb/HTML/HTMLElement.h>
#include <LibWeb/HTML/ToggleTaskTracker.h>
#include <LibWeb/WebIDL/ExceptionOr.h>
namespace Web::HTML {
@ -26,13 +28,22 @@ private:
HTMLDetailsElement(DOM::Document&, DOM::QualifiedName);
virtual void initialize(JS::Realm&) override;
virtual void visit_edges(Cell::Visitor&) override;
virtual void children_changed() override;
virtual void attribute_changed(DeprecatedFlyString const& name, DeprecatedString const& value) override;
void queue_a_details_toggle_event_task(String old_state, String new_state);
WebIDL::ExceptionOr<void> create_shadow_tree(JS::Realm&);
void update_shadow_tree_slots();
void update_shadow_tree_style();
// https://html.spec.whatwg.org/multipage/interactive-elements.html#details-toggle-task-tracker
Optional<ToggleTaskTracker> m_details_toggle_task_tracker;
JS::GCPtr<HTML::HTMLSlotElement> m_summary_slot;
JS::GCPtr<HTML::HTMLSlotElement> m_descendants_slot;
};
}