valid-image-after-load.https.html (988B)
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="valid-image-after-load-ref.html"> 5 <style> 6 #output { 7 width: 100px; 8 height: 100px; 9 background-color: red; 10 } 11 </style> 12 <script src="/common/reftest-wait.js"></script> 13 <body> 14 <div id="output"></div> 15 16 <script id="code" type="text/worklet"> 17 registerPaint('green', class { 18 paint(ctx, geom) { 19 ctx.fillStyle = 'green'; 20 ctx.fillRect(0, 0, geom.width, geom.height); 21 } 22 }); 23 </script> 24 25 <script> 26 var blob = new Blob([document.getElementById('code').textContent], 27 {type: 'text/javascript'}); 28 var frame_cnt = 0; 29 CSS.paintWorklet.addModule(URL.createObjectURL(blob)).then(function() { 30 var el = document.getElementById('output'); 31 el.style.backgroundImage = 'paint(green)'; 32 requestAnimationFrame(function() { 33 takeScreenshot(frame_cnt); 34 }); 35 }); 36 </script> 37 </body> 38 </html>