[css-values-3] Computed value of calc() expression in linear-gradient function incorrect

• Component: CSS
• Status: NEW ---

[Gérard Talbot (no longer involved)]

Test
****

http://www.gtalbot.org/BrowserBugsSection/CSS3Values/trac-webkit-linear-gradient-calc.html



Expected result: 
linear-gradient(90deg, rgb(255, 255, 0), rgb(0, 0, 255) 50%)



Actual result in Epiphany 3.31.90-8061c1929 (WebKitGTK 2.24.0):
linear-gradient(calc(90deg), rgb(255, 255, 0), rgb(0, 0, 255) calc(50%))

- - - - - 

Firefox 68.0a1 buildID=20190327175114 achieves expected result.

- - - - - 

The original test is

https://trac.webkit.org/browser/webkit/trunk/LayoutTests/css3/calc/webkit-gradient-calc.html

and is using 
-webkit-gradient(linear,...) 
which is not standard.
linear-gradient() is standard.

- - - - - 

Correspondent Blink Issue:
https://bugs.chromium.org/p/chromium/issues/detail?id=947377

- - - - - 

I searched for duplicate and did not find any; I do not know if bug 52378 is still active.

[Radar WebKit Bug Importer]

<rdar://problem/96254863>

[Ahmad Saleem]

Chrome Canary 114 and Safari 16.4 & STP166 are failing this test.

Test Link - http://www.gtalbot.org/BrowserBugsSection/CSS3Values/trac-webkit-linear-gradient-calc.html

Firefox Nightly 113 is only browser passing this.

[Gérard Talbot (no longer involved)]

Additional (more complete) test on computed value of 'background-image: [ linear | radial | conic ]-gradient()' with calc() function:
http://wpt.live/css/css-values/calc-linear-radial-conic-gradient-001.html

Test result:
https://wpt.fyi/results/css/css-values/calc-linear-radial-conic-gradient-001.html?label=experimental&label=master&aligned

[Karl Dubost]

This has impact on a number of tests.
Example: http://wpt.live/css/css-backgrounds/parsing/background-image-computed.sub.html

Each time a calc is not being resolved to the hard values and kept as calc.

expected: "radial-gradient(0px at -30px -70px, rgb(255, 0, 0), rgb(0, 0, 255))" 
actual:   "radial-gradient(calc(-0.5em + 10px) at calc(-1em + 10px) calc(-2em + 10px), rgb(255, 0, 0), rgb(0, 0, 255))"