<!DOCTYPE html> <html class="reftest-wait"> <link rel="help" href="https://drafts.css-houdini.org/css-paint-api/"> <link rel="match" href="one-custom-property-animation-ref.html"> <style> .container { width: 100px; height: 100px; animation: expand 5s; } @keyframes expand { 0% { --foo: 0; } 0.01% { --foo: 50; } 99% { --foo: 50; } 100% { --foo: 100; } } #canvas-geometry { background-color: blue; background-image: paint(geometry); } </style> <script src="/common/reftest-wait.js"></script> <script src="/common/worklet-reftest.js"></script> <body> <div id="canvas-geometry" class="container"></div> <script id="code" type="text/worklet"> registerPaint('geometry', class { static get inputProperties() { return ['--foo']; } paint(ctx, geom, properties) { let fooValue = parseFloat(properties.get('--foo').toString()); ctx.fillStyle = 'green'; ctx.fillRect(0, 0, fooValue, fooValue); } }); </script> <script> CSS.registerProperty({ name: '--foo', syntax: '<number>', initialValue: '0', inherits: false }); </script> <script> // The test is designed to make sure that when the custom property animation is // running on the compositor thread, we are getting the right value. // The "importWorkletAndTerminateTestAfterAsyncPaint" has the logic to rAF // two frames before taking a screenshot. So the animation is designed to // be stable after two frames. That is, the 0.01% of 5s is much less than // two frames, and thus after two frames, the value of --foo should be stable. importWorkletAndTerminateTestAfterAsyncPaint(CSS.paintWorklet, document.getElementById('code').textContent); </script> </body> </html>