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

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.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>