LibWeb/CSS: Discard unsupported style properties on pseudo-elements

Quite simply, ignore any declarations for properties we don't want,
while computing a pseudo-element's style.

I've imported a WPT test for this, which fails without this patch.
This commit is contained in:
Sam Atkins 2025-03-20 16:35:02 +00:00
parent 1108988656
commit 9e65291ebd
Notes: github-actions[bot] 2025-03-24 09:50:54 +00:00
5 changed files with 46 additions and 9 deletions

View file

@ -1030,6 +1030,9 @@ void StyleComputer::cascade_declarations(
if (important != property.important)
continue;
if (pseudo_element.has_value() && !pseudo_element_supports_property(*pseudo_element, property.property_id))
continue;
if (property.property_id == CSS::PropertyID::All) {
set_all_properties(cascaded_properties, element, pseudo_element, property.value, m_document, &match->declaration(), cascade_origin, important, layer_name);
continue;
@ -1596,11 +1599,13 @@ GC::Ref<CascadedProperties> StyleComputer::compute_cascaded_values(DOM::Element&
// Then we resolve all the CSS custom properties ("variables") for this element:
// FIXME: Also resolve !important custom properties, in a second cascade.
HashMap<FlyString, CSS::StyleProperty> custom_properties;
for (auto& layer : matching_rule_set.author_rules) {
cascade_custom_properties(element, pseudo_element, layer.rules, custom_properties);
if (!pseudo_element.has_value() || pseudo_element_supports_property(*pseudo_element, PropertyID::Custom)) {
HashMap<FlyString, CSS::StyleProperty> custom_properties;
for (auto& layer : matching_rule_set.author_rules) {
cascade_custom_properties(element, pseudo_element, layer.rules, custom_properties);
}
element.set_custom_properties(pseudo_element, move(custom_properties));
}
element.set_custom_properties(pseudo_element, move(custom_properties));
// Then we apply the declarations from the matched rules in cascade order:

View file

@ -6,8 +6,8 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
"text"
BlockContainer <input> at (9,8) content-size 200x82 inline-block [BFC] children: not-inline
Box <div> at (11,9) content-size 196x80 flex-container(row) [FFC] children: not-inline
BlockContainer <div> at (11,40.5) content-size 98x17 flex-item [BFC] children: inline
frag 0 from TextNode start: 0, length: 11, rect: [11,40.5 89.90625x17] baseline: 13.296875
BlockContainer <div> at (11,9) content-size 98x80 flex-item [BFC] children: inline
frag 0 from TextNode start: 0, length: 11, rect: [11,9 89.90625x80] baseline: 44.796875
"placeholder"
TextNode <#text>
BlockContainer <div> at (109,9) content-size 98x80 flex-item [BFC] children: inline
@ -19,7 +19,7 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x84]
PaintableWithLines (BlockContainer<INPUT>) [8,7 202x84]
PaintableBox (Box<DIV>) [9,8 200x82]
PaintableWithLines (BlockContainer<DIV>) [11,40.5 98x17]
PaintableWithLines (BlockContainer<DIV>) [11,9 98x80]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<DIV>) [109,9 98x80]
TextPaintable (TextNode<#text>)

View file

@ -0,0 +1,10 @@
<!DOCTYPE html>
<style>
.vertical {
writing-mode: vertical-rl;
}
</style>
<body>
<input placeholder="placeholder">
<input class="vertical" placeholder="placeholder">
</body>

View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<title>::placeholder should not support 'writing-mode', 'direction', and 'text-orientation'</title>
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#placeholder-pseudo">
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#first-line-styling">
<link rel="match" href="../../../../expected/wpt-import/css/css-pseudo/reference/placeholder-excluded-properties-ref.html">
<style>
.horizontal::placeholder {
writing-mode: vertical-rl;
direction: rtl;
}
.vertical {
writing-mode: vertical-rl;
}
.vertical::placeholder {
text-orientation: upright;
}
</style>
<body>
<input class="horizontal" placeholder="placeholder">
<input class="vertical" placeholder="placeholder">
</body>

View file

@ -2,5 +2,5 @@ Harness status: OK
Found 1 tests
1 Fail
Fail flexbox | first-letter
1 Pass
Pass flexbox | first-letter