tor-browser

commit ef3fa635021440c699a053ac28393028b9daf41d
parent a18e9411f71d03fa86fefbca419ba423926059cf
Author: Nicolas Chevobbe <nchevobbe@mozilla.com>
Date:   Thu, 30 Oct 2025 05:58:18 +0000

Bug 1996774 - [devtools] Display color swatches for parameters of contrast-color(). r=devtools-reviewers,ochameau.

Depends on D269883

Differential Revision: https://phabricator.services.mozilla.com/D270306

Diffstat:
M
devtools/client/shared/output-parser.js
 | 
1
+
M
devtools/client/shared/test/browser_outputparser.js
 | 
42
+++++++++++++++++++++++++++++++++++++++++-

2 files changed, 42 insertions(+), 1 deletion(-)
diff --git a/devtools/client/shared/output-parser.js b/devtools/client/shared/output-parser.js
@@ -67,6 +67,7 @@ const COLOR_TAKING_FUNCTIONS = new Set([
   "repeating-conic-gradient",
   "drop-shadow",
   "color-mix",
+  "contrast-color",
   "light-dark",
 ]);
 // Functions that accept a shape argument.
diff --git a/devtools/client/shared/test/browser_outputparser.js b/devtools/client/shared/test/browser_outputparser.js
@@ -246,7 +246,7 @@ function testParseCssProperty(doc, parser) {
 
     makeColorTest(
       "background-image",
-      "linear-gradient(to top, color-mix(in srgb, #008000, rgba(255, 255, 0, 0.9)), blue)",
+      "linear-gradient(to top, color-mix(in srgb, #008000, rgba(255, 255, 0, 0.9)), blue, contrast-color(#abc))",
       [
         "linear-gradient(to top, ",
         "color-mix(in srgb, ",
@@ -255,6 +255,10 @@ function testParseCssProperty(doc, parser) {
         { name: "rgba(255, 255, 0, 0.9)", colorFunction: "color-mix" },
         "), ",
         { name: "blue", colorFunction: "linear-gradient" },
+        ", ",
+        "contrast-color(",
+        { name: "#abc", colorFunction: "contrast-color" },
+        ")",
         ")",
       ]
     ),
@@ -354,6 +358,26 @@ function testParseCssProperty(doc, parser) {
         colorSwatchReadOnly: true,
       },
     },
+
+    makeColorTest("color", "contrast-color(red)", [
+      "contrast-color(",
+      { name: "red", colorFunction: "contrast-color" },
+      ")",
+    ]),
+
+    makeColorTest(
+      "color",
+      "color-mix(in srgb, red, contrast-color(hsl(0 100 200)))",
+      [
+        "color-mix(in srgb, ",
+        { name: "red", colorFunction: "color-mix" },
+        ", ",
+        "contrast-color(",
+        { name: "hsl(0 100 200)", colorFunction: "contrast-color" },
+        ")",
+        ")",
+      ]
+    ),
   ];
 
   const target = doc.querySelector("div");
@@ -951,6 +975,22 @@ function testParseVariable(doc, parser) {
         '</span>',
     },
     {
+      text: "var(--x)",
+      variables: {
+        "--x": "contrast-color(blue)",
+      },
+      parserExtraOptions: {
+        isDarkColorScheme: false,
+      },
+      expected:
+        // prettier-ignore
+        '<span data-color="contrast-color(blue)">' +
+          '<span>var(' +
+            `<span data-variable="contrast-color(blue)">--x${getJumpToVariableButton("--x")}</span>` +
+          ')</span>' +
+        '</span>',
+    },
+    {
       text: "var(--refers-empty)",
       variables: {
         "--refers-empty": { value: "var(--empty)", computedValue: "" },