mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-12-07 21:59:54 +00:00
LibWeb: Parse the scroll-timeline-name CSS property
This commit is contained in:
Callum Law
Sam Atkins
parent
826e947920
commit
e95f326f3d
Notes:
github-actions[bot]
2025-11-28 13:26:40 +00:00
Author: https://github.com/Calme1709
Commit: e95f326f3d
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/6912
Reviewed-by: https://github.com/AtkinsSJ ✅
9 changed files with 133 additions and 0 deletions
|
|
@ -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:
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -259,6 +259,7 @@ All properties associated with getComputedStyle(document.body):
|
|||
"rx",
|
||||
"ry",
|
||||
"scale",
|
||||
"scroll-timeline-name",
|
||||
"scrollbar-color",
|
||||
"scrollbar-gutter",
|
||||
"scrollbar-width",
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue