Skip to content

Commit 198ab54

Browse files
Calme1709Calme1709
committed
LibWeb: Parse the view-timeline-axis CSS property
1 parent 1eae986 commit 198ab54

File tree

9 files changed

+125
-0
lines changed

9 files changed

+125
-0
lines changed

‎Libraries/LibWeb/CSS/Parser/PropertyParsing.cpp‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -750,6 +750,7 @@ Parser::ParseErrorOr<NonnullRefPtr<StyleValue const>> Parser::parse_css_value(Pr
750750
case PropertyID::ScrollTimelineAxis:
751751
case PropertyID::ScrollTimelineName:
752752
return parse_all_as(tokens, [this, property_id](auto& tokens) { return parse_simple_comma_separated_value_list(property_id, tokens); });
753+
case PropertyID::ViewTimelineAxis:
753754
case PropertyID::ViewTimelineName:
754755
return parse_all_as(tokens, [this, property_id](auto& tokens) { return parse_simple_comma_separated_value_list(property_id, tokens); });
755756
case PropertyID::WhiteSpace:

‎Libraries/LibWeb/CSS/Properties.json‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4013,6 +4013,16 @@
40134013
"unitless-length"
40144014
]
40154015
},
4016+
"view-timeline-axis": {
4017+
"affects-layout": false,
4018+
"animation-type": "none",
4019+
"inherited": false,
4020+
"initial": "block",
4021+
"valid-types": [
4022+
"axis"
4023+
],
4024+
"multiplicity": "coordinating-list"
4025+
},
40164026
"view-timeline-name": {
40174027
"affects-layout": false,
40184028
"animation-type": "none",

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -289,6 +289,7 @@ All properties associated with getComputedStyle(document.body):
289289
"unicode-bidi",
290290
"user-select",
291291
"vertical-align",
292+
"view-timeline-axis",
292293
"view-timeline-name",
293294
"view-transition-name",
294295
"white-space-trim",

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -801,6 +801,8 @@ All supported properties and their default values exposed from CSSStylePropertie
801801
'user-select': 'auto'
802802
'verticalAlign': 'baseline'
803803
'vertical-align': 'baseline'
804+
'viewTimelineAxis': 'block'
805+
'view-timeline-axis': 'block'
804806
'viewTimelineName': 'none'
805807
'view-timeline-name': 'none'
806808
'viewTransitionName': 'none'

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -287,6 +287,7 @@ translate: none
287287
unicode-bidi: normal
288288
user-select: auto
289289
vertical-align: baseline
290+
view-timeline-axis: block
290291
view-timeline-name: none
291292
view-transition-name: none
292293
white-space-trim: none

‎Tests/LibWeb/Text/expected/wpt-import/scroll-animations/css/view-timeline-axis-computed.txt‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
Harness status: OK
2+
3+
Found 14 tests
4+
5+
13 Pass
6+
1 Fail
7+
Pass Property view-timeline-axis value 'initial'
8+
Pass Property view-timeline-axis value 'inherit'
9+
Pass Property view-timeline-axis value 'unset'
10+
Pass Property view-timeline-axis value 'revert'
11+
Pass Property view-timeline-axis value 'block'
12+
Pass Property view-timeline-axis value 'inline'
13+
Pass Property view-timeline-axis value 'y'
14+
Pass Property view-timeline-axis value 'x'
15+
Pass Property view-timeline-axis value 'block, inline'
16+
Pass Property view-timeline-axis value 'inline, block'
17+
Pass Property view-timeline-axis value 'block, y, x, inline'
18+
Fail Property view-timeline-axis value 'inline, inline, inline, inline'
19+
Pass The view-timeline-axis property shows up in CSSStyleDeclaration enumeration
20+
Pass The view-timeline-axis property shows up in CSSStyleDeclaration.cssText

‎Tests/LibWeb/Text/expected/wpt-import/scroll-animations/css/view-timeline-axis-parsing.txt‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
Harness status: OK
2+
3+
Found 18 tests
4+
5+
17 Pass
6+
1 Fail
7+
Pass e.style['view-timeline-axis'] = "initial" should set the property value
8+
Pass e.style['view-timeline-axis'] = "inherit" should set the property value
9+
Pass e.style['view-timeline-axis'] = "unset" should set the property value
10+
Pass e.style['view-timeline-axis'] = "revert" should set the property value
11+
Pass e.style['view-timeline-axis'] = "block" should set the property value
12+
Pass e.style['view-timeline-axis'] = "inline" should set the property value
13+
Pass e.style['view-timeline-axis'] = "y" should set the property value
14+
Pass e.style['view-timeline-axis'] = "x" should set the property value
15+
Pass e.style['view-timeline-axis'] = "block, inline" should set the property value
16+
Pass e.style['view-timeline-axis'] = "inline, block" should set the property value
17+
Pass e.style['view-timeline-axis'] = "block, y, x, inline" should set the property value
18+
Fail e.style['view-timeline-axis'] = "inline, inline, inline, inline" should set the property value
19+
Pass e.style['view-timeline-axis'] = "abc" should not set the property value
20+
Pass e.style['view-timeline-axis'] = "10px" should not set the property value
21+
Pass e.style['view-timeline-axis'] = "auto" should not set the property value
22+
Pass e.style['view-timeline-axis'] = "none" should not set the property value
23+
Pass e.style['view-timeline-axis'] = "block inline" should not set the property value
24+
Pass e.style['view-timeline-axis'] = "block / inline" should not set the property value

‎Tests/LibWeb/Text/input/wpt-import/scroll-animations/css/view-timeline-axis-computed.html‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html>
2+
<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#view-timeline-axis">
3+
<script src="../../resources/testharness.js"></script>
4+
<script src="../../resources/testharnessreport.js"></script>
5+
<script src="../../css/support/computed-testcommon.js"></script>
6+
</head>
7+
<style>
8+
#outer { view-timeline-axis: block, inline; }
9+
#target { view-timeline-axis: y; }
10+
</style>
11+
<div id=outer>
12+
<div id=target></div>
13+
</div>
14+
<script>
15+
test_computed_value('view-timeline-axis', 'initial', 'block');
16+
test_computed_value('view-timeline-axis', 'inherit', 'block, inline');
17+
test_computed_value('view-timeline-axis', 'unset', 'block');
18+
test_computed_value('view-timeline-axis', 'revert', 'block');
19+
test_computed_value('view-timeline-axis', 'block');
20+
test_computed_value('view-timeline-axis', 'inline');
21+
test_computed_value('view-timeline-axis', 'y');
22+
test_computed_value('view-timeline-axis', 'x');
23+
test_computed_value('view-timeline-axis', 'block, inline');
24+
test_computed_value('view-timeline-axis', 'inline, block');
25+
test_computed_value('view-timeline-axis', 'block, y, x, inline');
26+
test_computed_value('view-timeline-axis', 'inline, inline, inline, inline');
27+
28+
test(() => {
29+
let style = getComputedStyle(document.getElementById('target'));
30+
assert_not_equals(Array.from(style).indexOf('view-timeline-axis'), -1);
31+
}, 'The view-timeline-axis property shows up in CSSStyleDeclaration enumeration');
32+
33+
test(() => {
34+
let style = document.getElementById('target').style;
35+
assert_not_equals(style.cssText.indexOf('view-timeline-axis'), -1);
36+
}, 'The view-timeline-axis property shows up in CSSStyleDeclaration.cssText');
37+
</script>

‎Tests/LibWeb/Text/input/wpt-import/scroll-animations/css/view-timeline-axis-parsing.html‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#view-timeline-axis">
3+
<script src="../../resources/testharness.js"></script>
4+
<script src="../../resources/testharnessreport.js"></script>
5+
<script src="../../css/support/parsing-testcommon.js"></script>
6+
</head>
7+
<div id="target"></div>
8+
<script>
9+
test_valid_value('view-timeline-axis', 'initial');
10+
test_valid_value('view-timeline-axis', 'inherit');
11+
test_valid_value('view-timeline-axis', 'unset');
12+
test_valid_value('view-timeline-axis', 'revert');
13+
14+
test_valid_value('view-timeline-axis', 'block');
15+
test_valid_value('view-timeline-axis', 'inline');
16+
test_valid_value('view-timeline-axis', 'y');
17+
test_valid_value('view-timeline-axis', 'x');
18+
test_valid_value('view-timeline-axis', 'block, inline');
19+
test_valid_value('view-timeline-axis', 'inline, block');
20+
test_valid_value('view-timeline-axis', 'block, y, x, inline');
21+
test_valid_value('view-timeline-axis', 'inline, inline, inline, inline');
22+
23+
test_invalid_value('view-timeline-axis', 'abc');
24+
test_invalid_value('view-timeline-axis', '10px');
25+
test_invalid_value('view-timeline-axis', 'auto');
26+
test_invalid_value('view-timeline-axis', 'none');
27+
test_invalid_value('view-timeline-axis', 'block inline');
28+
test_invalid_value('view-timeline-axis', 'block / inline');
29+
</script>

0 commit comments

Comments
 (0)