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.colorInterpolationMethod</title>
<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
<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>
<div class="grid-cell-content"
style="width: 100px; height: 50px;">
<style>
#swatch-srgb {
width: 100%;
height: 100%;
background: linear-gradient(to right in srgb,
color(srgb 1 0 0), color(srgb 0 1 0));
}
</style>
<div id="swatch-srgb"></div>
</div>
</span>
<span>
<div>hsl</div>
<div class="grid-cell-content"
style="width: 100px; height: 50px;">
<style>
#swatch-hsl {
width: 100%;
height: 100%;
background: linear-gradient(to right in hsl,
color(srgb 1 0 0), color(srgb 0 1 0));
}
</style>
<div id="swatch-hsl"></div>
</div>
</span>
<span>
<div>hwb</div>
<div class="grid-cell-content"
style="width: 100px; height: 50px;">
<style>
#swatch-hwb {
width: 100%;
height: 100%;
background: linear-gradient(to right in hwb,
color(srgb 1 0 0), color(srgb 0 1 0));
}
</style>
<div id="swatch-hwb"></div>
</div>
</span>
<span>
<div>srgb-linear</div>
<div class="grid-cell-content"
style="width: 100px; height: 50px;">
<style>
#swatch-srgb-linear {
width: 100%;
height: 100%;
background: linear-gradient(to right in srgb-linear,
color(srgb 1 0 0), color(srgb 0 1 0));
}
</style>
<div id="swatch-srgb-linear"></div>
</div>
</span>
<span>
<div>display-p3</div>
<div class="grid-cell-content"
style="width: 100px; height: 50px;">
<style>
#swatch-display-p3 {
width: 100%;
height: 100%;
background: linear-gradient(to right in display-p3,
color(srgb 1 0 0), color(srgb 0 1 0));
}
</style>
<div id="swatch-display-p3"></div>
</div>
</span>
<span>
<div>a98-rgb</div>
<div class="grid-cell-content"
style="width: 100px; height: 50px;">
<style>
#swatch-a98-rgb {
width: 100%;
height: 100%;
background: linear-gradient(to right in a98-rgb,
color(srgb 1 0 0), color(srgb 0 1 0));
}
</style>
<div id="swatch-a98-rgb"></div>
</div>
</span>
<span>
<div>prophoto-rgb</div>
<div class="grid-cell-content"
style="width: 100px; height: 50px;">
<style>
#swatch-prophoto-rgb {
width: 100%;
height: 100%;
background: linear-gradient(to right in prophoto-rgb,
color(srgb 1 0 0), color(srgb 0 1 0));
}
</style>
<div id="swatch-prophoto-rgb"></div>
</div>
</span>
<span>
<div>rec2020</div>
<div class="grid-cell-content"
style="width: 100px; height: 50px;">
<style>
#swatch-rec2020 {
width: 100%;
height: 100%;
background: linear-gradient(to right in rec2020,
color(srgb 1 0 0), color(srgb 0 1 0));
}
</style>
<div id="swatch-rec2020"></div>
</div>
</span>
<span>
<div>lab</div>
<div class="grid-cell-content"
style="width: 100px; height: 50px;">
<style>
#swatch-lab {
width: 100%;
height: 100%;
background: linear-gradient(to right in lab,
color(srgb 1 0 0), color(srgb 0 1 0));
}
</style>
<div id="swatch-lab"></div>
</div>
</span>
<span>
<div>oklab</div>
<div class="grid-cell-content"
style="width: 100px; height: 50px;">
<style>
#swatch-oklab {
width: 100%;
height: 100%;
background: linear-gradient(to right in oklab,
color(srgb 1 0 0), color(srgb 0 1 0));
}
</style>
<div id="swatch-oklab"></div>
</div>
</span>
<span>
<div>lch</div>
<div class="grid-cell-content"
style="width: 100px; height: 50px;">
<style>
#swatch-lch {
width: 100%;
height: 100%;
background: linear-gradient(to right in lch,
color(srgb 1 0 0), color(srgb 0 1 0));
}
</style>
<div id="swatch-lch"></div>
</div>
</span>
<span>
<div>oklch</div>
<div class="grid-cell-content"
style="width: 100px; height: 50px;">
<style>
#swatch-oklch {
width: 100%;
height: 100%;
background: linear-gradient(to right in oklch,
color(srgb 1 0 0), color(srgb 0 1 0));
}
</style>
<div id="swatch-oklch"></div>
</div>
</span>
<span>
<div>xyz</div>
<div class="grid-cell-content"
style="width: 100px; height: 50px;">
<style>
#swatch-xyz {
width: 100%;
height: 100%;
background: linear-gradient(to right in xyz,
color(srgb 1 0 0), color(srgb 0 1 0));
}
</style>
<div id="swatch-xyz"></div>
</div>
</span>
<span>
<div>xyz-d50</div>
<div class="grid-cell-content"
style="width: 100px; height: 50px;">
<style>
#swatch-xyz-d50 {
width: 100%;
height: 100%;
background: linear-gradient(to right in xyz-d50,
color(srgb 1 0 0), color(srgb 0 1 0));
}
</style>
<div id="swatch-xyz-d50"></div>
</div>
</span>
<span>
<div>xyz-d65</div>
<div class="grid-cell-content"
style="width: 100px; height: 50px;">
<style>
#swatch-xyz-d65 {
width: 100%;
height: 100%;
background: linear-gradient(to right in xyz-d65,
color(srgb 1 0 0), color(srgb 0 1 0));
}
</style>
<div id="swatch-xyz-d65"></div>
</div>
</span>
</div>