Source code

Revision control

Copy as Markdown

Other Tools

Test Info:

<!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.colorInterpolationMethod-expected.html">
<script src="/common/reftest-wait.js"></script>
<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>
<script>pending_tests = 16;</script>
<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 id="myWorker0" type="text/worker">
self.onmessage = function(e) {
try {
const canvas = new OffscreenCanvas(100, 50);
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);
const bitmap = canvas.transferToImageBitmap();
self.postMessage({ type: 'bitmap', bitmap }, [bitmap]);
} catch (error) {
self.postMessage({ type: 'error', message: error });
}
};
</script>
<script type="module">
const blob = new Blob([document.getElementById('myWorker0').textContent]);
const worker = new Worker(URL.createObjectURL(blob));
worker.onerror = failOnError;
worker.onmessage = reftestStep(msg => {
if (msg.data.type === 'error') {
failOnError(msg.data.message);
return;
}
const outputCanvas = document.getElementById('canvas0');
const outputCtx = outputCanvas.getContext('2d');
outputCtx.drawImage(msg.data.bitmap, 0, 0);
if (--pending_tests == 0) {
takeScreenshot();
}
});
worker.postMessage(null);
</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 id="myWorker1" type="text/worker">
self.onmessage = function(e) {
try {
const canvas = new OffscreenCanvas(100, 50);
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);
const bitmap = canvas.transferToImageBitmap();
self.postMessage({ type: 'bitmap', bitmap }, [bitmap]);
} catch (error) {
self.postMessage({ type: 'error', message: error });
}
};
</script>
<script type="module">
const blob = new Blob([document.getElementById('myWorker1').textContent]);
const worker = new Worker(URL.createObjectURL(blob));
worker.onerror = failOnError;
worker.onmessage = reftestStep(msg => {
if (msg.data.type === 'error') {
failOnError(msg.data.message);
return;
}
const outputCanvas = document.getElementById('canvas1');
const outputCtx = outputCanvas.getContext('2d');
outputCtx.drawImage(msg.data.bitmap, 0, 0);
if (--pending_tests == 0) {
takeScreenshot();
}
});
worker.postMessage(null);
</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 id="myWorker2" type="text/worker">
self.onmessage = function(e) {
try {
const canvas = new OffscreenCanvas(100, 50);
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);
const bitmap = canvas.transferToImageBitmap();
self.postMessage({ type: 'bitmap', bitmap }, [bitmap]);
} catch (error) {
self.postMessage({ type: 'error', message: error });
}
};
</script>
<script type="module">
const blob = new Blob([document.getElementById('myWorker2').textContent]);
const worker = new Worker(URL.createObjectURL(blob));
worker.onerror = failOnError;
worker.onmessage = reftestStep(msg => {
if (msg.data.type === 'error') {
failOnError(msg.data.message);
return;
}
const outputCanvas = document.getElementById('canvas2');
const outputCtx = outputCanvas.getContext('2d');
outputCtx.drawImage(msg.data.bitmap, 0, 0);
if (--pending_tests == 0) {
takeScreenshot();
}
});
worker.postMessage(null);
</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 id="myWorker3" type="text/worker">
self.onmessage = function(e) {
try {
const canvas = new OffscreenCanvas(100, 50);
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);
const bitmap = canvas.transferToImageBitmap();
self.postMessage({ type: 'bitmap', bitmap }, [bitmap]);
} catch (error) {
self.postMessage({ type: 'error', message: error });
}
};
</script>
<script type="module">
const blob = new Blob([document.getElementById('myWorker3').textContent]);
const worker = new Worker(URL.createObjectURL(blob));
worker.onerror = failOnError;
worker.onmessage = reftestStep(msg => {
if (msg.data.type === 'error') {
failOnError(msg.data.message);
return;
}
const outputCanvas = document.getElementById('canvas3');
const outputCtx = outputCanvas.getContext('2d');
outputCtx.drawImage(msg.data.bitmap, 0, 0);
if (--pending_tests == 0) {
takeScreenshot();
}
});
worker.postMessage(null);
</script>
</span>
<span>
<div>display-p3-linear</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) {
try {
const canvas = new OffscreenCanvas(100, 50);
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-linear';
ctx.fillStyle = g;
ctx.fillRect(0, 0, 100, 50);
const bitmap = canvas.transferToImageBitmap();
self.postMessage({ type: 'bitmap', bitmap }, [bitmap]);
} catch (error) {
self.postMessage({ type: 'error', message: error });
}
};
</script>
<script type="module">
const blob = new Blob([document.getElementById('myWorker4').textContent]);
const worker = new Worker(URL.createObjectURL(blob));
worker.onerror = failOnError;
worker.onmessage = reftestStep(msg => {
if (msg.data.type === 'error') {
failOnError(msg.data.message);
return;
}
const outputCanvas = document.getElementById('canvas4');
const outputCtx = outputCanvas.getContext('2d');
outputCtx.drawImage(msg.data.bitmap, 0, 0);
if (--pending_tests == 0) {
takeScreenshot();
}
});
worker.postMessage(null);
</script>
</span>
<span>
<div>display-p3</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) {
try {
const canvas = new OffscreenCanvas(100, 50);
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);
const bitmap = canvas.transferToImageBitmap();
self.postMessage({ type: 'bitmap', bitmap }, [bitmap]);
} catch (error) {
self.postMessage({ type: 'error', message: error });
}
};
</script>
<script type="module">
const blob = new Blob([document.getElementById('myWorker5').textContent]);
const worker = new Worker(URL.createObjectURL(blob));
worker.onerror = failOnError;
worker.onmessage = reftestStep(msg => {
if (msg.data.type === 'error') {
failOnError(msg.data.message);
return;
}
const outputCanvas = document.getElementById('canvas5');
const outputCtx = outputCanvas.getContext('2d');
outputCtx.drawImage(msg.data.bitmap, 0, 0);
if (--pending_tests == 0) {
takeScreenshot();
}
});
worker.postMessage(null);
</script>
</span>
<span>
<div>a98-rgb</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) {
try {
const canvas = new OffscreenCanvas(100, 50);
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);
const bitmap = canvas.transferToImageBitmap();
self.postMessage({ type: 'bitmap', bitmap }, [bitmap]);
} catch (error) {
self.postMessage({ type: 'error', message: error });
}
};
</script>
<script type="module">
const blob = new Blob([document.getElementById('myWorker6').textContent]);
const worker = new Worker(URL.createObjectURL(blob));
worker.onerror = failOnError;
worker.onmessage = reftestStep(msg => {
if (msg.data.type === 'error') {
failOnError(msg.data.message);
return;
}
const outputCanvas = document.getElementById('canvas6');
const outputCtx = outputCanvas.getContext('2d');
outputCtx.drawImage(msg.data.bitmap, 0, 0);
if (--pending_tests == 0) {
takeScreenshot();
}
});
worker.postMessage(null);
</script>
</span>
<span>
<div>prophoto-rgb</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) {
try {
const canvas = new OffscreenCanvas(100, 50);
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);
const bitmap = canvas.transferToImageBitmap();
self.postMessage({ type: 'bitmap', bitmap }, [bitmap]);
} catch (error) {
self.postMessage({ type: 'error', message: error });
}
};
</script>
<script type="module">
const blob = new Blob([document.getElementById('myWorker7').textContent]);
const worker = new Worker(URL.createObjectURL(blob));
worker.onerror = failOnError;
worker.onmessage = reftestStep(msg => {
if (msg.data.type === 'error') {
failOnError(msg.data.message);
return;
}
const outputCanvas = document.getElementById('canvas7');
const outputCtx = outputCanvas.getContext('2d');
outputCtx.drawImage(msg.data.bitmap, 0, 0);
if (--pending_tests == 0) {
takeScreenshot();
}
});
worker.postMessage(null);
</script>
</span>
<span>
<div>rec2020</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) {
try {
const canvas = new OffscreenCanvas(100, 50);
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);
const bitmap = canvas.transferToImageBitmap();
self.postMessage({ type: 'bitmap', bitmap }, [bitmap]);
} catch (error) {
self.postMessage({ type: 'error', message: error });
}
};
</script>
<script type="module">
const blob = new Blob([document.getElementById('myWorker8').textContent]);
const worker = new Worker(URL.createObjectURL(blob));
worker.onerror = failOnError;
worker.onmessage = reftestStep(msg => {
if (msg.data.type === 'error') {
failOnError(msg.data.message);
return;
}
const outputCanvas = document.getElementById('canvas8');
const outputCtx = outputCanvas.getContext('2d');
outputCtx.drawImage(msg.data.bitmap, 0, 0);
if (--pending_tests == 0) {
takeScreenshot();
}
});
worker.postMessage(null);
</script>
</span>
<span>
<div>lab</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) {
try {
const canvas = new OffscreenCanvas(100, 50);
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);
const bitmap = canvas.transferToImageBitmap();
self.postMessage({ type: 'bitmap', bitmap }, [bitmap]);
} catch (error) {
self.postMessage({ type: 'error', message: error });
}
};
</script>
<script type="module">
const blob = new Blob([document.getElementById('myWorker9').textContent]);
const worker = new Worker(URL.createObjectURL(blob));
worker.onerror = failOnError;
worker.onmessage = reftestStep(msg => {
if (msg.data.type === 'error') {
failOnError(msg.data.message);
return;
}
const outputCanvas = document.getElementById('canvas9');
const outputCtx = outputCanvas.getContext('2d');
outputCtx.drawImage(msg.data.bitmap, 0, 0);
if (--pending_tests == 0) {
takeScreenshot();
}
});
worker.postMessage(null);
</script>
</span>
<span>
<div>oklab</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) {
try {
const canvas = new OffscreenCanvas(100, 50);
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);
const bitmap = canvas.transferToImageBitmap();
self.postMessage({ type: 'bitmap', bitmap }, [bitmap]);
} catch (error) {
self.postMessage({ type: 'error', message: error });
}
};
</script>
<script type="module">
const blob = new Blob([document.getElementById('myWorker10').textContent]);
const worker = new Worker(URL.createObjectURL(blob));
worker.onerror = failOnError;
worker.onmessage = reftestStep(msg => {
if (msg.data.type === 'error') {
failOnError(msg.data.message);
return;
}
const outputCanvas = document.getElementById('canvas10');
const outputCtx = outputCanvas.getContext('2d');
outputCtx.drawImage(msg.data.bitmap, 0, 0);
if (--pending_tests == 0) {
takeScreenshot();
}
});
worker.postMessage(null);
</script>
</span>
<span>
<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) {
try {
const canvas = new OffscreenCanvas(100, 50);
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);
const bitmap = canvas.transferToImageBitmap();
self.postMessage({ type: 'bitmap', bitmap }, [bitmap]);
} catch (error) {
self.postMessage({ type: 'error', message: error });
}
};
</script>
<script type="module">
const blob = new Blob([document.getElementById('myWorker11').textContent]);
const worker = new Worker(URL.createObjectURL(blob));
worker.onerror = failOnError;
worker.onmessage = reftestStep(msg => {
if (msg.data.type === 'error') {
failOnError(msg.data.message);
return;
}
const outputCanvas = document.getElementById('canvas11');
const outputCtx = outputCanvas.getContext('2d');
outputCtx.drawImage(msg.data.bitmap, 0, 0);
if (--pending_tests == 0) {
takeScreenshot();
}
});
worker.postMessage(null);
</script>
</span>
<span>
<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) {
try {
const canvas = new OffscreenCanvas(100, 50);
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);
const bitmap = canvas.transferToImageBitmap();
self.postMessage({ type: 'bitmap', bitmap }, [bitmap]);
} catch (error) {
self.postMessage({ type: 'error', message: error });
}
};
</script>
<script type="module">
const blob = new Blob([document.getElementById('myWorker12').textContent]);
const worker = new Worker(URL.createObjectURL(blob));
worker.onerror = failOnError;
worker.onmessage = reftestStep(msg => {
if (msg.data.type === 'error') {
failOnError(msg.data.message);
return;
}
const outputCanvas = document.getElementById('canvas12');
const outputCtx = outputCanvas.getContext('2d');
outputCtx.drawImage(msg.data.bitmap, 0, 0);
if (--pending_tests == 0) {
takeScreenshot();
}
});
worker.postMessage(null);
</script>
</span>
<span>
<div>xyz</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) {
try {
const canvas = new OffscreenCanvas(100, 50);
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);
const bitmap = canvas.transferToImageBitmap();
self.postMessage({ type: 'bitmap', bitmap }, [bitmap]);
} catch (error) {
self.postMessage({ type: 'error', message: error });
}
};
</script>
<script type="module">
const blob = new Blob([document.getElementById('myWorker13').textContent]);
const worker = new Worker(URL.createObjectURL(blob));
worker.onerror = failOnError;
worker.onmessage = reftestStep(msg => {
if (msg.data.type === 'error') {
failOnError(msg.data.message);
return;
}
const outputCanvas = document.getElementById('canvas13');
const outputCtx = outputCanvas.getContext('2d');
outputCtx.drawImage(msg.data.bitmap, 0, 0);
if (--pending_tests == 0) {
takeScreenshot();
}
});
worker.postMessage(null);
</script>
</span>
<span>
<div>xyz-d50</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) {
try {
const canvas = new OffscreenCanvas(100, 50);
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);
const bitmap = canvas.transferToImageBitmap();
self.postMessage({ type: 'bitmap', bitmap }, [bitmap]);
} catch (error) {
self.postMessage({ type: 'error', message: error });
}
};
</script>
<script type="module">
const blob = new Blob([document.getElementById('myWorker14').textContent]);
const worker = new Worker(URL.createObjectURL(blob));
worker.onerror = failOnError;
worker.onmessage = reftestStep(msg => {
if (msg.data.type === 'error') {
failOnError(msg.data.message);
return;
}
const outputCanvas = document.getElementById('canvas14');
const outputCtx = outputCanvas.getContext('2d');
outputCtx.drawImage(msg.data.bitmap, 0, 0);
if (--pending_tests == 0) {
takeScreenshot();
}
});
worker.postMessage(null);
</script>
</span>
<span>
<div>xyz-d65</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) {
try {
const canvas = new OffscreenCanvas(100, 50);
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);
const bitmap = canvas.transferToImageBitmap();
self.postMessage({ type: 'bitmap', bitmap }, [bitmap]);
} catch (error) {
self.postMessage({ type: 'error', message: error });
}
};
</script>
<script type="module">
const blob = new Blob([document.getElementById('myWorker15').textContent]);
const worker = new Worker(URL.createObjectURL(blob));
worker.onerror = failOnError;
worker.onmessage = reftestStep(msg => {
if (msg.data.type === 'error') {
failOnError(msg.data.message);
return;
}
const outputCanvas = document.getElementById('canvas15');
const outputCtx = outputCanvas.getContext('2d');
outputCtx.drawImage(msg.data.bitmap, 0, 0);
if (--pending_tests == 0) {
takeScreenshot();
}
});
worker.postMessage(null);
</script>
</span>
</div>
</html>