Merging upstream version 127.0.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
author: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-06-12 05:35:37 +0000
committer: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-06-12 05:35:37 +0000
commit: a90a5cba08fdf6c0ceb95101c275108a152a3aed (patch)
tree: 532507288f3defd7f4dcf1af49698bcb76034855 /testing/web-platform/tests/html/canvas/offscreen
parent: Adding debian version 126.0.1-1. (diff)
download: firefox-a90a5cba08fdf6c0ceb95101c275108a152a3aed.tar.xz
firefox-a90a5cba08fdf6c0ceb95101c275108a152a3aed.zip
252 files changed, 14131 insertions, 4669 deletions
diff --git a/testing/web-platform/tests/html/canvas/offscreen/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-negative-saturation.html b/testing/web-platform/tests/html/canvas/offscreen/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-negative-saturation.html
new file mode 100644
index 0000000000..69277677b9
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-negative-saturation.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>OffscreenCanvas test: 2d.fillStyle.parse.hsl-clamp-negative-saturation</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+
+<h1>2d.fillStyle.parse.hsl-clamp-negative-saturation</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<script>
+var t = async_test("");
+var t_pass = t.done.bind(t);
+var t_fail = t.step_func(function(reason) {
+    throw reason;
+});
+t.step(function() {
+
+  var canvas = new OffscreenCanvas(100, 50);
+  var ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = '#f00';
+  ctx.fillStyle = 'hsl(120, -200%, 49.9%)';
+  ctx.fillRect(0, 0, 100, 50);
+  _assertPixel(canvas, 50,25, 127,127,127,255);
+  t.done();
+
+});
+</script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-negative-saturation.worker.js b/testing/web-platform/tests/html/canvas/offscreen/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-negative-saturation.worker.js
new file mode 100644
index 0000000000..7f1e91ddb7
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-negative-saturation.worker.js
@@ -0,0 +1,25 @@
+// DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py.
+// OffscreenCanvas test in a worker:2d.fillStyle.parse.hsl-clamp-negative-saturation
+// Description:
+// Note:<p class="notes">
+
+importScripts("/resources/testharness.js");
+importScripts("/html/canvas/resources/canvas-tests.js");
+
+var t = async_test("");
+var t_pass = t.done.bind(t);
+var t_fail = t.step_func(function(reason) {
+    throw reason;
+});
+t.step(function() {
+
+  var canvas = new OffscreenCanvas(100, 50);
+  var ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = '#f00';
+  ctx.fillStyle = 'hsl(120, -200%, 49.9%)';
+  ctx.fillRect(0, 0, 100, 50);
+  _assertPixel(canvas, 50,25, 127,127,127,255);
+  t.done();
+});
+done();
diff --git a/testing/web-platform/tests/html/canvas/offscreen/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-alpha-1.html b/testing/web-platform/tests/html/canvas/offscreen/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-alpha-1.html
new file mode 100644
index 0000000000..5d73d34c9c
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-alpha-1.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>OffscreenCanvas test: 2d.fillStyle.parse.hsla-clamp-alpha-1</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+
+<h1>2d.fillStyle.parse.hsla-clamp-alpha-1</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<script>
+var t = async_test("");
+var t_pass = t.done.bind(t);
+var t_fail = t.step_func(function(reason) {
+    throw reason;
+});
+t.step(function() {
+
+  var canvas = new OffscreenCanvas(100, 50);
+  var ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = '#f00';
+  ctx.fillStyle = 'hsla(120, 100%, 50%, 2)';
+  ctx.fillRect(0, 0, 100, 50);
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+  t.done();
+
+});
+</script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-alpha-1.worker.js b/testing/web-platform/tests/html/canvas/offscreen/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-alpha-1.worker.js
new file mode 100644
index 0000000000..7acb76d80b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-alpha-1.worker.js
@@ -0,0 +1,25 @@
+// DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py.
+// OffscreenCanvas test in a worker:2d.fillStyle.parse.hsla-clamp-alpha-1
+// Description:
+// Note:<p class="notes">
+
+importScripts("/resources/testharness.js");
+importScripts("/html/canvas/resources/canvas-tests.js");
+
+var t = async_test("");
+var t_pass = t.done.bind(t);
+var t_fail = t.step_func(function(reason) {
+    throw reason;
+});
+t.step(function() {
+
+  var canvas = new OffscreenCanvas(100, 50);
+  var ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = '#f00';
+  ctx.fillStyle = 'hsla(120, 100%, 50%, 2)';
+  ctx.fillRect(0, 0, 100, 50);
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+  t.done();
+});
+done();
diff --git a/testing/web-platform/tests/html/canvas/offscreen/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-alpha-2.html b/testing/web-platform/tests/html/canvas/offscreen/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-alpha-2.html
new file mode 100644
index 0000000000..eaf7a6af89
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-alpha-2.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>OffscreenCanvas test: 2d.fillStyle.parse.hsla-clamp-alpha-2</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+
+<h1>2d.fillStyle.parse.hsla-clamp-alpha-2</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<script>
+var t = async_test("");
+var t_pass = t.done.bind(t);
+var t_fail = t.step_func(function(reason) {
+    throw reason;
+});
+t.step(function() {
+
+  var canvas = new OffscreenCanvas(100, 50);
+  var ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = '#f00';
+  ctx.fillStyle = 'hsla(120, 100%, 0%, -2)';
+  ctx.fillRect(0, 0, 100, 50);
+  _assertPixel(canvas, 50,25, 0,0,0,0);
+  t.done();
+
+});
+</script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-alpha-2.worker.js b/testing/web-platform/tests/html/canvas/offscreen/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-alpha-2.worker.js
new file mode 100644
index 0000000000..540b3ea15f
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-alpha-2.worker.js
@@ -0,0 +1,25 @@
+// DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py.
+// OffscreenCanvas test in a worker:2d.fillStyle.parse.hsla-clamp-alpha-2
+// Description:
+// Note:<p class="notes">
+
+importScripts("/resources/testharness.js");
+importScripts("/html/canvas/resources/canvas-tests.js");
+
+var t = async_test("");
+var t_pass = t.done.bind(t);
+var t_fail = t.step_func(function(reason) {
+    throw reason;
+});
+t.step(function() {
+
+  var canvas = new OffscreenCanvas(100, 50);
+  var ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = '#f00';
+  ctx.fillStyle = 'hsla(120, 100%, 0%, -2)';
+  ctx.fillRect(0, 0, 100, 50);
+  _assertPixel(canvas, 50,25, 0,0,0,0);
+  t.done();
+});
+done();
diff --git a/testing/web-platform/tests/html/canvas/offscreen/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-negative-saturation.html b/testing/web-platform/tests/html/canvas/offscreen/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-negative-saturation.html
new file mode 100644
index 0000000000..04749fb4a7
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-negative-saturation.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>OffscreenCanvas test: 2d.fillStyle.parse.hsla-clamp-negative-saturation</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+
+<h1>2d.fillStyle.parse.hsla-clamp-negative-saturation</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<script>
+var t = async_test("");
+var t_pass = t.done.bind(t);
+var t_fail = t.step_func(function(reason) {
+    throw reason;
+});
+t.step(function() {
+
+  var canvas = new OffscreenCanvas(100, 50);
+  var ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = '#f00';
+  ctx.fillStyle = 'hsla(120, -200%, 49.9%, 1)';
+  ctx.fillRect(0, 0, 100, 50);
+  _assertPixel(canvas, 50,25, 127,127,127,255);
+  t.done();
+
+});
+</script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-negative-saturation.worker.js b/testing/web-platform/tests/html/canvas/offscreen/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-negative-saturation.worker.js
new file mode 100644
index 0000000000..f5fe6d4296
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-negative-saturation.worker.js
@@ -0,0 +1,25 @@
+// DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py.
+// OffscreenCanvas test in a worker:2d.fillStyle.parse.hsla-clamp-negative-saturation
+// Description:
+// Note:<p class="notes">
+
+importScripts("/resources/testharness.js");
+importScripts("/html/canvas/resources/canvas-tests.js");
+
+var t = async_test("");
+var t_pass = t.done.bind(t);
+var t_fail = t.step_func(function(reason) {
+    throw reason;
+});
+t.step(function() {
+
+  var canvas = new OffscreenCanvas(100, 50);
+  var ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = '#f00';
+  ctx.fillStyle = 'hsla(120, -200%, 49.9%, 1)';
+  ctx.fillRect(0, 0, 100, 50);
+  _assertPixel(canvas, 50,25, 127,127,127,255);
+  t.done();
+});
+done();
diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.isotropic.tentative-expected.html b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.isotropic.tentative-expected.html
deleted file mode 100644
index dac31c97f1..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.isotropic.tentative-expected.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>Canvas test: 2d.filter.canvasFilterObject.gaussianBlur.isotropic.tentative</title>
-<h1>2d.filter.canvasFilterObject.gaussianBlur.isotropic.tentative</h1>
-<p class="desc">Test CanvasFilter() with gaussianBlur.</p>
-
-<svg xmlns="http://www.w3.org/2000/svg"
-     width="100" height="100"
-     color-interpolation-filters="sRGB">
-  <filter id="blur" x="-50%" y="-50%" width="200%" height="200%">
-    <feGaussianBlur stdDeviation="4 4" />
-  </filter>
-  <rect x="25" y="25" width="50" height="50"
-        fill="teal" filter="url(#blur)" />
-</svg>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.isotropic.tentative.html b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.isotropic.tentative.html
deleted file mode 100644
index 801e6fdb8c..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.isotropic.tentative.html
+++ /dev/null
@@ -1,23 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<link rel="match" href="2d.filter.canvasFilterObject.gaussianBlur.isotropic.tentative-expected.html">
-<title>Canvas test: 2d.filter.canvasFilterObject.gaussianBlur.isotropic.tentative</title>
-<h1>2d.filter.canvasFilterObject.gaussianBlur.isotropic.tentative</h1>
-<p class="desc">Test CanvasFilter() with gaussianBlur.</p>
-<canvas id="canvas" width="100" height="100">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
-  const canvas = new OffscreenCanvas(100, 100);
-  const ctx = canvas.getContext('2d');
-
-  ctx.fillStyle = 'teal';
-  ctx.filter = new CanvasFilter({
-      name: 'gaussianBlur',
-      stdDeviation: [4, 4],
-  });
-  ctx.fillRect(25, 25, 50, 50);
-
-  const outputCanvas = document.getElementById("canvas");
-  outputCanvas.getContext('2d').drawImage(canvas, 0, 0);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.isotropic.tentative.w.html b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.isotropic.tentative.w.html
deleted file mode 100644
index 6c7c7f7649..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.isotropic.tentative.w.html
+++ /dev/null
@@ -1,37 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<html class="reftest-wait">
-<link rel="match" href="2d.filter.canvasFilterObject.gaussianBlur.isotropic.tentative-expected.html">
-<title>Canvas test: 2d.filter.canvasFilterObject.gaussianBlur.isotropic.tentative</title>
-<h1>2d.filter.canvasFilterObject.gaussianBlur.isotropic.tentative</h1>
-<p class="desc">Test CanvasFilter() with gaussianBlur.</p>
-<canvas id="canvas" width="100" height="100">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script id='myWorker' type='text/worker'>
-  self.onmessage = function(e) {
-    const canvas = new OffscreenCanvas(100, 100);
-    const ctx = canvas.getContext('2d');
-
-    ctx.fillStyle = 'teal';
-    ctx.filter = new CanvasFilter({
-        name: 'gaussianBlur',
-        stdDeviation: [4, 4],
-    });
-    ctx.fillRect(25, 25, 50, 50);
-
-    const bitmap = canvas.transferToImageBitmap();
-    self.postMessage(bitmap, bitmap);
-  };
-</script>
-<script>
-  const blob = new Blob([document.getElementById('myWorker').textContent]);
-  const worker = new Worker(URL.createObjectURL(blob));
-  worker.addEventListener('message', msg => {
-    const outputCtx = document.getElementById("canvas").getContext('2d');
-    outputCtx.drawImage(msg.data, 0, 0);
-    document.documentElement.classList.remove("reftest-wait");
-  });
-  worker.postMessage(null);
-</script>
-</html>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.mostly-x.tentative-expected.html b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.mostly-x.tentative-expected.html
deleted file mode 100644
index 88d0cb2de2..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.mostly-x.tentative-expected.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>Canvas test: 2d.filter.canvasFilterObject.gaussianBlur.mostly-x.tentative</title>
-<h1>2d.filter.canvasFilterObject.gaussianBlur.mostly-x.tentative</h1>
-<p class="desc">Test CanvasFilter() with gaussianBlur.</p>
-
-<svg xmlns="http://www.w3.org/2000/svg"
-     width="100" height="100"
-     color-interpolation-filters="sRGB">
-  <filter id="blur" x="-50%" y="-50%" width="200%" height="200%">
-    <feGaussianBlur stdDeviation="4 1" />
-  </filter>
-  <rect x="25" y="25" width="50" height="50"
-        fill="teal" filter="url(#blur)" />
-</svg>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.mostly-x.tentative.html b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.mostly-x.tentative.html
deleted file mode 100644
index ba986d8e7b..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.mostly-x.tentative.html
+++ /dev/null
@@ -1,23 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<link rel="match" href="2d.filter.canvasFilterObject.gaussianBlur.mostly-x.tentative-expected.html">
-<title>Canvas test: 2d.filter.canvasFilterObject.gaussianBlur.mostly-x.tentative</title>
-<h1>2d.filter.canvasFilterObject.gaussianBlur.mostly-x.tentative</h1>
-<p class="desc">Test CanvasFilter() with gaussianBlur.</p>
-<canvas id="canvas" width="100" height="100">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
-  const canvas = new OffscreenCanvas(100, 100);
-  const ctx = canvas.getContext('2d');
-
-  ctx.fillStyle = 'teal';
-  ctx.filter = new CanvasFilter({
-      name: 'gaussianBlur',
-      stdDeviation: [4, 1],
-  });
-  ctx.fillRect(25, 25, 50, 50);
-
-  const outputCanvas = document.getElementById("canvas");
-  outputCanvas.getContext('2d').drawImage(canvas, 0, 0);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.mostly-x.tentative.w.html b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.mostly-x.tentative.w.html
deleted file mode 100644
index 86fe086327..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.mostly-x.tentative.w.html
+++ /dev/null
@@ -1,37 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<html class="reftest-wait">
-<link rel="match" href="2d.filter.canvasFilterObject.gaussianBlur.mostly-x.tentative-expected.html">
-<title>Canvas test: 2d.filter.canvasFilterObject.gaussianBlur.mostly-x.tentative</title>
-<h1>2d.filter.canvasFilterObject.gaussianBlur.mostly-x.tentative</h1>
-<p class="desc">Test CanvasFilter() with gaussianBlur.</p>
-<canvas id="canvas" width="100" height="100">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script id='myWorker' type='text/worker'>
-  self.onmessage = function(e) {
-    const canvas = new OffscreenCanvas(100, 100);
-    const ctx = canvas.getContext('2d');
-
-    ctx.fillStyle = 'teal';
-    ctx.filter = new CanvasFilter({
-        name: 'gaussianBlur',
-        stdDeviation: [4, 1],
-    });
-    ctx.fillRect(25, 25, 50, 50);
-
-    const bitmap = canvas.transferToImageBitmap();
-    self.postMessage(bitmap, bitmap);
-  };
-</script>
-<script>
-  const blob = new Blob([document.getElementById('myWorker').textContent]);
-  const worker = new Worker(URL.createObjectURL(blob));
-  worker.addEventListener('message', msg => {
-    const outputCtx = document.getElementById("canvas").getContext('2d');
-    outputCtx.drawImage(msg.data, 0, 0);
-    document.documentElement.classList.remove("reftest-wait");
-  });
-  worker.postMessage(null);
-</script>
-</html>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.mostly-y.tentative-expected.html b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.mostly-y.tentative-expected.html
deleted file mode 100644
index 744983d4ae..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.mostly-y.tentative-expected.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>Canvas test: 2d.filter.canvasFilterObject.gaussianBlur.mostly-y.tentative</title>
-<h1>2d.filter.canvasFilterObject.gaussianBlur.mostly-y.tentative</h1>
-<p class="desc">Test CanvasFilter() with gaussianBlur.</p>
-
-<svg xmlns="http://www.w3.org/2000/svg"
-     width="100" height="100"
-     color-interpolation-filters="sRGB">
-  <filter id="blur" x="-50%" y="-50%" width="200%" height="200%">
-    <feGaussianBlur stdDeviation="1 4" />
-  </filter>
-  <rect x="25" y="25" width="50" height="50"
-        fill="teal" filter="url(#blur)" />
-</svg>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.mostly-y.tentative.html b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.mostly-y.tentative.html
deleted file mode 100644
index 0265cfa6c4..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.mostly-y.tentative.html
+++ /dev/null
@@ -1,23 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<link rel="match" href="2d.filter.canvasFilterObject.gaussianBlur.mostly-y.tentative-expected.html">
-<title>Canvas test: 2d.filter.canvasFilterObject.gaussianBlur.mostly-y.tentative</title>
-<h1>2d.filter.canvasFilterObject.gaussianBlur.mostly-y.tentative</h1>
-<p class="desc">Test CanvasFilter() with gaussianBlur.</p>
-<canvas id="canvas" width="100" height="100">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
-  const canvas = new OffscreenCanvas(100, 100);
-  const ctx = canvas.getContext('2d');
-
-  ctx.fillStyle = 'teal';
-  ctx.filter = new CanvasFilter({
-      name: 'gaussianBlur',
-      stdDeviation: [1, 4],
-  });
-  ctx.fillRect(25, 25, 50, 50);
-
-  const outputCanvas = document.getElementById("canvas");
-  outputCanvas.getContext('2d').drawImage(canvas, 0, 0);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.mostly-y.tentative.w.html b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.mostly-y.tentative.w.html
deleted file mode 100644
index c22b320857..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.mostly-y.tentative.w.html
+++ /dev/null
@@ -1,37 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<html class="reftest-wait">
-<link rel="match" href="2d.filter.canvasFilterObject.gaussianBlur.mostly-y.tentative-expected.html">
-<title>Canvas test: 2d.filter.canvasFilterObject.gaussianBlur.mostly-y.tentative</title>
-<h1>2d.filter.canvasFilterObject.gaussianBlur.mostly-y.tentative</h1>
-<p class="desc">Test CanvasFilter() with gaussianBlur.</p>
-<canvas id="canvas" width="100" height="100">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script id='myWorker' type='text/worker'>
-  self.onmessage = function(e) {
-    const canvas = new OffscreenCanvas(100, 100);
-    const ctx = canvas.getContext('2d');
-
-    ctx.fillStyle = 'teal';
-    ctx.filter = new CanvasFilter({
-        name: 'gaussianBlur',
-        stdDeviation: [1, 4],
-    });
-    ctx.fillRect(25, 25, 50, 50);
-
-    const bitmap = canvas.transferToImageBitmap();
-    self.postMessage(bitmap, bitmap);
-  };
-</script>
-<script>
-  const blob = new Blob([document.getElementById('myWorker').textContent]);
-  const worker = new Worker(URL.createObjectURL(blob));
-  worker.addEventListener('message', msg => {
-    const outputCtx = document.getElementById("canvas").getContext('2d');
-    outputCtx.drawImage(msg.data, 0, 0);
-    document.documentElement.classList.remove("reftest-wait");
-  });
-  worker.postMessage(null);
-</script>
-</html>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative-expected.html b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative-expected.html
new file mode 100644
index 0000000000..c1ca0ab46f
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative-expected.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.filter.canvasFilterObject.gaussianBlur.tentative</title>
+<h1 style="font-size: 20px;">2d.filter.canvasFilterObject.gaussianBlur.tentative</h1>
+<p class="desc">Test CanvasFilter() with gaussianBlur.</p>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(5, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>x-only</div>
+  <div style="width: 100px; height: 100px; outline: 1px solid">
+    <svg xmlns="http://www.w3.org/2000/svg"
+         width="100" height="100"
+         color-interpolation-filters="sRGB">
+      <filter id="blur0" x="-50%" y="-50%" width="200%" height="200%">
+        <feGaussianBlur stdDeviation="4 0" />
+      </filter>
+      <rect x="25" y="25" width="50" height="50"
+            fill="teal" filter="url(#blur0)" />
+    </svg>
+  </div>
+</span>
+
+<span>
+  <div>mostly-x</div>
+  <div style="width: 100px; height: 100px; outline: 1px solid">
+    <svg xmlns="http://www.w3.org/2000/svg"
+         width="100" height="100"
+         color-interpolation-filters="sRGB">
+      <filter id="blur1" x="-50%" y="-50%" width="200%" height="200%">
+        <feGaussianBlur stdDeviation="4 1" />
+      </filter>
+      <rect x="25" y="25" width="50" height="50"
+            fill="teal" filter="url(#blur1)" />
+    </svg>
+  </div>
+</span>
+
+<span>
+  <div>isotropic</div>
+  <div style="width: 100px; height: 100px; outline: 1px solid">
+    <svg xmlns="http://www.w3.org/2000/svg"
+         width="100" height="100"
+         color-interpolation-filters="sRGB">
+      <filter id="blur2" x="-50%" y="-50%" width="200%" height="200%">
+        <feGaussianBlur stdDeviation="4 4" />
+      </filter>
+      <rect x="25" y="25" width="50" height="50"
+            fill="teal" filter="url(#blur2)" />
+    </svg>
+  </div>
+</span>
+
+<span>
+  <div>mostly-y</div>
+  <div style="width: 100px; height: 100px; outline: 1px solid">
+    <svg xmlns="http://www.w3.org/2000/svg"
+         width="100" height="100"
+         color-interpolation-filters="sRGB">
+      <filter id="blur3" x="-50%" y="-50%" width="200%" height="200%">
+        <feGaussianBlur stdDeviation="1 4" />
+      </filter>
+      <rect x="25" y="25" width="50" height="50"
+            fill="teal" filter="url(#blur3)" />
+    </svg>
+  </div>
+</span>
+
+<span>
+  <div>y-only</div>
+  <div style="width: 100px; height: 100px; outline: 1px solid">
+    <svg xmlns="http://www.w3.org/2000/svg"
+         width="100" height="100"
+         color-interpolation-filters="sRGB">
+      <filter id="blur4" x="-50%" y="-50%" width="200%" height="200%">
+        <feGaussianBlur stdDeviation="0 4" />
+      </filter>
+      <rect x="25" y="25" width="50" height="50"
+            fill="teal" filter="url(#blur4)" />
+    </svg>
+  </div>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative.html b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative.html
new file mode 100644
index 0000000000..8e7ea3f727
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative.html
@@ -0,0 +1,121 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.filter.canvasFilterObject.gaussianBlur.tentative-expected.html">
+<title>Canvas test: 2d.filter.canvasFilterObject.gaussianBlur.tentative</title>
+<h1 style="font-size: 20px;">2d.filter.canvasFilterObject.gaussianBlur.tentative</h1>
+<p class="desc">Test CanvasFilter() with gaussianBlur.</p>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(5, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>x-only</div>
+  <canvas id="canvas0" width="100" height="100" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(100, 100);
+    const ctx = canvas.getContext('2d');
+
+    ctx.fillStyle = 'teal';
+    ctx.filter = new CanvasFilter({
+        name: 'gaussianBlur',
+        stdDeviation: [4, 0],
+    });
+    ctx.fillRect(25, 25, 50, 50);
+
+    const outputCanvas = document.getElementById("canvas0");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>mostly-x</div>
+  <canvas id="canvas1" width="100" height="100" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(100, 100);
+    const ctx = canvas.getContext('2d');
+
+    ctx.fillStyle = 'teal';
+    ctx.filter = new CanvasFilter({
+        name: 'gaussianBlur',
+        stdDeviation: [4, 1],
+    });
+    ctx.fillRect(25, 25, 50, 50);
+
+    const outputCanvas = document.getElementById("canvas1");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>isotropic</div>
+  <canvas id="canvas2" width="100" height="100" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(100, 100);
+    const ctx = canvas.getContext('2d');
+
+    ctx.fillStyle = 'teal';
+    ctx.filter = new CanvasFilter({
+        name: 'gaussianBlur',
+        stdDeviation: [4, 4],
+    });
+    ctx.fillRect(25, 25, 50, 50);
+
+    const outputCanvas = document.getElementById("canvas2");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>mostly-y</div>
+  <canvas id="canvas3" width="100" height="100" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(100, 100);
+    const ctx = canvas.getContext('2d');
+
+    ctx.fillStyle = 'teal';
+    ctx.filter = new CanvasFilter({
+        name: 'gaussianBlur',
+        stdDeviation: [1, 4],
+    });
+    ctx.fillRect(25, 25, 50, 50);
+
+    const outputCanvas = document.getElementById("canvas3");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>y-only</div>
+  <canvas id="canvas4" width="100" height="100" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(100, 100);
+    const ctx = canvas.getContext('2d');
+
+    ctx.fillStyle = 'teal';
+    ctx.filter = new CanvasFilter({
+        name: 'gaussianBlur',
+        stdDeviation: [0, 4],
+    });
+    ctx.fillRect(25, 25, 50, 50);
+
+    const outputCanvas = document.getElementById("canvas4");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative.w.html b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative.w.html
new file mode 100644
index 0000000000..71626ac46e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative.w.html
@@ -0,0 +1,194 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<html class="reftest-wait">
+<link rel="match" href="2d.filter.canvasFilterObject.gaussianBlur.tentative-expected.html">
+<title>Canvas test: 2d.filter.canvasFilterObject.gaussianBlur.tentative</title>
+<h1 style="font-size: 20px;">2d.filter.canvasFilterObject.gaussianBlur.tentative</h1>
+<p class="desc">Test CanvasFilter() with gaussianBlur.</p>
+<script>pending_tests = 5;</script>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(5, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>x-only</div>
+  <canvas id="canvas0" width="100" height="100" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker0" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(100, 100);
+      const ctx = canvas.getContext('2d');
+
+      ctx.fillStyle = 'teal';
+      ctx.filter = new CanvasFilter({
+          name: 'gaussianBlur',
+          stdDeviation: [4, 0],
+      });
+      ctx.fillRect(25, 25, 50, 50);
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker0').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas0');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+<span>
+  <div>mostly-x</div>
+  <canvas id="canvas1" width="100" height="100" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker1" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(100, 100);
+      const ctx = canvas.getContext('2d');
+
+      ctx.fillStyle = 'teal';
+      ctx.filter = new CanvasFilter({
+          name: 'gaussianBlur',
+          stdDeviation: [4, 1],
+      });
+      ctx.fillRect(25, 25, 50, 50);
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker1').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas1');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+<span>
+  <div>isotropic</div>
+  <canvas id="canvas2" width="100" height="100" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker2" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(100, 100);
+      const ctx = canvas.getContext('2d');
+
+      ctx.fillStyle = 'teal';
+      ctx.filter = new CanvasFilter({
+          name: 'gaussianBlur',
+          stdDeviation: [4, 4],
+      });
+      ctx.fillRect(25, 25, 50, 50);
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker2').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas2');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+<span>
+  <div>mostly-y</div>
+  <canvas id="canvas3" width="100" height="100" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker3" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(100, 100);
+      const ctx = canvas.getContext('2d');
+
+      ctx.fillStyle = 'teal';
+      ctx.filter = new CanvasFilter({
+          name: 'gaussianBlur',
+          stdDeviation: [1, 4],
+      });
+      ctx.fillRect(25, 25, 50, 50);
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker3').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas3');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+<span>
+  <div>y-only</div>
+  <canvas id="canvas4" width="100" height="100" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker4" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(100, 100);
+      const ctx = canvas.getContext('2d');
+
+      ctx.fillStyle = 'teal';
+      ctx.filter = new CanvasFilter({
+          name: 'gaussianBlur',
+          stdDeviation: [0, 4],
+      });
+      ctx.fillRect(25, 25, 50, 50);
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker4').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas4');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+</div>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.x-only.tentative-expected.html b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.x-only.tentative-expected.html
deleted file mode 100644
index e611113e42..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.x-only.tentative-expected.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>Canvas test: 2d.filter.canvasFilterObject.gaussianBlur.x-only.tentative</title>
-<h1>2d.filter.canvasFilterObject.gaussianBlur.x-only.tentative</h1>
-<p class="desc">Test CanvasFilter() with gaussianBlur.</p>
-
-<svg xmlns="http://www.w3.org/2000/svg"
-     width="100" height="100"
-     color-interpolation-filters="sRGB">
-  <filter id="blur" x="-50%" y="-50%" width="200%" height="200%">
-    <feGaussianBlur stdDeviation="4 0" />
-  </filter>
-  <rect x="25" y="25" width="50" height="50"
-        fill="teal" filter="url(#blur)" />
-</svg>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.x-only.tentative.html b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.x-only.tentative.html
deleted file mode 100644
index 3ed8e9ddf9..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.x-only.tentative.html
+++ /dev/null
@@ -1,23 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<link rel="match" href="2d.filter.canvasFilterObject.gaussianBlur.x-only.tentative-expected.html">
-<title>Canvas test: 2d.filter.canvasFilterObject.gaussianBlur.x-only.tentative</title>
-<h1>2d.filter.canvasFilterObject.gaussianBlur.x-only.tentative</h1>
-<p class="desc">Test CanvasFilter() with gaussianBlur.</p>
-<canvas id="canvas" width="100" height="100">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
-  const canvas = new OffscreenCanvas(100, 100);
-  const ctx = canvas.getContext('2d');
-
-  ctx.fillStyle = 'teal';
-  ctx.filter = new CanvasFilter({
-      name: 'gaussianBlur',
-      stdDeviation: [4, 0],
-  });
-  ctx.fillRect(25, 25, 50, 50);
-
-  const outputCanvas = document.getElementById("canvas");
-  outputCanvas.getContext('2d').drawImage(canvas, 0, 0);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.x-only.tentative.w.html b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.x-only.tentative.w.html
deleted file mode 100644
index 35cbc1b365..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.x-only.tentative.w.html
+++ /dev/null
@@ -1,37 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<html class="reftest-wait">
-<link rel="match" href="2d.filter.canvasFilterObject.gaussianBlur.x-only.tentative-expected.html">
-<title>Canvas test: 2d.filter.canvasFilterObject.gaussianBlur.x-only.tentative</title>
-<h1>2d.filter.canvasFilterObject.gaussianBlur.x-only.tentative</h1>
-<p class="desc">Test CanvasFilter() with gaussianBlur.</p>
-<canvas id="canvas" width="100" height="100">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script id='myWorker' type='text/worker'>
-  self.onmessage = function(e) {
-    const canvas = new OffscreenCanvas(100, 100);
-    const ctx = canvas.getContext('2d');
-
-    ctx.fillStyle = 'teal';
-    ctx.filter = new CanvasFilter({
-        name: 'gaussianBlur',
-        stdDeviation: [4, 0],
-    });
-    ctx.fillRect(25, 25, 50, 50);
-
-    const bitmap = canvas.transferToImageBitmap();
-    self.postMessage(bitmap, bitmap);
-  };
-</script>
-<script>
-  const blob = new Blob([document.getElementById('myWorker').textContent]);
-  const worker = new Worker(URL.createObjectURL(blob));
-  worker.addEventListener('message', msg => {
-    const outputCtx = document.getElementById("canvas").getContext('2d');
-    outputCtx.drawImage(msg.data, 0, 0);
-    document.documentElement.classList.remove("reftest-wait");
-  });
-  worker.postMessage(null);
-</script>
-</html>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.y-only.tentative-expected.html b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.y-only.tentative-expected.html
deleted file mode 100644
index c6d915cb07..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.y-only.tentative-expected.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>Canvas test: 2d.filter.canvasFilterObject.gaussianBlur.y-only.tentative</title>
-<h1>2d.filter.canvasFilterObject.gaussianBlur.y-only.tentative</h1>
-<p class="desc">Test CanvasFilter() with gaussianBlur.</p>
-
-<svg xmlns="http://www.w3.org/2000/svg"
-     width="100" height="100"
-     color-interpolation-filters="sRGB">
-  <filter id="blur" x="-50%" y="-50%" width="200%" height="200%">
-    <feGaussianBlur stdDeviation="0 4" />
-  </filter>
-  <rect x="25" y="25" width="50" height="50"
-        fill="teal" filter="url(#blur)" />
-</svg>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.y-only.tentative.html b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.y-only.tentative.html
deleted file mode 100644
index f563ad9d77..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.y-only.tentative.html
+++ /dev/null
@@ -1,23 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<link rel="match" href="2d.filter.canvasFilterObject.gaussianBlur.y-only.tentative-expected.html">
-<title>Canvas test: 2d.filter.canvasFilterObject.gaussianBlur.y-only.tentative</title>
-<h1>2d.filter.canvasFilterObject.gaussianBlur.y-only.tentative</h1>
-<p class="desc">Test CanvasFilter() with gaussianBlur.</p>
-<canvas id="canvas" width="100" height="100">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
-  const canvas = new OffscreenCanvas(100, 100);
-  const ctx = canvas.getContext('2d');
-
-  ctx.fillStyle = 'teal';
-  ctx.filter = new CanvasFilter({
-      name: 'gaussianBlur',
-      stdDeviation: [0, 4],
-  });
-  ctx.fillRect(25, 25, 50, 50);
-
-  const outputCanvas = document.getElementById("canvas");
-  outputCanvas.getContext('2d').drawImage(canvas, 0, 0);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.y-only.tentative.w.html b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.y-only.tentative.w.html
deleted file mode 100644
index 171a41caa8..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.y-only.tentative.w.html
+++ /dev/null
@@ -1,37 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<html class="reftest-wait">
-<link rel="match" href="2d.filter.canvasFilterObject.gaussianBlur.y-only.tentative-expected.html">
-<title>Canvas test: 2d.filter.canvasFilterObject.gaussianBlur.y-only.tentative</title>
-<h1>2d.filter.canvasFilterObject.gaussianBlur.y-only.tentative</h1>
-<p class="desc">Test CanvasFilter() with gaussianBlur.</p>
-<canvas id="canvas" width="100" height="100">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script id='myWorker' type='text/worker'>
-  self.onmessage = function(e) {
-    const canvas = new OffscreenCanvas(100, 100);
-    const ctx = canvas.getContext('2d');
-
-    ctx.fillStyle = 'teal';
-    ctx.filter = new CanvasFilter({
-        name: 'gaussianBlur',
-        stdDeviation: [0, 4],
-    });
-    ctx.fillRect(25, 25, 50, 50);
-
-    const bitmap = canvas.transferToImageBitmap();
-    self.postMessage(bitmap, bitmap);
-  };
-</script>
-<script>
-  const blob = new Blob([document.getElementById('myWorker').textContent]);
-  const worker = new Worker(URL.createObjectURL(blob));
-  worker.addEventListener('message', msg => {
-    const outputCtx = document.getElementById("canvas").getContext('2d');
-    outputCtx.drawImage(msg.data, 0, 0);
-    document.documentElement.classList.remove("reftest-wait");
-  });
-  worker.postMessage(null);
-</script>
-</html>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur-expected.html b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur-expected.html
new file mode 100644
index 0000000000..f24e9d0dba
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur-expected.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.filter.layers.gaussianBlur</title>
+<h1 style="font-size: 20px;">2d.filter.layers.gaussianBlur</h1>
+<p class="desc">Test CanvasFilter() with gaussianBlur.</p>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(5, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>x-only</div>
+  <div style="width: 100px; height: 100px; outline: 1px solid">
+    <svg xmlns="http://www.w3.org/2000/svg"
+         width="100" height="100"
+         color-interpolation-filters="sRGB">
+      <filter id="blur0" x="-50%" y="-50%" width="200%" height="200%">
+        <feGaussianBlur stdDeviation="4 0" />
+      </filter>
+      <rect x="25" y="25" width="50" height="50"
+            fill="teal" filter="url(#blur0)" />
+    </svg>
+  </div>
+</span>
+
+<span>
+  <div>mostly-x</div>
+  <div style="width: 100px; height: 100px; outline: 1px solid">
+    <svg xmlns="http://www.w3.org/2000/svg"
+         width="100" height="100"
+         color-interpolation-filters="sRGB">
+      <filter id="blur1" x="-50%" y="-50%" width="200%" height="200%">
+        <feGaussianBlur stdDeviation="4 1" />
+      </filter>
+      <rect x="25" y="25" width="50" height="50"
+            fill="teal" filter="url(#blur1)" />
+    </svg>
+  </div>
+</span>
+
+<span>
+  <div>isotropic</div>
+  <div style="width: 100px; height: 100px; outline: 1px solid">
+    <svg xmlns="http://www.w3.org/2000/svg"
+         width="100" height="100"
+         color-interpolation-filters="sRGB">
+      <filter id="blur2" x="-50%" y="-50%" width="200%" height="200%">
+        <feGaussianBlur stdDeviation="4 4" />
+      </filter>
+      <rect x="25" y="25" width="50" height="50"
+            fill="teal" filter="url(#blur2)" />
+    </svg>
+  </div>
+</span>
+
+<span>
+  <div>mostly-y</div>
+  <div style="width: 100px; height: 100px; outline: 1px solid">
+    <svg xmlns="http://www.w3.org/2000/svg"
+         width="100" height="100"
+         color-interpolation-filters="sRGB">
+      <filter id="blur3" x="-50%" y="-50%" width="200%" height="200%">
+        <feGaussianBlur stdDeviation="1 4" />
+      </filter>
+      <rect x="25" y="25" width="50" height="50"
+            fill="teal" filter="url(#blur3)" />
+    </svg>
+  </div>
+</span>
+
+<span>
+  <div>y-only</div>
+  <div style="width: 100px; height: 100px; outline: 1px solid">
+    <svg xmlns="http://www.w3.org/2000/svg"
+         width="100" height="100"
+         color-interpolation-filters="sRGB">
+      <filter id="blur4" x="-50%" y="-50%" width="200%" height="200%">
+        <feGaussianBlur stdDeviation="0 4" />
+      </filter>
+      <rect x="25" y="25" width="50" height="50"
+            fill="teal" filter="url(#blur4)" />
+    </svg>
+  </div>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.html b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.html
new file mode 100644
index 0000000000..a51fe32008
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.html
@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.filter.layers.gaussianBlur-expected.html">
+<title>Canvas test: 2d.filter.layers.gaussianBlur</title>
+<h1 style="font-size: 20px;">2d.filter.layers.gaussianBlur</h1>
+<p class="desc">Test CanvasFilter() with gaussianBlur.</p>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(5, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>x-only</div>
+  <canvas id="canvas0" width="100" height="100" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(100, 100);
+    const ctx = canvas.getContext('2d');
+
+    ctx.fillStyle = 'teal';
+    ctx.beginLayer({filter: {
+        name: 'gaussianBlur',
+        stdDeviation: [4, 0],
+    }});
+    ctx.fillRect(25, 25, 50, 50);
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas0");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>mostly-x</div>
+  <canvas id="canvas1" width="100" height="100" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(100, 100);
+    const ctx = canvas.getContext('2d');
+
+    ctx.fillStyle = 'teal';
+    ctx.beginLayer({filter: {
+        name: 'gaussianBlur',
+        stdDeviation: [4, 1],
+    }});
+    ctx.fillRect(25, 25, 50, 50);
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas1");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>isotropic</div>
+  <canvas id="canvas2" width="100" height="100" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(100, 100);
+    const ctx = canvas.getContext('2d');
+
+    ctx.fillStyle = 'teal';
+    ctx.beginLayer({filter: {
+        name: 'gaussianBlur',
+        stdDeviation: [4, 4],
+    }});
+    ctx.fillRect(25, 25, 50, 50);
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas2");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>mostly-y</div>
+  <canvas id="canvas3" width="100" height="100" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(100, 100);
+    const ctx = canvas.getContext('2d');
+
+    ctx.fillStyle = 'teal';
+    ctx.beginLayer({filter: {
+        name: 'gaussianBlur',
+        stdDeviation: [1, 4],
+    }});
+    ctx.fillRect(25, 25, 50, 50);
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas3");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>y-only</div>
+  <canvas id="canvas4" width="100" height="100" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(100, 100);
+    const ctx = canvas.getContext('2d');
+
+    ctx.fillStyle = 'teal';
+    ctx.beginLayer({filter: {
+        name: 'gaussianBlur',
+        stdDeviation: [0, 4],
+    }});
+    ctx.fillRect(25, 25, 50, 50);
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas4");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.isotropic-expected.html b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.isotropic-expected.html
deleted file mode 100644
index 4f93754862..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.isotropic-expected.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>Canvas test: 2d.filter.layers.gaussianBlur.isotropic</title>
-<h1>2d.filter.layers.gaussianBlur.isotropic</h1>
-<p class="desc">Test CanvasFilter() with gaussianBlur.</p>
-
-<svg xmlns="http://www.w3.org/2000/svg"
-     width="100" height="100"
-     color-interpolation-filters="sRGB">
-  <filter id="blur" x="-50%" y="-50%" width="200%" height="200%">
-    <feGaussianBlur stdDeviation="4 4" />
-  </filter>
-  <rect x="25" y="25" width="50" height="50"
-        fill="teal" filter="url(#blur)" />
-</svg>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.isotropic.html b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.isotropic.html
deleted file mode 100644
index 50a98df1be..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.isotropic.html
+++ /dev/null
@@ -1,24 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<link rel="match" href="2d.filter.layers.gaussianBlur.isotropic-expected.html">
-<title>Canvas test: 2d.filter.layers.gaussianBlur.isotropic</title>
-<h1>2d.filter.layers.gaussianBlur.isotropic</h1>
-<p class="desc">Test CanvasFilter() with gaussianBlur.</p>
-<canvas id="canvas" width="100" height="100">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
-  const canvas = new OffscreenCanvas(100, 100);
-  const ctx = canvas.getContext('2d');
-
-  ctx.fillStyle = 'teal';
-  ctx.beginLayer({filter: {
-      name: 'gaussianBlur',
-      stdDeviation: [4, 4],
-  }});
-  ctx.fillRect(25, 25, 50, 50);
-  ctx.endLayer();
-
-  const outputCanvas = document.getElementById("canvas");
-  outputCanvas.getContext('2d').drawImage(canvas, 0, 0);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.isotropic.w.html b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.isotropic.w.html
deleted file mode 100644
index a68b8e78a2..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.isotropic.w.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<html class="reftest-wait">
-<link rel="match" href="2d.filter.layers.gaussianBlur.isotropic-expected.html">
-<title>Canvas test: 2d.filter.layers.gaussianBlur.isotropic</title>
-<h1>2d.filter.layers.gaussianBlur.isotropic</h1>
-<p class="desc">Test CanvasFilter() with gaussianBlur.</p>
-<canvas id="canvas" width="100" height="100">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script id='myWorker' type='text/worker'>
-  self.onmessage = function(e) {
-    const canvas = new OffscreenCanvas(100, 100);
-    const ctx = canvas.getContext('2d');
-
-    ctx.fillStyle = 'teal';
-    ctx.beginLayer({filter: {
-        name: 'gaussianBlur',
-        stdDeviation: [4, 4],
-    }});
-    ctx.fillRect(25, 25, 50, 50);
-    ctx.endLayer();
-
-    const bitmap = canvas.transferToImageBitmap();
-    self.postMessage(bitmap, bitmap);
-  };
-</script>
-<script>
-  const blob = new Blob([document.getElementById('myWorker').textContent]);
-  const worker = new Worker(URL.createObjectURL(blob));
-  worker.addEventListener('message', msg => {
-    const outputCtx = document.getElementById("canvas").getContext('2d');
-    outputCtx.drawImage(msg.data, 0, 0);
-    document.documentElement.classList.remove("reftest-wait");
-  });
-  worker.postMessage(null);
-</script>
-</html>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.mostly-x-expected.html b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.mostly-x-expected.html
deleted file mode 100644
index 255270c192..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.mostly-x-expected.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>Canvas test: 2d.filter.layers.gaussianBlur.mostly-x</title>
-<h1>2d.filter.layers.gaussianBlur.mostly-x</h1>
-<p class="desc">Test CanvasFilter() with gaussianBlur.</p>
-
-<svg xmlns="http://www.w3.org/2000/svg"
-     width="100" height="100"
-     color-interpolation-filters="sRGB">
-  <filter id="blur" x="-50%" y="-50%" width="200%" height="200%">
-    <feGaussianBlur stdDeviation="4 1" />
-  </filter>
-  <rect x="25" y="25" width="50" height="50"
-        fill="teal" filter="url(#blur)" />
-</svg>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.mostly-x.html b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.mostly-x.html
deleted file mode 100644
index efc634796c..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.mostly-x.html
+++ /dev/null
@@ -1,24 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<link rel="match" href="2d.filter.layers.gaussianBlur.mostly-x-expected.html">
-<title>Canvas test: 2d.filter.layers.gaussianBlur.mostly-x</title>
-<h1>2d.filter.layers.gaussianBlur.mostly-x</h1>
-<p class="desc">Test CanvasFilter() with gaussianBlur.</p>
-<canvas id="canvas" width="100" height="100">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
-  const canvas = new OffscreenCanvas(100, 100);
-  const ctx = canvas.getContext('2d');
-
-  ctx.fillStyle = 'teal';
-  ctx.beginLayer({filter: {
-      name: 'gaussianBlur',
-      stdDeviation: [4, 1],
-  }});
-  ctx.fillRect(25, 25, 50, 50);
-  ctx.endLayer();
-
-  const outputCanvas = document.getElementById("canvas");
-  outputCanvas.getContext('2d').drawImage(canvas, 0, 0);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.mostly-x.w.html b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.mostly-x.w.html
deleted file mode 100644
index 7d20d78503..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.mostly-x.w.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<html class="reftest-wait">
-<link rel="match" href="2d.filter.layers.gaussianBlur.mostly-x-expected.html">
-<title>Canvas test: 2d.filter.layers.gaussianBlur.mostly-x</title>
-<h1>2d.filter.layers.gaussianBlur.mostly-x</h1>
-<p class="desc">Test CanvasFilter() with gaussianBlur.</p>
-<canvas id="canvas" width="100" height="100">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script id='myWorker' type='text/worker'>
-  self.onmessage = function(e) {
-    const canvas = new OffscreenCanvas(100, 100);
-    const ctx = canvas.getContext('2d');
-
-    ctx.fillStyle = 'teal';
-    ctx.beginLayer({filter: {
-        name: 'gaussianBlur',
-        stdDeviation: [4, 1],
-    }});
-    ctx.fillRect(25, 25, 50, 50);
-    ctx.endLayer();
-
-    const bitmap = canvas.transferToImageBitmap();
-    self.postMessage(bitmap, bitmap);
-  };
-</script>
-<script>
-  const blob = new Blob([document.getElementById('myWorker').textContent]);
-  const worker = new Worker(URL.createObjectURL(blob));
-  worker.addEventListener('message', msg => {
-    const outputCtx = document.getElementById("canvas").getContext('2d');
-    outputCtx.drawImage(msg.data, 0, 0);
-    document.documentElement.classList.remove("reftest-wait");
-  });
-  worker.postMessage(null);
-</script>
-</html>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.mostly-y-expected.html b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.mostly-y-expected.html
deleted file mode 100644
index 76a46b1533..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.mostly-y-expected.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>Canvas test: 2d.filter.layers.gaussianBlur.mostly-y</title>
-<h1>2d.filter.layers.gaussianBlur.mostly-y</h1>
-<p class="desc">Test CanvasFilter() with gaussianBlur.</p>
-
-<svg xmlns="http://www.w3.org/2000/svg"
-     width="100" height="100"
-     color-interpolation-filters="sRGB">
-  <filter id="blur" x="-50%" y="-50%" width="200%" height="200%">
-    <feGaussianBlur stdDeviation="1 4" />
-  </filter>
-  <rect x="25" y="25" width="50" height="50"
-        fill="teal" filter="url(#blur)" />
-</svg>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.mostly-y.html b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.mostly-y.html
deleted file mode 100644
index bdc6e66fe5..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.mostly-y.html
+++ /dev/null
@@ -1,24 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<link rel="match" href="2d.filter.layers.gaussianBlur.mostly-y-expected.html">
-<title>Canvas test: 2d.filter.layers.gaussianBlur.mostly-y</title>
-<h1>2d.filter.layers.gaussianBlur.mostly-y</h1>
-<p class="desc">Test CanvasFilter() with gaussianBlur.</p>
-<canvas id="canvas" width="100" height="100">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
-  const canvas = new OffscreenCanvas(100, 100);
-  const ctx = canvas.getContext('2d');
-
-  ctx.fillStyle = 'teal';
-  ctx.beginLayer({filter: {
-      name: 'gaussianBlur',
-      stdDeviation: [1, 4],
-  }});
-  ctx.fillRect(25, 25, 50, 50);
-  ctx.endLayer();
-
-  const outputCanvas = document.getElementById("canvas");
-  outputCanvas.getContext('2d').drawImage(canvas, 0, 0);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.mostly-y.w.html b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.mostly-y.w.html
deleted file mode 100644
index dfd6438b19..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.mostly-y.w.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<html class="reftest-wait">
-<link rel="match" href="2d.filter.layers.gaussianBlur.mostly-y-expected.html">
-<title>Canvas test: 2d.filter.layers.gaussianBlur.mostly-y</title>
-<h1>2d.filter.layers.gaussianBlur.mostly-y</h1>
-<p class="desc">Test CanvasFilter() with gaussianBlur.</p>
-<canvas id="canvas" width="100" height="100">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script id='myWorker' type='text/worker'>
-  self.onmessage = function(e) {
-    const canvas = new OffscreenCanvas(100, 100);
-    const ctx = canvas.getContext('2d');
-
-    ctx.fillStyle = 'teal';
-    ctx.beginLayer({filter: {
-        name: 'gaussianBlur',
-        stdDeviation: [1, 4],
-    }});
-    ctx.fillRect(25, 25, 50, 50);
-    ctx.endLayer();
-
-    const bitmap = canvas.transferToImageBitmap();
-    self.postMessage(bitmap, bitmap);
-  };
-</script>
-<script>
-  const blob = new Blob([document.getElementById('myWorker').textContent]);
-  const worker = new Worker(URL.createObjectURL(blob));
-  worker.addEventListener('message', msg => {
-    const outputCtx = document.getElementById("canvas").getContext('2d');
-    outputCtx.drawImage(msg.data, 0, 0);
-    document.documentElement.classList.remove("reftest-wait");
-  });
-  worker.postMessage(null);
-</script>
-</html>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.w.html b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.w.html
new file mode 100644
index 0000000000..10ea8baa10
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.w.html
@@ -0,0 +1,199 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<html class="reftest-wait">
+<link rel="match" href="2d.filter.layers.gaussianBlur-expected.html">
+<title>Canvas test: 2d.filter.layers.gaussianBlur</title>
+<h1 style="font-size: 20px;">2d.filter.layers.gaussianBlur</h1>
+<p class="desc">Test CanvasFilter() with gaussianBlur.</p>
+<script>pending_tests = 5;</script>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(5, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>x-only</div>
+  <canvas id="canvas0" width="100" height="100" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker0" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(100, 100);
+      const ctx = canvas.getContext('2d');
+
+      ctx.fillStyle = 'teal';
+      ctx.beginLayer({filter: {
+          name: 'gaussianBlur',
+          stdDeviation: [4, 0],
+      }});
+      ctx.fillRect(25, 25, 50, 50);
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker0').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas0');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+<span>
+  <div>mostly-x</div>
+  <canvas id="canvas1" width="100" height="100" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker1" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(100, 100);
+      const ctx = canvas.getContext('2d');
+
+      ctx.fillStyle = 'teal';
+      ctx.beginLayer({filter: {
+          name: 'gaussianBlur',
+          stdDeviation: [4, 1],
+      }});
+      ctx.fillRect(25, 25, 50, 50);
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker1').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas1');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+<span>
+  <div>isotropic</div>
+  <canvas id="canvas2" width="100" height="100" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker2" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(100, 100);
+      const ctx = canvas.getContext('2d');
+
+      ctx.fillStyle = 'teal';
+      ctx.beginLayer({filter: {
+          name: 'gaussianBlur',
+          stdDeviation: [4, 4],
+      }});
+      ctx.fillRect(25, 25, 50, 50);
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker2').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas2');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+<span>
+  <div>mostly-y</div>
+  <canvas id="canvas3" width="100" height="100" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker3" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(100, 100);
+      const ctx = canvas.getContext('2d');
+
+      ctx.fillStyle = 'teal';
+      ctx.beginLayer({filter: {
+          name: 'gaussianBlur',
+          stdDeviation: [1, 4],
+      }});
+      ctx.fillRect(25, 25, 50, 50);
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker3').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas3');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+<span>
+  <div>y-only</div>
+  <canvas id="canvas4" width="100" height="100" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker4" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(100, 100);
+      const ctx = canvas.getContext('2d');
+
+      ctx.fillStyle = 'teal';
+      ctx.beginLayer({filter: {
+          name: 'gaussianBlur',
+          stdDeviation: [0, 4],
+      }});
+      ctx.fillRect(25, 25, 50, 50);
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker4').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas4');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+</div>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.x-only-expected.html b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.x-only-expected.html
deleted file mode 100644
index 26741f9847..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.x-only-expected.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>Canvas test: 2d.filter.layers.gaussianBlur.x-only</title>
-<h1>2d.filter.layers.gaussianBlur.x-only</h1>
-<p class="desc">Test CanvasFilter() with gaussianBlur.</p>
-
-<svg xmlns="http://www.w3.org/2000/svg"
-     width="100" height="100"
-     color-interpolation-filters="sRGB">
-  <filter id="blur" x="-50%" y="-50%" width="200%" height="200%">
-    <feGaussianBlur stdDeviation="4 0" />
-  </filter>
-  <rect x="25" y="25" width="50" height="50"
-        fill="teal" filter="url(#blur)" />
-</svg>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.x-only.html b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.x-only.html
deleted file mode 100644
index 0d42acb8b5..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.x-only.html
+++ /dev/null
@@ -1,24 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<link rel="match" href="2d.filter.layers.gaussianBlur.x-only-expected.html">
-<title>Canvas test: 2d.filter.layers.gaussianBlur.x-only</title>
-<h1>2d.filter.layers.gaussianBlur.x-only</h1>
-<p class="desc">Test CanvasFilter() with gaussianBlur.</p>
-<canvas id="canvas" width="100" height="100">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
-  const canvas = new OffscreenCanvas(100, 100);
-  const ctx = canvas.getContext('2d');
-
-  ctx.fillStyle = 'teal';
-  ctx.beginLayer({filter: {
-      name: 'gaussianBlur',
-      stdDeviation: [4, 0],
-  }});
-  ctx.fillRect(25, 25, 50, 50);
-  ctx.endLayer();
-
-  const outputCanvas = document.getElementById("canvas");
-  outputCanvas.getContext('2d').drawImage(canvas, 0, 0);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.x-only.w.html b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.x-only.w.html
deleted file mode 100644
index b235c7ad38..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.x-only.w.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<html class="reftest-wait">
-<link rel="match" href="2d.filter.layers.gaussianBlur.x-only-expected.html">
-<title>Canvas test: 2d.filter.layers.gaussianBlur.x-only</title>
-<h1>2d.filter.layers.gaussianBlur.x-only</h1>
-<p class="desc">Test CanvasFilter() with gaussianBlur.</p>
-<canvas id="canvas" width="100" height="100">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script id='myWorker' type='text/worker'>
-  self.onmessage = function(e) {
-    const canvas = new OffscreenCanvas(100, 100);
-    const ctx = canvas.getContext('2d');
-
-    ctx.fillStyle = 'teal';
-    ctx.beginLayer({filter: {
-        name: 'gaussianBlur',
-        stdDeviation: [4, 0],
-    }});
-    ctx.fillRect(25, 25, 50, 50);
-    ctx.endLayer();
-
-    const bitmap = canvas.transferToImageBitmap();
-    self.postMessage(bitmap, bitmap);
-  };
-</script>
-<script>
-  const blob = new Blob([document.getElementById('myWorker').textContent]);
-  const worker = new Worker(URL.createObjectURL(blob));
-  worker.addEventListener('message', msg => {
-    const outputCtx = document.getElementById("canvas").getContext('2d');
-    outputCtx.drawImage(msg.data, 0, 0);
-    document.documentElement.classList.remove("reftest-wait");
-  });
-  worker.postMessage(null);
-</script>
-</html>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.y-only-expected.html b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.y-only-expected.html
deleted file mode 100644
index d00eec6b57..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.y-only-expected.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>Canvas test: 2d.filter.layers.gaussianBlur.y-only</title>
-<h1>2d.filter.layers.gaussianBlur.y-only</h1>
-<p class="desc">Test CanvasFilter() with gaussianBlur.</p>
-
-<svg xmlns="http://www.w3.org/2000/svg"
-     width="100" height="100"
-     color-interpolation-filters="sRGB">
-  <filter id="blur" x="-50%" y="-50%" width="200%" height="200%">
-    <feGaussianBlur stdDeviation="0 4" />
-  </filter>
-  <rect x="25" y="25" width="50" height="50"
-        fill="teal" filter="url(#blur)" />
-</svg>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.y-only.html b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.y-only.html
deleted file mode 100644
index c9bc85d699..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.y-only.html
+++ /dev/null
@@ -1,24 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<link rel="match" href="2d.filter.layers.gaussianBlur.y-only-expected.html">
-<title>Canvas test: 2d.filter.layers.gaussianBlur.y-only</title>
-<h1>2d.filter.layers.gaussianBlur.y-only</h1>
-<p class="desc">Test CanvasFilter() with gaussianBlur.</p>
-<canvas id="canvas" width="100" height="100">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
-  const canvas = new OffscreenCanvas(100, 100);
-  const ctx = canvas.getContext('2d');
-
-  ctx.fillStyle = 'teal';
-  ctx.beginLayer({filter: {
-      name: 'gaussianBlur',
-      stdDeviation: [0, 4],
-  }});
-  ctx.fillRect(25, 25, 50, 50);
-  ctx.endLayer();
-
-  const outputCanvas = document.getElementById("canvas");
-  outputCanvas.getContext('2d').drawImage(canvas, 0, 0);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.y-only.w.html b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.y-only.w.html
deleted file mode 100644
index 5deb96c255..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.y-only.w.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<html class="reftest-wait">
-<link rel="match" href="2d.filter.layers.gaussianBlur.y-only-expected.html">
-<title>Canvas test: 2d.filter.layers.gaussianBlur.y-only</title>
-<h1>2d.filter.layers.gaussianBlur.y-only</h1>
-<p class="desc">Test CanvasFilter() with gaussianBlur.</p>
-<canvas id="canvas" width="100" height="100">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script id='myWorker' type='text/worker'>
-  self.onmessage = function(e) {
-    const canvas = new OffscreenCanvas(100, 100);
-    const ctx = canvas.getContext('2d');
-
-    ctx.fillStyle = 'teal';
-    ctx.beginLayer({filter: {
-        name: 'gaussianBlur',
-        stdDeviation: [0, 4],
-    }});
-    ctx.fillRect(25, 25, 50, 50);
-    ctx.endLayer();
-
-    const bitmap = canvas.transferToImageBitmap();
-    self.postMessage(bitmap, bitmap);
-  };
-</script>
-<script>
-  const blob = new Blob([document.getElementById('myWorker').textContent]);
-  const worker = new Worker(URL.createObjectURL(blob));
-  worker.addEventListener('message', msg => {
-    const outputCtx = document.getElementById("canvas").getContext('2d');
-    outputCtx.drawImage(msg.data, 0, 0);
-    document.documentElement.classList.remove("reftest-wait");
-  });
-  worker.postMessage(null);
-</script>
-</html>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.beginLayer-options.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.beginLayer-options.html
index 4fb042a1d8..354a03a134 100644
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.beginLayer-options.html
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.beginLayer-options.html
@@ -10,13 +10,7 @@
 
 
 <script>
-var t = async_test("Checks beginLayer works for different option parameter values");
-var t_pass = t.done.bind(t);
-var t_fail = t.step_func(function(reason) {
-    throw reason;
-});
-t.step(function() {
-
+test(t => {
   var canvas = new OffscreenCanvas(100, 50);
   var ctx = canvas.getContext('2d');
 
@@ -45,7 +39,6 @@ t.step(function() {
   ctx.beginLayer({filter: 1}); ctx.endLayer();
   ctx.beginLayer({filter: true}); ctx.endLayer();
   ctx.beginLayer({filter: false}); ctx.endLayer();
-  t.done();
 
-});
+}, "Checks beginLayer works for different option parameter values");
 </script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.beginLayer-options.worker.js b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.beginLayer-options.worker.js
index cafbc83f3e..492ac3fcea 100644
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.beginLayer-options.worker.js
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.beginLayer-options.worker.js
@@ -6,13 +6,7 @@
 importScripts("/resources/testharness.js");
 importScripts("/html/canvas/resources/canvas-tests.js");
 
-var t = async_test("Checks beginLayer works for different option parameter values");
-var t_pass = t.done.bind(t);
-var t_fail = t.step_func(function(reason) {
-    throw reason;
-});
-t.step(function() {
-
+test(t => {
   var canvas = new OffscreenCanvas(100, 50);
   var ctx = canvas.getContext('2d');
 
@@ -41,6 +35,5 @@ t.step(function() {
   ctx.beginLayer({filter: 1}); ctx.endLayer();
   ctx.beginLayer({filter: true}); ctx.endLayer();
   ctx.beginLayer({filter: false}); ctx.endLayer();
-  t.done();
-});
+}, "Checks beginLayer works for different option parameter values");
 done();
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.ctm.getTransform.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.ctm.getTransform.html
index b2306d95ac..919de40d2e 100644
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.ctm.getTransform.html
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.ctm.getTransform.html
@@ -10,13 +10,7 @@
 
 
 <script>
-var t = async_test("Tests getTransform inside layers.");
-var t_pass = t.done.bind(t);
-var t_fail = t.step_func(function(reason) {
-    throw reason;
-});
-t.step(function() {
-
+test(t => {
   var canvas = new OffscreenCanvas(100, 50);
   var ctx = canvas.getContext('2d');
 
@@ -26,7 +20,6 @@ t.step(function() {
   const m = ctx.getTransform();
   assert_array_equals([m.a, m.b, m.c, m.d, m.e, m.f], [2, 0, 0, 3, 10, 20]);
   ctx.endLayer();
-  t.done();
 
-});
+}, "Tests getTransform inside layers.");
 </script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.ctm.getTransform.worker.js b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.ctm.getTransform.worker.js
index 54b1fee5d0..2d6e6ef8a2 100644
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.ctm.getTransform.worker.js
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.ctm.getTransform.worker.js
@@ -6,13 +6,7 @@
 importScripts("/resources/testharness.js");
 importScripts("/html/canvas/resources/canvas-tests.js");
 
-var t = async_test("Tests getTransform inside layers.");
-var t_pass = t.done.bind(t);
-var t_fail = t.step_func(function(reason) {
-    throw reason;
-});
-t.step(function() {
-
+test(t => {
   var canvas = new OffscreenCanvas(100, 50);
   var ctx = canvas.getContext('2d');
 
@@ -22,6 +16,5 @@ t.step(function() {
   const m = ctx.getTransform();
   assert_array_equals([m.a, m.b, m.c, m.d, m.e, m.f], [2, 0, 0, 3, 10, 20]);
   ctx.endLayer();
-  t.done();
-});
+}, "Tests getTransform inside layers.");
 done();
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.exceptions-are-no-op.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.exceptions-are-no-op.html
index a047c539cf..29b316b256 100644
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.exceptions-are-no-op.html
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.exceptions-are-no-op.html
@@ -10,13 +10,7 @@
 
 
 <script>
-var t = async_test("Checks that the context state is left unchanged if beginLayer throws.");
-var t_pass = t.done.bind(t);
-var t_fail = t.step_func(function(reason) {
-    throw reason;
-});
-t.step(function() {
-
+test(t => {
   var canvas = new OffscreenCanvas(100, 50);
   var ctx = canvas.getContext('2d');
 
@@ -26,7 +20,6 @@ t.step(function() {
                                                   values: 'foo'}}));
   // `beginLayer` shouldn't have opened the layer, so `endLayer` should throw.
   assert_throws_dom("InvalidStateError", () => ctx.endLayer());
-  t.done();
 
-});
+}, "Checks that the context state is left unchanged if beginLayer throws.");
 </script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.exceptions-are-no-op.worker.js b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.exceptions-are-no-op.worker.js
index bd1e376084..6e253b26d5 100644
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.exceptions-are-no-op.worker.js
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.exceptions-are-no-op.worker.js
@@ -6,13 +6,7 @@
 importScripts("/resources/testharness.js");
 importScripts("/html/canvas/resources/canvas-tests.js");
 
-var t = async_test("Checks that the context state is left unchanged if beginLayer throws.");
-var t_pass = t.done.bind(t);
-var t_fail = t.step_func(function(reason) {
-    throw reason;
-});
-t.step(function() {
-
+test(t => {
   var canvas = new OffscreenCanvas(100, 50);
   var ctx = canvas.getContext('2d');
 
@@ -22,6 +16,5 @@ t.step(function() {
                                                   values: 'foo'}}));
   // `beginLayer` shouldn't have opened the layer, so `endLayer` should throw.
   assert_throws_dom("InvalidStateError", () => ctx.endLayer());
-  t.done();
-});
+}, "Checks that the context state is left unchanged if beginLayer throws.");
 done();
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha-expected.html
deleted file mode 100644
index 0666e3098a..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha-expected.html
+++ /dev/null
@@ -1,31 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>Canvas test: 2d.layer.global-states.alpha</title>
-<h1>2d.layer.global-states.alpha</h1>
-<p class="desc">Checks that layers correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
-  const canvas = document.getElementById("canvas");
-  const ctx = canvas.getContext('2d');
-
-  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
-  var circle = new Path2D();
-  circle.arc(90, 90, 45, 0, 2 * Math.PI);
-  ctx.fill(circle);
-
-  ctx.globalAlpha = 0.6;
-
-  canvas2 = document.createElement("canvas");
-  ctx2 = canvas2.getContext("2d");
-
-  ctx2.globalCompositeOperation = 'screen';
-  ctx2.fillStyle = 'rgba(225, 0, 0, 1)';
-  ctx2.fillRect(50, 50, 75, 50);
-  ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
-  ctx2.fillRect(70, 70, 75, 50);
-
-  ctx.drawImage(canvas2, 0, 0);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.blending-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.blending-expected.html
deleted file mode 100644
index 8a45027588..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.blending-expected.html
+++ /dev/null
@@ -1,32 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>Canvas test: 2d.layer.global-states.alpha.blending</title>
-<h1>2d.layer.global-states.alpha.blending</h1>
-<p class="desc">Checks that layers correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
-  const canvas = document.getElementById("canvas");
-  const ctx = canvas.getContext('2d');
-
-  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
-  var circle = new Path2D();
-  circle.arc(90, 90, 45, 0, 2 * Math.PI);
-  ctx.fill(circle);
-
-  ctx.globalAlpha = 0.6;
-  ctx.globalCompositeOperation = 'multiply';
-
-  canvas2 = document.createElement("canvas");
-  ctx2 = canvas2.getContext("2d");
-
-  ctx2.globalCompositeOperation = 'screen';
-  ctx2.fillStyle = 'rgba(225, 0, 0, 1)';
-  ctx2.fillRect(50, 50, 75, 50);
-  ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
-  ctx2.fillRect(70, 70, 75, 50);
-
-  ctx.drawImage(canvas2, 0, 0);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.blending.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.blending.html
deleted file mode 100644
index 71414b4b37..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.blending.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<link rel="match" href="2d.layer.global-states.alpha.blending-expected.html">
-<title>Canvas test: 2d.layer.global-states.alpha.blending</title>
-<h1>2d.layer.global-states.alpha.blending</h1>
-<p class="desc">Checks that layers correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
-  const canvas = new OffscreenCanvas(200, 200);
-  const ctx = canvas.getContext('2d');
-
-  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
-  var circle = new Path2D();
-  circle.arc(90, 90, 45, 0, 2 * Math.PI);
-  ctx.fill(circle);
-
-  ctx.globalAlpha = 0.6;
-  ctx.globalCompositeOperation = 'multiply';
-
-  ctx.beginLayer();
-
-  // Enable compositing in the layer to validate that draw calls in the layer
-  // won't individually composite with the background.
-  ctx.globalCompositeOperation = 'screen';
-
-  ctx.fillStyle = 'rgba(225, 0, 0, 1)';
-  ctx.fillRect(50, 50, 75, 50);
-  ctx.fillStyle = 'rgba(0, 255, 0, 1)';
-  ctx.fillRect(70, 70, 75, 50);
-
-  ctx.endLayer();
-
-  const outputCanvas = document.getElementById("canvas");
-  outputCanvas.getContext('2d').drawImage(canvas, 0, 0);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.blending.shadow-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.blending.shadow-expected.html
deleted file mode 100644
index f7b633b35f..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.blending.shadow-expected.html
+++ /dev/null
@@ -1,36 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>Canvas test: 2d.layer.global-states.alpha.blending.shadow</title>
-<h1>2d.layer.global-states.alpha.blending.shadow</h1>
-<p class="desc">Checks that layers correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
-  const canvas = document.getElementById("canvas");
-  const ctx = canvas.getContext('2d');
-
-  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
-  var circle = new Path2D();
-  circle.arc(90, 90, 45, 0, 2 * Math.PI);
-  ctx.fill(circle);
-
-  ctx.globalAlpha = 0.6;
-  ctx.globalCompositeOperation = 'multiply';
-  ctx.shadowOffsetX = -10;
-  ctx.shadowOffsetY = 10;
-  ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
-  ctx.shadowBlur = 3;
-
-  canvas2 = document.createElement("canvas");
-  ctx2 = canvas2.getContext("2d");
-
-  ctx2.globalCompositeOperation = 'screen';
-  ctx2.fillStyle = 'rgba(225, 0, 0, 1)';
-  ctx2.fillRect(50, 50, 75, 50);
-  ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
-  ctx2.fillRect(70, 70, 75, 50);
-
-  ctx.drawImage(canvas2, 0, 0);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.blending.shadow.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.blending.shadow.html
deleted file mode 100644
index ed2d2d70af..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.blending.shadow.html
+++ /dev/null
@@ -1,42 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<link rel="match" href="2d.layer.global-states.alpha.blending.shadow-expected.html">
-<title>Canvas test: 2d.layer.global-states.alpha.blending.shadow</title>
-<h1>2d.layer.global-states.alpha.blending.shadow</h1>
-<p class="desc">Checks that layers correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
-  const canvas = new OffscreenCanvas(200, 200);
-  const ctx = canvas.getContext('2d');
-
-  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
-  var circle = new Path2D();
-  circle.arc(90, 90, 45, 0, 2 * Math.PI);
-  ctx.fill(circle);
-
-  ctx.globalAlpha = 0.6;
-  ctx.globalCompositeOperation = 'multiply';
-  ctx.shadowOffsetX = -10;
-  ctx.shadowOffsetY = 10;
-  ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
-  ctx.shadowBlur = 3;
-
-  ctx.beginLayer();
-
-  // Enable compositing in the layer to validate that draw calls in the layer
-  // won't individually composite with the background.
-  ctx.globalCompositeOperation = 'screen';
-
-  ctx.fillStyle = 'rgba(225, 0, 0, 1)';
-  ctx.fillRect(50, 50, 75, 50);
-  ctx.fillStyle = 'rgba(0, 255, 0, 1)';
-  ctx.fillRect(70, 70, 75, 50);
-
-  ctx.endLayer();
-
-  const outputCanvas = document.getElementById("canvas");
-  outputCanvas.getContext('2d').drawImage(canvas, 0, 0);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.blending.shadow.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.blending.shadow.w.html
deleted file mode 100644
index 1ff3ad8385..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.blending.shadow.w.html
+++ /dev/null
@@ -1,56 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<html class="reftest-wait">
-<link rel="match" href="2d.layer.global-states.alpha.blending.shadow-expected.html">
-<title>Canvas test: 2d.layer.global-states.alpha.blending.shadow</title>
-<h1>2d.layer.global-states.alpha.blending.shadow</h1>
-<p class="desc">Checks that layers correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script id='myWorker' type='text/worker'>
-  self.onmessage = function(e) {
-    const canvas = new OffscreenCanvas(200, 200);
-    const ctx = canvas.getContext('2d');
-
-    ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
-    var circle = new Path2D();
-    circle.arc(90, 90, 45, 0, 2 * Math.PI);
-    ctx.fill(circle);
-
-    ctx.globalAlpha = 0.6;
-    ctx.globalCompositeOperation = 'multiply';
-    ctx.shadowOffsetX = -10;
-    ctx.shadowOffsetY = 10;
-    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
-    ctx.shadowBlur = 3;
-
-    ctx.beginLayer();
-
-    // Enable compositing in the layer to validate that draw calls in the layer
-    // won't individually composite with the background.
-    ctx.globalCompositeOperation = 'screen';
-
-    ctx.fillStyle = 'rgba(225, 0, 0, 1)';
-    ctx.fillRect(50, 50, 75, 50);
-    ctx.fillStyle = 'rgba(0, 255, 0, 1)';
-    ctx.fillRect(70, 70, 75, 50);
-
-    ctx.endLayer();
-
-    const bitmap = canvas.transferToImageBitmap();
-    self.postMessage(bitmap, bitmap);
-  };
-</script>
-<script>
-  const blob = new Blob([document.getElementById('myWorker').textContent]);
-  const worker = new Worker(URL.createObjectURL(blob));
-  worker.addEventListener('message', msg => {
-    const outputCtx = document.getElementById("canvas").getContext('2d');
-    outputCtx.drawImage(msg.data, 0, 0);
-    document.documentElement.classList.remove("reftest-wait");
-  });
-  worker.postMessage(null);
-</script>
-</html>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.blending.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.blending.w.html
deleted file mode 100644
index 618480c813..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.blending.w.html
+++ /dev/null
@@ -1,52 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<html class="reftest-wait">
-<link rel="match" href="2d.layer.global-states.alpha.blending-expected.html">
-<title>Canvas test: 2d.layer.global-states.alpha.blending</title>
-<h1>2d.layer.global-states.alpha.blending</h1>
-<p class="desc">Checks that layers correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script id='myWorker' type='text/worker'>
-  self.onmessage = function(e) {
-    const canvas = new OffscreenCanvas(200, 200);
-    const ctx = canvas.getContext('2d');
-
-    ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
-    var circle = new Path2D();
-    circle.arc(90, 90, 45, 0, 2 * Math.PI);
-    ctx.fill(circle);
-
-    ctx.globalAlpha = 0.6;
-    ctx.globalCompositeOperation = 'multiply';
-
-    ctx.beginLayer();
-
-    // Enable compositing in the layer to validate that draw calls in the layer
-    // won't individually composite with the background.
-    ctx.globalCompositeOperation = 'screen';
-
-    ctx.fillStyle = 'rgba(225, 0, 0, 1)';
-    ctx.fillRect(50, 50, 75, 50);
-    ctx.fillStyle = 'rgba(0, 255, 0, 1)';
-    ctx.fillRect(70, 70, 75, 50);
-
-    ctx.endLayer();
-
-    const bitmap = canvas.transferToImageBitmap();
-    self.postMessage(bitmap, bitmap);
-  };
-</script>
-<script>
-  const blob = new Blob([document.getElementById('myWorker').textContent]);
-  const worker = new Worker(URL.createObjectURL(blob));
-  worker.addEventListener('message', msg => {
-    const outputCtx = document.getElementById("canvas").getContext('2d');
-    outputCtx.drawImage(msg.data, 0, 0);
-    document.documentElement.classList.remove("reftest-wait");
-  });
-  worker.postMessage(null);
-</script>
-</html>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.composite-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.composite-expected.html
deleted file mode 100644
index 951049e638..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.composite-expected.html
+++ /dev/null
@@ -1,32 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>Canvas test: 2d.layer.global-states.alpha.composite</title>
-<h1>2d.layer.global-states.alpha.composite</h1>
-<p class="desc">Checks that layers correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
-  const canvas = document.getElementById("canvas");
-  const ctx = canvas.getContext('2d');
-
-  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
-  var circle = new Path2D();
-  circle.arc(90, 90, 45, 0, 2 * Math.PI);
-  ctx.fill(circle);
-
-  ctx.globalAlpha = 0.6;
-  ctx.globalCompositeOperation = 'source-in';
-
-  canvas2 = document.createElement("canvas");
-  ctx2 = canvas2.getContext("2d");
-
-  ctx2.globalCompositeOperation = 'screen';
-  ctx2.fillStyle = 'rgba(225, 0, 0, 1)';
-  ctx2.fillRect(50, 50, 75, 50);
-  ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
-  ctx2.fillRect(70, 70, 75, 50);
-
-  ctx.drawImage(canvas2, 0, 0);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.composite.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.composite.html
deleted file mode 100644
index 94fed5752d..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.composite.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<link rel="match" href="2d.layer.global-states.alpha.composite-expected.html">
-<title>Canvas test: 2d.layer.global-states.alpha.composite</title>
-<h1>2d.layer.global-states.alpha.composite</h1>
-<p class="desc">Checks that layers correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
-  const canvas = new OffscreenCanvas(200, 200);
-  const ctx = canvas.getContext('2d');
-
-  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
-  var circle = new Path2D();
-  circle.arc(90, 90, 45, 0, 2 * Math.PI);
-  ctx.fill(circle);
-
-  ctx.globalAlpha = 0.6;
-  ctx.globalCompositeOperation = 'source-in';
-
-  ctx.beginLayer();
-
-  // Enable compositing in the layer to validate that draw calls in the layer
-  // won't individually composite with the background.
-  ctx.globalCompositeOperation = 'screen';
-
-  ctx.fillStyle = 'rgba(225, 0, 0, 1)';
-  ctx.fillRect(50, 50, 75, 50);
-  ctx.fillStyle = 'rgba(0, 255, 0, 1)';
-  ctx.fillRect(70, 70, 75, 50);
-
-  ctx.endLayer();
-
-  const outputCanvas = document.getElementById("canvas");
-  outputCanvas.getContext('2d').drawImage(canvas, 0, 0);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.composite.shadow-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.composite.shadow-expected.html
deleted file mode 100644
index 0ae93871f5..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.composite.shadow-expected.html
+++ /dev/null
@@ -1,36 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>Canvas test: 2d.layer.global-states.alpha.composite.shadow</title>
-<h1>2d.layer.global-states.alpha.composite.shadow</h1>
-<p class="desc">Checks that layers correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
-  const canvas = document.getElementById("canvas");
-  const ctx = canvas.getContext('2d');
-
-  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
-  var circle = new Path2D();
-  circle.arc(90, 90, 45, 0, 2 * Math.PI);
-  ctx.fill(circle);
-
-  ctx.globalAlpha = 0.6;
-  ctx.globalCompositeOperation = 'source-in';
-  ctx.shadowOffsetX = -10;
-  ctx.shadowOffsetY = 10;
-  ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
-  ctx.shadowBlur = 3;
-
-  canvas2 = document.createElement("canvas");
-  ctx2 = canvas2.getContext("2d");
-
-  ctx2.globalCompositeOperation = 'screen';
-  ctx2.fillStyle = 'rgba(225, 0, 0, 1)';
-  ctx2.fillRect(50, 50, 75, 50);
-  ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
-  ctx2.fillRect(70, 70, 75, 50);
-
-  ctx.drawImage(canvas2, 0, 0);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.composite.shadow.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.composite.shadow.html
deleted file mode 100644
index eb579cdcce..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.composite.shadow.html
+++ /dev/null
@@ -1,42 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<link rel="match" href="2d.layer.global-states.alpha.composite.shadow-expected.html">
-<title>Canvas test: 2d.layer.global-states.alpha.composite.shadow</title>
-<h1>2d.layer.global-states.alpha.composite.shadow</h1>
-<p class="desc">Checks that layers correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
-  const canvas = new OffscreenCanvas(200, 200);
-  const ctx = canvas.getContext('2d');
-
-  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
-  var circle = new Path2D();
-  circle.arc(90, 90, 45, 0, 2 * Math.PI);
-  ctx.fill(circle);
-
-  ctx.globalAlpha = 0.6;
-  ctx.globalCompositeOperation = 'source-in';
-  ctx.shadowOffsetX = -10;
-  ctx.shadowOffsetY = 10;
-  ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
-  ctx.shadowBlur = 3;
-
-  ctx.beginLayer();
-
-  // Enable compositing in the layer to validate that draw calls in the layer
-  // won't individually composite with the background.
-  ctx.globalCompositeOperation = 'screen';
-
-  ctx.fillStyle = 'rgba(225, 0, 0, 1)';
-  ctx.fillRect(50, 50, 75, 50);
-  ctx.fillStyle = 'rgba(0, 255, 0, 1)';
-  ctx.fillRect(70, 70, 75, 50);
-
-  ctx.endLayer();
-
-  const outputCanvas = document.getElementById("canvas");
-  outputCanvas.getContext('2d').drawImage(canvas, 0, 0);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.composite.shadow.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.composite.shadow.w.html
deleted file mode 100644
index 60e36f4b97..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.composite.shadow.w.html
+++ /dev/null
@@ -1,56 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<html class="reftest-wait">
-<link rel="match" href="2d.layer.global-states.alpha.composite.shadow-expected.html">
-<title>Canvas test: 2d.layer.global-states.alpha.composite.shadow</title>
-<h1>2d.layer.global-states.alpha.composite.shadow</h1>
-<p class="desc">Checks that layers correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script id='myWorker' type='text/worker'>
-  self.onmessage = function(e) {
-    const canvas = new OffscreenCanvas(200, 200);
-    const ctx = canvas.getContext('2d');
-
-    ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
-    var circle = new Path2D();
-    circle.arc(90, 90, 45, 0, 2 * Math.PI);
-    ctx.fill(circle);
-
-    ctx.globalAlpha = 0.6;
-    ctx.globalCompositeOperation = 'source-in';
-    ctx.shadowOffsetX = -10;
-    ctx.shadowOffsetY = 10;
-    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
-    ctx.shadowBlur = 3;
-
-    ctx.beginLayer();
-
-    // Enable compositing in the layer to validate that draw calls in the layer
-    // won't individually composite with the background.
-    ctx.globalCompositeOperation = 'screen';
-
-    ctx.fillStyle = 'rgba(225, 0, 0, 1)';
-    ctx.fillRect(50, 50, 75, 50);
-    ctx.fillStyle = 'rgba(0, 255, 0, 1)';
-    ctx.fillRect(70, 70, 75, 50);
-
-    ctx.endLayer();
-
-    const bitmap = canvas.transferToImageBitmap();
-    self.postMessage(bitmap, bitmap);
-  };
-</script>
-<script>
-  const blob = new Blob([document.getElementById('myWorker').textContent]);
-  const worker = new Worker(URL.createObjectURL(blob));
-  worker.addEventListener('message', msg => {
-    const outputCtx = document.getElementById("canvas").getContext('2d');
-    outputCtx.drawImage(msg.data, 0, 0);
-    document.documentElement.classList.remove("reftest-wait");
-  });
-  worker.postMessage(null);
-</script>
-</html>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.composite.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.composite.w.html
deleted file mode 100644
index d7d2b7a21e..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.composite.w.html
+++ /dev/null
@@ -1,52 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<html class="reftest-wait">
-<link rel="match" href="2d.layer.global-states.alpha.composite-expected.html">
-<title>Canvas test: 2d.layer.global-states.alpha.composite</title>
-<h1>2d.layer.global-states.alpha.composite</h1>
-<p class="desc">Checks that layers correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script id='myWorker' type='text/worker'>
-  self.onmessage = function(e) {
-    const canvas = new OffscreenCanvas(200, 200);
-    const ctx = canvas.getContext('2d');
-
-    ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
-    var circle = new Path2D();
-    circle.arc(90, 90, 45, 0, 2 * Math.PI);
-    ctx.fill(circle);
-
-    ctx.globalAlpha = 0.6;
-    ctx.globalCompositeOperation = 'source-in';
-
-    ctx.beginLayer();
-
-    // Enable compositing in the layer to validate that draw calls in the layer
-    // won't individually composite with the background.
-    ctx.globalCompositeOperation = 'screen';
-
-    ctx.fillStyle = 'rgba(225, 0, 0, 1)';
-    ctx.fillRect(50, 50, 75, 50);
-    ctx.fillStyle = 'rgba(0, 255, 0, 1)';
-    ctx.fillRect(70, 70, 75, 50);
-
-    ctx.endLayer();
-
-    const bitmap = canvas.transferToImageBitmap();
-    self.postMessage(bitmap, bitmap);
-  };
-</script>
-<script>
-  const blob = new Blob([document.getElementById('myWorker').textContent]);
-  const worker = new Worker(URL.createObjectURL(blob));
-  worker.addEventListener('message', msg => {
-    const outputCtx = document.getElementById("canvas").getContext('2d');
-    outputCtx.drawImage(msg.data, 0, 0);
-    document.documentElement.classList.remove("reftest-wait");
-  });
-  worker.postMessage(null);
-</script>
-</html>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.html
deleted file mode 100644
index 63a264e681..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.html
+++ /dev/null
@@ -1,37 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<link rel="match" href="2d.layer.global-states.alpha-expected.html">
-<title>Canvas test: 2d.layer.global-states.alpha</title>
-<h1>2d.layer.global-states.alpha</h1>
-<p class="desc">Checks that layers correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
-  const canvas = new OffscreenCanvas(200, 200);
-  const ctx = canvas.getContext('2d');
-
-  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
-  var circle = new Path2D();
-  circle.arc(90, 90, 45, 0, 2 * Math.PI);
-  ctx.fill(circle);
-
-  ctx.globalAlpha = 0.6;
-
-  ctx.beginLayer();
-
-  // Enable compositing in the layer to validate that draw calls in the layer
-  // won't individually composite with the background.
-  ctx.globalCompositeOperation = 'screen';
-
-  ctx.fillStyle = 'rgba(225, 0, 0, 1)';
-  ctx.fillRect(50, 50, 75, 50);
-  ctx.fillStyle = 'rgba(0, 255, 0, 1)';
-  ctx.fillRect(70, 70, 75, 50);
-
-  ctx.endLayer();
-
-  const outputCanvas = document.getElementById("canvas");
-  outputCanvas.getContext('2d').drawImage(canvas, 0, 0);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.shadow-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.shadow-expected.html
deleted file mode 100644
index 6f764c5001..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.shadow-expected.html
+++ /dev/null
@@ -1,35 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>Canvas test: 2d.layer.global-states.alpha.shadow</title>
-<h1>2d.layer.global-states.alpha.shadow</h1>
-<p class="desc">Checks that layers correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
-  const canvas = document.getElementById("canvas");
-  const ctx = canvas.getContext('2d');
-
-  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
-  var circle = new Path2D();
-  circle.arc(90, 90, 45, 0, 2 * Math.PI);
-  ctx.fill(circle);
-
-  ctx.globalAlpha = 0.5;
-  ctx.shadowOffsetX = -10;
-  ctx.shadowOffsetY = 10;
-  ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
-  ctx.shadowBlur = 3;
-
-  canvas2 = document.createElement("canvas");
-  ctx2 = canvas2.getContext("2d");
-
-  ctx2.globalCompositeOperation = 'screen';
-  ctx2.fillStyle = 'rgba(225, 0, 0, 1)';
-  ctx2.fillRect(50, 50, 75, 50);
-  ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
-  ctx2.fillRect(70, 70, 75, 50);
-
-  ctx.drawImage(canvas2, 0, 0);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.shadow.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.shadow.html
deleted file mode 100644
index 65a66c977d..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.shadow.html
+++ /dev/null
@@ -1,41 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<link rel="match" href="2d.layer.global-states.alpha.shadow-expected.html">
-<title>Canvas test: 2d.layer.global-states.alpha.shadow</title>
-<h1>2d.layer.global-states.alpha.shadow</h1>
-<p class="desc">Checks that layers correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
-  const canvas = new OffscreenCanvas(200, 200);
-  const ctx = canvas.getContext('2d');
-
-  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
-  var circle = new Path2D();
-  circle.arc(90, 90, 45, 0, 2 * Math.PI);
-  ctx.fill(circle);
-
-  ctx.globalAlpha = 0.5;
-  ctx.shadowOffsetX = -10;
-  ctx.shadowOffsetY = 10;
-  ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
-  ctx.shadowBlur = 3;
-
-  ctx.beginLayer();
-
-  // Enable compositing in the layer to validate that draw calls in the layer
-  // won't individually composite with the background.
-  ctx.globalCompositeOperation = 'screen';
-
-  ctx.fillStyle = 'rgba(225, 0, 0, 1)';
-  ctx.fillRect(50, 50, 75, 50);
-  ctx.fillStyle = 'rgba(0, 255, 0, 1)';
-  ctx.fillRect(70, 70, 75, 50);
-
-  ctx.endLayer();
-
-  const outputCanvas = document.getElementById("canvas");
-  outputCanvas.getContext('2d').drawImage(canvas, 0, 0);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.shadow.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.shadow.w.html
deleted file mode 100644
index f404601e3d..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.shadow.w.html
+++ /dev/null
@@ -1,55 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<html class="reftest-wait">
-<link rel="match" href="2d.layer.global-states.alpha.shadow-expected.html">
-<title>Canvas test: 2d.layer.global-states.alpha.shadow</title>
-<h1>2d.layer.global-states.alpha.shadow</h1>
-<p class="desc">Checks that layers correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script id='myWorker' type='text/worker'>
-  self.onmessage = function(e) {
-    const canvas = new OffscreenCanvas(200, 200);
-    const ctx = canvas.getContext('2d');
-
-    ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
-    var circle = new Path2D();
-    circle.arc(90, 90, 45, 0, 2 * Math.PI);
-    ctx.fill(circle);
-
-    ctx.globalAlpha = 0.5;
-    ctx.shadowOffsetX = -10;
-    ctx.shadowOffsetY = 10;
-    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
-    ctx.shadowBlur = 3;
-
-    ctx.beginLayer();
-
-    // Enable compositing in the layer to validate that draw calls in the layer
-    // won't individually composite with the background.
-    ctx.globalCompositeOperation = 'screen';
-
-    ctx.fillStyle = 'rgba(225, 0, 0, 1)';
-    ctx.fillRect(50, 50, 75, 50);
-    ctx.fillStyle = 'rgba(0, 255, 0, 1)';
-    ctx.fillRect(70, 70, 75, 50);
-
-    ctx.endLayer();
-
-    const bitmap = canvas.transferToImageBitmap();
-    self.postMessage(bitmap, bitmap);
-  };
-</script>
-<script>
-  const blob = new Blob([document.getElementById('myWorker').textContent]);
-  const worker = new Worker(URL.createObjectURL(blob));
-  worker.addEventListener('message', msg => {
-    const outputCtx = document.getElementById("canvas").getContext('2d');
-    outputCtx.drawImage(msg.data, 0, 0);
-    document.documentElement.classList.remove("reftest-wait");
-  });
-  worker.postMessage(null);
-</script>
-</html>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.w.html
deleted file mode 100644
index 694f31e208..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.alpha.w.html
+++ /dev/null
@@ -1,51 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<html class="reftest-wait">
-<link rel="match" href="2d.layer.global-states.alpha-expected.html">
-<title>Canvas test: 2d.layer.global-states.alpha</title>
-<h1>2d.layer.global-states.alpha</h1>
-<p class="desc">Checks that layers correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script id='myWorker' type='text/worker'>
-  self.onmessage = function(e) {
-    const canvas = new OffscreenCanvas(200, 200);
-    const ctx = canvas.getContext('2d');
-
-    ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
-    var circle = new Path2D();
-    circle.arc(90, 90, 45, 0, 2 * Math.PI);
-    ctx.fill(circle);
-
-    ctx.globalAlpha = 0.6;
-
-    ctx.beginLayer();
-
-    // Enable compositing in the layer to validate that draw calls in the layer
-    // won't individually composite with the background.
-    ctx.globalCompositeOperation = 'screen';
-
-    ctx.fillStyle = 'rgba(225, 0, 0, 1)';
-    ctx.fillRect(50, 50, 75, 50);
-    ctx.fillStyle = 'rgba(0, 255, 0, 1)';
-    ctx.fillRect(70, 70, 75, 50);
-
-    ctx.endLayer();
-
-    const bitmap = canvas.transferToImageBitmap();
-    self.postMessage(bitmap, bitmap);
-  };
-</script>
-<script>
-  const blob = new Blob([document.getElementById('myWorker').textContent]);
-  const worker = new Worker(URL.createObjectURL(blob));
-  worker.addEventListener('message', msg => {
-    const outputCtx = document.getElementById("canvas").getContext('2d');
-    outputCtx.drawImage(msg.data, 0, 0);
-    document.documentElement.classList.remove("reftest-wait");
-  });
-  worker.postMessage(null);
-</script>
-</html>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending-expected.html
deleted file mode 100644
index 33fdf46a28..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending-expected.html
+++ /dev/null
@@ -1,31 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>Canvas test: 2d.layer.global-states.blending</title>
-<h1>2d.layer.global-states.blending</h1>
-<p class="desc">Checks that layers correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
-  const canvas = document.getElementById("canvas");
-  const ctx = canvas.getContext('2d');
-
-  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
-  var circle = new Path2D();
-  circle.arc(90, 90, 45, 0, 2 * Math.PI);
-  ctx.fill(circle);
-
-  ctx.globalCompositeOperation = 'multiply';
-
-  canvas2 = document.createElement("canvas");
-  ctx2 = canvas2.getContext("2d");
-
-  ctx2.globalCompositeOperation = 'screen';
-  ctx2.fillStyle = 'rgba(225, 0, 0, 1)';
-  ctx2.fillRect(50, 50, 75, 50);
-  ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
-  ctx2.fillRect(70, 70, 75, 50);
-
-  ctx.drawImage(canvas2, 0, 0);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.html
deleted file mode 100644
index 6a36bb4ba1..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.html
+++ /dev/null
@@ -1,37 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<link rel="match" href="2d.layer.global-states.blending-expected.html">
-<title>Canvas test: 2d.layer.global-states.blending</title>
-<h1>2d.layer.global-states.blending</h1>
-<p class="desc">Checks that layers correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
-  const canvas = new OffscreenCanvas(200, 200);
-  const ctx = canvas.getContext('2d');
-
-  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
-  var circle = new Path2D();
-  circle.arc(90, 90, 45, 0, 2 * Math.PI);
-  ctx.fill(circle);
-
-  ctx.globalCompositeOperation = 'multiply';
-
-  ctx.beginLayer();
-
-  // Enable compositing in the layer to validate that draw calls in the layer
-  // won't individually composite with the background.
-  ctx.globalCompositeOperation = 'screen';
-
-  ctx.fillStyle = 'rgba(225, 0, 0, 1)';
-  ctx.fillRect(50, 50, 75, 50);
-  ctx.fillStyle = 'rgba(0, 255, 0, 1)';
-  ctx.fillRect(70, 70, 75, 50);
-
-  ctx.endLayer();
-
-  const outputCanvas = document.getElementById("canvas");
-  outputCanvas.getContext('2d').drawImage(canvas, 0, 0);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.no-shadow.no-transform-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.no-shadow.no-transform-expected.html
new file mode 100644
index 0000000000..c56f13f2fd
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.no-shadow.no-transform-expected.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.global-states.blending.no-shadow.no-transform</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.blending.no-shadow.no-transform</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas0");
+    const ctx = canvas.getContext('2d');
+
+    // No transform.
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    // No globalAlpha.
+    ctx.globalCompositeOperation = 'multiply';
+    // No shadow.
+
+    const canvas2 = document.createElement("canvas");
+    const ctx2 = canvas2.getContext("2d");
+
+    ctx2.globalCompositeOperation = 'screen';
+    ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx2.fillRect(10, 25, 40, 50);
+    ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx2.fillRect(30, 5, 50, 40);
+
+    ctx.drawImage(canvas2, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas1");
+    const ctx = canvas.getContext('2d');
+
+    // No transform.
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'multiply';
+    // No shadow.
+
+    const canvas2 = document.createElement("canvas");
+    const ctx2 = canvas2.getContext("2d");
+
+    ctx2.globalCompositeOperation = 'screen';
+    ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx2.fillRect(10, 25, 40, 50);
+    ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx2.fillRect(30, 5, 50, 40);
+
+    ctx.drawImage(canvas2, 0, 0);
+  </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.no-shadow.no-transform.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.no-shadow.no-transform.html
new file mode 100644
index 0000000000..1f8736e0e4
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.no-shadow.no-transform.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.blending.no-shadow.no-transform-expected.html">
+<title>Canvas test: 2d.layer.global-states.blending.no-shadow.no-transform</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.blending.no-shadow.no-transform</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    // No transform.
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    // No globalAlpha.
+    ctx.globalCompositeOperation = 'multiply';
+    // No shadow.
+
+    ctx.beginLayer();
+
+    // Enable compositing in the layer to validate that draw calls in the layer
+    // won't individually composite with the background.
+    ctx.globalCompositeOperation = 'screen';
+
+    ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx.fillRect(10, 25, 40, 50);
+    ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx.fillRect(30, 5, 50, 40);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas0");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    // No transform.
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'multiply';
+    // No shadow.
+
+    ctx.beginLayer();
+
+    // Enable compositing in the layer to validate that draw calls in the layer
+    // won't individually composite with the background.
+    ctx.globalCompositeOperation = 'screen';
+
+    ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx.fillRect(10, 25, 40, 50);
+    ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx.fillRect(30, 5, 50, 40);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas1");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.no-shadow.no-transform.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.no-shadow.no-transform.w.html
new file mode 100644
index 0000000000..2bd46eee66
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.no-shadow.no-transform.w.html
@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<html class="reftest-wait">
+<link rel="match" href="2d.layer.global-states.blending.no-shadow.no-transform-expected.html">
+<title>Canvas test: 2d.layer.global-states.blending.no-shadow.no-transform</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.blending.no-shadow.no-transform</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+<script>pending_tests = 2;</script>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker0" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      // No transform.
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      // No globalAlpha.
+      ctx.globalCompositeOperation = 'multiply';
+      // No shadow.
+
+      ctx.beginLayer();
+
+      // Enable compositing in the layer to validate that draw calls in the layer
+      // won't individually composite with the background.
+      ctx.globalCompositeOperation = 'screen';
+
+      ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+      ctx.fillRect(10, 25, 40, 50);
+      ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+      ctx.fillRect(30, 5, 50, 40);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker0').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas0');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker1" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      // No transform.
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      ctx.globalAlpha = 0.75;
+      ctx.globalCompositeOperation = 'multiply';
+      // No shadow.
+
+      ctx.beginLayer();
+
+      // Enable compositing in the layer to validate that draw calls in the layer
+      // won't individually composite with the background.
+      ctx.globalCompositeOperation = 'screen';
+
+      ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+      ctx.fillRect(10, 25, 40, 50);
+      ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+      ctx.fillRect(30, 5, 50, 40);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker1').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas1');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+</div>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.no-shadow.rotation-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.no-shadow.rotation-expected.html
new file mode 100644
index 0000000000..e5f8ba0db4
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.no-shadow.rotation-expected.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.global-states.blending.no-shadow.rotation</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.blending.no-shadow.rotation</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas0");
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 40);
+    ctx.rotate(Math.PI);
+    ctx.translate(-45, -45);
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    // No globalAlpha.
+    ctx.globalCompositeOperation = 'multiply';
+    // No shadow.
+
+    const canvas2 = document.createElement("canvas");
+    const ctx2 = canvas2.getContext("2d");
+
+    ctx2.globalCompositeOperation = 'screen';
+    ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx2.fillRect(10, 25, 40, 50);
+    ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx2.fillRect(30, 5, 50, 40);
+
+    ctx.drawImage(canvas2, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas1");
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 40);
+    ctx.rotate(Math.PI);
+    ctx.translate(-45, -45);
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'multiply';
+    // No shadow.
+
+    const canvas2 = document.createElement("canvas");
+    const ctx2 = canvas2.getContext("2d");
+
+    ctx2.globalCompositeOperation = 'screen';
+    ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx2.fillRect(10, 25, 40, 50);
+    ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx2.fillRect(30, 5, 50, 40);
+
+    ctx.drawImage(canvas2, 0, 0);
+  </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.no-shadow.rotation.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.no-shadow.rotation.html
new file mode 100644
index 0000000000..0470777988
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.no-shadow.rotation.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.blending.no-shadow.rotation-expected.html">
+<title>Canvas test: 2d.layer.global-states.blending.no-shadow.rotation</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.blending.no-shadow.rotation</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 40);
+    ctx.rotate(Math.PI);
+    ctx.translate(-45, -45);
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    // No globalAlpha.
+    ctx.globalCompositeOperation = 'multiply';
+    // No shadow.
+
+    ctx.beginLayer();
+
+    // Enable compositing in the layer to validate that draw calls in the layer
+    // won't individually composite with the background.
+    ctx.globalCompositeOperation = 'screen';
+
+    ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx.fillRect(10, 25, 40, 50);
+    ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx.fillRect(30, 5, 50, 40);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas0");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 40);
+    ctx.rotate(Math.PI);
+    ctx.translate(-45, -45);
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'multiply';
+    // No shadow.
+
+    ctx.beginLayer();
+
+    // Enable compositing in the layer to validate that draw calls in the layer
+    // won't individually composite with the background.
+    ctx.globalCompositeOperation = 'screen';
+
+    ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx.fillRect(10, 25, 40, 50);
+    ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx.fillRect(30, 5, 50, 40);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas1");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.no-shadow.rotation.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.no-shadow.rotation.w.html
new file mode 100644
index 0000000000..4d33b3a638
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.no-shadow.rotation.w.html
@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<html class="reftest-wait">
+<link rel="match" href="2d.layer.global-states.blending.no-shadow.rotation-expected.html">
+<title>Canvas test: 2d.layer.global-states.blending.no-shadow.rotation</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.blending.no-shadow.rotation</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+<script>pending_tests = 2;</script>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker0" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      ctx.translate(50, 40);
+      ctx.rotate(Math.PI);
+      ctx.translate(-45, -45);
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      // No globalAlpha.
+      ctx.globalCompositeOperation = 'multiply';
+      // No shadow.
+
+      ctx.beginLayer();
+
+      // Enable compositing in the layer to validate that draw calls in the layer
+      // won't individually composite with the background.
+      ctx.globalCompositeOperation = 'screen';
+
+      ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+      ctx.fillRect(10, 25, 40, 50);
+      ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+      ctx.fillRect(30, 5, 50, 40);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker0').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas0');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker1" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      ctx.translate(50, 40);
+      ctx.rotate(Math.PI);
+      ctx.translate(-45, -45);
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      ctx.globalAlpha = 0.75;
+      ctx.globalCompositeOperation = 'multiply';
+      // No shadow.
+
+      ctx.beginLayer();
+
+      // Enable compositing in the layer to validate that draw calls in the layer
+      // won't individually composite with the background.
+      ctx.globalCompositeOperation = 'screen';
+
+      ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+      ctx.fillRect(10, 25, 40, 50);
+      ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+      ctx.fillRect(30, 5, 50, 40);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker1').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas1');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+</div>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow-expected.html
deleted file mode 100644
index 6f969074f9..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow-expected.html
+++ /dev/null
@@ -1,35 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>Canvas test: 2d.layer.global-states.blending.shadow</title>
-<h1>2d.layer.global-states.blending.shadow</h1>
-<p class="desc">Checks that layers correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
-  const canvas = document.getElementById("canvas");
-  const ctx = canvas.getContext('2d');
-
-  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
-  var circle = new Path2D();
-  circle.arc(90, 90, 45, 0, 2 * Math.PI);
-  ctx.fill(circle);
-
-  ctx.globalCompositeOperation = 'multiply';
-  ctx.shadowOffsetX = -10;
-  ctx.shadowOffsetY = 10;
-  ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
-  ctx.shadowBlur = 3;
-
-  canvas2 = document.createElement("canvas");
-  ctx2 = canvas2.getContext("2d");
-
-  ctx2.globalCompositeOperation = 'screen';
-  ctx2.fillStyle = 'rgba(225, 0, 0, 1)';
-  ctx2.fillRect(50, 50, 75, 50);
-  ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
-  ctx2.fillRect(70, 70, 75, 50);
-
-  ctx.drawImage(canvas2, 0, 0);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.html
deleted file mode 100644
index 2e91f3d2d1..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.html
+++ /dev/null
@@ -1,41 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<link rel="match" href="2d.layer.global-states.blending.shadow-expected.html">
-<title>Canvas test: 2d.layer.global-states.blending.shadow</title>
-<h1>2d.layer.global-states.blending.shadow</h1>
-<p class="desc">Checks that layers correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
-  const canvas = new OffscreenCanvas(200, 200);
-  const ctx = canvas.getContext('2d');
-
-  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
-  var circle = new Path2D();
-  circle.arc(90, 90, 45, 0, 2 * Math.PI);
-  ctx.fill(circle);
-
-  ctx.globalCompositeOperation = 'multiply';
-  ctx.shadowOffsetX = -10;
-  ctx.shadowOffsetY = 10;
-  ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
-  ctx.shadowBlur = 3;
-
-  ctx.beginLayer();
-
-  // Enable compositing in the layer to validate that draw calls in the layer
-  // won't individually composite with the background.
-  ctx.globalCompositeOperation = 'screen';
-
-  ctx.fillStyle = 'rgba(225, 0, 0, 1)';
-  ctx.fillRect(50, 50, 75, 50);
-  ctx.fillStyle = 'rgba(0, 255, 0, 1)';
-  ctx.fillRect(70, 70, 75, 50);
-
-  ctx.endLayer();
-
-  const outputCanvas = document.getElementById("canvas");
-  outputCanvas.getContext('2d').drawImage(canvas, 0, 0);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.no-transform-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.no-transform-expected.html
new file mode 100644
index 0000000000..debbd430c4
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.no-transform-expected.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.global-states.blending.shadow.no-transform</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.blending.shadow.no-transform</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas0");
+    const ctx = canvas.getContext('2d');
+
+    // No transform.
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    // No globalAlpha.
+    ctx.globalCompositeOperation = 'multiply';
+    ctx.shadowOffsetX = -7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+    ctx.shadowBlur = 3;
+
+    const canvas2 = document.createElement("canvas");
+    const ctx2 = canvas2.getContext("2d");
+
+    ctx2.globalCompositeOperation = 'screen';
+    ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx2.fillRect(10, 25, 40, 50);
+    ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx2.fillRect(30, 5, 50, 40);
+
+    ctx.drawImage(canvas2, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas1");
+    const ctx = canvas.getContext('2d');
+
+    // No transform.
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'multiply';
+    ctx.shadowOffsetX = -7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+    ctx.shadowBlur = 3;
+
+    const canvas2 = document.createElement("canvas");
+    const ctx2 = canvas2.getContext("2d");
+
+    ctx2.globalCompositeOperation = 'screen';
+    ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx2.fillRect(10, 25, 40, 50);
+    ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx2.fillRect(30, 5, 50, 40);
+
+    ctx.drawImage(canvas2, 0, 0);
+  </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.no-transform.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.no-transform.html
new file mode 100644
index 0000000000..c6f0239c39
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.no-transform.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.blending.shadow.no-transform-expected.html">
+<title>Canvas test: 2d.layer.global-states.blending.shadow.no-transform</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.blending.shadow.no-transform</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    // No transform.
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    // No globalAlpha.
+    ctx.globalCompositeOperation = 'multiply';
+    ctx.shadowOffsetX = -7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+    ctx.shadowBlur = 3;
+
+    ctx.beginLayer();
+
+    // Enable compositing in the layer to validate that draw calls in the layer
+    // won't individually composite with the background.
+    ctx.globalCompositeOperation = 'screen';
+
+    ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx.fillRect(10, 25, 40, 50);
+    ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx.fillRect(30, 5, 50, 40);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas0");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    // No transform.
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'multiply';
+    ctx.shadowOffsetX = -7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+    ctx.shadowBlur = 3;
+
+    ctx.beginLayer();
+
+    // Enable compositing in the layer to validate that draw calls in the layer
+    // won't individually composite with the background.
+    ctx.globalCompositeOperation = 'screen';
+
+    ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx.fillRect(10, 25, 40, 50);
+    ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx.fillRect(30, 5, 50, 40);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas1");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.no-transform.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.no-transform.w.html
new file mode 100644
index 0000000000..0be246ebfb
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.no-transform.w.html
@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<html class="reftest-wait">
+<link rel="match" href="2d.layer.global-states.blending.shadow.no-transform-expected.html">
+<title>Canvas test: 2d.layer.global-states.blending.shadow.no-transform</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.blending.shadow.no-transform</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+<script>pending_tests = 2;</script>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker0" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      // No transform.
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      // No globalAlpha.
+      ctx.globalCompositeOperation = 'multiply';
+      ctx.shadowOffsetX = -7;
+      ctx.shadowOffsetY = 7;
+      ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+      ctx.shadowBlur = 3;
+
+      ctx.beginLayer();
+
+      // Enable compositing in the layer to validate that draw calls in the layer
+      // won't individually composite with the background.
+      ctx.globalCompositeOperation = 'screen';
+
+      ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+      ctx.fillRect(10, 25, 40, 50);
+      ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+      ctx.fillRect(30, 5, 50, 40);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker0').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas0');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker1" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      // No transform.
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      ctx.globalAlpha = 0.75;
+      ctx.globalCompositeOperation = 'multiply';
+      ctx.shadowOffsetX = -7;
+      ctx.shadowOffsetY = 7;
+      ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+      ctx.shadowBlur = 3;
+
+      ctx.beginLayer();
+
+      // Enable compositing in the layer to validate that draw calls in the layer
+      // won't individually composite with the background.
+      ctx.globalCompositeOperation = 'screen';
+
+      ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+      ctx.fillRect(10, 25, 40, 50);
+      ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+      ctx.fillRect(30, 5, 50, 40);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker1').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas1');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+</div>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.rotation-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.rotation-expected.html
new file mode 100644
index 0000000000..75a55e591b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.rotation-expected.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.global-states.blending.shadow.rotation</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.blending.shadow.rotation</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas0");
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 40);
+    ctx.rotate(Math.PI);
+    ctx.translate(-45, -45);
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    // No globalAlpha.
+    ctx.globalCompositeOperation = 'multiply';
+    ctx.shadowOffsetX = -7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+    ctx.shadowBlur = 3;
+
+    const canvas2 = document.createElement("canvas");
+    const ctx2 = canvas2.getContext("2d");
+
+    ctx2.globalCompositeOperation = 'screen';
+    ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx2.fillRect(10, 25, 40, 50);
+    ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx2.fillRect(30, 5, 50, 40);
+
+    ctx.drawImage(canvas2, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas1");
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 40);
+    ctx.rotate(Math.PI);
+    ctx.translate(-45, -45);
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'multiply';
+    ctx.shadowOffsetX = -7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+    ctx.shadowBlur = 3;
+
+    const canvas2 = document.createElement("canvas");
+    const ctx2 = canvas2.getContext("2d");
+
+    ctx2.globalCompositeOperation = 'screen';
+    ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx2.fillRect(10, 25, 40, 50);
+    ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx2.fillRect(30, 5, 50, 40);
+
+    ctx.drawImage(canvas2, 0, 0);
+  </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.rotation.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.rotation.html
new file mode 100644
index 0000000000..aac9d86e66
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.rotation.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.blending.shadow.rotation-expected.html">
+<title>Canvas test: 2d.layer.global-states.blending.shadow.rotation</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.blending.shadow.rotation</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 40);
+    ctx.rotate(Math.PI);
+    ctx.translate(-45, -45);
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    // No globalAlpha.
+    ctx.globalCompositeOperation = 'multiply';
+    ctx.shadowOffsetX = -7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+    ctx.shadowBlur = 3;
+
+    ctx.beginLayer();
+
+    // Enable compositing in the layer to validate that draw calls in the layer
+    // won't individually composite with the background.
+    ctx.globalCompositeOperation = 'screen';
+
+    ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx.fillRect(10, 25, 40, 50);
+    ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx.fillRect(30, 5, 50, 40);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas0");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 40);
+    ctx.rotate(Math.PI);
+    ctx.translate(-45, -45);
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'multiply';
+    ctx.shadowOffsetX = -7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+    ctx.shadowBlur = 3;
+
+    ctx.beginLayer();
+
+    // Enable compositing in the layer to validate that draw calls in the layer
+    // won't individually composite with the background.
+    ctx.globalCompositeOperation = 'screen';
+
+    ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx.fillRect(10, 25, 40, 50);
+    ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx.fillRect(30, 5, 50, 40);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas1");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.rotation.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.rotation.w.html
new file mode 100644
index 0000000000..86067b7299
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.rotation.w.html
@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<html class="reftest-wait">
+<link rel="match" href="2d.layer.global-states.blending.shadow.rotation-expected.html">
+<title>Canvas test: 2d.layer.global-states.blending.shadow.rotation</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.blending.shadow.rotation</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+<script>pending_tests = 2;</script>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker0" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      ctx.translate(50, 40);
+      ctx.rotate(Math.PI);
+      ctx.translate(-45, -45);
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      // No globalAlpha.
+      ctx.globalCompositeOperation = 'multiply';
+      ctx.shadowOffsetX = -7;
+      ctx.shadowOffsetY = 7;
+      ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+      ctx.shadowBlur = 3;
+
+      ctx.beginLayer();
+
+      // Enable compositing in the layer to validate that draw calls in the layer
+      // won't individually composite with the background.
+      ctx.globalCompositeOperation = 'screen';
+
+      ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+      ctx.fillRect(10, 25, 40, 50);
+      ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+      ctx.fillRect(30, 5, 50, 40);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker0').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas0');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker1" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      ctx.translate(50, 40);
+      ctx.rotate(Math.PI);
+      ctx.translate(-45, -45);
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      ctx.globalAlpha = 0.75;
+      ctx.globalCompositeOperation = 'multiply';
+      ctx.shadowOffsetX = -7;
+      ctx.shadowOffsetY = 7;
+      ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+      ctx.shadowBlur = 3;
+
+      ctx.beginLayer();
+
+      // Enable compositing in the layer to validate that draw calls in the layer
+      // won't individually composite with the background.
+      ctx.globalCompositeOperation = 'screen';
+
+      ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+      ctx.fillRect(10, 25, 40, 50);
+      ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+      ctx.fillRect(30, 5, 50, 40);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker1').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas1');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+</div>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.w.html
deleted file mode 100644
index d8e20d0479..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.w.html
+++ /dev/null
@@ -1,55 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<html class="reftest-wait">
-<link rel="match" href="2d.layer.global-states.blending.shadow-expected.html">
-<title>Canvas test: 2d.layer.global-states.blending.shadow</title>
-<h1>2d.layer.global-states.blending.shadow</h1>
-<p class="desc">Checks that layers correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script id='myWorker' type='text/worker'>
-  self.onmessage = function(e) {
-    const canvas = new OffscreenCanvas(200, 200);
-    const ctx = canvas.getContext('2d');
-
-    ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
-    var circle = new Path2D();
-    circle.arc(90, 90, 45, 0, 2 * Math.PI);
-    ctx.fill(circle);
-
-    ctx.globalCompositeOperation = 'multiply';
-    ctx.shadowOffsetX = -10;
-    ctx.shadowOffsetY = 10;
-    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
-    ctx.shadowBlur = 3;
-
-    ctx.beginLayer();
-
-    // Enable compositing in the layer to validate that draw calls in the layer
-    // won't individually composite with the background.
-    ctx.globalCompositeOperation = 'screen';
-
-    ctx.fillStyle = 'rgba(225, 0, 0, 1)';
-    ctx.fillRect(50, 50, 75, 50);
-    ctx.fillStyle = 'rgba(0, 255, 0, 1)';
-    ctx.fillRect(70, 70, 75, 50);
-
-    ctx.endLayer();
-
-    const bitmap = canvas.transferToImageBitmap();
-    self.postMessage(bitmap, bitmap);
-  };
-</script>
-<script>
-  const blob = new Blob([document.getElementById('myWorker').textContent]);
-  const worker = new Worker(URL.createObjectURL(blob));
-  worker.addEventListener('message', msg => {
-    const outputCtx = document.getElementById("canvas").getContext('2d');
-    outputCtx.drawImage(msg.data, 0, 0);
-    document.documentElement.classList.remove("reftest-wait");
-  });
-  worker.postMessage(null);
-</script>
-</html>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.w.html
deleted file mode 100644
index 8964e97713..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.blending.w.html
+++ /dev/null
@@ -1,51 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<html class="reftest-wait">
-<link rel="match" href="2d.layer.global-states.blending-expected.html">
-<title>Canvas test: 2d.layer.global-states.blending</title>
-<h1>2d.layer.global-states.blending</h1>
-<p class="desc">Checks that layers correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script id='myWorker' type='text/worker'>
-  self.onmessage = function(e) {
-    const canvas = new OffscreenCanvas(200, 200);
-    const ctx = canvas.getContext('2d');
-
-    ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
-    var circle = new Path2D();
-    circle.arc(90, 90, 45, 0, 2 * Math.PI);
-    ctx.fill(circle);
-
-    ctx.globalCompositeOperation = 'multiply';
-
-    ctx.beginLayer();
-
-    // Enable compositing in the layer to validate that draw calls in the layer
-    // won't individually composite with the background.
-    ctx.globalCompositeOperation = 'screen';
-
-    ctx.fillStyle = 'rgba(225, 0, 0, 1)';
-    ctx.fillRect(50, 50, 75, 50);
-    ctx.fillStyle = 'rgba(0, 255, 0, 1)';
-    ctx.fillRect(70, 70, 75, 50);
-
-    ctx.endLayer();
-
-    const bitmap = canvas.transferToImageBitmap();
-    self.postMessage(bitmap, bitmap);
-  };
-</script>
-<script>
-  const blob = new Blob([document.getElementById('myWorker').textContent]);
-  const worker = new Worker(URL.createObjectURL(blob));
-  worker.addEventListener('message', msg => {
-    const outputCtx = document.getElementById("canvas").getContext('2d');
-    outputCtx.drawImage(msg.data, 0, 0);
-    document.documentElement.classList.remove("reftest-wait");
-  });
-  worker.postMessage(null);
-</script>
-</html>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite-expected.html
deleted file mode 100644
index ed7669c4cf..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite-expected.html
+++ /dev/null
@@ -1,31 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>Canvas test: 2d.layer.global-states.composite</title>
-<h1>2d.layer.global-states.composite</h1>
-<p class="desc">Checks that layers correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
-  const canvas = document.getElementById("canvas");
-  const ctx = canvas.getContext('2d');
-
-  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
-  var circle = new Path2D();
-  circle.arc(90, 90, 45, 0, 2 * Math.PI);
-  ctx.fill(circle);
-
-  ctx.globalCompositeOperation = 'source-in';
-
-  canvas2 = document.createElement("canvas");
-  ctx2 = canvas2.getContext("2d");
-
-  ctx2.globalCompositeOperation = 'screen';
-  ctx2.fillStyle = 'rgba(225, 0, 0, 1)';
-  ctx2.fillRect(50, 50, 75, 50);
-  ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
-  ctx2.fillRect(70, 70, 75, 50);
-
-  ctx.drawImage(canvas2, 0, 0);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.html
deleted file mode 100644
index 84fb4b3d95..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.html
+++ /dev/null
@@ -1,37 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<link rel="match" href="2d.layer.global-states.composite-expected.html">
-<title>Canvas test: 2d.layer.global-states.composite</title>
-<h1>2d.layer.global-states.composite</h1>
-<p class="desc">Checks that layers correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
-  const canvas = new OffscreenCanvas(200, 200);
-  const ctx = canvas.getContext('2d');
-
-  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
-  var circle = new Path2D();
-  circle.arc(90, 90, 45, 0, 2 * Math.PI);
-  ctx.fill(circle);
-
-  ctx.globalCompositeOperation = 'source-in';
-
-  ctx.beginLayer();
-
-  // Enable compositing in the layer to validate that draw calls in the layer
-  // won't individually composite with the background.
-  ctx.globalCompositeOperation = 'screen';
-
-  ctx.fillStyle = 'rgba(225, 0, 0, 1)';
-  ctx.fillRect(50, 50, 75, 50);
-  ctx.fillStyle = 'rgba(0, 255, 0, 1)';
-  ctx.fillRect(70, 70, 75, 50);
-
-  ctx.endLayer();
-
-  const outputCanvas = document.getElementById("canvas");
-  outputCanvas.getContext('2d').drawImage(canvas, 0, 0);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.no-shadow.no-transform-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.no-shadow.no-transform-expected.html
new file mode 100644
index 0000000000..cf87559582
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.no-shadow.no-transform-expected.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.global-states.composite.no-shadow.no-transform</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.composite.no-shadow.no-transform</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas0");
+    const ctx = canvas.getContext('2d');
+
+    // No transform.
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    // No globalAlpha.
+    ctx.globalCompositeOperation = 'source-in';
+    // No shadow.
+
+    const canvas2 = document.createElement("canvas");
+    const ctx2 = canvas2.getContext("2d");
+
+    ctx2.globalCompositeOperation = 'screen';
+    ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx2.fillRect(10, 25, 40, 50);
+    ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx2.fillRect(30, 5, 50, 40);
+
+    ctx.drawImage(canvas2, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas1");
+    const ctx = canvas.getContext('2d');
+
+    // No transform.
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'source-in';
+    // No shadow.
+
+    const canvas2 = document.createElement("canvas");
+    const ctx2 = canvas2.getContext("2d");
+
+    ctx2.globalCompositeOperation = 'screen';
+    ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx2.fillRect(10, 25, 40, 50);
+    ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx2.fillRect(30, 5, 50, 40);
+
+    ctx.drawImage(canvas2, 0, 0);
+  </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.no-shadow.no-transform.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.no-shadow.no-transform.html
new file mode 100644
index 0000000000..69dc916d7d
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.no-shadow.no-transform.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.composite.no-shadow.no-transform-expected.html">
+<title>Canvas test: 2d.layer.global-states.composite.no-shadow.no-transform</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.composite.no-shadow.no-transform</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    // No transform.
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    // No globalAlpha.
+    ctx.globalCompositeOperation = 'source-in';
+    // No shadow.
+
+    ctx.beginLayer();
+
+    // Enable compositing in the layer to validate that draw calls in the layer
+    // won't individually composite with the background.
+    ctx.globalCompositeOperation = 'screen';
+
+    ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx.fillRect(10, 25, 40, 50);
+    ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx.fillRect(30, 5, 50, 40);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas0");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    // No transform.
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'source-in';
+    // No shadow.
+
+    ctx.beginLayer();
+
+    // Enable compositing in the layer to validate that draw calls in the layer
+    // won't individually composite with the background.
+    ctx.globalCompositeOperation = 'screen';
+
+    ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx.fillRect(10, 25, 40, 50);
+    ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx.fillRect(30, 5, 50, 40);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas1");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.no-shadow.no-transform.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.no-shadow.no-transform.w.html
new file mode 100644
index 0000000000..aa358b57bc
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.no-shadow.no-transform.w.html
@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<html class="reftest-wait">
+<link rel="match" href="2d.layer.global-states.composite.no-shadow.no-transform-expected.html">
+<title>Canvas test: 2d.layer.global-states.composite.no-shadow.no-transform</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.composite.no-shadow.no-transform</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+<script>pending_tests = 2;</script>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker0" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      // No transform.
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      // No globalAlpha.
+      ctx.globalCompositeOperation = 'source-in';
+      // No shadow.
+
+      ctx.beginLayer();
+
+      // Enable compositing in the layer to validate that draw calls in the layer
+      // won't individually composite with the background.
+      ctx.globalCompositeOperation = 'screen';
+
+      ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+      ctx.fillRect(10, 25, 40, 50);
+      ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+      ctx.fillRect(30, 5, 50, 40);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker0').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas0');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker1" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      // No transform.
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      ctx.globalAlpha = 0.75;
+      ctx.globalCompositeOperation = 'source-in';
+      // No shadow.
+
+      ctx.beginLayer();
+
+      // Enable compositing in the layer to validate that draw calls in the layer
+      // won't individually composite with the background.
+      ctx.globalCompositeOperation = 'screen';
+
+      ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+      ctx.fillRect(10, 25, 40, 50);
+      ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+      ctx.fillRect(30, 5, 50, 40);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker1').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas1');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+</div>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.no-shadow.rotation-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.no-shadow.rotation-expected.html
new file mode 100644
index 0000000000..2f9bb208fb
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.no-shadow.rotation-expected.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.global-states.composite.no-shadow.rotation</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.composite.no-shadow.rotation</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas0");
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 40);
+    ctx.rotate(Math.PI);
+    ctx.translate(-45, -45);
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    // No globalAlpha.
+    ctx.globalCompositeOperation = 'source-in';
+    // No shadow.
+
+    const canvas2 = document.createElement("canvas");
+    const ctx2 = canvas2.getContext("2d");
+
+    ctx2.globalCompositeOperation = 'screen';
+    ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx2.fillRect(10, 25, 40, 50);
+    ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx2.fillRect(30, 5, 50, 40);
+
+    ctx.drawImage(canvas2, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas1");
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 40);
+    ctx.rotate(Math.PI);
+    ctx.translate(-45, -45);
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'source-in';
+    // No shadow.
+
+    const canvas2 = document.createElement("canvas");
+    const ctx2 = canvas2.getContext("2d");
+
+    ctx2.globalCompositeOperation = 'screen';
+    ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx2.fillRect(10, 25, 40, 50);
+    ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx2.fillRect(30, 5, 50, 40);
+
+    ctx.drawImage(canvas2, 0, 0);
+  </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.no-shadow.rotation.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.no-shadow.rotation.html
new file mode 100644
index 0000000000..d0d08f9835
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.no-shadow.rotation.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.composite.no-shadow.rotation-expected.html">
+<title>Canvas test: 2d.layer.global-states.composite.no-shadow.rotation</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.composite.no-shadow.rotation</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 40);
+    ctx.rotate(Math.PI);
+    ctx.translate(-45, -45);
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    // No globalAlpha.
+    ctx.globalCompositeOperation = 'source-in';
+    // No shadow.
+
+    ctx.beginLayer();
+
+    // Enable compositing in the layer to validate that draw calls in the layer
+    // won't individually composite with the background.
+    ctx.globalCompositeOperation = 'screen';
+
+    ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx.fillRect(10, 25, 40, 50);
+    ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx.fillRect(30, 5, 50, 40);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas0");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 40);
+    ctx.rotate(Math.PI);
+    ctx.translate(-45, -45);
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'source-in';
+    // No shadow.
+
+    ctx.beginLayer();
+
+    // Enable compositing in the layer to validate that draw calls in the layer
+    // won't individually composite with the background.
+    ctx.globalCompositeOperation = 'screen';
+
+    ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx.fillRect(10, 25, 40, 50);
+    ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx.fillRect(30, 5, 50, 40);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas1");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.no-shadow.rotation.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.no-shadow.rotation.w.html
new file mode 100644
index 0000000000..5e2cd0783d
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.no-shadow.rotation.w.html
@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<html class="reftest-wait">
+<link rel="match" href="2d.layer.global-states.composite.no-shadow.rotation-expected.html">
+<title>Canvas test: 2d.layer.global-states.composite.no-shadow.rotation</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.composite.no-shadow.rotation</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+<script>pending_tests = 2;</script>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker0" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      ctx.translate(50, 40);
+      ctx.rotate(Math.PI);
+      ctx.translate(-45, -45);
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      // No globalAlpha.
+      ctx.globalCompositeOperation = 'source-in';
+      // No shadow.
+
+      ctx.beginLayer();
+
+      // Enable compositing in the layer to validate that draw calls in the layer
+      // won't individually composite with the background.
+      ctx.globalCompositeOperation = 'screen';
+
+      ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+      ctx.fillRect(10, 25, 40, 50);
+      ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+      ctx.fillRect(30, 5, 50, 40);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker0').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas0');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker1" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      ctx.translate(50, 40);
+      ctx.rotate(Math.PI);
+      ctx.translate(-45, -45);
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      ctx.globalAlpha = 0.75;
+      ctx.globalCompositeOperation = 'source-in';
+      // No shadow.
+
+      ctx.beginLayer();
+
+      // Enable compositing in the layer to validate that draw calls in the layer
+      // won't individually composite with the background.
+      ctx.globalCompositeOperation = 'screen';
+
+      ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+      ctx.fillRect(10, 25, 40, 50);
+      ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+      ctx.fillRect(30, 5, 50, 40);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker1').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas1');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+</div>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow-expected.html
deleted file mode 100644
index b687c27f47..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow-expected.html
+++ /dev/null
@@ -1,35 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>Canvas test: 2d.layer.global-states.composite.shadow</title>
-<h1>2d.layer.global-states.composite.shadow</h1>
-<p class="desc">Checks that layers correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
-  const canvas = document.getElementById("canvas");
-  const ctx = canvas.getContext('2d');
-
-  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
-  var circle = new Path2D();
-  circle.arc(90, 90, 45, 0, 2 * Math.PI);
-  ctx.fill(circle);
-
-  ctx.globalCompositeOperation = 'source-in';
-  ctx.shadowOffsetX = -10;
-  ctx.shadowOffsetY = 10;
-  ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
-  ctx.shadowBlur = 3;
-
-  canvas2 = document.createElement("canvas");
-  ctx2 = canvas2.getContext("2d");
-
-  ctx2.globalCompositeOperation = 'screen';
-  ctx2.fillStyle = 'rgba(225, 0, 0, 1)';
-  ctx2.fillRect(50, 50, 75, 50);
-  ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
-  ctx2.fillRect(70, 70, 75, 50);
-
-  ctx.drawImage(canvas2, 0, 0);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.html
deleted file mode 100644
index 1e3ab4d6a0..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.html
+++ /dev/null
@@ -1,41 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<link rel="match" href="2d.layer.global-states.composite.shadow-expected.html">
-<title>Canvas test: 2d.layer.global-states.composite.shadow</title>
-<h1>2d.layer.global-states.composite.shadow</h1>
-<p class="desc">Checks that layers correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
-  const canvas = new OffscreenCanvas(200, 200);
-  const ctx = canvas.getContext('2d');
-
-  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
-  var circle = new Path2D();
-  circle.arc(90, 90, 45, 0, 2 * Math.PI);
-  ctx.fill(circle);
-
-  ctx.globalCompositeOperation = 'source-in';
-  ctx.shadowOffsetX = -10;
-  ctx.shadowOffsetY = 10;
-  ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
-  ctx.shadowBlur = 3;
-
-  ctx.beginLayer();
-
-  // Enable compositing in the layer to validate that draw calls in the layer
-  // won't individually composite with the background.
-  ctx.globalCompositeOperation = 'screen';
-
-  ctx.fillStyle = 'rgba(225, 0, 0, 1)';
-  ctx.fillRect(50, 50, 75, 50);
-  ctx.fillStyle = 'rgba(0, 255, 0, 1)';
-  ctx.fillRect(70, 70, 75, 50);
-
-  ctx.endLayer();
-
-  const outputCanvas = document.getElementById("canvas");
-  outputCanvas.getContext('2d').drawImage(canvas, 0, 0);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.no-transform-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.no-transform-expected.html
new file mode 100644
index 0000000000..2b4436806a
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.no-transform-expected.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.global-states.composite.shadow.no-transform</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.composite.shadow.no-transform</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas0");
+    const ctx = canvas.getContext('2d');
+
+    // No transform.
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    // No globalAlpha.
+    ctx.globalCompositeOperation = 'source-in';
+    ctx.shadowOffsetX = -7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+    ctx.shadowBlur = 3;
+
+    const canvas2 = document.createElement("canvas");
+    const ctx2 = canvas2.getContext("2d");
+
+    ctx2.globalCompositeOperation = 'screen';
+    ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx2.fillRect(10, 25, 40, 50);
+    ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx2.fillRect(30, 5, 50, 40);
+
+    ctx.drawImage(canvas2, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas1");
+    const ctx = canvas.getContext('2d');
+
+    // No transform.
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'source-in';
+    ctx.shadowOffsetX = -7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+    ctx.shadowBlur = 3;
+
+    const canvas2 = document.createElement("canvas");
+    const ctx2 = canvas2.getContext("2d");
+
+    ctx2.globalCompositeOperation = 'screen';
+    ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx2.fillRect(10, 25, 40, 50);
+    ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx2.fillRect(30, 5, 50, 40);
+
+    ctx.drawImage(canvas2, 0, 0);
+  </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.no-transform.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.no-transform.html
new file mode 100644
index 0000000000..8b79eba128
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.no-transform.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.composite.shadow.no-transform-expected.html">
+<title>Canvas test: 2d.layer.global-states.composite.shadow.no-transform</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.composite.shadow.no-transform</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    // No transform.
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    // No globalAlpha.
+    ctx.globalCompositeOperation = 'source-in';
+    ctx.shadowOffsetX = -7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+    ctx.shadowBlur = 3;
+
+    ctx.beginLayer();
+
+    // Enable compositing in the layer to validate that draw calls in the layer
+    // won't individually composite with the background.
+    ctx.globalCompositeOperation = 'screen';
+
+    ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx.fillRect(10, 25, 40, 50);
+    ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx.fillRect(30, 5, 50, 40);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas0");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    // No transform.
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'source-in';
+    ctx.shadowOffsetX = -7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+    ctx.shadowBlur = 3;
+
+    ctx.beginLayer();
+
+    // Enable compositing in the layer to validate that draw calls in the layer
+    // won't individually composite with the background.
+    ctx.globalCompositeOperation = 'screen';
+
+    ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx.fillRect(10, 25, 40, 50);
+    ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx.fillRect(30, 5, 50, 40);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas1");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.no-transform.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.no-transform.w.html
new file mode 100644
index 0000000000..47f2df391f
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.no-transform.w.html
@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<html class="reftest-wait">
+<link rel="match" href="2d.layer.global-states.composite.shadow.no-transform-expected.html">
+<title>Canvas test: 2d.layer.global-states.composite.shadow.no-transform</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.composite.shadow.no-transform</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+<script>pending_tests = 2;</script>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker0" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      // No transform.
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      // No globalAlpha.
+      ctx.globalCompositeOperation = 'source-in';
+      ctx.shadowOffsetX = -7;
+      ctx.shadowOffsetY = 7;
+      ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+      ctx.shadowBlur = 3;
+
+      ctx.beginLayer();
+
+      // Enable compositing in the layer to validate that draw calls in the layer
+      // won't individually composite with the background.
+      ctx.globalCompositeOperation = 'screen';
+
+      ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+      ctx.fillRect(10, 25, 40, 50);
+      ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+      ctx.fillRect(30, 5, 50, 40);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker0').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas0');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker1" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      // No transform.
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      ctx.globalAlpha = 0.75;
+      ctx.globalCompositeOperation = 'source-in';
+      ctx.shadowOffsetX = -7;
+      ctx.shadowOffsetY = 7;
+      ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+      ctx.shadowBlur = 3;
+
+      ctx.beginLayer();
+
+      // Enable compositing in the layer to validate that draw calls in the layer
+      // won't individually composite with the background.
+      ctx.globalCompositeOperation = 'screen';
+
+      ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+      ctx.fillRect(10, 25, 40, 50);
+      ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+      ctx.fillRect(30, 5, 50, 40);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker1').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas1');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+</div>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.rotation-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.rotation-expected.html
new file mode 100644
index 0000000000..da144975a5
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.rotation-expected.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.global-states.composite.shadow.rotation</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.composite.shadow.rotation</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas0");
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 40);
+    ctx.rotate(Math.PI);
+    ctx.translate(-45, -45);
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    // No globalAlpha.
+    ctx.globalCompositeOperation = 'source-in';
+    ctx.shadowOffsetX = -7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+    ctx.shadowBlur = 3;
+
+    const canvas2 = document.createElement("canvas");
+    const ctx2 = canvas2.getContext("2d");
+
+    ctx2.globalCompositeOperation = 'screen';
+    ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx2.fillRect(10, 25, 40, 50);
+    ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx2.fillRect(30, 5, 50, 40);
+
+    ctx.drawImage(canvas2, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas1");
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 40);
+    ctx.rotate(Math.PI);
+    ctx.translate(-45, -45);
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'source-in';
+    ctx.shadowOffsetX = -7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+    ctx.shadowBlur = 3;
+
+    const canvas2 = document.createElement("canvas");
+    const ctx2 = canvas2.getContext("2d");
+
+    ctx2.globalCompositeOperation = 'screen';
+    ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx2.fillRect(10, 25, 40, 50);
+    ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx2.fillRect(30, 5, 50, 40);
+
+    ctx.drawImage(canvas2, 0, 0);
+  </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.rotation.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.rotation.html
new file mode 100644
index 0000000000..632d390986
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.rotation.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.composite.shadow.rotation-expected.html">
+<title>Canvas test: 2d.layer.global-states.composite.shadow.rotation</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.composite.shadow.rotation</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 40);
+    ctx.rotate(Math.PI);
+    ctx.translate(-45, -45);
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    // No globalAlpha.
+    ctx.globalCompositeOperation = 'source-in';
+    ctx.shadowOffsetX = -7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+    ctx.shadowBlur = 3;
+
+    ctx.beginLayer();
+
+    // Enable compositing in the layer to validate that draw calls in the layer
+    // won't individually composite with the background.
+    ctx.globalCompositeOperation = 'screen';
+
+    ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx.fillRect(10, 25, 40, 50);
+    ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx.fillRect(30, 5, 50, 40);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas0");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 40);
+    ctx.rotate(Math.PI);
+    ctx.translate(-45, -45);
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'source-in';
+    ctx.shadowOffsetX = -7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+    ctx.shadowBlur = 3;
+
+    ctx.beginLayer();
+
+    // Enable compositing in the layer to validate that draw calls in the layer
+    // won't individually composite with the background.
+    ctx.globalCompositeOperation = 'screen';
+
+    ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx.fillRect(10, 25, 40, 50);
+    ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx.fillRect(30, 5, 50, 40);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas1");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.rotation.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.rotation.w.html
new file mode 100644
index 0000000000..dde0d8bec0
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.rotation.w.html
@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<html class="reftest-wait">
+<link rel="match" href="2d.layer.global-states.composite.shadow.rotation-expected.html">
+<title>Canvas test: 2d.layer.global-states.composite.shadow.rotation</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.composite.shadow.rotation</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+<script>pending_tests = 2;</script>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker0" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      ctx.translate(50, 40);
+      ctx.rotate(Math.PI);
+      ctx.translate(-45, -45);
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      // No globalAlpha.
+      ctx.globalCompositeOperation = 'source-in';
+      ctx.shadowOffsetX = -7;
+      ctx.shadowOffsetY = 7;
+      ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+      ctx.shadowBlur = 3;
+
+      ctx.beginLayer();
+
+      // Enable compositing in the layer to validate that draw calls in the layer
+      // won't individually composite with the background.
+      ctx.globalCompositeOperation = 'screen';
+
+      ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+      ctx.fillRect(10, 25, 40, 50);
+      ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+      ctx.fillRect(30, 5, 50, 40);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker0').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas0');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker1" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      ctx.translate(50, 40);
+      ctx.rotate(Math.PI);
+      ctx.translate(-45, -45);
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      ctx.globalAlpha = 0.75;
+      ctx.globalCompositeOperation = 'source-in';
+      ctx.shadowOffsetX = -7;
+      ctx.shadowOffsetY = 7;
+      ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+      ctx.shadowBlur = 3;
+
+      ctx.beginLayer();
+
+      // Enable compositing in the layer to validate that draw calls in the layer
+      // won't individually composite with the background.
+      ctx.globalCompositeOperation = 'screen';
+
+      ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+      ctx.fillRect(10, 25, 40, 50);
+      ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+      ctx.fillRect(30, 5, 50, 40);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker1').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas1');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+</div>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.w.html
deleted file mode 100644
index 7dfb70148b..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.w.html
+++ /dev/null
@@ -1,55 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<html class="reftest-wait">
-<link rel="match" href="2d.layer.global-states.composite.shadow-expected.html">
-<title>Canvas test: 2d.layer.global-states.composite.shadow</title>
-<h1>2d.layer.global-states.composite.shadow</h1>
-<p class="desc">Checks that layers correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script id='myWorker' type='text/worker'>
-  self.onmessage = function(e) {
-    const canvas = new OffscreenCanvas(200, 200);
-    const ctx = canvas.getContext('2d');
-
-    ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
-    var circle = new Path2D();
-    circle.arc(90, 90, 45, 0, 2 * Math.PI);
-    ctx.fill(circle);
-
-    ctx.globalCompositeOperation = 'source-in';
-    ctx.shadowOffsetX = -10;
-    ctx.shadowOffsetY = 10;
-    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
-    ctx.shadowBlur = 3;
-
-    ctx.beginLayer();
-
-    // Enable compositing in the layer to validate that draw calls in the layer
-    // won't individually composite with the background.
-    ctx.globalCompositeOperation = 'screen';
-
-    ctx.fillStyle = 'rgba(225, 0, 0, 1)';
-    ctx.fillRect(50, 50, 75, 50);
-    ctx.fillStyle = 'rgba(0, 255, 0, 1)';
-    ctx.fillRect(70, 70, 75, 50);
-
-    ctx.endLayer();
-
-    const bitmap = canvas.transferToImageBitmap();
-    self.postMessage(bitmap, bitmap);
-  };
-</script>
-<script>
-  const blob = new Blob([document.getElementById('myWorker').textContent]);
-  const worker = new Worker(URL.createObjectURL(blob));
-  worker.addEventListener('message', msg => {
-    const outputCtx = document.getElementById("canvas").getContext('2d');
-    outputCtx.drawImage(msg.data, 0, 0);
-    document.documentElement.classList.remove("reftest-wait");
-  });
-  worker.postMessage(null);
-</script>
-</html>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.w.html
deleted file mode 100644
index b695871fcd..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.composite.w.html
+++ /dev/null
@@ -1,51 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<html class="reftest-wait">
-<link rel="match" href="2d.layer.global-states.composite-expected.html">
-<title>Canvas test: 2d.layer.global-states.composite</title>
-<h1>2d.layer.global-states.composite</h1>
-<p class="desc">Checks that layers correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script id='myWorker' type='text/worker'>
-  self.onmessage = function(e) {
-    const canvas = new OffscreenCanvas(200, 200);
-    const ctx = canvas.getContext('2d');
-
-    ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
-    var circle = new Path2D();
-    circle.arc(90, 90, 45, 0, 2 * Math.PI);
-    ctx.fill(circle);
-
-    ctx.globalCompositeOperation = 'source-in';
-
-    ctx.beginLayer();
-
-    // Enable compositing in the layer to validate that draw calls in the layer
-    // won't individually composite with the background.
-    ctx.globalCompositeOperation = 'screen';
-
-    ctx.fillStyle = 'rgba(225, 0, 0, 1)';
-    ctx.fillRect(50, 50, 75, 50);
-    ctx.fillStyle = 'rgba(0, 255, 0, 1)';
-    ctx.fillRect(70, 70, 75, 50);
-
-    ctx.endLayer();
-
-    const bitmap = canvas.transferToImageBitmap();
-    self.postMessage(bitmap, bitmap);
-  };
-</script>
-<script>
-  const blob = new Blob([document.getElementById('myWorker').textContent]);
-  const worker = new Worker(URL.createObjectURL(blob));
-  worker.addEventListener('message', msg => {
-    const outputCtx = document.getElementById("canvas").getContext('2d');
-    outputCtx.drawImage(msg.data, 0, 0);
-    document.documentElement.classList.remove("reftest-wait");
-  });
-  worker.postMessage(null);
-</script>
-</html>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.no-shadow.no-transform-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.no-shadow.no-transform-expected.html
new file mode 100644
index 0000000000..489d432282
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.no-shadow.no-transform-expected.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.global-states.copy.no-shadow.no-transform</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.copy.no-shadow.no-transform</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas0");
+    const ctx = canvas.getContext('2d');
+
+    // No transform.
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    // No globalAlpha.
+    ctx.globalCompositeOperation = 'copy';
+    // No shadow.
+
+    const canvas2 = document.createElement("canvas");
+    const ctx2 = canvas2.getContext("2d");
+
+    ctx2.globalCompositeOperation = 'screen';
+    ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx2.fillRect(10, 25, 40, 50);
+    ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx2.fillRect(30, 5, 50, 40);
+
+    ctx.drawImage(canvas2, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas1");
+    const ctx = canvas.getContext('2d');
+
+    // No transform.
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'copy';
+    // No shadow.
+
+    const canvas2 = document.createElement("canvas");
+    const ctx2 = canvas2.getContext("2d");
+
+    ctx2.globalCompositeOperation = 'screen';
+    ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx2.fillRect(10, 25, 40, 50);
+    ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx2.fillRect(30, 5, 50, 40);
+
+    ctx.drawImage(canvas2, 0, 0);
+  </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.no-shadow.no-transform.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.no-shadow.no-transform.html
new file mode 100644
index 0000000000..70b659f52b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.no-shadow.no-transform.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.copy.no-shadow.no-transform-expected.html">
+<title>Canvas test: 2d.layer.global-states.copy.no-shadow.no-transform</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.copy.no-shadow.no-transform</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    // No transform.
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    // No globalAlpha.
+    ctx.globalCompositeOperation = 'copy';
+    // No shadow.
+
+    ctx.beginLayer();
+
+    // Enable compositing in the layer to validate that draw calls in the layer
+    // won't individually composite with the background.
+    ctx.globalCompositeOperation = 'screen';
+
+    ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx.fillRect(10, 25, 40, 50);
+    ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx.fillRect(30, 5, 50, 40);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas0");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    // No transform.
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'copy';
+    // No shadow.
+
+    ctx.beginLayer();
+
+    // Enable compositing in the layer to validate that draw calls in the layer
+    // won't individually composite with the background.
+    ctx.globalCompositeOperation = 'screen';
+
+    ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx.fillRect(10, 25, 40, 50);
+    ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx.fillRect(30, 5, 50, 40);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas1");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.no-shadow.no-transform.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.no-shadow.no-transform.w.html
new file mode 100644
index 0000000000..1db7f17a94
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.no-shadow.no-transform.w.html
@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<html class="reftest-wait">
+<link rel="match" href="2d.layer.global-states.copy.no-shadow.no-transform-expected.html">
+<title>Canvas test: 2d.layer.global-states.copy.no-shadow.no-transform</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.copy.no-shadow.no-transform</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+<script>pending_tests = 2;</script>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker0" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      // No transform.
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      // No globalAlpha.
+      ctx.globalCompositeOperation = 'copy';
+      // No shadow.
+
+      ctx.beginLayer();
+
+      // Enable compositing in the layer to validate that draw calls in the layer
+      // won't individually composite with the background.
+      ctx.globalCompositeOperation = 'screen';
+
+      ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+      ctx.fillRect(10, 25, 40, 50);
+      ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+      ctx.fillRect(30, 5, 50, 40);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker0').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas0');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker1" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      // No transform.
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      ctx.globalAlpha = 0.75;
+      ctx.globalCompositeOperation = 'copy';
+      // No shadow.
+
+      ctx.beginLayer();
+
+      // Enable compositing in the layer to validate that draw calls in the layer
+      // won't individually composite with the background.
+      ctx.globalCompositeOperation = 'screen';
+
+      ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+      ctx.fillRect(10, 25, 40, 50);
+      ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+      ctx.fillRect(30, 5, 50, 40);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker1').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas1');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+</div>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.no-shadow.rotation-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.no-shadow.rotation-expected.html
new file mode 100644
index 0000000000..63913ffb05
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.no-shadow.rotation-expected.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.global-states.copy.no-shadow.rotation</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.copy.no-shadow.rotation</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas0");
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 40);
+    ctx.rotate(Math.PI);
+    ctx.translate(-45, -45);
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    // No globalAlpha.
+    ctx.globalCompositeOperation = 'copy';
+    // No shadow.
+
+    const canvas2 = document.createElement("canvas");
+    const ctx2 = canvas2.getContext("2d");
+
+    ctx2.globalCompositeOperation = 'screen';
+    ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx2.fillRect(10, 25, 40, 50);
+    ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx2.fillRect(30, 5, 50, 40);
+
+    ctx.drawImage(canvas2, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas1");
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 40);
+    ctx.rotate(Math.PI);
+    ctx.translate(-45, -45);
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'copy';
+    // No shadow.
+
+    const canvas2 = document.createElement("canvas");
+    const ctx2 = canvas2.getContext("2d");
+
+    ctx2.globalCompositeOperation = 'screen';
+    ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx2.fillRect(10, 25, 40, 50);
+    ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx2.fillRect(30, 5, 50, 40);
+
+    ctx.drawImage(canvas2, 0, 0);
+  </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.no-shadow.rotation.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.no-shadow.rotation.html
new file mode 100644
index 0000000000..2151535015
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.no-shadow.rotation.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.copy.no-shadow.rotation-expected.html">
+<title>Canvas test: 2d.layer.global-states.copy.no-shadow.rotation</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.copy.no-shadow.rotation</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 40);
+    ctx.rotate(Math.PI);
+    ctx.translate(-45, -45);
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    // No globalAlpha.
+    ctx.globalCompositeOperation = 'copy';
+    // No shadow.
+
+    ctx.beginLayer();
+
+    // Enable compositing in the layer to validate that draw calls in the layer
+    // won't individually composite with the background.
+    ctx.globalCompositeOperation = 'screen';
+
+    ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx.fillRect(10, 25, 40, 50);
+    ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx.fillRect(30, 5, 50, 40);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas0");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 40);
+    ctx.rotate(Math.PI);
+    ctx.translate(-45, -45);
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'copy';
+    // No shadow.
+
+    ctx.beginLayer();
+
+    // Enable compositing in the layer to validate that draw calls in the layer
+    // won't individually composite with the background.
+    ctx.globalCompositeOperation = 'screen';
+
+    ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx.fillRect(10, 25, 40, 50);
+    ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx.fillRect(30, 5, 50, 40);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas1");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.no-shadow.rotation.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.no-shadow.rotation.w.html
new file mode 100644
index 0000000000..9c0cac99b9
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.no-shadow.rotation.w.html
@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<html class="reftest-wait">
+<link rel="match" href="2d.layer.global-states.copy.no-shadow.rotation-expected.html">
+<title>Canvas test: 2d.layer.global-states.copy.no-shadow.rotation</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.copy.no-shadow.rotation</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+<script>pending_tests = 2;</script>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker0" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      ctx.translate(50, 40);
+      ctx.rotate(Math.PI);
+      ctx.translate(-45, -45);
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      // No globalAlpha.
+      ctx.globalCompositeOperation = 'copy';
+      // No shadow.
+
+      ctx.beginLayer();
+
+      // Enable compositing in the layer to validate that draw calls in the layer
+      // won't individually composite with the background.
+      ctx.globalCompositeOperation = 'screen';
+
+      ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+      ctx.fillRect(10, 25, 40, 50);
+      ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+      ctx.fillRect(30, 5, 50, 40);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker0').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas0');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker1" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      ctx.translate(50, 40);
+      ctx.rotate(Math.PI);
+      ctx.translate(-45, -45);
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      ctx.globalAlpha = 0.75;
+      ctx.globalCompositeOperation = 'copy';
+      // No shadow.
+
+      ctx.beginLayer();
+
+      // Enable compositing in the layer to validate that draw calls in the layer
+      // won't individually composite with the background.
+      ctx.globalCompositeOperation = 'screen';
+
+      ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+      ctx.fillRect(10, 25, 40, 50);
+      ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+      ctx.fillRect(30, 5, 50, 40);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker1').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas1');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+</div>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.shadow.no-transform-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.shadow.no-transform-expected.html
new file mode 100644
index 0000000000..021581f892
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.shadow.no-transform-expected.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.global-states.copy.shadow.no-transform</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.copy.shadow.no-transform</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas0");
+    const ctx = canvas.getContext('2d');
+
+    // No transform.
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    // No globalAlpha.
+    ctx.globalCompositeOperation = 'copy';
+    ctx.shadowOffsetX = -7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+    ctx.shadowBlur = 3;
+
+    const canvas2 = document.createElement("canvas");
+    const ctx2 = canvas2.getContext("2d");
+
+    ctx2.globalCompositeOperation = 'screen';
+    ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx2.fillRect(10, 25, 40, 50);
+    ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx2.fillRect(30, 5, 50, 40);
+
+    ctx.drawImage(canvas2, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas1");
+    const ctx = canvas.getContext('2d');
+
+    // No transform.
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'copy';
+    ctx.shadowOffsetX = -7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+    ctx.shadowBlur = 3;
+
+    const canvas2 = document.createElement("canvas");
+    const ctx2 = canvas2.getContext("2d");
+
+    ctx2.globalCompositeOperation = 'screen';
+    ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx2.fillRect(10, 25, 40, 50);
+    ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx2.fillRect(30, 5, 50, 40);
+
+    ctx.drawImage(canvas2, 0, 0);
+  </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.shadow.no-transform.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.shadow.no-transform.html
new file mode 100644
index 0000000000..42231fa61e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.shadow.no-transform.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.copy.shadow.no-transform-expected.html">
+<title>Canvas test: 2d.layer.global-states.copy.shadow.no-transform</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.copy.shadow.no-transform</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    // No transform.
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    // No globalAlpha.
+    ctx.globalCompositeOperation = 'copy';
+    ctx.shadowOffsetX = -7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+    ctx.shadowBlur = 3;
+
+    ctx.beginLayer();
+
+    // Enable compositing in the layer to validate that draw calls in the layer
+    // won't individually composite with the background.
+    ctx.globalCompositeOperation = 'screen';
+
+    ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx.fillRect(10, 25, 40, 50);
+    ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx.fillRect(30, 5, 50, 40);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas0");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    // No transform.
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'copy';
+    ctx.shadowOffsetX = -7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+    ctx.shadowBlur = 3;
+
+    ctx.beginLayer();
+
+    // Enable compositing in the layer to validate that draw calls in the layer
+    // won't individually composite with the background.
+    ctx.globalCompositeOperation = 'screen';
+
+    ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx.fillRect(10, 25, 40, 50);
+    ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx.fillRect(30, 5, 50, 40);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas1");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.shadow.no-transform.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.shadow.no-transform.w.html
new file mode 100644
index 0000000000..20dc667ef8
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.shadow.no-transform.w.html
@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<html class="reftest-wait">
+<link rel="match" href="2d.layer.global-states.copy.shadow.no-transform-expected.html">
+<title>Canvas test: 2d.layer.global-states.copy.shadow.no-transform</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.copy.shadow.no-transform</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+<script>pending_tests = 2;</script>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker0" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      // No transform.
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      // No globalAlpha.
+      ctx.globalCompositeOperation = 'copy';
+      ctx.shadowOffsetX = -7;
+      ctx.shadowOffsetY = 7;
+      ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+      ctx.shadowBlur = 3;
+
+      ctx.beginLayer();
+
+      // Enable compositing in the layer to validate that draw calls in the layer
+      // won't individually composite with the background.
+      ctx.globalCompositeOperation = 'screen';
+
+      ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+      ctx.fillRect(10, 25, 40, 50);
+      ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+      ctx.fillRect(30, 5, 50, 40);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker0').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas0');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker1" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      // No transform.
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      ctx.globalAlpha = 0.75;
+      ctx.globalCompositeOperation = 'copy';
+      ctx.shadowOffsetX = -7;
+      ctx.shadowOffsetY = 7;
+      ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+      ctx.shadowBlur = 3;
+
+      ctx.beginLayer();
+
+      // Enable compositing in the layer to validate that draw calls in the layer
+      // won't individually composite with the background.
+      ctx.globalCompositeOperation = 'screen';
+
+      ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+      ctx.fillRect(10, 25, 40, 50);
+      ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+      ctx.fillRect(30, 5, 50, 40);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker1').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas1');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+</div>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.shadow.rotation-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.shadow.rotation-expected.html
new file mode 100644
index 0000000000..dd9a5c2a00
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.shadow.rotation-expected.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.global-states.copy.shadow.rotation</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.copy.shadow.rotation</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas0");
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 40);
+    ctx.rotate(Math.PI);
+    ctx.translate(-45, -45);
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    // No globalAlpha.
+    ctx.globalCompositeOperation = 'copy';
+    ctx.shadowOffsetX = -7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+    ctx.shadowBlur = 3;
+
+    const canvas2 = document.createElement("canvas");
+    const ctx2 = canvas2.getContext("2d");
+
+    ctx2.globalCompositeOperation = 'screen';
+    ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx2.fillRect(10, 25, 40, 50);
+    ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx2.fillRect(30, 5, 50, 40);
+
+    ctx.drawImage(canvas2, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas1");
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 40);
+    ctx.rotate(Math.PI);
+    ctx.translate(-45, -45);
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'copy';
+    ctx.shadowOffsetX = -7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+    ctx.shadowBlur = 3;
+
+    const canvas2 = document.createElement("canvas");
+    const ctx2 = canvas2.getContext("2d");
+
+    ctx2.globalCompositeOperation = 'screen';
+    ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx2.fillRect(10, 25, 40, 50);
+    ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx2.fillRect(30, 5, 50, 40);
+
+    ctx.drawImage(canvas2, 0, 0);
+  </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.shadow.rotation.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.shadow.rotation.html
new file mode 100644
index 0000000000..77158a9f96
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.shadow.rotation.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.copy.shadow.rotation-expected.html">
+<title>Canvas test: 2d.layer.global-states.copy.shadow.rotation</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.copy.shadow.rotation</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 40);
+    ctx.rotate(Math.PI);
+    ctx.translate(-45, -45);
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    // No globalAlpha.
+    ctx.globalCompositeOperation = 'copy';
+    ctx.shadowOffsetX = -7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+    ctx.shadowBlur = 3;
+
+    ctx.beginLayer();
+
+    // Enable compositing in the layer to validate that draw calls in the layer
+    // won't individually composite with the background.
+    ctx.globalCompositeOperation = 'screen';
+
+    ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx.fillRect(10, 25, 40, 50);
+    ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx.fillRect(30, 5, 50, 40);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas0");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 40);
+    ctx.rotate(Math.PI);
+    ctx.translate(-45, -45);
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'copy';
+    ctx.shadowOffsetX = -7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+    ctx.shadowBlur = 3;
+
+    ctx.beginLayer();
+
+    // Enable compositing in the layer to validate that draw calls in the layer
+    // won't individually composite with the background.
+    ctx.globalCompositeOperation = 'screen';
+
+    ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx.fillRect(10, 25, 40, 50);
+    ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx.fillRect(30, 5, 50, 40);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas1");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.shadow.rotation.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.shadow.rotation.w.html
new file mode 100644
index 0000000000..def6bc51e2
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.copy.shadow.rotation.w.html
@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<html class="reftest-wait">
+<link rel="match" href="2d.layer.global-states.copy.shadow.rotation-expected.html">
+<title>Canvas test: 2d.layer.global-states.copy.shadow.rotation</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.copy.shadow.rotation</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+<script>pending_tests = 2;</script>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker0" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      ctx.translate(50, 40);
+      ctx.rotate(Math.PI);
+      ctx.translate(-45, -45);
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      // No globalAlpha.
+      ctx.globalCompositeOperation = 'copy';
+      ctx.shadowOffsetX = -7;
+      ctx.shadowOffsetY = 7;
+      ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+      ctx.shadowBlur = 3;
+
+      ctx.beginLayer();
+
+      // Enable compositing in the layer to validate that draw calls in the layer
+      // won't individually composite with the background.
+      ctx.globalCompositeOperation = 'screen';
+
+      ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+      ctx.fillRect(10, 25, 40, 50);
+      ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+      ctx.fillRect(30, 5, 50, 40);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker0').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas0');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker1" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      ctx.translate(50, 40);
+      ctx.rotate(Math.PI);
+      ctx.translate(-45, -45);
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      ctx.globalAlpha = 0.75;
+      ctx.globalCompositeOperation = 'copy';
+      ctx.shadowOffsetX = -7;
+      ctx.shadowOffsetY = 7;
+      ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+      ctx.shadowBlur = 3;
+
+      ctx.beginLayer();
+
+      // Enable compositing in the layer to validate that draw calls in the layer
+      // won't individually composite with the background.
+      ctx.globalCompositeOperation = 'screen';
+
+      ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+      ctx.fillRect(10, 25, 40, 50);
+      ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+      ctx.fillRect(30, 5, 50, 40);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker1').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas1');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+</div>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha-expected.html
deleted file mode 100644
index f304700feb..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha-expected.html
+++ /dev/null
@@ -1,50 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>Canvas test: 2d.layer.global-states.filter.alpha</title>
-<h1>2d.layer.global-states.filter.alpha</h1>
-<p class="desc">Checks that layers with filters correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
-  const canvas = document.getElementById("canvas");
-  const ctx = canvas.getContext('2d');
-
-  const svg = `
-    <svg xmlns="http://www.w3.org/2000/svg"
-          width="200" height="200"
-          color-interpolation-filters="sRGB">
-      <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
-        <feColorMatrix
-            type="matrix"
-            values="0.393 0.769 0.189 0 0
-                    0.349 0.686 0.168 0 0
-                    0.272 0.534 0.131 0 0
-                    0 0 0 1 0" />
-        <feComponentTransfer>
-          <feFuncA type="table" tableValues="0 0.7"></feFuncA>
-        </feComponentTransfer>
-        <feDropShadow dx="5" dy="5" flood-color="#81e" />
-      </filter>
-      <g filter="url(#filter)">
-        <rect x="50" y="50" width="75" height="50" fill="rgba(200, 0, 0, 1)"/>
-        <rect x="70" y="70" width="75" height="50" fill="rgba(0, 200, 0, 1)"/>
-      </g>
-    </svg>`;
-
-  const img = new Image();
-  img.width = 200;
-  img.height = 200;
-  img.onload = () => {
-    ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
-    var circle = new Path2D();
-    circle.arc(90, 90, 45, 0, 2 * Math.PI);
-    ctx.fill(circle);
-
-    ctx.globalAlpha = 0.6;
-
-    ctx.drawImage(img, 0, 0);
-  };
-  img.src = 'data:image/svg+xml;base64,' + btoa(svg);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.blending-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.blending-expected.html
deleted file mode 100644
index 7c91ce4229..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.blending-expected.html
+++ /dev/null
@@ -1,51 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>Canvas test: 2d.layer.global-states.filter.alpha.blending</title>
-<h1>2d.layer.global-states.filter.alpha.blending</h1>
-<p class="desc">Checks that layers with filters correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
-  const canvas = document.getElementById("canvas");
-  const ctx = canvas.getContext('2d');
-
-  const svg = `
-    <svg xmlns="http://www.w3.org/2000/svg"
-          width="200" height="200"
-          color-interpolation-filters="sRGB">
-      <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
-        <feColorMatrix
-            type="matrix"
-            values="0.393 0.769 0.189 0 0
-                    0.349 0.686 0.168 0 0
-                    0.272 0.534 0.131 0 0
-                    0 0 0 1 0" />
-        <feComponentTransfer>
-          <feFuncA type="table" tableValues="0 0.7"></feFuncA>
-        </feComponentTransfer>
-        <feDropShadow dx="5" dy="5" flood-color="#81e" />
-      </filter>
-      <g filter="url(#filter)">
-        <rect x="50" y="50" width="75" height="50" fill="rgba(200, 0, 0, 1)"/>
-        <rect x="70" y="70" width="75" height="50" fill="rgba(0, 200, 0, 1)"/>
-      </g>
-    </svg>`;
-
-  const img = new Image();
-  img.width = 200;
-  img.height = 200;
-  img.onload = () => {
-    ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
-    var circle = new Path2D();
-    circle.arc(90, 90, 45, 0, 2 * Math.PI);
-    ctx.fill(circle);
-
-    ctx.globalAlpha = 0.6;
-  ctx.globalCompositeOperation = 'multiply';
-
-    ctx.drawImage(img, 0, 0);
-  };
-  img.src = 'data:image/svg+xml;base64,' + btoa(svg);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.blending.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.blending.html
deleted file mode 100644
index 0e48cb49f7..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.blending.html
+++ /dev/null
@@ -1,42 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<link rel="match" href="2d.layer.global-states.filter.alpha.blending-expected.html">
-<meta name=fuzzy content="maxDifference=0-1; totalPixels=0-2453">
-<title>Canvas test: 2d.layer.global-states.filter.alpha.blending</title>
-<h1>2d.layer.global-states.filter.alpha.blending</h1>
-<p class="desc">Checks that layers with filters correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
-  const canvas = new OffscreenCanvas(200, 200);
-  const ctx = canvas.getContext('2d');
-
-  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
-  var circle = new Path2D();
-  circle.arc(90, 90, 45, 0, 2 * Math.PI);
-  ctx.fill(circle);
-
-  ctx.globalAlpha = 0.6;
-  ctx.globalCompositeOperation = 'multiply';
-
-  ctx.beginLayer({filter: [
-      {name: 'colorMatrix', values: [0.393, 0.769, 0.189, 0, 0,
-                                     0.349, 0.686, 0.168, 0, 0,
-                                     0.272, 0.534, 0.131, 0, 0,
-                                     0, 0, 0, 1, 0]},
-      {name: 'componentTransfer',
-          funcA: {type: "table", tableValues: [0, 0.7]}},
-      {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]});
-
-  ctx.fillStyle = 'rgba(200, 0, 0, 1)';
-  ctx.fillRect(50, 50, 75, 50);
-  ctx.fillStyle = 'rgba(0, 200, 0, 1)';
-  ctx.fillRect(70, 70, 75, 50);
-
-  ctx.endLayer();
-
-  const outputCanvas = document.getElementById("canvas");
-  outputCanvas.getContext('2d').drawImage(canvas, 0, 0);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.blending.shadow-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.blending.shadow-expected.html
deleted file mode 100644
index 62942ffeae..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.blending.shadow-expected.html
+++ /dev/null
@@ -1,55 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>Canvas test: 2d.layer.global-states.filter.alpha.blending.shadow</title>
-<h1>2d.layer.global-states.filter.alpha.blending.shadow</h1>
-<p class="desc">Checks that layers with filters correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
-  const canvas = document.getElementById("canvas");
-  const ctx = canvas.getContext('2d');
-
-  const svg = `
-    <svg xmlns="http://www.w3.org/2000/svg"
-          width="200" height="200"
-          color-interpolation-filters="sRGB">
-      <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
-        <feColorMatrix
-            type="matrix"
-            values="0.393 0.769 0.189 0 0
-                    0.349 0.686 0.168 0 0
-                    0.272 0.534 0.131 0 0
-                    0 0 0 1 0" />
-        <feComponentTransfer>
-          <feFuncA type="table" tableValues="0 0.7"></feFuncA>
-        </feComponentTransfer>
-        <feDropShadow dx="5" dy="5" flood-color="#81e" />
-      </filter>
-      <g filter="url(#filter)">
-        <rect x="50" y="50" width="75" height="50" fill="rgba(200, 0, 0, 1)"/>
-        <rect x="70" y="70" width="75" height="50" fill="rgba(0, 200, 0, 1)"/>
-      </g>
-    </svg>`;
-
-  const img = new Image();
-  img.width = 200;
-  img.height = 200;
-  img.onload = () => {
-    ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
-    var circle = new Path2D();
-    circle.arc(90, 90, 45, 0, 2 * Math.PI);
-    ctx.fill(circle);
-
-    ctx.globalAlpha = 0.6;
-  ctx.globalCompositeOperation = 'multiply';
-  ctx.shadowOffsetX = -10;
-  ctx.shadowOffsetY = 10;
-  ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
-  ctx.shadowBlur = 3;
-
-    ctx.drawImage(img, 0, 0);
-  };
-  img.src = 'data:image/svg+xml;base64,' + btoa(svg);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.blending.shadow.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.blending.shadow.html
deleted file mode 100644
index 62d98d967c..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.blending.shadow.html
+++ /dev/null
@@ -1,45 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<link rel="match" href="2d.layer.global-states.filter.alpha.blending.shadow-expected.html">
-<title>Canvas test: 2d.layer.global-states.filter.alpha.blending.shadow</title>
-<h1>2d.layer.global-states.filter.alpha.blending.shadow</h1>
-<p class="desc">Checks that layers with filters correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
-  const canvas = new OffscreenCanvas(200, 200);
-  const ctx = canvas.getContext('2d');
-
-  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
-  var circle = new Path2D();
-  circle.arc(90, 90, 45, 0, 2 * Math.PI);
-  ctx.fill(circle);
-
-  ctx.globalAlpha = 0.6;
-  ctx.globalCompositeOperation = 'multiply';
-  ctx.shadowOffsetX = -10;
-  ctx.shadowOffsetY = 10;
-  ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
-  ctx.shadowBlur = 3;
-
-  ctx.beginLayer({filter: [
-      {name: 'colorMatrix', values: [0.393, 0.769, 0.189, 0, 0,
-                                     0.349, 0.686, 0.168, 0, 0,
-                                     0.272, 0.534, 0.131, 0, 0,
-                                     0, 0, 0, 1, 0]},
-      {name: 'componentTransfer',
-          funcA: {type: "table", tableValues: [0, 0.7]}},
-      {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]});
-
-  ctx.fillStyle = 'rgba(200, 0, 0, 1)';
-  ctx.fillRect(50, 50, 75, 50);
-  ctx.fillStyle = 'rgba(0, 200, 0, 1)';
-  ctx.fillRect(70, 70, 75, 50);
-
-  ctx.endLayer();
-
-  const outputCanvas = document.getElementById("canvas");
-  outputCanvas.getContext('2d').drawImage(canvas, 0, 0);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.blending.shadow.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.blending.shadow.w.html
deleted file mode 100644
index e81efd6b8d..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.blending.shadow.w.html
+++ /dev/null
@@ -1,59 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<html class="reftest-wait">
-<link rel="match" href="2d.layer.global-states.filter.alpha.blending.shadow-expected.html">
-<title>Canvas test: 2d.layer.global-states.filter.alpha.blending.shadow</title>
-<h1>2d.layer.global-states.filter.alpha.blending.shadow</h1>
-<p class="desc">Checks that layers with filters correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script id='myWorker' type='text/worker'>
-  self.onmessage = function(e) {
-    const canvas = new OffscreenCanvas(200, 200);
-    const ctx = canvas.getContext('2d');
-
-    ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
-    var circle = new Path2D();
-    circle.arc(90, 90, 45, 0, 2 * Math.PI);
-    ctx.fill(circle);
-
-    ctx.globalAlpha = 0.6;
-    ctx.globalCompositeOperation = 'multiply';
-    ctx.shadowOffsetX = -10;
-    ctx.shadowOffsetY = 10;
-    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
-    ctx.shadowBlur = 3;
-
-    ctx.beginLayer({filter: [
-        {name: 'colorMatrix', values: [0.393, 0.769, 0.189, 0, 0,
-                                       0.349, 0.686, 0.168, 0, 0,
-                                       0.272, 0.534, 0.131, 0, 0,
-                                       0, 0, 0, 1, 0]},
-        {name: 'componentTransfer',
-            funcA: {type: "table", tableValues: [0, 0.7]}},
-        {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]});
-
-    ctx.fillStyle = 'rgba(200, 0, 0, 1)';
-    ctx.fillRect(50, 50, 75, 50);
-    ctx.fillStyle = 'rgba(0, 200, 0, 1)';
-    ctx.fillRect(70, 70, 75, 50);
-
-    ctx.endLayer();
-
-    const bitmap = canvas.transferToImageBitmap();
-    self.postMessage(bitmap, bitmap);
-  };
-</script>
-<script>
-  const blob = new Blob([document.getElementById('myWorker').textContent]);
-  const worker = new Worker(URL.createObjectURL(blob));
-  worker.addEventListener('message', msg => {
-    const outputCtx = document.getElementById("canvas").getContext('2d');
-    outputCtx.drawImage(msg.data, 0, 0);
-    document.documentElement.classList.remove("reftest-wait");
-  });
-  worker.postMessage(null);
-</script>
-</html>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.blending.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.blending.w.html
deleted file mode 100644
index 3887ed4485..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.blending.w.html
+++ /dev/null
@@ -1,56 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<html class="reftest-wait">
-<link rel="match" href="2d.layer.global-states.filter.alpha.blending-expected.html">
-<meta name=fuzzy content="maxDifference=0-1; totalPixels=0-2453">
-<title>Canvas test: 2d.layer.global-states.filter.alpha.blending</title>
-<h1>2d.layer.global-states.filter.alpha.blending</h1>
-<p class="desc">Checks that layers with filters correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script id='myWorker' type='text/worker'>
-  self.onmessage = function(e) {
-    const canvas = new OffscreenCanvas(200, 200);
-    const ctx = canvas.getContext('2d');
-
-    ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
-    var circle = new Path2D();
-    circle.arc(90, 90, 45, 0, 2 * Math.PI);
-    ctx.fill(circle);
-
-    ctx.globalAlpha = 0.6;
-    ctx.globalCompositeOperation = 'multiply';
-
-    ctx.beginLayer({filter: [
-        {name: 'colorMatrix', values: [0.393, 0.769, 0.189, 0, 0,
-                                       0.349, 0.686, 0.168, 0, 0,
-                                       0.272, 0.534, 0.131, 0, 0,
-                                       0, 0, 0, 1, 0]},
-        {name: 'componentTransfer',
-            funcA: {type: "table", tableValues: [0, 0.7]}},
-        {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]});
-
-    ctx.fillStyle = 'rgba(200, 0, 0, 1)';
-    ctx.fillRect(50, 50, 75, 50);
-    ctx.fillStyle = 'rgba(0, 200, 0, 1)';
-    ctx.fillRect(70, 70, 75, 50);
-
-    ctx.endLayer();
-
-    const bitmap = canvas.transferToImageBitmap();
-    self.postMessage(bitmap, bitmap);
-  };
-</script>
-<script>
-  const blob = new Blob([document.getElementById('myWorker').textContent]);
-  const worker = new Worker(URL.createObjectURL(blob));
-  worker.addEventListener('message', msg => {
-    const outputCtx = document.getElementById("canvas").getContext('2d');
-    outputCtx.drawImage(msg.data, 0, 0);
-    document.documentElement.classList.remove("reftest-wait");
-  });
-  worker.postMessage(null);
-</script>
-</html>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.composite-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.composite-expected.html
deleted file mode 100644
index 8e0d98648e..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.composite-expected.html
+++ /dev/null
@@ -1,51 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>Canvas test: 2d.layer.global-states.filter.alpha.composite</title>
-<h1>2d.layer.global-states.filter.alpha.composite</h1>
-<p class="desc">Checks that layers with filters correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
-  const canvas = document.getElementById("canvas");
-  const ctx = canvas.getContext('2d');
-
-  const svg = `
-    <svg xmlns="http://www.w3.org/2000/svg"
-          width="200" height="200"
-          color-interpolation-filters="sRGB">
-      <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
-        <feColorMatrix
-            type="matrix"
-            values="0.393 0.769 0.189 0 0
-                    0.349 0.686 0.168 0 0
-                    0.272 0.534 0.131 0 0
-                    0 0 0 1 0" />
-        <feComponentTransfer>
-          <feFuncA type="table" tableValues="0 0.7"></feFuncA>
-        </feComponentTransfer>
-        <feDropShadow dx="5" dy="5" flood-color="#81e" />
-      </filter>
-      <g filter="url(#filter)">
-        <rect x="50" y="50" width="75" height="50" fill="rgba(200, 0, 0, 1)"/>
-        <rect x="70" y="70" width="75" height="50" fill="rgba(0, 200, 0, 1)"/>
-      </g>
-    </svg>`;
-
-  const img = new Image();
-  img.width = 200;
-  img.height = 200;
-  img.onload = () => {
-    ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
-    var circle = new Path2D();
-    circle.arc(90, 90, 45, 0, 2 * Math.PI);
-    ctx.fill(circle);
-
-    ctx.globalAlpha = 0.6;
-  ctx.globalCompositeOperation = 'source-in';
-
-    ctx.drawImage(img, 0, 0);
-  };
-  img.src = 'data:image/svg+xml;base64,' + btoa(svg);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.composite.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.composite.html
deleted file mode 100644
index 1a9bc8b733..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.composite.html
+++ /dev/null
@@ -1,42 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<link rel="match" href="2d.layer.global-states.filter.alpha.composite-expected.html">
-<meta name=fuzzy content="maxDifference=0-1; totalPixels=0-5204">
-<title>Canvas test: 2d.layer.global-states.filter.alpha.composite</title>
-<h1>2d.layer.global-states.filter.alpha.composite</h1>
-<p class="desc">Checks that layers with filters correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
-  const canvas = new OffscreenCanvas(200, 200);
-  const ctx = canvas.getContext('2d');
-
-  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
-  var circle = new Path2D();
-  circle.arc(90, 90, 45, 0, 2 * Math.PI);
-  ctx.fill(circle);
-
-  ctx.globalAlpha = 0.6;
-  ctx.globalCompositeOperation = 'source-in';
-
-  ctx.beginLayer({filter: [
-      {name: 'colorMatrix', values: [0.393, 0.769, 0.189, 0, 0,
-                                     0.349, 0.686, 0.168, 0, 0,
-                                     0.272, 0.534, 0.131, 0, 0,
-                                     0, 0, 0, 1, 0]},
-      {name: 'componentTransfer',
-          funcA: {type: "table", tableValues: [0, 0.7]}},
-      {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]});
-
-  ctx.fillStyle = 'rgba(200, 0, 0, 1)';
-  ctx.fillRect(50, 50, 75, 50);
-  ctx.fillStyle = 'rgba(0, 200, 0, 1)';
-  ctx.fillRect(70, 70, 75, 50);
-
-  ctx.endLayer();
-
-  const outputCanvas = document.getElementById("canvas");
-  outputCanvas.getContext('2d').drawImage(canvas, 0, 0);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.composite.shadow-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.composite.shadow-expected.html
deleted file mode 100644
index a649972546..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.composite.shadow-expected.html
+++ /dev/null
@@ -1,55 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>Canvas test: 2d.layer.global-states.filter.alpha.composite.shadow</title>
-<h1>2d.layer.global-states.filter.alpha.composite.shadow</h1>
-<p class="desc">Checks that layers with filters correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
-  const canvas = document.getElementById("canvas");
-  const ctx = canvas.getContext('2d');
-
-  const svg = `
-    <svg xmlns="http://www.w3.org/2000/svg"
-          width="200" height="200"
-          color-interpolation-filters="sRGB">
-      <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
-        <feColorMatrix
-            type="matrix"
-            values="0.393 0.769 0.189 0 0
-                    0.349 0.686 0.168 0 0
-                    0.272 0.534 0.131 0 0
-                    0 0 0 1 0" />
-        <feComponentTransfer>
-          <feFuncA type="table" tableValues="0 0.7"></feFuncA>
-        </feComponentTransfer>
-        <feDropShadow dx="5" dy="5" flood-color="#81e" />
-      </filter>
-      <g filter="url(#filter)">
-        <rect x="50" y="50" width="75" height="50" fill="rgba(200, 0, 0, 1)"/>
-        <rect x="70" y="70" width="75" height="50" fill="rgba(0, 200, 0, 1)"/>
-      </g>
-    </svg>`;
-
-  const img = new Image();
-  img.width = 200;
-  img.height = 200;
-  img.onload = () => {
-    ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
-    var circle = new Path2D();
-    circle.arc(90, 90, 45, 0, 2 * Math.PI);
-    ctx.fill(circle);
-
-    ctx.globalAlpha = 0.6;
-  ctx.globalCompositeOperation = 'source-in';
-  ctx.shadowOffsetX = -10;
-  ctx.shadowOffsetY = 10;
-  ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
-  ctx.shadowBlur = 3;
-
-    ctx.drawImage(img, 0, 0);
-  };
-  img.src = 'data:image/svg+xml;base64,' + btoa(svg);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.composite.shadow.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.composite.shadow.html
deleted file mode 100644
index d067ff2f5e..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.composite.shadow.html
+++ /dev/null
@@ -1,45 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<link rel="match" href="2d.layer.global-states.filter.alpha.composite.shadow-expected.html">
-<title>Canvas test: 2d.layer.global-states.filter.alpha.composite.shadow</title>
-<h1>2d.layer.global-states.filter.alpha.composite.shadow</h1>
-<p class="desc">Checks that layers with filters correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
-  const canvas = new OffscreenCanvas(200, 200);
-  const ctx = canvas.getContext('2d');
-
-  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
-  var circle = new Path2D();
-  circle.arc(90, 90, 45, 0, 2 * Math.PI);
-  ctx.fill(circle);
-
-  ctx.globalAlpha = 0.6;
-  ctx.globalCompositeOperation = 'source-in';
-  ctx.shadowOffsetX = -10;
-  ctx.shadowOffsetY = 10;
-  ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
-  ctx.shadowBlur = 3;
-
-  ctx.beginLayer({filter: [
-      {name: 'colorMatrix', values: [0.393, 0.769, 0.189, 0, 0,
-                                     0.349, 0.686, 0.168, 0, 0,
-                                     0.272, 0.534, 0.131, 0, 0,
-                                     0, 0, 0, 1, 0]},
-      {name: 'componentTransfer',
-          funcA: {type: "table", tableValues: [0, 0.7]}},
-      {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]});
-
-  ctx.fillStyle = 'rgba(200, 0, 0, 1)';
-  ctx.fillRect(50, 50, 75, 50);
-  ctx.fillStyle = 'rgba(0, 200, 0, 1)';
-  ctx.fillRect(70, 70, 75, 50);
-
-  ctx.endLayer();
-
-  const outputCanvas = document.getElementById("canvas");
-  outputCanvas.getContext('2d').drawImage(canvas, 0, 0);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.composite.shadow.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.composite.shadow.w.html
deleted file mode 100644
index 39abc78b17..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.composite.shadow.w.html
+++ /dev/null
@@ -1,59 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<html class="reftest-wait">
-<link rel="match" href="2d.layer.global-states.filter.alpha.composite.shadow-expected.html">
-<title>Canvas test: 2d.layer.global-states.filter.alpha.composite.shadow</title>
-<h1>2d.layer.global-states.filter.alpha.composite.shadow</h1>
-<p class="desc">Checks that layers with filters correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script id='myWorker' type='text/worker'>
-  self.onmessage = function(e) {
-    const canvas = new OffscreenCanvas(200, 200);
-    const ctx = canvas.getContext('2d');
-
-    ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
-    var circle = new Path2D();
-    circle.arc(90, 90, 45, 0, 2 * Math.PI);
-    ctx.fill(circle);
-
-    ctx.globalAlpha = 0.6;
-    ctx.globalCompositeOperation = 'source-in';
-    ctx.shadowOffsetX = -10;
-    ctx.shadowOffsetY = 10;
-    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
-    ctx.shadowBlur = 3;
-
-    ctx.beginLayer({filter: [
-        {name: 'colorMatrix', values: [0.393, 0.769, 0.189, 0, 0,
-                                       0.349, 0.686, 0.168, 0, 0,
-                                       0.272, 0.534, 0.131, 0, 0,
-                                       0, 0, 0, 1, 0]},
-        {name: 'componentTransfer',
-            funcA: {type: "table", tableValues: [0, 0.7]}},
-        {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]});
-
-    ctx.fillStyle = 'rgba(200, 0, 0, 1)';
-    ctx.fillRect(50, 50, 75, 50);
-    ctx.fillStyle = 'rgba(0, 200, 0, 1)';
-    ctx.fillRect(70, 70, 75, 50);
-
-    ctx.endLayer();
-
-    const bitmap = canvas.transferToImageBitmap();
-    self.postMessage(bitmap, bitmap);
-  };
-</script>
-<script>
-  const blob = new Blob([document.getElementById('myWorker').textContent]);
-  const worker = new Worker(URL.createObjectURL(blob));
-  worker.addEventListener('message', msg => {
-    const outputCtx = document.getElementById("canvas").getContext('2d');
-    outputCtx.drawImage(msg.data, 0, 0);
-    document.documentElement.classList.remove("reftest-wait");
-  });
-  worker.postMessage(null);
-</script>
-</html>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.composite.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.composite.w.html
deleted file mode 100644
index 5c90fe95aa..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.composite.w.html
+++ /dev/null
@@ -1,56 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<html class="reftest-wait">
-<link rel="match" href="2d.layer.global-states.filter.alpha.composite-expected.html">
-<meta name=fuzzy content="maxDifference=0-1; totalPixels=0-5204">
-<title>Canvas test: 2d.layer.global-states.filter.alpha.composite</title>
-<h1>2d.layer.global-states.filter.alpha.composite</h1>
-<p class="desc">Checks that layers with filters correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script id='myWorker' type='text/worker'>
-  self.onmessage = function(e) {
-    const canvas = new OffscreenCanvas(200, 200);
-    const ctx = canvas.getContext('2d');
-
-    ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
-    var circle = new Path2D();
-    circle.arc(90, 90, 45, 0, 2 * Math.PI);
-    ctx.fill(circle);
-
-    ctx.globalAlpha = 0.6;
-    ctx.globalCompositeOperation = 'source-in';
-
-    ctx.beginLayer({filter: [
-        {name: 'colorMatrix', values: [0.393, 0.769, 0.189, 0, 0,
-                                       0.349, 0.686, 0.168, 0, 0,
-                                       0.272, 0.534, 0.131, 0, 0,
-                                       0, 0, 0, 1, 0]},
-        {name: 'componentTransfer',
-            funcA: {type: "table", tableValues: [0, 0.7]}},
-        {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]});
-
-    ctx.fillStyle = 'rgba(200, 0, 0, 1)';
-    ctx.fillRect(50, 50, 75, 50);
-    ctx.fillStyle = 'rgba(0, 200, 0, 1)';
-    ctx.fillRect(70, 70, 75, 50);
-
-    ctx.endLayer();
-
-    const bitmap = canvas.transferToImageBitmap();
-    self.postMessage(bitmap, bitmap);
-  };
-</script>
-<script>
-  const blob = new Blob([document.getElementById('myWorker').textContent]);
-  const worker = new Worker(URL.createObjectURL(blob));
-  worker.addEventListener('message', msg => {
-    const outputCtx = document.getElementById("canvas").getContext('2d');
-    outputCtx.drawImage(msg.data, 0, 0);
-    document.documentElement.classList.remove("reftest-wait");
-  });
-  worker.postMessage(null);
-</script>
-</html>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.html
deleted file mode 100644
index f64e8925f0..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.html
+++ /dev/null
@@ -1,41 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<link rel="match" href="2d.layer.global-states.filter.alpha-expected.html">
-<meta name=fuzzy content="maxDifference=0-2; totalPixels=0-6766">
-<title>Canvas test: 2d.layer.global-states.filter.alpha</title>
-<h1>2d.layer.global-states.filter.alpha</h1>
-<p class="desc">Checks that layers with filters correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
-  const canvas = new OffscreenCanvas(200, 200);
-  const ctx = canvas.getContext('2d');
-
-  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
-  var circle = new Path2D();
-  circle.arc(90, 90, 45, 0, 2 * Math.PI);
-  ctx.fill(circle);
-
-  ctx.globalAlpha = 0.6;
-
-  ctx.beginLayer({filter: [
-      {name: 'colorMatrix', values: [0.393, 0.769, 0.189, 0, 0,
-                                     0.349, 0.686, 0.168, 0, 0,
-                                     0.272, 0.534, 0.131, 0, 0,
-                                     0, 0, 0, 1, 0]},
-      {name: 'componentTransfer',
-          funcA: {type: "table", tableValues: [0, 0.7]}},
-      {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]});
-
-  ctx.fillStyle = 'rgba(200, 0, 0, 1)';
-  ctx.fillRect(50, 50, 75, 50);
-  ctx.fillStyle = 'rgba(0, 200, 0, 1)';
-  ctx.fillRect(70, 70, 75, 50);
-
-  ctx.endLayer();
-
-  const outputCanvas = document.getElementById("canvas");
-  outputCanvas.getContext('2d').drawImage(canvas, 0, 0);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.shadow-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.shadow-expected.html
deleted file mode 100644
index 169baee29b..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.shadow-expected.html
+++ /dev/null
@@ -1,54 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>Canvas test: 2d.layer.global-states.filter.alpha.shadow</title>
-<h1>2d.layer.global-states.filter.alpha.shadow</h1>
-<p class="desc">Checks that layers with filters correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
-  const canvas = document.getElementById("canvas");
-  const ctx = canvas.getContext('2d');
-
-  const svg = `
-    <svg xmlns="http://www.w3.org/2000/svg"
-          width="200" height="200"
-          color-interpolation-filters="sRGB">
-      <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
-        <feColorMatrix
-            type="matrix"
-            values="0.393 0.769 0.189 0 0
-                    0.349 0.686 0.168 0 0
-                    0.272 0.534 0.131 0 0
-                    0 0 0 1 0" />
-        <feComponentTransfer>
-          <feFuncA type="table" tableValues="0 0.7"></feFuncA>
-        </feComponentTransfer>
-        <feDropShadow dx="5" dy="5" flood-color="#81e" />
-      </filter>
-      <g filter="url(#filter)">
-        <rect x="50" y="50" width="75" height="50" fill="rgba(200, 0, 0, 1)"/>
-        <rect x="70" y="70" width="75" height="50" fill="rgba(0, 200, 0, 1)"/>
-      </g>
-    </svg>`;
-
-  const img = new Image();
-  img.width = 200;
-  img.height = 200;
-  img.onload = () => {
-    ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
-    var circle = new Path2D();
-    circle.arc(90, 90, 45, 0, 2 * Math.PI);
-    ctx.fill(circle);
-
-    ctx.globalAlpha = 0.5;
-  ctx.shadowOffsetX = -10;
-  ctx.shadowOffsetY = 10;
-  ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
-  ctx.shadowBlur = 3;
-
-    ctx.drawImage(img, 0, 0);
-  };
-  img.src = 'data:image/svg+xml;base64,' + btoa(svg);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.shadow.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.shadow.html
deleted file mode 100644
index 5e8911ee17..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.shadow.html
+++ /dev/null
@@ -1,45 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<link rel="match" href="2d.layer.global-states.filter.alpha.shadow-expected.html">
-<meta name=fuzzy content="maxDifference=0-2; totalPixels=0-6311">
-<title>Canvas test: 2d.layer.global-states.filter.alpha.shadow</title>
-<h1>2d.layer.global-states.filter.alpha.shadow</h1>
-<p class="desc">Checks that layers with filters correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
-  const canvas = new OffscreenCanvas(200, 200);
-  const ctx = canvas.getContext('2d');
-
-  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
-  var circle = new Path2D();
-  circle.arc(90, 90, 45, 0, 2 * Math.PI);
-  ctx.fill(circle);
-
-  ctx.globalAlpha = 0.5;
-  ctx.shadowOffsetX = -10;
-  ctx.shadowOffsetY = 10;
-  ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
-  ctx.shadowBlur = 3;
-
-  ctx.beginLayer({filter: [
-      {name: 'colorMatrix', values: [0.393, 0.769, 0.189, 0, 0,
-                                     0.349, 0.686, 0.168, 0, 0,
-                                     0.272, 0.534, 0.131, 0, 0,
-                                     0, 0, 0, 1, 0]},
-      {name: 'componentTransfer',
-          funcA: {type: "table", tableValues: [0, 0.7]}},
-      {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]});
-
-  ctx.fillStyle = 'rgba(200, 0, 0, 1)';
-  ctx.fillRect(50, 50, 75, 50);
-  ctx.fillStyle = 'rgba(0, 200, 0, 1)';
-  ctx.fillRect(70, 70, 75, 50);
-
-  ctx.endLayer();
-
-  const outputCanvas = document.getElementById("canvas");
-  outputCanvas.getContext('2d').drawImage(canvas, 0, 0);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.shadow.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.shadow.w.html
deleted file mode 100644
index b3be7e1ac8..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.shadow.w.html
+++ /dev/null
@@ -1,59 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<html class="reftest-wait">
-<link rel="match" href="2d.layer.global-states.filter.alpha.shadow-expected.html">
-<meta name=fuzzy content="maxDifference=0-2; totalPixels=0-6311">
-<title>Canvas test: 2d.layer.global-states.filter.alpha.shadow</title>
-<h1>2d.layer.global-states.filter.alpha.shadow</h1>
-<p class="desc">Checks that layers with filters correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script id='myWorker' type='text/worker'>
-  self.onmessage = function(e) {
-    const canvas = new OffscreenCanvas(200, 200);
-    const ctx = canvas.getContext('2d');
-
-    ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
-    var circle = new Path2D();
-    circle.arc(90, 90, 45, 0, 2 * Math.PI);
-    ctx.fill(circle);
-
-    ctx.globalAlpha = 0.5;
-    ctx.shadowOffsetX = -10;
-    ctx.shadowOffsetY = 10;
-    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
-    ctx.shadowBlur = 3;
-
-    ctx.beginLayer({filter: [
-        {name: 'colorMatrix', values: [0.393, 0.769, 0.189, 0, 0,
-                                       0.349, 0.686, 0.168, 0, 0,
-                                       0.272, 0.534, 0.131, 0, 0,
-                                       0, 0, 0, 1, 0]},
-        {name: 'componentTransfer',
-            funcA: {type: "table", tableValues: [0, 0.7]}},
-        {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]});
-
-    ctx.fillStyle = 'rgba(200, 0, 0, 1)';
-    ctx.fillRect(50, 50, 75, 50);
-    ctx.fillStyle = 'rgba(0, 200, 0, 1)';
-    ctx.fillRect(70, 70, 75, 50);
-
-    ctx.endLayer();
-
-    const bitmap = canvas.transferToImageBitmap();
-    self.postMessage(bitmap, bitmap);
-  };
-</script>
-<script>
-  const blob = new Blob([document.getElementById('myWorker').textContent]);
-  const worker = new Worker(URL.createObjectURL(blob));
-  worker.addEventListener('message', msg => {
-    const outputCtx = document.getElementById("canvas").getContext('2d');
-    outputCtx.drawImage(msg.data, 0, 0);
-    document.documentElement.classList.remove("reftest-wait");
-  });
-  worker.postMessage(null);
-</script>
-</html>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.w.html
deleted file mode 100644
index 21e55f856c..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.w.html
+++ /dev/null
@@ -1,55 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<html class="reftest-wait">
-<link rel="match" href="2d.layer.global-states.filter.alpha-expected.html">
-<meta name=fuzzy content="maxDifference=0-2; totalPixels=0-6766">
-<title>Canvas test: 2d.layer.global-states.filter.alpha</title>
-<h1>2d.layer.global-states.filter.alpha</h1>
-<p class="desc">Checks that layers with filters correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script id='myWorker' type='text/worker'>
-  self.onmessage = function(e) {
-    const canvas = new OffscreenCanvas(200, 200);
-    const ctx = canvas.getContext('2d');
-
-    ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
-    var circle = new Path2D();
-    circle.arc(90, 90, 45, 0, 2 * Math.PI);
-    ctx.fill(circle);
-
-    ctx.globalAlpha = 0.6;
-
-    ctx.beginLayer({filter: [
-        {name: 'colorMatrix', values: [0.393, 0.769, 0.189, 0, 0,
-                                       0.349, 0.686, 0.168, 0, 0,
-                                       0.272, 0.534, 0.131, 0, 0,
-                                       0, 0, 0, 1, 0]},
-        {name: 'componentTransfer',
-            funcA: {type: "table", tableValues: [0, 0.7]}},
-        {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]});
-
-    ctx.fillStyle = 'rgba(200, 0, 0, 1)';
-    ctx.fillRect(50, 50, 75, 50);
-    ctx.fillStyle = 'rgba(0, 200, 0, 1)';
-    ctx.fillRect(70, 70, 75, 50);
-
-    ctx.endLayer();
-
-    const bitmap = canvas.transferToImageBitmap();
-    self.postMessage(bitmap, bitmap);
-  };
-</script>
-<script>
-  const blob = new Blob([document.getElementById('myWorker').textContent]);
-  const worker = new Worker(URL.createObjectURL(blob));
-  worker.addEventListener('message', msg => {
-    const outputCtx = document.getElementById("canvas").getContext('2d');
-    outputCtx.drawImage(msg.data, 0, 0);
-    document.documentElement.classList.remove("reftest-wait");
-  });
-  worker.postMessage(null);
-</script>
-</html>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending-expected.html
deleted file mode 100644
index f81dcf72dc..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending-expected.html
+++ /dev/null
@@ -1,50 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>Canvas test: 2d.layer.global-states.filter.blending</title>
-<h1>2d.layer.global-states.filter.blending</h1>
-<p class="desc">Checks that layers with filters correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
-  const canvas = document.getElementById("canvas");
-  const ctx = canvas.getContext('2d');
-
-  const svg = `
-    <svg xmlns="http://www.w3.org/2000/svg"
-          width="200" height="200"
-          color-interpolation-filters="sRGB">
-      <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
-        <feColorMatrix
-            type="matrix"
-            values="0.393 0.769 0.189 0 0
-                    0.349 0.686 0.168 0 0
-                    0.272 0.534 0.131 0 0
-                    0 0 0 1 0" />
-        <feComponentTransfer>
-          <feFuncA type="table" tableValues="0 0.7"></feFuncA>
-        </feComponentTransfer>
-        <feDropShadow dx="5" dy="5" flood-color="#81e" />
-      </filter>
-      <g filter="url(#filter)">
-        <rect x="50" y="50" width="75" height="50" fill="rgba(200, 0, 0, 1)"/>
-        <rect x="70" y="70" width="75" height="50" fill="rgba(0, 200, 0, 1)"/>
-      </g>
-    </svg>`;
-
-  const img = new Image();
-  img.width = 200;
-  img.height = 200;
-  img.onload = () => {
-    ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
-    var circle = new Path2D();
-    circle.arc(90, 90, 45, 0, 2 * Math.PI);
-    ctx.fill(circle);
-
-    ctx.globalCompositeOperation = 'multiply';
-
-    ctx.drawImage(img, 0, 0);
-  };
-  img.src = 'data:image/svg+xml;base64,' + btoa(svg);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.html
deleted file mode 100644
index ce2b046798..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.html
+++ /dev/null
@@ -1,40 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<link rel="match" href="2d.layer.global-states.filter.blending-expected.html">
-<title>Canvas test: 2d.layer.global-states.filter.blending</title>
-<h1>2d.layer.global-states.filter.blending</h1>
-<p class="desc">Checks that layers with filters correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
-  const canvas = new OffscreenCanvas(200, 200);
-  const ctx = canvas.getContext('2d');
-
-  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
-  var circle = new Path2D();
-  circle.arc(90, 90, 45, 0, 2 * Math.PI);
-  ctx.fill(circle);
-
-  ctx.globalCompositeOperation = 'multiply';
-
-  ctx.beginLayer({filter: [
-      {name: 'colorMatrix', values: [0.393, 0.769, 0.189, 0, 0,
-                                     0.349, 0.686, 0.168, 0, 0,
-                                     0.272, 0.534, 0.131, 0, 0,
-                                     0, 0, 0, 1, 0]},
-      {name: 'componentTransfer',
-          funcA: {type: "table", tableValues: [0, 0.7]}},
-      {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]});
-
-  ctx.fillStyle = 'rgba(200, 0, 0, 1)';
-  ctx.fillRect(50, 50, 75, 50);
-  ctx.fillStyle = 'rgba(0, 200, 0, 1)';
-  ctx.fillRect(70, 70, 75, 50);
-
-  ctx.endLayer();
-
-  const outputCanvas = document.getElementById("canvas");
-  outputCanvas.getContext('2d').drawImage(canvas, 0, 0);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.no-shadow.no-transform-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.no-shadow.no-transform-expected.html
new file mode 100644
index 0000000000..482ab25a85
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.no-shadow.no-transform-expected.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.global-states.filter.blending.no-shadow.no-transform</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.filter.blending.no-shadow.no-transform</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas0");
+    const ctx = canvas.getContext('2d');
+
+    const svg = `
+      <svg xmlns="http://www.w3.org/2000/svg"
+            width="90" height="90"
+            color-interpolation-filters="sRGB">
+        <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+          <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
+          <feComponentTransfer>
+            <feFuncA type="table" tableValues="0 0.8"></feFuncA>
+          </feComponentTransfer>
+        </filter>
+        <g filter="url(#filter)">
+          <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/>
+          <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/>
+        </g>
+      </svg>`;
+
+    const img = new Image();
+    img.width = 90;
+    img.height = 90;
+    img.onload = () => {
+      // No transform.
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      // No globalAlpha.
+      ctx.globalCompositeOperation = 'multiply';
+      // No shadow.
+
+      ctx.drawImage(img, 0, 0);
+    };
+    img.src = 'data:image/svg+xml;base64,' + btoa(svg);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas1");
+    const ctx = canvas.getContext('2d');
+
+    const svg = `
+      <svg xmlns="http://www.w3.org/2000/svg"
+            width="90" height="90"
+            color-interpolation-filters="sRGB">
+        <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+          <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
+          <feComponentTransfer>
+            <feFuncA type="table" tableValues="0 0.8"></feFuncA>
+          </feComponentTransfer>
+        </filter>
+        <g filter="url(#filter)">
+          <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/>
+          <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/>
+        </g>
+      </svg>`;
+
+    const img = new Image();
+    img.width = 90;
+    img.height = 90;
+    img.onload = () => {
+      // No transform.
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      ctx.globalAlpha = 0.75;
+      ctx.globalCompositeOperation = 'multiply';
+      // No shadow.
+
+      ctx.drawImage(img, 0, 0);
+    };
+    img.src = 'data:image/svg+xml;base64,' + btoa(svg);
+  </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.no-shadow.no-transform.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.no-shadow.no-transform.html
new file mode 100644
index 0000000000..8acbfa668f
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.no-shadow.no-transform.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.filter.blending.no-shadow.no-transform-expected.html">
+<title>Canvas test: 2d.layer.global-states.filter.blending.no-shadow.no-transform</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.filter.blending.no-shadow.no-transform</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    // No transform.
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    // No globalAlpha.
+    ctx.globalCompositeOperation = 'multiply';
+    // No shadow.
+
+    ctx.beginLayer({filter: [
+        {name: 'dropShadow',
+            dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+        {name: 'componentTransfer',
+            funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+    ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx.fillRect(10, 25, 40, 50);
+    ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx.fillRect(30, 5, 50, 40);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas0");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    // No transform.
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'multiply';
+    // No shadow.
+
+    ctx.beginLayer({filter: [
+        {name: 'dropShadow',
+            dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+        {name: 'componentTransfer',
+            funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+    ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx.fillRect(10, 25, 40, 50);
+    ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx.fillRect(30, 5, 50, 40);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas1");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.no-shadow.no-transform.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.no-shadow.no-transform.w.html
new file mode 100644
index 0000000000..93edfabdf3
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.no-shadow.no-transform.w.html
@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<html class="reftest-wait">
+<link rel="match" href="2d.layer.global-states.filter.blending.no-shadow.no-transform-expected.html">
+<title>Canvas test: 2d.layer.global-states.filter.blending.no-shadow.no-transform</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.filter.blending.no-shadow.no-transform</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+<script>pending_tests = 2;</script>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker0" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      // No transform.
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      // No globalAlpha.
+      ctx.globalCompositeOperation = 'multiply';
+      // No shadow.
+
+      ctx.beginLayer({filter: [
+          {name: 'dropShadow',
+              dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+          {name: 'componentTransfer',
+              funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+      ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+      ctx.fillRect(10, 25, 40, 50);
+      ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+      ctx.fillRect(30, 5, 50, 40);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker0').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas0');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker1" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      // No transform.
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      ctx.globalAlpha = 0.75;
+      ctx.globalCompositeOperation = 'multiply';
+      // No shadow.
+
+      ctx.beginLayer({filter: [
+          {name: 'dropShadow',
+              dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+          {name: 'componentTransfer',
+              funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+      ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+      ctx.fillRect(10, 25, 40, 50);
+      ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+      ctx.fillRect(30, 5, 50, 40);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker1').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas1');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+</div>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.no-shadow.rotation-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.no-shadow.rotation-expected.html
new file mode 100644
index 0000000000..3af6b863ed
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.no-shadow.rotation-expected.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.global-states.filter.blending.no-shadow.rotation</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.filter.blending.no-shadow.rotation</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas0");
+    const ctx = canvas.getContext('2d');
+
+    const svg = `
+      <svg xmlns="http://www.w3.org/2000/svg"
+            width="90" height="90"
+            color-interpolation-filters="sRGB">
+        <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+          <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
+          <feComponentTransfer>
+            <feFuncA type="table" tableValues="0 0.8"></feFuncA>
+          </feComponentTransfer>
+        </filter>
+        <g filter="url(#filter)">
+          <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/>
+          <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/>
+        </g>
+      </svg>`;
+
+    const img = new Image();
+    img.width = 90;
+    img.height = 90;
+    img.onload = () => {
+      ctx.translate(50, 40);
+      ctx.rotate(Math.PI);
+      ctx.translate(-45, -45);
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      // No globalAlpha.
+      ctx.globalCompositeOperation = 'multiply';
+      // No shadow.
+
+      ctx.drawImage(img, 0, 0);
+    };
+    img.src = 'data:image/svg+xml;base64,' + btoa(svg);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas1");
+    const ctx = canvas.getContext('2d');
+
+    const svg = `
+      <svg xmlns="http://www.w3.org/2000/svg"
+            width="90" height="90"
+            color-interpolation-filters="sRGB">
+        <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+          <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
+          <feComponentTransfer>
+            <feFuncA type="table" tableValues="0 0.8"></feFuncA>
+          </feComponentTransfer>
+        </filter>
+        <g filter="url(#filter)">
+          <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/>
+          <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/>
+        </g>
+      </svg>`;
+
+    const img = new Image();
+    img.width = 90;
+    img.height = 90;
+    img.onload = () => {
+      ctx.translate(50, 40);
+      ctx.rotate(Math.PI);
+      ctx.translate(-45, -45);
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      ctx.globalAlpha = 0.75;
+      ctx.globalCompositeOperation = 'multiply';
+      // No shadow.
+
+      ctx.drawImage(img, 0, 0);
+    };
+    img.src = 'data:image/svg+xml;base64,' + btoa(svg);
+  </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.no-shadow.rotation.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.no-shadow.rotation.html
new file mode 100644
index 0000000000..0a4a8c65d2
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.no-shadow.rotation.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.filter.blending.no-shadow.rotation-expected.html">
+<title>Canvas test: 2d.layer.global-states.filter.blending.no-shadow.rotation</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.filter.blending.no-shadow.rotation</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 40);
+    ctx.rotate(Math.PI);
+    ctx.translate(-45, -45);
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    // No globalAlpha.
+    ctx.globalCompositeOperation = 'multiply';
+    // No shadow.
+
+    ctx.beginLayer({filter: [
+        {name: 'dropShadow',
+            dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+        {name: 'componentTransfer',
+            funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+    ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx.fillRect(10, 25, 40, 50);
+    ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx.fillRect(30, 5, 50, 40);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas0");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 40);
+    ctx.rotate(Math.PI);
+    ctx.translate(-45, -45);
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'multiply';
+    // No shadow.
+
+    ctx.beginLayer({filter: [
+        {name: 'dropShadow',
+            dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+        {name: 'componentTransfer',
+            funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+    ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx.fillRect(10, 25, 40, 50);
+    ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx.fillRect(30, 5, 50, 40);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas1");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.no-shadow.rotation.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.no-shadow.rotation.w.html
new file mode 100644
index 0000000000..7caaf1edee
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.no-shadow.rotation.w.html
@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<html class="reftest-wait">
+<link rel="match" href="2d.layer.global-states.filter.blending.no-shadow.rotation-expected.html">
+<title>Canvas test: 2d.layer.global-states.filter.blending.no-shadow.rotation</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.filter.blending.no-shadow.rotation</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+<script>pending_tests = 2;</script>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker0" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      ctx.translate(50, 40);
+      ctx.rotate(Math.PI);
+      ctx.translate(-45, -45);
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      // No globalAlpha.
+      ctx.globalCompositeOperation = 'multiply';
+      // No shadow.
+
+      ctx.beginLayer({filter: [
+          {name: 'dropShadow',
+              dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+          {name: 'componentTransfer',
+              funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+      ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+      ctx.fillRect(10, 25, 40, 50);
+      ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+      ctx.fillRect(30, 5, 50, 40);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker0').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas0');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker1" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      ctx.translate(50, 40);
+      ctx.rotate(Math.PI);
+      ctx.translate(-45, -45);
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      ctx.globalAlpha = 0.75;
+      ctx.globalCompositeOperation = 'multiply';
+      // No shadow.
+
+      ctx.beginLayer({filter: [
+          {name: 'dropShadow',
+              dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+          {name: 'componentTransfer',
+              funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+      ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+      ctx.fillRect(10, 25, 40, 50);
+      ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+      ctx.fillRect(30, 5, 50, 40);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker1').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas1');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+</div>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow-expected.html
deleted file mode 100644
index 91f3725f8e..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow-expected.html
+++ /dev/null
@@ -1,54 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>Canvas test: 2d.layer.global-states.filter.blending.shadow</title>
-<h1>2d.layer.global-states.filter.blending.shadow</h1>
-<p class="desc">Checks that layers with filters correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
-  const canvas = document.getElementById("canvas");
-  const ctx = canvas.getContext('2d');
-
-  const svg = `
-    <svg xmlns="http://www.w3.org/2000/svg"
-          width="200" height="200"
-          color-interpolation-filters="sRGB">
-      <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
-        <feColorMatrix
-            type="matrix"
-            values="0.393 0.769 0.189 0 0
-                    0.349 0.686 0.168 0 0
-                    0.272 0.534 0.131 0 0
-                    0 0 0 1 0" />
-        <feComponentTransfer>
-          <feFuncA type="table" tableValues="0 0.7"></feFuncA>
-        </feComponentTransfer>
-        <feDropShadow dx="5" dy="5" flood-color="#81e" />
-      </filter>
-      <g filter="url(#filter)">
-        <rect x="50" y="50" width="75" height="50" fill="rgba(200, 0, 0, 1)"/>
-        <rect x="70" y="70" width="75" height="50" fill="rgba(0, 200, 0, 1)"/>
-      </g>
-    </svg>`;
-
-  const img = new Image();
-  img.width = 200;
-  img.height = 200;
-  img.onload = () => {
-    ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
-    var circle = new Path2D();
-    circle.arc(90, 90, 45, 0, 2 * Math.PI);
-    ctx.fill(circle);
-
-    ctx.globalCompositeOperation = 'multiply';
-  ctx.shadowOffsetX = -10;
-  ctx.shadowOffsetY = 10;
-  ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
-  ctx.shadowBlur = 3;
-
-    ctx.drawImage(img, 0, 0);
-  };
-  img.src = 'data:image/svg+xml;base64,' + btoa(svg);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.html
deleted file mode 100644
index d0d429bee3..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.html
+++ /dev/null
@@ -1,44 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<link rel="match" href="2d.layer.global-states.filter.blending.shadow-expected.html">
-<title>Canvas test: 2d.layer.global-states.filter.blending.shadow</title>
-<h1>2d.layer.global-states.filter.blending.shadow</h1>
-<p class="desc">Checks that layers with filters correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
-  const canvas = new OffscreenCanvas(200, 200);
-  const ctx = canvas.getContext('2d');
-
-  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
-  var circle = new Path2D();
-  circle.arc(90, 90, 45, 0, 2 * Math.PI);
-  ctx.fill(circle);
-
-  ctx.globalCompositeOperation = 'multiply';
-  ctx.shadowOffsetX = -10;
-  ctx.shadowOffsetY = 10;
-  ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
-  ctx.shadowBlur = 3;
-
-  ctx.beginLayer({filter: [
-      {name: 'colorMatrix', values: [0.393, 0.769, 0.189, 0, 0,
-                                     0.349, 0.686, 0.168, 0, 0,
-                                     0.272, 0.534, 0.131, 0, 0,
-                                     0, 0, 0, 1, 0]},
-      {name: 'componentTransfer',
-          funcA: {type: "table", tableValues: [0, 0.7]}},
-      {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]});
-
-  ctx.fillStyle = 'rgba(200, 0, 0, 1)';
-  ctx.fillRect(50, 50, 75, 50);
-  ctx.fillStyle = 'rgba(0, 200, 0, 1)';
-  ctx.fillRect(70, 70, 75, 50);
-
-  ctx.endLayer();
-
-  const outputCanvas = document.getElementById("canvas");
-  outputCanvas.getContext('2d').drawImage(canvas, 0, 0);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.no-transform-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.no-transform-expected.html
new file mode 100644
index 0000000000..d530ef9d19
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.no-transform-expected.html
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.global-states.filter.blending.shadow.no-transform</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.filter.blending.shadow.no-transform</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas0");
+    const ctx = canvas.getContext('2d');
+
+    const svg = `
+      <svg xmlns="http://www.w3.org/2000/svg"
+            width="90" height="90"
+            color-interpolation-filters="sRGB">
+        <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+          <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
+          <feComponentTransfer>
+            <feFuncA type="table" tableValues="0 0.8"></feFuncA>
+          </feComponentTransfer>
+        </filter>
+        <g filter="url(#filter)">
+          <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/>
+          <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/>
+        </g>
+      </svg>`;
+
+    const img = new Image();
+    img.width = 90;
+    img.height = 90;
+    img.onload = () => {
+      // No transform.
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      // No globalAlpha.
+      ctx.globalCompositeOperation = 'multiply';
+      ctx.shadowOffsetX = -7;
+      ctx.shadowOffsetY = 7;
+      ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+      ctx.shadowBlur = 3;
+
+      ctx.drawImage(img, 0, 0);
+    };
+    img.src = 'data:image/svg+xml;base64,' + btoa(svg);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas1");
+    const ctx = canvas.getContext('2d');
+
+    const svg = `
+      <svg xmlns="http://www.w3.org/2000/svg"
+            width="90" height="90"
+            color-interpolation-filters="sRGB">
+        <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+          <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
+          <feComponentTransfer>
+            <feFuncA type="table" tableValues="0 0.8"></feFuncA>
+          </feComponentTransfer>
+        </filter>
+        <g filter="url(#filter)">
+          <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/>
+          <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/>
+        </g>
+      </svg>`;
+
+    const img = new Image();
+    img.width = 90;
+    img.height = 90;
+    img.onload = () => {
+      // No transform.
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      ctx.globalAlpha = 0.75;
+      ctx.globalCompositeOperation = 'multiply';
+      ctx.shadowOffsetX = -7;
+      ctx.shadowOffsetY = 7;
+      ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+      ctx.shadowBlur = 3;
+
+      ctx.drawImage(img, 0, 0);
+    };
+    img.src = 'data:image/svg+xml;base64,' + btoa(svg);
+  </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.no-transform.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.no-transform.html
new file mode 100644
index 0000000000..1ee3254324
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.no-transform.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.filter.blending.shadow.no-transform-expected.html">
+<title>Canvas test: 2d.layer.global-states.filter.blending.shadow.no-transform</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.filter.blending.shadow.no-transform</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    // No transform.
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    // No globalAlpha.
+    ctx.globalCompositeOperation = 'multiply';
+    ctx.shadowOffsetX = -7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+    ctx.shadowBlur = 3;
+
+    ctx.beginLayer({filter: [
+        {name: 'dropShadow',
+            dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+        {name: 'componentTransfer',
+            funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+    ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx.fillRect(10, 25, 40, 50);
+    ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx.fillRect(30, 5, 50, 40);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas0");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    // No transform.
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'multiply';
+    ctx.shadowOffsetX = -7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+    ctx.shadowBlur = 3;
+
+    ctx.beginLayer({filter: [
+        {name: 'dropShadow',
+            dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+        {name: 'componentTransfer',
+            funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+    ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx.fillRect(10, 25, 40, 50);
+    ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx.fillRect(30, 5, 50, 40);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas1");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.no-transform.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.no-transform.w.html
new file mode 100644
index 0000000000..3ec656c135
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.no-transform.w.html
@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<html class="reftest-wait">
+<link rel="match" href="2d.layer.global-states.filter.blending.shadow.no-transform-expected.html">
+<title>Canvas test: 2d.layer.global-states.filter.blending.shadow.no-transform</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.filter.blending.shadow.no-transform</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+<script>pending_tests = 2;</script>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker0" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      // No transform.
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      // No globalAlpha.
+      ctx.globalCompositeOperation = 'multiply';
+      ctx.shadowOffsetX = -7;
+      ctx.shadowOffsetY = 7;
+      ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+      ctx.shadowBlur = 3;
+
+      ctx.beginLayer({filter: [
+          {name: 'dropShadow',
+              dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+          {name: 'componentTransfer',
+              funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+      ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+      ctx.fillRect(10, 25, 40, 50);
+      ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+      ctx.fillRect(30, 5, 50, 40);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker0').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas0');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker1" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      // No transform.
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      ctx.globalAlpha = 0.75;
+      ctx.globalCompositeOperation = 'multiply';
+      ctx.shadowOffsetX = -7;
+      ctx.shadowOffsetY = 7;
+      ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+      ctx.shadowBlur = 3;
+
+      ctx.beginLayer({filter: [
+          {name: 'dropShadow',
+              dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+          {name: 'componentTransfer',
+              funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+      ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+      ctx.fillRect(10, 25, 40, 50);
+      ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+      ctx.fillRect(30, 5, 50, 40);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker1').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas1');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+</div>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.rotation-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.rotation-expected.html
new file mode 100644
index 0000000000..80705c36fd
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.rotation-expected.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.global-states.filter.blending.shadow.rotation</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.filter.blending.shadow.rotation</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas0");
+    const ctx = canvas.getContext('2d');
+
+    const svg = `
+      <svg xmlns="http://www.w3.org/2000/svg"
+            width="90" height="90"
+            color-interpolation-filters="sRGB">
+        <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+          <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
+          <feComponentTransfer>
+            <feFuncA type="table" tableValues="0 0.8"></feFuncA>
+          </feComponentTransfer>
+        </filter>
+        <g filter="url(#filter)">
+          <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/>
+          <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/>
+        </g>
+      </svg>`;
+
+    const img = new Image();
+    img.width = 90;
+    img.height = 90;
+    img.onload = () => {
+      ctx.translate(50, 40);
+      ctx.rotate(Math.PI);
+      ctx.translate(-45, -45);
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      // No globalAlpha.
+      ctx.globalCompositeOperation = 'multiply';
+      ctx.shadowOffsetX = -7;
+      ctx.shadowOffsetY = 7;
+      ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+      ctx.shadowBlur = 3;
+
+      ctx.drawImage(img, 0, 0);
+    };
+    img.src = 'data:image/svg+xml;base64,' + btoa(svg);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas1");
+    const ctx = canvas.getContext('2d');
+
+    const svg = `
+      <svg xmlns="http://www.w3.org/2000/svg"
+            width="90" height="90"
+            color-interpolation-filters="sRGB">
+        <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+          <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
+          <feComponentTransfer>
+            <feFuncA type="table" tableValues="0 0.8"></feFuncA>
+          </feComponentTransfer>
+        </filter>
+        <g filter="url(#filter)">
+          <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/>
+          <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/>
+        </g>
+      </svg>`;
+
+    const img = new Image();
+    img.width = 90;
+    img.height = 90;
+    img.onload = () => {
+      ctx.translate(50, 40);
+      ctx.rotate(Math.PI);
+      ctx.translate(-45, -45);
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      ctx.globalAlpha = 0.75;
+      ctx.globalCompositeOperation = 'multiply';
+      ctx.shadowOffsetX = -7;
+      ctx.shadowOffsetY = 7;
+      ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+      ctx.shadowBlur = 3;
+
+      ctx.drawImage(img, 0, 0);
+    };
+    img.src = 'data:image/svg+xml;base64,' + btoa(svg);
+  </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.rotation.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.rotation.html
new file mode 100644
index 0000000000..62af08d2ac
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.rotation.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.filter.blending.shadow.rotation-expected.html">
+<title>Canvas test: 2d.layer.global-states.filter.blending.shadow.rotation</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.filter.blending.shadow.rotation</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 40);
+    ctx.rotate(Math.PI);
+    ctx.translate(-45, -45);
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    // No globalAlpha.
+    ctx.globalCompositeOperation = 'multiply';
+    ctx.shadowOffsetX = -7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+    ctx.shadowBlur = 3;
+
+    ctx.beginLayer({filter: [
+        {name: 'dropShadow',
+            dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+        {name: 'componentTransfer',
+            funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+    ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx.fillRect(10, 25, 40, 50);
+    ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx.fillRect(30, 5, 50, 40);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas0");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 40);
+    ctx.rotate(Math.PI);
+    ctx.translate(-45, -45);
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'multiply';
+    ctx.shadowOffsetX = -7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+    ctx.shadowBlur = 3;
+
+    ctx.beginLayer({filter: [
+        {name: 'dropShadow',
+            dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+        {name: 'componentTransfer',
+            funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+    ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx.fillRect(10, 25, 40, 50);
+    ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx.fillRect(30, 5, 50, 40);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas1");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.rotation.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.rotation.w.html
new file mode 100644
index 0000000000..d5693cdcdc
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.rotation.w.html
@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<html class="reftest-wait">
+<link rel="match" href="2d.layer.global-states.filter.blending.shadow.rotation-expected.html">
+<title>Canvas test: 2d.layer.global-states.filter.blending.shadow.rotation</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.filter.blending.shadow.rotation</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+<script>pending_tests = 2;</script>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker0" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      ctx.translate(50, 40);
+      ctx.rotate(Math.PI);
+      ctx.translate(-45, -45);
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      // No globalAlpha.
+      ctx.globalCompositeOperation = 'multiply';
+      ctx.shadowOffsetX = -7;
+      ctx.shadowOffsetY = 7;
+      ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+      ctx.shadowBlur = 3;
+
+      ctx.beginLayer({filter: [
+          {name: 'dropShadow',
+              dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+          {name: 'componentTransfer',
+              funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+      ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+      ctx.fillRect(10, 25, 40, 50);
+      ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+      ctx.fillRect(30, 5, 50, 40);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker0').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas0');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker1" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      ctx.translate(50, 40);
+      ctx.rotate(Math.PI);
+      ctx.translate(-45, -45);
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      ctx.globalAlpha = 0.75;
+      ctx.globalCompositeOperation = 'multiply';
+      ctx.shadowOffsetX = -7;
+      ctx.shadowOffsetY = 7;
+      ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+      ctx.shadowBlur = 3;
+
+      ctx.beginLayer({filter: [
+          {name: 'dropShadow',
+              dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+          {name: 'componentTransfer',
+              funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+      ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+      ctx.fillRect(10, 25, 40, 50);
+      ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+      ctx.fillRect(30, 5, 50, 40);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker1').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas1');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+</div>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.w.html
deleted file mode 100644
index ce432ea74d..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.w.html
+++ /dev/null
@@ -1,58 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<html class="reftest-wait">
-<link rel="match" href="2d.layer.global-states.filter.blending.shadow-expected.html">
-<title>Canvas test: 2d.layer.global-states.filter.blending.shadow</title>
-<h1>2d.layer.global-states.filter.blending.shadow</h1>
-<p class="desc">Checks that layers with filters correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script id='myWorker' type='text/worker'>
-  self.onmessage = function(e) {
-    const canvas = new OffscreenCanvas(200, 200);
-    const ctx = canvas.getContext('2d');
-
-    ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
-    var circle = new Path2D();
-    circle.arc(90, 90, 45, 0, 2 * Math.PI);
-    ctx.fill(circle);
-
-    ctx.globalCompositeOperation = 'multiply';
-    ctx.shadowOffsetX = -10;
-    ctx.shadowOffsetY = 10;
-    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
-    ctx.shadowBlur = 3;
-
-    ctx.beginLayer({filter: [
-        {name: 'colorMatrix', values: [0.393, 0.769, 0.189, 0, 0,
-                                       0.349, 0.686, 0.168, 0, 0,
-                                       0.272, 0.534, 0.131, 0, 0,
-                                       0, 0, 0, 1, 0]},
-        {name: 'componentTransfer',
-            funcA: {type: "table", tableValues: [0, 0.7]}},
-        {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]});
-
-    ctx.fillStyle = 'rgba(200, 0, 0, 1)';
-    ctx.fillRect(50, 50, 75, 50);
-    ctx.fillStyle = 'rgba(0, 200, 0, 1)';
-    ctx.fillRect(70, 70, 75, 50);
-
-    ctx.endLayer();
-
-    const bitmap = canvas.transferToImageBitmap();
-    self.postMessage(bitmap, bitmap);
-  };
-</script>
-<script>
-  const blob = new Blob([document.getElementById('myWorker').textContent]);
-  const worker = new Worker(URL.createObjectURL(blob));
-  worker.addEventListener('message', msg => {
-    const outputCtx = document.getElementById("canvas").getContext('2d');
-    outputCtx.drawImage(msg.data, 0, 0);
-    document.documentElement.classList.remove("reftest-wait");
-  });
-  worker.postMessage(null);
-</script>
-</html>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.w.html
deleted file mode 100644
index bb101cdc0b..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.w.html
+++ /dev/null
@@ -1,54 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<html class="reftest-wait">
-<link rel="match" href="2d.layer.global-states.filter.blending-expected.html">
-<title>Canvas test: 2d.layer.global-states.filter.blending</title>
-<h1>2d.layer.global-states.filter.blending</h1>
-<p class="desc">Checks that layers with filters correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script id='myWorker' type='text/worker'>
-  self.onmessage = function(e) {
-    const canvas = new OffscreenCanvas(200, 200);
-    const ctx = canvas.getContext('2d');
-
-    ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
-    var circle = new Path2D();
-    circle.arc(90, 90, 45, 0, 2 * Math.PI);
-    ctx.fill(circle);
-
-    ctx.globalCompositeOperation = 'multiply';
-
-    ctx.beginLayer({filter: [
-        {name: 'colorMatrix', values: [0.393, 0.769, 0.189, 0, 0,
-                                       0.349, 0.686, 0.168, 0, 0,
-                                       0.272, 0.534, 0.131, 0, 0,
-                                       0, 0, 0, 1, 0]},
-        {name: 'componentTransfer',
-            funcA: {type: "table", tableValues: [0, 0.7]}},
-        {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]});
-
-    ctx.fillStyle = 'rgba(200, 0, 0, 1)';
-    ctx.fillRect(50, 50, 75, 50);
-    ctx.fillStyle = 'rgba(0, 200, 0, 1)';
-    ctx.fillRect(70, 70, 75, 50);
-
-    ctx.endLayer();
-
-    const bitmap = canvas.transferToImageBitmap();
-    self.postMessage(bitmap, bitmap);
-  };
-</script>
-<script>
-  const blob = new Blob([document.getElementById('myWorker').textContent]);
-  const worker = new Worker(URL.createObjectURL(blob));
-  worker.addEventListener('message', msg => {
-    const outputCtx = document.getElementById("canvas").getContext('2d');
-    outputCtx.drawImage(msg.data, 0, 0);
-    document.documentElement.classList.remove("reftest-wait");
-  });
-  worker.postMessage(null);
-</script>
-</html>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite-expected.html
deleted file mode 100644
index 97e85a1593..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite-expected.html
+++ /dev/null
@@ -1,50 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>Canvas test: 2d.layer.global-states.filter.composite</title>
-<h1>2d.layer.global-states.filter.composite</h1>
-<p class="desc">Checks that layers with filters correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
-  const canvas = document.getElementById("canvas");
-  const ctx = canvas.getContext('2d');
-
-  const svg = `
-    <svg xmlns="http://www.w3.org/2000/svg"
-          width="200" height="200"
-          color-interpolation-filters="sRGB">
-      <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
-        <feColorMatrix
-            type="matrix"
-            values="0.393 0.769 0.189 0 0
-                    0.349 0.686 0.168 0 0
-                    0.272 0.534 0.131 0 0
-                    0 0 0 1 0" />
-        <feComponentTransfer>
-          <feFuncA type="table" tableValues="0 0.7"></feFuncA>
-        </feComponentTransfer>
-        <feDropShadow dx="5" dy="5" flood-color="#81e" />
-      </filter>
-      <g filter="url(#filter)">
-        <rect x="50" y="50" width="75" height="50" fill="rgba(200, 0, 0, 1)"/>
-        <rect x="70" y="70" width="75" height="50" fill="rgba(0, 200, 0, 1)"/>
-      </g>
-    </svg>`;
-
-  const img = new Image();
-  img.width = 200;
-  img.height = 200;
-  img.onload = () => {
-    ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
-    var circle = new Path2D();
-    circle.arc(90, 90, 45, 0, 2 * Math.PI);
-    ctx.fill(circle);
-
-    ctx.globalCompositeOperation = 'source-in';
-
-    ctx.drawImage(img, 0, 0);
-  };
-  img.src = 'data:image/svg+xml;base64,' + btoa(svg);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.html
deleted file mode 100644
index 32052a1150..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.html
+++ /dev/null
@@ -1,40 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<link rel="match" href="2d.layer.global-states.filter.composite-expected.html">
-<title>Canvas test: 2d.layer.global-states.filter.composite</title>
-<h1>2d.layer.global-states.filter.composite</h1>
-<p class="desc">Checks that layers with filters correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
-  const canvas = new OffscreenCanvas(200, 200);
-  const ctx = canvas.getContext('2d');
-
-  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
-  var circle = new Path2D();
-  circle.arc(90, 90, 45, 0, 2 * Math.PI);
-  ctx.fill(circle);
-
-  ctx.globalCompositeOperation = 'source-in';
-
-  ctx.beginLayer({filter: [
-      {name: 'colorMatrix', values: [0.393, 0.769, 0.189, 0, 0,
-                                     0.349, 0.686, 0.168, 0, 0,
-                                     0.272, 0.534, 0.131, 0, 0,
-                                     0, 0, 0, 1, 0]},
-      {name: 'componentTransfer',
-          funcA: {type: "table", tableValues: [0, 0.7]}},
-      {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]});
-
-  ctx.fillStyle = 'rgba(200, 0, 0, 1)';
-  ctx.fillRect(50, 50, 75, 50);
-  ctx.fillStyle = 'rgba(0, 200, 0, 1)';
-  ctx.fillRect(70, 70, 75, 50);
-
-  ctx.endLayer();
-
-  const outputCanvas = document.getElementById("canvas");
-  outputCanvas.getContext('2d').drawImage(canvas, 0, 0);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.no-shadow.no-transform-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.no-shadow.no-transform-expected.html
new file mode 100644
index 0000000000..2f513bff0a
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.no-shadow.no-transform-expected.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.global-states.filter.composite.no-shadow.no-transform</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.filter.composite.no-shadow.no-transform</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas0");
+    const ctx = canvas.getContext('2d');
+
+    const svg = `
+      <svg xmlns="http://www.w3.org/2000/svg"
+            width="90" height="90"
+            color-interpolation-filters="sRGB">
+        <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+          <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
+          <feComponentTransfer>
+            <feFuncA type="table" tableValues="0 0.8"></feFuncA>
+          </feComponentTransfer>
+        </filter>
+        <g filter="url(#filter)">
+          <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/>
+          <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/>
+        </g>
+      </svg>`;
+
+    const img = new Image();
+    img.width = 90;
+    img.height = 90;
+    img.onload = () => {
+      // No transform.
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      // No globalAlpha.
+      ctx.globalCompositeOperation = 'source-in';
+      // No shadow.
+
+      ctx.drawImage(img, 0, 0);
+    };
+    img.src = 'data:image/svg+xml;base64,' + btoa(svg);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas1");
+    const ctx = canvas.getContext('2d');
+
+    const svg = `
+      <svg xmlns="http://www.w3.org/2000/svg"
+            width="90" height="90"
+            color-interpolation-filters="sRGB">
+        <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+          <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
+          <feComponentTransfer>
+            <feFuncA type="table" tableValues="0 0.8"></feFuncA>
+          </feComponentTransfer>
+        </filter>
+        <g filter="url(#filter)">
+          <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/>
+          <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/>
+        </g>
+      </svg>`;
+
+    const img = new Image();
+    img.width = 90;
+    img.height = 90;
+    img.onload = () => {
+      // No transform.
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      ctx.globalAlpha = 0.75;
+      ctx.globalCompositeOperation = 'source-in';
+      // No shadow.
+
+      ctx.drawImage(img, 0, 0);
+    };
+    img.src = 'data:image/svg+xml;base64,' + btoa(svg);
+  </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.no-shadow.no-transform.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.no-shadow.no-transform.html
new file mode 100644
index 0000000000..17394aa4c8
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.no-shadow.no-transform.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.filter.composite.no-shadow.no-transform-expected.html">
+<title>Canvas test: 2d.layer.global-states.filter.composite.no-shadow.no-transform</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.filter.composite.no-shadow.no-transform</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    // No transform.
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    // No globalAlpha.
+    ctx.globalCompositeOperation = 'source-in';
+    // No shadow.
+
+    ctx.beginLayer({filter: [
+        {name: 'dropShadow',
+            dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+        {name: 'componentTransfer',
+            funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+    ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx.fillRect(10, 25, 40, 50);
+    ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx.fillRect(30, 5, 50, 40);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas0");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    // No transform.
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'source-in';
+    // No shadow.
+
+    ctx.beginLayer({filter: [
+        {name: 'dropShadow',
+            dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+        {name: 'componentTransfer',
+            funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+    ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx.fillRect(10, 25, 40, 50);
+    ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx.fillRect(30, 5, 50, 40);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas1");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.no-shadow.no-transform.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.no-shadow.no-transform.w.html
new file mode 100644
index 0000000000..386ad43b0f
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.no-shadow.no-transform.w.html
@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<html class="reftest-wait">
+<link rel="match" href="2d.layer.global-states.filter.composite.no-shadow.no-transform-expected.html">
+<title>Canvas test: 2d.layer.global-states.filter.composite.no-shadow.no-transform</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.filter.composite.no-shadow.no-transform</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+<script>pending_tests = 2;</script>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker0" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      // No transform.
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      // No globalAlpha.
+      ctx.globalCompositeOperation = 'source-in';
+      // No shadow.
+
+      ctx.beginLayer({filter: [
+          {name: 'dropShadow',
+              dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+          {name: 'componentTransfer',
+              funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+      ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+      ctx.fillRect(10, 25, 40, 50);
+      ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+      ctx.fillRect(30, 5, 50, 40);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker0').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas0');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker1" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      // No transform.
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      ctx.globalAlpha = 0.75;
+      ctx.globalCompositeOperation = 'source-in';
+      // No shadow.
+
+      ctx.beginLayer({filter: [
+          {name: 'dropShadow',
+              dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+          {name: 'componentTransfer',
+              funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+      ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+      ctx.fillRect(10, 25, 40, 50);
+      ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+      ctx.fillRect(30, 5, 50, 40);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker1').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas1');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+</div>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.no-shadow.rotation-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.no-shadow.rotation-expected.html
new file mode 100644
index 0000000000..242973300f
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.no-shadow.rotation-expected.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.global-states.filter.composite.no-shadow.rotation</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.filter.composite.no-shadow.rotation</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas0");
+    const ctx = canvas.getContext('2d');
+
+    const svg = `
+      <svg xmlns="http://www.w3.org/2000/svg"
+            width="90" height="90"
+            color-interpolation-filters="sRGB">
+        <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+          <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
+          <feComponentTransfer>
+            <feFuncA type="table" tableValues="0 0.8"></feFuncA>
+          </feComponentTransfer>
+        </filter>
+        <g filter="url(#filter)">
+          <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/>
+          <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/>
+        </g>
+      </svg>`;
+
+    const img = new Image();
+    img.width = 90;
+    img.height = 90;
+    img.onload = () => {
+      ctx.translate(50, 40);
+      ctx.rotate(Math.PI);
+      ctx.translate(-45, -45);
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      // No globalAlpha.
+      ctx.globalCompositeOperation = 'source-in';
+      // No shadow.
+
+      ctx.drawImage(img, 0, 0);
+    };
+    img.src = 'data:image/svg+xml;base64,' + btoa(svg);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas1");
+    const ctx = canvas.getContext('2d');
+
+    const svg = `
+      <svg xmlns="http://www.w3.org/2000/svg"
+            width="90" height="90"
+            color-interpolation-filters="sRGB">
+        <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+          <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
+          <feComponentTransfer>
+            <feFuncA type="table" tableValues="0 0.8"></feFuncA>
+          </feComponentTransfer>
+        </filter>
+        <g filter="url(#filter)">
+          <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/>
+          <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/>
+        </g>
+      </svg>`;
+
+    const img = new Image();
+    img.width = 90;
+    img.height = 90;
+    img.onload = () => {
+      ctx.translate(50, 40);
+      ctx.rotate(Math.PI);
+      ctx.translate(-45, -45);
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      ctx.globalAlpha = 0.75;
+      ctx.globalCompositeOperation = 'source-in';
+      // No shadow.
+
+      ctx.drawImage(img, 0, 0);
+    };
+    img.src = 'data:image/svg+xml;base64,' + btoa(svg);
+  </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.no-shadow.rotation.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.no-shadow.rotation.html
new file mode 100644
index 0000000000..576283ea73
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.no-shadow.rotation.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.filter.composite.no-shadow.rotation-expected.html">
+<title>Canvas test: 2d.layer.global-states.filter.composite.no-shadow.rotation</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.filter.composite.no-shadow.rotation</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 40);
+    ctx.rotate(Math.PI);
+    ctx.translate(-45, -45);
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    // No globalAlpha.
+    ctx.globalCompositeOperation = 'source-in';
+    // No shadow.
+
+    ctx.beginLayer({filter: [
+        {name: 'dropShadow',
+            dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+        {name: 'componentTransfer',
+            funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+    ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx.fillRect(10, 25, 40, 50);
+    ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx.fillRect(30, 5, 50, 40);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas0");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 40);
+    ctx.rotate(Math.PI);
+    ctx.translate(-45, -45);
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'source-in';
+    // No shadow.
+
+    ctx.beginLayer({filter: [
+        {name: 'dropShadow',
+            dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+        {name: 'componentTransfer',
+            funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+    ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx.fillRect(10, 25, 40, 50);
+    ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx.fillRect(30, 5, 50, 40);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas1");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.no-shadow.rotation.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.no-shadow.rotation.w.html
new file mode 100644
index 0000000000..6dd39d77e9
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.no-shadow.rotation.w.html
@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<html class="reftest-wait">
+<link rel="match" href="2d.layer.global-states.filter.composite.no-shadow.rotation-expected.html">
+<title>Canvas test: 2d.layer.global-states.filter.composite.no-shadow.rotation</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.filter.composite.no-shadow.rotation</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+<script>pending_tests = 2;</script>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker0" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      ctx.translate(50, 40);
+      ctx.rotate(Math.PI);
+      ctx.translate(-45, -45);
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      // No globalAlpha.
+      ctx.globalCompositeOperation = 'source-in';
+      // No shadow.
+
+      ctx.beginLayer({filter: [
+          {name: 'dropShadow',
+              dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+          {name: 'componentTransfer',
+              funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+      ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+      ctx.fillRect(10, 25, 40, 50);
+      ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+      ctx.fillRect(30, 5, 50, 40);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker0').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas0');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker1" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      ctx.translate(50, 40);
+      ctx.rotate(Math.PI);
+      ctx.translate(-45, -45);
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      ctx.globalAlpha = 0.75;
+      ctx.globalCompositeOperation = 'source-in';
+      // No shadow.
+
+      ctx.beginLayer({filter: [
+          {name: 'dropShadow',
+              dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+          {name: 'componentTransfer',
+              funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+      ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+      ctx.fillRect(10, 25, 40, 50);
+      ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+      ctx.fillRect(30, 5, 50, 40);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker1').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas1');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+</div>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow-expected.html
deleted file mode 100644
index 4716bb2760..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow-expected.html
+++ /dev/null
@@ -1,54 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>Canvas test: 2d.layer.global-states.filter.composite.shadow</title>
-<h1>2d.layer.global-states.filter.composite.shadow</h1>
-<p class="desc">Checks that layers with filters correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
-  const canvas = document.getElementById("canvas");
-  const ctx = canvas.getContext('2d');
-
-  const svg = `
-    <svg xmlns="http://www.w3.org/2000/svg"
-          width="200" height="200"
-          color-interpolation-filters="sRGB">
-      <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
-        <feColorMatrix
-            type="matrix"
-            values="0.393 0.769 0.189 0 0
-                    0.349 0.686 0.168 0 0
-                    0.272 0.534 0.131 0 0
-                    0 0 0 1 0" />
-        <feComponentTransfer>
-          <feFuncA type="table" tableValues="0 0.7"></feFuncA>
-        </feComponentTransfer>
-        <feDropShadow dx="5" dy="5" flood-color="#81e" />
-      </filter>
-      <g filter="url(#filter)">
-        <rect x="50" y="50" width="75" height="50" fill="rgba(200, 0, 0, 1)"/>
-        <rect x="70" y="70" width="75" height="50" fill="rgba(0, 200, 0, 1)"/>
-      </g>
-    </svg>`;
-
-  const img = new Image();
-  img.width = 200;
-  img.height = 200;
-  img.onload = () => {
-    ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
-    var circle = new Path2D();
-    circle.arc(90, 90, 45, 0, 2 * Math.PI);
-    ctx.fill(circle);
-
-    ctx.globalCompositeOperation = 'source-in';
-  ctx.shadowOffsetX = -10;
-  ctx.shadowOffsetY = 10;
-  ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
-  ctx.shadowBlur = 3;
-
-    ctx.drawImage(img, 0, 0);
-  };
-  img.src = 'data:image/svg+xml;base64,' + btoa(svg);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.html
deleted file mode 100644
index b5e8b9f843..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.html
+++ /dev/null
@@ -1,44 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<link rel="match" href="2d.layer.global-states.filter.composite.shadow-expected.html">
-<title>Canvas test: 2d.layer.global-states.filter.composite.shadow</title>
-<h1>2d.layer.global-states.filter.composite.shadow</h1>
-<p class="desc">Checks that layers with filters correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
-  const canvas = new OffscreenCanvas(200, 200);
-  const ctx = canvas.getContext('2d');
-
-  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
-  var circle = new Path2D();
-  circle.arc(90, 90, 45, 0, 2 * Math.PI);
-  ctx.fill(circle);
-
-  ctx.globalCompositeOperation = 'source-in';
-  ctx.shadowOffsetX = -10;
-  ctx.shadowOffsetY = 10;
-  ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
-  ctx.shadowBlur = 3;
-
-  ctx.beginLayer({filter: [
-      {name: 'colorMatrix', values: [0.393, 0.769, 0.189, 0, 0,
-                                     0.349, 0.686, 0.168, 0, 0,
-                                     0.272, 0.534, 0.131, 0, 0,
-                                     0, 0, 0, 1, 0]},
-      {name: 'componentTransfer',
-          funcA: {type: "table", tableValues: [0, 0.7]}},
-      {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]});
-
-  ctx.fillStyle = 'rgba(200, 0, 0, 1)';
-  ctx.fillRect(50, 50, 75, 50);
-  ctx.fillStyle = 'rgba(0, 200, 0, 1)';
-  ctx.fillRect(70, 70, 75, 50);
-
-  ctx.endLayer();
-
-  const outputCanvas = document.getElementById("canvas");
-  outputCanvas.getContext('2d').drawImage(canvas, 0, 0);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.no-transform-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.no-transform-expected.html
new file mode 100644
index 0000000000..c8926e5e15
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.no-transform-expected.html
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.global-states.filter.composite.shadow.no-transform</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.filter.composite.shadow.no-transform</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas0");
+    const ctx = canvas.getContext('2d');
+
+    const svg = `
+      <svg xmlns="http://www.w3.org/2000/svg"
+            width="90" height="90"
+            color-interpolation-filters="sRGB">
+        <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+          <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
+          <feComponentTransfer>
+            <feFuncA type="table" tableValues="0 0.8"></feFuncA>
+          </feComponentTransfer>
+        </filter>
+        <g filter="url(#filter)">
+          <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/>
+          <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/>
+        </g>
+      </svg>`;
+
+    const img = new Image();
+    img.width = 90;
+    img.height = 90;
+    img.onload = () => {
+      // No transform.
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      // No globalAlpha.
+      ctx.globalCompositeOperation = 'source-in';
+      ctx.shadowOffsetX = -7;
+      ctx.shadowOffsetY = 7;
+      ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+      ctx.shadowBlur = 3;
+
+      ctx.drawImage(img, 0, 0);
+    };
+    img.src = 'data:image/svg+xml;base64,' + btoa(svg);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas1");
+    const ctx = canvas.getContext('2d');
+
+    const svg = `
+      <svg xmlns="http://www.w3.org/2000/svg"
+            width="90" height="90"
+            color-interpolation-filters="sRGB">
+        <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+          <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
+          <feComponentTransfer>
+            <feFuncA type="table" tableValues="0 0.8"></feFuncA>
+          </feComponentTransfer>
+        </filter>
+        <g filter="url(#filter)">
+          <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/>
+          <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/>
+        </g>
+      </svg>`;
+
+    const img = new Image();
+    img.width = 90;
+    img.height = 90;
+    img.onload = () => {
+      // No transform.
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      ctx.globalAlpha = 0.75;
+      ctx.globalCompositeOperation = 'source-in';
+      ctx.shadowOffsetX = -7;
+      ctx.shadowOffsetY = 7;
+      ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+      ctx.shadowBlur = 3;
+
+      ctx.drawImage(img, 0, 0);
+    };
+    img.src = 'data:image/svg+xml;base64,' + btoa(svg);
+  </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.no-transform.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.no-transform.html
new file mode 100644
index 0000000000..b574a819d6
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.no-transform.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.filter.composite.shadow.no-transform-expected.html">
+<title>Canvas test: 2d.layer.global-states.filter.composite.shadow.no-transform</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.filter.composite.shadow.no-transform</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    // No transform.
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    // No globalAlpha.
+    ctx.globalCompositeOperation = 'source-in';
+    ctx.shadowOffsetX = -7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+    ctx.shadowBlur = 3;
+
+    ctx.beginLayer({filter: [
+        {name: 'dropShadow',
+            dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+        {name: 'componentTransfer',
+            funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+    ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx.fillRect(10, 25, 40, 50);
+    ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx.fillRect(30, 5, 50, 40);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas0");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    // No transform.
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'source-in';
+    ctx.shadowOffsetX = -7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+    ctx.shadowBlur = 3;
+
+    ctx.beginLayer({filter: [
+        {name: 'dropShadow',
+            dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+        {name: 'componentTransfer',
+            funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+    ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx.fillRect(10, 25, 40, 50);
+    ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx.fillRect(30, 5, 50, 40);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas1");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.no-transform.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.no-transform.w.html
new file mode 100644
index 0000000000..96ee1b027b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.no-transform.w.html
@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<html class="reftest-wait">
+<link rel="match" href="2d.layer.global-states.filter.composite.shadow.no-transform-expected.html">
+<title>Canvas test: 2d.layer.global-states.filter.composite.shadow.no-transform</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.filter.composite.shadow.no-transform</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+<script>pending_tests = 2;</script>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker0" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      // No transform.
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      // No globalAlpha.
+      ctx.globalCompositeOperation = 'source-in';
+      ctx.shadowOffsetX = -7;
+      ctx.shadowOffsetY = 7;
+      ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+      ctx.shadowBlur = 3;
+
+      ctx.beginLayer({filter: [
+          {name: 'dropShadow',
+              dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+          {name: 'componentTransfer',
+              funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+      ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+      ctx.fillRect(10, 25, 40, 50);
+      ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+      ctx.fillRect(30, 5, 50, 40);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker0').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas0');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker1" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      // No transform.
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      ctx.globalAlpha = 0.75;
+      ctx.globalCompositeOperation = 'source-in';
+      ctx.shadowOffsetX = -7;
+      ctx.shadowOffsetY = 7;
+      ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+      ctx.shadowBlur = 3;
+
+      ctx.beginLayer({filter: [
+          {name: 'dropShadow',
+              dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+          {name: 'componentTransfer',
+              funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+      ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+      ctx.fillRect(10, 25, 40, 50);
+      ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+      ctx.fillRect(30, 5, 50, 40);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker1').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas1');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+</div>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.rotation-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.rotation-expected.html
new file mode 100644
index 0000000000..e70fe3e92d
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.rotation-expected.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.global-states.filter.composite.shadow.rotation</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.filter.composite.shadow.rotation</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas0");
+    const ctx = canvas.getContext('2d');
+
+    const svg = `
+      <svg xmlns="http://www.w3.org/2000/svg"
+            width="90" height="90"
+            color-interpolation-filters="sRGB">
+        <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+          <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
+          <feComponentTransfer>
+            <feFuncA type="table" tableValues="0 0.8"></feFuncA>
+          </feComponentTransfer>
+        </filter>
+        <g filter="url(#filter)">
+          <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/>
+          <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/>
+        </g>
+      </svg>`;
+
+    const img = new Image();
+    img.width = 90;
+    img.height = 90;
+    img.onload = () => {
+      ctx.translate(50, 40);
+      ctx.rotate(Math.PI);
+      ctx.translate(-45, -45);
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      // No globalAlpha.
+      ctx.globalCompositeOperation = 'source-in';
+      ctx.shadowOffsetX = -7;
+      ctx.shadowOffsetY = 7;
+      ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+      ctx.shadowBlur = 3;
+
+      ctx.drawImage(img, 0, 0);
+    };
+    img.src = 'data:image/svg+xml;base64,' + btoa(svg);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas1");
+    const ctx = canvas.getContext('2d');
+
+    const svg = `
+      <svg xmlns="http://www.w3.org/2000/svg"
+            width="90" height="90"
+            color-interpolation-filters="sRGB">
+        <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+          <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
+          <feComponentTransfer>
+            <feFuncA type="table" tableValues="0 0.8"></feFuncA>
+          </feComponentTransfer>
+        </filter>
+        <g filter="url(#filter)">
+          <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/>
+          <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/>
+        </g>
+      </svg>`;
+
+    const img = new Image();
+    img.width = 90;
+    img.height = 90;
+    img.onload = () => {
+      ctx.translate(50, 40);
+      ctx.rotate(Math.PI);
+      ctx.translate(-45, -45);
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      ctx.globalAlpha = 0.75;
+      ctx.globalCompositeOperation = 'source-in';
+      ctx.shadowOffsetX = -7;
+      ctx.shadowOffsetY = 7;
+      ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+      ctx.shadowBlur = 3;
+
+      ctx.drawImage(img, 0, 0);
+    };
+    img.src = 'data:image/svg+xml;base64,' + btoa(svg);
+  </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.rotation.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.rotation.html
new file mode 100644
index 0000000000..b7b4312a35
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.rotation.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.filter.composite.shadow.rotation-expected.html">
+<title>Canvas test: 2d.layer.global-states.filter.composite.shadow.rotation</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.filter.composite.shadow.rotation</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 40);
+    ctx.rotate(Math.PI);
+    ctx.translate(-45, -45);
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    // No globalAlpha.
+    ctx.globalCompositeOperation = 'source-in';
+    ctx.shadowOffsetX = -7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+    ctx.shadowBlur = 3;
+
+    ctx.beginLayer({filter: [
+        {name: 'dropShadow',
+            dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+        {name: 'componentTransfer',
+            funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+    ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx.fillRect(10, 25, 40, 50);
+    ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx.fillRect(30, 5, 50, 40);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas0");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 40);
+    ctx.rotate(Math.PI);
+    ctx.translate(-45, -45);
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'source-in';
+    ctx.shadowOffsetX = -7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+    ctx.shadowBlur = 3;
+
+    ctx.beginLayer({filter: [
+        {name: 'dropShadow',
+            dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+        {name: 'componentTransfer',
+            funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+    ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx.fillRect(10, 25, 40, 50);
+    ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx.fillRect(30, 5, 50, 40);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas1");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.rotation.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.rotation.w.html
new file mode 100644
index 0000000000..1ae9f00a85
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.rotation.w.html
@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<html class="reftest-wait">
+<link rel="match" href="2d.layer.global-states.filter.composite.shadow.rotation-expected.html">
+<title>Canvas test: 2d.layer.global-states.filter.composite.shadow.rotation</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.filter.composite.shadow.rotation</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+<script>pending_tests = 2;</script>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker0" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      ctx.translate(50, 40);
+      ctx.rotate(Math.PI);
+      ctx.translate(-45, -45);
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      // No globalAlpha.
+      ctx.globalCompositeOperation = 'source-in';
+      ctx.shadowOffsetX = -7;
+      ctx.shadowOffsetY = 7;
+      ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+      ctx.shadowBlur = 3;
+
+      ctx.beginLayer({filter: [
+          {name: 'dropShadow',
+              dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+          {name: 'componentTransfer',
+              funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+      ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+      ctx.fillRect(10, 25, 40, 50);
+      ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+      ctx.fillRect(30, 5, 50, 40);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker0').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas0');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker1" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      ctx.translate(50, 40);
+      ctx.rotate(Math.PI);
+      ctx.translate(-45, -45);
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      ctx.globalAlpha = 0.75;
+      ctx.globalCompositeOperation = 'source-in';
+      ctx.shadowOffsetX = -7;
+      ctx.shadowOffsetY = 7;
+      ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+      ctx.shadowBlur = 3;
+
+      ctx.beginLayer({filter: [
+          {name: 'dropShadow',
+              dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+          {name: 'componentTransfer',
+              funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+      ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+      ctx.fillRect(10, 25, 40, 50);
+      ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+      ctx.fillRect(30, 5, 50, 40);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker1').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas1');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+</div>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.w.html
deleted file mode 100644
index 894089d88e..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.w.html
+++ /dev/null
@@ -1,58 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<html class="reftest-wait">
-<link rel="match" href="2d.layer.global-states.filter.composite.shadow-expected.html">
-<title>Canvas test: 2d.layer.global-states.filter.composite.shadow</title>
-<h1>2d.layer.global-states.filter.composite.shadow</h1>
-<p class="desc">Checks that layers with filters correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script id='myWorker' type='text/worker'>
-  self.onmessage = function(e) {
-    const canvas = new OffscreenCanvas(200, 200);
-    const ctx = canvas.getContext('2d');
-
-    ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
-    var circle = new Path2D();
-    circle.arc(90, 90, 45, 0, 2 * Math.PI);
-    ctx.fill(circle);
-
-    ctx.globalCompositeOperation = 'source-in';
-    ctx.shadowOffsetX = -10;
-    ctx.shadowOffsetY = 10;
-    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
-    ctx.shadowBlur = 3;
-
-    ctx.beginLayer({filter: [
-        {name: 'colorMatrix', values: [0.393, 0.769, 0.189, 0, 0,
-                                       0.349, 0.686, 0.168, 0, 0,
-                                       0.272, 0.534, 0.131, 0, 0,
-                                       0, 0, 0, 1, 0]},
-        {name: 'componentTransfer',
-            funcA: {type: "table", tableValues: [0, 0.7]}},
-        {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]});
-
-    ctx.fillStyle = 'rgba(200, 0, 0, 1)';
-    ctx.fillRect(50, 50, 75, 50);
-    ctx.fillStyle = 'rgba(0, 200, 0, 1)';
-    ctx.fillRect(70, 70, 75, 50);
-
-    ctx.endLayer();
-
-    const bitmap = canvas.transferToImageBitmap();
-    self.postMessage(bitmap, bitmap);
-  };
-</script>
-<script>
-  const blob = new Blob([document.getElementById('myWorker').textContent]);
-  const worker = new Worker(URL.createObjectURL(blob));
-  worker.addEventListener('message', msg => {
-    const outputCtx = document.getElementById("canvas").getContext('2d');
-    outputCtx.drawImage(msg.data, 0, 0);
-    document.documentElement.classList.remove("reftest-wait");
-  });
-  worker.postMessage(null);
-</script>
-</html>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.w.html
deleted file mode 100644
index 41ccdaf5c0..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.w.html
+++ /dev/null
@@ -1,54 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<html class="reftest-wait">
-<link rel="match" href="2d.layer.global-states.filter.composite-expected.html">
-<title>Canvas test: 2d.layer.global-states.filter.composite</title>
-<h1>2d.layer.global-states.filter.composite</h1>
-<p class="desc">Checks that layers with filters correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script id='myWorker' type='text/worker'>
-  self.onmessage = function(e) {
-    const canvas = new OffscreenCanvas(200, 200);
-    const ctx = canvas.getContext('2d');
-
-    ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
-    var circle = new Path2D();
-    circle.arc(90, 90, 45, 0, 2 * Math.PI);
-    ctx.fill(circle);
-
-    ctx.globalCompositeOperation = 'source-in';
-
-    ctx.beginLayer({filter: [
-        {name: 'colorMatrix', values: [0.393, 0.769, 0.189, 0, 0,
-                                       0.349, 0.686, 0.168, 0, 0,
-                                       0.272, 0.534, 0.131, 0, 0,
-                                       0, 0, 0, 1, 0]},
-        {name: 'componentTransfer',
-            funcA: {type: "table", tableValues: [0, 0.7]}},
-        {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]});
-
-    ctx.fillStyle = 'rgba(200, 0, 0, 1)';
-    ctx.fillRect(50, 50, 75, 50);
-    ctx.fillStyle = 'rgba(0, 200, 0, 1)';
-    ctx.fillRect(70, 70, 75, 50);
-
-    ctx.endLayer();
-
-    const bitmap = canvas.transferToImageBitmap();
-    self.postMessage(bitmap, bitmap);
-  };
-</script>
-<script>
-  const blob = new Blob([document.getElementById('myWorker').textContent]);
-  const worker = new Worker(URL.createObjectURL(blob));
-  worker.addEventListener('message', msg => {
-    const outputCtx = document.getElementById("canvas").getContext('2d');
-    outputCtx.drawImage(msg.data, 0, 0);
-    document.documentElement.classList.remove("reftest-wait");
-  });
-  worker.postMessage(null);
-</script>
-</html>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.no-shadow.no-transform-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.no-shadow.no-transform-expected.html
new file mode 100644
index 0000000000..21aa241aca
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.no-shadow.no-transform-expected.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.global-states.filter.copy.no-shadow.no-transform</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.filter.copy.no-shadow.no-transform</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas0");
+    const ctx = canvas.getContext('2d');
+
+    const svg = `
+      <svg xmlns="http://www.w3.org/2000/svg"
+            width="90" height="90"
+            color-interpolation-filters="sRGB">
+        <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+          <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
+          <feComponentTransfer>
+            <feFuncA type="table" tableValues="0 0.8"></feFuncA>
+          </feComponentTransfer>
+        </filter>
+        <g filter="url(#filter)">
+          <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/>
+          <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/>
+        </g>
+      </svg>`;
+
+    const img = new Image();
+    img.width = 90;
+    img.height = 90;
+    img.onload = () => {
+      // No transform.
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      // No globalAlpha.
+      ctx.globalCompositeOperation = 'copy';
+      // No shadow.
+
+      ctx.drawImage(img, 0, 0);
+    };
+    img.src = 'data:image/svg+xml;base64,' + btoa(svg);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas1");
+    const ctx = canvas.getContext('2d');
+
+    const svg = `
+      <svg xmlns="http://www.w3.org/2000/svg"
+            width="90" height="90"
+            color-interpolation-filters="sRGB">
+        <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+          <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
+          <feComponentTransfer>
+            <feFuncA type="table" tableValues="0 0.8"></feFuncA>
+          </feComponentTransfer>
+        </filter>
+        <g filter="url(#filter)">
+          <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/>
+          <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/>
+        </g>
+      </svg>`;
+
+    const img = new Image();
+    img.width = 90;
+    img.height = 90;
+    img.onload = () => {
+      // No transform.
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      ctx.globalAlpha = 0.75;
+      ctx.globalCompositeOperation = 'copy';
+      // No shadow.
+
+      ctx.drawImage(img, 0, 0);
+    };
+    img.src = 'data:image/svg+xml;base64,' + btoa(svg);
+  </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.no-shadow.no-transform.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.no-shadow.no-transform.html
new file mode 100644
index 0000000000..f08ba940af
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.no-shadow.no-transform.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.filter.copy.no-shadow.no-transform-expected.html">
+<title>Canvas test: 2d.layer.global-states.filter.copy.no-shadow.no-transform</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.filter.copy.no-shadow.no-transform</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    // No transform.
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    // No globalAlpha.
+    ctx.globalCompositeOperation = 'copy';
+    // No shadow.
+
+    ctx.beginLayer({filter: [
+        {name: 'dropShadow',
+            dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+        {name: 'componentTransfer',
+            funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+    ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx.fillRect(10, 25, 40, 50);
+    ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx.fillRect(30, 5, 50, 40);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas0");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    // No transform.
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'copy';
+    // No shadow.
+
+    ctx.beginLayer({filter: [
+        {name: 'dropShadow',
+            dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+        {name: 'componentTransfer',
+            funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+    ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx.fillRect(10, 25, 40, 50);
+    ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx.fillRect(30, 5, 50, 40);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas1");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.no-shadow.no-transform.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.no-shadow.no-transform.w.html
new file mode 100644
index 0000000000..75fc90bae6
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.no-shadow.no-transform.w.html
@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<html class="reftest-wait">
+<link rel="match" href="2d.layer.global-states.filter.copy.no-shadow.no-transform-expected.html">
+<title>Canvas test: 2d.layer.global-states.filter.copy.no-shadow.no-transform</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.filter.copy.no-shadow.no-transform</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+<script>pending_tests = 2;</script>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker0" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      // No transform.
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      // No globalAlpha.
+      ctx.globalCompositeOperation = 'copy';
+      // No shadow.
+
+      ctx.beginLayer({filter: [
+          {name: 'dropShadow',
+              dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+          {name: 'componentTransfer',
+              funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+      ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+      ctx.fillRect(10, 25, 40, 50);
+      ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+      ctx.fillRect(30, 5, 50, 40);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker0').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas0');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker1" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      // No transform.
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      ctx.globalAlpha = 0.75;
+      ctx.globalCompositeOperation = 'copy';
+      // No shadow.
+
+      ctx.beginLayer({filter: [
+          {name: 'dropShadow',
+              dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+          {name: 'componentTransfer',
+              funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+      ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+      ctx.fillRect(10, 25, 40, 50);
+      ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+      ctx.fillRect(30, 5, 50, 40);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker1').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas1');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+</div>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.no-shadow.rotation-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.no-shadow.rotation-expected.html
new file mode 100644
index 0000000000..b2b46ee039
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.no-shadow.rotation-expected.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.global-states.filter.copy.no-shadow.rotation</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.filter.copy.no-shadow.rotation</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas0");
+    const ctx = canvas.getContext('2d');
+
+    const svg = `
+      <svg xmlns="http://www.w3.org/2000/svg"
+            width="90" height="90"
+            color-interpolation-filters="sRGB">
+        <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+          <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
+          <feComponentTransfer>
+            <feFuncA type="table" tableValues="0 0.8"></feFuncA>
+          </feComponentTransfer>
+        </filter>
+        <g filter="url(#filter)">
+          <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/>
+          <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/>
+        </g>
+      </svg>`;
+
+    const img = new Image();
+    img.width = 90;
+    img.height = 90;
+    img.onload = () => {
+      ctx.translate(50, 40);
+      ctx.rotate(Math.PI);
+      ctx.translate(-45, -45);
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      // No globalAlpha.
+      ctx.globalCompositeOperation = 'copy';
+      // No shadow.
+
+      ctx.drawImage(img, 0, 0);
+    };
+    img.src = 'data:image/svg+xml;base64,' + btoa(svg);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas1");
+    const ctx = canvas.getContext('2d');
+
+    const svg = `
+      <svg xmlns="http://www.w3.org/2000/svg"
+            width="90" height="90"
+            color-interpolation-filters="sRGB">
+        <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+          <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
+          <feComponentTransfer>
+            <feFuncA type="table" tableValues="0 0.8"></feFuncA>
+          </feComponentTransfer>
+        </filter>
+        <g filter="url(#filter)">
+          <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/>
+          <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/>
+        </g>
+      </svg>`;
+
+    const img = new Image();
+    img.width = 90;
+    img.height = 90;
+    img.onload = () => {
+      ctx.translate(50, 40);
+      ctx.rotate(Math.PI);
+      ctx.translate(-45, -45);
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      ctx.globalAlpha = 0.75;
+      ctx.globalCompositeOperation = 'copy';
+      // No shadow.
+
+      ctx.drawImage(img, 0, 0);
+    };
+    img.src = 'data:image/svg+xml;base64,' + btoa(svg);
+  </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.no-shadow.rotation.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.no-shadow.rotation.html
new file mode 100644
index 0000000000..3f12cf0c4e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.no-shadow.rotation.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.filter.copy.no-shadow.rotation-expected.html">
+<title>Canvas test: 2d.layer.global-states.filter.copy.no-shadow.rotation</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.filter.copy.no-shadow.rotation</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 40);
+    ctx.rotate(Math.PI);
+    ctx.translate(-45, -45);
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    // No globalAlpha.
+    ctx.globalCompositeOperation = 'copy';
+    // No shadow.
+
+    ctx.beginLayer({filter: [
+        {name: 'dropShadow',
+            dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+        {name: 'componentTransfer',
+            funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+    ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx.fillRect(10, 25, 40, 50);
+    ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx.fillRect(30, 5, 50, 40);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas0");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 40);
+    ctx.rotate(Math.PI);
+    ctx.translate(-45, -45);
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'copy';
+    // No shadow.
+
+    ctx.beginLayer({filter: [
+        {name: 'dropShadow',
+            dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+        {name: 'componentTransfer',
+            funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+    ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx.fillRect(10, 25, 40, 50);
+    ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx.fillRect(30, 5, 50, 40);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas1");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.no-shadow.rotation.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.no-shadow.rotation.w.html
new file mode 100644
index 0000000000..0a3ecee669
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.no-shadow.rotation.w.html
@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<html class="reftest-wait">
+<link rel="match" href="2d.layer.global-states.filter.copy.no-shadow.rotation-expected.html">
+<title>Canvas test: 2d.layer.global-states.filter.copy.no-shadow.rotation</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.filter.copy.no-shadow.rotation</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+<script>pending_tests = 2;</script>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker0" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      ctx.translate(50, 40);
+      ctx.rotate(Math.PI);
+      ctx.translate(-45, -45);
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      // No globalAlpha.
+      ctx.globalCompositeOperation = 'copy';
+      // No shadow.
+
+      ctx.beginLayer({filter: [
+          {name: 'dropShadow',
+              dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+          {name: 'componentTransfer',
+              funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+      ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+      ctx.fillRect(10, 25, 40, 50);
+      ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+      ctx.fillRect(30, 5, 50, 40);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker0').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas0');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker1" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      ctx.translate(50, 40);
+      ctx.rotate(Math.PI);
+      ctx.translate(-45, -45);
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      ctx.globalAlpha = 0.75;
+      ctx.globalCompositeOperation = 'copy';
+      // No shadow.
+
+      ctx.beginLayer({filter: [
+          {name: 'dropShadow',
+              dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+          {name: 'componentTransfer',
+              funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+      ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+      ctx.fillRect(10, 25, 40, 50);
+      ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+      ctx.fillRect(30, 5, 50, 40);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker1').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas1');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+</div>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.shadow.no-transform-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.shadow.no-transform-expected.html
new file mode 100644
index 0000000000..d11326d5d6
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.shadow.no-transform-expected.html
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.global-states.filter.copy.shadow.no-transform</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.filter.copy.shadow.no-transform</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas0");
+    const ctx = canvas.getContext('2d');
+
+    const svg = `
+      <svg xmlns="http://www.w3.org/2000/svg"
+            width="90" height="90"
+            color-interpolation-filters="sRGB">
+        <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+          <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
+          <feComponentTransfer>
+            <feFuncA type="table" tableValues="0 0.8"></feFuncA>
+          </feComponentTransfer>
+        </filter>
+        <g filter="url(#filter)">
+          <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/>
+          <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/>
+        </g>
+      </svg>`;
+
+    const img = new Image();
+    img.width = 90;
+    img.height = 90;
+    img.onload = () => {
+      // No transform.
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      // No globalAlpha.
+      ctx.globalCompositeOperation = 'copy';
+      ctx.shadowOffsetX = -7;
+      ctx.shadowOffsetY = 7;
+      ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+      ctx.shadowBlur = 3;
+
+      ctx.drawImage(img, 0, 0);
+    };
+    img.src = 'data:image/svg+xml;base64,' + btoa(svg);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas1");
+    const ctx = canvas.getContext('2d');
+
+    const svg = `
+      <svg xmlns="http://www.w3.org/2000/svg"
+            width="90" height="90"
+            color-interpolation-filters="sRGB">
+        <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+          <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
+          <feComponentTransfer>
+            <feFuncA type="table" tableValues="0 0.8"></feFuncA>
+          </feComponentTransfer>
+        </filter>
+        <g filter="url(#filter)">
+          <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/>
+          <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/>
+        </g>
+      </svg>`;
+
+    const img = new Image();
+    img.width = 90;
+    img.height = 90;
+    img.onload = () => {
+      // No transform.
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      ctx.globalAlpha = 0.75;
+      ctx.globalCompositeOperation = 'copy';
+      ctx.shadowOffsetX = -7;
+      ctx.shadowOffsetY = 7;
+      ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+      ctx.shadowBlur = 3;
+
+      ctx.drawImage(img, 0, 0);
+    };
+    img.src = 'data:image/svg+xml;base64,' + btoa(svg);
+  </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.shadow.no-transform.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.shadow.no-transform.html
new file mode 100644
index 0000000000..b4996deb6f
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.shadow.no-transform.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.filter.copy.shadow.no-transform-expected.html">
+<title>Canvas test: 2d.layer.global-states.filter.copy.shadow.no-transform</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.filter.copy.shadow.no-transform</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    // No transform.
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    // No globalAlpha.
+    ctx.globalCompositeOperation = 'copy';
+    ctx.shadowOffsetX = -7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+    ctx.shadowBlur = 3;
+
+    ctx.beginLayer({filter: [
+        {name: 'dropShadow',
+            dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+        {name: 'componentTransfer',
+            funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+    ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx.fillRect(10, 25, 40, 50);
+    ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx.fillRect(30, 5, 50, 40);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas0");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    // No transform.
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'copy';
+    ctx.shadowOffsetX = -7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+    ctx.shadowBlur = 3;
+
+    ctx.beginLayer({filter: [
+        {name: 'dropShadow',
+            dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+        {name: 'componentTransfer',
+            funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+    ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx.fillRect(10, 25, 40, 50);
+    ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx.fillRect(30, 5, 50, 40);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas1");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.shadow.no-transform.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.shadow.no-transform.w.html
new file mode 100644
index 0000000000..9c13a367b3
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.shadow.no-transform.w.html
@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<html class="reftest-wait">
+<link rel="match" href="2d.layer.global-states.filter.copy.shadow.no-transform-expected.html">
+<title>Canvas test: 2d.layer.global-states.filter.copy.shadow.no-transform</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.filter.copy.shadow.no-transform</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+<script>pending_tests = 2;</script>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker0" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      // No transform.
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      // No globalAlpha.
+      ctx.globalCompositeOperation = 'copy';
+      ctx.shadowOffsetX = -7;
+      ctx.shadowOffsetY = 7;
+      ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+      ctx.shadowBlur = 3;
+
+      ctx.beginLayer({filter: [
+          {name: 'dropShadow',
+              dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+          {name: 'componentTransfer',
+              funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+      ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+      ctx.fillRect(10, 25, 40, 50);
+      ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+      ctx.fillRect(30, 5, 50, 40);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker0').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas0');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker1" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      // No transform.
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      ctx.globalAlpha = 0.75;
+      ctx.globalCompositeOperation = 'copy';
+      ctx.shadowOffsetX = -7;
+      ctx.shadowOffsetY = 7;
+      ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+      ctx.shadowBlur = 3;
+
+      ctx.beginLayer({filter: [
+          {name: 'dropShadow',
+              dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+          {name: 'componentTransfer',
+              funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+      ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+      ctx.fillRect(10, 25, 40, 50);
+      ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+      ctx.fillRect(30, 5, 50, 40);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker1').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas1');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+</div>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.shadow.rotation-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.shadow.rotation-expected.html
new file mode 100644
index 0000000000..3ac098c344
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.shadow.rotation-expected.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.global-states.filter.copy.shadow.rotation</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.filter.copy.shadow.rotation</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas0");
+    const ctx = canvas.getContext('2d');
+
+    const svg = `
+      <svg xmlns="http://www.w3.org/2000/svg"
+            width="90" height="90"
+            color-interpolation-filters="sRGB">
+        <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+          <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
+          <feComponentTransfer>
+            <feFuncA type="table" tableValues="0 0.8"></feFuncA>
+          </feComponentTransfer>
+        </filter>
+        <g filter="url(#filter)">
+          <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/>
+          <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/>
+        </g>
+      </svg>`;
+
+    const img = new Image();
+    img.width = 90;
+    img.height = 90;
+    img.onload = () => {
+      ctx.translate(50, 40);
+      ctx.rotate(Math.PI);
+      ctx.translate(-45, -45);
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      // No globalAlpha.
+      ctx.globalCompositeOperation = 'copy';
+      ctx.shadowOffsetX = -7;
+      ctx.shadowOffsetY = 7;
+      ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+      ctx.shadowBlur = 3;
+
+      ctx.drawImage(img, 0, 0);
+    };
+    img.src = 'data:image/svg+xml;base64,' + btoa(svg);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas1");
+    const ctx = canvas.getContext('2d');
+
+    const svg = `
+      <svg xmlns="http://www.w3.org/2000/svg"
+            width="90" height="90"
+            color-interpolation-filters="sRGB">
+        <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+          <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
+          <feComponentTransfer>
+            <feFuncA type="table" tableValues="0 0.8"></feFuncA>
+          </feComponentTransfer>
+        </filter>
+        <g filter="url(#filter)">
+          <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/>
+          <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/>
+        </g>
+      </svg>`;
+
+    const img = new Image();
+    img.width = 90;
+    img.height = 90;
+    img.onload = () => {
+      ctx.translate(50, 40);
+      ctx.rotate(Math.PI);
+      ctx.translate(-45, -45);
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      ctx.globalAlpha = 0.75;
+      ctx.globalCompositeOperation = 'copy';
+      ctx.shadowOffsetX = -7;
+      ctx.shadowOffsetY = 7;
+      ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+      ctx.shadowBlur = 3;
+
+      ctx.drawImage(img, 0, 0);
+    };
+    img.src = 'data:image/svg+xml;base64,' + btoa(svg);
+  </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.shadow.rotation.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.shadow.rotation.html
new file mode 100644
index 0000000000..eab5f8312b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.shadow.rotation.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.filter.copy.shadow.rotation-expected.html">
+<title>Canvas test: 2d.layer.global-states.filter.copy.shadow.rotation</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.filter.copy.shadow.rotation</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 40);
+    ctx.rotate(Math.PI);
+    ctx.translate(-45, -45);
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    // No globalAlpha.
+    ctx.globalCompositeOperation = 'copy';
+    ctx.shadowOffsetX = -7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+    ctx.shadowBlur = 3;
+
+    ctx.beginLayer({filter: [
+        {name: 'dropShadow',
+            dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+        {name: 'componentTransfer',
+            funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+    ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx.fillRect(10, 25, 40, 50);
+    ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx.fillRect(30, 5, 50, 40);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas0");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 40);
+    ctx.rotate(Math.PI);
+    ctx.translate(-45, -45);
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'copy';
+    ctx.shadowOffsetX = -7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+    ctx.shadowBlur = 3;
+
+    ctx.beginLayer({filter: [
+        {name: 'dropShadow',
+            dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+        {name: 'componentTransfer',
+            funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+    ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx.fillRect(10, 25, 40, 50);
+    ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx.fillRect(30, 5, 50, 40);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas1");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.shadow.rotation.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.shadow.rotation.w.html
new file mode 100644
index 0000000000..aebd6cc00d
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.copy.shadow.rotation.w.html
@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<html class="reftest-wait">
+<link rel="match" href="2d.layer.global-states.filter.copy.shadow.rotation-expected.html">
+<title>Canvas test: 2d.layer.global-states.filter.copy.shadow.rotation</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.filter.copy.shadow.rotation</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+<script>pending_tests = 2;</script>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker0" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      ctx.translate(50, 40);
+      ctx.rotate(Math.PI);
+      ctx.translate(-45, -45);
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      // No globalAlpha.
+      ctx.globalCompositeOperation = 'copy';
+      ctx.shadowOffsetX = -7;
+      ctx.shadowOffsetY = 7;
+      ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+      ctx.shadowBlur = 3;
+
+      ctx.beginLayer({filter: [
+          {name: 'dropShadow',
+              dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+          {name: 'componentTransfer',
+              funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+      ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+      ctx.fillRect(10, 25, 40, 50);
+      ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+      ctx.fillRect(30, 5, 50, 40);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker0').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas0');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker1" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      ctx.translate(50, 40);
+      ctx.rotate(Math.PI);
+      ctx.translate(-45, -45);
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      ctx.globalAlpha = 0.75;
+      ctx.globalCompositeOperation = 'copy';
+      ctx.shadowOffsetX = -7;
+      ctx.shadowOffsetY = 7;
+      ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+      ctx.shadowBlur = 3;
+
+      ctx.beginLayer({filter: [
+          {name: 'dropShadow',
+              dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+          {name: 'componentTransfer',
+              funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+      ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+      ctx.fillRect(10, 25, 40, 50);
+      ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+      ctx.fillRect(30, 5, 50, 40);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker1').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas1');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+</div>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform-expected.html
new file mode 100644
index 0000000000..a445ae2c4a
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform-expected.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas0");
+    const ctx = canvas.getContext('2d');
+
+    const svg = `
+      <svg xmlns="http://www.w3.org/2000/svg"
+            width="90" height="90"
+            color-interpolation-filters="sRGB">
+        <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+          <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
+          <feComponentTransfer>
+            <feFuncA type="table" tableValues="0 0.8"></feFuncA>
+          </feComponentTransfer>
+        </filter>
+        <g filter="url(#filter)">
+          <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/>
+          <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/>
+        </g>
+      </svg>`;
+
+    const img = new Image();
+    img.width = 90;
+    img.height = 90;
+    img.onload = () => {
+      // No transform.
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      // No globalAlpha.
+      // No globalCompositeOperation.
+      // No shadow.
+
+      ctx.drawImage(img, 0, 0);
+    };
+    img.src = 'data:image/svg+xml;base64,' + btoa(svg);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas1");
+    const ctx = canvas.getContext('2d');
+
+    const svg = `
+      <svg xmlns="http://www.w3.org/2000/svg"
+            width="90" height="90"
+            color-interpolation-filters="sRGB">
+        <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+          <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
+          <feComponentTransfer>
+            <feFuncA type="table" tableValues="0 0.8"></feFuncA>
+          </feComponentTransfer>
+        </filter>
+        <g filter="url(#filter)">
+          <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/>
+          <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/>
+        </g>
+      </svg>`;
+
+    const img = new Image();
+    img.width = 90;
+    img.height = 90;
+    img.onload = () => {
+      // No transform.
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      ctx.globalAlpha = 0.75;
+      // No globalCompositeOperation.
+      // No shadow.
+
+      ctx.drawImage(img, 0, 0);
+    };
+    img.src = 'data:image/svg+xml;base64,' + btoa(svg);
+  </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform.html
new file mode 100644
index 0000000000..f86b0fd37d
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform-expected.html">
+<title>Canvas test: 2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    // No transform.
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    // No globalAlpha.
+    // No globalCompositeOperation.
+    // No shadow.
+
+    ctx.beginLayer({filter: [
+        {name: 'dropShadow',
+            dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+        {name: 'componentTransfer',
+            funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+    ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx.fillRect(10, 25, 40, 50);
+    ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx.fillRect(30, 5, 50, 40);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas0");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    // No transform.
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    ctx.globalAlpha = 0.75;
+    // No globalCompositeOperation.
+    // No shadow.
+
+    ctx.beginLayer({filter: [
+        {name: 'dropShadow',
+            dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+        {name: 'componentTransfer',
+            funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+    ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx.fillRect(10, 25, 40, 50);
+    ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx.fillRect(30, 5, 50, 40);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas1");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform.w.html
new file mode 100644
index 0000000000..ab0836af94
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform.w.html
@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<html class="reftest-wait">
+<link rel="match" href="2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform-expected.html">
+<title>Canvas test: 2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.filter.no-composite-op.no-shadow.no-transform</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+<script>pending_tests = 2;</script>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker0" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      // No transform.
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      // No globalAlpha.
+      // No globalCompositeOperation.
+      // No shadow.
+
+      ctx.beginLayer({filter: [
+          {name: 'dropShadow',
+              dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+          {name: 'componentTransfer',
+              funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+      ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+      ctx.fillRect(10, 25, 40, 50);
+      ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+      ctx.fillRect(30, 5, 50, 40);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker0').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas0');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker1" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      // No transform.
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      ctx.globalAlpha = 0.75;
+      // No globalCompositeOperation.
+      // No shadow.
+
+      ctx.beginLayer({filter: [
+          {name: 'dropShadow',
+              dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+          {name: 'componentTransfer',
+              funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+      ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+      ctx.fillRect(10, 25, 40, 50);
+      ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+      ctx.fillRect(30, 5, 50, 40);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker1').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas1');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+</div>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.rotation-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.rotation-expected.html
new file mode 100644
index 0000000000..610c601b1c
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.rotation-expected.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.global-states.filter.no-composite-op.no-shadow.rotation</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.filter.no-composite-op.no-shadow.rotation</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas0");
+    const ctx = canvas.getContext('2d');
+
+    const svg = `
+      <svg xmlns="http://www.w3.org/2000/svg"
+            width="90" height="90"
+            color-interpolation-filters="sRGB">
+        <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+          <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
+          <feComponentTransfer>
+            <feFuncA type="table" tableValues="0 0.8"></feFuncA>
+          </feComponentTransfer>
+        </filter>
+        <g filter="url(#filter)">
+          <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/>
+          <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/>
+        </g>
+      </svg>`;
+
+    const img = new Image();
+    img.width = 90;
+    img.height = 90;
+    img.onload = () => {
+      ctx.translate(50, 40);
+      ctx.rotate(Math.PI);
+      ctx.translate(-45, -45);
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      // No globalAlpha.
+      // No globalCompositeOperation.
+      // No shadow.
+
+      ctx.drawImage(img, 0, 0);
+    };
+    img.src = 'data:image/svg+xml;base64,' + btoa(svg);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas1");
+    const ctx = canvas.getContext('2d');
+
+    const svg = `
+      <svg xmlns="http://www.w3.org/2000/svg"
+            width="90" height="90"
+            color-interpolation-filters="sRGB">
+        <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+          <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
+          <feComponentTransfer>
+            <feFuncA type="table" tableValues="0 0.8"></feFuncA>
+          </feComponentTransfer>
+        </filter>
+        <g filter="url(#filter)">
+          <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/>
+          <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/>
+        </g>
+      </svg>`;
+
+    const img = new Image();
+    img.width = 90;
+    img.height = 90;
+    img.onload = () => {
+      ctx.translate(50, 40);
+      ctx.rotate(Math.PI);
+      ctx.translate(-45, -45);
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      ctx.globalAlpha = 0.75;
+      // No globalCompositeOperation.
+      // No shadow.
+
+      ctx.drawImage(img, 0, 0);
+    };
+    img.src = 'data:image/svg+xml;base64,' + btoa(svg);
+  </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.rotation.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.rotation.html
new file mode 100644
index 0000000000..5854af853c
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.rotation.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.filter.no-composite-op.no-shadow.rotation-expected.html">
+<title>Canvas test: 2d.layer.global-states.filter.no-composite-op.no-shadow.rotation</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.filter.no-composite-op.no-shadow.rotation</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 40);
+    ctx.rotate(Math.PI);
+    ctx.translate(-45, -45);
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    // No globalAlpha.
+    // No globalCompositeOperation.
+    // No shadow.
+
+    ctx.beginLayer({filter: [
+        {name: 'dropShadow',
+            dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+        {name: 'componentTransfer',
+            funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+    ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx.fillRect(10, 25, 40, 50);
+    ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx.fillRect(30, 5, 50, 40);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas0");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 40);
+    ctx.rotate(Math.PI);
+    ctx.translate(-45, -45);
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    ctx.globalAlpha = 0.75;
+    // No globalCompositeOperation.
+    // No shadow.
+
+    ctx.beginLayer({filter: [
+        {name: 'dropShadow',
+            dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+        {name: 'componentTransfer',
+            funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+    ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx.fillRect(10, 25, 40, 50);
+    ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx.fillRect(30, 5, 50, 40);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas1");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.rotation.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.rotation.w.html
new file mode 100644
index 0000000000..c08f1f9f3c
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.no-shadow.rotation.w.html
@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<html class="reftest-wait">
+<link rel="match" href="2d.layer.global-states.filter.no-composite-op.no-shadow.rotation-expected.html">
+<title>Canvas test: 2d.layer.global-states.filter.no-composite-op.no-shadow.rotation</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.filter.no-composite-op.no-shadow.rotation</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+<script>pending_tests = 2;</script>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker0" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      ctx.translate(50, 40);
+      ctx.rotate(Math.PI);
+      ctx.translate(-45, -45);
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      // No globalAlpha.
+      // No globalCompositeOperation.
+      // No shadow.
+
+      ctx.beginLayer({filter: [
+          {name: 'dropShadow',
+              dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+          {name: 'componentTransfer',
+              funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+      ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+      ctx.fillRect(10, 25, 40, 50);
+      ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+      ctx.fillRect(30, 5, 50, 40);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker0').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas0');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker1" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      ctx.translate(50, 40);
+      ctx.rotate(Math.PI);
+      ctx.translate(-45, -45);
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      ctx.globalAlpha = 0.75;
+      // No globalCompositeOperation.
+      // No shadow.
+
+      ctx.beginLayer({filter: [
+          {name: 'dropShadow',
+              dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+          {name: 'componentTransfer',
+              funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+      ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+      ctx.fillRect(10, 25, 40, 50);
+      ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+      ctx.fillRect(30, 5, 50, 40);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker1').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas1');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+</div>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.shadow.no-transform-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.shadow.no-transform-expected.html
new file mode 100644
index 0000000000..6bd4501584
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.shadow.no-transform-expected.html
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.global-states.filter.no-composite-op.shadow.no-transform</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.filter.no-composite-op.shadow.no-transform</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas0");
+    const ctx = canvas.getContext('2d');
+
+    const svg = `
+      <svg xmlns="http://www.w3.org/2000/svg"
+            width="90" height="90"
+            color-interpolation-filters="sRGB">
+        <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+          <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
+          <feComponentTransfer>
+            <feFuncA type="table" tableValues="0 0.8"></feFuncA>
+          </feComponentTransfer>
+        </filter>
+        <g filter="url(#filter)">
+          <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/>
+          <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/>
+        </g>
+      </svg>`;
+
+    const img = new Image();
+    img.width = 90;
+    img.height = 90;
+    img.onload = () => {
+      // No transform.
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      // No globalAlpha.
+      // No globalCompositeOperation.
+      ctx.shadowOffsetX = -7;
+      ctx.shadowOffsetY = 7;
+      ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+      ctx.shadowBlur = 3;
+
+      ctx.drawImage(img, 0, 0);
+    };
+    img.src = 'data:image/svg+xml;base64,' + btoa(svg);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas1");
+    const ctx = canvas.getContext('2d');
+
+    const svg = `
+      <svg xmlns="http://www.w3.org/2000/svg"
+            width="90" height="90"
+            color-interpolation-filters="sRGB">
+        <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+          <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
+          <feComponentTransfer>
+            <feFuncA type="table" tableValues="0 0.8"></feFuncA>
+          </feComponentTransfer>
+        </filter>
+        <g filter="url(#filter)">
+          <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/>
+          <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/>
+        </g>
+      </svg>`;
+
+    const img = new Image();
+    img.width = 90;
+    img.height = 90;
+    img.onload = () => {
+      // No transform.
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      ctx.globalAlpha = 0.75;
+      // No globalCompositeOperation.
+      ctx.shadowOffsetX = -7;
+      ctx.shadowOffsetY = 7;
+      ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+      ctx.shadowBlur = 3;
+
+      ctx.drawImage(img, 0, 0);
+    };
+    img.src = 'data:image/svg+xml;base64,' + btoa(svg);
+  </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.shadow.no-transform.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.shadow.no-transform.html
new file mode 100644
index 0000000000..f1dc725b83
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.shadow.no-transform.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.filter.no-composite-op.shadow.no-transform-expected.html">
+<title>Canvas test: 2d.layer.global-states.filter.no-composite-op.shadow.no-transform</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.filter.no-composite-op.shadow.no-transform</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    // No transform.
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    // No globalAlpha.
+    // No globalCompositeOperation.
+    ctx.shadowOffsetX = -7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+    ctx.shadowBlur = 3;
+
+    ctx.beginLayer({filter: [
+        {name: 'dropShadow',
+            dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+        {name: 'componentTransfer',
+            funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+    ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx.fillRect(10, 25, 40, 50);
+    ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx.fillRect(30, 5, 50, 40);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas0");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    // No transform.
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    ctx.globalAlpha = 0.75;
+    // No globalCompositeOperation.
+    ctx.shadowOffsetX = -7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+    ctx.shadowBlur = 3;
+
+    ctx.beginLayer({filter: [
+        {name: 'dropShadow',
+            dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+        {name: 'componentTransfer',
+            funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+    ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx.fillRect(10, 25, 40, 50);
+    ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx.fillRect(30, 5, 50, 40);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas1");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.shadow.no-transform.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.shadow.no-transform.w.html
new file mode 100644
index 0000000000..f191747805
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.shadow.no-transform.w.html
@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<html class="reftest-wait">
+<link rel="match" href="2d.layer.global-states.filter.no-composite-op.shadow.no-transform-expected.html">
+<title>Canvas test: 2d.layer.global-states.filter.no-composite-op.shadow.no-transform</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.filter.no-composite-op.shadow.no-transform</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+<script>pending_tests = 2;</script>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker0" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      // No transform.
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      // No globalAlpha.
+      // No globalCompositeOperation.
+      ctx.shadowOffsetX = -7;
+      ctx.shadowOffsetY = 7;
+      ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+      ctx.shadowBlur = 3;
+
+      ctx.beginLayer({filter: [
+          {name: 'dropShadow',
+              dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+          {name: 'componentTransfer',
+              funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+      ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+      ctx.fillRect(10, 25, 40, 50);
+      ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+      ctx.fillRect(30, 5, 50, 40);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker0').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas0');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker1" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      // No transform.
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      ctx.globalAlpha = 0.75;
+      // No globalCompositeOperation.
+      ctx.shadowOffsetX = -7;
+      ctx.shadowOffsetY = 7;
+      ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+      ctx.shadowBlur = 3;
+
+      ctx.beginLayer({filter: [
+          {name: 'dropShadow',
+              dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+          {name: 'componentTransfer',
+              funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+      ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+      ctx.fillRect(10, 25, 40, 50);
+      ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+      ctx.fillRect(30, 5, 50, 40);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker1').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas1');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+</div>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.shadow.rotation-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.shadow.rotation-expected.html
new file mode 100644
index 0000000000..b60a5526d9
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.shadow.rotation-expected.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.global-states.filter.no-composite-op.shadow.rotation</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.filter.no-composite-op.shadow.rotation</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas0");
+    const ctx = canvas.getContext('2d');
+
+    const svg = `
+      <svg xmlns="http://www.w3.org/2000/svg"
+            width="90" height="90"
+            color-interpolation-filters="sRGB">
+        <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+          <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
+          <feComponentTransfer>
+            <feFuncA type="table" tableValues="0 0.8"></feFuncA>
+          </feComponentTransfer>
+        </filter>
+        <g filter="url(#filter)">
+          <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/>
+          <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/>
+        </g>
+      </svg>`;
+
+    const img = new Image();
+    img.width = 90;
+    img.height = 90;
+    img.onload = () => {
+      ctx.translate(50, 40);
+      ctx.rotate(Math.PI);
+      ctx.translate(-45, -45);
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      // No globalAlpha.
+      // No globalCompositeOperation.
+      ctx.shadowOffsetX = -7;
+      ctx.shadowOffsetY = 7;
+      ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+      ctx.shadowBlur = 3;
+
+      ctx.drawImage(img, 0, 0);
+    };
+    img.src = 'data:image/svg+xml;base64,' + btoa(svg);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas1");
+    const ctx = canvas.getContext('2d');
+
+    const svg = `
+      <svg xmlns="http://www.w3.org/2000/svg"
+            width="90" height="90"
+            color-interpolation-filters="sRGB">
+        <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+          <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
+          <feComponentTransfer>
+            <feFuncA type="table" tableValues="0 0.8"></feFuncA>
+          </feComponentTransfer>
+        </filter>
+        <g filter="url(#filter)">
+          <rect x="10" y="25" width="40" height="50" fill="rgba(255, 0, 0, 1)"/>
+          <rect x="30" y="5" width="50" height="40" fill="rgba(0, 255, 0, 1)"/>
+        </g>
+      </svg>`;
+
+    const img = new Image();
+    img.width = 90;
+    img.height = 90;
+    img.onload = () => {
+      ctx.translate(50, 40);
+      ctx.rotate(Math.PI);
+      ctx.translate(-45, -45);
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      ctx.globalAlpha = 0.75;
+      // No globalCompositeOperation.
+      ctx.shadowOffsetX = -7;
+      ctx.shadowOffsetY = 7;
+      ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+      ctx.shadowBlur = 3;
+
+      ctx.drawImage(img, 0, 0);
+    };
+    img.src = 'data:image/svg+xml;base64,' + btoa(svg);
+  </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.shadow.rotation.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.shadow.rotation.html
new file mode 100644
index 0000000000..76258b326d
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.shadow.rotation.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.filter.no-composite-op.shadow.rotation-expected.html">
+<title>Canvas test: 2d.layer.global-states.filter.no-composite-op.shadow.rotation</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.filter.no-composite-op.shadow.rotation</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 40);
+    ctx.rotate(Math.PI);
+    ctx.translate(-45, -45);
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    // No globalAlpha.
+    // No globalCompositeOperation.
+    ctx.shadowOffsetX = -7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+    ctx.shadowBlur = 3;
+
+    ctx.beginLayer({filter: [
+        {name: 'dropShadow',
+            dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+        {name: 'componentTransfer',
+            funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+    ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx.fillRect(10, 25, 40, 50);
+    ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx.fillRect(30, 5, 50, 40);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas0");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 40);
+    ctx.rotate(Math.PI);
+    ctx.translate(-45, -45);
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    ctx.globalAlpha = 0.75;
+    // No globalCompositeOperation.
+    ctx.shadowOffsetX = -7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+    ctx.shadowBlur = 3;
+
+    ctx.beginLayer({filter: [
+        {name: 'dropShadow',
+            dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+        {name: 'componentTransfer',
+            funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+    ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx.fillRect(10, 25, 40, 50);
+    ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx.fillRect(30, 5, 50, 40);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas1");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.shadow.rotation.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.shadow.rotation.w.html
new file mode 100644
index 0000000000..9a10fb569f
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-composite-op.shadow.rotation.w.html
@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<html class="reftest-wait">
+<link rel="match" href="2d.layer.global-states.filter.no-composite-op.shadow.rotation-expected.html">
+<title>Canvas test: 2d.layer.global-states.filter.no-composite-op.shadow.rotation</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.filter.no-composite-op.shadow.rotation</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+<script>pending_tests = 2;</script>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker0" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      ctx.translate(50, 40);
+      ctx.rotate(Math.PI);
+      ctx.translate(-45, -45);
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      // No globalAlpha.
+      // No globalCompositeOperation.
+      ctx.shadowOffsetX = -7;
+      ctx.shadowOffsetY = 7;
+      ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+      ctx.shadowBlur = 3;
+
+      ctx.beginLayer({filter: [
+          {name: 'dropShadow',
+              dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+          {name: 'componentTransfer',
+              funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+      ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+      ctx.fillRect(10, 25, 40, 50);
+      ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+      ctx.fillRect(30, 5, 50, 40);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker0').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas0');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker1" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      ctx.translate(50, 40);
+      ctx.rotate(Math.PI);
+      ctx.translate(-45, -45);
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      ctx.globalAlpha = 0.75;
+      // No globalCompositeOperation.
+      ctx.shadowOffsetX = -7;
+      ctx.shadowOffsetY = 7;
+      ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+      ctx.shadowBlur = 3;
+
+      ctx.beginLayer({filter: [
+          {name: 'dropShadow',
+              dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
+          {name: 'componentTransfer',
+              funcA: {type: "table", tableValues: [0, 0.8]}}]});
+
+      ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+      ctx.fillRect(10, 25, 40, 50);
+      ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+      ctx.fillRect(30, 5, 50, 40);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker1').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas1');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+</div>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-global-states-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-global-states-expected.html
deleted file mode 100644
index e56fe0b360..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-global-states-expected.html
+++ /dev/null
@@ -1,50 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>Canvas test: 2d.layer.global-states.filter.no-global-states</title>
-<h1>2d.layer.global-states.filter.no-global-states</h1>
-<p class="desc">Checks that layers with filters correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
-  const canvas = document.getElementById("canvas");
-  const ctx = canvas.getContext('2d');
-
-  const svg = `
-    <svg xmlns="http://www.w3.org/2000/svg"
-          width="200" height="200"
-          color-interpolation-filters="sRGB">
-      <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
-        <feColorMatrix
-            type="matrix"
-            values="0.393 0.769 0.189 0 0
-                    0.349 0.686 0.168 0 0
-                    0.272 0.534 0.131 0 0
-                    0 0 0 1 0" />
-        <feComponentTransfer>
-          <feFuncA type="table" tableValues="0 0.7"></feFuncA>
-        </feComponentTransfer>
-        <feDropShadow dx="5" dy="5" flood-color="#81e" />
-      </filter>
-      <g filter="url(#filter)">
-        <rect x="50" y="50" width="75" height="50" fill="rgba(200, 0, 0, 1)"/>
-        <rect x="70" y="70" width="75" height="50" fill="rgba(0, 200, 0, 1)"/>
-      </g>
-    </svg>`;
-
-  const img = new Image();
-  img.width = 200;
-  img.height = 200;
-  img.onload = () => {
-    ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
-    var circle = new Path2D();
-    circle.arc(90, 90, 45, 0, 2 * Math.PI);
-    ctx.fill(circle);
-
-    // No global states.
-
-    ctx.drawImage(img, 0, 0);
-  };
-  img.src = 'data:image/svg+xml;base64,' + btoa(svg);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-global-states.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-global-states.html
deleted file mode 100644
index 3effa3ee9d..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-global-states.html
+++ /dev/null
@@ -1,40 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<link rel="match" href="2d.layer.global-states.filter.no-global-states-expected.html">
-<title>Canvas test: 2d.layer.global-states.filter.no-global-states</title>
-<h1>2d.layer.global-states.filter.no-global-states</h1>
-<p class="desc">Checks that layers with filters correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
-  const canvas = new OffscreenCanvas(200, 200);
-  const ctx = canvas.getContext('2d');
-
-  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
-  var circle = new Path2D();
-  circle.arc(90, 90, 45, 0, 2 * Math.PI);
-  ctx.fill(circle);
-
-  // No global states.
-
-  ctx.beginLayer({filter: [
-      {name: 'colorMatrix', values: [0.393, 0.769, 0.189, 0, 0,
-                                     0.349, 0.686, 0.168, 0, 0,
-                                     0.272, 0.534, 0.131, 0, 0,
-                                     0, 0, 0, 1, 0]},
-      {name: 'componentTransfer',
-          funcA: {type: "table", tableValues: [0, 0.7]}},
-      {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]});
-
-  ctx.fillStyle = 'rgba(200, 0, 0, 1)';
-  ctx.fillRect(50, 50, 75, 50);
-  ctx.fillStyle = 'rgba(0, 200, 0, 1)';
-  ctx.fillRect(70, 70, 75, 50);
-
-  ctx.endLayer();
-
-  const outputCanvas = document.getElementById("canvas");
-  outputCanvas.getContext('2d').drawImage(canvas, 0, 0);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-global-states.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-global-states.w.html
deleted file mode 100644
index ec744d7ffe..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-global-states.w.html
+++ /dev/null
@@ -1,54 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<html class="reftest-wait">
-<link rel="match" href="2d.layer.global-states.filter.no-global-states-expected.html">
-<title>Canvas test: 2d.layer.global-states.filter.no-global-states</title>
-<h1>2d.layer.global-states.filter.no-global-states</h1>
-<p class="desc">Checks that layers with filters correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script id='myWorker' type='text/worker'>
-  self.onmessage = function(e) {
-    const canvas = new OffscreenCanvas(200, 200);
-    const ctx = canvas.getContext('2d');
-
-    ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
-    var circle = new Path2D();
-    circle.arc(90, 90, 45, 0, 2 * Math.PI);
-    ctx.fill(circle);
-
-    // No global states.
-
-    ctx.beginLayer({filter: [
-        {name: 'colorMatrix', values: [0.393, 0.769, 0.189, 0, 0,
-                                       0.349, 0.686, 0.168, 0, 0,
-                                       0.272, 0.534, 0.131, 0, 0,
-                                       0, 0, 0, 1, 0]},
-        {name: 'componentTransfer',
-            funcA: {type: "table", tableValues: [0, 0.7]}},
-        {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]});
-
-    ctx.fillStyle = 'rgba(200, 0, 0, 1)';
-    ctx.fillRect(50, 50, 75, 50);
-    ctx.fillStyle = 'rgba(0, 200, 0, 1)';
-    ctx.fillRect(70, 70, 75, 50);
-
-    ctx.endLayer();
-
-    const bitmap = canvas.transferToImageBitmap();
-    self.postMessage(bitmap, bitmap);
-  };
-</script>
-<script>
-  const blob = new Blob([document.getElementById('myWorker').textContent]);
-  const worker = new Worker(URL.createObjectURL(blob));
-  worker.addEventListener('message', msg => {
-    const outputCtx = document.getElementById("canvas").getContext('2d');
-    outputCtx.drawImage(msg.data, 0, 0);
-    document.documentElement.classList.remove("reftest-wait");
-  });
-  worker.postMessage(null);
-</script>
-</html>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.shadow-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.shadow-expected.html
deleted file mode 100644
index 13ba2dd4cd..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.shadow-expected.html
+++ /dev/null
@@ -1,53 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>Canvas test: 2d.layer.global-states.filter.shadow</title>
-<h1>2d.layer.global-states.filter.shadow</h1>
-<p class="desc">Checks that layers with filters correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
-  const canvas = document.getElementById("canvas");
-  const ctx = canvas.getContext('2d');
-
-  const svg = `
-    <svg xmlns="http://www.w3.org/2000/svg"
-          width="200" height="200"
-          color-interpolation-filters="sRGB">
-      <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
-        <feColorMatrix
-            type="matrix"
-            values="0.393 0.769 0.189 0 0
-                    0.349 0.686 0.168 0 0
-                    0.272 0.534 0.131 0 0
-                    0 0 0 1 0" />
-        <feComponentTransfer>
-          <feFuncA type="table" tableValues="0 0.7"></feFuncA>
-        </feComponentTransfer>
-        <feDropShadow dx="5" dy="5" flood-color="#81e" />
-      </filter>
-      <g filter="url(#filter)">
-        <rect x="50" y="50" width="75" height="50" fill="rgba(200, 0, 0, 1)"/>
-        <rect x="70" y="70" width="75" height="50" fill="rgba(0, 200, 0, 1)"/>
-      </g>
-    </svg>`;
-
-  const img = new Image();
-  img.width = 200;
-  img.height = 200;
-  img.onload = () => {
-    ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
-    var circle = new Path2D();
-    circle.arc(90, 90, 45, 0, 2 * Math.PI);
-    ctx.fill(circle);
-
-    ctx.shadowOffsetX = -10;
-  ctx.shadowOffsetY = 10;
-  ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
-  ctx.shadowBlur = 3;
-
-    ctx.drawImage(img, 0, 0);
-  };
-  img.src = 'data:image/svg+xml;base64,' + btoa(svg);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.shadow.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.shadow.html
deleted file mode 100644
index 7bb0ef5e13..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.shadow.html
+++ /dev/null
@@ -1,43 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<link rel="match" href="2d.layer.global-states.filter.shadow-expected.html">
-<title>Canvas test: 2d.layer.global-states.filter.shadow</title>
-<h1>2d.layer.global-states.filter.shadow</h1>
-<p class="desc">Checks that layers with filters correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
-  const canvas = new OffscreenCanvas(200, 200);
-  const ctx = canvas.getContext('2d');
-
-  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
-  var circle = new Path2D();
-  circle.arc(90, 90, 45, 0, 2 * Math.PI);
-  ctx.fill(circle);
-
-  ctx.shadowOffsetX = -10;
-  ctx.shadowOffsetY = 10;
-  ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
-  ctx.shadowBlur = 3;
-
-  ctx.beginLayer({filter: [
-      {name: 'colorMatrix', values: [0.393, 0.769, 0.189, 0, 0,
-                                     0.349, 0.686, 0.168, 0, 0,
-                                     0.272, 0.534, 0.131, 0, 0,
-                                     0, 0, 0, 1, 0]},
-      {name: 'componentTransfer',
-          funcA: {type: "table", tableValues: [0, 0.7]}},
-      {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]});
-
-  ctx.fillStyle = 'rgba(200, 0, 0, 1)';
-  ctx.fillRect(50, 50, 75, 50);
-  ctx.fillStyle = 'rgba(0, 200, 0, 1)';
-  ctx.fillRect(70, 70, 75, 50);
-
-  ctx.endLayer();
-
-  const outputCanvas = document.getElementById("canvas");
-  outputCanvas.getContext('2d').drawImage(canvas, 0, 0);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.shadow.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.shadow.w.html
deleted file mode 100644
index bc9bd48aad..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.shadow.w.html
+++ /dev/null
@@ -1,57 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<html class="reftest-wait">
-<link rel="match" href="2d.layer.global-states.filter.shadow-expected.html">
-<title>Canvas test: 2d.layer.global-states.filter.shadow</title>
-<h1>2d.layer.global-states.filter.shadow</h1>
-<p class="desc">Checks that layers with filters correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script id='myWorker' type='text/worker'>
-  self.onmessage = function(e) {
-    const canvas = new OffscreenCanvas(200, 200);
-    const ctx = canvas.getContext('2d');
-
-    ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
-    var circle = new Path2D();
-    circle.arc(90, 90, 45, 0, 2 * Math.PI);
-    ctx.fill(circle);
-
-    ctx.shadowOffsetX = -10;
-    ctx.shadowOffsetY = 10;
-    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
-    ctx.shadowBlur = 3;
-
-    ctx.beginLayer({filter: [
-        {name: 'colorMatrix', values: [0.393, 0.769, 0.189, 0, 0,
-                                       0.349, 0.686, 0.168, 0, 0,
-                                       0.272, 0.534, 0.131, 0, 0,
-                                       0, 0, 0, 1, 0]},
-        {name: 'componentTransfer',
-            funcA: {type: "table", tableValues: [0, 0.7]}},
-        {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]});
-
-    ctx.fillStyle = 'rgba(200, 0, 0, 1)';
-    ctx.fillRect(50, 50, 75, 50);
-    ctx.fillStyle = 'rgba(0, 200, 0, 1)';
-    ctx.fillRect(70, 70, 75, 50);
-
-    ctx.endLayer();
-
-    const bitmap = canvas.transferToImageBitmap();
-    self.postMessage(bitmap, bitmap);
-  };
-</script>
-<script>
-  const blob = new Blob([document.getElementById('myWorker').textContent]);
-  const worker = new Worker(URL.createObjectURL(blob));
-  worker.addEventListener('message', msg => {
-    const outputCtx = document.getElementById("canvas").getContext('2d');
-    outputCtx.drawImage(msg.data, 0, 0);
-    document.documentElement.classList.remove("reftest-wait");
-  });
-  worker.postMessage(null);
-</script>
-</html>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.no-shadow.no-transform-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.no-shadow.no-transform-expected.html
new file mode 100644
index 0000000000..d1a799707f
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.no-shadow.no-transform-expected.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.global-states.no-composite-op.no-shadow.no-transform</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.no-composite-op.no-shadow.no-transform</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas0");
+    const ctx = canvas.getContext('2d');
+
+    // No transform.
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    // No globalAlpha.
+    // No globalCompositeOperation.
+    // No shadow.
+
+    const canvas2 = document.createElement("canvas");
+    const ctx2 = canvas2.getContext("2d");
+
+    ctx2.globalCompositeOperation = 'screen';
+    ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx2.fillRect(10, 25, 40, 50);
+    ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx2.fillRect(30, 5, 50, 40);
+
+    ctx.drawImage(canvas2, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas1");
+    const ctx = canvas.getContext('2d');
+
+    // No transform.
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    ctx.globalAlpha = 0.75;
+    // No globalCompositeOperation.
+    // No shadow.
+
+    const canvas2 = document.createElement("canvas");
+    const ctx2 = canvas2.getContext("2d");
+
+    ctx2.globalCompositeOperation = 'screen';
+    ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx2.fillRect(10, 25, 40, 50);
+    ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx2.fillRect(30, 5, 50, 40);
+
+    ctx.drawImage(canvas2, 0, 0);
+  </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.no-shadow.no-transform.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.no-shadow.no-transform.html
new file mode 100644
index 0000000000..016f78a5d8
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.no-shadow.no-transform.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.no-composite-op.no-shadow.no-transform-expected.html">
+<title>Canvas test: 2d.layer.global-states.no-composite-op.no-shadow.no-transform</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.no-composite-op.no-shadow.no-transform</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    // No transform.
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    // No globalAlpha.
+    // No globalCompositeOperation.
+    // No shadow.
+
+    ctx.beginLayer();
+
+    // Enable compositing in the layer to validate that draw calls in the layer
+    // won't individually composite with the background.
+    ctx.globalCompositeOperation = 'screen';
+
+    ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx.fillRect(10, 25, 40, 50);
+    ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx.fillRect(30, 5, 50, 40);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas0");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    // No transform.
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    ctx.globalAlpha = 0.75;
+    // No globalCompositeOperation.
+    // No shadow.
+
+    ctx.beginLayer();
+
+    // Enable compositing in the layer to validate that draw calls in the layer
+    // won't individually composite with the background.
+    ctx.globalCompositeOperation = 'screen';
+
+    ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx.fillRect(10, 25, 40, 50);
+    ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx.fillRect(30, 5, 50, 40);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas1");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.no-shadow.no-transform.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.no-shadow.no-transform.w.html
new file mode 100644
index 0000000000..2a450624f1
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.no-shadow.no-transform.w.html
@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<html class="reftest-wait">
+<link rel="match" href="2d.layer.global-states.no-composite-op.no-shadow.no-transform-expected.html">
+<title>Canvas test: 2d.layer.global-states.no-composite-op.no-shadow.no-transform</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.no-composite-op.no-shadow.no-transform</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+<script>pending_tests = 2;</script>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker0" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      // No transform.
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      // No globalAlpha.
+      // No globalCompositeOperation.
+      // No shadow.
+
+      ctx.beginLayer();
+
+      // Enable compositing in the layer to validate that draw calls in the layer
+      // won't individually composite with the background.
+      ctx.globalCompositeOperation = 'screen';
+
+      ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+      ctx.fillRect(10, 25, 40, 50);
+      ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+      ctx.fillRect(30, 5, 50, 40);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker0').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas0');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker1" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      // No transform.
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      ctx.globalAlpha = 0.75;
+      // No globalCompositeOperation.
+      // No shadow.
+
+      ctx.beginLayer();
+
+      // Enable compositing in the layer to validate that draw calls in the layer
+      // won't individually composite with the background.
+      ctx.globalCompositeOperation = 'screen';
+
+      ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+      ctx.fillRect(10, 25, 40, 50);
+      ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+      ctx.fillRect(30, 5, 50, 40);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker1').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas1');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+</div>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.no-shadow.rotation-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.no-shadow.rotation-expected.html
new file mode 100644
index 0000000000..cc91a67faf
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.no-shadow.rotation-expected.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.global-states.no-composite-op.no-shadow.rotation</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.no-composite-op.no-shadow.rotation</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas0");
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 40);
+    ctx.rotate(Math.PI);
+    ctx.translate(-45, -45);
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    // No globalAlpha.
+    // No globalCompositeOperation.
+    // No shadow.
+
+    const canvas2 = document.createElement("canvas");
+    const ctx2 = canvas2.getContext("2d");
+
+    ctx2.globalCompositeOperation = 'screen';
+    ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx2.fillRect(10, 25, 40, 50);
+    ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx2.fillRect(30, 5, 50, 40);
+
+    ctx.drawImage(canvas2, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas1");
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 40);
+    ctx.rotate(Math.PI);
+    ctx.translate(-45, -45);
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    ctx.globalAlpha = 0.75;
+    // No globalCompositeOperation.
+    // No shadow.
+
+    const canvas2 = document.createElement("canvas");
+    const ctx2 = canvas2.getContext("2d");
+
+    ctx2.globalCompositeOperation = 'screen';
+    ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx2.fillRect(10, 25, 40, 50);
+    ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx2.fillRect(30, 5, 50, 40);
+
+    ctx.drawImage(canvas2, 0, 0);
+  </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.no-shadow.rotation.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.no-shadow.rotation.html
new file mode 100644
index 0000000000..12a1e64b42
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.no-shadow.rotation.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.no-composite-op.no-shadow.rotation-expected.html">
+<title>Canvas test: 2d.layer.global-states.no-composite-op.no-shadow.rotation</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.no-composite-op.no-shadow.rotation</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 40);
+    ctx.rotate(Math.PI);
+    ctx.translate(-45, -45);
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    // No globalAlpha.
+    // No globalCompositeOperation.
+    // No shadow.
+
+    ctx.beginLayer();
+
+    // Enable compositing in the layer to validate that draw calls in the layer
+    // won't individually composite with the background.
+    ctx.globalCompositeOperation = 'screen';
+
+    ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx.fillRect(10, 25, 40, 50);
+    ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx.fillRect(30, 5, 50, 40);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas0");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 40);
+    ctx.rotate(Math.PI);
+    ctx.translate(-45, -45);
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    ctx.globalAlpha = 0.75;
+    // No globalCompositeOperation.
+    // No shadow.
+
+    ctx.beginLayer();
+
+    // Enable compositing in the layer to validate that draw calls in the layer
+    // won't individually composite with the background.
+    ctx.globalCompositeOperation = 'screen';
+
+    ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx.fillRect(10, 25, 40, 50);
+    ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx.fillRect(30, 5, 50, 40);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas1");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.no-shadow.rotation.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.no-shadow.rotation.w.html
new file mode 100644
index 0000000000..a0f5f76099
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.no-shadow.rotation.w.html
@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<html class="reftest-wait">
+<link rel="match" href="2d.layer.global-states.no-composite-op.no-shadow.rotation-expected.html">
+<title>Canvas test: 2d.layer.global-states.no-composite-op.no-shadow.rotation</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.no-composite-op.no-shadow.rotation</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+<script>pending_tests = 2;</script>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker0" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      ctx.translate(50, 40);
+      ctx.rotate(Math.PI);
+      ctx.translate(-45, -45);
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      // No globalAlpha.
+      // No globalCompositeOperation.
+      // No shadow.
+
+      ctx.beginLayer();
+
+      // Enable compositing in the layer to validate that draw calls in the layer
+      // won't individually composite with the background.
+      ctx.globalCompositeOperation = 'screen';
+
+      ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+      ctx.fillRect(10, 25, 40, 50);
+      ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+      ctx.fillRect(30, 5, 50, 40);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker0').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas0');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker1" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      ctx.translate(50, 40);
+      ctx.rotate(Math.PI);
+      ctx.translate(-45, -45);
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      ctx.globalAlpha = 0.75;
+      // No globalCompositeOperation.
+      // No shadow.
+
+      ctx.beginLayer();
+
+      // Enable compositing in the layer to validate that draw calls in the layer
+      // won't individually composite with the background.
+      ctx.globalCompositeOperation = 'screen';
+
+      ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+      ctx.fillRect(10, 25, 40, 50);
+      ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+      ctx.fillRect(30, 5, 50, 40);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker1').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas1');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+</div>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.shadow.no-transform-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.shadow.no-transform-expected.html
new file mode 100644
index 0000000000..02b239116c
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.shadow.no-transform-expected.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.global-states.no-composite-op.shadow.no-transform</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.no-composite-op.shadow.no-transform</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas0");
+    const ctx = canvas.getContext('2d');
+
+    // No transform.
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    // No globalAlpha.
+    // No globalCompositeOperation.
+    ctx.shadowOffsetX = -7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+    ctx.shadowBlur = 3;
+
+    const canvas2 = document.createElement("canvas");
+    const ctx2 = canvas2.getContext("2d");
+
+    ctx2.globalCompositeOperation = 'screen';
+    ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx2.fillRect(10, 25, 40, 50);
+    ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx2.fillRect(30, 5, 50, 40);
+
+    ctx.drawImage(canvas2, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas1");
+    const ctx = canvas.getContext('2d');
+
+    // No transform.
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    ctx.globalAlpha = 0.75;
+    // No globalCompositeOperation.
+    ctx.shadowOffsetX = -7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+    ctx.shadowBlur = 3;
+
+    const canvas2 = document.createElement("canvas");
+    const ctx2 = canvas2.getContext("2d");
+
+    ctx2.globalCompositeOperation = 'screen';
+    ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx2.fillRect(10, 25, 40, 50);
+    ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx2.fillRect(30, 5, 50, 40);
+
+    ctx.drawImage(canvas2, 0, 0);
+  </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.shadow.no-transform.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.shadow.no-transform.html
new file mode 100644
index 0000000000..99301fde09
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.shadow.no-transform.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.no-composite-op.shadow.no-transform-expected.html">
+<title>Canvas test: 2d.layer.global-states.no-composite-op.shadow.no-transform</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.no-composite-op.shadow.no-transform</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    // No transform.
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    // No globalAlpha.
+    // No globalCompositeOperation.
+    ctx.shadowOffsetX = -7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+    ctx.shadowBlur = 3;
+
+    ctx.beginLayer();
+
+    // Enable compositing in the layer to validate that draw calls in the layer
+    // won't individually composite with the background.
+    ctx.globalCompositeOperation = 'screen';
+
+    ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx.fillRect(10, 25, 40, 50);
+    ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx.fillRect(30, 5, 50, 40);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas0");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    // No transform.
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    ctx.globalAlpha = 0.75;
+    // No globalCompositeOperation.
+    ctx.shadowOffsetX = -7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+    ctx.shadowBlur = 3;
+
+    ctx.beginLayer();
+
+    // Enable compositing in the layer to validate that draw calls in the layer
+    // won't individually composite with the background.
+    ctx.globalCompositeOperation = 'screen';
+
+    ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx.fillRect(10, 25, 40, 50);
+    ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx.fillRect(30, 5, 50, 40);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas1");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.shadow.no-transform.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.shadow.no-transform.w.html
new file mode 100644
index 0000000000..46375f290c
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.shadow.no-transform.w.html
@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<html class="reftest-wait">
+<link rel="match" href="2d.layer.global-states.no-composite-op.shadow.no-transform-expected.html">
+<title>Canvas test: 2d.layer.global-states.no-composite-op.shadow.no-transform</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.no-composite-op.shadow.no-transform</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+<script>pending_tests = 2;</script>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker0" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      // No transform.
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      // No globalAlpha.
+      // No globalCompositeOperation.
+      ctx.shadowOffsetX = -7;
+      ctx.shadowOffsetY = 7;
+      ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+      ctx.shadowBlur = 3;
+
+      ctx.beginLayer();
+
+      // Enable compositing in the layer to validate that draw calls in the layer
+      // won't individually composite with the background.
+      ctx.globalCompositeOperation = 'screen';
+
+      ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+      ctx.fillRect(10, 25, 40, 50);
+      ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+      ctx.fillRect(30, 5, 50, 40);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker0').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas0');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker1" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      // No transform.
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      ctx.globalAlpha = 0.75;
+      // No globalCompositeOperation.
+      ctx.shadowOffsetX = -7;
+      ctx.shadowOffsetY = 7;
+      ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+      ctx.shadowBlur = 3;
+
+      ctx.beginLayer();
+
+      // Enable compositing in the layer to validate that draw calls in the layer
+      // won't individually composite with the background.
+      ctx.globalCompositeOperation = 'screen';
+
+      ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+      ctx.fillRect(10, 25, 40, 50);
+      ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+      ctx.fillRect(30, 5, 50, 40);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker1').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas1');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+</div>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.shadow.rotation-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.shadow.rotation-expected.html
new file mode 100644
index 0000000000..06f6a2dff3
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.shadow.rotation-expected.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.global-states.no-composite-op.shadow.rotation</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.no-composite-op.shadow.rotation</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas0");
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 40);
+    ctx.rotate(Math.PI);
+    ctx.translate(-45, -45);
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    // No globalAlpha.
+    // No globalCompositeOperation.
+    ctx.shadowOffsetX = -7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+    ctx.shadowBlur = 3;
+
+    const canvas2 = document.createElement("canvas");
+    const ctx2 = canvas2.getContext("2d");
+
+    ctx2.globalCompositeOperation = 'screen';
+    ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx2.fillRect(10, 25, 40, 50);
+    ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx2.fillRect(30, 5, 50, 40);
+
+    ctx.drawImage(canvas2, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas1");
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 40);
+    ctx.rotate(Math.PI);
+    ctx.translate(-45, -45);
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    ctx.globalAlpha = 0.75;
+    // No globalCompositeOperation.
+    ctx.shadowOffsetX = -7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+    ctx.shadowBlur = 3;
+
+    const canvas2 = document.createElement("canvas");
+    const ctx2 = canvas2.getContext("2d");
+
+    ctx2.globalCompositeOperation = 'screen';
+    ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx2.fillRect(10, 25, 40, 50);
+    ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx2.fillRect(30, 5, 50, 40);
+
+    ctx.drawImage(canvas2, 0, 0);
+  </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.shadow.rotation.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.shadow.rotation.html
new file mode 100644
index 0000000000..280cc1cceb
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.shadow.rotation.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.no-composite-op.shadow.rotation-expected.html">
+<title>Canvas test: 2d.layer.global-states.no-composite-op.shadow.rotation</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.no-composite-op.shadow.rotation</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 40);
+    ctx.rotate(Math.PI);
+    ctx.translate(-45, -45);
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    // No globalAlpha.
+    // No globalCompositeOperation.
+    ctx.shadowOffsetX = -7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+    ctx.shadowBlur = 3;
+
+    ctx.beginLayer();
+
+    // Enable compositing in the layer to validate that draw calls in the layer
+    // won't individually composite with the background.
+    ctx.globalCompositeOperation = 'screen';
+
+    ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx.fillRect(10, 25, 40, 50);
+    ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx.fillRect(30, 5, 50, 40);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas0");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 40);
+    ctx.rotate(Math.PI);
+    ctx.translate(-45, -45);
+
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
+
+    ctx.globalAlpha = 0.75;
+    // No globalCompositeOperation.
+    ctx.shadowOffsetX = -7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+    ctx.shadowBlur = 3;
+
+    ctx.beginLayer();
+
+    // Enable compositing in the layer to validate that draw calls in the layer
+    // won't individually composite with the background.
+    ctx.globalCompositeOperation = 'screen';
+
+    ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx.fillRect(10, 25, 40, 50);
+    ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx.fillRect(30, 5, 50, 40);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas1");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.shadow.rotation.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.shadow.rotation.w.html
new file mode 100644
index 0000000000..3192f79afa
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-composite-op.shadow.rotation.w.html
@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<html class="reftest-wait">
+<link rel="match" href="2d.layer.global-states.no-composite-op.shadow.rotation-expected.html">
+<title>Canvas test: 2d.layer.global-states.no-composite-op.shadow.rotation</title>
+<h1 style="font-size: 20px;">2d.layer.global-states.no-composite-op.shadow.rotation</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+<script>pending_tests = 2;</script>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(2, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>no-globalAlpha</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker0" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      ctx.translate(50, 40);
+      ctx.rotate(Math.PI);
+      ctx.translate(-45, -45);
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      // No globalAlpha.
+      // No globalCompositeOperation.
+      ctx.shadowOffsetX = -7;
+      ctx.shadowOffsetY = 7;
+      ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+      ctx.shadowBlur = 3;
+
+      ctx.beginLayer();
+
+      // Enable compositing in the layer to validate that draw calls in the layer
+      // won't individually composite with the background.
+      ctx.globalCompositeOperation = 'screen';
+
+      ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+      ctx.fillRect(10, 25, 40, 50);
+      ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+      ctx.fillRect(30, 5, 50, 40);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker0').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas0');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+<span>
+  <div>globalAlpha</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker1" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      ctx.translate(50, 40);
+      ctx.rotate(Math.PI);
+      ctx.translate(-45, -45);
+
+      ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
+
+      ctx.globalAlpha = 0.75;
+      // No globalCompositeOperation.
+      ctx.shadowOffsetX = -7;
+      ctx.shadowOffsetY = 7;
+      ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+      ctx.shadowBlur = 3;
+
+      ctx.beginLayer();
+
+      // Enable compositing in the layer to validate that draw calls in the layer
+      // won't individually composite with the background.
+      ctx.globalCompositeOperation = 'screen';
+
+      ctx.fillStyle = 'rgba(255, 0, 0, 1)';
+      ctx.fillRect(10, 25, 40, 50);
+      ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+      ctx.fillRect(30, 5, 50, 40);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker1').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas1');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+</div>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-global-states-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-global-states-expected.html
deleted file mode 100644
index b91a2ae8b5..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-global-states-expected.html
+++ /dev/null
@@ -1,31 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>Canvas test: 2d.layer.global-states.no-global-states</title>
-<h1>2d.layer.global-states.no-global-states</h1>
-<p class="desc">Checks that layers correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
-  const canvas = document.getElementById("canvas");
-  const ctx = canvas.getContext('2d');
-
-  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
-  var circle = new Path2D();
-  circle.arc(90, 90, 45, 0, 2 * Math.PI);
-  ctx.fill(circle);
-
-  // No global states.
-
-  canvas2 = document.createElement("canvas");
-  ctx2 = canvas2.getContext("2d");
-
-  ctx2.globalCompositeOperation = 'screen';
-  ctx2.fillStyle = 'rgba(225, 0, 0, 1)';
-  ctx2.fillRect(50, 50, 75, 50);
-  ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
-  ctx2.fillRect(70, 70, 75, 50);
-
-  ctx.drawImage(canvas2, 0, 0);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-global-states.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-global-states.html
deleted file mode 100644
index c8a9815381..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-global-states.html
+++ /dev/null
@@ -1,37 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<link rel="match" href="2d.layer.global-states.no-global-states-expected.html">
-<title>Canvas test: 2d.layer.global-states.no-global-states</title>
-<h1>2d.layer.global-states.no-global-states</h1>
-<p class="desc">Checks that layers correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
-  const canvas = new OffscreenCanvas(200, 200);
-  const ctx = canvas.getContext('2d');
-
-  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
-  var circle = new Path2D();
-  circle.arc(90, 90, 45, 0, 2 * Math.PI);
-  ctx.fill(circle);
-
-  // No global states.
-
-  ctx.beginLayer();
-
-  // Enable compositing in the layer to validate that draw calls in the layer
-  // won't individually composite with the background.
-  ctx.globalCompositeOperation = 'screen';
-
-  ctx.fillStyle = 'rgba(225, 0, 0, 1)';
-  ctx.fillRect(50, 50, 75, 50);
-  ctx.fillStyle = 'rgba(0, 255, 0, 1)';
-  ctx.fillRect(70, 70, 75, 50);
-
-  ctx.endLayer();
-
-  const outputCanvas = document.getElementById("canvas");
-  outputCanvas.getContext('2d').drawImage(canvas, 0, 0);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-global-states.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-global-states.w.html
deleted file mode 100644
index db03a3fd0c..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-global-states.w.html
+++ /dev/null
@@ -1,51 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<html class="reftest-wait">
-<link rel="match" href="2d.layer.global-states.no-global-states-expected.html">
-<title>Canvas test: 2d.layer.global-states.no-global-states</title>
-<h1>2d.layer.global-states.no-global-states</h1>
-<p class="desc">Checks that layers correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script id='myWorker' type='text/worker'>
-  self.onmessage = function(e) {
-    const canvas = new OffscreenCanvas(200, 200);
-    const ctx = canvas.getContext('2d');
-
-    ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
-    var circle = new Path2D();
-    circle.arc(90, 90, 45, 0, 2 * Math.PI);
-    ctx.fill(circle);
-
-    // No global states.
-
-    ctx.beginLayer();
-
-    // Enable compositing in the layer to validate that draw calls in the layer
-    // won't individually composite with the background.
-    ctx.globalCompositeOperation = 'screen';
-
-    ctx.fillStyle = 'rgba(225, 0, 0, 1)';
-    ctx.fillRect(50, 50, 75, 50);
-    ctx.fillStyle = 'rgba(0, 255, 0, 1)';
-    ctx.fillRect(70, 70, 75, 50);
-
-    ctx.endLayer();
-
-    const bitmap = canvas.transferToImageBitmap();
-    self.postMessage(bitmap, bitmap);
-  };
-</script>
-<script>
-  const blob = new Blob([document.getElementById('myWorker').textContent]);
-  const worker = new Worker(URL.createObjectURL(blob));
-  worker.addEventListener('message', msg => {
-    const outputCtx = document.getElementById("canvas").getContext('2d');
-    outputCtx.drawImage(msg.data, 0, 0);
-    document.documentElement.classList.remove("reftest-wait");
-  });
-  worker.postMessage(null);
-</script>
-</html>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.shadow-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.shadow-expected.html
deleted file mode 100644
index 835e9d420a..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.shadow-expected.html
+++ /dev/null
@@ -1,34 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>Canvas test: 2d.layer.global-states.shadow</title>
-<h1>2d.layer.global-states.shadow</h1>
-<p class="desc">Checks that layers correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
-  const canvas = document.getElementById("canvas");
-  const ctx = canvas.getContext('2d');
-
-  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
-  var circle = new Path2D();
-  circle.arc(90, 90, 45, 0, 2 * Math.PI);
-  ctx.fill(circle);
-
-  ctx.shadowOffsetX = -10;
-  ctx.shadowOffsetY = 10;
-  ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
-  ctx.shadowBlur = 3;
-
-  canvas2 = document.createElement("canvas");
-  ctx2 = canvas2.getContext("2d");
-
-  ctx2.globalCompositeOperation = 'screen';
-  ctx2.fillStyle = 'rgba(225, 0, 0, 1)';
-  ctx2.fillRect(50, 50, 75, 50);
-  ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
-  ctx2.fillRect(70, 70, 75, 50);
-
-  ctx.drawImage(canvas2, 0, 0);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.shadow.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.shadow.html
deleted file mode 100644
index ad60e87fb1..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.shadow.html
+++ /dev/null
@@ -1,40 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<link rel="match" href="2d.layer.global-states.shadow-expected.html">
-<title>Canvas test: 2d.layer.global-states.shadow</title>
-<h1>2d.layer.global-states.shadow</h1>
-<p class="desc">Checks that layers correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script>
-  const canvas = new OffscreenCanvas(200, 200);
-  const ctx = canvas.getContext('2d');
-
-  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
-  var circle = new Path2D();
-  circle.arc(90, 90, 45, 0, 2 * Math.PI);
-  ctx.fill(circle);
-
-  ctx.shadowOffsetX = -10;
-  ctx.shadowOffsetY = 10;
-  ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
-  ctx.shadowBlur = 3;
-
-  ctx.beginLayer();
-
-  // Enable compositing in the layer to validate that draw calls in the layer
-  // won't individually composite with the background.
-  ctx.globalCompositeOperation = 'screen';
-
-  ctx.fillStyle = 'rgba(225, 0, 0, 1)';
-  ctx.fillRect(50, 50, 75, 50);
-  ctx.fillStyle = 'rgba(0, 255, 0, 1)';
-  ctx.fillRect(70, 70, 75, 50);
-
-  ctx.endLayer();
-
-  const outputCanvas = document.getElementById("canvas");
-  outputCanvas.getContext('2d').drawImage(canvas, 0, 0);
-</script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.shadow.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.shadow.w.html
deleted file mode 100644
index 1fc35fd33a..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.global-states.shadow.w.html
+++ /dev/null
@@ -1,54 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<html class="reftest-wait">
-<link rel="match" href="2d.layer.global-states.shadow-expected.html">
-<title>Canvas test: 2d.layer.global-states.shadow</title>
-<h1>2d.layer.global-states.shadow</h1>
-<p class="desc">Checks that layers correctly use global render states.</p>
-<canvas id="canvas" width="200" height="200">
-  <p class="fallback">FAIL (fallback content)</p>
-</canvas>
-<script id='myWorker' type='text/worker'>
-  self.onmessage = function(e) {
-    const canvas = new OffscreenCanvas(200, 200);
-    const ctx = canvas.getContext('2d');
-
-    ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
-    var circle = new Path2D();
-    circle.arc(90, 90, 45, 0, 2 * Math.PI);
-    ctx.fill(circle);
-
-    ctx.shadowOffsetX = -10;
-    ctx.shadowOffsetY = 10;
-    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
-    ctx.shadowBlur = 3;
-
-    ctx.beginLayer();
-
-    // Enable compositing in the layer to validate that draw calls in the layer
-    // won't individually composite with the background.
-    ctx.globalCompositeOperation = 'screen';
-
-    ctx.fillStyle = 'rgba(225, 0, 0, 1)';
-    ctx.fillRect(50, 50, 75, 50);
-    ctx.fillStyle = 'rgba(0, 255, 0, 1)';
-    ctx.fillRect(70, 70, 75, 50);
-
-    ctx.endLayer();
-
-    const bitmap = canvas.transferToImageBitmap();
-    self.postMessage(bitmap, bitmap);
-  };
-</script>
-<script>
-  const blob = new Blob([document.getElementById('myWorker').textContent]);
-  const worker = new Worker(URL.createObjectURL(blob));
-  worker.addEventListener('message', msg => {
-    const outputCtx = document.getElementById("canvas").getContext('2d');
-    outputCtx.drawImage(msg.data, 0, 0);
-    document.documentElement.classList.remove("reftest-wait");
-  });
-  worker.postMessage(null);
-</script>
-</html>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.globalCompositeOperation-expected.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.globalCompositeOperation-expected.html
new file mode 100644
index 0000000000..02a8915c0b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.globalCompositeOperation-expected.html
@@ -0,0 +1,910 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.globalCompositeOperation</title>
+<h1 style="font-size: 20px;">2d.layer.globalCompositeOperation</h1>
+<p class="desc">Checks that layers work with all globalCompositeOperation values.</p>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(7, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>source-over</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas0");
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 50);
+    ctx.scale(2, 2);
+    ctx.rotate(Math.PI);
+    ctx.translate(-25, -25);
+
+    ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+    ctx.fillRect(15, 15, 25, 25);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'source-over';
+    ctx.shadowOffsetX = 7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+    const canvas2 = document.createElement("canvas");
+    const ctx2 = canvas2.getContext("2d");
+
+    ctx2.fillStyle = 'rgba(204, 0, 0, 1)';
+    ctx2.fillRect(10, 25, 25, 20);
+    ctx2.fillStyle = 'rgba(0, 204, 0, 1)';
+    ctx2.fillRect(25, 10, 20, 25);
+
+    ctx.imageSmoothingEnabled = false;
+    ctx.drawImage(canvas2, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>source-in</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas1");
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 50);
+    ctx.scale(2, 2);
+    ctx.rotate(Math.PI);
+    ctx.translate(-25, -25);
+
+    ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+    ctx.fillRect(15, 15, 25, 25);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'source-in';
+    ctx.shadowOffsetX = 7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+    const canvas2 = document.createElement("canvas");
+    const ctx2 = canvas2.getContext("2d");
+
+    ctx2.fillStyle = 'rgba(204, 0, 0, 1)';
+    ctx2.fillRect(10, 25, 25, 20);
+    ctx2.fillStyle = 'rgba(0, 204, 0, 1)';
+    ctx2.fillRect(25, 10, 20, 25);
+
+    ctx.imageSmoothingEnabled = false;
+    ctx.drawImage(canvas2, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>source-atop</div>
+  <canvas id="canvas2" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas2");
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 50);
+    ctx.scale(2, 2);
+    ctx.rotate(Math.PI);
+    ctx.translate(-25, -25);
+
+    ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+    ctx.fillRect(15, 15, 25, 25);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'source-atop';
+    ctx.shadowOffsetX = 7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+    const canvas2 = document.createElement("canvas");
+    const ctx2 = canvas2.getContext("2d");
+
+    ctx2.fillStyle = 'rgba(204, 0, 0, 1)';
+    ctx2.fillRect(10, 25, 25, 20);
+    ctx2.fillStyle = 'rgba(0, 204, 0, 1)';
+    ctx2.fillRect(25, 10, 20, 25);
+
+    ctx.imageSmoothingEnabled = false;
+    ctx.drawImage(canvas2, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>destination-over</div>
+  <canvas id="canvas3" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas3");
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 50);
+    ctx.scale(2, 2);
+    ctx.rotate(Math.PI);
+    ctx.translate(-25, -25);
+
+    ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+    ctx.fillRect(15, 15, 25, 25);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'destination-over';
+    ctx.shadowOffsetX = 7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+    const canvas2 = document.createElement("canvas");
+    const ctx2 = canvas2.getContext("2d");
+
+    ctx2.fillStyle = 'rgba(204, 0, 0, 1)';
+    ctx2.fillRect(10, 25, 25, 20);
+    ctx2.fillStyle = 'rgba(0, 204, 0, 1)';
+    ctx2.fillRect(25, 10, 20, 25);
+
+    ctx.imageSmoothingEnabled = false;
+    ctx.drawImage(canvas2, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>destination-in</div>
+  <canvas id="canvas4" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas4");
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 50);
+    ctx.scale(2, 2);
+    ctx.rotate(Math.PI);
+    ctx.translate(-25, -25);
+
+    ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+    ctx.fillRect(15, 15, 25, 25);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'destination-in';
+    ctx.shadowOffsetX = 7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+    const canvas2 = document.createElement("canvas");
+    const ctx2 = canvas2.getContext("2d");
+
+    ctx2.fillStyle = 'rgba(204, 0, 0, 1)';
+    ctx2.fillRect(10, 25, 25, 20);
+    ctx2.fillStyle = 'rgba(0, 204, 0, 1)';
+    ctx2.fillRect(25, 10, 20, 25);
+
+    ctx.imageSmoothingEnabled = false;
+    ctx.drawImage(canvas2, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>destination-out</div>
+  <canvas id="canvas5" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas5");
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 50);
+    ctx.scale(2, 2);
+    ctx.rotate(Math.PI);
+    ctx.translate(-25, -25);
+
+    ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+    ctx.fillRect(15, 15, 25, 25);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'destination-out';
+    ctx.shadowOffsetX = 7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+    const canvas2 = document.createElement("canvas");
+    const ctx2 = canvas2.getContext("2d");
+
+    ctx2.fillStyle = 'rgba(204, 0, 0, 1)';
+    ctx2.fillRect(10, 25, 25, 20);
+    ctx2.fillStyle = 'rgba(0, 204, 0, 1)';
+    ctx2.fillRect(25, 10, 20, 25);
+
+    ctx.imageSmoothingEnabled = false;
+    ctx.drawImage(canvas2, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>destination-atop</div>
+  <canvas id="canvas6" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas6");
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 50);
+    ctx.scale(2, 2);
+    ctx.rotate(Math.PI);
+    ctx.translate(-25, -25);
+
+    ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+    ctx.fillRect(15, 15, 25, 25);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'destination-atop';
+    ctx.shadowOffsetX = 7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+    const canvas2 = document.createElement("canvas");
+    const ctx2 = canvas2.getContext("2d");
+
+    ctx2.fillStyle = 'rgba(204, 0, 0, 1)';
+    ctx2.fillRect(10, 25, 25, 20);
+    ctx2.fillStyle = 'rgba(0, 204, 0, 1)';
+    ctx2.fillRect(25, 10, 20, 25);
+
+    ctx.imageSmoothingEnabled = false;
+    ctx.drawImage(canvas2, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>lighter</div>
+  <canvas id="canvas7" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas7");
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 50);
+    ctx.scale(2, 2);
+    ctx.rotate(Math.PI);
+    ctx.translate(-25, -25);
+
+    ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+    ctx.fillRect(15, 15, 25, 25);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'lighter';
+    ctx.shadowOffsetX = 7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+    const canvas2 = document.createElement("canvas");
+    const ctx2 = canvas2.getContext("2d");
+
+    ctx2.fillStyle = 'rgba(204, 0, 0, 1)';
+    ctx2.fillRect(10, 25, 25, 20);
+    ctx2.fillStyle = 'rgba(0, 204, 0, 1)';
+    ctx2.fillRect(25, 10, 20, 25);
+
+    ctx.imageSmoothingEnabled = false;
+    ctx.drawImage(canvas2, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>copy</div>
+  <canvas id="canvas8" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas8");
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 50);
+    ctx.scale(2, 2);
+    ctx.rotate(Math.PI);
+    ctx.translate(-25, -25);
+
+    ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+    ctx.fillRect(15, 15, 25, 25);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'copy';
+    ctx.shadowOffsetX = 7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+    const canvas2 = document.createElement("canvas");
+    const ctx2 = canvas2.getContext("2d");
+
+    ctx2.fillStyle = 'rgba(204, 0, 0, 1)';
+    ctx2.fillRect(10, 25, 25, 20);
+    ctx2.fillStyle = 'rgba(0, 204, 0, 1)';
+    ctx2.fillRect(25, 10, 20, 25);
+
+    ctx.imageSmoothingEnabled = false;
+    ctx.drawImage(canvas2, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>xor</div>
+  <canvas id="canvas9" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas9");
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 50);
+    ctx.scale(2, 2);
+    ctx.rotate(Math.PI);
+    ctx.translate(-25, -25);
+
+    ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+    ctx.fillRect(15, 15, 25, 25);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'xor';
+    ctx.shadowOffsetX = 7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+    const canvas2 = document.createElement("canvas");
+    const ctx2 = canvas2.getContext("2d");
+
+    ctx2.fillStyle = 'rgba(204, 0, 0, 1)';
+    ctx2.fillRect(10, 25, 25, 20);
+    ctx2.fillStyle = 'rgba(0, 204, 0, 1)';
+    ctx2.fillRect(25, 10, 20, 25);
+
+    ctx.imageSmoothingEnabled = false;
+    ctx.drawImage(canvas2, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>multiply</div>
+  <canvas id="canvas10" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas10");
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 50);
+    ctx.scale(2, 2);
+    ctx.rotate(Math.PI);
+    ctx.translate(-25, -25);
+
+    ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+    ctx.fillRect(15, 15, 25, 25);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'multiply';
+    ctx.shadowOffsetX = 7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+    const canvas2 = document.createElement("canvas");
+    const ctx2 = canvas2.getContext("2d");
+
+    ctx2.fillStyle = 'rgba(204, 0, 0, 1)';
+    ctx2.fillRect(10, 25, 25, 20);
+    ctx2.fillStyle = 'rgba(0, 204, 0, 1)';
+    ctx2.fillRect(25, 10, 20, 25);
+
+    ctx.imageSmoothingEnabled = false;
+    ctx.drawImage(canvas2, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>screen</div>
+  <canvas id="canvas11" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas11");
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 50);
+    ctx.scale(2, 2);
+    ctx.rotate(Math.PI);
+    ctx.translate(-25, -25);
+
+    ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+    ctx.fillRect(15, 15, 25, 25);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'screen';
+    ctx.shadowOffsetX = 7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+    const canvas2 = document.createElement("canvas");
+    const ctx2 = canvas2.getContext("2d");
+
+    ctx2.fillStyle = 'rgba(204, 0, 0, 1)';
+    ctx2.fillRect(10, 25, 25, 20);
+    ctx2.fillStyle = 'rgba(0, 204, 0, 1)';
+    ctx2.fillRect(25, 10, 20, 25);
+
+    ctx.imageSmoothingEnabled = false;
+    ctx.drawImage(canvas2, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>overlay</div>
+  <canvas id="canvas12" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas12");
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 50);
+    ctx.scale(2, 2);
+    ctx.rotate(Math.PI);
+    ctx.translate(-25, -25);
+
+    ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+    ctx.fillRect(15, 15, 25, 25);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'overlay';
+    ctx.shadowOffsetX = 7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+    const canvas2 = document.createElement("canvas");
+    const ctx2 = canvas2.getContext("2d");
+
+    ctx2.fillStyle = 'rgba(204, 0, 0, 1)';
+    ctx2.fillRect(10, 25, 25, 20);
+    ctx2.fillStyle = 'rgba(0, 204, 0, 1)';
+    ctx2.fillRect(25, 10, 20, 25);
+
+    ctx.imageSmoothingEnabled = false;
+    ctx.drawImage(canvas2, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>darken</div>
+  <canvas id="canvas13" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas13");
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 50);
+    ctx.scale(2, 2);
+    ctx.rotate(Math.PI);
+    ctx.translate(-25, -25);
+
+    ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+    ctx.fillRect(15, 15, 25, 25);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'darken';
+    ctx.shadowOffsetX = 7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+    const canvas2 = document.createElement("canvas");
+    const ctx2 = canvas2.getContext("2d");
+
+    ctx2.fillStyle = 'rgba(204, 0, 0, 1)';
+    ctx2.fillRect(10, 25, 25, 20);
+    ctx2.fillStyle = 'rgba(0, 204, 0, 1)';
+    ctx2.fillRect(25, 10, 20, 25);
+
+    ctx.imageSmoothingEnabled = false;
+    ctx.drawImage(canvas2, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>lighten</div>
+  <canvas id="canvas14" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas14");
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 50);
+    ctx.scale(2, 2);
+    ctx.rotate(Math.PI);
+    ctx.translate(-25, -25);
+
+    ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+    ctx.fillRect(15, 15, 25, 25);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'lighten';
+    ctx.shadowOffsetX = 7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+    const canvas2 = document.createElement("canvas");
+    const ctx2 = canvas2.getContext("2d");
+
+    ctx2.fillStyle = 'rgba(204, 0, 0, 1)';
+    ctx2.fillRect(10, 25, 25, 20);
+    ctx2.fillStyle = 'rgba(0, 204, 0, 1)';
+    ctx2.fillRect(25, 10, 20, 25);
+
+    ctx.imageSmoothingEnabled = false;
+    ctx.drawImage(canvas2, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>color-dodge</div>
+  <canvas id="canvas15" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas15");
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 50);
+    ctx.scale(2, 2);
+    ctx.rotate(Math.PI);
+    ctx.translate(-25, -25);
+
+    ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+    ctx.fillRect(15, 15, 25, 25);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'color-dodge';
+    ctx.shadowOffsetX = 7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+    const canvas2 = document.createElement("canvas");
+    const ctx2 = canvas2.getContext("2d");
+
+    ctx2.fillStyle = 'rgba(204, 0, 0, 1)';
+    ctx2.fillRect(10, 25, 25, 20);
+    ctx2.fillStyle = 'rgba(0, 204, 0, 1)';
+    ctx2.fillRect(25, 10, 20, 25);
+
+    ctx.imageSmoothingEnabled = false;
+    ctx.drawImage(canvas2, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>color-burn</div>
+  <canvas id="canvas16" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas16");
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 50);
+    ctx.scale(2, 2);
+    ctx.rotate(Math.PI);
+    ctx.translate(-25, -25);
+
+    ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+    ctx.fillRect(15, 15, 25, 25);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'color-burn';
+    ctx.shadowOffsetX = 7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+    const canvas2 = document.createElement("canvas");
+    const ctx2 = canvas2.getContext("2d");
+
+    ctx2.fillStyle = 'rgba(204, 0, 0, 1)';
+    ctx2.fillRect(10, 25, 25, 20);
+    ctx2.fillStyle = 'rgba(0, 204, 0, 1)';
+    ctx2.fillRect(25, 10, 20, 25);
+
+    ctx.imageSmoothingEnabled = false;
+    ctx.drawImage(canvas2, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>hard-light</div>
+  <canvas id="canvas17" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas17");
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 50);
+    ctx.scale(2, 2);
+    ctx.rotate(Math.PI);
+    ctx.translate(-25, -25);
+
+    ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+    ctx.fillRect(15, 15, 25, 25);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'hard-light';
+    ctx.shadowOffsetX = 7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+    const canvas2 = document.createElement("canvas");
+    const ctx2 = canvas2.getContext("2d");
+
+    ctx2.fillStyle = 'rgba(204, 0, 0, 1)';
+    ctx2.fillRect(10, 25, 25, 20);
+    ctx2.fillStyle = 'rgba(0, 204, 0, 1)';
+    ctx2.fillRect(25, 10, 20, 25);
+
+    ctx.imageSmoothingEnabled = false;
+    ctx.drawImage(canvas2, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>soft-light</div>
+  <canvas id="canvas18" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas18");
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 50);
+    ctx.scale(2, 2);
+    ctx.rotate(Math.PI);
+    ctx.translate(-25, -25);
+
+    ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+    ctx.fillRect(15, 15, 25, 25);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'soft-light';
+    ctx.shadowOffsetX = 7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+    const canvas2 = document.createElement("canvas");
+    const ctx2 = canvas2.getContext("2d");
+
+    ctx2.fillStyle = 'rgba(204, 0, 0, 1)';
+    ctx2.fillRect(10, 25, 25, 20);
+    ctx2.fillStyle = 'rgba(0, 204, 0, 1)';
+    ctx2.fillRect(25, 10, 20, 25);
+
+    ctx.imageSmoothingEnabled = false;
+    ctx.drawImage(canvas2, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>difference</div>
+  <canvas id="canvas19" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas19");
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 50);
+    ctx.scale(2, 2);
+    ctx.rotate(Math.PI);
+    ctx.translate(-25, -25);
+
+    ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+    ctx.fillRect(15, 15, 25, 25);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'difference';
+    ctx.shadowOffsetX = 7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+    const canvas2 = document.createElement("canvas");
+    const ctx2 = canvas2.getContext("2d");
+
+    ctx2.fillStyle = 'rgba(204, 0, 0, 1)';
+    ctx2.fillRect(10, 25, 25, 20);
+    ctx2.fillStyle = 'rgba(0, 204, 0, 1)';
+    ctx2.fillRect(25, 10, 20, 25);
+
+    ctx.imageSmoothingEnabled = false;
+    ctx.drawImage(canvas2, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>exclusion</div>
+  <canvas id="canvas20" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas20");
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 50);
+    ctx.scale(2, 2);
+    ctx.rotate(Math.PI);
+    ctx.translate(-25, -25);
+
+    ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+    ctx.fillRect(15, 15, 25, 25);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'exclusion';
+    ctx.shadowOffsetX = 7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+    const canvas2 = document.createElement("canvas");
+    const ctx2 = canvas2.getContext("2d");
+
+    ctx2.fillStyle = 'rgba(204, 0, 0, 1)';
+    ctx2.fillRect(10, 25, 25, 20);
+    ctx2.fillStyle = 'rgba(0, 204, 0, 1)';
+    ctx2.fillRect(25, 10, 20, 25);
+
+    ctx.imageSmoothingEnabled = false;
+    ctx.drawImage(canvas2, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>hue</div>
+  <canvas id="canvas21" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas21");
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 50);
+    ctx.scale(2, 2);
+    ctx.rotate(Math.PI);
+    ctx.translate(-25, -25);
+
+    ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+    ctx.fillRect(15, 15, 25, 25);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'hue';
+    ctx.shadowOffsetX = 7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+    const canvas2 = document.createElement("canvas");
+    const ctx2 = canvas2.getContext("2d");
+
+    ctx2.fillStyle = 'rgba(204, 0, 0, 1)';
+    ctx2.fillRect(10, 25, 25, 20);
+    ctx2.fillStyle = 'rgba(0, 204, 0, 1)';
+    ctx2.fillRect(25, 10, 20, 25);
+
+    ctx.imageSmoothingEnabled = false;
+    ctx.drawImage(canvas2, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>saturation</div>
+  <canvas id="canvas22" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas22");
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 50);
+    ctx.scale(2, 2);
+    ctx.rotate(Math.PI);
+    ctx.translate(-25, -25);
+
+    ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+    ctx.fillRect(15, 15, 25, 25);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'saturation';
+    ctx.shadowOffsetX = 7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+    const canvas2 = document.createElement("canvas");
+    const ctx2 = canvas2.getContext("2d");
+
+    ctx2.fillStyle = 'rgba(204, 0, 0, 1)';
+    ctx2.fillRect(10, 25, 25, 20);
+    ctx2.fillStyle = 'rgba(0, 204, 0, 1)';
+    ctx2.fillRect(25, 10, 20, 25);
+
+    ctx.imageSmoothingEnabled = false;
+    ctx.drawImage(canvas2, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>color</div>
+  <canvas id="canvas23" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas23");
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 50);
+    ctx.scale(2, 2);
+    ctx.rotate(Math.PI);
+    ctx.translate(-25, -25);
+
+    ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+    ctx.fillRect(15, 15, 25, 25);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'color';
+    ctx.shadowOffsetX = 7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+    const canvas2 = document.createElement("canvas");
+    const ctx2 = canvas2.getContext("2d");
+
+    ctx2.fillStyle = 'rgba(204, 0, 0, 1)';
+    ctx2.fillRect(10, 25, 25, 20);
+    ctx2.fillStyle = 'rgba(0, 204, 0, 1)';
+    ctx2.fillRect(25, 10, 20, 25);
+
+    ctx.imageSmoothingEnabled = false;
+    ctx.drawImage(canvas2, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>luminosity</div>
+  <canvas id="canvas24" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = document.getElementById("canvas24");
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 50);
+    ctx.scale(2, 2);
+    ctx.rotate(Math.PI);
+    ctx.translate(-25, -25);
+
+    ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+    ctx.fillRect(15, 15, 25, 25);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'luminosity';
+    ctx.shadowOffsetX = 7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+    const canvas2 = document.createElement("canvas");
+    const ctx2 = canvas2.getContext("2d");
+
+    ctx2.fillStyle = 'rgba(204, 0, 0, 1)';
+    ctx2.fillRect(10, 25, 25, 20);
+    ctx2.fillStyle = 'rgba(0, 204, 0, 1)';
+    ctx2.fillRect(25, 10, 20, 25);
+
+    ctx.imageSmoothingEnabled = false;
+    ctx.drawImage(canvas2, 0, 0);
+  </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.globalCompositeOperation.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.globalCompositeOperation.html
new file mode 100644
index 0000000000..ab9bc4270b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.globalCompositeOperation.html
@@ -0,0 +1,961 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.globalCompositeOperation-expected.html">
+<title>Canvas test: 2d.layer.globalCompositeOperation</title>
+<h1 style="font-size: 20px;">2d.layer.globalCompositeOperation</h1>
+<p class="desc">Checks that layers work with all globalCompositeOperation values.</p>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(7, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>source-over</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 50);
+    ctx.scale(2, 2);
+    ctx.rotate(Math.PI);
+    ctx.translate(-25, -25);
+
+    ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+    ctx.fillRect(15, 15, 25, 25);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'source-over';
+    ctx.shadowOffsetX = 7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+    ctx.beginLayer();
+
+    ctx.fillStyle = 'rgba(204, 0, 0, 1)';
+    ctx.fillRect(10, 25, 25, 20);
+    ctx.fillStyle = 'rgba(0, 204, 0, 1)';
+    ctx.fillRect(25, 10, 20, 25);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas0");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>source-in</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 50);
+    ctx.scale(2, 2);
+    ctx.rotate(Math.PI);
+    ctx.translate(-25, -25);
+
+    ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+    ctx.fillRect(15, 15, 25, 25);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'source-in';
+    ctx.shadowOffsetX = 7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+    ctx.beginLayer();
+
+    ctx.fillStyle = 'rgba(204, 0, 0, 1)';
+    ctx.fillRect(10, 25, 25, 20);
+    ctx.fillStyle = 'rgba(0, 204, 0, 1)';
+    ctx.fillRect(25, 10, 20, 25);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas1");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>source-atop</div>
+  <canvas id="canvas2" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 50);
+    ctx.scale(2, 2);
+    ctx.rotate(Math.PI);
+    ctx.translate(-25, -25);
+
+    ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+    ctx.fillRect(15, 15, 25, 25);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'source-atop';
+    ctx.shadowOffsetX = 7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+    ctx.beginLayer();
+
+    ctx.fillStyle = 'rgba(204, 0, 0, 1)';
+    ctx.fillRect(10, 25, 25, 20);
+    ctx.fillStyle = 'rgba(0, 204, 0, 1)';
+    ctx.fillRect(25, 10, 20, 25);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas2");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>destination-over</div>
+  <canvas id="canvas3" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 50);
+    ctx.scale(2, 2);
+    ctx.rotate(Math.PI);
+    ctx.translate(-25, -25);
+
+    ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+    ctx.fillRect(15, 15, 25, 25);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'destination-over';
+    ctx.shadowOffsetX = 7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+    ctx.beginLayer();
+
+    ctx.fillStyle = 'rgba(204, 0, 0, 1)';
+    ctx.fillRect(10, 25, 25, 20);
+    ctx.fillStyle = 'rgba(0, 204, 0, 1)';
+    ctx.fillRect(25, 10, 20, 25);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas3");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>destination-in</div>
+  <canvas id="canvas4" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 50);
+    ctx.scale(2, 2);
+    ctx.rotate(Math.PI);
+    ctx.translate(-25, -25);
+
+    ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+    ctx.fillRect(15, 15, 25, 25);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'destination-in';
+    ctx.shadowOffsetX = 7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+    ctx.beginLayer();
+
+    ctx.fillStyle = 'rgba(204, 0, 0, 1)';
+    ctx.fillRect(10, 25, 25, 20);
+    ctx.fillStyle = 'rgba(0, 204, 0, 1)';
+    ctx.fillRect(25, 10, 20, 25);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas4");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>destination-out</div>
+  <canvas id="canvas5" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 50);
+    ctx.scale(2, 2);
+    ctx.rotate(Math.PI);
+    ctx.translate(-25, -25);
+
+    ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+    ctx.fillRect(15, 15, 25, 25);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'destination-out';
+    ctx.shadowOffsetX = 7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+    ctx.beginLayer();
+
+    ctx.fillStyle = 'rgba(204, 0, 0, 1)';
+    ctx.fillRect(10, 25, 25, 20);
+    ctx.fillStyle = 'rgba(0, 204, 0, 1)';
+    ctx.fillRect(25, 10, 20, 25);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas5");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>destination-atop</div>
+  <canvas id="canvas6" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 50);
+    ctx.scale(2, 2);
+    ctx.rotate(Math.PI);
+    ctx.translate(-25, -25);
+
+    ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+    ctx.fillRect(15, 15, 25, 25);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'destination-atop';
+    ctx.shadowOffsetX = 7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+    ctx.beginLayer();
+
+    ctx.fillStyle = 'rgba(204, 0, 0, 1)';
+    ctx.fillRect(10, 25, 25, 20);
+    ctx.fillStyle = 'rgba(0, 204, 0, 1)';
+    ctx.fillRect(25, 10, 20, 25);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas6");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>lighter</div>
+  <canvas id="canvas7" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 50);
+    ctx.scale(2, 2);
+    ctx.rotate(Math.PI);
+    ctx.translate(-25, -25);
+
+    ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+    ctx.fillRect(15, 15, 25, 25);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'lighter';
+    ctx.shadowOffsetX = 7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+    ctx.beginLayer();
+
+    ctx.fillStyle = 'rgba(204, 0, 0, 1)';
+    ctx.fillRect(10, 25, 25, 20);
+    ctx.fillStyle = 'rgba(0, 204, 0, 1)';
+    ctx.fillRect(25, 10, 20, 25);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas7");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>copy</div>
+  <canvas id="canvas8" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 50);
+    ctx.scale(2, 2);
+    ctx.rotate(Math.PI);
+    ctx.translate(-25, -25);
+
+    ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+    ctx.fillRect(15, 15, 25, 25);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'copy';
+    ctx.shadowOffsetX = 7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+    ctx.beginLayer();
+
+    ctx.fillStyle = 'rgba(204, 0, 0, 1)';
+    ctx.fillRect(10, 25, 25, 20);
+    ctx.fillStyle = 'rgba(0, 204, 0, 1)';
+    ctx.fillRect(25, 10, 20, 25);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas8");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>xor</div>
+  <canvas id="canvas9" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 50);
+    ctx.scale(2, 2);
+    ctx.rotate(Math.PI);
+    ctx.translate(-25, -25);
+
+    ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+    ctx.fillRect(15, 15, 25, 25);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'xor';
+    ctx.shadowOffsetX = 7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+    ctx.beginLayer();
+
+    ctx.fillStyle = 'rgba(204, 0, 0, 1)';
+    ctx.fillRect(10, 25, 25, 20);
+    ctx.fillStyle = 'rgba(0, 204, 0, 1)';
+    ctx.fillRect(25, 10, 20, 25);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas9");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>multiply</div>
+  <canvas id="canvas10" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 50);
+    ctx.scale(2, 2);
+    ctx.rotate(Math.PI);
+    ctx.translate(-25, -25);
+
+    ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+    ctx.fillRect(15, 15, 25, 25);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'multiply';
+    ctx.shadowOffsetX = 7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+    ctx.beginLayer();
+
+    ctx.fillStyle = 'rgba(204, 0, 0, 1)';
+    ctx.fillRect(10, 25, 25, 20);
+    ctx.fillStyle = 'rgba(0, 204, 0, 1)';
+    ctx.fillRect(25, 10, 20, 25);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas10");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>screen</div>
+  <canvas id="canvas11" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 50);
+    ctx.scale(2, 2);
+    ctx.rotate(Math.PI);
+    ctx.translate(-25, -25);
+
+    ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+    ctx.fillRect(15, 15, 25, 25);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'screen';
+    ctx.shadowOffsetX = 7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+    ctx.beginLayer();
+
+    ctx.fillStyle = 'rgba(204, 0, 0, 1)';
+    ctx.fillRect(10, 25, 25, 20);
+    ctx.fillStyle = 'rgba(0, 204, 0, 1)';
+    ctx.fillRect(25, 10, 20, 25);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas11");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>overlay</div>
+  <canvas id="canvas12" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 50);
+    ctx.scale(2, 2);
+    ctx.rotate(Math.PI);
+    ctx.translate(-25, -25);
+
+    ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+    ctx.fillRect(15, 15, 25, 25);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'overlay';
+    ctx.shadowOffsetX = 7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+    ctx.beginLayer();
+
+    ctx.fillStyle = 'rgba(204, 0, 0, 1)';
+    ctx.fillRect(10, 25, 25, 20);
+    ctx.fillStyle = 'rgba(0, 204, 0, 1)';
+    ctx.fillRect(25, 10, 20, 25);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas12");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>darken</div>
+  <canvas id="canvas13" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 50);
+    ctx.scale(2, 2);
+    ctx.rotate(Math.PI);
+    ctx.translate(-25, -25);
+
+    ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+    ctx.fillRect(15, 15, 25, 25);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'darken';
+    ctx.shadowOffsetX = 7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+    ctx.beginLayer();
+
+    ctx.fillStyle = 'rgba(204, 0, 0, 1)';
+    ctx.fillRect(10, 25, 25, 20);
+    ctx.fillStyle = 'rgba(0, 204, 0, 1)';
+    ctx.fillRect(25, 10, 20, 25);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas13");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>lighten</div>
+  <canvas id="canvas14" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 50);
+    ctx.scale(2, 2);
+    ctx.rotate(Math.PI);
+    ctx.translate(-25, -25);
+
+    ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+    ctx.fillRect(15, 15, 25, 25);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'lighten';
+    ctx.shadowOffsetX = 7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+    ctx.beginLayer();
+
+    ctx.fillStyle = 'rgba(204, 0, 0, 1)';
+    ctx.fillRect(10, 25, 25, 20);
+    ctx.fillStyle = 'rgba(0, 204, 0, 1)';
+    ctx.fillRect(25, 10, 20, 25);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas14");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>color-dodge</div>
+  <canvas id="canvas15" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 50);
+    ctx.scale(2, 2);
+    ctx.rotate(Math.PI);
+    ctx.translate(-25, -25);
+
+    ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+    ctx.fillRect(15, 15, 25, 25);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'color-dodge';
+    ctx.shadowOffsetX = 7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+    ctx.beginLayer();
+
+    ctx.fillStyle = 'rgba(204, 0, 0, 1)';
+    ctx.fillRect(10, 25, 25, 20);
+    ctx.fillStyle = 'rgba(0, 204, 0, 1)';
+    ctx.fillRect(25, 10, 20, 25);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas15");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>color-burn</div>
+  <canvas id="canvas16" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 50);
+    ctx.scale(2, 2);
+    ctx.rotate(Math.PI);
+    ctx.translate(-25, -25);
+
+    ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+    ctx.fillRect(15, 15, 25, 25);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'color-burn';
+    ctx.shadowOffsetX = 7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+    ctx.beginLayer();
+
+    ctx.fillStyle = 'rgba(204, 0, 0, 1)';
+    ctx.fillRect(10, 25, 25, 20);
+    ctx.fillStyle = 'rgba(0, 204, 0, 1)';
+    ctx.fillRect(25, 10, 20, 25);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas16");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>hard-light</div>
+  <canvas id="canvas17" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 50);
+    ctx.scale(2, 2);
+    ctx.rotate(Math.PI);
+    ctx.translate(-25, -25);
+
+    ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+    ctx.fillRect(15, 15, 25, 25);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'hard-light';
+    ctx.shadowOffsetX = 7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+    ctx.beginLayer();
+
+    ctx.fillStyle = 'rgba(204, 0, 0, 1)';
+    ctx.fillRect(10, 25, 25, 20);
+    ctx.fillStyle = 'rgba(0, 204, 0, 1)';
+    ctx.fillRect(25, 10, 20, 25);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas17");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>soft-light</div>
+  <canvas id="canvas18" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 50);
+    ctx.scale(2, 2);
+    ctx.rotate(Math.PI);
+    ctx.translate(-25, -25);
+
+    ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+    ctx.fillRect(15, 15, 25, 25);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'soft-light';
+    ctx.shadowOffsetX = 7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+    ctx.beginLayer();
+
+    ctx.fillStyle = 'rgba(204, 0, 0, 1)';
+    ctx.fillRect(10, 25, 25, 20);
+    ctx.fillStyle = 'rgba(0, 204, 0, 1)';
+    ctx.fillRect(25, 10, 20, 25);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas18");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>difference</div>
+  <canvas id="canvas19" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 50);
+    ctx.scale(2, 2);
+    ctx.rotate(Math.PI);
+    ctx.translate(-25, -25);
+
+    ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+    ctx.fillRect(15, 15, 25, 25);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'difference';
+    ctx.shadowOffsetX = 7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+    ctx.beginLayer();
+
+    ctx.fillStyle = 'rgba(204, 0, 0, 1)';
+    ctx.fillRect(10, 25, 25, 20);
+    ctx.fillStyle = 'rgba(0, 204, 0, 1)';
+    ctx.fillRect(25, 10, 20, 25);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas19");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>exclusion</div>
+  <canvas id="canvas20" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 50);
+    ctx.scale(2, 2);
+    ctx.rotate(Math.PI);
+    ctx.translate(-25, -25);
+
+    ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+    ctx.fillRect(15, 15, 25, 25);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'exclusion';
+    ctx.shadowOffsetX = 7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+    ctx.beginLayer();
+
+    ctx.fillStyle = 'rgba(204, 0, 0, 1)';
+    ctx.fillRect(10, 25, 25, 20);
+    ctx.fillStyle = 'rgba(0, 204, 0, 1)';
+    ctx.fillRect(25, 10, 20, 25);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas20");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>hue</div>
+  <canvas id="canvas21" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 50);
+    ctx.scale(2, 2);
+    ctx.rotate(Math.PI);
+    ctx.translate(-25, -25);
+
+    ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+    ctx.fillRect(15, 15, 25, 25);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'hue';
+    ctx.shadowOffsetX = 7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+    ctx.beginLayer();
+
+    ctx.fillStyle = 'rgba(204, 0, 0, 1)';
+    ctx.fillRect(10, 25, 25, 20);
+    ctx.fillStyle = 'rgba(0, 204, 0, 1)';
+    ctx.fillRect(25, 10, 20, 25);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas21");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>saturation</div>
+  <canvas id="canvas22" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 50);
+    ctx.scale(2, 2);
+    ctx.rotate(Math.PI);
+    ctx.translate(-25, -25);
+
+    ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+    ctx.fillRect(15, 15, 25, 25);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'saturation';
+    ctx.shadowOffsetX = 7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+    ctx.beginLayer();
+
+    ctx.fillStyle = 'rgba(204, 0, 0, 1)';
+    ctx.fillRect(10, 25, 25, 20);
+    ctx.fillStyle = 'rgba(0, 204, 0, 1)';
+    ctx.fillRect(25, 10, 20, 25);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas22");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>color</div>
+  <canvas id="canvas23" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 50);
+    ctx.scale(2, 2);
+    ctx.rotate(Math.PI);
+    ctx.translate(-25, -25);
+
+    ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+    ctx.fillRect(15, 15, 25, 25);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'color';
+    ctx.shadowOffsetX = 7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+    ctx.beginLayer();
+
+    ctx.fillStyle = 'rgba(204, 0, 0, 1)';
+    ctx.fillRect(10, 25, 25, 20);
+    ctx.fillStyle = 'rgba(0, 204, 0, 1)';
+    ctx.fillRect(25, 10, 20, 25);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas23");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+<span>
+  <div>luminosity</div>
+  <canvas id="canvas24" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script type="module">
+    const canvas = new OffscreenCanvas(90, 90);
+    const ctx = canvas.getContext('2d');
+
+    ctx.translate(50, 50);
+    ctx.scale(2, 2);
+    ctx.rotate(Math.PI);
+    ctx.translate(-25, -25);
+
+    ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+    ctx.fillRect(15, 15, 25, 25);
+
+    ctx.globalAlpha = 0.75;
+    ctx.globalCompositeOperation = 'luminosity';
+    ctx.shadowOffsetX = 7;
+    ctx.shadowOffsetY = 7;
+    ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+    ctx.beginLayer();
+
+    ctx.fillStyle = 'rgba(204, 0, 0, 1)';
+    ctx.fillRect(10, 25, 25, 20);
+    ctx.fillStyle = 'rgba(0, 204, 0, 1)';
+    ctx.fillRect(25, 10, 20, 25);
+
+    ctx.endLayer();
+
+    const outputCanvas = document.getElementById("canvas24");
+    const outputCtx = outputCanvas.getContext('2d');
+    outputCtx.drawImage(canvas, 0, 0);
+  </script>
+</span>
+
+</div>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.globalCompositeOperation.w.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.globalCompositeOperation.w.html
new file mode 100644
index 0000000000..9a403140fc
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.globalCompositeOperation.w.html
@@ -0,0 +1,1314 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<html class="reftest-wait">
+<link rel="match" href="2d.layer.globalCompositeOperation-expected.html">
+<title>Canvas test: 2d.layer.globalCompositeOperation</title>
+<h1 style="font-size: 20px;">2d.layer.globalCompositeOperation</h1>
+<p class="desc">Checks that layers work with all globalCompositeOperation values.</p>
+<script>pending_tests = 25;</script>
+
+<div style="display: grid; grid-gap: 4px;
+            grid-template-columns: repeat(7, max-content);
+            font-size: 13px; text-align: center;">
+<span>
+  <div>source-over</div>
+  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker0" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      ctx.translate(50, 50);
+      ctx.scale(2, 2);
+      ctx.rotate(Math.PI);
+      ctx.translate(-25, -25);
+
+      ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+      ctx.fillRect(15, 15, 25, 25);
+
+      ctx.globalAlpha = 0.75;
+      ctx.globalCompositeOperation = 'source-over';
+      ctx.shadowOffsetX = 7;
+      ctx.shadowOffsetY = 7;
+      ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+      ctx.beginLayer();
+
+      ctx.fillStyle = 'rgba(204, 0, 0, 1)';
+      ctx.fillRect(10, 25, 25, 20);
+      ctx.fillStyle = 'rgba(0, 204, 0, 1)';
+      ctx.fillRect(25, 10, 20, 25);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker0').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas0');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+<span>
+  <div>source-in</div>
+  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker1" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      ctx.translate(50, 50);
+      ctx.scale(2, 2);
+      ctx.rotate(Math.PI);
+      ctx.translate(-25, -25);
+
+      ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+      ctx.fillRect(15, 15, 25, 25);
+
+      ctx.globalAlpha = 0.75;
+      ctx.globalCompositeOperation = 'source-in';
+      ctx.shadowOffsetX = 7;
+      ctx.shadowOffsetY = 7;
+      ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+      ctx.beginLayer();
+
+      ctx.fillStyle = 'rgba(204, 0, 0, 1)';
+      ctx.fillRect(10, 25, 25, 20);
+      ctx.fillStyle = 'rgba(0, 204, 0, 1)';
+      ctx.fillRect(25, 10, 20, 25);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker1').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas1');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+<span>
+  <div>source-atop</div>
+  <canvas id="canvas2" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker2" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      ctx.translate(50, 50);
+      ctx.scale(2, 2);
+      ctx.rotate(Math.PI);
+      ctx.translate(-25, -25);
+
+      ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+      ctx.fillRect(15, 15, 25, 25);
+
+      ctx.globalAlpha = 0.75;
+      ctx.globalCompositeOperation = 'source-atop';
+      ctx.shadowOffsetX = 7;
+      ctx.shadowOffsetY = 7;
+      ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+      ctx.beginLayer();
+
+      ctx.fillStyle = 'rgba(204, 0, 0, 1)';
+      ctx.fillRect(10, 25, 25, 20);
+      ctx.fillStyle = 'rgba(0, 204, 0, 1)';
+      ctx.fillRect(25, 10, 20, 25);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker2').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas2');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+<span>
+  <div>destination-over</div>
+  <canvas id="canvas3" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker3" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      ctx.translate(50, 50);
+      ctx.scale(2, 2);
+      ctx.rotate(Math.PI);
+      ctx.translate(-25, -25);
+
+      ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+      ctx.fillRect(15, 15, 25, 25);
+
+      ctx.globalAlpha = 0.75;
+      ctx.globalCompositeOperation = 'destination-over';
+      ctx.shadowOffsetX = 7;
+      ctx.shadowOffsetY = 7;
+      ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+      ctx.beginLayer();
+
+      ctx.fillStyle = 'rgba(204, 0, 0, 1)';
+      ctx.fillRect(10, 25, 25, 20);
+      ctx.fillStyle = 'rgba(0, 204, 0, 1)';
+      ctx.fillRect(25, 10, 20, 25);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker3').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas3');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+<span>
+  <div>destination-in</div>
+  <canvas id="canvas4" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker4" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      ctx.translate(50, 50);
+      ctx.scale(2, 2);
+      ctx.rotate(Math.PI);
+      ctx.translate(-25, -25);
+
+      ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+      ctx.fillRect(15, 15, 25, 25);
+
+      ctx.globalAlpha = 0.75;
+      ctx.globalCompositeOperation = 'destination-in';
+      ctx.shadowOffsetX = 7;
+      ctx.shadowOffsetY = 7;
+      ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+      ctx.beginLayer();
+
+      ctx.fillStyle = 'rgba(204, 0, 0, 1)';
+      ctx.fillRect(10, 25, 25, 20);
+      ctx.fillStyle = 'rgba(0, 204, 0, 1)';
+      ctx.fillRect(25, 10, 20, 25);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker4').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas4');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+<span>
+  <div>destination-out</div>
+  <canvas id="canvas5" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker5" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      ctx.translate(50, 50);
+      ctx.scale(2, 2);
+      ctx.rotate(Math.PI);
+      ctx.translate(-25, -25);
+
+      ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+      ctx.fillRect(15, 15, 25, 25);
+
+      ctx.globalAlpha = 0.75;
+      ctx.globalCompositeOperation = 'destination-out';
+      ctx.shadowOffsetX = 7;
+      ctx.shadowOffsetY = 7;
+      ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+      ctx.beginLayer();
+
+      ctx.fillStyle = 'rgba(204, 0, 0, 1)';
+      ctx.fillRect(10, 25, 25, 20);
+      ctx.fillStyle = 'rgba(0, 204, 0, 1)';
+      ctx.fillRect(25, 10, 20, 25);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker5').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas5');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+<span>
+  <div>destination-atop</div>
+  <canvas id="canvas6" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker6" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      ctx.translate(50, 50);
+      ctx.scale(2, 2);
+      ctx.rotate(Math.PI);
+      ctx.translate(-25, -25);
+
+      ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+      ctx.fillRect(15, 15, 25, 25);
+
+      ctx.globalAlpha = 0.75;
+      ctx.globalCompositeOperation = 'destination-atop';
+      ctx.shadowOffsetX = 7;
+      ctx.shadowOffsetY = 7;
+      ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+      ctx.beginLayer();
+
+      ctx.fillStyle = 'rgba(204, 0, 0, 1)';
+      ctx.fillRect(10, 25, 25, 20);
+      ctx.fillStyle = 'rgba(0, 204, 0, 1)';
+      ctx.fillRect(25, 10, 20, 25);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker6').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas6');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+<span>
+  <div>lighter</div>
+  <canvas id="canvas7" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker7" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      ctx.translate(50, 50);
+      ctx.scale(2, 2);
+      ctx.rotate(Math.PI);
+      ctx.translate(-25, -25);
+
+      ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+      ctx.fillRect(15, 15, 25, 25);
+
+      ctx.globalAlpha = 0.75;
+      ctx.globalCompositeOperation = 'lighter';
+      ctx.shadowOffsetX = 7;
+      ctx.shadowOffsetY = 7;
+      ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+      ctx.beginLayer();
+
+      ctx.fillStyle = 'rgba(204, 0, 0, 1)';
+      ctx.fillRect(10, 25, 25, 20);
+      ctx.fillStyle = 'rgba(0, 204, 0, 1)';
+      ctx.fillRect(25, 10, 20, 25);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker7').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas7');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+<span>
+  <div>copy</div>
+  <canvas id="canvas8" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker8" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      ctx.translate(50, 50);
+      ctx.scale(2, 2);
+      ctx.rotate(Math.PI);
+      ctx.translate(-25, -25);
+
+      ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+      ctx.fillRect(15, 15, 25, 25);
+
+      ctx.globalAlpha = 0.75;
+      ctx.globalCompositeOperation = 'copy';
+      ctx.shadowOffsetX = 7;
+      ctx.shadowOffsetY = 7;
+      ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+      ctx.beginLayer();
+
+      ctx.fillStyle = 'rgba(204, 0, 0, 1)';
+      ctx.fillRect(10, 25, 25, 20);
+      ctx.fillStyle = 'rgba(0, 204, 0, 1)';
+      ctx.fillRect(25, 10, 20, 25);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker8').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas8');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+<span>
+  <div>xor</div>
+  <canvas id="canvas9" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker9" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      ctx.translate(50, 50);
+      ctx.scale(2, 2);
+      ctx.rotate(Math.PI);
+      ctx.translate(-25, -25);
+
+      ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+      ctx.fillRect(15, 15, 25, 25);
+
+      ctx.globalAlpha = 0.75;
+      ctx.globalCompositeOperation = 'xor';
+      ctx.shadowOffsetX = 7;
+      ctx.shadowOffsetY = 7;
+      ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+      ctx.beginLayer();
+
+      ctx.fillStyle = 'rgba(204, 0, 0, 1)';
+      ctx.fillRect(10, 25, 25, 20);
+      ctx.fillStyle = 'rgba(0, 204, 0, 1)';
+      ctx.fillRect(25, 10, 20, 25);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker9').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas9');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+<span>
+  <div>multiply</div>
+  <canvas id="canvas10" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker10" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      ctx.translate(50, 50);
+      ctx.scale(2, 2);
+      ctx.rotate(Math.PI);
+      ctx.translate(-25, -25);
+
+      ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+      ctx.fillRect(15, 15, 25, 25);
+
+      ctx.globalAlpha = 0.75;
+      ctx.globalCompositeOperation = 'multiply';
+      ctx.shadowOffsetX = 7;
+      ctx.shadowOffsetY = 7;
+      ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+      ctx.beginLayer();
+
+      ctx.fillStyle = 'rgba(204, 0, 0, 1)';
+      ctx.fillRect(10, 25, 25, 20);
+      ctx.fillStyle = 'rgba(0, 204, 0, 1)';
+      ctx.fillRect(25, 10, 20, 25);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker10').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas10');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+<span>
+  <div>screen</div>
+  <canvas id="canvas11" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker11" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      ctx.translate(50, 50);
+      ctx.scale(2, 2);
+      ctx.rotate(Math.PI);
+      ctx.translate(-25, -25);
+
+      ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+      ctx.fillRect(15, 15, 25, 25);
+
+      ctx.globalAlpha = 0.75;
+      ctx.globalCompositeOperation = 'screen';
+      ctx.shadowOffsetX = 7;
+      ctx.shadowOffsetY = 7;
+      ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+      ctx.beginLayer();
+
+      ctx.fillStyle = 'rgba(204, 0, 0, 1)';
+      ctx.fillRect(10, 25, 25, 20);
+      ctx.fillStyle = 'rgba(0, 204, 0, 1)';
+      ctx.fillRect(25, 10, 20, 25);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker11').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas11');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+<span>
+  <div>overlay</div>
+  <canvas id="canvas12" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker12" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      ctx.translate(50, 50);
+      ctx.scale(2, 2);
+      ctx.rotate(Math.PI);
+      ctx.translate(-25, -25);
+
+      ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+      ctx.fillRect(15, 15, 25, 25);
+
+      ctx.globalAlpha = 0.75;
+      ctx.globalCompositeOperation = 'overlay';
+      ctx.shadowOffsetX = 7;
+      ctx.shadowOffsetY = 7;
+      ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+      ctx.beginLayer();
+
+      ctx.fillStyle = 'rgba(204, 0, 0, 1)';
+      ctx.fillRect(10, 25, 25, 20);
+      ctx.fillStyle = 'rgba(0, 204, 0, 1)';
+      ctx.fillRect(25, 10, 20, 25);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker12').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas12');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+<span>
+  <div>darken</div>
+  <canvas id="canvas13" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker13" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      ctx.translate(50, 50);
+      ctx.scale(2, 2);
+      ctx.rotate(Math.PI);
+      ctx.translate(-25, -25);
+
+      ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+      ctx.fillRect(15, 15, 25, 25);
+
+      ctx.globalAlpha = 0.75;
+      ctx.globalCompositeOperation = 'darken';
+      ctx.shadowOffsetX = 7;
+      ctx.shadowOffsetY = 7;
+      ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+      ctx.beginLayer();
+
+      ctx.fillStyle = 'rgba(204, 0, 0, 1)';
+      ctx.fillRect(10, 25, 25, 20);
+      ctx.fillStyle = 'rgba(0, 204, 0, 1)';
+      ctx.fillRect(25, 10, 20, 25);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker13').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas13');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+<span>
+  <div>lighten</div>
+  <canvas id="canvas14" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker14" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      ctx.translate(50, 50);
+      ctx.scale(2, 2);
+      ctx.rotate(Math.PI);
+      ctx.translate(-25, -25);
+
+      ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+      ctx.fillRect(15, 15, 25, 25);
+
+      ctx.globalAlpha = 0.75;
+      ctx.globalCompositeOperation = 'lighten';
+      ctx.shadowOffsetX = 7;
+      ctx.shadowOffsetY = 7;
+      ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+      ctx.beginLayer();
+
+      ctx.fillStyle = 'rgba(204, 0, 0, 1)';
+      ctx.fillRect(10, 25, 25, 20);
+      ctx.fillStyle = 'rgba(0, 204, 0, 1)';
+      ctx.fillRect(25, 10, 20, 25);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker14').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas14');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+<span>
+  <div>color-dodge</div>
+  <canvas id="canvas15" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker15" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      ctx.translate(50, 50);
+      ctx.scale(2, 2);
+      ctx.rotate(Math.PI);
+      ctx.translate(-25, -25);
+
+      ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+      ctx.fillRect(15, 15, 25, 25);
+
+      ctx.globalAlpha = 0.75;
+      ctx.globalCompositeOperation = 'color-dodge';
+      ctx.shadowOffsetX = 7;
+      ctx.shadowOffsetY = 7;
+      ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+      ctx.beginLayer();
+
+      ctx.fillStyle = 'rgba(204, 0, 0, 1)';
+      ctx.fillRect(10, 25, 25, 20);
+      ctx.fillStyle = 'rgba(0, 204, 0, 1)';
+      ctx.fillRect(25, 10, 20, 25);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker15').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas15');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+<span>
+  <div>color-burn</div>
+  <canvas id="canvas16" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker16" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      ctx.translate(50, 50);
+      ctx.scale(2, 2);
+      ctx.rotate(Math.PI);
+      ctx.translate(-25, -25);
+
+      ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+      ctx.fillRect(15, 15, 25, 25);
+
+      ctx.globalAlpha = 0.75;
+      ctx.globalCompositeOperation = 'color-burn';
+      ctx.shadowOffsetX = 7;
+      ctx.shadowOffsetY = 7;
+      ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+      ctx.beginLayer();
+
+      ctx.fillStyle = 'rgba(204, 0, 0, 1)';
+      ctx.fillRect(10, 25, 25, 20);
+      ctx.fillStyle = 'rgba(0, 204, 0, 1)';
+      ctx.fillRect(25, 10, 20, 25);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker16').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas16');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+<span>
+  <div>hard-light</div>
+  <canvas id="canvas17" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker17" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      ctx.translate(50, 50);
+      ctx.scale(2, 2);
+      ctx.rotate(Math.PI);
+      ctx.translate(-25, -25);
+
+      ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+      ctx.fillRect(15, 15, 25, 25);
+
+      ctx.globalAlpha = 0.75;
+      ctx.globalCompositeOperation = 'hard-light';
+      ctx.shadowOffsetX = 7;
+      ctx.shadowOffsetY = 7;
+      ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+      ctx.beginLayer();
+
+      ctx.fillStyle = 'rgba(204, 0, 0, 1)';
+      ctx.fillRect(10, 25, 25, 20);
+      ctx.fillStyle = 'rgba(0, 204, 0, 1)';
+      ctx.fillRect(25, 10, 20, 25);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker17').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas17');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+<span>
+  <div>soft-light</div>
+  <canvas id="canvas18" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker18" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      ctx.translate(50, 50);
+      ctx.scale(2, 2);
+      ctx.rotate(Math.PI);
+      ctx.translate(-25, -25);
+
+      ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+      ctx.fillRect(15, 15, 25, 25);
+
+      ctx.globalAlpha = 0.75;
+      ctx.globalCompositeOperation = 'soft-light';
+      ctx.shadowOffsetX = 7;
+      ctx.shadowOffsetY = 7;
+      ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+      ctx.beginLayer();
+
+      ctx.fillStyle = 'rgba(204, 0, 0, 1)';
+      ctx.fillRect(10, 25, 25, 20);
+      ctx.fillStyle = 'rgba(0, 204, 0, 1)';
+      ctx.fillRect(25, 10, 20, 25);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker18').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas18');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+<span>
+  <div>difference</div>
+  <canvas id="canvas19" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker19" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      ctx.translate(50, 50);
+      ctx.scale(2, 2);
+      ctx.rotate(Math.PI);
+      ctx.translate(-25, -25);
+
+      ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+      ctx.fillRect(15, 15, 25, 25);
+
+      ctx.globalAlpha = 0.75;
+      ctx.globalCompositeOperation = 'difference';
+      ctx.shadowOffsetX = 7;
+      ctx.shadowOffsetY = 7;
+      ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+      ctx.beginLayer();
+
+      ctx.fillStyle = 'rgba(204, 0, 0, 1)';
+      ctx.fillRect(10, 25, 25, 20);
+      ctx.fillStyle = 'rgba(0, 204, 0, 1)';
+      ctx.fillRect(25, 10, 20, 25);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker19').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas19');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+<span>
+  <div>exclusion</div>
+  <canvas id="canvas20" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker20" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      ctx.translate(50, 50);
+      ctx.scale(2, 2);
+      ctx.rotate(Math.PI);
+      ctx.translate(-25, -25);
+
+      ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+      ctx.fillRect(15, 15, 25, 25);
+
+      ctx.globalAlpha = 0.75;
+      ctx.globalCompositeOperation = 'exclusion';
+      ctx.shadowOffsetX = 7;
+      ctx.shadowOffsetY = 7;
+      ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+      ctx.beginLayer();
+
+      ctx.fillStyle = 'rgba(204, 0, 0, 1)';
+      ctx.fillRect(10, 25, 25, 20);
+      ctx.fillStyle = 'rgba(0, 204, 0, 1)';
+      ctx.fillRect(25, 10, 20, 25);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker20').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas20');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+<span>
+  <div>hue</div>
+  <canvas id="canvas21" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker21" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      ctx.translate(50, 50);
+      ctx.scale(2, 2);
+      ctx.rotate(Math.PI);
+      ctx.translate(-25, -25);
+
+      ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+      ctx.fillRect(15, 15, 25, 25);
+
+      ctx.globalAlpha = 0.75;
+      ctx.globalCompositeOperation = 'hue';
+      ctx.shadowOffsetX = 7;
+      ctx.shadowOffsetY = 7;
+      ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+      ctx.beginLayer();
+
+      ctx.fillStyle = 'rgba(204, 0, 0, 1)';
+      ctx.fillRect(10, 25, 25, 20);
+      ctx.fillStyle = 'rgba(0, 204, 0, 1)';
+      ctx.fillRect(25, 10, 20, 25);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker21').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas21');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+<span>
+  <div>saturation</div>
+  <canvas id="canvas22" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker22" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      ctx.translate(50, 50);
+      ctx.scale(2, 2);
+      ctx.rotate(Math.PI);
+      ctx.translate(-25, -25);
+
+      ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+      ctx.fillRect(15, 15, 25, 25);
+
+      ctx.globalAlpha = 0.75;
+      ctx.globalCompositeOperation = 'saturation';
+      ctx.shadowOffsetX = 7;
+      ctx.shadowOffsetY = 7;
+      ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+      ctx.beginLayer();
+
+      ctx.fillStyle = 'rgba(204, 0, 0, 1)';
+      ctx.fillRect(10, 25, 25, 20);
+      ctx.fillStyle = 'rgba(0, 204, 0, 1)';
+      ctx.fillRect(25, 10, 20, 25);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker22').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas22');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+<span>
+  <div>color</div>
+  <canvas id="canvas23" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker23" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      ctx.translate(50, 50);
+      ctx.scale(2, 2);
+      ctx.rotate(Math.PI);
+      ctx.translate(-25, -25);
+
+      ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+      ctx.fillRect(15, 15, 25, 25);
+
+      ctx.globalAlpha = 0.75;
+      ctx.globalCompositeOperation = 'color';
+      ctx.shadowOffsetX = 7;
+      ctx.shadowOffsetY = 7;
+      ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+      ctx.beginLayer();
+
+      ctx.fillStyle = 'rgba(204, 0, 0, 1)';
+      ctx.fillRect(10, 25, 25, 20);
+      ctx.fillStyle = 'rgba(0, 204, 0, 1)';
+      ctx.fillRect(25, 10, 20, 25);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker23').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas23');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+<span>
+  <div>luminosity</div>
+  <canvas id="canvas24" width="90" height="90" style="outline: 1px solid">
+    <p class="fallback">FAIL (fallback content)</p>
+  </canvas>
+  <script id="myWorker24" type="text/worker">
+    self.onmessage = function(e) {
+      const canvas = new OffscreenCanvas(90, 90);
+      const ctx = canvas.getContext('2d');
+
+      ctx.translate(50, 50);
+      ctx.scale(2, 2);
+      ctx.rotate(Math.PI);
+      ctx.translate(-25, -25);
+
+      ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
+      ctx.fillRect(15, 15, 25, 25);
+
+      ctx.globalAlpha = 0.75;
+      ctx.globalCompositeOperation = 'luminosity';
+      ctx.shadowOffsetX = 7;
+      ctx.shadowOffsetY = 7;
+      ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+
+      ctx.beginLayer();
+
+      ctx.fillStyle = 'rgba(204, 0, 0, 1)';
+      ctx.fillRect(10, 25, 25, 20);
+      ctx.fillStyle = 'rgba(0, 204, 0, 1)';
+      ctx.fillRect(25, 10, 20, 25);
+
+      ctx.endLayer();
+
+      const bitmap = canvas.transferToImageBitmap();
+      self.postMessage(bitmap, bitmap);
+    };
+  </script>
+  <script type="module">
+    const blob = new Blob([document.getElementById('myWorker24').textContent]);
+    const worker = new Worker(URL.createObjectURL(blob));
+    worker.addEventListener('message', msg => {
+      const outputCanvas = document.getElementById('canvas24');
+      const outputCtx = outputCanvas.getContext('2d');
+      outputCtx.drawImage(msg.data, 0, 0);
+      if (--pending_tests == 0) {
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    });
+    worker.postMessage(null);
+  </script>
+</span>
+
+</div>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.beginLayer-reset-endLayer.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.beginLayer-reset-endLayer.html
index c0b11aa611..e588e48b5f 100644
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.beginLayer-reset-endLayer.html
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.beginLayer-reset-endLayer.html
@@ -10,13 +10,7 @@
 
 
 <script>
-var t = async_test("Raises exception on beginLayer() + reset() + endLayer().");
-var t_pass = t.done.bind(t);
-var t_fail = t.step_func(function(reason) {
-    throw reason;
-});
-t.step(function() {
-
+test(t => {
   var canvas = new OffscreenCanvas(100, 50);
   var ctx = canvas.getContext('2d');
 
@@ -25,7 +19,6 @@ t.step(function() {
     ctx.reset();
     ctx.endLayer();
   });
-  t.done();
 
-});
+}, "Raises exception on beginLayer() + reset() + endLayer().");
 </script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.beginLayer-reset-endLayer.worker.js b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.beginLayer-reset-endLayer.worker.js
index 1c147d6f34..cab1b9d92d 100644
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.beginLayer-reset-endLayer.worker.js
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.beginLayer-reset-endLayer.worker.js
@@ -6,13 +6,7 @@
 importScripts("/resources/testharness.js");
 importScripts("/html/canvas/resources/canvas-tests.js");
 
-var t = async_test("Raises exception on beginLayer() + reset() + endLayer().");
-var t_pass = t.done.bind(t);
-var t_fail = t.step_func(function(reason) {
-    throw reason;
-});
-t.step(function() {
-
+test(t => {
   var canvas = new OffscreenCanvas(100, 50);
   var ctx = canvas.getContext('2d');
 
@@ -21,6 +15,5 @@ t.step(function() {
     ctx.reset();
     ctx.endLayer();
   });
-  t.done();
-});
+}, "Raises exception on beginLayer() + reset() + endLayer().");
 done();
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.beginLayer-restore.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.beginLayer-restore.html
index 022532b329..30a981f75a 100644
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.beginLayer-restore.html
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.beginLayer-restore.html
@@ -10,13 +10,7 @@
 
 
 <script>
-var t = async_test("Raises exception on beginLayer() + restore().");
-var t_pass = t.done.bind(t);
-var t_fail = t.step_func(function(reason) {
-    throw reason;
-});
-t.step(function() {
-
+test(t => {
   var canvas = new OffscreenCanvas(100, 50);
   var ctx = canvas.getContext('2d');
 
@@ -24,7 +18,6 @@ t.step(function() {
     ctx.beginLayer();
     ctx.restore();
   });
-  t.done();
 
-});
+}, "Raises exception on beginLayer() + restore().");
 </script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.beginLayer-restore.worker.js b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.beginLayer-restore.worker.js
index 1aa86635e6..287f8eb004 100644
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.beginLayer-restore.worker.js
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.beginLayer-restore.worker.js
@@ -6,13 +6,7 @@
 importScripts("/resources/testharness.js");
 importScripts("/html/canvas/resources/canvas-tests.js");
 
-var t = async_test("Raises exception on beginLayer() + restore().");
-var t_pass = t.done.bind(t);
-var t_fail = t.step_func(function(reason) {
-    throw reason;
-});
-t.step(function() {
-
+test(t => {
   var canvas = new OffscreenCanvas(100, 50);
   var ctx = canvas.getContext('2d');
 
@@ -20,6 +14,5 @@ t.step(function() {
     ctx.beginLayer();
     ctx.restore();
   });
-  t.done();
-});
+}, "Raises exception on beginLayer() + restore().");
 done();
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.beginLayer-save-endLayer.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.beginLayer-save-endLayer.html
index 26dd0eee4b..04992b115e 100644
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.beginLayer-save-endLayer.html
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.beginLayer-save-endLayer.html
@@ -10,13 +10,7 @@
 
 
 <script>
-var t = async_test("Raises exception on beginLayer() + save() + endLayer().");
-var t_pass = t.done.bind(t);
-var t_fail = t.step_func(function(reason) {
-    throw reason;
-});
-t.step(function() {
-
+test(t => {
   var canvas = new OffscreenCanvas(100, 50);
   var ctx = canvas.getContext('2d');
 
@@ -25,7 +19,6 @@ t.step(function() {
     ctx.save();
     ctx.endLayer();
   });
-  t.done();
 
-});
+}, "Raises exception on beginLayer() + save() + endLayer().");
 </script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.beginLayer-save-endLayer.worker.js b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.beginLayer-save-endLayer.worker.js
index 613921c67c..402bf5e0fd 100644
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.beginLayer-save-endLayer.worker.js
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.beginLayer-save-endLayer.worker.js
@@ -6,13 +6,7 @@
 importScripts("/resources/testharness.js");
 importScripts("/html/canvas/resources/canvas-tests.js");
 
-var t = async_test("Raises exception on beginLayer() + save() + endLayer().");
-var t_pass = t.done.bind(t);
-var t_fail = t.step_func(function(reason) {
-    throw reason;
-});
-t.step(function() {
-
+test(t => {
   var canvas = new OffscreenCanvas(100, 50);
   var ctx = canvas.getContext('2d');
 
@@ -21,6 +15,5 @@ t.step(function() {
     ctx.save();
     ctx.endLayer();
   });
-  t.done();
-});
+}, "Raises exception on beginLayer() + save() + endLayer().");
 done();
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.endLayer.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.endLayer.html
index 440249980a..5b7f8a851e 100644
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.endLayer.html
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.endLayer.html
@@ -10,20 +10,13 @@
 
 
 <script>
-var t = async_test("Raises exception on lone endLayer calls.");
-var t_pass = t.done.bind(t);
-var t_fail = t.step_func(function(reason) {
-    throw reason;
-});
-t.step(function() {
-
+test(t => {
   var canvas = new OffscreenCanvas(100, 50);
   var ctx = canvas.getContext('2d');
 
   assert_throws_dom("INVALID_STATE_ERR", function() {
     ctx.endLayer();
   });
-  t.done();
 
-});
+}, "Raises exception on lone endLayer calls.");
 </script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.endLayer.worker.js b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.endLayer.worker.js
index b2ba231b9c..2229aa9628 100644
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.endLayer.worker.js
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.endLayer.worker.js
@@ -6,19 +6,12 @@
 importScripts("/resources/testharness.js");
 importScripts("/html/canvas/resources/canvas-tests.js");
 
-var t = async_test("Raises exception on lone endLayer calls.");
-var t_pass = t.done.bind(t);
-var t_fail = t.step_func(function(reason) {
-    throw reason;
-});
-t.step(function() {
-
+test(t => {
   var canvas = new OffscreenCanvas(100, 50);
   var ctx = canvas.getContext('2d');
 
   assert_throws_dom("INVALID_STATE_ERR", function() {
     ctx.endLayer();
   });
-  t.done();
-});
+}, "Raises exception on lone endLayer calls.");
 done();
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.save-beginLayer-restore.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.save-beginLayer-restore.html
index c2b09961ac..2a6c9b1ccb 100644
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.save-beginLayer-restore.html
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.save-beginLayer-restore.html
@@ -10,13 +10,7 @@
 
 
 <script>
-var t = async_test("Raises exception on save() + beginLayer() + restore().");
-var t_pass = t.done.bind(t);
-var t_fail = t.step_func(function(reason) {
-    throw reason;
-});
-t.step(function() {
-
+test(t => {
   var canvas = new OffscreenCanvas(100, 50);
   var ctx = canvas.getContext('2d');
 
@@ -25,7 +19,6 @@ t.step(function() {
     ctx.beginLayer();
     ctx.restore();
   });
-  t.done();
 
-});
+}, "Raises exception on save() + beginLayer() + restore().");
 </script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.save-beginLayer-restore.worker.js b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.save-beginLayer-restore.worker.js
index d155379fcb..711280a6de 100644
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.save-beginLayer-restore.worker.js
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.save-beginLayer-restore.worker.js
@@ -6,13 +6,7 @@
 importScripts("/resources/testharness.js");
 importScripts("/html/canvas/resources/canvas-tests.js");
 
-var t = async_test("Raises exception on save() + beginLayer() + restore().");
-var t_pass = t.done.bind(t);
-var t_fail = t.step_func(function(reason) {
-    throw reason;
-});
-t.step(function() {
-
+test(t => {
   var canvas = new OffscreenCanvas(100, 50);
   var ctx = canvas.getContext('2d');
 
@@ -21,6 +15,5 @@ t.step(function() {
     ctx.beginLayer();
     ctx.restore();
   });
-  t.done();
-});
+}, "Raises exception on save() + beginLayer() + restore().");
 done();
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.save-endLayer.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.save-endLayer.html
index 01b62d1e85..32ca134663 100644
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.save-endLayer.html
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.save-endLayer.html
@@ -10,13 +10,7 @@
 
 
 <script>
-var t = async_test("Raises exception on save() + endLayer().");
-var t_pass = t.done.bind(t);
-var t_fail = t.step_func(function(reason) {
-    throw reason;
-});
-t.step(function() {
-
+test(t => {
   var canvas = new OffscreenCanvas(100, 50);
   var ctx = canvas.getContext('2d');
 
@@ -24,7 +18,6 @@ t.step(function() {
     ctx.save();
     ctx.endLayer();
   });
-  t.done();
 
-});
+}, "Raises exception on save() + endLayer().");
 </script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.save-endLayer.worker.js b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.save-endLayer.worker.js
index 353c1b00cd..af3667e50a 100644
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.save-endLayer.worker.js
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.invalid-calls.save-endLayer.worker.js
@@ -6,13 +6,7 @@
 importScripts("/resources/testharness.js");
 importScripts("/html/canvas/resources/canvas-tests.js");
 
-var t = async_test("Raises exception on save() + endLayer().");
-var t_pass = t.done.bind(t);
-var t_fail = t.step_func(function(reason) {
-    throw reason;
-});
-t.step(function() {
-
+test(t => {
   var canvas = new OffscreenCanvas(100, 50);
   var ctx = canvas.getContext('2d');
 
@@ -20,6 +14,5 @@ t.step(function() {
     ctx.save();
     ctx.endLayer();
   });
-  t.done();
-});
+}, "Raises exception on save() + endLayer().");
 done();
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations-with-promises.convertToBlob.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations-with-promises.convertToBlob.html
deleted file mode 100644
index 0b3854c31d..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations-with-promises.convertToBlob.html
+++ /dev/null
@@ -1,27 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>OffscreenCanvas test: 2d.layer.malformed-operations-with-promises.convertToBlob</title>
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-<script src="/html/canvas/resources/canvas-tests.js"></script>
-
-<h1>2d.layer.malformed-operations-with-promises.convertToBlob</h1>
-<p class="desc">Check that exceptions are thrown for operations that are malformed while layers are open.</p>
-
-
-<script>
-promise_test(async t => {
-
-  var canvas = new OffscreenCanvas(200, 200);
-  var ctx = canvas.getContext('2d');
-
-  // Shouldn't throw on its own.
-  await canvas.convertToBlob();
-  // Make sure the exception isn't caused by calling the function twice.
-  await canvas.convertToBlob();
-  // Calling again inside a layer should throw.
-  ctx.beginLayer();
-  await promise_rejects_dom(t, 'InvalidStateError', canvas.convertToBlob());
-
-}, "Check that exceptions are thrown for operations that are malformed while layers are open.");
-</script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations-with-promises.convertToBlob.worker.js b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations-with-promises.convertToBlob.worker.js
deleted file mode 100644
index 8361e19108..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations-with-promises.convertToBlob.worker.js
+++ /dev/null
@@ -1,21 +0,0 @@
-// DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py.
-// OffscreenCanvas test in a worker:2d.layer.malformed-operations-with-promises.convertToBlob
-// Description:Check that exceptions are thrown for operations that are malformed while layers are open.
-// Note:
-
-importScripts("/resources/testharness.js");
-importScripts("/html/canvas/resources/canvas-tests.js");
-
-promise_test(async t => {
-  var canvas = new OffscreenCanvas(200, 200);
-  var ctx = canvas.getContext('2d');
-
-  // Shouldn't throw on its own.
-  await canvas.convertToBlob();
-  // Make sure the exception isn't caused by calling the function twice.
-  await canvas.convertToBlob();
-  // Calling again inside a layer should throw.
-  ctx.beginLayer();
-  await promise_rejects_dom(t, 'InvalidStateError', canvas.convertToBlob());
-}, "Check that exceptions are thrown for operations that are malformed while layers are open.");
-done();
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations-with-promises.createImageBitmap.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations-with-promises.createImageBitmap.html
deleted file mode 100644
index 085554d9f5..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations-with-promises.createImageBitmap.html
+++ /dev/null
@@ -1,27 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>OffscreenCanvas test: 2d.layer.malformed-operations-with-promises.createImageBitmap</title>
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-<script src="/html/canvas/resources/canvas-tests.js"></script>
-
-<h1>2d.layer.malformed-operations-with-promises.createImageBitmap</h1>
-<p class="desc">Check that exceptions are thrown for operations that are malformed while layers are open.</p>
-
-
-<script>
-promise_test(async t => {
-
-  var canvas = new OffscreenCanvas(200, 200);
-  var ctx = canvas.getContext('2d');
-
-  // Shouldn't throw on its own.
-  await createImageBitmap(canvas);
-  // Make sure the exception isn't caused by calling the function twice.
-  await createImageBitmap(canvas);
-  // Calling again inside a layer should throw.
-  ctx.beginLayer();
-  await promise_rejects_dom(t, 'InvalidStateError', createImageBitmap(canvas));
-
-}, "Check that exceptions are thrown for operations that are malformed while layers are open.");
-</script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations-with-promises.createImageBitmap.worker.js b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations-with-promises.createImageBitmap.worker.js
deleted file mode 100644
index d64f693864..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations-with-promises.createImageBitmap.worker.js
+++ /dev/null
@@ -1,21 +0,0 @@
-// DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py.
-// OffscreenCanvas test in a worker:2d.layer.malformed-operations-with-promises.createImageBitmap
-// Description:Check that exceptions are thrown for operations that are malformed while layers are open.
-// Note:
-
-importScripts("/resources/testharness.js");
-importScripts("/html/canvas/resources/canvas-tests.js");
-
-promise_test(async t => {
-  var canvas = new OffscreenCanvas(200, 200);
-  var ctx = canvas.getContext('2d');
-
-  // Shouldn't throw on its own.
-  await createImageBitmap(canvas);
-  // Make sure the exception isn't caused by calling the function twice.
-  await createImageBitmap(canvas);
-  // Calling again inside a layer should throw.
-  ctx.beginLayer();
-  await promise_rejects_dom(t, 'InvalidStateError', createImageBitmap(canvas));
-}, "Check that exceptions are thrown for operations that are malformed while layers are open.");
-done();
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations-with-promises.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations-with-promises.html
new file mode 100644
index 0000000000..7b8f9b0943
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations-with-promises.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>OffscreenCanvas test: 2d.layer.malformed-operations-with-promises</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+
+<script>
+
+promise_test(async t => {
+  const canvas = new OffscreenCanvas(200, 200);
+  const ctx = canvas.getContext('2d');
+
+  // Shouldn't throw on its own.
+  await canvas.convertToBlob();
+  // Make sure the exception isn't caused by calling the function twice.
+  await canvas.convertToBlob();
+  // Calling again inside a layer should throw.
+  ctx.beginLayer();
+  await promise_rejects_dom(t, 'InvalidStateError',
+                            canvas.convertToBlob());
+}, "Throws if convertToBlob is called while layers are open.");
+
+promise_test(async t => {
+  const canvas = new OffscreenCanvas(200, 200);
+  const ctx = canvas.getContext('2d');
+
+  // Shouldn't throw on its own.
+  await createImageBitmap(canvas);
+  // Make sure the exception isn't caused by calling the function twice.
+  await createImageBitmap(canvas);
+  // Calling again inside a layer should throw.
+  ctx.beginLayer();
+  await promise_rejects_dom(t, 'InvalidStateError',
+                            createImageBitmap(canvas));
+}, "Throws if createImageBitmap is called while layers are open.");
+
+</script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations-with-promises.worker.js b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations-with-promises.worker.js
new file mode 100644
index 0000000000..693901b648
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations-with-promises.worker.js
@@ -0,0 +1,37 @@
+// DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py.
+// OffscreenCanvas test in a worker:2d.layer.malformed-operations-with-promises
+// Description:
+// Note:
+
+importScripts("/resources/testharness.js");
+importScripts("/html/canvas/resources/canvas-tests.js");
+
+promise_test(async t => {
+  const canvas = new OffscreenCanvas(200, 200);
+  const ctx = canvas.getContext('2d');
+
+  // Shouldn't throw on its own.
+  await canvas.convertToBlob();
+  // Make sure the exception isn't caused by calling the function twice.
+  await canvas.convertToBlob();
+  // Calling again inside a layer should throw.
+  ctx.beginLayer();
+  await promise_rejects_dom(t, 'InvalidStateError',
+                            canvas.convertToBlob());
+}, "Throws if convertToBlob is called while layers are open.");
+
+promise_test(async t => {
+  const canvas = new OffscreenCanvas(200, 200);
+  const ctx = canvas.getContext('2d');
+
+  // Shouldn't throw on its own.
+  await createImageBitmap(canvas);
+  // Make sure the exception isn't caused by calling the function twice.
+  await createImageBitmap(canvas);
+  // Calling again inside a layer should throw.
+  ctx.beginLayer();
+  await promise_rejects_dom(t, 'InvalidStateError',
+                            createImageBitmap(canvas));
+}, "Throws if createImageBitmap is called while layers are open.");
+
+done();
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations.createPattern.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations.createPattern.html
deleted file mode 100644
index a206e64ceb..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations.createPattern.html
+++ /dev/null
@@ -1,34 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>OffscreenCanvas test: 2d.layer.malformed-operations.createPattern</title>
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-<script src="/html/canvas/resources/canvas-tests.js"></script>
-
-<h1>2d.layer.malformed-operations.createPattern</h1>
-<p class="desc">Check that exceptions are thrown for operations that are malformed while layers are open.</p>
-
-
-<script>
-var t = async_test("Check that exceptions are thrown for operations that are malformed while layers are open.");
-var t_pass = t.done.bind(t);
-var t_fail = t.step_func(function(reason) {
-    throw reason;
-});
-t.step(function() {
-
-  var canvas = new OffscreenCanvas(200, 200);
-  var ctx = canvas.getContext('2d');
-
-  // Shouldn't throw on its own.
-  ctx.createPattern(canvas, 'repeat');
-  // Make sure the exception isn't caused by calling the function twice.
-  ctx.createPattern(canvas, 'repeat');
-  // Calling again inside a layer should throw.
-  ctx.beginLayer();
-  assert_throws_dom("InvalidStateError",
-                    () => ctx.createPattern(canvas, 'repeat'));
-  t.done();
-
-});
-</script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations.createPattern.worker.js b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations.createPattern.worker.js
deleted file mode 100644
index bcb42cba87..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations.createPattern.worker.js
+++ /dev/null
@@ -1,29 +0,0 @@
-// DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py.
-// OffscreenCanvas test in a worker:2d.layer.malformed-operations.createPattern
-// Description:Check that exceptions are thrown for operations that are malformed while layers are open.
-// Note:
-
-importScripts("/resources/testharness.js");
-importScripts("/html/canvas/resources/canvas-tests.js");
-
-var t = async_test("Check that exceptions are thrown for operations that are malformed while layers are open.");
-var t_pass = t.done.bind(t);
-var t_fail = t.step_func(function(reason) {
-    throw reason;
-});
-t.step(function() {
-
-  var canvas = new OffscreenCanvas(200, 200);
-  var ctx = canvas.getContext('2d');
-
-  // Shouldn't throw on its own.
-  ctx.createPattern(canvas, 'repeat');
-  // Make sure the exception isn't caused by calling the function twice.
-  ctx.createPattern(canvas, 'repeat');
-  // Calling again inside a layer should throw.
-  ctx.beginLayer();
-  assert_throws_dom("InvalidStateError",
-                    () => ctx.createPattern(canvas, 'repeat'));
-  t.done();
-});
-done();
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations.drawImage.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations.drawImage.html
deleted file mode 100644
index e6a9872100..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations.drawImage.html
+++ /dev/null
@@ -1,36 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>OffscreenCanvas test: 2d.layer.malformed-operations.drawImage</title>
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-<script src="/html/canvas/resources/canvas-tests.js"></script>
-
-<h1>2d.layer.malformed-operations.drawImage</h1>
-<p class="desc">Check that exceptions are thrown for operations that are malformed while layers are open.</p>
-
-
-<script>
-var t = async_test("Check that exceptions are thrown for operations that are malformed while layers are open.");
-var t_pass = t.done.bind(t);
-var t_fail = t.step_func(function(reason) {
-    throw reason;
-});
-t.step(function() {
-
-  var canvas = new OffscreenCanvas(200, 200);
-  var ctx = canvas.getContext('2d');
-
-  const canvas2 = new OffscreenCanvas(200, 200);
-  const ctx2 = canvas2.getContext('2d');
-  // Shouldn't throw on its own.
-  ctx2.drawImage(canvas, 0, 0);
-  // Make sure the exception isn't caused by calling the function twice.
-  ctx2.drawImage(canvas, 0, 0);
-  // Calling again inside a layer should throw.
-  ctx.beginLayer();
-  assert_throws_dom("InvalidStateError",
-                    () => ctx2.drawImage(canvas, 0, 0));
-  t.done();
-
-});
-</script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations.drawImage.worker.js b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations.drawImage.worker.js
deleted file mode 100644
index b66cdee62e..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations.drawImage.worker.js
+++ /dev/null
@@ -1,31 +0,0 @@
-// DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py.
-// OffscreenCanvas test in a worker:2d.layer.malformed-operations.drawImage
-// Description:Check that exceptions are thrown for operations that are malformed while layers are open.
-// Note:
-
-importScripts("/resources/testharness.js");
-importScripts("/html/canvas/resources/canvas-tests.js");
-
-var t = async_test("Check that exceptions are thrown for operations that are malformed while layers are open.");
-var t_pass = t.done.bind(t);
-var t_fail = t.step_func(function(reason) {
-    throw reason;
-});
-t.step(function() {
-
-  var canvas = new OffscreenCanvas(200, 200);
-  var ctx = canvas.getContext('2d');
-
-  const canvas2 = new OffscreenCanvas(200, 200);
-  const ctx2 = canvas2.getContext('2d');
-  // Shouldn't throw on its own.
-  ctx2.drawImage(canvas, 0, 0);
-  // Make sure the exception isn't caused by calling the function twice.
-  ctx2.drawImage(canvas, 0, 0);
-  // Calling again inside a layer should throw.
-  ctx.beginLayer();
-  assert_throws_dom("InvalidStateError",
-                    () => ctx2.drawImage(canvas, 0, 0));
-  t.done();
-});
-done();
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations.getImageData.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations.getImageData.html
deleted file mode 100644
index 87bc8c6ede..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations.getImageData.html
+++ /dev/null
@@ -1,34 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>OffscreenCanvas test: 2d.layer.malformed-operations.getImageData</title>
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-<script src="/html/canvas/resources/canvas-tests.js"></script>
-
-<h1>2d.layer.malformed-operations.getImageData</h1>
-<p class="desc">Check that exceptions are thrown for operations that are malformed while layers are open.</p>
-
-
-<script>
-var t = async_test("Check that exceptions are thrown for operations that are malformed while layers are open.");
-var t_pass = t.done.bind(t);
-var t_fail = t.step_func(function(reason) {
-    throw reason;
-});
-t.step(function() {
-
-  var canvas = new OffscreenCanvas(200, 200);
-  var ctx = canvas.getContext('2d');
-
-  // Shouldn't throw on its own.
-  ctx.getImageData(0, 0, 200, 200);
-  // Make sure the exception isn't caused by calling the function twice.
-  ctx.getImageData(0, 0, 200, 200);
-  // Calling again inside a layer should throw.
-  ctx.beginLayer();
-  assert_throws_dom("InvalidStateError",
-                    () => ctx.getImageData(0, 0, 200, 200));
-  t.done();
-
-});
-</script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations.getImageData.worker.js b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations.getImageData.worker.js
deleted file mode 100644
index 6a1a16fccb..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations.getImageData.worker.js
+++ /dev/null
@@ -1,29 +0,0 @@
-// DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py.
-// OffscreenCanvas test in a worker:2d.layer.malformed-operations.getImageData
-// Description:Check that exceptions are thrown for operations that are malformed while layers are open.
-// Note:
-
-importScripts("/resources/testharness.js");
-importScripts("/html/canvas/resources/canvas-tests.js");
-
-var t = async_test("Check that exceptions are thrown for operations that are malformed while layers are open.");
-var t_pass = t.done.bind(t);
-var t_fail = t.step_func(function(reason) {
-    throw reason;
-});
-t.step(function() {
-
-  var canvas = new OffscreenCanvas(200, 200);
-  var ctx = canvas.getContext('2d');
-
-  // Shouldn't throw on its own.
-  ctx.getImageData(0, 0, 200, 200);
-  // Make sure the exception isn't caused by calling the function twice.
-  ctx.getImageData(0, 0, 200, 200);
-  // Calling again inside a layer should throw.
-  ctx.beginLayer();
-  assert_throws_dom("InvalidStateError",
-                    () => ctx.getImageData(0, 0, 200, 200));
-  t.done();
-});
-done();
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations.html
new file mode 100644
index 0000000000..a810665faf
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>OffscreenCanvas test: 2d.layer.malformed-operations</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+
+<script>
+
+test(t => {
+  const canvas = new OffscreenCanvas(200, 200);
+  const ctx = canvas.getContext('2d');
+
+  // Shouldn't throw on its own.
+  ctx.createPattern(canvas, 'repeat');
+  // Make sure the exception isn't caused by calling the function twice.
+  ctx.createPattern(canvas, 'repeat');
+  // Calling again inside a layer should throw.
+  ctx.beginLayer();
+  assert_throws_dom("InvalidStateError",
+                    () => ctx.createPattern(canvas, 'repeat'));
+}, "Throws if createPattern is called while layers are open.");
+
+test(t => {
+  const canvas = new OffscreenCanvas(200, 200);
+  const ctx = canvas.getContext('2d');
+
+  const canvas2 = new OffscreenCanvas(200, 200);
+  const ctx2 = canvas2.getContext('2d');
+  // Shouldn't throw on its own.
+  ctx2.drawImage(canvas, 0, 0);
+  // Make sure the exception isn't caused by calling the function twice.
+  ctx2.drawImage(canvas, 0, 0);
+  // Calling again inside a layer should throw.
+  ctx.beginLayer();
+  assert_throws_dom("InvalidStateError",
+                    () => ctx2.drawImage(canvas, 0, 0));
+}, "Throws if drawImage is called while layers are open.");
+
+test(t => {
+  const canvas = new OffscreenCanvas(200, 200);
+  const ctx = canvas.getContext('2d');
+
+  // Shouldn't throw on its own.
+  ctx.getImageData(0, 0, 200, 200);
+  // Make sure the exception isn't caused by calling the function twice.
+  ctx.getImageData(0, 0, 200, 200);
+  // Calling again inside a layer should throw.
+  ctx.beginLayer();
+  assert_throws_dom("InvalidStateError",
+                    () => ctx.getImageData(0, 0, 200, 200));
+}, "Throws if getImageData is called while layers are open.");
+
+test(t => {
+  const canvas = new OffscreenCanvas(200, 200);
+  const ctx = canvas.getContext('2d');
+
+  const canvas2 = new OffscreenCanvas(200, 200);
+  const ctx2 = canvas2.getContext('2d')
+  const data = ctx2.getImageData(0, 0, 1, 1);
+  // Shouldn't throw on its own.
+  ctx.putImageData(data, 0, 0);
+  // Make sure the exception isn't caused by calling the function twice.
+  ctx.putImageData(data, 0, 0);
+  // Calling again inside a layer should throw.
+  ctx.beginLayer();
+  assert_throws_dom("InvalidStateError",
+                    () => ctx.putImageData(data, 0, 0));
+}, "Throws if putImageData is called while layers are open.");
+
+test(t => {
+  const canvas = new OffscreenCanvas(200, 200);
+  const ctx = canvas.getContext('2d');
+
+  // Shouldn't throw on its own.
+  canvas.transferToImageBitmap();
+  // Make sure the exception isn't caused by calling the function twice.
+  canvas.transferToImageBitmap();
+  // Calling again inside a layer should throw.
+  ctx.beginLayer();
+  assert_throws_dom("InvalidStateError",
+                    () => canvas.transferToImageBitmap());
+}, "Throws if transferToImageBitmap is called while layers are open.");
+
+</script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations.putImageData.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations.putImageData.html
deleted file mode 100644
index e8059076bb..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations.putImageData.html
+++ /dev/null
@@ -1,37 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>OffscreenCanvas test: 2d.layer.malformed-operations.putImageData</title>
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-<script src="/html/canvas/resources/canvas-tests.js"></script>
-
-<h1>2d.layer.malformed-operations.putImageData</h1>
-<p class="desc">Check that exceptions are thrown for operations that are malformed while layers are open.</p>
-
-
-<script>
-var t = async_test("Check that exceptions are thrown for operations that are malformed while layers are open.");
-var t_pass = t.done.bind(t);
-var t_fail = t.step_func(function(reason) {
-    throw reason;
-});
-t.step(function() {
-
-  var canvas = new OffscreenCanvas(200, 200);
-  var ctx = canvas.getContext('2d');
-
-  const canvas2 = new OffscreenCanvas(200, 200);
-  const ctx2 = canvas2.getContext('2d')
-  const data = ctx2.getImageData(0, 0, 1, 1);
-  // Shouldn't throw on its own.
-  ctx.putImageData(data, 0, 0);
-  // Make sure the exception isn't caused by calling the function twice.
-  ctx.putImageData(data, 0, 0);
-  // Calling again inside a layer should throw.
-  ctx.beginLayer();
-  assert_throws_dom("InvalidStateError",
-                    () => ctx.putImageData(data, 0, 0));
-  t.done();
-
-});
-</script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations.putImageData.worker.js b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations.putImageData.worker.js
deleted file mode 100644
index 8810c3a73c..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations.putImageData.worker.js
+++ /dev/null
@@ -1,32 +0,0 @@
-// DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py.
-// OffscreenCanvas test in a worker:2d.layer.malformed-operations.putImageData
-// Description:Check that exceptions are thrown for operations that are malformed while layers are open.
-// Note:
-
-importScripts("/resources/testharness.js");
-importScripts("/html/canvas/resources/canvas-tests.js");
-
-var t = async_test("Check that exceptions are thrown for operations that are malformed while layers are open.");
-var t_pass = t.done.bind(t);
-var t_fail = t.step_func(function(reason) {
-    throw reason;
-});
-t.step(function() {
-
-  var canvas = new OffscreenCanvas(200, 200);
-  var ctx = canvas.getContext('2d');
-
-  const canvas2 = new OffscreenCanvas(200, 200);
-  const ctx2 = canvas2.getContext('2d')
-  const data = ctx2.getImageData(0, 0, 1, 1);
-  // Shouldn't throw on its own.
-  ctx.putImageData(data, 0, 0);
-  // Make sure the exception isn't caused by calling the function twice.
-  ctx.putImageData(data, 0, 0);
-  // Calling again inside a layer should throw.
-  ctx.beginLayer();
-  assert_throws_dom("InvalidStateError",
-                    () => ctx.putImageData(data, 0, 0));
-  t.done();
-});
-done();
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations.transferToImageBitmap.html b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations.transferToImageBitmap.html
deleted file mode 100644
index 79c216421f..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations.transferToImageBitmap.html
+++ /dev/null
@@ -1,34 +0,0 @@
-<!DOCTYPE html>
-<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
-<title>OffscreenCanvas test: 2d.layer.malformed-operations.transferToImageBitmap</title>
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-<script src="/html/canvas/resources/canvas-tests.js"></script>
-
-<h1>2d.layer.malformed-operations.transferToImageBitmap</h1>
-<p class="desc">Check that exceptions are thrown for operations that are malformed while layers are open.</p>
-
-
-<script>
-var t = async_test("Check that exceptions are thrown for operations that are malformed while layers are open.");
-var t_pass = t.done.bind(t);
-var t_fail = t.step_func(function(reason) {
-    throw reason;
-});
-t.step(function() {
-
-  var canvas = new OffscreenCanvas(200, 200);
-  var ctx = canvas.getContext('2d');
-
-  // Shouldn't throw on its own.
-  canvas.transferToImageBitmap();
-  // Make sure the exception isn't caused by calling the function twice.
-  canvas.transferToImageBitmap();
-  // Calling again inside a layer should throw.
-  ctx.beginLayer();
-  assert_throws_dom("InvalidStateError",
-                    () => canvas.transferToImageBitmap());
-  t.done();
-
-});
-</script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations.transferToImageBitmap.worker.js b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations.transferToImageBitmap.worker.js
deleted file mode 100644
index be0b43665a..0000000000
--- a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations.transferToImageBitmap.worker.js
+++ /dev/null
@@ -1,29 +0,0 @@
-// DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py.
-// OffscreenCanvas test in a worker:2d.layer.malformed-operations.transferToImageBitmap
-// Description:Check that exceptions are thrown for operations that are malformed while layers are open.
-// Note:
-
-importScripts("/resources/testharness.js");
-importScripts("/html/canvas/resources/canvas-tests.js");
-
-var t = async_test("Check that exceptions are thrown for operations that are malformed while layers are open.");
-var t_pass = t.done.bind(t);
-var t_fail = t.step_func(function(reason) {
-    throw reason;
-});
-t.step(function() {
-
-  var canvas = new OffscreenCanvas(200, 200);
-  var ctx = canvas.getContext('2d');
-
-  // Shouldn't throw on its own.
-  canvas.transferToImageBitmap();
-  // Make sure the exception isn't caused by calling the function twice.
-  canvas.transferToImageBitmap();
-  // Calling again inside a layer should throw.
-  ctx.beginLayer();
-  assert_throws_dom("InvalidStateError",
-                    () => canvas.transferToImageBitmap());
-  t.done();
-});
-done();
diff --git a/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations.worker.js b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations.worker.js
new file mode 100644
index 0000000000..5851fcfbc6
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/layers/2d.layer.malformed-operations.worker.js
@@ -0,0 +1,84 @@
+// DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py.
+// OffscreenCanvas test in a worker:2d.layer.malformed-operations
+// Description:
+// Note:
+
+importScripts("/resources/testharness.js");
+importScripts("/html/canvas/resources/canvas-tests.js");
+
+test(t => {
+  const canvas = new OffscreenCanvas(200, 200);
+  const ctx = canvas.getContext('2d');
+
+  // Shouldn't throw on its own.
+  ctx.createPattern(canvas, 'repeat');
+  // Make sure the exception isn't caused by calling the function twice.
+  ctx.createPattern(canvas, 'repeat');
+  // Calling again inside a layer should throw.
+  ctx.beginLayer();
+  assert_throws_dom("InvalidStateError",
+                    () => ctx.createPattern(canvas, 'repeat'));
+}, "Throws if createPattern is called while layers are open.");
+
+test(t => {
+  const canvas = new OffscreenCanvas(200, 200);
+  const ctx = canvas.getContext('2d');
+
+  const canvas2 = new OffscreenCanvas(200, 200);
+  const ctx2 = canvas2.getContext('2d');
+  // Shouldn't throw on its own.
+  ctx2.drawImage(canvas, 0, 0);
+  // Make sure the exception isn't caused by calling the function twice.
+  ctx2.drawImage(canvas, 0, 0);
+  // Calling again inside a layer should throw.
+  ctx.beginLayer();
+  assert_throws_dom("InvalidStateError",
+                    () => ctx2.drawImage(canvas, 0, 0));
+}, "Throws if drawImage is called while layers are open.");
+
+test(t => {
+  const canvas = new OffscreenCanvas(200, 200);
+  const ctx = canvas.getContext('2d');
+
+  // Shouldn't throw on its own.
+  ctx.getImageData(0, 0, 200, 200);
+  // Make sure the exception isn't caused by calling the function twice.
+  ctx.getImageData(0, 0, 200, 200);
+  // Calling again inside a layer should throw.
+  ctx.beginLayer();
+  assert_throws_dom("InvalidStateError",
+                    () => ctx.getImageData(0, 0, 200, 200));
+}, "Throws if getImageData is called while layers are open.");
+
+test(t => {
+  const canvas = new OffscreenCanvas(200, 200);
+  const ctx = canvas.getContext('2d');
+
+  const canvas2 = new OffscreenCanvas(200, 200);
+  const ctx2 = canvas2.getContext('2d')
+  const data = ctx2.getImageData(0, 0, 1, 1);
+  // Shouldn't throw on its own.
+  ctx.putImageData(data, 0, 0);
+  // Make sure the exception isn't caused by calling the function twice.
+  ctx.putImageData(data, 0, 0);
+  // Calling again inside a layer should throw.
+  ctx.beginLayer();
+  assert_throws_dom("InvalidStateError",
+                    () => ctx.putImageData(data, 0, 0));
+}, "Throws if putImageData is called while layers are open.");
+
+test(t => {
+  const canvas = new OffscreenCanvas(200, 200);
+  const ctx = canvas.getContext('2d');
+
+  // Shouldn't throw on its own.
+  canvas.transferToImageBitmap();
+  // Make sure the exception isn't caused by calling the function twice.
+  canvas.transferToImageBitmap();
+  // Calling again inside a layer should throw.
+  ctx.beginLayer();
+  assert_throws_dom("InvalidStateError",
+                    () => canvas.transferToImageBitmap());
+}, "Throws if transferToImageBitmap is called while layers are open.");
+
+done();
diff --git a/testing/web-platform/tests/html/canvas/offscreen/text/WEB_FEATURES.yml b/testing/web-platform/tests/html/canvas/offscreen/text/WEB_FEATURES.yml
new file mode 100644
index 0000000000..1d9e4bab82
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/text/WEB_FEATURES.yml
@@ -0,0 +1,4 @@
+features:
+- name: canvas-text-baselines
+  files:
+  - 2d.text.measure.baselines.*
author	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-06-12 05:35:37 +0000
committer	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-06-12 05:35:37 +0000
commit	a90a5cba08fdf6c0ceb95101c275108a152a3aed (patch)
tree	532507288f3defd7f4dcf1af49698bcb76034855 /testing/web-platform/tests/html/canvas/offscreen
parent	Adding debian version 126.0.1-1. (diff)
download	firefox-a90a5cba08fdf6c0ceb95101c275108a152a3aed.tar.xz firefox-a90a5cba08fdf6c0ceb95101c275108a152a3aed.zip