84 lines
2.5 KiB
HTML
Executable File
84 lines
2.5 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>html2pdf Test - Pagebreaks</title>
|
|
<link rel="stylesheet" href="baseline.css">
|
|
|
|
<style type="text/css">
|
|
/* Avoid unexpected sizing on all elements. */
|
|
* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/* CSS styling for before/after/avoid. */
|
|
.before {
|
|
page-break-before: always;
|
|
}
|
|
.after {
|
|
page-break-after: always;
|
|
}
|
|
.avoid {
|
|
page-break-inside: avoid;
|
|
}
|
|
|
|
/* Big and bigger elements. */
|
|
.big {
|
|
height: 10.9in;
|
|
background-color: yellow;
|
|
border: 1px solid black;
|
|
}
|
|
.fullpage {
|
|
height: 11in;
|
|
background-color: fuchsia;
|
|
border: 1px solid black;
|
|
}
|
|
.bigger {
|
|
height: 11.1in;
|
|
background-color: aqua;
|
|
border: 1px solid black;
|
|
}
|
|
|
|
/* Table styling */
|
|
table {
|
|
border-collapse: collapse;
|
|
}
|
|
td {
|
|
border: 1px solid black;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<p>First line</p>
|
|
<p class="before">Break before</p>
|
|
<p class="after">Break after</p>
|
|
<p>No effect (should be top of 3rd page, using css or specify).</p>
|
|
<p class="html2pdf__page-break">Legacy (should create a break after).</p>
|
|
<p>No effect (should be top of 2nd page, using legacy).</p>
|
|
<p class="avoid big">Big element (should start on new page, using avoid-all/css/specify).</p>
|
|
<p>No effect (should start on next page *only* using avoid-all).</p>
|
|
<p>No effect (for spacing).</p>
|
|
<p class="avoid fullpage">Full-page element (should start on new page using avoid-all/css/specify).</p>
|
|
<p>No effect (for spacing).</p>
|
|
<p class="avoid bigger">Even bigger element (should continue normally, because it's more than a page).</p>
|
|
|
|
<!-- Advanced avoid-all tests. -->
|
|
<div>
|
|
<p>No effect inside parent div (testing avoid-all - no break yet because parent is more than a page).</p>
|
|
<p class="big">Big element inside parent div (testing avoid-all - should have break before this).</p>
|
|
</div>
|
|
<table>
|
|
<tr>
|
|
<td>Cell 1-1 - start of new page (avoid-all only)</td>
|
|
<td>Cell 1-2 - start of new page (avoid-all only)</td>
|
|
</tr>
|
|
<tr class="big">
|
|
<td>Cell 2-1 - start of another new page (avoid-all only)</td>
|
|
<td>Cell 2-2 - start of another new page (avoid-all only)</td>
|
|
</tr>
|
|
</table>
|
|
</body>
|
|
</html>
|