Merge branch 'master' into 'issue-214-page-target-counter'

# Conflicts:
#   src/modules/paged-media/index.js

package-lock.json

@@ -3709,6 +3709,12 @@
       "integrity": "sha1-jCpe8kcv2ep0KwTHenUJO6J1fJM=",
       "dev": true
     },
+    "array-find-index": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/array-find-index/-/array-find-index-1.0.2.tgz",
+      "integrity": "sha1-3wEKoSh+Fku9pvlyOwqWoexBh6E=",
+      "dev": true
+    },
     "array-flatten": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
@@ -4543,6 +4549,12 @@
       "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
       "dev": true
     },
+    "commenting": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/commenting/-/commenting-1.1.0.tgz",
+      "integrity": "sha512-YeNK4tavZwtH7jEgK1ZINXzLKm6DZdEMfsaaieOsCAN0S8vsY7UeuO3Q7d/M018EFgE+IeUAuBOKkFccBZsUZA==",
+      "dev": true
+    },
     "component-emitter": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz",
@@ -9004,6 +9016,12 @@
       "integrity": "sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==",
       "dev": true
     },
+    "moment": {
+      "version": "2.25.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.25.1.tgz",
+      "integrity": "sha512-nRKMf9wDS4Fkyd0C9LXh2FFXinD+iwbJ5p/lh3CHitW9kZbRbJ8hCruiadiIXZVbeAqKZzqcTvHnK3mRhFjb6w==",
+      "dev": true
+    },
     "ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
@@ -9320,6 +9338,12 @@
       "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
       "dev": true
     },
+    "package-name-regex": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/package-name-regex/-/package-name-regex-1.0.8.tgz",
+      "integrity": "sha512-g3vB2J62dLqf4m50VM4tJUC4sixw3JB+Igd0cF3P/gJhAvmvsmFEV2eWZTeLbwfkKEWTf3+gwQ2C6JFFRxWHEQ==",
+      "dev": true
+    },
     "parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -9875,7 +9899,7 @@
       "dependencies": {
         "jsesc": {
           "version": "0.5.0",
-          "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz",
+          "resolved": "http://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz",
           "integrity": "sha1-597mbjXW/Bb3EP6R1c9p9w8IkR0=",
           "dev": true
         }
@@ -10100,6 +10124,40 @@
         "rollup-pluginutils": "^2.5.0"
       }
     },
+    "rollup-plugin-license": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-license/-/rollup-plugin-license-2.1.0.tgz",
+      "integrity": "sha512-HvwwqCbG+//hAwGxOce+XadsEooq79SqDu3z2GTwU2y1rFQ/uqT5JbCzcmauFII+nKZ0/N2BzG76ZuP7OdfU7A==",
+      "dev": true,
+      "requires": {
+        "commenting": "1.1.0",
+        "glob": "7.1.6",
+        "lodash": "4.17.15",
+        "magic-string": "0.25.7",
+        "mkdirp": "1.0.4",
+        "moment": "2.25.1",
+        "package-name-regex": "1.0.8",
+        "spdx-expression-validate": "2.0.0",
+        "spdx-satisfies": "5.0.0"
+      },
+      "dependencies": {
+        "magic-string": {
+          "version": "0.25.7",
+          "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz",
+          "integrity": "sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==",
+          "dev": true,
+          "requires": {
+            "sourcemap-codec": "^1.4.4"
+          }
+        },
+        "mkdirp": {
+          "version": "1.0.4",
+          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
+          "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
+          "dev": true
+        }
+      }
+    },
     "rollup-plugin-livereload": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/rollup-plugin-livereload/-/rollup-plugin-livereload-1.3.0.tgz",
@@ -10544,6 +10602,65 @@
       "integrity": "sha512-1ZooVLYFxC448piVLBbtOxFcXwnymH9oUF8nRd3CuYDVvkRBxRl6pB4Mtas5a4drtL+E8LDgFkQNcgIw6tc8Hg==",
       "dev": true
     },
+    "spdx-compare": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/spdx-compare/-/spdx-compare-1.0.0.tgz",
+      "integrity": "sha512-C1mDZOX0hnu0ep9dfmuoi03+eOdDoz2yvK79RxbcrVEG1NO1Ph35yW102DHWKN4pk80nwCgeMmSY5L25VE4D9A==",
+      "dev": true,
+      "requires": {
+        "array-find-index": "^1.0.2",
+        "spdx-expression-parse": "^3.0.0",
+        "spdx-ranges": "^2.0.0"
+      }
+    },
+    "spdx-exceptions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.3.0.tgz",
+      "integrity": "sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A==",
+      "dev": true
+    },
+    "spdx-expression-parse": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz",
+      "integrity": "sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==",
+      "dev": true,
+      "requires": {
+        "spdx-exceptions": "^2.1.0",
+        "spdx-license-ids": "^3.0.0"
+      }
+    },
+    "spdx-expression-validate": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/spdx-expression-validate/-/spdx-expression-validate-2.0.0.tgz",
+      "integrity": "sha512-b3wydZLM+Tc6CFvaRDBOF9d76oGIHNCLYFeHbftFXUWjnfZWganmDmvtM5sm1cRwJc/VDBMLyGGrsLFd1vOxbg==",
+      "dev": true,
+      "requires": {
+        "spdx-expression-parse": "^3.0.0"
+      }
+    },
+    "spdx-license-ids": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.5.tgz",
+      "integrity": "sha512-J+FWzZoynJEXGphVIS+XEh3kFSjZX/1i9gFBaWQcB+/tmpe2qUsSBABpcxqxnAxFdiUFEgAX1bjYGQvIZmoz9Q==",
+      "dev": true
+    },
+    "spdx-ranges": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/spdx-ranges/-/spdx-ranges-2.1.1.tgz",
+      "integrity": "sha512-mcdpQFV7UDAgLpXEE/jOMqvK4LBoO0uTQg0uvXUewmEFhpiZx5yJSZITHB8w1ZahKdhfZqP5GPEOKLyEq5p8XA==",
+      "dev": true
+    },
+    "spdx-satisfies": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/spdx-satisfies/-/spdx-satisfies-5.0.0.tgz",
+      "integrity": "sha512-/hGhwh20BeGmkA+P/lm06RvXD94JduwNxtx/oX3B5ClPt1/u/m5MCaDNo1tV3Y9laLkQr/NRde63b9lLMhlNfw==",
+      "dev": true,
+      "requires": {
+        "spdx-compare": "^1.0.0",
+        "spdx-expression-parse": "^3.0.0",
+        "spdx-ranges": "^2.0.0"
+      }
+    },
     "split-string": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz",
@@ -10889,7 +11006,7 @@
     },
     "through": {
       "version": "2.3.8",
-      "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
+      "resolved": "http://registry.npmjs.org/through/-/through-2.3.8.tgz",
       "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=",
       "dev": true
     },

package.json

@@ -32,6 +32,7 @@
     "rollup": "^2.13.1",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-json": "^4.0.0",
+    "rollup-plugin-license": "^2.1.0",
     "rollup-plugin-livereload": "^1.3.0",
     "rollup-plugin-node-builtins": "^2.1.2",
     "rollup-plugin-node-resolve": "^5.2.0",

rollup.config.js

-import resolve from 'rollup-plugin-node-resolve';
-import commonjs from 'rollup-plugin-commonjs';
-import json from 'rollup-plugin-json';
+import resolve from "rollup-plugin-node-resolve";
+import commonjs from "rollup-plugin-commonjs";
+import json from "rollup-plugin-json";
+import license from "rollup-plugin-license";
 
-import pkg from './package.json';
+import pkg from "./package.json";
 
 const plugins = [
 	resolve(),
 	commonjs({
-		include: 'node_modules/**'
+		include: "node_modules/**"
 	}),
-	json()
+	json(),
+	license({
+		banner: "@license Paged.js v<%= pkg.version %> | MIT | https://gitlab.pagedmedia.org/tools/pagedjs",
+	})
 ];
 
 export default [
@@ -17,9 +21,9 @@ export default [
 	{
 		input: pkg.module,
 		output: {
-			name: 'Paged',
+			name: "Paged",
 			file: pkg.browser,
-			format: 'umd'
+			format: "umd"
 		},
 		plugins: plugins
 	},
@@ -27,9 +31,9 @@ export default [
 	{
 		input: pkg.module,
 		output: {
-				name: "PagedModule",
-				file: "./dist/paged.esm.js",
-				format: 'es'
+			name: "PagedModule",
+			file: "./dist/paged.esm.js",
+			format: "es"
 		},
 		plugins: plugins
 	},
@@ -37,9 +41,9 @@ export default [
 	{
 		input: "./src/polyfill/polyfill.js",
 		output: {
-			name: 'PagedPolyfill',
+			name: "PagedPolyfill",
 			file: "./dist/paged.polyfill.js",
-			format: 'umd'
+			format: "umd"
 		},
 		plugins: plugins
 	}

specs/following-selector/following-selector.spec.js

+const TIMEOUT = 10000; // Some book might take longer than this to renderer
+
+describe("following-selector", () => {
+	let page;
+	beforeAll(async () => {
+		page = await loadPage("following-selector/following-selector.html");
+		return page.rendered;
+	}, TIMEOUT);
+
+	afterAll(async () => {
+		if (!DEBUG) {
+			await page.close();
+		}
+	});
+
+	it("should render text", async () => {
+		let text = await page.evaluate(() => document.body.textContent);
+		expect(text).toContain("Chapter 1. Loomings.");
+	});
+
+	it("should render 14 pages", async () => {
+		let pages = await page.$$eval(".pagedjs_page", (r) => r.length);
+		expect(pages).toBe(14);
+	});
+
+	if (!DEBUG) {
+		it("should create a pdf", async () => {
+			let pdf = await page.pdf(PDF_SETTINGS);
+
+			expect(pdf).toMatchPDFSnapshot(1);
+			expect(pdf).toMatchPDFSnapshot(2);
+		});
+	}
+}
+);

specs/issues/roman-numerals/roman-numerals.html

@@ -11,7 +11,7 @@
   <script src="../../../dist/paged.polyfill.js"></script>
 
   <style>
-    :root{
+    :root {
       font-size: 18px;
     }
 
@@ -33,16 +33,21 @@
       }
     }
 
-    /* @page main:first {
-      counter-reset: page;
-    } */
-
     .front-matter, .toc {
       page: frontmatter;
     }
 
+    .toc {
+      break-before: page;
+    }
+
+    #preface {
+      break-before: page;
+    }
+
     .chapter {
       page: main;
+      break-after: page;
     }
 
     #first-chapter {

specs/named-page/forced-page-break/forced-page-break.html

+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<title>forced-page-break</title>
+	<meta charset="UTF-8">
+	<script src="../../../dist/paged.polyfill.js"></script>
+	<style>
+		@page {
+			size: 4cm 4cm;
+			margin: 0.25cm;
+			text-align: center;
+			color: white;
+		}
+		@page pink {
+			background-color: hotpink;
+		}
+
+		@page teal {
+			background-color: #31adad;
+		}
+
+		p {
+			page: teal
+		}
+
+		div {
+			page: pink
+		}
+	</style>
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+</head>
+<body>
+	<div>Hot</div>
+	<div>Pink</div>
+	<p>Teal</p>
+</body>
+</html>

specs/named-page/forced-page-break/forced-page-break.spec.js

+const TIMEOUT = 10000;
+
+describe("forced-page-break", () => {
+	let page;
+	beforeAll(async () => {
+		page = await loadPage("named-page/forced-page-break/forced-page-break.html");
+		return page.rendered;
+	}, TIMEOUT);
+
+	afterAll(async () => {
+		if (!DEBUG) {
+			await page.close();
+		}
+	});
+
+	it("should force a page break between pink and teal (2 pages)", async () => {
+		let pages = await page.$$eval(".pagedjs_page", (r) => {
+			return r.length;
+		});
+
+		expect(pages).toEqual(2);
+	});
+
+	if (!DEBUG) {
+		it("should create a pdf", async () => {
+			let pdf = await page.pdf(PDF_SETTINGS);
+
+			expect(pdf).toMatchPDFSnapshot(1);
+			expect(pdf).toMatchPDFSnapshot(2);
+		});
+	}
+}
+);

specs/named-page/forced-page-break/named-and-unnamed-pages-siblings.html

+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<title>named-and-unnamed-pages-siblings</title>
+	<meta charset="UTF-8">
+	<script src="../../../dist/paged.polyfill.js"></script>
+	<style>
+		@page {
+			size: 4cm 4cm;
+			margin: 0.25cm;
+		}
+		@page section {
+			background-color: #00b3ff;
+		}
+		.section {
+			page: section;
+		}
+	</style>
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+</head>
+<body>
+<section>Plain element</section>
+<section class="section">First section</section>
+<section class="section">Second section</section>
+<section>Plain element</section>
+<section class="section">Fourth section</section>
+</body>
+</html>

specs/named-page/forced-page-break/named-and-unnamed-pages-siblings.spec.js

+const TIMEOUT = 10000;
+
+describe("named-and-unnamed-pages-siblings", () => {
+	let page;
+	beforeAll(async () => {
+		page = await loadPage("named-page/forced-page-break/named-and-unnamed-pages-siblings.html");
+		return page.rendered;
+	}, TIMEOUT);
+
+	afterAll(async () => {
+		if (!DEBUG) {
+			await page.close();
+		}
+	});
+
+	it("should force a page break between unnamed pages and named pages (4 pages)", async () => {
+		let pages = await page.$$eval(".pagedjs_page", (r) => {
+			return r.length;
+		});
+
+		expect(pages).toEqual(4);
+	});
+
+	if (!DEBUG) {
+		it("should create a pdf", async () => {
+			let pdf = await page.pdf(PDF_SETTINGS);
+
+			expect(pdf).toMatchPDFSnapshot(1);
+			expect(pdf).toMatchPDFSnapshot(2);
+			expect(pdf).toMatchPDFSnapshot(3);
+			expect(pdf).toMatchPDFSnapshot(4);
+		});
+	}
+}
+);

specs/named-page/no-forced-page-break/contiguous-named-pages.html

+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<title>contiguous-named-pages</title>
+	<meta charset="UTF-8">
+	<script src="../../../dist/paged.polyfill.js"></script>
+	<style>
+		@page {
+			size: 4cm 4cm;
+			margin: 0.25cm;
+		}
+		@page section {
+			background-color: #00b3ff;
+		}
+		.section {
+			page: section;
+		}
+	</style>
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+</head>
+<body>
+<section class="section">First section</section>
+<section class="section">Second section</section>
+<section class="section">Third section</section>
+<section class="section">Fourth section</section>
+</body>
+</html>

specs/named-page/no-forced-page-break/contiguous-named-pages.spec.js

+const TIMEOUT = 10000;
+
+describe("contiguous-named-pages", () => {
+	let page;
+	beforeAll(async () => {
+		page = await loadPage("named-page/no-forced-page-break/contiguous-named-pages.html");
+		return page.rendered;
+	}, TIMEOUT);
+
+	afterAll(async () => {
+		if (!DEBUG) {
+			await page.close();
+		}
+	});
+
+	it("should not force a page break and render only 1 page", async () => {
+		let pages = await page.$$eval(".pagedjs_page", (r) => {
+			return r.length;
+		});
+
+		expect(pages).toEqual(1);
+	});
+
+	if (!DEBUG) {
+		it("should create a pdf", async () => {
+			let pdf = await page.pdf(PDF_SETTINGS);
+
+			expect(pdf).toMatchPDFSnapshot(1);
+		});
+	}
+}
+);

specs/named-page/no-forced-page-break/no-forced-page-break.html

+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<title>no-forced-page-break</title>
+	<meta charset="UTF-8">
+	<script src="../../../dist/paged.polyfill.js"></script>
+	<style>
+		#toc {
+			page: tableofcontents;
+		}
+	</style>
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+</head>
+<body>
+<header>
+	<div id="toc"><h1>Table of Contents</h1></div>
+</header>
+</body>
+</html>

specs/named-page/no-forced-page-break/no-forced-page-break.spec.js

+const TIMEOUT = 10000;
+
+describe("no-forced-page-break", () => {
+	let page;
+	beforeAll(async () => {
+		page = await loadPage("named-page/no-forced-page-break/no-forced-page-break.html");
+		return page.rendered;
+	}, TIMEOUT);
+
+	afterAll(async () => {
+		if (!DEBUG) {
+			await page.close();
+		}
+	});
+
+	it("should not force a page break and render only 1 page", async () => {
+		let pages = await page.$$eval(".pagedjs_page", (r) => {
+			return r.length;
+		});
+
+		expect(pages).toEqual(1);
+	});
+
+	if (!DEBUG) {
+		it("should create a pdf", async () => {
+			let pdf = await page.pdf(PDF_SETTINGS);
+
+			expect(pdf).toMatchPDFSnapshot(1);
+		});
+	}
+}
+);

specs/nth-of-type-selector/nth-of-type-selector.spec.js

+const TIMEOUT = 10000; // Some book might take longer than this to renderer
+
+describe("nth-of-type-selector", () => {
+	let page;
+	beforeAll(async () => {
+		page = await loadPage("nth-of-type-selector/nth-of-type-selector.html");
+		return page.rendered;
+	}, TIMEOUT);
+
+	afterAll(async () => {
+		if (!DEBUG) {
+			await page.close();
+		}
+	});
+
+	it("should render text", async () => {
+		let text = await page.evaluate(() => document.body.textContent);
+		expect(text).toContain("Chapter 1. Loomings.");
+	});
+
+	it("should render 14 pages", async () => {
+		let pages = await page.$$eval(".pagedjs_page", (r) => r.length);
+		expect(pages).toBe(14);
+	});
+
+	if (!DEBUG) {
+		it("should create a pdf", async () => {
+			let pdf = await page.pdf(PDF_SETTINGS);
+
+			expect(pdf).toMatchPDFSnapshot(1);
+			expect(pdf).toMatchPDFSnapshot(2);
+		});
+	}
+}
+);

specs/target/target-text/target-text.html

@@ -47,19 +47,19 @@
                 display: block;
                 margin-bottom: 3em;
             }
-            nav li:nth-of-type(1) a[href]::after {
+            nav li#first a[href]::after {
                 content: target-text(attr(href url));
             }
-            nav li:nth-of-type(2) a[href]::after {
+            nav li#second a[href]::after {
                 content: target-text(attr(href url), content);
             }
-            nav li:nth-of-type(3) a[href]::after {
+            nav li#third a[href]::after {
                 content: target-text(attr(href url), first-letter);
             }
-            nav li:nth-of-type(4) a[href]::after {
+            nav li#fourth a[href]::after {
                 content: target-text(attr(href url), before);
             }
-            nav li:nth-of-type(5) a[href]::after {
+            nav li#fifth a[href]::after {
                 content: target-text(attr(href url), after);
             }
 
@@ -106,11 +106,11 @@
             <nav>
                 <h1>Table of contents</h1>
                 <ul>
-                        <li><a href="#chap0">target-text: </a></li>
-                    <li><a href="#chap1">target-text content: </a></li>
-                    <li><a href="#chap2">target-text first-letter: </a></li>
-                    <li><a href="#chap3">target-text:: before: </a></li>
-                    <li><a href="#chap4">target-text:: after: </a></li>
+                        <li id="first"><a href="#chap0">target-text: </a></li>
+                    <li id="second"><a href="#chap1">target-text content: </a></li>
+                    <li id="third"><a href="#chap2">target-text first-letter: </a></li>
+                    <li id="fourth"><a href="#chap3">target-text:: before: </a></li>
+                    <li id="fifth"><a href="#chap4">target-text:: after: </a></li>
                 </ul>
             </nav>
         </section>

specs/target/target-text/target-text.spec.js

@@ -14,27 +14,27 @@ describe("target-text", () => {
 	});
 
 	it("Table of content should include chapter titles", async () => {
-		let text = await page.$eval("nav li:nth-of-type(1) a" , (r) => window.getComputedStyle(r, "::after").content);
+		let text = await page.$eval("nav li#first a" , (r) => window.getComputedStyle(r, "::after").content);
 		expect(text).toEqual("\"'Lorem \\\"ipsum\\\" dolor sit amet'\"");
 	});
 
 	it("Table of content should include chapter titles", async () => {
-		let text = await page.$eval("nav li:nth-of-type(2) a" , (r) => window.getComputedStyle(r, "::after").content);
+		let text = await page.$eval("nav li#second a" , (r) => window.getComputedStyle(r, "::after").content);