Bug 278244 – Re-implement calc() to more closely align with current spec

• Component: CSS
• Status: RESOLVED FIXED

[Sam Weinig]

Re-implement calc() to more closely align with current spec.

[Sam Weinig]

Pull request: https://github.com/WebKit/WebKit/pull/32321

[EWS]

Committed 282580@main (e6902e0483c5): <https://commits.webkit.org/282580@main>

Reviewed commits have been landed. Closing PR #32321 and removing active labels.

[Radar WebKit Bug Importer]

<rdar://problem/134446246>

[Tim Nguyen (:ntim)]

*** Bug 255280 has been marked as a duplicate of this bug. ***

[Tim Nguyen (:ntim)]

*** Bug 255280 has been marked as a duplicate of this bug. ***

[Brandon McConnell]

Yes, see the related tests can be seen here:
https://wpt.fyi/results/css/css-values?label=pr_head&max-count=1&pr=42517

I spec'd them here:
https://github.com/web-platform-tests/wpt/pull/42517

-
Can someone please reopen this ticket until all the related tests pass? This is if the affirmation bug is truly considered a duplicate.

[Sam Weinig]

The WPT website unfortunately doesn't run the latest WebKit, so it is not showing accurate results.

But, I can tell you what the output on ToT is for each of those tests:

calc-background-position-002.html: All passing

PASS testing background-position: calc(2px + 3px) calc(4px + 5px)
PASS testing background-position: calc(18px - 7px) calc(19px - 7px)
PASS testing background-position: calc(4 * 5px) calc(6px * 4)
PASS testing background-position: calc(100px / 4) calc(119px / 7)
PASS testing background-position: calc(6px + 21%) calc(7em + 22%)
PASS testing background-position: calc(-8px + 23%) calc(-9em + 24%)

calc-in-media-queries-with-mixed-units.html: All but one are passing.

(the failing test seems to be an error in the test, I raised the issue here -> https://github.com/w3c/csswg-drafts/issues/10809 

PASS box should be orange if the calc between px-em in @media was correct
PASS box should be orange if the calc between vh+em in @media was correct
PASS box should be orange if the calc between vw-em in @media was correct
PASS box should be orange if the calc between vw+vh in @media was correct
PASS box should be orange if the calc between vh+px in @media was correct
PASS box should be orange if the calc between vw+px in @media was correct
PASS box should be orange if the calc between px/em*em in @media was correct
PASS box should be orange if the calc between vh*em in @media was correct
FAIL box should be orange if the calc between vh*vw/em*px/vh in @media was correct assert_equals: expected "rgb(255, 165, 0)" but got "rgb(0, 0, 255)"
PASS box should be orange if the calc between vw/px*vh in @media was correct
PASS box should be orange if the calc between vh*vw/em*px in @media was correct
PASS box should be orange if the calc between vw*vh*px*em/px/px/px in @media was correct


calc-linear-radial-conic-gradient-001.html: All passing

PASS testing background-image: linear-gradient(rgb(0, 128, 0) calc(0%), rgb(0, 0, 255))
PASS testing background-image: linear-gradient(calc(90deg), rgb(0, 128, 0), rgb(0, 0, 255))
PASS testing background-image: linear-gradient(calc(90deg), rgb(0, 128, 0) calc(0%), rgb(0, 0, 255))
PASS testing background-image: linear-gradient(calc(0.1turn + 0.15turn), rgb(0, 128, 0), rgb(0, 0, 255))
PASS testing background-image: linear-gradient(calc(150grad - 50grad), rgb(0, 128, 0), rgb(0, 0, 255))
PASS testing background-image: linear-gradient(calc(200grad - 90deg), rgb(0, 128, 0), rgb(0, 0, 255))
PASS testing background-image: radial-gradient(rgb(0, 128, 0) calc(10% + 20%), rgb(0, 0, 255) calc(30% + 40%))
PASS testing background-image: conic-gradient(rgb(0, 128, 0) calc(50% + 10%), rgb(0, 0, 255) calc(60% + 20%))

calc-z-index-fractions-001.html: All passing

PASS testing z-index: calc(2.5 / 2)
PASS testing z-index: calc(3 / 2)
PASS testing z-index: calc(3.5 / 2)
PASS testing z-index: calc(-2.5 / 2)
PASS testing z-index: calc(-3 / 2)
PASS testing z-index: calc(-3.5 / 2)

getComputedStyle-border-radius-001.html: All passing

PASS testing border-top-left-radius: calc(25% + 10px) calc(25% + 20px)
PASS testing border-top-right-radius: calc(25% + 16px)
PASS testing border-bottom-right-radius: 25%
PASS testing border-bottom-left-radius: 25px
PASS testing border-radius: calc(25% + 10px) calc(25% + 16px) 25% 25px / calc(25% + 20px) calc(25% + 16px) 25% 25px

getComputedStyle-border-radius-003.html: All passing

PASS testing border-radius: calc(1% + 1px) calc(2% + 2px) calc(3% + 3px) calc(4% + 4px) / calc(5% + 5px) calc(6% + 6px) calc(7% + 7px) calc(8% + 8px)

getComputedStyle-calc-mixed-units-001.html: All passing

PASS testing background-size: calc(67% - 54% + 4em) 50%
PASS testing background-position: calc(100% - 100% + 20em)
PASS testing height: calc(60% - 50% + 3em)

getComputedStyle-calc-mixed-units-002.html: All passing

PASS testing width: calc(10% + 2em)
PASS testing width: calc(5% + 4rem)
PASS testing width: calc(8lh + 7px)
PASS testing height: calc(10% + 6pt)
PASS testing width: calc(4em + 2.6458333cm)
PASS testing height: calc(5em + 26.458333mm)
PASS testing width: calc(2in + 101.6Q)
PASS testing height: calc(1pc + 3pt)

getComputedStyle-calc-mixed-units-003.html: All passing

PASS testing width: calc(5px * 10lh / 1px)
PASS testing width: calc(20% * 0.5em / 1px)
PASS testing width: calc(4px * 4em / 1px)
PASS testing width: calc(400px / 4lh * 1px)
PASS testing width: calc(20% / 0.5em * 1px)

[Tim Nguyen (:ntim)]

*** Bug 259013 has been marked as a duplicate of this bug. ***

[Tim Nguyen (:ntim)]

*** Bug 259038 has been marked as a duplicate of this bug. ***

[Tim Nguyen (:ntim)]

*** Bug 242629 has been marked as a duplicate of this bug. ***