Fix resolving display:none css style not correctly for flex children

AnhelinaM · AnhelinaM · commit 6fff5bea6e84 · 2022-04-22T13:02:07.000+03:00
DEVSIX-6547
diff --git a/src/main/java/com/itextpdf/html2pdf/css/resolve/DefaultCssResolver.java b/src/main/java/com/itextpdf/html2pdf/css/resolve/DefaultCssResolver.java
@@ -202,10 +202,12 @@ private Map<String, String> resolveStyles(INode element, CssContext context) {
                             CommonCssConstants.FONT_SIZE), inheritanceRules);
 
                     // If the parent has display: flex, the flex item is blockified
-                    // no matter what display value is set for it.
+                    // no matter what display value is set for it (except 'none' value).
                     // See CSS Flexible Box Layout Module Level 1,
                     // W3C Candidate Recommendation, 19 November 2018: 4. Flex Items.
-                    if (isFlexItem(entry, elementStyles.get(CssConstants.DISPLAY))) {
+                    final String currentElementDisplay = elementStyles.get(CssConstants.DISPLAY);
+                    if (isFlexItem(entry, currentElementDisplay) &&
+                            !CommonCssConstants.NONE.equals(currentElementDisplay)) {
                         elementStyles.put(CssConstants.DISPLAY, CssConstants.BLOCK);
                     }
                 }
diff --git a/src/test/java/com/itextpdf/html2pdf/css/DisplayFlexTest.java b/src/test/java/com/itextpdf/html2pdf/css/DisplayFlexTest.java
@@ -485,6 +485,11 @@ public void marginsCollapseInsideFlexItemTest() throws IOException, InterruptedE
         convertToPdfAndCompare("marginsCollapseInsideFlexItem", SOURCE_FOLDER, DESTINATION_FOLDER);
     }
 
+    @Test
+    public void resolveStylesIfParentHasDisplayFlexStyleTest() throws IOException, InterruptedException {
+        convertToPdfAndCompare("displayNoneTest", SOURCE_FOLDER, DESTINATION_FOLDER);
+    }
+
     private static void assertDiv(IElement element, String text) {
         Assert.assertTrue(element instanceof Div);
         Assert.assertEquals(1, ((Div) element).getChildren().size());
diff --git a/src/test/resources/com/itextpdf/html2pdf/css/DisplayFlexTest/cmp_displayNoneTest.pdf b/src/test/resources/com/itextpdf/html2pdf/css/DisplayFlexTest/cmp_displayNoneTest.pdf
diff --git a/src/test/resources/com/itextpdf/html2pdf/css/DisplayFlexTest/displayNoneTest.html b/src/test/resources/com/itextpdf/html2pdf/css/DisplayFlexTest/displayNoneTest.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<style>
+		*[parent]:not([parent~="z"]) {
+			display: flex;
+		}
+		*[child1]:not([child1~="z"]) {
+			display: none;
+		}
+        *[child2]:not([child2~="z"]) {
+			display: block;
+		}
+	</style>
+    <meta charset="UTF-8">
+    <title>Title</title>
+</head>
+<body>
+<div class="fieldLabel" parent="v"> FlexParent
+	<div class="fieldLabe2" child1="w"> , NoneChild </div>
+    <div class="fieldLabe2" child2="x"> , BlockChild </div>
+</div>
+<div class="fieldLabe3"> NoneChild should be unvisible </div>
+</body>
+</html>

Original file line number	Diff line number	Diff line change
`@@ -202,10 +202,12 @@ private Map<String, String> resolveStyles(INode element, CssContext context) {`
`202`	`202`	`CommonCssConstants.FONT_SIZE), inheritanceRules);`
`203`	`203`
`204`	`204`	`// If the parent has display: flex, the flex item is blockified`
`205`		`- // no matter what display value is set for it.`
	`205`	`+ // no matter what display value is set for it (except 'none' value).`
`206`	`206`	`// See CSS Flexible Box Layout Module Level 1,`
`207`	`207`	`// W3C Candidate Recommendation, 19 November 2018: 4. Flex Items.`
`208`		`- if (isFlexItem(entry, elementStyles.get(CssConstants.DISPLAY))) {`
	`208`	`+ final String currentElementDisplay = elementStyles.get(CssConstants.DISPLAY);`
	`209`	`+ if (isFlexItem(entry, currentElementDisplay) &&`
	`210`	`+ !CommonCssConstants.NONE.equals(currentElementDisplay)) {`
`209`	`211`	`elementStyles.put(CssConstants.DISPLAY, CssConstants.BLOCK);`
`210`	`212`	`}`
`211`	`213`	`}`