Eliminate the entire raster/vector path (#91)

Fixes `toSvg` regression for explicit CSS values equal to `inherit` #90 by killing off the entire raster/vector decision path and always using the `copyUserComputedStyleFast` method.
Cleaned up unit testing a bit more and moved to the npm packaged version of imagediff.

.github/workflows/codeql-analysis.yml → .github/workflows/codeql-analysis-v2.yml

@@ -13,12 +13,12 @@ name: "CodeQL"
 
 on:
   push:
-    branches: [ master ]
+    branches: [ "master" ]
   pull_request:
     # The branches below must be a subset of the branches above
-    branches: [ master ]
+    branches: [ "master" ]
   schedule:
-    - cron: '45 3 * * 3'
+    - cron: '17 11 * * 1'
 
 jobs:
   analyze:
@@ -34,37 +34,43 @@ jobs:
       matrix:
         language: [ 'javascript' ]
         # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
-        # Learn more about CodeQL language support at https://git.io/codeql-language-support
+        # Use only 'java' to analyze code written in Java, Kotlin or both
+        # Use only 'javascript' to analyze code written in JavaScript, TypeScript or both
+        # Learn more about CodeQL language support at https://aka.ms/codeql-docs/language-support
 
     steps:
     - name: Checkout repository
-      uses: actions/checkout@v2
+      uses: actions/checkout@v3
 
     # Initializes the CodeQL tools for scanning.
     - name: Initialize CodeQL
-      uses: github/codeql-action/init@v1
+      uses: github/codeql-action/init@v2
       with:
         languages: ${{ matrix.language }}
         # If you wish to specify custom queries, you can do so here or in a config file.
         # By default, queries listed here will override any specified in a config file.
         # Prefix the list here with "+" to use these queries and those in the config file.
-        # queries: ./path/to/local/query, your-org/your-repo/queries@main
 
-    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
+        # Details on CodeQL's query packs refer to : https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
+        # queries: security-extended,security-and-quality
+
+
+    # Autobuild attempts to build any compiled languages  (C/C++, C#, Go, or Java).
     # If this step fails, then you should remove it and run the build manually (see below)
     - name: Autobuild
-      uses: github/codeql-action/autobuild@v1
+      uses: github/codeql-action/autobuild@v2
 
     # ℹ️ Command-line programs to run using the OS shell.
-    # 📚 https://git.io/JvXDl
+    # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
 
-    # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
-    #    and modify them (or add more) to build your code if your project
-    #    uses a compiled language
+    #   If the Autobuild fails above, remove it and uncomment the following three lines.
+    #   modify them (or add more) to build your code if your project, please refer to the EXAMPLE below for guidance.
 
-    #- run: |
-    #   make bootstrap
-    #   make release
+    # - run: |
+    #   echo "Run, Build Application using script"
+    #   ./location_of_script_within_repo/buildscript.sh
 
     - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v1
+      uses: github/codeql-action/analyze@v2
+      with:
+        category: "/language:${{matrix.language}}"

README.md

@@ -246,6 +246,7 @@ for you, following steps are taken:
    `npm install @types/dom-to-image --save-dev`
 
 2. Create dom-to-image-more type definition (`dom-to-image-more.d.ts`)
+
    ```javascript
    declare module 'dom-to-image-more' {
     import domToImage = require('dom-to-image');
@@ -267,8 +268,8 @@ for you, following steps are taken:
 
 Marc Brooks, Anatolii Saienko (original dom-to-image), Paul Bakaus (original idea),
 Aidas Klimas (fixes), Edgardo Di Gesto (fixes), 樊冬 Fan Dong (fixes), Shrijan Tripathi (docs),
-SNDST00M (optimize), Joseph White (performance CSS), Phani Rithvij (test), 
-David DOLCIMASCOLO (packaging)
+SNDST00M (optimize), Joseph White (performance CSS), Phani Rithvij (test),
+David DOLCIMASCOLO (packaging), @meche-gh (node copy cleaning)
 
 ## License
 

karma.conf.js

@@ -19,7 +19,7 @@ module.exports = function(config) {
             },
 
             'test-lib/jquery/dist/jquery.js',
-            'test-lib/js-imagediff/imagediff.js',
+            'node_modules/imagediff/imagediff.js',
             'test-lib/tesseract-1.0.19.js',
 
             'src/dom-to-image-more.js',
@@ -40,12 +40,12 @@ module.exports = function(config) {
         customLaunchers: {
             chrome: {
                 base: 'Chrome',
-                flags: ['--no-sandbox'],
+                flags: ['--no-sandbox --remote-debugging-port=9876'],
                 debug: true
             }
         },
 
         singleRun: false,
-        browserNoActivityTimeout: 60000
+        browserNoActivityTimeout: 300000
     });
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dom-to-image-more",
-  "version": "2.13.0",
+  "version": "2.13.1",
   "description": "Generates an image from a DOM node using HTML5 canvas and SVG",
   "main": "dist/dom-to-image-more.min.js",
   "devDependencies": {
@@ -11,6 +11,7 @@
     "grunt-contrib-uglify": "^5.2.2",
     "grunt-contrib-watch": "^1.1.0",
     "grunt-karma": "^4.0.2",
+    "imagediff": "^1.0.8",
     "js-yaml": "^4.1.0",
     "karma": "^6.4.1",
     "karma-chai": "^0.1.0",
@@ -48,7 +49,8 @@
     "Joseph White @JosWhite",
     "Phani Rithvij @phanirithvij",
     "David DOLCIMASCOLO @ddolcimascolo",
-    "Nikita Staroseltsev @Nikitozz13"
+    "Nikita Staroseltsev @Nikitozz13",
+    "@meche-gh"
   ],
   "license": "MIT",
   "bugs": {

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

@@ -196,7 +196,7 @@
                     .then(done).catch(done);
             });
 
-            it.skip('should render iframe of street view', function (done) {
+            it('should render iframe of street view', function (done) {
                 this.timeout(60000);
                 loadTestPage('iframe/street-view.html', 'iframe/style.css', 'iframe/control-image')
                     .then(renderAndCheck)
@@ -260,7 +260,7 @@
                 loadTestPage('bgcolor/dom-node.html', 'bgcolor/style.css', 'bgcolor/control-image')
                     .then(function () {
                         return domtoimage.toPng(domNode(), {
-                            bgcolor: "#ff0000"
+                            bgcolor: "#ffff00"
                         });
                     })
                     .then(check)
@@ -271,7 +271,7 @@
                 loadTestPage('bgcolor/dom-node.html', 'bgcolor/style.css', 'bgcolor/control-image')
                     .then(function () {
                         return domtoimage.toSvg(domNode(), {
-                            bgcolor: "#ff0000"
+                            bgcolor: "#ffff00"
                         });
                     })
                     .then(check)
@@ -353,11 +353,9 @@
                         return domtoimage.toPng(domNode());
                     })
                     .then(check)
-                    .then(done)
-                    .catch(done);
+                    .then(done).catch(done);
             });
 
-
             it('should combine dimensions and style', function (done) {
                 loadTestPage('scale/dom-node.html', 'scale/style.css', 'scale/control-image')
                     .then(function () {
@@ -377,6 +375,15 @@
                     .then(done).catch(done);
             });
 
+            it('should render svg style attributes', function (done) {
+                loadTestPage('svg-styles/dom-node.html', 'svg-styles/style.css', 'svg-styles/control-image')
+                    .then(function () {
+                        return domtoimage.toSvg(domNode());
+                    })
+                    .then(check)
+                    .then(done).catch(done);
+            });
+
             function compareToControlImage(image, tolerance) {
                 const control = controlImage();
                 if (imagediff.equal(image, control, tolerance)) {
@@ -385,10 +392,11 @@
                     // get the data representation so we can update the control images easily
                     const imageUrl = getImageBase64(image, 'image/png');
                     const controlUrl = getImageBase64(control, 'image/png');
-                    const same = assert.equal(imageUrl, controlUrl, 'rendered and control images should be same');
-                    if (!same) {
-                        console.log(`  image: ${imageUrl}`);
-                        console.log(`control: ${controlUrl}`);
+                    assert.equal(imageUrl, controlUrl, 'rendered and control images should be same');
+                    if (imageUrl !== controlUrl) {
+                        console.log(`        image: ${image.src}`);
+                        console.log(`  imageBase64: ${imageUrl}`);
+                        console.log(`controlBase64: ${controlUrl}`);
                     }
                 }
             }
@@ -543,7 +551,8 @@
                 domtoimage.impl.util.getAndEncode(`${BASE_URL}util/not-found`)
                     .then(function (resource) {
                         assert.equal(resource, '');
-                    }).then(done).catch(done);
+                    })
+                    .then(done).catch(done);
             });
 
             it('should return placeholder result if cannot get resource and placeholder is provided', function (done) {
@@ -555,7 +564,8 @@
                         const placeholderData = placeholder.split(/,/)[1];
                         assert.equal(resource, placeholderData);
                         domtoimage.impl.options.imagePlaceholder = original;
-                    }).then(done).catch(done);
+                    })
+                    .then(done).catch(done);
             });
 
             it('should parse extension', function () {

spec/resources/bgcolor/control-image

@@ -1 +1 @@
-data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAABAUlEQVR4nO3RsQ0AIADDsP7/NJxBhDx4r5ptOz84n9jrIwURJE2QGEFiBIkRJEaQGEFiBIkRJEaQGEFiBIkRJEaQGEFiBIkRJEaQGEFiBIkRJEaQGEFiBIkRJEaQGEFiBIkRJEaQGEFiBIkRJEaQGEFiBIkRJEaQGEFiBIkRJEaQGEFiBIkRJEaQGEFiBInZ6wEIkiZIjCAxgsQIEiNIjCAxgsQIEiNIjCAxgsQIEiNIjCAxgsQIEiNIjCAxgsQIEiNIjCAxgsQIEiNIjCAxgsQIEiNIjCAxgsQIEiNIjCAxgsQIEiNIjCAxgsQIEiNIjCAxgsQIEiNIjCAxgsQIEnMB2SoboVG5JJoAAAAASUVORK5CYII=
+data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAAXNSR0IArs4c6QAAAdxJREFUeF7t3MGJw1AUQ9HvCjL9V+kOPB1kIVAQ5nj/ZPleRHa57vt+zguez+fvBV9xzkXIlkdCtnxYyJgPQggpEfCjXgKbxhKSkivdEVICm8YSkpIr3RFSApvGEpKSK90RUgKbxhKSkivdEVICm8YSkpIr3RFSApvGEpKSK90RUgKbxhKSkivdEVICm8YSkpIr3RFSApvGEpKSK90RUgKbxhKSkivdEVICm8YSkpIr3RFSApvGEpKSK90RUgKbxhKSkivdEVICm8YSkpIr3RFSApvGEpKSK90RUgKbxhKSkivdEVICm8YSkpIr3RFSApvGEpKSK90RUgKbxhKSkivdEVICm8YSkpIr3RFSApvGEpKSK90RUgKbxhKSkivdvUbI85xX/KNcyfPPYy9Cfs786wsJ2fJxCCFkjMBYHQshZIzAWB0LIWSMwFgdCyFkjMBYHQshZIzAWB0LIWSMwFgdCyFkjMBYHQshZIzAWB0LIWSMwFgdCyFkjMBYHQshZIzAWB0LIWSMwFgdCyFkjMBYHQshZIzAWB0LIWSMwFgdCyFkjMBYHQshZIzAWB0LIWSMwFgdCyFkjMBYHQshZIzAWB0LIWSMwFgdCyFkjMBYHQshZIzAWB0LGRPyD33xXUh8cFpQAAAAAElFTkSuQmCC

spec/resources/bgcolor/style.css

@@ -6,5 +6,5 @@
 #content {
     height: 50px;
     width: 50px;
-    background-color: black;
+    background-color: #f0f0f0;
 }

spec/resources/page.html

@@ -18,5 +18,5 @@ <h1>rendered image</h1>
 
 <div>
     <h1>control image</h1>
-    <img id="control-image">
-</div>
+    <img id="control-image" alt="What we loaded from the spec">
+</div>

spec/resources/svg-styles/control-image

@@ -0,0 +1 @@
+data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100"><foreignObject x="0" y="0" width="100%" height="100%"><div id="dom-node" xmlns="http://www.w3.org/1999/xhtml" style="background-color: rgb(211, 211, 211); block-size: 100px; box-sizing: border-box; height: 100px; inline-size: 200px; padding-block: 16px; padding: 16px; padding-inline: 16px; perspective-origin: 100px 50px; text-align: center; transform-origin: 100px 50px; width: 200px;"><span style="background-color: rgba(0, 0, 0, 0); block-size: auto; box-sizing: border-box; display: inline; height: auto; inline-size: auto; padding-block: 0px; padding: 0px; padding-inline: 0px; perspective-origin: 0px 0px; text-align: center; transform-origin: 0px 0px; width: auto;"><a href="%23dom-node" style="box-sizing: border-box; cursor: pointer; text-align: center; text-decoration: underline solid rgb(0, 0, 0); -webkit-text-decorations-in-effect: underline;">dom-to-image-more/issues/90</a></span></div></foreignObject></svg>

spec/resources/svg-styles/dom-node.html

@@ -0,0 +1 @@
+<span><a href='#dom-node'>dom-to-image-more/issues/90</a></span>

spec/resources/svg-styles/readme.md

@@ -0,0 +1 @@
+This is a repro for [#90]

spec/resources/svg-styles/style.css

@@ -0,0 +1,12 @@
+#dom-node {
+    color: #000000;
+    height: 100px;
+    width: 200px;
+    background-color: lightgrey;
+    text-align: center;
+    padding: 1em;
+  }
+
+  a[href="#dom-node"] {
+    color: #000000;
+  }