Bug 209116
| Summary: | Issue 1061714: Quirky / SVG lengths parse number expressions in calc() like length, and behave oddly | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Emilio Cobos Álvarez (:emilio) <emilio> |
| Component: | CSS | Assignee: | Nobody <webkit-unassigned> |
| Status: | NEW | ||
| Severity: | Normal | CC: | ahmad.saleem792, ap, bfulgham, emilio, karlcow, koivisto, mmaxfield, rniwa, simon.fraser, taher_ali, webkit-bug-importer |
| Priority: | P2 | Keywords: | BrowserCompat, InRadar |
| Version: | WebKit Nightly Build | ||
| Hardware: | Unspecified | ||
| OS: | Unspecified | ||
Emilio Cobos Álvarez (:emilio)
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 | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Emilio Cobos Álvarez (:emilio)
I filed https://github.com/w3c/csswg-drafts/issues/4874 to discuss this with the working group.
Radar WebKit Bug Importer
<rdar://problem/60474453>
Ahmad Saleem
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
(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
(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
*** Firefox Nightly 138 ***
a: 1px
b: 4px
*** Chrome Canary 137 ***
a: calc(4px)
b: 4px
*** Safari Technology Preview 216 ***
a: 4px
b: 4px