Commit 30083f7a authored by Fred Chasen's avatar Fred Chasen

Update footnotes specs

parent 485d1ddf
Pipeline #719 passed with stage
in 3 minutes and 55 seconds
......@@ -5,7 +5,7 @@
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>
Footnotes
Footnotes Display
</title>
<!-- Paged js-->
......@@ -93,7 +93,7 @@
span.footnote-block {
float: footnote;
footnote-display: blcok;
footnote-display: block;
}
.footnote-block::footnote-call {
......
......@@ -5,7 +5,7 @@
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>
Footnotes
Footnotes Policy
</title>
<!-- Paged js-->
......@@ -68,7 +68,6 @@
span.footnote-auto {
float: footnote;
footnote-policy: auto;
footnote-display: compact;
}
.footnote-auto::footnote-call {
......@@ -82,7 +81,6 @@
span.footnote-line {
float: footnote;
footnote-policy: line;
footnote-display: compact;
}
.footnote-line::footnote-call {
......@@ -96,7 +94,6 @@
span.footnote-block {
float: footnote;
footnote-policy: block;
footnote-display: compact;
}
.footnote-block::footnote-call {
......
......@@ -21,6 +21,36 @@ describe("footnote-policy", () => {
expect(pages).toEqual(6);
});
it("display auto footnotes should split text", async () => {
let textStart = await page.$eval("[data-page-number='1']", (r) => r.textContent);
expect(textStart).toContain("Characteres");
let textEnd = await page.$eval("[data-page-number='2']", (r) => r.textContent);
expect(textEnd).toContain("genus typos me vidisse");
});
it("display line footnotes should stay with the callout line", async () => {
let textStart = await page.$eval("[data-page-number='4']", (r) => r.textContent);
// line
expect(textStart).toContain("Strasburg");
// footnote
expect(textStart).toContain("Argentoratensi");
});
it("display block footnotes should stay with the callout paragraph block", async () => {
let textStart = await page.$eval("[data-page-number='6']", (r) => r.textContent);
// paragraph
expect(textStart).toContain("The legend");
// footnote
expect(textStart).toContain("Argentoratensi");
});
if (!DEBUG) {
it("should create a pdf", async () => {
......@@ -29,6 +59,7 @@ describe("footnote-policy", () => {
expect(pdf).toMatchPDFSnapshot(2);
expect(pdf).toMatchPDFSnapshot(3);
expect(pdf).toMatchPDFSnapshot(4);
expect(pdf).toMatchPDFSnapshot(6);
});
}
}
......
......@@ -16,18 +16,15 @@
orphans: 1;
}
@media screen {
.pagedjs_page {
border: 1px solid #666;
box-shadow: 0 0 0 1px #666;
}
.pagedjs_area {
box-shadow: 0 0 0 1px teal;
}
}
@page {
size: 160mm 210mm;
......
......@@ -13,12 +13,12 @@ describe("footnotes-counter-reset", () => {
}
});
it("should render 15 pages", async () => {
it("should render 5 pages", async () => {
let pages = await page.$$eval(".pagedjs_page", (r) => {
return r.length;
});
expect(pages).toEqual(15);
expect(pages).toEqual(5);
});
......@@ -26,9 +26,9 @@ describe("footnotes-counter-reset", () => {
it("should create a pdf", async () => {
let pdf = await page.pdf(PDF_SETTINGS);
expect(pdf).toMatchPDFSnapshot(1);
expect(pdf).toMatchPDFSnapshot(6);
expect(pdf).toMatchPDFSnapshot(7);
expect(pdf).toMatchPDFSnapshot(2);
expect(pdf).toMatchPDFSnapshot(4);
expect(pdf).toMatchPDFSnapshot(5);
});
}
}
......
const TIMEOUT = 10000;
describe("footnotes", () => {
describe("footnotes counter content", () => {
let page;
beforeAll(async () => {
page = await loadPage("notes/footnotes/footnotes.html");
page = await loadPage("notes/footnotes-counter/footnotes-counter.html");
return page.rendered;
}, TIMEOUT);
......@@ -13,12 +13,12 @@ describe("footnotes", () => {
}
});
it("should render 14 pages", async () => {
it("should render 1 page", async () => {
let pages = await page.$$eval(".pagedjs_page", (r) => {
return r.length;
});
expect(pages).toEqual(14);
expect(pages).toEqual(1);
});
......@@ -27,7 +27,6 @@ describe("footnotes", () => {
let pdf = await page.pdf(PDF_SETTINGS);
expect(pdf).toMatchPDFSnapshot(1);
expect(pdf).toMatchPDFSnapshot(2);
});
}
}
......
This diff is collapsed.
const TIMEOUT = 10000;
describe("footnotes", () => {
describe("footnotes lastpage", () => {
let page;
beforeAll(async () => {
page = await loadPage("notes/footnotes-lastpage/footnotes-lastpage.html");
......@@ -21,6 +21,46 @@ describe("footnotes", () => {
expect(pages).toEqual(6);
});
it("not display footnote 4 on page 2", async () => {
let textStart = await page.$eval("[data-page-number='2']", (r) => r.textContent);
// line
expect(textStart).toContain("sand-cast bodies");
// footnote
expect(textStart).not.toContain("three-line pica");
});
it("should display footnote 4 on page 3", async () => {
let textStart = await page.$eval("[data-page-number='3']", (r) => r.textContent);
// line
expect(textStart).not.toContain("sand-cast bodies");
// footnote
expect(textStart).toContain("three-line pica");
});
it("not display footnote 8 on page 5", async () => {
let textStart = await page.$eval("[data-page-number='2']", (r) => r.textContent);
// line
expect(textStart).toContain("sand-cast bodies");
// footnote
expect(textStart).not.toContain("three-line pica");
});
it("should display footnote 8 on page 6", async () => {
let textStart = await page.$eval("[data-page-number='3']", (r) => r.textContent);
// line
expect(textStart).not.toContain("sand-cast bodies");
// footnote
expect(textStart).toContain("three-line pica");
});
if (!DEBUG) {
it("should create a pdf", async () => {
......
const TIMEOUT = 10000;
describe("footnotes", () => {
describe("footnotes padding", () => {
let page;
beforeAll(async () => {
page = await loadPage("notes/footnotes-padding/footnotes-padding.html");
......@@ -13,12 +13,18 @@ describe("footnotes", () => {
}
});
it("should render 15 pages", async () => {
it("should render 6 pages", async () => {
let pages = await page.$$eval(".pagedjs_page", (r) => {
return r.length;
});
expect(pages).toEqual(15);
expect(pages).toEqual(6);
});
it("cut the footnote on page 1", async () => {
let textStart = await page.$eval("[data-page-number='1']", (r) => r.textContent);
expect(textStart).toContain("The Haarlem Legend of the Invention of Printing by");
expect(textStart).not.toContain("Lourens Janszoon Coster");
});
......@@ -28,9 +34,6 @@ describe("footnotes", () => {
expect(pdf).toMatchPDFSnapshot(1);
expect(pdf).toMatchPDFSnapshot(2);
expect(pdf).toMatchPDFSnapshot(7);
expect(pdf).toMatchPDFSnapshot(8);
});
}
}
......
......@@ -21,6 +21,22 @@ describe("footnotes-place", () => {
expect(pages).toEqual(3);
});
it("should have two callouts on page 1", async () => {
let callouts = await page.$$eval("[data-page-number='1'] [data-footnote-call]", (r) => r.length);
expect(callouts).toEqual(2);
});
it("should have only one footnote on page 1", async () => {
let textStart = await page.$eval("[data-page-number='1']", (r) => r.textContent);
expect(textStart).toContain("Annales Hirsaugienses");
expect(textStart).not.toContain("Origines");
});
it("should place footnote 2 on page 2", async () => {
let textStart = await page.$eval("[data-page-number='2']", (r) => r.textContent);
expect(textStart).toContain("Origines");
});
if (!DEBUG) {
it("should create a pdf", async () => {
......
......@@ -21,6 +21,16 @@ describe("footnotes-sameline", () => {
expect(pages).toEqual(2);
});
it("should have three callouts on page 1", async () => {
let callouts = await page.$$eval("[data-page-number='1'] [data-footnote-call]", (r) => r.length);
expect(callouts).toEqual(3);
});
it("should have only 3 footnote on page 1", async () => {
let callouts = await page.$$eval("[data-page-number='1'] [data-footnote-marker]", (r) => r.length);
expect(callouts).toEqual(3);
});
if (!DEBUG) {
it("should create a pdf", async () => {
......
......@@ -21,13 +21,26 @@ describe("footnotes-styles", () => {
expect(pages).toEqual(2);
});
it("should have three callouts on page 1", async () => {
let callouts = await page.$$eval("[data-page-number='1'] [data-footnote-call]", (r) => r.length);
expect(callouts).toEqual(3);
});
it("should have red colored callouts", async () => {
let color = await page.$eval("[data-page-number='1'] [data-footnote-call]", (r) => window.getComputedStyle(r, "::after").color);
expect(color).toContain("rgb(255, 0, 0)"); // red
});
it("should have 30px font-size for callouts", async () => {
let size = await page.$eval("[data-page-number='1'] [data-footnote-call]", (r) => window.getComputedStyle(r, "::after").fontSize);
expect(size).toEqual("30px");
});
if (!DEBUG) {
it("should create a pdf", async () => {
let pdf = await page.pdf(PDF_SETTINGS);
expect(pdf).toMatchPDFSnapshot(1);
expect(pdf).toMatchPDFSnapshot(2);
});
}
}
......
......@@ -21,6 +21,43 @@ describe("footnotes", () => {
expect(pages).toEqual(14);
});
it("page 2 footnote", async () => {
let textContent = await page.$eval("[data-page-number='2']", (r) => r.textContent);
// callout
expect(textContent).toContain("Legend");
// callout
expect(textContent).toContain("Incunabula");
});
it("page 4 long footnote", async () => {
let textContent = await page.$eval("[data-page-number='4']", (r) => r.textContent);
// callout
expect(textContent).toContain("centuries before");
// footnote
expect(textContent).toContain("ipse eruditio fiat");
});
it("page 5 split footnote", async () => {
let textContent = await page.$eval("[data-page-number='5']", (r) => r.textContent);
// callout
expect(textContent).toContain("Angelo Roccha");
// footnote
expect(textContent).toContain("Characteres");
});
it("page 6 footnote split from page 5", async () => {
let textContent = await page.$eval("[data-page-number='6']", (r) => r.textContent);
// footnote
expect(textContent).toContain("enim a primis");
});
if (!DEBUG) {
it("should create a pdf", async () => {
......
......@@ -103,7 +103,8 @@ class TargetCounters extends Handler {
let pages = chunker.pagesArea.querySelectorAll(".pagedjs_page");
let pg = 0;
for (var i = 0; i < pages.length; i++) {
let styles = window.getComputedStyle(pages[i]);
let page = pages[i];
let styles = window.getComputedStyle(page);
let reset = styles["counter-reset"].replace("page", "").trim();
if (reset !== "none") {
......@@ -111,11 +112,10 @@ class TargetCounters extends Handler {
}
pg += 1;
if (pages[i].contains( element )){
if (page.contains( element )){
break;
}
}
this.styleSheet.insertRule(`[data-${target.variable}="${selector}"]${pseudo} { counter-reset: ${target.variable} ${pg}; }`, this.styleSheet.cssRules.length);
} else {
let value = element.getAttribute(`data-counter-${target.counter}-value`);
......@@ -123,6 +123,14 @@ class TargetCounters extends Handler {
this.styleSheet.insertRule(`[data-${target.variable}="${selector}"]${pseudo} { counter-reset: ${target.variable} ${target.variable} ${parseInt(value)}; }`, this.styleSheet.cssRules.length);
}
}
// force redraw
let el = document.querySelector(`[data-${target.variable}="${selector}"]`);
if (el) {
el.style.display = "none";
el.clientHeight;
el.style.removeProperty("display");
}
}
});
});
......
......@@ -19,17 +19,13 @@ class Counters extends Handler {
}
} else if (property === "counter-reset") {
let reset = this.handleReset(declaration, rule);
if (reset && reset.selector.includes("pagedjs_") === false) {
for (const r of reset) {
if (r.selector !== ".pagedjs_page") {
dList.remove(dItem);
break;
}
}
}
onContent(funcNode, fItem, fList, declaration, rule) {
if (funcNode.name === "counter") {
// console.log("counter", funcNode);
}
}
afterParsed(parsed) {
......@@ -52,13 +48,22 @@ class Counters extends Handler {
}
handleIncrement(declaration, rule) {
let identifier = declaration.value.children.first();
let number = declaration.value.children.getSize() > 1
&& declaration.value.children.last().value;
let name = identifier && identifier.name;
let names = [];
let values = [];
let increments = [];
declaration.value.children.forEach((child) => {
if (child.type && child.type === "Identifier") {
names.push(child.name);
}
if (child.type && child.type === "Number") {
values.push(child.value);
}
});
for (const name of names) {
let number = values.shift();
if (name === "page" || name.indexOf("target-counter-") === 0) {
return;
continue;
}
let selector = csstree.generate(rule.ruleNode.prelude);
......@@ -69,22 +74,33 @@ class Counters extends Handler {
} else {
counter = this.counters[name];
}
return counter.increments[selector] = {
let increment = {
selector: selector,
number: number || 1
};
counter.increments[selector] = increment;
increments.push(increment);
}
return increments;
}
handleReset(declaration, rule) {
let identifier = declaration.value.children.first();
let number = declaration.value.children.getSize() > 1
&& declaration.value.children.last().value;
let name = identifier && identifier.name;
let names = [];
let values = [];
let resets = [];
declaration.value.children.forEach((child) => {
if (child.type && child.type === "Identifier") {
names.push(child.name);
}
if (child.type && child.type === "Number") {
values.push(child.value);
}
});
for (const name of names) {
let counter;
let selector;
let prelude = rule.ruleNode.prelude;