2024171 - [css-color] Enable layout.css.color-mix-multi-color.enabled for multi-color color-mix()

Status: RESOLVED FIXED

(Core :: CSS Parsing and Computation, task, P3)

Comment 1

[一丝]

I'd like to know the maximum number of colors that can be mixed in the comma list of the current Firefox implementation of color-mix()? Are there any performance issues if this exceeds a certain number, and is a performance test necessary?

Comment 2

[Tiaan Louw [:tlouw]]

(In reply to 一丝 from comment #1)

I'd like to know the maximum number of colors that can be mixed in the comma list of the current Firefox implementation of color-mix()? Are there any performance issues if this exceeds a certain number, and is a performance test necessary?

In terms of performance, parse time increases linearly per color, but the mixing algorithm is a very right loop doing some floating point math and should not be a performance issue.

Right now there is no color limit (as per spec), but it might be worth adding an artificial limit (100?) to avoid abuse. With the limit in place I don't believe testing for a performance issue would be required.

Comment 3

[一丝]

Thanks, could you submit a CSSWG issue?

Comment 4

[Tiaan Louw [:tlouw]]

After discussing with :emilio, limiting the number of colors in the list doesn’t really solve the underlying issue. Like other CSS functions such as calc(), there’s no practical limit on item count or nesting, and excessive use will simply crash the content process (e.g., via stack overflow).

That said, the performance characteristics remain acceptable: parsing scales linearly, and mixing has minimal overhead. In normal use, this shouldn’t be a problem unless deliberately abused.

Comment 5

[Sebastian Zartner [:sebo]]

[Why is this notable]: New CSS feature
[Affects Firefox for Android]: yes
[Suggested wording]: The color-mix() function previously accepted only two color values. This limitation has now been removed, allowing the function to accept an arbitrary number of colors.
[Links (documentation, blog post, etc)]: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/color-mix

Sebastian

Comment 6

[Tiaan Louw [:tlouw]]

Attachment: Bug 2024171 - Enable multi color color-mix() r=#layout

Enable the pref: layout.css.color-mix-multi-color.enabled

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/9ca2c1acaec7
https://hg.mozilla.org/integration/autoland/rev/1aa2011a354c
Enable multi color color-mix() r=layout-reviewers,dshin

Comment 8

[Norisz Fay [:noriszfay]]

https://hg.mozilla.org/mozilla-central/rev/1aa2011a354c

Comment 9

[Norisz Fay [:noriszfay]]

https://hg.mozilla.org/mozilla-central/rev/1aa2011a354c

Comment 10

[Donal Meehan [:dmeehan]]

Thanks, added to the Fx150 nightly release notes, please allow 30 minutes for the site to update.

Comment 11

[Dave Letorey]

Related pull requests

• Content PR
• BCD PR
• FF release PR

Comment 12

[Oriol Brufau [:Oriol]]

Are you shipping this with no test at all? In https://phabricator.services.mozilla.com/D278117 you said:

Tests for the serialization is pending here: https://github.com/web-platform-tests/wpt/pull/57234

That PR still hasn't landed.

Comment 13

[Tiaan Louw [:tlouw]]

Tests are here: https://phabricator.services.mozilla.com/D287969