mozilla-central: testing/web-platform/tests/html/canvas/offscreen/fill-and-stroke-styles/2d.gradient.hueInterpolationMethod.w.html@05ceace273412fbc2ac95622308ac3e8573779a8

<!DOCTYPE html>
<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
<meta charset="UTF-8">
<html class="reftest-wait">
<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
<link rel="match" href="2d.gradient.hueInterpolationMethod-expected.html">
<meta name=fuzzy content="maxDifference=0-1; totalPixels=0-60000">
<title>Canvas test: 2d.gradient.hueInterpolationMethod</title>
<h1>2d.gradient.hueInterpolationMethod</h1>
<p class="desc">CSS hue interpolation methods work for CanvasGradients</p>
<script>pending_tests = 16;</script>

<div class="grid-container" style="--grid-width: 4">
<span>
  <div>shorter</div>
  <div>hsl</div>
  <canvas class="grid-cell-content" id="canvas0" width="100" height="50">
    <p class="fallback">FAIL (fallback content)</p>
  </canvas>
  <script id="myWorker0" type="text/worker">
    self.onmessage = function(e) {
      const canvas = new OffscreenCanvas(100, 50);
      const ctx = canvas.getContext('2d');

      // Generate two gradients, one from red to green, the other from red to blue.
      // In the first instance "shorter" is equivalent to "increasing".
      // In the second, "shorter" is equivalent to "decreasing".

      var g = ctx.createLinearGradient(0, 0, 100, 0);
      g.addColorStop(0, 'color(srgb 1 0 0)');
      g.addColorStop(1, 'color(srgb 0 1 0)');
      g.colorInterpolationMethod = 'hsl';
      g.hueInterpolationMethod = 'shorter';
      ctx.fillStyle = g;
      ctx.fillRect(0, 0, 100, 25);

      var g2 = ctx.createLinearGradient(0, 0, 100, 0);
      g2.addColorStop(0, 'color(srgb 1 0 0)');
      g2.addColorStop(1, 'color(srgb 0 0 1)');
      g2.colorInterpolationMethod = 'hsl';
      g2.hueInterpolationMethod = 'shorter';
      ctx.fillStyle = g2;
      ctx.fillRect(0, 25, 100, 25);

      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>longer</div>
  <div>hsl</div>
  <canvas class="grid-cell-content" id="canvas1" width="100" height="50">
    <p class="fallback">FAIL (fallback content)</p>
  </canvas>
  <script id="myWorker1" type="text/worker">
    self.onmessage = function(e) {
      const canvas = new OffscreenCanvas(100, 50);
      const ctx = canvas.getContext('2d');

      // Generate two gradients, one from red to green, the other from red to blue.
      // In the first instance "shorter" is equivalent to "increasing".
      // In the second, "shorter" is equivalent to "decreasing".

      var g = ctx.createLinearGradient(0, 0, 100, 0);
      g.addColorStop(0, 'color(srgb 1 0 0)');
      g.addColorStop(1, 'color(srgb 0 1 0)');
      g.colorInterpolationMethod = 'hsl';
      g.hueInterpolationMethod = 'longer';
      ctx.fillStyle = g;
      ctx.fillRect(0, 0, 100, 25);

      var g2 = ctx.createLinearGradient(0, 0, 100, 0);
      g2.addColorStop(0, 'color(srgb 1 0 0)');
      g2.addColorStop(1, 'color(srgb 0 0 1)');
      g2.colorInterpolationMethod = 'hsl';
      g2.hueInterpolationMethod = 'longer';
      ctx.fillStyle = g2;
      ctx.fillRect(0, 25, 100, 25);

      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>increasing</div>
  <div>hsl</div>
  <canvas class="grid-cell-content" id="canvas2" width="100" height="50">
    <p class="fallback">FAIL (fallback content)</p>
  </canvas>
  <script id="myWorker2" type="text/worker">
    self.onmessage = function(e) {
      const canvas = new OffscreenCanvas(100, 50);
      const ctx = canvas.getContext('2d');

      // Generate two gradients, one from red to green, the other from red to blue.
      // In the first instance "shorter" is equivalent to "increasing".
      // In the second, "shorter" is equivalent to "decreasing".

      var g = ctx.createLinearGradient(0, 0, 100, 0);
      g.addColorStop(0, 'color(srgb 1 0 0)');
      g.addColorStop(1, 'color(srgb 0 1 0)');
      g.colorInterpolationMethod = 'hsl';
      g.hueInterpolationMethod = 'increasing';
      ctx.fillStyle = g;
      ctx.fillRect(0, 0, 100, 25);

      var g2 = ctx.createLinearGradient(0, 0, 100, 0);
      g2.addColorStop(0, 'color(srgb 1 0 0)');
      g2.addColorStop(1, 'color(srgb 0 0 1)');
      g2.colorInterpolationMethod = 'hsl';
      g2.hueInterpolationMethod = 'increasing';
      ctx.fillStyle = g2;
      ctx.fillRect(0, 25, 100, 25);

      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>decreasing</div>
  <div>hsl</div>
  <canvas class="grid-cell-content" id="canvas3" width="100" height="50">
    <p class="fallback">FAIL (fallback content)</p>
  </canvas>
  <script id="myWorker3" type="text/worker">
    self.onmessage = function(e) {
      const canvas = new OffscreenCanvas(100, 50);
      const ctx = canvas.getContext('2d');

      // Generate two gradients, one from red to green, the other from red to blue.
      // In the first instance "shorter" is equivalent to "increasing".
      // In the second, "shorter" is equivalent to "decreasing".

      var g = ctx.createLinearGradient(0, 0, 100, 0);
      g.addColorStop(0, 'color(srgb 1 0 0)');
      g.addColorStop(1, 'color(srgb 0 1 0)');
      g.colorInterpolationMethod = 'hsl';
      g.hueInterpolationMethod = 'decreasing';
      ctx.fillStyle = g;
      ctx.fillRect(0, 0, 100, 25);

      var g2 = ctx.createLinearGradient(0, 0, 100, 0);
      g2.addColorStop(0, 'color(srgb 1 0 0)');
      g2.addColorStop(1, 'color(srgb 0 0 1)');
      g2.colorInterpolationMethod = 'hsl';
      g2.hueInterpolationMethod = 'decreasing';
      ctx.fillStyle = g2;
      ctx.fillRect(0, 25, 100, 25);

      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>shorter</div>
  <div>hwb</div>
  <canvas class="grid-cell-content" id="canvas4" width="100" height="50">
    <p class="fallback">FAIL (fallback content)</p>
  </canvas>
  <script id="myWorker4" type="text/worker">
    self.onmessage = function(e) {
      const canvas = new OffscreenCanvas(100, 50);
      const ctx = canvas.getContext('2d');

      // Generate two gradients, one from red to green, the other from red to blue.
      // In the first instance "shorter" is equivalent to "increasing".
      // In the second, "shorter" is equivalent to "decreasing".

      var g = ctx.createLinearGradient(0, 0, 100, 0);
      g.addColorStop(0, 'color(srgb 1 0 0)');
      g.addColorStop(1, 'color(srgb 0 1 0)');
      g.colorInterpolationMethod = 'hwb';
      g.hueInterpolationMethod = 'shorter';
      ctx.fillStyle = g;
      ctx.fillRect(0, 0, 100, 25);

      var g2 = ctx.createLinearGradient(0, 0, 100, 0);
      g2.addColorStop(0, 'color(srgb 1 0 0)');
      g2.addColorStop(1, 'color(srgb 0 0 1)');
      g2.colorInterpolationMethod = 'hwb';
      g2.hueInterpolationMethod = 'shorter';
      ctx.fillStyle = g2;
      ctx.fillRect(0, 25, 100, 25);

      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>

<span>
  <div>longer</div>
  <div>hwb</div>
  <canvas class="grid-cell-content" id="canvas5" width="100" height="50">
    <p class="fallback">FAIL (fallback content)</p>
  </canvas>
  <script id="myWorker5" type="text/worker">
    self.onmessage = function(e) {
      const canvas = new OffscreenCanvas(100, 50);
      const ctx = canvas.getContext('2d');

      // Generate two gradients, one from red to green, the other from red to blue.
      // In the first instance "shorter" is equivalent to "increasing".
      // In the second, "shorter" is equivalent to "decreasing".

      var g = ctx.createLinearGradient(0, 0, 100, 0);
      g.addColorStop(0, 'color(srgb 1 0 0)');
      g.addColorStop(1, 'color(srgb 0 1 0)');
      g.colorInterpolationMethod = 'hwb';
      g.hueInterpolationMethod = 'longer';
      ctx.fillStyle = g;
      ctx.fillRect(0, 0, 100, 25);

      var g2 = ctx.createLinearGradient(0, 0, 100, 0);
      g2.addColorStop(0, 'color(srgb 1 0 0)');
      g2.addColorStop(1, 'color(srgb 0 0 1)');
      g2.colorInterpolationMethod = 'hwb';
      g2.hueInterpolationMethod = 'longer';
      ctx.fillStyle = g2;
      ctx.fillRect(0, 25, 100, 25);

      const bitmap = canvas.transferToImageBitmap();
      self.postMessage(bitmap, bitmap);
    };
  </script>
  <script type="module">
    const blob = new Blob([document.getElementById('myWorker5').textContent]);
    const worker = new Worker(URL.createObjectURL(blob));
    worker.addEventListener('message', msg => {
      const outputCanvas = document.getElementById('canvas5');
      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>increasing</div>
  <div>hwb</div>
  <canvas class="grid-cell-content" id="canvas6" width="100" height="50">
    <p class="fallback">FAIL (fallback content)</p>
  </canvas>
  <script id="myWorker6" type="text/worker">
    self.onmessage = function(e) {
      const canvas = new OffscreenCanvas(100, 50);
      const ctx = canvas.getContext('2d');

      // Generate two gradients, one from red to green, the other from red to blue.
      // In the first instance "shorter" is equivalent to "increasing".
      // In the second, "shorter" is equivalent to "decreasing".

      var g = ctx.createLinearGradient(0, 0, 100, 0);
      g.addColorStop(0, 'color(srgb 1 0 0)');
      g.addColorStop(1, 'color(srgb 0 1 0)');
      g.colorInterpolationMethod = 'hwb';
      g.hueInterpolationMethod = 'increasing';
      ctx.fillStyle = g;
      ctx.fillRect(0, 0, 100, 25);

      var g2 = ctx.createLinearGradient(0, 0, 100, 0);
      g2.addColorStop(0, 'color(srgb 1 0 0)');
      g2.addColorStop(1, 'color(srgb 0 0 1)');
      g2.colorInterpolationMethod = 'hwb';
      g2.hueInterpolationMethod = 'increasing';
      ctx.fillStyle = g2;
      ctx.fillRect(0, 25, 100, 25);

      const bitmap = canvas.transferToImageBitmap();
      self.postMessage(bitmap, bitmap);
    };
  </script>
  <script type="module">
    const blob = new Blob([document.getElementById('myWorker6').textContent]);
    const worker = new Worker(URL.createObjectURL(blob));
    worker.addEventListener('message', msg => {
      const outputCanvas = document.getElementById('canvas6');
      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>decreasing</div>
  <div>hwb</div>
  <canvas class="grid-cell-content" id="canvas7" width="100" height="50">
    <p class="fallback">FAIL (fallback content)</p>
  </canvas>
  <script id="myWorker7" type="text/worker">
    self.onmessage = function(e) {
      const canvas = new OffscreenCanvas(100, 50);
      const ctx = canvas.getContext('2d');

      // Generate two gradients, one from red to green, the other from red to blue.
      // In the first instance "shorter" is equivalent to "increasing".
      // In the second, "shorter" is equivalent to "decreasing".

      var g = ctx.createLinearGradient(0, 0, 100, 0);
      g.addColorStop(0, 'color(srgb 1 0 0)');
      g.addColorStop(1, 'color(srgb 0 1 0)');
      g.colorInterpolationMethod = 'hwb';
      g.hueInterpolationMethod = 'decreasing';
      ctx.fillStyle = g;
      ctx.fillRect(0, 0, 100, 25);

      var g2 = ctx.createLinearGradient(0, 0, 100, 0);
      g2.addColorStop(0, 'color(srgb 1 0 0)');
      g2.addColorStop(1, 'color(srgb 0 0 1)');
      g2.colorInterpolationMethod = 'hwb';
      g2.hueInterpolationMethod = 'decreasing';
      ctx.fillStyle = g2;
      ctx.fillRect(0, 25, 100, 25);

      const bitmap = canvas.transferToImageBitmap();
      self.postMessage(bitmap, bitmap);
    };
  </script>
  <script type="module">
    const blob = new Blob([document.getElementById('myWorker7').textContent]);
    const worker = new Worker(URL.createObjectURL(blob));
    worker.addEventListener('message', msg => {
      const outputCanvas = document.getElementById('canvas7');
      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>shorter</div>
  <div>lch</div>
  <canvas class="grid-cell-content" id="canvas8" width="100" height="50">
    <p class="fallback">FAIL (fallback content)</p>
  </canvas>
  <script id="myWorker8" type="text/worker">
    self.onmessage = function(e) {
      const canvas = new OffscreenCanvas(100, 50);
      const ctx = canvas.getContext('2d');

      // Generate two gradients, one from red to green, the other from red to blue.
      // In the first instance "shorter" is equivalent to "increasing".
      // In the second, "shorter" is equivalent to "decreasing".

      var g = ctx.createLinearGradient(0, 0, 100, 0);
      g.addColorStop(0, 'color(srgb 1 0 0)');
      g.addColorStop(1, 'color(srgb 0 1 0)');
      g.colorInterpolationMethod = 'lch';
      g.hueInterpolationMethod = 'shorter';
      ctx.fillStyle = g;
      ctx.fillRect(0, 0, 100, 25);

      var g2 = ctx.createLinearGradient(0, 0, 100, 0);
      g2.addColorStop(0, 'color(srgb 1 0 0)');
      g2.addColorStop(1, 'color(srgb 0 0 1)');
      g2.colorInterpolationMethod = 'lch';
      g2.hueInterpolationMethod = 'shorter';
      ctx.fillStyle = g2;
      ctx.fillRect(0, 25, 100, 25);

      const bitmap = canvas.transferToImageBitmap();
      self.postMessage(bitmap, bitmap);
    };
  </script>
  <script type="module">
    const blob = new Blob([document.getElementById('myWorker8').textContent]);
    const worker = new Worker(URL.createObjectURL(blob));
    worker.addEventListener('message', msg => {
      const outputCanvas = document.getElementById('canvas8');
      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>longer</div>
  <div>lch</div>
  <canvas class="grid-cell-content" id="canvas9" width="100" height="50">
    <p class="fallback">FAIL (fallback content)</p>
  </canvas>
  <script id="myWorker9" type="text/worker">
    self.onmessage = function(e) {
      const canvas = new OffscreenCanvas(100, 50);
      const ctx = canvas.getContext('2d');

      // Generate two gradients, one from red to green, the other from red to blue.
      // In the first instance "shorter" is equivalent to "increasing".
      // In the second, "shorter" is equivalent to "decreasing".

      var g = ctx.createLinearGradient(0, 0, 100, 0);
      g.addColorStop(0, 'color(srgb 1 0 0)');
      g.addColorStop(1, 'color(srgb 0 1 0)');
      g.colorInterpolationMethod = 'lch';
      g.hueInterpolationMethod = 'longer';
      ctx.fillStyle = g;
      ctx.fillRect(0, 0, 100, 25);

      var g2 = ctx.createLinearGradient(0, 0, 100, 0);
      g2.addColorStop(0, 'color(srgb 1 0 0)');
      g2.addColorStop(1, 'color(srgb 0 0 1)');
      g2.colorInterpolationMethod = 'lch';
      g2.hueInterpolationMethod = 'longer';
      ctx.fillStyle = g2;
      ctx.fillRect(0, 25, 100, 25);

      const bitmap = canvas.transferToImageBitmap();
      self.postMessage(bitmap, bitmap);
    };
  </script>
  <script type="module">
    const blob = new Blob([document.getElementById('myWorker9').textContent]);
    const worker = new Worker(URL.createObjectURL(blob));
    worker.addEventListener('message', msg => {
      const outputCanvas = document.getElementById('canvas9');
      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>increasing</div>
  <div>lch</div>
  <canvas class="grid-cell-content" id="canvas10" width="100" height="50">
    <p class="fallback">FAIL (fallback content)</p>
  </canvas>
  <script id="myWorker10" type="text/worker">
    self.onmessage = function(e) {
      const canvas = new OffscreenCanvas(100, 50);
      const ctx = canvas.getContext('2d');

      // Generate two gradients, one from red to green, the other from red to blue.
      // In the first instance "shorter" is equivalent to "increasing".
      // In the second, "shorter" is equivalent to "decreasing".

      var g = ctx.createLinearGradient(0, 0, 100, 0);
      g.addColorStop(0, 'color(srgb 1 0 0)');
      g.addColorStop(1, 'color(srgb 0 1 0)');
      g.colorInterpolationMethod = 'lch';
      g.hueInterpolationMethod = 'increasing';
      ctx.fillStyle = g;
      ctx.fillRect(0, 0, 100, 25);

      var g2 = ctx.createLinearGradient(0, 0, 100, 0);
      g2.addColorStop(0, 'color(srgb 1 0 0)');
      g2.addColorStop(1, 'color(srgb 0 0 1)');
      g2.colorInterpolationMethod = 'lch';
      g2.hueInterpolationMethod = 'increasing';
      ctx.fillStyle = g2;
      ctx.fillRect(0, 25, 100, 25);

      const bitmap = canvas.transferToImageBitmap();
      self.postMessage(bitmap, bitmap);
    };
  </script>
  <script type="module">
    const blob = new Blob([document.getElementById('myWorker10').textContent]);
    const worker = new Worker(URL.createObjectURL(blob));
    worker.addEventListener('message', msg => {
      const outputCanvas = document.getElementById('canvas10');
      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>decreasing</div>
  <div>lch</div>
  <canvas class="grid-cell-content" id="canvas11" width="100" height="50">
    <p class="fallback">FAIL (fallback content)</p>
  </canvas>
  <script id="myWorker11" type="text/worker">
    self.onmessage = function(e) {
      const canvas = new OffscreenCanvas(100, 50);
      const ctx = canvas.getContext('2d');

      // Generate two gradients, one from red to green, the other from red to blue.
      // In the first instance "shorter" is equivalent to "increasing".
      // In the second, "shorter" is equivalent to "decreasing".

      var g = ctx.createLinearGradient(0, 0, 100, 0);
      g.addColorStop(0, 'color(srgb 1 0 0)');
      g.addColorStop(1, 'color(srgb 0 1 0)');
      g.colorInterpolationMethod = 'lch';
      g.hueInterpolationMethod = 'decreasing';
      ctx.fillStyle = g;
      ctx.fillRect(0, 0, 100, 25);

      var g2 = ctx.createLinearGradient(0, 0, 100, 0);
      g2.addColorStop(0, 'color(srgb 1 0 0)');
      g2.addColorStop(1, 'color(srgb 0 0 1)');
      g2.colorInterpolationMethod = 'lch';
      g2.hueInterpolationMethod = 'decreasing';
      ctx.fillStyle = g2;
      ctx.fillRect(0, 25, 100, 25);

      const bitmap = canvas.transferToImageBitmap();
      self.postMessage(bitmap, bitmap);
    };
  </script>
  <script type="module">
    const blob = new Blob([document.getElementById('myWorker11').textContent]);
    const worker = new Worker(URL.createObjectURL(blob));
    worker.addEventListener('message', msg => {
      const outputCanvas = document.getElementById('canvas11');
      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>shorter</div>
  <div>oklch</div>
  <canvas class="grid-cell-content" id="canvas12" width="100" height="50">
    <p class="fallback">FAIL (fallback content)</p>
  </canvas>
  <script id="myWorker12" type="text/worker">
    self.onmessage = function(e) {
      const canvas = new OffscreenCanvas(100, 50);
      const ctx = canvas.getContext('2d');

      // Generate two gradients, one from red to green, the other from red to blue.
      // In the first instance "shorter" is equivalent to "increasing".
      // In the second, "shorter" is equivalent to "decreasing".

      var g = ctx.createLinearGradient(0, 0, 100, 0);
      g.addColorStop(0, 'color(srgb 1 0 0)');
      g.addColorStop(1, 'color(srgb 0 1 0)');
      g.colorInterpolationMethod = 'oklch';
      g.hueInterpolationMethod = 'shorter';
      ctx.fillStyle = g;
      ctx.fillRect(0, 0, 100, 25);

      var g2 = ctx.createLinearGradient(0, 0, 100, 0);
      g2.addColorStop(0, 'color(srgb 1 0 0)');
      g2.addColorStop(1, 'color(srgb 0 0 1)');
      g2.colorInterpolationMethod = 'oklch';
      g2.hueInterpolationMethod = 'shorter';
      ctx.fillStyle = g2;
      ctx.fillRect(0, 25, 100, 25);

      const bitmap = canvas.transferToImageBitmap();
      self.postMessage(bitmap, bitmap);
    };
  </script>
  <script type="module">
    const blob = new Blob([document.getElementById('myWorker12').textContent]);
    const worker = new Worker(URL.createObjectURL(blob));
    worker.addEventListener('message', msg => {
      const outputCanvas = document.getElementById('canvas12');
      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>longer</div>
  <div>oklch</div>
  <canvas class="grid-cell-content" id="canvas13" width="100" height="50">
    <p class="fallback">FAIL (fallback content)</p>
  </canvas>
  <script id="myWorker13" type="text/worker">
    self.onmessage = function(e) {
      const canvas = new OffscreenCanvas(100, 50);
      const ctx = canvas.getContext('2d');

      // Generate two gradients, one from red to green, the other from red to blue.
      // In the first instance "shorter" is equivalent to "increasing".
      // In the second, "shorter" is equivalent to "decreasing".

      var g = ctx.createLinearGradient(0, 0, 100, 0);
      g.addColorStop(0, 'color(srgb 1 0 0)');
      g.addColorStop(1, 'color(srgb 0 1 0)');
      g.colorInterpolationMethod = 'oklch';
      g.hueInterpolationMethod = 'longer';
      ctx.fillStyle = g;
      ctx.fillRect(0, 0, 100, 25);

      var g2 = ctx.createLinearGradient(0, 0, 100, 0);
      g2.addColorStop(0, 'color(srgb 1 0 0)');
      g2.addColorStop(1, 'color(srgb 0 0 1)');
      g2.colorInterpolationMethod = 'oklch';
      g2.hueInterpolationMethod = 'longer';
      ctx.fillStyle = g2;
      ctx.fillRect(0, 25, 100, 25);

      const bitmap = canvas.transferToImageBitmap();
      self.postMessage(bitmap, bitmap);
    };
  </script>
  <script type="module">
    const blob = new Blob([document.getElementById('myWorker13').textContent]);
    const worker = new Worker(URL.createObjectURL(blob));
    worker.addEventListener('message', msg => {
      const outputCanvas = document.getElementById('canvas13');
      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>increasing</div>
  <div>oklch</div>
  <canvas class="grid-cell-content" id="canvas14" width="100" height="50">
    <p class="fallback">FAIL (fallback content)</p>
  </canvas>
  <script id="myWorker14" type="text/worker">
    self.onmessage = function(e) {
      const canvas = new OffscreenCanvas(100, 50);
      const ctx = canvas.getContext('2d');

      // Generate two gradients, one from red to green, the other from red to blue.
      // In the first instance "shorter" is equivalent to "increasing".
      // In the second, "shorter" is equivalent to "decreasing".

      var g = ctx.createLinearGradient(0, 0, 100, 0);
      g.addColorStop(0, 'color(srgb 1 0 0)');
      g.addColorStop(1, 'color(srgb 0 1 0)');
      g.colorInterpolationMethod = 'oklch';
      g.hueInterpolationMethod = 'increasing';
      ctx.fillStyle = g;
      ctx.fillRect(0, 0, 100, 25);

      var g2 = ctx.createLinearGradient(0, 0, 100, 0);
      g2.addColorStop(0, 'color(srgb 1 0 0)');
      g2.addColorStop(1, 'color(srgb 0 0 1)');
      g2.colorInterpolationMethod = 'oklch';
      g2.hueInterpolationMethod = 'increasing';
      ctx.fillStyle = g2;
      ctx.fillRect(0, 25, 100, 25);

      const bitmap = canvas.transferToImageBitmap();
      self.postMessage(bitmap, bitmap);
    };
  </script>
  <script type="module">
    const blob = new Blob([document.getElementById('myWorker14').textContent]);
    const worker = new Worker(URL.createObjectURL(blob));
    worker.addEventListener('message', msg => {
      const outputCanvas = document.getElementById('canvas14');
      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>decreasing</div>
  <div>oklch</div>
  <canvas class="grid-cell-content" id="canvas15" width="100" height="50">
    <p class="fallback">FAIL (fallback content)</p>
  </canvas>
  <script id="myWorker15" type="text/worker">
    self.onmessage = function(e) {
      const canvas = new OffscreenCanvas(100, 50);
      const ctx = canvas.getContext('2d');

      // Generate two gradients, one from red to green, the other from red to blue.
      // In the first instance "shorter" is equivalent to "increasing".
      // In the second, "shorter" is equivalent to "decreasing".

      var g = ctx.createLinearGradient(0, 0, 100, 0);
      g.addColorStop(0, 'color(srgb 1 0 0)');
      g.addColorStop(1, 'color(srgb 0 1 0)');
      g.colorInterpolationMethod = 'oklch';
      g.hueInterpolationMethod = 'decreasing';
      ctx.fillStyle = g;
      ctx.fillRect(0, 0, 100, 25);

      var g2 = ctx.createLinearGradient(0, 0, 100, 0);
      g2.addColorStop(0, 'color(srgb 1 0 0)');
      g2.addColorStop(1, 'color(srgb 0 0 1)');
      g2.colorInterpolationMethod = 'oklch';
      g2.hueInterpolationMethod = 'decreasing';
      ctx.fillStyle = g2;
      ctx.fillRect(0, 25, 100, 25);

      const bitmap = canvas.transferToImageBitmap();
      self.postMessage(bitmap, bitmap);
    };
  </script>
  <script type="module">
    const blob = new Blob([document.getElementById('myWorker15').textContent]);
    const worker = new Worker(URL.createObjectURL(blob));
    worker.addEventListener('message', msg => {
      const outputCanvas = document.getElementById('canvas15');
      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>
author	Gabriel Luong <gabriel.luong@gmail.com>
	Sun, 13 Jul 2025 14:48:08 +0000 (5 hours ago)
changeset 796394	05ceace273412fbc2ac95622308ac3e8573779a8
parent 776173	f95ce76846e9f8b4d9cce5a7926d6b2778608be2
permissions	-rw-r--r--