Bug 307634 – setting invalid value on viewBox baseval should be ignored.

• Status: RESOLVED
• Resolution: FIXED
• Component: SVG

[Karl Dubost]

https://wpt.fyi/results/svg/coordinate-systems/viewBox-baseVal-change-invalid.html
http://wpt.live/svg/coordinate-systems/viewBox-baseVal-change-invalid.html


<svg id="svg" style="height: 200px; width: 200px;" viewBox="0 0 100 100">
  <rect width="100" height="100" fill="green"></rect>
</svg>

<script>
onload = () => {
  // After this, viewBox should be ignored, and the green rect should be 100x100.
  svg.viewBox.baseVal.width = -100;
};
</script>


The issue: 
Currently WebKit accepts the invalid value set on viewBox and we end up with 

<svg id="svg" style="height: 200px; width: 200px;" viewBox="0 0 -100 100">
  <rect width="100" height="100" fill="green"></rect>
</svg>

And the green square is not visible.

The bug to solve is that doing this:
svg.viewBox.baseVal.width = -100;
should not be possible. It should just ignore it. 

To note:
1. Both Firefox and Chrome ignores the value
2. None of the browsers display an error message. 


viewBox is defined in https://w3c.github.io/svgwg/svg2-draft/coords.html#ViewBoxAttribute

viewBox	[<min-x>,? <min-y>,? <width>,? <height>]	initial: As if not specified.	animatable: yes

<min-x>, <min-y>, <width>, <height> = <number>

The spec says:
> A negative value for <width> or <height> is an error and invalidates the ‘viewBox’ attribute. A value of zero disables rendering of the element.


baseval is defined in 
https://w3c.github.io/svgwg/svg2-draft/coords.html#__svg__SVGAnimatedTransformList__baseVal

> The baseVal and animVal IDL attributes represent the value of the reflected presentation attribute. On getting baseVal or animVal, an SVGTransformList object is returned that reflects the given presentation attribute.


https://w3c.github.io/svgwg/svg2-draft/single-page.html#types-InvalidValues
> If a script sets a reflected DOM attribute to an invalid value for the content attribute (e.g., a negative number for an attribute that requires a non-negative number), unless this specification indicates otherwise, no exception shall be raised on setting, but the given document fragment shall become technically in error as described in Error processing.

It doesn't say ignore here. This might need to be clarified with the SVG WG.


But it does here:
https://w3c.github.io/svgwg/svg2-draft/single-page.html#types-TermInvalidValue

invalid value
An invalid value specified for a property, either in a style sheet or a presentation attribute, is one that is either not allowed according to the grammar defining the property's values, or is allowed by the grammar but subsequently disallowed in prose. A CSS declaration with an invalid value is ignored.


Ah! 
https://w3c.github.io/svgwg/svg2-draft/single-page.html#types-InterfaceSVGAnimatedNumber

On setting baseVal, the following steps are run:

1. Let value be the value being assigned to baseVal.
2. Let new be a list of numbers.
3. If the reflected attribute is defined to take an number followed by an optional second number, then:
3.1 Let current be the value of the reflected attribute (using the attribute's initial value if it is not present or invalid).
3.2 Let first be the first number in current.
3.3 Let second be the second number in current if it has been explicitly specified, and if not, the implicit value as described in the definition of the attribute.
3.4 If this SVGAnimatedNumber object reflects the first number, then set first to value. Otherwise, set second to value.
3.5 Append first to new.
3.6 Append second to new.
4. Otherwise, the reflected attribute is defined to take a single number value. Append value to new.
5. Set the content attribute to a string consisting of each number in new serialized to an implementation specific string that, if parsed as an <number> using CSS syntax, would return the value closest to the number (given the implementation's supported Precisionreal number precision), joined and separated by a single U+0020 SPACE character.


And
https://drafts.csswg.org/css-syntax/#css-ignored
After each construct (declaration, style rule, at-rule) is parsed, the user agent checks it against its expected grammar. If it does not match the grammar, it’s invalid, and gets ignored by the UA, which treats it as if it wasn’t there at all.



OK invalid -> ignore.

[Radar WebKit Bug Importer]

<rdar://problem/170214971>

[Karl Dubost]

Pull request: https://github.com/WebKit/WebKit/pull/58494

[EWS]

Committed 307463@main (bef989fc4f32): <https://commits.webkit.org/307463@main>

Reviewed commits have been landed. Closing PR #58494 and removing active labels.