Skip to content

Add tests for multi-color color-mix() syntax#57234

Open
tiaanl wants to merge 1 commit intoweb-platform-tests:masterfrom
tiaanl:multi-css-color
Open

Add tests for multi-color color-mix() syntax#57234
tiaanl wants to merge 1 commit intoweb-platform-tests:masterfrom
tiaanl:multi-css-color

Conversation

@tiaanl
Copy link
Copy Markdown
Contributor

@tiaanl tiaanl commented Jan 19, 2026

These tests focus primarily on percentage serialization when more than two colors are used.

The spec does not currently define clear serialization rules (see w3c/csswg-drafts#13320). The approach taken here is to serialize all percentages when more than two colors are present and the values do not sum to 100%, avoiding implicit normalization.

fuzzy_test_valid_color(`color-mix(in srgb, red, green, blue)`, `color-mix(in srgb, red, green, blue)`); // all p? omitted
fuzzy_test_valid_color(`color-mix(in srgb, red 10%, green 10%, blue 10%)`, `color-mix(in srgb, red 10%, green 10%, blue 10%)`); // all p? equal
fuzzy_test_valid_color(`color-mix(in srgb, 25% red, 25% green, 25% blue)`, `color-mix(in srgb, red 25%, green 25%, blue 25%)`); // all p? equal
fuzzy_test_valid_color(`color-mix(in srgb, red 25%, green, blue)`, `color-mix(in srgb, red 25%, green 37.5%, blue 37.5%)`); // only p1 specified
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What does this trailing 37.5%, outside the function, mean?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think you're referring to an older commit? I omitted the closing paren but fixed it.

@svgeesus
Copy link
Copy Markdown
Contributor

The approach taken here is to serialize all percentages when more than two colors are present and the values do not sum to 100%, avoiding implicit normalization.

That seems a reasonable approach for serializing the specified value. I'm working on updating the spec.

lando-prod-mozilla bot pushed a commit to mozilla-firefox/firefox that referenced this pull request Jan 27, 2026
…reviewers,firefox-style-system-reviewers,dshin

The color-mix() function can now take multiple color/percentage pairs
and mix them all together using the new algorithm.

Tests for the serialization is pending here:
web-platform-tests/wpt#57234

Differential Revision: https://phabricator.services.mozilla.com/D278117
github-actions bot pushed a commit to longvatrong111/stylo that referenced this pull request Jan 28, 2026
…reviewers,firefox-style-system-reviewers,dshin

The color-mix() function can now take multiple color/percentage pairs
and mix them all together using the new algorithm.

Tests for the serialization is pending here:
web-platform-tests/wpt#57234

Differential Revision: https://phabricator.services.mozilla.com/D278117
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants