2d.filter.canvasFilterObject.gaussianBlur.tentative.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

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

<link rel="match" href="2d.filter.canvasFilterObject.gaussianBlur.tentative-expected.html">

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

<h1 style="font-size: 20px;">2d.filter.canvasFilterObject.gaussianBlur.tentative</h1>

<p class="desc">Test CanvasFilter() with gaussianBlur.</p>

<div style="display: grid; grid-gap: 4px;

            grid-template-columns: repeat(5, max-content);

            font-size: 13px; text-align: center;">

<span>

  <div>x-only</div>

  <canvas id="canvas0" width="100" height="100" style="outline: 1px solid">

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

  </canvas>

  <script type="module">

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

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

    ctx.fillStyle = 'teal';

    ctx.filter = new CanvasFilter({

        name: 'gaussianBlur',

        stdDeviation: [4, 0],

});

    ctx.fillRect(25, 25, 50, 50);

  </script>

</span>

<span>

  <div>mostly-x</div>

  <canvas id="canvas1" width="100" height="100" style="outline: 1px solid">

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

  </canvas>

  <script type="module">

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

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

    ctx.fillStyle = 'teal';

    ctx.filter = new CanvasFilter({

        name: 'gaussianBlur',

        stdDeviation: [4, 1],

});

    ctx.fillRect(25, 25, 50, 50);

  </script>

</span>

<span>

  <div>isotropic</div>

  <canvas id="canvas2" width="100" height="100" style="outline: 1px solid">

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

  </canvas>

  <script type="module">

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

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

    ctx.fillStyle = 'teal';

    ctx.filter = new CanvasFilter({

        name: 'gaussianBlur',

        stdDeviation: [4, 4],

});

    ctx.fillRect(25, 25, 50, 50);

  </script>

</span>

<span>

  <div>mostly-y</div>

  <canvas id="canvas3" width="100" height="100" style="outline: 1px solid">

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

  </canvas>

  <script type="module">

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

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

    ctx.fillStyle = 'teal';

    ctx.filter = new CanvasFilter({

        name: 'gaussianBlur',

        stdDeviation: [1, 4],

});

    ctx.fillRect(25, 25, 50, 50);

  </script>

</span>

<span>

  <div>y-only</div>

  <canvas id="canvas4" width="100" height="100" style="outline: 1px solid">

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

  </canvas>

  <script type="module">

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

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

    ctx.fillStyle = 'teal';

    ctx.filter = new CanvasFilter({

        name: 'gaussianBlur',

        stdDeviation: [0, 4],

});

    ctx.fillRect(25, 25, 50, 50);

  </script>

</span>

</div>