Intent to Ship: Allow infinity, -infinity and NaN in CSS calc()

[Seokho Song]

Contact emails

0xde...@gmail.com

Explainer

https://github.com/DevSDK/calc-infinity-and-NaN/blob/master/explainer.md

Specification

https://drafts.csswg.org/css-values/#ref-for-math-function%E2%91%A1%E2%91%A0

Design docs

https://bit.ly/349gXjq

Summary

CSS calc() math function should allow infinity and NaN values by 'infinity', '-infinity', 'NaN' keywords or expressions that could be evaluated into infinity or NaN such as 'calc(1/0)'.

Blink component

Blink>CSS

Search tags

css, calc, infinity, nan

TAG review

Not required. It's a very small part of CSS.

TAG review status

Not applicable

Risks

 

 

Interoperability and Compatibility

This feature may have interoperability risks. Other browsers have not yet implemented this feature.

 

 

Gecko: No signal (https://bugzilla.mozilla.org/show_bug.cgi?id=1682444)

 

WebKit: Shipped/Shipping (https://bugs.webkit.org/show_bug.cgi?id=231044)

 

Web developers: No signals

 

Other signals:

Debuggability

N/A

Is this feature fully tested by web-platform-tests?

Yes

Flag name

Requires code in //chrome?

False

Tracking bug

https://bugs.chromium.org/p/chromium/issues/detail?id=1133390

Estimated milestones

99

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5657825571241984

Links to previous Intent discussions

Intent to prototype: https://groups.google.com/a/chromium.org/g/blink-dev/c/4cT9dMkzVXE/m/aCT8B6PDAwAJ

This intent message was generated by Chrome Platform Status.

[Mike Taylor]

Hi Seokho,

Thanks for working on this!

On 12/9/21 6:56 PM, Seokho Song wrote:

Contact emails

0xde...@gmail.com

Explainer

https://github.com/DevSDK/calc-infinity-and-NaN/blob/master/explainer.md

Specification

https://drafts.csswg.org/css-values/#ref-for-math-function%E2%91%A1%E2%91%A0

Design docs

https://bit.ly/349gXjq

Summary

CSS calc() math function should allow infinity and NaN values by 'infinity', '-infinity', 'NaN' keywords or expressions that could be evaluated into infinity or NaN such as 'calc(1/0)'.

Blink component

Blink>CSS

Search tags

css, calc, infinity, nan

TAG review

Not required. It's a very small part of CSS.

TAG review status

Not applicable

Risks

 

Interoperability and Compatibility

This feature may have interoperability risks. Other browsers have not yet implemented this feature.

Looking at https://wpt.fyi/results/css/css-values?label=master&label=experimental&aligned&q=infinity-nan, it seems like Chrome and Safari disagree on handling a top-level calculation that produces NaN, like "calc(NaN * 1px)" - I think we're treating it as positive Infinity, and they seem to be treating as (unsigned?) zero?

I filed https://bugs.webkit.org/show_bug.cgi?id=234176 to track that.

Gecko: No signal (https://bugzilla.mozilla.org/show_bug.cgi?id=1682444)

Can you please request a position? https://bit.ly/blink-signals

WebKit: Shipped/Shipping (https://bugs.webkit.org/show_bug.cgi?id=231044)

Web developers: No signals

Other signals:

Debuggability

N/A

DevTools should support this out of the box, I think.

Is this feature fully tested by web-platform-tests?

Yes

Flag name

Requires code in //chrome?

False

Tracking bug

https://bugs.chromium.org/p/chromium/issues/detail?id=1133390

Estimated milestones

99

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5657825571241984

Links to previous Intent discussions

Intent to prototype: https://groups.google.com/a/chromium.org/g/blink-dev/c/4cT9dMkzVXE/m/aCT8B6PDAwAJ

This intent message was generated by Chrome Platform Status.

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/f98064ee-9d8a-44a5-bf37-4a32a5471496n%40chromium.org.

[Seokho Song]

Hi, mike! Thanks for response :)

Sure. I've filed on https://github.com/mozilla/standards-positions/issues/602.

But not yet responded.

 

WebKit: Shipped/Shipping (https://bugs.webkit.org/show_bug.cgi?id=231044)

Web developers: No signals

Other signals:

Debuggability

N/A

DevTools should support this out of the box, I think.

Can I ask what features or supports we need on devtools?
What do I need some action on it?

[Seokho Song]

For this project,  the degenerate values are correctly reflected when we inspect the style of an element.

I think DevTools is already supporting this. No extra work is needed. 

[Chris Harrelson]

Alex replied with LGTM1 in another thread on blink-dev: "LGTM, however this should be sent to the TAG as an FYI. It's new design language that they will want/need to be aware of when considering other reviews. There isn't a carveout for TAG review for CSS."

LGTM2 from me.

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/c10dbce3-19ef-462b-965e-b5e5a851e7b1n%40chromium.org.

[Yoav Weiss]

LGTM3

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAOMQ%2Bw8Wkz6eTEMXWxB2JLKir6LaVgeo9URdN%3DRsANDKRxJMVw%40mail.gmail.com.

[Emilio Cobos Álvarez]

Hi Seokho,

Curious, how do I enable this in Canary? I tried but the experimental
features doesn't seem to enable this (unless I'm holding it wrong).

I guess given
<https://chromium.googlesource.com/chromium/src/+/3d250cc6a43edde74f2870ef379545e5e6306dae>
I'll be able to test soon enough, but it's really weird that this is
shipping without being enabled as experimental first? I presume that
means that no web developer has actually tested it or anything :/

In general I think this is probably fine, but if the tests in:


<https://wpt.fyi/results/css/css-values?label=master&label=experimental&aligned&q=infinity-nan>

are the only ones, that seems at best a bit scarce. There are no
behavior tests for anything that aren't transforms?

Tangential, but it's clear that the safari implementation is totally
broken in various ways (like serializing NaNdeg...).

I'm a bit scared of making too easy to get NaNs (and thus off-limit
values like +inf / -inf in the layout engines) specially since limits
across layout engines can diverge. I guess it's not anything you can't
do subtracting massive numbers though, so it might be fine.

-- Emilio

On 12/10/21 00:56, Seokho Song wrote:
> Contact emails
>
> 0xde...@gmail.com
>
>
> Explainer
>
> https://github.com/DevSDK/calc-infinity-and-NaN/blob/master/explainer.md
> <https://github.com/DevSDK/calc-infinity-and-NaN/blob/master/explainer.md>
>
>
> Specification
>

> https://drafts.csswg.org/css-values/#ref-for-math-function%E2%91%A1%E2%91%A0 <https://drafts.csswg.org/css-values/#ref-for-math-function%E2%91%A1%E2%91%A0>
>
>
> Design docs
>
> https://bit.ly/349gXjq <https://bit.ly/349gXjq>

>
>
> Summary
>
> CSS calc() math function should allow infinity and NaN values by
> 'infinity', '-infinity', 'NaN' keywords or expressions that could be
> evaluated into infinity or NaN such as 'calc(1/0)'.
>
>
>
> Blink component
>
> Blink>CSS

> <https://bugs.chromium.org/p/chromium/issues/list?q=component:Blink%3ECSS>
>
>
> Search tags
>
> css <https://chromestatus.com/features#tags:css>, calc
> <https://chromestatus.com/features#tags:calc>, infinity
> <https://chromestatus.com/features#tags:infinity>, nan
> <https://chromestatus.com/features#tags:nan>

>
>
> TAG review
>
> Not required. It's a very small part of CSS.
>
>
> TAG review status
>
> Not applicable
>
>
> Risks
>
> Interoperability and Compatibility
>
> This feature may have interoperability risks. Other browsers have not
> yet implemented this feature.
>
> Gecko: No signal (https://bugzilla.mozilla.org/show_bug.cgi?id=1682444

> <https://bugzilla.mozilla.org/show_bug.cgi?id=1682444>)
>
> WebKit: Shipped/Shipping (https://bugs.webkit.org/show_bug.cgi?id=231044
> <https://bugs.webkit.org/show_bug.cgi?id=231044>)

>
> Web developers: No signals
>
> Other signals:
>
>
>
> Debuggability
>
> N/A
>
>
>
> Is this feature fully tested by web-platform-tests

> <https://chromium.googlesource.com/chromium/src/+/master/docs/testing/web_platform_tests.md>?

>
> Yes
>
>
> Flag name
>
> Requires code in //chrome?
>
> False
>
>
> Tracking bug
>
> https://bugs.chromium.org/p/chromium/issues/detail?id=1133390
> <https://bugs.chromium.org/p/chromium/issues/detail?id=1133390>
>
>
> Estimated milestones
>
> 99
>
>
>
> Link to entry on the Chrome Platform Status
>
> https://chromestatus.com/feature/5657825571241984
> <https://chromestatus.com/feature/5657825571241984>
>
>
> Links to previous Intent discussions
>
> Intent to prototype:

> https://groups.google.com/a/chromium.org/g/blink-dev/c/4cT9dMkzVXE/m/aCT8B6PDAwAJ <https://groups.google.com/a/chromium.org/g/blink-dev/c/4cT9dMkzVXE/m/aCT8B6PDAwAJ>

>
>
>
> This intent message was generated by Chrome Platform Status

> <https://chromestatus.com/>.

>
>
> --
> You received this message because you are subscribed to the Google
> Groups "blink-dev" group.
> To unsubscribe from this group and stop receiving emails from it, send
> an email to blink-dev+...@chromium.org

> <mailto:blink-dev+...@chromium.org>.

> To view this discussion on the web visit

> https://groups.google.com/a/chromium.org/d/msgid/blink-dev/f98064ee-9d8a-44a5-bf37-4a32a5471496n%40chromium.org <https://groups.google.com/a/chromium.org/d/msgid/blink-dev/f98064ee-9d8a-44a5-bf37-4a32a5471496n%40chromium.org?utm_medium=email&utm_source=footer>.

[Seokho Song]

Hi Emilio,
Happy new year! :D

> Curious, how do I enable this in Canary? I tried but the experimental
features doesn't seem to enable this (unless I'm holding it wrong).

It is not possible. because the feature flag status was 'test'.

> I'll be able to test soon enough, but it's really weird that this is
shipping without being enabled as experimental first? I presume that
means that no web developer has actually tested it or anything :/

Oh, We think this feature is not significant that requires the experimental status, and I've got a review about it[1]. So we decided to flip it to stable.

> Tangential, but it's clear that the safari implementation is totally
broken in various ways (like serializing NaNdeg...).

That's bad news... I think NaN * 1deg is the spec way [2]

> I'm a bit scared of making too easy to get NaNs (and thus off-limit
values like +inf / -inf in the layout engines) specially since limits
across layout engines can diverge

The outside of calc value should be in the finite range which is requirement of spec [3]  and the NaN value should be clamp to +inf [4] 

[1] https://chromium-review.googlesource.com/c/chromium/src/+/3216564/comment/b589fa7b_b953f250/

[2] https://www.w3.org/TR/css-values-4/#calc-serialize
[3] https://www.w3.org/TR/css-values-4/#:~:text=Note%3A%20These%20constants%20are%20defined%20mostly%20to%20make%20serialization%20of%20infinite/NaN%20values%20simpler%20and%20more%20obvious%2C%20but%20can%20be%20used%20to%20indicate%20a%20%22largest%20possible%20value%22%2C%20since%20an%20infinite%20value%20gets%20clamped%20to%20the%20allowed%20range

[4]  https://www.w3.org/TR/css-values-4/#:~:text=If%20a%20top%2Dlevel%20calculation%20(a%20math%20function%20not%20nested%20inside%20of%20another%20math%20function)%20would%20produce%20a%20value%20whose%20numeric%20part%20is%20NaN%2C%20it%20instead%20act%20as%20though%20the%20numeric%20part%20is%20%2B%E2%88%9E.

Regards,

Seokho

[Christian Biesinger]

On Tue, Jan 11, 2022 at 10:34 PM Emilio Cobos Álvarez
<emi...@mozilla.com> wrote:
>
> Hi Seokho,
>
> Curious, how do I enable this in Canary? I tried but the experimental
> features doesn't seem to enable this (unless I'm holding it wrong).

To answer this question -- you can enable individual runtime-enabled
features using --enable-blink-features=CSSCalcInfinityAndNaN

Christian