| Index: third_party/WebKit/ManualTests/animation/compositor-animation-steps.html
|
| diff --git a/third_party/WebKit/ManualTests/animation/compositor-animation-steps.html b/third_party/WebKit/ManualTests/animation/compositor-animation-steps.html
|
| deleted file mode 100644
|
| index 3f6dca9f348ff51276490a032adc88a83f2986dd..0000000000000000000000000000000000000000
|
| --- a/third_party/WebKit/ManualTests/animation/compositor-animation-steps.html
|
| +++ /dev/null
|
| @@ -1,119 +0,0 @@
|
| -<html>
|
| -<style>
|
| -div {
|
| - position: relative;
|
| - height: 100px;
|
| - width: 100px;
|
| - background: blue;
|
| -}
|
| -</style>
|
| -<body>
|
| -<p>
|
| -Each section below has two boxes, the top runs on the main thread, the bottom
|
| -on the compositor.
|
| -</p><p>
|
| -This test is successful if the boxes are mostly in sync and all finish at the
|
| -same time.
|
| -</p>
|
| -<hr>
|
| -
|
| -Steps for easing timing function is set to 9.
|
| -<br>
|
| -<div id="test1a">MT</div>
|
| -<div id="test1b">CT</div>
|
| -<hr>
|
| -
|
| -Per-keyframe steps easing function (18 and 9 steps).
|
| -<br>
|
| -<div id="test2a">MT</div>
|
| -<div id="test2b">CT</div>
|
| -
|
| -Cubic-bezier easing function combined with a step keyframe.
|
| -<br>
|
| -<div id="test3a">MT</div>
|
| -<div id="test3b">CT</div>
|
| -
|
| -Steps easing function combined with a cubic-bezier keyframe.
|
| -<br>
|
| -<div id="test4a">MT</div>
|
| -<div id="test4b">CT</div>
|
| -
|
| -<script>
|
| -var transformKeyframes = [
|
| - {transform: 'translateX(0px)'},
|
| - {transform: 'translateX(500px)'}
|
| - ];
|
| -var leftKeyframes = [
|
| - {left: '0'},
|
| - {left: '500px'}
|
| - ];
|
| -var player1a = test1a.animate(leftKeyframes, {
|
| - duration: 6000,
|
| - iterations: Infinity,
|
| - easing: 'steps(9)'
|
| - });
|
| -var player1b = test1b.animate(transformKeyframes, {
|
| - duration: 6000,
|
| - iterations: Infinity,
|
| - easing: 'steps(9)'
|
| - });
|
| -
|
| -var transformKeyframesEasing = [
|
| - {transform: 'translateX(0px)', easing: 'steps(18)'},
|
| - {transform: 'translateX(250px)', easing: 'steps(9)'},
|
| - {transform: 'translateX(500px)'}
|
| - ];
|
| -var leftKeyframesEasing = [
|
| - {left: '0', easing: 'steps(18)'},
|
| - {left: '250px', easing: 'steps(9)'},
|
| - {left: '500px'}
|
| - ];
|
| -var player2a = test2a.animate(leftKeyframesEasing, {
|
| - duration: 6000,
|
| - iterations: Infinity
|
| - });
|
| -var player2b = test2b.animate(transformKeyframesEasing, {
|
| - duration: 6000,
|
| - iterations: Infinity
|
| - });
|
| -
|
| -var transformKeyframesWithStepsKeyframe = [
|
| - {transform: 'translateX(0px)', easing: 'steps(9)'},
|
| - {transform: 'translateX(500px)'}
|
| - ];
|
| -var leftKeyframesWithStepsKeyframe = [
|
| - {left: '0', easing: 'steps(9)'},
|
| - {left: '500px'}
|
| - ];
|
| -var player3a = test3a.animate(leftKeyframesWithStepsKeyframe, {
|
| - duration: 6000,
|
| - iterations: Infinity,
|
| - easing: 'cubic-bezier(.5, -1, .5, 2)'
|
| - });
|
| -var player3b = test3b.animate(transformKeyframesWithStepsKeyframe, {
|
| - duration: 6000,
|
| - iterations: Infinity,
|
| - easing: 'cubic-bezier(.5, -1, .5, 2)'
|
| - });
|
| -
|
| -var transformKeyframesWithCubicKeyframe = [
|
| - {transform: 'translateX(0px)', easing: 'cubic-bezier(.5, -1, .5, 2)'},
|
| - {transform: 'translateX(500px)'}
|
| - ];
|
| -var leftKeyframesWithCubicKeyframe = [
|
| - {left: '0', easing: 'cubic-bezier(.5, -1, .5, 2)'},
|
| - {left: '500px'}
|
| - ];
|
| -var player4a = test4a.animate(leftKeyframesWithCubicKeyframe, {
|
| - duration: 6000,
|
| - iterations: Infinity,
|
| - easing: 'steps(9)'
|
| - });
|
| -var player4b = test4b.animate(transformKeyframesWithCubicKeyframe, {
|
| - duration: 6000,
|
| - iterations: Infinity,
|
| - easing: 'steps(9)'
|
| - });
|
| -</script>
|
| -</body>
|
| -</html>
|
|
|