From d17f666a8c5b84fa5c55ed1445ab72b31d06e672 Mon Sep 17 00:00:00 2001
From: Andreas Kling <andreas@ladybird.org>
Date: Mon, 20 Oct 2025 11:21:55 +0200
Subject: [PATCH] LibWeb: Better CSS inheritance for nodes that represent a
 pseudo-element

When we compute style for elements inside a UA-internal shadow tree that
represent a pseudo-element (e.g ::placeholder), we actually run the
StyleComputer machinery for (host element :: pseudo-element).

While that lets us match the correct selectors, it was incorrectly
applying CSS inheritance, since we'd also then inherit from whatever was
above the host element in the tree.

This patch fixes the issue by introducing an inheritance override in
AbstractElement and then using that to force inheritance from whatever
is actually directly above in the DOM for these elements instead of
jumping all the way up past the host.

This fixes an issue where `text-align: center` on input type=text
elements would render the main text centered but placeholder text was
still left-aligned.
---
 Libraries/LibWeb/CSS/StyleComputer.cpp        | 15 ++++++++--
 Libraries/LibWeb/DOM/AbstractElement.cpp      |  4 +++
 Libraries/LibWeb/DOM/AbstractElement.h        |  4 +++
 .../expected/empty-editable-shows-cursor.txt  | 15 ++++------
 .../input-placeholder-with-line-height.txt    | 15 ++++------
 .../input-placeholder-with-text-align.txt     | 27 +++++++++++++++++
 .../Layout/expected/input-placeholder.txt     | 30 ++++++++-----------
 .../input-placeholder-with-text-align.html    |  8 +++++
 8 files changed, 79 insertions(+), 39 deletions(-)
 create mode 100644 Tests/LibWeb/Layout/expected/input-placeholder-with-text-align.txt
 create mode 100644 Tests/LibWeb/Layout/input/input-placeholder-with-text-align.html

diff --git a/Libraries/LibWeb/CSS/StyleComputer.cpp b/Libraries/LibWeb/CSS/StyleComputer.cpp
index 459991f48e5..2f2c9de87cf 100644
--- a/Libraries/LibWeb/CSS/StyleComputer.cpp
+++ b/Libraries/LibWeb/CSS/StyleComputer.cpp
@@ -2461,11 +2461,20 @@ GC::Ptr<ComputedProperties> StyleComputer::compute_style_impl(DOM::AbstractEleme
 {
     build_rule_cache_if_needed();
 
-    // Special path for elements that use pseudo element as style selector
+    // Special path for elements that represent a pseudo-element in some element's internal shadow tree.
     if (abstract_element.element().use_pseudo_element().has_value()) {
         auto& element = abstract_element.element();
-        auto& parent_element = as<HTML::HTMLElement>(*element.root().parent_or_shadow_host());
-        auto style = compute_style({ parent_element, element.use_pseudo_element() });
+        auto& host_element = *element.root().parent_or_shadow_host_element();
+
+        // We have to decide where to inherit from. If the pseudo-element has a parent element,
+        // we inherit from that. Otherwise, we inherit from the host element in the light DOM.
+        DOM::AbstractElement abstract_element_for_pseudo_element { host_element, element.use_pseudo_element() };
+        if (auto parent_element = element.parent_element())
+            abstract_element_for_pseudo_element.set_inheritance_override(*parent_element);
+        else
+            abstract_element_for_pseudo_element.set_inheritance_override(host_element);
+
+        auto style = compute_style(abstract_element_for_pseudo_element);
 
         // Merge back inline styles
         if (auto inline_style = element.inline_style()) {
diff --git a/Libraries/LibWeb/DOM/AbstractElement.cpp b/Libraries/LibWeb/DOM/AbstractElement.cpp
index 1cd2c5ef449..25365eed142 100644
--- a/Libraries/LibWeb/DOM/AbstractElement.cpp
+++ b/Libraries/LibWeb/DOM/AbstractElement.cpp
@@ -19,6 +19,7 @@ AbstractElement::AbstractElement(GC::Ref<Element> element, Optional<CSS::PseudoE
 void AbstractElement::visit(GC::Cell::Visitor& visitor) const
 {
     visitor.visit(m_element);
+    visitor.visit(m_inheritance_override);
 }
 
 Document& AbstractElement::document() const
@@ -78,6 +79,9 @@ GC::Ptr<Element const> AbstractElement::parent_element() const
 
 Optional<AbstractElement> AbstractElement::element_to_inherit_style_from() const
 {
+    if (m_inheritance_override)
+        return AbstractElement { *m_inheritance_override };
+
     GC::Ptr<Element const> element = m_element->element_to_inherit_style_from(m_pseudo_element);
 
     if (!element)
diff --git a/Libraries/LibWeb/DOM/AbstractElement.h b/Libraries/LibWeb/DOM/AbstractElement.h
index 88379e75a9e..691b4639ed3 100644
--- a/Libraries/LibWeb/DOM/AbstractElement.h
+++ b/Libraries/LibWeb/DOM/AbstractElement.h
@@ -35,6 +35,8 @@ public:
     Optional<AbstractElement> previous_sibling_in_tree_order() { return walk_layout_tree(WalkMethod::PreviousSibling); }
     bool is_before(AbstractElement const&) const;
 
+    void set_inheritance_override(GC::Ref<Element> element) { m_inheritance_override = element; }
+
     GC::Ptr<CSS::ComputedProperties const> computed_properties() const;
 
     void set_custom_properties(OrderedHashMap<FlyString, CSS::StyleProperty>&& custom_properties);
@@ -63,6 +65,8 @@ private:
 
     GC::Ref<Element> m_element;
     Optional<CSS::PseudoElement> m_pseudo_element;
+
+    GC::Ptr<Element> m_inheritance_override;
 };
 
 }
diff --git a/Tests/LibWeb/Layout/expected/empty-editable-shows-cursor.txt b/Tests/LibWeb/Layout/expected/empty-editable-shows-cursor.txt
index 042f2ce1d02..2a3ebec554b 100644
--- a/Tests/LibWeb/Layout/expected/empty-editable-shows-cursor.txt
+++ b/Tests/LibWeb/Layout/expected/empty-editable-shows-cursor.txt
@@ -23,12 +23,10 @@ Viewport <#document> at [0,0] [0+0+0 800 0+0+0] [0+0+0 600 0+0+0] children: not-
             BlockContainer <div> at [11,10] flex-item [0+0+0 0 0+0+0] [0+0+0 18 0+0+0] [BFC] children: inline
               frag 0 from TextNode start: 0, length: 0, rect: [11,10 0x18] baseline: 13.796875
               TextNode <#text> (not painted)
-            BlockContainer <(anonymous)> at [11,10] flex-item [0+0+0 36.84375 0+0+0] [0+0+0 18 0+0+0] [BFC] children: inline
-              frag 0 from BlockContainer start: 0, length: 0, rect: [11,10 36.84375x18] baseline: 13.796875
-              BlockContainer <div> at [11,10] inline-block [0+0+0 36.84375 0+0+0] [0+0+0 18 0+0+0] [BFC] children: inline
-                frag 0 from TextNode start: 0, length: 5, rect: [11,10 36.84375x18] baseline: 13.796875
-                    "hello"
-                TextNode <#text> (not painted)
+            BlockContainer <div> at [11,10] flex-item [0+0+0 196 0+0+0] [0+0+0 18 0+0+0] [BFC] children: inline
+              frag 0 from TextNode start: 0, length: 5, rect: [11,10 36.84375x18] baseline: 13.796875
+                  "hello"
+              TextNode <#text> (not painted)
         TextNode <#text> (not painted)
         BlockContainer <textarea> at [221,11] inline-block [0+1+2 160 2+1+0] [0+1+2 30 2+1+0] [BFC] children: not-inline
           BlockContainer <div> at [221,11] [0+0+0 160 0+0+0] [0+0+0 15 0+0+0] children: inline
@@ -64,9 +62,8 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600]
           PaintableBox (Box<DIV>) [9,9 200x20]
             PaintableWithLines (BlockContainer<DIV>) [11,10 0x18]
               TextPaintable (TextNode<#text>)
-            PaintableWithLines (BlockContainer(anonymous)) [11,10 36.84375x18]
-              PaintableWithLines (BlockContainer<DIV>) [11,10 36.84375x18]
-                TextPaintable (TextNode<#text>)
+            PaintableWithLines (BlockContainer<DIV>) [11,10 196x18]
+              TextPaintable (TextNode<#text>)
         TextPaintable (TextNode<#text>)
         PaintableWithLines (BlockContainer<TEXTAREA>) [218,8 166x36]
           PaintableWithLines (BlockContainer<DIV>) [221,11 160x15]
diff --git a/Tests/LibWeb/Layout/expected/input-placeholder-with-line-height.txt b/Tests/LibWeb/Layout/expected/input-placeholder-with-line-height.txt
index 42546ac3745..2d902cbcd1f 100644
--- a/Tests/LibWeb/Layout/expected/input-placeholder-with-line-height.txt
+++ b/Tests/LibWeb/Layout/expected/input-placeholder-with-line-height.txt
@@ -9,12 +9,10 @@ Viewport <#document> at [0,0] [0+0+0 800 0+0+0] [0+0+0 600 0+0+0] children: not-
           BlockContainer <div> at [11,10] flex-item [0+0+0 0 0+0+0] [0+0+0 80 0+0+0] [BFC] children: inline
             frag 0 from TextNode start: 0, length: 0, rect: [11,10 0x80] baseline: 44.796875
             TextNode <#text> (not painted)
-          BlockContainer <(anonymous)> at [11,10] flex-item [0+0+0 89.90625 0+0+0] [0+0+0 80 0+0+0] [BFC] children: inline
-            frag 0 from BlockContainer start: 0, length: 0, rect: [11,10 89.90625x80] baseline: 44.796875
-            BlockContainer <div> at [11,10] inline-block [0+0+0 89.90625 0+0+0] [0+0+0 80 0+0+0] [BFC] children: inline
-              frag 0 from TextNode start: 0, length: 11, rect: [11,10 89.90625x80] baseline: 44.796875
-                  "placeholder"
-              TextNode <#text> (not painted)
+          BlockContainer <div> at [11,10] flex-item [0+0+0 196 0+0+0] [0+0+0 80 0+0+0] [BFC] children: inline
+            frag 0 from TextNode start: 0, length: 11, rect: [11,10 89.90625x80] baseline: 44.796875
+                "placeholder"
+            TextNode <#text> (not painted)
       TextNode <#text> (not painted)
 
 ViewportPaintable (Viewport<#document>) [0,0 800x600]
@@ -24,9 +22,8 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600]
         PaintableBox (Box<DIV>) [9,9 200x82]
           PaintableWithLines (BlockContainer<DIV>) [11,10 0x80]
             TextPaintable (TextNode<#text>)
-          PaintableWithLines (BlockContainer(anonymous)) [11,10 89.90625x80]
-            PaintableWithLines (BlockContainer<DIV>) [11,10 89.90625x80]
-              TextPaintable (TextNode<#text>)
+          PaintableWithLines (BlockContainer<DIV>) [11,10 196x80]
+            TextPaintable (TextNode<#text>)
       TextPaintable (TextNode<#text>)
 
 SC for Viewport<#document> [0,0 800x600] [children: 1] (z-index: auto)
diff --git a/Tests/LibWeb/Layout/expected/input-placeholder-with-text-align.txt b/Tests/LibWeb/Layout/expected/input-placeholder-with-text-align.txt
new file mode 100644
index 00000000000..7edccdddbd1
--- /dev/null
+++ b/Tests/LibWeb/Layout/expected/input-placeholder-with-text-align.txt
@@ -0,0 +1,27 @@
+Viewport <#document> at [0,0] [0+0+0 800 0+0+0] [0+0+0 600 0+0+0] children: not-inline
+  BlockContainer <html> at [0,0] [0+0+0 800 0+0+0] [0+0+0 118 0+0+0] [BFC] children: not-inline
+    BlockContainer <body> at [8,8] [8+0+0 784 0+0+8] [8+0+0 102 0+0+8] children: inline
+      frag 0 from BlockContainer start: 0, length: 0, rect: [9,9 400x100] baseline: 55.796875
+      BlockContainer <input> at [9,9] inline-block [0+1+0 400 0+1+0] [0+1+0 100 0+1+0] [BFC] children: not-inline
+        Box <div> at [11,10] flex-container(row) [0+0+2 396 2+0+0] [0+0+1 100 1+0+0] [FFC] children: not-inline
+          BlockContainer <div> at [11,51] flex-item [0+0+0 0 0+0+0] [0+0+0 18 0+0+0] [BFC] children: inline
+            frag 0 from TextNode start: 0, length: 0, rect: [11,51 0x18] baseline: 13.796875
+            TextNode <#text> (not painted)
+          BlockContainer <div> at [11,51] flex-item [0+0+0 396 0+0+0] [0+0+0 18 0+0+0] [BFC] children: inline
+            frag 0 from TextNode start: 0, length: 3, rect: [195.140625,51 27.703125x18] baseline: 13.796875
+                "abc"
+            TextNode <#text> (not painted)
+      TextNode <#text> (not painted)
+
+ViewportPaintable (Viewport<#document>) [0,0 800x600]
+  PaintableWithLines (BlockContainer<HTML>) [0,0 800x118]
+    PaintableWithLines (BlockContainer<BODY>) [8,8 784x102]
+      PaintableWithLines (BlockContainer<INPUT>) [8,8 402x102] overflow: [9,9 400x102]
+        PaintableBox (Box<DIV>) [9,9 400x102]
+          PaintableWithLines (BlockContainer<DIV>) [11,51 0x18]
+            TextPaintable (TextNode<#text>)
+          PaintableWithLines (BlockContainer<DIV>) [11,51 396x18]
+            TextPaintable (TextNode<#text>)
+
+SC for Viewport<#document> [0,0 800x600] [children: 1] (z-index: auto)
+ SC for BlockContainer<HTML> [0,0 800x118] [children: 0] (z-index: auto)
diff --git a/Tests/LibWeb/Layout/expected/input-placeholder.txt b/Tests/LibWeb/Layout/expected/input-placeholder.txt
index 100aaf438bf..bfbf53ab6c8 100644
--- a/Tests/LibWeb/Layout/expected/input-placeholder.txt
+++ b/Tests/LibWeb/Layout/expected/input-placeholder.txt
@@ -21,12 +21,10 @@ Viewport <#document> at [0,0] [0+0+0 800 0+0+0] [0+0+0 600 0+0+0] children: not-
           BlockContainer <div> at [223,10] flex-item [0+0+0 0 0+0+0] [0+0+0 23 0+0+0] [BFC] children: inline
             frag 0 from TextNode start: 0, length: 0, rect: [223,10 0x23] baseline: 17.5
             TextNode <#text> (not painted)
-          BlockContainer <(anonymous)> at [223,10] flex-item [0+0+0 344.546875 0+0+0] [0+0+0 23 0+0+0] [BFC] children: inline
-            frag 0 from BlockContainer start: 0, length: 0, rect: [223,10 344.546875x23] baseline: 17.5
-            BlockContainer <div> at [223,10] inline-block [0+0+0 344.546875 0+0+0] [0+0+0 23 0+0+0] [BFC] children: inline
-              frag 0 from TextNode start: 0, length: 34, rect: [223,10 344.546875x23] baseline: 17.5
-                  "This placeholder should be visible"
-              TextNode <#text> (not painted)
+          BlockContainer <div> at [223,10] flex-item [0+0+0 196 0+0+0] [0+0+0 23 0+0+0] [BFC] children: inline
+            frag 0 from TextNode start: 0, length: 34, rect: [223,10 344.546875x23] baseline: 17.5
+                "This placeholder should be visible"
+            TextNode <#text> (not painted)
       TextNode <#text> (not painted)
       BlockContainer <input> at [433,9] inline-block [0+1+0 200 0+1+0] [0+1+0 25 0+1+0] [BFC] children: not-inline
         Box <div> at [435,10] flex-container(row) [0+0+2 196 2+0+0] [0+0+1 23 1+0+0] [FFC] children: not-inline
@@ -40,12 +38,10 @@ Viewport <#document> at [0,0] [0+0+0 800 0+0+0] [0+0+0 600 0+0+0] children: not-
           BlockContainer <div> at [11,37] flex-item [0+0+0 0 0+0+0] [0+0+0 23 0+0+0] [BFC] children: inline
             frag 0 from TextNode start: 0, length: 0, rect: [11,37 0x23] baseline: 17.5
             TextNode <#text> (not painted)
-          BlockContainer <(anonymous)> at [11,37] flex-item [0+0+0 396.171875 0+0+0] [0+0+0 23 0+0+0] [BFC] children: inline
-            frag 0 from BlockContainer start: 0, length: 0, rect: [11,37 396.171875x23] baseline: 17.5
-            BlockContainer <div> at [11,37] inline-block [0+0+0 396.171875 0+0+0] [0+0+0 23 0+0+0] [BFC] children: inline
-              frag 0 from TextNode start: 0, length: 39, rect: [11,37 396.171875x23] baseline: 17.5
-                  "This placeholder should also be visible"
-              TextNode <#text> (not painted)
+          BlockContainer <div> at [11,37] flex-item [0+0+0 196 0+0+0] [0+0+0 23 0+0+0] [BFC] children: inline
+            frag 0 from TextNode start: 0, length: 39, rect: [11,37 396.171875x23] baseline: 17.5
+                "This placeholder should also be visible"
+            TextNode <#text> (not painted)
       TextNode <#text> (not painted)
       TextNode <#text> (not painted)
 
@@ -61,9 +57,8 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600]
         PaintableBox (Box<DIV>) [221,9 200x25] overflow: [221,9 346.546875x26]
           PaintableWithLines (BlockContainer<DIV>) [223,10 0x23]
             TextPaintable (TextNode<#text>)
-          PaintableWithLines (BlockContainer(anonymous)) [223,10 344.546875x23]
-            PaintableWithLines (BlockContainer<DIV>) [223,10 344.546875x23]
-              TextPaintable (TextNode<#text>)
+          PaintableWithLines (BlockContainer<DIV>) [223,10 196x23] overflow: [223,10 344.546875x23]
+            TextPaintable (TextNode<#text>)
       TextPaintable (TextNode<#text>)
       PaintableWithLines (BlockContainer<INPUT>) [432,8 202x27]
         PaintableBox (Box<DIV>) [433,9 200x25]
@@ -73,9 +68,8 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600]
         PaintableBox (Box<DIV>) [9,36 200x25] overflow: [9,36 398.171875x26]
           PaintableWithLines (BlockContainer<DIV>) [11,37 0x23]
             TextPaintable (TextNode<#text>)
-          PaintableWithLines (BlockContainer(anonymous)) [11,37 396.171875x23]
-            PaintableWithLines (BlockContainer<DIV>) [11,37 396.171875x23]
-              TextPaintable (TextNode<#text>)
+          PaintableWithLines (BlockContainer<DIV>) [11,37 196x23] overflow: [11,37 396.171875x23]
+            TextPaintable (TextNode<#text>)
 
 SC for Viewport<#document> [0,0 800x600] [children: 1] (z-index: auto)
  SC for BlockContainer<HTML> [0,0 800x70] [children: 0] (z-index: auto)
diff --git a/Tests/LibWeb/Layout/input/input-placeholder-with-text-align.html b/Tests/LibWeb/Layout/input/input-placeholder-with-text-align.html
new file mode 100644
index 00000000000..9d86b411f80
--- /dev/null
+++ b/Tests/LibWeb/Layout/input/input-placeholder-with-text-align.html
@@ -0,0 +1,8 @@
+<!doctype html><style>
+input {
+    width: 400px;
+    height: 100px;
+    outline: 1px solid red;
+    text-align: center;
+}
+</style><input placeholder="abc">