Playing around with html diffing on sanity test

10 years ago · 35d1bd64c0
1 changed files with 39 additions and 0 deletions
--- a/spec/samples/diff-with-css.example.html
+++ b/spec/samples/diff-with-css.example.html
@ -0,0 +1,39 @@
+<!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: 4in;
+		}
+		.diff {
+			width: 3in;
+			height: 4in;
+			background-repeat: none, none;
+			background-size: contain, contain;
+			background-blend-mode: difference;
+			display: inline-table;
+		}
+
+	</style>
+</head>
+<body>
+
+	<img src="expected/autoscale_00.png"/>
+	<img src="expected/autoscale_01.png"/>
+	<style>
+		.mine{
+			background-image: url(expected/autoscale_00.png), url(expected/autoscale_01.png);"
+		}
+	</style>
+	<div class="diff mine"/>
+
+
+</body>
+</html>