one-custom-property-animation-half-opaque.https.html (2073B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <link rel="help" href="https://drafts.css-houdini.org/css-paint-api/"> 4 <link rel="match" href="one-custom-property-animation-half-opaque-ref.html"> 5 <style> 6 .container { 7 width: 500px; 8 height: 500px; 9 } 10 @keyframes expand { 11 0% { --foo: rgba(0, 200, 0, 1); } 12 100% { --foo: rgba(200, 0, 0, 0.6); } 13 } 14 .animate { 15 background-image: paint(geometry); 16 /* Use a long animation that start at 50% progress where the slope of the 17 selected timing function is zero. By setting up the animation in this way, 18 we accommodate lengthy delays in running the test without a potential drift 19 in the animated property value. This is important for avoiding flakes, 20 especially on debug builds. The screenshots are taken as soon as the 21 animation is ready, thus the long animation duration has no bearing on 22 the actual duration of the test. */ 23 animation: expand 1000000s cubic-bezier(0,1,1,0) -500000s; 24 will-change: transform; 25 } 26 </style> 27 28 <script src="/common/reftest-wait.js"></script> 29 <script src="/common/worklet-reftest.js"></script> 30 <body> 31 <div id="canvas-geometry" class="container"></div> 32 33 <script id="code" type="text/worklet"> 34 registerPaint('geometry', class { 35 static get inputProperties() { return ['--foo']; } 36 paint(ctx, geom, properties) { 37 ctx.fillStyle = properties.get('--foo').toString(); 38 ctx.fillRect(0, 0, geom.width, geom.height); 39 } 40 }); 41 </script> 42 43 <script> 44 CSS.registerProperty({ 45 name: '--foo', 46 syntax: '<color>', 47 initialValue: 'rgb(0, 0, 0)', 48 inherits: false 49 }); 50 </script> 51 52 <script> 53 var blob = new Blob([document.getElementById('code').textContent], 54 {type: 'text/javascript'}); 55 CSS.paintWorklet.addModule(URL.createObjectURL(blob)).then(function() { 56 document.getElementById('canvas-geometry').classList.add('animate'); 57 const animations = document.getAnimations(); 58 // Wait for the animation to start before completing the test. 59 document.getAnimations()[0].ready.then(() => { 60 takeScreenshot(); 61 }); 62 }); 63 </script> 64 </body> 65 </html>