Bug 1622419 [wpt PR 22246] - Revert "[ScrollTimeline] Support composited scroll-linked Web Animation", a=testonly
authorAlan Cutter <alancutter@chromium.org>
Sat, 14 Mar 2020 11:30:44 +0000
changeset 518869 2014080dbf937f7a20a88981ba0a90d535ec9308
parent 518868 f321fd5d5975e1a05abf16718c543e4c9d1678ee
child 518870 0fd57ef11ce69399a3d69d663001244956f77340
push id37217
push userccoroiu@mozilla.com
push dateSun, 15 Mar 2020 21:37:59 +0000
treeherdermozilla-central@f9fc9427476e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1622419, 22246, 87438, 87463, 1060974, 1023508, 2084088, 749389, 2100552, 750052
milestone76.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1622419 [wpt PR 22246] - Revert "[ScrollTimeline] Support composited scroll-linked Web Animation", a=testonly Automatic update from web-platform-tests Revert "[ScrollTimeline] Support composited scroll-linked Web Animation" This reverts commit 3254ad50926dbbd809cfa45b611d9081772ce7e8. Reason for revert: virtual/threaded/external/wpt/scroll-animations/two-animations-attach-to-same-scroll-timeline-cancel-one.html flaking on debug. https://ci.chromium.org/p/chromium/builders/ci/Linux%20Tests%20(dbg)(1)/87438 https://test-results.appspot.com/dashboards/flakiness_dashboard.html#testType=blink_web_tests&tests=virtual%2Fthreaded%2Fexternal%2Fwpt%2Fscroll-animations%2Ftwo-animations-attach-to-same-scroll-timeline-cancel-one.html https://test-results.appspot.com/data/layout_results/Linux_Tests__dbg__1_/87463/blink_web_tests/layout-test-results/results.html Bug: 1060974 Original change's description: > [ScrollTimeline] Support composited scroll-linked Web Animation > > This patch integrates ScrollTimeline with cc::Animation. Major changes > include: > 1. blink::ScrollTimeline is able to create its compositor counterpart > 2. cc::ScrollTimeline is attached to cc::AnimationHost upon creation > 3. cc::AnimationHost ticks animations based on their timeline type > 4. Remove scroll_timeline_ from cc::WorkletAnimation and use the unified > animation_timeline_. > 5. Added virtual/threaded/external/wpt/scroll-animations/. > > See [1] for more details. > [1] https://docs.google.com/document/d/1RpJrYIDYHvtu0ia1vPv_EhBfan428QZ2sgsFhtnXb20/edit?usp=sharing > > To sheriffs: if any virtual tests become flaky, please add them to > TestExpectation instead of reverting the change. > > Bug: 1023508 > Change-Id: Ib4aa853bda34ce9b2c0abc943be9f99ac81e799a > Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2084088 > Commit-Queue: Yi Gu <yigu@chromium.org> > Reviewed-by: David Bokan <bokan@chromium.org> > Reviewed-by: Majid Valipour <majidvp@chromium.org> > Cr-Commit-Position: refs/heads/master@{#749389} TBR=bokan@chromium.org,majidvp@chromium.org,yigu@chromium.org # Not skipping CQ checks because original CL landed > 1 day ago. Bug: 1023508 Change-Id: I15f5251d53f3d85936bb345acd00e9ead2f3e7e3 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2100552 Reviewed-by: Alan Cutter <alancutter@chromium.org> Commit-Queue: Alan Cutter <alancutter@chromium.org> Cr-Commit-Position: refs/heads/master@{#750052} -- wpt-commits: f5d634dc5617cd639d24219b212461c186f9c23a wpt-pr: 22246
testing/web-platform/tests/scroll-animations/animation-ref.html
testing/web-platform/tests/scroll-animations/animation-with-display-none.html
testing/web-platform/tests/scroll-animations/animation-with-overflow-hidden-ref.html
testing/web-platform/tests/scroll-animations/animation-with-overflow-hidden.html
testing/web-platform/tests/scroll-animations/animation-with-root-scroller-ref.html
testing/web-platform/tests/scroll-animations/animation-with-root-scroller.html
testing/web-platform/tests/scroll-animations/animation-with-transform.html
testing/web-platform/tests/scroll-animations/two-animations-attach-to-same-scroll-timeline-cancel-one.html
testing/web-platform/tests/scroll-animations/two-animations-attach-to-same-scroll-timeline.html
deleted file mode 100644
--- a/testing/web-platform/tests/scroll-animations/animation-ref.html
+++ /dev/null
@@ -1,45 +0,0 @@
-<!DOCTYPE html>
-<title>Reference for Web Animation with scroll timeline tests</title>
-<style>
-  #box {
-    width: 100px;
-    height: 100px;
-    background-color: green;
-    transform: translate(0, 100px);
-    opacity: 0.5;
-    will-change: transform; /* force compositing */
-  }
-
-  #covered {
-    width: 100px;
-    height: 100px;
-    background-color: red;
-  }
-
-  #scroller {
-    overflow: auto;
-    height: 100px;
-    width: 100px;
-    will-change: transform; /* force compositing */
-  }
-
-  #contents {
-    height: 1000px;
-    width: 100%;
-  }
-</style>
-
-<div id="box"></div>
-<div id="covered"></div>
-<div id="scroller">
-  <div id="contents"></div>
-</div>
-
-<script>
-  window.addEventListener('load', function() {
-    // Move the scroller to halfway.
-    const scroller = document.getElementById("scroller");
-    const maxScroll = scroller.scrollHeight - scroller.clientHeight;
-    scroller.scrollTop = 0.5 * maxScroll;
-  });
-</script>
deleted file mode 100644
--- a/testing/web-platform/tests/scroll-animations/animation-with-display-none.html
+++ /dev/null
@@ -1,74 +0,0 @@
-<html class="reftest-wait">
-<title>Scroll timeline with Web Animation and transition from display:none to display:block</title>
-<link rel="help" href="https://drafts.csswg.org/scroll-animations/">
-<meta name="assert" content="Scroll timeline should properly handle going from display:none to display:block">
-<link rel="match" href="animation-ref.html">
-
-<script src="/web-animations/testcommon.js"></script>
-<script src="/common/reftest-wait.js"></script>
-
-<style>
-  #box {
-    width: 100px;
-    height: 100px;
-    background-color: green;
-  }
-
-  #covered {
-    width: 100px;
-    height: 100px;
-    background-color: red;
-  }
-
-  #scroller {
-    overflow: auto;
-    height: 100px;
-    width: 100px;
-    will-change: transform; /* force compositing */
-  }
-
-  .removed {
-    display: none;
-  }
-
-  #contents {
-    height: 1000px;
-    width: 100%;
-  }
-</style>
-
-<div id="box"></div>
-<div id="covered"></div>
-<div id="scroller">
-  <div id="contents"></div>
-</div>
-
-<script>
-  const box = document.getElementById('box');
-  const effect = new KeyframeEffect(box,
-    [
-    { transform: 'translateY(0)', opacity: 1 },
-    { transform: 'translateY(200px)', opacity: 0 }
-    ], {
-      duration: 1000,
-    }
-  );
-
-  const scroller = document.getElementById('scroller');
-  scroller.classList.add('removed');
-  const timeline = new ScrollTimeline({ scrollSource: scroller, timeRange: 1000, orientation: 'block' });
-  const animation = new Animation(effect, timeline);
-  animation.play();
-
-  waitForAnimationFrames(2).then(_ => {
-    scroller.classList.remove('removed');
-    animation.ready.then(() => {
-      const maxScroll = scroller.scrollHeight - scroller.clientHeight;
-      scroller.scrollTop = 0.5 * maxScroll;
-
-      waitForAnimationFrames(2).then(_ => {
-        takeScreenshot();
-      });
-    });
-  });
-</script>
deleted file mode 100644
--- a/testing/web-platform/tests/scroll-animations/animation-with-overflow-hidden-ref.html
+++ /dev/null
@@ -1,45 +0,0 @@
-<!DOCTYPE html>
-<title>Scroll timeline with Web Animation using a scroller with overflow hidden</title>
-<style>
-  #box {
-    width: 100px;
-    height: 100px;
-    background-color: green;
-    transform: translate(0, 100px);
-    opacity: 0.5;
-    will-change: transform; /* force compositing */
-  }
-
-  #covered {
-    width: 100px;
-    height: 100px;
-    background-color: red;
-  }
-
-  #scroller {
-    overflow: hidden;
-    height: 100px;
-    width: 100px;
-    will-change: transform; /* force compositing */
-  }
-
-  #contents {
-    height: 1000px;
-    width: 100%;
-  }
-</style>
-
-<div id="box"></div>
-<div id="covered"></div>
-<div id="scroller">
-  <div id="contents"></div>
-</div>
-
-<script>
-  window.addEventListener('load', function() {
-    // Move the scroller to halfway.
-    const scroller = document.getElementById("scroller");
-    const maxScroll = scroller.scrollHeight - scroller.clientHeight;
-    scroller.scrollTop = 0.5 * maxScroll;
-  });
-</script>
deleted file mode 100644
--- a/testing/web-platform/tests/scroll-animations/animation-with-overflow-hidden.html
+++ /dev/null
@@ -1,65 +0,0 @@
-<html class="reftest-wait">
-<title>Scroll timeline with Web Animation using a scroller with overflow hidden</title>
-<link rel="help" href="https://drafts.csswg.org/scroll-animations/">
-<meta name="assert" content="Web animation correctly updates values when using a overflow: hidden on the scroller being used as the source for the ScrollTimeline">
-<link rel="match" href="animation-with-overflow-hidden-ref.html">
-
-<script src="/web-animations/testcommon.js"></script>
-<script src="/common/reftest-wait.js"></script>
-
-<style>
-  #box {
-    width: 100px;
-    height: 100px;
-    background-color: green;
-  }
-
-  #covered {
-    width: 100px;
-    height: 100px;
-    background-color: red;
-  }
-
-  #scroller {
-    overflow: hidden;
-    height: 100px;
-    width: 100px;
-  }
-
-  #contents {
-    height: 1000px;
-    width: 100%;
-  }
-</style>
-
-<div id="box"></div>
-<div id="covered"></div>
-<div id="scroller">
-  <div id="contents"></div>
-</div>
-
-<script>
-  const box = document.getElementById('box');
-  const effect = new KeyframeEffect(box,
-    [
-      {transform: 'translateY(0)', opacity: 1},
-      {transform: 'translateY(200px)', opacity: 0}
-    ], {
-      duration: 1000,
-    }
-  );
-
-  const scroller = document.getElementById('scroller');
-  const timeline = new ScrollTimeline({ scrollSource: scroller, timeRange: 1000, orientation: 'block' });
-  const animation = new Animation(effect, timeline);
-  animation.play();
-
-  animation.ready.then(() => {
-    // Move the scroller to the halfway point.
-    const maxScroll = scroller.scrollHeight - scroller.clientHeight;
-    scroller.scrollTop = 0.5 * maxScroll;
-    waitForAnimationFrames(2).then(_ => {
-      takeScreenshot();
-    });
-  });
-</script>
deleted file mode 100644
--- a/testing/web-platform/tests/scroll-animations/animation-with-root-scroller-ref.html
+++ /dev/null
@@ -1,37 +0,0 @@
-<!DOCTYPE html>
-<title>Reference for Scroll timeline with Web Animation using the root scroller</title>
-<style>
-  html {
-    min-height: 100%;
-    min-width: 100%;
-    padding-bottom: 100px;
-    padding-right: 100px;
-  }
-
-  #box {
-    width: 100px;
-    height: 100px;
-    background-color: green;
-    transform: translate(0, 100px);
-    opacity: 0.5;
-    will-change: transform; /* force compositing */
-  }
-
-  #covered {
-    width: 100px;
-    height: 100px;
-    background-color: red;
-  }
-</style>
-
-<div id="box"></div>
-<div id="covered"></div>
-
-<script>
-  window.addEventListener('load', function() {
-    // Move the scroller to halfway.
-    const scroller = document.scrollingElement;
-    const maxScroll = scroller.scrollHeight - scroller.clientHeight;
-    scroller.scrollTop = 0.5 * maxScroll;
-  });
-</script>
deleted file mode 100644
--- a/testing/web-platform/tests/scroll-animations/animation-with-root-scroller.html
+++ /dev/null
@@ -1,59 +0,0 @@
-<html class="reftest-wait">
-<title>Scroll timeline with Web Animation using the root scroller</title>
-<link rel="help" href="https://drafts.csswg.org/scroll-animations/">
-<meta name="assert" content="Web animation correctly updates values when using the root scroller as the source for the ScrollTimeline">
-<link rel="match" href="animation-with-root-scroller-ref.html">
-
-<script src="/web-animations/testcommon.js"></script>
-<script src="/common/reftest-wait.js"></script>
-
-<style>
-  html {
-    min-height: 100%;
-    min-width: 100%;
-    padding-bottom: 100px;
-    padding-right: 100px;
-  }
-
-  #box {
-    width: 100px;
-    height: 100px;
-    background-color: green;
-  }
-
-  #covered {
-    width: 100px;
-    height: 100px;
-    background-color: red;
-  }
-</style>
-
-<div id="box"></div>
-<div id="covered"></div>
-
-<script>
-  const box = document.getElementById('box');
-  const effect = new KeyframeEffect(box,
-    [
-      {transform: 'translateY(0)', opacity: 1},
-      {transform: 'translateY(200px)', opacity: 0}
-    ], {
-      duration: 1000,
-    }
-  );
-
-  const scroller = document.scrollingElement;
-  const timeline = new ScrollTimeline({ scrollSource: scroller, timeRange: 1000, orientation: 'block' });
-  const animation = new Animation(effect, timeline);
-  animation.play();
-
-  animation.ready.then(() => {
-    // Move the scroller to the halfway point.
-    const maxScroll = scroller.scrollHeight - scroller.clientHeight;
-    scroller.scrollTop = 0.5 * maxScroll;
-
-    waitForAnimationFrames(2).then(_ => {
-      takeScreenshot();
-    });
-  });
-</script>
deleted file mode 100644
--- a/testing/web-platform/tests/scroll-animations/animation-with-transform.html
+++ /dev/null
@@ -1,67 +0,0 @@
-<html class="reftest-wait">
-<title>Basic use of scroll timeline with Web Animation</title>
-<link rel="help" href="https://drafts.csswg.org/scroll-animations/">
-<meta name="assert" content="Should be able to use the scroll timeline to drive the animation timing">
-<link rel="match" href="animation-ref.html">
-
-<script src="/web-animations/testcommon.js"></script>
-<script src="/common/reftest-wait.js"></script>
-
-<style>
-  #box {
-    width: 100px;
-    height: 100px;
-    background-color: green;
-  }
-
-  #covered {
-    width: 100px;
-    height: 100px;
-    background-color: red;
-  }
-
-  #scroller {
-    overflow: auto;
-    height: 100px;
-    width: 100px;
-    will-change: transform; /* force compositing */
-  }
-
-  #contents {
-    height: 1000px;
-    width: 100%;
-  }
-</style>
-
-<div id="box"></div>
-<div id="covered"></div>
-<div id="scroller">
-  <div id="contents"></div>
-</div>
-
-<script>
-  const box = document.getElementById('box');
-  const effect = new KeyframeEffect(box,
-    [
-    { transform: 'translateY(0)', opacity: 1},
-    { transform: 'translateY(200px)', opacity: 0}
-    ], {
-      duration: 1000,
-    }
-  );
-
-  const scroller = document.getElementById('scroller');
-  const timeline = new ScrollTimeline({ scrollSource: scroller, timeRange: 1000, orientation: 'block' });
-  const animation = new Animation(effect, timeline);
-  animation.play();
-
-  animation.ready.then(() => {
-    // Move the scroller to the halfway point.
-    const maxScroll = scroller.scrollHeight - scroller.clientHeight;
-    scroller.scrollTop = 0.5 * maxScroll;
-
-    waitForAnimationFrames(2).then(_ => {
-        takeScreenshot();
-    });
-  });
-</script>
deleted file mode 100644
--- a/testing/web-platform/tests/scroll-animations/two-animations-attach-to-same-scroll-timeline-cancel-one.html
+++ /dev/null
@@ -1,83 +0,0 @@
-<html class="reftest-wait">
-<title>Scroll timeline shared by two animation, one gets cancelled</title>
-<link rel="help" href="https://drafts.csswg.org/scroll-animations/">
-<meta name="assert" content="Cancelling animations should not affect other
-                   animation that is attached to the same timeline.">
-<link rel="match" href="animation-ref.html">
-
-<script src="/web-animations/testcommon.js"></script>
-<script src="/common/reftest-wait.js"></script>
-
-<style>
-  #box {
-    width: 100px;
-    height: 100px;
-    background-color: green;
-  }
-
-  #covered {
-    width: 100px;
-    height: 100px;
-    background-color: red;
-  }
-
-  #scroller {
-    overflow: auto;
-    height: 100px;
-    width: 100px;
-    will-change: transform; /* force compositing */
-  }
-
-  #contents {
-    height: 1000px;
-    width: 100%;
-  }
-</style>
-
-<div id="box"></div>
-<div id="covered"></div>
-<div id="scroller">
-  <div id="contents"></div>
-</div>
-
-<script>
-  const box = document.getElementById('box');
-  const effect = new KeyframeEffect(box,
-    [
-    { transform: 'translateY(0)', opacity: 1},
-    { transform: 'translateY(200px)', opacity: 0}
-    ], {
-      duration: 1000,
-    }
-  );
-  const temporary_effect = new KeyframeEffect(box,
-    [
-    { transform: 'translateX(0)'},
-    { transform: 'translateX(200px)'}
-    ], {
-      duration: 1000,
-    }
-  );
-
-  const scroller = document.getElementById('scroller');
-  const timeline = new ScrollTimeline({ scrollSource: scroller, timeRange: 1000, orientation: 'block' });
-  const animation = new Animation(effect, timeline);
-  const temporary_animation = new Animation(temporary_effect, timeline);
-  animation.play();
-  temporary_animation.play();
-
-  Promise.all([animation.ready, temporary_animation.ready]).then(() => {
-    temporary_animation.cancel();
-    temporary_animation.ready.then(() => {
-      waitForAnimationFrames(2).then(_ => {
-        // Move the scroller to the halfway point.
-        const maxScroll = scroller.scrollHeight - scroller.clientHeight;
-        scroller.scrollTop = 0.5 * maxScroll;
-
-        waitForAnimationFrames(2).then(_ => {
-            takeScreenshot();
-        });
-      });
-    });
-  });
-</script>
deleted file mode 100644
--- a/testing/web-platform/tests/scroll-animations/two-animations-attach-to-same-scroll-timeline.html
+++ /dev/null
@@ -1,78 +0,0 @@
-<html class="reftest-wait">
-<title>Scroll timeline shared by two animation</title>
-<link rel="help" href="https://drafts.csswg.org/scroll-animations/">
-<meta name="assert" content="Should be able to use the same scroll timeline to
-drive two animations">
-<link rel="match" href="animation-ref.html">
-
-<script src="/web-animations/testcommon.js"></script>
-<script src="/common/reftest-wait.js"></script>
-
-<style>
-  #box {
-    width: 100px;
-    height: 100px;
-    background-color: green;
-  }
-
-  #covered {
-    width: 100px;
-    height: 100px;
-    background-color: red;
-  }
-
-  #scroller {
-    overflow: auto;
-    height: 100px;
-    width: 100px;
-    will-change: transform; /* force compositing */
-  }
-
-  #contents {
-    height: 1000px;
-    width: 100%;
-  }
-</style>
-
-<div id="box"></div>
-<div id="covered"></div>
-<div id="scroller">
-  <div id="contents"></div>
-</div>
-
-<script>
-  const box = document.getElementById('box');
-  const transform_effect = new KeyframeEffect(box,
-    [
-    { transform: 'translateY(0)'},
-    { transform: 'translateY(200px)'}
-    ], {
-      duration: 1000,
-    }
-  );
-  const opacity_effect = new KeyframeEffect(box,
-    [
-    { opacity: 1},
-    { opacity: 0}
-    ], {
-      duration: 1000,
-    }
-  );
-
-  const scroller = document.getElementById('scroller');
-  const timeline = new ScrollTimeline({ scrollSource: scroller, timeRange: 1000, orientation: 'block' });
-  const transform_animation = new Animation(transform_effect, timeline);
-  transform_animation.play();
-  const opacity_animation = new Animation(opacity_effect, timeline);
-  opacity_animation.play();
-
-  Promise.all([transform_animation.ready, opacity_animation.ready]).then(() => {
-    // Move the scroller to the halfway point.
-    const maxScroll = scroller.scrollHeight - scroller.clientHeight;
-    scroller.scrollTop = 0.5 * maxScroll;
-
-    waitForAnimationFrames(2).then(_ => {
-        takeScreenshot();
-    });
-  });
-</script>