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

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 9 years ago
parent
cdc016c8be
commit
5152651813
3 changed files with 60 additions and 47 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 60
      spec/sanity/sanity.html.erb
  2. 35
      spec/sanity/sanity_test.rb
  3. 12
      spec/sanity/tests.yml

60
spec/sanity/sanity.html.erb
Unescape 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
Unescape 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
Unescape 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
Write Preview
Loading…
Cancel
Save