When I try to use the color-mix() function in combination with the Display-P3 color function, the function breaks. This is because the first argument, the color-space, is not supported by the color-interpolation-method as defined in CSS Color Module 5. However, it seems like CSS Color Module 5 suggests that one can give a @color-profile as color-interpolation-method in the color-mix() function like this: color-mix(<dashed-ident>, <color> <percentage, <color>); Expected Behavior: The color-mix() function should work correctly with the Display-P3 color, creating a mix of two colors in the specified color-space. Or at least work correctly with dashed-ident's and custom @color-profile. Steps to Reproduce: Try to use the color-mix() function in combination with Display-P3 or @color-profile on Safari 16 or Technology Preview
`data:text/html,<span%20style="color:%20color-mix(in srgb, color(display-p3%201%200.5%200)%2050%,%20transparent)">dfsdfsdfsdfdsf</span>` seems to work for me. Do you have a testcase that doesn't work for you?
Thank you for your response Tim! In the provided example the color-space srgb is used instead of display-p3. The function breaks if you try to use display-p3. Like this: `data:text/html,<span%20style="color:%20color-mix(in display-p3, color(display-p3%201%200.5%200)%2050%,%20transparent)">dfsdfsdfsdfdsf</span>` In my original comment I described using a custom color space as value in color-mix however I now realize custom color spaces aren't yet supported.
Ah right, it should work according to https://drafts.csswg.org/css-color/#interpolation-space , thanks! Sam, do you know if this is a known bug?
<rdar://problem/105591773>
Yes we don't support display-p3 yet as an interpolation method. https://github.com/WebKit/WebKit/blob/main/Source/WebCore/css/parser/CSSPropertyParserHelpers.cpp#L2894