add drawing tests to casper

Gruntfile.js

@@ -10,21 +10,27 @@
  *       If you run this task locally, it may require some env set up first.
  */
 
-var SOURCE_FOLDER = "src";
 
 module.exports = function(grunt) {
   var dateFormat = require('dateformat');
   var now = new Date();
   var version = '-' + dateFormat(now, "yyyy-mm-dd-hh-MM");
 
-  var mapToSrcFolder = function (path) {return [SOURCE_FOLDER, path].join('/');};
+  var mapToSrcFolder = function (path) {
+    return "src/" + path;
+  };
 
   var piskelScripts = require('./src/piskel-script-list.js').scripts.map(mapToSrcFolder);
   var piskelStyles = require('./src/piskel-style-list.js').styles.map(mapToSrcFolder);
 
-  var getGhostConfig = function (delay) {
+  var mapToCasperFolder = function (path) {
+    return "test/integration/casperjs/" + path;
+  };
+  var casperTests = require('./test/integration/casperjs/TestSuite.js').tests.map(mapToCasperFolder);
+
+  var getCasperConfig = function (delay) {
     return {
-      filesSrc : ['test/integration/casperjs/*_test.js'],
+      filesSrc : casperTests,
       options : {
         args : {
           baseUrl : 'http://localhost:' + '<%= express.test.options.port %>/',
@@ -41,11 +47,18 @@ module.exports = function(grunt) {
   };
 
   var getExpressConfig = function (source, port, host) {
+    var bases;
+    if (typeof source === 'string') {
+      bases = [source];
+    } else if (Array.isArray(source)) {
+      bases = source;
+    }
+
     return {
       options: {
         port: port,
         hostname : host || 'localhost',
-        bases: [source]
+        bases: bases
       }
     };
   };
@@ -74,9 +87,9 @@ module.exports = function(grunt) {
       ]
     },
     express: {
-      test: getExpressConfig('src', 9991),
+      test: getExpressConfig(['src', 'test'], 9991),
       regular: getExpressConfig('dest', 9001),
-      debug: getExpressConfig('src', 9901)
+      debug: getExpressConfig(['src', 'test'], 9901)
     },
     open : {
       regular : {
@@ -97,8 +110,8 @@ module.exports = function(grunt) {
       }
     },
     ghost : {
-      'default' : getGhostConfig(5000),
-      'local' : getGhostConfig(50)
+      'default' : getCasperConfig(5000),
+      'local' : getCasperConfig(50)
     },
     concat : {
       js : {
@@ -282,7 +295,7 @@ module.exports = function(grunt) {
   grunt.registerTask('test', ['lint', 'compile', 'unit-test','express:test', 'ghost:default']);
 
   // Validate & Test (faster version) will NOT work on travis !!
-  grunt.registerTask('precommit', ['lint', 'compile', 'express:test', 'ghost:local']);
+  grunt.registerTask('precommit', ['lint', 'compile', 'express:test', 'ghost:default']);
 
   // Compile JS code (eg verify JSDoc annotation and types, no actual minified code generated).
   grunt.registerTask('compile', ['closureCompiler:compile', 'clean:after']);

out.txt

@@ -0,0 +1,176 @@
+Running "leadingIndent:jsFiles" (leadingIndent) task
+Checking files indentation. Desired indentation: spaces (104 files)
+OK
+
+Running "leadingIndent:cssFiles" (leadingIndent) task
+Checking files indentation. Desired indentation: spaces (24 files)
+OK
+
+Running "jshint:files" (jshint) task
+>> 106 files lint free.
+
+Running "closureCompiler:compile" (closureCompiler) task
+Executing: java  -jar "build/closure/closure_compiler_20130823.jar"  --js src/js/Constants.js --js src/js/Events.js --js src/js/app.js --js src/js/controller/AnimatedPreviewController.js --js src/js/controller/CanvasBackgroundController.js --js src/js/controller/CursorCoordinatesController.js --js src/js/controller/DrawingController.js --js src/js/controller/LayersListController.js --js src/js/controller/MinimapController.js --js src/js/controller/NotificationController.js --js src/js/controller/PaletteController.js --js src/js/controller/PalettesListController.js --js src/js/controller/PreviewFilmController.js --js src/js/controller/ToolController.js --js src/js/controller/dialogs/AbstractDialogController.js --js src/js/controller/dialogs/BrowseLocalController.js --js src/js/controller/dialogs/DialogsController.js --js src/js/controller/dialogs/ImportImageController.js --js src/js/controller/dialogs/PaletteManagerController.js --js src/js/controller/piskel/PiskelController.js --js src/js/controller/piskel/PublicPiskelController.js --js src/js/controller/settings/ApplicationSettingsController.js --js src/js/controller/settings/GifExportController.js --js src/js/controller/settings/ImageExportController.js --js src/js/controller/settings/ImportController.js --js src/js/controller/settings/PngExportController.js --js src/js/controller/settings/ResizeController.js --js src/js/controller/settings/SaveController.js --js src/js/controller/settings/SettingsController.js --js src/js/devtools/DrawingTestRunner.js --js src/js/devtools/MouseEvent.js --js src/js/devtools/TestRecordController.js --js src/js/devtools/TestRecordPlayer.js --js src/js/devtools/TestRecorder.js --js src/js/drawingtools/BaseTool.js --js src/js/drawingtools/Circle.js --js src/js/drawingtools/ColorPicker.js --js src/js/drawingtools/ColorSwap.js --js src/js/drawingtools/Eraser.js --js src/js/drawingtools/Lighten.js --js src/js/drawingtools/Move.js --js src/js/drawingtools/PaintBucket.js --js src/js/drawingtools/Rectangle.js --js src/js/drawingtools/ShapeTool.js --js src/js/drawingtools/SimplePen.js --js src/js/drawingtools/Stroke.js --js src/js/drawingtools/VerticalMirrorPen.js --js src/js/drawingtools/selectiontools/BaseSelect.js --js src/js/drawingtools/selectiontools/RectangleSelect.js --js src/js/drawingtools/selectiontools/ShapeSelect.js --js src/js/model/Frame.js --js src/js/model/Layer.js --js src/js/model/Piskel.js --js src/js/model/frame/CachedFrameProcessor.js --js src/js/model/piskel/Descriptor.js --js src/js/rendering/AbstractRenderer.js --js src/js/rendering/CanvasRenderer.js --js src/js/rendering/CompositeRenderer.js --js src/js/rendering/DrawingLoop.js --js src/js/rendering/FramesheetRenderer.js --js src/js/rendering/OnionSkinRenderer.js --js src/js/rendering/PiskelRenderer.js --js src/js/rendering/frame/CachedFrameRenderer.js --js src/js/rendering/frame/FrameRenderer.js --js src/js/rendering/frame/TiledFrameRenderer.js --js src/js/rendering/layer/LayersRenderer.js --js src/js/selection/BaseSelection.js --js src/js/selection/RectangularSelection.js --js src/js/selection/SelectionManager.js --js src/js/selection/ShapeSelection.js --js src/js/service/AppEngineStorageService.js --js src/js/service/BackupService.js --js src/js/service/BeforeUnloadService.js --js src/js/service/CurrentColorsService.js --js src/js/service/FileDropperService.js --js src/js/service/GithubStorageService.js --js src/js/service/HistoryService.js --js src/js/service/ImageUploadService.js --js src/js/service/LocalStorageService.js --js src/js/service/SavedStatusService.js --js src/js/service/keyboard/CheatsheetService.js --js src/js/service/keyboard/KeycodeTranslator.js --js src/js/service/keyboard/ShortcutService.js --js src/js/snippets.js --js src/js/utils/Base64.js --js src/js/utils/BlobUtils.js --js src/js/utils/CanvasUtils.js --js src/js/utils/DateUtils.js --js src/js/utils/Dom.js --js src/js/utils/FileUtils.js --js src/js/utils/FrameUtils.js --js src/js/utils/ImageResizer.js --js src/js/utils/LayerUtils.js --js src/js/utils/Math.js --js src/js/utils/PiskelFileUtils.js --js src/js/utils/PixelUtils.js --js src/js/utils/Template.js --js src/js/utils/UserAgent.js --js src/js/utils/UserSettings.js --js src/js/utils/core.js --js src/js/utils/serialization/Deserializer.js --js src/js/utils/serialization/Serializer.js --js src/js/utils/serialization/backward/Deserializer_v0.js --js src/js/utils/serialization/backward/Deserializer_v1.js --js src/piskel-boot-0.1.0.js --js src/piskel-script-list.js --js_output_file=build/closure/closure_compiled_binary.js --compilation_level SIMPLE_OPTIMIZATIONS --externs build/closure/piskel-closure-externs.js --warning_level verbose --jscomp_off checkTypes --jscomp_off fileoverviewTags --summary_detail_level 1 --language_in ECMASCRIPT3
+src\js\app.js:2: WARNING - Parse error. illegal use of unknown JSDoc tag "require"; ignoring it
+ * @require Constants
+   ^
+
+src\js\app.js:3: WARNING - Parse error. illegal use of unknown JSDoc tag "require"; ignoring it
+ * @require Events
+   ^
+
+src\js\drawingtools\BaseTool.js:2: WARNING - Parse error. illegal use of unknown JSDoc tag "provide"; ignoring it
+ * @provide pskl.drawingtools.BaseTool
+   ^
+
+src\js\drawingtools\BaseTool.js:4: WARNING - Parse error. illegal use of unknown JSDoc tag "require"; ignoring it
+ * @require pskl.utils
+   ^
+
+src\js\drawingtools\Circle.js:2: WARNING - Parse error. illegal use of unknown JSDoc tag "provide"; ignoring it
+ * @provide pskl.drawingtools.Circle
+   ^
+
+src\js\drawingtools\Circle.js:4: WARNING - Parse error. illegal use of unknown JSDoc tag "require"; ignoring it
+ * @require pskl.utils
+   ^
+
+src\js\drawingtools\ColorPicker.js:2: WARNING - Parse error. illegal use of unknown JSDoc tag "provide"; ignoring it
+ * @provide pskl.drawingtools.ColorPicker
+   ^
+
+src\js\drawingtools\ColorPicker.js:4: WARNING - Parse error. illegal use of unknown JSDoc tag "require"; ignoring it
+ * @require pskl.utils
+   ^
+
+src\js\drawingtools\ColorSwap.js:2: WARNING - Parse error. illegal use of unknown JSDoc tag "provide"; ignoring it
+ * @provide pskl.drawingtools.ColorSwap
+   ^
+
+src\js\drawingtools\Eraser.js:2: WARNING - Parse error. illegal use of unknown JSDoc tag "provide"; ignoring it
+ * @provide pskl.drawingtools.Eraser
+   ^
+
+src\js\drawingtools\Eraser.js:4: WARNING - Parse error. illegal use of unknown JSDoc tag "require"; ignoring it
+ * @require Constants
+   ^
+
+src\js\drawingtools\Eraser.js:5: WARNING - Parse error. illegal use of unknown JSDoc tag "require"; ignoring it
+ * @require pskl.utils
+   ^
+
+src\js\drawingtools\Lighten.js:2: WARNING - Parse error. illegal use of unknown JSDoc tag "provide"; ignoring it
+ * @provide pskl.drawingtools.Eraser
+   ^
+
+src\js\drawingtools\Lighten.js:4: WARNING - Parse error. illegal use of unknown JSDoc tag "require"; ignoring it
+ * @require Constants
+   ^
+
+src\js\drawingtools\Lighten.js:5: WARNING - Parse error. illegal use of unknown JSDoc tag "require"; ignoring it
+ * @require pskl.utils
+   ^
+
+src\js\drawingtools\Lighten.js:31: WARNING - Parse error. illegal use of unknown JSDoc tag "Override"; ignoring it
+   * @Override
+     ^
+
+src\js\drawingtools\Lighten.js:42: WARNING - Parse error. illegal use of unknown JSDoc tag "Override"; ignoring it
+   * @Override
+     ^
+
+src\js\drawingtools\Move.js:2: WARNING - Parse error. illegal use of unknown JSDoc tag "provide"; ignoring it
+ * @provide pskl.drawingtools.Move
+   ^
+
+src\js\drawingtools\Move.js:4: WARNING - Parse error. illegal use of unknown JSDoc tag "require"; ignoring it
+ * @require pskl.utils
+   ^
+
+src\js\drawingtools\PaintBucket.js:2: WARNING - Parse error. illegal use of unknown JSDoc tag "provide"; ignoring it
+ * @provide pskl.drawingtools.PaintBucket
+   ^
+
+src\js\drawingtools\PaintBucket.js:4: WARNING - Parse error. illegal use of unknown JSDoc tag "require"; ignoring it
+ * @require pskl.utils
+   ^
+
+src\js\drawingtools\Rectangle.js:2: WARNING - Parse error. illegal use of unknown JSDoc tag "provide"; ignoring it
+ * @provide pskl.drawingtools.Rectangle
+   ^
+
+src\js\drawingtools\Rectangle.js:4: WARNING - Parse error. illegal use of unknown JSDoc tag "require"; ignoring it
+ * @require pskl.utils
+   ^
+
+src\js\drawingtools\SimplePen.js:2: WARNING - Parse error. illegal use of unknown JSDoc tag "provide"; ignoring it
+ * @provide pskl.drawingtools.SimplePen
+   ^
+
+src\js\drawingtools\SimplePen.js:4: WARNING - Parse error. illegal use of unknown JSDoc tag "require"; ignoring it
+ * @require pskl.utils
+   ^
+
+src\js\drawingtools\Stroke.js:2: WARNING - Parse error. illegal use of unknown JSDoc tag "provide"; ignoring it
+ * @provide pskl.drawingtools.Stroke
+   ^
+
+src\js\drawingtools\Stroke.js:4: WARNING - Parse error. illegal use of unknown JSDoc tag "require"; ignoring it
+ * @require pskl.utils
+   ^
+
+src\js\drawingtools\selectiontools\BaseSelect.js:2: WARNING - Parse error. illegal use of unknown JSDoc tag "provide"; ignoring it
+ * @provide pskl.drawingtools.BaseSelect
+   ^
+
+src\js\drawingtools\selectiontools\BaseSelect.js:4: WARNING - Parse error. illegal use of unknown JSDoc tag "require"; ignoring it
+ * @require pskl.utils
+   ^
+
+src\js\drawingtools\selectiontools\RectangleSelect.js:2: WARNING - Parse error. illegal use of unknown JSDoc tag "provide"; ignoring it
+ * @provide pskl.drawingtools.RectangleSelect
+   ^
+
+src\js\drawingtools\selectiontools\RectangleSelect.js:4: WARNING - Parse error. illegal use of unknown JSDoc tag "require"; ignoring it
+ * @require pskl.utils
+   ^
+
+src\js\drawingtools\selectiontools\ShapeSelect.js:2: WARNING - Parse error. illegal use of unknown JSDoc tag "provide"; ignoring it
+ * @provide pskl.drawingtools.ShapeSelect
+   ^
+
+src\js\drawingtools\selectiontools\ShapeSelect.js:4: WARNING - Parse error. illegal use of unknown JSDoc tag "require"; ignoring it
+ * @require pskl.utils
+   ^
+
+src\js\service\keyboard\CheatsheetService.js:20: WARNING - Events.TOGGLE_HELP is never defined
+    $.subscribe(Events.TOGGLE_HELP, this.toggleCheatsheet_.bind(this));
+                ^
+
+src\js\service\keyboard\CheatsheetService.js:21: WARNING - Events.ESCAPE is never defined
+    $.subscribe(Events.ESCAPE, this.onEscape_.bind(this));
+                ^
+
+src\js\utils\FrameUtils.js:102: WARNING - Parse error. Non-JSDoc comment has annotations. Did you mean to start it with '/**'?
+    /*
+^
+
+src\js\utils\core.js:28: WARNING - Parse error. illegal use of unknown JSDoc tag "provide"; ignoring it
+ * @provide pskl.utils
+   ^
+
+src\js\utils\core.js:30: WARNING - Parse error. illegal use of unknown JSDoc tag "require"; ignoring it
+ * @require Constants
+   ^
+
+0 error(s), 38 warning(s)
+
+Command complete for target: compile
+
+Running "clean:after" (clean) task
+Cleaning build/closure/closure_compiled_binary.js...OK
+
+Running "karma:unit" (karma) task
+INFO [karma]: Karma v0.12.17 server started at http://localhost:9876/
+INFO [launcher]: Starting browser PhantomJS
+WARN [watcher]: All files matched by "c:/Development/git/piskel/src/js/app.js" were excluded.

src/js/app.js

@@ -115,8 +115,10 @@
       }
       this.storageService.init();
 
+
+      var href = document.location.href.toLowerCase();
       // test tools
-      var testModeOn = document.location.href.toLowerCase().indexOf('test=true') !== -1;
+      var testModeOn = href.indexOf('test=true') !== -1;
       if (testModeOn) {
         this.testRecorder = new pskl.devtools.TestRecorder(this.piskelController);
         this.testRecorder.init();
@@ -125,6 +127,13 @@
         this.testRecordController.init();
       }
 
+      // test tools
+      var runTestModeOn = href.indexOf('test-run=') !== -1;
+      if (runTestModeOn) {
+        var testName = href.split('test-run=')[1];
+        this.testRunner = new pskl.devtools.DrawingTestRunner(testName);
+      }
+
       var drawingLoop = new pskl.rendering.DrawingLoop();
       drawingLoop.addCallback(this.render, this);
       drawingLoop.start();
@@ -135,6 +144,10 @@
       if (piskelData && piskelData.piskel) {
         this.loadPiskel_(piskelData.piskel, piskelData.descriptor, piskelData.fps);
       }
+
+      if (this.testRunner) {
+        this.testRunner.start();
+      }
     },
 
     loadPiskel_ : function (serializedPiskel, descriptor, fps) {

src/js/devtools/DrawingTestRunner.js

@@ -0,0 +1,37 @@
+(function () {
+  var ns = $.namespace('pskl.devtools');
+
+  ns.DrawingTestRunner = function (testName) {
+    this.testName = testName;
+    $.subscribe(Events.TEST_RECORD_END, this.onTestRecordEnd_.bind(this));
+  };
+
+  ns.DrawingTestRunner.prototype.start = function () {
+    var testName = this.testName;
+    var xhr = new XMLHttpRequest();
+    xhr.open('GET', testName, true);
+
+    xhr.onload = function(e) {
+      if (this.status == 200) {
+        var recordPlayer = new ns.TestRecordPlayer(JSON.parse(this.responseText));
+        recordPlayer.start();
+      } else {
+        this.onerror(e);
+      }
+    };
+    xhr.onerror = function(e) {
+      console.error('Could not load file : ' + testName);
+    };
+    xhr.send();
+  };
+
+  ns.DrawingTestRunner.prototype.onTestRecordEnd_ = function (evt, success, png) {
+    var testResult = document.createElement('div');
+    testResult.id = 'drawing-test-result';
+    testResult.setAttribute('data-test-name', this.testName);
+    // pskl.app.paletteController.setPrimaryColor('rgba(0,255,0,0)');
+    testResult.innerHTML = success ? 'OK' : ('KO:'+png);
+    document.body.appendChild(testResult);
+  };
+
+})();

src/js/devtools/MouseEvent.js

@@ -17,6 +17,7 @@
     if (otherEvent && otherEvent instanceof ns.MouseEvent) {
       var sameEvent = JSON.stringify(otherEvent.event) == JSON.stringify(this.event);
       var sameCoords = JSON.stringify(otherEvent.coords) == JSON.stringify(this.coords);
+      return sameEvent && sameCoords;
     } else {
       return false;
     }

src/js/devtools/TestRecordPlayer.js

@@ -4,11 +4,11 @@
   ns.TestRecordPlayer = function (testRecord) {
     this.initialState = testRecord.initialState;
     this.events = testRecord.events;
-    this.png = testRecord.png;
+    this.referencePng = testRecord.png;
     this.shim = null;
   };
 
-  ns.TestRecordPlayer.STEP = 30;
+  ns.TestRecordPlayer.STEP = 40;
 
   ns.TestRecordPlayer.prototype.start = function () {
     this.setupInitialState_();
@@ -74,12 +74,19 @@
     var renderer = new pskl.rendering.PiskelRenderer(pskl.app.piskelController);
     var png = renderer.renderAsCanvas().toDataURL();
 
-    var success = png === this.png;
+    var image = new Image();
+    image.onload = function () {
+      var canvas = pskl.CanvasUtils.createFromImage(image);
+      var referencePng = canvas.toDataURL();
+      var success = png === referencePng;
 
       this.shim.parentNode.removeChild(this.shim);
       this.shim = null;
 
-    $.publish(Events.TEST_RECORD_END, [success]);
+      $.publish(Events.TEST_RECORD_END, [success, png + '  vs  ' + referencePng]);
+    }.bind(this);
+    image.src = this.referencePng;
+
   };
 
   ns.TestRecordPlayer.prototype.playMouseEvent_ = function (recordEvent) {

src/js/utils/CanvasUtils.js

@@ -26,6 +26,13 @@
       return canvas;
     },
 
+    createFromImage : function (image) {
+      var canvas = pskl.CanvasUtils.createCanvas(image.width, image.height);
+      var context = canvas.getContext('2d');
+      context.drawImage(image, 0, 0);
+      return canvas;
+    },
+
     /**
      * By default, all scaling operations on a Canvas 2D Context are performed using antialiasing.
      * Resizing a 32x32 image to 320x320 will lead to a blurry output.

src/js/utils/core.js

@@ -14,13 +14,26 @@ jQuery.namespace = function() {
 /**
  * Need a polyfill for PhantomJS
  */
-if (typeof Function.prototype.bind !== "function") {
-  Function.prototype.bind = function(scope) {
-    "use strict";
-    var _function = this;
-    return function() {
-      return _function.apply(scope, arguments);
+if (!Function.prototype.bind) {
+  Function.prototype.bind = function (oThis) {
+    if (typeof this !== "function") {
+      // closest thing possible to the ECMAScript 5
+      // internal IsCallable function
+      throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
+    }
+
+    var bindArgs = Array.prototype.slice.call(arguments, 1),
+        fToBind = this,
+        fNOP = function () {},
+        fBound = function () {
+          var args = bindArgs.concat(Array.prototype.slice.call(arguments));
+          return fToBind.apply(this instanceof fNOP && oThis ? this : oThis, args);
         };
+
+    fNOP.prototype = this.prototype;
+    fBound.prototype = new fNOP();
+
+    return fBound;
   };
 }
 

src/piskel-script-list.js

@@ -143,6 +143,7 @@
   "js/devtools/TestRecorder.js",
   "js/devtools/TestRecordPlayer.js",
   "js/devtools/TestRecordController.js",
+  "js/devtools/DrawingTestRunner.js",
 
   // Application controller and initialization
   "js/app.js",

test/integration/casperjs/DrawingTest.js

@@ -0,0 +1,42 @@
+(function () {
+  var tests = [
+    'SimplePenDrawing1.json',
+    'ComplexDrawing1.json',
+    'ComplexDrawing2.json'
+  ];
+
+  var baseUrl = casper.cli.get('baseUrl')+"?debug";
+  var resultSelector = '#drawing-test-result';
+
+  casper.start();
+
+  var runTest = function (index) {
+    var test = 'integration/casperjs/drawing-records/' + tests[index];
+
+    casper.open(baseUrl + "&test-run=" + test);
+
+    casper.then(function () {
+      this.echo('Running test : ' + test);
+      this.wait(casper.cli.get('delay'));
+    });
+
+    casper.then(function () {
+      this.echo('Waiting for test result : ' + resultSelector);
+      this.waitForSelector(resultSelector, function() {
+        var result = this.getHTML(resultSelector);
+        this.echo('Test finished : ' + result);
+        this.test.assertEquals(result, 'OK');
+      }, 60*1000);
+    })
+    .run(function () {
+      if (tests[index+1]) {
+        runTest(index+1);
+      } else {
+        this.test.done();
+      }
+    });
+  };
+
+  runTest(0);
+
+})();

test/integration/casperjs/TestSuite.js

@@ -0,0 +1,4 @@
+(typeof exports != "undefined" ? exports : pskl_exports).tests = [
+  'SmokeTest.js',
+  'DrawingTest.js'
+];

test/integration/casperjs/drawing-records/ComplexDrawing2.json

@@ -0,0 +1 @@
+{"events":[{"type":"tool-event","toolId":"tool-stroke"},{"event":{"type":"mousedown","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":0,"y":0},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":0,"y":0},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":0,"y":1},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":1,"y":1},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":2,"y":1},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":2,"y":2},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":3,"y":2},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":3,"y":3},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":3,"y":4},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":4,"y":4},"type":"mouse-event"},{"event":{"type":"mouseup","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":4,"y":4},"type":"mouse-event"},{"type":"color-event","color":"#b01616","isPrimary":true},{"event":{"type":"mousedown","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":0,"y":4},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":0,"y":4},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":1,"y":3},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":2,"y":3},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":2,"y":2},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":3,"y":2},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":3,"y":1},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":3,"y":0},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":4,"y":0},"type":"mouse-event"},{"event":{"type":"mouseup","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":4,"y":0},"type":"mouse-event"},{"type":"instrumented-event","methodName":"duplicateFrameAt","args":[0]},{"type":"color-event","color":"#16b095","isPrimary":true},{"type":"color-event","color":"#277e6e","isPrimary":true},{"type":"tool-event","toolId":"tool-colorswap"},{"event":{"type":"mousedown","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":0,"y":2},"type":"mouse-event"},{"event":{"type":"mouseup","button":0,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":0,"y":2},"type":"mouse-event"},{"type":"color-event","color":"rgb(39, 129, 178)","isPrimary":false},{"type":"instrumented-event","methodName":"setCurrentFrameIndex","args":[0]},{"event":{"type":"mousedown","button":2,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":0,"y":2},"type":"mouse-event"},{"event":{"type":"mousemove","button":2,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":0,"y":2},"type":"mouse-event"},{"event":{"type":"mouseup","button":2,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":0,"y":2},"type":"mouse-event"}],"initialState":{"size":{"width":5,"height":5},"primaryColor":"#000000","secondaryColor":"rgba(0, 0, 0, 0)","selectedTool":"tool-pen"},"png":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAFCAYAAAB8ZH1oAAAAcklEQVQIW2NkYGD4r964CUhBQOfUFIaAV68Y1OvyEGIzVjAwAhX9v1nvxwBSDFJUnj2HgeHvHoabTZPAijuBisozIiAKYSaBFYEAUCFYDKoIxAYrhJkEMxmkEKYIZjLjBjGx/3CTgDpBioFiYOtgAKQYAGHLPBYu9IxUAAAAAElFTkSuQmCC"}

test/integration/casperjs/drawing-records/SimplePenDrawing1.json

@@ -0,0 +1 @@
+{"events":[{"type":"color-event","color":"#9c2525","isPrimary":true},{"event":{"type":"mousedown","button":0,"clientX":576,"clientY":129,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":0,"y":0},"type":"mouse-event"},{"event":{"type":"mouseup","button":0,"clientX":576,"clientY":129,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":0,"y":0},"type":"mouse-event"},{"event":{"type":"mousedown","button":0,"clientX":515,"clientY":890,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":0,"y":4},"type":"mouse-event"},{"event":{"type":"mouseup","button":0,"clientX":515,"clientY":890,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":0,"y":4},"type":"mouse-event"},{"event":{"type":"mousedown","button":0,"clientX":1345,"clientY":596,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":4,"y":2},"type":"mouse-event"},{"event":{"type":"mouseup","button":0,"clientX":1345,"clientY":596,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":4,"y":2},"type":"mouse-event"},{"type":"instrumented-event","methodName":"addFrameAt","args":[1]},{"type":"color-event","color":"#bf8888","isPrimary":true},{"event":{"type":"mousedown","button":0,"clientX":528,"clientY":513,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":0,"y":2},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"clientX":528,"clientY":513,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":0,"y":2},"type":"mouse-event"},{"event":{"type":"mouseup","button":0,"clientX":528,"clientY":513,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":0,"y":2},"type":"mouse-event"},{"event":{"type":"mousedown","button":0,"clientX":1331,"clientY":94,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":4,"y":0},"type":"mouse-event"},{"event":{"type":"mouseup","button":0,"clientX":1331,"clientY":94,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":4,"y":0},"type":"mouse-event"},{"event":{"type":"mousedown","button":0,"clientX":1338,"clientY":890,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":4,"y":4},"type":"mouse-event"},{"event":{"type":"mousemove","button":0,"clientX":1339,"clientY":890,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":4,"y":4},"type":"mouse-event"},{"event":{"type":"mouseup","button":0,"clientX":1339,"clientY":890,"shiftKey":false,"altKey":false,"ctrlKey":false},"coords":{"x":4,"y":4},"type":"mouse-event"},{"type":"instrumented-event","methodName":"duplicateFrameAt","args":[0]},{"type":"instrumented-event","methodName":"moveFrame","args":[1,2]},{"type":"instrumented-event","methodName":"setCurrentFrameIndex","args":[2]}],"initialState":{"size":{"width":5,"height":5},"primaryColor":"#000000","secondaryColor":"rgba(0, 0, 0, 0)","selectedTool":"tool-pen"},"png":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAFCAYAAACaTbYsAAAAOklEQVQYV2Oco6r6P+X2bUYGPGB/R8f/u3PnMqCrw6sJn4EgOQzNIJcoJyczOFZU4DUYpI4ymynxMwDAihvrrOeNLQAAAABJRU5ErkJggg=="}