LibWeb: Parse the scroll-timeline-name CSS property

Author: https://github.com/Calme1709
Commit: e95f326f3d
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/6912
Reviewed-by: https://github.com/AtkinsSJ ✅

Libraries/LibWeb/CSS/Parser/PropertyParsing.cpp

@@ -745,6 +745,8 @@ Parser::ParseErrorOr<NonnullRefPtr<StyleValue const>> Parser::parse_css_value(Pr
         return parse_all_as(tokens, [this](auto& tokens) { return parse_translate_value(tokens); });
     case PropertyID::Scale:
         return parse_all_as(tokens, [this](auto& tokens) { return parse_scale_value(tokens); });
+    case PropertyID::ScrollTimelineName:
+        return parse_all_as(tokens, [this, property_id](auto& tokens) { return parse_simple_comma_separated_value_list(property_id, tokens); });
     case PropertyID::WhiteSpace:
         return parse_all_as(tokens, [this](auto& tokens) { return parse_white_space_shorthand(tokens); });
     case PropertyID::WhiteSpaceTrim:

Libraries/LibWeb/CSS/Properties.json

@@ -3440,6 +3440,19 @@
     "affects-layout": false,
     "affects-stacking-context": true
   },
+  "scroll-timeline-name": {
+    "affects-layout": false,
+    "animation-type": "none",
+    "inherited": false,
+    "initial": "none",
+    "valid-identifiers": [
+      "none"
+    ],
+    "valid-types": [
+      "dashed-ident"
+    ],
+    "multiplicity": "coordinating-list"
+  },
   "scrollbar-color": {
     "affects-layout": false,
     "animation-type": "by-computed-value",

Tests/LibWeb/Text/expected/css/CSSStyleDeclaration-has-indexed-property-getter.txt

@@ -259,6 +259,7 @@ All properties associated with getComputedStyle(document.body):
     "rx",
     "ry",
     "scale",
+    "scroll-timeline-name",
     "scrollbar-color",
     "scrollbar-gutter",
     "scrollbar-width",

Tests/LibWeb/Text/expected/css/CSSStyleProperties-all-supported-properties-and-default-values.txt

@@ -694,6 +694,8 @@ All supported properties and their default values exposed from CSSStylePropertie
 'rx': 'auto'
 'ry': 'auto'
 'scale': 'none'
+'scrollTimelineName': 'none'
+'scroll-timeline-name': 'none'
 'scrollbarColor': 'auto'
 'scrollbar-color': 'auto'
 'scrollbarGutter': 'auto'

Tests/LibWeb/Text/expected/css/getComputedStyle-print-all.txt

@@ -257,6 +257,7 @@ row-gap: normal
 rx: auto
 ry: auto
 scale: none
+scroll-timeline-name: none
 scrollbar-color: auto
 scrollbar-gutter: auto
 scrollbar-width: auto

Tests/LibWeb/Text/expected/wpt-import/scroll-animations/css/scroll-timeline-name-computed.txt

@@ -0,0 +1,19 @@
+Harness status: OK
+
+Found 13 tests
+
+12 Pass
+1 Fail
+Pass	Property scroll-timeline-name value 'initial'
+Pass	Property scroll-timeline-name value 'inherit'
+Pass	Property scroll-timeline-name value 'unset'
+Pass	Property scroll-timeline-name value 'revert'
+Pass	Property scroll-timeline-name value 'none'
+Pass	Property scroll-timeline-name value '--foo'
+Pass	Property scroll-timeline-name value '--foo, --bar'
+Pass	Property scroll-timeline-name value '--bar, --foo'
+Pass	Property scroll-timeline-name value '--a, --b, --c, --D, --e'
+Fail	Property scroll-timeline-name value 'none, none'
+Pass	Property scroll-timeline-name value '--a, --b, --c, none, --d, --e'
+Pass	The scroll-timeline-name property shows up in CSSStyleDeclaration enumeration
+Pass	The scroll-timeline-name property shows up in CSSStyleDeclaration.cssText

Tests/LibWeb/Text/expected/wpt-import/scroll-animations/css/scroll-timeline-name-parsing.txt

@@ -0,0 +1,26 @@
+Harness status: OK
+
+Found 20 tests
+
+19 Pass
+1 Fail
+Pass	e.style['scroll-timeline-name'] = "initial" should set the property value
+Pass	e.style['scroll-timeline-name'] = "inherit" should set the property value
+Pass	e.style['scroll-timeline-name'] = "unset" should set the property value
+Pass	e.style['scroll-timeline-name'] = "revert" should set the property value
+Pass	e.style['scroll-timeline-name'] = "none" should set the property value
+Pass	e.style['scroll-timeline-name'] = "--abc" should set the property value
+Pass	e.style['scroll-timeline-name'] = "  --abc" should set the property value
+Pass	e.style['scroll-timeline-name'] = "--aBc" should set the property value
+Pass	e.style['scroll-timeline-name'] = "--foo, --bar" should set the property value
+Pass	e.style['scroll-timeline-name'] = "--bar, --foo" should set the property value
+Fail	e.style['scroll-timeline-name'] = "none, none" should set the property value
+Pass	e.style['scroll-timeline-name'] = "--a, none, --b" should set the property value
+Pass	e.style['scroll-timeline-name'] = "auto" should not set the property value
+Pass	e.style['scroll-timeline-name'] = "abc" should not set the property value
+Pass	e.style['scroll-timeline-name'] = "default" should not set the property value
+Pass	e.style['scroll-timeline-name'] = "10px" should not set the property value
+Pass	e.style['scroll-timeline-name'] = "foo bar" should not set the property value
+Pass	e.style['scroll-timeline-name'] = "\"foo\" \"bar\"" should not set the property value
+Pass	e.style['scroll-timeline-name'] = "rgb(1, 2, 3)" should not set the property value
+Pass	e.style['scroll-timeline-name'] = "#fefefe" should not set the property value

Tests/LibWeb/Text/input/wpt-import/scroll-animations/css/scroll-timeline-name-computed.html

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#scroll-timeline-name">
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="../../css/support/computed-testcommon.js"></script>
+</head>
+<style>
+  #outer { scroll-timeline-name: --foo; }
+  #target { scroll-timeline-name: --bar; }
+</style>
+<div id="outer">
+  <div id="target"></div>
+</div>
+<script>
+test_computed_value('scroll-timeline-name', 'initial', 'none');
+test_computed_value('scroll-timeline-name', 'inherit', '--foo');
+test_computed_value('scroll-timeline-name', 'unset', 'none');
+test_computed_value('scroll-timeline-name', 'revert', 'none');
+test_computed_value('scroll-timeline-name', 'none');
+test_computed_value('scroll-timeline-name', '--foo');
+test_computed_value('scroll-timeline-name', '--foo, --bar');
+test_computed_value('scroll-timeline-name', '--bar, --foo');
+test_computed_value('scroll-timeline-name', '--a, --b, --c, --D, --e');
+test_computed_value('scroll-timeline-name', 'none, none');
+test_computed_value('scroll-timeline-name', '--a, --b, --c, none, --d, --e');
+
+test(() => {
+  let style = getComputedStyle(document.getElementById('target'));
+  assert_not_equals(Array.from(style).indexOf('scroll-timeline-name'), -1);
+}, 'The scroll-timeline-name property shows up in CSSStyleDeclaration enumeration');
+
+test(() => {
+  let style = document.getElementById('target').style;
+  assert_not_equals(style.cssText.indexOf('scroll-timeline-name'), -1);
+}, 'The scroll-timeline-name property shows up in CSSStyleDeclaration.cssText');
+
+</script>

Tests/LibWeb/Text/input/wpt-import/scroll-animations/css/scroll-timeline-name-parsing.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#scroll-timeline-name">
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="../../css/support/parsing-testcommon.js"></script>
+<div id="target"></div>
+<script>
+
+test_valid_value('scroll-timeline-name', 'initial');
+test_valid_value('scroll-timeline-name', 'inherit');
+test_valid_value('scroll-timeline-name', 'unset');
+test_valid_value('scroll-timeline-name', 'revert');
+
+test_valid_value('scroll-timeline-name', 'none');
+test_valid_value('scroll-timeline-name', '--abc');
+test_valid_value('scroll-timeline-name', '  --abc', '--abc');
+test_valid_value('scroll-timeline-name', '--aBc');
+test_valid_value('scroll-timeline-name', '--foo, --bar');
+test_valid_value('scroll-timeline-name', '--bar, --foo');
+test_valid_value('scroll-timeline-name', 'none, none');
+test_valid_value('scroll-timeline-name', '--a, none, --b');
+
+test_invalid_value('scroll-timeline-name', 'auto');
+test_invalid_value('scroll-timeline-name', 'abc');
+test_invalid_value('scroll-timeline-name', 'default');
+test_invalid_value('scroll-timeline-name', '10px');
+test_invalid_value('scroll-timeline-name', 'foo bar');
+test_invalid_value('scroll-timeline-name', '"foo" "bar"');
+test_invalid_value('scroll-timeline-name', 'rgb(1, 2, 3)');
+test_invalid_value('scroll-timeline-name', '#fefefe');
+
+</script>