-
Notifications
You must be signed in to change notification settings - Fork 28
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Color Spaces & CSS Color Functions #20
Comments
Tests:
|
grep is finding a bunch: |
It looks like BCD gave a clue about WebKit support, and I found this test: Any chance that could be converted and upstreamed to WPT, if this proposal is accepted? |
cc @fserb, who I serendipitously learned has some interest in this for next year. |
PRs up for a number of these:
Also a few CSS Color 4 ones:
|
Can someone look over w3c/csswg-drafts#6824 and see how that impacts Interop 2022? @weinig has been upstreaming tests to WPT (web-platform-tests/wpt#31901 + web-platform-tests/wpt#31902 + web-platform-tests/wpt#31903 + web-platform-tests/wpt#31904) but are there more tests that need to be added for Interop 2022? |
There are several. Some are |
Yes. Modern displays on laptops, cellphones are all wide gamut and are converging on the Display-P3 colorspace (originally from Apple, a derivative of DCI P3 colorspace used in digital cinema projection). Modern TVs are also wide gamut, again using the P3 colorspace, as required by the Ultra HD Alliance and VESA DisplayHDR specifications. Modern gaming consoles are also wide gamut. So, consumer electronics and native applications are using wide gamut while the Web is trapped into an sRGB-only world. How bad is that problem? Well, the So what? Well, it increases the pressure for app developers to go native rather than making a PWA. And a multi-country survey of online returns by Narvar found that the most common reason for a return (34% of returns to Amazon, and 46% of returns to other online retailers, was “The size, fit or color was wrong”. Because the color of real-world items often doesn't fit in the sRGB gamut. But now, CSS Color 4 defines how to use those colors, and is implemented right now in Safari 15. And 2D Canvas defines how to use those colors, (same way as in CSS Color 4) and is implemented right now in Chrome 94. So we have specifications and we have implementer interest. And we also need to be able to do things with those colors. CSS Images 4 now lets authors specify the color space for gradients. CSS Color 5 defines color mixing and relative color syntax, which lets authors do things dynamically that they used to have to hack in pre-processors like Sass (with a static result because computation was on the server). Which means the Web is starting to catch up to native in this important area, which makes it ideal for a 2022 Interop push. |
Wide gamut color, including Display-P3, for Canvas shipped yesterday in Safari 15.2. |
Could someone pull in the PRs & label these tests? |
@jensimmons I just labeled the ones I thought that were relevant in the css/css-color directory: https://wpt.fyi/results/?label=master&label=experimental&product=chrome&product=firefox&product=safari&aligned&q=label%3Ainterop-2022-color (Note that you can label yourself on wpt.fyi using "Triage Mode" with an user-friendly UI). Here are the PRs that need reviewing: https://github.com/web-platform-tests/wpt/pulls?q=is%3Aopen+is%3Apr+label%3Acss-color (I did pull a few trivial ones in fwiw, but I feel like the remainder should be up for @svgeesus or @weinig to review) Some thoughts that came to mind while tagging the tests:
|
Interpolation is well defined but Transitions and Animations have not yet been updated to use this. So interpolation is in gamma-encoded (Whether two color spaces have different gamuts does not matter, btw)
This was a relatively recent addition to CSS Images 4: they now use the color-interpolation syntax: So the spec is clear, although the usual problem with writing pixel-accurate reftests for gradients remains. We already had that problem with srgb-only gradients.
We definitely need those. It is now common to get a bunch of css variables that define colors, which may well be imported from another stylesheet so you don't know what syntax they use. Testing that they do the same as specifying the color directly is useful. |
I guess the question for that specific item was more: Is this part of the interop 2022 effort? and should any potential tests be tagged? The issue specifically mentions the "CSS color 5" spec, while the gradient interpolation stuff is part of "CSS images 4". Maybe @una, @jensimmons or @foolip can answer this.
I was also thinking edge cases like using variables within color functions like color-mix()/color-contrast() or even color(). Seeing if invalidation works properly in these cases when you switch variable values for instance. I suspect usages within color-mix/color-contrast wouldn't be uncommon either. |
@nt1m is the fuzzy reftest feature enough to deal with the differences in gradient interpolation? Also, the PRs linked in #20 (comment) are all merged now, are all of those tests already labeled? |
I have enabled the inlined WPT feature on CSS Color 4 and CSS Color 5 so now each tested section makes clear what tests exist, the pass status, and allows the tests to be run. See for example the In addition, if a new test is added tagged to Color 4 or Color 5, then I get a Bikeshed build failure to alert me to add it to the spec. |
#6168 inquires about use-time vs parse-time for There's been chats too that interpolation and inheritance tests could help a lot as well. |
@argyleink can you elaborate on what is needed here? Is interpolation between colors in different color spaces possible, or should this just test within color spaces? And what about inheritance, what kinds of tests are needed? |
Yes, certainly it is possible, and fully described in CSS Color 4. |
But it is mostly other specifications (like CSS Images 4, for gradients) that actually apply the color interpolation. |
The CSS Color 5 Thus, the WPT tests for color-contrast-001.html (I am about to do a PR for that) However, not to be the bearer of solely bad news, in that same discussion CSS WG resolved to add |
The Interop2022 tag doesn't seem to be in the test itself, where is the tagging info stored? |
@foolip help please on (un)tagging color-contrast() tests? |
Description
Functions that enable more dynamic color theming on the web platform. They also rely on expanded color spaces (LAB, LCH, P3).
color-mix
: This function takes two<color>
specifications and returns the result of mixing them, in a given<color-space>
, by a specified amount.color-contrast
: This function takes, firstly, a single color (typically a background, but not necessarily), secondly, a list of two or more colors, and thirdly, an optional target luminance contrast [WCAG21]. It selects from that list the first color color to meet or exceed the target contrast. If no target is specified, it selects the first color with the highest contrast to the single color.Specification
CSS Color 5
Tests
TBD
Rationale
Web developers, design tools and design system developers often use color functions to assist in scaling the design of their component color relationships. With the increasing usage of design systems that support multiple platforms, and increased need to support user preferences like dark themes, dynamic color theming and automated accessibility functions become really handy.
Currently Sass, calc() on HSL values, or PostCSS is used to do this. Preprocessors are unable to work on dynamically adjusted colors, all current solutions are restricted to the sRGB gamut and to the perceptual limitations of HSL (colors are bunched up in the color wheel, and two colors with visually different lightness, like yellow and blue, can have the same HSL lightness).
The perceptually uniform
lch()
colorspace is used for mixing by default, as this has no gamut restrictions and colors are evenly distributed. However, other colorspaces can be specified, includinghsl()
orsrgb
if desired.The text was updated successfully, but these errors were encountered: