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...
I filed https://github.com/w3c/csswg-drafts/issues/4874 to discuss this with the working group.
<rdar://problem/60474453>
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
(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
(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