Bug 182172 - SVG2: WebKit incorrectly disregards "width" and "height" attributes on SVG <symbol> element
Summary: SVG2: WebKit incorrectly disregards "width" and "height" attributes on SVG <s...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: SVG (show other bugs)
Version: Safari 11
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
Keywords: FromImplementor
Depends on:
Reported: 2018-01-26 09:41 PST by Daniel Holbert
Modified: 2018-01-29 10:48 PST (History)
4 users (show)

See Also:

testcase 1 (same as jsfiddle) (880 bytes, text/html)
2018-01-26 09:50 PST, Daniel Holbert
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Daniel Holbert 2018-01-26 09:41:51 PST
What steps will reproduce the problem?
(1) Visit https://jsfiddle.net/mca17zyk/

What is the expected result?
 Small purple rectangle and square. (Each 20px tall.)

What happens instead?
 The square is huge.

Please use labels and text to provide additional information.
Per SVG2, the square (really, the <use>-generated <svg> element that gets filled with a 100%-sized purple rect) should take its width/height attributes from the <symbol> element that it cloned.  That <symbol> element has width=20 height=20, so its <svg> clone should as well.

The rectangle (the first purple thing in the testcase) works correctly because it explicitly overrides the width and height by setting those attributes on the use element itself. But if they're unset on <use>, then we should use the ones from the <symbol>.

WebKit's behavior here would be correct per SVG 1.1:

...but it's incorrect per SVG 2:

The specific commit in the SVG 2 spec repo is here:
That commit added x,y,width,height to <symbol>, and added prose saying they should have the same effect on clones-of-<symbol> as they have on an <svg> element.

Firefox gives "Expected Results" here.
Comment 1 Daniel Holbert 2018-01-26 09:50:57 PST
Created attachment 332378 [details]
testcase 1 (same as jsfiddle)