LibWeb: Add missing properties to pseudo element allow list

Documentation/CSSGeneratedFiles.md

@@ -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`
 

Libraries/LibWeb/CSS/PseudoElements.json

@@ -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",

Meta/Generators/generate_libweb_css_pseudo_element.py

@@ -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",
     ],
 }
 

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

@@ -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.

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

@@ -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>