dmaax/ladybird
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

LibWeb: Add missing properties to pseudo element allow list

Browse source
This commit is contained in:
Tim Ledbetter 2026-06-22 00:21:23 +01:00 committed by Jelle Raaijmakers
parent 117cef4e92
commit 9b06a79b81
5 changed files with 134 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
Documentation/CSSGeneratedFiles.md
View file

@ -297,7 +297,7 @@ The following categories are supported:
- `#inline-typesetting-properties`: Properties defined in [CSS Text](https://drafts.csswg.org/css-text-4/)
- `#margin-properties`: `margin` and its longhands
- `#padding-properties`: `padding` and its longhands
- `#text-decoration-properties`: `text-decoration` and its longhands
- `#text-decoration-properties`: Properties defined in [CSS Text Decoration](https://drafts.csswg.org/css-text-decor-4/)
### `implementation`

2
Libraries/LibWeb/CSS/PseudoElements.json
View file

@ -73,6 +73,7 @@
"#padding-properties",
"#border-properties",
"box-shadow",
"float",
"#custom-properties"
],
"implementation": "synthetic"
@ -124,7 +125,6 @@
"color",
"background-color",
"#text-decoration-properties",
"text-shadow",
"FIXME: stroke-color",
"FIXME: fill-color",
"stroke-width",

9
Meta/Generators/generate_libweb_css_pseudo_element.py
View file

@ -29,6 +29,7 @@ PROPERTY_GROUPS = {
# https://drafts.csswg.org/css-backgrounds/#property-index
"background",
"background-attachment",
"background-blend-mode",
"background-clip",
"background-color",
"background-image",
@ -96,9 +97,9 @@ PROPERTY_GROUPS = {
"font",
"font-family",
"font-feature-settings",
# FIXME: font-kerning
"font-kerning",
"font-language-override",
# FIXME: font-optical-sizing
"font-optical-sizing",
# FIXME: font-palette
"font-size",
# FIXME: font-size-adjust
@ -200,8 +201,12 @@ PROPERTY_GROUPS = {
"text-decoration",
"text-decoration-color",
"text-decoration-line",
"text-decoration-skip-ink",
"text-decoration-style",
"text-decoration-thickness",
"text-shadow",
"text-underline-offset",
"text-underline-position",
],
}

42
Tests/LibWeb/Text/expected/wpt-import/css/css-pseudo/first-letter-allowed-properties.txt Normal file
View file

@ -0,0 +1,42 @@
Harness status: OK
Found 36 tests
33 Pass
3 Fail
Pass pre test setup
Pass backgroundAttachment should be applied to first-letter pseudo elements.
Pass backgroundBlendMode should be applied to first-letter pseudo elements.
Pass backgroundClip should be applied to first-letter pseudo elements.
Pass backgroundColor should be applied to first-letter pseudo elements.
Pass backgroundImage should be applied to first-letter pseudo elements.
Pass backgroundOrigin should be applied to first-letter pseudo elements.
Pass backgroundPosition should be applied to first-letter pseudo elements.
Pass backgroundRepeat should be applied to first-letter pseudo elements.
Pass backgroundSize should be applied to first-letter pseudo elements.
Pass border should be applied to first-letter pseudo elements.
Pass borderImage should be applied to first-letter pseudo elements.
Pass borderRadius should be applied to first-letter pseudo elements.
Pass boxShadow should be applied to first-letter pseudo elements.
Pass color should be applied to first-letter pseudo elements.
Pass float should be applied to first-letter pseudo elements.
Pass font should be applied to first-letter pseudo elements.
Pass fontFeatureSettings should be applied to first-letter pseudo elements.
Fail fontSizeAdjust should be applied to first-letter pseudo elements.
Pass fontKerning should be applied to first-letter pseudo elements.
Pass fontVariationSettings should be applied to first-letter pseudo elements.
Pass letterSpacing should be applied to first-letter pseudo elements.
Pass margin should be applied to first-letter pseudo elements.
Pass padding should be applied to first-letter pseudo elements.
Pass opacity should be applied to first-letter pseudo elements.
Pass textDecoration should be applied to first-letter pseudo elements.
Pass textJustify should be applied to first-letter pseudo elements.
Pass textShadow should be applied to first-letter pseudo elements.
Pass textTransform should be applied to first-letter pseudo elements.
Pass textUnderlinePosition should be applied to first-letter pseudo elements.
Pass verticalAlign should be applied to first-letter pseudo elements.
Pass wordSpacing should be applied to first-letter pseudo elements.
Pass position should not be applied to first-letter pseudo elements.
Fail transition should not be applied to first-letter pseudo elements.
Pass transform should not be applied to first-letter pseudo elements.
Fail wordBreak should not be applied to first-letter pseudo elements.

83
Tests/LibWeb/Text/input/wpt-import/css/css-pseudo/first-letter-allowed-properties.html Normal file
View file

@ -0,0 +1,83 @@
<!DOCTYPE html>
<title>CSS Test: Properties allowed on ::first-letter pseudo elements</title>
<link rel="author" title="Chris Nardi" href="mailto:cnardi@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#first-letter-styling">
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
#target::first-letter {}
#target { visibility: hidden; }
</style>
<div id="target">text</div>
<script>
'use strict';
var style;
const target = document.querySelector("#target");
var defaultComputedStyle = getComputedStyle(target);
test(function() {
var styleRule = document.styleSheets[0].cssRules[0];
assert_equals(styleRule.selectorText, '#target::first-letter', 'make sure we have the correct style rule');
style = styleRule.style;
}, 'pre test setup');
var validProperties = {
backgroundAttachment: 'fixed',
backgroundBlendMode: 'hue',
backgroundClip: 'padding-box',
backgroundColor: 'rgb(10, 20, 30)',
backgroundImage: 'linear-gradient(rgb(0, 0, 0), rgb(255, 255, 255))',
backgroundOrigin: 'border-box',
backgroundPosition: '10px 20px',
backgroundRepeat: 'no-repeat',
backgroundSize: '10px 20px',
border: '40px dotted rgb(10, 20, 30)',
borderImage: 'linear-gradient(rgb(0, 0, 0), rgb(255, 255, 255)) 10% / 20 / 30px repeat',
borderRadius: '10px 20px',
boxShadow: 'rgb(10, 20, 30) 10px 20px 30px 40px inset',
color: 'rgba(10, 20, 30, 0.4)',
float: 'right',
font: 'italic small-caps 900 10px / 20px sans-serif',
fontFeatureSettings: '"vert" 2',
fontSizeAdjust: '0.5',
fontKerning: 'none',
fontVariationSettings: '"XHGT" 0.7',
letterSpacing: '12px',
margin: '10px 20px 30px 40px',
padding: '10px 20px 30px 40px',
opacity: '0.5',
textDecoration: 'overline wavy rgb(10, 20, 30)',
textJustify: 'inter-word',
textShadow: 'rgb(10, 20, 30) 10px 20px 30px',
textTransform: 'capitalize',
textUnderlinePosition: 'under',
verticalAlign: '12%',
wordSpacing: '12px'
};
var invalidProperties = {
position: 'absolute',
transition: 'transform 1s',
transform: 'rotate(45deg)',
wordBreak: 'break-all'
};
function testFirstLetterProperty(property, rule, expected, reason) {
test(function() {
style[property] = "";
style[property] = rule;
assert_equals(getComputedStyle(target, '::first-letter')[property], expected);
style[property] = "";
}, reason);
}
for (var property in validProperties) {
testFirstLetterProperty(property, validProperties[property], validProperties[property],
property + " should be applied to first-letter pseudo elements.");
}
for (var property in invalidProperties) {
testFirstLetterProperty(property, invalidProperties[property], defaultComputedStyle[property],
property + " should not be applied to first-letter pseudo elements.");
}
</script>