Intent to prototype and ship: CSS comparison functions: min() / max() / clamp()

[Emilio Cobos Álvarez]

Hi,

In bug 1519519 I plan to enable the min() / max() / clamp() CSS
functions by default.

Summary: These functions allow authors to do what their name says :-)

Bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1519519

Standard: https://drafts.csswg.org/css-values-4/#comp-func

Platform coverage: All

Preference: layout.css.comparison-functions.enabled

Devtools bug: N/A. I thought that devtools auto-completed "calc" (and
thus that these functions would be a reasonable thing to add), but
apparently they don't, so not much else to do.

Other browsers:

* Safari: Shipped since ages ago
(https://bugs.webkit.org/show_bug.cgi?id=167000)
* Chrome: Shipped since v79
(https://www.chromestatus.com/feature/5714277878988800)

web-platform-tests: There's a variety of tests in:
https://wpt.fyi/results/css/css-values?label=master&label=experimental&aligned&q=minmax%7Cclamp

Note that some of those tests are not up-to-date with the latest spec
and working group discussions regarding serialization / simplification.
Still I think our implementation is closer to the spec than other
browsers. Anyhow that testing issue is tracked in
https://github.com/web-platform-tests/wpt/issues/21599.

Also, not having enabled causes some confusing (but technically
correct!) behavior for developers[1][2], which is IMO worth addressing,
and also kinda likely to show up as compat bugs (specially on mobile
where env() is used the most).

Let me know if there's any concern with proceeding.

-- Emilio

[1]: https://twitter.com/vincentriemer/status/1213244088998383620
[2]: https://twitter.com/ecbos_/status/1213622047206711296

[James Graham]

On 21/02/2020 01:42, Emilio Cobos Álvarez wrote:
> web-platform-tests: There's a variety of tests in:
> https://wpt.fyi/results/css/css-values?label=master&label=experimental&aligned&q=minmax%7Cclamp

Do we have any sense of how good the test coverage is?

> Also, not having enabled causes some confusing (but technically
> correct!) behavior for developers[1][2], which is IMO worth addressing,
> and also kinda likely to show up as compat bugs (specially on mobile
> where env() is used the most).

I assume the word "env()" is missing between "having enabled" and "causes"?

[Emilio Cobos Álvarez]

On 2/21/20 11:46 AM, James Graham wrote:
> On 21/02/2020 01:42, Emilio Cobos Álvarez wrote:
>> web-platform-tests: There's a variety of tests in:
>> https://wpt.fyi/results/css/css-values?label=master&label=experimental&aligned&q=minmax%7Cclamp
>
>
> Do we have any sense of how good the test coverage is?

Pretty good, IMO.

>> Also, not having enabled causes some confusing (but technically
>> correct!) behavior for developers[1][2], which is IMO worth
>> addressing, and also kinda likely to show up as compat bugs (specially
>> on mobile where env() is used the most).
>
> I assume the word "env()" is missing between "having enabled" and "causes"?

Err, not quite. The issue is caused by env() being enabled and min() /
max() not being enabled. That means that developers would usually write
something like:

padding: 10px;
padding: max(env(safe-area-something-something), 10px);

Expecting that the 10px declaration would take effect if the browser
doesn't support max().

But instead the declaration at the bottom parses and computes to zero
(per spec). The right way to do that is to do something like @supports
(padding: max(0px)) { ... } or such, but...

-- Emilio