Bug 267647 – Relative color syntax should be unitless

• Component: CSS
• Status: RESOLVED CONFIGURATION CHANGED

[Aaron Krajeski]

https://drafts.csswg.org/css-color-5/#relative-colors

"""
The channel keywords return a <number>; if they were originally specified as a <percentage> or an <angle>, that <percentage> is resolved to a <number> and the <angle> is resolved to a <number> of degrees (which is the canonical unit) in the range [0, 360].
"""

Here's is an example from the spec with hue being treated unitlessly (Safari expects the "deg" keyword):
https://drafts.csswg.org/css-color-5/#ex-oklch-wildly-oog

The issue was clarified here:
https://github.com/w3c/csswg-drafts/issues/9759

"""
The mixing of number and percentage is from an earlier, and incorrect, version of the spec where channel keywords could resolve to either number or percentage as desired. Now the spec is corrected to say that they all resolve to number.
"""

MDN folks are writing documentation for this feature and are confused by Safari's behavior:
https://github.com/mdn/content/pull/30967/files/b6498c9741fc1e0c9a692c0d421f385feeb09c25#diff-cfa4374f335a3ea989ad4f13d4cc749b40826320d8005b7016eaaa03f75c42ebR308

[Anthony Ricaud]

Some examples on https://developer.chrome.com/blog/css-relative-color-syntax#saturate_a_color don't work in Safari because of this issue.

Example:
background: hsl(from orchid h calc(s + .25) l);

[Radar WebKit Bug Importer]

<rdar://problem/121547259>

[Karl Dubost]

Created attachment 469541 [details]
rendering in safari, firefox, chrome

Safari Technology Preview  186           19618.1.10.1.1
Firefox Nightly            124.0a1       12424.1.24
Google Chrome Canary       122.0.6261.3  6261.3

[Karl Dubost]

https://wpt.fyi/results/css/css-color/parsing/color-computed-relative-color.html?label=experimental&label=master&aligned

These tests are also relevant: https://wpt.fyi/results/css/css-color/parsing/color-valid-relative-color.html?label=experimental&label=master&aligned

Safari is only passing 717/1076 of these.
And only 749/1011 for computed values.

[Karl Dubost]

Taking the first failing test in http://wpt.live/css/css-color/parsing/color-valid-relative-color.html

Where the test is basically 
  var div = document.getElementById('target') || document.createElement('div');
  div.style[property] = "";
  div.style[property] = value;
  var readValue = div.style.getPropertyValue(property);

The first failing test case is:

  property = "color"
  value = "rgb(from rebeccapurple r g b)"

then readValue (aka div.style.getPropertyValue('color') ) is giving:

  "rgb(102, 51, 153)"

as well as div.style.cssText

  "color: rgb(102, 51, 153);"


https://drafts.csswg.org/css-color-5/#relative-RGB
https://drafts.csswg.org/css-color-4/#rgb-functions

So parsing is not converting to the appropriate value, probably in 
https://searchfox.org/wubkat/source/Source/WebCore/css/parser/CSSPropertyParserHelpers.cpp

That specific test is failing because relative colors for rgb, hsl and hwb are expected to serialize to `color(srgb ...)`.

This is to preserve out of srgb gamut color values.

[Niklas Ljunglöf]

This bug seems to be fixed in Safari 18.0. I get the correct behavior when testing, and the behavior of the old implementation is not longer supported.

[Karl Dubost]

Created attachment 474218 [details]
rendering in safari, firefox, chrome

This is now fixed in all browsers.