2d.filter.canvasFilterObject.componentTransfer.table.tentative-expected.html

Enable keyboard shortcuts

<!DOCTYPE html>

<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->

<title>Canvas test: 2d.filter.canvasFilterObject.componentTransfer.table.tentative</title>

<h1>2d.filter.canvasFilterObject.componentTransfer.table.tentative</h1>

<p class="desc">Test pixels on CanvasFilter() componentTransfer with table type</p>

<canvas id="canvas" width="100" height="100">

  <p class="fallback">FAIL (fallback content)</p>

</canvas>

<script>

  const canvas = document.getElementById("canvas");

  const ctx = canvas.getContext('2d');

  // From https://www.w3.org/TR/SVG11/filters.html#feComponentTransferElement

  function getTransformedValue(C, V) {

      // Get the right interval

      const n = V.length - 1;

      const k = C == 1 ? n - 1 : Math.floor(C * n);

      return V[k] + (C - k/n) * n * (V[k + 1] - V[k]);

  function getColor(inputColor, tableValues) {

      const result = [0, 0, 0];

      for (const i in inputColor) {

          const C = inputColor[i]/255;

          const Cprime = getTransformedValue(C, tableValues[i]);

          result[i] = Math.max(0, Math.min(1, Cprime)) * 255;

      return result;

  tableValuesR = [0, 0, 1, 1];

  tableValuesG = [2, 0, 0.5, 3];

  tableValuesB = [1, -1, 5, 0];

  const inputColors = [

      [255, 255, 255],

      [0, 0, 0],

      [127, 0, 34],

      [252, 186, 3],

      [50, 68, 87],

];

  for (let i = 0 ; i < inputColors.length ; ++i) {

      const color = inputColors[i];

      let outputColor = getColor(

          color, [tableValuesR, tableValuesG, tableValuesB]);

      ctx.fillStyle = `rgb(${outputColor[0]}, ${outputColor[1]},

        ${outputColor[2]})`;

      ctx.fillRect(i * 10, i * 10, 10, 10);

</script>