1760954 - nested SVG <use> with transform renders differently in Gecko vs Blink/WebKit

Status: RESOLVED INVALID

(Core :: SVG, defect)

Description

[Karl Dubost💡 :karlcow]

Attachment: test-svg-nested-use.html

I tried to find an equivalent bug but could not find.
This seems unrelated Bug 1343544 maybe.

Comment 1

[Karl Dubost💡 :karlcow]

Attachment: rendering on webkit, gecko, blink

Blink: top left
Gecko: top right
WebKit: bottom

Comment 2

[Karl Dubost💡 :karlcow]

There is probably a simpler test case to create. This is trying to reproduce what is on the site with less details.

Comment 3

[Robert Longson [:longsonr]]

I think this is because we've implemented SVG 2 use elements and webkit hasn't quite yet.

We do this https://www.w3.org/TR/SVG2/struct.html#UseStyleInheritance

However, if a CSS rule uses a complex selector to match an element based on its ancestors or siblings, and those ancestors or siblings are not cloned as part of the shadow tree, then that rule would no longer match the element instance.

The testcase does seem to have some selectors that do that and that we would therefore ignore.

Comment 4

[Daniel Holbert [:dholbert]]

Attachment: testcase 2 (reduced)

Comment 5

[Daniel Holbert [:dholbert]]

Robert's comment 3 seems like the right diagnosis. See my just-attached further-reduce testcase, where Blink and WebKit applies the same "orange" rule to the source element as well as its clone in the use subtree, even though that rule is targeted based on an ancestor-selector for an ancestor that's outside of the use-cloned subtree.

Our behavior here (rendering the reduced testcase's second rect as lime) is correct, per the spec text that Robert quoted.