Automattic · LinusU · Oct 30, 2016 · Oct 29, 2016 · Oct 29, 2016
diff --git a/package.json b/package.json
@@ -24,19 +24,17 @@
     "prebenchmark": "node-gyp build",
     "benchmark": "node benchmarks/run.js",
     "pretest": "node-gyp build",
-    "test": "standard examples/*.js && mocha test/*.test.js",
+    "test": "standard examples/*.js test/server.js test/public/*.js && mocha test/*.test.js",
     "pretest-server": "node-gyp build",
     "test-server": "node test/server.js"
   },
   "dependencies": {
     "nan": "^2.3.2"
   },
   "devDependencies": {
-    "body-parser": "^1.13.3",
-    "express": "^4.13.2",
-    "pug": "^2.0.0-beta3",
-    "mocha": "*",
-    "standard": "^7.1.1"
+    "express": "^4.14.0",
+    "mocha": "^3.1.2",
+    "standard": "^8.5.0"
   },
   "engines": {
     "node": ">=0.10.0"

diff --git a/test/public/face.jpeg → test/fixtures/face.jpeg b/test/public/face.jpeg → test/fixtures/face.jpeg
diff --git a/test/public/star.png → test/fixtures/star.png b/test/public/star.png → test/fixtures/star.png
diff --git a/test/public/state.png → test/fixtures/state.png b/test/public/state.png → test/fixtures/state.png
diff --git a/test/public/app.html b/test/public/app.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>node-canvas</title>
+    <link href="/style.css" rel="stylesheet">
+  </head>
+  <body>
+
+    <h1>node-canvas</h1>
+
+    <p class="msg">
+      The tests below assert visual and api integrity by running the <em>exact</em> same code utilizing the client canvas api, as well as node-canvas.
+    </p>
+
+    <script src="/tests.js"></script>
+    <script src="/app.js"></script>
+
+  </body>
+</html>
diff --git a/test/public/app.js b/test/public/app.js
@@ -1,145 +1,55 @@
+window.addEventListener('load', runTests)
 
-function log() {
-  if (window.console) console.log.apply(this, arguments);
-}
-
-window.onload = function(){
-  runTests();
-  get('run').addEventListener('click', runTests, false);
-};
+function create (type, attrs, children) {
+  const element = Object.assign(document.createElement(type), attrs)
 
-document.addEventListener('keypress', function(event){
-  if (114 == event.charCode) runTests();
-}, false);
-
-function get(id) {
-  return document.getElementById(id);
-}
+  if (children) {
+    children.forEach(function (child) { element.appendChild(child) })
+  }
 
-function create(type, str) {
-  var el = document.createElement(type);
-  if (str) el.appendChild(text(str));
-  return el;
+  return element
 }
 
-function text(str) {
-  return document.createTextNode(str);
+function pdfLink (name) {
+  return create('a', {
+    href: '/pdf?name=' + encodeURIComponent(name),
+    target: '_blank',
+    textContent: 'PDF'
+  })
 }
 
-function pdfForm(fn, canvas) {
-  var form = create('form')
-    , input = create('input')
-    , submit = create('input');
-
-  form.setAttribute('action', '/pdf');
-  form.setAttribute('method', 'post');
-  form.setAttribute('target', '_blank');
-
-  input.setAttribute('type', 'hidden');
-  input.setAttribute('name', 'json');
-  input.setAttribute('value', JSON.stringify({
-    fn: fn.toString()
-    , width: canvas.width
-    , height: canvas.height
-  }));
+function localRendering (name) {
+  var canvas = create('canvas', { width: 200, height: 200, title: name })
 
-  submit.setAttribute('type', 'submit');
-  submit.setAttribute('value', 'PDF');
+  window.tests[name](canvas.getContext('2d'), function () {})
 
-  form.appendChild(input);
-  form.appendChild(submit);
-
-  return form;
+  return canvas
 }
 
-function clearTests() {
-  var table = get('tests');
-  table.removeChild(table.children[1]);
+function clearTests () {
+  var table = document.getElementById('tests')
+  if (table) document.body.removeChild(table)
 }
 
-function runTests() {
-  clearTests();
-  var table = get('tests')
-    , tbody = create('tbody');
-  for (var name in tests) {
-    var fn = tests[name]
-      , canvas = create('canvas')
-      , tr = create('tr')
-      , tds = [create('td'), create('td'), create('td'), create('td')];
-
-    canvas.width = 200;
-    canvas.height = 200;
-    canvas.title = name;
+function runTests () {
+  clearTests()
 
-    tds[2].appendChild(canvas);
-    tds[3].appendChild(create('h3', name));
-    tds[3].appendChild(pdfForm(fn, canvas));
+  var testNames = Object.keys(window.tests)
 
-    tr.appendChild(tds[0]);
-    tr.appendChild(tds[1]);
-    tr.appendChild(tds[2]);
-    tr.appendChild(tds[3]);
+  var table = create('table', { id: 'tests' }, [
+    create('thead', {}, [
+      create('th', { textContent: 'node-canvas' }),
+      create('th', { textContent: 'browser canvas' }),
+      create('th', { textContent: '' })
+    ]),
+    create('tbody', {}, testNames.map(function (name) {
+      return create('tr', {}, [
+        create('td', {}, [create('img', { src: '/render?name=' + encodeURIComponent(name) })]),
+        create('td', {}, [localRendering(name)]),
+        create('td', {}, [create('h3', { textContent: name }), pdfLink(name)])
+      ])
+    }))
+  ])
 
-    tbody.appendChild(tr);
-    table.appendChild(tbody);
-    runTest(name, canvas, tds[0], tds[1], tds[3]);
-  }
+  document.body.appendChild(table)
 }
-
-function runTest(name, canvas, dest, jpegDest, stats) {
-  var fn = tests[name]
-    , start = new Date;
-  try {
-    fn(canvas.getContext('2d'), function(){});
-  } catch (err) {
-    log(err);
-  }
-  var duration = new Date - start;
-  stats.appendChild(create('p', 'browser: ' + duration + 'ms'));
-  stats.appendChild(create('p', 'fps: ' + (1000 / duration).toFixed(0)));
-  renderOnServer('/render', 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('img');
-      img.src = res.data;
-      stats.appendChild(create('p', 'node: ' + res.duration + 'ms'));
-      stats.appendChild(create('p', 'fps: ' + (1000 / res.duration).toFixed(0)));
-      dest.appendChild(img);
-    }
-  });
-  renderOnServer('/jpeg', name, canvas, function(res){
-    if (res.error) {
-      var p = create('p');
-      p.innerText = res.error;
-      jpegDest.appendChild(p);
-    } else if (res.data) {
-      var img = create('img');
-      img.src = res.data;
-      jpegDest.appendChild(img);
-    }
-  });
-}
-
-function renderOnServer(url, name, canvas, fn) {
-  var req = new XMLHttpRequest
-    , json = JSON.stringify({
-      fn: tests[name].toString()
-      , width: canvas.width
-      , height: canvas.height
-    });
-  req.open('POST', url);
-  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);
-}
diff --git a/test/public/style.css b/test/public/style.css
@@ -2,38 +2,38 @@ body {
   padding: 40px 50px;
   font: 13px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
+
 p {
   margin: 15px 5px;
 }
-em {
-  color: #00C5F7;
-}
+
 a {
   color: #00C5F7;
 }
+
 canvas, img {
   padding: 5px;
   border: 1px solid #eee;
 }
-pre {
-  height: 200px;
-  font-size: 12px;
-  overflow: auto;
-}
+
 p.msg {
   width: 400px;
 }
+
 #tests {
   width: 100%;
   margin-top: 35px;
 }
+
 table tr td:nth-child(1),
 table tr td:nth-child(2) {
   width: 200px;
 }
+
 table tr td:nth-child(3) {
   padding: 0 45px;
 }
+
 table tr td p {
   margin: 5px 0;
-}
+}