RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-26 02:47:34 +00:00
Code Issues Activity Actions

LibWeb: Don't apply element inline style to associated pseudo elements

Browse source 
An element's inline style, if present, should not leak into any pseudo
elements generated by that element.
This commit is contained in:
Andreas Kling 2023-04-02 08:35:03 +02:00
parent eed956b473
commit 620a34a463
4 changed files with 31 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

11
Tests/LibWeb/Layout/expected/css-pseudo-element-should-not-be-affected-by-inline-style.txt Normal file
View file

@ -0,0 +1,11 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (1,1) content-size 798x120 children: not-inline
BlockContainer <body> at (10,10) content-size 780x102 children: not-inline
BlockContainer <div.outer> at (11,11) content-size 100x100 children: not-inline
BlockContainer <(anonymous)> at (12,12) content-size 50x50 children: inline
line 0 width: 0, height: 21.835937, bottom: 21.835937, baseline: 16.914062
frag 0 from TextNode start: 0, length: 0, rect: [12,12 0x21.835937]
""
TextNode <#text>
BlockContainer <div.inner> at (12,64) content-size 98x0 children: inline
TextNode <#text>

13
Tests/LibWeb/Layout/input/css-pseudo-element-should-not-be-affected-by-inline-style.html Normal file
View file

@ -0,0 +1,13 @@
<!DOCTYPE html><html><head><style>
* {
border: 1px solid black;
font: 20px SerenitySans;
}
.outer::before {
display: block;
content: "";
width: 50px;
height: 50px;
border: 1px solid red;
}
</style><head><body><div class="outer" style="height: 100px; width: 100px;"><div class="inner">

12
Userland/Libraries/LibWeb/CSS/StyleComputer.cpp
View file

@ -821,7 +821,7 @@ RefPtr<StyleValue> StyleComputer::resolve_unresolved_style_value(DOM::Element& e
return {}; return {};
} }
void StyleComputer::cascade_declarations(StyleProperties& style, DOM::Element& element, Vector<MatchingRule> const& matching_rules, CascadeOrigin cascade_origin, Important important) const void StyleComputer::cascade_declarations(StyleProperties& style, DOM::Element& element, Optional<CSS::Selector::PseudoElement> pseudo_element, Vector<MatchingRule> const& matching_rules, CascadeOrigin cascade_origin, Important important) const
{ {
for (auto const& match : matching_rules) { for (auto const& match : matching_rules) {
for (auto const& property : verify_cast<PropertyOwningCSSStyleDeclaration>(match.rule->declaration()).properties()) { for (auto const& property : verify_cast<PropertyOwningCSSStyleDeclaration>(match.rule->declaration()).properties()) {
@ -837,7 +837,7 @@ void StyleComputer::cascade_declarations(StyleProperties& style, DOM::Element& e
} }
} }
if (cascade_origin == CascadeOrigin::Author) { if (cascade_origin == CascadeOrigin::Author && !pseudo_element.has_value()) {
if (auto const* inline_style = verify_cast<ElementInlineCSSStyleDeclaration>(element.inline_style())) { if (auto const* inline_style = verify_cast<ElementInlineCSSStyleDeclaration>(element.inline_style())) {
for (auto const& property : inline_style->properties()) { for (auto const& property : inline_style->properties()) {
if (important != property.important) if (important != property.important)
@ -907,7 +907,7 @@ ErrorOr<void> StyleComputer::compute_cascaded_values(StyleProperties& style, DOM
// Then we apply the declarations from the matched rules in cascade order: // Then we apply the declarations from the matched rules in cascade order:
// Normal user agent declarations // Normal user agent declarations
cascade_declarations(style, element, matching_rule_set.user_agent_rules, CascadeOrigin::UserAgent, Important::No); cascade_declarations(style, element, pseudo_element, matching_rule_set.user_agent_rules, CascadeOrigin::UserAgent, Important::No);
// FIXME: Normal user declarations // FIXME: Normal user declarations
@ -915,17 +915,17 @@ ErrorOr<void> StyleComputer::compute_cascaded_values(StyleProperties& style, DOM
element.apply_presentational_hints(style); element.apply_presentational_hints(style);
// Normal author declarations // Normal author declarations
cascade_declarations(style, element, matching_rule_set.author_rules, CascadeOrigin::Author, Important::No); cascade_declarations(style, element, pseudo_element, matching_rule_set.author_rules, CascadeOrigin::Author, Important::No);
// FIXME: Animation declarations [css-animations-1] // FIXME: Animation declarations [css-animations-1]
// Important author declarations // Important author declarations
cascade_declarations(style, element, matching_rule_set.author_rules, CascadeOrigin::Author, Important::Yes); cascade_declarations(style, element, pseudo_element, matching_rule_set.author_rules, CascadeOrigin::Author, Important::Yes);
// FIXME: Important user declarations // FIXME: Important user declarations
// Important user agent declarations // Important user agent declarations
cascade_declarations(style, element, matching_rule_set.user_agent_rules, CascadeOrigin::UserAgent, Important::Yes); cascade_declarations(style, element, pseudo_element, matching_rule_set.user_agent_rules, CascadeOrigin::UserAgent, Important::Yes);
// FIXME: Transition declarations [css-transitions-1] // FIXME: Transition declarations [css-transitions-1]

2
Userland/Libraries/LibWeb/CSS/StyleComputer.h
View file

@ -111,7 +111,7 @@ private:
Vector<MatchingRule> author_rules; Vector<MatchingRule> author_rules;
}; };
void cascade_declarations(StyleProperties&, DOM::Element&, Vector<MatchingRule> const&, CascadeOrigin, Important important) const; void cascade_declarations(StyleProperties&, DOM::Element&, Optional<CSS::Selector::PseudoElement>, Vector<MatchingRule> const&, CascadeOrigin, Important) const;
void build_rule_cache(); void build_rule_cache();
void build_rule_cache_if_needed() const; void build_rule_cache_if_needed() const;