The initial-value descriptor when registering Custom Properties can be optional (#56519)

Ahmad-S792 · web-flow · commit 00141d836383 · 2025-12-05T09:12:15.000-08:00
This is manual export of bugzilla fix - https://commits.webkit.org/303757@main
diff --git a/css/css-properties-values-api/at-property-optional-initial-value.html b/css/css-properties-values-api/at-property-optional-initial-value.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Properties and Values API: optional initial-value descriptor</title>
+<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api/#initial-value-descriptor">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/9078">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+@property --registered {
+    syntax: '*';
+    initial-value: ;
+    inherits: false;
+}
+#target {
+    --test-bg: var(--registered) green;
+    --test-fallback: var(--registered, red);
+    background-color: var(--test-bg, var(--test-fallback));
+}
+</style>
+<div id="target"></div>
+<script>
+test(function() {
+    const target = document.getElementById('target');
+    const style = getComputedStyle(target);
+
+    // When initial-value is omitted (empty space), the property should be registered
+    // with a space character as the initial value, making var(--registered) green
+    // evaluate to " green" which is a valid color value.
+    assert_equals(style.backgroundColor, 'rgb(0, 128, 0)',
+      'background-color should be green when @property has empty initial-value');
+  }, '@property with empty initial-value should use space character');
+</script>
