Skip to content

Commit

Permalink
Make canvas filter input a flat dictionary
Browse files Browse the repository at this point in the history 
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
  • Loading branch information
@mysteryDate @chromium-wpt-export-bot
mysteryDate authored and chromium-wpt-export-bot committed Aug 30, 2021
1 parent e216db9 commit cabd0ac
Show file tree
Hide file tree
Showing 32 changed files with 241 additions and 228 deletions.
7 changes: 3 additions & 4 deletions html/canvas/element/filters/2d.filter.canvasFilterObject.blur.exceptions.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"}); });


});
Expand Down
30 changes: 15 additions & 15 deletions html/canvas/element/filters/2d.filter.canvasFilterObject.colorMatrix.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
4 changes: 2 additions & 2 deletions html/canvas/element/filters/2d.filter.canvasFilterObject.componentTransfer.discrete.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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],
Expand Down
4 changes: 2 additions & 2 deletions html/canvas/element/filters/2d.filter.canvasFilterObject.componentTransfer.gamma.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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],
Expand Down
4 changes: 2 additions & 2 deletions html/canvas/element/filters/2d.filter.canvasFilterObject.componentTransfer.identity.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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],
Expand Down
4 changes: 2 additions & 2 deletions html/canvas/element/filters/2d.filter.canvasFilterObject.componentTransfer.linear.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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],
Expand Down
5 changes: 3 additions & 2 deletions html/canvas/element/filters/2d.filter.canvasFilterObject.componentTransfer.table.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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],
Expand All @@ -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()


});
Expand Down
21 changes: 10 additions & 11 deletions html/canvas/element/filters/2d.filter.canvasFilterObject.convolveMatrix.exceptions.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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: [[]]});


});
Expand Down
9 changes: 6 additions & 3 deletions html/canvas/element/filters/2d.filter.canvasFilterObject.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand All @@ -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]'");

Expand Down
9 changes: 5 additions & 4 deletions html/canvas/element/manual/filters/canvas-filter-object-blur.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
25 changes: 15 additions & 10 deletions html/canvas/element/manual/filters/canvas-filter-object-component-transfer.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
5 changes: 3 additions & 2 deletions html/canvas/element/manual/filters/canvas-filter-object-convolve-matrix.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = [
Expand Down
7 changes: 3 additions & 4 deletions html/canvas/offscreen/filters/2d.filter.canvasFilterObject.blur.exceptions.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();

});
Expand Down
7 changes: 3 additions & 4 deletions html/canvas/offscreen/filters/2d.filter.canvasFilterObject.blur.exceptions.worker.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();

});
Expand Down
Loading

0 comments on commit cabd0ac

Please sign in to comment.