rotate-transform-equivalent-ref.html (1224B)
1 <!doctype html> 2 <html class="reftest-wait"> 3 <meta charset="utf-8"> 4 <title>Reference for rotate transform equivalent</title> 5 <script src="/common/reftest-wait.js"></script> 6 <style> 7 .block { 8 border: 2px solid white; /* Avoid anti-aliasing artifacts */ 9 height: 100px; 10 width: 100px; 11 position: absolute; 12 left: 100px; 13 top: 100px; 14 } 15 16 .overlay { 17 background: green; 18 z-index: 2; 19 } 20 </style> 21 <body> 22 <div id="transform" class="block overlay"></div> 23 24 <script> 25 'use strict'; 26 27 async function waitForNextFrame() { 28 return new Promise(resolve => { 29 window.requestAnimationFrame(() => { 30 resolve(); 31 }); 32 }); 33 } 34 35 async function createAnimation(elementName, keyframes) { 36 const element = document.getElementById(elementName); 37 const anim = element.animate(keyframes, 1000); 38 anim.pause(); 39 anim.currentTime = 500; 40 return anim.ready; 41 } 42 43 onload = async function() { 44 await waitForNextFrame(); 45 46 await createAnimation('transform', [ 47 {transform: 'matrix3d(1, 0, 0, 0, 0, 0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1)'}, 48 {transform: 'matrix(0, 1, -1, 0, 0, 0)'}]); 49 50 await waitForNextFrame(); 51 takeScreenshot(); 52 }; 53 </script> 54 </body>