commit 650bf2228217e6e9e1ac7f6c520ff0300cf7ab4c
parent 1975a2d7f60a2fd5cad5662103e305cc15327f50
Author: Jonathan Kew <jkew@mozilla.com>
Date: Tue, 28 Oct 2025 14:56:47 +0000
Bug 1682439 - Add a basic WPT reftest for results of the contrast-color() function. r=firefox-style-system-reviewers,emilio
Differential Revision: https://phabricator.services.mozilla.com/D270062
Diffstat:
2 files changed, 156 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/css/css-color/contrast-color-001-ref.html b/testing/web-platform/tests/css/css-color/contrast-color-001-ref.html
@@ -0,0 +1,70 @@
+<!D<!DOCTYPE html>
+<meta charset="utf-8">
+
+<title>CSS Color 5 reference: contrast-color</title>
+
+<link rel="help" href="https://drafts.csswg.org/css-color-5/#contrast-color">
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
+
+<style>
+body {
+ background: ivory;
+ color: magenta;
+}
+p {
+ font: bold 16px sans-serif;
+ padding: .5em;
+}
+p.test1 {
+ background: white;
+ color: black;
+}
+p.test2 {
+ background: aliceblue;
+ color: black;
+}
+p.test3 {
+ background: mistyrose;
+ color: black;
+}
+p.test4 {
+ background: lightyellow;
+ color: black;
+}
+p.test5 {
+ background: palegreen;
+ color: black;
+}
+p.test6 {
+ background: darkblue;
+ color: white;
+}
+p.test7 {
+ background: maroon;
+ color: white;
+}
+p.test8 {
+ background: purple;
+ color: white;
+}
+p.test9 {
+ background: brown;
+ color: white;
+}
+p.test10 {
+ background: black;
+ color: white;
+}
+</style>
+
+<p class=test1>This text should be black</p>
+<p class=test2>This text should be black</p>
+<p class=test3>This text should be black</p>
+<p class=test4>This text should be black</p>
+<p class=test5>This text should be black</p>
+
+<p class=test6>This text should be white</p>
+<p class=test7>This text should be white</p>
+<p class=test8>This text should be white</p>
+<p class=test9>This text should be white</p>
+<p class=test10>This text should be white</p>
diff --git a/testing/web-platform/tests/css/css-color/contrast-color-001.html b/testing/web-platform/tests/css/css-color/contrast-color-001.html
@@ -0,0 +1,86 @@
+<!D<!DOCTYPE html>
+<meta charset="utf-8">
+
+<title>CSS Color 5: contrast-color</title>
+
+<link rel="help" href="https://drafts.csswg.org/css-color-5/#contrast-color">
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
+
+<link rel="match" href="contrast-color-001-ref.html">
+
+<!--
+Although the spec says that
+
+ "The precise color contrast algorithm for determining whether to output
+ a light or dark color is UA-defined",
+
+it does require that
+
+ "contrast-color() resolves to either white or black, whichever produces
+ maximum color contrast..."
+
+so although the exact definition of "contrast" is unspecified, it is clear that
+for very light colors, it must resolve to black, and for very dark ones, it must
+resolve to white. It would only be for intermediate colors nearer the middle of
+the lightness range that the result may be UA-dependent.
+
+Here, we check that contrast-color() resolves to black for a selection of very
+light colors, and to white for some dark ones.
+-->
+
+<style>
+body {
+ background: ivory;
+ color: magenta;
+}
+p {
+ font: bold 16px sans-serif;
+ padding: .5em;
+ background: var(--bgcolor);
+ color: contrast-color(var(--bgcolor));
+}
+/* light colors for which contrast-color() should be black: */
+p.test1 {
+ --bgcolor: white;
+}
+p.test2 {
+ --bgcolor: aliceblue;
+}
+p.test3 {
+ --bgcolor: mistyrose;
+}
+p.test4 {
+ --bgcolor: lightyellow;
+}
+p.test5 {
+ --bgcolor: palegreen;
+}
+/* dark colors for which contrast-color() should be white: */
+p.test6 {
+ --bgcolor: darkblue;
+}
+p.test7 {
+ --bgcolor: maroon;
+}
+p.test8 {
+ --bgcolor: purple;
+}
+p.test9 {
+ --bgcolor: brown;
+}
+p.test10 {
+ --bgcolor: black;
+}
+</style>
+
+<p class=test1>This text should be black</p>
+<p class=test2>This text should be black</p>
+<p class=test3>This text should be black</p>
+<p class=test4>This text should be black</p>
+<p class=test5>This text should be black</p>
+
+<p class=test6>This text should be white</p>
+<p class=test7>This text should be white</p>
+<p class=test8>This text should be white</p>
+<p class=test9>This text should be white</p>
+<p class=test10>This text should be white</p>
