Better default styles computation.

spec/dom-to-image-more.spec.js

@@ -18,6 +18,7 @@
 
         describe('regression', function () {
             it('should render to svg', function (done) {
+                this.timeout(5000);
                 loadTestPage(
                     'small/dom-node.html',
                     'small/style.css',
@@ -131,6 +132,7 @@
             });
 
             it('should render nested svg with broken namespace', function (done) {
+                this.timeout(5000);
                 loadTestPage(
                     'svg-ns/dom-node.html',
                     'svg-ns/style.css',
@@ -377,6 +379,7 @@
             });
 
             it('should render bgcolor in SVG', function (done) {
+                this.timeout(5000);
                 loadTestPage(
                     'bgcolor/dom-node.html',
                     'bgcolor/style.css',
@@ -531,6 +534,7 @@
             });
 
             it('should honor zero-padding table elements', function (done) {
+                this.timeout(5000);
                 loadTestPage(
                     'padding/dom-node.html',
                     'padding/style.css',
@@ -541,24 +545,48 @@
                     .catch(done);
             });
 
+            it('should not get fooled by math elements', function (done) {
+                this.timeout(5000);
+                loadTestPage(
+                    'math/dom-node.html',
+                    null,
+                    'math/control-image'
+                )
+                    .then(function () {
+                        return domtoimage.toPng(domNode(), { width: 500, height: 100 });
+                    })
+                    .then(function (dataUrl) {
+                        return drawDataUrl(dataUrl, { width: 500, height: 100 });
+                    })
+                    .then(compareToControlImage)
+                    .then(done)
+                    .catch(done);
+            });
+
             function compareToControlImage(image) {
-                const control = controlImage();
-                const imageUrl = getImageBase64(image, 'image/png');
-                const controlUrl = getImageBase64(control, 'image/png');
-                assert.equal(
-                    imageUrl,
-                    controlUrl,
-                    'rendered and control images should be same'
-                );
+                const imageUrl = getImageDataURL(image, 'image/png');
+                const controlUrl = getImageDataURL(controlImage(), 'image/png');
+
                 if (imageUrl !== controlUrl) {
                     console.log(`        image: ${image.src}`);
                     console.log(`  imageBase64: ${imageUrl}`);
                     console.log(`controlBase64: ${controlUrl}`);
                 }
+                assert.equal(
+                    imageUrl,
+                    controlUrl,
+                    'rendered and control images should be same'
+                );
             }
-
-            function getImageBase64(image, mimetype) {
-                return canvas().toDataURL(image, mimetype);
+
+            function getImageDataURL(image, mimetype) {
+                var canvas = document.createElement('canvas');
+                var context = canvas.getContext('2d');
+                canvas.height = image.naturalHeight;
+                canvas.width = image.naturalWidth;
+                canvas.imageSmoothingEnabled = false;
+                context.drawImage(image, 0, 0);
+                return canvas.toDataURL(mimetype);
             }
 
             function renderAndCheck() {
@@ -598,33 +626,28 @@
             }
 
             function makeImgElement(src) {
-                return new Promise(function (resolve) {
+                return new Promise(function (resolve, reject) {
                     const image = new Image();
                     image.onload = function () {
                         resolve(image);
                     };
+                    image.onerror = function (ev) {
+                        reject(ev);
+                    };
                     image.src = src;
                 });
             }
 
             function drawImgElement(image, node, dimensions) {
                 node = node || domNode();
                 dimensions = dimensions || {};
-                canvas().height = dimensions.height || node.offsetHeight.toString();
-                canvas().width = dimensions.width || node.offsetWidth.toString();
-                canvas().getContext('2d').imageSmoothingEnabled = false;
-                canvas().getContext('2d').drawImage(image, 0, 0);
+                const c = canvas();
+                c.height = dimensions.height || node.offsetHeight.toString();
+                c.width = dimensions.width || node.offsetWidth.toString();
+                c.getContext('2d').imageSmoothingEnabled = false;
+                c.getContext('2d').drawImage(image, 0, 0);
                 return image;
             }
-
-            function cloneCatcher(clone) {
-                clonedNode().replaceChildren(clone);
-                return clone;
-            }
-
-            function renderToPng(node) {
-                return domtoimage.toPng(node || domNode(), { onclone: cloneCatcher });
-            }
         });
 
         describe('inliner', function () {
@@ -853,36 +876,79 @@
             });
         });
 
+        describe('styles', function () {
+            it('should compute correct keys', function (done) {
+                this.timeout(30000);
+                let one = Promise.allSettled([
+                    loadTestPage('padding/dom-node.html', 'padding/style.css', 'padding/control-image')
+                        .then((node) => renderToSvg(node, { styleCaching: 'strict' }))])
+                    .then(
+                        (promises) => promises[0].value
+                    );
+                let two = Promise.allSettled([
+                    loadTestPage('padding/dom-node.html', 'padding/style.css', 'padding/control-image')
+                        .then((node) => renderToSvg(node, { styleCaching: 'relaxed' }))])
+                    .then(
+                        (promises) => promises[0].value
+                    );
+
+                Promise.allSettled([one, two])
+                    .then(function (promises) {
+                        const strict = promises[0].value;
+                        const relaxed = promises[1].value;
+                        if (strict !== relaxed) {
+                            console.log(`\n\nstrict: ${strict}\n\nrelaxed: ${relaxed}\n\n`);
+                        }
+                        assert.equal(strict, relaxed, 'SVG rendered be same');
+                    })
+                    .then(done)
+                    .catch(done);
+            });
+        });
+
         function loadTestPage(html, css, controlImage) {
             return loadPage()
-                .then(function () {
-                    return getResource(html).then(function (html) {
-                        $('#dom-node').html(html);
-                    });
+                .then(function (document) {
+                    if (!html) 
+                        return document;
+
+                    return getResource(html)
+                        .then(function (html) {
+                            $('#dom-node').html(html);
+                            return document;
+                        });
                 })
-                .then(function () {
-                    if (css) {
-                        return getResource(css).then(function (css) {
+                .then(function (document) {
+                    if (!css)
+                        return document;
+
+                    return getResource(css)
+                        .then(function (css) {
                             $('#style').append(document.createTextNode(css));
+                            return document;
                         });
-                    }
                 })
-                .then(function () {
-                    if (controlImage) {
-                        return getResource(controlImage).then(function (image) {
+                .then(function (document) {
+                    if (!controlImage)
+                        return document;
+
+                    return getResource(controlImage)
+                        .then(function (image) {
                             $('#control-image').attr('src', image);
+                            return document;
                         });
-                    }
                 });
         }
 
         function loadPage() {
-            return getResource('page.html').then(function (html) {
-                const root = document.createElement('div');
-                root.id = 'test-root';
-                root.innerHTML = html;
-                document.body.appendChild(root);
-            });
+            return getResource('page.html')
+                .then(function (html) {
+                    const root = document.createElement('div');
+                    root.id = 'test-root';
+                    root.innerHTML = html;
+                    document.body.appendChild(root);
+                    return document;
+                });
         }
 
         function purgePage() {
@@ -925,5 +991,19 @@
                 request.send();
             });
         }
+
+        function renderToPng() {
+            return domtoimage.toPng(domNode(), { onclone: cloneCatcher });
+        }
+
+        function renderToSvg(options) {
+            const debugOptions = { onclone: cloneCatcher, debugCache: true };
+            return domtoimage.toSvg(domNode(), Object.assign(debugOptions, options));
+        }
+
+        function cloneCatcher(clone) {
+            clonedNode().replaceChildren(clone);
+            return clone;
+        }
     });
 })(this);

spec/resources/math/control-image

@@ -0,0 +1 @@
+data:image/png;base64,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

spec/resources/math/dom-node.html

@@ -0,0 +1,34 @@
+<div>
+    The infinite sum <math display="inline">
+        <mrow>
+            <munderover>
+                <mo>∑</mo>
+                <mrow>
+                    <mi>n</mi>
+                    <mo>=</mo>
+                    <mn>1</mn>
+                </mrow>
+                <mrow>
+                    <mo>+</mo>
+                    <mn>∞</mn>
+                </mrow>
+            </munderover>
+            <mfrac>
+                <mn>1</mn>
+                <msup>
+                    <mi>n</mi>
+                    <mn>2</mn>
+                </msup>
+            </mfrac>
+        </mrow>
+    </math>
+    <br /> Is equal to the real number <math display="inline">
+        <mfrac>
+            <msup>
+                <mi>π</mi>
+                <mn>2</mn>
+            </msup>
+            <mn>6</mn>
+        </mfrac>
+    </math>
+</div>