Scroll-behavior & overscroll-behavior

[una]

Description
The scroll-behavior CSS property sets the behavior for a scrolling box when scrolling is triggered by the navigation or CSSOM scrolling APIs.

• MDN Link -- Scroll Behavior
• MDN Link -- Overscroll Behavior

Specification
CSSOM View Module

Tests

• scroll-behavior -- need to find tests
• Overscroll-behavior

Rationale

• Identified as a pain point in MDN 2020 Browser Compatibllity Report (Scrolling, smooth animations -- 19% feedback + interviews)
• Identified as a top compat pain point in State of CSS 2021 (2nd under subgrid for cross-browser support)

[gsnedders]

scroll-behavior -- need to find tests

https://wpt.fyi/results/css/cssom-view?label=master&label=experimental&product=chrome&product=firefox&product=safari&aligned&q=scroll-behavior

[foolip]

@flackr can you help judge if the tests here are sufficient? There are tests for both properties, but it's hard for me to tell if they're missing important things.

[flackr]

It looks like we don't have any tests of the difference between overscroll-behavior: contain and overscroll-behavior: none. There is only a difference on certain platforms - I think Mac, iOS and Android - but we could write tests that pass if there is no observable default scroll overflow behavior on the current platform.

The CSS scroll-behavior tests look sufficient for the CSS property, though I haven't been able to find any that test the JS scrolling APIs with behavior: smooth, e.g. elem.scrollIntoView({behavior: 'smooth'});. There's scrollIntoView-smooth.html however it doesn't seem to have any checks that the scroll is not instant.

[foolip]

A proposed list of tests has been labeled with interop-2022-scrolling. It would be great if someone from each browser engine team can look over this list and comment if there are any issues.

[flackr]

The proposed list is a good start, though we should work on adding support for the areas I mentioned above:

1. The difference between overscroll-behavior: contain and overscroll-behavior: none on root and non-root scrollers. E.g. see crbug.com/1256902.
2. Consider whether we can test that scrollIntoView-smooth.html is smooth reliably? E.g. maybe keep scrolling between 2 points until we observe a scroll that is somewhere in between.

[foolip]

A bunch of scrolling tests came up in my analysis in #48. It spans this issue and #14, but I'll past the whole comment since the root cause seems shared across the two in one case:

There are 3 tests that use new test_driver.Actions().scroll(...) and either ERROR or TIMEOUT in Firefox/Safari:

• /css/css-overscroll-behavior/overscroll-behavior.html is ERROR in both Firefox and Safari.
• /css/css-scroll-snap/input/snap-area-overflow-boundary.html is ERROR in Firefox and TIMEOUT in Safari.
• /css/css-scroll-snap/snap-at-user-scroll-end.html is ERROR in both Firefox and Safari.

https://bugzil.la/1746601 is the Gecko bug about this testdriver API. The harness errors can probably be fixed with the proper t.step_func wrapping or similar.

/css/css-scroll-snap/input/keyboard.html is TIMEOUT in Firefox and Safari, but the first test runs and fails in Firefox. I don't think this is due to a missing testdriver.js API, but it needs investigation.

/css/cssom-view/scroll-behavior-smooth.html is ERROR in Chrome and TIMEOUT in Safari. Needs investigation.

[lilles]

I wrote the initial tests in /css/cssom-view/scroll-behavior-smooth.html, but tests using fragment navigation and history.back() was added later and they time out because the history behavior is different in Chrome than in Firefox. Seem like a history entry is not added for Chrome and history.back() in that test will navigate out of the test page resulting in a time out.

I split out the navigation tests into a separate scroll-behavior-smooth-navigation.html here: https://chromium-review.googlesource.com/c/chromium/src/+/3403031 and reported an issue here: https://bugs.chromium.org/p/chromium/issues/detail?id=1289222

[foolip]

@lilles this raises the question of whether scroll-behavior-smooth-navigation.html should be included in Interop 2022. @flackr can you have a look at this test and give advice?