| Index: ManualTests/animation/compositor-transform-with-rotate.html
|
| diff --git a/ManualTests/animation/compositor-transform-with-rotate.html b/ManualTests/animation/compositor-transform-with-rotate.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..6510e5047e3aeca7eddcaa44a100c2071b368c59
|
| --- /dev/null
|
| +++ b/ManualTests/animation/compositor-transform-with-rotate.html
|
| @@ -0,0 +1,85 @@
|
| +<!DOCTYPE html>
|
| +<html>
|
| +<head>
|
| +<style>
|
| +
|
| +div {
|
| + position: absolute;
|
| + backface-visibility: visible;
|
| + height: 100px;
|
| + width: 100px;
|
| +}
|
| +
|
| +#div1 {
|
| + left: 100px;
|
| + top: 200px;
|
| + background-color: blue;
|
| +}
|
| +
|
| +#div2 {
|
| + left: 200px;
|
| + top: 200px;
|
| + background-color: red;
|
| +}
|
| +#div3 {
|
| + left: 300px;
|
| + top: 200px;
|
| + background-color: purple;
|
| +}
|
| +
|
| +</style>
|
| +</head>
|
| +<body>
|
| +<p>
|
| +Tests that composited animation happens when only transform or only rotate is present.
|
| +<p>
|
| +The 3 squares should equivalently rotate. They need not be perfectly in time.
|
| +<p>
|
| +Blue - Only Transform, Red - Only Rotate, Purple - Transform + Rotate
|
| +
|
| +<div id="div1"></div>
|
| +<div id="div2"></div>
|
| +<div id="div3"></div>
|
| +
|
| +<script>
|
| +var div1 = document.getElementById('div1');
|
| +var div2 = document.getElementById('div2');
|
| +var div3 = document.getElementById('div3');
|
| +
|
| +function startAnimations() {
|
| + div1.animate([
|
| + {transform: 'rotate3d(1, 1, 0, 0deg)'},
|
| + {transform: 'rotate3d(1, 1, 0, 720deg)'}
|
| + ], {
|
| + duration: 5000,
|
| + delay: 1000,
|
| + fill: 'forwards'
|
| + });
|
| +
|
| + div2.animate([
|
| + {rotate: '0deg 1 1 0'},
|
| + {rotate: '720deg 1 1 0'}
|
| + ], {
|
| + duration: 5000,
|
| + delay: 1000,
|
| + fill: 'forwards'
|
| + });
|
| +
|
| + div3.animate([
|
| + {transform: 'rotate3d(1, 1, 0, 0deg)',
|
| + rotate: '0deg 1 1 0'},
|
| + {transform: 'rotate3d(1, 1, 0, 360deg)',
|
| + rotate: '360deg 1 1 0'}
|
| + ], {
|
| + duration: 5000,
|
| + 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