<html> <head> <meta charset="utf-8"> <title>Mocha Tests</title> <link rel="stylesheet" href="lib/mocha.css" /> <script src="../../dist/html2canvas.js"></script> <script src="../../src/log.js"></script> <script src="../../src/renderer.js"></script> <script src="../../src/renderers/canvas.js"></script> <script src="../assets/jquery-1.6.2.js"></script> <script src="lib/expect.js"></script> <script src="lib/mocha.js"></script> <style> .block { width: 200px; height: 200px; } </style> </head> <body> <div id="mocha"></div> <script>mocha.setup('bdd')</script> <div id="block1" class="block"> <input type="text" value="text" /> </div> <div id="block2" class="block"> <input type="password" value="password" /> </div> <div id="block3" class="block"> <input type="text" value="text" /> </div> <div id="block4" class="block"> <textarea>text</textarea> </div> <div id="block5" class="block"> <select> <option value="1">1</option> <option value="2" selected>2</option> <option value="3">3</option> </select> </div> <div id="green-block"></div> <script> describe("Rendering input values", function() { it("uses default value for input[type='text']", function(done) { CanvasRenderer.prototype.text = function(text) { expect(text).to.equal('text'); }; html2canvas(document.querySelector("#block1"), {renderer: CanvasRenderer, strict: true}).then(function(canvas) { expect(canvas.width).to.equal(200); expect(canvas.height).to.equal(200); done(); }).catch(function(error) { done(error); }); }); it("uses transformed value for input[type='password']", function(done) { var count = 0; CanvasRenderer.prototype.text = function(text) { expect(text).to.equal('•'); count++; }; html2canvas(document.querySelector("#block2"), {renderer: CanvasRenderer, strict: true}).then(function(canvas) { expect(canvas.width).to.equal(200); expect(canvas.height).to.equal(200); expect(count).to.equal("password".length); done(); }).catch(function(error) { done(error); }); }); it("used property and not attribute for rendering", function(done) { document.querySelector("#block3 input").value = 'updated'; CanvasRenderer.prototype.text = function(text) { expect(text).to.equal('updated'); }; html2canvas(document.querySelector("#block3"), {renderer: CanvasRenderer, strict: true}).then(function(canvas) { expect(canvas.width).to.equal(200); expect(canvas.height).to.equal(200); done(); }).catch(function(error) { done(error); }); }); describe("Rendering textarea values", function() { it("uses default value correctly", function(done) { CanvasRenderer.prototype.text = function(text) { expect(text).to.equal('text'); }; html2canvas(document.querySelector("#block4"), {renderer: CanvasRenderer, strict: true}).then(function(canvas) { expect(canvas.width).to.equal(200); expect(canvas.height).to.equal(200); done(); }).catch(function(error) { done(error); }); }); it("used property and not attribute for rendering", function(done) { document.querySelector("#block4 textarea").value = 'updated'; CanvasRenderer.prototype.text = function(text) { expect(text).to.equal('updated'); }; html2canvas(document.querySelector("#block4"), {renderer: CanvasRenderer, strict: true, logging: true, removeContainer: false}).then(function(canvas) { expect(canvas.width).to.equal(200); expect(canvas.height).to.equal(200); done(); }).catch(function(error) { done(error); }); }); }); describe("Select values", function() { it("uses default value correctly", function(done) { CanvasRenderer.prototype.text = function(text) { expect(text).to.equal('2'); }; html2canvas(document.querySelector("#block5"), {renderer: CanvasRenderer, strict: true}).then(function(canvas) { expect(canvas.width).to.equal(200); expect(canvas.height).to.equal(200); done(); }).catch(function(error) { done(error); }); }); it("used property and not attribute for rendering", function(done) { document.querySelector("#block5 select").value = '3'; CanvasRenderer.prototype.text = function(text) { expect(text).to.equal('3'); }; html2canvas(document.querySelector("#block5"), {renderer: CanvasRenderer, strict: true, logging: true, removeContainer: false}).then(function(canvas) { expect(canvas.width).to.equal(200); expect(canvas.height).to.equal(200); done(); }).catch(function(error) { done(error); }); }); }); }); mocha.checkLeaks(); mocha.globals(['jQuery']); if (window.mochaPhantomJS) { mochaPhantomJS.run(); } else { mocha.run(); } mocha.suite.afterAll(function() { document.body.setAttribute('data-complete', 'true'); }); </script> </body> </html>