In Chrome, if I add an attribute to a SVG element by javascript, and it contains a capital letter, then a by attribute CSS rule will not not match it.But the same rule will match attributes on the document regardless of case!In IE9 matches the CSS, rules using the case of the attribute.Is this a bug? I thought the attribute match should be case insensitive?
http://jsfiddle.net/adrianjmartin/NJej8/6/HTML \[code\] <circle cx="100" cy="100" r="25" Foo /> <circle cx="200" cy="100" r="25" foo /> <text x="20" y="20">Chrome: wont select css by attribute, if setAttribute used a capital letter</text> <text x="20" y="50">Document: css match is case insensitive.</text> <text x="20" y="150">JS Added Circles: setAttribute("Foo") won't match, </text> <text x="20" y="180">JS Added Circles: setAttribute("foo") does match! </text> <text x="20" y="350">In IE9, css attribute match is case sensitive </text></svg></body>\[/code\]CSS\[code\]svg{ background
alegoldenrod }circle{ fill:red }circle[Foo]{ fill:yellow }circle[foo]{ fill:green }/* Foo is captilised */\[/code\]JAVASCRIPT:\[code\]var svg = document.querySelector("svg");var c1 = document.createElementNS( svg.namespaceURI ,"circle");c1.setAttribute("cx","100");c1.setAttribute("cy","230");c1.setAttribute("r","25"); c1.setAttribute("Foo");svg.appendChild(c1);var c2 = document.createElementNS( svg.namespaceURI ,"circle"); c2.setAttribute("cx","200");c2.setAttribute("cy","230");c2.setAttribute("r","25");c2.setAttribute("foo");svg.appendChild(c2);\[/code\]
alegoldenrod }circle{ fill:red }circle[Foo]{ fill:yellow }circle[foo]{ fill:green }/* Foo is captilised */\[/code\]JAVASCRIPT:\[code\]var svg = document.querySelector("svg");var c1 = document.createElementNS( svg.namespaceURI ,"circle");c1.setAttribute("cx","100");c1.setAttribute("cy","230");c1.setAttribute("r","25"); c1.setAttribute("Foo");svg.appendChild(c1);var c2 = document.createElementNS( svg.namespaceURI ,"circle"); c2.setAttribute("cx","200");c2.setAttribute("cy","230");c2.setAttribute("r","25");c2.setAttribute("foo");svg.appendChild(c2);\[/code\]