mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-12-07 21:59:54 +00:00
LibWeb: Parse the scroll-timeline-axis CSS property
This commit is contained in:
Callum Law
Sam Atkins
parent
e95f326f3d
commit
992b0a4dc6
Notes:
github-actions[bot]
2025-11-28 13:26:31 +00:00
Author: https://github.com/Calme1709
Commit: 992b0a4dc6
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/6912
Reviewed-by: https://github.com/AtkinsSJ ✅
11 changed files with 135 additions and 0 deletions
|
|
@ -110,6 +110,12 @@
|
|||
"textarea",
|
||||
"textfield"
|
||||
],
|
||||
"axis": [
|
||||
"block",
|
||||
"inline",
|
||||
"x",
|
||||
"y"
|
||||
],
|
||||
"background-attachment": [
|
||||
"fixed",
|
||||
"local",
|
||||
|
|
|
|||
|
|
@ -628,6 +628,7 @@
|
|||
"windowtext",
|
||||
"wrap",
|
||||
"wrap-reverse",
|
||||
"x",
|
||||
"x-end",
|
||||
"x-large",
|
||||
"x-start",
|
||||
|
|
@ -635,6 +636,7 @@
|
|||
"xx-large",
|
||||
"xx-small",
|
||||
"xxx-large",
|
||||
"y",
|
||||
"y-end",
|
||||
"y-start",
|
||||
"zoom-in",
|
||||
|
|
|
|||
|
|
@ -745,6 +745,7 @@ 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::ScrollTimelineAxis:
|
||||
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:
|
||||
|
|
|
|||
|
|
@ -3440,6 +3440,16 @@
|
|||
"affects-layout": false,
|
||||
"affects-stacking-context": true
|
||||
},
|
||||
"scroll-timeline-axis": {
|
||||
"affects-layout": false,
|
||||
"animation-type": "none",
|
||||
"inherited": false,
|
||||
"initial": "block",
|
||||
"valid-types": [
|
||||
"axis"
|
||||
],
|
||||
"multiplicity": "coordinating-list"
|
||||
},
|
||||
"scroll-timeline-name": {
|
||||
"affects-layout": false,
|
||||
"animation-type": "none",
|
||||
|
|
|
|||
|
|
@ -259,6 +259,7 @@ All properties associated with getComputedStyle(document.body):
|
|||
"rx",
|
||||
"ry",
|
||||
"scale",
|
||||
"scroll-timeline-axis",
|
||||
"scroll-timeline-name",
|
||||
"scrollbar-color",
|
||||
"scrollbar-gutter",
|
||||
|
|
|
|||
|
|
@ -694,6 +694,8 @@ All supported properties and their default values exposed from CSSStylePropertie
|
|||
'rx': 'auto'
|
||||
'ry': 'auto'
|
||||
'scale': 'none'
|
||||
'scrollTimelineAxis': 'block'
|
||||
'scroll-timeline-axis': 'block'
|
||||
'scrollTimelineName': 'none'
|
||||
'scroll-timeline-name': 'none'
|
||||
'scrollbarColor': 'auto'
|
||||
|
|
|
|||
|
|
@ -257,6 +257,7 @@ row-gap: normal
|
|||
rx: auto
|
||||
ry: auto
|
||||
scale: none
|
||||
scroll-timeline-axis: block
|
||||
scroll-timeline-name: none
|
||||
scrollbar-color: auto
|
||||
scrollbar-gutter: auto
|
||||
|
|
|
|||
|
|
@ -0,0 +1,20 @@
|
|||
Harness status: OK
|
||||
|
||||
Found 14 tests
|
||||
|
||||
13 Pass
|
||||
1 Fail
|
||||
Pass Property scroll-timeline-axis value 'initial'
|
||||
Pass Property scroll-timeline-axis value 'inherit'
|
||||
Pass Property scroll-timeline-axis value 'unset'
|
||||
Pass Property scroll-timeline-axis value 'revert'
|
||||
Pass Property scroll-timeline-axis value 'block'
|
||||
Pass Property scroll-timeline-axis value 'inline'
|
||||
Pass Property scroll-timeline-axis value 'y'
|
||||
Pass Property scroll-timeline-axis value 'x'
|
||||
Pass Property scroll-timeline-axis value 'block, inline'
|
||||
Pass Property scroll-timeline-axis value 'inline, block'
|
||||
Pass Property scroll-timeline-axis value 'block, y, x, inline'
|
||||
Fail Property scroll-timeline-axis value 'inline, inline, inline, inline'
|
||||
Pass The scroll-timeline-axis property shows up in CSSStyleDeclaration enumeration
|
||||
Pass The scroll-timeline-axis property shows up in CSSStyleDeclaration.cssText
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
Harness status: OK
|
||||
|
||||
Found 18 tests
|
||||
|
||||
17 Pass
|
||||
1 Fail
|
||||
Pass e.style['scroll-timeline-axis'] = "initial" should set the property value
|
||||
Pass e.style['scroll-timeline-axis'] = "inherit" should set the property value
|
||||
Pass e.style['scroll-timeline-axis'] = "unset" should set the property value
|
||||
Pass e.style['scroll-timeline-axis'] = "revert" should set the property value
|
||||
Pass e.style['scroll-timeline-axis'] = "block" should set the property value
|
||||
Pass e.style['scroll-timeline-axis'] = "inline" should set the property value
|
||||
Pass e.style['scroll-timeline-axis'] = "y" should set the property value
|
||||
Pass e.style['scroll-timeline-axis'] = "x" should set the property value
|
||||
Pass e.style['scroll-timeline-axis'] = "block, inline" should set the property value
|
||||
Pass e.style['scroll-timeline-axis'] = "inline, block" should set the property value
|
||||
Pass e.style['scroll-timeline-axis'] = "block, y, x, inline" should set the property value
|
||||
Fail e.style['scroll-timeline-axis'] = "inline, inline, inline, inline" should set the property value
|
||||
Pass e.style['scroll-timeline-axis'] = "abc" should not set the property value
|
||||
Pass e.style['scroll-timeline-axis'] = "10px" should not set the property value
|
||||
Pass e.style['scroll-timeline-axis'] = "auto" should not set the property value
|
||||
Pass e.style['scroll-timeline-axis'] = "none" should not set the property value
|
||||
Pass e.style['scroll-timeline-axis'] = "block inline" should not set the property value
|
||||
Pass e.style['scroll-timeline-axis'] = "block / inline" 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-axis">
|
||||
<script src="../../resources/testharness.js"></script>
|
||||
<script src="../../resources/testharnessreport.js"></script>
|
||||
<script src="../../css/support/computed-testcommon.js"></script>
|
||||
<style>
|
||||
#outer { scroll-timeline-axis: inline; }
|
||||
#target { scroll-timeline-axis: y; }
|
||||
</style>
|
||||
<div id="outer">
|
||||
<div id="target"></div>
|
||||
</div>
|
||||
<script>
|
||||
test_computed_value('scroll-timeline-axis', 'initial', 'block');
|
||||
test_computed_value('scroll-timeline-axis', 'inherit', 'inline');
|
||||
test_computed_value('scroll-timeline-axis', 'unset', 'block');
|
||||
test_computed_value('scroll-timeline-axis', 'revert', 'block');
|
||||
test_computed_value('scroll-timeline-axis', 'block');
|
||||
test_computed_value('scroll-timeline-axis', 'inline');
|
||||
test_computed_value('scroll-timeline-axis', 'y');
|
||||
test_computed_value('scroll-timeline-axis', 'x');
|
||||
test_computed_value('scroll-timeline-axis', 'block, inline');
|
||||
test_computed_value('scroll-timeline-axis', 'inline, block');
|
||||
test_computed_value('scroll-timeline-axis', 'block, y, x, inline');
|
||||
test_computed_value('scroll-timeline-axis', 'inline, inline, inline, inline');
|
||||
|
||||
test(() => {
|
||||
let style = getComputedStyle(document.getElementById('target'));
|
||||
assert_not_equals(Array.from(style).indexOf('scroll-timeline-axis'), -1);
|
||||
}, 'The scroll-timeline-axis property shows up in CSSStyleDeclaration enumeration');
|
||||
|
||||
test(() => {
|
||||
let style = document.getElementById('target').style;
|
||||
assert_not_equals(style.cssText.indexOf('scroll-timeline-axis'), -1);
|
||||
}, 'The scroll-timeline-axis property shows up in CSSStyleDeclaration.cssText');
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#scroll-timeline-axis">
|
||||
<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-axis', 'initial');
|
||||
test_valid_value('scroll-timeline-axis', 'inherit');
|
||||
test_valid_value('scroll-timeline-axis', 'unset');
|
||||
test_valid_value('scroll-timeline-axis', 'revert');
|
||||
|
||||
test_valid_value('scroll-timeline-axis', 'block');
|
||||
test_valid_value('scroll-timeline-axis', 'inline');
|
||||
test_valid_value('scroll-timeline-axis', 'y');
|
||||
test_valid_value('scroll-timeline-axis', 'x');
|
||||
test_valid_value('scroll-timeline-axis', 'block, inline');
|
||||
test_valid_value('scroll-timeline-axis', 'inline, block');
|
||||
test_valid_value('scroll-timeline-axis', 'block, y, x, inline');
|
||||
test_valid_value('scroll-timeline-axis', 'inline, inline, inline, inline');
|
||||
|
||||
test_invalid_value('scroll-timeline-axis', 'abc');
|
||||
test_invalid_value('scroll-timeline-axis', '10px');
|
||||
test_invalid_value('scroll-timeline-axis', 'auto');
|
||||
test_invalid_value('scroll-timeline-axis', 'none');
|
||||
test_invalid_value('scroll-timeline-axis', 'block inline');
|
||||
test_invalid_value('scroll-timeline-axis', 'block / inline');
|
||||
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue