| 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>
|
|
|