-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Test outside of IDL conversions for CanvasFilter
From the discussion here (whatwg/html#6763) we need to explicitly test all possible types of inputs for filter attributes. Bug: 1201359 Change-Id: I5ef5905298a17310e4eb54c3c01ab8d6b7973737 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3320960 Reviewed-by: Yi Xu <[email protected]> Reviewed-by: Domenic Denicola <[email protected]> Commit-Queue: Aaron Krajeski <[email protected]> Cr-Commit-Position: refs/heads/main@{#951163} NOKEYCHECK=True GitOrigin-RevId: ba6cbce4987586600aa98a2b2289c55faa2cdfc3
- Loading branch information
1 parent
ba23a01
commit 3ea1c36
Showing
11 changed files
with
233 additions
and
11 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
30 changes: 30 additions & 0 deletions
30
...vas/element/manual/filters/idl-conversions/canvas-filter-boolean-conversion-expected.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
58 changes: 58 additions & 0 deletions
58
.../html/canvas/element/manual/filters/idl-conversions/canvas-filter-boolean-conversion.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
26 changes: 26 additions & 0 deletions
26
...canvas/element/manual/filters/idl-conversions/canvas-filter-long-conversion-expected.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
35 changes: 35 additions & 0 deletions
35
...wpt/html/canvas/element/manual/filters/idl-conversions/canvas-filter-long-conversion.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
55 changes: 55 additions & 0 deletions
55
...html/canvas/element/manual/filters/idl-conversions/canvas-filter-sequence-conversion.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters