We use cookies to ensure you get the best experience on our website
Inicio Explorar Ayuda
Registro Iniciar sesión
0ct0pu5
/
ladybird
1
0
Fork 0
Archivos Incidencias 0 Pull Requests 0 Wiki
Explorar el Código

LibWeb: Invalidate layout if pseudo-element style changes

Pseudo-elements' style is only computed while building the layout tree.
This meant that previously, they would not have their style recomputed
in some cases. (Such as when :hover is applied to an ancestor.)

Now, when recomputing an element's style, we also return a full
invalidation if one or more pseudo-elements would exist either before or
after style recomputation.

This heuristic produces some false positives, but no false negatives.
Because pseudo-elements' style is computed during layout building, any
computation done here is then thrown away. So this approach minimises
the amount of wasted style computation. Plus it's simple, until we have
data on what approach would be faster.

This fixes the Acid2 nose becoming blue when the .nose div is hovered.
Sam Atkins hace 1 año
padre
f23f0721bd
commit
7daf5cdaff
Se han modificado 4 ficheros con 68 adiciones y 1 borrados
Dividir vista Mostrar estadísticas de diff
  1. 3 0
      Tests/LibWeb/Text/expected/css/update-pseudo-elements-on-hover.txt
  2. 33 0
      Tests/LibWeb/Text/input/css/update-pseudo-elements-on-hover.html
  3. 1 0
      Userland/Libraries/LibWeb/CSS/StyleInvalidation.h
  4. 31 1
      Userland/Libraries/LibWeb/DOM/Element.cpp

+ 3 - 0
Tests/LibWeb/Text/expected/css/update-pseudo-elements-on-hover.txt
Ver fichero 

@@ -0,0 +1,3 @@
 
+Hi  Not hovering: 16
 
+Hovering: 78
 
+Not hovering: 16

+ 33 - 0
Tests/LibWeb/Text/input/css/update-pseudo-elements-on-hover.html
Ver fichero 

@@ -0,0 +1,33 @@
 
+<!doctype html>
 
+<style>
 
+    .outer {
 
+        height: 100px;
 
+    }
 
+    .inner {
 
+        display: inline-block;
 
+    }
 
+    .inner::before {
 
+        content: "Hi";
 
+        background-color: red;
 
+    }
 
+    .outer:hover .inner::before {
 
+        content: "Long text";
 
+        background-color: lime;
 
+    }
 
+</style>
 
+<script src="../include.js"></script>
 
+<div class="outer"><div class="inner"></div></div>
 
+<script>
 
+    test(() => {
 
+        const inner = document.querySelector('.inner');
 
+        println('Not hovering: ' + inner.clientWidth);
 
+
 
+        // Move mouse over .outer
 
+        internals.movePointerTo(80, 80);
 
+        println('Hovering: ' + inner.clientWidth);
 
+
 
+        // Move mouse away again
 
+        internals.movePointerTo(200, 200);
 
+        println('Not hovering: ' + inner.clientWidth);
 
+    });
 
+</script>

+ 1 - 0
Userland/Libraries/LibWeb/CSS/StyleInvalidation.h
Ver fichero 

@@ -25,6 +25,7 @@ struct RequiredInvalidationAfterStyleChange {
 
     }
 
 
     [[nodiscard]] bool is_none() const { return !repaint && !rebuild_stacking_context_tree && !relayout && !rebuild_layout_tree; }
 
+    [[nodiscard]] bool is_full() const { return repaint && rebuild_stacking_context_tree && relayout && rebuild_layout_tree; }
 
     static RequiredInvalidationAfterStyleChange full() { return { true, true, true, true }; }
 
 };

+ 31 - 1
Userland/Libraries/LibWeb/DOM/Element.cpp
Ver fichero 

@@ -534,7 +534,8 @@ CSS::RequiredInvalidationAfterStyleChange Element::recompute_style()
 
     set_needs_style_update(false);
 
     VERIFY(parent());
 
 
-    auto new_computed_css_values = document().style_computer().compute_style(*this);
 
+    auto& style_computer = document().style_computer();
 
+    auto new_computed_css_values = style_computer.compute_style(*this);
 
 
     // Tables must not inherit -libweb-* values for text-align.
 
     // FIXME: Find the spec for this.
 
@@ -550,6 +551,35 @@ CSS::RequiredInvalidationAfterStyleChange Element::recompute_style()
 
     else
 
         invalidation = CSS::RequiredInvalidationAfterStyleChange::full();
 
 
+    // Any document change that can cause this element's style to change, could also affect its pseudo-elements.
 
+    // So determine if any pseudo-elements currently exist, or should now exist, and if so, invalidate everything.
 
+    // (If we're already invalidating everything, we don't need to do further checks for this.)
 
+    if (!invalidation.is_full()) {
 
+        bool pseudo_elements_dirty = false;
 
+
 
+        if (m_pseudo_element_data) {
 
+            for (auto& pseudo_element : *m_pseudo_element_data) {
 
+                if (pseudo_element.layout_node) {
 
+                    pseudo_elements_dirty = true;
 
+                    break;
 
+                }
 
+            }
 
+        }
 
+
 
+        if (!pseudo_elements_dirty) {
 
+            for (auto i = 0; i < to_underlying(CSS::Selector::PseudoElement::Type::KnownPseudoElementCount); i++) {
 
+                auto style = style_computer.compute_pseudo_element_style_if_needed(*this, static_cast<CSS::Selector::PseudoElement::Type>(i));
 
+                if (style) {
 
+                    pseudo_elements_dirty = true;
 
+                    break;
 
+                }
 
+            }
 
+        }
 
+
 
+        if (pseudo_elements_dirty)
 
+            invalidation = CSS::RequiredInvalidationAfterStyleChange::full();
 
+    }
 
+
 
     if (invalidation.is_none())
 
         return invalidation;

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