| OLD | NEW | 
| (Empty) |  | 
 |   1 <!DOCTYPE html> | 
 |   2 <html> | 
 |   3 <head> | 
 |   4 <script src="../resources/run-after-layout-and-paint.js"></script> | 
 |   5 <script src="resources/test-runner-paint-worklet.js"></script> | 
 |   6 <style> | 
 |   7 .container { | 
 |   8   width: 100px; | 
 |   9   height: 100px; | 
 |  10 } | 
 |  11  | 
 |  12 #canvas-box-green { | 
 |  13   background-image: paint(box, green); | 
 |  14 } | 
 |  15  | 
 |  16 #canvas-box-red { | 
 |  17   background-image: paint(box, red); | 
 |  18 } | 
 |  19  | 
 |  20 #background { | 
 |  21   background-color: yellow; | 
 |  22   display: inline-block; | 
 |  23 } | 
 |  24 </style> | 
 |  25 </head> | 
 |  26 <body> | 
 |  27  | 
 |  28 <div id="background"> | 
 |  29   <div id="canvas-box-green" class="container"></div> | 
 |  30   <div id="canvas-box-red" class="container"></div> | 
 |  31 </div> | 
 |  32  | 
 |  33 <script id="code" type="text/worklet"> | 
 |  34 registerPaint('box', class { | 
 |  35     static get alpha() { return true; } | 
 |  36     static get inputArguments() { return ['<color>']; } | 
 |  37     paint(ctx, geom, properties, args) { | 
 |  38         ctx.strokeStyle = args[0].cssText; | 
 |  39         ctx.lineWidth = 4; | 
 |  40         ctx.strokeRect(20, 20, 60, 60); | 
 |  41     } | 
 |  42 }); | 
 |  43  | 
 |  44 </script> | 
 |  45  | 
 |  46 <script> | 
 |  47   importPaintWorkletAndTerminateTestAfterAsyncPaint(document.getElementById('cod
    e').textContent); | 
 |  48 </script> | 
 |  49 </body> | 
 |  50 </html> | 
| OLD | NEW |