Bug 218299 - Incorrect calc percent values in SVG
Summary: Incorrect calc percent values in SVG
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: SVG (show other bugs)
Version: Safari 13
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: BrowserCompat, InRadar, LayerBasedSVGEngine
Depends on:
Blocks:
 
Reported: 2020-10-28 11:31 PDT by Zach Bjornson
Modified: 2024-07-22 07:29 PDT (History)
9 users (show)

See Also:

Attachments
Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Zach Bjornson 2020-10-28 11:31:39 PDT 
https://jsfiddle.net/u4kp7jLx/2/

In this example, the two circles differ only in the value of --t1:
  --t1: calc(100% - 4px); /* bug */
  --t1: calc(100px - 4px); /* okay */

That's applied to an SVG element with width=100 height=100, so 100% == 100px.

This works correctly in Firefox and Chrome.

(Safari 13.1.2)
Comment 1 Radar WebKit Bug Importer 2020-10-28 19:23:22 PDT 
<rdar://problem/70791325>
Comment 2 Ahmad Saleem 2022-08-29 04:19:02 PDT 
I am able to reproduce this bug in Safari Technology Preview 152 on macOS 12.5.1 using test case from Comment 0.

*** Safari Technology Preview 151 ***

First box - Full Blue Circle inside <<<---------- BUG
Second box - Semi blue circle

*** Firefox Nightly 106 & Chrome Canary 107 ***

Both boxes - Semi blue circle

_____________

Just wanted to share updated testing results. Thanks!