<!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>
		.cell{
		  display: inline-block;
		  width: 30%
		}
		.cell img{
			width: 100%;
		}
		.diff{
		  position: relative;
		  top: 0;
		  left: 0;
		}
		.diff_expected{
		  position: relative;
		  top: 0;
		  left: 0;
		}

		.diff_actual{
		  position: absolute;
		  top: 0;
		  left: 0;
		  mix-blend-mode: difference;
		}
		hr{
			margin-bottom: 50px;
		}

	</style>
</head>
<body>

<h1>Images</h1>

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

	<div class="row">
		<div class="cell">
			<b><%=expected %></b><br>
			<img class="expected" src="file:///<%= expected %>"/>
		</div>
		<div class="cell">
			<b><%=actual %></b><br>
			<img class="actual" src="file:///<%= actual %>"/>
		</div>
		<div class="cell diff">
			<img class="diff_expected" src="file:///<%= expected %>"/>
			<img class="diff_actual" src="file:///<%= actual %>"/>
		</div>
		<hr>
	</div>

<% end %>

</body>
</html>
