diff --git a/Libraries/LibWeb/CSS/Selector.cpp b/Libraries/LibWeb/CSS/Selector.cpp index c0f9c5b2b8d..35049c5609f 100644 --- a/Libraries/LibWeb/CSS/Selector.cpp +++ b/Libraries/LibWeb/CSS/Selector.cpp @@ -520,6 +520,8 @@ StringView Selector::PseudoElement::name(Selector::PseudoElement::Type pseudo_el return "backdrop"sv; case Selector::PseudoElement::Type::FileSelectorButton: return "file-selector-button"sv; + case Selector::PseudoElement::Type::DetailsContent: + return "details-content"sv; case Selector::PseudoElement::Type::KnownPseudoElementCount: break; case Selector::PseudoElement::Type::UnknownWebKit: @@ -560,6 +562,8 @@ Optional Selector::PseudoElement::from_string(FlyString return Selector::PseudoElement { Selector::PseudoElement::Type::Backdrop }; } else if (name.equals_ignoring_ascii_case("file-selector-button"sv)) { return Selector::PseudoElement { Selector::PseudoElement::Type::FileSelectorButton }; + } else if (name.equals_ignoring_ascii_case("details-content"sv)) { + return Selector::PseudoElement { Selector::PseudoElement::Type::DetailsContent }; } else if (name.equals_ignoring_ascii_case("-webkit-slider-runnable-track"sv)) { return Selector::PseudoElement { Selector::PseudoElement::Type::SliderRunnableTrack }; } else if (name.equals_ignoring_ascii_case("-webkit-slider-thumb"sv)) { diff --git a/Libraries/LibWeb/CSS/Selector.h b/Libraries/LibWeb/CSS/Selector.h index 38b59ac078a..f5cfe69568d 100644 --- a/Libraries/LibWeb/CSS/Selector.h +++ b/Libraries/LibWeb/CSS/Selector.h @@ -42,6 +42,7 @@ public: SliderThumb, Backdrop, FileSelectorButton, + DetailsContent, // Keep this last. KnownPseudoElementCount, diff --git a/Libraries/LibWeb/HTML/HTMLDetailsElement.cpp b/Libraries/LibWeb/HTML/HTMLDetailsElement.cpp index 1405494b93a..cbd5377a517 100644 --- a/Libraries/LibWeb/HTML/HTMLDetailsElement.cpp +++ b/Libraries/LibWeb/HTML/HTMLDetailsElement.cpp @@ -124,18 +124,33 @@ WebIDL::ExceptionOr HTMLDetailsElement::create_shadow_tree_if_needed() auto& realm = this->realm(); - // The element is also expected to have an internal shadow tree with two slots. + // The details element is expected to have an internal shadow tree with three child elements: auto shadow_root = realm.create(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. + // The first child element is a slot that 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. + // The second child element is a slot that 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)); + descendants_slot->set_use_pseudo_element(CSS::Selector::PseudoElement::Type::DetailsContent); MUST(shadow_root->append_child(descendants_slot)); + // The third child element is either a link or style element with the following styles for the default summary: + auto style = TRY(DOM::create_element(document(), HTML::TagNames::style, Namespace::HTML)); + style->set_text_content(R"~~~( + :host summary { + display: list-item; + counter-increment: list-item 0; + list-style: disclosure-closed inside; + } + :host([open]) summary { + list-style-type: disclosure-open; + } + )~~~"_string); + MUST(shadow_root->append_child(style)); + m_summary_slot = static_cast(*summary_slot); m_descendants_slot = static_cast(*descendants_slot); set_shadow_root(shadow_root); diff --git a/Tests/LibWeb/Ref/expected/wpt-import/html/rendering/the-details-element/details-pseudo-elements-001-ref.html b/Tests/LibWeb/Ref/expected/wpt-import/html/rendering/the-details-element/details-pseudo-elements-001-ref.html new file mode 100644 index 00000000000..0c77c0e14fc --- /dev/null +++ b/Tests/LibWeb/Ref/expected/wpt-import/html/rendering/the-details-element/details-pseudo-elements-001-ref.html @@ -0,0 +1,12 @@ + +Details pseudo-elements + + +
+ The summary +
The details!
+
diff --git a/Tests/LibWeb/Ref/expected/wpt-import/html/rendering/the-details-element/details-pseudo-elements-003-ref.html b/Tests/LibWeb/Ref/expected/wpt-import/html/rendering/the-details-element/details-pseudo-elements-003-ref.html new file mode 100644 index 00000000000..e6c55cc141a --- /dev/null +++ b/Tests/LibWeb/Ref/expected/wpt-import/html/rendering/the-details-element/details-pseudo-elements-003-ref.html @@ -0,0 +1,14 @@ + +::details-content pseudo element is display: block + + +
+
summary
+
contents
+
diff --git a/Tests/LibWeb/Ref/input/wpt-import/html/rendering/the-details-element/details-pseudo-elements-001.html b/Tests/LibWeb/Ref/input/wpt-import/html/rendering/the-details-element/details-pseudo-elements-001.html new file mode 100644 index 00000000000..f96c45fb6fb --- /dev/null +++ b/Tests/LibWeb/Ref/input/wpt-import/html/rendering/the-details-element/details-pseudo-elements-001.html @@ -0,0 +1,20 @@ + +Details pseudo-elements + + + + + + + +
+ The summary +
The details!
+
diff --git a/Tests/LibWeb/Ref/input/wpt-import/html/rendering/the-details-element/details-pseudo-elements-003.html b/Tests/LibWeb/Ref/input/wpt-import/html/rendering/the-details-element/details-pseudo-elements-003.html new file mode 100644 index 00000000000..9eee34e921e --- /dev/null +++ b/Tests/LibWeb/Ref/input/wpt-import/html/rendering/the-details-element/details-pseudo-elements-003.html @@ -0,0 +1,20 @@ + +::details-content pseudo element is display: block + + + + + + + +
+ summary + contents +