Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE html>
<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
<meta charset="UTF-8">
<title>Canvas test: 2d.gradient.hueInterpolationMethod</title>
<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
<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>
<div class="grid-cell-content"
style="width: 100px; height: 50px;">
<style>
.swatch {
width: 100%;
height: 50%;
}
</style>
<div class="swatch" style="background:
linear-gradient(to right in hsl shorter
hue, color(srgb 1 0 0), color(srgb 0 1 0));
"></div>
<div class="swatch" style="background:
linear-gradient(to right in hsl shorter
hue, color(srgb 1 0 0), color(srgb 0 0 1));
"></div>
</div>
</span>
<span>
<div>longer</div>
<div>hsl</div>
<div class="grid-cell-content"
style="width: 100px; height: 50px;">
<style>
.swatch {
width: 100%;
height: 50%;
}
</style>
<div class="swatch" style="background:
linear-gradient(to right in hsl longer
hue, color(srgb 1 0 0), color(srgb 0 1 0));
"></div>
<div class="swatch" style="background:
linear-gradient(to right in hsl longer
hue, color(srgb 1 0 0), color(srgb 0 0 1));
"></div>
</div>
</span>
<span>
<div>increasing</div>
<div>hsl</div>
<div class="grid-cell-content"
style="width: 100px; height: 50px;">
<style>
.swatch {
width: 100%;
height: 50%;
}
</style>
<div class="swatch" style="background:
linear-gradient(to right in hsl increasing
hue, color(srgb 1 0 0), color(srgb 0 1 0));
"></div>
<div class="swatch" style="background:
linear-gradient(to right in hsl increasing
hue, color(srgb 1 0 0), color(srgb 0 0 1));
"></div>
</div>
</span>
<span>
<div>decreasing</div>
<div>hsl</div>
<div class="grid-cell-content"
style="width: 100px; height: 50px;">
<style>
.swatch {
width: 100%;
height: 50%;
}
</style>
<div class="swatch" style="background:
linear-gradient(to right in hsl decreasing
hue, color(srgb 1 0 0), color(srgb 0 1 0));
"></div>
<div class="swatch" style="background:
linear-gradient(to right in hsl decreasing
hue, color(srgb 1 0 0), color(srgb 0 0 1));
"></div>
</div>
</span>
<span>
<div>shorter</div>
<div>hwb</div>
<div class="grid-cell-content"
style="width: 100px; height: 50px;">
<style>
.swatch {
width: 100%;
height: 50%;
}
</style>
<div class="swatch" style="background:
linear-gradient(to right in hwb shorter
hue, color(srgb 1 0 0), color(srgb 0 1 0));
"></div>
<div class="swatch" style="background:
linear-gradient(to right in hwb shorter
hue, color(srgb 1 0 0), color(srgb 0 0 1));
"></div>
</div>
</span>
<span>
<div>longer</div>
<div>hwb</div>
<div class="grid-cell-content"
style="width: 100px; height: 50px;">
<style>
.swatch {
width: 100%;
height: 50%;
}
</style>
<div class="swatch" style="background:
linear-gradient(to right in hwb longer
hue, color(srgb 1 0 0), color(srgb 0 1 0));
"></div>
<div class="swatch" style="background:
linear-gradient(to right in hwb longer
hue, color(srgb 1 0 0), color(srgb 0 0 1));
"></div>
</div>
</span>
<span>
<div>increasing</div>
<div>hwb</div>
<div class="grid-cell-content"
style="width: 100px; height: 50px;">
<style>
.swatch {
width: 100%;
height: 50%;
}
</style>
<div class="swatch" style="background:
linear-gradient(to right in hwb increasing
hue, color(srgb 1 0 0), color(srgb 0 1 0));
"></div>
<div class="swatch" style="background:
linear-gradient(to right in hwb increasing
hue, color(srgb 1 0 0), color(srgb 0 0 1));
"></div>
</div>
</span>
<span>
<div>decreasing</div>
<div>hwb</div>
<div class="grid-cell-content"
style="width: 100px; height: 50px;">
<style>
.swatch {
width: 100%;
height: 50%;
}
</style>
<div class="swatch" style="background:
linear-gradient(to right in hwb decreasing
hue, color(srgb 1 0 0), color(srgb 0 1 0));
"></div>
<div class="swatch" style="background:
linear-gradient(to right in hwb decreasing
hue, color(srgb 1 0 0), color(srgb 0 0 1));
"></div>
</div>
</span>
<span>
<div>shorter</div>
<div>lch</div>
<div class="grid-cell-content"
style="width: 100px; height: 50px;">
<style>
.swatch {
width: 100%;
height: 50%;
}
</style>
<div class="swatch" style="background:
linear-gradient(to right in lch shorter
hue, color(srgb 1 0 0), color(srgb 0 1 0));
"></div>
<div class="swatch" style="background:
linear-gradient(to right in lch shorter
hue, color(srgb 1 0 0), color(srgb 0 0 1));
"></div>
</div>
</span>
<span>
<div>longer</div>
<div>lch</div>
<div class="grid-cell-content"
style="width: 100px; height: 50px;">
<style>
.swatch {
width: 100%;
height: 50%;
}
</style>
<div class="swatch" style="background:
linear-gradient(to right in lch longer
hue, color(srgb 1 0 0), color(srgb 0 1 0));
"></div>
<div class="swatch" style="background:
linear-gradient(to right in lch longer
hue, color(srgb 1 0 0), color(srgb 0 0 1));
"></div>
</div>
</span>
<span>
<div>increasing</div>
<div>lch</div>
<div class="grid-cell-content"
style="width: 100px; height: 50px;">
<style>
.swatch {
width: 100%;
height: 50%;
}
</style>
<div class="swatch" style="background:
linear-gradient(to right in lch increasing
hue, color(srgb 1 0 0), color(srgb 0 1 0));
"></div>
<div class="swatch" style="background:
linear-gradient(to right in lch increasing
hue, color(srgb 1 0 0), color(srgb 0 0 1));
"></div>
</div>
</span>
<span>
<div>decreasing</div>
<div>lch</div>
<div class="grid-cell-content"
style="width: 100px; height: 50px;">
<style>
.swatch {
width: 100%;
height: 50%;
}
</style>
<div class="swatch" style="background:
linear-gradient(to right in lch decreasing
hue, color(srgb 1 0 0), color(srgb 0 1 0));
"></div>
<div class="swatch" style="background:
linear-gradient(to right in lch decreasing
hue, color(srgb 1 0 0), color(srgb 0 0 1));
"></div>
</div>
</span>
<span>
<div>shorter</div>
<div>oklch</div>
<div class="grid-cell-content"
style="width: 100px; height: 50px;">
<style>
.swatch {
width: 100%;
height: 50%;
}
</style>
<div class="swatch" style="background:
linear-gradient(to right in oklch shorter
hue, color(srgb 1 0 0), color(srgb 0 1 0));
"></div>
<div class="swatch" style="background:
linear-gradient(to right in oklch shorter
hue, color(srgb 1 0 0), color(srgb 0 0 1));
"></div>
</div>
</span>
<span>
<div>longer</div>
<div>oklch</div>
<div class="grid-cell-content"
style="width: 100px; height: 50px;">
<style>
.swatch {
width: 100%;
height: 50%;
}
</style>
<div class="swatch" style="background:
linear-gradient(to right in oklch longer
hue, color(srgb 1 0 0), color(srgb 0 1 0));
"></div>
<div class="swatch" style="background:
linear-gradient(to right in oklch longer
hue, color(srgb 1 0 0), color(srgb 0 0 1));
"></div>
</div>
</span>
<span>
<div>increasing</div>
<div>oklch</div>
<div class="grid-cell-content"
style="width: 100px; height: 50px;">
<style>
.swatch {
width: 100%;
height: 50%;
}
</style>
<div class="swatch" style="background:
linear-gradient(to right in oklch increasing
hue, color(srgb 1 0 0), color(srgb 0 1 0));
"></div>
<div class="swatch" style="background:
linear-gradient(to right in oklch increasing
hue, color(srgb 1 0 0), color(srgb 0 0 1));
"></div>
</div>
</span>
<span>
<div>decreasing</div>
<div>oklch</div>
<div class="grid-cell-content"
style="width: 100px; height: 50px;">
<style>
.swatch {
width: 100%;
height: 50%;
}
</style>
<div class="swatch" style="background:
linear-gradient(to right in oklch decreasing
hue, color(srgb 1 0 0), color(srgb 0 1 0));
"></div>
<div class="swatch" style="background:
linear-gradient(to right in oklch decreasing
hue, color(srgb 1 0 0), color(srgb 0 0 1));
"></div>
</div>
</span>
</div>