How to describe or further isolate this apparent Webkit SVG bug? - webkit

Question

I pared down some odd behavior I was experiencing in SVG and I came up with this test case:
<circle r="10" />
<rect width="18" height="18" />
<polygon points="10,20 30,30 40,15 25,10" />
<script>
var svg = document.querySelector('svg'),
els = document.querySelectorAll('svg *');
for (var i=els.length;i--;){
var el = els[i];
el._dragXForm = el.transform.baseVal.appendItem(svg.createSVGTransform());
setInterval((function(el){
return function(){
var tx = el._dragXForm.matrix;
tx.e += Math.random()*2-1;
tx.f += Math.random()*2-1;
}
})(el),50);
}
</script>
In Safariv5 and Chromev18 on OS X the circle and polygon both jitter, but the rect does not. It does nothing. The SVGMatrix is getting a new value, but the appearance on screen is not updated. (In Firefox, it works as expected.)
If I change the script to remove _dragXForm like so:
for (var i=draggables.length;i--;){
var el = draggables[i];
el.transform.baseVal.appendItem(svg.createSVGTransform());
setInterval((function(el){
return function(){
var tx = el.transform.baseVal.getItem(0).matrix;
tx.e += Math.random()*2-1;
tx.f += Math.random()*2-1;
}
})(el),50);
}
…then the <rect> moves along with the others.
Besides seeming like an insane bug (how can this only affect a <rect>?!) I feel that this has not yet isolated the source of the bug.
What's the simplest possible code that can reproduce this odd behavior? (And if there's already a bug filed for this, I'd love to know about it.)

Answer 1

This code appears to be getting closer to the heart of the matter:
var svg = document.querySelector('svg'),
els = document.querySelectorAll('svg *');
for (var i=els.length;i--;){
var el = els[i],
tx = el.transform.baseVal.appendItem(svg.createSVGTransform());
console.log( el.tagName, tx===el.transform.baseVal.getItem(0) );
setTimeout((function(el,tx){
return function(){
console.log( el.tagName, tx===el.transform.baseVal.getItem(0) );
}
})(el,tx),1);
}
Output:
polygon true // The return value of appendItem is the same as the first item
rect true // The return value of appendItem is the same as the first item
circle true // The return value of appendItem is the same as the first item
polygon true // The returned value is STILL the same as the first item
rect false // The returned value is NO LONGER the same as the first item
circle true // The returned value is STILL the same as the first item