| <!DOCTYPE html> |
| <html> |
| <script src="./resources/test-runner-paint-worklet.js"></script> |
| <style> |
| html, body { margin: 0; padding: 0; } |
| .container { |
| width: 200px; |
| height: 200px; |
| } |
| |
| #canvas-shadow { |
| background-image: paint(shadow); |
| } |
| </style> |
| <body> |
| <div id="canvas-shadow" class="container"></div> |
| |
| <script id="code" type="text/worklet"> |
| registerPaint('shadow', class { |
| paint(ctx) { |
| ctx.lineWidth = 10; |
| ctx.setLineDash([5, 15]); |
| ctx.lineDashOffset = 2; |
| |
| // The values should not be affected by the browser zoom when queried |
| // from JS. |
| if (ctx.lineWidth == 10 && ctx.lineDashOffset == 2 && |
| ctx.getLineDash()[0] == 5 && ctx.getLineDash()[1] == 15) { |
| ctx.beginPath(); |
| ctx.moveTo(0, 50); |
| ctx.lineTo(200, 50); |
| ctx.stroke(); |
| } |
| } |
| }); |
| </script> |
| |
| <script> |
| document.body.style.zoom = "200%" |
| importPaintWorkletThenEndTest(document.getElementById('code').textContent); |
| </script> |
| </body> |
| </html> |
