commit e3ff56dc2a572ccb7e60c8280f16dcad6167859b parent 110749bc44d1e50656306940a6f42b128e78d1da Author: Christopher Cameron <ccameron@chromium.org> Date: Mon, 27 Oct 2025 10:16:37 +0000 Bug 1996237 [wpt PR 55630] - Add display-p3-linear gradient interpolation WPT tests, a=testonly Automatic update from web-platform-tests Add display-p3-linear gradient interpolation WPT tests Also add tests for the proposed canvas gradient interpolation, although it is not yet part of the specification. See https://github.com/whatwg/html/issues/7947 Bug: 453687644 Change-Id: I95d92833df3d13b5ef8643ef2362fe01d4063848 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7077316 Reviewed-by: Philip Jägenstedt <foolip@chromium.org> Commit-Queue: ccameron chromium <ccameron@chromium.org> Cr-Commit-Position: refs/heads/main@{#1534807} -- wpt-commits: d46449db64299e1bc6a74a320f26d848404fdc9f wpt-pr: 55630 Diffstat:
8 files changed, 213 insertions(+), 66 deletions(-)
diff --git a/testing/web-platform/tests/css/css-images/gradient/display-p3-linear-gradient-ref.html b/testing/web-platform/tests/css/css-images/gradient/display-p3-linear-gradient-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> + <head> + <title>display-p3-linear gradient interpolation</title> + <link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation"> + <meta name="assert" content="Test display-p3-linear as a gradient interpolation space. Reference generated here: https://raphlinus.github.io/color/2021/01/18/oklab-critique.html"> + <style> + .test { + width: 480px; + height: 50px; + background: url("resources/red-green-gradient-linear-colorspace.png"); + } + </style> + </head> + <body> + <div class="test"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-images/gradient/display-p3-linear-gradient.html b/testing/web-platform/tests/css/css-images/gradient/display-p3-linear-gradient.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> + <head> + <title>display-p3-linear gradient interpolation</title> + <meta name="fuzzy" content="maxDifference=1-10;totalPixels=0-24000"> + <link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation"> + <meta name="assert" content="Test display-p3-linear as a gradient interpolation space. Reference generated here: https://raphlinus.github.io/color/2021/01/18/oklab-critique.html"> + <link rel="match" href="display-p3-linear-gradient-ref.html"> + <style> + .test { + width: 480px; + height: 50px; + background: linear-gradient(to right in display-p3-linear, rgb(255, 0, 0), rgb(0, 255, 0)); + } + </style> + </head> + <body> + <div class="test"></div> + </body> +</html> diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.colorInterpolationMethod-expected.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.colorInterpolationMethod-expected.html @@ -72,6 +72,22 @@ </span> <span> + <div>display-p3-linear</div> + <div class="grid-cell-content" + style="width: 100px; height: 50px;"> + <style> + #swatch-display-p3-linear { + width: 100%; + height: 100%; + background: linear-gradient(to right in display-p3-linear, + color(srgb 1 0 0), color(srgb 0 1 0)); + } + </style> + <div id="swatch-display-p3-linear"></div> + </div> +</span> + +<span> <div>display-p3</div> <div class="grid-cell-content" style="width: 100px; height: 50px;"> diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.colorInterpolationMethod.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.colorInterpolationMethod.html @@ -82,7 +82,7 @@ </span> <span> - <div>display-p3</div> + <div>display-p3-linear</div> <canvas class="grid-cell-content" id="canvas4" width="100" height="50"> <p class="fallback">FAIL (fallback content)</p> </canvas> @@ -93,14 +93,14 @@ 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'; + g.colorInterpolationMethod = 'display-p3-linear'; ctx.fillStyle = g; ctx.fillRect(0, 0, 100, 50); </script> </span> <span> - <div>a98-rgb</div> + <div>display-p3</div> <canvas class="grid-cell-content" id="canvas5" width="100" height="50"> <p class="fallback">FAIL (fallback content)</p> </canvas> @@ -111,14 +111,14 @@ 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'; + g.colorInterpolationMethod = 'display-p3'; ctx.fillStyle = g; ctx.fillRect(0, 0, 100, 50); </script> </span> <span> - <div>prophoto-rgb</div> + <div>a98-rgb</div> <canvas class="grid-cell-content" id="canvas6" width="100" height="50"> <p class="fallback">FAIL (fallback content)</p> </canvas> @@ -129,14 +129,14 @@ 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'; + g.colorInterpolationMethod = 'a98-rgb'; ctx.fillStyle = g; ctx.fillRect(0, 0, 100, 50); </script> </span> <span> - <div>rec2020</div> + <div>prophoto-rgb</div> <canvas class="grid-cell-content" id="canvas7" width="100" height="50"> <p class="fallback">FAIL (fallback content)</p> </canvas> @@ -147,14 +147,14 @@ 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'; + g.colorInterpolationMethod = 'prophoto-rgb'; ctx.fillStyle = g; ctx.fillRect(0, 0, 100, 50); </script> </span> <span> - <div>lab</div> + <div>rec2020</div> <canvas class="grid-cell-content" id="canvas8" width="100" height="50"> <p class="fallback">FAIL (fallback content)</p> </canvas> @@ -165,14 +165,14 @@ 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'; + g.colorInterpolationMethod = 'rec2020'; ctx.fillStyle = g; ctx.fillRect(0, 0, 100, 50); </script> </span> <span> - <div>oklab</div> + <div>lab</div> <canvas class="grid-cell-content" id="canvas9" width="100" height="50"> <p class="fallback">FAIL (fallback content)</p> </canvas> @@ -183,14 +183,14 @@ 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'; + g.colorInterpolationMethod = 'lab'; ctx.fillStyle = g; ctx.fillRect(0, 0, 100, 50); </script> </span> <span> - <div>lch</div> + <div>oklab</div> <canvas class="grid-cell-content" id="canvas10" width="100" height="50"> <p class="fallback">FAIL (fallback content)</p> </canvas> @@ -201,14 +201,14 @@ 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.colorInterpolationMethod = 'oklab'; ctx.fillStyle = g; ctx.fillRect(0, 0, 100, 50); </script> </span> <span> - <div>oklch</div> + <div>lch</div> <canvas class="grid-cell-content" id="canvas11" width="100" height="50"> <p class="fallback">FAIL (fallback content)</p> </canvas> @@ -219,14 +219,14 @@ 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.colorInterpolationMethod = 'lch'; ctx.fillStyle = g; ctx.fillRect(0, 0, 100, 50); </script> </span> <span> - <div>xyz</div> + <div>oklch</div> <canvas class="grid-cell-content" id="canvas12" width="100" height="50"> <p class="fallback">FAIL (fallback content)</p> </canvas> @@ -237,14 +237,14 @@ 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'; + g.colorInterpolationMethod = 'oklch'; ctx.fillStyle = g; ctx.fillRect(0, 0, 100, 50); </script> </span> <span> - <div>xyz-d50</div> + <div>xyz</div> <canvas class="grid-cell-content" id="canvas13" width="100" height="50"> <p class="fallback">FAIL (fallback content)</p> </canvas> @@ -255,14 +255,14 @@ 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'; + g.colorInterpolationMethod = 'xyz'; ctx.fillStyle = g; ctx.fillRect(0, 0, 100, 50); </script> </span> <span> - <div>xyz-d65</div> + <div>xyz-d50</div> <canvas class="grid-cell-content" id="canvas14" width="100" height="50"> <p class="fallback">FAIL (fallback content)</p> </canvas> @@ -273,6 +273,24 @@ 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="canvas15" width="100" height="50"> + <p class="fallback">FAIL (fallback content)</p> + </canvas> + <script type="module"> + const canvas = document.getElementById("canvas15"); + 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); diff --git a/testing/web-platform/tests/html/canvas/offscreen/fill-and-stroke-styles/2d.gradient.colorInterpolationMethod-expected.html b/testing/web-platform/tests/html/canvas/offscreen/fill-and-stroke-styles/2d.gradient.colorInterpolationMethod-expected.html @@ -72,6 +72,22 @@ </span> <span> + <div>display-p3-linear</div> + <div class="grid-cell-content" + style="width: 100px; height: 50px;"> + <style> + #swatch-display-p3-linear { + width: 100%; + height: 100%; + background: linear-gradient(to right in display-p3-linear, + color(srgb 1 0 0), color(srgb 0 1 0)); + } + </style> + <div id="swatch-display-p3-linear"></div> + </div> +</span> + +<span> <div>display-p3</div> <div class="grid-cell-content" style="width: 100px; height: 50px;"> diff --git a/testing/web-platform/tests/html/canvas/offscreen/fill-and-stroke-styles/2d.gradient.colorInterpolationMethod.html b/testing/web-platform/tests/html/canvas/offscreen/fill-and-stroke-styles/2d.gradient.colorInterpolationMethod.html @@ -98,7 +98,7 @@ </span> <span> - <div>display-p3</div> + <div>display-p3-linear</div> <canvas class="grid-cell-content" id="canvas4" width="100" height="50"> <p class="fallback">FAIL (fallback content)</p> </canvas> @@ -109,7 +109,7 @@ 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'; + g.colorInterpolationMethod = 'display-p3-linear'; ctx.fillStyle = g; ctx.fillRect(0, 0, 100, 50); @@ -120,7 +120,7 @@ </span> <span> - <div>a98-rgb</div> + <div>display-p3</div> <canvas class="grid-cell-content" id="canvas5" width="100" height="50"> <p class="fallback">FAIL (fallback content)</p> </canvas> @@ -131,7 +131,7 @@ 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'; + g.colorInterpolationMethod = 'display-p3'; ctx.fillStyle = g; ctx.fillRect(0, 0, 100, 50); @@ -142,7 +142,7 @@ </span> <span> - <div>prophoto-rgb</div> + <div>a98-rgb</div> <canvas class="grid-cell-content" id="canvas6" width="100" height="50"> <p class="fallback">FAIL (fallback content)</p> </canvas> @@ -153,7 +153,7 @@ 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'; + g.colorInterpolationMethod = 'a98-rgb'; ctx.fillStyle = g; ctx.fillRect(0, 0, 100, 50); @@ -164,7 +164,7 @@ </span> <span> - <div>rec2020</div> + <div>prophoto-rgb</div> <canvas class="grid-cell-content" id="canvas7" width="100" height="50"> <p class="fallback">FAIL (fallback content)</p> </canvas> @@ -175,7 +175,7 @@ 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'; + g.colorInterpolationMethod = 'prophoto-rgb'; ctx.fillStyle = g; ctx.fillRect(0, 0, 100, 50); @@ -186,7 +186,7 @@ </span> <span> - <div>lab</div> + <div>rec2020</div> <canvas class="grid-cell-content" id="canvas8" width="100" height="50"> <p class="fallback">FAIL (fallback content)</p> </canvas> @@ -197,7 +197,7 @@ 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'; + g.colorInterpolationMethod = 'rec2020'; ctx.fillStyle = g; ctx.fillRect(0, 0, 100, 50); @@ -208,7 +208,7 @@ </span> <span> - <div>oklab</div> + <div>lab</div> <canvas class="grid-cell-content" id="canvas9" width="100" height="50"> <p class="fallback">FAIL (fallback content)</p> </canvas> @@ -219,7 +219,7 @@ 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'; + g.colorInterpolationMethod = 'lab'; ctx.fillStyle = g; ctx.fillRect(0, 0, 100, 50); @@ -230,7 +230,7 @@ </span> <span> - <div>lch</div> + <div>oklab</div> <canvas class="grid-cell-content" id="canvas10" width="100" height="50"> <p class="fallback">FAIL (fallback content)</p> </canvas> @@ -241,7 +241,7 @@ 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.colorInterpolationMethod = 'oklab'; ctx.fillStyle = g; ctx.fillRect(0, 0, 100, 50); @@ -252,7 +252,7 @@ </span> <span> - <div>oklch</div> + <div>lch</div> <canvas class="grid-cell-content" id="canvas11" width="100" height="50"> <p class="fallback">FAIL (fallback content)</p> </canvas> @@ -263,7 +263,7 @@ 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.colorInterpolationMethod = 'lch'; ctx.fillStyle = g; ctx.fillRect(0, 0, 100, 50); @@ -274,7 +274,7 @@ </span> <span> - <div>xyz</div> + <div>oklch</div> <canvas class="grid-cell-content" id="canvas12" width="100" height="50"> <p class="fallback">FAIL (fallback content)</p> </canvas> @@ -285,7 +285,7 @@ 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'; + g.colorInterpolationMethod = 'oklch'; ctx.fillStyle = g; ctx.fillRect(0, 0, 100, 50); @@ -296,7 +296,7 @@ </span> <span> - <div>xyz-d50</div> + <div>xyz</div> <canvas class="grid-cell-content" id="canvas13" width="100" height="50"> <p class="fallback">FAIL (fallback content)</p> </canvas> @@ -307,7 +307,7 @@ 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'; + g.colorInterpolationMethod = 'xyz'; ctx.fillStyle = g; ctx.fillRect(0, 0, 100, 50); @@ -318,7 +318,7 @@ </span> <span> - <div>xyz-d65</div> + <div>xyz-d50</div> <canvas class="grid-cell-content" id="canvas14" width="100" height="50"> <p class="fallback">FAIL (fallback content)</p> </canvas> @@ -329,7 +329,7 @@ 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'; + g.colorInterpolationMethod = 'xyz-d50'; ctx.fillStyle = g; ctx.fillRect(0, 0, 100, 50); @@ -339,4 +339,26 @@ </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 type="module"> + 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 outputCanvas = document.getElementById("canvas15"); + const outputCtx = outputCanvas.getContext('2d'); + outputCtx.drawImage(canvas, 0, 0); + </script> +</span> + </div> diff --git a/testing/web-platform/tests/html/canvas/offscreen/fill-and-stroke-styles/2d.gradient.colorInterpolationMethod.w.html b/testing/web-platform/tests/html/canvas/offscreen/fill-and-stroke-styles/2d.gradient.colorInterpolationMethod.w.html @@ -8,7 +8,7 @@ <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 = 15;</script> +<script>pending_tests = 16;</script> <div class="grid-container" style="--grid-width: 5"> <span> @@ -156,7 +156,7 @@ </span> <span> - <div>display-p3</div> + <div>display-p3-linear</div> <canvas class="grid-cell-content" id="canvas4" width="100" height="50"> <p class="fallback">FAIL (fallback content)</p> </canvas> @@ -168,7 +168,7 @@ 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'; + g.colorInterpolationMethod = 'display-p3-linear'; ctx.fillStyle = g; ctx.fillRect(0, 0, 100, 50); @@ -192,7 +192,7 @@ </span> <span> - <div>a98-rgb</div> + <div>display-p3</div> <canvas class="grid-cell-content" id="canvas5" width="100" height="50"> <p class="fallback">FAIL (fallback content)</p> </canvas> @@ -204,7 +204,7 @@ 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'; + g.colorInterpolationMethod = 'display-p3'; ctx.fillStyle = g; ctx.fillRect(0, 0, 100, 50); @@ -228,7 +228,7 @@ </span> <span> - <div>prophoto-rgb</div> + <div>a98-rgb</div> <canvas class="grid-cell-content" id="canvas6" width="100" height="50"> <p class="fallback">FAIL (fallback content)</p> </canvas> @@ -240,7 +240,7 @@ 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'; + g.colorInterpolationMethod = 'a98-rgb'; ctx.fillStyle = g; ctx.fillRect(0, 0, 100, 50); @@ -264,7 +264,7 @@ </span> <span> - <div>rec2020</div> + <div>prophoto-rgb</div> <canvas class="grid-cell-content" id="canvas7" width="100" height="50"> <p class="fallback">FAIL (fallback content)</p> </canvas> @@ -276,7 +276,7 @@ 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'; + g.colorInterpolationMethod = 'prophoto-rgb'; ctx.fillStyle = g; ctx.fillRect(0, 0, 100, 50); @@ -300,7 +300,7 @@ </span> <span> - <div>lab</div> + <div>rec2020</div> <canvas class="grid-cell-content" id="canvas8" width="100" height="50"> <p class="fallback">FAIL (fallback content)</p> </canvas> @@ -312,7 +312,7 @@ 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'; + g.colorInterpolationMethod = 'rec2020'; ctx.fillStyle = g; ctx.fillRect(0, 0, 100, 50); @@ -336,7 +336,7 @@ </span> <span> - <div>oklab</div> + <div>lab</div> <canvas class="grid-cell-content" id="canvas9" width="100" height="50"> <p class="fallback">FAIL (fallback content)</p> </canvas> @@ -348,7 +348,7 @@ 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'; + g.colorInterpolationMethod = 'lab'; ctx.fillStyle = g; ctx.fillRect(0, 0, 100, 50); @@ -372,7 +372,7 @@ </span> <span> - <div>lch</div> + <div>oklab</div> <canvas class="grid-cell-content" id="canvas10" width="100" height="50"> <p class="fallback">FAIL (fallback content)</p> </canvas> @@ -384,7 +384,7 @@ 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.colorInterpolationMethod = 'oklab'; ctx.fillStyle = g; ctx.fillRect(0, 0, 100, 50); @@ -408,7 +408,7 @@ </span> <span> - <div>oklch</div> + <div>lch</div> <canvas class="grid-cell-content" id="canvas11" width="100" height="50"> <p class="fallback">FAIL (fallback content)</p> </canvas> @@ -420,7 +420,7 @@ 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.colorInterpolationMethod = 'lch'; ctx.fillStyle = g; ctx.fillRect(0, 0, 100, 50); @@ -444,7 +444,7 @@ </span> <span> - <div>xyz</div> + <div>oklch</div> <canvas class="grid-cell-content" id="canvas12" width="100" height="50"> <p class="fallback">FAIL (fallback content)</p> </canvas> @@ -456,7 +456,7 @@ 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'; + g.colorInterpolationMethod = 'oklch'; ctx.fillStyle = g; ctx.fillRect(0, 0, 100, 50); @@ -480,7 +480,7 @@ </span> <span> - <div>xyz-d50</div> + <div>xyz</div> <canvas class="grid-cell-content" id="canvas13" width="100" height="50"> <p class="fallback">FAIL (fallback content)</p> </canvas> @@ -492,7 +492,7 @@ 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'; + g.colorInterpolationMethod = 'xyz'; ctx.fillStyle = g; ctx.fillRect(0, 0, 100, 50); @@ -516,7 +516,7 @@ </span> <span> - <div>xyz-d65</div> + <div>xyz-d50</div> <canvas class="grid-cell-content" id="canvas14" width="100" height="50"> <p class="fallback">FAIL (fallback content)</p> </canvas> @@ -528,7 +528,7 @@ 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'; + g.colorInterpolationMethod = 'xyz-d50'; ctx.fillStyle = g; ctx.fillRect(0, 0, 100, 50); @@ -551,5 +551,41 @@ </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) { + 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(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> diff --git a/testing/web-platform/tests/html/canvas/tools/yaml/fill-and-stroke-styles.yaml b/testing/web-platform/tests/html/canvas/tools/yaml/fill-and-stroke-styles.yaml @@ -2430,6 +2430,7 @@ hsl: hwb: srgb-linear: + display-p3-linear: display-p3: a98-rgb: prophoto-rgb: