paint-function-arguments-var.https.html (1329B)
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="paint-function-arguments-ref.html"> 5 <style> 6 :root { 7 --color1:rgb(50, 100, 150); 8 --color2:rgb(150, 100, 50); 9 --length1:50px; 10 } 11 12 .container { 13 width: 200px; 14 height: 200px; 15 } 16 17 #canvas-box-1 { 18 background-image: paint(box, var(--color1), var(--length1)); 19 } 20 21 #canvas-box-2 { 22 background-image: paint(box, var(--color2), 100px); 23 } 24 25 #background { 26 background-color: yellow; 27 display: inline-block; 28 } 29 </style> 30 <script src="/common/reftest-wait.js"></script> 31 <script src="/common/worklet-reftest.js"></script> 32 <body> 33 34 <div id="background"> 35 <div id="canvas-box-1" class="container"></div> 36 <div id="canvas-box-2" class="container"></div> 37 </div> 38 39 <script id="code" type="text/worklet"> 40 registerPaint('box', class { 41 static get contextOptions() { return {alpha: true}; } 42 static get inputArguments() { return ['<color>', '<length>']; } 43 paint(ctx, geom, properties, args) { 44 ctx.fillStyle = args[0].toString(); 45 let size = parseInt(args[1].toString()); 46 ctx.fillRect(40, 40, size, size); 47 } 48 }); 49 50 </script> 51 52 <script> 53 importWorkletAndTerminateTestAfterAsyncPaint(CSS.paintWorklet, document.getElementById('code').textContent); 54 </script> 55 </body> 56 </html>