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 div { |
| 8 display: inline-block; |
| 9 width: 80px; |
| 10 height: 80px; |
| 11 } |
| 12 #source-over { background-image: paint(source-over); } |
| 13 #source-in { background-image: paint(source-in); } |
| 14 #source-out { background-image: paint(source-out); } |
| 15 #source-atop { background-image: paint(source-atop); } |
| 16 #destination-over { background-image: paint(destination-over); } |
| 17 #destination-in { background-image: paint(destination-in); } |
| 18 #destination-out { background-image: paint(destination-out); } |
| 19 #destination-atop { background-image: paint(destination-atop); } |
| 20 #lighter { background-image: paint(lighter); } |
| 21 #xor { background-image: paint(xor); } |
| 22 </style> |
| 23 </head> |
| 24 <body> |
| 25 <div id="source-over"></div> |
| 26 <div id="source-in"></div> |
| 27 <div id="source-out"></div> |
| 28 <div id="source-atop"></div> |
| 29 <br> |
| 30 <div id="destination-over"></div> |
| 31 <div id="destination-in"></div> |
| 32 <div id="destination-out"></div> |
| 33 <div id="destination-atop"></div> |
| 34 <br> |
| 35 <div id="lighter"></div> |
| 36 <div id="xor"></div> |
| 37 |
| 38 <script id="code" type="text/worklet"> |
| 39 var compositeOps = [ |
| 40 'source-over', |
| 41 'source-in', |
| 42 'source-out', |
| 43 'source-atop', |
| 44 'destination-over', |
| 45 'destination-in', |
| 46 'destination-out', |
| 47 'destination-atop', |
| 48 'lighter', |
| 49 'xor' |
| 50 ]; |
| 51 |
| 52 function doPaint(ctx, op) { |
| 53 ctx.fillStyle = 'red'; |
| 54 ctx.fillRect(5, 5, 40, 40); |
| 55 |
| 56 ctx.globalCompositeOperation = op; |
| 57 |
| 58 ctx.fillStyle = 'deepskyblue'; |
| 59 ctx.beginPath(); |
| 60 ctx.arc(45,45,20,0,Math.PI*2,true); |
| 61 ctx.fill(); |
| 62 } |
| 63 |
| 64 for (var i = 0; i < compositeOps.length; i++) { |
| 65 let op = compositeOps[i]; |
| 66 registerPaint(op, class { paint(ctx, geom) { doPaint(ctx, op); } }); |
| 67 } |
| 68 </script> |
| 69 |
| 70 <script> |
| 71 importPaintWorkletAndTerminateTestAfterAsyncPaint(document.getElementById('c
ode').textContent); |
| 72 </script> |
| 73 </body> |
| 74 </html> |
OLD | NEW |