Skip to content

Commit 35ad09c

Browse files
author
Alexandr Fedorov
committed
Flex: wrong items order in nested flex container with flex-wrap: wrap-reverse
DEVSIX-9449
1 parent 222c265 commit 35ad09c

13 files changed

+247
-3
lines changed

‎src/test/java/com/itextpdf/html2pdf/css/flex/FlexContainerTest.java‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -628,4 +628,19 @@ public void flexWrapReverseTest() throws IOException, InterruptedException {
628628
public void headerArticleNestedTest() throws IOException, InterruptedException {
629629
convertToPdfAndCompare("headerArticleNested", SOURCE_FOLDER, DESTINATION_FOLDER);
630630
}
631+
632+
@Test
633+
public void flexThirdLevelNestingSplitTest() throws IOException, InterruptedException {
634+
convertToPdfAndCompare("flexThirdLevelNestingSplit", SOURCE_FOLDER, DESTINATION_FOLDER);
635+
}
636+
637+
@Test
638+
public void severalFlexNestedSplitTest() throws IOException, InterruptedException {
639+
convertToPdfAndCompare("severalFlexNestedSplit", SOURCE_FOLDER, DESTINATION_FOLDER);
640+
}
641+
642+
@Test
643+
public void severalFlexThirdLevelNestingSplitTest() throws IOException, InterruptedException {
644+
convertToPdfAndCompare("severalFlexThirdLevelNestingSplit", SOURCE_FOLDER, DESTINATION_FOLDER);
645+
}
631646
}

‎src/test/java/com/itextpdf/html2pdf/css/flex/FlexJustifyContentTest.java‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,6 @@ public void inheritSpaceValuesTest() throws IOException, InterruptedException {
6161
}
6262

6363
@Test
64-
// TODO DEVSIX-9449 Flex: wrong items order in nested flex container with flex-wrap: wrap-reverse
6564
public void inheritWrapTest() throws IOException, InterruptedException {
6665
convertToPdfAndCompare("inheritWrap", SOURCE_FOLDER, DESTINATION_FOLDER);
6766
}
@@ -221,11 +220,19 @@ public void revertLayerTest() throws IOException, InterruptedException {
221220
@LogMessages(messages = {
222221
@LogMessage(messageTemplate = StyledXmlParserLogMessageConstant.INVALID_CSS_PROPERTY_DECLARATION, count = 6)
223222
})
224-
// TODO DEVSIX-9449 Flex: wrong items order in nested flex container with flex-wrap: wrap-reverse
223+
225224
public void revertWrapTest() throws IOException, InterruptedException {
226225
convertToPdfAndCompare("revertWrap", SOURCE_FOLDER, DESTINATION_FOLDER);
227226
}
228227

228+
@Test
229+
@LogMessages(messages = {
230+
@LogMessage(messageTemplate = StyledXmlParserLogMessageConstant.INVALID_CSS_PROPERTY_DECLARATION, count = 5)
231+
})
232+
public void nestedSplitOverflowRevertWrap() throws IOException, InterruptedException {
233+
convertToPdfAndCompare("nestedSplitOverflowRevertWrap", SOURCE_FOLDER, DESTINATION_FOLDER);
234+
}
235+
229236
@Test
230237
@LogMessages(messages = {
231238
@LogMessage(messageTemplate = Html2PdfLogMessageConstant.FLEX_PROPERTY_IS_NOT_SUPPORTED_YET, count = 5)
@@ -317,7 +324,7 @@ public void unsetFlexDirTest() throws IOException, InterruptedException {
317324
@LogMessages(messages = {
318325
@LogMessage(messageTemplate = Html2PdfLogMessageConstant.FLEX_PROPERTY_IS_NOT_SUPPORTED_YET, count = 3)
319326
})
320-
// TODO DEVSIX-9449 Flex: wrong items order in nested flex container with flex-wrap: wrap-reverse
327+
321328
public void unsetWrapTest() throws IOException, InterruptedException {
322329
convertToPdfAndCompare("unsetWrap", SOURCE_FOLDER, DESTINATION_FOLDER);
323330
}

‎src/test/resources/com/itextpdf/html2pdf/css/flex/FlexContainerTest/cmp_flexThirdLevelNestingSplit.pdf‎

3 KB
Binary file not shown.

‎src/test/resources/com/itextpdf/html2pdf/css/flex/FlexContainerTest/cmp_severalFlexNestedSplit.pdf‎

2.83 KB
Binary file not shown.

‎src/test/resources/com/itextpdf/html2pdf/css/flex/FlexContainerTest/cmp_severalFlexThirdLevelNestingSplit.pdf‎

2.94 KB
Binary file not shown.

‎src/test/resources/com/itextpdf/html2pdf/css/flex/FlexContainerTest/flexThirdLevelNestingSplit.html‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<title>Flexbox justify-content inheritance & resets with parent containers</title>
5+
<style>
6+
body {
7+
font-family: sans-serif; margin: 20px;
8+
}
9+
.parent {
10+
display: flex; border: 2px solid #444; margin-bottom: 20px;
11+
}
12+
.container {
13+
display: flex; border: 1px solid #666; height: 250px; width: 300px;
14+
}
15+
.box {
16+
background: lightcoral; padding: 20px; border: 1px solid #333; width: 60px; text-align: center;
17+
}
18+
.wrap {
19+
flex-wrap: wrap;
20+
}
21+
.wrapreverse {
22+
flex-wrap: wrap-reverse;
23+
}
24+
.heightDiv {
25+
height: 800px;
26+
}
27+
</style>
28+
</head>
29+
<body>
30+
31+
<div class="heightDiv"></div>
32+
<div class="parent" style="justify-content: space-between;">
33+
<div class="container wrapreverse">
34+
<div class="box">1</div>
35+
<div class="box">2</div>
36+
<div class="box">3</div>
37+
<div class="box">4</div>
38+
<div class="box">5</div>
39+
<div class="box">6</div>
40+
<div class="box">7</div>
41+
</div>
42+
</div>
43+
44+
<div class="parent" style="justify-content: space-evenly;">
45+
<div class="container wrapreverse">
46+
<div class="container wrapreverse">
47+
<div class="box">1</div>
48+
<div class="box">2</div>
49+
<div class="box">3</div>
50+
<div class="box">4</div>
51+
<div class="box">5</div>
52+
<div class="box">6</div>
53+
<div class="box">7</div>
54+
</div>
55+
</div>
56+
</div>
57+
</body>
58+
</html>

‎src/test/resources/com/itextpdf/html2pdf/css/flex/FlexContainerTest/severalFlexNestedSplit.html‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<title>Flexbox justify-content inheritance & resets with parent containers</title>
5+
<style>
6+
body {
7+
font-family: sans-serif; margin: 20px;
8+
}
9+
.parent {
10+
display: flex; border: 2px solid #444; margin-bottom: 20px;
11+
}
12+
.container {
13+
display: flex; border: 1px solid #666; height: 250px; width: 500;
14+
}
15+
.box {
16+
background: lightcoral; padding: 20px; border: 1px solid #333; width: 60px; text-align: center;
17+
}
18+
.wrap {
19+
flex-wrap: wrap;
20+
}
21+
.wrapreverse {
22+
flex-wrap: wrap-reverse;
23+
}
24+
.heightDiv {
25+
height: 650px;
26+
}
27+
</style>
28+
</head>
29+
<body>
30+
<div class="heightDiv"></div>
31+
32+
<div class="parent wrap" style="justify-content: space-between;">
33+
<div class="container wrapreverse">
34+
<div class="box">1</div>
35+
<div class="box">2</div>
36+
<div class="box">3</div>
37+
<div class="box">4</div>
38+
<div class="box">5</div>
39+
<div class="box">6</div>
40+
<div class="box">7</div>
41+
</div>
42+
<div class="container wrapreverse">
43+
<div class="container wrapreverse">
44+
<div class="box">1</div>
45+
<div class="box">2</div>
46+
<div class="box">3</div>
47+
<div class="box">4</div>
48+
<div class="box">5</div>
49+
<div class="box">6</div>
50+
<div class="box">7</div>
51+
</div>
52+
</div>
53+
</div>
54+
</body>
55+
</html>

‎src/test/resources/com/itextpdf/html2pdf/css/flex/FlexContainerTest/severalFlexThirdLevelNestingSplit.html‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<title>Flexbox justify-content inheritance & resets with parent containers</title>
5+
<style>
6+
body {
7+
font-family: sans-serif; margin: 20px;
8+
}
9+
.parent {
10+
display: flex; border: 2px solid #444; margin-bottom: 20px;
11+
}
12+
.container {
13+
display: flex; border: 1px solid #666; height: 250px; width: 500;
14+
}
15+
.box {
16+
background: lightcoral; padding: 20px; border: 1px solid #333; width: 60px; text-align: center;
17+
}
18+
.wrap {
19+
flex-wrap: wrap;
20+
}
21+
.wrapreverse {
22+
flex-wrap: wrap-reverse;
23+
}
24+
.heightDiv {
25+
height: 650px;
26+
}
27+
</style>
28+
</head>
29+
<body>
30+
<div class="heightDiv"></div>
31+
32+
<div class="parent wrap" style="justify-content: space-between;">
33+
<div class="container wrapreverse">
34+
<div class="container wrapreverse">
35+
<div class="box">1</div>
36+
<div class="box">2</div>
37+
<div class="box">3</div>
38+
<div class="box">4</div>
39+
<div class="box">5</div>
40+
<div class="box">6</div>
41+
<div class="box">7</div>
42+
</div>
43+
</div>
44+
<div class="container wrapreverse">
45+
<div class="container wrapreverse">
46+
<div class="container wrapreverse">
47+
<div class="box">1</div>
48+
<div class="box">2</div>
49+
<div class="box">3</div>
50+
<div class="box">4</div>
51+
<div class="box">5</div>
52+
<div class="box">6</div>
53+
<div class="box">7</div>
54+
</div>
55+
</div>
56+
</div>
57+
</div>
58+
</body>
59+
</html>

‎src/test/resources/com/itextpdf/html2pdf/css/flex/FlexJustifyContentTest/cmp_inheritWrap.pdf‎

0 Bytes
Binary file not shown.

‎src/test/resources/com/itextpdf/html2pdf/css/flex/FlexJustifyContentTest/cmp_nestedSplitOverflowRevertWrap.pdf‎

2.58 KB
Binary file not shown.

0 commit comments

Comments
 (0)