Bug 223875

Summary: WPT failures due to calc() serialization
Product: WebKit Reporter: Antoine Quint <graouts>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: RESOLVED CONFIGURATION CHANGED    
Severity: Normal CC: simon.fraser, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: Safari Technology Preview   
Hardware: Unspecified   
OS: Unspecified   
Bug Depends on: 224322, 224376, 224420, 224611, 224670    
Bug Blocks:    

Description Antoine Quint 2021-03-28 23:40:20 PDT
We fail several animation-related tests due to how calc() is serialized.
Comment 1 Antoine Quint 2021-03-28 23:56:20 PDT
Some affected tests:

    - css-values/animations/calc-interpolation.html
    - css-transitions/animations/vertical-align-interpolation.html
    - css-backgrounds/animations/background-position-origin-interpolation.html
    - css-backgrounds/animations/border-image-width-interpolation.html

There may be more.
Comment 2 Simon Fraser (smfr) 2021-03-29 09:44:40 PDT
Linky?
Comment 3 Antoine Quint 2021-03-30 05:16:43 PDT
It would probably be wise to start with https://wpt.fyi/results/css/css-values/animations/calc-interpolation.html?label=master&label=experimental&aligned. My guess is that other test failures are all due to issues that are present in this test.
Comment 4 Antoine Quint 2021-03-30 05:32:54 PDT
Other WPT tests under css/ which have calc-related issues:

    - css-backgrounds/animations/background-position-interpolation.html
    - css-backgrounds/animations/border-radius-interpolation.html
    - css-shapes/animation/shape-outside-interpolation.html
Comment 5 Radar WebKit Bug Importer 2021-04-04 23:41:14 PDT
<rdar://problem/76207315>
Comment 6 Antoine Quint 2021-04-08 03:58:57 PDT
Bug 224322 will already improve the situation but not fix every case.
Comment 7 Antoine Quint 2021-04-08 06:42:46 PDT
Here's an example where we fail to simplify at all:

<div style="border-top-left-radius: calc(5px + (0.5 * (100% - 80px)))">
<script>
    console.assert(document.querySelector("div").style.borderTopLeftRadius == "calc(50% - 35px)");
</script>
Comment 8 Antoine Quint 2021-04-09 10:09:31 PDT
Bug 224376 will fix some more cases.
Comment 9 Antoine Quint 2021-04-15 09:32:33 PDT
Yet more cases will be fixed by bug 224611.
Comment 10 Antoine Quint 2021-04-16 06:37:43 PDT
A few more cases are covered by bug 224670.
Comment 11 Antoine Quint 2021-04-16 08:48:39 PDT
The issues I was tracking are all fixed by the fixed bugs this bug depended on. Closing.