1 files changed, 62 insertions, 0 deletions
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>