device-pixel-ratio.https.html (1272B)
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="device-pixel-ratio-ref.html"> 5 <style> 6 html, body { margin: 0; padding: 0; } 7 .container { 8 width: 150px; 9 height: 150px; 10 } 11 12 #canvas-geometry { 13 background-image: paint(geometry); 14 } 15 </style> 16 <script src="/common/reftest-wait.js"></script> 17 <script src="/common/worklet-reftest.js"></script> 18 <body> 19 <p>This test ensures that the PaintWorkletGlobalScope.devicePixelRatio returns 20 the correct value, which should be identical as window.devicePixelRatio. To 21 manually test, open both this file and "device-pixel-ratio-ref.html" with a 22 browser, and you should see two idential green rectangles.</p> 23 <div id="canvas-geometry" class="container"></div> 24 25 <script id="code" type="text/worklet"> 26 registerPaint('geometry', class { 27 paint(ctx, geom) { 28 ctx.fillStyle = 'green'; 29 var draw_width = Math.floor(geom.width / devicePixelRatio); 30 var draw_height = Math.floor(geom.height / devicePixelRatio); 31 ctx.fillRect(0, 0, draw_width, draw_height); 32 } 33 }); 34 </script> 35 36 <script> 37 importWorkletAndTerminateTestAfterAsyncPaint(CSS.paintWorklet, document.getElementById('code').textContent); 38 </script> 39 </body> 40 </html>