temporary fix: tsayen#125 Marker is not included(arrow)

Author: Aleksander Burzec

dist/dom-to-image.min.js

@@ -105,6 +105,12 @@
                     .then(done).catch(done);
             });
 
+            it('should render svg <line> with marker head in <defs> tag', function (done) {
+                loadTestPage('svg-arrow-head/dom-node.html', 'svg-arrow-head/style.css', 'svg-arrow-head/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')

spec/dom-to-image.spec.js

@@ -0,0 +1 @@
+data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAC3UlEQVR4Xu3bsW3bYBQE4NMCKVwYSJAt3HsCT5AqVdKkygL2BBkgA3gbL+IlFPxCFBCCFPLIX6d75Kn1s9/v+3gUIdi7PbBHXjYJ7BrIDtjZnGjDBzlYBMTnCgiIj8XhJAEJiFkCZsdJQwJiloDZcdKQgJglYHacOQ35CuAOwC+z32UVx2FBfgBoIO31GpT+1wAL8hPAl8ExgtLZhAVp64PSGWH44+aABMUQJChXQpnbkONxcvvqDLMUJE0xBAlKR5QeDcntyxQkTekA07MhaYopSJqyAOYaDUlTTEHSlBkw12xImmIKkqYQMIqGpCmmIGnKBBhlQ9IUU5A05T8wt2hImmIKkqacgbllQ9IUU5A0ZQDj0JA0xRQkTTH9h51N/+GE0y1r+Ba3WRRXkM3evpxB5qK8APgI4PuETyrsRtxBWJSG8fQ35QbyZpf4yIEqgExFGWK072kY5VpSBWQM5RTjeB2Wa0klkEsoHwa3qdMbQrmWVAM5RXkHcD9yWy7VkoogR5RHAJ8nvGmXaklVkEvvGZd8yrSkIgiLUeqJqxrIHIxST1yVQJZglGlJFZClGGVaUgHkE4BnAA8TnqjGRuyfuCqAHENuIN86wFg/cVUC6QVj3ZKKID1gbFtSGWQJjG1L1gAyF8ayJWsCYWEsW7JGEAbGriVrBpkCY9eSLYCMwVi1ZEsgl2CsWrJFkHMwNi3ZMsgQpn0s83vsgzDF1wOiSJnYERAiLMVoQBQpEzsCQoSlGA2IImViR0CIsBSjAVGkTOwICBGWYjQgipSJHQEhwlKMBkSRMrEjIERYitGAKFImdgSECEsxGhBFysSOgBBhKUYDokiZ2BEQIizFaEAUKRM7AkKEpRgNiCJlYkdAiLAUowFRpEzsCAgRlmI0IIqUiR0BIcJSjAZEkTKxIyBEWIrRgChSJnYEhAhLMRoQRcrEjoAQYSlGA6JImdgRECIsxeg/EMWy7JiWwB8pKgC7pb/IIwAAAABJRU5ErkJggg==

spec/resources/svg-arrow-head/control-image

@@ -0,0 +1,11 @@
+<div id="root">
+    <svg xmlns="http://www.w3.org/1999/xhtml" height="94px" width="94px">
+        <defs>
+            <marker id="arrow" markerWidth="10" markerHeight="10" refX="0" refY="3" orient="auto"
+                    markerUnits="strokeWidth">
+                <path d="M0,0 L0,6 L9,3 z" class="svg-line-head"/>
+            </marker>
+        </defs>
+        <line marker-end="url(#arrow)" x1="5" y1="5" x2="40" y2="40" class="svg-line"/>
+    </svg>
+</div>

spec/resources/svg-arrow-head/dom-node.html

@@ -0,0 +1,24 @@
+#dom-node {
+    width: 100px;
+    overflow: hidden;
+}
+
+#root {
+    border: 1px solid red;
+    position: relative;
+    height: 100px;
+}
+
+svg {
+    position: absolute;
+    left: 5px;
+    top: 5px;
+}
+.svg-line {
+    cursor: crosshair;
+    stroke: rgba(0, 0, 0, 0.8);
+    stroke-width: 3;
+}
+.svg-line-head {
+    fill: rgba(0, 0, 0, 0.8);
+}

spec/resources/svg-arrow-head/style.css

@@ -246,7 +246,10 @@
 
             function cloneStyle() {
                 copyStyle(window.getComputedStyle(original), clone.style);
-
+                // temporary fix of: https://github.com/tsayen/dom-to-image/issues/125
+                if (util.isChrome() && clone.style.marker && clone.tagName === 'line') {
+                    clone.style.marker = '';
+                }
                 function copyStyle(source, target) {
                     target.fontStretch == '';
                     if (source.cssText) {
@@ -385,7 +388,8 @@
             escapeXhtml: escapeXhtml,
             makeImage: makeImage,
             width: width,
-            height: height
+            height: height,
+            isChrome: isChrome,
         };
 
         function mimes() {
@@ -596,6 +600,10 @@
             var value = window.getComputedStyle(node).getPropertyValue(styleProperty);
             return parseFloat(value.replace('px', ''));
         }
+
+        function isChrome() {
+            return /chrome/i.test( navigator.userAgent );
+        }
     }
 
     function newInliner() {