<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=device-width">
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>Diff with CSS Example</title>
	<style>
		body{
			/*background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAHElEQVQYlWO4ePFiAzGY4eLFiw0MxIBRhVRRCADsljgKUbBKPgAAAABJRU5ErkJggg==) repeat;*/
		}
		img{
			height: 6in;
		}
		.diff {
			width: 4in;
			height: 6in;
			background-repeat: none, none;
			background-size: contain, contain;
			background-blend-mode: difference;
			display: inline-block;
		}

	</style>
</head>
<body>

<% images.each_with_index do |(expected, actual), i| %>

	<img src="<%= expected %>"/>
	<img src="<%= actual %>"/>
	<style>
		.mine<%= i %> {
			background-image: url(<%= expected %>), url(<%= actual %>);"
		}
	</style>
	<div class="diff mine<%= i %>"/>

<% end %>

</body>
</html>
