We use cookies to ensure you get the best experience on our website
صفحهٔ اصلی گشت‌و‌گذار راهنما
ثبت نام ورود
0ct0pu5
/
ladybird
1
0
انشعاب 0
پرونده‌ها مشکلات 0 درخواست واکشی 0 ویکی
فهرست منبع

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.
Aliaksandr Kalenik 1 سال پیش
والد
41d5fa2b07
کامیت
ca363f0024
10فایلهای تغییر یافته به همراه198 افزوده شده و 5 حذف شده
نمای یکپارچه نمایش آمار تفاوت ها
  1. 16 0
      Tests/LibWeb/Layout/expected/top-layer.txt
  2. 4 0
      Tests/LibWeb/Layout/input/top-layer.html
  3. 72 0
      Userland/Libraries/LibWeb/DOM/Document.cpp
  4. 14 0
      Userland/Libraries/LibWeb/DOM/Document.h
  5. 5 0
      Userland/Libraries/LibWeb/DOM/Element.h
  6. 5 0
      Userland/Libraries/LibWeb/HTML/EventLoop/EventLoop.cpp
  7. 64 4
      Userland/Libraries/LibWeb/HTML/HTMLDialogElement.cpp
  8. 4 1
      Userland/Libraries/LibWeb/HTML/HTMLDialogElement.h
  9. 13 0
      Userland/Libraries/LibWeb/Layout/TreeBuilder.cpp
  10. 1 0
      Userland/Libraries/LibWeb/Layout/TreeBuilder.h

+ 16 - 0
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>)

+ 4 - 0
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>

+ 72 - 0
Userland/Libraries/LibWeb/DOM/Document.cpp
مشاهده فایل 

@@ -482,6 +482,12 @@ void Document::visit_edges(Cell::Visitor& visitor)
 
 
 
     for (auto& shadow_root : m_shadow_roots)
 
     for (auto& shadow_root : m_shadow_roots)
 
         visitor.visit(shadow_root);
 
         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
 
 // 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);
 
         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);
 
+        }
 
+    }
 
+}
 
+
 
 }
 
 }

+ 14 - 0
Userland/Libraries/LibWeb/DOM/Document.h
مشاهده فایل 

@@ -615,6 +615,13 @@ public:
 
     void unregister_shadow_root(Badge<DOM::ShadowRoot>, DOM::ShadowRoot&);
 
     void unregister_shadow_root(Badge<DOM::ShadowRoot>, DOM::ShadowRoot&);
 
     void for_each_shadow_root(Function<void(DOM::ShadowRoot&)>&& callback);
 
     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:
 
 protected:
 
     virtual void initialize(JS::Realm&) override;
 
     virtual void initialize(JS::Realm&) override;
 
     virtual void visit_edges(Cell::Visitor&) override;
 
     virtual void visit_edges(Cell::Visitor&) override;
 
@@ -854,6 +861,13 @@ private:
 
     Vector<JS::NonnullGCPtr<DOM::ShadowRoot>> m_shadow_roots;
 
     Vector<JS::NonnullGCPtr<DOM::ShadowRoot>> m_shadow_roots;
 
 
 
     u64 m_dom_tree_version { 0 };
 
     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<>
 
 template<>

+ 5 - 0
Userland/Libraries/LibWeb/DOM/Element.h
مشاهده فایل 

@@ -361,6 +361,9 @@ public:
 
         return nullptr;
 
         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:
 
 protected:
 
     Element(Document&, DOM::QualifiedName);
 
     Element(Document&, DOM::QualifiedName);
 
     virtual void initialize(JS::Realm&) override;
 
     virtual void initialize(JS::Realm&) override;
 
@@ -430,6 +433,8 @@ private:
 
     OwnPtr<Vector<IntersectionObserver::IntersectionObserverRegistration>> m_registered_intersection_observers;
 
     OwnPtr<Vector<IntersectionObserver::IntersectionObserverRegistration>> m_registered_intersection_observers;
 
 
 
     Array<CSSPixelPoint, 3> m_scroll_offset;
 
     Array<CSSPixelPoint, 3> m_scroll_offset;
 
+
 
+    bool m_in_top_layer { false };
 
 };
 
 };
 
 
 
 template<>
 
 template<>

+ 5 - 0
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 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))
 
     if (m_task_queue.has_runnable_tasks() || (!m_microtask_queue.is_empty() && !m_performing_a_microtask_checkpoint))
 
         schedule();
 
         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
 
 // https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-global-task

+ 64 - 4
Userland/Libraries/LibWeb/HTML/HTMLDialogElement.cpp
مشاهده فایل 

@@ -5,6 +5,7 @@
 
  */
 
  */
 
 
 
 #include <LibWeb/Bindings/Intrinsics.h>
 
 #include <LibWeb/Bindings/Intrinsics.h>
 
+#include <LibWeb/DOM/Document.h>
 
 #include <LibWeb/DOM/Event.h>
 
 #include <LibWeb/DOM/Event.h>
 
 #include <LibWeb/HTML/Focus.h>
 
 #include <LibWeb/HTML/Focus.h>
 
 #include <LibWeb/HTML/HTMLDialogElement.h>
 
 #include <LibWeb/HTML/HTMLDialogElement.h>
 
@@ -26,6 +27,20 @@ void HTMLDialogElement::initialize(JS::Realm& realm)
 
     WEB_SET_PROTOTYPE_FOR_INTERFACE(HTMLDialogElement);
 
     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
 
 // https://html.spec.whatwg.org/multipage/interactive-elements.html#dom-dialog-show
 
 WebIDL::ExceptionOr<void> HTMLDialogElement::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
 
 // 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
 
 // 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.
 
     // 2. Remove subject's open attribute.
 
     remove_attribute(AttributeNames::open);
 
     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: 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.
 
     // 6. If result is not null, then set the returnValue attribute to result.
 
     if (result.has_value())
 
     if (result.has_value())

+ 4 - 1
Userland/Libraries/LibWeb/HTML/HTMLDialogElement.h
مشاهده فایل 

@@ -18,11 +18,13 @@ class HTMLDialogElement final : public HTMLElement {
 
 public:
 
 public:
 
     virtual ~HTMLDialogElement() override;
 
     virtual ~HTMLDialogElement() override;
 
 
 
+    virtual void removed_from(Node*) override;
 
+
 
     String return_value() const;
 
     String return_value() const;
 
     void set_return_value(String);
 
     void set_return_value(String);
 
 
 
     WebIDL::ExceptionOr<void> show();
 
     WebIDL::ExceptionOr<void> show();
 
-    void show_modal();
 
+    WebIDL::ExceptionOr<void> show_modal();
 
     void close(Optional<String> return_value);
 
     void close(Optional<String> return_value);
 
 
 
     // https://www.w3.org/TR/html-aria/#el-dialog
 
     // https://www.w3.org/TR/html-aria/#el-dialog
 
@@ -38,6 +40,7 @@ private:
 
     void run_dialog_focusing_steps();
 
     void run_dialog_focusing_steps();
 
 
 
     String m_return_value;
 
     String m_return_value;
 
+    bool m_is_modal { false };
 
 };
 
 };
 
 
 
 }
 
 }

+ 13 - 0
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)
 
 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())
 
     if (dom_node.is_element())
 
         dom_node.document().style_computer().push_ancestor(static_cast<DOM::Element const&>(dom_node));
 
         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())
 
             for (auto* node = verify_cast<DOM::ParentNode>(dom_node).first_child(); node; node = node->next_sibling())
 
                 create_layout_tree(*node, context);
 
                 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();
 
         pop_parent();
 
     }
 
     }

+ 1 - 0
Userland/Libraries/LibWeb/Layout/TreeBuilder.h
مشاهده فایل 

@@ -24,6 +24,7 @@ private:
 
     struct Context {
 
     struct Context {
 
         bool has_svg_root = false;
 
         bool has_svg_root = false;
 
         bool layout_svg_mask = false;
 
         bool layout_svg_mask = false;
 
+        bool layout_top_layer = false;
 
     };
 
     };
 
 
 
     i32 calculate_list_item_index(DOM::Node&);
 
     i32 calculate_list_item_index(DOM::Node&);

Contact | Legal | Takedown | Status
Self-hosted public services - About
NibbleSpot by 0ct0pu5