geometry-border-image-001.https.html (1072B)
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="geometry-border-image-001-ref.html"> 5 <style> 6 html, body { margin: 0; padding: 0; } 7 .container { 8 width: 200px; 9 height: 200px; 10 } 11 12 #canvas-geometry { 13 border: solid 0; 14 border-image: paint(geometry); 15 border-image-slice: 0 fill; 16 } 17 </style> 18 <script src="/common/reftest-wait.js"></script> 19 <script src="/common/worklet-reftest.js"></script> 20 <body> 21 <div id="canvas-geometry" class="container"></div> 22 23 <script id="code" type="text/worklet"> 24 registerPaint('geometry', class { 25 paint(ctx, geom) { 26 if (geom.width == 220 && geom.height == 220) 27 ctx.fillStyle = 'green'; 28 else 29 ctx.fillStyle = 'red'; 30 ctx.fillRect(0, 0, geom.width, geom.height); 31 } 32 }); 33 </script> 34 35 <script> 36 document.getElementById('canvas-geometry').style.borderWidth = '10px'; 37 importWorkletAndTerminateTestAfterAsyncPaint(CSS.paintWorklet, document.getElementById('code').textContent); 38 </script> 39 </body> 40 </html>