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"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Diff with CSS Example</title> <title>Diff with CSS Example</title>
<style> <style>
body{ .cell{
/*background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAHElEQVQYlWO4ePFiAzGY4eLFiw0MxIBRhVRRCADsljgKUbBKPgAAAABJRU5ErkJggg==) repeat;*/ display: inline-block;
width: 30%
} }
img{ .cell img{
height: 6in; width: 100%;
} }
.diff { .diff{
width: 4in; position: relative;
height: 6in; top: 0;
background-repeat: none, none; left: 0;
background-size: contain, contain; }
background-blend-mode: difference; .diff_expected{
display: inline-block; position: relative;
top: 0;
left: 0;
}
.diff_actual{
position: absolute;
top: 0;
left: 0;
mix-blend-mode: difference;
}
hr{
margin-bottom: 50px;
} }
</style> </style>
</head> </head>
<body> <body>
<h1>Images</h1>
<% images.each_with_index do |(expected, actual), i| %> <% images.each_with_index do |(expected, actual), i| %>
<img src="<%= expected %>"/> <div class="row">
<img src="<%= actual %>"/> <div class="cell">
<style> <b><%=expected %></b><br>
.mine<%= i %> { <img class="expected" src="file:///<%= expected %>"/>
background-image: url(<%= expected %>), url(<%= actual %>);" </div>
} <div class="cell">
</style> <b><%=actual %></b><br>
<div class="diff mine<%= i %>"/> <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 %> <% 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 # An pixel-by-pixel comparison of sample images for visual regression testing
class SanityTest class SanityTest
@@ERB = "#{File.expand_path(File.dirname(__FILE__))}/sanity.html.erb" def sanity_html_erb
@@HTML = "#{File.expand_path(File.dirname(__FILE__))}/sanity.html" "#{File.expand_path(File.dirname(__FILE__))}/sanity.html.erb"
@@COMPARES = "#{File.expand_path(File.dirname(__FILE__))}/tests.yml" end
@@SAMPLES = "file:///#{File.expand_path("samples/")}"
def sanity_html
"#{File.expand_path(File.dirname(__FILE__))}/sanity.html"
end
def samples_dir
File.expand_path "samples/"
end
def images def images
require 'pp' Dir["#{samples_dir}/**/*_expected.png"].map do |expected|
comps = YAML.load_file(@@COMPARES) actual = [ File.dirname(expected),
pp comps "/_output/",
comps.each do | test, data | File.basename(expected).gsub('_expected', '')].join
pp data [expected, actual]
end end
[
["#{@@SAMPLES}/images/_images_00_expected.png", "#{@@SAMPLES}/images/_images_00.png"]
]
end end
def run def run
puts @@SAMPLES
puts 'Building sanity test...' puts 'Building sanity test...'
process_erb(File.read(@@ERB)) process_erb(File.read(sanity_html_erb))
Launchy.open('file:///' + @@HTML) Launchy.open('file:///' + sanity_html)
puts 'Done.' puts 'Done.'
end end
@ -34,7 +37,7 @@ class SanityTest
def process_erb(sanity_template) def process_erb(sanity_template)
renderer = ERB.new(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)) html.write(renderer.result(binding))
end end
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