Improvements to the screenshots diff

3 files changed, 22 insertions, 3 deletions

diff --git a/tests/UI/screenshot-diffs/diffgenerator.js b/tests/UI/screenshot-diffs/diffgenerator.js
index 833bb656eb..c2de59f9eb 100644
--- a/tests/UI/screenshot-diffs/diffgenerator.js
+++ b/tests/UI/screenshot-diffs/diffgenerator.js
@@ -20,7 +20,7 @@ resemble.outputSettings({
 
 function compareImages(expected, expectedGithub, processed)
 {
-    resemble(processed).compareTo(expected).onComplete(function(data){
+    var resembleControl = resemble(processed).compareTo(expected).onComplete(function(data){
 
         var info = 'Mismatch percentage: ' + data.misMatchPercentage + '%';
 
@@ -35,6 +35,8 @@ function compareImages(expected, expectedGithub, processed)
     $('.processed').attr('src', encodeURI(processed));
     $('.expected').attr('src', encodeURI(expected));
     $('.expectedGithub').attr('src', 'https://raw.githubusercontent.com/piwik/piwik-ui-tests/master/' + encodeURI(expectedGithub));
+
+    return resembleControl;
 }
 
 function getUrlQueryParam(sParam) {
@@ -54,7 +56,11 @@ $(function () {
     var processed = getUrlQueryParam('processed');
     var expected  = getUrlQueryParam('expected');
     var github    = getUrlQueryParam('github');
-    compareImages(expected, github, processed);
+    var resembleControl = compareImages(expected, github, processed);
+
+    $('#toggleAliasing').click(function () {
+        resembleControl.ignoreAntialiasing();
+    });
 
     $('#original').attr('src', expected);
     $('#modified').attr('src', processed);
diff --git a/tests/UI/screenshot-diffs/singlediff.html b/tests/UI/screenshot-diffs/singlediff.html
index e7c3df07b6..b80c764957 100644
--- a/tests/UI/screenshot-diffs/singlediff.html
+++ b/tests/UI/screenshot-diffs/singlediff.html
@@ -17,6 +17,14 @@
 <br />
 <img class="diff">
 
+<br/><br/>
+
+<div id="controls">
+    <button id="toggleAliasing">Ignore aliasing</button>
+</div>
+
+<br/><br/>
+
 <figure class="cd-image-container">
     <img id="original">
     <span class="cd-image-label" data-type="original">Original</span>
diff --git a/tests/UI/screenshot-diffs/style.css b/tests/UI/screenshot-diffs/style.css
index a8bcd242a8..367b01f0f8 100644
--- a/tests/UI/screenshot-diffs/style.css
+++ b/tests/UI/screenshot-diffs/style.css
@@ -1,7 +1,12 @@
 img {
     max-width: 100%;
     display: block;
-    margin: 0em auto;
+    margin: 0 auto;
+}
+
+#controls {
+    margin: 0 auto;
+    width: 100px;
 }
 
 .cd-image-container {