renderchecker.js

function addComparison(id,rendered,expected,w,h) {
	var e = document.getElementById(id);

	var div = document.createElement("DIV");
	div.style.margin = "0 auto";
	div.style.fontSize = "0";
	e.appendChild(div);

	var div0 = document.createElement("DIV");
	div0.style.fontSize = "0";
	div0.style.position = "relative";
	div.appendChild(div0);

	var img = document.createElement("IMG");
	img.src = rendered;
	img.width = w;
	img.height = h;
	// img.style = "height: auto; width:100%";
	div0.appendChild(img);

	var div1 = document.createElement("DIV");
	div1.setAttribute("style", "pointer-events: none");
	div1.style.backgroundImage = "url('" + expected + "')";
	div1.style.backgroundSize = "cover";
	div1.style.position = "absolute";
	div1.style.left = 0;
	div1.style.top = 0;
	div1.style.height = "100%";
	div1.style.width = "50%";
	div1.style.fontSize = 0;
	div1.style.borderRight = "1px solid black";

	div0.appendChild(div1);

	var trackLocation = function(e) {
		var rect = img.getBoundingClientRect();
		var w = e.pageX - rect.left;
		if ( w <= img.offsetWidth ) {
		  div1.style.width = w;
		}
	}

	img.addEventListener( "mousemove", trackLocation, false );
	div0.addEventListener( "mousemove", trackLocation, false );
}