javascript - 属性セレクターによる SVG CSS、大文字と小文字が一致しない原因

Question

Chrome で、JavaScript によって SVG 要素に属性を追加し、それに大文字が含まれている場合、属性による CSS ルールはそれに一致しません。

しかし、大文字と小文字に関係なく、同じルールでドキュメントの属性が一致します。

IE9 では CSS に一致し、属性の大文字と小文字を使用するルールが適用されます。

これはバグですか？属性の一致は大文字と小文字を区別しないはずだと思いましたか?

http://jsfiddle.net/adrianjmartin/NJej8/6/

HTML

    <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>

CSS

svg{ background:palegoldenrod }
circle{ fill:red }
circle[Foo]{ fill:yellow }
circle[foo]{ fill:green }

/* Foo is captilised */

ジャバスクリプト：

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);