Added onScreenWidthChange functionality

README.md

@@ -169,6 +169,9 @@ available:
 * **ignore** `String`<br>
   can be used to ignore color differences or differences caused by antialising artifacts in the screenshot comparison
 
+* **onScreenWidthChange** `function`<br>
+  can be used to make changes to the page after the screen width has been changed. The webdriverio instance is passed to the function.
+
 The following paragraphs will give you a more detailed insight how to use these options properly.
 
 ### Let your test fail when screenshots differ
@@ -187,7 +190,10 @@ describe('my website should always look the same',function() {
             .url('http://www.example.org')
             .webdrivercss('header', {
                 name: 'header',
-                elem: '#header'
+                elem: '#header',
+                onScreenWidthChange: function(browser) {
+
+                }
             }, function(err,res) {
                 assert.ifError(err);
 

lib/setScreenWidth.js

@@ -73,9 +73,16 @@ module.exports = function(done) {
                 that.screenshot     = that.screenshot.replace(/\.png/, '.' + that.newScreenSize.width + 'px.png');
                 that.filename       = that.baselinePath;
 
-                that.instance.setViewportSize({width: that.newScreenSize.width, height: that.newScreenSize.height})
-                             .pause(100)
-                             .call(cb);
+                that.instance
+                    .setViewportSize({width: that.newScreenSize.width, height: that.newScreenSize.height})
+                    .pause(100)
+                    .call(function() {
+                        if (that.currentArgs.onScreenWidthChange) {
+                            that.currentArgs.onScreenWidthChange(that.instance);
+                        }
+
+                        cb();
+                    });
 
             });
         }

lib/workflow.js

@@ -5,6 +5,7 @@
  */
 
 var async = require('async');
+var JSONfn = require('json-fn');
 
 module.exports = function(pagename, args) {
 
@@ -36,7 +37,7 @@ module.exports = function(pagename, args) {
         throw new Error('You need to specify a name for your visual regression component');
     }
 
-    var queuedShots = JSON.parse(JSON.stringify(args)),
+    var queuedShots = JSONfn.parse(JSONfn.stringify(args)),
         currentArgs = queuedShots[0];
 
     var context = {

package.json

@@ -17,13 +17,14 @@
   "dependencies": {
     "async": "^0.9.0",
     "deepmerge": "^0.2.7",
+    "fs-extra": "^0.18.2",
     "glob": "^5.0.5",
     "gm": "^1.17.0",
+    "json-fn": "^0.60.0",
     "node-resemble-js": "0.0.4",
     "request": "^2.55.0",
     "rimraf": "^2.3.2",
     "tar": "^2.1.0",
-    "fs-extra": "^0.18.2",
     "tar.gz": "^1.0.1"
   },
   "devDependencies": {