paint-function-this-value.https.html (1096B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <meta charset="utf-8"> 4 <title>Paint callback is invoked with `this` value of `paintInstance`</title> 5 <link rel="help" href="https://drafts.css-houdini.org/css-paint-api-1/#invoke-a-paint-callback"> 6 <link rel="match" href="parse-input-arguments-ref.html"> 7 <style> 8 .container { 9 width: 100px; 10 height: 100px; 11 } 12 13 #canvas-geometry { 14 background-image: paint(geometry); 15 } 16 </style> 17 <script src="/common/reftest-wait.js"></script> 18 <script src="/common/worklet-reftest.js"></script> 19 <body> 20 <div id="canvas-geometry" class="container"></div> 21 22 <script id="code" type="text/worklet"> 23 let paintInstance; 24 25 registerPaint('geometry', class { 26 constructor() { 27 paintInstance = this; 28 } 29 paint(ctx, geom) { 30 if (this === paintInstance) 31 ctx.fillStyle = 'green'; 32 else 33 ctx.fillStyle = 'red'; 34 ctx.fillRect(0, 0, geom.width, geom.height); 35 } 36 }); 37 </script> 38 39 <script> 40 importWorkletAndTerminateTestAfterAsyncPaint(CSS.paintWorklet, document.getElementById('code').textContent); 41 </script> 42 </body> 43 </html>