Get a quadrilateral representing the rendered DOM node

getRenderQuad.js

/**
 * elem.getBoundingClientRect() is awesome, BUT it doesn't actually explain
 * where the edges are if an element is rotated, skewed or otherwise oddly 
 * transformed. This is a not pretty attempt to get the actual rendering quad
 * (sadly, it has to modify the DOM to do its work).
 * NOTE: designed for WebKit & Gecko. 
 * Everything but the getComputedStyle() call *should* work in IE, though.
 */
var getRenderQuad = function(elem) {
	var quad = {},
	    measure,
	    pt = document.createElement("div"),
	    oldPos = document.defaultView.getComputedStyle(elem).position;
	pt.style.width = pt.style.height = pt.style.left = pt.style.top = "0";
	pt.style.position = "absolute";
	pt.style.visibility = "hidden";
	
	// If statically positioned, make relative
	if (oldPos == "static") {
		elem.style.position = "relative";
	}
	
	elem.appendChild(pt);
	
	measure = pt.getBoundingClientRect();
	quad.topLeft = {x:measure.left, y:measure.top};
	
	pt.style.left = pt.style.bottom = "";
	pt.style.top = pt.style.right = "0";
	measure = pt.getBoundingClientRect();
	quad.topRight = {x:measure.right, y:measure.top};
	
	pt.style.left = pt.style.top = "";
	pt.style.bottom = pt.style.right = "0";
	measure = pt.getBoundingClientRect();
	quad.bottomRight = {x:measure.right, y:measure.bottom};
	
	pt.style.right = pt.style.top = "";
	pt.style.left = pt.style.bottom = "0";
	measure = pt.getBoundingClientRect();
	quad.bottomLeft = {x:measure.left, y:measure.bottom};
	
	pt.parentNode.removeChild(pt);
	elem.style.position = oldPos;
	
	return quad;
};