From 2f6785bae513afb779f390cc3691b2041e43f4cc Mon Sep 17 00:00:00 2001
From: Jean-Philippe Gravel <jpgravel@chromium.org>
Date: Mon, 17 Apr 2023 13:43:33 +0000
Subject: [PATCH] Bug 1826805 [wpt PR 39409] - Fix quote style in generated WPT
 filter tests., a=testonly

Automatic update from web-platform-tests
Fix quote style in generated WPT filter tests.

Quote styles were used inconsistently across `filters.yaml`. The style
guide recommends using single quotes in JavaScript and double quotes in
HTML:
https://chromium.googlesource.com/chromium/src/+/main/styleguide/web/web.md

Change-Id: Iec6d47c301457ea5e9a6bf0c0219a80da53efbf5
Bug: 1428652
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4400839
Commit-Queue: Jean-Philippe Gravel <jpgravel@chromium.org>
Reviewed-by: Aaron Krajeski <aaronhk@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1129864}

--

wpt-commits: a65fa35f9ca436499e56d7ba312ad328500b7890
wpt-pr: 39409
---
 ...nvasFilterObject.blur.exceptions.tentative.html |  12 +-
 ...r.canvasFilterObject.colorMatrix.tentative.html |  34 +--
 ...bject.componentTransfer.discrete.tentative.html |   8 +-
 ...erObject.componentTransfer.gamma.tentative.html |   8 +-
 ...bject.componentTransfer.identity.tentative.html |   8 +-
 ...rObject.componentTransfer.linear.tentative.html |   8 +-
 ...erObject.componentTransfer.table.tentative.html |   8 +-
 ...Object.convolveMatrix.exceptions.tentative.html |  32 +--
 ...FilterObject.dropShadow.tentative-expected.html |  28 +--
 ...er.canvasFilterObject.dropShadow.tentative.html |  42 ++--
 .../2d.filter.canvasFilterObject.tentative.html    |  10 +-
 ...lterObject.turbulence.inputTypes.tentative.html |  32 +--
 ...nvasFilterObject.blur.exceptions.tentative.html |  12 +-
 ...ilterObject.blur.exceptions.tentative.worker.js |  12 +-
 ...r.canvasFilterObject.colorMatrix.tentative.html |  34 +--
 ...vasFilterObject.colorMatrix.tentative.worker.js |  34 +--
 ...bject.componentTransfer.discrete.tentative.html |   8 +-
 ....componentTransfer.discrete.tentative.worker.js |   8 +-
 ...erObject.componentTransfer.gamma.tentative.html |   8 +-
 ...ect.componentTransfer.gamma.tentative.worker.js |   8 +-
 ...bject.componentTransfer.identity.tentative.html |   8 +-
 ....componentTransfer.identity.tentative.worker.js |   8 +-
 ...rObject.componentTransfer.linear.tentative.html |   8 +-
 ...ct.componentTransfer.linear.tentative.worker.js |   8 +-
 ...erObject.componentTransfer.table.tentative.html |   8 +-
 ...ect.componentTransfer.table.tentative.worker.js |   8 +-
 ...Object.convolveMatrix.exceptions.tentative.html |  32 +--
 ...t.convolveMatrix.exceptions.tentative.worker.js |  32 +--
 ...FilterObject.dropShadow.tentative-expected.html |  28 +--
 ...er.canvasFilterObject.dropShadow.tentative.html |  42 ++--
 ....canvasFilterObject.dropShadow.tentative.w.html |  42 ++--
 .../2d.filter.canvasFilterObject.tentative.html    |  10 +-
 ...d.filter.canvasFilterObject.tentative.worker.js |  10 +-
 ...lterObject.turbulence.inputTypes.tentative.html |  32 +--
 ...bject.turbulence.inputTypes.tentative.worker.js |  32 +--
 .../tests/html/canvas/tools/yaml-new/filters.yaml  | 240 ++++++++++-----------
 36 files changed, 451 insertions(+), 451 deletions(-)

diff --git a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.blur.exceptions.tentative.html b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.blur.exceptions.tentative.html
index d64b81026ad5..77818444c87c 100644
--- a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.blur.exceptions.tentative.html
+++ b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.blur.exceptions.tentative.html
@@ -19,12 +19,12 @@
 var t = async_test("Test exceptions on CanvasFilter() blur.object");
 _addTest(function(canvas, ctx) {
 
-assert_throws_js(TypeError, function() { ctx.filter = new CanvasFilter({filter: "gaussianBlur"}); });
-assert_throws_js(TypeError, function() { ctx.filter = new CanvasFilter({filter: "gaussianBlur", stdDeviation: undefined}); });
-assert_throws_js(TypeError, function() { ctx.filter = new CanvasFilter({filter: "gaussianBlur", stdDeviation: "foo"}); });
-assert_throws_js(TypeError, function() { ctx.filter = new CanvasFilter({filter: "gaussianBlur", stdDeviation: [1,2]}); });
-assert_throws_js(TypeError, function() { ctx.filter = new CanvasFilter({filter: "gaussianBlur", stdDeviation: NaN}); });
-assert_throws_js(TypeError, function() { ctx.filter = new CanvasFilter({filter: "gaussianBlur", stdDeviation: {}}); });
+assert_throws_js(TypeError, function() { ctx.filter = new CanvasFilter({filter: 'gaussianBlur'}); });
+assert_throws_js(TypeError, function() { ctx.filter = new CanvasFilter({filter: 'gaussianBlur', stdDeviation: undefined}); });
+assert_throws_js(TypeError, function() { ctx.filter = new CanvasFilter({filter: 'gaussianBlur', stdDeviation: 'foo'}); });
+assert_throws_js(TypeError, function() { ctx.filter = new CanvasFilter({filter: 'gaussianBlur', stdDeviation: [1,2]}); });
+assert_throws_js(TypeError, function() { ctx.filter = new CanvasFilter({filter: 'gaussianBlur', stdDeviation: NaN}); });
+assert_throws_js(TypeError, function() { ctx.filter = new CanvasFilter({filter: 'gaussianBlur', stdDeviation: {}}); });
 
 
 });
diff --git a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.colorMatrix.tentative.html b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.colorMatrix.tentative.html
index 678a722520a9..a56840e60739 100644
--- a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.colorMatrix.tentative.html
+++ b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.colorMatrix.tentative.html
@@ -19,44 +19,44 @@
 var t = async_test("Test the functionality of ColorMatrix filters in CanvasFilter objects");
 _addTest(function(canvas, ctx) {
 
-assert_throws_js(TypeError, function() { new CanvasFilter({filter: "colorMatrix", values: undefined}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({filter: "colorMatrix", values: "foo"}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({filter: "colorMatrix", values: null}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({filter: "colorMatrix", values: [1, 2, 3]}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({filter: "colorMatrix", values: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, "a"]}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({filter: "colorMatrix", values: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, Infinity]}); });
-ctx.fillStyle = "#f00";
-ctx.filter = new CanvasFilter({filter: "colorMatrix", type: "hueRotate", values: 0});
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: 'colorMatrix', values: undefined}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: 'colorMatrix', values: 'foo'}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: 'colorMatrix', values: null}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: 'colorMatrix', values: [1, 2, 3]}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: 'colorMatrix', values: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 'a']}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: 'colorMatrix', values: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, Infinity]}); });
+ctx.fillStyle = '#f00';
+ctx.filter = new CanvasFilter({filter: 'colorMatrix', type: 'hueRotate', values: 0});
 ctx.fillRect(0, 0, 100, 50);
 _assertPixelApprox(canvas, 10,10, 255,0,0,255, 2);
-ctx.filter = new CanvasFilter({filter: "colorMatrix", type: "hueRotate", values: 90});
+ctx.filter = new CanvasFilter({filter: 'colorMatrix', type: 'hueRotate', values: 90});
 ctx.fillRect(0, 0, 100, 50);
 _assertPixelApprox(canvas, 10,10, 0,91,0,255, 2);
-ctx.filter = new CanvasFilter({filter: "colorMatrix", type: "hueRotate", values: 180});
+ctx.filter = new CanvasFilter({filter: 'colorMatrix', type: 'hueRotate', values: 180});
 ctx.fillRect(0, 0, 100, 50);
 _assertPixelApprox(canvas, 10,10, 0,109,109,255, 2);
-ctx.filter = new CanvasFilter({filter: "colorMatrix", type: "hueRotate", values: 270});
+ctx.filter = new CanvasFilter({filter: 'colorMatrix', type: 'hueRotate', values: 270});
 ctx.fillRect(0, 0, 100, 50);
 _assertPixelApprox(canvas, 10,10, 109,18,255,255, 2);
-ctx.filter = new CanvasFilter({filter: "colorMatrix", type: "saturate", values: 0.5});
+ctx.filter = new CanvasFilter({filter: 'colorMatrix', type: 'saturate', values: 0.5});
 ctx.fillRect(0, 0, 100, 50);
 _assertPixelApprox(canvas, 10,10, 155,27,27,255, 2);
 ctx.clearRect(0, 0, 100, 50);
-ctx.filter = new CanvasFilter({filter: "colorMatrix", type: "luminanceToAlpha"});
+ctx.filter = new CanvasFilter({filter: 'colorMatrix', type: 'luminanceToAlpha'});
 ctx.fillRect(0, 0, 100, 50);
 _assertPixelApprox(canvas, 10,10, 0,0,0,54, 2);
-ctx.filter = new CanvasFilter({filter: "colorMatrix", values: [
+ctx.filter = new CanvasFilter({filter: 'colorMatrix', values: [
         0, 0, 0, 0, 0,
         1, 1, 1, 1, 0,
         0, 0, 0, 0, 0,
         0, 0, 0, 1, 0
 ]});
 ctx.fillRect(0, 0, 50, 25);
-ctx.fillStyle = "#0f0";
+ctx.fillStyle = '#0f0';
 ctx.fillRect(50, 0, 50, 25);
-ctx.fillStyle = "#00f";
+ctx.fillStyle = '#00f';
 ctx.fillRect(0, 25, 50, 25);
-ctx.fillStyle = "#fff";
+ctx.fillStyle = '#fff';
 ctx.fillRect(50, 25, 50, 25);
 _assertPixelApprox(canvas, 10,10, 0,255,0,255, 2);
 _assertPixelApprox(canvas, 60,10, 0,255,0,255, 2);
diff --git a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.componentTransfer.discrete.tentative.html b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.componentTransfer.discrete.tentative.html
index 0ecd132c8efa..c54299ff2a5a 100644
--- a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.componentTransfer.discrete.tentative.html
+++ b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.componentTransfer.discrete.tentative.html
@@ -40,10 +40,10 @@ function getColor(inputColor, tableValues) {
 tableValuesR = [0, 0, 1, 1];
 tableValuesG = [2, 0, 0.5, 3];
 tableValuesB = [1, -1, 5, 0];
-ctx.filter = new CanvasFilter({filter: "componentTransfer",
-    funcR: {type: "discrete", tableValues: tableValuesR},
-    funcG: {type: "discrete", tableValues: tableValuesG},
-    funcB: {type: "discrete", tableValues: tableValuesB},
+ctx.filter = new CanvasFilter({filter: 'componentTransfer',
+    funcR: {type: 'discrete', tableValues: tableValuesR},
+    funcG: {type: 'discrete', tableValues: tableValuesG},
+    funcB: {type: 'discrete', tableValues: tableValuesB},
 });
 
 const inputColors = [
diff --git a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.componentTransfer.gamma.tentative.html b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.componentTransfer.gamma.tentative.html
index 4ef30c9249bb..110cd2396ea8 100644
--- a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.componentTransfer.gamma.tentative.html
+++ b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.componentTransfer.gamma.tentative.html
@@ -31,10 +31,10 @@ function getColor(inputColor, amplitude, exponent, offset) {
 const amplitudes = [2, 1.1, 0.5];
 const exponents = [5, 3, 1];
 const offsets = [0.25, 0, 0.5];
-ctx.filter = new CanvasFilter({filter: "componentTransfer",
-    funcR: {type: "gamma", amplitude: amplitudes[0], exponent: exponents[0], offset: offsets[0]},
-    funcG: {type: "gamma", amplitude: amplitudes[1], exponent: exponents[1], offset: offsets[1]},
-    funcB: {type: "gamma", amplitude: amplitudes[2], exponent: exponents[2], offset: offsets[2]},
+ctx.filter = new CanvasFilter({filter: 'componentTransfer',
+    funcR: {type: 'gamma', amplitude: amplitudes[0], exponent: exponents[0], offset: offsets[0]},
+    funcG: {type: 'gamma', amplitude: amplitudes[1], exponent: exponents[1], offset: offsets[1]},
+    funcB: {type: 'gamma', amplitude: amplitudes[2], exponent: exponents[2], offset: offsets[2]},
 });
 
 const inputColors = [
diff --git a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.componentTransfer.identity.tentative.html b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.componentTransfer.identity.tentative.html
index 25eda36d96b0..96a3e4936ee2 100644
--- a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.componentTransfer.identity.tentative.html
+++ b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.componentTransfer.identity.tentative.html
@@ -19,10 +19,10 @@
 var t = async_test("Test pixels on CanvasFilter() componentTransfer with identity type");
 _addTest(function(canvas, ctx) {
 
-ctx.filter = new CanvasFilter({filter: "componentTransfer",
-    funcR: {type: "identity"},
-    funcG: {type: "identity"},
-    funcB: {type: "identity"},
+ctx.filter = new CanvasFilter({filter: 'componentTransfer',
+    funcR: {type: 'identity'},
+    funcG: {type: 'identity'},
+    funcB: {type: 'identity'},
 });
 
 const inputColors = [
diff --git a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.componentTransfer.linear.tentative.html b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.componentTransfer.linear.tentative.html
index c45f55860091..10f9931cc643 100644
--- a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.componentTransfer.linear.tentative.html
+++ b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.componentTransfer.linear.tentative.html
@@ -30,10 +30,10 @@ function getColor(inputColor, slopes, intercepts) {
 
 const slopes = [0.5, 1.2, -0.2];
 const intercepts = [0.25, 0, 0.5];
-ctx.filter = new CanvasFilter({filter: "componentTransfer",
-    funcR: {type: "linear", slope: slopes[0], intercept: intercepts[0]},
-    funcG: {type: "linear", slope: slopes[1], intercept: intercepts[1]},
-    funcB: {type: "linear", slope: slopes[2], intercept: intercepts[2]},
+ctx.filter = new CanvasFilter({filter: 'componentTransfer',
+    funcR: {type: 'linear', slope: slopes[0], intercept: intercepts[0]},
+    funcG: {type: 'linear', slope: slopes[1], intercept: intercepts[1]},
+    funcB: {type: 'linear', slope: slopes[2], intercept: intercepts[2]},
 });
 
 const inputColors = [
diff --git a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.componentTransfer.table.tentative.html b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.componentTransfer.table.tentative.html
index b561cb6fd3f0..7e743bf34f00 100644
--- a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.componentTransfer.table.tentative.html
+++ b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.componentTransfer.table.tentative.html
@@ -40,10 +40,10 @@ function getColor(inputColor, tableValues) {
 tableValuesR = [0, 0, 1, 1];
 tableValuesG = [2, 0, 0.5, 3];
 tableValuesB = [1, -1, 5, 0];
-ctx.filter = new CanvasFilter({filter: "componentTransfer",
-    funcR: {type: "table", tableValues: tableValuesR},
-    funcG: {type: "table", tableValues: tableValuesG},
-    funcB: {type: "table", tableValues: tableValuesB},
+ctx.filter = new CanvasFilter({filter: 'componentTransfer',
+    funcR: {type: 'table', tableValues: tableValuesR},
+    funcG: {type: 'table', tableValues: tableValuesG},
+    funcB: {type: 'table', tableValues: tableValuesB},
 });
 
 const inputColors = [
diff --git a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.convolveMatrix.exceptions.tentative.html b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.convolveMatrix.exceptions.tentative.html
index b85b742b3ebb..b994a91842c0 100644
--- a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.convolveMatrix.exceptions.tentative.html
+++ b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.convolveMatrix.exceptions.tentative.html
@@ -19,23 +19,23 @@
 var t = async_test("Test exceptions on CanvasFilter() convolveMatrix");
 _addTest(function(canvas, ctx) {
 
-assert_throws_js(TypeError, function() { new CanvasFilter({filter: "convolveMatrix"}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({filter: "convolveMatrix", divisor: 2}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({filter: "convolveMatrix", kernelMatrix: null}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({filter: "convolveMatrix", kernelMatrix: 1}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({filter: "convolveMatrix", kernelMatrix: [[1, 0], [0]]}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({filter: "convolveMatrix", kernelMatrix: [[1, "a"], [0]]}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({filter: "convolveMatrix", kernelMatrix: [[1, 0], 0]}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({filter: "convolveMatrix", kernelMatrix: [[1, 0], [0, Infinity]]}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({filter: "convolveMatrix", kernelMatrix: []}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({filter: "convolveMatrix", kernelMatrix: [1]}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({filter: "convolveMatrix", kernelMatrix: [1, 2, 3, 4]}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({filter: "convolveMatrix", kernelMatrix: [[], []]}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({filter: "convolveMatrix", kernelMatrix: [[1, 2], []]}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({filter: "convolveMatrix", kernelMatrix: [[], [1, 2]]}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: 'convolveMatrix'}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: 'convolveMatrix', divisor: 2}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: 'convolveMatrix', kernelMatrix: null}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: 'convolveMatrix', kernelMatrix: 1}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: 'convolveMatrix', kernelMatrix: [[1, 0], [0]]}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: 'convolveMatrix', kernelMatrix: [[1, 'a'], [0]]}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: 'convolveMatrix', kernelMatrix: [[1, 0], 0]}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: 'convolveMatrix', kernelMatrix: [[1, 0], [0, Infinity]]}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: 'convolveMatrix', kernelMatrix: []}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: 'convolveMatrix', kernelMatrix: [1]}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: 'convolveMatrix', kernelMatrix: [1, 2, 3, 4]}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: 'convolveMatrix', kernelMatrix: [[], []]}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: 'convolveMatrix', kernelMatrix: [[1, 2], []]}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: 'convolveMatrix', kernelMatrix: [[], [1, 2]]}); });
 // This should not throw an error
-ctx.filter = new CanvasFilter({filter: "convolveMatrix", kernelMatrix: [[]]});
-ctx.filter = new CanvasFilter({filter: "convolveMatrix", kernelMatrix: [[1]]});
+ctx.filter = new CanvasFilter({filter: 'convolveMatrix', kernelMatrix: [[]]});
+ctx.filter = new CanvasFilter({filter: 'convolveMatrix', kernelMatrix: [[1]]});
 
 
 });
diff --git a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.dropShadow.tentative-expected.html b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.dropShadow.tentative-expected.html
index 90f406fed9fd..62226d7d81fb 100644
--- a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.dropShadow.tentative-expected.html
+++ b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.dropShadow.tentative-expected.html
@@ -22,52 +22,52 @@
 </style>
 
 <div style="position: relative">
-  <div class='background' style="top: 0px;"></div>
-  <div class='background' style="top: 100px;"></div>
-  <div class='background' style="top: 200px;"></div>
+  <div class="background" style="top: 0px;"></div>
+  <div class="background" style="top: 100px;"></div>
+  <div class="background" style="top: 200px;"></div>
 
-  <div class='testcase'
+  <div class="testcase"
        style="left: 10px; top: 10px;
               filter: drop-shadow(2px 2px 2px black);">
   </div>
-  <div class='testcase'
+  <div class="testcase"
        style="left: 110px; top: 10px;
               filter: drop-shadow(15px 10px 5px rgba(128, 0, 128, 0.7));">
   </div>
-  <div class='testcase'
+  <div class="testcase"
        style="left: 10px; top: 110px;
               filter: drop-shadow(10px 10px 3px purple)">
   </div>
-  <div class='testcase'
+  <div class="testcase"
        style="left: 110px; top: 110px;
               filter: drop-shadow(15px 10px 3px LinkText)">
   </div>
-  <div class='testcase'
+  <div class="testcase"
        style="left: 210px; top: 110px;
               filter: drop-shadow(10px 15px 0px purple)">
   </div>
-  <div class='testcase'
+  <div class="testcase"
        style="left: 310px; top: 110px;
               filter: drop-shadow(9px 12px 3px rgba(20, 50, 130, 1))">
   </div>
-  <div class='testcase'
+  <div class="testcase"
        style="left: 410px; top: 110px;
               filter: drop-shadow(15px 10px 3px rgba(20, 50, 130, 0.7))">
   </div>
-  <div class='testcase'
+  <div class="testcase"
        style="left: 510px; top: 110px;
               filter: drop-shadow(15px 10px 3px rgba(20, 50, 130, 0.49))">
   </div>
 
-  <div class='testcase'
+  <div class="testcase"
        style="left: 10px; top: 210px;
               filter: drop-shadow(-5px 0px 0px purple);">
   </div>
-  <div class='testcase'
+  <div class="testcase"
        style="left: 110px; top: 210px;
               filter: drop-shadow(0px 5px 0px rgba(128, 0, 128, 0.8));">
   </div>
-  <div class='testcase'
+  <div class="testcase"
        style="left: 210px; top: 210px;
               filter: drop-shadow(1px 10px 0px rgba(128, 0, 128, 0.4));">
   </div>
diff --git a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.dropShadow.tentative.html b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.dropShadow.tentative.html
index 22c6a6547f23..712716d9f01e 100644
--- a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.dropShadow.tentative.html
+++ b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.dropShadow.tentative.html
@@ -19,64 +19,64 @@
   ctx.fillStyle = 'crimson';
 
   // Parameter defaults.
-  ctx.filter = new CanvasFilter({filter: "dropShadow"});
+  ctx.filter = new CanvasFilter({filter: 'dropShadow'});
   ctx.fillRect(10, 10, 80, 80);
 
   // All parameters specified.
   ctx.filter = new CanvasFilter(
-    {filter: "dropShadow", dx: 15, dy: 10, stdDeviation: 5,
-     floodColor: "purple", floodOpacity: 0.7});
+    {filter: 'dropShadow', dx: 15, dy: 10, stdDeviation: 5,
+     floodColor: 'purple', floodOpacity: 0.7});
   ctx.fillRect(110, 10, 80, 80);
 
   // Named color.
   ctx.filter = new CanvasFilter(
-    {filter: "dropShadow", dx: 10, dy: 10, stdDeviation: 3,
-     floodColor: "purple"});
+    {filter: 'dropShadow', dx: 10, dy: 10, stdDeviation: 3,
+     floodColor: 'purple'});
   ctx.fillRect(10, 110, 80, 80);
 
   // System color.
   ctx.filter = new CanvasFilter(
-    {filter: "dropShadow", dx: 15, dy: 10, stdDeviation: 3,
-     floodColor: "LinkText"});
+    {filter: 'dropShadow', dx: 15, dy: 10, stdDeviation: 3,
+     floodColor: 'LinkText'});
   ctx.fillRect(110, 110, 80, 80);
 
   // No blur.
   ctx.filter = new CanvasFilter(
-    {filter: "dropShadow", dx: 10, dy: 15, stdDeviation: 0,
-     floodColor: "purple"});
+    {filter: 'dropShadow', dx: 10, dy: 15, stdDeviation: 0,
+     floodColor: 'purple'});
   ctx.fillRect(210, 110, 80, 80);
 
   // Numerical color.
   ctx.filter = new CanvasFilter(
-    {filter: "dropShadow", dx: 9, dy: 12, stdDeviation: 3,
-     floodColor: "rgba(20, 50, 130, 1)"});
+    {filter: 'dropShadow', dx: 9, dy: 12, stdDeviation: 3,
+     floodColor: 'rgba(20, 50, 130, 1)'});
   ctx.fillRect(310, 110, 80, 80);
 
   // Transparent floodColor.
   ctx.filter = new CanvasFilter(
-    {filter: "dropShadow", dx: 15, dy: 10, stdDeviation: 3,
-     floodColor: "rgba(20, 50, 130, 0.7)"});
+    {filter: 'dropShadow', dx: 15, dy: 10, stdDeviation: 3,
+     floodColor: 'rgba(20, 50, 130, 0.7)'});
   ctx.fillRect(410, 110, 80, 80);
 
   // Transparent floodColor and floodOpacity.
   ctx.filter = new CanvasFilter(
-    {filter: "dropShadow", dx: 15, dy: 10, stdDeviation: 3,
-     floodColor: "rgba(20, 50, 130, 0.7)", floodOpacity: 0.7});
+    {filter: 'dropShadow', dx: 15, dy: 10, stdDeviation: 3,
+     floodColor: 'rgba(20, 50, 130, 0.7)', floodOpacity: 0.7});
   ctx.fillRect(510, 110, 80, 80);
 
   // Degenerate parameter values.
   ctx.filter = new CanvasFilter(
-    {filter: "dropShadow", dx: [-5], dy: [], stdDeviation: null,
-     floodColor: "purple", floodOpacity: [2]});
+    {filter: 'dropShadow', dx: [-5], dy: [], stdDeviation: null,
+     floodColor: 'purple', floodOpacity: [2]});
   ctx.fillRect(10, 210, 80, 80);
 
   ctx.filter = new CanvasFilter(
-    {filter: "dropShadow", dx: null, dy: '5', stdDeviation: -5,
-     floodColor: "purple", floodOpacity: '0.8'});
+    {filter: 'dropShadow', dx: null, dy: '5', stdDeviation: -5,
+     floodColor: 'purple', floodOpacity: '0.8'});
   ctx.fillRect(110, 210, 80, 80);
 
   ctx.filter = new CanvasFilter(
-    {filter: "dropShadow", dx: true, dy: ['10'], stdDeviation: false,
-     floodColor: "purple", floodOpacity: ['0.4']});
+    {filter: 'dropShadow', dx: true, dy: ['10'], stdDeviation: false,
+     floodColor: 'purple', floodOpacity: ['0.4']});
   ctx.fillRect(210, 210, 80, 80);
 </script>
diff --git a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.tentative.html b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.tentative.html
index 3a32eb6a55a2..a4625db01977 100644
--- a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.tentative.html
+++ b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.tentative.html
@@ -22,11 +22,11 @@ _addTest(function(canvas, ctx) {
 _assert(ctx.filter == 'none', "ctx.filter == 'none'");
 ctx.filter = 'blur(5px)';
 _assert(ctx.filter == 'blur(5px)', "ctx.filter == 'blur(5px)'");
-ctx.filter = new CanvasFilter({filter: "gaussianBlur", stdDeviation: 5});
+ctx.filter = new CanvasFilter({filter: 'gaussianBlur', stdDeviation: 5});
 _assert(ctx.filter.toString() == '[object CanvasFilter]', "ctx.filter.toString() == '[object CanvasFilter]'");
 ctx.filter = new CanvasFilter([
-    {filter: "gaussianBlur", stdDeviation: 5},
-    {filter: "gaussianBlur", stdDeviation: 10}
+    {filter: 'gaussianBlur', stdDeviation: 5},
+    {filter: 'gaussianBlur', stdDeviation: 10}
 ]);
 _assert(ctx.filter.toString() == '[object CanvasFilter]', "ctx.filter.toString() == '[object CanvasFilter]'");
 var canvas2 = document.createElement('canvas');
@@ -37,8 +37,8 @@ ctx.filter = 'blur(5px)';
 _assert(ctx.filter == 'blur(5px)', "ctx.filter == 'blur(5px)'");
 ctx.filter = 'none';
 _assert(ctx.filter == 'none', "ctx.filter == 'none'");
-ctx.filter = new CanvasFilter({filter: "gaussianBlur", stdDeviation: 5});
-ctx.filter = "this string is not a filter and should do nothing";
+ctx.filter = new CanvasFilter({filter: 'gaussianBlur', stdDeviation: 5});
+ctx.filter = 'this string is not a filter and should do nothing';
 _assert(ctx.filter.toString() == '[object CanvasFilter]', "ctx.filter.toString() == '[object CanvasFilter]'");
 
 
diff --git a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.turbulence.inputTypes.tentative.html b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.turbulence.inputTypes.tentative.html
index 1f9d978ac8c2..64f909a7fdb2 100644
--- a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.turbulence.inputTypes.tentative.html
+++ b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.turbulence.inputTypes.tentative.html
@@ -27,7 +27,7 @@ const errorTestCases = [
   {baseFrequency: Infinity},
   {baseFrequency: undefined},
   {baseFrequency: -Infinity},
-  {baseFrequency: "test"},
+  {baseFrequency: 'test'},
 
   {numOctaves: {}},
   {numOctaves: -1},
@@ -36,7 +36,7 @@ const errorTestCases = [
   {numOctaves: undefined},
   {numOctaves: -Infinity},
   {numOctaves: [1, 1]},
-  {numOctaves: "test"},
+  {numOctaves: 'test'},
 
   {seed: {}},
   {seed: NaN},
@@ -44,7 +44,7 @@ const errorTestCases = [
   {seed: undefined},
   {seed: -Infinity},
   {seed: [1, 1]},
-  {seed: "test"},
+  {seed: 'test'},
 
   {stitchTiles: {}},
   {stitchTiles: NaN},
@@ -52,14 +52,14 @@ const errorTestCases = [
   {stitchTiles: undefined},
   {stitchTiles: -Infinity},
   {stitchTiles: [1, 1]},
-  {stitchTiles: "test"},
+  {stitchTiles: 'test'},
   {stitchTiles: null},
   {stitchTiles: []},
   {stitchTiles: [10]},
   {stitchTiles: 30},
   {stitchTiles: false},
   {stitchTiles: true},
-  {stitchTiles: "10"},
+  {stitchTiles: '10'},
   {stitchTiles: -1},
 
   {type: {}},
@@ -68,14 +68,14 @@ const errorTestCases = [
   {type: undefined},
   {type: -Infinity},
   {type: [1, 1]},
-  {type: "test"},
+  {type: 'test'},
   {type: null},
   {type: []},
   {type: [10]},
   {type: 30},
   {type: false},
   {type: true},
-  {type: "10"},
+  {type: '10'},
   {type: -1},
 ]
 
@@ -88,7 +88,7 @@ const workingTestCases = [
   {baseFrequency: 30},
   {baseFrequency: false},
   {baseFrequency: true},
-  {baseFrequency: "10"},
+  {baseFrequency: '10'},
 
   {numOctaves: null},
   {numOctaves: []},
@@ -96,7 +96,7 @@ const workingTestCases = [
   {numOctaves: 30},
   {numOctaves: false},
   {numOctaves: true},
-  {numOctaves: "10"},
+  {numOctaves: '10'},
 
   {seed: null},
   {seed: []},
@@ -104,23 +104,23 @@ const workingTestCases = [
   {seed: 30},
   {seed: false},
   {seed: true},
-  {seed: "10"},
+  {seed: '10'},
   {seed: -1},
 
-  {stitchTiles: "stitch"},
-  {stitchTiles: "noStitch"},
+  {stitchTiles: 'stitch'},
+  {stitchTiles: 'noStitch'},
 
-  {type: "fractalNoise"},
-  {type: "turbulence"},
+  {type: 'fractalNoise'},
+  {type: 'turbulence'},
 ]
 
 for (testCase of errorTestCases) {
-  const filterOptions = {...{filter: "turbulence"}, ...testCase};
+  const filterOptions = {...{filter: 'turbulence'}, ...testCase};
   assert_throws_js(TypeError, function() { new CanvasFilter(filterOptions); });
 }
 
 for (testCase of workingTestCases) {
-  const filterOptions = {...{filter: "turbulence"}, ...testCase};
+  const filterOptions = {...{filter: 'turbulence'}, ...testCase};
   _assert(new CanvasFilter(filterOptions) != null, "new CanvasFilter(filterOptions) != null");
 }
 
diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.blur.exceptions.tentative.html b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.blur.exceptions.tentative.html
index 6ce6fb633f8c..f5332780c82b 100644
--- a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.blur.exceptions.tentative.html
+++ b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.blur.exceptions.tentative.html
@@ -21,12 +21,12 @@ var canvas = new OffscreenCanvas(100, 50);
 var ctx = canvas.getContext('2d');
 
 await (function(canvas, ctx) {
-assert_throws_js(TypeError, function() { ctx.filter = new CanvasFilter({filter: "gaussianBlur"}); });
-assert_throws_js(TypeError, function() { ctx.filter = new CanvasFilter({filter: "gaussianBlur", stdDeviation: undefined}); });
-assert_throws_js(TypeError, function() { ctx.filter = new CanvasFilter({filter: "gaussianBlur", stdDeviation: "foo"}); });
-assert_throws_js(TypeError, function() { ctx.filter = new CanvasFilter({filter: "gaussianBlur", stdDeviation: [1,2]}); });
-assert_throws_js(TypeError, function() { ctx.filter = new CanvasFilter({filter: "gaussianBlur", stdDeviation: NaN}); });
-assert_throws_js(TypeError, function() { ctx.filter = new CanvasFilter({filter: "gaussianBlur", stdDeviation: {}}); });
+assert_throws_js(TypeError, function() { ctx.filter = new CanvasFilter({filter: 'gaussianBlur'}); });
+assert_throws_js(TypeError, function() { ctx.filter = new CanvasFilter({filter: 'gaussianBlur', stdDeviation: undefined}); });
+assert_throws_js(TypeError, function() { ctx.filter = new CanvasFilter({filter: 'gaussianBlur', stdDeviation: 'foo'}); });
+assert_throws_js(TypeError, function() { ctx.filter = new CanvasFilter({filter: 'gaussianBlur', stdDeviation: [1,2]}); });
+assert_throws_js(TypeError, function() { ctx.filter = new CanvasFilter({filter: 'gaussianBlur', stdDeviation: NaN}); });
+assert_throws_js(TypeError, function() { ctx.filter = new CanvasFilter({filter: 'gaussianBlur', stdDeviation: {}}); });
 })(canvas, ctx);
 t.done();
 
diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.blur.exceptions.tentative.worker.js b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.blur.exceptions.tentative.worker.js
index a44868f585c6..61f10308801c 100644
--- a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.blur.exceptions.tentative.worker.js
+++ b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.blur.exceptions.tentative.worker.js
@@ -16,12 +16,12 @@ t.step(function() {
 var canvas = new OffscreenCanvas(100, 50);
 var ctx = canvas.getContext('2d');
 
-assert_throws_js(TypeError, function() { ctx.filter = new CanvasFilter({filter: "gaussianBlur"}); });
-assert_throws_js(TypeError, function() { ctx.filter = new CanvasFilter({filter: "gaussianBlur", stdDeviation: undefined}); });
-assert_throws_js(TypeError, function() { ctx.filter = new CanvasFilter({filter: "gaussianBlur", stdDeviation: "foo"}); });
-assert_throws_js(TypeError, function() { ctx.filter = new CanvasFilter({filter: "gaussianBlur", stdDeviation: [1,2]}); });
-assert_throws_js(TypeError, function() { ctx.filter = new CanvasFilter({filter: "gaussianBlur", stdDeviation: NaN}); });
-assert_throws_js(TypeError, function() { ctx.filter = new CanvasFilter({filter: "gaussianBlur", stdDeviation: {}}); });
+assert_throws_js(TypeError, function() { ctx.filter = new CanvasFilter({filter: 'gaussianBlur'}); });
+assert_throws_js(TypeError, function() { ctx.filter = new CanvasFilter({filter: 'gaussianBlur', stdDeviation: undefined}); });
+assert_throws_js(TypeError, function() { ctx.filter = new CanvasFilter({filter: 'gaussianBlur', stdDeviation: 'foo'}); });
+assert_throws_js(TypeError, function() { ctx.filter = new CanvasFilter({filter: 'gaussianBlur', stdDeviation: [1,2]}); });
+assert_throws_js(TypeError, function() { ctx.filter = new CanvasFilter({filter: 'gaussianBlur', stdDeviation: NaN}); });
+assert_throws_js(TypeError, function() { ctx.filter = new CanvasFilter({filter: 'gaussianBlur', stdDeviation: {}}); });
 t.done();
 
 });
diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.colorMatrix.tentative.html b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.colorMatrix.tentative.html
index 3eda41776c0e..f3dd3037bb7a 100644
--- a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.colorMatrix.tentative.html
+++ b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.colorMatrix.tentative.html
@@ -21,44 +21,44 @@ var canvas = new OffscreenCanvas(100, 50);
 var ctx = canvas.getContext('2d');
 
 await (function(canvas, ctx) {
-assert_throws_js(TypeError, function() { new CanvasFilter({filter: "colorMatrix", values: undefined}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({filter: "colorMatrix", values: "foo"}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({filter: "colorMatrix", values: null}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({filter: "colorMatrix", values: [1, 2, 3]}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({filter: "colorMatrix", values: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, "a"]}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({filter: "colorMatrix", values: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, Infinity]}); });
-ctx.fillStyle = "#f00";
-ctx.filter = new CanvasFilter({filter: "colorMatrix", type: "hueRotate", values: 0});
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: 'colorMatrix', values: undefined}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: 'colorMatrix', values: 'foo'}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: 'colorMatrix', values: null}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: 'colorMatrix', values: [1, 2, 3]}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: 'colorMatrix', values: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 'a']}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: 'colorMatrix', values: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, Infinity]}); });
+ctx.fillStyle = '#f00';
+ctx.filter = new CanvasFilter({filter: 'colorMatrix', type: 'hueRotate', values: 0});
 ctx.fillRect(0, 0, 100, 50);
 _assertPixelApprox(canvas, 10,10, 255,0,0,255, 2);
-ctx.filter = new CanvasFilter({filter: "colorMatrix", type: "hueRotate", values: 90});
+ctx.filter = new CanvasFilter({filter: 'colorMatrix', type: 'hueRotate', values: 90});
 ctx.fillRect(0, 0, 100, 50);
 _assertPixelApprox(canvas, 10,10, 0,91,0,255, 2);
-ctx.filter = new CanvasFilter({filter: "colorMatrix", type: "hueRotate", values: 180});
+ctx.filter = new CanvasFilter({filter: 'colorMatrix', type: 'hueRotate', values: 180});
 ctx.fillRect(0, 0, 100, 50);
 _assertPixelApprox(canvas, 10,10, 0,109,109,255, 2);
-ctx.filter = new CanvasFilter({filter: "colorMatrix", type: "hueRotate", values: 270});
+ctx.filter = new CanvasFilter({filter: 'colorMatrix', type: 'hueRotate', values: 270});
 ctx.fillRect(0, 0, 100, 50);
 _assertPixelApprox(canvas, 10,10, 109,18,255,255, 2);
-ctx.filter = new CanvasFilter({filter: "colorMatrix", type: "saturate", values: 0.5});
+ctx.filter = new CanvasFilter({filter: 'colorMatrix', type: 'saturate', values: 0.5});
 ctx.fillRect(0, 0, 100, 50);
 _assertPixelApprox(canvas, 10,10, 155,27,27,255, 2);
 ctx.clearRect(0, 0, 100, 50);
-ctx.filter = new CanvasFilter({filter: "colorMatrix", type: "luminanceToAlpha"});
+ctx.filter = new CanvasFilter({filter: 'colorMatrix', type: 'luminanceToAlpha'});
 ctx.fillRect(0, 0, 100, 50);
 _assertPixelApprox(canvas, 10,10, 0,0,0,54, 2);
-ctx.filter = new CanvasFilter({filter: "colorMatrix", values: [
+ctx.filter = new CanvasFilter({filter: 'colorMatrix', values: [
         0, 0, 0, 0, 0,
         1, 1, 1, 1, 0,
         0, 0, 0, 0, 0,
         0, 0, 0, 1, 0
 ]});
 ctx.fillRect(0, 0, 50, 25);
-ctx.fillStyle = "#0f0";
+ctx.fillStyle = '#0f0';
 ctx.fillRect(50, 0, 50, 25);
-ctx.fillStyle = "#00f";
+ctx.fillStyle = '#00f';
 ctx.fillRect(0, 25, 50, 25);
-ctx.fillStyle = "#fff";
+ctx.fillStyle = '#fff';
 ctx.fillRect(50, 25, 50, 25);
 _assertPixelApprox(canvas, 10,10, 0,255,0,255, 2);
 _assertPixelApprox(canvas, 60,10, 0,255,0,255, 2);
diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.colorMatrix.tentative.worker.js b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.colorMatrix.tentative.worker.js
index 105f312b9cea..19d57b61e532 100644
--- a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.colorMatrix.tentative.worker.js
+++ b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.colorMatrix.tentative.worker.js
@@ -16,44 +16,44 @@ t.step(function() {
 var canvas = new OffscreenCanvas(100, 50);
 var ctx = canvas.getContext('2d');
 
-assert_throws_js(TypeError, function() { new CanvasFilter({filter: "colorMatrix", values: undefined}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({filter: "colorMatrix", values: "foo"}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({filter: "colorMatrix", values: null}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({filter: "colorMatrix", values: [1, 2, 3]}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({filter: "colorMatrix", values: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, "a"]}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({filter: "colorMatrix", values: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, Infinity]}); });
-ctx.fillStyle = "#f00";
-ctx.filter = new CanvasFilter({filter: "colorMatrix", type: "hueRotate", values: 0});
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: 'colorMatrix', values: undefined}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: 'colorMatrix', values: 'foo'}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: 'colorMatrix', values: null}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: 'colorMatrix', values: [1, 2, 3]}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: 'colorMatrix', values: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 'a']}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: 'colorMatrix', values: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, Infinity]}); });
+ctx.fillStyle = '#f00';
+ctx.filter = new CanvasFilter({filter: 'colorMatrix', type: 'hueRotate', values: 0});
 ctx.fillRect(0, 0, 100, 50);
 _assertPixelApprox(canvas, 10,10, 255,0,0,255, 2);
-ctx.filter = new CanvasFilter({filter: "colorMatrix", type: "hueRotate", values: 90});
+ctx.filter = new CanvasFilter({filter: 'colorMatrix', type: 'hueRotate', values: 90});
 ctx.fillRect(0, 0, 100, 50);
 _assertPixelApprox(canvas, 10,10, 0,91,0,255, 2);
-ctx.filter = new CanvasFilter({filter: "colorMatrix", type: "hueRotate", values: 180});
+ctx.filter = new CanvasFilter({filter: 'colorMatrix', type: 'hueRotate', values: 180});
 ctx.fillRect(0, 0, 100, 50);
 _assertPixelApprox(canvas, 10,10, 0,109,109,255, 2);
-ctx.filter = new CanvasFilter({filter: "colorMatrix", type: "hueRotate", values: 270});
+ctx.filter = new CanvasFilter({filter: 'colorMatrix', type: 'hueRotate', values: 270});
 ctx.fillRect(0, 0, 100, 50);
 _assertPixelApprox(canvas, 10,10, 109,18,255,255, 2);
-ctx.filter = new CanvasFilter({filter: "colorMatrix", type: "saturate", values: 0.5});
+ctx.filter = new CanvasFilter({filter: 'colorMatrix', type: 'saturate', values: 0.5});
 ctx.fillRect(0, 0, 100, 50);
 _assertPixelApprox(canvas, 10,10, 155,27,27,255, 2);
 ctx.clearRect(0, 0, 100, 50);
-ctx.filter = new CanvasFilter({filter: "colorMatrix", type: "luminanceToAlpha"});
+ctx.filter = new CanvasFilter({filter: 'colorMatrix', type: 'luminanceToAlpha'});
 ctx.fillRect(0, 0, 100, 50);
 _assertPixelApprox(canvas, 10,10, 0,0,0,54, 2);
-ctx.filter = new CanvasFilter({filter: "colorMatrix", values: [
+ctx.filter = new CanvasFilter({filter: 'colorMatrix', values: [
         0, 0, 0, 0, 0,
         1, 1, 1, 1, 0,
         0, 0, 0, 0, 0,
         0, 0, 0, 1, 0
 ]});
 ctx.fillRect(0, 0, 50, 25);
-ctx.fillStyle = "#0f0";
+ctx.fillStyle = '#0f0';
 ctx.fillRect(50, 0, 50, 25);
-ctx.fillStyle = "#00f";
+ctx.fillStyle = '#00f';
 ctx.fillRect(0, 25, 50, 25);
-ctx.fillStyle = "#fff";
+ctx.fillStyle = '#fff';
 ctx.fillRect(50, 25, 50, 25);
 _assertPixelApprox(canvas, 10,10, 0,255,0,255, 2);
 _assertPixelApprox(canvas, 60,10, 0,255,0,255, 2);
diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.componentTransfer.discrete.tentative.html b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.componentTransfer.discrete.tentative.html
index 7cb8b0dd1436..dd6fc9ee5ff1 100644
--- a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.componentTransfer.discrete.tentative.html
+++ b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.componentTransfer.discrete.tentative.html
@@ -42,10 +42,10 @@ function getColor(inputColor, tableValues) {
 tableValuesR = [0, 0, 1, 1];
 tableValuesG = [2, 0, 0.5, 3];
 tableValuesB = [1, -1, 5, 0];
-ctx.filter = new CanvasFilter({filter: "componentTransfer",
-    funcR: {type: "discrete", tableValues: tableValuesR},
-    funcG: {type: "discrete", tableValues: tableValuesG},
-    funcB: {type: "discrete", tableValues: tableValuesB},
+ctx.filter = new CanvasFilter({filter: 'componentTransfer',
+    funcR: {type: 'discrete', tableValues: tableValuesR},
+    funcG: {type: 'discrete', tableValues: tableValuesG},
+    funcB: {type: 'discrete', tableValues: tableValuesB},
 });
 
 const inputColors = [
diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.componentTransfer.discrete.tentative.worker.js b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.componentTransfer.discrete.tentative.worker.js
index f1274f14253c..79a5cd2475ca 100644
--- a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.componentTransfer.discrete.tentative.worker.js
+++ b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.componentTransfer.discrete.tentative.worker.js
@@ -37,10 +37,10 @@ function getColor(inputColor, tableValues) {
 tableValuesR = [0, 0, 1, 1];
 tableValuesG = [2, 0, 0.5, 3];
 tableValuesB = [1, -1, 5, 0];
-ctx.filter = new CanvasFilter({filter: "componentTransfer",
-    funcR: {type: "discrete", tableValues: tableValuesR},
-    funcG: {type: "discrete", tableValues: tableValuesG},
-    funcB: {type: "discrete", tableValues: tableValuesB},
+ctx.filter = new CanvasFilter({filter: 'componentTransfer',
+    funcR: {type: 'discrete', tableValues: tableValuesR},
+    funcG: {type: 'discrete', tableValues: tableValuesG},
+    funcB: {type: 'discrete', tableValues: tableValuesB},
 });
 
 const inputColors = [
diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.componentTransfer.gamma.tentative.html b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.componentTransfer.gamma.tentative.html
index 388fdca6f9d8..f2a9fcfd49a4 100644
--- a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.componentTransfer.gamma.tentative.html
+++ b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.componentTransfer.gamma.tentative.html
@@ -33,10 +33,10 @@ function getColor(inputColor, amplitude, exponent, offset) {
 const amplitudes = [2, 1.1, 0.5];
 const exponents = [5, 3, 1];
 const offsets = [0.25, 0, 0.5];
-ctx.filter = new CanvasFilter({filter: "componentTransfer",
-    funcR: {type: "gamma", amplitude: amplitudes[0], exponent: exponents[0], offset: offsets[0]},
-    funcG: {type: "gamma", amplitude: amplitudes[1], exponent: exponents[1], offset: offsets[1]},
-    funcB: {type: "gamma", amplitude: amplitudes[2], exponent: exponents[2], offset: offsets[2]},
+ctx.filter = new CanvasFilter({filter: 'componentTransfer',
+    funcR: {type: 'gamma', amplitude: amplitudes[0], exponent: exponents[0], offset: offsets[0]},
+    funcG: {type: 'gamma', amplitude: amplitudes[1], exponent: exponents[1], offset: offsets[1]},
+    funcB: {type: 'gamma', amplitude: amplitudes[2], exponent: exponents[2], offset: offsets[2]},
 });
 
 const inputColors = [
diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.componentTransfer.gamma.tentative.worker.js b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.componentTransfer.gamma.tentative.worker.js
index 14bf50f89dde..a36fa19a5efa 100644
--- a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.componentTransfer.gamma.tentative.worker.js
+++ b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.componentTransfer.gamma.tentative.worker.js
@@ -28,10 +28,10 @@ function getColor(inputColor, amplitude, exponent, offset) {
 const amplitudes = [2, 1.1, 0.5];
 const exponents = [5, 3, 1];
 const offsets = [0.25, 0, 0.5];
-ctx.filter = new CanvasFilter({filter: "componentTransfer",
-    funcR: {type: "gamma", amplitude: amplitudes[0], exponent: exponents[0], offset: offsets[0]},
-    funcG: {type: "gamma", amplitude: amplitudes[1], exponent: exponents[1], offset: offsets[1]},
-    funcB: {type: "gamma", amplitude: amplitudes[2], exponent: exponents[2], offset: offsets[2]},
+ctx.filter = new CanvasFilter({filter: 'componentTransfer',
+    funcR: {type: 'gamma', amplitude: amplitudes[0], exponent: exponents[0], offset: offsets[0]},
+    funcG: {type: 'gamma', amplitude: amplitudes[1], exponent: exponents[1], offset: offsets[1]},
+    funcB: {type: 'gamma', amplitude: amplitudes[2], exponent: exponents[2], offset: offsets[2]},
 });
 
 const inputColors = [
diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.componentTransfer.identity.tentative.html b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.componentTransfer.identity.tentative.html
index 44eb7184956b..33aae01eb056 100644
--- a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.componentTransfer.identity.tentative.html
+++ b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.componentTransfer.identity.tentative.html
@@ -21,10 +21,10 @@ var canvas = new OffscreenCanvas(100, 50);
 var ctx = canvas.getContext('2d');
 
 await (function(canvas, ctx) {
-ctx.filter = new CanvasFilter({filter: "componentTransfer",
-    funcR: {type: "identity"},
-    funcG: {type: "identity"},
-    funcB: {type: "identity"},
+ctx.filter = new CanvasFilter({filter: 'componentTransfer',
+    funcR: {type: 'identity'},
+    funcG: {type: 'identity'},
+    funcB: {type: 'identity'},
 });
 
 const inputColors = [
diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.componentTransfer.identity.tentative.worker.js b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.componentTransfer.identity.tentative.worker.js
index ae749673f436..7236c7087a17 100644
--- a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.componentTransfer.identity.tentative.worker.js
+++ b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.componentTransfer.identity.tentative.worker.js
@@ -16,10 +16,10 @@ t.step(function() {
 var canvas = new OffscreenCanvas(100, 50);
 var ctx = canvas.getContext('2d');
 
-ctx.filter = new CanvasFilter({filter: "componentTransfer",
-    funcR: {type: "identity"},
-    funcG: {type: "identity"},
-    funcB: {type: "identity"},
+ctx.filter = new CanvasFilter({filter: 'componentTransfer',
+    funcR: {type: 'identity'},
+    funcG: {type: 'identity'},
+    funcB: {type: 'identity'},
 });
 
 const inputColors = [
diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.componentTransfer.linear.tentative.html b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.componentTransfer.linear.tentative.html
index d24a9e8608d1..23731a1286ce 100644
--- a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.componentTransfer.linear.tentative.html
+++ b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.componentTransfer.linear.tentative.html
@@ -32,10 +32,10 @@ function getColor(inputColor, slopes, intercepts) {
 
 const slopes = [0.5, 1.2, -0.2];
 const intercepts = [0.25, 0, 0.5];
-ctx.filter = new CanvasFilter({filter: "componentTransfer",
-    funcR: {type: "linear", slope: slopes[0], intercept: intercepts[0]},
-    funcG: {type: "linear", slope: slopes[1], intercept: intercepts[1]},
-    funcB: {type: "linear", slope: slopes[2], intercept: intercepts[2]},
+ctx.filter = new CanvasFilter({filter: 'componentTransfer',
+    funcR: {type: 'linear', slope: slopes[0], intercept: intercepts[0]},
+    funcG: {type: 'linear', slope: slopes[1], intercept: intercepts[1]},
+    funcB: {type: 'linear', slope: slopes[2], intercept: intercepts[2]},
 });
 
 const inputColors = [
diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.componentTransfer.linear.tentative.worker.js b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.componentTransfer.linear.tentative.worker.js
index 5117d4a1b3b0..9a4499d4d6b7 100644
--- a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.componentTransfer.linear.tentative.worker.js
+++ b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.componentTransfer.linear.tentative.worker.js
@@ -27,10 +27,10 @@ function getColor(inputColor, slopes, intercepts) {
 
 const slopes = [0.5, 1.2, -0.2];
 const intercepts = [0.25, 0, 0.5];
-ctx.filter = new CanvasFilter({filter: "componentTransfer",
-    funcR: {type: "linear", slope: slopes[0], intercept: intercepts[0]},
-    funcG: {type: "linear", slope: slopes[1], intercept: intercepts[1]},
-    funcB: {type: "linear", slope: slopes[2], intercept: intercepts[2]},
+ctx.filter = new CanvasFilter({filter: 'componentTransfer',
+    funcR: {type: 'linear', slope: slopes[0], intercept: intercepts[0]},
+    funcG: {type: 'linear', slope: slopes[1], intercept: intercepts[1]},
+    funcB: {type: 'linear', slope: slopes[2], intercept: intercepts[2]},
 });
 
 const inputColors = [
diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.componentTransfer.table.tentative.html b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.componentTransfer.table.tentative.html
index a704557cc545..c11e6adb9109 100644
--- a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.componentTransfer.table.tentative.html
+++ b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.componentTransfer.table.tentative.html
@@ -42,10 +42,10 @@ function getColor(inputColor, tableValues) {
 tableValuesR = [0, 0, 1, 1];
 tableValuesG = [2, 0, 0.5, 3];
 tableValuesB = [1, -1, 5, 0];
-ctx.filter = new CanvasFilter({filter: "componentTransfer",
-    funcR: {type: "table", tableValues: tableValuesR},
-    funcG: {type: "table", tableValues: tableValuesG},
-    funcB: {type: "table", tableValues: tableValuesB},
+ctx.filter = new CanvasFilter({filter: 'componentTransfer',
+    funcR: {type: 'table', tableValues: tableValuesR},
+    funcG: {type: 'table', tableValues: tableValuesG},
+    funcB: {type: 'table', tableValues: tableValuesB},
 });
 
 const inputColors = [
diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.componentTransfer.table.tentative.worker.js b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.componentTransfer.table.tentative.worker.js
index e2463eb9e766..8ff791d3bb98 100644
--- a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.componentTransfer.table.tentative.worker.js
+++ b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.componentTransfer.table.tentative.worker.js
@@ -37,10 +37,10 @@ function getColor(inputColor, tableValues) {
 tableValuesR = [0, 0, 1, 1];
 tableValuesG = [2, 0, 0.5, 3];
 tableValuesB = [1, -1, 5, 0];
-ctx.filter = new CanvasFilter({filter: "componentTransfer",
-    funcR: {type: "table", tableValues: tableValuesR},
-    funcG: {type: "table", tableValues: tableValuesG},
-    funcB: {type: "table", tableValues: tableValuesB},
+ctx.filter = new CanvasFilter({filter: 'componentTransfer',
+    funcR: {type: 'table', tableValues: tableValuesR},
+    funcG: {type: 'table', tableValues: tableValuesG},
+    funcB: {type: 'table', tableValues: tableValuesB},
 });
 
 const inputColors = [
diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.convolveMatrix.exceptions.tentative.html b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.convolveMatrix.exceptions.tentative.html
index 0a6bddc56d7b..c4b6df8e0db0 100644
--- a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.convolveMatrix.exceptions.tentative.html
+++ b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.convolveMatrix.exceptions.tentative.html
@@ -21,23 +21,23 @@ var canvas = new OffscreenCanvas(100, 50);
 var ctx = canvas.getContext('2d');
 
 await (function(canvas, ctx) {
-assert_throws_js(TypeError, function() { new CanvasFilter({filter: "convolveMatrix"}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({filter: "convolveMatrix", divisor: 2}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({filter: "convolveMatrix", kernelMatrix: null}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({filter: "convolveMatrix", kernelMatrix: 1}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({filter: "convolveMatrix", kernelMatrix: [[1, 0], [0]]}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({filter: "convolveMatrix", kernelMatrix: [[1, "a"], [0]]}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({filter: "convolveMatrix", kernelMatrix: [[1, 0], 0]}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({filter: "convolveMatrix", kernelMatrix: [[1, 0], [0, Infinity]]}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({filter: "convolveMatrix", kernelMatrix: []}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({filter: "convolveMatrix", kernelMatrix: [1]}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({filter: "convolveMatrix", kernelMatrix: [1, 2, 3, 4]}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({filter: "convolveMatrix", kernelMatrix: [[], []]}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({filter: "convolveMatrix", kernelMatrix: [[1, 2], []]}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({filter: "convolveMatrix", kernelMatrix: [[], [1, 2]]}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: 'convolveMatrix'}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: 'convolveMatrix', divisor: 2}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: 'convolveMatrix', kernelMatrix: null}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: 'convolveMatrix', kernelMatrix: 1}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: 'convolveMatrix', kernelMatrix: [[1, 0], [0]]}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: 'convolveMatrix', kernelMatrix: [[1, 'a'], [0]]}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: 'convolveMatrix', kernelMatrix: [[1, 0], 0]}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: 'convolveMatrix', kernelMatrix: [[1, 0], [0, Infinity]]}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: 'convolveMatrix', kernelMatrix: []}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: 'convolveMatrix', kernelMatrix: [1]}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: 'convolveMatrix', kernelMatrix: [1, 2, 3, 4]}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: 'convolveMatrix', kernelMatrix: [[], []]}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: 'convolveMatrix', kernelMatrix: [[1, 2], []]}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: 'convolveMatrix', kernelMatrix: [[], [1, 2]]}); });
 // This should not throw an error
-ctx.filter = new CanvasFilter({filter: "convolveMatrix", kernelMatrix: [[]]});
-ctx.filter = new CanvasFilter({filter: "convolveMatrix", kernelMatrix: [[1]]});
+ctx.filter = new CanvasFilter({filter: 'convolveMatrix', kernelMatrix: [[]]});
+ctx.filter = new CanvasFilter({filter: 'convolveMatrix', kernelMatrix: [[1]]});
 })(canvas, ctx);
 t.done();
 
diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.convolveMatrix.exceptions.tentative.worker.js b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.convolveMatrix.exceptions.tentative.worker.js
index bce4c0be158a..f7e616e7a63f 100644
--- a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.convolveMatrix.exceptions.tentative.worker.js
+++ b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.convolveMatrix.exceptions.tentative.worker.js
@@ -16,23 +16,23 @@ t.step(function() {
 var canvas = new OffscreenCanvas(100, 50);
 var ctx = canvas.getContext('2d');
 
-assert_throws_js(TypeError, function() { new CanvasFilter({filter: "convolveMatrix"}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({filter: "convolveMatrix", divisor: 2}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({filter: "convolveMatrix", kernelMatrix: null}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({filter: "convolveMatrix", kernelMatrix: 1}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({filter: "convolveMatrix", kernelMatrix: [[1, 0], [0]]}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({filter: "convolveMatrix", kernelMatrix: [[1, "a"], [0]]}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({filter: "convolveMatrix", kernelMatrix: [[1, 0], 0]}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({filter: "convolveMatrix", kernelMatrix: [[1, 0], [0, Infinity]]}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({filter: "convolveMatrix", kernelMatrix: []}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({filter: "convolveMatrix", kernelMatrix: [1]}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({filter: "convolveMatrix", kernelMatrix: [1, 2, 3, 4]}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({filter: "convolveMatrix", kernelMatrix: [[], []]}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({filter: "convolveMatrix", kernelMatrix: [[1, 2], []]}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({filter: "convolveMatrix", kernelMatrix: [[], [1, 2]]}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: 'convolveMatrix'}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: 'convolveMatrix', divisor: 2}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: 'convolveMatrix', kernelMatrix: null}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: 'convolveMatrix', kernelMatrix: 1}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: 'convolveMatrix', kernelMatrix: [[1, 0], [0]]}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: 'convolveMatrix', kernelMatrix: [[1, 'a'], [0]]}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: 'convolveMatrix', kernelMatrix: [[1, 0], 0]}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: 'convolveMatrix', kernelMatrix: [[1, 0], [0, Infinity]]}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: 'convolveMatrix', kernelMatrix: []}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: 'convolveMatrix', kernelMatrix: [1]}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: 'convolveMatrix', kernelMatrix: [1, 2, 3, 4]}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: 'convolveMatrix', kernelMatrix: [[], []]}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: 'convolveMatrix', kernelMatrix: [[1, 2], []]}); });
+assert_throws_js(TypeError, function() { new CanvasFilter({filter: 'convolveMatrix', kernelMatrix: [[], [1, 2]]}); });
 // This should not throw an error
-ctx.filter = new CanvasFilter({filter: "convolveMatrix", kernelMatrix: [[]]});
-ctx.filter = new CanvasFilter({filter: "convolveMatrix", kernelMatrix: [[1]]});
+ctx.filter = new CanvasFilter({filter: 'convolveMatrix', kernelMatrix: [[]]});
+ctx.filter = new CanvasFilter({filter: 'convolveMatrix', kernelMatrix: [[1]]});
 t.done();
 
 });
diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.dropShadow.tentative-expected.html b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.dropShadow.tentative-expected.html
index 90f406fed9fd..62226d7d81fb 100644
--- a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.dropShadow.tentative-expected.html
+++ b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.dropShadow.tentative-expected.html
@@ -22,52 +22,52 @@
 </style>
 
 <div style="position: relative">
-  <div class='background' style="top: 0px;"></div>
-  <div class='background' style="top: 100px;"></div>
-  <div class='background' style="top: 200px;"></div>
+  <div class="background" style="top: 0px;"></div>
+  <div class="background" style="top: 100px;"></div>
+  <div class="background" style="top: 200px;"></div>
 
-  <div class='testcase'
+  <div class="testcase"
        style="left: 10px; top: 10px;
               filter: drop-shadow(2px 2px 2px black);">
   </div>
-  <div class='testcase'
+  <div class="testcase"
        style="left: 110px; top: 10px;
               filter: drop-shadow(15px 10px 5px rgba(128, 0, 128, 0.7));">
   </div>
-  <div class='testcase'
+  <div class="testcase"
        style="left: 10px; top: 110px;
               filter: drop-shadow(10px 10px 3px purple)">
   </div>
-  <div class='testcase'
+  <div class="testcase"
        style="left: 110px; top: 110px;
               filter: drop-shadow(15px 10px 3px LinkText)">
   </div>
-  <div class='testcase'
+  <div class="testcase"
        style="left: 210px; top: 110px;
               filter: drop-shadow(10px 15px 0px purple)">
   </div>
-  <div class='testcase'
+  <div class="testcase"
        style="left: 310px; top: 110px;
               filter: drop-shadow(9px 12px 3px rgba(20, 50, 130, 1))">
   </div>
-  <div class='testcase'
+  <div class="testcase"
        style="left: 410px; top: 110px;
               filter: drop-shadow(15px 10px 3px rgba(20, 50, 130, 0.7))">
   </div>
-  <div class='testcase'
+  <div class="testcase"
        style="left: 510px; top: 110px;
               filter: drop-shadow(15px 10px 3px rgba(20, 50, 130, 0.49))">
   </div>
 
-  <div class='testcase'
+  <div class="testcase"
        style="left: 10px; top: 210px;
               filter: drop-shadow(-5px 0px 0px purple);">
   </div>
-  <div class='testcase'
+  <div class="testcase"
        style="left: 110px; top: 210px;
               filter: drop-shadow(0px 5px 0px rgba(128, 0, 128, 0.8));">
   </div>
-  <div class='testcase'
+  <div class="testcase"
        style="left: 210px; top: 210px;
               filter: drop-shadow(1px 10px 0px rgba(128, 0, 128, 0.4));">
   </div>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.dropShadow.tentative.html b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.dropShadow.tentative.html
index 04cf86d204ce..043265279054 100644
--- a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.dropShadow.tentative.html
+++ b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.dropShadow.tentative.html
@@ -19,65 +19,65 @@
   ctx.fillStyle = 'crimson';
 
   // Parameter defaults.
-  ctx.filter = new CanvasFilter({filter: "dropShadow"});
+  ctx.filter = new CanvasFilter({filter: 'dropShadow'});
   ctx.fillRect(10, 10, 80, 80);
 
   // All parameters specified.
   ctx.filter = new CanvasFilter(
-    {filter: "dropShadow", dx: 15, dy: 10, stdDeviation: 5,
-     floodColor: "purple", floodOpacity: 0.7});
+    {filter: 'dropShadow', dx: 15, dy: 10, stdDeviation: 5,
+     floodColor: 'purple', floodOpacity: 0.7});
   ctx.fillRect(110, 10, 80, 80);
 
   // Named color.
   ctx.filter = new CanvasFilter(
-    {filter: "dropShadow", dx: 10, dy: 10, stdDeviation: 3,
-     floodColor: "purple"});
+    {filter: 'dropShadow', dx: 10, dy: 10, stdDeviation: 3,
+     floodColor: 'purple'});
   ctx.fillRect(10, 110, 80, 80);
 
   // System color.
   ctx.filter = new CanvasFilter(
-    {filter: "dropShadow", dx: 15, dy: 10, stdDeviation: 3,
-     floodColor: "LinkText"});
+    {filter: 'dropShadow', dx: 15, dy: 10, stdDeviation: 3,
+     floodColor: 'LinkText'});
   ctx.fillRect(110, 110, 80, 80);
 
   // No blur.
   ctx.filter = new CanvasFilter(
-    {filter: "dropShadow", dx: 10, dy: 15, stdDeviation: 0,
-     floodColor: "purple"});
+    {filter: 'dropShadow', dx: 10, dy: 15, stdDeviation: 0,
+     floodColor: 'purple'});
   ctx.fillRect(210, 110, 80, 80);
 
   // Numerical color.
   ctx.filter = new CanvasFilter(
-    {filter: "dropShadow", dx: 9, dy: 12, stdDeviation: 3,
-     floodColor: "rgba(20, 50, 130, 1)"});
+    {filter: 'dropShadow', dx: 9, dy: 12, stdDeviation: 3,
+     floodColor: 'rgba(20, 50, 130, 1)'});
   ctx.fillRect(310, 110, 80, 80);
 
   // Transparent floodColor.
   ctx.filter = new CanvasFilter(
-    {filter: "dropShadow", dx: 15, dy: 10, stdDeviation: 3,
-     floodColor: "rgba(20, 50, 130, 0.7)"});
+    {filter: 'dropShadow', dx: 15, dy: 10, stdDeviation: 3,
+     floodColor: 'rgba(20, 50, 130, 0.7)'});
   ctx.fillRect(410, 110, 80, 80);
 
   // Transparent floodColor and floodOpacity.
   ctx.filter = new CanvasFilter(
-    {filter: "dropShadow", dx: 15, dy: 10, stdDeviation: 3,
-     floodColor: "rgba(20, 50, 130, 0.7)", floodOpacity: 0.7});
+    {filter: 'dropShadow', dx: 15, dy: 10, stdDeviation: 3,
+     floodColor: 'rgba(20, 50, 130, 0.7)', floodOpacity: 0.7});
   ctx.fillRect(510, 110, 80, 80);
 
   // Degenerate parameter values.
   ctx.filter = new CanvasFilter(
-    {filter: "dropShadow", dx: [-5], dy: [], stdDeviation: null,
-     floodColor: "purple", floodOpacity: [2]});
+    {filter: 'dropShadow', dx: [-5], dy: [], stdDeviation: null,
+     floodColor: 'purple', floodOpacity: [2]});
   ctx.fillRect(10, 210, 80, 80);
 
   ctx.filter = new CanvasFilter(
-    {filter: "dropShadow", dx: null, dy: '5', stdDeviation: -5,
-     floodColor: "purple", floodOpacity: '0.8'});
+    {filter: 'dropShadow', dx: null, dy: '5', stdDeviation: -5,
+     floodColor: 'purple', floodOpacity: '0.8'});
   ctx.fillRect(110, 210, 80, 80);
 
   ctx.filter = new CanvasFilter(
-    {filter: "dropShadow", dx: true, dy: ['10'], stdDeviation: false,
-     floodColor: "purple", floodOpacity: ['0.4']});
+    {filter: 'dropShadow', dx: true, dy: ['10'], stdDeviation: false,
+     floodColor: 'purple', floodOpacity: ['0.4']});
   ctx.fillRect(210, 210, 80, 80);
 
   const canvas = document.getElementById("canvas");
diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.dropShadow.tentative.w.html b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.dropShadow.tentative.w.html
index 8d5e2da1586a..de72f5fe3d9f 100644
--- a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.dropShadow.tentative.w.html
+++ b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.dropShadow.tentative.w.html
@@ -21,65 +21,65 @@
     ctx.fillStyle = 'crimson';
 
     // Parameter defaults.
-    ctx.filter = new CanvasFilter({filter: "dropShadow"});
+    ctx.filter = new CanvasFilter({filter: 'dropShadow'});
     ctx.fillRect(10, 10, 80, 80);
 
     // All parameters specified.
     ctx.filter = new CanvasFilter(
-      {filter: "dropShadow", dx: 15, dy: 10, stdDeviation: 5,
-       floodColor: "purple", floodOpacity: 0.7});
+      {filter: 'dropShadow', dx: 15, dy: 10, stdDeviation: 5,
+       floodColor: 'purple', floodOpacity: 0.7});
     ctx.fillRect(110, 10, 80, 80);
 
     // Named color.
     ctx.filter = new CanvasFilter(
-      {filter: "dropShadow", dx: 10, dy: 10, stdDeviation: 3,
-       floodColor: "purple"});
+      {filter: 'dropShadow', dx: 10, dy: 10, stdDeviation: 3,
+       floodColor: 'purple'});
     ctx.fillRect(10, 110, 80, 80);
 
     // System color.
     ctx.filter = new CanvasFilter(
-      {filter: "dropShadow", dx: 15, dy: 10, stdDeviation: 3,
-       floodColor: "LinkText"});
+      {filter: 'dropShadow', dx: 15, dy: 10, stdDeviation: 3,
+       floodColor: 'LinkText'});
     ctx.fillRect(110, 110, 80, 80);
 
     // No blur.
     ctx.filter = new CanvasFilter(
-      {filter: "dropShadow", dx: 10, dy: 15, stdDeviation: 0,
-       floodColor: "purple"});
+      {filter: 'dropShadow', dx: 10, dy: 15, stdDeviation: 0,
+       floodColor: 'purple'});
     ctx.fillRect(210, 110, 80, 80);
 
     // Numerical color.
     ctx.filter = new CanvasFilter(
-      {filter: "dropShadow", dx: 9, dy: 12, stdDeviation: 3,
-       floodColor: "rgba(20, 50, 130, 1)"});
+      {filter: 'dropShadow', dx: 9, dy: 12, stdDeviation: 3,
+       floodColor: 'rgba(20, 50, 130, 1)'});
     ctx.fillRect(310, 110, 80, 80);
 
     // Transparent floodColor.
     ctx.filter = new CanvasFilter(
-      {filter: "dropShadow", dx: 15, dy: 10, stdDeviation: 3,
-       floodColor: "rgba(20, 50, 130, 0.7)"});
+      {filter: 'dropShadow', dx: 15, dy: 10, stdDeviation: 3,
+       floodColor: 'rgba(20, 50, 130, 0.7)'});
     ctx.fillRect(410, 110, 80, 80);
 
     // Transparent floodColor and floodOpacity.
     ctx.filter = new CanvasFilter(
-      {filter: "dropShadow", dx: 15, dy: 10, stdDeviation: 3,
-       floodColor: "rgba(20, 50, 130, 0.7)", floodOpacity: 0.7});
+      {filter: 'dropShadow', dx: 15, dy: 10, stdDeviation: 3,
+       floodColor: 'rgba(20, 50, 130, 0.7)', floodOpacity: 0.7});
     ctx.fillRect(510, 110, 80, 80);
 
     // Degenerate parameter values.
     ctx.filter = new CanvasFilter(
-      {filter: "dropShadow", dx: [-5], dy: [], stdDeviation: null,
-       floodColor: "purple", floodOpacity: [2]});
+      {filter: 'dropShadow', dx: [-5], dy: [], stdDeviation: null,
+       floodColor: 'purple', floodOpacity: [2]});
     ctx.fillRect(10, 210, 80, 80);
 
     ctx.filter = new CanvasFilter(
-      {filter: "dropShadow", dx: null, dy: '5', stdDeviation: -5,
-       floodColor: "purple", floodOpacity: '0.8'});
+      {filter: 'dropShadow', dx: null, dy: '5', stdDeviation: -5,
+       floodColor: 'purple', floodOpacity: '0.8'});
     ctx.fillRect(110, 210, 80, 80);
 
     ctx.filter = new CanvasFilter(
-      {filter: "dropShadow", dx: true, dy: ['10'], stdDeviation: false,
-       floodColor: "purple", floodOpacity: ['0.4']});
+      {filter: 'dropShadow', dx: true, dy: ['10'], stdDeviation: false,
+       floodColor: 'purple', floodOpacity: ['0.4']});
     ctx.fillRect(210, 210, 80, 80);
 
     const bitmap = oc.transferToImageBitmap();
diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.tentative.html b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.tentative.html
index 75d369cad2f9..4d80dddf0071 100644
--- a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.tentative.html
+++ b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.tentative.html
@@ -24,11 +24,11 @@ await (function(canvas, ctx) {
 _assert(ctx.filter == 'none', "ctx.filter == 'none'");
 ctx.filter = 'blur(5px)';
 _assert(ctx.filter == 'blur(5px)', "ctx.filter == 'blur(5px)'");
-ctx.filter = new CanvasFilter({filter: "gaussianBlur", stdDeviation: 5});
+ctx.filter = new CanvasFilter({filter: 'gaussianBlur', stdDeviation: 5});
 _assert(ctx.filter.toString() == '[object CanvasFilter]', "ctx.filter.toString() == '[object CanvasFilter]'");
 ctx.filter = new CanvasFilter([
-    {filter: "gaussianBlur", stdDeviation: 5},
-    {filter: "gaussianBlur", stdDeviation: 10}
+    {filter: 'gaussianBlur', stdDeviation: 5},
+    {filter: 'gaussianBlur', stdDeviation: 10}
 ]);
 _assert(ctx.filter.toString() == '[object CanvasFilter]', "ctx.filter.toString() == '[object CanvasFilter]'");
 var canvas2 = new OffscreenCanvas(100, 50);
@@ -39,8 +39,8 @@ ctx.filter = 'blur(5px)';
 _assert(ctx.filter == 'blur(5px)', "ctx.filter == 'blur(5px)'");
 ctx.filter = 'none';
 _assert(ctx.filter == 'none', "ctx.filter == 'none'");
-ctx.filter = new CanvasFilter({filter: "gaussianBlur", stdDeviation: 5});
-ctx.filter = "this string is not a filter and should do nothing";
+ctx.filter = new CanvasFilter({filter: 'gaussianBlur', stdDeviation: 5});
+ctx.filter = 'this string is not a filter and should do nothing';
 _assert(ctx.filter.toString() == '[object CanvasFilter]', "ctx.filter.toString() == '[object CanvasFilter]'");
 })(canvas, ctx);
 t.done();
diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.tentative.worker.js b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.tentative.worker.js
index 30772a39d102..48c4a0448d95 100644
--- a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.tentative.worker.js
+++ b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.tentative.worker.js
@@ -19,11 +19,11 @@ var ctx = canvas.getContext('2d');
 _assert(ctx.filter == 'none', "ctx.filter == 'none'");
 ctx.filter = 'blur(5px)';
 _assert(ctx.filter == 'blur(5px)', "ctx.filter == 'blur(5px)'");
-ctx.filter = new CanvasFilter({filter: "gaussianBlur", stdDeviation: 5});
+ctx.filter = new CanvasFilter({filter: 'gaussianBlur', stdDeviation: 5});
 _assert(ctx.filter.toString() == '[object CanvasFilter]', "ctx.filter.toString() == '[object CanvasFilter]'");
 ctx.filter = new CanvasFilter([
-    {filter: "gaussianBlur", stdDeviation: 5},
-    {filter: "gaussianBlur", stdDeviation: 10}
+    {filter: 'gaussianBlur', stdDeviation: 5},
+    {filter: 'gaussianBlur', stdDeviation: 10}
 ]);
 _assert(ctx.filter.toString() == '[object CanvasFilter]', "ctx.filter.toString() == '[object CanvasFilter]'");
 var canvas2 = new OffscreenCanvas(100, 50);
@@ -34,8 +34,8 @@ ctx.filter = 'blur(5px)';
 _assert(ctx.filter == 'blur(5px)', "ctx.filter == 'blur(5px)'");
 ctx.filter = 'none';
 _assert(ctx.filter == 'none', "ctx.filter == 'none'");
-ctx.filter = new CanvasFilter({filter: "gaussianBlur", stdDeviation: 5});
-ctx.filter = "this string is not a filter and should do nothing";
+ctx.filter = new CanvasFilter({filter: 'gaussianBlur', stdDeviation: 5});
+ctx.filter = 'this string is not a filter and should do nothing';
 _assert(ctx.filter.toString() == '[object CanvasFilter]', "ctx.filter.toString() == '[object CanvasFilter]'");
 t.done();
 
diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.turbulence.inputTypes.tentative.html b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.turbulence.inputTypes.tentative.html
index 610dca9feaf5..2ed61e66d033 100644
--- a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.turbulence.inputTypes.tentative.html
+++ b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.turbulence.inputTypes.tentative.html
@@ -29,7 +29,7 @@ const errorTestCases = [
   {baseFrequency: Infinity},
   {baseFrequency: undefined},
   {baseFrequency: -Infinity},
-  {baseFrequency: "test"},
+  {baseFrequency: 'test'},
 
   {numOctaves: {}},
   {numOctaves: -1},
@@ -38,7 +38,7 @@ const errorTestCases = [
   {numOctaves: undefined},
   {numOctaves: -Infinity},
   {numOctaves: [1, 1]},
-  {numOctaves: "test"},
+  {numOctaves: 'test'},
 
   {seed: {}},
   {seed: NaN},
@@ -46,7 +46,7 @@ const errorTestCases = [
   {seed: undefined},
   {seed: -Infinity},
   {seed: [1, 1]},
-  {seed: "test"},
+  {seed: 'test'},
 
   {stitchTiles: {}},
   {stitchTiles: NaN},
@@ -54,14 +54,14 @@ const errorTestCases = [
   {stitchTiles: undefined},
   {stitchTiles: -Infinity},
   {stitchTiles: [1, 1]},
-  {stitchTiles: "test"},
+  {stitchTiles: 'test'},
   {stitchTiles: null},
   {stitchTiles: []},
   {stitchTiles: [10]},
   {stitchTiles: 30},
   {stitchTiles: false},
   {stitchTiles: true},
-  {stitchTiles: "10"},
+  {stitchTiles: '10'},
   {stitchTiles: -1},
 
   {type: {}},
@@ -70,14 +70,14 @@ const errorTestCases = [
   {type: undefined},
   {type: -Infinity},
   {type: [1, 1]},
-  {type: "test"},
+  {type: 'test'},
   {type: null},
   {type: []},
   {type: [10]},
   {type: 30},
   {type: false},
   {type: true},
-  {type: "10"},
+  {type: '10'},
   {type: -1},
 ]
 
@@ -90,7 +90,7 @@ const workingTestCases = [
   {baseFrequency: 30},
   {baseFrequency: false},
   {baseFrequency: true},
-  {baseFrequency: "10"},
+  {baseFrequency: '10'},
 
   {numOctaves: null},
   {numOctaves: []},
@@ -98,7 +98,7 @@ const workingTestCases = [
   {numOctaves: 30},
   {numOctaves: false},
   {numOctaves: true},
-  {numOctaves: "10"},
+  {numOctaves: '10'},
 
   {seed: null},
   {seed: []},
@@ -106,23 +106,23 @@ const workingTestCases = [
   {seed: 30},
   {seed: false},
   {seed: true},
-  {seed: "10"},
+  {seed: '10'},
   {seed: -1},
 
-  {stitchTiles: "stitch"},
-  {stitchTiles: "noStitch"},
+  {stitchTiles: 'stitch'},
+  {stitchTiles: 'noStitch'},
 
-  {type: "fractalNoise"},
-  {type: "turbulence"},
+  {type: 'fractalNoise'},
+  {type: 'turbulence'},
 ]
 
 for (testCase of errorTestCases) {
-  const filterOptions = {...{filter: "turbulence"}, ...testCase};
+  const filterOptions = {...{filter: 'turbulence'}, ...testCase};
   assert_throws_js(TypeError, function() { new CanvasFilter(filterOptions); });
 }
 
 for (testCase of workingTestCases) {
-  const filterOptions = {...{filter: "turbulence"}, ...testCase};
+  const filterOptions = {...{filter: 'turbulence'}, ...testCase};
   _assert(new CanvasFilter(filterOptions) != null, "new CanvasFilter(filterOptions) != null");
 }
 })(canvas, ctx);
diff --git a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.turbulence.inputTypes.tentative.worker.js b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.turbulence.inputTypes.tentative.worker.js
index 76673fab9a7e..1bed65ad156a 100644
--- a/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.turbulence.inputTypes.tentative.worker.js
+++ b/testing/web-platform/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.turbulence.inputTypes.tentative.worker.js
@@ -24,7 +24,7 @@ const errorTestCases = [
   {baseFrequency: Infinity},
   {baseFrequency: undefined},
   {baseFrequency: -Infinity},
-  {baseFrequency: "test"},
+  {baseFrequency: 'test'},
 
   {numOctaves: {}},
   {numOctaves: -1},
@@ -33,7 +33,7 @@ const errorTestCases = [
   {numOctaves: undefined},
   {numOctaves: -Infinity},
   {numOctaves: [1, 1]},
-  {numOctaves: "test"},
+  {numOctaves: 'test'},
 
   {seed: {}},
   {seed: NaN},
@@ -41,7 +41,7 @@ const errorTestCases = [
   {seed: undefined},
   {seed: -Infinity},
   {seed: [1, 1]},
-  {seed: "test"},
+  {seed: 'test'},
 
   {stitchTiles: {}},
   {stitchTiles: NaN},
@@ -49,14 +49,14 @@ const errorTestCases = [
   {stitchTiles: undefined},
   {stitchTiles: -Infinity},
   {stitchTiles: [1, 1]},
-  {stitchTiles: "test"},
+  {stitchTiles: 'test'},
   {stitchTiles: null},
   {stitchTiles: []},
   {stitchTiles: [10]},
   {stitchTiles: 30},
   {stitchTiles: false},
   {stitchTiles: true},
-  {stitchTiles: "10"},
+  {stitchTiles: '10'},
   {stitchTiles: -1},
 
   {type: {}},
@@ -65,14 +65,14 @@ const errorTestCases = [
   {type: undefined},
   {type: -Infinity},
   {type: [1, 1]},
-  {type: "test"},
+  {type: 'test'},
   {type: null},
   {type: []},
   {type: [10]},
   {type: 30},
   {type: false},
   {type: true},
-  {type: "10"},
+  {type: '10'},
   {type: -1},
 ]
 
@@ -85,7 +85,7 @@ const workingTestCases = [
   {baseFrequency: 30},
   {baseFrequency: false},
   {baseFrequency: true},
-  {baseFrequency: "10"},
+  {baseFrequency: '10'},
 
   {numOctaves: null},
   {numOctaves: []},
@@ -93,7 +93,7 @@ const workingTestCases = [
   {numOctaves: 30},
   {numOctaves: false},
   {numOctaves: true},
-  {numOctaves: "10"},
+  {numOctaves: '10'},
 
   {seed: null},
   {seed: []},
@@ -101,23 +101,23 @@ const workingTestCases = [
   {seed: 30},
   {seed: false},
   {seed: true},
-  {seed: "10"},
+  {seed: '10'},
   {seed: -1},
 
-  {stitchTiles: "stitch"},
-  {stitchTiles: "noStitch"},
+  {stitchTiles: 'stitch'},
+  {stitchTiles: 'noStitch'},
 
-  {type: "fractalNoise"},
-  {type: "turbulence"},
+  {type: 'fractalNoise'},
+  {type: 'turbulence'},
 ]
 
 for (testCase of errorTestCases) {
-  const filterOptions = {...{filter: "turbulence"}, ...testCase};
+  const filterOptions = {...{filter: 'turbulence'}, ...testCase};
   assert_throws_js(TypeError, function() { new CanvasFilter(filterOptions); });
 }
 
 for (testCase of workingTestCases) {
-  const filterOptions = {...{filter: "turbulence"}, ...testCase};
+  const filterOptions = {...{filter: 'turbulence'}, ...testCase};
   _assert(new CanvasFilter(filterOptions) != null, "new CanvasFilter(filterOptions) != null");
 }
 t.done();
diff --git a/testing/web-platform/tests/html/canvas/tools/yaml-new/filters.yaml b/testing/web-platform/tests/html/canvas/tools/yaml-new/filters.yaml
index bdf3dcfe9fc4..46171c130256 100644
--- a/testing/web-platform/tests/html/canvas/tools/yaml-new/filters.yaml
+++ b/testing/web-platform/tests/html/canvas/tools/yaml-new/filters.yaml
@@ -40,11 +40,11 @@
     @assert ctx.filter == 'none';
     ctx.filter = 'blur(5px)';
     @assert ctx.filter == 'blur(5px)';
-    ctx.filter = new CanvasFilter({filter: "gaussianBlur", stdDeviation: 5});
+    ctx.filter = new CanvasFilter({filter: 'gaussianBlur', stdDeviation: 5});
     @assert ctx.filter.toString() == '[object CanvasFilter]';
     ctx.filter = new CanvasFilter([
-        {filter: "gaussianBlur", stdDeviation: 5},
-        {filter: "gaussianBlur", stdDeviation: 10}
+        {filter: 'gaussianBlur', stdDeviation: 5},
+        {filter: 'gaussianBlur', stdDeviation: 10}
     ]);
     @assert ctx.filter.toString() == '[object CanvasFilter]';
     var canvas2 = document.createElement('canvas');
@@ -55,8 +55,8 @@
     @assert ctx.filter == 'blur(5px)';
     ctx.filter = 'none';
     @assert ctx.filter == 'none';
-    ctx.filter = new CanvasFilter({filter: "gaussianBlur", stdDeviation: 5});
-    ctx.filter = "this string is not a filter and should do nothing";
+    ctx.filter = new CanvasFilter({filter: 'gaussianBlur', stdDeviation: 5});
+    ctx.filter = 'this string is not a filter and should do nothing';
     @assert ctx.filter.toString() == '[object CanvasFilter]';
 
 - name: 2d.filter.canvasFilterObject.tentative
@@ -66,11 +66,11 @@
     @assert ctx.filter == 'none';
     ctx.filter = 'blur(5px)';
     @assert ctx.filter == 'blur(5px)';
-    ctx.filter = new CanvasFilter({filter: "gaussianBlur", stdDeviation: 5});
+    ctx.filter = new CanvasFilter({filter: 'gaussianBlur', stdDeviation: 5});
     @assert ctx.filter.toString() == '[object CanvasFilter]';
     ctx.filter = new CanvasFilter([
-        {filter: "gaussianBlur", stdDeviation: 5},
-        {filter: "gaussianBlur", stdDeviation: 10}
+        {filter: 'gaussianBlur', stdDeviation: 5},
+        {filter: 'gaussianBlur', stdDeviation: 10}
     ]);
     @assert ctx.filter.toString() == '[object CanvasFilter]';
     var canvas2 = new OffscreenCanvas(100, 50);
@@ -81,61 +81,61 @@
     @assert ctx.filter == 'blur(5px)';
     ctx.filter = 'none';
     @assert ctx.filter == 'none';
-    ctx.filter = new CanvasFilter({filter: "gaussianBlur", stdDeviation: 5});
-    ctx.filter = "this string is not a filter and should do nothing";
+    ctx.filter = new CanvasFilter({filter: 'gaussianBlur', stdDeviation: 5});
+    ctx.filter = 'this string is not a filter and should do nothing';
     @assert ctx.filter.toString() == '[object CanvasFilter]';
 
 - name: 2d.filter.canvasFilterObject.blur.exceptions.tentative
   desc: Test exceptions on CanvasFilter() blur.object
   code: |
-    @assert throws TypeError ctx.filter = new CanvasFilter({filter: "gaussianBlur"});
-    @assert throws TypeError ctx.filter = new CanvasFilter({filter: "gaussianBlur", stdDeviation: undefined});
-    @assert throws TypeError ctx.filter = new CanvasFilter({filter: "gaussianBlur", stdDeviation: "foo"});
-    @assert throws TypeError ctx.filter = new CanvasFilter({filter: "gaussianBlur", stdDeviation: [1,2]});
-    @assert throws TypeError ctx.filter = new CanvasFilter({filter: "gaussianBlur", stdDeviation: NaN});
-    @assert throws TypeError ctx.filter = new CanvasFilter({filter: "gaussianBlur", stdDeviation: {}});
+    @assert throws TypeError ctx.filter = new CanvasFilter({filter: 'gaussianBlur'});
+    @assert throws TypeError ctx.filter = new CanvasFilter({filter: 'gaussianBlur', stdDeviation: undefined});
+    @assert throws TypeError ctx.filter = new CanvasFilter({filter: 'gaussianBlur', stdDeviation: 'foo'});
+    @assert throws TypeError ctx.filter = new CanvasFilter({filter: 'gaussianBlur', stdDeviation: [1,2]});
+    @assert throws TypeError ctx.filter = new CanvasFilter({filter: 'gaussianBlur', stdDeviation: NaN});
+    @assert throws TypeError ctx.filter = new CanvasFilter({filter: 'gaussianBlur', stdDeviation: {}});
 
 - name: 2d.filter.canvasFilterObject.colorMatrix.tentative
   desc: Test the functionality of ColorMatrix filters in CanvasFilter objects
   code: |
-    @assert throws TypeError new CanvasFilter({filter: "colorMatrix", values: undefined});
-    @assert throws TypeError new CanvasFilter({filter: "colorMatrix", values: "foo"});
-    @assert throws TypeError new CanvasFilter({filter: "colorMatrix", values: null});
-    @assert throws TypeError new CanvasFilter({filter: "colorMatrix", values: [1, 2, 3]});
-    @assert throws TypeError new CanvasFilter({filter: "colorMatrix", values: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, "a"]});
-    @assert throws TypeError new CanvasFilter({filter: "colorMatrix", values: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, Infinity]});
-    ctx.fillStyle = "#f00";
-    ctx.filter = new CanvasFilter({filter: "colorMatrix", type: "hueRotate", values: 0});
+    @assert throws TypeError new CanvasFilter({filter: 'colorMatrix', values: undefined});
+    @assert throws TypeError new CanvasFilter({filter: 'colorMatrix', values: 'foo'});
+    @assert throws TypeError new CanvasFilter({filter: 'colorMatrix', values: null});
+    @assert throws TypeError new CanvasFilter({filter: 'colorMatrix', values: [1, 2, 3]});
+    @assert throws TypeError new CanvasFilter({filter: 'colorMatrix', values: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 'a']});
+    @assert throws TypeError new CanvasFilter({filter: 'colorMatrix', values: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, Infinity]});
+    ctx.fillStyle = '#f00';
+    ctx.filter = new CanvasFilter({filter: 'colorMatrix', type: 'hueRotate', values: 0});
     ctx.fillRect(0, 0, 100, 50);
     @assert pixel 10,10 ==~ 255,0,0,255;
-    ctx.filter = new CanvasFilter({filter: "colorMatrix", type: "hueRotate", values: 90});
+    ctx.filter = new CanvasFilter({filter: 'colorMatrix', type: 'hueRotate', values: 90});
     ctx.fillRect(0, 0, 100, 50);
     @assert pixel 10,10 ==~ 0,91,0,255;
-    ctx.filter = new CanvasFilter({filter: "colorMatrix", type: "hueRotate", values: 180});
+    ctx.filter = new CanvasFilter({filter: 'colorMatrix', type: 'hueRotate', values: 180});
     ctx.fillRect(0, 0, 100, 50);
     @assert pixel 10,10 ==~ 0,109,109,255;
-    ctx.filter = new CanvasFilter({filter: "colorMatrix", type: "hueRotate", values: 270});
+    ctx.filter = new CanvasFilter({filter: 'colorMatrix', type: 'hueRotate', values: 270});
     ctx.fillRect(0, 0, 100, 50);
     @assert pixel 10,10 ==~ 109,18,255,255;
-    ctx.filter = new CanvasFilter({filter: "colorMatrix", type: "saturate", values: 0.5});
+    ctx.filter = new CanvasFilter({filter: 'colorMatrix', type: 'saturate', values: 0.5});
     ctx.fillRect(0, 0, 100, 50);
     @assert pixel 10,10 ==~ 155,27,27,255;
     ctx.clearRect(0, 0, 100, 50);
-    ctx.filter = new CanvasFilter({filter: "colorMatrix", type: "luminanceToAlpha"});
+    ctx.filter = new CanvasFilter({filter: 'colorMatrix', type: 'luminanceToAlpha'});
     ctx.fillRect(0, 0, 100, 50);
     @assert pixel 10,10 ==~ 0,0,0,54;
-    ctx.filter = new CanvasFilter({filter: "colorMatrix", values: [
+    ctx.filter = new CanvasFilter({filter: 'colorMatrix', values: [
             0, 0, 0, 0, 0,
             1, 1, 1, 1, 0,
             0, 0, 0, 0, 0,
             0, 0, 0, 1, 0
     ]});
     ctx.fillRect(0, 0, 50, 25);
-    ctx.fillStyle = "#0f0";
+    ctx.fillStyle = '#0f0';
     ctx.fillRect(50, 0, 50, 25);
-    ctx.fillStyle = "#00f";
+    ctx.fillStyle = '#00f';
     ctx.fillRect(0, 25, 50, 25);
-    ctx.fillStyle = "#fff";
+    ctx.fillStyle = '#fff';
     ctx.fillRect(50, 25, 50, 25);
     @assert pixel 10,10 ==~ 0,255,0,255;
     @assert pixel 60,10 ==~ 0,255,0,255;
@@ -145,23 +145,23 @@
 - name: 2d.filter.canvasFilterObject.convolveMatrix.exceptions.tentative
   desc: Test exceptions on CanvasFilter() convolveMatrix
   code: |
-    @assert throws TypeError new CanvasFilter({filter: "convolveMatrix"});
-    @assert throws TypeError new CanvasFilter({filter: "convolveMatrix", divisor: 2});
-    @assert throws TypeError new CanvasFilter({filter: "convolveMatrix", kernelMatrix: null});
-    @assert throws TypeError new CanvasFilter({filter: "convolveMatrix", kernelMatrix: 1});
-    @assert throws TypeError new CanvasFilter({filter: "convolveMatrix", kernelMatrix: [[1, 0], [0]]});
-    @assert throws TypeError new CanvasFilter({filter: "convolveMatrix", kernelMatrix: [[1, "a"], [0]]});
-    @assert throws TypeError new CanvasFilter({filter: "convolveMatrix", kernelMatrix: [[1, 0], 0]});
-    @assert throws TypeError new CanvasFilter({filter: "convolveMatrix", kernelMatrix: [[1, 0], [0, Infinity]]});
-    @assert throws TypeError new CanvasFilter({filter: "convolveMatrix", kernelMatrix: []});
-    @assert throws TypeError new CanvasFilter({filter: "convolveMatrix", kernelMatrix: [1]});
-    @assert throws TypeError new CanvasFilter({filter: "convolveMatrix", kernelMatrix: [1, 2, 3, 4]});
-    @assert throws TypeError new CanvasFilter({filter: "convolveMatrix", kernelMatrix: [[], []]});
-    @assert throws TypeError new CanvasFilter({filter: "convolveMatrix", kernelMatrix: [[1, 2], []]});
-    @assert throws TypeError new CanvasFilter({filter: "convolveMatrix", kernelMatrix: [[], [1, 2]]});
+    @assert throws TypeError new CanvasFilter({filter: 'convolveMatrix'});
+    @assert throws TypeError new CanvasFilter({filter: 'convolveMatrix', divisor: 2});
+    @assert throws TypeError new CanvasFilter({filter: 'convolveMatrix', kernelMatrix: null});
+    @assert throws TypeError new CanvasFilter({filter: 'convolveMatrix', kernelMatrix: 1});
+    @assert throws TypeError new CanvasFilter({filter: 'convolveMatrix', kernelMatrix: [[1, 0], [0]]});
+    @assert throws TypeError new CanvasFilter({filter: 'convolveMatrix', kernelMatrix: [[1, 'a'], [0]]});
+    @assert throws TypeError new CanvasFilter({filter: 'convolveMatrix', kernelMatrix: [[1, 0], 0]});
+    @assert throws TypeError new CanvasFilter({filter: 'convolveMatrix', kernelMatrix: [[1, 0], [0, Infinity]]});
+    @assert throws TypeError new CanvasFilter({filter: 'convolveMatrix', kernelMatrix: []});
+    @assert throws TypeError new CanvasFilter({filter: 'convolveMatrix', kernelMatrix: [1]});
+    @assert throws TypeError new CanvasFilter({filter: 'convolveMatrix', kernelMatrix: [1, 2, 3, 4]});
+    @assert throws TypeError new CanvasFilter({filter: 'convolveMatrix', kernelMatrix: [[], []]});
+    @assert throws TypeError new CanvasFilter({filter: 'convolveMatrix', kernelMatrix: [[1, 2], []]});
+    @assert throws TypeError new CanvasFilter({filter: 'convolveMatrix', kernelMatrix: [[], [1, 2]]});
     // This should not throw an error
-    ctx.filter = new CanvasFilter({filter: "convolveMatrix", kernelMatrix: [[]]});
-    ctx.filter = new CanvasFilter({filter: "convolveMatrix", kernelMatrix: [[1]]});
+    ctx.filter = new CanvasFilter({filter: 'convolveMatrix', kernelMatrix: [[]]});
+    ctx.filter = new CanvasFilter({filter: 'convolveMatrix', kernelMatrix: [[1]]});
 
 - name: 2d.filter.canvasFilterObject.componentTransfer.linear.tentative
   desc: Test pixels on CanvasFilter() componentTransfer with linear type
@@ -177,10 +177,10 @@
 
     const slopes = [0.5, 1.2, -0.2];
     const intercepts = [0.25, 0, 0.5];
-    ctx.filter = new CanvasFilter({filter: "componentTransfer",
-        funcR: {type: "linear", slope: slopes[0], intercept: intercepts[0]},
-        funcG: {type: "linear", slope: slopes[1], intercept: intercepts[1]},
-        funcB: {type: "linear", slope: slopes[2], intercept: intercepts[2]},
+    ctx.filter = new CanvasFilter({filter: 'componentTransfer',
+        funcR: {type: 'linear', slope: slopes[0], intercept: intercepts[0]},
+        funcG: {type: 'linear', slope: slopes[1], intercept: intercepts[1]},
+        funcB: {type: 'linear', slope: slopes[2], intercept: intercepts[2]},
     });
 
     const inputColors = [
@@ -201,10 +201,10 @@
 - name: 2d.filter.canvasFilterObject.componentTransfer.identity.tentative
   desc: Test pixels on CanvasFilter() componentTransfer with identity type
   code: |
-    ctx.filter = new CanvasFilter({filter: "componentTransfer",
-        funcR: {type: "identity"},
-        funcG: {type: "identity"},
-        funcB: {type: "identity"},
+    ctx.filter = new CanvasFilter({filter: 'componentTransfer',
+        funcR: {type: 'identity'},
+        funcG: {type: 'identity'},
+        funcB: {type: 'identity'},
     });
 
     const inputColors = [
@@ -236,10 +236,10 @@
     const amplitudes = [2, 1.1, 0.5];
     const exponents = [5, 3, 1];
     const offsets = [0.25, 0, 0.5];
-    ctx.filter = new CanvasFilter({filter: "componentTransfer",
-        funcR: {type: "gamma", amplitude: amplitudes[0], exponent: exponents[0], offset: offsets[0]},
-        funcG: {type: "gamma", amplitude: amplitudes[1], exponent: exponents[1], offset: offsets[1]},
-        funcB: {type: "gamma", amplitude: amplitudes[2], exponent: exponents[2], offset: offsets[2]},
+    ctx.filter = new CanvasFilter({filter: 'componentTransfer',
+        funcR: {type: 'gamma', amplitude: amplitudes[0], exponent: exponents[0], offset: offsets[0]},
+        funcG: {type: 'gamma', amplitude: amplitudes[1], exponent: exponents[1], offset: offsets[1]},
+        funcB: {type: 'gamma', amplitude: amplitudes[2], exponent: exponents[2], offset: offsets[2]},
     });
 
     const inputColors = [
@@ -281,10 +281,10 @@
     tableValuesR = [0, 0, 1, 1];
     tableValuesG = [2, 0, 0.5, 3];
     tableValuesB = [1, -1, 5, 0];
-    ctx.filter = new CanvasFilter({filter: "componentTransfer",
-        funcR: {type: "table", tableValues: tableValuesR},
-        funcG: {type: "table", tableValues: tableValuesG},
-        funcB: {type: "table", tableValues: tableValuesB},
+    ctx.filter = new CanvasFilter({filter: 'componentTransfer',
+        funcR: {type: 'table', tableValues: tableValuesR},
+        funcG: {type: 'table', tableValues: tableValuesG},
+        funcB: {type: 'table', tableValues: tableValuesB},
     });
 
     const inputColors = [
@@ -326,10 +326,10 @@
     tableValuesR = [0, 0, 1, 1];
     tableValuesG = [2, 0, 0.5, 3];
     tableValuesB = [1, -1, 5, 0];
-    ctx.filter = new CanvasFilter({filter: "componentTransfer",
-        funcR: {type: "discrete", tableValues: tableValuesR},
-        funcG: {type: "discrete", tableValues: tableValuesG},
-        funcB: {type: "discrete", tableValues: tableValuesB},
+    ctx.filter = new CanvasFilter({filter: 'componentTransfer',
+        funcR: {type: 'discrete', tableValues: tableValuesR},
+        funcG: {type: 'discrete', tableValues: tableValuesG},
+        funcB: {type: 'discrete', tableValues: tableValuesB},
     });
 
     const inputColors = [
@@ -359,65 +359,65 @@
     ctx.fillStyle = 'crimson';
 
     // Parameter defaults.
-    ctx.filter = new CanvasFilter({filter: "dropShadow"});
+    ctx.filter = new CanvasFilter({filter: 'dropShadow'});
     ctx.fillRect(10, 10, 80, 80);
 
     // All parameters specified.
     ctx.filter = new CanvasFilter(
-      {filter: "dropShadow", dx: 15, dy: 10, stdDeviation: 5,
-       floodColor: "purple", floodOpacity: 0.7});
+      {filter: 'dropShadow', dx: 15, dy: 10, stdDeviation: 5,
+       floodColor: 'purple', floodOpacity: 0.7});
     ctx.fillRect(110, 10, 80, 80);
 
     // Named color.
     ctx.filter = new CanvasFilter(
-      {filter: "dropShadow", dx: 10, dy: 10, stdDeviation: 3,
-       floodColor: "purple"});
+      {filter: 'dropShadow', dx: 10, dy: 10, stdDeviation: 3,
+       floodColor: 'purple'});
     ctx.fillRect(10, 110, 80, 80);
 
     // System color.
     ctx.filter = new CanvasFilter(
-      {filter: "dropShadow", dx: 15, dy: 10, stdDeviation: 3,
-       floodColor: "LinkText"});
+      {filter: 'dropShadow', dx: 15, dy: 10, stdDeviation: 3,
+       floodColor: 'LinkText'});
     ctx.fillRect(110, 110, 80, 80);
 
     // No blur.
     ctx.filter = new CanvasFilter(
-      {filter: "dropShadow", dx: 10, dy: 15, stdDeviation: 0,
-       floodColor: "purple"});
+      {filter: 'dropShadow', dx: 10, dy: 15, stdDeviation: 0,
+       floodColor: 'purple'});
     ctx.fillRect(210, 110, 80, 80);
 
     // Numerical color.
     ctx.filter = new CanvasFilter(
-      {filter: "dropShadow", dx: 9, dy: 12, stdDeviation: 3,
-       floodColor: "rgba(20, 50, 130, 1)"});
+      {filter: 'dropShadow', dx: 9, dy: 12, stdDeviation: 3,
+       floodColor: 'rgba(20, 50, 130, 1)'});
     ctx.fillRect(310, 110, 80, 80);
 
     // Transparent floodColor.
     ctx.filter = new CanvasFilter(
-      {filter: "dropShadow", dx: 15, dy: 10, stdDeviation: 3,
-       floodColor: "rgba(20, 50, 130, 0.7)"});
+      {filter: 'dropShadow', dx: 15, dy: 10, stdDeviation: 3,
+       floodColor: 'rgba(20, 50, 130, 0.7)'});
     ctx.fillRect(410, 110, 80, 80);
 
     // Transparent floodColor and floodOpacity.
     ctx.filter = new CanvasFilter(
-      {filter: "dropShadow", dx: 15, dy: 10, stdDeviation: 3,
-       floodColor: "rgba(20, 50, 130, 0.7)", floodOpacity: 0.7});
+      {filter: 'dropShadow', dx: 15, dy: 10, stdDeviation: 3,
+       floodColor: 'rgba(20, 50, 130, 0.7)', floodOpacity: 0.7});
     ctx.fillRect(510, 110, 80, 80);
 
     // Degenerate parameter values.
     ctx.filter = new CanvasFilter(
-      {filter: "dropShadow", dx: [-5], dy: [], stdDeviation: null,
-       floodColor: "purple", floodOpacity: [2]});
+      {filter: 'dropShadow', dx: [-5], dy: [], stdDeviation: null,
+       floodColor: 'purple', floodOpacity: [2]});
     ctx.fillRect(10, 210, 80, 80);
 
     ctx.filter = new CanvasFilter(
-      {filter: "dropShadow", dx: null, dy: '5', stdDeviation: -5,
-       floodColor: "purple", floodOpacity: '0.8'});
+      {filter: 'dropShadow', dx: null, dy: '5', stdDeviation: -5,
+       floodColor: 'purple', floodOpacity: '0.8'});
     ctx.fillRect(110, 210, 80, 80);
 
     ctx.filter = new CanvasFilter(
-      {filter: "dropShadow", dx: true, dy: ['10'], stdDeviation: false,
-       floodColor: "purple", floodOpacity: ['0.4']});
+      {filter: 'dropShadow', dx: true, dy: ['10'], stdDeviation: false,
+       floodColor: 'purple', floodOpacity: ['0.4']});
     ctx.fillRect(210, 210, 80, 80);
   html_reference: |
     <style>
@@ -438,52 +438,52 @@
     </style>
 
     <div style="position: relative">
-      <div class='background' style="top: 0px;"></div>
-      <div class='background' style="top: 100px;"></div>
-      <div class='background' style="top: 200px;"></div>
+      <div class="background" style="top: 0px;"></div>
+      <div class="background" style="top: 100px;"></div>
+      <div class="background" style="top: 200px;"></div>
 
-      <div class='testcase'
+      <div class="testcase"
            style="left: 10px; top: 10px;
                   filter: drop-shadow(2px 2px 2px black);">
       </div>
-      <div class='testcase'
+      <div class="testcase"
            style="left: 110px; top: 10px;
                   filter: drop-shadow(15px 10px 5px rgba(128, 0, 128, 0.7));">
       </div>
-      <div class='testcase'
+      <div class="testcase"
            style="left: 10px; top: 110px;
                   filter: drop-shadow(10px 10px 3px purple)">
       </div>
-      <div class='testcase'
+      <div class="testcase"
            style="left: 110px; top: 110px;
                   filter: drop-shadow(15px 10px 3px LinkText)">
       </div>
-      <div class='testcase'
+      <div class="testcase"
            style="left: 210px; top: 110px;
                   filter: drop-shadow(10px 15px 0px purple)">
       </div>
-      <div class='testcase'
+      <div class="testcase"
            style="left: 310px; top: 110px;
                   filter: drop-shadow(9px 12px 3px rgba(20, 50, 130, 1))">
       </div>
-      <div class='testcase'
+      <div class="testcase"
            style="left: 410px; top: 110px;
                   filter: drop-shadow(15px 10px 3px rgba(20, 50, 130, 0.7))">
       </div>
-      <div class='testcase'
+      <div class="testcase"
            style="left: 510px; top: 110px;
                   filter: drop-shadow(15px 10px 3px rgba(20, 50, 130, 0.49))">
       </div>
 
-      <div class='testcase'
+      <div class="testcase"
            style="left: 10px; top: 210px;
                   filter: drop-shadow(-5px 0px 0px purple);">
       </div>
-      <div class='testcase'
+      <div class="testcase"
            style="left: 110px; top: 210px;
                   filter: drop-shadow(0px 5px 0px rgba(128, 0, 128, 0.8));">
       </div>
-      <div class='testcase'
+      <div class="testcase"
            style="left: 210px; top: 210px;
                   filter: drop-shadow(1px 10px 0px rgba(128, 0, 128, 0.4));">
       </div>
@@ -521,7 +521,7 @@
       {baseFrequency: Infinity},
       {baseFrequency: undefined},
       {baseFrequency: -Infinity},
-      {baseFrequency: "test"},
+      {baseFrequency: 'test'},
 
       {numOctaves: {}},
       {numOctaves: -1},
@@ -530,7 +530,7 @@
       {numOctaves: undefined},
       {numOctaves: -Infinity},
       {numOctaves: [1, 1]},
-      {numOctaves: "test"},
+      {numOctaves: 'test'},
 
       {seed: {}},
       {seed: NaN},
@@ -538,7 +538,7 @@
       {seed: undefined},
       {seed: -Infinity},
       {seed: [1, 1]},
-      {seed: "test"},
+      {seed: 'test'},
 
       {stitchTiles: {}},
       {stitchTiles: NaN},
@@ -546,14 +546,14 @@
       {stitchTiles: undefined},
       {stitchTiles: -Infinity},
       {stitchTiles: [1, 1]},
-      {stitchTiles: "test"},
+      {stitchTiles: 'test'},
       {stitchTiles: null},
       {stitchTiles: []},
       {stitchTiles: [10]},
       {stitchTiles: 30},
       {stitchTiles: false},
       {stitchTiles: true},
-      {stitchTiles: "10"},
+      {stitchTiles: '10'},
       {stitchTiles: -1},
 
       {type: {}},
@@ -562,14 +562,14 @@
       {type: undefined},
       {type: -Infinity},
       {type: [1, 1]},
-      {type: "test"},
+      {type: 'test'},
       {type: null},
       {type: []},
       {type: [10]},
       {type: 30},
       {type: false},
       {type: true},
-      {type: "10"},
+      {type: '10'},
       {type: -1},
     ]
 
@@ -582,7 +582,7 @@
       {baseFrequency: 30},
       {baseFrequency: false},
       {baseFrequency: true},
-      {baseFrequency: "10"},
+      {baseFrequency: '10'},
 
       {numOctaves: null},
       {numOctaves: []},
@@ -590,7 +590,7 @@
       {numOctaves: 30},
       {numOctaves: false},
       {numOctaves: true},
-      {numOctaves: "10"},
+      {numOctaves: '10'},
 
       {seed: null},
       {seed: []},
@@ -598,22 +598,22 @@
       {seed: 30},
       {seed: false},
       {seed: true},
-      {seed: "10"},
+      {seed: '10'},
       {seed: -1},
 
-      {stitchTiles: "stitch"},
-      {stitchTiles: "noStitch"},
+      {stitchTiles: 'stitch'},
+      {stitchTiles: 'noStitch'},
 
-      {type: "fractalNoise"},
-      {type: "turbulence"},
+      {type: 'fractalNoise'},
+      {type: 'turbulence'},
     ]
 
     for (testCase of errorTestCases) {
-      const filterOptions = {...{filter: "turbulence"}, ...testCase};
+      const filterOptions = {...{filter: 'turbulence'}, ...testCase};
       @assert throws TypeError new CanvasFilter(filterOptions);
     }
 
     for (testCase of workingTestCases) {
-      const filterOptions = {...{filter: "turbulence"}, ...testCase};
+      const filterOptions = {...{filter: 'turbulence'}, ...testCase};
       @assert new CanvasFilter(filterOptions) != null;
     }
-- 
2.11.4.GIT