mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-10-24 00:49:46 +00:00
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
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:
parent
9e064bd3ff
commit
d17f666a8c
Notes:
github-actions[bot]
2025-10-21 14:43:14 +00:00
Author: https://github.com/awesomekling
Commit: d17f666a8c
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/6519
Reviewed-by: https://github.com/AtkinsSJ
8 changed files with 79 additions and 39 deletions
|
|
@ -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()) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue