Anshorei
/
squib
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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
dev
Andy Meneely 2017-01-04 14:19:26 -05:00
parent cdc016c8be
commit 5152651813
3 changed files with 60 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
spec/sanity/sanity.html.erb
View File

@ -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 %>

35
spec/sanity/sanity_test.rb
View File

@ -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

12
spec/sanity/tests.yml
View File

@ -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