| Index: ManualTests/animation/compositor-transform-with-translate.html
|
| diff --git a/ManualTests/animation/compositor-transform-with-translate.html b/ManualTests/animation/compositor-transform-with-translate.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..c92c730b2c9839a03ede21c74e6981aeec207ce1
|
| --- /dev/null
|
| +++ b/ManualTests/animation/compositor-transform-with-translate.html
|
| @@ -0,0 +1,84 @@
|
| +<!DOCTYPE html>
|
| +<html>
|
| +<head>
|
| +<style>
|
| +
|
| +div {
|
| + position: absolute;
|
| + height: 100px;
|
| + width: 100px;
|
| +}
|
| +
|
| +#div1 {
|
| + z-index: 4;
|
| + left: 100px;
|
| + top: 200px;
|
| + background-color: blue;
|
| +}
|
| +
|
| +#div2 {
|
| + z-index: 3;
|
| + left: 200px;
|
| + top: 200px;
|
| + background-color: red;
|
| +}
|
| +
|
| +#div3 {
|
| + z-index: 2;
|
| + left: 300px;
|
| + top: 200px;
|
| + background-color: purple;
|
| +}
|
| +
|
| +</style>
|
| +</head>
|
| +<body>
|
| +<p>
|
| +Tests that composited animation happens when only transform or only translate is present.
|
| +<p>
|
| +The 3 squares should equivalently move from top left to bot right. They need not be perfectly in time.
|
| +<p>
|
| +Blue - Only Transform, Red = Only Translate, Purple - Transform + Translate
|
| +
|
| +<div id="div1"></div>
|
| +<div id="div2"></div>
|
| +<div id="div3"></div>
|
| +
|
| +<script>
|
| +function startAnimations() {
|
| + div1.animate([
|
| + {transform: 'translate(0px, 0px)'},
|
| + {transform: 'translate(400px, 400px)'}
|
| + ], {
|
| + duration: 1000,
|
| + delay: 1000,
|
| + fill: 'forwards'
|
| + });
|
| +
|
| + div2.animate([
|
| + {translate: '0px 0px'},
|
| + {translate: '400px 400px'}
|
| + ], {
|
| + duration: 1000,
|
| + delay: 1000,
|
| + fill: 'forwards'
|
| + });
|
| +
|
| + div3.animate([
|
| + {transform: 'translate(0px)',
|
| + translate: '0px 0px'},
|
| + {transform: 'translate(400px)',
|
| + translate: '0px 400px'}
|
| + ], {
|
| + duration: 1000,
|
| + delay: 1000,
|
| + fill: 'forwards'
|
| + });
|
| +}
|
| +
|
| +requestAnimationFrame(startAnimations);
|
| +
|
| +</script>
|
| +
|
| +</body>
|
| +</html>
|
|
|
Chromium Code Reviews
Issue 1218943002:
Compositor animations for Independent CSS Transform Properties (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master