Strange getComputedStyle behavior

Question

I was experimenting with this HTML comparison recently, which is somewhat working:

/**
 * Compare 2 dom nodes
 * Given A node, identifier, B node, identifier, depth.
 */
function compare(A,Aid,B,Bid,godeep) {
    if (A.nodeName != B.nodeName) {
        addlog(Aid+' is <'+A.nodeName+'>, '+Bid+' is <'+B.nodeName+'>.');
    }
    for (let a=0; a<A.attributes.length; a++) {
        let key = A.attributes[a].name,
            other = B.attributes[key];
        if (other !== undefined) {//both have attr.
            if (A.attributes[a].value != other.value) {
                addlog(Aid+' has attr '+key+'='+A.attributes[key].value);
                addlog(Bid+' has attr '+key+'='+B.attributes[key].value);
            }
        } else {
            addlog(Aid+' has attr '+key+'='+A.attributes[key].value+', not in other el.')
        }
    }
    //Also check for the other's unique attr:
    for (let b=0; b<B.attributes.length; b++) {
        let key = B.attributes[b].name,
            other = A.attributes[key];
        if (other === undefined) {
            addlog(Bid+' has attr '+key+'='+A.attributes[key].value+', not in other el.')
        }
    }
    //TODO: Why does this not work correctly for styles? height and other attributes are not the same
    // when comparing the same element to itself.
    var cssA = A.ownerDocument.defaultView.getComputedStyle(A,null),
        cssB = B.ownerDocument.defaultView.getComputedStyle(B,null);
    console.log(cssA);
    console.log(cssB);
    for (let i=0; i<cssA.length; i++) {
        if (cssA.getPropertyValue(cssA[i]) != cssB.getPropertyValue(cssB[i])) {
            addlog(Aid+' css '+cssA[i]+'='+cssA.getPropertyValue(cssA[i]));
            addlog(Bid+' css '+cssB[i]+'='+cssB.getPropertyValue(cssB[i]));
        }
    }
    if (A.children.length != B.children.length) {
        addlog(Aid+' has '+A.children.length+' children, '+Bid+' has '+B.children.length);
    }
    if (godeep > 0) {
        for (let i=0; i<A.children.length; i++) {
            if (i< B.children.length) { //compare it
                compare(A.children[i], Aid+'.children['+i+']',
                        B.children[i], Bid+'.children['+i+']')
            }
        }
    }
}

(Full source here) The odd thing is, when comparing the same node to itself, it says its own properties are different:

A css border-bottom-color=rgb(0, 0, 0)
B css border-bottom-color=rgb(51, 51, 51)
A css border-left-color=rgb(0, 0, 0)
B css border-left-color=rgb(51, 51, 51)
A css border-right-color=rgb(0, 0, 0)
B css border-right-color=rgb(51, 51, 51)
A css border-top-color=rgb(0, 0, 0)
B css border-top-color=rgb(51, 51, 51)
A css color=rgb(0, 0, 0)
B css color=rgb(51, 51, 51)
A css font-family=serif
B css font-family=Helvetica,arial,freesans,clean,sans-serif
A css font-size=16px
B css font-size=14px
A css font-weight=400
B css font-weight=700
A css height=auto
B css height=19.6px
A css line-height=19px
B css line-height=19.6px
A css list-style-type=disc
B css list-style-type=none
A css margin-bottom=16px
B css margin-bottom=1px
A css margin-top=16px
B css margin-top=1px
A css perspective-origin=50% 50%
B css perspective-origin=429px 9.8px
A css transform-origin=50% 50%
B css transform-origin=429px 9.8px
A css width=auto
B css width=858px
A css -moz-column-gap=16px
B css -moz-column-gap=14px
A css -moz-column-rule-color=rgb(0, 0, 0)
B css -moz-column-rule-color=rgb(51, 51, 51)
A css -moz-text-decoration-color=rgb(0, 0, 0)
B css -moz-text-decoration-color=rgb(51, 51, 51)

What could be causing this conflict? Is there some way to use getComputedStyle without this odd behavior?

Update

Here you can see this works in the browser, but it doesn't work in Chrome-privileged code, as you can see if you try this branch of devtools-tweaks.

Answer 1

Looks like the problem was the input - node.cloneNode(true) apparently detaches the element from its css styling information.