transform-box.html (1436B)
1 <!doctype html> 2 <html class="reftest-wait"> 3 <meta charset="utf-8"> 4 <title>Verify transform-box animations</title> 5 <link rel="match" href="transform-box-ref.html"> 6 <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#ctm"> 7 <script src="/common/reftest-wait.js"></script> 8 <style> 9 .block { 10 position: absolute; 11 border: 20px solid black; 12 width: 100px; 13 height: 100px; 14 left: 100px; 15 top: 100px; 16 } 17 18 #transformBoxTarget { 19 transform: rotateZ(90deg); 20 transform-origin: 0% 100%; 21 transform-box: border-box; 22 } 23 </style> 24 <body> 25 <div id="transformBoxTarget" class="block"></div> 26 27 <script> 28 'use strict'; 29 30 async function waitForNextFrame() { 31 return new Promise(resolve => { 32 window.requestAnimationFrame(() => { 33 resolve(); 34 }); 35 }); 36 } 37 38 async function createAnimation(elementName, keyframes) { 39 const element = document.getElementById(elementName); 40 const anim = element.animate(keyframes, { 41 duration: 1000, 42 easing: 'linear', 43 fill: 'forwards', 44 }); 45 anim.pause(); 46 anim.currentTime = 2000; 47 return anim.ready; 48 } 49 50 onload = async function() { 51 await waitForNextFrame(); 52 await createAnimation('transformBoxTarget', [ 53 { transformBox: 'border-box', borderColor: 'black' }, 54 { transformBox: 'content-box', borderColor: 'green' }]); 55 56 await waitForNextFrame(); 57 takeScreenshot(); 58 }; 59 </script> 60 </body>