Commit 2160824e authored by Fred Chasen's avatar Fred Chasen

Merge branch 'issue-223-child-parent-propagation' into 'master'

resolves #223 should not break between box and its container

Closes #223

See merge request tools/pagedjs!131
parents f21bf115 a774b04e
Pipeline #575 passed with stage
in 4 minutes and 32 seconds
<!DOCTYPE html>
<html lang="en">
<head>
<title>break-after-child-parent-propagation</title>
<meta charset="UTF-8">
<script src="../../../dist/paged.polyfill.js"></script>
<style>
@page {
size: A4
}
section {
break-after: page;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<main>
<section>
<h2>Section 1</h2>
<p>This is a paragraph.</p>
</section>
<section>
<h2>Section 2</h2>
<p>This is a paragraph.</p>
</section>
</main>
</body>
</html>
const TIMEOUT = 10000;
describe("break-after-child-parent-propagation", () => {
let page;
beforeAll(async () => {
page = await loadPage("breaks/child-parent-propagation/break-after-child-parent-propagation.html");
return page.rendered;
}, TIMEOUT);
afterAll(async () => {
if (!DEBUG) {
await page.close();
}
});
it("should not break between the box (section) and its containers (main)", 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);
});
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>break-before-child-parent-propagation</title>
<meta charset="UTF-8">
<script src="../../../dist/paged.polyfill.js"></script>
<style>
@page {
size: A4
}
section {
break-before: page;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<main>
<section>
<h2>Section 1</h2>
<p>This is a paragraph.</p>
</section>
<section>
<h2>Section 2</h2>
<p>This is a paragraph.</p>
</section>
</main>
</body>
</html>
const TIMEOUT = 10000;
describe("break-before-child-parent-propagation", () => {
let page;
beforeAll(async () => {
page = await loadPage("breaks/child-parent-propagation/break-before-child-parent-propagation.html");
return page.rendered;
}, TIMEOUT);
afterAll(async () => {
if (!DEBUG) {
await page.close();
}
});
it("should not break between the box (section) and its containers (main)", 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);
});
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>break-before-container-propagation</title>
<meta charset="UTF-8">
<script src="../../../dist/paged.polyfill.js"></script>
<style>
@page {
size: A4
}
section {
break-before: page;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<h1>Document title</h1>
</header>
<main>
<section>
<h2>Section 1</h2>
<p>This is a paragraph.</p>
</section>
<section>
<h2>Section 2</h2>
<p>This is a paragraph.</p>
</section>
</main>
</body>
</html>
const TIMEOUT = 10000;
describe("break-before-container-propagation", () => {
let page;
beforeAll(async () => {
page = await loadPage("breaks/child-parent-propagation/break-before-container-propagation.html");
return page.rendered;
}, TIMEOUT);
afterAll(async () => {
if (!DEBUG) {
await page.close();
}
});
it("should page break between containers (header and main)", async () => {
let pages = await page.$$eval(".pagedjs_page", (r) => {
return r.length;
});
expect(pages).toEqual(3);
});
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);
});
}
});
......@@ -93,9 +93,11 @@ class Breaks extends Handler {
} else if (prop.property === "break-before") {
let nodeBefore = displayedElementBefore(elements[i], parsed);
elements[i].setAttribute("data-break-before", prop.value);
if (nodeBefore) {
// Breaks are only allowed between siblings, not between a box and its container.
// If we cannot find a node before we should not break!
// https://drafts.csswg.org/css-break-3/#break-propagation
elements[i].setAttribute("data-break-before", prop.value);
nodeBefore.setAttribute("data-next-break-before", prop.value);
}
} else if (prop.property === "page") {
......
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