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