rotate-transform-equivalent.html (1831B)
1 <!doctype html> 2 <html class="reftest-wait"> 3 <meta charset="utf-8"> 4 <title>Rotate transform equivalent</title> 5 <link rel="match" href="rotate-transform-equivalent-ref.html"> 6 <meta name="fuzzy" content="maxDifference=0-46;totalPixels=0-450"> 7 <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#ctm"> 8 <script src="/common/reftest-wait.js"></script> 9 <style> 10 .block { 11 border: 2px solid white; /* Avoid anti-aliasing artifacts */ 12 height: 100px; 13 width: 100px; 14 position: absolute; 15 left: 100px; 16 top: 100px; 17 } 18 19 .rotation { 20 background: red; 21 } 22 23 .overlay { 24 background: green; 25 } 26 27 #rotateAdd { 28 rotate: 1 0 0 45deg; 29 } 30 </style> 31 <body> 32 <div id="rotateAdd" class="block rotation"></div> 33 <div id="rotateReplace" class="block rotation"></div> 34 <div id="transform" class="block overlay"></div> 35 36 <script> 37 'use strict'; 38 39 async function waitForNextFrame() { 40 return new Promise(resolve => { 41 window.requestAnimationFrame(() => { 42 resolve(); 43 }); 44 }); 45 } 46 47 async function createAnimation(elementName, keyframes) { 48 const element = document.getElementById(elementName); 49 const anim = element.animate(keyframes, 1000); 50 anim.pause(); 51 anim.currentTime = 500; 52 return anim.ready; 53 } 54 55 onload = async function() { 56 await waitForNextFrame(); 57 58 await createAnimation('rotateAdd', [ 59 {rotate: '1 0 0 45deg', composite: 'add'}, 60 {rotate: '0 0 1 90deg'}]); 61 await createAnimation('rotateReplace', [ 62 {rotate: '1 0 0 90deg'}, 63 {rotate: '0 0 1 90deg'}]); 64 65 await createAnimation('transform', [ 66 {transform: 'matrix3d(1, 0, 0, 0, 0, 0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1)'}, 67 {transform: 'matrix(0, 1, -1, 0, 0, 0)'}]); 68 69 await waitForNextFrame(); 70 takeScreenshot(); 71 }; 72 </script> 73 </body>