LibWeb: Implement some viewport proximity features

Author: https://github.com/Psychpsyo
Commit: 331b1b22f5
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/2603
Reviewed-by: https://github.com/AtkinsSJ ✅

Libraries/LibWeb/DOM/Element.cpp

@@ -67,6 +67,7 @@
 #include <LibWeb/Page/Page.h>
 #include <LibWeb/Painting/PaintableBox.h>
 #include <LibWeb/Painting/ViewportPaintable.h>
+#include <LibWeb/Selection/Selection.h>
 #include <LibWeb/WebIDL/AbstractOperations.h>
 #include <LibWeb/WebIDL/DOMException.h>
 #include <LibWeb/WebIDL/ExceptionOr.h>
@@ -2599,6 +2600,73 @@ bool Element::check_visibility(Optional<CheckVisibilityOptions> options)
     return true;
 }
 
+// https://drafts.csswg.org/css-contain/#proximity-to-the-viewport
+void Element::determine_proximity_to_the_viewport()
+{
+    // An element that has content-visibility: auto is in one of three states when it comes to its proximity to the viewport:
+
+    // - The element is close to the viewport: In this state, the element is considered "on-screen": its paint
+    //   containment box's overflow clip edge intersects with the viewport, or a user-agent defined margin around the
+    //   viewport.
+    auto viewport_rect = document().viewport_rect();
+    // NOTE: This margin is meant to allow the user agent to begin preparing for an element to be in the
+    // viewport soon. A margin of 50% is suggested as a reasonable default.
+    viewport_rect.inflate(viewport_rect.width(), viewport_rect.height());
+    // FIXME: We don't have paint containment or the overflow clip edge yet, so this is just using the absolute rect for now.
+    if (paintable_box()->absolute_rect().intersects(viewport_rect))
+        m_proximity_to_the_viewport = ProximityToTheViewport::CloseToTheViewport;
+
+    // FIXME: If a filter (see [FILTER-EFFECTS-1]) with non local effects includes the element as part of its input, the user
+    //        agent should also treat the element as relevant to the user when the filter’s output can affect the rendering
+    //        within the viewport (or within the user-agent defined margin around the viewport), even if the element itself is
+    //        still off-screen.
+
+    // - The element is far away from the viewport: In this state, the element’s proximity to the viewport has been
+    //   computed and is not close to the viewport.
+    m_proximity_to_the_viewport = ProximityToTheViewport::FarAwayFromTheViewport;
+
+    // - The element’s proximity to the viewport is not determined: In this state, the computation to determine the
+    //   element’s proximity to the viewport has not been done since the last time the element was connected.
+    // NOTE: This function is what does the computation to determine the element’s proximity to the viewport, so this is not the case.
+}
+
+// https://drafts.csswg.org/css-contain/#relevant-to-the-user
+bool Element::is_relevant_to_the_user()
+{
+    // An element is relevant to the user if any of the following conditions are true:
+
+    // The element is close to the viewport.
+    if (m_proximity_to_the_viewport == ProximityToTheViewport::CloseToTheViewport)
+        return true;
+
+    // Either the element or its contents are focused, as described in the focus section of the HTML spec.
+    auto* focused_element = document().focused_element();
+    if (focused_element && is_inclusive_ancestor_of(*focused_element))
+        return true;
+
+    // Either the element or its contents are selected, where selection is described in the selection API.
+    if (document().get_selection()->contains_node(*this, true))
+        return true;
+
+    // Either the element or its contents are placed in the top layer.
+    bool is_in_top_layer = false;
+    for_each_in_inclusive_subtree_of_type<Element>([&](auto& element) {
+        if (element.in_top_layer()) {
+            is_in_top_layer = true;
+            return TraversalDecision::Break;
+        }
+
+        return TraversalDecision::Continue;
+    });
+    if (is_in_top_layer)
+        return true;
+
+    // FIXME: The element has a flat tree descendant that is captured in a view transition.
+
+    // NOTE: none of the above conditions are true, so the element is not relevant to the user.
+    return false;
+}
+
 bool Element::id_reference_exists(String const& id_reference) const
 {
     return document().get_element_by_id(id_reference);

Libraries/LibWeb/DOM/Element.h

@@ -85,6 +85,17 @@ enum class CustomElementState {
     Custom,
 };
 
+// https://drafts.csswg.org/css-contain/#proximity-to-the-viewport
+// An element that has content-visibility: auto is in one of three states when it comes to its proximity to the viewport:
+enum class ProximityToTheViewport {
+    // - The element is close to the viewport:
+    CloseToTheViewport,
+    // - The element is far away from the viewport:
+    FarAwayFromTheViewport,
+    // - The element’s proximity to the viewport is not determined:
+    NotDetermined,
+};
+
 class Element
     : public ParentNode
     , public ChildNode<Element>
@@ -377,6 +388,10 @@ public:
     void resolve_counters(CSS::ComputedProperties&);
     void inherit_counters();
 
+    ProximityToTheViewport proximity_to_the_viewport() const { return m_proximity_to_the_viewport; }
+    void determine_proximity_to_the_viewport();
+    bool is_relevant_to_the_user();
+
 protected:
     Element(Document&, DOM::QualifiedName);
     virtual void initialize(JS::Realm&) override;
@@ -469,6 +484,9 @@ private:
     OwnPtr<CSS::CountersSet> m_counters_set;
 
     GC::Ptr<DOM::Element> m_aria_active_descendant_element;
+
+    // https://drafts.csswg.org/css-contain/#proximity-to-the-viewport
+    ProximityToTheViewport m_proximity_to_the_viewport { ProximityToTheViewport::NotDetermined };
 };
 
 template<>

Libraries/LibWeb/HTML/EventLoop/EventLoop.cpp

@@ -11,6 +11,7 @@
 #include <LibWeb/CSS/FontFaceSet.h>
 #include <LibWeb/CSS/StyleComputer.h>
 #include <LibWeb/DOM/Document.h>
+#include <LibWeb/DOM/Element.h>
 #include <LibWeb/HTML/BrowsingContext.h>
 #include <LibWeb/HTML/EventLoop/EventLoop.h>
 #include <LibWeb/HTML/Scripting/Environments.h>
@@ -20,6 +21,7 @@
 #include <LibWeb/HighResolutionTime/Performance.h>
 #include <LibWeb/HighResolutionTime/TimeOrigin.h>
 #include <LibWeb/Page/Page.h>
+#include <LibWeb/Painting/PaintableBox.h>
 #include <LibWeb/Platform/EventLoopPlugin.h>
 #include <LibWeb/Platform/Timer.h>
 
@@ -249,6 +251,7 @@ void EventLoop::queue_task_to_update_the_rendering()
     }
 }
 
+// https://html.spec.whatwg.org/#update-the-rendering
 void EventLoop::update_the_rendering()
 {
     VERIFY(!m_is_running_rendering_task);
@@ -335,9 +338,36 @@ void EventLoop::update_the_rendering()
             // NOTE: Recalculation of styles is handled by update_layout()
             document->update_layout();
 
-            // FIXME: 2. Let hadInitialVisibleContentVisibilityDetermination be false.
-            // FIXME: 3. For each element element with 'auto' used value of 'content-visibility':
-            // FIXME: 4. If hadInitialVisibleContentVisibilityDetermination is true, then continue.
+            // 2. Let hadInitialVisibleContentVisibilityDetermination be false.
+            bool had_initial_visible_content_visibility_determination = false;
+
+            // 3. For each element element with 'auto' used value of 'content-visibility':
+            auto* document_element = document->document_element();
+            if (document_element) {
+                document_element->for_each_in_inclusive_subtree_of_type<Web::DOM::Element>([&](auto& element) {
+                    auto const& paintable_box = element.paintable_box();
+                    if (!paintable_box || paintable_box->computed_values().content_visibility() != CSS::ContentVisibility::Auto) {
+                        return TraversalDecision::Continue;
+                    }
+
+                    // 1. Let checkForInitialDetermination be true if element's proximity to the viewport is not determined and it is not relevant to the user. Otherwise, let checkForInitialDetermination be false.
+                    bool check_for_initial_determination = element.proximity_to_the_viewport() == Web::DOM::ProximityToTheViewport::NotDetermined && !element.is_relevant_to_the_user();
+
+                    // 2. Determine proximity to the viewport for element.
+                    element.determine_proximity_to_the_viewport();
+
+                    // 3. If checkForInitialDetermination is true and element is now relevant to the user, then set hadInitialVisibleContentVisibilityDetermination to true.
+                    if (check_for_initial_determination && element.is_relevant_to_the_user()) {
+                        had_initial_visible_content_visibility_determination = true;
+                    }
+
+                    return TraversalDecision::Continue;
+                });
+            }
+
+            // 4. If hadInitialVisibleContentVisibilityDetermination is true, then continue.
+            if (had_initial_visible_content_visibility_determination)
+                continue;
 
             // 5. Gather active resize observations at depth resizeObserverDepth for doc.
             document->gather_active_observations_at_depth(resize_observer_depth);