transform-box-will-change-transform-layer.html (1501B)
1 <!doctype html> 2 <html class="reftest-wait"> 3 <meta charset="utf-8"> 4 <title>Verify transform-box animations on a 'will-change: transform' layer</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 will-change: transform; 17 } 18 19 #transformBoxTarget { 20 transform: rotateZ(90deg); 21 transform-origin: 0% 100%; 22 transform-box: border-box; 23 } 24 </style> 25 <body> 26 <div id="transformBoxTarget" class="block"></div> 27 28 <script> 29 'use strict'; 30 31 async function waitForNextFrame() { 32 return new Promise(resolve => { 33 window.requestAnimationFrame(() => { 34 resolve(); 35 }); 36 }); 37 } 38 39 async function createAnimation(elementName, keyframes) { 40 const element = document.getElementById(elementName); 41 const anim = element.animate(keyframes, { 42 duration: 1000, 43 easing: 'linear', 44 fill: 'forwards', 45 }); 46 anim.pause(); 47 anim.currentTime = 2000; 48 return anim.ready; 49 } 50 51 onload = async function() { 52 await waitForNextFrame(); 53 await createAnimation('transformBoxTarget', [ 54 { transformBox: 'border-box', borderColor: 'black' }, 55 { transformBox: 'content-box', borderColor: 'green' }]); 56 57 await waitForNextFrame(); 58 takeScreenshot(); 59 }; 60 </script> 61 </body>