Skip to content

Commit ef7b31c

Browse files
nanouhnanouh
committed
Add tests for flex containers
DEVSIX-9451
1 parent f4279a7 commit ef7b31c

File tree

211 files changed

+6649
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

211 files changed

+6649
-0
lines changed

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

Lines changed: 621 additions & 0 deletions
Large diffs are not rendered by default.

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

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Flex Align-Content A</title>
6+
<style>
7+
a {
8+
display: flex;
9+
flex-wrap: wrap;
10+
gap: 10px;
11+
width: 260px;
12+
height: 180px;
13+
border: 2px solid #333;
14+
background: #f9f9f9;
15+
text-decoration: none;
16+
}
17+
div.item {
18+
width: 100px;
19+
height: 40px;
20+
background: lightblue;
21+
border: 1px solid #666;
22+
display: flex;
23+
justify-content: center;
24+
align-items: center;
25+
}
26+
.stretch div.item { height: auto; }
27+
</style>
28+
</head>
29+
<body>
30+
31+
<a style="align-content: flex-start;">
32+
<div class="item">1</div><div class="item">2</div><div class="item">3</div>
33+
<div class="item">4</div><div class="item">5</div><div class="item">6</div>
34+
</a>
35+
36+
<a style="align-content: flex-end;">
37+
<div class="item">1</div><div class="item">2</div><div class="item">3</div>
38+
<div class="item">4</div><div class="item">5</div><div class="item">6</div>
39+
</a>
40+
41+
<a style="align-content: center;">
42+
<div class="item">1</div><div class="item">2</div><div class="item">3</div>
43+
<div class="item">4</div><div class="item">5</div><div class="item">6</div>
44+
</a>
45+
46+
<a style="align-content: space-between;">
47+
<div class="item">1</div><div class="item">2</div><div class="item">3</div>
48+
<div class="item">4</div><div class="item">5</div><div class="item">6</div>
49+
</a>
50+
51+
<a style="align-content: space-around;">
52+
<div class="item">1</div><div class="item">2</div><div class="item">3</div>
53+
<div class="item">4</div><div class="item">5</div><div class="item">6</div>
54+
</a>
55+
56+
<a style="align-content: space-evenly;">
57+
<div class="item">1</div><div class="item">2</div><div class="item">3</div>
58+
<div class="item">4</div><div class="item">5</div><div class="item">6</div>
59+
</a>
60+
61+
<a class="stretch" style="align-content: stretch; height: 300px;">
62+
<div class="item">1</div><div class="item">2</div><div class="item">3</div>
63+
<div class="item">4</div><div class="item">5</div><div class="item">6</div>
64+
</a>
65+
66+
</body>
67+
</html>

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

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Flex in Anchor</title>
6+
<style>
7+
a {
8+
display: flex;
9+
gap: 10px;
10+
border: 2px solid #333;
11+
padding: 10px;
12+
background: #f9f9f9;
13+
margin-bottom: 30px;
14+
text-decoration: none;
15+
}
16+
17+
.wrap {
18+
flex-wrap: wrap;
19+
width: 260px;
20+
align-content: flex-start;
21+
}
22+
23+
.item {
24+
background: lightblue;
25+
padding: 10px;
26+
border: 1px solid #666;
27+
}
28+
</style>
29+
</head>
30+
<body>
31+
32+
<a href="#">
33+
<div class="item">Hello</div>
34+
<div class="item">this</div>
35+
<div class="item">link</div>
36+
<div class="item">is</div>
37+
<div class="item">flexbox</div>
38+
<div class="item">based!</div>
39+
</a>
40+
41+
<a href="#" class="wrap">
42+
<div class="item">Hello</div>
43+
<div class="item">this</div>
44+
<div class="item">link</div>
45+
<div class="item">is</div>
46+
<div class="item">flexbox</div>
47+
<div class="item">based!</div>
48+
<div class="item">showcasing</div>
49+
<div class="item">wrap</div>
50+
</a>
51+
52+
</body>
53+
</html>

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

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Flex in Anchor</title>
6+
<style>
7+
a {
8+
display: flex;
9+
gap: 10px;
10+
border: 2px solid #333;
11+
padding: 10px;
12+
background: #f9f9f9;
13+
margin-bottom: 30px;
14+
text-decoration: none;
15+
}
16+
17+
.wrap {
18+
flex-wrap: wrap;
19+
width: 260px;
20+
align-content: flex-start;
21+
}
22+
23+
.item {
24+
background: lightblue;
25+
padding: 10px;
26+
border: 1px solid #666;
27+
flex: 0 0 100px;
28+
}
29+
</style>
30+
</head>
31+
<body>
32+
<a href="#" class="wrap">
33+
<div class="item">Hello</div>
34+
<div class="item">this</div>
35+
<div class="item">link</div>
36+
<div class="item">is</div>
37+
<div class="item">flexbox</div>
38+
<div class="item">based!</div>
39+
<div class="item">showcasing</div>
40+
<div class="item">wrap</div>
41+
</a>
42+
43+
</body>
44+
</html>

‎src/test/resources/com/itextpdf/html2pdf/css/flex/FlexContainerTest/aJustifyContent.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+
<meta charset="utf-8">
5+
<title>Flex justify-Content A</title>
6+
<style>
7+
a {
8+
display: flex;
9+
flex-wrap: wrap;
10+
gap: 10px;
11+
width: 260px;
12+
height: 180px;
13+
border: 2px solid #333;
14+
background: #f9f9f9;
15+
text-decoration: none;
16+
}
17+
div.item {
18+
width: 100px;
19+
height: 40px;
20+
background: lightblue;
21+
border: 1px solid #666;
22+
display: flex;
23+
}
24+
</style>
25+
</head>
26+
<body>
27+
28+
<a style="justify-content: flex-start;">
29+
<div class="item">1</div><div class="item">2</div><div class="item">3</div>
30+
<div class="item">4</div><div class="item">5</div><div class="item">6</div>
31+
</a>
32+
33+
<a style="justify-content: flex-end;">
34+
<div class="item">1</div><div class="item">2</div><div class="item">3</div>
35+
<div class="item">4</div><div class="item">5</div><div class="item">6</div>
36+
</a>
37+
38+
<a style="justify-content: center;">
39+
<div class="item">1</div><div class="item">2</div><div class="item">3</div>
40+
<div class="item">4</div><div class="item">5</div><div class="item">6</div>
41+
</a>
42+
43+
<a style="justify-content: space-between;">
44+
<div class="item">1</div><div class="item">2</div><div class="item">3</div>
45+
<div class="item">4</div><div class="item">5</div><div class="item">6</div>
46+
</a>
47+
48+
<a style="justify-content: space-around;">
49+
<div class="item">1</div><div class="item">2</div><div class="item">3</div>
50+
<div class="item">4</div><div class="item">5</div><div class="item">6</div>
51+
</a>
52+
53+
<a style="justify-content: space-evenly;">
54+
<div class="item">1</div><div class="item">2</div><div class="item">3</div>
55+
<div class="item">4</div><div class="item">5</div><div class="item">6</div>
56+
</a>
57+
58+
</body>
59+
</html>

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

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Long Anchor</title>
6+
<style>
7+
a {
8+
display: flex;
9+
flex-wrap: wrap;
10+
gap: 10px;
11+
width: 500px;
12+
height: 2000px;
13+
border: 2px solid #333;
14+
background: #add8e6;
15+
text-decoration: none;
16+
}
17+
div.item {
18+
width: 200px;
19+
height: 60px;
20+
background: lightcyan;
21+
border: 1px solid #666;
22+
}
23+
</style>
24+
</head>
25+
<body>
26+
<a>
27+
<div class="item">1</div><div class="item">2</div><div class="item">3</div>
28+
<div class="item">4</div><div class="item">5</div><div class="item">6</div>
29+
<div class="item">7</div><div class="item">8</div><div class="item">9</div>
30+
<div class="item">10</div><div class="item">11</div><div class="item">12</div>
31+
<div class="item">13</div><div class="item">14</div><div class="item">15</div>
32+
<div class="item">16</div><div class="item">17</div><div class="item">18</div>
33+
<div class="item">19</div><div class="item">20</div><div class="item">21</div>
34+
</a>
35+
</body>
36+
</html>

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

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Nested Flex in A</title>
6+
<style>
7+
a {
8+
display: flex;
9+
flex-wrap: wrap;
10+
gap: 10px;
11+
width: 400px;
12+
border: 2px solid #333;
13+
text-decoration: none;
14+
color: inherit;
15+
}
16+
.nested {
17+
display: flex;
18+
flex-wrap: wrap;
19+
gap: 5px;
20+
width: 180px;
21+
height: 100px;
22+
background: lightblue;
23+
border: 1px solid #666;
24+
}
25+
.nested div {
26+
display: flex;
27+
width: 80px;
28+
height: 40px;
29+
background: lightcoral;
30+
border: 1px solid #333;
31+
}
32+
</style>
33+
</head>
34+
<body>
35+
<a href="#">
36+
<div class="nested">
37+
<div>1</div><div>2</div><div>3</div><div>4</div>
38+
</div>
39+
<div class="nested">
40+
<div>5</div><div>6</div><div>7</div><div>8</div>
41+
</div>
42+
<div class="nested">
43+
<div>9</div><div>10</div><div>11</div><div>12</div>
44+
</div>
45+
<div class="nested">
46+
<div>13</div><div>14</div><div>15</div><div>16</div>
47+
</div>
48+
</a>
49+
</body>
50+
</html>

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

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Flex A with UL (2 columns)</title>
6+
<style>
7+
a, ul, li {
8+
display: flex;
9+
flex-wrap: wrap;
10+
gap: 10px;
11+
border: 2px solid #333;
12+
}
13+
a {
14+
width: 900px; /* wide enough for 2 columns */
15+
text-decoration: none;
16+
color: inherit;
17+
}
18+
ul {
19+
flex: 1 1 45%;
20+
box-sizing: border-box;
21+
}
22+
li {
23+
background: lightblue;
24+
border: 1px solid #666;
25+
flex: 1 1 45%;
26+
}
27+
li div {
28+
display: flex;
29+
width: 80px;
30+
height: 40px;
31+
background: lightcoral;
32+
border: 1px solid #333;
33+
}
34+
</style>
35+
</head>
36+
<body>
37+
<a href="#">A
38+
<ul>
39+
<li><div>LI->DIV 1</div><div>2</div></li>
40+
<li><div>3</div><div>4</div></li>UL
41+
</ul>
42+
<ul>
43+
<li><div>LI->DIV 5</div><div>6</div></li>
44+
<li><div>7</div><div>8</div></li>UL
45+
</ul>
46+
</a>
47+
</body>
48+
</html>

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

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Wide A</title>
6+
<style>
7+
a {
8+
display: flex;
9+
flex-wrap: wrap;
10+
gap: 10px;
11+
width: 2000px;
12+
height: 300px;
13+
border: 2px solid #333;
14+
background: #add8e6;
15+
text-decoration: none;
16+
}
17+
div.item {
18+
width: 200px;
19+
height: 60px;
20+
background: lightcyan;
21+
border: 1px solid #666;
22+
}
23+
</style>
24+
</head>
25+
<body>
26+
<a>
27+
<div class="item">1</div><div class="item">2</div><div class="item">3</div>
28+
<div class="item">4</div><div class="item">5</div><div class="item">6</div>
29+
<div class="item">7</div><div class="item">8</div><div class="item">9</div>
30+
<div class="item">10</div><div class="item">11</div><div class="item">12</div>
31+
</a>
32+
</body>
33+
</html>

0 commit comments

Comments
 (0)