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.colorInterpolationMethod.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.colorInterpolationMethod-expected.html">
<meta name=fuzzy content="maxDifference=0-1; totalPixels=0-60000">
<title>Canvas test: 2d.gradient.colorInterpolationMethod</title>
<h1>2d.gradient.colorInterpolationMethod</h1>
<p class="desc">CSS color spaces work as a CanvasGradient color interpolation methods</p>
<div class="grid-container" style="--grid-width: 5">
<span>
<div>srgb</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');
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 = 'srgb';
ctx.fillStyle = g;
ctx.fillRect(0, 0, 100, 50);
</script>
</span>
<span>
<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');
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';
ctx.fillStyle = g;
ctx.fillRect(0, 0, 100, 50);
</script>
</span>
<span>
<div>hwb</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');
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';
ctx.fillStyle = g;
ctx.fillRect(0, 0, 100, 50);
</script>
</span>
<span>
<div>srgb-linear</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');
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 = 'srgb-linear';
ctx.fillStyle = g;
ctx.fillRect(0, 0, 100, 50);
</script>
</span>
<span>
<div>display-p3</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');
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 = 'display-p3';
ctx.fillStyle = g;
ctx.fillRect(0, 0, 100, 50);
</script>
</span>
<span>
<div>a98-rgb</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');
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 = 'a98-rgb';
ctx.fillStyle = g;
ctx.fillRect(0, 0, 100, 50);
</script>
</span>
<span>
<div>prophoto-rgb</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');
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 = 'prophoto-rgb';
ctx.fillStyle = g;
ctx.fillRect(0, 0, 100, 50);
</script>
</span>
<span>
<div>rec2020</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');
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 = 'rec2020';
ctx.fillStyle = g;
ctx.fillRect(0, 0, 100, 50);
</script>
</span>
<span>
<div>lab</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');
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 = 'lab';
ctx.fillStyle = g;
ctx.fillRect(0, 0, 100, 50);
</script>
</span>
<span>
<div>oklab</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');
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 = 'oklab';
ctx.fillStyle = g;
ctx.fillRect(0, 0, 100, 50);
</script>
</span>
<span>
<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');
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';
ctx.fillStyle = g;
ctx.fillRect(0, 0, 100, 50);
</script>
</span>
<span>
<div>oklch</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');
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';
ctx.fillStyle = g;
ctx.fillRect(0, 0, 100, 50);
</script>
</span>
<span>
<div>xyz</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');
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 = 'xyz';
ctx.fillStyle = g;
ctx.fillRect(0, 0, 100, 50);
</script>
</span>
<span>
<div>xyz-d50</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');
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 = 'xyz-d50';
ctx.fillStyle = g;
ctx.fillRect(0, 0, 100, 50);
</script>
</span>
<span>
<div>xyz-d65</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');
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 = 'xyz-d65';
ctx.fillStyle = g;
ctx.fillRect(0, 0, 100, 50);
</script>
</span>
</div>