Merge branch 'static-tests'

.gitmodules

@@ -1,3 +1,9 @@
 [submodule "support/expresso"]
 	path = support/expresso
 	url = git://github.com/visionmedia/expresso.git
+[submodule "support/express"]
+	path = support/express
+	url = git://github.com/visionmedia/express.git
+[submodule "support/jade"]
+	path = support/jade
+	url = git://github.com/visionmedia/jade.git

Readme.md

@@ -67,24 +67,22 @@ If not previously installed, you will want to install the [cairo graphics librar
 
 ## Testing
 
-Visual tests utilize md5 checksums in order to assert integrity.
+If you have not previously, init git submodules:
 
-Build:
+    $ git submodule update --init
+
+Build node-canvas:
 
     $ node-waf configure build
 
-Test:
+Unit tests:
 
     $ make test
 
-There is also a test image server which can be used for visual test verification, as rendering may vary slightly from platform to platform.
+Visual tests:
 
     $ node test/server.js
 
-or provide a port:
-
-    $ sudo node test/server.js 80
-
 ## License 
 
 (The MIT License)

support/express

@@ -0,0 +1 @@
+Subproject commit c4ba1b025ab3318f32200eaffe09ca31a3d71aa2

support/jade

@@ -0,0 +1 @@
+Subproject commit addd110c5ebbd5d905b72851f1198d8ae5160419

test/public/app.js

@@ -0,0 +1,64 @@
+
+window.onload = runTests;
+
+function get(id) {
+  return document.getElementById(id);
+}
+
+function create(type) {
+  return document.createElement(type);
+}
+
+function runTests() {
+  var table = get('tests');
+  for (var name in tests) {
+    var canvas = create('canvas')
+      , tr = create('tr')
+      , tds = [create('td'), create('td')];
+    canvas.width = 200;
+    canvas.height = 200;
+    tds[1].appendChild(canvas);
+    tr.appendChild(tds[0]);
+    tr.appendChild(tds[1]);
+    table.appendChild(tr);
+    runTest(name, canvas, tds[0]);
+  }
+}
+
+function runTest(name, canvas, dest) {
+  var fn = tests[name];
+  fn(canvas.getContext('2d'));
+  renderOnServer(name, canvas, function(res){
+    if (res.error) {
+      var p = create('p');
+      p.innerText = res.error;
+      dest.appendChild(p);
+    } else if (res.data) {
+      var img = create('image');
+      img.src = res.data;
+      img.alt = name;
+      dest.appendChild(img);
+    }
+  });
+}
+
+function renderOnServer(name, canvas, fn) {
+  var req = new XMLHttpRequest
+    , json = JSON.stringify({
+      fn: tests[name].toString()
+      , width: canvas.width
+      , height: canvas.height
+    });
+  req.open('POST', '/render');
+  req.setRequestHeader('Content-Type', 'application/json');
+  req.onreadystatechange = function(){
+    if (4 == req.readyState) {
+      try {
+        fn(JSON.parse(req.responseText));
+      } catch (err) {
+        fn({ error: err });
+      }
+    }
+  };
+  req.send(json);
+}

test/public/style.css

@@ -0,0 +1,23 @@
+body {
+  padding: 40px 50px;
+  font: 13px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+p {
+  margin: 5px;
+}
+em {
+  color: #00C5F7;
+}
+a {
+  color: #00C5F7;
+}
+canvas, img {
+  padding: 5px;
+  border: 1px solid #eee;
+}
+#primary {
+  width: 600px;
+}
+#tests {
+  margin-top: 35px;
+}

test/public/tests.js

@@ -0,0 +1,33 @@
+
+var tests = {};
+
+tests['linear gradients'] = function(ctx){
+  var lingrad = ctx.createLinearGradient(0,0,0,150);
+  lingrad.addColorStop(0, '#00ABEB');
+  lingrad.addColorStop(0.5, '#fff');
+  lingrad.addColorStop(0.5, '#26C000');
+  lingrad.addColorStop(1, '#fff');
+
+  var lingrad2 = ctx.createLinearGradient(0,50,0,95);
+  lingrad2.addColorStop(0.5, '#000');
+  lingrad2.addColorStop(1, 'rgba(0,0,0,0)');
+
+  ctx.fillStyle = lingrad;
+  ctx.strokeStyle = lingrad2;
+
+  ctx.fillRect(10,10,130,130);
+  ctx.strokeRect(50,50,50,50);  
+};
+
+tests['global alpha'] = function(ctx){
+  ctx.globalAlpha = 0.5;
+  ctx.fillStyle = 'rgba(0,0,0,0.5)';
+  ctx.strokeRect(0,0,50,50);
+
+  ctx.globalAlpha = 0.8;
+  ctx.fillRect(20,20,20,20);
+
+  ctx.fillStyle = 'black';
+  ctx.globalAlpha = 1;
+  ctx.fillRect(25,25,10,10);
+};

test/server.js

@@ -3,46 +3,42 @@
  * Module dependencies.
  */
 
-var http = require('http')
+var express = require('../support/express')
-  , fs = require('fs');
+  , Canvas = require('../lib/canvas')
-
+  , jade = require('../support/jade')
-var args = process.argv.slice(2)
+  , app = express.createServer();
-  , port = args.length
+
-    ? parseInt(args[0], 10)
+// Config
-    : 3000;
+
-
+app.register('.jade', jade);
-var images = fs.readdirSync(__dirname + '/images').sort();
+app.set('views', __dirname + '/views');
-
+app.set('view engine', 'jade');
-function list(images) {
+
-  return '<table><tr><td></td><td>Test</td><td>Reference</td></tr>' + images.map(function(path, i){
+// Middleware
-    if ('.gitignore' == path) return '';
+
-    return '<tr>'
+app.use(express.favicon());
-      + '<td>' + i + '</td>'
+app.use(express.logger({ format: '\x1b[90m:remote-addr\x1b[0m - \x1b[33m:method\x1b[0m :url :status \x1b[90m:response-timems\x1b[0m' }));
-      + '<td><img src="/images/' + path + '" style="border: 1px solid #eee; margin-right: 5px"/></td>' 
+app.use(express.bodyDecoder());
-      + '<td><img src="/references/' + path + '" style="border: 1px solid #eee"/></td>' 
+app.use(app.router);
-      + '</tr>';
+app.use(express.staticProvider(__dirname + '/public'));
-  }).join('') + '</table>';
+app.use(express.errorHandler({ showStack: true }));
-}
+
-
+// Routes
-http.createServer(function(req, res){
+
-  switch (req.url) {
+app.get('/', function(req, res){
-    case '/':
+  res.render('tests');
-      res.writeHead(200, { 'Content-Type': 'text/html' });
+});
-      res.end(list(images));
+
-      break;
+app.post('/render', function(req, res, next){
-    default:
+  // Do not try this at home :)
-      fs.readFile(__dirname + '/' + req.url, function(err, buf){
+  var fn = eval('(' + req.body.fn + ')')
-        if (err || !buf) {
+    , width = req.body.width
-          res.writeHead(404, { 'Content-Type': 'text/html' });
+    , height = req.body.height
-          res.end('<p>Not Found</p>');
+    , canvas = new Canvas(width, height)
-        } else {
+    , ctx = canvas.getContext('2d');
-          res.writeHead(200, {
+  fn(ctx);
-              'Content-Type': 'image/png'
+  res.send({ data: canvas.toDataURL() });
-            , 'Content-Length': buf.length
+});
-          });
+
-          res.end(buf);
+app.listen(3000);
-        }
+console.log('Test server listening on port %d', app.address().port);
-      });
-  }
-}).listen(port);
-console.log('Test image server started on port ' + port);

test/views/layout.jade

@@ -0,0 +1,9 @@
+!!!
+html
+  head
+    title node-canvas
+    link(href='/style.css', rel='stylesheet')
+    script(src='/tests.js')
+    script(src='/app.js')
+  body
+    #primary!= body

test/views/tests.jade

@@ -0,0 +1,12 @@
+h1 node-canvas
+
+p.msg
+  | The tests below assert visual and api integrity by running the
+  em exact
+  | same code utilizing the client canvas api, as well as node-canvas.
+
+table#tests
+  thead
+    th node-canvas
+    th target
+  tbody