diff options
Diffstat (limited to 'testing/web-platform/tests/html/canvas/element/manual/filters/tentative')
13 files changed, 574 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/canvas/element/manual/filters/tentative/canvas-filter-object-blur-expected.html b/testing/web-platform/tests/html/canvas/element/manual/filters/tentative/canvas-filter-object-blur-expected.html new file mode 100644 index 0000000000..ae8911b2de --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/manual/filters/tentative/canvas-filter-object-blur-expected.html @@ -0,0 +1,19 @@ +<body> + <canvas id="canvas" width="300" height="300"></canvas> +</body> +<script> + var canvas = document.getElementById('canvas'); + var ctx = canvas.getContext('2d'); + ctx.filter = 'blur(2px)'; + ctx.fillStyle = 'yellow'; + ctx.fillRect(10,10,100,100); + ctx.filter = 'blur(5px)'; + ctx.fillStyle = 'magenta'; + ctx.fillRect(120, 10, 100, 100); + ctx.filter = 'blur(5px) blur(10px)'; + ctx.fillStyle = 'cyan'; + ctx.fillRect(10, 120, 100, 100); + ctx.filter = 'none'; + ctx.fillStyle = 'black'; + ctx.fillRect(120, 120, 100, 100); +</script> diff --git a/testing/web-platform/tests/html/canvas/element/manual/filters/tentative/canvas-filter-object-blur.html b/testing/web-platform/tests/html/canvas/element/manual/filters/tentative/canvas-filter-object-blur.html new file mode 100644 index 0000000000..9fe7ef120c --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/manual/filters/tentative/canvas-filter-object-blur.html @@ -0,0 +1,24 @@ +<head> + <link rel="match" href="canvas-filter-object-blur-expected.html"> +</head> +<body> + <canvas id="canvas" width="300" height="300"></canvas> +</body> +<script> + var canvas = document.getElementById('canvas'); + var ctx = canvas.getContext('2d'); + ctx.filter = new CanvasFilter({name: "gaussianBlur", stdDeviation: 2}); + ctx.fillStyle = 'yellow'; + ctx.fillRect(10,10,100,100); + ctx.filter = new CanvasFilter({name: "gaussianBlur", stdDeviation: 5}); + ctx.fillStyle = 'magenta'; + ctx.fillRect(120, 10, 100, 100); + ctx.filter = new CanvasFilter([ + {name: "gaussianBlur", stdDeviation: 5}, + {name: "gaussianBlur", stdDeviation: 10}]); + ctx.fillStyle = 'cyan'; + ctx.fillRect(10, 120, 100, 100); + ctx.filter = 'none'; + ctx.fillStyle = 'black'; + ctx.fillRect(120, 120, 100, 100); +</script> diff --git a/testing/web-platform/tests/html/canvas/element/manual/filters/tentative/canvas-filter-object-component-transfer-expected.html b/testing/web-platform/tests/html/canvas/element/manual/filters/tentative/canvas-filter-object-component-transfer-expected.html new file mode 100644 index 0000000000..a2351cbcf2 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/manual/filters/tentative/canvas-filter-object-component-transfer-expected.html @@ -0,0 +1,65 @@ +<body> + <canvas id="canvas" width="500" height="100"></canvas> + <svg width="0", height="0"> + <defs> + <filter color-interpolation-filters='sRGB' id="Identity" filterUnits="objectBoundingBox" + x="0%" y="0%" width="100%" height="100%"> + <feComponentTransfer> + <feFuncR type="identity"/> + <feFuncG type="identity"/> + <feFuncB type="identity"/> + <feFuncA type="identity"/> + </feComponentTransfer> + </filter> + <filter color-interpolation-filters='sRGB' id="Table"> + <feComponentTransfer> + <feFuncR type="table" tableValues="0 2 0.5 1"/> + <feFuncG type="table" tableValues="1 -1 5 0"/> + <feFuncB type="table" tableValues="0 1 1 0"/> + </feComponentTransfer> + </filter> + <filter color-interpolation-filters='sRGB' id="Discrete"> + <feComponentTransfer> + <feFuncR type="discrete" tableValues="0 2 0.5 1"/> + <feFuncG type="discrete" tableValues="1 -1 5 0"/> + <feFuncB type="discrete" tableValues="0 1 1 0"/> + </feComponentTransfer> + </filter> + <filter color-interpolation-filters='sRGB' id="Linear"> + <feComponentTransfer> + <feFuncR type="linear" slope=".5" intercept=".25"/> + <feFuncG type="linear" slope="1.5" intercept="0"/> + <feFuncB type="linear" slope="-0.5" intercept=".5"/> + </feComponentTransfer> + </filter> + <filter color-interpolation-filters='sRGB' id="Gamma"> + <feComponentTransfer> + <feFuncR type="gamma" amplitude="2" exponent="5" offset="-0.5"/> + <feFuncG type="gamma" amplitude="0.9" exponent="3" offset="0.3"/> + <feFuncB type="gamma" amplitude="1.1" exponent="1" offset="0.1"/> + </feComponentTransfer> + </filter> + </defs> + </svg> +</body> +<script type="text/javascript"> + const ctx = document.getElementById("canvas").getContext("2d"); + + const grad = ctx.createLinearGradient(10, 0, 490, 0); + grad.addColorStop(0, "#f00"); + grad.addColorStop(0.33, "#0f0"); + grad.addColorStop(0.67, "#00f"); + grad.addColorStop(1, "#000"); + ctx.fillStyle = grad; + + ctx.filter = "url('#Identity')"; + ctx.fillRect(10, 10, 480, 10); + ctx.filter = "url('#Table')"; + ctx.fillRect(10, 30, 480, 10); + ctx.filter = "url('#Discrete')"; + ctx.fillRect(10, 50, 480, 10); + ctx.filter = "url('#Linear')"; + ctx.fillRect(10, 70, 480, 10); + ctx.filter = "url('#Gamma')"; + ctx.fillRect(10, 90, 480, 10); +</script> diff --git a/testing/web-platform/tests/html/canvas/element/manual/filters/tentative/canvas-filter-object-component-transfer.html b/testing/web-platform/tests/html/canvas/element/manual/filters/tentative/canvas-filter-object-component-transfer.html new file mode 100644 index 0000000000..47889c0db2 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/manual/filters/tentative/canvas-filter-object-component-transfer.html @@ -0,0 +1,62 @@ +<head> + <link rel="match" href="canvas-filter-object-component-transfer-expected.html"> +</head> +<body> + <canvas id="canvas" width="500" height="100"></canvas> +</body> +<script> + const ctx = document.getElementById("canvas").getContext("2d"); + + const grad = ctx.createLinearGradient(10, 0, 490, 0); + grad.addColorStop(0, "#f00"); + grad.addColorStop(0.33, "#0f0"); + grad.addColorStop(0.67, "#00f"); + grad.addColorStop(1, "#000"); + ctx.fillStyle = grad; + + const identityFilter = new CanvasFilter({ + name: "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({ + name: "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({ + name: "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({ + name: "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({ + name: "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> diff --git a/testing/web-platform/tests/html/canvas/element/manual/filters/tentative/canvas-filter-object-convolve-matrix-expected.html b/testing/web-platform/tests/html/canvas/element/manual/filters/tentative/canvas-filter-object-convolve-matrix-expected.html new file mode 100644 index 0000000000..896a93542e --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/manual/filters/tentative/canvas-filter-object-convolve-matrix-expected.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<style type="text/css"> + canvas { + margin: 5px; + } +</style> +<body> + <svg width="0" height="0"> + <filter color-interpolation-filters='sRGB' id="justKernel"> + <feConvolveMatrix + kernelMatrix="3 0 0 0 0 0 0 0 -3"/> + </filter> + <filter color-interpolation-filters='sRGB' id="preserveAlpha"> + <feConvolveMatrix + kernelMatrix="3 0 0 0 0 0 0 0 -3" + preserveAlpha="true"/> + </filter> + <filter color-interpolation-filters='sRGB' id="target"> + <feConvolveMatrix + kernelMatrix="3 0 0 0 0 0 0 0 -3" + targetX="2" targetY="2"/> + </filter> + <filter color-interpolation-filters='sRGB' id="divisor"> + <feConvolveMatrix + kernelMatrix="3 0 0 0 0 0 0 0 -3" + divisor="3"/> + </filter> + <filter color-interpolation-filters='sRGB' id="bias"> + <feConvolveMatrix + kernelMatrix="3 0 0 0 0 0 0 0 -3" + bias="0.5"/> + </filter> + <filter color-interpolation-filters='sRGB' id="edgeMode"> + <feConvolveMatrix + kernelMatrix="3 0 0 0 0 0 0 0 -3" + edgeMode="wrap"/> + </filter> + </svg> +</body> +<script type="text/javascript"> + +const filters = [ + "url('#justKernel')", + "url('#preserveAlpha')", + "url('#target')", + "url('#divisor')", + "url('#bias')", + "url('#edgeMode')", +]; + +function draw(ctx) { + ctx.fillRect(0, 20, 120, 100); + + ctx.beginPath(); + ctx.arc(150, 70, 50, 0, 2*Math.PI); + ctx.fill(); + + ctx.beginPath(); + ctx.moveTo(220, 20); + ctx.lineTo(170, 120); + ctx.lineTo(270, 120); + ctx.lineTo(220, 20); + ctx.fill(); +} + +for (f of filters) { + const canvas = document.createElement("canvas"); + document.body.prepend(canvas); + const ctx = canvas.getContext("2d"); + ctx.filter = "blur(0px)"; + ctx.fillStyle = "rgba(0,255,0,0.5)"; + draw(ctx); + ctx.fillStyle = "rgba(255,0,255,0.5)"; + ctx.filter = f; + draw(ctx); +} +</script> diff --git a/testing/web-platform/tests/html/canvas/element/manual/filters/tentative/canvas-filter-object-convolve-matrix.html b/testing/web-platform/tests/html/canvas/element/manual/filters/tentative/canvas-filter-object-convolve-matrix.html new file mode 100644 index 0000000000..1dfd602d13 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/manual/filters/tentative/canvas-filter-object-convolve-matrix.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<head> + <link rel="match" href="canvas-filter-object-convolve-matrix-expected.html"> + <style type="text/css"> + canvas { + margin: 5px; + } + </style> +</head> +<body> +</body> +<script> +function makeConvolveFilter(options) { + const KERNEL_MATRIX = [ + [3, 0, 0], + [0, 0, 0], + [0, 0, -3], + ]; + + options = Object.assign(options, { + kernelMatrix: KERNEL_MATRIX, name: "convolveMatrix"}); + return new CanvasFilter(options); +} + +const test_cases = [ + {}, + {preserveAlpha: true}, + {targetX: 2, targetY: 2}, + {divisor: 3}, + {bias: 0.5}, + {edgeMode: "wrap"} +]; + +function draw(ctx) { + ctx.fillRect(0, 20, 120, 100); + + ctx.beginPath(); + ctx.arc(150, 70, 50, 0, 2*Math.PI); + ctx.fill(); + + ctx.beginPath(); + ctx.moveTo(220, 20); + ctx.lineTo(170, 120); + ctx.lineTo(270, 120); + ctx.lineTo(220, 20); + ctx.fill(); +} + +for (tc of test_cases) { + const canvas = document.createElement("canvas"); + document.body.prepend(canvas); + const ctx = canvas.getContext("2d"); + ctx.filter = "blur(0px)"; + ctx.fillStyle = "rgba(0,255,0,0.5)"; + draw(ctx); + ctx.fillStyle = "rgba(255,0,255,0.5)"; + ctx.filter = makeConvolveFilter(tc); + draw(ctx); +} +</script> diff --git a/testing/web-platform/tests/html/canvas/element/manual/filters/tentative/canvas-filter-object-turbulence-expected.html b/testing/web-platform/tests/html/canvas/element/manual/filters/tentative/canvas-filter-object-turbulence-expected.html new file mode 100644 index 0000000000..ff0eebe2e0 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/manual/filters/tentative/canvas-filter-object-turbulence-expected.html @@ -0,0 +1,37 @@ +<body> + <svg style="display:none">> + <filter id="base"> + <feTurbulence baseFrequency="0.025"/> + </filter> + <filter id="base2d"> + <feTurbulence baseFrequency="0.025, 0.1"/> + </filter> + <filter id="highFrequency"> + <feTurbulence baseFrequency="0.05"/> + </filter> + <filter id="seed"> + <feTurbulence baseFrequency="0.025" seed="100"/> + </filter> + <filter id="numOctaves"> + <feTurbulence baseFrequency="0.025" numOctaves="2"/> + </filter> + <filter id="empty"> + <feTurbulence/> + </filter> + <filter id="fractalNoise"> + <feTurbulence baseFrequency="0.025" type="fractalNoise"/> + </filter> + <filter id="stitchTiles"> + <feTurbulence baseFrequency="0.025" stitchTiles="noStitch"/> + </filter> +</body> +<script> + testCases = document.getElementsByTagName("filter"); + for (tc of testCases) { + const canvas = document.createElement("canvas"); + document.body.appendChild(canvas); + const ctx = canvas.getContext("2d"); + ctx.filter = `url(#${tc.id})`; + ctx.fillRect(0, 0, 1, 1); + } +</script>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/canvas/element/manual/filters/tentative/canvas-filter-object-turbulence.html b/testing/web-platform/tests/html/canvas/element/manual/filters/tentative/canvas-filter-object-turbulence.html new file mode 100644 index 0000000000..b5b494825e --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/manual/filters/tentative/canvas-filter-object-turbulence.html @@ -0,0 +1,26 @@ +<head> + <link rel="match" href="canvas-filter-object-blur-expected.html"> +</head> +<body> +</body> +<script> + const testCases = [ + {baseFrequency: 0.025}, + {baseFrequency: [0.025, 0.1]}, + {baseFrequency: 0.05}, + {baseFrequency: 0.025, seed: 100}, + {baseFrequency: 0.025, numOctaves: 2}, + {}, + {baseFrequency: 0.025, type: "fractalNoise"}, + {baseFrequency: 0.025, stitchTiles: "stitch"}, + ] + + for (tc of testCases) { + const canvas = document.createElement("canvas"); + document.body.appendChild(canvas); + const ctx = canvas.getContext("2d"); + const filterOptions = {...{name: "turbulence"}, ...tc}; + ctx.filter = new CanvasFilter(filterOptions); + ctx.fillRect(0, 0, 1, 1); + } +</script> diff --git a/testing/web-platform/tests/html/canvas/element/manual/filters/tentative/idl-conversions/canvas-filter-boolean-conversion-expected.html b/testing/web-platform/tests/html/canvas/element/manual/filters/tentative/idl-conversions/canvas-filter-boolean-conversion-expected.html new file mode 100644 index 0000000000..f043b0e762 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/manual/filters/tentative/idl-conversions/canvas-filter-boolean-conversion-expected.html @@ -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({ + name: "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> diff --git a/testing/web-platform/tests/html/canvas/element/manual/filters/tentative/idl-conversions/canvas-filter-boolean-conversion.html b/testing/web-platform/tests/html/canvas/element/manual/filters/tentative/idl-conversions/canvas-filter-boolean-conversion.html new file mode 100644 index 0000000000..97ade79f37 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/manual/filters/tentative/idl-conversions/canvas-filter-boolean-conversion.html @@ -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({ + name: "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({ + name: "componentTransfer", + funcR: {type: "discrete", tableValues: 0.5}, + }); + ctx.fillRect(10, 10, 100, 100); +</script> diff --git a/testing/web-platform/tests/html/canvas/element/manual/filters/tentative/idl-conversions/canvas-filter-long-conversion-expected.html b/testing/web-platform/tests/html/canvas/element/manual/filters/tentative/idl-conversions/canvas-filter-long-conversion-expected.html new file mode 100644 index 0000000000..8b4262ed04 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/manual/filters/tentative/idl-conversions/canvas-filter-long-conversion-expected.html @@ -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> diff --git a/testing/web-platform/tests/html/canvas/element/manual/filters/tentative/idl-conversions/canvas-filter-long-conversion.html b/testing/web-platform/tests/html/canvas/element/manual/filters/tentative/idl-conversions/canvas-filter-long-conversion.html new file mode 100644 index 0000000000..c742633224 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/manual/filters/tentative/idl-conversions/canvas-filter-long-conversion.html @@ -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> diff --git a/testing/web-platform/tests/html/canvas/element/manual/filters/tentative/idl-conversions/canvas-filter-sequence-conversion.html b/testing/web-platform/tests/html/canvas/element/manual/filters/tentative/idl-conversions/canvas-filter-sequence-conversion.html new file mode 100644 index 0000000000..d48627867e --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/manual/filters/tentative/idl-conversions/canvas-filter-sequence-conversion.html @@ -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({ + name: "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, 2); + } + } + t.done(); +}); +</script> |