LibWeb: Add missing handler in affected_by_invalidation_property()

...for :placeholder-shown pseudo-class.
LadybirdBrowser · Jan 25, 2025 · a9603b7 · a9603b7
1 parent 30dc919
commit a9603b7
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 0 deletions.
diff --git a/Libraries/LibWeb/DOM/Element.cpp b/Libraries/LibWeb/DOM/Element.cpp
@@ -1169,6 +1169,14 @@ bool Element::affected_by_invalidation_property(CSS::InvalidationSet::Property c
             // FIXME: This could be narrowed down to return true only if element is actually checked.
             return is<HTML::HTMLInputElement>(*this) || is<HTML::HTMLOptionElement>(*this);
         }
+        case CSS::PseudoClass::PlaceholderShown: {
+            if (is<HTML::HTMLInputElement>(*this) && has_attribute(HTML::AttributeNames::placeholder)) {
+                auto const& input_element = static_cast<HTML::HTMLInputElement const&>(*this);
+                return input_element.placeholder_element() && input_element.placeholder_value().has_value();
+            }
+            // - FIXME: textarea elements that have a placeholder attribute whose value is currently being presented to the user.
+            return false;
+        }
         default:
             VERIFY_NOT_REACHED();
         }

diff --git a/...xt/expected/invalidate-style-of-element-with-placeholder-shown-used-on-nested-element.txt b/...xt/expected/invalidate-style-of-element-with-placeholder-shown-used-on-nested-element.txt
@@ -0,0 +1 @@
+PASS (didn't crash)
diff --git a/...Text/input/invalidate-style-of-element-with-placeholder-shown-used-on-nested-element.html b/...Text/input/invalidate-style-of-element-with-placeholder-shown-used-on-nested-element.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+
+<head>
+    <script src="include.js"></script>
+    <style>
+        #b input:placeholder-shown {
+            border: 2px dashed red;
+            background-color: #ffecec;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="a"><input type="text" placeholder=""></input></div>
+    <script>
+        test(() => {
+            document.documentElement.offsetHeight; // force style recalculation
+            const a = document.getElementById('a');
+            a.id = 'b';
+            println("PASS (didn't crash)");
+        });
+    </script>
+</body>
+
+</html>