paint2d-rects.https.html (938B)
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="paint2d-rects-ref.html"> 5 <style> 6 #output { 7 width: 100px; 8 height: 100px; 9 background-image: paint(rects); 10 background-color: blue; 11 } 12 </style> 13 <script src="/common/reftest-wait.js"></script> 14 <script src="/common/worklet-reftest.js"></script> 15 <body> 16 <div id="output"></div> 17 18 <script id="code" type="text/worklet"> 19 registerPaint('rects', class { 20 paint(ctx, geom) { 21 ctx.fillStyle = 'green'; 22 ctx.fillRect(0, 0, geom.width, geom.height); 23 24 ctx.clearRect(40, 40, 20, 20); 25 26 ctx.strokeStyle = 'red'; 27 ctx.lineWidth = 4; 28 ctx.strokeRect(20, 20, 60, 60); 29 } 30 }); 31 </script> 32 33 <script> 34 importWorkletAndTerminateTestAfterAsyncPaint(CSS.paintWorklet, document.getElementById('code').textContent); 35 </script> 36 </body> 37 </html>