Commit 76e05edb authored by Guillaume's avatar Guillaume
Browse files

Ensure that styles remain in the same order

parent 29482f92
h1 {
color: blue;
}
<!DOCTYPE html PUBLIC>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>preserve style order</title>
<script src="../../dist/paged.polyfill.js"></script>
<style>
h1 {
color: red;
}
</style>
<link href="./green.css" rel="stylesheet">
<link href="./blue.css" rel="stylesheet">
</head>
<body>
<section>
<h1>aaa</h1>
</section>
</body>
</html>
h1 {
color: green;
}
<!DOCTYPE html PUBLIC>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>preserve style order</title>
<script src="../../dist/paged.polyfill.js"></script>
<style>
h1 {
color: red;
}
</style>
<link href="./blue.css" rel="stylesheet">
</head>
<body>
<section>
<style>
h1 {
color: purple;
}
</style>
<h1>aaa</h1>
</section>
</body>
</html>
<!DOCTYPE html PUBLIC>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>preserve style order</title>
<script src="../../dist/paged.polyfill.js"></script>
<style>
h1 {
color: red;
}
</style>
<style>
h1 {
color: deeppink;
}
</style>
</head>
<body>
<section>
<h1>aaa</h1>
</section>
</body>
</html>
const TIMEOUT = 10000; // Some page might take longer than this to renderer
describe("style-order-simple", () => {
let page;
beforeAll(async () => {
page = await loadPage("styles/simple.html");
return page.rendered;
}, TIMEOUT);
afterAll(async () => {
if (!DEBUG) {
await page.close();
}
});
if (!DEBUG) {
it("should create a pdf", async () => {
let pdf = await page.pdf(PDF_SETTINGS);
expect(pdf).toMatchPDFSnapshot(1);
});
}
});
describe("style-order-consecutive", () => {
let page;
beforeAll(async () => {
page = await loadPage("styles/consecutive.html");
return page.rendered;
}, TIMEOUT);
afterAll(async () => {
if (!DEBUG) {
await page.close();
}
});
if (!DEBUG) {
it("should create a pdf", async () => {
let pdf = await page.pdf(PDF_SETTINGS);
expect(pdf).toMatchPDFSnapshot(1);
});
}
});
describe("style-order-scattered", () => {
let page;
beforeAll(async () => {
page = await loadPage("styles/scattered.html");
return page.rendered;
}, TIMEOUT);
afterAll(async () => {
if (!DEBUG) {
await page.close();
}
});
if (!DEBUG) {
it("should create a pdf", async () => {
let pdf = await page.pdf(PDF_SETTINGS);
expect(pdf).toMatchPDFSnapshot(1);
});
}
});
......@@ -104,7 +104,6 @@ class Polisher {
insert(text){
let head = document.querySelector("head");
let style = document.createElement("style");
style.type = "text/css";
style.setAttribute("data-pagedjs-inserted-styles", "true");
style.appendChild(document.createTextNode(text));
......
......@@ -4,7 +4,7 @@ import Hook from "../utils/hook";
import Chunker from "../chunker/chunker";
import Polisher from "../polisher/polisher";
import { registerHandlers, initializeHandlers } from "../utils/handlers";
import { initializeHandlers, registerHandlers } from "../utils/handlers";
class Previewer {
constructor(options) {
......@@ -101,22 +101,36 @@ class Previewer {
removeStyles(doc=document) {
// Get all stylesheets
let stylesheets = Array.from(doc.querySelectorAll("link[rel='stylesheet']"));
let hrefs = stylesheets.map((sheet) => {
sheet.remove();
return sheet.href;
});
const stylesheets = Array.from(doc.querySelectorAll("link[rel='stylesheet']"));
// Get inline styles
let inlineStyles = Array.from(doc.querySelectorAll("style:not([data-pagedjs-inserted-styles])"));
inlineStyles.forEach((inlineStyle) => {
let obj = {};
obj[window.location.href] = inlineStyle.textContent;
hrefs.push(obj);
inlineStyle.remove();
});
return hrefs;
const inlineStyles = Array.from(doc.querySelectorAll("style:not([data-pagedjs-inserted-styles])"));
const elements = [...stylesheets, ...inlineStyles];
return elements
// preserve order
.sort(function (element1, element2) {
const position = element1.compareDocumentPosition(element2);
if (position === Node.DOCUMENT_POSITION_PRECEDING) {
return 1;
} else if (position === Node.DOCUMENT_POSITION_FOLLOWING) {
return -1;
}
return 0;
})
// extract the href
.map((element) => {
if (element.nodeName === "STYLE") {
const obj = {};
obj[window.location.href] = element.textContent;
element.remove();
return obj;
}
if (element.nodeName === "LINK") {
element.remove();
return element.href;
}
// ignore
console.warn(`Unable to process: ${element}, ignoring.`);
});
}
async preview(content, stylesheets, renderTo) {
......
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