Commit 0f1f65bb authored by Guillaume's avatar Guillaume

Add a (failing) test on long section with break-inside: avoid

parent beaa5c8a
Pipeline #602 passed with stage
in 4 minutes and 9 seconds
<!DOCTYPE html PUBLIC>
<html lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<meta http-equiv="Content-Style-Type" content="text/css"/>
<title>
Long section
</title>
<script src="../../../../dist/paged.polyfill.js"></script>
<style>
@page {
size: 140mm 150mm;
margin: 0px;
padding: 0px;
}
section {
break-inside: avoid;
}
</style>
</head>
<body>
<section>
<h3>Section title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fermentum vel tortor at suscipit. Donec augue leo, viverra sit amet mauris eget, blandit vestibulum lacus. Quisque
a nibh ut ligula elementum efficitur et molestie mauris. Suspendisse potenti. Nam dapibus orci nec vestibulum volutpat. Nunc magna nibh, tristique eget ornare vel, convallis
eget quam. Donec risus neque, mattis ac finibus at, ullamcorper vitae tellus. Aenean faucibus turpis quis ligula tincidunt consectetur. Ut sed tortor urna. Vivamus volutpat
turpis vitae tortor tempor, in luctus arcu fringilla. Quisque hendrerit ligula vitae nunc porta elementum.</p>
<p>Etiam euismod interdum tellus, vitae semper nisi semper in. Curabitur tempus enim vel lectus laoreet ornare. Quisque venenatis ante in maximus scelerisque. Quisque auctor
volutpat nibh, ac finibus dui. Integer et nisi sed odio rhoncus rhoncus. Nunc auctor mi a erat pretium, sit amet placerat felis congue. Integer id mattis mauris. Etiam suscipit
pulvinar enim, sed finibus tortor. Nulla purus nisi, malesuada at orci in, fringilla aliquet mi.</p>
</section>
<section data-break-inside="avoid">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<p>11</p>
<p>12</p>
<p>13</p>
<p>14</p>
<p>15</p>
<p>16</p>
<p>17</p>
<p>18</p>
</section>
</body>
</html>
const TIMEOUT = 10000;
describe("long section", () => {
let page;
beforeAll(async () => {
page = await loadPage("breaks/break-inside/break-inside-avoid/long-section.html");
return page.rendered;
}, TIMEOUT);
afterAll(async () => {
if (!DEBUG) {
await page.close();
}
});
// TODO: the following test will put the last section on the next page but it should ignore the rule break-inside: avoid because the section does not fit on the next page
// this issue can be reproduced on v0.1.40
it.skip("should ignore break-inside:avoid when the element (section) does not fit on a page", async () => {
let pages = await page.$$eval(".pagedjs_page", (r) => r.length);
expect(pages).toBe(2);
});
}
);
......@@ -6,7 +6,7 @@
<title>
Long table
</title>
<script src="../../../dist/paged.polyfill.js"></script>
<script src="../../../../dist/paged.polyfill.js"></script>
<style>
@page {
size: 140mm 150mm;
......@@ -126,22 +126,6 @@
<td>1</td>
<td>v</td>
</tr>
<tr>
<td>1</td>
<td>w</td>
</tr>
<tr>
<td>1</td>
<td>x</td>
</tr>
<tr>
<td>1</td>
<td>y</td>
</tr>
<tr>
<td>1</td>
<td>z</td>
</tr>
</tbody>
</table>
</section>
......
......@@ -3,7 +3,7 @@ const TIMEOUT = 10000;
describe("long table", () => {
let page;
beforeAll(async () => {
page = await loadPage("splits/tables/long-table.html");
page = await loadPage("breaks/break-inside/break-inside-avoid/long-table.html");
return page.rendered;
}, TIMEOUT);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment