| Index: ManualTests/animation/compositor-animation-cubic.html
|
| diff --git a/ManualTests/animation/compositor-animation-cubic.html b/ManualTests/animation/compositor-animation-cubic.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..d69e7b48994c222eb317af9b173e9a8339c473ab
|
| --- /dev/null
|
| +++ b/ManualTests/animation/compositor-animation-cubic.html
|
| @@ -0,0 +1,89 @@
|
| +<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>
|
|
|
Chromium Code Reviews
Issue 800133004:
Animation: Allow CC per-curve timing functions to be steps timing functions (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@0