paint2d-gradient.https.html (1334B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <meta name=fuzzy content="0-5;3000-4000"> 4 <link rel="help" href="https://drafts.css-houdini.org/css-paint-api/"> 5 <link rel="match" href="paint2d-gradient-ref.html"> 6 <style> 7 #output { 8 width: 200px; 9 height: 100px; 10 background-image: paint(gradients); 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('gradients', class { 20 paint(ctx, geom) { 21 var linearGradient = ctx.createLinearGradient(0, 0, 100, 100); 22 linearGradient.addColorStop(0, 'blue'); 23 linearGradient.addColorStop(0.5, 'red'); 24 linearGradient.addColorStop(1, 'white'); 25 ctx.fillStyle = linearGradient; 26 ctx.fillRect(0, 0, 100, 100); 27 28 var radialGradient = ctx.createRadialGradient(150, 50, 0, 150, 50, 50); 29 radialGradient.addColorStop(0, 'blue'); 30 radialGradient.addColorStop(0.5, 'red'); 31 radialGradient.addColorStop(1, 'white'); 32 ctx.fillStyle = radialGradient; 33 ctx.fillRect(100, 0, 100, 100); 34 } 35 }); 36 </script> 37 38 <script> 39 importWorkletAndTerminateTestAfterAsyncPaint(CSS.paintWorklet, document.getElementById('code').textContent); 40 </script> 41 </body> 42 </html>