Index: third_party/WebKit/LayoutTests/csspaint/paint2d-composite.html |
diff --git a/third_party/WebKit/LayoutTests/csspaint/paint2d-composite.html b/third_party/WebKit/LayoutTests/csspaint/paint2d-composite.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..4d0b3e65fa11cad7be55395a5b2f612c8b6c8de7 |
--- /dev/null |
+++ b/third_party/WebKit/LayoutTests/csspaint/paint2d-composite.html |
@@ -0,0 +1,74 @@ |
+<!DOCTYPE html> |
+<html> |
+<head> |
+<script src="../resources/run-after-layout-and-paint.js"></script> |
+<script src="resources/test-runner-paint-worklet.js"></script> |
+<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> |
+</head> |
+<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> |
+ importPaintWorkletAndTerminateTestAfterAsyncPaint(document.getElementById('code').textContent); |
+</script> |
+</body> |
+</html> |