963870 - querySelector is case sensitive for elements in the SVG namespace

Status: RESOLVED INVALID

(Core :: DOM: CSS Object Model, defect)

Description

[Mitch Foley]

User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/32.0.1700.77 Safari/537.36

Steps to reproduce:

Create a document with an svg element.

Compare the results of document.querySelectorAll('svg') and document.querySelectorAll('SVG')

Create a css rule that sets a style for svg, and a css rule that sets a style for SVG.

Demo at http://jsfiddle.net/yzQs5/


Actual results:

document.querySelectorAll('svg') returned 1 element, document.querySelectorAll('SVG') returned 0 elements.
The style set for the svg rule is applied.
The style set for the SVG rule is not applied.


Expected results:

Both queries should have returned the same.
Both css rules should have been applied.

Comment 1

[Boris Zbarsky [:bzbarsky]]

This is how selector matching works for SVG elements, yes, in both stylesheets and querySelector.  It has to, since SVG element names are case-sensitive.  The spec is very clear on this behavior, so I'm a bit curious where the expected results come from....

Comment 2

[Boris Zbarsky [:bzbarsky]]

And note that WebKit/Blink has a known bug here.  They will match both "SVG" and "svg" against <svg>, but they have no way to match <linearGradient> at all as a result.  See https://bugs.webkit.org/show_bug.cgi?id=83438