Make canvas filter input a flat dictionary

As initially specced, CanvasFilter inputs had a single key that was the
name of the filter:

ctx.filter = new CanvasFilter({gaussianBlur: {stdDeviation: 5}});

As the result of the debate here
(whatwg/html#6763) the interface is changed to
have a "filter" key that names the filter type:

ctx.filter = new CanvasFilter(
  {filter: "gaussianBlur", stdDeviation: 5});

Bug: 1169216
Change-Id: If3fdd9185c1f02dd2dece7db0c92aba76f2d97e1
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3098009
Commit-Queue: Aaron Krajeski <aaronhk@chromium.org>
Reviewed-by: Fernando Serboncini <fserb@chromium.org>
Cr-Commit-Position: refs/heads/main@{#916494}

html/canvas/element/filters/2d.filter.canvasFilterObject.blur.exceptions.html

@@ -19,10 +19,9 @@ <h1>2d.filter.canvasFilterObject.blur.exceptions</h1>
 var t = async_test("Test exceptions on CanvasFilter() blur.object");
 _addTest(function(canvas, ctx) {
 
-assert_throws_js(TypeError, function() { ctx.filter = new CanvasFilter({blur: null}); });
-assert_throws_js(TypeError, function() { ctx.filter = new CanvasFilter({blur: {}}); });
-assert_throws_js(TypeError, function() { ctx.filter = new CanvasFilter({blur: {stdDevation: null}}); });
-assert_throws_js(TypeError, function() { ctx.filter = new CanvasFilter({blur: {stdDeviation: "foo"}}); });
+assert_throws_js(TypeError, function() { ctx.filter = new CanvasFilter({filter: "gaussianBlur"}); });
+assert_throws_js(TypeError, function() { ctx.filter = new CanvasFilter({filter: "gaussianBlur", stdDevation: null}); });
+assert_throws_js(TypeError, function() { ctx.filter = new CanvasFilter({filter: "gaussianBlur", stdDeviation: "foo"}); });
 
 
 });

html/canvas/element/filters/2d.filter.canvasFilterObject.colorMatrix.html

@@ -13,44 +13,44 @@ <h1>2d.filter.canvasFilterObject.colorMatrix</h1>
 
 <p class="output">Actual output:</p>
 <canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
-<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+
 <ul id="d"></ul>
 <script>
 var t = async_test("Test the functionality of ColorMatrix filters in CanvasFilter objects");
 _addTest(function(canvas, ctx) {
 
-assert_throws_js(TypeError, function() { new CanvasFilter({colorMatrix: {values: undefined}}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({colorMatrix: {values: "foo"}}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({colorMatrix: {values: null}}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({colorMatrix: {values: [1, 2, 3]}}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({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({colorMatrix: {values: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, Infinity]}}); });
+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({colorMatrix: {type: "hueRotate", values: 0}});
+ctx.filter = new CanvasFilter({filter: "colorMatrix", type: "hueRotate", values: 0});
 ctx.fillRect(0, 0, 100, 50);
 _assertPixelApprox(canvas, 10,10, 255,0,0,255, "10,10", "255,0,0,255", 2);
-ctx.filter = new CanvasFilter({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, "10,10", "0,91,0,255", 2);
-ctx.filter = new CanvasFilter({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, "10,10", "0,109,109,255", 2);
-ctx.filter = new CanvasFilter({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, "10,10", "109,18,255,255", 2);
-ctx.filter = new CanvasFilter({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, "10,10", "155,27,27,255", 2);
 ctx.clearRect(0, 0, 100, 50);
-ctx.filter = new CanvasFilter({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, "10,10", "0,0,0,54", 2);
-ctx.filter = new CanvasFilter({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.fillRect(50, 0, 50, 25);

html/canvas/element/filters/2d.filter.canvasFilterObject.componentTransfer.discrete.html

@@ -40,11 +40,11 @@ <h1>2d.filter.canvasFilterObject.componentTransfer.discrete</h1>
 tableValuesR = [0, 0, 1, 1];
 tableValuesG = [2, 0, 0.5, 3];
 tableValuesB = [1, -1, 5, 0];
-ctx.filter = new CanvasFilter({componentTransfer: {
+ctx.filter = new CanvasFilter({filter: "componentTransfer",
     funcR: {type: "discrete", tableValues: tableValuesR},
     funcG: {type: "discrete", tableValues: tableValuesG},
     funcB: {type: "discrete", tableValues: tableValuesB},
-}});
+});
 
 const inputColors = [
     [255, 255, 255],

html/canvas/element/filters/2d.filter.canvasFilterObject.componentTransfer.gamma.html

@@ -31,11 +31,11 @@ <h1>2d.filter.canvasFilterObject.componentTransfer.gamma</h1>
 const amplitudes = [2, 1.1, 0.5];
 const exponents = [5, 3, 1];
 const offsets = [0.25, 0, 0.5];
-ctx.filter = new CanvasFilter({componentTransfer: {
+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 = [
     [255, 255, 255],

html/canvas/element/filters/2d.filter.canvasFilterObject.componentTransfer.identity.html

@@ -19,11 +19,11 @@ <h1>2d.filter.canvasFilterObject.componentTransfer.identity</h1>
 var t = async_test("Test pixels on CanvasFilter() componentTransfer with identity type");
 _addTest(function(canvas, ctx) {
 
-ctx.filter = new CanvasFilter({componentTransfer: {
+ctx.filter = new CanvasFilter({filter: "componentTransfer",
     funcR: {type: "identity"},
     funcG: {type: "identity"},
     funcB: {type: "identity"},
-}});
+});
 
 const inputColors = [
     [255, 255, 255],

html/canvas/element/filters/2d.filter.canvasFilterObject.componentTransfer.linear.html

@@ -30,11 +30,11 @@ <h1>2d.filter.canvasFilterObject.componentTransfer.linear</h1>
 
 const slopes = [0.5, 1.2, -0.2];
 const intercepts = [0.25, 0, 0.5];
-ctx.filter = new CanvasFilter({componentTransfer: {
+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 = [
     [255, 255, 255],

html/canvas/element/filters/2d.filter.canvasFilterObject.componentTransfer.table.html

@@ -40,11 +40,11 @@ <h1>2d.filter.canvasFilterObject.componentTransfer.table</h1>
 tableValuesR = [0, 0, 1, 1];
 tableValuesG = [2, 0, 0.5, 3];
 tableValuesB = [1, -1, 5, 0];
-ctx.filter = new CanvasFilter({componentTransfer: {
+ctx.filter = new CanvasFilter({filter: "componentTransfer",
     funcR: {type: "table", tableValues: tableValuesR},
     funcG: {type: "table", tableValues: tableValuesG},
     funcB: {type: "table", tableValues: tableValuesB},
-}});
+});
 
 const inputColors = [
     [255, 255, 255],
@@ -60,6 +60,7 @@ <h1>2d.filter.canvasFilterObject.componentTransfer.table</h1>
     ctx.fillRect(0, 0, 10, 10);
     _assertPixelApprox(canvas, 5, 5, outputColor[0],outputColor[1],outputColor[2],255, "5,5", `${outputColor[0]},${outputColor[1]},${outputColor[2]}`, 2);
 }
+t.done()
 
 
 });

html/canvas/element/filters/2d.filter.canvasFilterObject.convolveMatrix.exceptions.html

@@ -19,18 +19,17 @@ <h1>2d.filter.canvasFilterObject.convolveMatrix.exceptions</h1>
 var t = async_test("Test exceptions on CanvasFilter() convolveMatrix");
 _addTest(function(canvas, ctx) {
 
-assert_throws_js(TypeError, function() { new CanvasFilter({convolveMatrix: {}}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({convolveMatrix: null}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({convolveMatrix: {divisor: 2}}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({convolveMatrix: {kernelMatrix: null}}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({convolveMatrix: {kernelMatrix: 1}}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({convolveMatrix: {kernelMatrix: [[1, 0], [0]]}}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({convolveMatrix: {kernelMatrix: [[1, "a"], [0]]}}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({convolveMatrix: {kernelMatrix: [[1, 0], 0]}}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({convolveMatrix: {kernelMatrix: [[1, 0], [0, Infinity]]}}); });
-assert_throws_js(TypeError, function() { new CanvasFilter({convolveMatrix: {kernelMatrix: []}}); });
+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: []}); });
 // This should not throw an error
-ctx.filter = new CanvasFilter({convolveMatrix: {kernelMatrix: [[]]}});
+ctx.filter = new CanvasFilter({filter: "convolveMatrix", kernelMatrix: [[]]});
 
 
 });

html/canvas/element/filters/2d.filter.canvasFilterObject.html

@@ -22,9 +22,12 @@ <h1>2d.filter.canvasFilterObject</h1>
 _assert(ctx.filter == 'none', "ctx.filter == 'none'");
 ctx.filter = 'blur(5px)';
 _assert(ctx.filter == 'blur(5px)', "ctx.filter == 'blur(5px)'");
-ctx.filter = new CanvasFilter({blur: {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([{blur: {stdDeviation: 5}}, {blur: {stdDeviation: 10}}]);
+ctx.filter = new CanvasFilter([
+    {filter: "gaussianBlur", stdDeviation: 5},
+    {filter: "gaussianBlur", stdDeviation: 10}
+]);
 _assert(ctx.filter.toString() == '[object CanvasFilter]', "ctx.filter.toString() == '[object CanvasFilter]'");
 var canvas2 = document.createElement('canvas');
 var ctx2 = canvas2.getContext('2d');
@@ -34,7 +37,7 @@ <h1>2d.filter.canvasFilterObject</h1>
 _assert(ctx.filter == 'blur(5px)', "ctx.filter == 'blur(5px)'");
 ctx.filter = 'none';
 _assert(ctx.filter == 'none', "ctx.filter == 'none'");
-ctx.filter = new CanvasFilter({blur: {stdDeviation: 5}});
+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]'");
 

html/canvas/element/manual/filters/canvas-filter-object-blur.html

@@ -7,14 +7,15 @@
 <script>
   var canvas = document.getElementById('canvas');
   var ctx = canvas.getContext('2d');
-  ctx.filter = new CanvasFilter({blur: {stdDeviation: 2}});
+  ctx.filter = new CanvasFilter({filter: "gaussianBlur", stdDeviation: 2});
   ctx.fillStyle = 'yellow';
   ctx.fillRect(10,10,100,100);
-  ctx.filter = new CanvasFilter({blur: {stdDeviation: 5}});
+  ctx.filter = new CanvasFilter({filter: "gaussianBlur", stdDeviation: 5});
   ctx.fillStyle = 'magenta';
   ctx.fillRect(120, 10, 100, 100);
-  ctx.filter = new CanvasFilter([{
-    blur: {stdDeviation: 5}}, {blur: {stdDeviation: 10}}]);
+  ctx.filter = new CanvasFilter([
+    {filter: "gaussianBlur", stdDeviation: 5},
+    {filter: "gaussianBlur", stdDeviation: 10}]);
   ctx.fillStyle = 'cyan';
   ctx.fillRect(10, 120, 100, 100);
   ctx.filter = 'none';

html/canvas/element/manual/filters/canvas-filter-object-component-transfer.html

@@ -14,44 +14,49 @@
   grad.addColorStop(1, "#000");
   ctx.fillStyle = grad;
 
-  const identityFilter = new CanvasFilter({componentTransfer:{
+  const identityFilter = new CanvasFilter({
+    filter: "componentTransfer",
     funcR: {type: "identity"},
     funcG: {type: "identity"},
     funcB: {type: "identity"},
     funcA: {type: "identity"},
-  }});
+  });
   ctx.filter = identityFilter;
   ctx.fillRect(10, 10, 480, 10);
 
-  const tableFilter = new CanvasFilter({componentTransfer: {
+  const tableFilter = new CanvasFilter({
+    filter: "componentTransfer",
     funcR: {type: "table", tableValues: [0, 2, 0.5, 1]},
     funcG: {type: "table", tableValues: [1, -1, 5, 0]},
     funcB: {type: "table", tableValues: [0, 1, 1, 0]},
-  }});
+  });
   ctx.filter = tableFilter;
   ctx.fillRect(10, 30, 480, 10);
 
-  const discreteFilter = new CanvasFilter({componentTransfer: {
+  const discreteFilter = new CanvasFilter({
+    filter: "componentTransfer",
     funcR: {type: "discrete", tableValues: [0, 2, 0.5, 1]},
     funcG: {type: "discrete", tableValues: [1, -1, 5, 0]},
     funcB: {type: "discrete", tableValues: [0, 1, 1, 0]},
-  }});
+  });
   ctx.filter = discreteFilter;
   ctx.fillRect(10, 50, 480, 10);
 
-  const linearFilter = new CanvasFilter({componentTransfer: {
+  const linearFilter = new CanvasFilter({
+    filter: "componentTransfer",
     funcR: {type: "linear", slope: 0.5, intercept: 0.25},
     funcG: {type: "linear", slope: 1.5, intercept: 0},
     funcB: {type: "linear", slope: -0.5, intercept: 0.5},
-  }});
+  });
   ctx.filter = linearFilter;
   ctx.fillRect(10, 70, 480, 10);
 
-  const gammaFilter = new CanvasFilter({componentTransfer: {
+  const gammaFilter = new CanvasFilter({
+    filter: "componentTransfer",
     funcR: {type: "gamma", amplitude: 2, exponent: 5, offset: -0.5},
     funcG: {type: "gamma", amplitude: 0.9, exponent: 3, offset: 0.3},
     funcB: {type: "gamma", amplitude: 1.1, exponent: 1, offset: 0.1},
-  }});
+  });
   ctx.filter = gammaFilter;
   ctx.fillRect(10, 90, 480, 10);
 </script>

html/canvas/element/manual/filters/canvas-filter-object-convolve-matrix.html

@@ -17,8 +17,9 @@
     [0, 0, -3],
   ];
 
-  options = Object.assign(options, {kernelMatrix: KERNEL_MATRIX});
-  return new CanvasFilter({convolveMatrix: options});
+  options = Object.assign(options, {
+    kernelMatrix: KERNEL_MATRIX, filter: "convolveMatrix"});
+  return new CanvasFilter(options);
 }
 
 const test_cases = [

html/canvas/offscreen/filters/2d.filter.canvasFilterObject.blur.exceptions.html

@@ -20,10 +20,9 @@ <h1>2d.filter.canvasFilterObject.blur.exceptions</h1>
 var offscreenCanvas = new OffscreenCanvas(100, 50);
 var ctx = offscreenCanvas.getContext('2d');
 
-assert_throws_js(TypeError, function() { ctx.filter = new CanvasFilter({blur: null}); });
-assert_throws_js(TypeError, function() { ctx.filter = new CanvasFilter({blur: {}}); });
-assert_throws_js(TypeError, function() { ctx.filter = new CanvasFilter({blur: {stdDevation: null}}); });
-assert_throws_js(TypeError, function() { ctx.filter = new CanvasFilter({blur: {stdDeviation: "foo"}}); });
+assert_throws_js(TypeError, function() { ctx.filter = new CanvasFilter({filter: "gaussianBlur"}); });
+assert_throws_js(TypeError, function() { ctx.filter = new CanvasFilter({filter: "gaussianBlur", stdDevation: null}); });
+assert_throws_js(TypeError, function() { ctx.filter = new CanvasFilter({filter: "gaussianBlur", stdDeviation: "foo"}); });
 t.done();
 
 });

html/canvas/offscreen/filters/2d.filter.canvasFilterObject.blur.exceptions.worker.js

@@ -16,10 +16,9 @@ t.step(function() {
 var offscreenCanvas = new OffscreenCanvas(100, 50);
 var ctx = offscreenCanvas.getContext('2d');
 
-assert_throws_js(TypeError, function() { ctx.filter = new CanvasFilter({blur: null}); });
-assert_throws_js(TypeError, function() { ctx.filter = new CanvasFilter({blur: {}}); });
-assert_throws_js(TypeError, function() { ctx.filter = new CanvasFilter({blur: {stdDevation: null}}); });
-assert_throws_js(TypeError, function() { ctx.filter = new CanvasFilter({blur: {stdDeviation: "foo"}}); });
+assert_throws_js(TypeError, function() { ctx.filter = new CanvasFilter({filter: "gaussianBlur"}); });
+assert_throws_js(TypeError, function() { ctx.filter = new CanvasFilter({filter: "gaussianBlur", stdDevation: null}); });
+assert_throws_js(TypeError, function() { ctx.filter = new CanvasFilter({filter: "gaussianBlur", stdDeviation: "foo"}); });
 t.done();
 
 });