LibWeb: Better CSS inheritance for nodes that represent a pseudo-element
Some checks are pending
CI / macOS, arm64, Sanitizer, Clang (push) Waiting to run
CI / Linux, x86_64, Fuzzers, Clang (push) Waiting to run
CI / Linux, x86_64, Sanitizer, GNU (push) Waiting to run
CI / Linux, x86_64, Sanitizer, Clang (push) Waiting to run
Package the js repl as a binary artifact / Linux, arm64 (push) Waiting to run
Package the js repl as a binary artifact / macOS, arm64 (push) Waiting to run
Package the js repl as a binary artifact / Linux, x86_64 (push) Waiting to run
Run test262 and test-wasm / run_and_update_results (push) Waiting to run
Lint Code / lint (push) Waiting to run
Label PRs with merge conflicts / auto-labeler (push) Waiting to run
Push notes / build (push) Waiting to run

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.
This commit is contained in:
Andreas Kling 2025-10-20 11:21:55 +02:00 committed by Andreas Kling
commit d17f666a8c
Notes: github-actions[bot] 2025-10-21 14:43:14 +00:00
8 changed files with 79 additions and 39 deletions

View file

@ -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()) {