Intent to Implement and Ship: CSS Color 4 RGB{A} Syntax

[Chris Nardi]

Contact emails

Chris Nardi (csna...@gmail.com)

Summary

CSS Color 4 introduces a new syntax for RGB{A}, which separates the color channels with whitespace, and separates the alpha value with a backslash. CSS Color 4 also makes RGB and RGBA synonyms of each other, making it so that the alpha value is an optional parameter in each. Additionally, the alpha parameter is expanded to include percentages as well. The legacy RGB{A} syntax with commas is preserved, but as RGB and RGBA are now synonyms, each function allows an optional alpha value.

This would not implement decimal parsing of color channels, as that is discussed in https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/zH51Atd-Vag and blocked on spec clarification.

Design Doc/Spec

https://drafts.csswg.org/css-color/#numeric-rgb

Motivation

While this wouldn't necessarily significantly improve the web developer experience, it does make it easier as the functions are now interchangeable, no commas are required, and percentages would no longer need to be converted to a decimal for the alpha value.

Risks

Interoperability and Compatibility

There should be no compatibility risk, as the legacy syntax is still supported. No functional changes would occur to already valid code; the only change would be that previously invalid code would now be parsed.

Edge: No signals

Firefox: Shipped (WPT tests with new syntax pass)

Safari: No signals

Web developers: Unclear

Ergonomics

n/a

Activation

The changes would be easy for web developers to use.

Debuggability

This shouldn't require any changes to DevTools.

Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, Chrome OS, Android, and Android WebView)?

Yes.

Is this feature fully tested by web-platform-tests?

Yes, https://wpt.fyi/css/css-color contains tests covering the new syntax.

Link to entry on the feature dashboard

A feature dashboard entry would probably be appropriate, as this does add new syntax for web developers (I don't have permission to do this, however).

Requesting approval to ship?

Yes, although a CL is not finalized for this change yet.

[Anne van Kesteren]

On Thu, Nov 30, 2017 at 7:55 PM, Chris Nardi <csna...@gmail.com> wrote:
> CSS Color 4 introduces a new syntax for RGB{A}, which separates the color
> channels with whitespace, and separates the alpha value with a backslash.
> CSS Color 4 also makes RGB and RGBA synonyms of each other, making it so
> that the alpha value is an optional parameter in each. Additionally, the
> alpha parameter is expanded to include percentages as well. The legacy
> RGB{A} syntax with commas is preserved, but as RGB and RGBA are now
> synonyms, each function allows an optional alpha value.

I take it none of this affects serialization? Is that tested?


--
https://annevankesteren.nl/

[Chris Nardi]

Current behavior by my patch (as well as what Firefox shipped) doesn't change serialization. The spec doesn't really address this issue yet, see e.g. https://github.com/w3c/csswg-drafts/issues/585, https://github.com/w3c/csswg-drafts/issues/1004, and https://github.com/w3c/csswg-drafts/issues/982, but the current behavior shouldn't break compatibility. I don't believe this is tested by WPT, but this would be more or less tested by new expectations to current LayoutTests.

[Philip Jägenstedt]

I had the same question as Anne when I noticed this aliasing in the spec. How can the serialization not be affected if they are internally aliases? Since rgba() is a superset of rgb(), either everything serializes to rgba(), or some uses of rgba() will serialize to rgb().

The inconsistencies noted in https://github.com/w3c/csswg-drafts/issues/1004 means that probably there's some room to maneuver there, but what will be the cases that change in Blink?

Writing web-platform-tests for those cases specifically would be good, as they're very likely to also affect WebKit.

[Chris Nardi]

If a function call contains an alpha value, it will be serialized as if rgba() was called, and same for no alpha value and rgb(). However, already if rgba() is called with an alpha value of 1, it serializes to rgb().

For some examples of serialization with the new syntax, you could look at changes to expectations in my draft CL (https://chromium-review.googlesource.com/c/chromium/src/+/798831/7/third_party/WebKit/LayoutTests/css-parser/color3-expected.txt and https://chromium-review.googlesource.com/c/chromium/src/+/798831/7/third_party/WebKit/LayoutTests/svg/dom/rgb-color-parser-expected.txt).

[Philip Jägenstedt]

I see, so there was already just one internal representation, that make sense.

When some bit of syntax goes from being dropped on the floor to being recognized, it is possible that sites had dead code sitting around that now changes the background color or similar. However, I don't think we could get a good sense of the risk by doing httparchive research, better then to try the change and revert at the first sign of trouble.

LGTM1

[Daniel Bratell]

LGTM2

/Daniel

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAARdPYdRpQaH_3fxv%3DeXvY7KZjjARUDvh%2B4A4CpJ61pT%3DeiwjA%40mail.gmail.com.

--

/* Opera Software, Linköping, Sweden: CET (UTC+1) */

[Chris Harrelson]

LGTM3

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/op.zap8aueerbppqq%40cicero2.linkoping.osa.