1737918 - Update animation-timeline property for Anonymous Scroll Progress Timelines

Status: RESOLVED FIXED

(Core :: CSS Transitions and Animations, enhancement, P3)

Description

[Boris Chiou [:boris]]

Support Anonymous Scroll Progress Timelines. In other words, we need to add scroll() notation for animation-timeline:

• animation-timeline: auto | none | scroll() | <scroll-timeline-name>

animation-timeline: auto | none | scroll(<axis>? <scroller>?);
<axis> = block | inline | vertical | horizontal
<scroller> = root | nearest | <container-name>

Note:

1. However, Gecko doesn't support container-name now (Bug 1744224), so if the user specifies a value other than root and nearest, we fallback to use the document viewport, based on the spec.
2. We will do <scroll-timeline-name> in the follow-up bug (Bug 1754897).

Comment 1

[Boris Chiou [:boris]]

Update this title, and based on the proposal, we can support Anonymous Scroll Progress Timelines first in this bug. And move Named Scroll Progress Timelines into a separate bug (i.e. Bug 1754897).

Comment 2

[Boris Chiou [:boris]]

Attachment: Bug 1737918 - Part 1: Add scroll() to animation-timeline for style system.

Comment 3

[Boris Chiou [:boris]]

Attachment: Bug 1737918 - Part 2: Replace StyleScrollDirection with StyleAxis.

Comment 4

[Boris Chiou [:boris]]

Attachment: Bug 1737918 - Part 3: Replace Scroller::Type with StyleScroller.

Comment 5

[Boris Chiou [:boris]]

Attachment: Bug 1737918 - Part 4: Implement scroll() in layout and support nearest scroller.

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/a143d2e54fb9
Part 1: Add scroll() to animation-timeline for style system. r=emilio
https://hg.mozilla.org/integration/autoland/rev/f7bf3143e4a7
Part 2: Replace StyleScrollDirection with StyleAxis. r=emilio
https://hg.mozilla.org/integration/autoland/rev/fcc5ecd364e4
Part 3: Replace Scroller::Type with StyleScroller. r=emilio
https://hg.mozilla.org/integration/autoland/rev/cecdd071c1aa
Part 4: Implement scroll() in layout and support nearest scroller. r=emilio

Comment 7

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/33723 for changes under testing/web-platform/tests

Comment 8

[Noemi Erli[:noemi_erli]]

Backed out 4 changesets (Bug 1737918) for causing bustages in ScrollTimeline.cpp CLOSED TREE

Push with failures: https://treeherder.mozilla.org/jobs?repo=autoland&group_state=expanded&collapsedPushes=842382&resultStatus=testfailed%2Cbusted%2Cexception%2Cretry%2Cusercancel&revision=cecdd071c1aa9b973cf426d1682577ba39a21400&searchStr=linux%2Cx64%2Cdebug%2Cbuild-linux64-base-toolchains%2Fdebug%2Cbb&selectedTaskRun=VrgjG3X2ShylQNnH1Hh0eg.0

Log: https://treeherder.mozilla.org/logviewer?job_id=375215677&repo=autoland

Backout: https://hg.mozilla.org/integration/autoland/rev/3e1eab67510956a3406bcec71c351a2abfdbb286

Comment 9

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR was closed without merging

Comment 10

[Boris Chiou [:boris]]

Try: https://treeherder.mozilla.org/#/jobs?repo=try&revision=fa3577443638682ece15902fc728d2a7f363cc96

Comment 11

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/dca5286a4b3e
Part 1: Add scroll() to animation-timeline for style system. r=emilio
https://hg.mozilla.org/integration/autoland/rev/8e76f0afc0d3
Part 2: Replace StyleScrollDirection with StyleAxis. r=emilio
https://hg.mozilla.org/integration/autoland/rev/56b8686e4bb4
Part 3: Replace Scroller::Type with StyleScroller. r=emilio
https://hg.mozilla.org/integration/autoland/rev/668a98c2c759
Part 4: Implement scroll() in layout and support nearest scroller. r=emilio

Comment 12

[Norisz Fay [:noriszfay]]

https://hg.mozilla.org/mozilla-central/rev/dca5286a4b3e
https://hg.mozilla.org/mozilla-central/rev/8e76f0afc0d3
https://hg.mozilla.org/mozilla-central/rev/56b8686e4bb4
https://hg.mozilla.org/mozilla-central/rev/668a98c2c759

Comment 13

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot

Comment 14

[Ruth John]

Removing dev-doc-needed keyword as per the comment here https://bugzilla.mozilla.org/show_bug.cgi?id=1733260#c2 it'll be easier to test & document once dependencies are done

Comment 15

[Hamish Willee]

Docs work for this can be tracked in https://github.com/mdn/content/issues/15467

@boris, I've started work on the scroll() documentation as we discussed.

When the scroller is set as nearest the spec says:

Specifies to use the nearest ancestor scroll container. (Default.)".

Does this mean

1. the nearest ancestor that could be a scroll container (i.e. any div say), or
2. the nearest ancestor that has scrollbars on any axis.
3. the nearest ancestor that has scrollbars in the specified axis?

I THINK it probably means "2", and that if you have no axis on the selected ancestor then no timeline is created. Can you confirm?

Comment 16

[Boris Chiou [:boris]]

(In reply to Hamish Willee from comment #15)

When the scroller is set as nearest the spec says:

Specifies to use the nearest ancestor scroll container. (Default.)".

Does this mean

1. the nearest ancestor that could be a scroll container (i.e. any div say), or
2. the nearest ancestor that has scrollbars on any axis.
3. the nearest ancestor that has scrollbars in the specified axis?

I THINK it probably means "2", and that if you have no axis on the selected ancestor then no timeline is created. Can you confirm?

Yes. I think it's 2. Basically, if there is no scrollbars on the axis you specified (i.e. its scroll range is zero), we still create the ScrollTimline object but this timeline is inactive (i.e. its timeline time is unresolved):
https://github.com/w3c/csswg-drafts/issues/7401
(Note: Gecko doesn't update the implementation per this resolved spec issue (which means we still treat zero scroll range as 100%), so perhaps you could check Chrome for this case as well).

Besides, Gecko's implementation may have bug because we don't handle overflow:auto properly here.

Gecko doesn't implement the WebIDL for ScrollTimeline, but Chrome does, so perhaps you can check the ScrollTimeline object in Chrome.

Comment 17

[Hamish Willee]

Thanks very much @Boris. Hope you're enjoying your holiday.

FYI I added a note about the spec violation in https://github.com/mdn/browser-compat-data/pull/18064 referring to the CSSWG issue. Is FF aiming to fix this ? If so, is there a bug number I can track for that?
FWIW while this is all behind a preference it is not such a big deal - if bugs are fixed before that preference goes it is as if they never existed from the perspective of the compatibility data.
I'll look at what Chrome does when one of the main browsers goes live without a preference.

Comment 18

[Boris Chiou [:boris]]

(In reply to Hamish Willee from comment #17)

Thanks very much @Boris. Hope you're enjoying your holiday.

FYI I added a note about the spec violation in https://github.com/mdn/browser-compat-data/pull/18064 referring to the CSSWG issue.

Thanks

Is FF aiming to fix this ? If so, is there a bug number I can track for that?

Yes. Our bug is: https://bugzilla.mozilla.org/show_bug.cgi?id=1780865

I'll look at what Chrome does when one of the main browsers goes live without a preference.

Thanks. Chrome also implements all the features of scroll-linked animations behind the experimental flag.
Also, here is the Chromium issue for the new syntax: https://bugs.chromium.org/p/chromium/issues/detail?id=1317765