| <!doctype html> |
| <html class="reftest-wait"> |
| <meta charset="utf-8"> |
| <title>Rotate transform equivalent</title> |
| <link rel="match" href="rotate-transform-equivalent-ref.html"> |
| <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#ctm"> |
| <script src="/common/reftest-wait.js"></script> |
| <style> |
| .block { |
| border: 2px solid white; /* Avoid anti-aliasing artifacts */ |
| height: 100px; |
| width: 100px; |
| position: absolute; |
| left: 100px; |
| top: 100px; |
| } |
| |
| .rotation { |
| background: red; |
| } |
| |
| .overlay { |
| background: green; |
| } |
| |
| #rotateAdd { |
| rotate: 1 0 0 45deg; |
| } |
| </style> |
| <body> |
| <div id="rotateAdd" class="block rotation"></div> |
| <div id="rotateReplace" class="block rotation"></div> |
| <div id="transform" class="block overlay"></div> |
| |
| <script> |
| 'use strict'; |
| |
| async function waitForNextFrame() { |
| return new Promise(resolve => { |
| window.requestAnimationFrame(() => { |
| resolve(); |
| }); |
| }); |
| } |
| |
| async function createAnimation(elementName, keyframes) { |
| const element = document.getElementById(elementName); |
| const anim = element.animate(keyframes, 1000); |
| anim.pause(); |
| anim.currentTime = 500; |
| return anim.ready; |
| } |
| |
| onload = async function() { |
| await waitForNextFrame(); |
| |
| await createAnimation('rotateAdd', [ |
| {rotate: '1 0 0 45deg', composite: 'add'}, |
| {rotate: '0 0 1 90deg'}]); |
| await createAnimation('rotateReplace', [ |
| {rotate: '1 0 0 90deg'}, |
| {rotate: '0 0 1 90deg'}]); |
| |
| await createAnimation('transform', [ |
| {transform: 'matrix3d(1, 0, 0, 0, 0, 0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1)'}, |
| {transform: 'matrix(0, 1, -1, 0, 0, 0)'}]); |
| |
| await waitForNextFrame(); |
| takeScreenshot(); |
| }; |
| </script> |
| </body> |
| |
