We fail several animation-related tests due to how calc() is serialized.
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.
Linky?
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.
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
<rdar://problem/76207315>
Bug 224322 will already improve the situation but not fix every case.
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>
Bug 224376 will fix some more cases.
Yet more cases will be fixed by bug 224611.
A few more cases are covered by bug 224670.
The issues I was tracking are all fixed by the fixed bugs this bug depended on. Closing.