2d.filter.layers.gaussianBlur.w.html

<!DOCTYPE html>
<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
<html class="reftest-wait">
<link rel="match" href="2d.filter.layers.gaussianBlur-expected.html">
<title>Canvas test: 2d.filter.layers.gaussianBlur</title>
<h1 style="font-size: 20px;">2d.filter.layers.gaussianBlur</h1>
<p class="desc">Test CanvasFilter() with gaussianBlur.</p>
<script>pending_tests = 5;</script>

<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 id="myWorker0" type="text/worker">
    self.onmessage = function(e) {
      const canvas = new OffscreenCanvas(100, 100);
      const ctx = canvas.getContext('2d');

      ctx.fillStyle = 'teal';
      ctx.beginLayer({filter: {
          name: 'gaussianBlur',
          stdDeviation: [4, 0],
      }});
      ctx.fillRect(25, 25, 50, 50);
      ctx.endLayer();

      const bitmap = canvas.transferToImageBitmap();
      self.postMessage(bitmap, bitmap);
    };
  </script>
  <script type="module">
    const blob = new Blob([document.getElementById('myWorker0').textContent]);
    const worker = new Worker(URL.createObjectURL(blob));
    worker.addEventListener('message', msg => {
      const outputCanvas = document.getElementById('canvas0');
      const outputCtx = outputCanvas.getContext('2d');
      outputCtx.drawImage(msg.data, 0, 0);
      if (--pending_tests == 0) {
        document.documentElement.classList.remove('reftest-wait');
      }
    });
    worker.postMessage(null);
  </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 id="myWorker1" type="text/worker">
    self.onmessage = function(e) {
      const canvas = new OffscreenCanvas(100, 100);
      const ctx = canvas.getContext('2d');

      ctx.fillStyle = 'teal';
      ctx.beginLayer({filter: {
          name: 'gaussianBlur',
          stdDeviation: [4, 1],
      }});
      ctx.fillRect(25, 25, 50, 50);
      ctx.endLayer();

      const bitmap = canvas.transferToImageBitmap();
      self.postMessage(bitmap, bitmap);
    };
  </script>
  <script type="module">
    const blob = new Blob([document.getElementById('myWorker1').textContent]);
    const worker = new Worker(URL.createObjectURL(blob));
    worker.addEventListener('message', msg => {
      const outputCanvas = document.getElementById('canvas1');
      const outputCtx = outputCanvas.getContext('2d');
      outputCtx.drawImage(msg.data, 0, 0);
      if (--pending_tests == 0) {
        document.documentElement.classList.remove('reftest-wait');
      }
    });
    worker.postMessage(null);
  </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 id="myWorker2" type="text/worker">
    self.onmessage = function(e) {
      const canvas = new OffscreenCanvas(100, 100);
      const ctx = canvas.getContext('2d');

      ctx.fillStyle = 'teal';
      ctx.beginLayer({filter: {
          name: 'gaussianBlur',
          stdDeviation: [4, 4],
      }});
      ctx.fillRect(25, 25, 50, 50);
      ctx.endLayer();

      const bitmap = canvas.transferToImageBitmap();
      self.postMessage(bitmap, bitmap);
    };
  </script>
  <script type="module">
    const blob = new Blob([document.getElementById('myWorker2').textContent]);
    const worker = new Worker(URL.createObjectURL(blob));
    worker.addEventListener('message', msg => {
      const outputCanvas = document.getElementById('canvas2');
      const outputCtx = outputCanvas.getContext('2d');
      outputCtx.drawImage(msg.data, 0, 0);
      if (--pending_tests == 0) {
        document.documentElement.classList.remove('reftest-wait');
      }
    });
    worker.postMessage(null);
  </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 id="myWorker3" type="text/worker">
    self.onmessage = function(e) {
      const canvas = new OffscreenCanvas(100, 100);
      const ctx = canvas.getContext('2d');

      ctx.fillStyle = 'teal';
      ctx.beginLayer({filter: {
          name: 'gaussianBlur',
          stdDeviation: [1, 4],
      }});
      ctx.fillRect(25, 25, 50, 50);
      ctx.endLayer();

      const bitmap = canvas.transferToImageBitmap();
      self.postMessage(bitmap, bitmap);
    };
  </script>
  <script type="module">
    const blob = new Blob([document.getElementById('myWorker3').textContent]);
    const worker = new Worker(URL.createObjectURL(blob));
    worker.addEventListener('message', msg => {
      const outputCanvas = document.getElementById('canvas3');
      const outputCtx = outputCanvas.getContext('2d');
      outputCtx.drawImage(msg.data, 0, 0);
      if (--pending_tests == 0) {
        document.documentElement.classList.remove('reftest-wait');
      }
    });
    worker.postMessage(null);
  </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 id="myWorker4" type="text/worker">
    self.onmessage = function(e) {
      const canvas = new OffscreenCanvas(100, 100);
      const ctx = canvas.getContext('2d');

      ctx.fillStyle = 'teal';
      ctx.beginLayer({filter: {
          name: 'gaussianBlur',
          stdDeviation: [0, 4],
      }});
      ctx.fillRect(25, 25, 50, 50);
      ctx.endLayer();

      const bitmap = canvas.transferToImageBitmap();
      self.postMessage(bitmap, bitmap);
    };
  </script>
  <script type="module">
    const blob = new Blob([document.getElementById('myWorker4').textContent]);
    const worker = new Worker(URL.createObjectURL(blob));
    worker.addEventListener('message', msg => {
      const outputCanvas = document.getElementById('canvas4');
      const outputCtx = outputCanvas.getContext('2d');
      outputCtx.drawImage(msg.data, 0, 0);
      if (--pending_tests == 0) {
        document.documentElement.classList.remove('reftest-wait');
      }
    });
    worker.postMessage(null);
  </script>
</span>

</div>
</html>
chromium/third_party/blink/web_tests/external/wpt/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.w.html
