[Gecko Bug 1292001] Add tests for calling setKeyframes on effects for…

… CSSTransitions (#22033) * Add tests for calling setKeyframes on effects for CSSTransitions Differential Revision: https://phabricator.services.mozilla.com/D64517 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1292001 gecko-commit: ce94ec6c9c913a42d233b8a986d5daa482cb53e7 gecko-integration-branch: autoland gecko-reviewers: boris * Make transition reversing behavior work even when the entire effect is replaced Differential Revision: https://phabricator.services.mozilla.com/D64522 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1292001 gecko-commit: 9cf0f778c49f62b22c0f8f244db50dd737e370a8 gecko-integration-branch: autoland gecko-reviewers: boris Co-authored-by: Brian Birtles <[email protected]>
web-platform-tests · Mar 3, 2020 · 1c72611 · 1c72611
1 parent 4e0932a
commit 1c72611
Show file tree

Hide file tree

Showing 2 changed files with 165 additions and 1 deletion.
diff --git a/css/css-transitions/CSSTransition-effect.tentative.html b/css/css-transitions/CSSTransition-effect.tentative.html
@@ -179,7 +179,6 @@
   transition.effect = new KeyframeEffect(div,
                                          { marginLeft: [ '0px' , '100px'] },
                                          100 * MS_PER_SEC);
-  assert_equals(transition.transitionProperty, 'left');
   assert_true(transition.pending);
 
   // As a sanity check, check that the transition actually exits the
@@ -189,4 +188,52 @@
 }, 'After setting a new keyframe effect on a play-pending transition,'
    + ' the transition remains pending');
 
+test(t => {
+  const div = addDiv(t);
+
+  div.style.left = '0px';
+  getComputedStyle(div).transitionProperty;
+  div.style.transition = 'left 100s';
+  div.style.left = '100px';
+
+  const transition = div.getAnimations()[0];
+  transition.effect = null;
+
+  assert_equals(transition.transitionProperty, 'left');
+}, 'A transition with no effect still returns the original transitionProperty');
+
+test(t => {
+  const div = addDiv(t);
+
+  div.style.left = '0px';
+  getComputedStyle(div).transitionProperty;
+  div.style.transition = 'left 100s';
+  div.style.left = '100px';
+
+  const transition = div.getAnimations()[0];
+
+  // Seek to the middle and get the portion.
+  transition.currentTime = 50 * MS_PER_SEC;
+  const portion = transition.effect.getComputedTiming().progress;
+
+  // Replace the effect but keep the original timing
+  transition.effect = new KeyframeEffect(
+    div,
+    { top: ['200px', '300px', '100px'] },
+    transition.effect.getTiming()
+  );
+
+  // Reverse the transition
+  div.style.left = '0px';
+  const reversedTransition = div.getAnimations()[0];
+
+  const expectedDuration = 100 * MS_PER_SEC * portion;
+  assert_approx_equals(
+    reversedTransition.effect.getComputedTiming().activeDuration,
+    expectedDuration,
+    1
+  );
+}, 'A transition with a replaced effect still exhibits the regular transition'
+   + ' reversing behavior');
+
 </script>
diff --git a/css/css-transitions/KeyframeEffect-setKeyframes.tentative.html b/css/css-transitions/KeyframeEffect-setKeyframes.tentative.html
@@ -0,0 +1,117 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>KeyframeEffect.setKeyframes() for CSS transitions</title>
+<!-- TODO: Add a more specific link for this once it is specified. -->
+<link rel="help" href="https://drafts.csswg.org/css-transitions-2/#csstransition">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/helper.js"></script>
+<div id="log"></div>
+<script>
+'use strict';
+
+test(t => {
+  const div = addDiv(t);
+
+  div.style.left = '0px';
+  getComputedStyle(div).transitionProperty;
+  div.style.transition = 'left 100s';
+  div.style.left = '100px';
+
+  const transition = div.getAnimations()[0];
+  transition.effect.setKeyframes({ left: ['200px', '300px', '100px'] });
+
+  assert_equals(getComputedStyle(div).left, '200px');
+}, 'Keyframes set using setKeyframes() are reflected in computed style for'
+   + ' a running transition');
+
+test(t => {
+  const div = addDiv(t);
+
+  div.style.left = '0px';
+  getComputedStyle(div).transitionProperty;
+  div.style.transition = 'left 100s';
+  div.style.left = '100px';
+
+  const transition = div.getAnimations()[0];
+  transition.effect.setKeyframes({ top: ['0px', '100px', '300px'] });
+
+  assert_equals(transition.transitionProperty, 'left');
+}, 'A transition with replaced keyframes still returns the original'
+   + ' transitionProperty');
+
+test(t => {
+  const div = addDiv(t);
+
+  div.style.left = '0px';
+  getComputedStyle(div).transitionProperty;
+  div.style.transition = 'left 100s';
+  div.style.left = '100px';
+
+  const transition = div.getAnimations()[0];
+  transition.effect.setKeyframes({ });
+
+  assert_equals(transition.transitionProperty, 'left');
+}, 'A transition with no keyframes still returns the original'
+   + ' transitionProperty');
+
+test(t => {
+  const div = addDiv(t);
+
+  div.style.left = '0px';
+  getComputedStyle(div).transitionProperty;
+  div.style.transition = 'left 100s';
+  div.style.left = '100px';
+
+  const transition = div.getAnimations()[0];
+
+  // Seek to the middle and get the portion.
+  //
+  // We deliberately DON'T set transition-timing-function to linear so that we
+  // can test that it is applied correctly.
+  transition.currentTime = 50 * MS_PER_SEC;
+  const portion = transition.effect.getComputedTiming().progress;
+
+  transition.effect.setKeyframes({ top: ['200px', '300px', '100px'] });
+
+  // Reverse transition
+  div.style.left = '0px';
+  const reversedTransition = div.getAnimations()[0];
+
+  const expectedDuration = 100 * MS_PER_SEC * portion;
+  assert_approx_equals(
+    reversedTransition.effect.getComputedTiming().activeDuration,
+    expectedDuration,
+    1
+  );
+}, 'A transition with replaced keyframes still exhibits the regular transition'
+   + ' reversing behavior');
+
+test(t => {
+  const div = addDiv(t);
+
+  div.style.left = '0px';
+  getComputedStyle(div).transitionProperty;
+  div.style.transition = 'left 100s';
+  div.style.left = '100px';
+
+  const transition = div.getAnimations()[0];
+
+  transition.currentTime = 50 * MS_PER_SEC;
+  const portion = transition.effect.getComputedTiming().progress;
+
+  transition.effect.setKeyframes({ });
+
+  div.style.left = '0px';
+  const reversedTransition = div.getAnimations()[0];
+
+  const expectedDuration = 100 * MS_PER_SEC * portion;
+  assert_approx_equals(
+    reversedTransition.effect.getComputedTiming().activeDuration,
+    expectedDuration,
+    1
+  );
+}, 'A transition with no keyframes still exhibits the regular transition'
+   + ' reversing behavior');
+
+</script>