[cssom-view-1] What happens when the user tries to scroll during an ongoing smooth scroll? #13462

Consider an element that is being smooth-scrolled due to a .scrollTo({..., behavior: "smooth" }) call. While the element is scrolling, the user tries to scroll in the opposite direction with their mouse wheel.

1. Is the smooth scroll aborted? https://drafts.csswg.org/cssom-view/#smooth-scroll-aborted says that "a smooth scroll can be aborted by the user", but it doesn't have any example of how this would happen. The spec only actually aborts a smooth scroll when there is another JS-initiated scroll.
2. Or is the smooth scroll completed, thus firing the scrollend event?

• Firefox seems to do (2) (it fires a scrollend event, and then handles the user scroll)
• Chrome fires a scrollend event and then continues scrolling in the .scrollTo direction, so it neither actually completes it nor aborts it. It then fires a second scrollend event after the element reaches the .scrollTo position. Maybe the first scrollend event is for the user-initiates scroll that is immediately completed as there is already a JS-initiated scroll going on?
• Safari also seems to ignore the user-initiated scroll, end it only fires a scrollend event at the end of the whole operation.

This is the test case that I'm using. I click on the div and then immediately try to scroll up:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="outer" style="width: 200px; height: 200px; overflow-y: scroll;">
    <div id="inner" style="height: 10000px; background-image: linear-gradient(89deg, black, black 50%, white 50%, white)"></div>
  </div>
  <script>
    const outer = document.getElementById('outer');
    const inner = document.getElementById('inner');

    let to = 10_000;

    outer.addEventListener('click', () => {
      outer.scrollBy({ top: to, behavior: 'smooth' });
    });

    outer.addEventListener("scroll", () => {
      console.log("scroll", outer.scrollTop);
    })

    outer.addEventListener("scrollend", (e) => {
      console.log("scrollend", outer.scrollTop, e);
    })

    outer.addEventListener("wheel", (e) => {
      console.log("wheel", e.deltaY);
    })
  </script>
</body>
</html>