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

231 views
Skip to first unread message

Seokho Song

unread,
Dec 9, 2021, 6:56:22 PM12/9/21
to blink-dev, xiaoc...@chromium.org, mas...@chromium.org
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

unread,
Dec 11, 2021, 1:39:16 AM12/11/21
to Seokho Song, xiaoc...@chromium.org, mas...@chromium.org, blink-dev
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.

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

unread,
Dec 15, 2021, 7:16:54 PM12/15/21
to blink-dev, mike...@chromium.org, xiaoc...@chromium.org, mas...@chromium.org, blink-dev, Seokho Song
Hi, mike! Thanks for response :)
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

unread,
Dec 15, 2021, 8:42:23 PM12/15/21
to blink-dev, Seokho Song, mike...@chromium.org, xiaoc...@chromium.org, mas...@chromium.org, blink-dev
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

unread,
Jan 5, 2022, 12:17:36 PMJan 5
to Seokho Song, blink-dev, mike...@chromium.org, xiaoc...@chromium.org, mas...@chromium.org
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.

Yoav Weiss

unread,
Jan 5, 2022, 12:23:10 PMJan 5
to Chris Harrelson, Seokho Song, blink-dev, mike...@chromium.org, xiaoc...@chromium.org, mas...@chromium.org
Message has been deleted

Emilio Cobos Álvarez

unread,
Jan 11, 2022, 10:34:58 PMJan 11
to blin...@chromium.org
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

unread,
Jan 12, 2022, 7:22:51 AMJan 12
to blink-dev, Emilio Cobos Alvarez
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/

Regards,
Seokho

Christian Biesinger

unread,
Jan 12, 2022, 10:39:20 AMJan 12
to Emilio Cobos Álvarez, blink-dev
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
Reply all
Reply to author
Forward
0 new messages