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

0f1f65bb · Guillaume · beaa5c8a · 0f1f65bb · 0f1f65bb · 0f1f65bb
Commit 0f1f65bb authored Sep 04, 2020 by Guillaume
4 changed files
--- a/specs/breaks/break-inside/break-inside-avoid/long-section.html
+++ b/specs/breaks/break-inside/break-inside-avoid/long-section.html
+<!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>
--- a/specs/breaks/break-inside/break-inside-avoid/long-section.spec.js
+++ b/specs/breaks/break-inside/break-inside-avoid/long-section.spec.js
+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);
+	});
+}
+);
--- a/specs/splits/tables/long-table.html
+++ b/specs/splits/tables/long-table.html
@@ -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>

--- a/specs/splits/tables/long-table.spec.js
+++ b/specs/splits/tables/long-table.spec.js
@@ -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);