Update web-platform-tests to revision fa41b43ac93bc2fdc2427a4378dc3754d483cdda

tests/wpt/web-platform-tests/web-animations/interfaces/Animatable/animate.html

@@ -241,18 +241,28 @@ promise_test(async t => {
 }, 'Element.animate() does NOT trigger a style change event');
 
 // Tests on pseudo-elements
+// Some tests occur twice (on pseudo-elements with and without content)
+// in order to test both code paths for tree-abiding pseudo-elements in blink.
 
 test(t => {
   const div = createDiv(t);
   div.classList.add('pseudo');
+  getComputedStyle(div,"::before").content; // Sync style
   const anim = div.animate(null, {pseudoElement: '::before'});
   assert_class_string(anim, 'Animation', 'The returned object is an Animation');
 }, 'animate() with pseudoElement parameter creates an Animation object');
 
+test(t => {
+  const div = createDiv(t);
+  const anim = div.animate(null, {pseudoElement: '::before'});
+  assert_class_string(anim, 'Animation', 'The returned object is an Animation');
+}, 'animate() with pseudoElement parameter without content creates an Animation object');
+
 test(t => {
   const div = createDiv(t);
   div.classList.add('pseudo');
   div.style.display = 'list-item';
+  getComputedStyle(div,"::marker").content; // Sync style
   const anim = div.animate(null, {pseudoElement: '::marker'});
   assert_class_string(anim, 'Animation', 'The returned object is an Animation for ::marker');
 }, 'animate() with pseudoElement parameter  creates an Animation object for ::marker');
@@ -268,31 +278,45 @@ test(t => {
 test(t => {
   const div = createDiv(t);
   div.classList.add('pseudo');
+  getComputedStyle(div,"::before").content; // Sync style
   const anim = div.animate(null, {pseudoElement: '::before'});
+  assert_equals(anim.effect.target, div, 'The returned element has the correct target element');
   assert_equals(anim.effect.pseudoElement, '::before',
-                'The returned Animation targets to the correct selector');
+                'The returned Animation targets the correct selector');
 }, 'animate() with pseudoElement an Animation object targeting ' +
-   'to the correct pseudo-element');
+   'the correct pseudo-element');
+
+test(t => {
+  const div = createDiv(t);
+  const anim = div.animate(null, {pseudoElement: '::before'});
+  assert_equals(anim.effect.target, div, 'The returned element has the correct target element');
+  assert_equals(anim.effect.pseudoElement, '::before',
+                'The returned Animation targets the correct selector');
+}, 'animate() with pseudoElement without content creates an Animation object targeting ' +
+   'the correct pseudo-element');
 
 test(t => {
   const div = createDiv(t);
   div.classList.add('pseudo');
   div.style.display = 'list-item';
+  getComputedStyle(div,"::marker").content; // Sync style
   const anim = div.animate(null, {pseudoElement: '::marker'});
+  assert_equals(anim.effect.target, div, 'The returned element has the correct target element');
   assert_equals(anim.effect.pseudoElement, '::marker',
-                'The returned Animation targets to the correct selector');
+                'The returned Animation targets the correct selector');
 }, 'animate() with pseudoElement an Animation object targeting ' +
-   'to the correct pseudo-element for ::marker');
+   'the correct pseudo-element for ::marker');
 
 test(t => {
   const div = createDiv(t);
   div.classList.add('pseudo');
   div.textContent = 'foo';
   const anim = div.animate(null, {pseudoElement: '::first-line'});
+  assert_equals(anim.effect.target, div, 'The returned element has the correct target element');
   assert_equals(anim.effect.pseudoElement, '::first-line',
-                'The returned Animation targets to the correct selector');
+                'The returned Animation targets the correct selector');
 }, 'animate() with pseudoElement an Animation object targeting ' +
-   'to the correct pseudo-element for ::first-line');
+   'the correct pseudo-element for ::first-line');
 
 </script>
 </body>

tests/wpt/web-platform-tests/web-animations/interfaces/KeyframeEffect/target.html

@@ -1,11 +1,17 @@
 <!DOCTYPE html>
 <meta charset=utf-8>
-<title>KeyframeEffect.target</title>
+<title>KeyframeEffect.target and .pseudoElement</title>
 <link rel="help"
   href="https://drafts.csswg.org/web-animations/#dom-keyframeeffect-target">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="../../testcommon.js"></script>
+<style>
+  .before::before {content: 'foo'; display: inline-block;}
+  .after::after {content: 'bar'; display: inline-block;}
+  .pseudoa::before, .pseudoc::before {margin-left: 10px;}
+  .pseudob::before, .pseudoc::after {margin-left: 20px;}
+</style>
 <body>
 <div id="log"></div>
 <script>
@@ -105,5 +111,151 @@ promise_test(async t => {
   await waitForNextFrame();
 }, 'Target element can be set to a foreign element');
 
+// Pseudo-element tests
+// (testing target and pseudoElement in these cases)
+// Since blink uses separate code paths for handling pseudo-element styles
+// depending on whether content is set (putting the pseudo-element in the layout),
+// we run tests on both cases.
+for (const hasContent of [true, false]){
+  test(t => {
+    const d = createDiv(t);
+    d.classList.add('pseudoa');
+    if (hasContent) {
+      d.classList.add('before');
+      getComputedStyle(d,"::before").content; // Sync style
+    }
+
+    const effect = new KeyframeEffect(null, gKeyFrames, 100 * MS_PER_SEC);
+    const anim = new Animation(effect, document.timeline);
+    anim.play();
+
+    anim.currentTime = 50 * MS_PER_SEC;
+    assert_equals(getComputedStyle(d, '::before').marginLeft, '10px',
+                  'Value at 50% progress before setting new target');
+    effect.target = d;
+    effect.pseudoElement = '::before';
+
+    assert_equals(effect.target, d, "Target element is set correctly");
+    assert_equals(effect.pseudoElement, '::before', "Target pseudo-element set correctly");
+    assert_equals(getComputedStyle(d, '::before').marginLeft, '50px',
+                  'Value at 50% progress after setting new target');
+  }, "Change target from null to " + (hasContent ? "an existing" : "a non-existing") +
+     " pseudoElement setting target first.");
+
+  test(t => {
+    const d = createDiv(t);
+    d.classList.add('pseudoa');
+    if (hasContent) {
+      d.classList.add('before');
+      getComputedStyle(d,"::before").content; // Sync style
+    }
+
+    const effect = new KeyframeEffect(null, gKeyFrames, 100 * MS_PER_SEC);
+    const anim = new Animation(effect, document.timeline);
+    anim.play();
+
+    anim.currentTime = 50 * MS_PER_SEC;
+    assert_equals(getComputedStyle(d, '::before').marginLeft, '10px',
+                  'Value at 50% progress before setting new target');
+    effect.pseudoElement = '::before';
+    effect.target = d;
+
+    assert_equals(effect.target, d, "Target element is set correctly");
+    assert_equals(effect.pseudoElement, '::before', "Target pseudo-element set correctly");
+    assert_equals(getComputedStyle(d, '::before').marginLeft, '50px',
+                  'Value at 50% progress after setting new target');
+  }, "Change target from null to " + (hasContent ? "an existing" : "a non-existing") +
+     " pseudoElement setting pseudoElement first.");
+
+  test(t => {
+    const d = createDiv(t);
+    d.classList.add('pseudoa');
+    if (hasContent) {
+      d.classList.add('before');
+      getComputedStyle(d,"::before").content; // Sync style
+    }
+    const anim = d.animate(gKeyFrames, {duration: 100 * MS_PER_SEC, pseudoElement: '::before'});
+
+    anim.currentTime = 50 * MS_PER_SEC;
+    anim.effect.pseudoElement = null;
+    assert_equals(anim.effect.target, d,
+                  "Animation targets specified element (target element)");
+    assert_equals(anim.effect.pseudoElement, null,
+                  "Animation targets specified element (null pseudo-selector)");
+    assert_equals(getComputedStyle(d, '::before').marginLeft, '10px',
+                  'Value of 1st element (currently not targeted) after ' +
+                  'changing the effect target');
+    assert_equals(getComputedStyle(d).marginLeft, '50px',
+                  'Value of 2nd element (currently targeted) after ' +
+                  'changing the effect target');
+  }, "Change target from " + (hasContent ? "an existing" : "a non-existing") + " pseudo-element to the originating element.");
+
+  for (const prevHasContent of [true, false]) {
+    test(t => {
+      const a = createDiv(t);
+      a.classList.add('pseudoa');
+      const b = createDiv(t);
+      b.classList.add('pseudob');
+      if (prevHasContent) {
+        a.classList.add('before');
+        getComputedStyle(a,"::before").content; // Sync style
+      }
+      if (hasContent) {
+        b.classList.add('before');
+        getComputedStyle(b,"::before").content; // Sync style
+      }
+
+      const anim = a.animate(gKeyFrames, {duration: 100 * MS_PER_SEC, pseudoElement: '::before'});
+
+      anim.currentTime = 50 * MS_PER_SEC;
+      anim.effect.target = b;
+      assert_equals(anim.effect.target, b,
+                    "Animation targets specified pseudo-element (target element)");
+      assert_equals(anim.effect.pseudoElement, '::before',
+                    "Animation targets specified pseudo-element (pseudo-selector)");
+      assert_equals(getComputedStyle(a, '::before').marginLeft, '10px',
+                    'Value of 1st element (currently not targeted) after ' +
+                    'changing the effect target');
+      assert_equals(getComputedStyle(b, '::before').marginLeft, '50px',
+                    'Value of 2nd element (currently targeted) after ' +
+                    'changing the effect target');
+    }, "Change target from " + (prevHasContent ? "an existing" : "a non-existing") +
+        " to a different " + (hasContent ? "existing" : "non-existing") +
+        " pseudo-element by setting target.");
+
+    test(t => {
+      const d = createDiv(t);
+      d.classList.add('pseudoc');
+      if (prevHasContent) {
+        d.classList.add('before');
+        getComputedStyle(d,"::before").content; // Sync style
+      }
+      if (hasContent) {
+        d.classList.add('after');
+        getComputedStyle(d,"::after").content; // Sync style
+      }
+
+      const anim = d.animate(gKeyFrames, {duration: 100 * MS_PER_SEC, pseudoElement: '::before'});
+
+      anim.currentTime = 50 * MS_PER_SEC;
+      anim.effect.pseudoElement = '::after';
+      assert_equals(anim.effect.target, d,
+                    "Animation targets specified pseudo-element (target element)");
+      assert_equals(anim.effect.pseudoElement, '::after',
+                    "Animation targets specified pseudo-element (pseudo-selector)");
+      assert_equals(getComputedStyle(d, '::before').marginLeft, '10px',
+                    'Value of 1st element (currently not targeted) after ' +
+                    'changing the effect target');
+      assert_equals(getComputedStyle(d, '::after').marginLeft, '50px',
+                    'Value of 2nd element (currently targeted) after ' +
+                    'changing the effect target');
+    }, "Change target from " + (prevHasContent ? "an existing" : "a non-existing") +
+        " to a different " + (hasContent ? "existing" : "non-existing") +
+        " pseudo-element by setting pseudoElement.");
+  }
+}
+
+
+
 </script>
 </body>

tests/wpt/web-platform-tests/web-animations/timing-model/animations/reverse-running-animation-ref.html

@@ -1,17 +1,18 @@
 <!DOCTYPE html>
 <title>Reference for reverse running animation</title>
 <style>
-  #box {
-    background: blue;
-    height: 40px;
-    width: 40px;
-    transform: translateX(100px);
-    will-change: transform;
+  #notes {
+    position: absolute;
+    left: 0px;
+    top: 100px;
+  }
+  body {
+    backgrond: white;
   }
 </style>
 <body>
-  <div id="box"></div>
-  <p>This test reverses the animation shortly after the box starts moving. If
-     the box doesn't move back to its original position, the test has failed.
+  <p id="notes">
+    This test reverses the animation shortly after the box starts moving. If
+    any blue pixels are visible the test has failed.
   </p>
 </body>

tests/wpt/web-platform-tests/web-animations/timing-model/animations/reverse-running-animation.html

@@ -6,36 +6,63 @@
 <link rel="match" href="reverse-running-animation-ref.html">
 <script src="/common/reftest-wait.js"></script>
 <style>
+  #box, #overlay {
+    /* Add a border to ensure that anti-aliasing does not leak blue pixels
+       outside of the  element's bounds. */
+    border: 1px solid white;
+    height: 40px;
+    position: absolute;
+    top: 40px;
+    width: 40px;
+  }
   #box {
     background: blue;
-    height: 40px;
-    width: 40px;
+    left: 40px;
+    z-index: 1;
+  }
+  #overlay {
+    background: white;
+    left: 140px;
+    z-index: 2;
+  }
+  #notes {
+    position: absolute;
+    left: 0px;
+    top: 100px;
+  }
+  body {
+    backgrond: white;
   }
 </style>
 
 <body>
   <div id="box"></div>
-   <p>This test reverses the animation shortly after the box starts moving. If
-      the box doesn't move back to its original position, the test has failed.
-   </p>
+  <div id="overlay"></div>
+  <p id="notes">
+    This test reverses the animation shortly after the box starts moving. If
+    any blue pixels are visible the test has failed.
+  </p>
 </body>
 <script>
   onload = function() {
-    const elem = document.getElementById('box');
-    const anim = elem.animate([
-        { transform: 'translateX(100px)' },
-        { transform: 'translateX(100px)' },
-        { transform: 'translateX(200px)' },
-        { transform: 'translateX(200px)' }
-      ], {
-        duration: 1000
+    // Double rAF to ensure that we are not bogged down during initialization
+    // and the compositor is ready.
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        const elem = document.getElementById('box');
+        const anim = elem.animate([
+            { transform: 'translateX(100px)' },
+            { transform: 'translateX(100px)' },
+            { transform: 'translateX(200px)' },
+            { transform: 'translateX(200px)' }
+          ], {
+            duration: 1000
+          });
+        setTimeout(() => {
+          anim.reverse();
+        }, 500);
+        takeScreenshotDelayed(900);
       });
-
-    anim.ready.then(() => {
-      setTimeout(() => {
-        anim.reverse();
-      }, 500);
-      takeScreenshotDelayed(900);
     });
   };
 </script>

tests/wpt/web-platform-tests/web-animations/timing-model/animations/setting-the-current-time-of-an-animation.html

@@ -67,5 +67,74 @@ promise_test(async t => {
 }, 'Setting the current time of a pausing animation applies a pending playback'
    + ' rate');
 
+
+// The following tests verify that currentTime can be set outside of the normal
+// bounds of an animation.
+
+promise_test(async t => {
+  const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
+  await anim.ready;
+
+  anim.currentTime = 200 * MS_PER_SEC;
+  assert_equals(anim.playState, 'finished');
+  assert_time_equals_literal(anim.currentTime, 200 * MS_PER_SEC);
+}, 'Setting the current time after the end with a positive playback rate');
+
+promise_test(async t => {
+  const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
+  await anim.ready;
+
+  anim.currentTime = -100 * MS_PER_SEC;
+  assert_equals(anim.playState, 'running');
+  assert_time_equals_literal(anim.currentTime, -100 * MS_PER_SEC);
+
+  await waitForAnimationFrames(2);
+  assert_greater_than(anim.currentTime, -100 * MS_PER_SEC);
+}, 'Setting a negative current time with a positive playback rate');
+
+promise_test(async t => {
+  const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
+  anim.updatePlaybackRate(-1);
+  await anim.ready;
+
+  anim.currentTime = 200 * MS_PER_SEC;
+  assert_equals(anim.playState, 'running');
+  assert_time_equals_literal(anim.currentTime, 200 * MS_PER_SEC);
+
+  await waitForAnimationFrames(2);
+  assert_less_than(anim.currentTime, 200 * MS_PER_SEC);
+}, 'Setting the current time after the end with a negative playback rate');
+
+promise_test(async t => {
+  const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
+  anim.updatePlaybackRate(-1);
+  await anim.ready;
+
+  anim.currentTime = -100 * MS_PER_SEC;
+  assert_equals(anim.playState, 'finished');
+  assert_time_equals_literal(anim.currentTime, -100 * MS_PER_SEC);
+}, 'Setting a negative current time with a negative playback rate');
+
+promise_test(async t => {
+  const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
+  anim.updatePlaybackRate(0);
+  await anim.ready;
+
+  // An animation with a playback rate of zero is never in the finished state
+  // even if currentTime is outside the normal range of [0, effect end].
+  anim.currentTime = 200 * MS_PER_SEC;
+  assert_equals(anim.playState, 'running');
+  assert_time_equals_literal(anim.currentTime, 200 * MS_PER_SEC);
+  await waitForAnimationFrames(2);
+  assert_time_equals_literal(anim.currentTime, 200 * MS_PER_SEC);
+
+  anim.currentTime = -200 * MS_PER_SEC;
+  assert_equals(anim.playState, 'running');
+  assert_time_equals_literal(anim.currentTime, -200 * MS_PER_SEC);
+  await waitForAnimationFrames(2);
+  assert_time_equals_literal(anim.currentTime, -200 * MS_PER_SEC);
+
+}, 'Setting the current time on an animation with a zero playback rate');
+
 </script>
 </body>

tests/wpt/web-platform-tests/web-animations/timing-model/animations/setting-the-playback-rate-of-an-animation.html

@@ -57,5 +57,54 @@ promise_test(async t => {
   assert_equals(animation.playbackRate, 1);
 }, 'Setting the playback rate should clear any pending playback rate');
 
+promise_test(async t => {
+  const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
+  animation.currentTime = 50 * MS_PER_SEC;
+  animation.pause();
+  await animation.ready;
+  animation.playbackRate = 2;
+  // Ensure that the animation remains paused and current time is preserved.
+  assert_equals(animation.playState, 'paused');
+  assert_time_equals_literal(animation.currentTime, 50 * MS_PER_SEC);
+}, 'Setting the playback rate while paused preserves the current time and '
+    + 'state');
+
+promise_test(async t => {
+  const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
+  animation.currentTime = 150 * MS_PER_SEC;
+  await animation.ready;
+  animation.playbackRate = 2;
+  // Ensure that current time is preserved and does not snap to the effect end
+  // time.
+  assert_equals(animation.playState, 'finished');
+  assert_time_equals_literal(animation.currentTime, 150 * MS_PER_SEC);
+}, 'Setting the playback rate while finished preserves the current time');
+
+promise_test(async t => {
+  const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
+  animation.currentTime = 150 * MS_PER_SEC;
+  await animation.ready;
+  assert_equals(animation.playState, 'finished');
+  animation.playbackRate = -1;
+  // Ensure that current time does not snap to the effect end time and that the
+  // animation resumes playing.
+  assert_equals(animation.playState, 'running');
+  assert_time_equals_literal(animation.currentTime, 150 * MS_PER_SEC);
+  await waitForAnimationFrames(2);
+  assert_less_than(animation.currentTime, 150 * MS_PER_SEC);
+}, 'Reversing the playback rate while finished restarts the animation');
+
+
+promise_test(async t => {
+  const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
+  animation.currentTime = 50 * MS_PER_SEC;
+  await animation.ready;
+  animation.playbackRate = 0;
+  // Ensure that current time does not drift.
+  assert_equals(animation.playState, 'running');
+  await waitForAnimationFrames(2);
+  assert_time_equals_literal(animation.currentTime, 50 * MS_PER_SEC);
+}, 'Setting a zero playback rate while running preserves the current time');
+
 </script>
 </body>

tests/wpt/web-platform-tests/web-animations/timing-model/animations/setting-the-start-time-of-an-animation.html

@@ -266,5 +266,36 @@ promise_test(async t => {
   assert_time_equals_literal(parseInt(anim.currentTime.toPrecision(5), 10), 50 * MS_PER_SEC);
 }, 'Setting the start time of a playing animation applies a pending playback rate');
 
+promise_test(async t => {
+  const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
+  await anim.ready;
+  assert_equals(anim.playState, 'running');
+
+  // Setting the start time updates the finished state. The hold time is not
+  // constrained by the effect end time.
+  anim.startTime = -200 * MS_PER_SEC;
+  assert_equals(anim.playState, 'finished');
+
+  assert_times_equal(anim.currentTime,
+                     document.timeline.currentTime + 200 * MS_PER_SEC);
+}, 'Setting the start time on a running animation updates the play state');
+
+promise_test(async t => {
+  const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
+  await anim.ready;
+
+  // Setting the start time updates the finished state. The hold time is not
+  // constrained by the normal range of the animation time.
+  anim.currentTime = 100 * MS_PER_SEC;
+  assert_equals(anim.playState, 'finished');
+  anim.playbackRate = -1;
+  assert_equals(anim.playState, 'running');
+  anim.startTime = -200 * MS_PER_SEC;
+  assert_equals(anim.playState, 'finished');
+  assert_times_equal(anim.currentTime,
+                     -document.timeline.currentTime - 200 * MS_PER_SEC);
+}, 'Setting the start time on a reverse running animation updates the play '
+   + 'state');
+
 </script>
 </body>