#493 Test applying styles to external SVG linked via img tag.

Copy the class attribute from img tag to svg tag so it can be better targetted.
danfickle · Jul 21, 2020 · 33ad1b5 · 33ad1b5
1 parent f038dd0
commit 33ad1b5
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 3 deletions.
diff --git a/...pdf-examples/src/main/resources/visualtest/expected/issue-493-svg-styles-linked-image.pdf b/...pdf-examples/src/main/resources/visualtest/expected/issue-493-svg-styles-linked-image.pdf
diff --git a/...ltopdf-examples/src/main/resources/visualtest/html/issue-493-svg-styles-linked-image.html b/...ltopdf-examples/src/main/resources/visualtest/html/issue-493-svg-styles-linked-image.html
@@ -0,0 +1,29 @@
+<html>
+<head>
+<style>
+@page {
+  size: 200px 500px;
+  margin: 0;
+}
+img {
+  display: block;
+}
+svg.redish circle {
+  fill: rgb(255,0,0) !important;
+}
+.greenish > circle {
+  fill: rgb(0,255,0) !important;
+}
+</style>
+</head>
+<body>
+ <!-- Reference blue circle -->
+ <img src="../../demos/images/circle.svg" alt="Circle" />
+
+ <!-- Red circle -->
+ <img class="redish" src="../../demos/images/circle.svg" alt="Circle" />
+
+ <!-- Small green circle -->
+ <img height="80" class="greenish" src="../../demos/images/circle.svg" alt="Circle" />
+</body>
+</html>
diff --git a/...-examples/src/test/java/com/openhtmltopdf/visualregressiontests/VisualRegressionTest.java b/...-examples/src/test/java/com/openhtmltopdf/visualregressiontests/VisualRegressionTest.java
@@ -738,6 +738,15 @@ public void testIssue493SVGStyles() throws IOException {
         assertTrue(vt.runTest("issue-493-svg-styles", TestSupport.WITH_SVG));
     }
 
+    /**
+     * Tests that styles applying to internal svg objects such as circle
+     * in a linked img tag are applied and passed to Batik for rendering.
+     */
+    @Test
+    public void testIssue493SVGStylesLinkedImage() throws IOException {
+        assertTrue(vt.runTest("issue-493-svg-styles-linked-image", TestSupport.WITH_SVG));
+    }
+
     /**
      * Tests that a broken image inside a table cell renders with a zero sized image rather
      * than crashing with a NPE. See issue 336.

diff --git a/...ltopdf-pdfbox/src/main/java/com/openhtmltopdf/pdfboxout/PdfBoxReplacedElementFactory.java b/...ltopdf-pdfbox/src/main/java/com/openhtmltopdf/pdfboxout/PdfBoxReplacedElementFactory.java
@@ -63,11 +63,18 @@ public ReplacedElement createReplacedElement(LayoutContext c, BlockBox box,
                 boolean isDataImageSvg = false;
                 if (_svgImpl != null && (srcAttr.endsWith(".svg") || (isDataImageSvg = srcAttr.startsWith("data:image/svg+xml;base64,")))) {
                     XMLResource xml = isDataImageSvg ? XMLResource.load(new ByteArrayInputStream(ImageUtil.getEmbeddedBase64Image(srcAttr))) : uac.getXMLResource(srcAttr);
-                    
+
                     if (xml != null) {
-                        return new PdfBoxSVGReplacedElement(xml.getDocument().getDocumentElement(), _svgImpl, cssWidth, cssHeight, box, c, c.getSharedContext());    
+                        Element svg = xml.getDocument().getDocumentElement();
+
+                        // Copy across the class attribute so it can be targetted with CSS.
+                        if (!e.getAttribute("class").isEmpty()) {
+                            svg.setAttribute("class", e.getAttribute("class"));
+                        }
+
+                        return new PdfBoxSVGReplacedElement(svg, _svgImpl, cssWidth, cssHeight, box, c, c.getSharedContext());    
                     }
-                    
+
                     return null;
                 } else if (srcAttr.endsWith(".pdf")) {
                     byte[] pdfBytes = uac.getBinaryResource(srcAttr);