paint2d-composite.https.html (2089B)
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="paint2d-composite-ref.html"> 5 <style> 6 div { 7 display: inline-block; 8 width: 80px; 9 height: 80px; 10 } 11 #source-over { background-image: paint(source-over); } 12 #source-in { background-image: paint(source-in); } 13 #source-out { background-image: paint(source-out); } 14 #source-atop { background-image: paint(source-atop); } 15 #destination-over { background-image: paint(destination-over); } 16 #destination-in { background-image: paint(destination-in); } 17 #destination-out { background-image: paint(destination-out); } 18 #destination-atop { background-image: paint(destination-atop); } 19 #lighter { background-image: paint(lighter); } 20 #xor { background-image: paint(xor); } 21 </style> 22 <script src="/common/reftest-wait.js"></script> 23 <script src="/common/worklet-reftest.js"></script> 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 importWorkletAndTerminateTestAfterAsyncPaint(CSS.paintWorklet, document.getElementById('code').textContent); 72 </script> 73 </body> 74 </html>