canvas-transform.https.html (1170B)
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="canvas-transform-ref.html"> 5 <style> 6 .container { 7 width: 270px; 8 height: 275px; 9 } 10 11 #canvas-geometry { 12 background-image: paint(geometry); 13 } 14 </style> 15 <script src="/common/reftest-wait.js"></script> 16 <script src="/common/worklet-reftest.js"></script> 17 <body> 18 <div id="canvas-geometry" class="container"></div> 19 20 <script id="code" type="text/worklet"> 21 // Regression test for crbug.com/970783. The canvas transform matrix should 22 // account for the devicePixelRatio, such that the clip bounds can be 23 // properly computed when applying clips. 24 registerPaint('geometry', class { 25 paint(ctx, geom) { 26 var fillW = 250; 27 var fillH = 50; 28 ctx.setTransform(devicePixelRatio, 0, 0, devicePixelRatio, 0, 100); 29 ctx.beginPath(); 30 ctx.rect(0, 0, fillW, fillH); 31 ctx.closePath(); 32 ctx.clip(); 33 ctx.fillStyle = 'green'; 34 ctx.fillRect(0, 0, fillW, fillH); 35 } 36 }); 37 </script> 38 39 <script> 40 importWorkletAndTerminateTestAfterAsyncPaint(CSS.paintWorklet, document.getElementById('code').textContent); 41 </script> 42 </body> 43 </html>