(function (global) { 'use strict'; var assert = global.chai.assert; var imagediff = global.imagediff; var domtoimage = global.domtoimage; var Promise = global.Promise; var delay = domtoimage.impl.util.delay; var BASE_URL = '/base/spec/resources/'; describe('domtoimage', function () { afterEach(purgePage); it('should load', function () { assert.ok(domtoimage); }); describe('regression', function () { it('should render to svg', function (done) { loadTestPage('small/dom-node.html', 'small/style.css', 'small/control-image') .then(function () { return domtoimage.toSvg(domNode()); }) .then(check) .then(done).catch(done); }); it('should render to png', function (done) { loadTestPage('small/dom-node.html', 'small/style.css', 'small/control-image') .then(function () { return domtoimage.toPng(domNode()); }) .then(check) .then(done).catch(done); }); it('should handle border', function (done) { loadTestPage('border/dom-node.html', 'border/style.css', 'border/control-image') .then(renderAndCheck) .then(done).catch(done); }); it('should render to jpeg', function (done) { loadTestPage('small/dom-node.html', 'small/style.css', 'small/control-image-jpeg') .then(function () { return domtoimage.toJpeg(domNode()); }) .then(check) .then(done).catch(done); }); it('should use quality parameter when rendering to jpeg', function (done) { loadTestPage('small/dom-node.html', 'small/style.css', 'small/control-image-jpeg-low') .then(function () { return domtoimage.toJpeg(domNode(), { quality: 0.5 }); }) .then(check) .then(done).catch(done); }); it('should render to blob', function (done) { loadTestPage('small/dom-node.html', 'small/style.css', 'small/control-image') .then(function () { return domtoimage.toBlob(domNode()); }) .then(function (blob) { return global.URL.createObjectURL(blob); }) .then(check) .then(done).catch(done); }); it('should render bigger node', function (done) { loadTestPage('bigger/dom-node.html', 'bigger/style.css', 'bigger/control-image') .then(function () { var parent = $('#dom-node'); var child = $('.dom-child-node'); for (var i = 0; i < 10; i++) { parent.append(child.clone()); } }) .then(renderAndCheck) .then(done).catch(done); }); it('should handle "#" in colors and attributes', function (done) { loadTestPage('hash/dom-node.html', 'hash/style.css', 'small/control-image') .then(renderAndCheck) .then(done).catch(done); }); it('should render nested svg with broken namespace', function (done) { loadTestPage('svg-ns/dom-node.html', 'svg-ns/style.css', 'svg-ns/control-image') .then(renderAndCheck) .then(done).catch(done); }); it('should render svg with width and heigth', function (done) { loadTestPage('svg-rect/dom-node.html', 'svg-rect/style.css', 'svg-rect/control-image') .then(renderAndCheck) .then(done).catch(done); }); it('should render whole node when its scrolled', function (done) { var domNode; loadTestPage('scroll/dom-node.html', 'scroll/style.css', 'scroll/control-image') .then(function () { domNode = $('#scrolled')[0]; }) .then(function () { return renderToPng(domNode); }) .then(makeImgElement) .then(function (image) { return drawImgElement(image, domNode); }) .then(compareToControlImage) .then(done).catch(done); }); it('should render text nodes', function (done) { this.timeout(10000); loadTestPage('text/dom-node.html', 'text/style.css') .then(renderToPng) .then(drawDataUrl) .then(assertTextRendered(['SOME TEXT', 'SOME MORE TEXT'])) .then(done).catch(done); }); it('should preserve content of ::before and ::after pseudo elements', function (done) { this.timeout(10000); loadTestPage('pseudo/dom-node.html', 'pseudo/style.css') .then(renderToPng) .then(drawDataUrl) .then(assertTextRendered(["JUSTBEFORE", "BOTHBEFORE"])) .then(assertTextRendered(["JUSTAFTER", "BOTHAFTER"])) .then(done).catch(done); }); it('should use node filter', function (done) { function filter(node) { if (node.classList) return !node.classList.contains('omit'); return true; } loadTestPage('filter/dom-node.html', 'filter/style.css', 'filter/control-image') .then(function () { return domtoimage.toPng(domNode(), { filter: filter }); }) .then(check) .then(done).catch(done); }); it('should not apply node filter to root node', function (done) { function filter(node) { if (node.classList) return node.classList.contains('include'); return false; } loadTestPage('filter/dom-node.html', 'filter/style.css', 'filter/control-image') .then(function () { return domtoimage.toPng(domNode(), { filter: filter }); }) .then(check) .then(done).catch(done); }); it('should render with external stylesheet', function (done) { loadTestPage('sheet/dom-node.html', 'sheet/style.css', 'sheet/control-image') .then(delay(1000)) .then(renderAndCheck) .then(done).catch(done); }); it('should render web fonts', function (done) { this.timeout(10000); loadTestPage('fonts/dom-node.html', 'fonts/style.css') .then(delay(1000)) .then(renderToPng) .then(drawDataUrl) .then(assertTextRendered(['O'])) .then(done).catch(done); }); it('should render images', function (done) { loadTestPage('images/dom-node.html', 'images/style.css') .then(delay(500)) .then(renderToPng) .then(drawDataUrl) .then(assertTextRendered(["PNG", "JPG"])) .then(done).catch(done); }); it('should render background images', function (done) { loadTestPage('css-bg/dom-node.html', 'css-bg/style.css') .then(renderToPng) .then(drawDataUrl) .then(assertTextRendered(["JPG"])) .then(done).catch(done); }); it('should render user input from