Add a few equality tests for colors that include 'none' components.

jfkthame · moz-wptsync-bot · commit f46909d91c93 · 2026-04-14T15:09:32.000+01:00
Differential Revision: https://phabricator.services.mozilla.com/D293501 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=2030624 gecko-commit: 1a669761ca71aa9d801213e78c6fa08e14bf8476 gecko-commit-git: 3a382100c8038ca8810121c348d9c73f093c1b5d gecko-reviewers: firefox-style-system-reviewers, dshin
diff --git a/css/css-conditional/container-queries/query-style-color-ref.html b/css/css-conditional/container-queries/query-style-color-ref.html
@@ -54,4 +54,13 @@
     <div style="--c: oklch(0 0 0)"></div>
     <div style="--c: oklab(from black l a b)"></div>
   </div>
+  <hr>
+  <div class="outer">
+    <div style="--c: hwb(none 0 100)"></div>
+    <div style="--c: hsl(none 0 0)"></div>
+    <div style="--c: color(srgb none 0 0)"></div>
+    <div style="--c: color(srgb-linear 0 none 0)"></div>
+    <div style="--c: oklch(0 0 none)"></div>
+    <div style="--c: oklab(0 none none)"></div>
+  </div>
 </body>
diff --git a/css/css-conditional/container-queries/query-style-color.html b/css/css-conditional/container-queries/query-style-color.html
@@ -18,13 +18,15 @@
   font-family: system-ui, sans-serif;
 }
 
-.outer {
+.outer,
+.outer-ne {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));
   gap: .5em;
 }
 
-.outer div {
+.outer div,
+.outer-ne div {
   border-left: 1em solid var(--c);
   color: white;
 }
@@ -41,11 +43,25 @@
     background: green;
   }
 }
+
+.outer-ne div::before {
+  content: attr(style);
+	display: block;
+  padding: .5em;
+  background: green;
+}
+
+@container style(--c: black) {
+  .outer-ne div::before {
+    background: red;
+  }
+}
 </style>
 
 <body>
   <p>All items should have a green background:</p>
   <div class="outer">
+    <!-- All the colors here should "equal" black. -->
     <div style="--c: black"></div>
     <div style="--c: #000"></div>
     <div style="--c: #000f"></div>
@@ -65,4 +81,15 @@
     <div style="--c: oklch(0 0 0)"></div>
     <div style="--c: oklab(from black l a b)"></div>
   </div>
+  <hr>
+  <div class="outer-ne">
+    <!-- Although these render as black, they are not considered equal to it,
+         so the container-style query to set a red background does NOT apply. -->
+    <div style="--c: hwb(none 0 100)"></div>
+    <div style="--c: hsl(none 0 0)"></div>
+    <div style="--c: color(srgb none 0 0)"></div>
+    <div style="--c: color(srgb-linear 0 none 0)"></div>
+    <div style="--c: oklch(0 0 none)"></div>
+    <div style="--c: oklab(0 none none)"></div>
+  </div>
 </body>
