209116 2020-03-14 15:02:42 -0700 Issue 1061714: Quirky / SVG lengths parse number expressions in calc() like length, and behave oddly 2025-05-13 17:52:26 -0700 1 1 1 Unclassified WebKit CSS WebKit Nightly Build Unspecified Unspecified NEW BrowserCompat, InRadar P2 Normal --- 1 emilio webkit-unassigned ahmad.saleem792 ap bfulgham emilio karlcow koivisto mmaxfield rniwa simon.fraser taher_ali webkit-bug-importer oldest_to_newest 1630098 0 emilio 2020-03-14 15:02:42 -0700 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... 1630101 1 emilio 2020-03-14 15:16:01 -0700 I filed https://github.com/w3c/csswg-drafts/issues/4874 to discuss this with the working group. 1630212 2 webkit-bug-importer 2020-03-15 14:29:30 -0700 <rdar://problem/60474453> 1884787 3 ahmad.saleem792 2022-07-18 11:05:30 -0700 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 1934937 4 ahmad.saleem792 2023-02-18 15:54:59 -0800 (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 1945911 5 ahmad.saleem792 2023-03-31 22:32:41 -0700 (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 2109222 6 ahmad.saleem792 2025-04-05 22:46:23 -0700 *** Firefox Nightly 138 *** a: 1px b: 4px *** Chrome Canary 137 *** a: calc(4px) b: 4px *** Safari Technology Preview 216 *** a: 4px b: 4px