NEW 209116
Issue 1061714: Quirky / SVG lengths parse number expressions in calc() like length, and behave oddly
https://bugs.webkit.org/show_bug.cgi?id=209116
Summary Issue 1061714: Quirky / SVG lengths parse number expressions in calc() like l...
Emilio Cobos Álvarez (:emilio)
Reported 2020-03-14 15:02:42 PDT
See also: * https://bugzilla.mozilla.org/show_bug.cgi?id=1258270#c5 * https://bugs.chromium.org/p/chromium/issues/detail?id=1061714 1. data:text/html,<!doctype html><div id=a style="stroke-width: calc(2 * 2)"></div><div id=b style="stroke-width: calc(2px * 2)"></div> 2. getComputedStyle(a).strokeWidth 3. getComputedStyle(b).strokeWidth On WebKit, I get the right result for b, as I'd expect, but I get 0px for a, which looks very odd. It seems like numbers are a bit ambiguous in calc() for these properties, and we should probably allow just <length-percentage> for them...
Attachments
Emilio Cobos Álvarez (:emilio)
Comment 1 2020-03-14 15:16:01 PDT
I filed https://github.com/w3c/csswg-drafts/issues/4874 to discuss this with the working group.
Radar WebKit Bug Importer
Comment 2 2020-03-15 14:29:30 PDT
Ahmad Saleem
Comment 3 2022-07-18 11:05:30 PDT
I am not sure on expected behavior but by taking the test case example from Chrome bug in Comment 5, I change it to following JSFiddle: Link - https://jsfiddle.net/b5svdrx1/show All browsers have different output: *** Safari 15.5 on macOS 12.4 *** a. 0 px <<<<< b. 4 px *** Firefox Nightly 104 *** a. 4 px <<<<< b. 4 px *** Chrome Canary 105 *** a. 1 px <<<< b. 4 px ____ Chrome followed-up on bug to match with Firefox intro behavior as follow: https://chromium.googlesource.com/chromium/src.git/+/7377d9c6d278bca393042b843f4f5f7f45de57a8
Ahmad Saleem
Comment 4 2023-02-18 15:54:59 PST
(In reply to Ahmad Saleem from comment #3) > I am not sure on expected behavior but by taking the test case example from > Chrome bug in Comment 5, I change it to following JSFiddle: > > Link - https://jsfiddle.net/b5svdrx1/show > > All browsers have different output: > > *** Safari 15.5 on macOS 12.4 *** > > a. 0 px <<<<< > b. 4 px > > *** Firefox Nightly 104 *** > > a. 4 px <<<<< > b. 4 px > > *** Chrome Canary 105 *** > > a. 1 px <<<< > b. 4 px > > ____ > > Chrome followed-up on bug to match with Firefox intro behavior as follow: > > https://chromium.googlesource.com/chromium/src.git/+/ > 7377d9c6d278bca393042b843f4f5f7f45de57a8 Just to update: Safari Technology Preview 163 shows: a. 4 px b. 4 px Which is same as "Chrome Canary 112" but differs from now Firefox Nightly 112, which has now old behavior of Chrome Canary. a. 1 px b. 4 px
Ahmad Saleem
Comment 5 2023-03-31 22:32:41 PDT
(In reply to Ahmad Saleem from comment #4) > (In reply to Ahmad Saleem from comment #3) > > I am not sure on expected behavior but by taking the test case example from > > Chrome bug in Comment 5, I change it to following JSFiddle: > > > > Link - https://jsfiddle.net/b5svdrx1/show > > > > All browsers have different output: > > > > *** Safari 15.5 on macOS 12.4 *** > > > > a. 0 px <<<<< > > b. 4 px > > > > *** Firefox Nightly 104 *** > > > > a. 4 px <<<<< > > b. 4 px > > > > *** Chrome Canary 105 *** > > > > a. 1 px <<<< > > b. 4 px > > > > ____ > > > > Chrome followed-up on bug to match with Firefox intro behavior as follow: > > > > https://chromium.googlesource.com/chromium/src.git/+/ > > 7377d9c6d278bca393042b843f4f5f7f45de57a8 > > Just to update: > > Safari Technology Preview 163 shows: > > a. 4 px > b. 4 px > > Which is same as "Chrome Canary 112" but differs from now Firefox Nightly > 112, which has now old behavior of Chrome Canary. > > a. 1 px > b. 4 px ____ Chrome Canary 114: a: calc(0% + 4px) b: 4px Safari 16.4 & STP166: a. 4 px b. 4 px Firefox Nightly 113: a. 1 px b. 4 px
Ahmad Saleem
Comment 6 2025-04-05 22:46:23 PDT
*** Firefox Nightly 138 *** a: 1px b: 4px *** Chrome Canary 137 *** a: calc(4px) b: 4px *** Safari Technology Preview 216 *** a: 4px b: 4px
Note You need to log in before you can comment on or make changes to this bug.