paint2d-conicGradient.https.html (965B)
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-conicGradient-ref.html"> 5 <style> 6 #output { 7 width: 100px; 8 height: 100px; 9 background-image: paint(rects); 10 } 11 </style> 12 <script src="/common/reftest-wait.js"></script> 13 <script src="/common/worklet-reftest.js"></script> 14 <body> 15 <div id="output"></div> 16 17 <script id="code" type="text/worklet"> 18 registerPaint('rects', class { 19 paint(ctx, geom) { 20 const g = ctx.createConicGradient(3*Math.PI/2, 30, 30); 21 g.addColorStop(0, "#f0f"); 22 g.addColorStop(0.25, "#0ff"); 23 g.addColorStop(0.50, "#ff0"); 24 g.addColorStop(0.75, "#f0f"); 25 ctx.fillStyle = g; 26 ctx.fillRect(0, 0, 100, 100); 27 } 28 }); 29 </script> 30 31 <script> 32 importWorkletAndTerminateTestAfterAsyncPaint(CSS.paintWorklet, document.getElementById('code').textContent); 33 </script> 34 </body> 35 </html>