<!DOCTYPE html>
<html class="reftest-wait">
<link rel="help" href="https://drafts.css-houdini.org/css-paint-api/">
<link rel="match" href="paint2d-composite-ref.html">
<style>
div {
display: inline-block;
width: 80px;
height: 80px;
}
#source-over { background-image: paint(source-over); }
#source-in { background-image: paint(source-in); }
#source-out { background-image: paint(source-out); }
#source-atop { background-image: paint(source-atop); }
#destination-over { background-image: paint(destination-over); }
#destination-in { background-image: paint(destination-in); }
#destination-out { background-image: paint(destination-out); }
#destination-atop { background-image: paint(destination-atop); }
#lighter { background-image: paint(lighter); }
#xor { background-image: paint(xor); }
</style>
<script src="/common/reftest-wait.js"></script>
<script src="/common/worklet-reftest.js"></script>
<body>
<div id="source-over"></div>
<div id="source-in"></div>
<div id="source-out"></div>
<div id="source-atop"></div>
<br>
<div id="destination-over"></div>
<div id="destination-in"></div>
<div id="destination-out"></div>
<div id="destination-atop"></div>
<br>
<div id="lighter"></div>
<div id="xor"></div>
<script id="code" type="text/worklet">
var compositeOps = [
'source-over',
'source-in',
'source-out',
'source-atop',
'destination-over',
'destination-in',
'destination-out',
'destination-atop',
'lighter',
'xor'
];
function doPaint(ctx, op) {
ctx.fillStyle = 'red';
ctx.fillRect(5, 5, 40, 40);
ctx.globalCompositeOperation = op;
ctx.fillStyle = 'deepskyblue';
ctx.beginPath();
ctx.arc(45,45,20,0,Math.PI*2,true);
ctx.fill();
}
for (var i = 0; i < compositeOps.length; i++) {
let op = compositeOps[i];
registerPaint(op, class { paint(ctx, geom) { doPaint(ctx, op); } });
}
</script>
<script>
importWorkletAndTerminateTestAfterAsyncPaint(CSS.paintWorklet, document.getElementById('code').textContent);
</script>
</body>
</html>
Codebase Browser
chromium