LibWeb: Add basic "top layer" support

Implements the "top layer" concept from "CSS Positioned Layout Module Level 4" specification. - The tree builder is modified to ensure that layout nodes created by top layer elements are children of the viewport. - Implements missing steps in `showModal()` to add an element top top layer. - Implements missing steps in `close()` to remove an element from top layer. Further steps could be: - Add support for `::backdrop` pseudo-element. - Implement the "inert" concept from HTML spec to block hit-testing when element from top layer is displayed.
Author: https://github.com/kalenikaliaksandr Commit: https://github.com/SerenityOS/serenity/commit/ca363f0024 Pull-request: https://github.com/SerenityOS/serenity/pull/23753
2024-03-28 16:53:27 +01:00 · 2024-03-28 16:53:27 +01:00 · ca363f0024 · 2024-07-17 08:35:21 +09:00
commit ca363f0024
parent 41d5fa2b07
10 changed files with 198 additions and 5 deletions
--- a/Tests/LibWeb/Layout/expected/top-layer.txt
+++ b/Tests/LibWeb/Layout/expected/top-layer.txt
@ -0,0 +1,16 @@
+Viewport <#document> at (0,0) content-size 800x600 children: not-inline
+  BlockContainer <html> at (0,0) content-size 800x16 [BFC] children: not-inline
+    BlockContainer <body> at (8,8) content-size 784x0 children: inline
+      TextNode <#text>
+  BlockContainer <dialog#dialog> at (196.671875,35) content-size 406.65625x49 positioned [BFC] children: not-inline
+    BlockContainer <p> at (196.671875,51) content-size 406.65625x17 children: inline
+      frag 0 from TextNode start: 0, length: 50, rect: [196.671875,51 406.65625x17] baseline: 13.296875
+          "Dialog's layout node should be a child of viewport"
+      TextNode <#text>
+
+ViewportPaintable (Viewport<#document>) [0,0 800x600]
+  PaintableWithLines (BlockContainer<HTML>) [0,0 800x16]
+    PaintableWithLines (BlockContainer<BODY>) [8,8 784x0]
+  PaintableWithLines (BlockContainer<DIALOG>#dialog) [177.671875,16 444.65625x87]
+    PaintableWithLines (BlockContainer<P>) [196.671875,51 406.65625x17]
+      TextPaintable (TextNode<#text>)
--- a/Tests/LibWeb/Layout/input/top-layer.html
+++ b/Tests/LibWeb/Layout/input/top-layer.html
@ -0,0 +1,4 @@
+<!DOCTYPE html><dialog id="dialog"><p>Dialog's layout node should be a child of viewport</p></dialog>
+<script>
+    dialog.showModal();
+</script>
--- a/Userland/Libraries/LibWeb/DOM/Document.cpp
+++ b/Userland/Libraries/LibWeb/DOM/Document.cpp
@ -482,6 +482,12 @@ void Document::visit_edges(Cell::Visitor& visitor)

    for (auto& shadow_root : m_shadow_roots)
        visitor.visit(shadow_root);
+
+    for (auto& element : m_top_layer_elements)
+        visitor.visit(element);
+
+    for (auto& element : m_top_layer_pending_removals)
+        visitor.visit(element);
 }

 // https://w3c.github.io/selection-api/#dom-document-getselection
@ -4664,4 +4670,70 @@ void Document::for_each_shadow_root(Function<void(DOM::ShadowRoot&)>&& callback)
        callback(shadow_root);
 }

+// https://drafts.csswg.org/css-position-4/#add-an-element-to-the-top-layer
+void Document::add_an_element_to_the_top_layer(JS::NonnullGCPtr<Element> element)
+{
+    // 1. Let doc be el’s node document.
+
+    // 2. If el is already contained in doc’s top layer:
+    if (m_top_layer_elements.contains(element)) {
+        // Assert: el is also in doc’s pending top layer removals. (Otherwise, this is a spec error.)
+        VERIFY(m_top_layer_pending_removals.contains(element));
+
+        // Remove el from both doc’s top layer and pending top layer removals.
+        m_top_layer_elements.remove(element);
+        m_top_layer_pending_removals.remove(element);
+    }
+
+    // 3. Append el to doc’s top layer.
+    m_top_layer_elements.set(element);
+
+    element->set_in_top_layer(true);
+
+    // FIXME: 4. At the UA !important cascade origin, add a rule targeting el containing an overlay: auto declaration.
+}
+
+// https://drafts.csswg.org/css-position-4/#request-an-element-to-be-removed-from-the-top-layer
+void Document::request_an_element_to_be_remove_from_the_top_layer(JS::NonnullGCPtr<Element> element)
+{
+    // 1. Let doc be el’s node document.
+
+    // 2. If el is not contained doc’s top layer, or el is already contained in doc’s pending top layer removals, return.
+    if (!m_top_layer_elements.contains(element) || m_top_layer_pending_removals.contains(element))
+        return;
+
+    // FIXME: 3. Remove the UA !important overlay: auto rule targeting el.
+
+    // 4. Append el to doc’s pending top layer removals.
+    m_top_layer_pending_removals.set(element);
+}
+
+// https://drafts.csswg.org/css-position-4/#remove-an-element-from-the-top-layer-immediately
+void Document::remove_an_element_from_the_top_layer_immediately(JS::NonnullGCPtr<Element> element)
+{
+    // 1. Let doc be el’s node document.
+
+    // 2. Remove el from doc’s top layer and pending top layer removals.
+    m_top_layer_elements.remove(element);
+
+    element->set_in_top_layer(false);
+
+    // FIXME: 3. Remove the UA !important overlay: auto rule targeting el, if it exists.
+}
+
+// https://drafts.csswg.org/css-position-4/#process-top-layer-removals
+void Document::process_top_layer_removals()
+{
+    // 1. For each element el in doc’s pending top layer removals: if el’s computed value of overlay is none, or el is
+    //    not rendered, remove el from doc’s top layer and pending top layer removals.
+    for (auto& element : m_top_layer_pending_removals) {
+        // FIXME: Check overlay property
+        if (!element->paintable()) {
+            m_top_layer_elements.remove(element);
+            m_top_layer_pending_removals.remove(element);
+            element->set_in_top_layer(false);
+        }
+    }
+}
+
 }
--- a/Userland/Libraries/LibWeb/DOM/Document.h
+++ b/Userland/Libraries/LibWeb/DOM/Document.h
@ -615,6 +615,13 @@ public:
    void unregister_shadow_root(Badge<DOM::ShadowRoot>, DOM::ShadowRoot&);
    void for_each_shadow_root(Function<void(DOM::ShadowRoot&)>&& callback);

+    void add_an_element_to_the_top_layer(JS::NonnullGCPtr<Element>);
+    void request_an_element_to_be_remove_from_the_top_layer(JS::NonnullGCPtr<Element>);
+    void remove_an_element_from_the_top_layer_immediately(JS::NonnullGCPtr<Element>);
+    void process_top_layer_removals();
+
+    OrderedHashTable<JS::NonnullGCPtr<Element>> const& top_layer_elements() const { return m_top_layer_elements; }
+
 protected:
    virtual void initialize(JS::Realm&) override;
    virtual void visit_edges(Cell::Visitor&) override;
@ -854,6 +861,13 @@ private:
    Vector<JS::NonnullGCPtr<DOM::ShadowRoot>> m_shadow_roots;

    u64 m_dom_tree_version { 0 };
+
+    // https://drafts.csswg.org/css-position-4/#document-top-layer
+    // Documents have a top layer, an ordered set containing elements from the document.
+    // Elements in the top layer do not lay out normally based on their position in the document;
+    // instead they generate boxes as if they were siblings of the root element.
+    OrderedHashTable<JS::NonnullGCPtr<Element>> m_top_layer_elements;
+    OrderedHashTable<JS::NonnullGCPtr<Element>> m_top_layer_pending_removals;
 };

 template<>
--- a/Userland/Libraries/LibWeb/DOM/Element.h
+++ b/Userland/Libraries/LibWeb/DOM/Element.h
@ -361,6 +361,9 @@ public:
        return nullptr;
    }

+    void set_in_top_layer(bool in_top_layer) { m_in_top_layer = in_top_layer; }
+    bool in_top_layer() const { return m_in_top_layer; }
+
 protected:
    Element(Document&, DOM::QualifiedName);
    virtual void initialize(JS::Realm&) override;
@ -430,6 +433,8 @@ private:
    OwnPtr<Vector<IntersectionObserver::IntersectionObserverRegistration>> m_registered_intersection_observers;

    Array<CSSPixelPoint, 3> m_scroll_offset;
+
+    bool m_in_top_layer { false };
 };

 template<>
--- a/Userland/Libraries/LibWeb/HTML/EventLoop/EventLoop.cpp
+++ b/Userland/Libraries/LibWeb/HTML/EventLoop/EventLoop.cpp
@ -352,6 +352,11 @@ void EventLoop::process()
    // If there are eligible tasks in the queue, schedule a new round of processing. :^)
    if (m_task_queue.has_runnable_tasks() || (!m_microtask_queue.is_empty() && !m_performing_a_microtask_checkpoint))
        schedule();
+
+    // For each doc of docs, process top layer removals given doc.
+    for_each_fully_active_document_in_docs([&](DOM::Document& document) {
+        document.process_top_layer_removals();
+    });
 }

 // https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-global-task
--- a/Userland/Libraries/LibWeb/HTML/HTMLDialogElement.cpp
+++ b/Userland/Libraries/LibWeb/HTML/HTMLDialogElement.cpp
@ -5,6 +5,7 @@
 */

 #include <LibWeb/Bindings/Intrinsics.h>
+#include <LibWeb/DOM/Document.h>
 #include <LibWeb/DOM/Event.h>
 #include <LibWeb/HTML/Focus.h>
 #include <LibWeb/HTML/HTMLDialogElement.h>
@ -26,6 +27,20 @@ void HTMLDialogElement::initialize(JS::Realm& realm)
    WEB_SET_PROTOTYPE_FOR_INTERFACE(HTMLDialogElement);
 }

+void HTMLDialogElement::removed_from(Node* old_parent)
+{
+    HTMLElement::removed_from(old_parent);
+
+    // FIXME: 1. If removedNode's close watcher is not null, then:
+    //           1. Destroy removedNode's close watcher.
+    //           2. Set removedNode's close watcher to null.
+
+    // 2. If removedNode's node document's top layer contains removedNode, then remove an element from the top layer
+    //    immediately given removedNode.
+    if (document().top_layer_elements().contains(*this))
+        document().remove_an_element_from_the_top_layer_immediately(*this);
+}
+
 // https://html.spec.whatwg.org/multipage/interactive-elements.html#dom-dialog-show
 WebIDL::ExceptionOr<void> HTMLDialogElement::show()
 {
@ -49,9 +64,50 @@ WebIDL::ExceptionOr<void> HTMLDialogElement::show()
 }

 // https://html.spec.whatwg.org/multipage/interactive-elements.html#dom-dialog-showmodal
-void HTMLDialogElement::show_modal()
+WebIDL::ExceptionOr<void> HTMLDialogElement::show_modal()
 {
-    dbgln("(STUBBED) HTMLDialogElement::show_modal()");
+    // 1. If this has an open attribute and the is modal flag of this is true, then return.
+    if (has_attribute(AttributeNames::open) && m_is_modal)
+        return {};
+
+    // 2. If this has an open attribute, then throw an "InvalidStateError" DOMException.
+    if (has_attribute(AttributeNames::open))
+        return WebIDL::InvalidStateError::create(realm(), "Dialog already open"_fly_string);
+
+    // 3. If this is not connected, then throw an "InvalidStateError" DOMException.
+    if (!is_connected())
+        return WebIDL::InvalidStateError::create(realm(), "Dialog not connected"_fly_string);
+
+    // FIXME: 4. If this is in the popover showing state, then throw an "InvalidStateError" DOMException.
+
+    // 5. Add an open attribute to this, whose value is the empty string.
+    TRY(set_attribute(AttributeNames::open, {}));
+
+    // 6. Set the is modal flag of this to true.
+    m_is_modal = true;
+
+    // FIXME: 7. Let this's node document be blocked by the modal dialog this.
+
+    // 8. If this's node document's top layer does not already contain this, then add an element to the top layer given this.
+    if (!document().top_layer_elements().contains(*this))
+        document().add_an_element_to_the_top_layer(*this);
+
+    // FIXME: 9. Set this's close watcher to the result of establishing a close watcher given this's relevant global object, with:
+    //            - cancelAction being to return the result of firing an event named cancel at this, with the cancelable
+    //              attribute initialized to true.
+    //            - closeAction being to close the dialog given this and null.
+
+    // FIXME: 10. Set this's previously focused element to the focused element.
+
+    // FIXME: 11. Let hideUntil be the result of running topmost popover ancestor given this, null, and false.
+
+    // FIXME: 12. If hideUntil is null, then set hideUntil to this's node document.
+
+    // FIXME: 13. Run hide all popovers until given hideUntil, false, and true.
+
+    // FIXME: 14. Run the dialog focusing steps given this.
+
+    return {};
 }

 // https://html.spec.whatwg.org/multipage/interactive-elements.html#dom-dialog-close
@ -84,9 +140,13 @@ void HTMLDialogElement::close_the_dialog(Optional<String> result)
    // 2. Remove subject's open attribute.
    remove_attribute(AttributeNames::open);

-    // FIXME: 3. If the is modal flag of subject is true, then request an element to be removed from the top layer given subject.
+    // 3. If the is modal flag of subject is true, then request an element to be removed from the top layer given subject.
+    if (m_is_modal)
+        document().request_an_element_to_be_remove_from_the_top_layer(*this);
    // FIXME: 4. Let wasModal be the value of subject's is modal flag.
-    // FIXME: 5. Set the is modal flag of subject to false.
+
+    // 5. Set the is modal flag of subject to false.
+    m_is_modal = false;

    // 6. If result is not null, then set the returnValue attribute to result.
    if (result.has_value())
--- a/Userland/Libraries/LibWeb/HTML/HTMLDialogElement.h
+++ b/Userland/Libraries/LibWeb/HTML/HTMLDialogElement.h
@ -18,11 +18,13 @@ class HTMLDialogElement final : public HTMLElement {
 public:
    virtual ~HTMLDialogElement() override;

+    virtual void removed_from(Node*) override;
+
    String return_value() const;
    void set_return_value(String);

    WebIDL::ExceptionOr<void> show();
-    void show_modal();
+    WebIDL::ExceptionOr<void> show_modal();
    void close(Optional<String> return_value);

    // https://www.w3.org/TR/html-aria/#el-dialog
@ -38,6 +40,7 @@ private:
    void run_dialog_focusing_steps();

    String m_return_value;
+    bool m_is_modal { false };
 };

 }
--- a/Userland/Libraries/LibWeb/Layout/TreeBuilder.cpp
+++ b/Userland/Libraries/LibWeb/Layout/TreeBuilder.cpp
@ -290,6 +290,11 @@ i32 TreeBuilder::calculate_list_item_index(DOM::Node& dom_node)

 void TreeBuilder::create_layout_tree(DOM::Node& dom_node, TreeBuilder::Context& context)
 {
+    if (dom_node.is_element()) {
+        auto& element = static_cast<DOM::Element&>(dom_node);
+        if (element.in_top_layer() && !context.layout_top_layer)
+            return;
+    }
    if (dom_node.is_element())
        dom_node.document().style_computer().push_ancestor(static_cast<DOM::Element const&>(dom_node));

@ -382,6 +387,14 @@ void TreeBuilder::create_layout_tree(DOM::Node& dom_node, TreeBuilder::Context&
            for (auto* node = verify_cast<DOM::ParentNode>(dom_node).first_child(); node; node = node->next_sibling())
                create_layout_tree(*node, context);
        }
+
+        if (dom_node.is_document()) {
+            // Elements in the top layer do not lay out normally based on their position in the document; instead they
+            // generate boxes as if they were siblings of the root element.
+            TemporaryChange<bool> layout_mask(context.layout_top_layer, true);
+            for (auto const& top_layer_element : document.top_layer_elements())
+                create_layout_tree(top_layer_element, context);
+        }
        pop_parent();
    }

--- a/Userland/Libraries/LibWeb/Layout/TreeBuilder.h
+++ b/Userland/Libraries/LibWeb/Layout/TreeBuilder.h
@ -24,6 +24,7 @@ private:
    struct Context {
        bool has_svg_root = false;
        bool layout_svg_mask = false;
+        bool layout_top_layer = false;
    };

    i32 calculate_list_item_index(DOM::Node&);