Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Test outside of IDL conversions for CanvasFilter #31973

Merged
merged 1 commit into from
Dec 13, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,11 @@ <h1>2d.filter.canvasFilterObject.blur.exceptions</h1>
_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", stdDevation: null}); });
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: {}}); });


});
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<body>
<canvas id="canvas" width="300" height="300"></canvas>
</body>
<script>
var ctx = document.getElementById('canvas').getContext('2d');

// preserveAlpha for convolveMatrix is the only boolean so far implemented
function drawWithConvolveFilter(x, y, preserveAlphaValue) {
ctx.filter = new CanvasFilter({
filter: "convolveMatrix",
kernelMatrix: [[1, 0], [0, 1]],
preserveAlpha: preserveAlphaValue,
});
ctx.fillRect(x, y, 30, 30);
}

ctx.fillStyle = "rgba(255,0,255,0.5)";
let x = 10;
let y = 10;
for (var i = 0; i < 6; i++) {
drawWithConvolveFilter(x, y, true);
x += 40;
}
y = 50;
x = 10;
for (var i = 0; i < 5; i++) {
drawWithConvolveFilter(x, y, false);
x += 40;
}
</script>
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
<head>
<link rel="match" href="canvas-filter-boolean-conversion-expected.html">
</head>
<body>
<canvas id="canvas" width="300" height="300"></canvas>
</body>
<script>
// Test the built-in ECMAScript types Undefined, Null, Boolean, String, Number, and Object
// as input to the CanvasFilter resolver when a bool is the intended result.
var ctx = document.getElementById('canvas').getContext('2d');

// preserveAlpha for convolveMatrix is the only boolean so far implemented
function drawWithConvolveFilter(x, y, preserveAlphaValue) {
ctx.filter = new CanvasFilter({
filter: "convolveMatrix",
kernelMatrix: [[1, 0], [0, 1]],
preserveAlpha: preserveAlphaValue,
});
ctx.fillRect(x, y, 30, 30);
}

const trueTestCases = [
true,
{ valueOf() { return false; }},
"foo",
1,
{},
[]
];

const falseTestCases = [
false,
"",
0,
null,
undefined,
];

ctx.fillStyle = "rgba(255,0,255,0.5)";
let x = 10;
let y = 10;
for (tc of trueTestCases) {
drawWithConvolveFilter(x, y, tc);
x += 40;
}
y = 50;
x = 10;
for (tc of falseTestCases) {
drawWithConvolveFilter(x, y, tc);
x += 40;
}

ctx.filter = new CanvasFilter({
filter: "componentTransfer",
funcR: {type: "discrete", tableValues: 0.5},
});
ctx.fillRect(10, 10, 100, 100);
</script>
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<body>
<canvas id="canvas" width="300" height="300"></canvas>
</body>
<script>
var ctx = document.getElementById('canvas').getContext('2d');
// Null and False both evaluate to zero
ctx.filter = new CanvasFilter({filter: "gaussianBlur", stdDeviation: 0});
ctx.fillRect(10, 10, 30, 30);
ctx.filter = new CanvasFilter({filter: "gaussianBlur", stdDeviation: 0});
ctx.fillRect(50, 10, 30, 30);
ctx.filter = new CanvasFilter({filter: "gaussianBlur", stdDeviation: 0});
ctx.fillRect(90, 10, 30, 30);
// True evaluates to one
ctx.filter = new CanvasFilter({filter: "gaussianBlur", stdDeviation: 1});
ctx.fillRect(130, 10, 30, 30);
// String, Number and Object should all work
ctx.filter = new CanvasFilter({filter: "gaussianBlur", stdDeviation: 5});
ctx.fillRect(10, 50, 30, 30);
ctx.filter = new CanvasFilter({filter: "gaussianBlur", stdDeviation: 5});
ctx.fillRect(50, 50, 30, 30);
ctx.filter = new CanvasFilter({filter: "gaussianBlur", stdDeviation: 5});
ctx.fillRect(90, 50, 30, 30);
// Valid sequence
ctx.filter = new CanvasFilter({filter: "gaussianBlur", stdDeviation: 5});
ctx.fillRect(130, 50, 30, 30);
</script>
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<head>
<link rel="match" href="canvas-filter-long-conversion-expected.html">
</head>
<body>
<canvas id="canvas" width="300" height="300"></canvas>
</body>
<script>
// Test the built-in ECMAScript types Undefined, Null, Boolean, String, Number, and Object
// as input to the CanvasFilter resolver when a long is the intended result.
var ctx = document.getElementById('canvas').getContext('2d');

// Null, False and [] evaluate to zero
ctx.filter = new CanvasFilter({filter: "gaussianBlur", stdDeviation: null});
ctx.fillRect(10, 10, 30, 30);
ctx.filter = new CanvasFilter({filter: "gaussianBlur", stdDeviation: false});
ctx.fillRect(50, 10, 30, 30);
ctx.filter = new CanvasFilter({filter: "gaussianBlur", stdDeviation: []});
ctx.fillRect(90, 10, 30, 30);
// True evaluates to one
ctx.filter = new CanvasFilter({filter: "gaussianBlur", stdDeviation: true});
ctx.fillRect(130, 10, 30, 30);
// String, Number and Object should all work
ctx.filter = new CanvasFilter({filter: "gaussianBlur", stdDeviation: "5"});
ctx.fillRect(10, 50, 30, 30);
ctx.filter = new CanvasFilter({filter: "gaussianBlur", stdDeviation: 5});
ctx.fillRect(50, 50, 30, 30);
ctx.filter = new CanvasFilter({filter: "gaussianBlur", stdDeviation: { valueOf() { return 5; }}});
ctx.fillRect(90, 50, 30, 30);
// Valid sequence
ctx.filter = new CanvasFilter({filter: "gaussianBlur", stdDeviation: [5]});
ctx.fillRect(130, 50, 30, 30);

// Undefined and other inputs that throw exceptions are tested in:
// html/canvas/element/filters/2d.filter.canvasFilterObject.blur.exceptions.html
</script>
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
<!DOCTYPE html>
<title>Canvas test: canvas-filter-sequence-conversion</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/html/canvas/resources/canvas-tests.js"></script>
<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
<body class="show_output">

<h1>canvas-filter-sequence-conversion</h1>
<p class="desc">Test converting types into sequences</p>


<p class="output">Actual output:</p>
<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>

<ul id="d"></ul>
<script>
var t = async_test("Test pixels on CanvasFilter() various inputs to tableValues (which is a sequence)");
_addTest(function(canvas, ctx) {

// Inputs to parameters that are expecting sequence<long>. Results are either the value of the
// red pixel drawing using the resultant filter or that we expect this input to throw an error.
const testCases = [
{input: [], result: 0},
{input: [0.5], result: 127},
{input: ["0.5"], result: 127},
{input: 1, result: "throws"},
{input: {}, result: "throws"},
{input: false, result: "throws"},
{input: true, result: "throws"},
{input: NaN, result: "throws"},
{input: { valueOf() { return [1]; }}, result: "throws"},
];

// A simple filter that just overrides the red channel if successful.
function makeFilter(value) {
return new CanvasFilter({
filter: "componentTransfer",
funcR: {type: "table", tableValues: value}
});
}

for (const tc of testCases) {
if (tc.result === "throws") {
assert_throws_js(TypeError, function(){ makeFilter(tc.input) });
} else {
ctx.reset();
ctx.filter = makeFilter(tc.input);
ctx.fillRect(0, 0, 100, 100);
_assertPixelApprox(canvas, 5, 5, tc.result,0,0,255, "5,5", `${tc.result},0,0,255`, 2);
}
}
t.done();
});
</script>
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,11 @@ <h1>2d.filter.canvasFilterObject.blur.exceptions</h1>
var ctx = offscreenCanvas.getContext('2d');

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: 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();

});
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,11 @@ var offscreenCanvas = new OffscreenCanvas(100, 50);
var ctx = offscreenCanvas.getContext('2d');

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: 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();

});
Expand Down
5 changes: 4 additions & 1 deletion html/canvas/tools/yaml/element/filters.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -61,8 +61,11 @@
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", stdDevation: null});
@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
desc: Test the functionality of ColorMatrix filters in CanvasFilter objects
Expand Down
5 changes: 4 additions & 1 deletion html/canvas/tools/yaml/offscreen/filters.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,11 @@
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", stdDevation: null});
@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: {}});
t.done();

- name: 2d.filter.canvasFilterObject.colorMatrix
Expand Down