Bug 1467344 - Update tests in test_setting-effect.html; r=hiro
authorBrian Birtles <birtles@gmail.com>
Thu, 16 Aug 2018 14:41:03 +0900
changeset 487364 64abf6978f00f919aa926d56b6ce908392549529
parent 487363 0160e2c379e3a1874efc9ffd75691c1da208ad7f
child 487365 5b8c402641ac0a302770b6661b5f01c77226c70e
push id9719
push userffxbld-merge
push dateFri, 24 Aug 2018 17:49:46 +0000
treeherdermozilla-beta@719ec98fba77 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewershiro
bugs1467344
milestone63.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 1467344 - Update tests in test_setting-effect.html; r=hiro This patch splits the first test into four separate tests since it really seems to be testing four different things. Likewise, the later patch for replacing the effect is split into two parts: - One to test the playState behavior - One to test the value reported by transitionProperty The test, "After setting a transition's effect to null, transitionend is still dispatched", is dropped since it is covered by the last test in test_event-dispatch.html.
dom/animation/test/css-transitions/test_setting-effect.html
--- a/dom/animation/test/css-transitions/test_setting-effect.html
+++ b/dom/animation/test/css-transitions/test_setting-effect.html
@@ -3,99 +3,118 @@
 <title>CSSTransition.effect</title>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src='../testcommon.js'></script>
 <div id="log"></div>
 <script>
 'use strict';
 
+test(t => {
+  const div = addDiv(t);
+  div.style.left = '0px';
+
+  div.style.transition = 'left 100s';
+  flushComputedStyle(div);
+  div.style.left = '100px';
+
+  const transition = div.getAnimations()[0];
+
+  transition.effect = null;
+
+  assert_equals(transition.transitionProperty, 'left');
+}, 'After setting a transition\'s effect to null, it still reports the'
+   + ' original transition property');
+
 promise_test(async t => {
   const div = addDiv(t);
-  const watcher = new EventWatcher(t, div, [ 'transitionend',
-                                             'transitioncancel' ]);
   div.style.left = '0px';
 
   div.style.transition = 'left 100s';
   flushComputedStyle(div);
   div.style.left = '100px';
 
   const transition = div.getAnimations()[0];
   await transition.ready;
 
-  transition.currentTime = 50 * MS_PER_SEC;
   transition.effect = null;
-  assert_equals(transition.transitionProperty, 'left');
   assert_equals(transition.playState, 'finished');
-  assert_equals(getComputedStyle(div).left, '100px');
-
-  await watcher.wait_for('transitionend');
-}, 'Test for removing a transition effect');
+}, 'After setting a transition\'s effect to null, it becomes finished');
 
 promise_test(async t => {
   const div = addDiv(t);
-  const watcher = new EventWatcher(t, div, [ 'transitionend',
-                                             'transitioncancel' ]);
   div.style.left = '0px';
 
   div.style.transition = 'left 100s';
   flushComputedStyle(div);
   div.style.left = '100px';
 
   const transition = div.getAnimations()[0];
   await transition.ready;
 
-  transition.currentTime = 50 * MS_PER_SEC;
-  transition.effect = new KeyframeEffect(div,
-                                          { marginLeft: [ '0px' , '100px'] },
-                                          100 * MS_PER_SEC);
-  assert_equals(transition.transitionProperty, 'left');
-  assert_equals(transition.playState, 'running');
+  transition.effect = null;
   assert_equals(getComputedStyle(div).left, '100px');
-  assert_equals(getComputedStyle(div).marginLeft, '50px');
-}, 'Test for replacing the transition effect by a new keyframe effect');
+}, 'After setting a transition\'s effect to null, style is updated');
 
 promise_test(async t => {
   const div = addDiv(t);
-  const watcher = new EventWatcher(t, div, [ 'transitionend',
-                                             'transitioncancel' ]);
   div.style.left = '0px';
   div.style.width = '0px';
 
   div.style.transition = 'left 100s';
   flushComputedStyle(div);
   div.style.left = '100px';
 
   const transition = div.getAnimations()[0];
   await transition.ready;
 
   transition.currentTime = 50 * MS_PER_SEC;
   transition.effect = new KeyframeEffect(div,
-                                          { marginLeft: [ '0px' , '100px'] },
-                                          20 * MS_PER_SEC);
+                                         { left: [ '0px' , '100px'] },
+                                         20 * MS_PER_SEC);
+
   assert_equals(transition.playState, 'finished');
-}, 'Test for setting a new keyframe effect with a shorter duration');
+}, 'After setting a new keyframe effect with a shorter duration,'
+   + ' the transition becomes finished');
 
 promise_test(async t => {
   const div = addDiv(t);
-  const watcher = new EventWatcher(t, div, [ 'transitionend',
-                                             'transitioncancel' ]);
+  div.style.left = '0px';
+  div.style.width = '0px';
+
+  div.style.transition = 'left 100s';
+  flushComputedStyle(div);
+  div.style.left = '100px';
+
+  const transition = div.getAnimations()[0];
+  transition.effect = new KeyframeEffect(div,
+                                         { marginLeft: [ '0px' , '100px'] },
+                                         100 * MS_PER_SEC);
+  assert_equals(transition.transitionProperty, 'left');
+}, 'After setting a new keyframe effect targeting different properties,'
+   + ' the transition continues to report the original transition property');
+
+promise_test(async t => {
+  const div = addDiv(t);
   div.style.left = '0px';
   div.style.width = '0px';
 
   div.style.transition = 'left 100s';
   flushComputedStyle(div);
   div.style.left = '100px';
 
   const transition = div.getAnimations()[0];
   assert_true(transition.pending);
 
   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
+  // pending state.
   await transition.ready;
   assert_false(transition.pending);
-}, 'Test for setting a new keyframe effect to a pending transition');
+}, 'After setting a new keyframe effect on a play-pending transition,'
+   + ' the transition remains pending');
 
 </script>