Closed Bug 1737918 Opened 2 years ago Closed 2 years ago

Update animation-timeline property for Anonymous Scroll Progress Timelines

Categories

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

Unspecified
All
enhancement

Tracking

()

RESOLVED FIXED
101 Branch
Tracking Status
firefox101 --- fixed

People

(Reporter: boris, Assigned: boris)

References

(Blocks 2 open bugs, )

Details

Attachments

(4 files)

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).
Depends on: 1754897

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).

Summary: Update animation-timeline property to match the spec (proposal) → Update animation-timeline property for Anonymous Scroll Progress Timelines
No longer depends on: 1754897
See Also: → 1744224
Blocks: 1764450
Blocks: 1765211
Attachment #9271807 - Attachment description: Bug 1737918 - Part 4: Implement scroll() and support nearest scroller. → Bug 1737918 - Part 4: Implement scroll() in layout and support nearest scroller.
Assignee: nobody → boris.chiou
Status: NEW → ASSIGNED
Pushed by bchiou@mozilla.com:
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
Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/33723 for changes under testing/web-platform/tests
Upstream PR was closed without merging
Flags: needinfo?(boris.chiou)
Pushed by bchiou@mozilla.com:
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
Upstream PR merged by moz-wptsync-bot
Keywords: dev-doc-needed

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

Keywords: dev-doc-needed

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?

Flags: needinfo?(boris.chiou)

(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.

Flags: needinfo?(boris.chiou)

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.

(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

You need to log in before you can comment on or make changes to this bug.