Fixes #211 - Images in content property now work as inline-blocks.

With test proof.
danfickle · Mar 9, 2020 · 1d9ff98 · 1d9ff98
1 parent 373a7f2
commit 1d9ff98
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 18 deletions.
diff --git a/openhtmltopdf-core/src/main/java/com/openhtmltopdf/layout/BoxBuilder.java b/openhtmltopdf-core/src/main/java/com/openhtmltopdf/layout/BoxBuilder.java
@@ -813,8 +813,8 @@ private static List<Styleable> createGeneratedContentList(
 
                 BlockBox iB = new BlockBox();
                 iB.setElement(img);
-                iB.setPseudoElementOrClass(peName);
-                iB.setStyle(style.createAnonymousStyle(IdentValue.INLINE_BLOCK));
+                CalculatedStyle anon = new EmptyStyle().createAnonymousStyle(IdentValue.INLINE_BLOCK);
+                iB.setStyle(anon);
 
                 info.setContainsBlockLevelContent(true);
 
@@ -955,36 +955,34 @@ private static List<Styleable> createGeneratedContent(
         if (childInfo.isContainsBlockLevelContent()) {
             List<Styleable> inlines = new ArrayList<>();
 
-            BlockBox result = createBlockBox(style.createAnonymousStyle(IdentValue.INLINE_BLOCK), info, true);
+            CalculatedStyle anonStyle = style.isInlineBlock() || style.isInline() ?
+                           style : style.createAnonymousStyle(IdentValue.INLINE_BLOCK);
 
-            result.setStyle(style.createAnonymousStyle(IdentValue.INLINE_BLOCK));
+            BlockBox result = createBlockBox(style, info, true);
+            result.setStyle(anonStyle);
             result.setElement(element);
-            result.setChildrenContentType(BlockBox.CONTENT_BLOCK);
+            result.setChildrenContentType(BlockBox.CONTENT_INLINE);
             result.setPseudoElementOrClass(peName);
 
             CalculatedStyle anon = style.createAnonymousStyle(IdentValue.INLINE);
-
             for (Iterator<Styleable> i = inlineBoxes.iterator(); i.hasNext();) {
-               Styleable b = (Styleable) i.next();
+               Styleable b = i.next();
 
                if (b instanceof BlockBox) {
-                   if (!inlines.isEmpty()) {
-                       createAnonymousInlineBlock(c.getSharedContext(), result, inlines, null);
-                       inlines.clear();
-                   }
-                   result.addChild((BlockBox) b);
+                   inlines.add(b);
                } else {
                    InlineBox iB = (InlineBox) b;
 
                    iB.setStyle(anon);
                    iB.applyTextTransform();
+                   iB.setElement(null);
 
                    inlines.add(iB);
                }
             }
 
             if (!inlines.isEmpty()) {
-                createAnonymousInlineBlock(c.getSharedContext(), result, inlines, null);
+                result.setInlineContent(inlines);
             }
             return Collections.singletonList(result);
         } else if (style.isInline()) {

diff --git a/...mltopdf-examples/src/main/resources/visualtest/expected/content-property-capabilities.pdf b/...mltopdf-examples/src/main/resources/visualtest/expected/content-property-capabilities.pdf
diff --git a/openhtmltopdf-examples/src/main/resources/visualtest/html/content-property-capabilities.html b/openhtmltopdf-examples/src/main/resources/visualtest/html/content-property-capabilities.html
@@ -11,9 +11,10 @@
     }
 }
 @page:first {
-    margin-top: 100px;
+    margin-top: 140px;
     @top-center {
-        content: url(../../demos/images/flyingsaucer.png);
+        border: 1px solid blue;
+        content: url(../../demos/images/flyingsaucer.png) "..." url(../../demos/images/flyingsaucer.png);
     }
 }
 body {
@@ -31,14 +32,17 @@
     content: attr(data-msg);
 }
 #three::after {
-    content: url(../../demos/images/flyingsaucer.png);
+    display: inline-block;
+    border: 2px solid pink;
+    background-color: orange;
+    content: url(../../demos/images/flyingsaucer.png) "..." url(../../demos/images/flyingsaucer.png);
 }
 </style>
 </head>
 <body>
   <a id="zero" href="#three" style="display: inline-block;width: 100%;"></a>
   <div id="one">ONE</div>
   <div id="two" data-msg="HELLO"> WORLD</div>
-  <div id="three" style="page-break-before: always;width: 150%; background-color: black;color: white;">With images: </div>
+  <div id="three" style="page-break-before: always;width: 150%; background-color: gray;color: white;">With images: </div>
 </body>
 </html>
diff --git a/...-examples/src/test/java/com/openhtmltopdf/visualregressiontests/VisualRegressionTest.java b/...-examples/src/test/java/com/openhtmltopdf/visualregressiontests/VisualRegressionTest.java
@@ -1011,7 +1011,6 @@ public void testIssue446LangSelector() throws IOException {
      * Tests what the CSS content property is capable of.
      */
     @Test
-    @Ignore // Working but with content images behaving as blocks rather than inline-blocks.
     public void testContentPropertyCapabilities() throws IOException {
         assertTrue(vt.runTest("content-property-capabilities"));
     }