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 |