[svgwg] calc() result with valueInSpecifiedUnits in attributes such as width and height (#979)

karlcow has just created a new issue for https://github.com/w3c/svgwg:

== calc() result with valueInSpecifiedUnits in attributes such as width and height ==
1. Open https://codepen.io/webcompat/full/LEEqbWm in Safari, Firefox and Chrome. 

Result:

* Both Safari and Firefox remove the gold rect on `calc(80)` and `calc(80 - 30)`
* Both Safari and Firefox show the gold rect on `calc(80px)` and `calc(80px - 30px)`
* Chrome always shows the results of the computation.

<img width="1728" alt="Image" src="https://github.com/user-attachments/assets/5cf84264-ec8f-4ca2-b012-ed4ad442a61e" />


Interestingly Safari and Firefox reports errors for all calc values. Chrome reports no errors.

Safari
```
[Error] Error: Invalid value for <rect> attribute width="calc(80)" (LEEqbWm, line 63)
[Error] Error: Invalid value for <rect> attribute width="calc(80 - 30)" (LEEqbWm, line 71)
[Error] Error: Invalid value for <rect> attribute width="calc(80px)" (LEEqbWm, line 79)
[Error] Error: Invalid value for <rect> attribute width="calc(80px - 30px)" (LEEqbWm, line 87)
````

Firefox
```
Unexpected value calc(80) parsing width attribute. [LEEqbWm](https://cdpn.io/webcompat/fullpage/LEEqbWm?anon=true&view=fullpage)
Unexpected value calc(80 - 30) parsing width attribute. [LEEqbWm](https://cdpn.io/webcompat/fullpage/LEEqbWm?anon=true&view=fullpage)
Unexpected value calc(80px) parsing width attribute. [LEEqbWm](https://cdpn.io/webcompat/fullpage/LEEqbWm?anon=true&view=fullpage)
Unexpected value calc(80px - 30px) parsing width attribute. [LEEqbWm](https://cdpn.io/webcompat/fullpage/LEEqbWm?anon=true&view=fullpage)
```
​
https://svgwg.org/svg2-draft/types.html#__svg__SVGLength__valueInSpecifiedUnits

The valueInSpecifiedUnits IDL attribute represents the numeric factor of the [SVGLength](https://svgwg.org/svg2-draft/types.html#InterfaceSVGLength)'s [value](https://svgwg.org/svg2-draft/types.html#LengthValue). On getting [valueInSpecifiedUnits](https://svgwg.org/svg2-draft/types.html#__svg__SVGLength__valueInSpecifiedUnits), the following steps are run:

> 1. Let value be the [SVGLength](https://svgwg.org/svg2-draft/types.html#InterfaceSVGLength)'s [value](https://svgwg.org/svg2-draft/types.html#LengthValue).
> 2. If value is a [<number>](https://www.w3.org/TR/css3-values/#numbers), return that number.
> 3. Otherwise, if value is a [<percentage>](https://www.w3.org/TR/css3-values/#percentages) or any scalar [<length>](https://www.w3.org/TR/css3-values/#lengths) value, return the numeric factor before its unit.
> 4. Otherwise, return 0.
> 
> **Note:** Thus [valueInSpecifiedUnits](https://svgwg.org/svg2-draft/types.html#__svg__SVGLength__valueInSpecifiedUnits) would return 12 for both '12%' and 12em, but 0 would be returned for non-scalar values like calc(12px + 5%).




---

The code for posterity:

```
<style>
section {
display:flex;
gap: 20px;}
.test {
  width: 100px;
  height: 100px;
  border: 3px solid pink;
}

p {height: 4em}
</style>
<section>
  <div>
    <p>control box <code>width="80"</code></p>
    <div class="test">
      <svg viewbox="0 0 100 100" width="100" height="100">
        <rect fill="gold" width="80" height="80"></rect>
      </svg>
    </div>
  </div>
  <div>
    <p>calc issue <code>width="calc(80)"</code></p>
    <div class="test">
      <svg viewbox="0 0 100 100" width="100" height="100">
        <rect fill="gold" width="calc(80)" height="80"></rect>
      </svg>
    </div>
  </div>
  <div>
    <p>calc issue <code>width="calc(80 - 30)"</code></p>
    <div class="test">
      <svg viewbox="0 0 100 100" width="100" height="100">
        <rect fill="gold" width="calc(80 - 30)" height="80"></rect>
      </svg>
    </div>
  </div>
  <div>
    <p>calc issue <code>width="calc(80px)"</code></p>
    <div class="test">
      <svg viewbox="0 0 100 100" width="100" height="100">
        <rect fill="gold" width="calc(80px)" height="80"></rect>
      </svg>
    </div>
  </div>
  <div>
    <p>calc issue <code>width="calc(80px - 30px)"</code></p>
    <div class="test">
      <svg viewbox="0 0 100 100" width="100" height="100">
        <rect fill="gold" width="calc(80px - 30px)" height="80"></rect>
      </svg>
    </div>
  </div>
</section>
```


Please view or discuss this issue at https://github.com/w3c/svgwg/issues/979 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 14 May 2025 07:59:40 UTC