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.