[scroll-animations] import scroll-animations WPTs

LayoutTests/TestExpectations

@@ -6812,3 +6812,39 @@ imported/w3c/web-platform-tests/dom/events/scrolling/input-text-scroll-event-whe
 webkit.org/b/263413 media/media-source/media-source-first-sample-pts-non-zero-canplay-without-renderer.html [ Timeout ]
 
 webkit.org/b/263879 http/tests/security/xss-DENIED-script-inject-into-inactive-window2-pson.html [ Pass Failure ]
+
+# webkit.org/b/263870 [scroll-animations] lots of scroll-animations WPT tests are timing out
+imported/w3c/web-platform-tests/scroll-animations/css/animation-fill-outside-range-test.html [ Skip ]
+imported/w3c/web-platform-tests/scroll-animations/css/animation-inactive-outside-range-test.html [ Skip ]
+imported/w3c/web-platform-tests/scroll-animations/css/animation-range-visual-test.html [ Skip ]
+imported/w3c/web-platform-tests/scroll-animations/css/deferred-timeline-composited.html [ Skip ]
+imported/w3c/web-platform-tests/scroll-animations/css/printing/scroll-timeline-default-print.tentative.html [ Skip ]
+imported/w3c/web-platform-tests/scroll-animations/css/scroll-animation-initial-offset.html [ Skip ]
+imported/w3c/web-platform-tests/scroll-animations/css/scroll-timeline-default-iframe.html [ Skip ]
+imported/w3c/web-platform-tests/scroll-animations/css/scroll-timeline-default-quirks-mode.html [ Skip ]
+imported/w3c/web-platform-tests/scroll-animations/css/scroll-timeline-default-writing-mode-rl.html [ Skip ]
+imported/w3c/web-platform-tests/scroll-animations/css/scroll-timeline-default.html [ Skip ]
+imported/w3c/web-platform-tests/scroll-animations/css/scroll-timeline-frame-size-changed.html [ Skip ]
+imported/w3c/web-platform-tests/scroll-animations/css/scroll-timeline-inline-orientation.html [ Skip ]
+imported/w3c/web-platform-tests/scroll-animations/css/scroll-timeline-update-reversed-animation.html [ Skip ]
+imported/w3c/web-platform-tests/scroll-animations/css/view-timeline-range-update-reversed-animation.html [ Skip ]
+imported/w3c/web-platform-tests/scroll-animations/css/view-timeline-range-update.html [ Skip ]
+imported/w3c/web-platform-tests/scroll-animations/css/view-timeline-subject-bounds-update.html [ Skip ]
+imported/w3c/web-platform-tests/scroll-animations/scroll-timelines/animation-with-animatable-interface.html [ Skip ]
+imported/w3c/web-platform-tests/scroll-animations/scroll-timelines/animation-with-display-none.html [ Skip ]
+imported/w3c/web-platform-tests/scroll-animations/scroll-timelines/animation-with-overflow-hidden.html [ Skip ]
+imported/w3c/web-platform-tests/scroll-animations/scroll-timelines/animation-with-root-scroller.html [ Skip ]
+imported/w3c/web-platform-tests/scroll-animations/scroll-timelines/animation-with-transform.html [ Skip ]
+imported/w3c/web-platform-tests/scroll-animations/scroll-timelines/constructor-no-document.html [ Skip ]
+imported/w3c/web-platform-tests/scroll-animations/scroll-timelines/custom-property.html [ Skip ]
+imported/w3c/web-platform-tests/scroll-animations/scroll-timelines/layout-changes-on-percentage-based-timeline.html [ Skip ]
+imported/w3c/web-platform-tests/scroll-animations/scroll-timelines/progress-based-effect-delay.tentative.html [ Skip ]
+imported/w3c/web-platform-tests/scroll-animations/scroll-timelines/set-current-time-before-play.html [ Skip ]
+imported/w3c/web-platform-tests/scroll-animations/scroll-timelines/two-animations-attach-to-same-scroll-timeline-cancel-one.html [ Skip ]
+imported/w3c/web-platform-tests/scroll-animations/scroll-timelines/two-animations-attach-to-same-scroll-timeline.html [ Skip ]
+imported/w3c/web-platform-tests/scroll-animations/view-timelines/range-boundary.html [ Skip ]
+
+# other scroll-animations failures
+webkit.org/b/263871 imported/w3c/web-platform-tests/scroll-animations/css/animation-timeline-none.html [ Failure ]
+webkit.org/b/263872 imported/w3c/web-platform-tests/scroll-animations/css/printing/animation-timeline-none-with-progress-print.tentative.html [ ImageOnlyFailure ]
+webkit.org/b/263873 imported/w3c/web-platform-tests/scroll-animations/css/printing/scroll-timeline-default-iframe-print.html [ ImageOnlyFailure ]

LayoutTests/imported/w3c/resources/import-expectations.json

@@ -177,6 +177,7 @@
     "web-platform-tests/resources/chromium": "skip",
     "web-platform-tests/screen-orientation": "import",
     "web-platform-tests/screen-wake-lock": "import",
+    "web-platform-tests/scroll-animations": "import",
     "web-platform-tests/scroll-to-text-fragment": "import",
     "web-platform-tests/secure-contexts": "import",
     "web-platform-tests/selection": "import",

LayoutTests/imported/w3c/resources/resource-files.json

@@ -7363,6 +7363,27 @@
         "web-platform-tests/resize-observer/devicepixel2-ref.html",
         "web-platform-tests/resize-observer/iframe-same-origin-ref.html",
         "web-platform-tests/resource-timing/iframe-setdomain.sub.html",
+        "web-platform-tests/scroll-animations/crashtests/invalid-animation-range.html",
+        "web-platform-tests/scroll-animations/css/animation-fill-outside-range-ref.html",
+        "web-platform-tests/scroll-animations/css/animation-inactive-outside-range-ref.html",
+        "web-platform-tests/scroll-animations/css/animation-range-visual-test-ref.html",
+        "web-platform-tests/scroll-animations/css/animation-update-ref.html",
+        "web-platform-tests/scroll-animations/css/deferred-timeline-composited-ref.html",
+        "web-platform-tests/scroll-animations/css/printing/animation-timeline-none-with-progress-ref.html",
+        "web-platform-tests/scroll-animations/css/printing/scroll-timeline-default-print-ref.html",
+        "web-platform-tests/scroll-animations/css/printing/scroll-timeline-specified-scroller-ref.html",
+        "web-platform-tests/scroll-animations/css/scroll-animation-initial-offset-ref.html",
+        "web-platform-tests/scroll-animations/css/scroll-timeline-default-iframe-ref.html",
+        "web-platform-tests/scroll-animations/css/scroll-timeline-default-ref.html",
+        "web-platform-tests/scroll-animations/css/scroll-timeline-default-writing-mode-rl-ref.html",
+        "web-platform-tests/scroll-animations/css/scroll-timeline-frame-size-changed-ref.html",
+        "web-platform-tests/scroll-animations/css/scroll-timeline-inline-orientation-ref.html",
+        "web-platform-tests/scroll-animations/scroll-timelines/animation-ref.html",
+        "web-platform-tests/scroll-animations/scroll-timelines/animation-with-overflow-hidden-ref.html",
+        "web-platform-tests/scroll-animations/scroll-timelines/animation-with-root-scroller-ref.html",
+        "web-platform-tests/scroll-animations/scroll-timelines/custom-property-ref.html",
+        "web-platform-tests/scroll-animations/scroll-timelines/progress-based-effect-delay-ref.html",
+        "web-platform-tests/scroll-animations/view-timelines/range-boundary-ref.html",
         "web-platform-tests/scroll-to-text-fragment/client-redirect.html",
         "web-platform-tests/scroll-to-text-fragment/find-range-from-text-directive-target.html",
         "web-platform-tests/scroll-to-text-fragment/force-load-at-top-target.html",

LayoutTests/imported/w3c/web-platform-tests/scroll-animations/META.yml

@@ -0,0 +1,4 @@
+spec: https://drafts.csswg.org/scroll-animations/
+suggested_reviewers:
+  - birtles
+  - graouts

LayoutTests/imported/w3c/web-platform-tests/scroll-animations/crashtests/invalid-animation-range.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<title>Invalid animation range</title>
+<body onload="runTest()">
+  <div id="target"></div>
+</body>
+<script src="../../web-animations/testcommon.js"></script>
+<script>
+  async function runTest() {
+    const anim = target.animate(undefined, {rangeStart: "initial" });
+    await waitForNextFrame();
+    await waitForNextFrame();
+  }
+</script>

LayoutTests/imported/w3c/web-platform-tests/scroll-animations/crashtests/w3c-import.log

@@ -0,0 +1,17 @@
+The tests in this directory were imported from the W3C repository.
+Do NOT modify these tests directly in WebKit.
+Instead, create a pull request on the WPT github:
+	https://github.com/web-platform-tests/wpt
+
+Then run the Tools/Scripts/import-w3c-tests in WebKit to reimport
+
+Do NOT modify or remove this file.
+
+------------------------------------------------------------------------
+Properties requiring vendor prefixes:
+None
+Property values requiring vendor prefixes:
+None
+------------------------------------------------------------------------
+List of files:
+/LayoutTests/imported/w3c/web-platform-tests/scroll-animations/crashtests/invalid-animation-range.html

LayoutTests/imported/w3c/web-platform-tests/scroll-animations/css/animation-duration-auto.tentative-expected.txt

@@ -0,0 +1,7 @@
+
+FAIL A value of auto can be specified for animation-duration assert_equals: expected "0" but got "-1"
+FAIL e.style['animation-duration'] = "auto" should set the property value assert_not_equals: property should be set got disallowed value ""
+FAIL Property animation-duration value 'auto' assert_true: 'auto' is a supported value for animation-duration. expected true got false
+FAIL e.style['animation'] = "auto cubic-bezier(0, -2, 1, 3) -3s 4 reverse both paused anim" should set the property value assert_not_equals: property should be set got disallowed value ""
+FAIL Property animation value 'auto cubic-bezier(0, -2, 1, 3) -3s 4 reverse both paused anim' assert_true: 'auto cubic-bezier(0, -2, 1, 3) -3s 4 reverse both paused anim' is a supported value for animation. expected true got false
+

LayoutTests/imported/w3c/web-platform-tests/scroll-animations/css/animation-duration-auto.tentative.html

@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<title>animation-duration: auto</title>
+<link rel="help" src="https://github.com/w3c/csswg-drafts/issues/6530">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/web-animations/testcommon.js"></script>
+<script src="./support/testcommon.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+<style>
+  #scroller {
+    overflow: hidden;
+    width: 100px;
+    height: 100px;
+  }
+  #scroller > #content {
+    height: 200px;
+    width: 200px;
+  }
+
+  @keyframes anim {
+    from { z-index: 0; }
+    to { z-index: 100; }
+  }
+
+  #scroller {
+    scroll-timeline: --timeline;
+  }
+
+  #element {
+    z-index: -1;
+    animation-name: anim;
+    animation-duration: auto;
+    animation-timeline: --timeline;
+  }
+</style>
+<main>
+  <div id=scroller>
+    <div id=content></div>
+    <div id=element></div>
+  </div>
+</main>
+<script>
+  promise_test(async (t) => {
+    await waitForCSSScrollTimelineStyle();
+    assert_equals(getComputedStyle(element).zIndex, '0');
+  }, 'A value of auto can be specified for animation-duration');
+</script>
+
+<div id="target"></div>
+<script>
+  test_valid_value('animation-duration', 'auto');
+  test_computed_value('animation-duration', 'auto', '0s');
+  test_valid_value('animation', 'auto cubic-bezier(0, -2, 1, 3) -3s 4 reverse both paused anim');
+  test_computed_value('animation',
+    'auto cubic-bezier(0, -2, 1, 3) -3s 4 reverse both paused anim',
+    '0s cubic-bezier(0, -2, 1, 3) -3s 4 reverse both paused anim');
+</script>

LayoutTests/imported/w3c/web-platform-tests/scroll-animations/css/animation-events-expected.txt

@@ -0,0 +1,3 @@
+
+FAIL View timelime generates animationstart and animationend events promise_test: Unhandled rejection with value: object "ReferenceError: Can't find variable: ViewTimeline"
+

LayoutTests/imported/w3c/web-platform-tests/scroll-animations/css/animation-events.html

@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html id="top">
+<meta charset="utf-8">
+<title>View timeline animation events</title>
+<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#events">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/web-animations/testcommon.js"></script>
+<style type="text/css">
+  @keyframes anim {
+    from { transform: translateX(0); }
+    to   { transform: translateX(100px); }
+  }
+  #target {
+    background: green;
+    height: 100px;
+    width: 100px;
+    margin-bottom: 150vh;
+    animation-timeline: view();
+  }
+  .animate {
+    animation:  anim auto;
+  }
+</style>
+<body>
+  <div id="target"></div>
+</body>
+<script type="text/javascript">
+  promise_test(async t => {
+    const target = document.getElementById('target');
+
+    // Create a timeline and advance to the next frame to ensure that the
+    // timeline has a value for currentTime.
+    await waitForNextFrame();
+    const timeline = new ViewTimeline({ subject: target });
+    await waitForNextFrame();
+
+    let animationstart_events = 0;
+    let animationend_events = 0;
+    document.addEventListener('animationstart', () => {
+      animationstart_events++;
+    });
+    document.addEventListener('animationend', () => {
+      animationend_events++;
+    });
+
+    // Start the animation and swap out its timeline while still play-pending
+    // so that it already has a value for current time.
+    target.classList.add('animate');
+    const anim = target.getAnimations();
+    anim.timeline = timeline;
+    // Introduce a style change that will make the timeline state stale when
+    // "ticked" at the start of the next animation frame.
+    target.style = 'margin-top: 150vh';
+
+    assert_false(!!anim.startTime,
+                 'Start time deferred until timeline is updated');
+
+    // Verify that we are not evaluating a start time based on a stale timeline.
+    await waitForNextFrame();
+    await waitForNextFrame();
+    assert_equals(animationstart_events, 0,
+                  'Target initially off-screen and no animationstart event');
+    assert_equals(animationend_events, 0,
+                  'Target initially off-screen and no animationend event');
+
+    const scroller = document.scrollingElement;
+    scroller.scrollTop = target.getBoundingClientRect().top;
+    await waitForNextFrame();
+    await waitForNextFrame();
+
+    assert_equals(animationstart_events, 1,
+                  'scrollstart event received after scrolling into view.');
+    assert_equals(animationend_events, 0,
+                  "No scrollend event until after scrolling out of view");
+
+    scroller.scrollTop = target.getBoundingClientRect().bottom;
+
+    await waitForNextFrame();
+    await waitForNextFrame();
+
+    assert_equals(animationstart_events, 1,
+                  'No additional scrollstart event');
+    assert_equals(animationend_events, 1,
+                  'scrollend event received after scrolling out of view');
+  }, 'View timelime generates animationstart and animationend events');
+</script>

LayoutTests/imported/w3c/web-platform-tests/scroll-animations/css/animation-fill-outside-range-ref.html

@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="help" src="https://drafts.csswg.org/scroll-animations-1/">
+<script src="/web-animations/testcommon.js"></script>
+<style>
+  .scroller {
+    height: 200px;
+    width: 500px;
+    overflow: auto;
+    position: absolute;
+    top: 100px;
+  }
+
+  .anim {
+    position: absolute;
+    width: 100px;
+    height: 100px;
+    background: darkred;
+  }
+  .anim.contain {
+    background: green;
+  }
+  .spacer {
+    height: 1000px;
+  }
+
+  .before {
+    top: 450px;
+  }
+  .after {
+    top: 50px;
+  }
+  .contain {
+    top: 250px;
+  }
+  .indicator {
+    position: fixed;
+    top: 50px;
+  }
+  .contain .indicator {
+    top: 100px;
+  }
+  .contain .indicator:nth-child(2) {
+    left: 200px;
+  }
+
+  .after .indicator {
+    left: 200px;
+  }
+
+  .indicator > div {
+    display: inline-block;
+    width: 25px;
+    height: 25px;
+    position: relative;
+    border-radius: 100%;
+    box-sizing: border-box;
+    border: 2px solid black;
+    padding: 3px;
+    background: lightgray;
+    background-clip: content-box;
+  }
+
+  .indicator > div > div {
+    width: 100%;
+    height: 100%;
+    border-radius: 100%;
+    background: green;
+    opacity: 1;
+    will-change: opacity;
+  }
+
+</style>
+</head>
+<body>
+  <p>All of the activity indicators should be active as the animations should be filling.</p>
+  <div class="scroller">
+    <div class="anim after"><div class="indicator">After cover phase: <div><div></div></div></div></div>
+    <div class="anim before"><div class="indicator">Before cover phase: <div><div></div></div></div></div>
+    <div class="anim contain">
+      <div class="indicator entry">After entry phase: <div><div></div></div></div>
+      <div class="indicator exit">Before exit phase: <div><div></div></div></div>
+    </div>
+    <div class="spacer"></div>
+  </div>
+</body>
+<script>
+  function run() {
+    let scroller = document.querySelector('.scroller');
+    scroller.scrollTo({top: 200});
+  }
+  run();
+</script>
+</html>