- From: Karl Dubost via GitHub <noreply@w3.org>
- Date: Tue, 12 Aug 2025 03:50:12 +0000
- To: public-svg-issues@w3.org
Related to this issue, @nullhook and I were musing about the validity of `calc()` inside presentational attributes. I also read #658 So I created a test for this testing it on the `r` attribute of the `circle` element. https://codepen.io/webcompat/pen/dPYVjRy `calc()` is supported as a value for `r` on the `circle` element. <img width="720" height="587" alt="Image" src="https://github.com/user-attachments/assets/9dbae836-cd90-4811-96a4-ad537ffc8645" /> But there is a twist. Both WebKit and Gecko reports that setting `calc()` on the `r` attribute is unexpected while applying the value for the 3 engines: Gecko, WebKit, and Blink. * Gecko: `Unexpected value calc(50px + 10px) parsing r attribute.` * WebKit: `Error: Invalid value for <circle> attribute r="calc(50px + 10px)"` * Blink: no error message. SVG2 says about [presentation attributes](https://svgwg.org/svg2-draft/styling.html#PresentationAttributes) > Since presentation attributes are parsed as CSS values, not declarations, an [!important declaration](https://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#important-rules) within a presentation attribute will cause it to have an [invalid value](https://svgwg.org/svg2-draft/types.html#TermInvalidValue). See [Attribute syntax](https://svgwg.org/svg2-draft/types.html#presentation-attribute-css-value) for details on how presentation attributes are parsed. The parsing rules are described in [4.2. Attribute syntax](https://svgwg.org/svg2-draft/types.html#presentation-attribute-css-value). > When a [presentation attribute](https://svgwg.org/svg2-draft/styling.html#TermPresentationAttribute) defined using the CSS Value Definition Syntax is parsed, this is done as follows: > > 1. Let value be the value of the attribute. > 2. Let grammar be the grammar given in the attribute definition table's Value column. > 3. Replace all instances of [`<length>`](https://www.w3.org/TR/css3-values/#lengths) in grammar with [[`<length>`](https://www.w3.org/TR/css3-values/#lengths) | [`<number>`](https://www.w3.org/TR/css3-values/#numbers)]. > 4. Replace all instances of [`<length-percentage>`](https://www.w3.org/TR/css-values/#typedef-length-percentage) in grammar with [[`<length-percentage>`](https://www.w3.org/TR/css-values/#typedef-length-percentage) | [`<number>`](https://www.w3.org/TR/css3-values/#numbers)]. > 5. Replace all instances of [`<angle>`](https://www.w3.org/TR/css-values/#angles) in grammar with [[`<angle>`](https://www.w3.org/TR/css-values/#angles) | [`<number>`](https://www.w3.org/TR/css3-values/#numbers)]. > 6. Return the result of [parsing value with grammar](http://dev.w3.org/csswg/css-syntax/#parse-grammar). Step 2 says: > Let grammar be the grammar given in the attribute definition table's Value column. [r value](https://svgwg.org/svg2-draft/geometry.html#RProperty) is defined as [`<length-percentage>`](https://www.w3.org/TR/css-values/#typedef-length-percentage) Should the spec be edited to add `| <calc-size()>` in the table's Value column where it matters (example: `r`, `cx`, `cy`, etc.)? (PS: I can open a separate issue just for this and create a PR). -- GitHub Notification of comment by karlcow Please view or discuss this issue at https://github.com/w3c/svgwg/issues/681#issuecomment-3177600124 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Tuesday, 12 August 2025 03:50:13 UTC