Index: ManualTests/animation/compositor-animation-cubic.html |
diff --git a/ManualTests/animation/compositor-animation-cubic.html b/ManualTests/animation/compositor-animation-cubic.html |
deleted file mode 100644 |
index d69e7b48994c222eb317af9b173e9a8339c473ab..0000000000000000000000000000000000000000 |
--- a/ManualTests/animation/compositor-animation-cubic.html |
+++ /dev/null |
@@ -1,89 +0,0 @@ |
-<html> |
-<style> |
-div { |
- position: relative; |
- height: 100px; |
- width: 100px; |
- background: blue; |
-} |
-</style> |
-<body> |
-<p> |
-Each section has below has two boxes. |
-<ul> |
- <li>Top - runs on main thread.</li> |
- <li>Bottom - runs on the compositor, unless otherwise specified.</li> |
-</ul> |
-The animations should be identical but start at different times. |
-</p><p> |
-This test is successful if the boxes are mostly in sync (there might be a small |
-offset between them). |
-</p> |
-<hr> |
- |
-Start delay 0s. |
-<br> |
-<div class='test0 anim-left'></div> |
-<div class='test0 anim-transform'></div> |
- |
-Start delay 3s. Bottom does not run on compositor. |
-<br> |
-<div class='test1 anim-left'></div> |
-<div class='test1 anim-transform'></div> |
- |
-Start delay 6s. |
-<br> |
-<div class='test2 anim-left'></div> |
-<div class='test2 anim-transform'></div> |
- |
-Start delay 9s. |
-<br> |
-<div class='test3 anim-left'></div> |
-<div class='test3 anim-transform'></div> |
-<script> |
- document.getElementsByClassName('test0 anim-left')[0].animate( |
- [{left: '0'}, {left: '300px'}], |
- {duration: 2000, easing: 'cubic-bezier(.5, -1, .5, 2)'}); |
- |
- document.getElementsByClassName('test0 anim-transform')[0].animate( |
- [{transform: 'translateX(0)'}, {transform: 'translateX(300px)'}], |
- {duration: 2000, easing: 'cubic-bezier(.5, -1, .5, 2)'}); |
- |
- setTimeout(function() { |
- document.getElementsByClassName('test1 anim-left')[0].animate( |
- [{left: '0', easing: 'ease-in'}, {left: '300px'}], |
- {duration: 2000, easing: 'cubic-bezier(.5, -1, .5, 2)'}); |
- |
- document.getElementsByClassName('test1 anim-transform')[0].animate( |
- [{transform: 'translateX(0)', easing: 'ease-in'}, {transform: 'translateX(300px)'}], |
- {duration: 2000, easing: 'cubic-bezier(.5, -1, .5, 2)'}); |
- }, 3000); |
- |
- setTimeout(function() { |
- document.getElementsByClassName('test2 anim-left')[0].animate( |
- [{left: '0', easing: 'ease-in'}, {left: '300px'}], |
- {duration: 2000, easing: 'ease-out'}); |
- |
- document.getElementsByClassName('test2 anim-transform')[0].animate( |
- [{transform: 'translateX(0)', easing: 'ease-in'}, {transform: 'translateX(300px)'}], |
- {duration: 2000, easing: 'ease-out'}); |
- }, 6000); |
- |
- setTimeout(function() { |
- document.getElementsByClassName('test3 anim-left')[0].animate([ |
- {left: '0'}, |
- {left: '100px', easing: 'ease-in'}, |
- {left: '200px'}, |
- {left: '300px'} |
- ], {duration: 2000, easing: 'cubic-bezier(.5, -1, .5, 2)'}); |
- |
- document.getElementsByClassName('test3 anim-transform')[0].animate([ |
- {transform: 'translateX(0)'}, |
- {transform: 'translateX(100px)', easing: 'ease-in'}, |
- {transform: 'translateX(200px)'}, |
- {transform: 'translateX(300px)'} |
- ], {duration: 2000, easing: 'cubic-bezier(.5, -1, .5, 2)'}); |
- }, 9000); |
-</script> |
-</body> |
-</html> |