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

@@ -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& host_element = *element.root().parent_or_shadow_host_element();
-        auto style = compute_style({ parent_element, element.use_pseudo_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()) {

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)

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;
 };
 
 }

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
+            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 BlockContainer start: 0, length: 0, rect: [11,10 36.84375x18] baseline: 13.796875
+              frag 0 from TextNode start: 0, length: 5, 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
+                  "hello"
-                frag 0 from TextNode start: 0, length: 5, rect: [11,10 36.84375x18] baseline: 13.796875
+              TextNode <#text> (not painted)
-                    "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 196x18]
-              PaintableWithLines (BlockContainer<DIV>) [11,10 36.84375x18]
+              TextPaintable (TextNode<#text>)
-                TextPaintable (TextNode<#text>)
         TextPaintable (TextNode<#text>)
         PaintableWithLines (BlockContainer<TEXTAREA>) [218,8 166x36]
           PaintableWithLines (BlockContainer<DIV>) [221,11 160x15]

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
+          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 BlockContainer start: 0, length: 0, rect: [11,10 89.90625x80] baseline: 44.796875
+            frag 0 from TextNode start: 0, length: 11, 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
+                "placeholder"
-              frag 0 from TextNode start: 0, length: 11, rect: [11,10 89.90625x80] baseline: 44.796875
+            TextNode <#text> (not painted)
-                  "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 196x80]
-            PaintableWithLines (BlockContainer<DIV>) [11,10 89.90625x80]
+            TextPaintable (TextNode<#text>)
-              TextPaintable (TextNode<#text>)
       TextPaintable (TextNode<#text>)
 
 SC for Viewport<#document> [0,0 800x600] [children: 1] (z-index: auto)

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)

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
+          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 BlockContainer start: 0, length: 0, rect: [223,10 344.546875x23] baseline: 17.5
+            frag 0 from TextNode start: 0, length: 34, 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
+                "This placeholder should be visible"
-              frag 0 from TextNode start: 0, length: 34, rect: [223,10 344.546875x23] baseline: 17.5
+            TextNode <#text> (not painted)
-                  "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
+          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 BlockContainer start: 0, length: 0, rect: [11,37 396.171875x23] baseline: 17.5
+            frag 0 from TextNode start: 0, length: 39, 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
+                "This placeholder should also be visible"
-              frag 0 from TextNode start: 0, length: 39, rect: [11,37 396.171875x23] baseline: 17.5
+            TextNode <#text> (not painted)
-                  "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 196x23] overflow: [223,10 344.546875x23]
-            PaintableWithLines (BlockContainer<DIV>) [223,10 344.546875x23]
+            TextPaintable (TextNode<#text>)
-              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 196x23] overflow: [11,37 396.171875x23]
-            PaintableWithLines (BlockContainer<DIV>) [11,37 396.171875x23]
+            TextPaintable (TextNode<#text>)
-              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)

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">