From 4275d57e23e4dd105a3e6e847018de1839bf07fe Mon Sep 17 00:00:00 2001
From: Jean-Philippe Gravel <jpgravel@chromium.org>
Date: Thu, 11 Apr 2024 14:08:43 -0700
Subject: [PATCH] De-fuzz the 2d.layer.global-states WPT tests

These tests were using shapes and colors that did not rasterize to
exact predictable values and therefore needed fuzzy matching. For
instance, the anti-aliased border of the circle was rendered
differently under certain configurations. Using squares avoids this
issue. Likewise, some color values used we not representable with
whole numbers after blending and compositing, leading to numerical
precision errors. These are unrelated with the behavior these tests
are about: these tests are about layer rendering, not antialiasing
or floating point color rounding precision.

Bug: 40257559
Change-Id: I8e749d7273f7b45516d4ba22bbedd54937a146e1
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5405421
Reviewed-by: Yi Xu <yiyix@chromium.org>
Commit-Queue: Jean-Philippe Gravel <jpgravel@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1286079}
---
 ...2d.layer.global-states.alpha-expected.html |  21 ++-
 ...global-states.alpha.blending-expected.html |  21 ++-
 ...2d.layer.global-states.alpha.blending.html |  17 +--
 ...states.alpha.blending.shadow-expected.html |  25 ++-
 ...r.global-states.alpha.blending.shadow.html |  21 ++-
 ...lobal-states.alpha.composite-expected.html |  21 ++-
 ...d.layer.global-states.alpha.composite.html |  17 +--
 ...tates.alpha.composite.shadow-expected.html |  25 ++-
 ....global-states.alpha.composite.shadow.html |  21 ++-
 .../layers/2d.layer.global-states.alpha.html  |  17 +--
 ...r.global-states.alpha.shadow-expected.html |  25 ++-
 .../2d.layer.global-states.alpha.shadow.html  |  21 ++-
 ...layer.global-states.blending-expected.html |  19 +--
 .../2d.layer.global-states.blending.html      |  15 +-
 ...lobal-states.blending.shadow-expected.html |  23 ++-
 ...d.layer.global-states.blending.shadow.html |  19 +--
 ...ayer.global-states.composite-expected.html |  19 +--
 .../2d.layer.global-states.composite.html     |  15 +-
 ...obal-states.composite.shadow-expected.html |  23 ++-
 ....layer.global-states.composite.shadow.html |  19 +--
 ...r.global-states.filter.alpha-expected.html |  31 ++--
 ...states.filter.alpha.blending-expected.html |  31 ++--
 ...r.global-states.filter.alpha.blending.html |  29 ++--
 ...filter.alpha.blending.shadow-expected.html |  35 ++---
 ...l-states.filter.alpha.blending.shadow.html |  32 ++--
 ...tates.filter.alpha.composite-expected.html |  31 ++--
 ....global-states.filter.alpha.composite.html |  29 ++--
 ...ilter.alpha.composite.shadow-expected.html |  35 ++---
 ...-states.filter.alpha.composite.shadow.html |  32 ++--
 .../2d.layer.global-states.filter.alpha.html  |  29 ++--
 ...l-states.filter.alpha.shadow-expected.html |  35 ++---
 ...yer.global-states.filter.alpha.shadow.html |  33 ++--
 ...lobal-states.filter.blending-expected.html |  29 ++--
 ...d.layer.global-states.filter.blending.html |  26 ++--
 ...tates.filter.blending.shadow-expected.html |  33 ++--
 ....global-states.filter.blending.shadow.html |  30 ++--
 ...obal-states.filter.composite-expected.html |  29 ++--
 ....layer.global-states.filter.composite.html |  26 ++--
 ...ates.filter.composite.shadow-expected.html |  33 ++--
 ...global-states.filter.composite.shadow.html |  30 ++--
 ...ates.filter.no-global-states-expected.html |  29 ++--
 ...global-states.filter.no-global-states.html |  26 ++--
 ....global-states.filter.shadow-expected.html |  33 ++--
 .../2d.layer.global-states.filter.shadow.html |  30 ++--
 ...obal-states.no-global-states-expected.html |  19 +--
 ....layer.global-states.no-global-states.html |  15 +-
 ...d.layer.global-states.shadow-expected.html |  23 ++-
 .../layers/2d.layer.global-states.shadow.html |  19 +--
 ...2d.layer.global-states.alpha-expected.html |  21 ++-
 ...global-states.alpha.blending-expected.html |  21 ++-
 ...2d.layer.global-states.alpha.blending.html |  19 +--
 ...states.alpha.blending.shadow-expected.html |  25 ++-
 ...r.global-states.alpha.blending.shadow.html |  23 ++-
 ...global-states.alpha.blending.shadow.w.html |  23 ++-
 ....layer.global-states.alpha.blending.w.html |  19 +--
 ...lobal-states.alpha.composite-expected.html |  21 ++-
 ...d.layer.global-states.alpha.composite.html |  19 +--
 ...tates.alpha.composite.shadow-expected.html |  25 ++-
 ....global-states.alpha.composite.shadow.html |  23 ++-
 ...lobal-states.alpha.composite.shadow.w.html |  23 ++-
 ...layer.global-states.alpha.composite.w.html |  19 +--
 .../layers/2d.layer.global-states.alpha.html  |  19 +--
 ...r.global-states.alpha.shadow-expected.html |  25 ++-
 .../2d.layer.global-states.alpha.shadow.html  |  23 ++-
 ...2d.layer.global-states.alpha.shadow.w.html |  23 ++-
 .../2d.layer.global-states.alpha.w.html       |  19 +--
 ...layer.global-states.blending-expected.html |  19 +--
 .../2d.layer.global-states.blending.html      |  17 +--
 ...lobal-states.blending.shadow-expected.html |  23 ++-
 ...d.layer.global-states.blending.shadow.html |  21 ++-
 ...layer.global-states.blending.shadow.w.html |  21 ++-
 .../2d.layer.global-states.blending.w.html    |  17 +--
 ...ayer.global-states.composite-expected.html |  19 +--
 .../2d.layer.global-states.composite.html     |  17 +--
 ...obal-states.composite.shadow-expected.html |  23 ++-
 ....layer.global-states.composite.shadow.html |  21 ++-
 ...ayer.global-states.composite.shadow.w.html |  21 ++-
 .../2d.layer.global-states.composite.w.html   |  17 +--
 ...r.global-states.filter.alpha-expected.html |  31 ++--
 ...states.filter.alpha.blending-expected.html |  31 ++--
 ...r.global-states.filter.alpha.blending.html |  31 ++--
 ...filter.alpha.blending.shadow-expected.html |  35 ++---
 ...l-states.filter.alpha.blending.shadow.html |  34 ++---
 ...states.filter.alpha.blending.shadow.w.html |  34 ++---
 ...global-states.filter.alpha.blending.w.html |  31 ++--
 ...tates.filter.alpha.composite-expected.html |  31 ++--
 ....global-states.filter.alpha.composite.html |  31 ++--
 ...ilter.alpha.composite.shadow-expected.html |  35 ++---
 ...-states.filter.alpha.composite.shadow.html |  34 ++---
 ...tates.filter.alpha.composite.shadow.w.html |  34 ++---
 ...lobal-states.filter.alpha.composite.w.html |  31 ++--
 .../2d.layer.global-states.filter.alpha.html  |  31 ++--
 ...l-states.filter.alpha.shadow-expected.html |  35 ++---
 ...yer.global-states.filter.alpha.shadow.html |  35 ++---
 ...r.global-states.filter.alpha.shadow.w.html |  35 ++---
 ...2d.layer.global-states.filter.alpha.w.html |  31 ++--
 ...lobal-states.filter.blending-expected.html |  29 ++--
 ...d.layer.global-states.filter.blending.html |  28 ++--
 ...tates.filter.blending.shadow-expected.html |  33 ++--
 ....global-states.filter.blending.shadow.html |  32 ++--
 ...lobal-states.filter.blending.shadow.w.html |  32 ++--
 ...layer.global-states.filter.blending.w.html |  28 ++--
 ...obal-states.filter.composite-expected.html |  29 ++--
 ....layer.global-states.filter.composite.html |  28 ++--
 ...ates.filter.composite.shadow-expected.html |  33 ++--
 ...global-states.filter.composite.shadow.html |  32 ++--
 ...obal-states.filter.composite.shadow.w.html |  32 ++--
 ...ayer.global-states.filter.composite.w.html |  28 ++--
 ...ates.filter.no-global-states-expected.html |  29 ++--
 ...global-states.filter.no-global-states.html |  28 ++--
 ...obal-states.filter.no-global-states.w.html |  28 ++--
 ....global-states.filter.shadow-expected.html |  33 ++--
 .../2d.layer.global-states.filter.shadow.html |  32 ++--
 ...d.layer.global-states.filter.shadow.w.html |  32 ++--
 ...obal-states.no-global-states-expected.html |  19 +--
 ....layer.global-states.no-global-states.html |  17 +--
 ...ayer.global-states.no-global-states.w.html |  17 +--
 ...d.layer.global-states.shadow-expected.html |  23 ++-
 .../layers/2d.layer.global-states.shadow.html |  21 ++-
 .../2d.layer.global-states.shadow.w.html      |  21 ++-
 html/canvas/tools/yaml-new/layers.yaml        | 143 +++++++-----------
 121 files changed, 1290 insertions(+), 1949 deletions(-)

diff --git a/html/canvas/element/layers/2d.layer.global-states.alpha-expected.html b/html/canvas/element/layers/2d.layer.global-states.alpha-expected.html
index 0666e3098a79e1..e749a6820142c4 100644
--- a/html/canvas/element/layers/2d.layer.global-states.alpha-expected.html
+++ b/html/canvas/element/layers/2d.layer.global-states.alpha-expected.html
@@ -3,29 +3,26 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <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)';
+  ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+  ctx.fillRect(20, 15, 50, 50);
 
-  var circle = new Path2D();
-  circle.arc(90, 90, 45, 0, 2 * Math.PI);
-  ctx.fill(circle);
+  ctx.globalAlpha = 0.75;
 
-  ctx.globalAlpha = 0.6;
-
-  canvas2 = document.createElement("canvas");
-  ctx2 = canvas2.getContext("2d");
+  const canvas2 = document.createElement("canvas");
+  const ctx2 = canvas2.getContext("2d");
 
   ctx2.globalCompositeOperation = 'screen';
-  ctx2.fillStyle = 'rgba(225, 0, 0, 1)';
-  ctx2.fillRect(50, 50, 75, 50);
+  ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+  ctx2.fillRect(10, 25, 40, 50);
   ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
-  ctx2.fillRect(70, 70, 75, 50);
+  ctx2.fillRect(30, 5, 50, 40);
 
   ctx.drawImage(canvas2, 0, 0);
 </script>
diff --git a/html/canvas/element/layers/2d.layer.global-states.alpha.blending-expected.html b/html/canvas/element/layers/2d.layer.global-states.alpha.blending-expected.html
index 8a450275889487..7fcb6f30a5342a 100644
--- a/html/canvas/element/layers/2d.layer.global-states.alpha.blending-expected.html
+++ b/html/canvas/element/layers/2d.layer.global-states.alpha.blending-expected.html
@@ -3,30 +3,27 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <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)';
+  ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+  ctx.fillRect(20, 15, 50, 50);
 
-  var circle = new Path2D();
-  circle.arc(90, 90, 45, 0, 2 * Math.PI);
-  ctx.fill(circle);
-
-  ctx.globalAlpha = 0.6;
+  ctx.globalAlpha = 0.75;
   ctx.globalCompositeOperation = 'multiply';
 
-  canvas2 = document.createElement("canvas");
-  ctx2 = canvas2.getContext("2d");
+  const canvas2 = document.createElement("canvas");
+  const ctx2 = canvas2.getContext("2d");
 
   ctx2.globalCompositeOperation = 'screen';
-  ctx2.fillStyle = 'rgba(225, 0, 0, 1)';
-  ctx2.fillRect(50, 50, 75, 50);
+  ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+  ctx2.fillRect(10, 25, 40, 50);
   ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
-  ctx2.fillRect(70, 70, 75, 50);
+  ctx2.fillRect(30, 5, 50, 40);
 
   ctx.drawImage(canvas2, 0, 0);
 </script>
diff --git a/html/canvas/element/layers/2d.layer.global-states.alpha.blending.html b/html/canvas/element/layers/2d.layer.global-states.alpha.blending.html
index 8e15a2b9364172..67c4258478b338 100644
--- a/html/canvas/element/layers/2d.layer.global-states.alpha.blending.html
+++ b/html/canvas/element/layers/2d.layer.global-states.alpha.blending.html
@@ -4,20 +4,17 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <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)';
+  ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+  ctx.fillRect(20, 15, 50, 50);
 
-  var circle = new Path2D();
-  circle.arc(90, 90, 45, 0, 2 * Math.PI);
-  ctx.fill(circle);
-
-  ctx.globalAlpha = 0.6;
+  ctx.globalAlpha = 0.75;
   ctx.globalCompositeOperation = 'multiply';
 
   ctx.beginLayer();
@@ -26,10 +23,10 @@ <h1>2d.layer.global-states.alpha.blending</h1>
   // 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(255, 0, 0, 1)';
+  ctx.fillRect(10, 25, 40, 50);
   ctx.fillStyle = 'rgba(0, 255, 0, 1)';
-  ctx.fillRect(70, 70, 75, 50);
+  ctx.fillRect(30, 5, 50, 40);
 
   ctx.endLayer();
 </script>
diff --git a/html/canvas/element/layers/2d.layer.global-states.alpha.blending.shadow-expected.html b/html/canvas/element/layers/2d.layer.global-states.alpha.blending.shadow-expected.html
index f7b633b35f6c02..7e3701dc9d8481 100644
--- a/html/canvas/element/layers/2d.layer.global-states.alpha.blending.shadow-expected.html
+++ b/html/canvas/element/layers/2d.layer.global-states.alpha.blending.shadow-expected.html
@@ -3,34 +3,31 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <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)';
+  ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+  ctx.fillRect(20, 15, 50, 50);
 
-  var circle = new Path2D();
-  circle.arc(90, 90, 45, 0, 2 * Math.PI);
-  ctx.fill(circle);
-
-  ctx.globalAlpha = 0.6;
+  ctx.globalAlpha = 0.75;
   ctx.globalCompositeOperation = 'multiply';
-  ctx.shadowOffsetX = -10;
-  ctx.shadowOffsetY = 10;
+  ctx.shadowOffsetX = -7;
+  ctx.shadowOffsetY = 7;
   ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
   ctx.shadowBlur = 3;
 
-  canvas2 = document.createElement("canvas");
-  ctx2 = canvas2.getContext("2d");
+  const canvas2 = document.createElement("canvas");
+  const ctx2 = canvas2.getContext("2d");
 
   ctx2.globalCompositeOperation = 'screen';
-  ctx2.fillStyle = 'rgba(225, 0, 0, 1)';
-  ctx2.fillRect(50, 50, 75, 50);
+  ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+  ctx2.fillRect(10, 25, 40, 50);
   ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
-  ctx2.fillRect(70, 70, 75, 50);
+  ctx2.fillRect(30, 5, 50, 40);
 
   ctx.drawImage(canvas2, 0, 0);
 </script>
diff --git a/html/canvas/element/layers/2d.layer.global-states.alpha.blending.shadow.html b/html/canvas/element/layers/2d.layer.global-states.alpha.blending.shadow.html
index c8c6d433bc0c63..4e8b2d4bf9fdbb 100644
--- a/html/canvas/element/layers/2d.layer.global-states.alpha.blending.shadow.html
+++ b/html/canvas/element/layers/2d.layer.global-states.alpha.blending.shadow.html
@@ -4,23 +4,20 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <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)';
+  ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+  ctx.fillRect(20, 15, 50, 50);
 
-  var circle = new Path2D();
-  circle.arc(90, 90, 45, 0, 2 * Math.PI);
-  ctx.fill(circle);
-
-  ctx.globalAlpha = 0.6;
+  ctx.globalAlpha = 0.75;
   ctx.globalCompositeOperation = 'multiply';
-  ctx.shadowOffsetX = -10;
-  ctx.shadowOffsetY = 10;
+  ctx.shadowOffsetX = -7;
+  ctx.shadowOffsetY = 7;
   ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
   ctx.shadowBlur = 3;
 
@@ -30,10 +27,10 @@ <h1>2d.layer.global-states.alpha.blending.shadow</h1>
   // 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(255, 0, 0, 1)';
+  ctx.fillRect(10, 25, 40, 50);
   ctx.fillStyle = 'rgba(0, 255, 0, 1)';
-  ctx.fillRect(70, 70, 75, 50);
+  ctx.fillRect(30, 5, 50, 40);
 
   ctx.endLayer();
 </script>
diff --git a/html/canvas/element/layers/2d.layer.global-states.alpha.composite-expected.html b/html/canvas/element/layers/2d.layer.global-states.alpha.composite-expected.html
index 951049e638c818..7919519851b98d 100644
--- a/html/canvas/element/layers/2d.layer.global-states.alpha.composite-expected.html
+++ b/html/canvas/element/layers/2d.layer.global-states.alpha.composite-expected.html
@@ -3,30 +3,27 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <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)';
+  ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+  ctx.fillRect(20, 15, 50, 50);
 
-  var circle = new Path2D();
-  circle.arc(90, 90, 45, 0, 2 * Math.PI);
-  ctx.fill(circle);
-
-  ctx.globalAlpha = 0.6;
+  ctx.globalAlpha = 0.75;
   ctx.globalCompositeOperation = 'source-in';
 
-  canvas2 = document.createElement("canvas");
-  ctx2 = canvas2.getContext("2d");
+  const canvas2 = document.createElement("canvas");
+  const ctx2 = canvas2.getContext("2d");
 
   ctx2.globalCompositeOperation = 'screen';
-  ctx2.fillStyle = 'rgba(225, 0, 0, 1)';
-  ctx2.fillRect(50, 50, 75, 50);
+  ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+  ctx2.fillRect(10, 25, 40, 50);
   ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
-  ctx2.fillRect(70, 70, 75, 50);
+  ctx2.fillRect(30, 5, 50, 40);
 
   ctx.drawImage(canvas2, 0, 0);
 </script>
diff --git a/html/canvas/element/layers/2d.layer.global-states.alpha.composite.html b/html/canvas/element/layers/2d.layer.global-states.alpha.composite.html
index 1ac6a2cbfe819e..2512898be9d059 100644
--- a/html/canvas/element/layers/2d.layer.global-states.alpha.composite.html
+++ b/html/canvas/element/layers/2d.layer.global-states.alpha.composite.html
@@ -4,20 +4,17 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <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)';
+  ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+  ctx.fillRect(20, 15, 50, 50);
 
-  var circle = new Path2D();
-  circle.arc(90, 90, 45, 0, 2 * Math.PI);
-  ctx.fill(circle);
-
-  ctx.globalAlpha = 0.6;
+  ctx.globalAlpha = 0.75;
   ctx.globalCompositeOperation = 'source-in';
 
   ctx.beginLayer();
@@ -26,10 +23,10 @@ <h1>2d.layer.global-states.alpha.composite</h1>
   // 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(255, 0, 0, 1)';
+  ctx.fillRect(10, 25, 40, 50);
   ctx.fillStyle = 'rgba(0, 255, 0, 1)';
-  ctx.fillRect(70, 70, 75, 50);
+  ctx.fillRect(30, 5, 50, 40);
 
   ctx.endLayer();
 </script>
diff --git a/html/canvas/element/layers/2d.layer.global-states.alpha.composite.shadow-expected.html b/html/canvas/element/layers/2d.layer.global-states.alpha.composite.shadow-expected.html
index 0ae93871f522e3..401d2bc9ea2d1b 100644
--- a/html/canvas/element/layers/2d.layer.global-states.alpha.composite.shadow-expected.html
+++ b/html/canvas/element/layers/2d.layer.global-states.alpha.composite.shadow-expected.html
@@ -3,34 +3,31 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <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)';
+  ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+  ctx.fillRect(20, 15, 50, 50);
 
-  var circle = new Path2D();
-  circle.arc(90, 90, 45, 0, 2 * Math.PI);
-  ctx.fill(circle);
-
-  ctx.globalAlpha = 0.6;
+  ctx.globalAlpha = 0.75;
   ctx.globalCompositeOperation = 'source-in';
-  ctx.shadowOffsetX = -10;
-  ctx.shadowOffsetY = 10;
+  ctx.shadowOffsetX = -7;
+  ctx.shadowOffsetY = 7;
   ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
   ctx.shadowBlur = 3;
 
-  canvas2 = document.createElement("canvas");
-  ctx2 = canvas2.getContext("2d");
+  const canvas2 = document.createElement("canvas");
+  const ctx2 = canvas2.getContext("2d");
 
   ctx2.globalCompositeOperation = 'screen';
-  ctx2.fillStyle = 'rgba(225, 0, 0, 1)';
-  ctx2.fillRect(50, 50, 75, 50);
+  ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+  ctx2.fillRect(10, 25, 40, 50);
   ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
-  ctx2.fillRect(70, 70, 75, 50);
+  ctx2.fillRect(30, 5, 50, 40);
 
   ctx.drawImage(canvas2, 0, 0);
 </script>
diff --git a/html/canvas/element/layers/2d.layer.global-states.alpha.composite.shadow.html b/html/canvas/element/layers/2d.layer.global-states.alpha.composite.shadow.html
index 92b8a0d7a75c8e..470fa914b8da52 100644
--- a/html/canvas/element/layers/2d.layer.global-states.alpha.composite.shadow.html
+++ b/html/canvas/element/layers/2d.layer.global-states.alpha.composite.shadow.html
@@ -4,23 +4,20 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <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)';
+  ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+  ctx.fillRect(20, 15, 50, 50);
 
-  var circle = new Path2D();
-  circle.arc(90, 90, 45, 0, 2 * Math.PI);
-  ctx.fill(circle);
-
-  ctx.globalAlpha = 0.6;
+  ctx.globalAlpha = 0.75;
   ctx.globalCompositeOperation = 'source-in';
-  ctx.shadowOffsetX = -10;
-  ctx.shadowOffsetY = 10;
+  ctx.shadowOffsetX = -7;
+  ctx.shadowOffsetY = 7;
   ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
   ctx.shadowBlur = 3;
 
@@ -30,10 +27,10 @@ <h1>2d.layer.global-states.alpha.composite.shadow</h1>
   // 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(255, 0, 0, 1)';
+  ctx.fillRect(10, 25, 40, 50);
   ctx.fillStyle = 'rgba(0, 255, 0, 1)';
-  ctx.fillRect(70, 70, 75, 50);
+  ctx.fillRect(30, 5, 50, 40);
 
   ctx.endLayer();
 </script>
diff --git a/html/canvas/element/layers/2d.layer.global-states.alpha.html b/html/canvas/element/layers/2d.layer.global-states.alpha.html
index 829796acbf9802..9d7ccc0d908bdd 100644
--- a/html/canvas/element/layers/2d.layer.global-states.alpha.html
+++ b/html/canvas/element/layers/2d.layer.global-states.alpha.html
@@ -4,20 +4,17 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <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)';
+  ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+  ctx.fillRect(20, 15, 50, 50);
 
-  var circle = new Path2D();
-  circle.arc(90, 90, 45, 0, 2 * Math.PI);
-  ctx.fill(circle);
-
-  ctx.globalAlpha = 0.6;
+  ctx.globalAlpha = 0.75;
 
   ctx.beginLayer();
 
@@ -25,10 +22,10 @@ <h1>2d.layer.global-states.alpha</h1>
   // 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(255, 0, 0, 1)';
+  ctx.fillRect(10, 25, 40, 50);
   ctx.fillStyle = 'rgba(0, 255, 0, 1)';
-  ctx.fillRect(70, 70, 75, 50);
+  ctx.fillRect(30, 5, 50, 40);
 
   ctx.endLayer();
 </script>
diff --git a/html/canvas/element/layers/2d.layer.global-states.alpha.shadow-expected.html b/html/canvas/element/layers/2d.layer.global-states.alpha.shadow-expected.html
index 6f764c50017656..919583101ebb1c 100644
--- a/html/canvas/element/layers/2d.layer.global-states.alpha.shadow-expected.html
+++ b/html/canvas/element/layers/2d.layer.global-states.alpha.shadow-expected.html
@@ -3,33 +3,30 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <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)';
+  ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+  ctx.fillRect(20, 15, 50, 50);
 
-  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.globalAlpha = 0.75;
+  ctx.shadowOffsetX = -7;
+  ctx.shadowOffsetY = 7;
   ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
   ctx.shadowBlur = 3;
 
-  canvas2 = document.createElement("canvas");
-  ctx2 = canvas2.getContext("2d");
+  const canvas2 = document.createElement("canvas");
+  const ctx2 = canvas2.getContext("2d");
 
   ctx2.globalCompositeOperation = 'screen';
-  ctx2.fillStyle = 'rgba(225, 0, 0, 1)';
-  ctx2.fillRect(50, 50, 75, 50);
+  ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+  ctx2.fillRect(10, 25, 40, 50);
   ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
-  ctx2.fillRect(70, 70, 75, 50);
+  ctx2.fillRect(30, 5, 50, 40);
 
   ctx.drawImage(canvas2, 0, 0);
 </script>
diff --git a/html/canvas/element/layers/2d.layer.global-states.alpha.shadow.html b/html/canvas/element/layers/2d.layer.global-states.alpha.shadow.html
index a325302b3b0705..675bcdc7da89ef 100644
--- a/html/canvas/element/layers/2d.layer.global-states.alpha.shadow.html
+++ b/html/canvas/element/layers/2d.layer.global-states.alpha.shadow.html
@@ -4,22 +4,19 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <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)';
+  ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+  ctx.fillRect(20, 15, 50, 50);
 
-  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.globalAlpha = 0.75;
+  ctx.shadowOffsetX = -7;
+  ctx.shadowOffsetY = 7;
   ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
   ctx.shadowBlur = 3;
 
@@ -29,10 +26,10 @@ <h1>2d.layer.global-states.alpha.shadow</h1>
   // 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(255, 0, 0, 1)';
+  ctx.fillRect(10, 25, 40, 50);
   ctx.fillStyle = 'rgba(0, 255, 0, 1)';
-  ctx.fillRect(70, 70, 75, 50);
+  ctx.fillRect(30, 5, 50, 40);
 
   ctx.endLayer();
 </script>
diff --git a/html/canvas/element/layers/2d.layer.global-states.blending-expected.html b/html/canvas/element/layers/2d.layer.global-states.blending-expected.html
index 33fdf46a28711a..fd7d4da7bc0a29 100644
--- a/html/canvas/element/layers/2d.layer.global-states.blending-expected.html
+++ b/html/canvas/element/layers/2d.layer.global-states.blending-expected.html
@@ -3,29 +3,26 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <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.fillStyle = 'rgba(128, 128, 128, 1)';
+  ctx.fillRect(20, 15, 50, 50);
 
   ctx.globalCompositeOperation = 'multiply';
 
-  canvas2 = document.createElement("canvas");
-  ctx2 = canvas2.getContext("2d");
+  const canvas2 = document.createElement("canvas");
+  const ctx2 = canvas2.getContext("2d");
 
   ctx2.globalCompositeOperation = 'screen';
-  ctx2.fillStyle = 'rgba(225, 0, 0, 1)';
-  ctx2.fillRect(50, 50, 75, 50);
+  ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+  ctx2.fillRect(10, 25, 40, 50);
   ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
-  ctx2.fillRect(70, 70, 75, 50);
+  ctx2.fillRect(30, 5, 50, 40);
 
   ctx.drawImage(canvas2, 0, 0);
 </script>
diff --git a/html/canvas/element/layers/2d.layer.global-states.blending.html b/html/canvas/element/layers/2d.layer.global-states.blending.html
index 7d4d9ae4b5ba5a..09d9d6d2541025 100644
--- a/html/canvas/element/layers/2d.layer.global-states.blending.html
+++ b/html/canvas/element/layers/2d.layer.global-states.blending.html
@@ -4,18 +4,15 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <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.fillStyle = 'rgba(128, 128, 128, 1)';
+  ctx.fillRect(20, 15, 50, 50);
 
   ctx.globalCompositeOperation = 'multiply';
 
@@ -25,10 +22,10 @@ <h1>2d.layer.global-states.blending</h1>
   // 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(255, 0, 0, 1)';
+  ctx.fillRect(10, 25, 40, 50);
   ctx.fillStyle = 'rgba(0, 255, 0, 1)';
-  ctx.fillRect(70, 70, 75, 50);
+  ctx.fillRect(30, 5, 50, 40);
 
   ctx.endLayer();
 </script>
diff --git a/html/canvas/element/layers/2d.layer.global-states.blending.shadow-expected.html b/html/canvas/element/layers/2d.layer.global-states.blending.shadow-expected.html
index 6f969074f93c49..a6085ed2ab1060 100644
--- a/html/canvas/element/layers/2d.layer.global-states.blending.shadow-expected.html
+++ b/html/canvas/element/layers/2d.layer.global-states.blending.shadow-expected.html
@@ -3,33 +3,30 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <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.fillStyle = 'rgba(128, 128, 128, 1)';
+  ctx.fillRect(20, 15, 50, 50);
 
   ctx.globalCompositeOperation = 'multiply';
-  ctx.shadowOffsetX = -10;
-  ctx.shadowOffsetY = 10;
+  ctx.shadowOffsetX = -7;
+  ctx.shadowOffsetY = 7;
   ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
   ctx.shadowBlur = 3;
 
-  canvas2 = document.createElement("canvas");
-  ctx2 = canvas2.getContext("2d");
+  const canvas2 = document.createElement("canvas");
+  const ctx2 = canvas2.getContext("2d");
 
   ctx2.globalCompositeOperation = 'screen';
-  ctx2.fillStyle = 'rgba(225, 0, 0, 1)';
-  ctx2.fillRect(50, 50, 75, 50);
+  ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+  ctx2.fillRect(10, 25, 40, 50);
   ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
-  ctx2.fillRect(70, 70, 75, 50);
+  ctx2.fillRect(30, 5, 50, 40);
 
   ctx.drawImage(canvas2, 0, 0);
 </script>
diff --git a/html/canvas/element/layers/2d.layer.global-states.blending.shadow.html b/html/canvas/element/layers/2d.layer.global-states.blending.shadow.html
index 51926d76d8ca88..266711e37c9867 100644
--- a/html/canvas/element/layers/2d.layer.global-states.blending.shadow.html
+++ b/html/canvas/element/layers/2d.layer.global-states.blending.shadow.html
@@ -4,22 +4,19 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <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.fillStyle = 'rgba(128, 128, 128, 1)';
+  ctx.fillRect(20, 15, 50, 50);
 
   ctx.globalCompositeOperation = 'multiply';
-  ctx.shadowOffsetX = -10;
-  ctx.shadowOffsetY = 10;
+  ctx.shadowOffsetX = -7;
+  ctx.shadowOffsetY = 7;
   ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
   ctx.shadowBlur = 3;
 
@@ -29,10 +26,10 @@ <h1>2d.layer.global-states.blending.shadow</h1>
   // 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(255, 0, 0, 1)';
+  ctx.fillRect(10, 25, 40, 50);
   ctx.fillStyle = 'rgba(0, 255, 0, 1)';
-  ctx.fillRect(70, 70, 75, 50);
+  ctx.fillRect(30, 5, 50, 40);
 
   ctx.endLayer();
 </script>
diff --git a/html/canvas/element/layers/2d.layer.global-states.composite-expected.html b/html/canvas/element/layers/2d.layer.global-states.composite-expected.html
index ed7669c4cfabd1..673c8711f04a9f 100644
--- a/html/canvas/element/layers/2d.layer.global-states.composite-expected.html
+++ b/html/canvas/element/layers/2d.layer.global-states.composite-expected.html
@@ -3,29 +3,26 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <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.fillStyle = 'rgba(128, 128, 128, 1)';
+  ctx.fillRect(20, 15, 50, 50);
 
   ctx.globalCompositeOperation = 'source-in';
 
-  canvas2 = document.createElement("canvas");
-  ctx2 = canvas2.getContext("2d");
+  const canvas2 = document.createElement("canvas");
+  const ctx2 = canvas2.getContext("2d");
 
   ctx2.globalCompositeOperation = 'screen';
-  ctx2.fillStyle = 'rgba(225, 0, 0, 1)';
-  ctx2.fillRect(50, 50, 75, 50);
+  ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+  ctx2.fillRect(10, 25, 40, 50);
   ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
-  ctx2.fillRect(70, 70, 75, 50);
+  ctx2.fillRect(30, 5, 50, 40);
 
   ctx.drawImage(canvas2, 0, 0);
 </script>
diff --git a/html/canvas/element/layers/2d.layer.global-states.composite.html b/html/canvas/element/layers/2d.layer.global-states.composite.html
index 898d14992412b1..a554c0368f6538 100644
--- a/html/canvas/element/layers/2d.layer.global-states.composite.html
+++ b/html/canvas/element/layers/2d.layer.global-states.composite.html
@@ -4,18 +4,15 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <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.fillStyle = 'rgba(128, 128, 128, 1)';
+  ctx.fillRect(20, 15, 50, 50);
 
   ctx.globalCompositeOperation = 'source-in';
 
@@ -25,10 +22,10 @@ <h1>2d.layer.global-states.composite</h1>
   // 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(255, 0, 0, 1)';
+  ctx.fillRect(10, 25, 40, 50);
   ctx.fillStyle = 'rgba(0, 255, 0, 1)';
-  ctx.fillRect(70, 70, 75, 50);
+  ctx.fillRect(30, 5, 50, 40);
 
   ctx.endLayer();
 </script>
diff --git a/html/canvas/element/layers/2d.layer.global-states.composite.shadow-expected.html b/html/canvas/element/layers/2d.layer.global-states.composite.shadow-expected.html
index b687c27f4715dd..f050ae89e10881 100644
--- a/html/canvas/element/layers/2d.layer.global-states.composite.shadow-expected.html
+++ b/html/canvas/element/layers/2d.layer.global-states.composite.shadow-expected.html
@@ -3,33 +3,30 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <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.fillStyle = 'rgba(128, 128, 128, 1)';
+  ctx.fillRect(20, 15, 50, 50);
 
   ctx.globalCompositeOperation = 'source-in';
-  ctx.shadowOffsetX = -10;
-  ctx.shadowOffsetY = 10;
+  ctx.shadowOffsetX = -7;
+  ctx.shadowOffsetY = 7;
   ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
   ctx.shadowBlur = 3;
 
-  canvas2 = document.createElement("canvas");
-  ctx2 = canvas2.getContext("2d");
+  const canvas2 = document.createElement("canvas");
+  const ctx2 = canvas2.getContext("2d");
 
   ctx2.globalCompositeOperation = 'screen';
-  ctx2.fillStyle = 'rgba(225, 0, 0, 1)';
-  ctx2.fillRect(50, 50, 75, 50);
+  ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+  ctx2.fillRect(10, 25, 40, 50);
   ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
-  ctx2.fillRect(70, 70, 75, 50);
+  ctx2.fillRect(30, 5, 50, 40);
 
   ctx.drawImage(canvas2, 0, 0);
 </script>
diff --git a/html/canvas/element/layers/2d.layer.global-states.composite.shadow.html b/html/canvas/element/layers/2d.layer.global-states.composite.shadow.html
index c563a57b76ec70..6b6cac5e7850e2 100644
--- a/html/canvas/element/layers/2d.layer.global-states.composite.shadow.html
+++ b/html/canvas/element/layers/2d.layer.global-states.composite.shadow.html
@@ -4,22 +4,19 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <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.fillStyle = 'rgba(128, 128, 128, 1)';
+  ctx.fillRect(20, 15, 50, 50);
 
   ctx.globalCompositeOperation = 'source-in';
-  ctx.shadowOffsetX = -10;
-  ctx.shadowOffsetY = 10;
+  ctx.shadowOffsetX = -7;
+  ctx.shadowOffsetY = 7;
   ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
   ctx.shadowBlur = 3;
 
@@ -29,10 +26,10 @@ <h1>2d.layer.global-states.composite.shadow</h1>
   // 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(255, 0, 0, 1)';
+  ctx.fillRect(10, 25, 40, 50);
   ctx.fillStyle = 'rgba(0, 255, 0, 1)';
-  ctx.fillRect(70, 70, 75, 50);
+  ctx.fillRect(30, 5, 50, 40);
 
   ctx.endLayer();
 </script>
diff --git a/html/canvas/element/layers/2d.layer.global-states.filter.alpha-expected.html b/html/canvas/element/layers/2d.layer.global-states.filter.alpha-expected.html
index f304700feb32ca..e50b3f69104ab5 100644
--- a/html/canvas/element/layers/2d.layer.global-states.filter.alpha-expected.html
+++ b/html/canvas/element/layers/2d.layer.global-states.filter.alpha-expected.html
@@ -3,7 +3,7 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <p class="fallback">FAIL (fallback content)</p>
 </canvas>
 <script>
@@ -12,37 +12,28 @@ <h1>2d.layer.global-states.filter.alpha</h1>
 
   const svg = `
     <svg xmlns="http://www.w3.org/2000/svg"
-          width="200" height="200"
+          width="90" height="90"
           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" />
+        <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
         <feComponentTransfer>
-          <feFuncA type="table" tableValues="0 0.7"></feFuncA>
+          <feFuncA type="table" tableValues="0 0.8"></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)"/>
+        <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 = 200;
-  img.height = 200;
+  img.width = 90;
+  img.height = 90;
   img.onload = () => {
-    ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
 
-    var circle = new Path2D();
-    circle.arc(90, 90, 45, 0, 2 * Math.PI);
-    ctx.fill(circle);
-
-    ctx.globalAlpha = 0.6;
+    ctx.globalAlpha = 0.75;
 
     ctx.drawImage(img, 0, 0);
   };
diff --git a/html/canvas/element/layers/2d.layer.global-states.filter.alpha.blending-expected.html b/html/canvas/element/layers/2d.layer.global-states.filter.alpha.blending-expected.html
index 7c91ce42293771..a1c41ba7a03417 100644
--- a/html/canvas/element/layers/2d.layer.global-states.filter.alpha.blending-expected.html
+++ b/html/canvas/element/layers/2d.layer.global-states.filter.alpha.blending-expected.html
@@ -3,7 +3,7 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <p class="fallback">FAIL (fallback content)</p>
 </canvas>
 <script>
@@ -12,37 +12,28 @@ <h1>2d.layer.global-states.filter.alpha.blending</h1>
 
   const svg = `
     <svg xmlns="http://www.w3.org/2000/svg"
-          width="200" height="200"
+          width="90" height="90"
           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" />
+        <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
         <feComponentTransfer>
-          <feFuncA type="table" tableValues="0 0.7"></feFuncA>
+          <feFuncA type="table" tableValues="0 0.8"></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)"/>
+        <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 = 200;
-  img.height = 200;
+  img.width = 90;
+  img.height = 90;
   img.onload = () => {
-    ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
 
-    var circle = new Path2D();
-    circle.arc(90, 90, 45, 0, 2 * Math.PI);
-    ctx.fill(circle);
-
-    ctx.globalAlpha = 0.6;
+    ctx.globalAlpha = 0.75;
   ctx.globalCompositeOperation = 'multiply';
 
     ctx.drawImage(img, 0, 0);
diff --git a/html/canvas/element/layers/2d.layer.global-states.filter.alpha.blending.html b/html/canvas/element/layers/2d.layer.global-states.filter.alpha.blending.html
index 98ea67e9e96e0d..2edd3ee4ddeaf1 100644
--- a/html/canvas/element/layers/2d.layer.global-states.filter.alpha.blending.html
+++ b/html/canvas/element/layers/2d.layer.global-states.filter.alpha.blending.html
@@ -1,39 +1,32 @@
 <!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">
+<canvas id="canvas" width="90" height="90">
   <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)';
+  ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+  ctx.fillRect(20, 15, 50, 50);
 
-  var circle = new Path2D();
-  circle.arc(90, 90, 45, 0, 2 * Math.PI);
-  ctx.fill(circle);
-
-  ctx.globalAlpha = 0.6;
+  ctx.globalAlpha = 0.75;
   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: 'dropShadow',
+          dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
       {name: 'componentTransfer',
-          funcA: {type: "table", tableValues: [0, 0.7]}},
-      {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]});
+          funcA: {type: "table", tableValues: [0, 0.8]}}]});
 
-  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.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();
 </script>
diff --git a/html/canvas/element/layers/2d.layer.global-states.filter.alpha.blending.shadow-expected.html b/html/canvas/element/layers/2d.layer.global-states.filter.alpha.blending.shadow-expected.html
index 62942ffeaecb91..1e78e2ceb9e34d 100644
--- a/html/canvas/element/layers/2d.layer.global-states.filter.alpha.blending.shadow-expected.html
+++ b/html/canvas/element/layers/2d.layer.global-states.filter.alpha.blending.shadow-expected.html
@@ -3,7 +3,7 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <p class="fallback">FAIL (fallback content)</p>
 </canvas>
 <script>
@@ -12,40 +12,31 @@ <h1>2d.layer.global-states.filter.alpha.blending.shadow</h1>
 
   const svg = `
     <svg xmlns="http://www.w3.org/2000/svg"
-          width="200" height="200"
+          width="90" height="90"
           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" />
+        <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
         <feComponentTransfer>
-          <feFuncA type="table" tableValues="0 0.7"></feFuncA>
+          <feFuncA type="table" tableValues="0 0.8"></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)"/>
+        <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 = 200;
-  img.height = 200;
+  img.width = 90;
+  img.height = 90;
   img.onload = () => {
-    ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
 
-    var circle = new Path2D();
-    circle.arc(90, 90, 45, 0, 2 * Math.PI);
-    ctx.fill(circle);
-
-    ctx.globalAlpha = 0.6;
+    ctx.globalAlpha = 0.75;
   ctx.globalCompositeOperation = 'multiply';
-  ctx.shadowOffsetX = -10;
-  ctx.shadowOffsetY = 10;
+  ctx.shadowOffsetX = -7;
+  ctx.shadowOffsetY = 7;
   ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
   ctx.shadowBlur = 3;
 
diff --git a/html/canvas/element/layers/2d.layer.global-states.filter.alpha.blending.shadow.html b/html/canvas/element/layers/2d.layer.global-states.filter.alpha.blending.shadow.html
index ccadfb624b727d..a9333756d8c2b1 100644
--- a/html/canvas/element/layers/2d.layer.global-states.filter.alpha.blending.shadow.html
+++ b/html/canvas/element/layers/2d.layer.global-states.filter.alpha.blending.shadow.html
@@ -4,39 +4,33 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <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)';
+  ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+  ctx.fillRect(20, 15, 50, 50);
 
-  var circle = new Path2D();
-  circle.arc(90, 90, 45, 0, 2 * Math.PI);
-  ctx.fill(circle);
-
-  ctx.globalAlpha = 0.6;
+  ctx.globalAlpha = 0.75;
   ctx.globalCompositeOperation = 'multiply';
-  ctx.shadowOffsetX = -10;
-  ctx.shadowOffsetY = 10;
+  ctx.shadowOffsetX = -7;
+  ctx.shadowOffsetY = 7;
   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: 'dropShadow',
+          dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
       {name: 'componentTransfer',
-          funcA: {type: "table", tableValues: [0, 0.7]}},
-      {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]});
+          funcA: {type: "table", tableValues: [0, 0.8]}}]});
 
-  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.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();
 </script>
diff --git a/html/canvas/element/layers/2d.layer.global-states.filter.alpha.composite-expected.html b/html/canvas/element/layers/2d.layer.global-states.filter.alpha.composite-expected.html
index 8e0d98648ea721..2487ef1a45eaae 100644
--- a/html/canvas/element/layers/2d.layer.global-states.filter.alpha.composite-expected.html
+++ b/html/canvas/element/layers/2d.layer.global-states.filter.alpha.composite-expected.html
@@ -3,7 +3,7 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <p class="fallback">FAIL (fallback content)</p>
 </canvas>
 <script>
@@ -12,37 +12,28 @@ <h1>2d.layer.global-states.filter.alpha.composite</h1>
 
   const svg = `
     <svg xmlns="http://www.w3.org/2000/svg"
-          width="200" height="200"
+          width="90" height="90"
           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" />
+        <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
         <feComponentTransfer>
-          <feFuncA type="table" tableValues="0 0.7"></feFuncA>
+          <feFuncA type="table" tableValues="0 0.8"></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)"/>
+        <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 = 200;
-  img.height = 200;
+  img.width = 90;
+  img.height = 90;
   img.onload = () => {
-    ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
 
-    var circle = new Path2D();
-    circle.arc(90, 90, 45, 0, 2 * Math.PI);
-    ctx.fill(circle);
-
-    ctx.globalAlpha = 0.6;
+    ctx.globalAlpha = 0.75;
   ctx.globalCompositeOperation = 'source-in';
 
     ctx.drawImage(img, 0, 0);
diff --git a/html/canvas/element/layers/2d.layer.global-states.filter.alpha.composite.html b/html/canvas/element/layers/2d.layer.global-states.filter.alpha.composite.html
index 29041d493382f1..e9ca6c7ab21cd2 100644
--- a/html/canvas/element/layers/2d.layer.global-states.filter.alpha.composite.html
+++ b/html/canvas/element/layers/2d.layer.global-states.filter.alpha.composite.html
@@ -1,39 +1,32 @@
 <!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">
+<canvas id="canvas" width="90" height="90">
   <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)';
+  ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+  ctx.fillRect(20, 15, 50, 50);
 
-  var circle = new Path2D();
-  circle.arc(90, 90, 45, 0, 2 * Math.PI);
-  ctx.fill(circle);
-
-  ctx.globalAlpha = 0.6;
+  ctx.globalAlpha = 0.75;
   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: 'dropShadow',
+          dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
       {name: 'componentTransfer',
-          funcA: {type: "table", tableValues: [0, 0.7]}},
-      {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]});
+          funcA: {type: "table", tableValues: [0, 0.8]}}]});
 
-  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.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();
 </script>
diff --git a/html/canvas/element/layers/2d.layer.global-states.filter.alpha.composite.shadow-expected.html b/html/canvas/element/layers/2d.layer.global-states.filter.alpha.composite.shadow-expected.html
index a64997254626c6..09ef99977adde3 100644
--- a/html/canvas/element/layers/2d.layer.global-states.filter.alpha.composite.shadow-expected.html
+++ b/html/canvas/element/layers/2d.layer.global-states.filter.alpha.composite.shadow-expected.html
@@ -3,7 +3,7 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <p class="fallback">FAIL (fallback content)</p>
 </canvas>
 <script>
@@ -12,40 +12,31 @@ <h1>2d.layer.global-states.filter.alpha.composite.shadow</h1>
 
   const svg = `
     <svg xmlns="http://www.w3.org/2000/svg"
-          width="200" height="200"
+          width="90" height="90"
           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" />
+        <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
         <feComponentTransfer>
-          <feFuncA type="table" tableValues="0 0.7"></feFuncA>
+          <feFuncA type="table" tableValues="0 0.8"></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)"/>
+        <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 = 200;
-  img.height = 200;
+  img.width = 90;
+  img.height = 90;
   img.onload = () => {
-    ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
 
-    var circle = new Path2D();
-    circle.arc(90, 90, 45, 0, 2 * Math.PI);
-    ctx.fill(circle);
-
-    ctx.globalAlpha = 0.6;
+    ctx.globalAlpha = 0.75;
   ctx.globalCompositeOperation = 'source-in';
-  ctx.shadowOffsetX = -10;
-  ctx.shadowOffsetY = 10;
+  ctx.shadowOffsetX = -7;
+  ctx.shadowOffsetY = 7;
   ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
   ctx.shadowBlur = 3;
 
diff --git a/html/canvas/element/layers/2d.layer.global-states.filter.alpha.composite.shadow.html b/html/canvas/element/layers/2d.layer.global-states.filter.alpha.composite.shadow.html
index b2907f02aa5755..b79ce32e06056b 100644
--- a/html/canvas/element/layers/2d.layer.global-states.filter.alpha.composite.shadow.html
+++ b/html/canvas/element/layers/2d.layer.global-states.filter.alpha.composite.shadow.html
@@ -4,39 +4,33 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <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)';
+  ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+  ctx.fillRect(20, 15, 50, 50);
 
-  var circle = new Path2D();
-  circle.arc(90, 90, 45, 0, 2 * Math.PI);
-  ctx.fill(circle);
-
-  ctx.globalAlpha = 0.6;
+  ctx.globalAlpha = 0.75;
   ctx.globalCompositeOperation = 'source-in';
-  ctx.shadowOffsetX = -10;
-  ctx.shadowOffsetY = 10;
+  ctx.shadowOffsetX = -7;
+  ctx.shadowOffsetY = 7;
   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: 'dropShadow',
+          dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
       {name: 'componentTransfer',
-          funcA: {type: "table", tableValues: [0, 0.7]}},
-      {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]});
+          funcA: {type: "table", tableValues: [0, 0.8]}}]});
 
-  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.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();
 </script>
diff --git a/html/canvas/element/layers/2d.layer.global-states.filter.alpha.html b/html/canvas/element/layers/2d.layer.global-states.filter.alpha.html
index 85718cffba1f98..69ff804b8fbb71 100644
--- a/html/canvas/element/layers/2d.layer.global-states.filter.alpha.html
+++ b/html/canvas/element/layers/2d.layer.global-states.filter.alpha.html
@@ -1,38 +1,31 @@
 <!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">
+<canvas id="canvas" width="90" height="90">
   <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)';
+  ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+  ctx.fillRect(20, 15, 50, 50);
 
-  var circle = new Path2D();
-  circle.arc(90, 90, 45, 0, 2 * Math.PI);
-  ctx.fill(circle);
-
-  ctx.globalAlpha = 0.6;
+  ctx.globalAlpha = 0.75;
 
   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: 'dropShadow',
+          dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
       {name: 'componentTransfer',
-          funcA: {type: "table", tableValues: [0, 0.7]}},
-      {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]});
+          funcA: {type: "table", tableValues: [0, 0.8]}}]});
 
-  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.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();
 </script>
diff --git a/html/canvas/element/layers/2d.layer.global-states.filter.alpha.shadow-expected.html b/html/canvas/element/layers/2d.layer.global-states.filter.alpha.shadow-expected.html
index 169baee29b986f..e46e8a4dd270d1 100644
--- a/html/canvas/element/layers/2d.layer.global-states.filter.alpha.shadow-expected.html
+++ b/html/canvas/element/layers/2d.layer.global-states.filter.alpha.shadow-expected.html
@@ -3,7 +3,7 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <p class="fallback">FAIL (fallback content)</p>
 </canvas>
 <script>
@@ -12,39 +12,30 @@ <h1>2d.layer.global-states.filter.alpha.shadow</h1>
 
   const svg = `
     <svg xmlns="http://www.w3.org/2000/svg"
-          width="200" height="200"
+          width="90" height="90"
           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" />
+        <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
         <feComponentTransfer>
-          <feFuncA type="table" tableValues="0 0.7"></feFuncA>
+          <feFuncA type="table" tableValues="0 0.8"></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)"/>
+        <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 = 200;
-  img.height = 200;
+  img.width = 90;
+  img.height = 90;
   img.onload = () => {
-    ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
 
-    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.globalAlpha = 0.75;
+  ctx.shadowOffsetX = -7;
+  ctx.shadowOffsetY = 7;
   ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
   ctx.shadowBlur = 3;
 
diff --git a/html/canvas/element/layers/2d.layer.global-states.filter.alpha.shadow.html b/html/canvas/element/layers/2d.layer.global-states.filter.alpha.shadow.html
index aaeb167ccf8235..5d2d0c7916bb7a 100644
--- a/html/canvas/element/layers/2d.layer.global-states.filter.alpha.shadow.html
+++ b/html/canvas/element/layers/2d.layer.global-states.filter.alpha.shadow.html
@@ -1,42 +1,35 @@
 <!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">
+<canvas id="canvas" width="90" height="90">
   <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)';
+  ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+  ctx.fillRect(20, 15, 50, 50);
 
-  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.globalAlpha = 0.75;
+  ctx.shadowOffsetX = -7;
+  ctx.shadowOffsetY = 7;
   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: 'dropShadow',
+          dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
       {name: 'componentTransfer',
-          funcA: {type: "table", tableValues: [0, 0.7]}},
-      {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]});
+          funcA: {type: "table", tableValues: [0, 0.8]}}]});
 
-  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.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();
 </script>
diff --git a/html/canvas/element/layers/2d.layer.global-states.filter.blending-expected.html b/html/canvas/element/layers/2d.layer.global-states.filter.blending-expected.html
index f81dcf72dc2e2d..a109712242be52 100644
--- a/html/canvas/element/layers/2d.layer.global-states.filter.blending-expected.html
+++ b/html/canvas/element/layers/2d.layer.global-states.filter.blending-expected.html
@@ -3,7 +3,7 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <p class="fallback">FAIL (fallback content)</p>
 </canvas>
 <script>
@@ -12,35 +12,26 @@ <h1>2d.layer.global-states.filter.blending</h1>
 
   const svg = `
     <svg xmlns="http://www.w3.org/2000/svg"
-          width="200" height="200"
+          width="90" height="90"
           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" />
+        <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
         <feComponentTransfer>
-          <feFuncA type="table" tableValues="0 0.7"></feFuncA>
+          <feFuncA type="table" tableValues="0 0.8"></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)"/>
+        <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 = 200;
-  img.height = 200;
+  img.width = 90;
+  img.height = 90;
   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.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
 
     ctx.globalCompositeOperation = 'multiply';
 
diff --git a/html/canvas/element/layers/2d.layer.global-states.filter.blending.html b/html/canvas/element/layers/2d.layer.global-states.filter.blending.html
index 31628812c2ea24..9bdcbae115c502 100644
--- a/html/canvas/element/layers/2d.layer.global-states.filter.blending.html
+++ b/html/canvas/element/layers/2d.layer.global-states.filter.blending.html
@@ -4,34 +4,28 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <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.fillStyle = 'rgba(128, 128, 128, 1)';
+  ctx.fillRect(20, 15, 50, 50);
 
   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: 'dropShadow',
+          dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
       {name: 'componentTransfer',
-          funcA: {type: "table", tableValues: [0, 0.7]}},
-      {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]});
+          funcA: {type: "table", tableValues: [0, 0.8]}}]});
 
-  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.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();
 </script>
diff --git a/html/canvas/element/layers/2d.layer.global-states.filter.blending.shadow-expected.html b/html/canvas/element/layers/2d.layer.global-states.filter.blending.shadow-expected.html
index 91f3725f8ec011..8c31f04db7d31d 100644
--- a/html/canvas/element/layers/2d.layer.global-states.filter.blending.shadow-expected.html
+++ b/html/canvas/element/layers/2d.layer.global-states.filter.blending.shadow-expected.html
@@ -3,7 +3,7 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <p class="fallback">FAIL (fallback content)</p>
 </canvas>
 <script>
@@ -12,39 +12,30 @@ <h1>2d.layer.global-states.filter.blending.shadow</h1>
 
   const svg = `
     <svg xmlns="http://www.w3.org/2000/svg"
-          width="200" height="200"
+          width="90" height="90"
           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" />
+        <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
         <feComponentTransfer>
-          <feFuncA type="table" tableValues="0 0.7"></feFuncA>
+          <feFuncA type="table" tableValues="0 0.8"></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)"/>
+        <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 = 200;
-  img.height = 200;
+  img.width = 90;
+  img.height = 90;
   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.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
 
     ctx.globalCompositeOperation = 'multiply';
-  ctx.shadowOffsetX = -10;
-  ctx.shadowOffsetY = 10;
+  ctx.shadowOffsetX = -7;
+  ctx.shadowOffsetY = 7;
   ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
   ctx.shadowBlur = 3;
 
diff --git a/html/canvas/element/layers/2d.layer.global-states.filter.blending.shadow.html b/html/canvas/element/layers/2d.layer.global-states.filter.blending.shadow.html
index e54cf06d0dd301..736981810c8de1 100644
--- a/html/canvas/element/layers/2d.layer.global-states.filter.blending.shadow.html
+++ b/html/canvas/element/layers/2d.layer.global-states.filter.blending.shadow.html
@@ -4,38 +4,32 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <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.fillStyle = 'rgba(128, 128, 128, 1)';
+  ctx.fillRect(20, 15, 50, 50);
 
   ctx.globalCompositeOperation = 'multiply';
-  ctx.shadowOffsetX = -10;
-  ctx.shadowOffsetY = 10;
+  ctx.shadowOffsetX = -7;
+  ctx.shadowOffsetY = 7;
   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: 'dropShadow',
+          dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
       {name: 'componentTransfer',
-          funcA: {type: "table", tableValues: [0, 0.7]}},
-      {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]});
+          funcA: {type: "table", tableValues: [0, 0.8]}}]});
 
-  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.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();
 </script>
diff --git a/html/canvas/element/layers/2d.layer.global-states.filter.composite-expected.html b/html/canvas/element/layers/2d.layer.global-states.filter.composite-expected.html
index 97e85a1593b63c..f05b3f16aed8bd 100644
--- a/html/canvas/element/layers/2d.layer.global-states.filter.composite-expected.html
+++ b/html/canvas/element/layers/2d.layer.global-states.filter.composite-expected.html
@@ -3,7 +3,7 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <p class="fallback">FAIL (fallback content)</p>
 </canvas>
 <script>
@@ -12,35 +12,26 @@ <h1>2d.layer.global-states.filter.composite</h1>
 
   const svg = `
     <svg xmlns="http://www.w3.org/2000/svg"
-          width="200" height="200"
+          width="90" height="90"
           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" />
+        <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
         <feComponentTransfer>
-          <feFuncA type="table" tableValues="0 0.7"></feFuncA>
+          <feFuncA type="table" tableValues="0 0.8"></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)"/>
+        <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 = 200;
-  img.height = 200;
+  img.width = 90;
+  img.height = 90;
   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.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
 
     ctx.globalCompositeOperation = 'source-in';
 
diff --git a/html/canvas/element/layers/2d.layer.global-states.filter.composite.html b/html/canvas/element/layers/2d.layer.global-states.filter.composite.html
index d7e365422f2528..8af05304968b29 100644
--- a/html/canvas/element/layers/2d.layer.global-states.filter.composite.html
+++ b/html/canvas/element/layers/2d.layer.global-states.filter.composite.html
@@ -4,34 +4,28 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <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.fillStyle = 'rgba(128, 128, 128, 1)';
+  ctx.fillRect(20, 15, 50, 50);
 
   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: 'dropShadow',
+          dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
       {name: 'componentTransfer',
-          funcA: {type: "table", tableValues: [0, 0.7]}},
-      {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]});
+          funcA: {type: "table", tableValues: [0, 0.8]}}]});
 
-  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.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();
 </script>
diff --git a/html/canvas/element/layers/2d.layer.global-states.filter.composite.shadow-expected.html b/html/canvas/element/layers/2d.layer.global-states.filter.composite.shadow-expected.html
index 4716bb2760f4dd..6c994361153fb3 100644
--- a/html/canvas/element/layers/2d.layer.global-states.filter.composite.shadow-expected.html
+++ b/html/canvas/element/layers/2d.layer.global-states.filter.composite.shadow-expected.html
@@ -3,7 +3,7 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <p class="fallback">FAIL (fallback content)</p>
 </canvas>
 <script>
@@ -12,39 +12,30 @@ <h1>2d.layer.global-states.filter.composite.shadow</h1>
 
   const svg = `
     <svg xmlns="http://www.w3.org/2000/svg"
-          width="200" height="200"
+          width="90" height="90"
           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" />
+        <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
         <feComponentTransfer>
-          <feFuncA type="table" tableValues="0 0.7"></feFuncA>
+          <feFuncA type="table" tableValues="0 0.8"></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)"/>
+        <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 = 200;
-  img.height = 200;
+  img.width = 90;
+  img.height = 90;
   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.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
 
     ctx.globalCompositeOperation = 'source-in';
-  ctx.shadowOffsetX = -10;
-  ctx.shadowOffsetY = 10;
+  ctx.shadowOffsetX = -7;
+  ctx.shadowOffsetY = 7;
   ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
   ctx.shadowBlur = 3;
 
diff --git a/html/canvas/element/layers/2d.layer.global-states.filter.composite.shadow.html b/html/canvas/element/layers/2d.layer.global-states.filter.composite.shadow.html
index e5c76986347ae7..0f4c0bd9b7c8eb 100644
--- a/html/canvas/element/layers/2d.layer.global-states.filter.composite.shadow.html
+++ b/html/canvas/element/layers/2d.layer.global-states.filter.composite.shadow.html
@@ -4,38 +4,32 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <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.fillStyle = 'rgba(128, 128, 128, 1)';
+  ctx.fillRect(20, 15, 50, 50);
 
   ctx.globalCompositeOperation = 'source-in';
-  ctx.shadowOffsetX = -10;
-  ctx.shadowOffsetY = 10;
+  ctx.shadowOffsetX = -7;
+  ctx.shadowOffsetY = 7;
   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: 'dropShadow',
+          dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
       {name: 'componentTransfer',
-          funcA: {type: "table", tableValues: [0, 0.7]}},
-      {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]});
+          funcA: {type: "table", tableValues: [0, 0.8]}}]});
 
-  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.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();
 </script>
diff --git a/html/canvas/element/layers/2d.layer.global-states.filter.no-global-states-expected.html b/html/canvas/element/layers/2d.layer.global-states.filter.no-global-states-expected.html
index e56fe0b3602d05..71f0ab023ab75e 100644
--- a/html/canvas/element/layers/2d.layer.global-states.filter.no-global-states-expected.html
+++ b/html/canvas/element/layers/2d.layer.global-states.filter.no-global-states-expected.html
@@ -3,7 +3,7 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <p class="fallback">FAIL (fallback content)</p>
 </canvas>
 <script>
@@ -12,35 +12,26 @@ <h1>2d.layer.global-states.filter.no-global-states</h1>
 
   const svg = `
     <svg xmlns="http://www.w3.org/2000/svg"
-          width="200" height="200"
+          width="90" height="90"
           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" />
+        <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
         <feComponentTransfer>
-          <feFuncA type="table" tableValues="0 0.7"></feFuncA>
+          <feFuncA type="table" tableValues="0 0.8"></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)"/>
+        <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 = 200;
-  img.height = 200;
+  img.width = 90;
+  img.height = 90;
   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.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
 
     // No global states.
 
diff --git a/html/canvas/element/layers/2d.layer.global-states.filter.no-global-states.html b/html/canvas/element/layers/2d.layer.global-states.filter.no-global-states.html
index 68f4d5004a2974..1aa5d308c47b82 100644
--- a/html/canvas/element/layers/2d.layer.global-states.filter.no-global-states.html
+++ b/html/canvas/element/layers/2d.layer.global-states.filter.no-global-states.html
@@ -4,34 +4,28 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <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.fillStyle = 'rgba(128, 128, 128, 1)';
+  ctx.fillRect(20, 15, 50, 50);
 
   // 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: 'dropShadow',
+          dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
       {name: 'componentTransfer',
-          funcA: {type: "table", tableValues: [0, 0.7]}},
-      {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]});
+          funcA: {type: "table", tableValues: [0, 0.8]}}]});
 
-  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.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();
 </script>
diff --git a/html/canvas/element/layers/2d.layer.global-states.filter.shadow-expected.html b/html/canvas/element/layers/2d.layer.global-states.filter.shadow-expected.html
index 13ba2dd4cde61d..5e9ca62537606e 100644
--- a/html/canvas/element/layers/2d.layer.global-states.filter.shadow-expected.html
+++ b/html/canvas/element/layers/2d.layer.global-states.filter.shadow-expected.html
@@ -3,7 +3,7 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <p class="fallback">FAIL (fallback content)</p>
 </canvas>
 <script>
@@ -12,38 +12,29 @@ <h1>2d.layer.global-states.filter.shadow</h1>
 
   const svg = `
     <svg xmlns="http://www.w3.org/2000/svg"
-          width="200" height="200"
+          width="90" height="90"
           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" />
+        <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
         <feComponentTransfer>
-          <feFuncA type="table" tableValues="0 0.7"></feFuncA>
+          <feFuncA type="table" tableValues="0 0.8"></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)"/>
+        <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 = 200;
-  img.height = 200;
+  img.width = 90;
+  img.height = 90;
   img.onload = () => {
-    ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
 
-    var circle = new Path2D();
-    circle.arc(90, 90, 45, 0, 2 * Math.PI);
-    ctx.fill(circle);
-
-    ctx.shadowOffsetX = -10;
-  ctx.shadowOffsetY = 10;
+    ctx.shadowOffsetX = -7;
+  ctx.shadowOffsetY = 7;
   ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
   ctx.shadowBlur = 3;
 
diff --git a/html/canvas/element/layers/2d.layer.global-states.filter.shadow.html b/html/canvas/element/layers/2d.layer.global-states.filter.shadow.html
index 9efcd9d4f753c8..dc504550b0dade 100644
--- a/html/canvas/element/layers/2d.layer.global-states.filter.shadow.html
+++ b/html/canvas/element/layers/2d.layer.global-states.filter.shadow.html
@@ -4,37 +4,31 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <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)';
+  ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+  ctx.fillRect(20, 15, 50, 50);
 
-  var circle = new Path2D();
-  circle.arc(90, 90, 45, 0, 2 * Math.PI);
-  ctx.fill(circle);
-
-  ctx.shadowOffsetX = -10;
-  ctx.shadowOffsetY = 10;
+  ctx.shadowOffsetX = -7;
+  ctx.shadowOffsetY = 7;
   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: 'dropShadow',
+          dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
       {name: 'componentTransfer',
-          funcA: {type: "table", tableValues: [0, 0.7]}},
-      {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]});
+          funcA: {type: "table", tableValues: [0, 0.8]}}]});
 
-  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.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();
 </script>
diff --git a/html/canvas/element/layers/2d.layer.global-states.no-global-states-expected.html b/html/canvas/element/layers/2d.layer.global-states.no-global-states-expected.html
index b91a2ae8b52c25..5742aea082fb8e 100644
--- a/html/canvas/element/layers/2d.layer.global-states.no-global-states-expected.html
+++ b/html/canvas/element/layers/2d.layer.global-states.no-global-states-expected.html
@@ -3,29 +3,26 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <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.fillStyle = 'rgba(128, 128, 128, 1)';
+  ctx.fillRect(20, 15, 50, 50);
 
   // No global states.
 
-  canvas2 = document.createElement("canvas");
-  ctx2 = canvas2.getContext("2d");
+  const canvas2 = document.createElement("canvas");
+  const ctx2 = canvas2.getContext("2d");
 
   ctx2.globalCompositeOperation = 'screen';
-  ctx2.fillStyle = 'rgba(225, 0, 0, 1)';
-  ctx2.fillRect(50, 50, 75, 50);
+  ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+  ctx2.fillRect(10, 25, 40, 50);
   ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
-  ctx2.fillRect(70, 70, 75, 50);
+  ctx2.fillRect(30, 5, 50, 40);
 
   ctx.drawImage(canvas2, 0, 0);
 </script>
diff --git a/html/canvas/element/layers/2d.layer.global-states.no-global-states.html b/html/canvas/element/layers/2d.layer.global-states.no-global-states.html
index d561be234103c4..6f55c5c3d1bdf2 100644
--- a/html/canvas/element/layers/2d.layer.global-states.no-global-states.html
+++ b/html/canvas/element/layers/2d.layer.global-states.no-global-states.html
@@ -4,18 +4,15 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <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.fillStyle = 'rgba(128, 128, 128, 1)';
+  ctx.fillRect(20, 15, 50, 50);
 
   // No global states.
 
@@ -25,10 +22,10 @@ <h1>2d.layer.global-states.no-global-states</h1>
   // 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(255, 0, 0, 1)';
+  ctx.fillRect(10, 25, 40, 50);
   ctx.fillStyle = 'rgba(0, 255, 0, 1)';
-  ctx.fillRect(70, 70, 75, 50);
+  ctx.fillRect(30, 5, 50, 40);
 
   ctx.endLayer();
 </script>
diff --git a/html/canvas/element/layers/2d.layer.global-states.shadow-expected.html b/html/canvas/element/layers/2d.layer.global-states.shadow-expected.html
index 835e9d420ac349..79efdfec33dd1c 100644
--- a/html/canvas/element/layers/2d.layer.global-states.shadow-expected.html
+++ b/html/canvas/element/layers/2d.layer.global-states.shadow-expected.html
@@ -3,32 +3,29 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <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)';
+  ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+  ctx.fillRect(20, 15, 50, 50);
 
-  var circle = new Path2D();
-  circle.arc(90, 90, 45, 0, 2 * Math.PI);
-  ctx.fill(circle);
-
-  ctx.shadowOffsetX = -10;
-  ctx.shadowOffsetY = 10;
+  ctx.shadowOffsetX = -7;
+  ctx.shadowOffsetY = 7;
   ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
   ctx.shadowBlur = 3;
 
-  canvas2 = document.createElement("canvas");
-  ctx2 = canvas2.getContext("2d");
+  const canvas2 = document.createElement("canvas");
+  const ctx2 = canvas2.getContext("2d");
 
   ctx2.globalCompositeOperation = 'screen';
-  ctx2.fillStyle = 'rgba(225, 0, 0, 1)';
-  ctx2.fillRect(50, 50, 75, 50);
+  ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+  ctx2.fillRect(10, 25, 40, 50);
   ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
-  ctx2.fillRect(70, 70, 75, 50);
+  ctx2.fillRect(30, 5, 50, 40);
 
   ctx.drawImage(canvas2, 0, 0);
 </script>
diff --git a/html/canvas/element/layers/2d.layer.global-states.shadow.html b/html/canvas/element/layers/2d.layer.global-states.shadow.html
index 209316164cb2cd..99c10fbbe5d272 100644
--- a/html/canvas/element/layers/2d.layer.global-states.shadow.html
+++ b/html/canvas/element/layers/2d.layer.global-states.shadow.html
@@ -4,21 +4,18 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <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)';
+  ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+  ctx.fillRect(20, 15, 50, 50);
 
-  var circle = new Path2D();
-  circle.arc(90, 90, 45, 0, 2 * Math.PI);
-  ctx.fill(circle);
-
-  ctx.shadowOffsetX = -10;
-  ctx.shadowOffsetY = 10;
+  ctx.shadowOffsetX = -7;
+  ctx.shadowOffsetY = 7;
   ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
   ctx.shadowBlur = 3;
 
@@ -28,10 +25,10 @@ <h1>2d.layer.global-states.shadow</h1>
   // 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(255, 0, 0, 1)';
+  ctx.fillRect(10, 25, 40, 50);
   ctx.fillStyle = 'rgba(0, 255, 0, 1)';
-  ctx.fillRect(70, 70, 75, 50);
+  ctx.fillRect(30, 5, 50, 40);
 
   ctx.endLayer();
 </script>
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.alpha-expected.html b/html/canvas/offscreen/layers/2d.layer.global-states.alpha-expected.html
index 0666e3098a79e1..e749a6820142c4 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.alpha-expected.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.alpha-expected.html
@@ -3,29 +3,26 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <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)';
+  ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+  ctx.fillRect(20, 15, 50, 50);
 
-  var circle = new Path2D();
-  circle.arc(90, 90, 45, 0, 2 * Math.PI);
-  ctx.fill(circle);
+  ctx.globalAlpha = 0.75;
 
-  ctx.globalAlpha = 0.6;
-
-  canvas2 = document.createElement("canvas");
-  ctx2 = canvas2.getContext("2d");
+  const canvas2 = document.createElement("canvas");
+  const ctx2 = canvas2.getContext("2d");
 
   ctx2.globalCompositeOperation = 'screen';
-  ctx2.fillStyle = 'rgba(225, 0, 0, 1)';
-  ctx2.fillRect(50, 50, 75, 50);
+  ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+  ctx2.fillRect(10, 25, 40, 50);
   ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
-  ctx2.fillRect(70, 70, 75, 50);
+  ctx2.fillRect(30, 5, 50, 40);
 
   ctx.drawImage(canvas2, 0, 0);
 </script>
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.alpha.blending-expected.html b/html/canvas/offscreen/layers/2d.layer.global-states.alpha.blending-expected.html
index 8a450275889487..7fcb6f30a5342a 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.alpha.blending-expected.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.alpha.blending-expected.html
@@ -3,30 +3,27 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <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)';
+  ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+  ctx.fillRect(20, 15, 50, 50);
 
-  var circle = new Path2D();
-  circle.arc(90, 90, 45, 0, 2 * Math.PI);
-  ctx.fill(circle);
-
-  ctx.globalAlpha = 0.6;
+  ctx.globalAlpha = 0.75;
   ctx.globalCompositeOperation = 'multiply';
 
-  canvas2 = document.createElement("canvas");
-  ctx2 = canvas2.getContext("2d");
+  const canvas2 = document.createElement("canvas");
+  const ctx2 = canvas2.getContext("2d");
 
   ctx2.globalCompositeOperation = 'screen';
-  ctx2.fillStyle = 'rgba(225, 0, 0, 1)';
-  ctx2.fillRect(50, 50, 75, 50);
+  ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+  ctx2.fillRect(10, 25, 40, 50);
   ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
-  ctx2.fillRect(70, 70, 75, 50);
+  ctx2.fillRect(30, 5, 50, 40);
 
   ctx.drawImage(canvas2, 0, 0);
 </script>
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.alpha.blending.html b/html/canvas/offscreen/layers/2d.layer.global-states.alpha.blending.html
index 71414b4b3790b9..46873618cb3496 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.alpha.blending.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.alpha.blending.html
@@ -4,20 +4,17 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <p class="fallback">FAIL (fallback content)</p>
 </canvas>
 <script>
-  const canvas = new OffscreenCanvas(200, 200);
+  const canvas = new OffscreenCanvas(90, 90);
   const ctx = canvas.getContext('2d');
 
-  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+  ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+  ctx.fillRect(20, 15, 50, 50);
 
-  var circle = new Path2D();
-  circle.arc(90, 90, 45, 0, 2 * Math.PI);
-  ctx.fill(circle);
-
-  ctx.globalAlpha = 0.6;
+  ctx.globalAlpha = 0.75;
   ctx.globalCompositeOperation = 'multiply';
 
   ctx.beginLayer();
@@ -26,10 +23,10 @@ <h1>2d.layer.global-states.alpha.blending</h1>
   // 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(255, 0, 0, 1)';
+  ctx.fillRect(10, 25, 40, 50);
   ctx.fillStyle = 'rgba(0, 255, 0, 1)';
-  ctx.fillRect(70, 70, 75, 50);
+  ctx.fillRect(30, 5, 50, 40);
 
   ctx.endLayer();
 
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.alpha.blending.shadow-expected.html b/html/canvas/offscreen/layers/2d.layer.global-states.alpha.blending.shadow-expected.html
index f7b633b35f6c02..7e3701dc9d8481 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.alpha.blending.shadow-expected.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.alpha.blending.shadow-expected.html
@@ -3,34 +3,31 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <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)';
+  ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+  ctx.fillRect(20, 15, 50, 50);
 
-  var circle = new Path2D();
-  circle.arc(90, 90, 45, 0, 2 * Math.PI);
-  ctx.fill(circle);
-
-  ctx.globalAlpha = 0.6;
+  ctx.globalAlpha = 0.75;
   ctx.globalCompositeOperation = 'multiply';
-  ctx.shadowOffsetX = -10;
-  ctx.shadowOffsetY = 10;
+  ctx.shadowOffsetX = -7;
+  ctx.shadowOffsetY = 7;
   ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
   ctx.shadowBlur = 3;
 
-  canvas2 = document.createElement("canvas");
-  ctx2 = canvas2.getContext("2d");
+  const canvas2 = document.createElement("canvas");
+  const ctx2 = canvas2.getContext("2d");
 
   ctx2.globalCompositeOperation = 'screen';
-  ctx2.fillStyle = 'rgba(225, 0, 0, 1)';
-  ctx2.fillRect(50, 50, 75, 50);
+  ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+  ctx2.fillRect(10, 25, 40, 50);
   ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
-  ctx2.fillRect(70, 70, 75, 50);
+  ctx2.fillRect(30, 5, 50, 40);
 
   ctx.drawImage(canvas2, 0, 0);
 </script>
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.alpha.blending.shadow.html b/html/canvas/offscreen/layers/2d.layer.global-states.alpha.blending.shadow.html
index ed2d2d70af2cf5..1653ee41738b1a 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.alpha.blending.shadow.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.alpha.blending.shadow.html
@@ -4,23 +4,20 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <p class="fallback">FAIL (fallback content)</p>
 </canvas>
 <script>
-  const canvas = new OffscreenCanvas(200, 200);
+  const canvas = new OffscreenCanvas(90, 90);
   const ctx = canvas.getContext('2d');
 
-  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+  ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+  ctx.fillRect(20, 15, 50, 50);
 
-  var circle = new Path2D();
-  circle.arc(90, 90, 45, 0, 2 * Math.PI);
-  ctx.fill(circle);
-
-  ctx.globalAlpha = 0.6;
+  ctx.globalAlpha = 0.75;
   ctx.globalCompositeOperation = 'multiply';
-  ctx.shadowOffsetX = -10;
-  ctx.shadowOffsetY = 10;
+  ctx.shadowOffsetX = -7;
+  ctx.shadowOffsetY = 7;
   ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
   ctx.shadowBlur = 3;
 
@@ -30,10 +27,10 @@ <h1>2d.layer.global-states.alpha.blending.shadow</h1>
   // 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(255, 0, 0, 1)';
+  ctx.fillRect(10, 25, 40, 50);
   ctx.fillStyle = 'rgba(0, 255, 0, 1)';
-  ctx.fillRect(70, 70, 75, 50);
+  ctx.fillRect(30, 5, 50, 40);
 
   ctx.endLayer();
 
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.alpha.blending.shadow.w.html b/html/canvas/offscreen/layers/2d.layer.global-states.alpha.blending.shadow.w.html
index 1ff3ad83850549..116fa2b40a568c 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.alpha.blending.shadow.w.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.alpha.blending.shadow.w.html
@@ -5,24 +5,21 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <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 canvas = new OffscreenCanvas(90, 90);
     const ctx = canvas.getContext('2d');
 
-    ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
 
-    var circle = new Path2D();
-    circle.arc(90, 90, 45, 0, 2 * Math.PI);
-    ctx.fill(circle);
-
-    ctx.globalAlpha = 0.6;
+    ctx.globalAlpha = 0.75;
     ctx.globalCompositeOperation = 'multiply';
-    ctx.shadowOffsetX = -10;
-    ctx.shadowOffsetY = 10;
+    ctx.shadowOffsetX = -7;
+    ctx.shadowOffsetY = 7;
     ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
     ctx.shadowBlur = 3;
 
@@ -32,10 +29,10 @@ <h1>2d.layer.global-states.alpha.blending.shadow</h1>
     // 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(255, 0, 0, 1)';
+    ctx.fillRect(10, 25, 40, 50);
     ctx.fillStyle = 'rgba(0, 255, 0, 1)';
-    ctx.fillRect(70, 70, 75, 50);
+    ctx.fillRect(30, 5, 50, 40);
 
     ctx.endLayer();
 
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.alpha.blending.w.html b/html/canvas/offscreen/layers/2d.layer.global-states.alpha.blending.w.html
index 618480c813fdd1..b5238795865a6e 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.alpha.blending.w.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.alpha.blending.w.html
@@ -5,21 +5,18 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <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 canvas = new OffscreenCanvas(90, 90);
     const ctx = canvas.getContext('2d');
 
-    ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
 
-    var circle = new Path2D();
-    circle.arc(90, 90, 45, 0, 2 * Math.PI);
-    ctx.fill(circle);
-
-    ctx.globalAlpha = 0.6;
+    ctx.globalAlpha = 0.75;
     ctx.globalCompositeOperation = 'multiply';
 
     ctx.beginLayer();
@@ -28,10 +25,10 @@ <h1>2d.layer.global-states.alpha.blending</h1>
     // 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(255, 0, 0, 1)';
+    ctx.fillRect(10, 25, 40, 50);
     ctx.fillStyle = 'rgba(0, 255, 0, 1)';
-    ctx.fillRect(70, 70, 75, 50);
+    ctx.fillRect(30, 5, 50, 40);
 
     ctx.endLayer();
 
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.alpha.composite-expected.html b/html/canvas/offscreen/layers/2d.layer.global-states.alpha.composite-expected.html
index 951049e638c818..7919519851b98d 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.alpha.composite-expected.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.alpha.composite-expected.html
@@ -3,30 +3,27 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <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)';
+  ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+  ctx.fillRect(20, 15, 50, 50);
 
-  var circle = new Path2D();
-  circle.arc(90, 90, 45, 0, 2 * Math.PI);
-  ctx.fill(circle);
-
-  ctx.globalAlpha = 0.6;
+  ctx.globalAlpha = 0.75;
   ctx.globalCompositeOperation = 'source-in';
 
-  canvas2 = document.createElement("canvas");
-  ctx2 = canvas2.getContext("2d");
+  const canvas2 = document.createElement("canvas");
+  const ctx2 = canvas2.getContext("2d");
 
   ctx2.globalCompositeOperation = 'screen';
-  ctx2.fillStyle = 'rgba(225, 0, 0, 1)';
-  ctx2.fillRect(50, 50, 75, 50);
+  ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+  ctx2.fillRect(10, 25, 40, 50);
   ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
-  ctx2.fillRect(70, 70, 75, 50);
+  ctx2.fillRect(30, 5, 50, 40);
 
   ctx.drawImage(canvas2, 0, 0);
 </script>
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.alpha.composite.html b/html/canvas/offscreen/layers/2d.layer.global-states.alpha.composite.html
index 94fed5752df2b6..88c1bd274c38be 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.alpha.composite.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.alpha.composite.html
@@ -4,20 +4,17 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <p class="fallback">FAIL (fallback content)</p>
 </canvas>
 <script>
-  const canvas = new OffscreenCanvas(200, 200);
+  const canvas = new OffscreenCanvas(90, 90);
   const ctx = canvas.getContext('2d');
 
-  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+  ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+  ctx.fillRect(20, 15, 50, 50);
 
-  var circle = new Path2D();
-  circle.arc(90, 90, 45, 0, 2 * Math.PI);
-  ctx.fill(circle);
-
-  ctx.globalAlpha = 0.6;
+  ctx.globalAlpha = 0.75;
   ctx.globalCompositeOperation = 'source-in';
 
   ctx.beginLayer();
@@ -26,10 +23,10 @@ <h1>2d.layer.global-states.alpha.composite</h1>
   // 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(255, 0, 0, 1)';
+  ctx.fillRect(10, 25, 40, 50);
   ctx.fillStyle = 'rgba(0, 255, 0, 1)';
-  ctx.fillRect(70, 70, 75, 50);
+  ctx.fillRect(30, 5, 50, 40);
 
   ctx.endLayer();
 
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.alpha.composite.shadow-expected.html b/html/canvas/offscreen/layers/2d.layer.global-states.alpha.composite.shadow-expected.html
index 0ae93871f522e3..401d2bc9ea2d1b 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.alpha.composite.shadow-expected.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.alpha.composite.shadow-expected.html
@@ -3,34 +3,31 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <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)';
+  ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+  ctx.fillRect(20, 15, 50, 50);
 
-  var circle = new Path2D();
-  circle.arc(90, 90, 45, 0, 2 * Math.PI);
-  ctx.fill(circle);
-
-  ctx.globalAlpha = 0.6;
+  ctx.globalAlpha = 0.75;
   ctx.globalCompositeOperation = 'source-in';
-  ctx.shadowOffsetX = -10;
-  ctx.shadowOffsetY = 10;
+  ctx.shadowOffsetX = -7;
+  ctx.shadowOffsetY = 7;
   ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
   ctx.shadowBlur = 3;
 
-  canvas2 = document.createElement("canvas");
-  ctx2 = canvas2.getContext("2d");
+  const canvas2 = document.createElement("canvas");
+  const ctx2 = canvas2.getContext("2d");
 
   ctx2.globalCompositeOperation = 'screen';
-  ctx2.fillStyle = 'rgba(225, 0, 0, 1)';
-  ctx2.fillRect(50, 50, 75, 50);
+  ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+  ctx2.fillRect(10, 25, 40, 50);
   ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
-  ctx2.fillRect(70, 70, 75, 50);
+  ctx2.fillRect(30, 5, 50, 40);
 
   ctx.drawImage(canvas2, 0, 0);
 </script>
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.alpha.composite.shadow.html b/html/canvas/offscreen/layers/2d.layer.global-states.alpha.composite.shadow.html
index eb579cdcce72a5..1d5abf58e38545 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.alpha.composite.shadow.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.alpha.composite.shadow.html
@@ -4,23 +4,20 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <p class="fallback">FAIL (fallback content)</p>
 </canvas>
 <script>
-  const canvas = new OffscreenCanvas(200, 200);
+  const canvas = new OffscreenCanvas(90, 90);
   const ctx = canvas.getContext('2d');
 
-  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+  ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+  ctx.fillRect(20, 15, 50, 50);
 
-  var circle = new Path2D();
-  circle.arc(90, 90, 45, 0, 2 * Math.PI);
-  ctx.fill(circle);
-
-  ctx.globalAlpha = 0.6;
+  ctx.globalAlpha = 0.75;
   ctx.globalCompositeOperation = 'source-in';
-  ctx.shadowOffsetX = -10;
-  ctx.shadowOffsetY = 10;
+  ctx.shadowOffsetX = -7;
+  ctx.shadowOffsetY = 7;
   ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
   ctx.shadowBlur = 3;
 
@@ -30,10 +27,10 @@ <h1>2d.layer.global-states.alpha.composite.shadow</h1>
   // 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(255, 0, 0, 1)';
+  ctx.fillRect(10, 25, 40, 50);
   ctx.fillStyle = 'rgba(0, 255, 0, 1)';
-  ctx.fillRect(70, 70, 75, 50);
+  ctx.fillRect(30, 5, 50, 40);
 
   ctx.endLayer();
 
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.alpha.composite.shadow.w.html b/html/canvas/offscreen/layers/2d.layer.global-states.alpha.composite.shadow.w.html
index 60e36f4b9786c6..a8ec6a80a671b3 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.alpha.composite.shadow.w.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.alpha.composite.shadow.w.html
@@ -5,24 +5,21 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <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 canvas = new OffscreenCanvas(90, 90);
     const ctx = canvas.getContext('2d');
 
-    ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
 
-    var circle = new Path2D();
-    circle.arc(90, 90, 45, 0, 2 * Math.PI);
-    ctx.fill(circle);
-
-    ctx.globalAlpha = 0.6;
+    ctx.globalAlpha = 0.75;
     ctx.globalCompositeOperation = 'source-in';
-    ctx.shadowOffsetX = -10;
-    ctx.shadowOffsetY = 10;
+    ctx.shadowOffsetX = -7;
+    ctx.shadowOffsetY = 7;
     ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
     ctx.shadowBlur = 3;
 
@@ -32,10 +29,10 @@ <h1>2d.layer.global-states.alpha.composite.shadow</h1>
     // 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(255, 0, 0, 1)';
+    ctx.fillRect(10, 25, 40, 50);
     ctx.fillStyle = 'rgba(0, 255, 0, 1)';
-    ctx.fillRect(70, 70, 75, 50);
+    ctx.fillRect(30, 5, 50, 40);
 
     ctx.endLayer();
 
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.alpha.composite.w.html b/html/canvas/offscreen/layers/2d.layer.global-states.alpha.composite.w.html
index d7d2b7a21e2859..7e86de7d5874de 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.alpha.composite.w.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.alpha.composite.w.html
@@ -5,21 +5,18 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <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 canvas = new OffscreenCanvas(90, 90);
     const ctx = canvas.getContext('2d');
 
-    ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
 
-    var circle = new Path2D();
-    circle.arc(90, 90, 45, 0, 2 * Math.PI);
-    ctx.fill(circle);
-
-    ctx.globalAlpha = 0.6;
+    ctx.globalAlpha = 0.75;
     ctx.globalCompositeOperation = 'source-in';
 
     ctx.beginLayer();
@@ -28,10 +25,10 @@ <h1>2d.layer.global-states.alpha.composite</h1>
     // 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(255, 0, 0, 1)';
+    ctx.fillRect(10, 25, 40, 50);
     ctx.fillStyle = 'rgba(0, 255, 0, 1)';
-    ctx.fillRect(70, 70, 75, 50);
+    ctx.fillRect(30, 5, 50, 40);
 
     ctx.endLayer();
 
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.alpha.html b/html/canvas/offscreen/layers/2d.layer.global-states.alpha.html
index 63a264e6819fd6..16ba0ce87f4c48 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.alpha.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.alpha.html
@@ -4,20 +4,17 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <p class="fallback">FAIL (fallback content)</p>
 </canvas>
 <script>
-  const canvas = new OffscreenCanvas(200, 200);
+  const canvas = new OffscreenCanvas(90, 90);
   const ctx = canvas.getContext('2d');
 
-  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+  ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+  ctx.fillRect(20, 15, 50, 50);
 
-  var circle = new Path2D();
-  circle.arc(90, 90, 45, 0, 2 * Math.PI);
-  ctx.fill(circle);
-
-  ctx.globalAlpha = 0.6;
+  ctx.globalAlpha = 0.75;
 
   ctx.beginLayer();
 
@@ -25,10 +22,10 @@ <h1>2d.layer.global-states.alpha</h1>
   // 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(255, 0, 0, 1)';
+  ctx.fillRect(10, 25, 40, 50);
   ctx.fillStyle = 'rgba(0, 255, 0, 1)';
-  ctx.fillRect(70, 70, 75, 50);
+  ctx.fillRect(30, 5, 50, 40);
 
   ctx.endLayer();
 
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.alpha.shadow-expected.html b/html/canvas/offscreen/layers/2d.layer.global-states.alpha.shadow-expected.html
index 6f764c50017656..919583101ebb1c 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.alpha.shadow-expected.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.alpha.shadow-expected.html
@@ -3,33 +3,30 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <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)';
+  ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+  ctx.fillRect(20, 15, 50, 50);
 
-  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.globalAlpha = 0.75;
+  ctx.shadowOffsetX = -7;
+  ctx.shadowOffsetY = 7;
   ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
   ctx.shadowBlur = 3;
 
-  canvas2 = document.createElement("canvas");
-  ctx2 = canvas2.getContext("2d");
+  const canvas2 = document.createElement("canvas");
+  const ctx2 = canvas2.getContext("2d");
 
   ctx2.globalCompositeOperation = 'screen';
-  ctx2.fillStyle = 'rgba(225, 0, 0, 1)';
-  ctx2.fillRect(50, 50, 75, 50);
+  ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+  ctx2.fillRect(10, 25, 40, 50);
   ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
-  ctx2.fillRect(70, 70, 75, 50);
+  ctx2.fillRect(30, 5, 50, 40);
 
   ctx.drawImage(canvas2, 0, 0);
 </script>
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.alpha.shadow.html b/html/canvas/offscreen/layers/2d.layer.global-states.alpha.shadow.html
index 65a66c977d5d8a..c0f18c257c2b56 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.alpha.shadow.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.alpha.shadow.html
@@ -4,22 +4,19 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <p class="fallback">FAIL (fallback content)</p>
 </canvas>
 <script>
-  const canvas = new OffscreenCanvas(200, 200);
+  const canvas = new OffscreenCanvas(90, 90);
   const ctx = canvas.getContext('2d');
 
-  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+  ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+  ctx.fillRect(20, 15, 50, 50);
 
-  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.globalAlpha = 0.75;
+  ctx.shadowOffsetX = -7;
+  ctx.shadowOffsetY = 7;
   ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
   ctx.shadowBlur = 3;
 
@@ -29,10 +26,10 @@ <h1>2d.layer.global-states.alpha.shadow</h1>
   // 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(255, 0, 0, 1)';
+  ctx.fillRect(10, 25, 40, 50);
   ctx.fillStyle = 'rgba(0, 255, 0, 1)';
-  ctx.fillRect(70, 70, 75, 50);
+  ctx.fillRect(30, 5, 50, 40);
 
   ctx.endLayer();
 
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.alpha.shadow.w.html b/html/canvas/offscreen/layers/2d.layer.global-states.alpha.shadow.w.html
index f404601e3d1539..8aeeaaaf0ecf23 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.alpha.shadow.w.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.alpha.shadow.w.html
@@ -5,23 +5,20 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <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 canvas = new OffscreenCanvas(90, 90);
     const ctx = canvas.getContext('2d');
 
-    ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
 
-    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.globalAlpha = 0.75;
+    ctx.shadowOffsetX = -7;
+    ctx.shadowOffsetY = 7;
     ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
     ctx.shadowBlur = 3;
 
@@ -31,10 +28,10 @@ <h1>2d.layer.global-states.alpha.shadow</h1>
     // 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(255, 0, 0, 1)';
+    ctx.fillRect(10, 25, 40, 50);
     ctx.fillStyle = 'rgba(0, 255, 0, 1)';
-    ctx.fillRect(70, 70, 75, 50);
+    ctx.fillRect(30, 5, 50, 40);
 
     ctx.endLayer();
 
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.alpha.w.html b/html/canvas/offscreen/layers/2d.layer.global-states.alpha.w.html
index 694f31e208b327..179aaa8c608a1c 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.alpha.w.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.alpha.w.html
@@ -5,21 +5,18 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <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 canvas = new OffscreenCanvas(90, 90);
     const ctx = canvas.getContext('2d');
 
-    ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
 
-    var circle = new Path2D();
-    circle.arc(90, 90, 45, 0, 2 * Math.PI);
-    ctx.fill(circle);
-
-    ctx.globalAlpha = 0.6;
+    ctx.globalAlpha = 0.75;
 
     ctx.beginLayer();
 
@@ -27,10 +24,10 @@ <h1>2d.layer.global-states.alpha</h1>
     // 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(255, 0, 0, 1)';
+    ctx.fillRect(10, 25, 40, 50);
     ctx.fillStyle = 'rgba(0, 255, 0, 1)';
-    ctx.fillRect(70, 70, 75, 50);
+    ctx.fillRect(30, 5, 50, 40);
 
     ctx.endLayer();
 
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.blending-expected.html b/html/canvas/offscreen/layers/2d.layer.global-states.blending-expected.html
index 33fdf46a28711a..fd7d4da7bc0a29 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.blending-expected.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.blending-expected.html
@@ -3,29 +3,26 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <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.fillStyle = 'rgba(128, 128, 128, 1)';
+  ctx.fillRect(20, 15, 50, 50);
 
   ctx.globalCompositeOperation = 'multiply';
 
-  canvas2 = document.createElement("canvas");
-  ctx2 = canvas2.getContext("2d");
+  const canvas2 = document.createElement("canvas");
+  const ctx2 = canvas2.getContext("2d");
 
   ctx2.globalCompositeOperation = 'screen';
-  ctx2.fillStyle = 'rgba(225, 0, 0, 1)';
-  ctx2.fillRect(50, 50, 75, 50);
+  ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+  ctx2.fillRect(10, 25, 40, 50);
   ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
-  ctx2.fillRect(70, 70, 75, 50);
+  ctx2.fillRect(30, 5, 50, 40);
 
   ctx.drawImage(canvas2, 0, 0);
 </script>
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.blending.html b/html/canvas/offscreen/layers/2d.layer.global-states.blending.html
index 6a36bb4ba101ce..05b9e6d4044be6 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.blending.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.blending.html
@@ -4,18 +4,15 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <p class="fallback">FAIL (fallback content)</p>
 </canvas>
 <script>
-  const canvas = new OffscreenCanvas(200, 200);
+  const canvas = new OffscreenCanvas(90, 90);
   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.fillStyle = 'rgba(128, 128, 128, 1)';
+  ctx.fillRect(20, 15, 50, 50);
 
   ctx.globalCompositeOperation = 'multiply';
 
@@ -25,10 +22,10 @@ <h1>2d.layer.global-states.blending</h1>
   // 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(255, 0, 0, 1)';
+  ctx.fillRect(10, 25, 40, 50);
   ctx.fillStyle = 'rgba(0, 255, 0, 1)';
-  ctx.fillRect(70, 70, 75, 50);
+  ctx.fillRect(30, 5, 50, 40);
 
   ctx.endLayer();
 
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow-expected.html b/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow-expected.html
index 6f969074f93c49..a6085ed2ab1060 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow-expected.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow-expected.html
@@ -3,33 +3,30 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <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.fillStyle = 'rgba(128, 128, 128, 1)';
+  ctx.fillRect(20, 15, 50, 50);
 
   ctx.globalCompositeOperation = 'multiply';
-  ctx.shadowOffsetX = -10;
-  ctx.shadowOffsetY = 10;
+  ctx.shadowOffsetX = -7;
+  ctx.shadowOffsetY = 7;
   ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
   ctx.shadowBlur = 3;
 
-  canvas2 = document.createElement("canvas");
-  ctx2 = canvas2.getContext("2d");
+  const canvas2 = document.createElement("canvas");
+  const ctx2 = canvas2.getContext("2d");
 
   ctx2.globalCompositeOperation = 'screen';
-  ctx2.fillStyle = 'rgba(225, 0, 0, 1)';
-  ctx2.fillRect(50, 50, 75, 50);
+  ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+  ctx2.fillRect(10, 25, 40, 50);
   ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
-  ctx2.fillRect(70, 70, 75, 50);
+  ctx2.fillRect(30, 5, 50, 40);
 
   ctx.drawImage(canvas2, 0, 0);
 </script>
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.html b/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.html
index 2e91f3d2d108c7..9766d3a29d50a9 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.html
@@ -4,22 +4,19 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <p class="fallback">FAIL (fallback content)</p>
 </canvas>
 <script>
-  const canvas = new OffscreenCanvas(200, 200);
+  const canvas = new OffscreenCanvas(90, 90);
   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.fillStyle = 'rgba(128, 128, 128, 1)';
+  ctx.fillRect(20, 15, 50, 50);
 
   ctx.globalCompositeOperation = 'multiply';
-  ctx.shadowOffsetX = -10;
-  ctx.shadowOffsetY = 10;
+  ctx.shadowOffsetX = -7;
+  ctx.shadowOffsetY = 7;
   ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
   ctx.shadowBlur = 3;
 
@@ -29,10 +26,10 @@ <h1>2d.layer.global-states.blending.shadow</h1>
   // 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(255, 0, 0, 1)';
+  ctx.fillRect(10, 25, 40, 50);
   ctx.fillStyle = 'rgba(0, 255, 0, 1)';
-  ctx.fillRect(70, 70, 75, 50);
+  ctx.fillRect(30, 5, 50, 40);
 
   ctx.endLayer();
 
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.w.html b/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.w.html
index d8e20d0479542b..4bb5dff46855bf 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.w.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.blending.shadow.w.html
@@ -5,23 +5,20 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <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 canvas = new OffscreenCanvas(90, 90);
     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.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
 
     ctx.globalCompositeOperation = 'multiply';
-    ctx.shadowOffsetX = -10;
-    ctx.shadowOffsetY = 10;
+    ctx.shadowOffsetX = -7;
+    ctx.shadowOffsetY = 7;
     ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
     ctx.shadowBlur = 3;
 
@@ -31,10 +28,10 @@ <h1>2d.layer.global-states.blending.shadow</h1>
     // 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(255, 0, 0, 1)';
+    ctx.fillRect(10, 25, 40, 50);
     ctx.fillStyle = 'rgba(0, 255, 0, 1)';
-    ctx.fillRect(70, 70, 75, 50);
+    ctx.fillRect(30, 5, 50, 40);
 
     ctx.endLayer();
 
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.blending.w.html b/html/canvas/offscreen/layers/2d.layer.global-states.blending.w.html
index 8964e97713cd9e..b19d0760d3fc04 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.blending.w.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.blending.w.html
@@ -5,19 +5,16 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <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 canvas = new OffscreenCanvas(90, 90);
     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.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
 
     ctx.globalCompositeOperation = 'multiply';
 
@@ -27,10 +24,10 @@ <h1>2d.layer.global-states.blending</h1>
     // 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(255, 0, 0, 1)';
+    ctx.fillRect(10, 25, 40, 50);
     ctx.fillStyle = 'rgba(0, 255, 0, 1)';
-    ctx.fillRect(70, 70, 75, 50);
+    ctx.fillRect(30, 5, 50, 40);
 
     ctx.endLayer();
 
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.composite-expected.html b/html/canvas/offscreen/layers/2d.layer.global-states.composite-expected.html
index ed7669c4cfabd1..673c8711f04a9f 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.composite-expected.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.composite-expected.html
@@ -3,29 +3,26 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <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.fillStyle = 'rgba(128, 128, 128, 1)';
+  ctx.fillRect(20, 15, 50, 50);
 
   ctx.globalCompositeOperation = 'source-in';
 
-  canvas2 = document.createElement("canvas");
-  ctx2 = canvas2.getContext("2d");
+  const canvas2 = document.createElement("canvas");
+  const ctx2 = canvas2.getContext("2d");
 
   ctx2.globalCompositeOperation = 'screen';
-  ctx2.fillStyle = 'rgba(225, 0, 0, 1)';
-  ctx2.fillRect(50, 50, 75, 50);
+  ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+  ctx2.fillRect(10, 25, 40, 50);
   ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
-  ctx2.fillRect(70, 70, 75, 50);
+  ctx2.fillRect(30, 5, 50, 40);
 
   ctx.drawImage(canvas2, 0, 0);
 </script>
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.composite.html b/html/canvas/offscreen/layers/2d.layer.global-states.composite.html
index 84fb4b3d95a199..08c22245dc3cbe 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.composite.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.composite.html
@@ -4,18 +4,15 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <p class="fallback">FAIL (fallback content)</p>
 </canvas>
 <script>
-  const canvas = new OffscreenCanvas(200, 200);
+  const canvas = new OffscreenCanvas(90, 90);
   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.fillStyle = 'rgba(128, 128, 128, 1)';
+  ctx.fillRect(20, 15, 50, 50);
 
   ctx.globalCompositeOperation = 'source-in';
 
@@ -25,10 +22,10 @@ <h1>2d.layer.global-states.composite</h1>
   // 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(255, 0, 0, 1)';
+  ctx.fillRect(10, 25, 40, 50);
   ctx.fillStyle = 'rgba(0, 255, 0, 1)';
-  ctx.fillRect(70, 70, 75, 50);
+  ctx.fillRect(30, 5, 50, 40);
 
   ctx.endLayer();
 
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow-expected.html b/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow-expected.html
index b687c27f4715dd..f050ae89e10881 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow-expected.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow-expected.html
@@ -3,33 +3,30 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <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.fillStyle = 'rgba(128, 128, 128, 1)';
+  ctx.fillRect(20, 15, 50, 50);
 
   ctx.globalCompositeOperation = 'source-in';
-  ctx.shadowOffsetX = -10;
-  ctx.shadowOffsetY = 10;
+  ctx.shadowOffsetX = -7;
+  ctx.shadowOffsetY = 7;
   ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
   ctx.shadowBlur = 3;
 
-  canvas2 = document.createElement("canvas");
-  ctx2 = canvas2.getContext("2d");
+  const canvas2 = document.createElement("canvas");
+  const ctx2 = canvas2.getContext("2d");
 
   ctx2.globalCompositeOperation = 'screen';
-  ctx2.fillStyle = 'rgba(225, 0, 0, 1)';
-  ctx2.fillRect(50, 50, 75, 50);
+  ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+  ctx2.fillRect(10, 25, 40, 50);
   ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
-  ctx2.fillRect(70, 70, 75, 50);
+  ctx2.fillRect(30, 5, 50, 40);
 
   ctx.drawImage(canvas2, 0, 0);
 </script>
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.html b/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.html
index 1e3ab4d6a0764b..160b8bdc8cc0af 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.html
@@ -4,22 +4,19 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <p class="fallback">FAIL (fallback content)</p>
 </canvas>
 <script>
-  const canvas = new OffscreenCanvas(200, 200);
+  const canvas = new OffscreenCanvas(90, 90);
   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.fillStyle = 'rgba(128, 128, 128, 1)';
+  ctx.fillRect(20, 15, 50, 50);
 
   ctx.globalCompositeOperation = 'source-in';
-  ctx.shadowOffsetX = -10;
-  ctx.shadowOffsetY = 10;
+  ctx.shadowOffsetX = -7;
+  ctx.shadowOffsetY = 7;
   ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
   ctx.shadowBlur = 3;
 
@@ -29,10 +26,10 @@ <h1>2d.layer.global-states.composite.shadow</h1>
   // 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(255, 0, 0, 1)';
+  ctx.fillRect(10, 25, 40, 50);
   ctx.fillStyle = 'rgba(0, 255, 0, 1)';
-  ctx.fillRect(70, 70, 75, 50);
+  ctx.fillRect(30, 5, 50, 40);
 
   ctx.endLayer();
 
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.w.html b/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.w.html
index 7dfb70148b56fd..2f35e26e9eef9a 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.w.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.composite.shadow.w.html
@@ -5,23 +5,20 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <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 canvas = new OffscreenCanvas(90, 90);
     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.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
 
     ctx.globalCompositeOperation = 'source-in';
-    ctx.shadowOffsetX = -10;
-    ctx.shadowOffsetY = 10;
+    ctx.shadowOffsetX = -7;
+    ctx.shadowOffsetY = 7;
     ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
     ctx.shadowBlur = 3;
 
@@ -31,10 +28,10 @@ <h1>2d.layer.global-states.composite.shadow</h1>
     // 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(255, 0, 0, 1)';
+    ctx.fillRect(10, 25, 40, 50);
     ctx.fillStyle = 'rgba(0, 255, 0, 1)';
-    ctx.fillRect(70, 70, 75, 50);
+    ctx.fillRect(30, 5, 50, 40);
 
     ctx.endLayer();
 
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.composite.w.html b/html/canvas/offscreen/layers/2d.layer.global-states.composite.w.html
index b695871fcdcfc5..9e21a3cf8d6898 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.composite.w.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.composite.w.html
@@ -5,19 +5,16 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <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 canvas = new OffscreenCanvas(90, 90);
     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.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
 
     ctx.globalCompositeOperation = 'source-in';
 
@@ -27,10 +24,10 @@ <h1>2d.layer.global-states.composite</h1>
     // 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(255, 0, 0, 1)';
+    ctx.fillRect(10, 25, 40, 50);
     ctx.fillStyle = 'rgba(0, 255, 0, 1)';
-    ctx.fillRect(70, 70, 75, 50);
+    ctx.fillRect(30, 5, 50, 40);
 
     ctx.endLayer();
 
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha-expected.html b/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha-expected.html
index f304700feb32ca..e50b3f69104ab5 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha-expected.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha-expected.html
@@ -3,7 +3,7 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <p class="fallback">FAIL (fallback content)</p>
 </canvas>
 <script>
@@ -12,37 +12,28 @@ <h1>2d.layer.global-states.filter.alpha</h1>
 
   const svg = `
     <svg xmlns="http://www.w3.org/2000/svg"
-          width="200" height="200"
+          width="90" height="90"
           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" />
+        <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
         <feComponentTransfer>
-          <feFuncA type="table" tableValues="0 0.7"></feFuncA>
+          <feFuncA type="table" tableValues="0 0.8"></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)"/>
+        <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 = 200;
-  img.height = 200;
+  img.width = 90;
+  img.height = 90;
   img.onload = () => {
-    ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
 
-    var circle = new Path2D();
-    circle.arc(90, 90, 45, 0, 2 * Math.PI);
-    ctx.fill(circle);
-
-    ctx.globalAlpha = 0.6;
+    ctx.globalAlpha = 0.75;
 
     ctx.drawImage(img, 0, 0);
   };
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.blending-expected.html b/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.blending-expected.html
index 7c91ce42293771..a1c41ba7a03417 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.blending-expected.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.blending-expected.html
@@ -3,7 +3,7 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <p class="fallback">FAIL (fallback content)</p>
 </canvas>
 <script>
@@ -12,37 +12,28 @@ <h1>2d.layer.global-states.filter.alpha.blending</h1>
 
   const svg = `
     <svg xmlns="http://www.w3.org/2000/svg"
-          width="200" height="200"
+          width="90" height="90"
           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" />
+        <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
         <feComponentTransfer>
-          <feFuncA type="table" tableValues="0 0.7"></feFuncA>
+          <feFuncA type="table" tableValues="0 0.8"></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)"/>
+        <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 = 200;
-  img.height = 200;
+  img.width = 90;
+  img.height = 90;
   img.onload = () => {
-    ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
 
-    var circle = new Path2D();
-    circle.arc(90, 90, 45, 0, 2 * Math.PI);
-    ctx.fill(circle);
-
-    ctx.globalAlpha = 0.6;
+    ctx.globalAlpha = 0.75;
   ctx.globalCompositeOperation = 'multiply';
 
     ctx.drawImage(img, 0, 0);
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.blending.html b/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.blending.html
index 0e48cb49f79526..f9d6be22e095f2 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.blending.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.blending.html
@@ -1,39 +1,32 @@
 <!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">
+<canvas id="canvas" width="90" height="90">
   <p class="fallback">FAIL (fallback content)</p>
 </canvas>
 <script>
-  const canvas = new OffscreenCanvas(200, 200);
+  const canvas = new OffscreenCanvas(90, 90);
   const ctx = canvas.getContext('2d');
 
-  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+  ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+  ctx.fillRect(20, 15, 50, 50);
 
-  var circle = new Path2D();
-  circle.arc(90, 90, 45, 0, 2 * Math.PI);
-  ctx.fill(circle);
-
-  ctx.globalAlpha = 0.6;
+  ctx.globalAlpha = 0.75;
   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: 'dropShadow',
+          dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
       {name: 'componentTransfer',
-          funcA: {type: "table", tableValues: [0, 0.7]}},
-      {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]});
+          funcA: {type: "table", tableValues: [0, 0.8]}}]});
 
-  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.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();
 
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.blending.shadow-expected.html b/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.blending.shadow-expected.html
index 62942ffeaecb91..1e78e2ceb9e34d 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.blending.shadow-expected.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.blending.shadow-expected.html
@@ -3,7 +3,7 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <p class="fallback">FAIL (fallback content)</p>
 </canvas>
 <script>
@@ -12,40 +12,31 @@ <h1>2d.layer.global-states.filter.alpha.blending.shadow</h1>
 
   const svg = `
     <svg xmlns="http://www.w3.org/2000/svg"
-          width="200" height="200"
+          width="90" height="90"
           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" />
+        <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
         <feComponentTransfer>
-          <feFuncA type="table" tableValues="0 0.7"></feFuncA>
+          <feFuncA type="table" tableValues="0 0.8"></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)"/>
+        <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 = 200;
-  img.height = 200;
+  img.width = 90;
+  img.height = 90;
   img.onload = () => {
-    ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
 
-    var circle = new Path2D();
-    circle.arc(90, 90, 45, 0, 2 * Math.PI);
-    ctx.fill(circle);
-
-    ctx.globalAlpha = 0.6;
+    ctx.globalAlpha = 0.75;
   ctx.globalCompositeOperation = 'multiply';
-  ctx.shadowOffsetX = -10;
-  ctx.shadowOffsetY = 10;
+  ctx.shadowOffsetX = -7;
+  ctx.shadowOffsetY = 7;
   ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
   ctx.shadowBlur = 3;
 
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.blending.shadow.html b/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.blending.shadow.html
index 62d98d967c83a2..71eb84bf840384 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.blending.shadow.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.blending.shadow.html
@@ -4,39 +4,33 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <p class="fallback">FAIL (fallback content)</p>
 </canvas>
 <script>
-  const canvas = new OffscreenCanvas(200, 200);
+  const canvas = new OffscreenCanvas(90, 90);
   const ctx = canvas.getContext('2d');
 
-  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+  ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+  ctx.fillRect(20, 15, 50, 50);
 
-  var circle = new Path2D();
-  circle.arc(90, 90, 45, 0, 2 * Math.PI);
-  ctx.fill(circle);
-
-  ctx.globalAlpha = 0.6;
+  ctx.globalAlpha = 0.75;
   ctx.globalCompositeOperation = 'multiply';
-  ctx.shadowOffsetX = -10;
-  ctx.shadowOffsetY = 10;
+  ctx.shadowOffsetX = -7;
+  ctx.shadowOffsetY = 7;
   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: 'dropShadow',
+          dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
       {name: 'componentTransfer',
-          funcA: {type: "table", tableValues: [0, 0.7]}},
-      {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]});
+          funcA: {type: "table", tableValues: [0, 0.8]}}]});
 
-  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.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();
 
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.blending.shadow.w.html b/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.blending.shadow.w.html
index e81efd6b8de3ee..d71e6d66e42946 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.blending.shadow.w.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.blending.shadow.w.html
@@ -5,40 +5,34 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <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 canvas = new OffscreenCanvas(90, 90);
     const ctx = canvas.getContext('2d');
 
-    ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
 
-    var circle = new Path2D();
-    circle.arc(90, 90, 45, 0, 2 * Math.PI);
-    ctx.fill(circle);
-
-    ctx.globalAlpha = 0.6;
+    ctx.globalAlpha = 0.75;
     ctx.globalCompositeOperation = 'multiply';
-    ctx.shadowOffsetX = -10;
-    ctx.shadowOffsetY = 10;
+    ctx.shadowOffsetX = -7;
+    ctx.shadowOffsetY = 7;
     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: 'dropShadow',
+            dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
         {name: 'componentTransfer',
-            funcA: {type: "table", tableValues: [0, 0.7]}},
-        {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]});
+            funcA: {type: "table", tableValues: [0, 0.8]}}]});
 
-    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.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();
 
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.blending.w.html b/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.blending.w.html
index 3887ed4485bdc2..a21804258d153a 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.blending.w.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.blending.w.html
@@ -2,40 +2,33 @@
 <!-- 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">
+<canvas id="canvas" width="90" height="90">
   <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 canvas = new OffscreenCanvas(90, 90);
     const ctx = canvas.getContext('2d');
 
-    ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
 
-    var circle = new Path2D();
-    circle.arc(90, 90, 45, 0, 2 * Math.PI);
-    ctx.fill(circle);
-
-    ctx.globalAlpha = 0.6;
+    ctx.globalAlpha = 0.75;
     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: 'dropShadow',
+            dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
         {name: 'componentTransfer',
-            funcA: {type: "table", tableValues: [0, 0.7]}},
-        {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]});
+            funcA: {type: "table", tableValues: [0, 0.8]}}]});
 
-    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.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();
 
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.composite-expected.html b/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.composite-expected.html
index 8e0d98648ea721..2487ef1a45eaae 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.composite-expected.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.composite-expected.html
@@ -3,7 +3,7 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <p class="fallback">FAIL (fallback content)</p>
 </canvas>
 <script>
@@ -12,37 +12,28 @@ <h1>2d.layer.global-states.filter.alpha.composite</h1>
 
   const svg = `
     <svg xmlns="http://www.w3.org/2000/svg"
-          width="200" height="200"
+          width="90" height="90"
           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" />
+        <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
         <feComponentTransfer>
-          <feFuncA type="table" tableValues="0 0.7"></feFuncA>
+          <feFuncA type="table" tableValues="0 0.8"></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)"/>
+        <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 = 200;
-  img.height = 200;
+  img.width = 90;
+  img.height = 90;
   img.onload = () => {
-    ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
 
-    var circle = new Path2D();
-    circle.arc(90, 90, 45, 0, 2 * Math.PI);
-    ctx.fill(circle);
-
-    ctx.globalAlpha = 0.6;
+    ctx.globalAlpha = 0.75;
   ctx.globalCompositeOperation = 'source-in';
 
     ctx.drawImage(img, 0, 0);
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.composite.html b/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.composite.html
index 1a9bc8b73349d8..01755ff90e9371 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.composite.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.composite.html
@@ -1,39 +1,32 @@
 <!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">
+<canvas id="canvas" width="90" height="90">
   <p class="fallback">FAIL (fallback content)</p>
 </canvas>
 <script>
-  const canvas = new OffscreenCanvas(200, 200);
+  const canvas = new OffscreenCanvas(90, 90);
   const ctx = canvas.getContext('2d');
 
-  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+  ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+  ctx.fillRect(20, 15, 50, 50);
 
-  var circle = new Path2D();
-  circle.arc(90, 90, 45, 0, 2 * Math.PI);
-  ctx.fill(circle);
-
-  ctx.globalAlpha = 0.6;
+  ctx.globalAlpha = 0.75;
   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: 'dropShadow',
+          dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
       {name: 'componentTransfer',
-          funcA: {type: "table", tableValues: [0, 0.7]}},
-      {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]});
+          funcA: {type: "table", tableValues: [0, 0.8]}}]});
 
-  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.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();
 
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.composite.shadow-expected.html b/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.composite.shadow-expected.html
index a64997254626c6..09ef99977adde3 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.composite.shadow-expected.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.composite.shadow-expected.html
@@ -3,7 +3,7 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <p class="fallback">FAIL (fallback content)</p>
 </canvas>
 <script>
@@ -12,40 +12,31 @@ <h1>2d.layer.global-states.filter.alpha.composite.shadow</h1>
 
   const svg = `
     <svg xmlns="http://www.w3.org/2000/svg"
-          width="200" height="200"
+          width="90" height="90"
           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" />
+        <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
         <feComponentTransfer>
-          <feFuncA type="table" tableValues="0 0.7"></feFuncA>
+          <feFuncA type="table" tableValues="0 0.8"></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)"/>
+        <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 = 200;
-  img.height = 200;
+  img.width = 90;
+  img.height = 90;
   img.onload = () => {
-    ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
 
-    var circle = new Path2D();
-    circle.arc(90, 90, 45, 0, 2 * Math.PI);
-    ctx.fill(circle);
-
-    ctx.globalAlpha = 0.6;
+    ctx.globalAlpha = 0.75;
   ctx.globalCompositeOperation = 'source-in';
-  ctx.shadowOffsetX = -10;
-  ctx.shadowOffsetY = 10;
+  ctx.shadowOffsetX = -7;
+  ctx.shadowOffsetY = 7;
   ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
   ctx.shadowBlur = 3;
 
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.composite.shadow.html b/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.composite.shadow.html
index d067ff2f5e4cae..841d090bd34967 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.composite.shadow.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.composite.shadow.html
@@ -4,39 +4,33 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <p class="fallback">FAIL (fallback content)</p>
 </canvas>
 <script>
-  const canvas = new OffscreenCanvas(200, 200);
+  const canvas = new OffscreenCanvas(90, 90);
   const ctx = canvas.getContext('2d');
 
-  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+  ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+  ctx.fillRect(20, 15, 50, 50);
 
-  var circle = new Path2D();
-  circle.arc(90, 90, 45, 0, 2 * Math.PI);
-  ctx.fill(circle);
-
-  ctx.globalAlpha = 0.6;
+  ctx.globalAlpha = 0.75;
   ctx.globalCompositeOperation = 'source-in';
-  ctx.shadowOffsetX = -10;
-  ctx.shadowOffsetY = 10;
+  ctx.shadowOffsetX = -7;
+  ctx.shadowOffsetY = 7;
   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: 'dropShadow',
+          dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
       {name: 'componentTransfer',
-          funcA: {type: "table", tableValues: [0, 0.7]}},
-      {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]});
+          funcA: {type: "table", tableValues: [0, 0.8]}}]});
 
-  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.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();
 
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.composite.shadow.w.html b/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.composite.shadow.w.html
index 39abc78b17de4e..7b85361a0246e3 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.composite.shadow.w.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.composite.shadow.w.html
@@ -5,40 +5,34 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <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 canvas = new OffscreenCanvas(90, 90);
     const ctx = canvas.getContext('2d');
 
-    ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
 
-    var circle = new Path2D();
-    circle.arc(90, 90, 45, 0, 2 * Math.PI);
-    ctx.fill(circle);
-
-    ctx.globalAlpha = 0.6;
+    ctx.globalAlpha = 0.75;
     ctx.globalCompositeOperation = 'source-in';
-    ctx.shadowOffsetX = -10;
-    ctx.shadowOffsetY = 10;
+    ctx.shadowOffsetX = -7;
+    ctx.shadowOffsetY = 7;
     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: 'dropShadow',
+            dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
         {name: 'componentTransfer',
-            funcA: {type: "table", tableValues: [0, 0.7]}},
-        {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]});
+            funcA: {type: "table", tableValues: [0, 0.8]}}]});
 
-    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.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();
 
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.composite.w.html b/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.composite.w.html
index 5c90fe95aa7be0..6bc263016916e4 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.composite.w.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.composite.w.html
@@ -2,40 +2,33 @@
 <!-- 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">
+<canvas id="canvas" width="90" height="90">
   <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 canvas = new OffscreenCanvas(90, 90);
     const ctx = canvas.getContext('2d');
 
-    ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
 
-    var circle = new Path2D();
-    circle.arc(90, 90, 45, 0, 2 * Math.PI);
-    ctx.fill(circle);
-
-    ctx.globalAlpha = 0.6;
+    ctx.globalAlpha = 0.75;
     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: 'dropShadow',
+            dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
         {name: 'componentTransfer',
-            funcA: {type: "table", tableValues: [0, 0.7]}},
-        {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]});
+            funcA: {type: "table", tableValues: [0, 0.8]}}]});
 
-    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.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();
 
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.html b/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.html
index f64e8925f0c4c3..204acbc2d93ee5 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.html
@@ -1,38 +1,31 @@
 <!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">
+<canvas id="canvas" width="90" height="90">
   <p class="fallback">FAIL (fallback content)</p>
 </canvas>
 <script>
-  const canvas = new OffscreenCanvas(200, 200);
+  const canvas = new OffscreenCanvas(90, 90);
   const ctx = canvas.getContext('2d');
 
-  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+  ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+  ctx.fillRect(20, 15, 50, 50);
 
-  var circle = new Path2D();
-  circle.arc(90, 90, 45, 0, 2 * Math.PI);
-  ctx.fill(circle);
-
-  ctx.globalAlpha = 0.6;
+  ctx.globalAlpha = 0.75;
 
   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: 'dropShadow',
+          dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
       {name: 'componentTransfer',
-          funcA: {type: "table", tableValues: [0, 0.7]}},
-      {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]});
+          funcA: {type: "table", tableValues: [0, 0.8]}}]});
 
-  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.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();
 
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.shadow-expected.html b/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.shadow-expected.html
index 169baee29b986f..e46e8a4dd270d1 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.shadow-expected.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.shadow-expected.html
@@ -3,7 +3,7 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <p class="fallback">FAIL (fallback content)</p>
 </canvas>
 <script>
@@ -12,39 +12,30 @@ <h1>2d.layer.global-states.filter.alpha.shadow</h1>
 
   const svg = `
     <svg xmlns="http://www.w3.org/2000/svg"
-          width="200" height="200"
+          width="90" height="90"
           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" />
+        <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
         <feComponentTransfer>
-          <feFuncA type="table" tableValues="0 0.7"></feFuncA>
+          <feFuncA type="table" tableValues="0 0.8"></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)"/>
+        <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 = 200;
-  img.height = 200;
+  img.width = 90;
+  img.height = 90;
   img.onload = () => {
-    ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
 
-    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.globalAlpha = 0.75;
+  ctx.shadowOffsetX = -7;
+  ctx.shadowOffsetY = 7;
   ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
   ctx.shadowBlur = 3;
 
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.shadow.html b/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.shadow.html
index 5e8911ee176e36..58c2f4d3ad51d3 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.shadow.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.shadow.html
@@ -1,42 +1,35 @@
 <!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">
+<canvas id="canvas" width="90" height="90">
   <p class="fallback">FAIL (fallback content)</p>
 </canvas>
 <script>
-  const canvas = new OffscreenCanvas(200, 200);
+  const canvas = new OffscreenCanvas(90, 90);
   const ctx = canvas.getContext('2d');
 
-  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+  ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+  ctx.fillRect(20, 15, 50, 50);
 
-  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.globalAlpha = 0.75;
+  ctx.shadowOffsetX = -7;
+  ctx.shadowOffsetY = 7;
   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: 'dropShadow',
+          dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
       {name: 'componentTransfer',
-          funcA: {type: "table", tableValues: [0, 0.7]}},
-      {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]});
+          funcA: {type: "table", tableValues: [0, 0.8]}}]});
 
-  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.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();
 
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.shadow.w.html b/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.shadow.w.html
index b3be7e1ac80f29..430f42daff5568 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.shadow.w.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.shadow.w.html
@@ -2,43 +2,36 @@
 <!-- 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">
+<canvas id="canvas" width="90" height="90">
   <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 canvas = new OffscreenCanvas(90, 90);
     const ctx = canvas.getContext('2d');
 
-    ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
 
-    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.globalAlpha = 0.75;
+    ctx.shadowOffsetX = -7;
+    ctx.shadowOffsetY = 7;
     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: 'dropShadow',
+            dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
         {name: 'componentTransfer',
-            funcA: {type: "table", tableValues: [0, 0.7]}},
-        {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]});
+            funcA: {type: "table", tableValues: [0, 0.8]}}]});
 
-    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.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();
 
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.w.html b/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.w.html
index 21e55f856c78c0..638a129947384b 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.w.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.filter.alpha.w.html
@@ -2,39 +2,32 @@
 <!-- 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">
+<canvas id="canvas" width="90" height="90">
   <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 canvas = new OffscreenCanvas(90, 90);
     const ctx = canvas.getContext('2d');
 
-    ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
 
-    var circle = new Path2D();
-    circle.arc(90, 90, 45, 0, 2 * Math.PI);
-    ctx.fill(circle);
-
-    ctx.globalAlpha = 0.6;
+    ctx.globalAlpha = 0.75;
 
     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: 'dropShadow',
+            dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
         {name: 'componentTransfer',
-            funcA: {type: "table", tableValues: [0, 0.7]}},
-        {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]});
+            funcA: {type: "table", tableValues: [0, 0.8]}}]});
 
-    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.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();
 
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending-expected.html b/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending-expected.html
index f81dcf72dc2e2d..a109712242be52 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending-expected.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending-expected.html
@@ -3,7 +3,7 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <p class="fallback">FAIL (fallback content)</p>
 </canvas>
 <script>
@@ -12,35 +12,26 @@ <h1>2d.layer.global-states.filter.blending</h1>
 
   const svg = `
     <svg xmlns="http://www.w3.org/2000/svg"
-          width="200" height="200"
+          width="90" height="90"
           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" />
+        <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
         <feComponentTransfer>
-          <feFuncA type="table" tableValues="0 0.7"></feFuncA>
+          <feFuncA type="table" tableValues="0 0.8"></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)"/>
+        <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 = 200;
-  img.height = 200;
+  img.width = 90;
+  img.height = 90;
   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.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
 
     ctx.globalCompositeOperation = 'multiply';
 
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.html b/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.html
index ce2b04679847a2..8ce0f60133c77b 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.html
@@ -4,34 +4,28 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <p class="fallback">FAIL (fallback content)</p>
 </canvas>
 <script>
-  const canvas = new OffscreenCanvas(200, 200);
+  const canvas = new OffscreenCanvas(90, 90);
   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.fillStyle = 'rgba(128, 128, 128, 1)';
+  ctx.fillRect(20, 15, 50, 50);
 
   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: 'dropShadow',
+          dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
       {name: 'componentTransfer',
-          funcA: {type: "table", tableValues: [0, 0.7]}},
-      {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]});
+          funcA: {type: "table", tableValues: [0, 0.8]}}]});
 
-  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.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();
 
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow-expected.html b/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow-expected.html
index 91f3725f8ec011..8c31f04db7d31d 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow-expected.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow-expected.html
@@ -3,7 +3,7 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <p class="fallback">FAIL (fallback content)</p>
 </canvas>
 <script>
@@ -12,39 +12,30 @@ <h1>2d.layer.global-states.filter.blending.shadow</h1>
 
   const svg = `
     <svg xmlns="http://www.w3.org/2000/svg"
-          width="200" height="200"
+          width="90" height="90"
           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" />
+        <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
         <feComponentTransfer>
-          <feFuncA type="table" tableValues="0 0.7"></feFuncA>
+          <feFuncA type="table" tableValues="0 0.8"></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)"/>
+        <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 = 200;
-  img.height = 200;
+  img.width = 90;
+  img.height = 90;
   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.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
 
     ctx.globalCompositeOperation = 'multiply';
-  ctx.shadowOffsetX = -10;
-  ctx.shadowOffsetY = 10;
+  ctx.shadowOffsetX = -7;
+  ctx.shadowOffsetY = 7;
   ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
   ctx.shadowBlur = 3;
 
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.html b/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.html
index d0d429bee333ef..d53c112d95791d 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.html
@@ -4,38 +4,32 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <p class="fallback">FAIL (fallback content)</p>
 </canvas>
 <script>
-  const canvas = new OffscreenCanvas(200, 200);
+  const canvas = new OffscreenCanvas(90, 90);
   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.fillStyle = 'rgba(128, 128, 128, 1)';
+  ctx.fillRect(20, 15, 50, 50);
 
   ctx.globalCompositeOperation = 'multiply';
-  ctx.shadowOffsetX = -10;
-  ctx.shadowOffsetY = 10;
+  ctx.shadowOffsetX = -7;
+  ctx.shadowOffsetY = 7;
   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: 'dropShadow',
+          dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
       {name: 'componentTransfer',
-          funcA: {type: "table", tableValues: [0, 0.7]}},
-      {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]});
+          funcA: {type: "table", tableValues: [0, 0.8]}}]});
 
-  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.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();
 
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.w.html b/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.w.html
index ce432ea74d9f05..41736c3a3ac288 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.w.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.shadow.w.html
@@ -5,39 +5,33 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <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 canvas = new OffscreenCanvas(90, 90);
     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.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
 
     ctx.globalCompositeOperation = 'multiply';
-    ctx.shadowOffsetX = -10;
-    ctx.shadowOffsetY = 10;
+    ctx.shadowOffsetX = -7;
+    ctx.shadowOffsetY = 7;
     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: 'dropShadow',
+            dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
         {name: 'componentTransfer',
-            funcA: {type: "table", tableValues: [0, 0.7]}},
-        {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]});
+            funcA: {type: "table", tableValues: [0, 0.8]}}]});
 
-    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.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();
 
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.w.html b/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.w.html
index bb101cdc0b129d..e90cc000ed7e11 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.w.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.filter.blending.w.html
@@ -5,35 +5,29 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <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 canvas = new OffscreenCanvas(90, 90);
     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.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
 
     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: 'dropShadow',
+            dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
         {name: 'componentTransfer',
-            funcA: {type: "table", tableValues: [0, 0.7]}},
-        {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]});
+            funcA: {type: "table", tableValues: [0, 0.8]}}]});
 
-    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.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();
 
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite-expected.html b/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite-expected.html
index 97e85a1593b63c..f05b3f16aed8bd 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite-expected.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite-expected.html
@@ -3,7 +3,7 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <p class="fallback">FAIL (fallback content)</p>
 </canvas>
 <script>
@@ -12,35 +12,26 @@ <h1>2d.layer.global-states.filter.composite</h1>
 
   const svg = `
     <svg xmlns="http://www.w3.org/2000/svg"
-          width="200" height="200"
+          width="90" height="90"
           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" />
+        <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
         <feComponentTransfer>
-          <feFuncA type="table" tableValues="0 0.7"></feFuncA>
+          <feFuncA type="table" tableValues="0 0.8"></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)"/>
+        <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 = 200;
-  img.height = 200;
+  img.width = 90;
+  img.height = 90;
   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.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
 
     ctx.globalCompositeOperation = 'source-in';
 
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.html b/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.html
index 32052a11501489..c12d2e94e3527b 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.html
@@ -4,34 +4,28 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <p class="fallback">FAIL (fallback content)</p>
 </canvas>
 <script>
-  const canvas = new OffscreenCanvas(200, 200);
+  const canvas = new OffscreenCanvas(90, 90);
   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.fillStyle = 'rgba(128, 128, 128, 1)';
+  ctx.fillRect(20, 15, 50, 50);
 
   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: 'dropShadow',
+          dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
       {name: 'componentTransfer',
-          funcA: {type: "table", tableValues: [0, 0.7]}},
-      {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]});
+          funcA: {type: "table", tableValues: [0, 0.8]}}]});
 
-  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.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();
 
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow-expected.html b/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow-expected.html
index 4716bb2760f4dd..6c994361153fb3 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow-expected.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow-expected.html
@@ -3,7 +3,7 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <p class="fallback">FAIL (fallback content)</p>
 </canvas>
 <script>
@@ -12,39 +12,30 @@ <h1>2d.layer.global-states.filter.composite.shadow</h1>
 
   const svg = `
     <svg xmlns="http://www.w3.org/2000/svg"
-          width="200" height="200"
+          width="90" height="90"
           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" />
+        <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
         <feComponentTransfer>
-          <feFuncA type="table" tableValues="0 0.7"></feFuncA>
+          <feFuncA type="table" tableValues="0 0.8"></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)"/>
+        <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 = 200;
-  img.height = 200;
+  img.width = 90;
+  img.height = 90;
   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.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
 
     ctx.globalCompositeOperation = 'source-in';
-  ctx.shadowOffsetX = -10;
-  ctx.shadowOffsetY = 10;
+  ctx.shadowOffsetX = -7;
+  ctx.shadowOffsetY = 7;
   ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
   ctx.shadowBlur = 3;
 
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.html b/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.html
index b5e8b9f843a1d1..67601a9ccfeae2 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.html
@@ -4,38 +4,32 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <p class="fallback">FAIL (fallback content)</p>
 </canvas>
 <script>
-  const canvas = new OffscreenCanvas(200, 200);
+  const canvas = new OffscreenCanvas(90, 90);
   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.fillStyle = 'rgba(128, 128, 128, 1)';
+  ctx.fillRect(20, 15, 50, 50);
 
   ctx.globalCompositeOperation = 'source-in';
-  ctx.shadowOffsetX = -10;
-  ctx.shadowOffsetY = 10;
+  ctx.shadowOffsetX = -7;
+  ctx.shadowOffsetY = 7;
   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: 'dropShadow',
+          dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
       {name: 'componentTransfer',
-          funcA: {type: "table", tableValues: [0, 0.7]}},
-      {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]});
+          funcA: {type: "table", tableValues: [0, 0.8]}}]});
 
-  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.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();
 
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.w.html b/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.w.html
index 894089d88e43bb..c609ccc61f3ec2 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.w.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.shadow.w.html
@@ -5,39 +5,33 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <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 canvas = new OffscreenCanvas(90, 90);
     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.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
 
     ctx.globalCompositeOperation = 'source-in';
-    ctx.shadowOffsetX = -10;
-    ctx.shadowOffsetY = 10;
+    ctx.shadowOffsetX = -7;
+    ctx.shadowOffsetY = 7;
     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: 'dropShadow',
+            dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
         {name: 'componentTransfer',
-            funcA: {type: "table", tableValues: [0, 0.7]}},
-        {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]});
+            funcA: {type: "table", tableValues: [0, 0.8]}}]});
 
-    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.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();
 
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.w.html b/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.w.html
index 41ccdaf5c0d313..56cbca855b1702 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.w.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.filter.composite.w.html
@@ -5,35 +5,29 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <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 canvas = new OffscreenCanvas(90, 90);
     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.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
 
     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: 'dropShadow',
+            dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
         {name: 'componentTransfer',
-            funcA: {type: "table", tableValues: [0, 0.7]}},
-        {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]});
+            funcA: {type: "table", tableValues: [0, 0.8]}}]});
 
-    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.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();
 
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-global-states-expected.html b/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-global-states-expected.html
index e56fe0b3602d05..71f0ab023ab75e 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-global-states-expected.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-global-states-expected.html
@@ -3,7 +3,7 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <p class="fallback">FAIL (fallback content)</p>
 </canvas>
 <script>
@@ -12,35 +12,26 @@ <h1>2d.layer.global-states.filter.no-global-states</h1>
 
   const svg = `
     <svg xmlns="http://www.w3.org/2000/svg"
-          width="200" height="200"
+          width="90" height="90"
           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" />
+        <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
         <feComponentTransfer>
-          <feFuncA type="table" tableValues="0 0.7"></feFuncA>
+          <feFuncA type="table" tableValues="0 0.8"></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)"/>
+        <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 = 200;
-  img.height = 200;
+  img.width = 90;
+  img.height = 90;
   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.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
 
     // No global states.
 
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-global-states.html b/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-global-states.html
index 3effa3ee9dd403..0860ee3fac62cd 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-global-states.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-global-states.html
@@ -4,34 +4,28 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <p class="fallback">FAIL (fallback content)</p>
 </canvas>
 <script>
-  const canvas = new OffscreenCanvas(200, 200);
+  const canvas = new OffscreenCanvas(90, 90);
   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.fillStyle = 'rgba(128, 128, 128, 1)';
+  ctx.fillRect(20, 15, 50, 50);
 
   // 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: 'dropShadow',
+          dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
       {name: 'componentTransfer',
-          funcA: {type: "table", tableValues: [0, 0.7]}},
-      {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]});
+          funcA: {type: "table", tableValues: [0, 0.8]}}]});
 
-  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.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();
 
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-global-states.w.html b/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-global-states.w.html
index ec744d7ffe7955..755570801add33 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-global-states.w.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-global-states.w.html
@@ -5,35 +5,29 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <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 canvas = new OffscreenCanvas(90, 90);
     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.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
 
     // 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: 'dropShadow',
+            dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
         {name: 'componentTransfer',
-            funcA: {type: "table", tableValues: [0, 0.7]}},
-        {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]});
+            funcA: {type: "table", tableValues: [0, 0.8]}}]});
 
-    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.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();
 
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.filter.shadow-expected.html b/html/canvas/offscreen/layers/2d.layer.global-states.filter.shadow-expected.html
index 13ba2dd4cde61d..5e9ca62537606e 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.filter.shadow-expected.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.filter.shadow-expected.html
@@ -3,7 +3,7 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <p class="fallback">FAIL (fallback content)</p>
 </canvas>
 <script>
@@ -12,38 +12,29 @@ <h1>2d.layer.global-states.filter.shadow</h1>
 
   const svg = `
     <svg xmlns="http://www.w3.org/2000/svg"
-          width="200" height="200"
+          width="90" height="90"
           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" />
+        <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
         <feComponentTransfer>
-          <feFuncA type="table" tableValues="0 0.7"></feFuncA>
+          <feFuncA type="table" tableValues="0 0.8"></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)"/>
+        <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 = 200;
-  img.height = 200;
+  img.width = 90;
+  img.height = 90;
   img.onload = () => {
-    ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
 
-    var circle = new Path2D();
-    circle.arc(90, 90, 45, 0, 2 * Math.PI);
-    ctx.fill(circle);
-
-    ctx.shadowOffsetX = -10;
-  ctx.shadowOffsetY = 10;
+    ctx.shadowOffsetX = -7;
+  ctx.shadowOffsetY = 7;
   ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
   ctx.shadowBlur = 3;
 
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.filter.shadow.html b/html/canvas/offscreen/layers/2d.layer.global-states.filter.shadow.html
index 7bb0ef5e134cce..de9d929a96ac7b 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.filter.shadow.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.filter.shadow.html
@@ -4,37 +4,31 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <p class="fallback">FAIL (fallback content)</p>
 </canvas>
 <script>
-  const canvas = new OffscreenCanvas(200, 200);
+  const canvas = new OffscreenCanvas(90, 90);
   const ctx = canvas.getContext('2d');
 
-  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+  ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+  ctx.fillRect(20, 15, 50, 50);
 
-  var circle = new Path2D();
-  circle.arc(90, 90, 45, 0, 2 * Math.PI);
-  ctx.fill(circle);
-
-  ctx.shadowOffsetX = -10;
-  ctx.shadowOffsetY = 10;
+  ctx.shadowOffsetX = -7;
+  ctx.shadowOffsetY = 7;
   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: 'dropShadow',
+          dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
       {name: 'componentTransfer',
-          funcA: {type: "table", tableValues: [0, 0.7]}},
-      {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]});
+          funcA: {type: "table", tableValues: [0, 0.8]}}]});
 
-  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.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();
 
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.filter.shadow.w.html b/html/canvas/offscreen/layers/2d.layer.global-states.filter.shadow.w.html
index bc9bd48aad3d81..7e0f0ae0666ac9 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.filter.shadow.w.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.filter.shadow.w.html
@@ -5,38 +5,32 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <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 canvas = new OffscreenCanvas(90, 90);
     const ctx = canvas.getContext('2d');
 
-    ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
 
-    var circle = new Path2D();
-    circle.arc(90, 90, 45, 0, 2 * Math.PI);
-    ctx.fill(circle);
-
-    ctx.shadowOffsetX = -10;
-    ctx.shadowOffsetY = 10;
+    ctx.shadowOffsetX = -7;
+    ctx.shadowOffsetY = 7;
     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: 'dropShadow',
+            dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
         {name: 'componentTransfer',
-            funcA: {type: "table", tableValues: [0, 0.7]}},
-        {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]});
+            funcA: {type: "table", tableValues: [0, 0.8]}}]});
 
-    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.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();
 
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.no-global-states-expected.html b/html/canvas/offscreen/layers/2d.layer.global-states.no-global-states-expected.html
index b91a2ae8b52c25..5742aea082fb8e 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.no-global-states-expected.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.no-global-states-expected.html
@@ -3,29 +3,26 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <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.fillStyle = 'rgba(128, 128, 128, 1)';
+  ctx.fillRect(20, 15, 50, 50);
 
   // No global states.
 
-  canvas2 = document.createElement("canvas");
-  ctx2 = canvas2.getContext("2d");
+  const canvas2 = document.createElement("canvas");
+  const ctx2 = canvas2.getContext("2d");
 
   ctx2.globalCompositeOperation = 'screen';
-  ctx2.fillStyle = 'rgba(225, 0, 0, 1)';
-  ctx2.fillRect(50, 50, 75, 50);
+  ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+  ctx2.fillRect(10, 25, 40, 50);
   ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
-  ctx2.fillRect(70, 70, 75, 50);
+  ctx2.fillRect(30, 5, 50, 40);
 
   ctx.drawImage(canvas2, 0, 0);
 </script>
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.no-global-states.html b/html/canvas/offscreen/layers/2d.layer.global-states.no-global-states.html
index c8a98153816c1a..99a24671ffa881 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.no-global-states.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.no-global-states.html
@@ -4,18 +4,15 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <p class="fallback">FAIL (fallback content)</p>
 </canvas>
 <script>
-  const canvas = new OffscreenCanvas(200, 200);
+  const canvas = new OffscreenCanvas(90, 90);
   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.fillStyle = 'rgba(128, 128, 128, 1)';
+  ctx.fillRect(20, 15, 50, 50);
 
   // No global states.
 
@@ -25,10 +22,10 @@ <h1>2d.layer.global-states.no-global-states</h1>
   // 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(255, 0, 0, 1)';
+  ctx.fillRect(10, 25, 40, 50);
   ctx.fillStyle = 'rgba(0, 255, 0, 1)';
-  ctx.fillRect(70, 70, 75, 50);
+  ctx.fillRect(30, 5, 50, 40);
 
   ctx.endLayer();
 
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.no-global-states.w.html b/html/canvas/offscreen/layers/2d.layer.global-states.no-global-states.w.html
index db03a3fd0c3c9f..51556f86c97d7b 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.no-global-states.w.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.no-global-states.w.html
@@ -5,19 +5,16 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <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 canvas = new OffscreenCanvas(90, 90);
     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.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
 
     // No global states.
 
@@ -27,10 +24,10 @@ <h1>2d.layer.global-states.no-global-states</h1>
     // 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(255, 0, 0, 1)';
+    ctx.fillRect(10, 25, 40, 50);
     ctx.fillStyle = 'rgba(0, 255, 0, 1)';
-    ctx.fillRect(70, 70, 75, 50);
+    ctx.fillRect(30, 5, 50, 40);
 
     ctx.endLayer();
 
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.shadow-expected.html b/html/canvas/offscreen/layers/2d.layer.global-states.shadow-expected.html
index 835e9d420ac349..79efdfec33dd1c 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.shadow-expected.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.shadow-expected.html
@@ -3,32 +3,29 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <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)';
+  ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+  ctx.fillRect(20, 15, 50, 50);
 
-  var circle = new Path2D();
-  circle.arc(90, 90, 45, 0, 2 * Math.PI);
-  ctx.fill(circle);
-
-  ctx.shadowOffsetX = -10;
-  ctx.shadowOffsetY = 10;
+  ctx.shadowOffsetX = -7;
+  ctx.shadowOffsetY = 7;
   ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
   ctx.shadowBlur = 3;
 
-  canvas2 = document.createElement("canvas");
-  ctx2 = canvas2.getContext("2d");
+  const canvas2 = document.createElement("canvas");
+  const ctx2 = canvas2.getContext("2d");
 
   ctx2.globalCompositeOperation = 'screen';
-  ctx2.fillStyle = 'rgba(225, 0, 0, 1)';
-  ctx2.fillRect(50, 50, 75, 50);
+  ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+  ctx2.fillRect(10, 25, 40, 50);
   ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
-  ctx2.fillRect(70, 70, 75, 50);
+  ctx2.fillRect(30, 5, 50, 40);
 
   ctx.drawImage(canvas2, 0, 0);
 </script>
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.shadow.html b/html/canvas/offscreen/layers/2d.layer.global-states.shadow.html
index ad60e87fb13e9a..dccc94dcd4af39 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.shadow.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.shadow.html
@@ -4,21 +4,18 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <p class="fallback">FAIL (fallback content)</p>
 </canvas>
 <script>
-  const canvas = new OffscreenCanvas(200, 200);
+  const canvas = new OffscreenCanvas(90, 90);
   const ctx = canvas.getContext('2d');
 
-  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+  ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+  ctx.fillRect(20, 15, 50, 50);
 
-  var circle = new Path2D();
-  circle.arc(90, 90, 45, 0, 2 * Math.PI);
-  ctx.fill(circle);
-
-  ctx.shadowOffsetX = -10;
-  ctx.shadowOffsetY = 10;
+  ctx.shadowOffsetX = -7;
+  ctx.shadowOffsetY = 7;
   ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
   ctx.shadowBlur = 3;
 
@@ -28,10 +25,10 @@ <h1>2d.layer.global-states.shadow</h1>
   // 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(255, 0, 0, 1)';
+  ctx.fillRect(10, 25, 40, 50);
   ctx.fillStyle = 'rgba(0, 255, 0, 1)';
-  ctx.fillRect(70, 70, 75, 50);
+  ctx.fillRect(30, 5, 50, 40);
 
   ctx.endLayer();
 
diff --git a/html/canvas/offscreen/layers/2d.layer.global-states.shadow.w.html b/html/canvas/offscreen/layers/2d.layer.global-states.shadow.w.html
index 1fc35fd33aa6dc..8611433f625837 100644
--- a/html/canvas/offscreen/layers/2d.layer.global-states.shadow.w.html
+++ b/html/canvas/offscreen/layers/2d.layer.global-states.shadow.w.html
@@ -5,22 +5,19 @@
 <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">
+<canvas id="canvas" width="90" height="90">
   <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 canvas = new OffscreenCanvas(90, 90);
     const ctx = canvas.getContext('2d');
 
-    ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
 
-    var circle = new Path2D();
-    circle.arc(90, 90, 45, 0, 2 * Math.PI);
-    ctx.fill(circle);
-
-    ctx.shadowOffsetX = -10;
-    ctx.shadowOffsetY = 10;
+    ctx.shadowOffsetX = -7;
+    ctx.shadowOffsetY = 7;
     ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
     ctx.shadowBlur = 3;
 
@@ -30,10 +27,10 @@ <h1>2d.layer.global-states.shadow</h1>
     // 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(255, 0, 0, 1)';
+    ctx.fillRect(10, 25, 40, 50);
     ctx.fillStyle = 'rgba(0, 255, 0, 1)';
-    ctx.fillRect(70, 70, 75, 50);
+    ctx.fillRect(30, 5, 50, 40);
 
     ctx.endLayer();
 
diff --git a/html/canvas/tools/yaml-new/layers.yaml b/html/canvas/tools/yaml-new/layers.yaml
index 2462164f47a436..7acfa4de6b7c89 100644
--- a/html/canvas/tools/yaml-new/layers.yaml
+++ b/html/canvas/tools/yaml-new/layers.yaml
@@ -1,12 +1,9 @@
 - name: 2d.layer.global-states
   desc: Checks that layers correctly use global render states.
-  size: [200, 200]
+  size: [90, 90]
   code: |
-    ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
-    var circle = new Path2D();
-    circle.arc(90, 90, 45, 0, 2 * Math.PI);
-    ctx.fill(circle);
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
 
     {{ render_states }}
 
@@ -16,118 +13,108 @@
     // 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(255, 0, 0, 1)';
+    ctx.fillRect(10, 25, 40, 50);
     ctx.fillStyle = 'rgba(0, 255, 0, 1)';
-    ctx.fillRect(70, 70, 75, 50);
+    ctx.fillRect(30, 5, 50, 40);
 
     ctx.endLayer();
   reference: |
-    ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
-    var circle = new Path2D();
-    circle.arc(90, 90, 45, 0, 2 * Math.PI);
-    ctx.fill(circle);
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
 
     {{ render_states }}
 
-    canvas2 = document.createElement("canvas");
-    ctx2 = canvas2.getContext("2d");
+    const canvas2 = document.createElement("canvas");
+    const ctx2 = canvas2.getContext("2d");
 
     ctx2.globalCompositeOperation = 'screen';
-    ctx2.fillStyle = 'rgba(225, 0, 0, 1)';
-    ctx2.fillRect(50, 50, 75, 50);
+    ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
+    ctx2.fillRect(10, 25, 40, 50);
     ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
-    ctx2.fillRect(70, 70, 75, 50);
+    ctx2.fillRect(30, 5, 50, 40);
 
     ctx.drawImage(canvas2, 0, 0);
-  variants:
-  - &global-state-variants
-    no-global-states:
+  variants: &global-state-variants
+  - no-global-states:
       render_states: // No global states.
-    alpha: &global-state-alpha
-      render_states: ctx.globalAlpha = 0.6;
+    alpha:
+      render_states: ctx.globalAlpha = 0.75;
     blending:
       render_states: ctx.globalCompositeOperation = 'multiply';
     composite:
       render_states: ctx.globalCompositeOperation = 'source-in';
     shadow:
       render_states: |-
-        ctx.shadowOffsetX = -10;
-        ctx.shadowOffsetY = 10;
+        ctx.shadowOffsetX = -7;
+        ctx.shadowOffsetY = 7;
         ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
         ctx.shadowBlur = 3;
-    alpha.blending: &global-state-alpha-blending
+    alpha.blending:
       render_states: |-
-        ctx.globalAlpha = 0.6;
+        ctx.globalAlpha = 0.75;
         ctx.globalCompositeOperation = 'multiply';
-    alpha.composite: &global-state-alpha-composite
+    alpha.composite:
       render_states: |-
-        ctx.globalAlpha = 0.6;
+        ctx.globalAlpha = 0.75;
         ctx.globalCompositeOperation = 'source-in';
-    alpha.shadow: &global-state-alpha-shadow
+    alpha.shadow:
       render_states: |-
-        ctx.globalAlpha = 0.5;
-        ctx.shadowOffsetX = -10;
-        ctx.shadowOffsetY = 10;
+        ctx.globalAlpha = 0.75;
+        ctx.shadowOffsetX = -7;
+        ctx.shadowOffsetY = 7;
         ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
         ctx.shadowBlur = 3;
     alpha.blending.shadow:
       render_states: |-
-        ctx.globalAlpha = 0.6;
+        ctx.globalAlpha = 0.75;
         ctx.globalCompositeOperation = 'multiply';
-        ctx.shadowOffsetX = -10;
-        ctx.shadowOffsetY = 10;
+        ctx.shadowOffsetX = -7;
+        ctx.shadowOffsetY = 7;
         ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
         ctx.shadowBlur = 3;
     alpha.composite.shadow:
       render_states: |-
-        ctx.globalAlpha = 0.6;
+        ctx.globalAlpha = 0.75;
         ctx.globalCompositeOperation = 'source-in';
-        ctx.shadowOffsetX = -10;
-        ctx.shadowOffsetY = 10;
+        ctx.shadowOffsetX = -7;
+        ctx.shadowOffsetY = 7;
         ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
         ctx.shadowBlur = 3;
     blending.shadow:
       render_states: |-
         ctx.globalCompositeOperation = 'multiply';
-        ctx.shadowOffsetX = -10;
-        ctx.shadowOffsetY = 10;
+        ctx.shadowOffsetX = -7;
+        ctx.shadowOffsetY = 7;
         ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
         ctx.shadowBlur = 3;
     composite.shadow:
       render_states: |-
         ctx.globalCompositeOperation = 'source-in';
-        ctx.shadowOffsetX = -10;
-        ctx.shadowOffsetY = 10;
+        ctx.shadowOffsetX = -7;
+        ctx.shadowOffsetY = 7;
         ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
         ctx.shadowBlur = 3;
 
 - name: 2d.layer.global-states.filter
   desc: Checks that layers with filters correctly use global render states.
-  size: [200, 200]
+  size: [90, 90]
   code: |
-    ctx.fillStyle = 'rgba(0, 0, 255, 1)';
-
-    var circle = new Path2D();
-    circle.arc(90, 90, 45, 0, 2 * Math.PI);
-    ctx.fill(circle);
+    ctx.fillStyle = 'rgba(128, 128, 128, 1)';
+    ctx.fillRect(20, 15, 50, 50);
 
     {{ render_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: 'dropShadow',
+            dx: 5, dy: 5, stdDeviation: 0, floodColor: '#00f'},
         {name: 'componentTransfer',
-            funcA: {type: "table", tableValues: [0, 0.7]}},
-        {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]});
+            funcA: {type: "table", tableValues: [0, 0.8]}}]});
 
-    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.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();
   reference: |
@@ -136,20 +123,14 @@
             width="{{ size[0] }}" height="{{ size[1] }}"
             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" />
+          <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="#00f" />
           <feComponentTransfer>
-            <feFuncA type="table" tableValues="0 0.7"></feFuncA>
+            <feFuncA type="table" tableValues="0 0.8"></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)"/>
+          <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>`;
 
@@ -157,31 +138,15 @@
     img.width = {{ size[0] }};
     img.height = {{ size[1] }};
     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.fillStyle = 'rgba(128, 128, 128, 1)';
+      ctx.fillRect(20, 15, 50, 50);
 
       {{ render_states }}
 
       ctx.drawImage(img, 0, 0);
     };
     img.src = 'data:image/svg+xml;base64,' + btoa(svg);
-  variants:
-  - <<: *global-state-variants
-    alpha:
-      <<: *global-state-alpha
-      fuzzy: maxDifference=0-2; totalPixels=0-6766
-    alpha.blending:
-      <<: *global-state-alpha-blending
-      fuzzy: maxDifference=0-1; totalPixels=0-2453
-    alpha.composite:
-      <<: *global-state-alpha-composite
-      fuzzy: maxDifference=0-1; totalPixels=0-5204
-    alpha.shadow:
-      <<: *global-state-alpha-shadow
-      fuzzy: maxDifference=0-2; totalPixels=0-6311
+  variants: *global-state-variants
 
 - name: 2d.layer.global-filter
   desc: Tests that layers ignore the global context filter.