Commit 6f8d6b53 authored by Fred Chasen's avatar Fred Chasen
Browse files

Merge branch 'position-fixed' into 'master'

Position fixed

See merge request !96
parents a603787f bd00d569
Pipeline #436 passed with stage
in 3 minutes and 35 seconds
const TIMEOUT = 10000; // Some book might take longer than this to renderer
describe('default', async () => {
let page;
let rendered;
beforeAll(async () => {
page = await loadPage('default/default.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 1 page', async () => {
let pages = await page.$$eval(".pagedjs_page", (r) => r.length);
expect(pages).toBe(5);
})
if (!DEBUG) {
it('should create a pdf', async () => {
let pdf = await page.pdf(PDF_SETTINGS);
expect(pdf).toMatchPDFSnapshot(1);
})
}
}
)
<!DOCTYPE html>
<html lang="zxx">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>
The Project Gutenberg eBook of Auroræ: Their Characters and Spectra, by J. Rand Capron.
</title>
<script src="../../../dist/paged.polyfill.js"></script>
<style>
@page {
size: letter;
margin: 1.2in;
}
@media screen {
.pagedjs_page {
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}
}
section {
break-before: page;
}
.fixed {
position: fixed;
top: 5mm;
left: 5mm;
}
.sub {
position: fixed;
color: orange;
margin: 0;
right: 0;
}
</style>
</head>
<body>
<div class="fixed">THIS IS THE FIXED ELEMENT</div>
<section>
<h2>lol</h2>
<p class="sub">THIS IS ALSO FIXED</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis quibusdam soluta magni nam, blanditiis maxime alias aliquam vero quod doloribus, asperiores placeat rem provident, molestiae in qui dolorum ullam necessitatibus?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis quibusdam soluta magni nam, blanditiis maxime alias aliquam vero quod doloribus, asperiores placeat rem provident, molestiae in qui dolorum ullam necessitatibus?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis quibusdam soluta magni nam, blanditiis maxime alias aliquam vero quod doloribus, asperiores placeat rem provident, molestiae in qui dolorum ullam necessitatibus?</p>
</section>
<section>
<h2>lol</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis quibusdam soluta magni nam, blanditiis maxime alias aliquam vero quod doloribus, asperiores placeat rem provident, molestiae in qui dolorum ullam necessitatibus?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis quibusdam soluta magni nam, blanditiis maxime alias aliquam vero quod doloribus, asperiores placeat rem provident, molestiae in qui dolorum ullam necessitatibus?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis quibusdam soluta magni nam, blanditiis maxime alias aliquam vero quod doloribus, asperiores placeat rem provident, molestiae in qui dolorum ullam necessitatibus?</p>
</section>
<section>
<h2>lol</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis quibusdam soluta magni nam, blanditiis maxime alias aliquam vero quod doloribus, asperiores placeat rem provident, molestiae in qui dolorum ullam necessitatibus?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis quibusdam soluta magni nam, blanditiis maxime alias aliquam vero quod doloribus, asperiores placeat rem provident, molestiae in qui dolorum ullam necessitatibus?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis quibusdam soluta magni nam, blanditiis maxime alias aliquam vero quod doloribus, asperiores placeat rem provident, molestiae in qui dolorum ullam necessitatibus?</p>
</section>
<section>
<h2>lol</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis quibusdam soluta magni nam, blanditiis maxime alias aliquam vero quod doloribus, asperiores placeat rem provident, molestiae in qui dolorum ullam necessitatibus?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis quibusdam soluta magni nam, blanditiis maxime alias aliquam vero quod doloribus, asperiores placeat rem provident, molestiae in qui dolorum ullam necessitatibus?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis quibusdam soluta magni nam, blanditiis maxime alias aliquam vero quod doloribus, asperiores placeat rem provident, molestiae in qui dolorum ullam necessitatibus?</p>
</section>
<section>
<h2>lol</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis quibusdam soluta magni nam, blanditiis maxime alias aliquam vero quod doloribus, asperiores placeat rem provident, molestiae in qui dolorum ullam necessitatibus?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis quibusdam soluta magni nam, blanditiis maxime alias aliquam vero quod doloribus, asperiores placeat rem provident, molestiae in qui dolorum ullam necessitatibus?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis quibusdam soluta magni nam, blanditiis maxime alias aliquam vero quod doloribus, asperiores placeat rem provident, molestiae in qui dolorum ullam necessitatibus?</p>
</section>
<section>
<h2>lol</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis quibusdam soluta magni nam, blanditiis maxime alias aliquam vero quod doloribus, asperiores placeat rem provident, molestiae in qui dolorum ullam necessitatibus?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis quibusdam soluta magni nam, blanditiis maxime alias aliquam vero quod doloribus, asperiores placeat rem provident, molestiae in qui dolorum ullam necessitatibus?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis quibusdam soluta magni nam, blanditiis maxime alias aliquam vero quod doloribus, asperiores placeat rem provident, molestiae in qui dolorum ullam necessitatibus?</p>
</section>
<section>
<h2>lol</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis quibusdam soluta magni nam, blanditiis maxime alias aliquam vero quod doloribus, asperiores placeat rem provident, molestiae in qui dolorum ullam necessitatibus?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis quibusdam soluta magni nam, blanditiis maxime alias aliquam vero quod doloribus, asperiores placeat rem provident, molestiae in qui dolorum ullam necessitatibus?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis quibusdam soluta magni nam, blanditiis maxime alias aliquam vero quod doloribus, asperiores placeat rem provident, molestiae in qui dolorum ullam necessitatibus?</p>
</section>
<section>
<h2>lol</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis quibusdam soluta magni nam, blanditiis maxime alias aliquam vero quod doloribus, asperiores placeat rem provident, molestiae in qui dolorum ullam necessitatibus?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis quibusdam soluta magni nam, blanditiis maxime alias aliquam vero quod doloribus, asperiores placeat rem provident, molestiae in qui dolorum ullam necessitatibus?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis quibusdam soluta magni nam, blanditiis maxime alias aliquam vero quod doloribus, asperiores placeat rem provident, molestiae in qui dolorum ullam necessitatibus?</p>
</section>
<section>
<h2>lol</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis quibusdam soluta magni nam, blanditiis maxime alias aliquam vero quod doloribus, asperiores placeat rem provident, molestiae in qui dolorum ullam necessitatibus?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis quibusdam soluta magni nam, blanditiis maxime alias aliquam vero quod doloribus, asperiores placeat rem provident, molestiae in qui dolorum ullam necessitatibus?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis quibusdam soluta magni nam, blanditiis maxime alias aliquam vero quod doloribus, asperiores placeat rem provident, molestiae in qui dolorum ullam necessitatibus?</p>
</section>
<section>
<h2>lol</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis quibusdam soluta magni nam, blanditiis maxime alias aliquam vero quod doloribus, asperiores placeat rem provident, molestiae in qui dolorum ullam necessitatibus?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis quibusdam soluta magni nam, blanditiis maxime alias aliquam vero quod doloribus, asperiores placeat rem provident, molestiae in qui dolorum ullam necessitatibus?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis quibusdam soluta magni nam, blanditiis maxime alias aliquam vero quod doloribus, asperiores placeat rem provident, molestiae in qui dolorum ullam necessitatibus?</p>
</section>
</body>
</html>
\ No newline at end of file
const TIMEOUT = 10000; // Some book might take longer than this to renderer
describe('element with position: fixed', async () => {
let page;
let rendered;
beforeAll(async () => {
page = await loadPage('position-fixed/position-fixed.html')
return page.rendered;
}, TIMEOUT)
afterAll(async () => {
if (!DEBUG) {
await page.close();
}
})
it("Page 2 should have a fixed element with a position absolute", async () => {
let text = await page.$eval("#page-2 .fixed", (r) =>
window.getComputedStyle(r).getPropertyValue("position"));
expect(text).toEqual("absolute");
});
it("Page 3 should have a fixed element with a position absolute", async () => {
let text = await page.$eval("#page-3 .fixed", (r) =>
window.getComputedStyle(r).getPropertyValue("position"));
expect(text).toEqual("absolute");
});
it("Page 4 should have a fixed element with a position absolute", async () => {
let text = await page.$eval("#page-4 .fixed", (r) =>
window.getComputedStyle(r).getPropertyValue("position"));
expect(text).toEqual("absolute");
});
it("Page 5 should have a fixed element with a position absolute", async () => {
let text = await page.$eval("#page-5 .fixed", (r) =>
window.getComputedStyle(r).getPropertyValue("position"));
expect(text).toEqual("absolute");
});
it("Page 2 should have a fixed element with a position absolute", async () => {
let text = await page.$eval("#page-2 .sub", (r) =>
window.getComputedStyle(r).getPropertyValue("position"));
expect(text).toEqual("absolute");
});
it("Page 3 should have a fixed element with a position absolute", async () => {
let text = await page.$eval("#page-3 .sub", (r) =>
window.getComputedStyle(r).getPropertyValue("position"));
expect(text).toEqual("absolute");
});
it("Page 4 should have a fixed element with a position absolute", async () => {
let text = await page.$eval("#page-4 .sub", (r) =>
window.getComputedStyle(r).getPropertyValue("position"));
expect(text).toEqual("absolute");
});
it("Page 5 should have a fixed element with a position absolute", async () => {
let text = await page.$eval("#page-5 .sub", (r) =>
window.getComputedStyle(r).getPropertyValue("position"));
expect(text).toEqual("absolute");
});
}
)
......@@ -4,6 +4,7 @@ import PrintMedia from "./print-media";
import Splits from "./splits";
import Counters from "./counters";
import Lists from "./lists";
import PositionFixed from "./position-fixed";
export default [
AtPage,
......@@ -11,5 +12,6 @@ export default [
PrintMedia,
Splits,
Counters,
Lists
Lists,
PositionFixed
];
import Handler from "../handler";
import csstree from "css-tree";
class PositionFixed extends Handler {
constructor(chunker, polisher, caller) {
super(chunker, polisher, caller);
this.styleSheet = polisher.styleSheet;
this.fixedElementsSelector = [];
this.fixedElements = [];
}
onDeclaration(declaration, dItem, dList, rule) {
if (declaration.property === "position" && declaration.value.children.first().name === "fixed") {
let selector = csstree.generate(rule.ruleNode.prelude);
this.fixedElementsSelector.push(selector);
dList.remove(dItem);
}
}
afterParsed(fragment) {
this.fixedElementsSelector.forEach(fixedEl => {
fragment.querySelectorAll(`${fixedEl}`).forEach(el => {
el.style.setProperty("position", "absolute");
this.fixedElements.push(el);
el.remove();
});
});
}
afterPageLayout(pageElement, page, breakToken) {
this.fixedElements.forEach(el => {
const clone = el.cloneNode(true);
pageElement.querySelector(".pagedjs_pagebox").insertAdjacentElement("afterbegin", clone);
});
}
}
export default PositionFixed;
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