summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/html/canvas/element/compositing
diff options
context:
space:
mode:
Diffstat (limited to 'testing/web-platform/tests/html/canvas/element/compositing')
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.clear.html36
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.clear.pngbin0 -> 117 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.copy.html36
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.copy.pngbin0 -> 220 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.destination-atop.html36
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.destination-atop.pngbin0 -> 221 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.destination-in.html36
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.destination-in.pngbin0 -> 220 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.destination-out.html36
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.destination-out.pngbin0 -> 220 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.destination-over.html36
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.destination-over.pngbin0 -> 223 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.lighter.html36
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.lighter.pngbin0 -> 209 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.source-atop.html36
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.source-atop.pngbin0 -> 223 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.source-in.html36
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.source-in.pngbin0 -> 220 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.source-out.html36
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.source-out.pngbin0 -> 220 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.source-over.html36
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.source-over.pngbin0 -> 223 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.xor.html36
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.xor.pngbin0 -> 223 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.clear.html34
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.copy.html34
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.destination-atop.html34
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.destination-in.html34
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.destination-out.html34
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.destination-over.html34
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.lighter.html34
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.source-atop.html34
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.source-in.html34
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.source-out.html34
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.source-over.html34
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.xor.html34
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.globalAlpha.canvas.html38
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.globalAlpha.canvascopy.html39
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.globalAlpha.canvaspattern.html39
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.globalAlpha.default.html26
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.globalAlpha.fill.html32
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.globalAlpha.image.html37
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.globalAlpha.imagepattern.html38
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.globalAlpha.invalid.html35
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.globalAlpha.range.html38
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.clear.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.clear.pngbin0 -> 117 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.copy.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.copy.pngbin0 -> 220 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.destination-atop.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.destination-atop.pngbin0 -> 221 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.destination-in.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.destination-in.pngbin0 -> 220 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.destination-out.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.destination-out.pngbin0 -> 220 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.destination-over.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.destination-over.pngbin0 -> 223 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.lighter.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.lighter.pngbin0 -> 209 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.source-atop.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.source-atop.pngbin0 -> 223 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.source-in.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.source-in.pngbin0 -> 220 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.source-out.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.source-out.pngbin0 -> 220 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.source-over.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.source-over.pngbin0 -> 223 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.xor.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.xor.pngbin0 -> 223 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.operation.casesensitive.html28
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.operation.clear.html28
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.operation.darker.html28
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.operation.default.html26
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.operation.get.html33
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.operation.highlight.html28
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.operation.nullsuffix.html28
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.operation.over.html28
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.operation.unrecognised.html28
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.clear.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.clear.pngbin0 -> 117 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.copy.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.copy.pngbin0 -> 205 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.destination-atop.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.destination-atop.pngbin0 -> 206 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.destination-in.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.destination-in.pngbin0 -> 206 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.destination-out.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.destination-out.pngbin0 -> 117 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.destination-over.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.destination-over.pngbin0 -> 206 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.lighter.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.lighter.pngbin0 -> 207 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.source-atop.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.source-atop.pngbin0 -> 205 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.source-in.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.source-in.pngbin0 -> 205 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.source-out.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.source-out.pngbin0 -> 117 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.source-over.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.source-over.pngbin0 -> 205 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.xor.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.xor.pngbin0 -> 117 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.clear.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.clear.pngbin0 -> 117 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.copy.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.copy.pngbin0 -> 221 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.destination-atop.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.destination-atop.pngbin0 -> 220 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.destination-in.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.destination-in.pngbin0 -> 221 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.destination-out.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.destination-out.pngbin0 -> 221 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.destination-over.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.destination-over.pngbin0 -> 222 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.lighter.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.lighter.pngbin0 -> 208 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.source-atop.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.source-atop.pngbin0 -> 222 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.source-in.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.source-in.pngbin0 -> 221 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.source-out.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.source-out.pngbin0 -> 221 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.source-over.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.source-over.pngbin0 -> 223 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.xor.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.xor.pngbin0 -> 222 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.fill.copy.html32
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.fill.copy.pngbin0 -> 117 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.fill.destination-atop.html32
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.fill.destination-atop.pngbin0 -> 117 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.fill.destination-in.html32
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.fill.destination-in.pngbin0 -> 117 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.fill.source-in.html32
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.fill.source-in.pngbin0 -> 117 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.fill.source-out.html32
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.fill.source-out.pngbin0 -> 117 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.image.copy.html32
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.image.copy.pngbin0 -> 117 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.image.destination-atop.html32
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.image.destination-atop.pngbin0 -> 117 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.image.destination-in.html32
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.image.destination-in.pngbin0 -> 117 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.image.source-in.html32
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.image.source-in.pngbin0 -> 117 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.image.source-out.html32
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.image.source-out.pngbin0 -> 117 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.nocontext.copy.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.nocontext.copy.pngbin0 -> 117 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.nocontext.destination-atop.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.nocontext.destination-atop.pngbin0 -> 117 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.nocontext.destination-in.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.nocontext.destination-in.pngbin0 -> 117 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.nocontext.source-in.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.nocontext.source-in.pngbin0 -> 117 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.nocontext.source-out.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.nocontext.source-out.pngbin0 -> 117 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.pattern.copy.html32
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.pattern.copy.pngbin0 -> 117 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.pattern.destination-atop.html32
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.pattern.destination-atop.pngbin0 -> 117 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.pattern.destination-in.html32
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.pattern.destination-in.pngbin0 -> 117 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.pattern.source-in.html32
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.pattern.source-in.pngbin0 -> 117 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.pattern.source-out.html32
-rw-r--r--testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.pattern.source-out.pngbin0 -> 117 bytes
166 files changed, 3168 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.clear.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.clear.html
new file mode 100644
index 0000000000..cb805b692e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.clear.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.canvas.clear</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.canvas.clear</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.composite.canvas.clear.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ var canvas2 = document.createElement('canvas');
+ canvas2.width = canvas.width;
+ canvas2.height = canvas.height;
+ var ctx2 = canvas2.getContext('2d');
+ ctx2.drawImage(document.getElementById('yellow75.png'), 0, 0);
+ ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
+ ctx.fillRect(0, 0, 100, 50);
+ ctx.globalCompositeOperation = 'clear';
+ ctx.drawImage(canvas2, 0, 0);
+ _assertPixelApprox(canvas, 50,25, 0,0,0,0, 5);
+
+});
+</script>
+<img src="/images/yellow75.png" id="yellow75.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.clear.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.clear.png
new file mode 100644
index 0000000000..eeedd0ff05
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.clear.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.copy.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.copy.html
new file mode 100644
index 0000000000..d4e75b7bac
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.copy.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.canvas.copy</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.canvas.copy</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.composite.canvas.copy.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ var canvas2 = document.createElement('canvas');
+ canvas2.width = canvas.width;
+ canvas2.height = canvas.height;
+ var ctx2 = canvas2.getContext('2d');
+ ctx2.drawImage(document.getElementById('yellow75.png'), 0, 0);
+ ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
+ ctx.fillRect(0, 0, 100, 50);
+ ctx.globalCompositeOperation = 'copy';
+ ctx.drawImage(canvas2, 0, 0);
+ _assertPixelApprox(canvas, 50,25, 255,255,0,191, 5);
+
+});
+</script>
+<img src="/images/yellow75.png" id="yellow75.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.copy.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.copy.png
new file mode 100644
index 0000000000..f5e9c21964
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.copy.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.destination-atop.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.destination-atop.html
new file mode 100644
index 0000000000..6fded39e44
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.destination-atop.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.canvas.destination-atop</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.canvas.destination-atop</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.composite.canvas.destination-atop.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ var canvas2 = document.createElement('canvas');
+ canvas2.width = canvas.width;
+ canvas2.height = canvas.height;
+ var ctx2 = canvas2.getContext('2d');
+ ctx2.drawImage(document.getElementById('yellow75.png'), 0, 0);
+ ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
+ ctx.fillRect(0, 0, 100, 50);
+ ctx.globalCompositeOperation = 'destination-atop';
+ ctx.drawImage(canvas2, 0, 0);
+ _assertPixelApprox(canvas, 50,25, 128,255,128,191, 5);
+
+});
+</script>
+<img src="/images/yellow75.png" id="yellow75.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.destination-atop.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.destination-atop.png
new file mode 100644
index 0000000000..504b42756e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.destination-atop.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.destination-in.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.destination-in.html
new file mode 100644
index 0000000000..7277286d8b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.destination-in.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.canvas.destination-in</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.canvas.destination-in</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.composite.canvas.destination-in.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ var canvas2 = document.createElement('canvas');
+ canvas2.width = canvas.width;
+ canvas2.height = canvas.height;
+ var ctx2 = canvas2.getContext('2d');
+ ctx2.drawImage(document.getElementById('yellow75.png'), 0, 0);
+ ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
+ ctx.fillRect(0, 0, 100, 50);
+ ctx.globalCompositeOperation = 'destination-in';
+ ctx.drawImage(canvas2, 0, 0);
+ _assertPixelApprox(canvas, 50,25, 0,255,255,96, 5);
+
+});
+</script>
+<img src="/images/yellow75.png" id="yellow75.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.destination-in.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.destination-in.png
new file mode 100644
index 0000000000..790e418a6b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.destination-in.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.destination-out.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.destination-out.html
new file mode 100644
index 0000000000..5860c3d5cb
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.destination-out.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.canvas.destination-out</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.canvas.destination-out</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.composite.canvas.destination-out.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ var canvas2 = document.createElement('canvas');
+ canvas2.width = canvas.width;
+ canvas2.height = canvas.height;
+ var ctx2 = canvas2.getContext('2d');
+ ctx2.drawImage(document.getElementById('yellow75.png'), 0, 0);
+ ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
+ ctx.fillRect(0, 0, 100, 50);
+ ctx.globalCompositeOperation = 'destination-out';
+ ctx.drawImage(canvas2, 0, 0);
+ _assertPixelApprox(canvas, 50,25, 0,255,255,32, 5);
+
+});
+</script>
+<img src="/images/yellow75.png" id="yellow75.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.destination-out.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.destination-out.png
new file mode 100644
index 0000000000..7f5ed1a836
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.destination-out.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.destination-over.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.destination-over.html
new file mode 100644
index 0000000000..76bad84392
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.destination-over.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.canvas.destination-over</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.canvas.destination-over</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.composite.canvas.destination-over.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ var canvas2 = document.createElement('canvas');
+ canvas2.width = canvas.width;
+ canvas2.height = canvas.height;
+ var ctx2 = canvas2.getContext('2d');
+ ctx2.drawImage(document.getElementById('yellow75.png'), 0, 0);
+ ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
+ ctx.fillRect(0, 0, 100, 50);
+ ctx.globalCompositeOperation = 'destination-over';
+ ctx.drawImage(canvas2, 0, 0);
+ _assertPixelApprox(canvas, 50,25, 109,255,146,223, 5);
+
+});
+</script>
+<img src="/images/yellow75.png" id="yellow75.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.destination-over.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.destination-over.png
new file mode 100644
index 0000000000..226390b2f8
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.destination-over.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.lighter.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.lighter.html
new file mode 100644
index 0000000000..8d706df67e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.lighter.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.canvas.lighter</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.canvas.lighter</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.composite.canvas.lighter.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ var canvas2 = document.createElement('canvas');
+ canvas2.width = canvas.width;
+ canvas2.height = canvas.height;
+ var ctx2 = canvas2.getContext('2d');
+ ctx2.drawImage(document.getElementById('yellow75.png'), 0, 0);
+ ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
+ ctx.fillRect(0, 0, 100, 50);
+ ctx.globalCompositeOperation = 'lighter';
+ ctx.drawImage(canvas2, 0, 0);
+ _assertPixelApprox(canvas, 50,25, 191,255,128,255, 5);
+
+});
+</script>
+<img src="/images/yellow75.png" id="yellow75.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.lighter.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.lighter.png
new file mode 100644
index 0000000000..fc33f3301e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.lighter.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.source-atop.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.source-atop.html
new file mode 100644
index 0000000000..cf3e449123
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.source-atop.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.canvas.source-atop</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.canvas.source-atop</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.composite.canvas.source-atop.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ var canvas2 = document.createElement('canvas');
+ canvas2.width = canvas.width;
+ canvas2.height = canvas.height;
+ var ctx2 = canvas2.getContext('2d');
+ ctx2.drawImage(document.getElementById('yellow75.png'), 0, 0);
+ ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
+ ctx.fillRect(0, 0, 100, 50);
+ ctx.globalCompositeOperation = 'source-atop';
+ ctx.drawImage(canvas2, 0, 0);
+ _assertPixelApprox(canvas, 50,25, 191,255,64,128, 5);
+
+});
+</script>
+<img src="/images/yellow75.png" id="yellow75.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.source-atop.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.source-atop.png
new file mode 100644
index 0000000000..1ef9630195
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.source-atop.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.source-in.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.source-in.html
new file mode 100644
index 0000000000..dabcced9dd
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.source-in.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.canvas.source-in</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.canvas.source-in</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.composite.canvas.source-in.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ var canvas2 = document.createElement('canvas');
+ canvas2.width = canvas.width;
+ canvas2.height = canvas.height;
+ var ctx2 = canvas2.getContext('2d');
+ ctx2.drawImage(document.getElementById('yellow75.png'), 0, 0);
+ ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
+ ctx.fillRect(0, 0, 100, 50);
+ ctx.globalCompositeOperation = 'source-in';
+ ctx.drawImage(canvas2, 0, 0);
+ _assertPixelApprox(canvas, 50,25, 255,255,0,96, 5);
+
+});
+</script>
+<img src="/images/yellow75.png" id="yellow75.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.source-in.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.source-in.png
new file mode 100644
index 0000000000..c26cdccf02
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.source-in.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.source-out.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.source-out.html
new file mode 100644
index 0000000000..2fcf708796
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.source-out.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.canvas.source-out</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.canvas.source-out</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.composite.canvas.source-out.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ var canvas2 = document.createElement('canvas');
+ canvas2.width = canvas.width;
+ canvas2.height = canvas.height;
+ var ctx2 = canvas2.getContext('2d');
+ ctx2.drawImage(document.getElementById('yellow75.png'), 0, 0);
+ ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
+ ctx.fillRect(0, 0, 100, 50);
+ ctx.globalCompositeOperation = 'source-out';
+ ctx.drawImage(canvas2, 0, 0);
+ _assertPixelApprox(canvas, 50,25, 255,255,0,96, 5);
+
+});
+</script>
+<img src="/images/yellow75.png" id="yellow75.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.source-out.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.source-out.png
new file mode 100644
index 0000000000..c26cdccf02
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.source-out.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.source-over.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.source-over.html
new file mode 100644
index 0000000000..b9dca65744
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.source-over.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.canvas.source-over</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.canvas.source-over</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.composite.canvas.source-over.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ var canvas2 = document.createElement('canvas');
+ canvas2.width = canvas.width;
+ canvas2.height = canvas.height;
+ var ctx2 = canvas2.getContext('2d');
+ ctx2.drawImage(document.getElementById('yellow75.png'), 0, 0);
+ ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
+ ctx.fillRect(0, 0, 100, 50);
+ ctx.globalCompositeOperation = 'source-over';
+ ctx.drawImage(canvas2, 0, 0);
+ _assertPixelApprox(canvas, 50,25, 219,255,36,223, 5);
+
+});
+</script>
+<img src="/images/yellow75.png" id="yellow75.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.source-over.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.source-over.png
new file mode 100644
index 0000000000..e63ab7e308
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.source-over.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.xor.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.xor.html
new file mode 100644
index 0000000000..c252e17a7e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.xor.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.canvas.xor</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.canvas.xor</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.composite.canvas.xor.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ var canvas2 = document.createElement('canvas');
+ canvas2.width = canvas.width;
+ canvas2.height = canvas.height;
+ var ctx2 = canvas2.getContext('2d');
+ ctx2.drawImage(document.getElementById('yellow75.png'), 0, 0);
+ ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
+ ctx.fillRect(0, 0, 100, 50);
+ ctx.globalCompositeOperation = 'xor';
+ ctx.drawImage(canvas2, 0, 0);
+ _assertPixelApprox(canvas, 50,25, 191,255,64,128, 5);
+
+});
+</script>
+<img src="/images/yellow75.png" id="yellow75.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.xor.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.xor.png
new file mode 100644
index 0000000000..1ef9630195
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.xor.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.clear.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.clear.html
new file mode 100644
index 0000000000..65cfd951e8
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.clear.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.clip.clear</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.clip.clear</h1>
+<p class="desc">fill() does not affect pixels outside the clip region.</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("fill() does not affect pixels outside the clip region.");
+_addTest(function(canvas, ctx) {
+
+ ctx.fillStyle = '#0f0';
+ ctx.fillRect(0, 0, 100, 50);
+ ctx.globalCompositeOperation = 'clear';
+ ctx.rect(-20, -20, 10, 10);
+ ctx.clip();
+ ctx.fillStyle = '#f00';
+ ctx.fillRect(0, 0, 50, 50);
+ _assertPixel(canvas, 25,25, 0,255,0,255);
+ _assertPixel(canvas, 75,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.copy.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.copy.html
new file mode 100644
index 0000000000..b38397a2c7
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.copy.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.clip.copy</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.clip.copy</h1>
+<p class="desc">fill() does not affect pixels outside the clip region.</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("fill() does not affect pixels outside the clip region.");
+_addTest(function(canvas, ctx) {
+
+ ctx.fillStyle = '#0f0';
+ ctx.fillRect(0, 0, 100, 50);
+ ctx.globalCompositeOperation = 'copy';
+ ctx.rect(-20, -20, 10, 10);
+ ctx.clip();
+ ctx.fillStyle = '#f00';
+ ctx.fillRect(0, 0, 50, 50);
+ _assertPixel(canvas, 25,25, 0,255,0,255);
+ _assertPixel(canvas, 75,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.destination-atop.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.destination-atop.html
new file mode 100644
index 0000000000..79fb3af54c
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.destination-atop.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.clip.destination-atop</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.clip.destination-atop</h1>
+<p class="desc">fill() does not affect pixels outside the clip region.</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("fill() does not affect pixels outside the clip region.");
+_addTest(function(canvas, ctx) {
+
+ ctx.fillStyle = '#0f0';
+ ctx.fillRect(0, 0, 100, 50);
+ ctx.globalCompositeOperation = 'destination-atop';
+ ctx.rect(-20, -20, 10, 10);
+ ctx.clip();
+ ctx.fillStyle = '#f00';
+ ctx.fillRect(0, 0, 50, 50);
+ _assertPixel(canvas, 25,25, 0,255,0,255);
+ _assertPixel(canvas, 75,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.destination-in.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.destination-in.html
new file mode 100644
index 0000000000..63e8d3acfd
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.destination-in.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.clip.destination-in</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.clip.destination-in</h1>
+<p class="desc">fill() does not affect pixels outside the clip region.</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("fill() does not affect pixels outside the clip region.");
+_addTest(function(canvas, ctx) {
+
+ ctx.fillStyle = '#0f0';
+ ctx.fillRect(0, 0, 100, 50);
+ ctx.globalCompositeOperation = 'destination-in';
+ ctx.rect(-20, -20, 10, 10);
+ ctx.clip();
+ ctx.fillStyle = '#f00';
+ ctx.fillRect(0, 0, 50, 50);
+ _assertPixel(canvas, 25,25, 0,255,0,255);
+ _assertPixel(canvas, 75,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.destination-out.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.destination-out.html
new file mode 100644
index 0000000000..839246427f
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.destination-out.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.clip.destination-out</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.clip.destination-out</h1>
+<p class="desc">fill() does not affect pixels outside the clip region.</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("fill() does not affect pixels outside the clip region.");
+_addTest(function(canvas, ctx) {
+
+ ctx.fillStyle = '#0f0';
+ ctx.fillRect(0, 0, 100, 50);
+ ctx.globalCompositeOperation = 'destination-out';
+ ctx.rect(-20, -20, 10, 10);
+ ctx.clip();
+ ctx.fillStyle = '#f00';
+ ctx.fillRect(0, 0, 50, 50);
+ _assertPixel(canvas, 25,25, 0,255,0,255);
+ _assertPixel(canvas, 75,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.destination-over.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.destination-over.html
new file mode 100644
index 0000000000..fc7f1ab728
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.destination-over.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.clip.destination-over</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.clip.destination-over</h1>
+<p class="desc">fill() does not affect pixels outside the clip region.</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("fill() does not affect pixels outside the clip region.");
+_addTest(function(canvas, ctx) {
+
+ ctx.fillStyle = '#0f0';
+ ctx.fillRect(0, 0, 100, 50);
+ ctx.globalCompositeOperation = 'destination-over';
+ ctx.rect(-20, -20, 10, 10);
+ ctx.clip();
+ ctx.fillStyle = '#f00';
+ ctx.fillRect(0, 0, 50, 50);
+ _assertPixel(canvas, 25,25, 0,255,0,255);
+ _assertPixel(canvas, 75,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.lighter.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.lighter.html
new file mode 100644
index 0000000000..b3acab0231
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.lighter.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.clip.lighter</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.clip.lighter</h1>
+<p class="desc">fill() does not affect pixels outside the clip region.</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("fill() does not affect pixels outside the clip region.");
+_addTest(function(canvas, ctx) {
+
+ ctx.fillStyle = '#0f0';
+ ctx.fillRect(0, 0, 100, 50);
+ ctx.globalCompositeOperation = 'lighter';
+ ctx.rect(-20, -20, 10, 10);
+ ctx.clip();
+ ctx.fillStyle = '#f00';
+ ctx.fillRect(0, 0, 50, 50);
+ _assertPixel(canvas, 25,25, 0,255,0,255);
+ _assertPixel(canvas, 75,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.source-atop.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.source-atop.html
new file mode 100644
index 0000000000..49c3eb0bb5
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.source-atop.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.clip.source-atop</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.clip.source-atop</h1>
+<p class="desc">fill() does not affect pixels outside the clip region.</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("fill() does not affect pixels outside the clip region.");
+_addTest(function(canvas, ctx) {
+
+ ctx.fillStyle = '#0f0';
+ ctx.fillRect(0, 0, 100, 50);
+ ctx.globalCompositeOperation = 'source-atop';
+ ctx.rect(-20, -20, 10, 10);
+ ctx.clip();
+ ctx.fillStyle = '#f00';
+ ctx.fillRect(0, 0, 50, 50);
+ _assertPixel(canvas, 25,25, 0,255,0,255);
+ _assertPixel(canvas, 75,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.source-in.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.source-in.html
new file mode 100644
index 0000000000..afe92ba4bf
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.source-in.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.clip.source-in</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.clip.source-in</h1>
+<p class="desc">fill() does not affect pixels outside the clip region.</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("fill() does not affect pixels outside the clip region.");
+_addTest(function(canvas, ctx) {
+
+ ctx.fillStyle = '#0f0';
+ ctx.fillRect(0, 0, 100, 50);
+ ctx.globalCompositeOperation = 'source-in';
+ ctx.rect(-20, -20, 10, 10);
+ ctx.clip();
+ ctx.fillStyle = '#f00';
+ ctx.fillRect(0, 0, 50, 50);
+ _assertPixel(canvas, 25,25, 0,255,0,255);
+ _assertPixel(canvas, 75,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.source-out.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.source-out.html
new file mode 100644
index 0000000000..43b352fb46
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.source-out.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.clip.source-out</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.clip.source-out</h1>
+<p class="desc">fill() does not affect pixels outside the clip region.</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("fill() does not affect pixels outside the clip region.");
+_addTest(function(canvas, ctx) {
+
+ ctx.fillStyle = '#0f0';
+ ctx.fillRect(0, 0, 100, 50);
+ ctx.globalCompositeOperation = 'source-out';
+ ctx.rect(-20, -20, 10, 10);
+ ctx.clip();
+ ctx.fillStyle = '#f00';
+ ctx.fillRect(0, 0, 50, 50);
+ _assertPixel(canvas, 25,25, 0,255,0,255);
+ _assertPixel(canvas, 75,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.source-over.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.source-over.html
new file mode 100644
index 0000000000..4973f8e6e6
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.source-over.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.clip.source-over</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.clip.source-over</h1>
+<p class="desc">fill() does not affect pixels outside the clip region.</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("fill() does not affect pixels outside the clip region.");
+_addTest(function(canvas, ctx) {
+
+ ctx.fillStyle = '#0f0';
+ ctx.fillRect(0, 0, 100, 50);
+ ctx.globalCompositeOperation = 'source-over';
+ ctx.rect(-20, -20, 10, 10);
+ ctx.clip();
+ ctx.fillStyle = '#f00';
+ ctx.fillRect(0, 0, 50, 50);
+ _assertPixel(canvas, 25,25, 0,255,0,255);
+ _assertPixel(canvas, 75,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.xor.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.xor.html
new file mode 100644
index 0000000000..5239d6fd10
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.xor.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.clip.xor</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.clip.xor</h1>
+<p class="desc">fill() does not affect pixels outside the clip region.</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("fill() does not affect pixels outside the clip region.");
+_addTest(function(canvas, ctx) {
+
+ ctx.fillStyle = '#0f0';
+ ctx.fillRect(0, 0, 100, 50);
+ ctx.globalCompositeOperation = 'xor';
+ ctx.rect(-20, -20, 10, 10);
+ ctx.clip();
+ ctx.fillStyle = '#f00';
+ ctx.fillRect(0, 0, 50, 50);
+ _assertPixel(canvas, 25,25, 0,255,0,255);
+ _assertPixel(canvas, 75,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.globalAlpha.canvas.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.globalAlpha.canvas.html
new file mode 100644
index 0000000000..525a56ebc9
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.globalAlpha.canvas.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.globalAlpha.canvas</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.globalAlpha.canvas</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ var canvas2 = document.createElement('canvas');
+ canvas2.width = 100;
+ canvas2.height = 50;
+ var ctx2 = canvas2.getContext('2d');
+ ctx2.fillStyle = '#f00';
+ ctx2.fillRect(0, 0, 100, 50);
+
+ ctx.fillStyle = '#0f0';
+ ctx.fillRect(0, 0, 100, 50);
+ // Avoiding any potential alpha = 0 optimisations.
+ ctx.globalAlpha = 0.01;
+ ctx.drawImage(canvas2, 0, 0);
+ _assertPixelApprox(canvas, 50,25, 2,253,0,255, 2);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.globalAlpha.canvascopy.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.globalAlpha.canvascopy.html
new file mode 100644
index 0000000000..17a46cfca2
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.globalAlpha.canvascopy.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.globalAlpha.canvascopy</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.globalAlpha.canvascopy</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ var canvas2 = document.createElement('canvas');
+ canvas2.width = 100;
+ canvas2.height = 50;
+ var ctx2 = canvas2.getContext('2d');
+ ctx2.fillStyle = '#0f0';
+ ctx2.fillRect(0, 0, 100, 50);
+
+ ctx.fillStyle = '#f00';
+ ctx.fillRect(0, 0, 100, 50);
+
+ ctx.globalCompositeOperation = 'copy'
+ ctx.globalAlpha = 0.51;
+ ctx.drawImage(canvas2, 0, 0);
+ _assertPixelApprox(canvas, 50,25, 0,255,0,130, 2);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.globalAlpha.canvaspattern.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.globalAlpha.canvaspattern.html
new file mode 100644
index 0000000000..eea076c974
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.globalAlpha.canvaspattern.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.globalAlpha.canvaspattern</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.globalAlpha.canvaspattern</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ var canvas2 = document.createElement('canvas');
+ canvas2.width = 100;
+ canvas2.height = 50;
+ var ctx2 = canvas2.getContext('2d');
+ ctx2.fillStyle = '#f00';
+ ctx2.fillRect(0, 0, 100, 50);
+
+ ctx.fillStyle = '#0f0';
+ ctx.fillRect(0, 0, 100, 50);
+ ctx.fillStyle = ctx.createPattern(canvas2, 'no-repeat');
+ // Avoiding any potential alpha = 0 optimisations.
+ ctx.globalAlpha = 0.01;
+ ctx.fillRect(0, 0, 100, 50);
+ _assertPixelApprox(canvas, 50,25, 2,253,0,255, 2);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.globalAlpha.default.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.globalAlpha.default.html
new file mode 100644
index 0000000000..97cdf267c7
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.globalAlpha.default.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.globalAlpha.default</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.globalAlpha.default</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ _assertSame(ctx.globalAlpha, 1.0, "ctx.globalAlpha", "1.0");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.globalAlpha.fill.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.globalAlpha.fill.html
new file mode 100644
index 0000000000..5766fdbe77
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.globalAlpha.fill.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.globalAlpha.fill</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.globalAlpha.fill</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ ctx.fillStyle = '#0f0';
+ ctx.fillRect(0, 0, 100, 50);
+ // Avoiding any potential alpha = 0 optimisations.
+ ctx.globalAlpha = 0.01;
+ ctx.fillStyle = '#f00';
+ ctx.fillRect(0, 0, 100, 50);
+ _assertPixelApprox(canvas, 50,25, 2,253,0,255, 2);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.globalAlpha.image.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.globalAlpha.image.html
new file mode 100644
index 0000000000..5de1d5ff3e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.globalAlpha.image.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.globalAlpha.image</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.globalAlpha.image</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+promise_test(async t => {
+
+ var canvas = document.getElementById('c');
+ var ctx = canvas.getContext('2d');
+
+ ctx.fillStyle = '#0f0';
+ ctx.fillRect(0, 0, 100, 50);
+ // Avoiding any potential alpha = 0 optimisations.
+ ctx.globalAlpha = 0.01;
+ const response = await fetch('/images/red.png');
+ const blob = await response.blob();
+ const bitmap = await createImageBitmap(blob);
+
+ ctx.drawImage(bitmap, 0, 0);
+ _assertPixelApprox(canvas, 50,25, 2,253,0,255, 2);
+
+}, "");
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.globalAlpha.imagepattern.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.globalAlpha.imagepattern.html
new file mode 100644
index 0000000000..87e884524e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.globalAlpha.imagepattern.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.globalAlpha.imagepattern</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.globalAlpha.imagepattern</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+promise_test(async t => {
+
+ var canvas = document.getElementById('c');
+ var ctx = canvas.getContext('2d');
+
+ ctx.fillStyle = '#0f0';
+ ctx.fillRect(0, 0, 100, 50);
+ const response = await fetch('/images/red.png');
+ const blob = await response.blob();
+ const bitmap = await createImageBitmap(blob);
+
+ ctx.fillStyle = ctx.createPattern(bitmap, 'no-repeat');
+ // Avoiding any potential alpha = 0 optimisations.
+ ctx.globalAlpha = 0.01;
+ ctx.fillRect(0, 0, 100, 50);
+ _assertPixelApprox(canvas, 50,25, 2,253,0,255, 2);
+
+}, "");
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.globalAlpha.invalid.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.globalAlpha.invalid.html
new file mode 100644
index 0000000000..db67f882f6
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.globalAlpha.invalid.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.globalAlpha.invalid</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.globalAlpha.invalid</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ ctx.globalAlpha = 0.5;
+ // This may not set it to exactly 0.5 if it is rounded/quantised, so
+ // remember for future comparisons.
+ var a = ctx.globalAlpha;
+ ctx.globalAlpha = Infinity;
+ _assertSame(ctx.globalAlpha, a, "ctx.globalAlpha", "a");
+ ctx.globalAlpha = -Infinity;
+ _assertSame(ctx.globalAlpha, a, "ctx.globalAlpha", "a");
+ ctx.globalAlpha = NaN;
+ _assertSame(ctx.globalAlpha, a, "ctx.globalAlpha", "a");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.globalAlpha.range.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.globalAlpha.range.html
new file mode 100644
index 0000000000..883b0cac69
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.globalAlpha.range.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.globalAlpha.range</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.globalAlpha.range</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ ctx.globalAlpha = 0.5;
+ // This may not set it to exactly 0.5 if it is rounded/quantised, so
+ // remember for future comparisons.
+ var a = ctx.globalAlpha;
+ _assertSame(ctx.globalAlpha, a, "ctx.globalAlpha", "a");
+ ctx.globalAlpha = 1.1;
+ _assertSame(ctx.globalAlpha, a, "ctx.globalAlpha", "a");
+ ctx.globalAlpha = -0.1;
+ _assertSame(ctx.globalAlpha, a, "ctx.globalAlpha", "a");
+ ctx.globalAlpha = 0;
+ _assertSame(ctx.globalAlpha, 0, "ctx.globalAlpha", "0");
+ ctx.globalAlpha = 1;
+ _assertSame(ctx.globalAlpha, 1, "ctx.globalAlpha", "1");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.clear.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.clear.html
new file mode 100644
index 0000000000..a44f8e35b0
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.clear.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.image.clear</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.image.clear</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.composite.image.clear.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
+ ctx.fillRect(0, 0, 100, 50);
+ ctx.globalCompositeOperation = 'clear';
+ ctx.drawImage(document.getElementById('yellow75.png'), 0, 0);
+ _assertPixelApprox(canvas, 50,25, 0,0,0,0, 5);
+
+});
+</script>
+<img src="/images/yellow75.png" id="yellow75.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.clear.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.clear.png
new file mode 100644
index 0000000000..eeedd0ff05
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.clear.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.copy.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.copy.html
new file mode 100644
index 0000000000..d3c972b6d2
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.copy.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.image.copy</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.image.copy</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.composite.image.copy.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
+ ctx.fillRect(0, 0, 100, 50);
+ ctx.globalCompositeOperation = 'copy';
+ ctx.drawImage(document.getElementById('yellow75.png'), 0, 0);
+ _assertPixelApprox(canvas, 50,25, 255,255,0,191, 5);
+
+});
+</script>
+<img src="/images/yellow75.png" id="yellow75.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.copy.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.copy.png
new file mode 100644
index 0000000000..f5e9c21964
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.copy.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.destination-atop.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.destination-atop.html
new file mode 100644
index 0000000000..7c6f93448b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.destination-atop.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.image.destination-atop</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.image.destination-atop</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.composite.image.destination-atop.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
+ ctx.fillRect(0, 0, 100, 50);
+ ctx.globalCompositeOperation = 'destination-atop';
+ ctx.drawImage(document.getElementById('yellow75.png'), 0, 0);
+ _assertPixelApprox(canvas, 50,25, 128,255,128,191, 5);
+
+});
+</script>
+<img src="/images/yellow75.png" id="yellow75.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.destination-atop.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.destination-atop.png
new file mode 100644
index 0000000000..504b42756e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.destination-atop.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.destination-in.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.destination-in.html
new file mode 100644
index 0000000000..a2bf972bb9
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.destination-in.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.image.destination-in</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.image.destination-in</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.composite.image.destination-in.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
+ ctx.fillRect(0, 0, 100, 50);
+ ctx.globalCompositeOperation = 'destination-in';
+ ctx.drawImage(document.getElementById('yellow75.png'), 0, 0);
+ _assertPixelApprox(canvas, 50,25, 0,255,255,96, 5);
+
+});
+</script>
+<img src="/images/yellow75.png" id="yellow75.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.destination-in.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.destination-in.png
new file mode 100644
index 0000000000..790e418a6b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.destination-in.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.destination-out.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.destination-out.html
new file mode 100644
index 0000000000..d0d08fa09e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.destination-out.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.image.destination-out</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.image.destination-out</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.composite.image.destination-out.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
+ ctx.fillRect(0, 0, 100, 50);
+ ctx.globalCompositeOperation = 'destination-out';
+ ctx.drawImage(document.getElementById('yellow75.png'), 0, 0);
+ _assertPixelApprox(canvas, 50,25, 0,255,255,32, 5);
+
+});
+</script>
+<img src="/images/yellow75.png" id="yellow75.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.destination-out.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.destination-out.png
new file mode 100644
index 0000000000..7f5ed1a836
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.destination-out.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.destination-over.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.destination-over.html
new file mode 100644
index 0000000000..7ac98904f3
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.destination-over.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.image.destination-over</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.image.destination-over</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.composite.image.destination-over.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
+ ctx.fillRect(0, 0, 100, 50);
+ ctx.globalCompositeOperation = 'destination-over';
+ ctx.drawImage(document.getElementById('yellow75.png'), 0, 0);
+ _assertPixelApprox(canvas, 50,25, 109,255,146,223, 5);
+
+});
+</script>
+<img src="/images/yellow75.png" id="yellow75.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.destination-over.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.destination-over.png
new file mode 100644
index 0000000000..226390b2f8
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.destination-over.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.lighter.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.lighter.html
new file mode 100644
index 0000000000..1df4c683df
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.lighter.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.image.lighter</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.image.lighter</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.composite.image.lighter.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
+ ctx.fillRect(0, 0, 100, 50);
+ ctx.globalCompositeOperation = 'lighter';
+ ctx.drawImage(document.getElementById('yellow75.png'), 0, 0);
+ _assertPixelApprox(canvas, 50,25, 191,255,128,255, 5);
+
+});
+</script>
+<img src="/images/yellow75.png" id="yellow75.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.lighter.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.lighter.png
new file mode 100644
index 0000000000..fc33f3301e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.lighter.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.source-atop.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.source-atop.html
new file mode 100644
index 0000000000..86833df6b2
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.source-atop.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.image.source-atop</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.image.source-atop</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.composite.image.source-atop.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
+ ctx.fillRect(0, 0, 100, 50);
+ ctx.globalCompositeOperation = 'source-atop';
+ ctx.drawImage(document.getElementById('yellow75.png'), 0, 0);
+ _assertPixelApprox(canvas, 50,25, 191,255,64,128, 5);
+
+});
+</script>
+<img src="/images/yellow75.png" id="yellow75.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.source-atop.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.source-atop.png
new file mode 100644
index 0000000000..1ef9630195
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.source-atop.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.source-in.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.source-in.html
new file mode 100644
index 0000000000..0b6ca4b52e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.source-in.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.image.source-in</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.image.source-in</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.composite.image.source-in.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
+ ctx.fillRect(0, 0, 100, 50);
+ ctx.globalCompositeOperation = 'source-in';
+ ctx.drawImage(document.getElementById('yellow75.png'), 0, 0);
+ _assertPixelApprox(canvas, 50,25, 255,255,0,96, 5);
+
+});
+</script>
+<img src="/images/yellow75.png" id="yellow75.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.source-in.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.source-in.png
new file mode 100644
index 0000000000..c26cdccf02
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.source-in.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.source-out.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.source-out.html
new file mode 100644
index 0000000000..31dfe471e5
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.source-out.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.image.source-out</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.image.source-out</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.composite.image.source-out.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
+ ctx.fillRect(0, 0, 100, 50);
+ ctx.globalCompositeOperation = 'source-out';
+ ctx.drawImage(document.getElementById('yellow75.png'), 0, 0);
+ _assertPixelApprox(canvas, 50,25, 255,255,0,96, 5);
+
+});
+</script>
+<img src="/images/yellow75.png" id="yellow75.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.source-out.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.source-out.png
new file mode 100644
index 0000000000..c26cdccf02
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.source-out.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.source-over.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.source-over.html
new file mode 100644
index 0000000000..e396faa5d7
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.source-over.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.image.source-over</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.image.source-over</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.composite.image.source-over.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
+ ctx.fillRect(0, 0, 100, 50);
+ ctx.globalCompositeOperation = 'source-over';
+ ctx.drawImage(document.getElementById('yellow75.png'), 0, 0);
+ _assertPixelApprox(canvas, 50,25, 219,255,36,223, 5);
+
+});
+</script>
+<img src="/images/yellow75.png" id="yellow75.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.source-over.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.source-over.png
new file mode 100644
index 0000000000..e63ab7e308
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.source-over.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.xor.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.xor.html
new file mode 100644
index 0000000000..d43742c272
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.xor.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.image.xor</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.image.xor</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.composite.image.xor.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
+ ctx.fillRect(0, 0, 100, 50);
+ ctx.globalCompositeOperation = 'xor';
+ ctx.drawImage(document.getElementById('yellow75.png'), 0, 0);
+ _assertPixelApprox(canvas, 50,25, 191,255,64,128, 5);
+
+});
+</script>
+<img src="/images/yellow75.png" id="yellow75.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.xor.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.xor.png
new file mode 100644
index 0000000000..1ef9630195
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.xor.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.operation.casesensitive.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.operation.casesensitive.html
new file mode 100644
index 0000000000..13ae99b35f
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.operation.casesensitive.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.operation.casesensitive</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.operation.casesensitive</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ ctx.globalCompositeOperation = 'xor';
+ ctx.globalCompositeOperation = 'Source-over';
+ _assertSame(ctx.globalCompositeOperation, 'xor', "ctx.globalCompositeOperation", "'xor'");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.operation.clear.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.operation.clear.html
new file mode 100644
index 0000000000..c1e88b4894
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.operation.clear.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.operation.clear</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.operation.clear</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ ctx.globalCompositeOperation = 'xor';
+ ctx.globalCompositeOperation = 'clear';
+ _assertSame(ctx.globalCompositeOperation, 'clear', "ctx.globalCompositeOperation", "'clear'");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.operation.darker.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.operation.darker.html
new file mode 100644
index 0000000000..4fb6998f71
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.operation.darker.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.operation.darker</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.operation.darker</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ ctx.globalCompositeOperation = 'xor';
+ ctx.globalCompositeOperation = 'darker';
+ _assertSame(ctx.globalCompositeOperation, 'xor', "ctx.globalCompositeOperation", "'xor'");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.operation.default.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.operation.default.html
new file mode 100644
index 0000000000..5ccd488b3c
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.operation.default.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.operation.default</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.operation.default</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ _assertSame(ctx.globalCompositeOperation, 'source-over', "ctx.globalCompositeOperation", "'source-over'");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.operation.get.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.operation.get.html
new file mode 100644
index 0000000000..27b89c9fed
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.operation.get.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.operation.get</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.operation.get</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ var modes = ['source-atop', 'source-in', 'source-out', 'source-over',
+ 'destination-atop', 'destination-in', 'destination-out', 'destination-over',
+ 'lighter', 'copy', 'xor'];
+ for (var i = 0; i < modes.length; ++i)
+ {
+ ctx.globalCompositeOperation = modes[i];
+ _assertSame(ctx.globalCompositeOperation, modes[i], "ctx.globalCompositeOperation", "modes[\""+(i)+"\"]");
+ }
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.operation.highlight.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.operation.highlight.html
new file mode 100644
index 0000000000..45c5dd15eb
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.operation.highlight.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.operation.highlight</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.operation.highlight</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ ctx.globalCompositeOperation = 'xor';
+ ctx.globalCompositeOperation = 'highlight';
+ _assertSame(ctx.globalCompositeOperation, 'xor', "ctx.globalCompositeOperation", "'xor'");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.operation.nullsuffix.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.operation.nullsuffix.html
new file mode 100644
index 0000000000..8a2443ff41
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.operation.nullsuffix.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.operation.nullsuffix</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.operation.nullsuffix</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ ctx.globalCompositeOperation = 'xor';
+ ctx.globalCompositeOperation = 'source-over\0';
+ _assertSame(ctx.globalCompositeOperation, 'xor', "ctx.globalCompositeOperation", "'xor'");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.operation.over.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.operation.over.html
new file mode 100644
index 0000000000..1d742ef3cc
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.operation.over.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.operation.over</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.operation.over</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ ctx.globalCompositeOperation = 'xor';
+ ctx.globalCompositeOperation = 'over';
+ _assertSame(ctx.globalCompositeOperation, 'xor', "ctx.globalCompositeOperation", "'xor'");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.operation.unrecognised.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.operation.unrecognised.html
new file mode 100644
index 0000000000..e4aa877d96
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.operation.unrecognised.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.operation.unrecognised</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.operation.unrecognised</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ ctx.globalCompositeOperation = 'xor';
+ ctx.globalCompositeOperation = 'nonexistent';
+ _assertSame(ctx.globalCompositeOperation, 'xor', "ctx.globalCompositeOperation", "'xor'");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.clear.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.clear.html
new file mode 100644
index 0000000000..a946989544
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.clear.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.solid.clear</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.solid.clear</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.composite.solid.clear.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ ctx.fillStyle = 'rgba(0, 255, 255, 1.0)';
+ ctx.fillRect(0, 0, 100, 50);
+ ctx.globalCompositeOperation = 'clear';
+ ctx.fillStyle = 'rgba(255, 255, 0, 1.0)';
+ ctx.fillRect(0, 0, 100, 50);
+ _assertPixelApprox(canvas, 50,25, 0,0,0,0, 5);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.clear.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.clear.png
new file mode 100644
index 0000000000..eeedd0ff05
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.clear.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.copy.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.copy.html
new file mode 100644
index 0000000000..14bee74452
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.copy.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.solid.copy</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.solid.copy</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.composite.solid.copy.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ ctx.fillStyle = 'rgba(0, 255, 255, 1.0)';
+ ctx.fillRect(0, 0, 100, 50);
+ ctx.globalCompositeOperation = 'copy';
+ ctx.fillStyle = 'rgba(255, 255, 0, 1.0)';
+ ctx.fillRect(0, 0, 100, 50);
+ _assertPixelApprox(canvas, 50,25, 255,255,0,255, 5);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.copy.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.copy.png
new file mode 100644
index 0000000000..fc0883e74f
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.copy.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.destination-atop.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.destination-atop.html
new file mode 100644
index 0000000000..d82fb44cce
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.destination-atop.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.solid.destination-atop</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.solid.destination-atop</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.composite.solid.destination-atop.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ ctx.fillStyle = 'rgba(0, 255, 255, 1.0)';
+ ctx.fillRect(0, 0, 100, 50);
+ ctx.globalCompositeOperation = 'destination-atop';
+ ctx.fillStyle = 'rgba(255, 255, 0, 1.0)';
+ ctx.fillRect(0, 0, 100, 50);
+ _assertPixelApprox(canvas, 50,25, 0,255,255,255, 5);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.destination-atop.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.destination-atop.png
new file mode 100644
index 0000000000..dd04072baf
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.destination-atop.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.destination-in.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.destination-in.html
new file mode 100644
index 0000000000..6a491f57c7
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.destination-in.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.solid.destination-in</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.solid.destination-in</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.composite.solid.destination-in.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ ctx.fillStyle = 'rgba(0, 255, 255, 1.0)';
+ ctx.fillRect(0, 0, 100, 50);
+ ctx.globalCompositeOperation = 'destination-in';
+ ctx.fillStyle = 'rgba(255, 255, 0, 1.0)';
+ ctx.fillRect(0, 0, 100, 50);
+ _assertPixelApprox(canvas, 50,25, 0,255,255,255, 5);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.destination-in.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.destination-in.png
new file mode 100644
index 0000000000..dd04072baf
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.destination-in.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.destination-out.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.destination-out.html
new file mode 100644
index 0000000000..bcc7f24e7a
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.destination-out.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.solid.destination-out</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.solid.destination-out</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.composite.solid.destination-out.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ ctx.fillStyle = 'rgba(0, 255, 255, 1.0)';
+ ctx.fillRect(0, 0, 100, 50);
+ ctx.globalCompositeOperation = 'destination-out';
+ ctx.fillStyle = 'rgba(255, 255, 0, 1.0)';
+ ctx.fillRect(0, 0, 100, 50);
+ _assertPixelApprox(canvas, 50,25, 0,0,0,0, 5);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.destination-out.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.destination-out.png
new file mode 100644
index 0000000000..eeedd0ff05
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.destination-out.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.destination-over.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.destination-over.html
new file mode 100644
index 0000000000..6e634e6ae5
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.destination-over.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.solid.destination-over</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.solid.destination-over</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.composite.solid.destination-over.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ ctx.fillStyle = 'rgba(0, 255, 255, 1.0)';
+ ctx.fillRect(0, 0, 100, 50);
+ ctx.globalCompositeOperation = 'destination-over';
+ ctx.fillStyle = 'rgba(255, 255, 0, 1.0)';
+ ctx.fillRect(0, 0, 100, 50);
+ _assertPixelApprox(canvas, 50,25, 0,255,255,255, 5);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.destination-over.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.destination-over.png
new file mode 100644
index 0000000000..dd04072baf
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.destination-over.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.lighter.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.lighter.html
new file mode 100644
index 0000000000..fddbe92420
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.lighter.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.solid.lighter</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.solid.lighter</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.composite.solid.lighter.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ ctx.fillStyle = 'rgba(0, 255, 255, 1.0)';
+ ctx.fillRect(0, 0, 100, 50);
+ ctx.globalCompositeOperation = 'lighter';
+ ctx.fillStyle = 'rgba(255, 255, 0, 1.0)';
+ ctx.fillRect(0, 0, 100, 50);
+ _assertPixelApprox(canvas, 50,25, 255,255,255,255, 5);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.lighter.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.lighter.png
new file mode 100644
index 0000000000..bf48767a88
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.lighter.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.source-atop.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.source-atop.html
new file mode 100644
index 0000000000..4bb0e3d8b5
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.source-atop.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.solid.source-atop</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.solid.source-atop</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.composite.solid.source-atop.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ ctx.fillStyle = 'rgba(0, 255, 255, 1.0)';
+ ctx.fillRect(0, 0, 100, 50);
+ ctx.globalCompositeOperation = 'source-atop';
+ ctx.fillStyle = 'rgba(255, 255, 0, 1.0)';
+ ctx.fillRect(0, 0, 100, 50);
+ _assertPixelApprox(canvas, 50,25, 255,255,0,255, 5);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.source-atop.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.source-atop.png
new file mode 100644
index 0000000000..fc0883e74f
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.source-atop.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.source-in.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.source-in.html
new file mode 100644
index 0000000000..f8fee40a93
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.source-in.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.solid.source-in</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.solid.source-in</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.composite.solid.source-in.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ ctx.fillStyle = 'rgba(0, 255, 255, 1.0)';
+ ctx.fillRect(0, 0, 100, 50);
+ ctx.globalCompositeOperation = 'source-in';
+ ctx.fillStyle = 'rgba(255, 255, 0, 1.0)';
+ ctx.fillRect(0, 0, 100, 50);
+ _assertPixelApprox(canvas, 50,25, 255,255,0,255, 5);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.source-in.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.source-in.png
new file mode 100644
index 0000000000..fc0883e74f
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.source-in.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.source-out.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.source-out.html
new file mode 100644
index 0000000000..2c9d086182
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.source-out.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.solid.source-out</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.solid.source-out</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.composite.solid.source-out.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ ctx.fillStyle = 'rgba(0, 255, 255, 1.0)';
+ ctx.fillRect(0, 0, 100, 50);
+ ctx.globalCompositeOperation = 'source-out';
+ ctx.fillStyle = 'rgba(255, 255, 0, 1.0)';
+ ctx.fillRect(0, 0, 100, 50);
+ _assertPixelApprox(canvas, 50,25, 0,0,0,0, 5);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.source-out.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.source-out.png
new file mode 100644
index 0000000000..eeedd0ff05
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.source-out.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.source-over.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.source-over.html
new file mode 100644
index 0000000000..335987b12b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.source-over.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.solid.source-over</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.solid.source-over</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.composite.solid.source-over.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ ctx.fillStyle = 'rgba(0, 255, 255, 1.0)';
+ ctx.fillRect(0, 0, 100, 50);
+ ctx.globalCompositeOperation = 'source-over';
+ ctx.fillStyle = 'rgba(255, 255, 0, 1.0)';
+ ctx.fillRect(0, 0, 100, 50);
+ _assertPixelApprox(canvas, 50,25, 255,255,0,255, 5);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.source-over.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.source-over.png
new file mode 100644
index 0000000000..fc0883e74f
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.source-over.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.xor.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.xor.html
new file mode 100644
index 0000000000..d9da43070e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.xor.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.solid.xor</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.solid.xor</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.composite.solid.xor.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ ctx.fillStyle = 'rgba(0, 255, 255, 1.0)';
+ ctx.fillRect(0, 0, 100, 50);
+ ctx.globalCompositeOperation = 'xor';
+ ctx.fillStyle = 'rgba(255, 255, 0, 1.0)';
+ ctx.fillRect(0, 0, 100, 50);
+ _assertPixelApprox(canvas, 50,25, 0,0,0,0, 5);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.xor.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.xor.png
new file mode 100644
index 0000000000..eeedd0ff05
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.xor.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.clear.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.clear.html
new file mode 100644
index 0000000000..de417eea34
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.clear.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.transparent.clear</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.transparent.clear</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.composite.transparent.clear.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
+ ctx.fillRect(0, 0, 100, 50);
+ ctx.globalCompositeOperation = 'clear';
+ ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
+ ctx.fillRect(0, 0, 100, 50);
+ _assertPixelApprox(canvas, 50,25, 0,0,0,0, 5);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.clear.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.clear.png
new file mode 100644
index 0000000000..eeedd0ff05
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.clear.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.copy.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.copy.html
new file mode 100644
index 0000000000..2048975ec3
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.copy.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.transparent.copy</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.transparent.copy</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.composite.transparent.copy.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
+ ctx.fillRect(0, 0, 100, 50);
+ ctx.globalCompositeOperation = 'copy';
+ ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
+ ctx.fillRect(0, 0, 100, 50);
+ _assertPixelApprox(canvas, 50,25, 0,0,255,191, 5);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.copy.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.copy.png
new file mode 100644
index 0000000000..b0cbe3a552
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.copy.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.destination-atop.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.destination-atop.html
new file mode 100644
index 0000000000..1da1f1a4ee
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.destination-atop.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.transparent.destination-atop</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.transparent.destination-atop</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.composite.transparent.destination-atop.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
+ ctx.fillRect(0, 0, 100, 50);
+ ctx.globalCompositeOperation = 'destination-atop';
+ ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
+ ctx.fillRect(0, 0, 100, 50);
+ _assertPixelApprox(canvas, 50,25, 0,128,128,191, 5);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.destination-atop.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.destination-atop.png
new file mode 100644
index 0000000000..5db0a0484a
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.destination-atop.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.destination-in.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.destination-in.html
new file mode 100644
index 0000000000..b0f8abe0ef
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.destination-in.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.transparent.destination-in</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.transparent.destination-in</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.composite.transparent.destination-in.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
+ ctx.fillRect(0, 0, 100, 50);
+ ctx.globalCompositeOperation = 'destination-in';
+ ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
+ ctx.fillRect(0, 0, 100, 50);
+ _assertPixelApprox(canvas, 50,25, 0,255,0,96, 5);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.destination-in.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.destination-in.png
new file mode 100644
index 0000000000..c6895de985
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.destination-in.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.destination-out.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.destination-out.html
new file mode 100644
index 0000000000..badbfc4ad7
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.destination-out.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.transparent.destination-out</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.transparent.destination-out</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.composite.transparent.destination-out.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
+ ctx.fillRect(0, 0, 100, 50);
+ ctx.globalCompositeOperation = 'destination-out';
+ ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
+ ctx.fillRect(0, 0, 100, 50);
+ _assertPixelApprox(canvas, 50,25, 0,255,0,32, 5);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.destination-out.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.destination-out.png
new file mode 100644
index 0000000000..873a9c45d8
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.destination-out.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.destination-over.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.destination-over.html
new file mode 100644
index 0000000000..e8e0051b2c
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.destination-over.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.transparent.destination-over</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.transparent.destination-over</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.composite.transparent.destination-over.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
+ ctx.fillRect(0, 0, 100, 50);
+ ctx.globalCompositeOperation = 'destination-over';
+ ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
+ ctx.fillRect(0, 0, 100, 50);
+ _assertPixelApprox(canvas, 50,25, 0,146,109,223, 5);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.destination-over.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.destination-over.png
new file mode 100644
index 0000000000..5a8726bbca
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.destination-over.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.lighter.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.lighter.html
new file mode 100644
index 0000000000..6e4c42ab9a
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.lighter.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.transparent.lighter</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.transparent.lighter</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.composite.transparent.lighter.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
+ ctx.fillRect(0, 0, 100, 50);
+ ctx.globalCompositeOperation = 'lighter';
+ ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
+ ctx.fillRect(0, 0, 100, 50);
+ _assertPixelApprox(canvas, 50,25, 0,128,191,255, 5);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.lighter.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.lighter.png
new file mode 100644
index 0000000000..0e1c28c0cd
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.lighter.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.source-atop.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.source-atop.html
new file mode 100644
index 0000000000..d3d3fbda12
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.source-atop.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.transparent.source-atop</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.transparent.source-atop</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.composite.transparent.source-atop.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
+ ctx.fillRect(0, 0, 100, 50);
+ ctx.globalCompositeOperation = 'source-atop';
+ ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
+ ctx.fillRect(0, 0, 100, 50);
+ _assertPixelApprox(canvas, 50,25, 0,64,191,128, 5);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.source-atop.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.source-atop.png
new file mode 100644
index 0000000000..e0afff6b00
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.source-atop.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.source-in.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.source-in.html
new file mode 100644
index 0000000000..27c66cb673
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.source-in.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.transparent.source-in</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.transparent.source-in</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.composite.transparent.source-in.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
+ ctx.fillRect(0, 0, 100, 50);
+ ctx.globalCompositeOperation = 'source-in';
+ ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
+ ctx.fillRect(0, 0, 100, 50);
+ _assertPixelApprox(canvas, 50,25, 0,0,255,96, 5);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.source-in.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.source-in.png
new file mode 100644
index 0000000000..1459b5e54e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.source-in.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.source-out.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.source-out.html
new file mode 100644
index 0000000000..31bb6a2403
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.source-out.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.transparent.source-out</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.transparent.source-out</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.composite.transparent.source-out.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
+ ctx.fillRect(0, 0, 100, 50);
+ ctx.globalCompositeOperation = 'source-out';
+ ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
+ ctx.fillRect(0, 0, 100, 50);
+ _assertPixelApprox(canvas, 50,25, 0,0,255,96, 5);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.source-out.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.source-out.png
new file mode 100644
index 0000000000..1459b5e54e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.source-out.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.source-over.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.source-over.html
new file mode 100644
index 0000000000..ee20f52b46
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.source-over.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.transparent.source-over</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.transparent.source-over</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.composite.transparent.source-over.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
+ ctx.fillRect(0, 0, 100, 50);
+ ctx.globalCompositeOperation = 'source-over';
+ ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
+ ctx.fillRect(0, 0, 100, 50);
+ _assertPixelApprox(canvas, 50,25, 0,36,219,223, 5);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.source-over.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.source-over.png
new file mode 100644
index 0000000000..02acb7a861
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.source-over.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.xor.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.xor.html
new file mode 100644
index 0000000000..d1818750df
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.xor.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.transparent.xor</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.transparent.xor</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.composite.transparent.xor.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
+ ctx.fillRect(0, 0, 100, 50);
+ ctx.globalCompositeOperation = 'xor';
+ ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
+ ctx.fillRect(0, 0, 100, 50);
+ _assertPixelApprox(canvas, 50,25, 0,64,191,128, 5);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.xor.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.xor.png
new file mode 100644
index 0000000000..e0afff6b00
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.xor.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.fill.copy.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.fill.copy.html
new file mode 100644
index 0000000000..9dfd650b98
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.fill.copy.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.uncovered.fill.copy</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.uncovered.fill.copy</h1>
+<p class="desc">fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged.</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.composite.uncovered.fill.copy.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged.");
+_addTest(function(canvas, ctx) {
+
+ ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
+ ctx.fillRect(0, 0, 100, 50);
+ ctx.globalCompositeOperation = 'copy';
+ ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
+ ctx.translate(0, 25);
+ ctx.fillRect(0, 50, 100, 50);
+ _assertPixelApprox(canvas, 50,25, 0,0,0,0, 5);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.fill.copy.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.fill.copy.png
new file mode 100644
index 0000000000..eeedd0ff05
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.fill.copy.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.fill.destination-atop.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.fill.destination-atop.html
new file mode 100644
index 0000000000..685a139504
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.fill.destination-atop.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.uncovered.fill.destination-atop</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.uncovered.fill.destination-atop</h1>
+<p class="desc">fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged.</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.composite.uncovered.fill.destination-atop.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged.");
+_addTest(function(canvas, ctx) {
+
+ ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
+ ctx.fillRect(0, 0, 100, 50);
+ ctx.globalCompositeOperation = 'destination-atop';
+ ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
+ ctx.translate(0, 25);
+ ctx.fillRect(0, 50, 100, 50);
+ _assertPixelApprox(canvas, 50,25, 0,0,0,0, 5);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.fill.destination-atop.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.fill.destination-atop.png
new file mode 100644
index 0000000000..eeedd0ff05
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.fill.destination-atop.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.fill.destination-in.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.fill.destination-in.html
new file mode 100644
index 0000000000..9ca8021151
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.fill.destination-in.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.uncovered.fill.destination-in</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.uncovered.fill.destination-in</h1>
+<p class="desc">fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged.</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.composite.uncovered.fill.destination-in.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged.");
+_addTest(function(canvas, ctx) {
+
+ ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
+ ctx.fillRect(0, 0, 100, 50);
+ ctx.globalCompositeOperation = 'destination-in';
+ ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
+ ctx.translate(0, 25);
+ ctx.fillRect(0, 50, 100, 50);
+ _assertPixelApprox(canvas, 50,25, 0,0,0,0, 5);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.fill.destination-in.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.fill.destination-in.png
new file mode 100644
index 0000000000..eeedd0ff05
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.fill.destination-in.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.fill.source-in.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.fill.source-in.html
new file mode 100644
index 0000000000..9f1a5f9d51
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.fill.source-in.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.uncovered.fill.source-in</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.uncovered.fill.source-in</h1>
+<p class="desc">fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged.</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.composite.uncovered.fill.source-in.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged.");
+_addTest(function(canvas, ctx) {
+
+ ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
+ ctx.fillRect(0, 0, 100, 50);
+ ctx.globalCompositeOperation = 'source-in';
+ ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
+ ctx.translate(0, 25);
+ ctx.fillRect(0, 50, 100, 50);
+ _assertPixelApprox(canvas, 50,25, 0,0,0,0, 5);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.fill.source-in.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.fill.source-in.png
new file mode 100644
index 0000000000..eeedd0ff05
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.fill.source-in.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.fill.source-out.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.fill.source-out.html
new file mode 100644
index 0000000000..7653677fd5
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.fill.source-out.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.uncovered.fill.source-out</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.uncovered.fill.source-out</h1>
+<p class="desc">fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged.</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.composite.uncovered.fill.source-out.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged.");
+_addTest(function(canvas, ctx) {
+
+ ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
+ ctx.fillRect(0, 0, 100, 50);
+ ctx.globalCompositeOperation = 'source-out';
+ ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
+ ctx.translate(0, 25);
+ ctx.fillRect(0, 50, 100, 50);
+ _assertPixelApprox(canvas, 50,25, 0,0,0,0, 5);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.fill.source-out.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.fill.source-out.png
new file mode 100644
index 0000000000..eeedd0ff05
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.fill.source-out.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.image.copy.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.image.copy.html
new file mode 100644
index 0000000000..61dd0381ee
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.image.copy.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.uncovered.image.copy</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.uncovered.image.copy</h1>
+<p class="desc">drawImage() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged.</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.composite.uncovered.image.copy.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("drawImage() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged.");
+_addTest(function(canvas, ctx) {
+
+ ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
+ ctx.fillRect(0, 0, 100, 50);
+ ctx.globalCompositeOperation = 'copy';
+ ctx.drawImage(document.getElementById('yellow.png'), 40, 40, 10, 10, 40, 50, 10, 10);
+ _assertPixelApprox(canvas, 15,15, 0,0,0,0, 5);
+ _assertPixelApprox(canvas, 50,25, 0,0,0,0, 5);
+
+});
+</script>
+<img src="/images/yellow.png" id="yellow.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.image.copy.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.image.copy.png
new file mode 100644
index 0000000000..eeedd0ff05
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.image.copy.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.image.destination-atop.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.image.destination-atop.html
new file mode 100644
index 0000000000..440c832c71
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.image.destination-atop.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.uncovered.image.destination-atop</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.uncovered.image.destination-atop</h1>
+<p class="desc">drawImage() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged.</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.composite.uncovered.image.destination-atop.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("drawImage() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged.");
+_addTest(function(canvas, ctx) {
+
+ ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
+ ctx.fillRect(0, 0, 100, 50);
+ ctx.globalCompositeOperation = 'destination-atop';
+ ctx.drawImage(document.getElementById('yellow.png'), 40, 40, 10, 10, 40, 50, 10, 10);
+ _assertPixelApprox(canvas, 15,15, 0,0,0,0, 5);
+ _assertPixelApprox(canvas, 50,25, 0,0,0,0, 5);
+
+});
+</script>
+<img src="/images/yellow.png" id="yellow.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.image.destination-atop.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.image.destination-atop.png
new file mode 100644
index 0000000000..eeedd0ff05
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.image.destination-atop.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.image.destination-in.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.image.destination-in.html
new file mode 100644
index 0000000000..03e2e807ed
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.image.destination-in.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.uncovered.image.destination-in</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.uncovered.image.destination-in</h1>
+<p class="desc">drawImage() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged.</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.composite.uncovered.image.destination-in.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("drawImage() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged.");
+_addTest(function(canvas, ctx) {
+
+ ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
+ ctx.fillRect(0, 0, 100, 50);
+ ctx.globalCompositeOperation = 'destination-in';
+ ctx.drawImage(document.getElementById('yellow.png'), 40, 40, 10, 10, 40, 50, 10, 10);
+ _assertPixelApprox(canvas, 15,15, 0,0,0,0, 5);
+ _assertPixelApprox(canvas, 50,25, 0,0,0,0, 5);
+
+});
+</script>
+<img src="/images/yellow.png" id="yellow.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.image.destination-in.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.image.destination-in.png
new file mode 100644
index 0000000000..eeedd0ff05
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.image.destination-in.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.image.source-in.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.image.source-in.html
new file mode 100644
index 0000000000..de2e5fad63
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.image.source-in.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.uncovered.image.source-in</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.uncovered.image.source-in</h1>
+<p class="desc">drawImage() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged.</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.composite.uncovered.image.source-in.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("drawImage() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged.");
+_addTest(function(canvas, ctx) {
+
+ ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
+ ctx.fillRect(0, 0, 100, 50);
+ ctx.globalCompositeOperation = 'source-in';
+ ctx.drawImage(document.getElementById('yellow.png'), 40, 40, 10, 10, 40, 50, 10, 10);
+ _assertPixelApprox(canvas, 15,15, 0,0,0,0, 5);
+ _assertPixelApprox(canvas, 50,25, 0,0,0,0, 5);
+
+});
+</script>
+<img src="/images/yellow.png" id="yellow.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.image.source-in.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.image.source-in.png
new file mode 100644
index 0000000000..eeedd0ff05
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.image.source-in.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.image.source-out.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.image.source-out.html
new file mode 100644
index 0000000000..5cb9b072b9
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.image.source-out.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.uncovered.image.source-out</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.uncovered.image.source-out</h1>
+<p class="desc">drawImage() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged.</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.composite.uncovered.image.source-out.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("drawImage() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged.");
+_addTest(function(canvas, ctx) {
+
+ ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
+ ctx.fillRect(0, 0, 100, 50);
+ ctx.globalCompositeOperation = 'source-out';
+ ctx.drawImage(document.getElementById('yellow.png'), 40, 40, 10, 10, 40, 50, 10, 10);
+ _assertPixelApprox(canvas, 15,15, 0,0,0,0, 5);
+ _assertPixelApprox(canvas, 50,25, 0,0,0,0, 5);
+
+});
+</script>
+<img src="/images/yellow.png" id="yellow.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.image.source-out.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.image.source-out.png
new file mode 100644
index 0000000000..eeedd0ff05
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.image.source-out.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.nocontext.copy.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.nocontext.copy.html
new file mode 100644
index 0000000000..cac66ade5a
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.nocontext.copy.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.uncovered.nocontext.copy</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.uncovered.nocontext.copy</h1>
+<p class="desc">drawImage() of a canvas with no context draws pixels as (0,0,0,0), and does not leave the pixels unchanged.</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.composite.uncovered.nocontext.copy.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("drawImage() of a canvas with no context draws pixels as (0,0,0,0), and does not leave the pixels unchanged.");
+_addTest(function(canvas, ctx) {
+
+ ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
+ ctx.fillRect(0, 0, 100, 50);
+ ctx.globalCompositeOperation = 'copy';
+ var canvas2 = document.createElement('canvas');
+ ctx.drawImage(canvas2, 0, 0);
+ _assertPixelApprox(canvas, 50,25, 0,0,0,0, 5);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.nocontext.copy.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.nocontext.copy.png
new file mode 100644
index 0000000000..eeedd0ff05
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.nocontext.copy.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.nocontext.destination-atop.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.nocontext.destination-atop.html
new file mode 100644
index 0000000000..c7cecc2e3d
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.nocontext.destination-atop.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.uncovered.nocontext.destination-atop</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.uncovered.nocontext.destination-atop</h1>
+<p class="desc">drawImage() of a canvas with no context draws pixels as (0,0,0,0), and does not leave the pixels unchanged.</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.composite.uncovered.nocontext.destination-atop.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("drawImage() of a canvas with no context draws pixels as (0,0,0,0), and does not leave the pixels unchanged.");
+_addTest(function(canvas, ctx) {
+
+ ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
+ ctx.fillRect(0, 0, 100, 50);
+ ctx.globalCompositeOperation = 'destination-atop';
+ var canvas2 = document.createElement('canvas');
+ ctx.drawImage(canvas2, 0, 0);
+ _assertPixelApprox(canvas, 50,25, 0,0,0,0, 5);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.nocontext.destination-atop.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.nocontext.destination-atop.png
new file mode 100644
index 0000000000..eeedd0ff05
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.nocontext.destination-atop.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.nocontext.destination-in.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.nocontext.destination-in.html
new file mode 100644
index 0000000000..e090d7d4b4
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.nocontext.destination-in.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.uncovered.nocontext.destination-in</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.uncovered.nocontext.destination-in</h1>
+<p class="desc">drawImage() of a canvas with no context draws pixels as (0,0,0,0), and does not leave the pixels unchanged.</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.composite.uncovered.nocontext.destination-in.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("drawImage() of a canvas with no context draws pixels as (0,0,0,0), and does not leave the pixels unchanged.");
+_addTest(function(canvas, ctx) {
+
+ ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
+ ctx.fillRect(0, 0, 100, 50);
+ ctx.globalCompositeOperation = 'destination-in';
+ var canvas2 = document.createElement('canvas');
+ ctx.drawImage(canvas2, 0, 0);
+ _assertPixelApprox(canvas, 50,25, 0,0,0,0, 5);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.nocontext.destination-in.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.nocontext.destination-in.png
new file mode 100644
index 0000000000..eeedd0ff05
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.nocontext.destination-in.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.nocontext.source-in.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.nocontext.source-in.html
new file mode 100644
index 0000000000..0436b40817
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.nocontext.source-in.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.uncovered.nocontext.source-in</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.uncovered.nocontext.source-in</h1>
+<p class="desc">drawImage() of a canvas with no context draws pixels as (0,0,0,0), and does not leave the pixels unchanged.</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.composite.uncovered.nocontext.source-in.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("drawImage() of a canvas with no context draws pixels as (0,0,0,0), and does not leave the pixels unchanged.");
+_addTest(function(canvas, ctx) {
+
+ ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
+ ctx.fillRect(0, 0, 100, 50);
+ ctx.globalCompositeOperation = 'source-in';
+ var canvas2 = document.createElement('canvas');
+ ctx.drawImage(canvas2, 0, 0);
+ _assertPixelApprox(canvas, 50,25, 0,0,0,0, 5);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.nocontext.source-in.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.nocontext.source-in.png
new file mode 100644
index 0000000000..eeedd0ff05
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.nocontext.source-in.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.nocontext.source-out.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.nocontext.source-out.html
new file mode 100644
index 0000000000..efbc8ab2f0
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.nocontext.source-out.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.uncovered.nocontext.source-out</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.uncovered.nocontext.source-out</h1>
+<p class="desc">drawImage() of a canvas with no context draws pixels as (0,0,0,0), and does not leave the pixels unchanged.</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.composite.uncovered.nocontext.source-out.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("drawImage() of a canvas with no context draws pixels as (0,0,0,0), and does not leave the pixels unchanged.");
+_addTest(function(canvas, ctx) {
+
+ ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
+ ctx.fillRect(0, 0, 100, 50);
+ ctx.globalCompositeOperation = 'source-out';
+ var canvas2 = document.createElement('canvas');
+ ctx.drawImage(canvas2, 0, 0);
+ _assertPixelApprox(canvas, 50,25, 0,0,0,0, 5);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.nocontext.source-out.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.nocontext.source-out.png
new file mode 100644
index 0000000000..eeedd0ff05
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.nocontext.source-out.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.pattern.copy.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.pattern.copy.html
new file mode 100644
index 0000000000..aaee92022a
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.pattern.copy.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.uncovered.pattern.copy</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.uncovered.pattern.copy</h1>
+<p class="desc">Pattern fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged.</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.composite.uncovered.pattern.copy.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("Pattern fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged.");
+_addTest(function(canvas, ctx) {
+
+ ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
+ ctx.fillRect(0, 0, 100, 50);
+ ctx.globalCompositeOperation = 'copy';
+ ctx.fillStyle = ctx.createPattern(document.getElementById('yellow.png'), 'no-repeat');
+ ctx.fillRect(0, 50, 100, 50);
+ _assertPixelApprox(canvas, 50,25, 0,0,0,0, 5);
+
+});
+</script>
+<img src="/images/yellow.png" id="yellow.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.pattern.copy.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.pattern.copy.png
new file mode 100644
index 0000000000..eeedd0ff05
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.pattern.copy.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.pattern.destination-atop.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.pattern.destination-atop.html
new file mode 100644
index 0000000000..aded018f8e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.pattern.destination-atop.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.uncovered.pattern.destination-atop</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.uncovered.pattern.destination-atop</h1>
+<p class="desc">Pattern fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged.</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.composite.uncovered.pattern.destination-atop.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("Pattern fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged.");
+_addTest(function(canvas, ctx) {
+
+ ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
+ ctx.fillRect(0, 0, 100, 50);
+ ctx.globalCompositeOperation = 'destination-atop';
+ ctx.fillStyle = ctx.createPattern(document.getElementById('yellow.png'), 'no-repeat');
+ ctx.fillRect(0, 50, 100, 50);
+ _assertPixelApprox(canvas, 50,25, 0,0,0,0, 5);
+
+});
+</script>
+<img src="/images/yellow.png" id="yellow.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.pattern.destination-atop.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.pattern.destination-atop.png
new file mode 100644
index 0000000000..eeedd0ff05
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.pattern.destination-atop.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.pattern.destination-in.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.pattern.destination-in.html
new file mode 100644
index 0000000000..e520e1ffa3
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.pattern.destination-in.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.uncovered.pattern.destination-in</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.uncovered.pattern.destination-in</h1>
+<p class="desc">Pattern fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged.</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.composite.uncovered.pattern.destination-in.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("Pattern fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged.");
+_addTest(function(canvas, ctx) {
+
+ ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
+ ctx.fillRect(0, 0, 100, 50);
+ ctx.globalCompositeOperation = 'destination-in';
+ ctx.fillStyle = ctx.createPattern(document.getElementById('yellow.png'), 'no-repeat');
+ ctx.fillRect(0, 50, 100, 50);
+ _assertPixelApprox(canvas, 50,25, 0,0,0,0, 5);
+
+});
+</script>
+<img src="/images/yellow.png" id="yellow.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.pattern.destination-in.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.pattern.destination-in.png
new file mode 100644
index 0000000000..eeedd0ff05
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.pattern.destination-in.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.pattern.source-in.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.pattern.source-in.html
new file mode 100644
index 0000000000..bee654877b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.pattern.source-in.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.uncovered.pattern.source-in</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.uncovered.pattern.source-in</h1>
+<p class="desc">Pattern fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged.</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.composite.uncovered.pattern.source-in.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("Pattern fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged.");
+_addTest(function(canvas, ctx) {
+
+ ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
+ ctx.fillRect(0, 0, 100, 50);
+ ctx.globalCompositeOperation = 'source-in';
+ ctx.fillStyle = ctx.createPattern(document.getElementById('yellow.png'), 'no-repeat');
+ ctx.fillRect(0, 50, 100, 50);
+ _assertPixelApprox(canvas, 50,25, 0,0,0,0, 5);
+
+});
+</script>
+<img src="/images/yellow.png" id="yellow.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.pattern.source-in.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.pattern.source-in.png
new file mode 100644
index 0000000000..eeedd0ff05
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.pattern.source-in.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.pattern.source-out.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.pattern.source-out.html
new file mode 100644
index 0000000000..947893091e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.pattern.source-out.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.uncovered.pattern.source-out</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.composite.uncovered.pattern.source-out</h1>
+<p class="desc">Pattern fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged.</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.composite.uncovered.pattern.source-out.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("Pattern fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged.");
+_addTest(function(canvas, ctx) {
+
+ ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
+ ctx.fillRect(0, 0, 100, 50);
+ ctx.globalCompositeOperation = 'source-out';
+ ctx.fillStyle = ctx.createPattern(document.getElementById('yellow.png'), 'no-repeat');
+ ctx.fillRect(0, 50, 100, 50);
+ _assertPixelApprox(canvas, 50,25, 0,0,0,0, 5);
+
+});
+</script>
+<img src="/images/yellow.png" id="yellow.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.pattern.source-out.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.pattern.source-out.png
new file mode 100644
index 0000000000..eeedd0ff05
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.pattern.source-out.png
Binary files differ