Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /html/canvas/element/fill-and-stroke-styles/2d.gradient.hueInterpolationMethod.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
<meta charset="UTF-8">
<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>
<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 type="module">
const canvas = document.getElementById("canvas0");
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);
</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 type="module">
const canvas = document.getElementById("canvas1");
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);
</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 type="module">
const canvas = document.getElementById("canvas2");
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);
</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 type="module">
const canvas = document.getElementById("canvas3");
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);
</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 type="module">
const canvas = document.getElementById("canvas4");
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);
</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 type="module">
const canvas = document.getElementById("canvas5");
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);
</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 type="module">
const canvas = document.getElementById("canvas6");
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);
</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 type="module">
const canvas = document.getElementById("canvas7");
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);
</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 type="module">
const canvas = document.getElementById("canvas8");
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);
</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 type="module">
const canvas = document.getElementById("canvas9");
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);
</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 type="module">
const canvas = document.getElementById("canvas10");
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);
</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 type="module">
const canvas = document.getElementById("canvas11");
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);
</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 type="module">
const canvas = document.getElementById("canvas12");
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);
</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 type="module">
const canvas = document.getElementById("canvas13");
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);
</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 type="module">
const canvas = document.getElementById("canvas14");
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);
</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 type="module">
const canvas = document.getElementById("canvas15");
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);
</script>
</span>
</div>