From 216497b07c94e718012d111b97d357284aa010dd Mon Sep 17 00:00:00 2001 From: Tj Holowaychuk Date: Thu, 4 Nov 2010 11:55:50 -0700 Subject: [PATCH 1/4] Added express/jade submodules --- .gitmodules | 6 ++++++ Readme.md | 10 ++++++---- support/express | 1 + support/jade | 1 + 4 files changed, 14 insertions(+), 4 deletions(-) create mode 160000 support/express create mode 160000 support/jade diff --git a/.gitmodules b/.gitmodules index ffe0dcb..5edc2b8 100644 --- a/.gitmodules +++ b/.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 diff --git a/Readme.md b/Readme.md index c8c031c..c16bc68 100644 --- a/Readme.md +++ b/Readme.md @@ -67,17 +67,19 @@ 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 diff --git a/support/express b/support/express new file mode 160000 index 0000000..c4ba1b0 --- /dev/null +++ b/support/express @@ -0,0 +1 @@ +Subproject commit c4ba1b025ab3318f32200eaffe09ca31a3d71aa2 diff --git a/support/jade b/support/jade new file mode 160000 index 0000000..addd110 --- /dev/null +++ b/support/jade @@ -0,0 +1 @@ +Subproject commit addd110c5ebbd5d905b72851f1198d8ae5160419 From 88912c4c5034c84675a93b5ae582184df40ad909 Mon Sep 17 00:00:00 2001 From: Tj Holowaychuk Date: Thu, 4 Nov 2010 12:06:13 -0700 Subject: [PATCH 2/4] Started Express server --- Readme.md | 4 --- test/server.js | 68 ++++++++++++++++-------------------------- test/views/layout.jade | 6 ++++ test/views/tests.jade | 1 + 4 files changed, 32 insertions(+), 47 deletions(-) create mode 100644 test/views/layout.jade create mode 100644 test/views/tests.jade diff --git a/Readme.md b/Readme.md index c16bc68..97f84b0 100644 --- a/Readme.md +++ b/Readme.md @@ -83,10 +83,6 @@ Visual tests: $ node test/server.js -or provide a port: - - $ sudo node test/server.js 80 - ## License (The MIT License) diff --git a/test/server.js b/test/server.js index 217b9d6..ac466e4 100644 --- a/test/server.js +++ b/test/server.js @@ -3,46 +3,28 @@ * Module dependencies. */ -var http = require('http') - , fs = require('fs'); - -var args = process.argv.slice(2) - , port = args.length - ? parseInt(args[0], 10) - : 3000; - -var images = fs.readdirSync(__dirname + '/images').sort(); - -function list(images) { - return '' + images.map(function(path, i){ - if ('.gitignore' == path) return ''; - return '' - + '' - + '' - + '' - + ''; - }).join('') + '
TestReference
' + i + '
'; -} - -http.createServer(function(req, res){ - switch (req.url) { - case '/': - res.writeHead(200, { 'Content-Type': 'text/html' }); - res.end(list(images)); - break; - default: - fs.readFile(__dirname + '/' + req.url, function(err, buf){ - if (err || !buf) { - res.writeHead(404, { 'Content-Type': 'text/html' }); - res.end('

Not Found

'); - } else { - res.writeHead(200, { - 'Content-Type': 'image/png' - , 'Content-Length': buf.length - }); - res.end(buf); - } - }); - } -}).listen(port); -console.log('Test image server started on port ' + port); \ No newline at end of file +var express = require('../support/express') + , jade = require('../support/jade') + , app = express.createServer(); + +// Config + +app.register('.jade', jade); +app.set('views', __dirname + '/views'); +app.set('view engine', 'jade'); + +// Middleware + +app.use(express.favicon()); +app.use(express.logger({ format: '\x1b[90m:remote-addr\x1b[0m - \x1b[33m:method\x1b[0m :url :status \x1b[90m:response-timems\x1b[0m' })); +app.use(app.router); +app.use(express.errorHandler({ showStack: true })); + +// Routes + +app.get('/', function(req, res){ + res.render('tests'); +}); + +app.listen(3000); +console.log('Test server listening on port %d', app.address().port); \ No newline at end of file diff --git a/test/views/layout.jade b/test/views/layout.jade new file mode 100644 index 0000000..efa189a --- /dev/null +++ b/test/views/layout.jade @@ -0,0 +1,6 @@ +!!! +html + head + title node-canvas + body + != body diff --git a/test/views/tests.jade b/test/views/tests.jade new file mode 100644 index 0000000..339c457 --- /dev/null +++ b/test/views/tests.jade @@ -0,0 +1 @@ +h1 Tests \ No newline at end of file From 78f067cef8b229741af5496731ed752adb90736b Mon Sep 17 00:00:00 2001 From: Tj Holowaychuk Date: Thu, 4 Nov 2010 12:13:04 -0700 Subject: [PATCH 3/4] Setting up public statics for the test server --- test/public/style.css | 16 ++++++++++++++++ test/server.js | 1 + test/views/layout.jade | 3 ++- test/views/tests.jade | 6 +++++- 4 files changed, 24 insertions(+), 2 deletions(-) create mode 100644 test/public/style.css diff --git a/test/public/style.css b/test/public/style.css new file mode 100644 index 0000000..d304d49 --- /dev/null +++ b/test/public/style.css @@ -0,0 +1,16 @@ +body { + padding: 40px 50px; + font: 13px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif; +} +p { + margin: 5px; +} +em { + color: #00C5F7; +} +a { + color: #00C5F7; +} +#primary { + width: 600px; +} \ No newline at end of file diff --git a/test/server.js b/test/server.js index ac466e4..a65daef 100644 --- a/test/server.js +++ b/test/server.js @@ -18,6 +18,7 @@ app.set('view engine', 'jade'); app.use(express.favicon()); app.use(express.logger({ format: '\x1b[90m:remote-addr\x1b[0m - \x1b[33m:method\x1b[0m :url :status \x1b[90m:response-timems\x1b[0m' })); app.use(app.router); +app.use(express.staticProvider(__dirname + '/public')); app.use(express.errorHandler({ showStack: true })); // Routes diff --git a/test/views/layout.jade b/test/views/layout.jade index efa189a..f6391f5 100644 --- a/test/views/layout.jade +++ b/test/views/layout.jade @@ -2,5 +2,6 @@ html head title node-canvas + link(href='/style.css', rel='stylesheet') body - != body + #primary!= body diff --git a/test/views/tests.jade b/test/views/tests.jade index 339c457..bcb1fc9 100644 --- a/test/views/tests.jade +++ b/test/views/tests.jade @@ -1 +1,5 @@ -h1 Tests \ No newline at end of file +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. \ No newline at end of file From f2d046f405e1aa20334cdce52fa27ec4ab9dc20e Mon Sep 17 00:00:00 2001 From: Tj Holowaychuk Date: Thu, 4 Nov 2010 12:51:46 -0700 Subject: [PATCH 4/4] test server working --- test/public/app.js | 64 ++++++++++++++++++++++++++++++++++++++++++ test/public/style.css | 7 +++++ test/public/tests.js | 33 ++++++++++++++++++++++ test/server.js | 13 +++++++++ test/views/layout.jade | 2 ++ test/views/tests.jade | 9 +++++- 6 files changed, 127 insertions(+), 1 deletion(-) create mode 100644 test/public/app.js create mode 100644 test/public/tests.js diff --git a/test/public/app.js b/test/public/app.js new file mode 100644 index 0000000..c9fa008 --- /dev/null +++ b/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); +} \ No newline at end of file diff --git a/test/public/style.css b/test/public/style.css index d304d49..3e779ae 100644 --- a/test/public/style.css +++ b/test/public/style.css @@ -11,6 +11,13 @@ em { a { color: #00C5F7; } +canvas, img { + padding: 5px; + border: 1px solid #eee; +} #primary { width: 600px; +} +#tests { + margin-top: 35px; } \ No newline at end of file diff --git a/test/public/tests.js b/test/public/tests.js new file mode 100644 index 0000000..36375fe --- /dev/null +++ b/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); +}; \ No newline at end of file diff --git a/test/server.js b/test/server.js index a65daef..e170f8c 100644 --- a/test/server.js +++ b/test/server.js @@ -4,6 +4,7 @@ */ var express = require('../support/express') + , Canvas = require('../lib/canvas') , jade = require('../support/jade') , app = express.createServer(); @@ -17,6 +18,7 @@ app.set('view engine', 'jade'); app.use(express.favicon()); app.use(express.logger({ format: '\x1b[90m:remote-addr\x1b[0m - \x1b[33m:method\x1b[0m :url :status \x1b[90m:response-timems\x1b[0m' })); +app.use(express.bodyDecoder()); app.use(app.router); app.use(express.staticProvider(__dirname + '/public')); app.use(express.errorHandler({ showStack: true })); @@ -27,5 +29,16 @@ app.get('/', function(req, res){ res.render('tests'); }); +app.post('/render', function(req, res, next){ + // Do not try this at home :) + var fn = eval('(' + req.body.fn + ')') + , width = req.body.width + , height = req.body.height + , canvas = new Canvas(width, height) + , ctx = canvas.getContext('2d'); + fn(ctx); + res.send({ data: canvas.toDataURL() }); +}); + app.listen(3000); console.log('Test server listening on port %d', app.address().port); \ No newline at end of file diff --git a/test/views/layout.jade b/test/views/layout.jade index f6391f5..0dd190a 100644 --- a/test/views/layout.jade +++ b/test/views/layout.jade @@ -3,5 +3,7 @@ html head title node-canvas link(href='/style.css', rel='stylesheet') + script(src='/tests.js') + script(src='/app.js') body #primary!= body diff --git a/test/views/tests.jade b/test/views/tests.jade index bcb1fc9..6558860 100644 --- a/test/views/tests.jade +++ b/test/views/tests.jade @@ -1,5 +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. \ No newline at end of file + | same code utilizing the client canvas api, as well as node-canvas. + +table#tests + thead + th node-canvas + th target + tbody \ No newline at end of file