You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
64 lines
1.1 KiB
64 lines
1.1 KiB
<!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>
|
|
|