rake sanity: img diff'ing with CSS blending

Got CSS blending properly working for diff'ing images so we can do a quick sanity test on all the samples before releasing. Works toward #118
9 years ago · 5152651813
3 changed files with 60 additions and 47 deletions
--- a/spec/sanity/sanity.html.erb
+++ b/spec/sanity/sanity.html.erb
@ -6,35 +6,57 @@
 	<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;*/
+		.cell{
+		  display: inline-block;
+		  width: 30%
 		}
-		img{
-			height: 6in;
+		.cell img{
+			width: 100%;
 		}
-		.diff {
-			width: 4in;
-			height: 6in;
-			background-repeat: none, none;
-			background-size: contain, contain;
-			background-blend-mode: difference;
-			display: inline-block;
+		.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| %>

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

--- a/spec/sanity/sanity_test.rb
+++ b/spec/sanity/sanity_test.rb
@ -5,28 +5,31 @@ require 'yaml'
 # An pixel-by-pixel comparison of sample images for visual regression testing
 class SanityTest

-  @@ERB      = "#{File.expand_path(File.dirname(__FILE__))}/sanity.html.erb"
-  @@HTML     = "#{File.expand_path(File.dirname(__FILE__))}/sanity.html"
-  @@COMPARES = "#{File.expand_path(File.dirname(__FILE__))}/tests.yml"
-  @@SAMPLES  = "file:///#{File.expand_path("samples/")}"
+  def sanity_html_erb
+    "#{File.expand_path(File.dirname(__FILE__))}/sanity.html.erb"
+  end
+
+   def sanity_html
+     "#{File.expand_path(File.dirname(__FILE__))}/sanity.html"
+   end
+
+  def samples_dir
+    File.expand_path "samples/"
+  end

  def images
-    require 'pp'
-    comps = YAML.load_file(@@COMPARES)
-    pp comps
-    comps.each do | test, data |
-      pp data
+    Dir["#{samples_dir}/**/*_expected.png"].map do |expected|
+      actual = [ File.dirname(expected),
+                 "/_output/",
+                File.basename(expected).gsub('_expected', '')].join
+      [expected, actual]
    end
-    [
-      ["#{@@SAMPLES}/images/_images_00_expected.png", "#{@@SAMPLES}/images/_images_00.png"]
-    ]
  end

  def run
-    puts @@SAMPLES
    puts 'Building sanity test...'
-    process_erb(File.read(@@ERB))
-    Launchy.open('file:///' + @@HTML)
+    process_erb(File.read(sanity_html_erb))
+    Launchy.open('file:///' + sanity_html)
    puts 'Done.'
  end

@ -34,7 +37,7 @@ class SanityTest

  def process_erb(sanity_template)
    renderer = ERB.new(sanity_template)
-    File.open(@@HTML, 'w+') do |html|
+    File.open(sanity_html, 'w+') do |html|
      html.write(renderer.result(binding))
    end
  end
--- a/spec/sanity/tests.yml
+++ b/spec/sanity/tests.yml
@ -1,12 +0,0 @@
-images:
-  dir: images
-  expected: _images_00_expected.png
-  actual: _images_00.png
-text:
-  dir: text
-  expected: _text_00_expected.png
-  actual: _text_00.png
-autoscale_font:
-  dir: autoscale_font
-  expected: card_00_expected.png
-  actual: card_00.png