Intent to Implement and Ship: CSS Values Level 4 Calc Simplification and Serialization

79 views
Skip to first unread message

박중헌

unread,
Mar 9, 2022, 11:00:33 AM3/9/22
to blink-dev

Contact emails

pjh...@gmail.com, jh718...@samsung.com

Explainer

None

Specification

https://drafts.csswg.org/css-values-4/#calc-simplification, https://drafts.csswg.org/css-values-4/#calc-serialize

Summary

CSS math functions are simplified and serialized per spec. CSS calc simplification is a kind of constant folding which evaluates css calculation tree to the extent possible at parse time, so that evaluation at computed/used-value time can be reduced. The simplified result is serialized according to spec.



Blink component

Blink

Search tags

css, simplification, serialization

TAG review

None

TAG review status

Not applicable

Risks



Interoperability and Compatibility



Gecko: Shipped/Shipping

WebKit: Shipped/Shipping

Web developers: No signals


Ergonomics

None



Activation

None



Security

None



Debuggability

N/A



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

Yes



Requires code in //chrome?

False

Tracking bug

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


Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5730414630010880

This intent message was generated by Chrome Platform Status.

Yoav Weiss

unread,
Mar 9, 2022, 11:05:35 AM3/9/22
to 박중헌, blink-dev
What are the web exposed implications of this? Does this change the result of calcs in any way, or is it just speeding them up?

--
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/CAEmFqRckRAY%3DhvUSp08jV7ZBRinZ2XDfS3UN_9EewQjQh8T_eQ%40mail.gmail.com.

박중헌

unread,
Mar 9, 2022, 11:12:19 AM3/9/22
to Yoav Weiss, blink-dev
I think web exposed visible change will be calc serialized result,
e.g. calc(20% + 10px + 10em - 10%) will be serialized to calc(10% + 10em + 10px)
while it is serialized to calc((20% + 10px + 10em) - 10%) with current implementation.

FYI, current change link is https://chromium-review.googlesource.com/c/chromium/src/+/3489570
which is a patch for reference,
and we are planning to proceed developing it behind a runtime flag "CSSSimplificationAndSerialization".



2022년 3월 10일 (목) 오전 1:05, Yoav Weiss <yoav...@chromium.org>님이 작성:

박중헌

unread,
Mar 9, 2022, 11:22:09 AM3/9/22
to Yoav Weiss, blink-dev
What I mentioned above is just a bug aspect,
so I'd like to add more comment.

The web exposed serialization result will be the one resulted from css simplification.
As an example of behavioral change of css calc simplification, it includes length canonicalization
e.g. calc((12.5%*6 + 10in) / 4) is simplified to calc(18.75% + 240px),
and the simplified result will be serialized.




2022년 3월 10일 (목) 오전 1:11, 박중헌 <pjh...@gmail.com>님이 작성:

Mike Taylor

unread,
Mar 9, 2022, 12:03:00 PM3/9/22
to 박중헌, blink-dev
On 3/9/22 11:00 AM, 박중헌 wrote:

Contact emails

pjh...@gmail.com, jh718...@samsung.com

Explainer

None

Specification

https://drafts.csswg.org/css-values-4/#calc-simplification, https://drafts.csswg.org/css-values-4/#calc-serialize

Summary

CSS math functions are simplified and serialized per spec. CSS calc simplification is a kind of constant folding which evaluates css calculation tree to the extent possible at parse time, so that evaluation at computed/used-value time can be reduced. The simplified result is serialized according to spec.



Blink component

Blink

Search tags

css, simplification, serialization

TAG review

None

TAG review status

Not applicable

Risks



Interoperability and Compatibility



Gecko: Shipped/Shipping

WebKit: Shipped/Shipping

Web developers: No signals

Could you provide some links to bugs where these shipped?



Ergonomics

None



Activation

None



Security

None



Debuggability

N/A



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

Yes



Requires code in //chrome?

False

Tracking bug

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


Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5730414630010880

This intent message was generated by Chrome Platform Status.

박중헌

unread,
Mar 9, 2022, 6:15:16 PM3/9/22
to Mike Taylor, blink-dev
Ok, I updated the links below and the chrome status entry.

Contact emails

pjh...@gmail.com, jh718...@samsung.com

Explainer

None

Specification

https://drafts.csswg.org/css-values-4/#calc-simplification, https://drafts.csswg.org/css-values-4/#calc-serialize

Summary

CSS math functions are simplified and serialized per spec. CSS calc simplification is a kind of constant folding which evaluates css calculation tree to the extent possible at parse time, so that evaluation at computed/used-value time can be reduced. The simplified result is serialized according to spec.



Blink component

Blink

Search tags

css, simplification, serialization

TAG review

None

TAG review status

Not applicable

Risks



Interoperability and Compatibility



Gecko: Shipped/Shipping (https://phabricator.services.mozilla.com/D61739)

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

Web developers: No signals


Ergonomics

None



Activation

None



Security

None



Debuggability

N/A



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

Yes



Requires code in //chrome?

False

Tracking bug

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


Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5730414630010880

This intent message was generated by Chrome Platform Status.


2022년 3월 10일 (목) 오전 2:02, Mike Taylor <mike...@chromium.org>님이 작성:

Mike Taylor

unread,
Mar 9, 2022, 8:27:57 PM3/9/22
to 박중헌, blink-dev
Thanks. LGTM1

(Aside: Are these are the right WPTs? I'm excited for them to all be green if so).

박중헌

unread,
Mar 9, 2022, 11:43:14 PM3/9/22
to Mike Taylor, blink-dev
Yes, they are the right wpts. Besides, many other wpts' serialization results are affected to be in spec-compliant form
so they are changed to be green too.
E.g. 
wpt/css/css-shapes/shape-outside/values/shape-margin-003.html
wpt/css/css-shapes/shape-outside/values/shape-outside-ellipse-011.html
wpt/css/css-shapes/shape-outside/values/shape-outside-inset-008.html
wpt/css/css-shapes/shape-outside/values/shape-outside-inset-009.html
wpt/css/css-values/calc-nesting-002.html
and so on.


2022년 3월 10일 (목) 오전 10:27, Mike Taylor <mike...@chromium.org>님이 작성:

Yoav Weiss

unread,
Mar 9, 2022, 11:47:52 PM3/9/22
to 박중헌, Mike Taylor, blink-dev
LGTM2

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAEmFqRfW2XjGEa7g5QkXuo%3DH%2B9bT_z%3DZ%3DbuEXnaaqYihujAOww%40mail.gmail.com.

Manuel Rego Casasnovas

unread,
Mar 10, 2022, 7:46:08 AM3/10/22
to Yoav Weiss, 박중헌, Mike Taylor, blink-dev
LGTM3.

On 10/03/2022 05:47, Yoav Weiss wrote:
> LGTM2
>
> On Thu, Mar 10, 2022 at 5:43 AM 박중헌 <pjh...@gmail.com
> <mailto:pjh...@gmail.com>> wrote:
>
> Yes, they are the right wpts. Besides, many other wpts'
> serialization results are affected to be in spec-compliant form
> so they are changed to be green too.
> E.g. 
> wpt/css/css-shapes/shape-outside/values/shape-margin-003.html
> wpt/css/css-shapes/shape-outside/values/shape-outside-ellipse-011.html
> wpt/css/css-shapes/shape-outside/values/shape-outside-inset-008.html
> wpt/css/css-shapes/shape-outside/values/shape-outside-inset-009.html
> wpt/css/css-values/calc-nesting-002.html
> and so on.
>
>
> 2022년 3월 10일 (목) 오전 10:27, Mike Taylor <mike...@chromium.org
> <mailto:mike...@chromium.org>>님이 작성:
>
> Thanks. LGTM1
>
> (Aside: Are these are the right WPTs
> <https://wpt.fyi/results/css/css-values?label=master&label=experimental&aligned&q=serialization>?
> I'm excited for them to all be green if so).
>
> On 3/9/22 6:14 PM, 박중헌 wrote:
>> Ok, I updated the links below and the chrome status entry.
>>
>>
>> Contact emails
>>
>>
>> pjh...@gmail.com
>> <mailto:pjh...@gmail.com>, jh718...@samsung.com
>> <mailto:jh718...@samsung.com>
>>
>>
>> Explainer
>>
>>
>> None
>>
>>
>> Specification
>>
>>
>> https://drafts.csswg.org/css-values-4/#calc-simplification
>> <https://drafts.csswg.org/css-values-4/#calc-simplification>, https://drafts.csswg.org/css-values-4/#calc-serialize
>> <https://drafts.csswg.org/css-values-4/#calc-serialize>
>>
>>
>> Summary
>>
>>
>> CSS math functions are simplified and serialized per
>> spec. CSS calc simplification is a kind of constant
>> folding which evaluates css calculation tree to the
>> extent possible at parse time, so that evaluation at
>> computed/used-value time can be reduced. The
>> simplified result is serialized according to spec.
>>
>>
>>
>> Blink component
>>
>>
>> Blink
>> <https://bugs.chromium.org/p/chromium/issues/list?q=component:Blink>
>>
>>
>> Search tags
>>
>>
>> css
>> <https://chromestatus.com/features#tags:css>, simplification
>> <https://chromestatus.com/features#tags:simplification>, serialization
>> <https://chromestatus.com/features#tags:serialization>
>>
>>
>> TAG review
>>
>>
>> None
>>
>>
>> TAG review status
>>
>>
>> Not applicable
>>
>>
>> Risks
>>
>>
>>
>>
>> Interoperability and Compatibility
>>
>>
>>
>>
>> Gecko: Shipped/Shipping
>> (https://phabricator.services.mozilla.com/D61739
>> <https://phabricator.services.mozilla.com/D61739>)
>>
>> WebKit: Shipped/Shipping
>> (https://bugs.webkit.org/show_bug.cgi?id=203442
>> <https://bugs.webkit.org/show_bug.cgi?id=203442>)
>>
>> Web developers: No signals
>>
>>
>> Ergonomics
>>
>>
>> None
>>
>>
>>
>> Activation
>>
>>
>> None
>>
>>
>>
>> Security
>>
>>
>> None
>>
>>
>>
>> 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
>>
>>
>>
>>
>> Requires code in //chrome?
>>
>>
>> False
>>
>>
>> Tracking bug
>>
>>
>> https://bugs.chromium.org/p/chromium/issues/detail?id=1253162
>> <https://bugs.chromium.org/p/chromium/issues/detail?id=1253162>
>>
>>
>>
>> Link to entry on the Chrome Platform Status
>>
>>
>> https://chromestatus.com/feature/5730414630010880
>> <https://chromestatus.com/feature/5730414630010880>
>>
>> This intent message was generated by Chrome Platform
>> Status <https://chromestatus.com/>.
>>
>>
>> 2022년 3월 10일 (목) 오전 2:02, Mike Taylor
>> <mike...@chromium.org <mailto:mike...@chromium.org>>님이 작성:
>>
>> On 3/9/22 11:00 AM, 박중헌 wrote:
>>>
>>>
>>> Contact emails
>>>
>>>
>>> pjh...@gmail.com
>>> <mailto:pjh...@gmail.com>, jh718...@samsung.com <mailto:jh718...@samsung.com>
>>>
>>>
>>> Explainer
>>>
>>>
>>> None
>>>
>>>
>>> Specification
>>>
>>>
>>> https://drafts.csswg.org/css-values-4/#calc-simplification
>>> <https://drafts.csswg.org/css-values-4/#calc-simplification>, https://drafts.csswg.org/css-values-4/#calc-serialize
>>> <https://drafts.csswg.org/css-values-4/#calc-serialize>
>>>
>>>
>>> Summary
>>>
>>>
>>> CSS math functions are simplified and serialized
>>> per spec. CSS calc simplification is a kind of
>>> constant folding which evaluates css calculation
>>> tree to the extent possible at parse time, so
>>> that evaluation at computed/used-value time can
>>> be reduced. The simplified result is serialized
>>> according to spec.
>>>
>>>
>>>
>>> Blink component
>>>
>>>
>>> Blink
>>> <https://bugs.chromium.org/p/chromium/issues/list?q=component:Blink>
>>>
>>>
>>> Search tags
>>>
>>>
>>> css
>>> <https://chromestatus.com/features#tags:css>, simplification
>>> <https://chromestatus.com/features#tags:simplification>, serialization
>>> <https://chromestatus.com/features#tags:serialization>
>>>
>>>
>>> TAG review
>>>
>>>
>>> None
>>>
>>>
>>> TAG review status
>>>
>>>
>>> Not applicable
>>>
>>>
>>> Risks
>>>
>>>
>>>
>>>
>>> Interoperability and Compatibility
>>>
>>>
>>>
>>>
>>> Gecko: Shipped/Shipping
>>>
>>> WebKit: Shipped/Shipping
>>>
>>> Web developers: No signals
>>>
>> Could you provide some links to bugs where these shipped?
>>
>>>
>>>
>>>
>>> Ergonomics
>>>
>>>
>>> None
>>>
>>>
>>>
>>> Activation
>>>
>>>
>>> None
>>>
>>>
>>>
>>> Security
>>>
>>>
>>> None
>>>
>>>
>>>
>>> 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
>>>
>>>
>>>
>>>
>>> Requires code in //chrome?
>>>
>>>
>>> False
>>>
>>>
>>> Tracking bug
>>>
>>>
>>> https://bugs.chromium.org/p/chromium/issues/detail?id=1253162
>>> <https://bugs.chromium.org/p/chromium/issues/detail?id=1253162>
>>>
>>>
>>>
>>> Link to entry on the Chrome Platform Status
>>>
>>>
>>> https://chromestatus.com/feature/5730414630010880
>>> <https://chromestatus.com/feature/5730414630010880>
>>>
>>> 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/CAEmFqRckRAY%3DhvUSp08jV7ZBRinZ2XDfS3UN_9EewQjQh8T_eQ%40mail.gmail.com
>>> <https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAEmFqRckRAY%3DhvUSp08jV7ZBRinZ2XDfS3UN_9EewQjQh8T_eQ%40mail.gmail.com?utm_medium=email&utm_source=footer>.
>>
>>
>
> --
> 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/CAEmFqRfW2XjGEa7g5QkXuo%3DH%2B9bT_z%3DZ%3DbuEXnaaqYihujAOww%40mail.gmail.com
> <https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAEmFqRfW2XjGEa7g5QkXuo%3DH%2B9bT_z%3DZ%3DbuEXnaaqYihujAOww%40mail.gmail.com?utm_medium=email&utm_source=footer>.
>
> --
> 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/CAL5BFfXt_dKoJMS4VsD5NXGsfTt%3DJ0M_peKpUKD6LH-kBB5LDw%40mail.gmail.com
> <https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAL5BFfXt_dKoJMS4VsD5NXGsfTt%3DJ0M_peKpUKD6LH-kBB5LDw%40mail.gmail.com?utm_medium=email&utm_source=footer>.
Reply all
Reply to author
Forward
0 new messages