third_party/WebKit/LayoutTests/virtual/threaded/animations/compositor-independent-transform-cancel.html

   1 <!DOCTYPE html>
   2 <script src="../../../resources/testharness.js"></script>
   3 <script src="../../../resources/testharnessreport.js"></script>
   4
   5 <div id="parent"></div>
   6 <script>
   7 var keyframeValueMap = {
   8   translate: '10px 10px 10px',
   9   scale: '1 2 3',
  10   rotate: '45deg',
  11   transform: 'translate(10px, 20px)',
  12   opacity: '1',
  13 };
  14
  15 /* Test that animation on compositableProperty on compositor is cancelled when
  16    cancelProperty is applied (not animated) to the element */
  17 function assertAnimationComposited(compositableProperty, cancelProperty, isStillComposited) {
  18   var element = document.createElement('div');
  19   document.getElementById('parent').appendChild(element);
  20
  21   var keyframe = {};
  22   keyframe[compositableProperty] = keyframeValueMap[compositableProperty];
  23
  24   var animation = element.animate([keyframe, keyframe], {
  25     duration: 4000,
  26     iterations: Infinity
  27   });
  28
  29   var description = "Compositor Animation on " + compositableProperty + (isStillComposited ? " is not " : " is ") + "cancelled by " + cancelProperty;
  30   var asyncHandle = async_test(description);
  31   requestAnimationFrame(function() {
  32     requestAnimationFrame(function() {
  33
  34       asyncHandle.step(function() {
  35         assert_true(internals.isCompositedAnimation(animation), compositableProperty + " animation should be composited");
  36       });
  37       element.style[cancelProperty] = keyframeValueMap[cancelProperty];
  38
  39       requestAnimationFrame(function() {
  40         requestAnimationFrame(function() {
  41
  42           asyncHandle.step(function() {
  43             assert_equals(internals.isCompositedAnimation(animation), isStillComposited, description)
  44           });
  45
  46           animation.cancel();
  47           asyncHandle.done();
  48         });
  49       });
  50     });
  51   });
  52 }
  53
  54 assertAnimationComposited('transform', 'transform', true);
  55 assertAnimationComposited('translate', 'translate', true);
  56 assertAnimationComposited('rotate', 'rotate', true);
  57 assertAnimationComposited('scale', 'scale', true);
  58
  59 assertAnimationComposited('transform', 'translate', false);
  60 assertAnimationComposited('transform', 'rotate', false);
  61 assertAnimationComposited('transform', 'scale', false);
  62
  63 assertAnimationComposited('translate', 'transform', false);
  64 assertAnimationComposited('translate', 'rotate', false);
  65 assertAnimationComposited('translate', 'scale', false);
  66
  67 assertAnimationComposited('rotate', 'transform', false);
  68 assertAnimationComposited('rotate', 'scale', false);
  69 assertAnimationComposited('rotate', 'translate', false);
  70
  71 assertAnimationComposited('scale', 'transform', false);
  72 assertAnimationComposited('scale', 'rotate', false);
  73 assertAnimationComposited('scale', 'translate', false);
  74
  75 assertAnimationComposited('opacity', 'transform', true);
  76 assertAnimationComposited('opacity', 'translate', true);
  77 assertAnimationComposited('opacity', 'rotate', true);
  78 assertAnimationComposited('opacity', 'scale', true);
  79 </script>