paint2d-transform.https.html (1005B)
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-transform-ref.html"> 5 <style> 6 #output { 7 width: 200px; 8 height: 200px; 9 background-image: paint(transform); 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('transform', class { 19 paint(ctx, geom) { 20 ctx.fillStyle = 'green'; 21 ctx.transform(1, 0.5, 0, 1, 20, 20); 22 ctx.fillRect(0, 0, 50, 50); 23 24 ctx.resetTransform(); 25 26 ctx.fillStyle = 'blue'; 27 ctx.translate(150, 60); 28 ctx.rotate(60 * Math.PI / 180); 29 ctx.scale(1.5, 1); 30 ctx.fillRect(0, 0, 50, 50); 31 } 32 }); 33 </script> 34 35 <script> 36 importWorkletAndTerminateTestAfterAsyncPaint(CSS.paintWorklet, document.getElementById('code').textContent); 37 </script> 38 </body> 39 </html>