Commit 630aca5f authored by Guillaume's avatar Guillaume
Browse files

resolves #112 handle @page margin and padding without unit

parent 5ea739b3
<!DOCTYPE html PUBLIC>
<html lang="en" lang="en">
<head>
<style>
@page {
size: 4cm 4cm;
margin: 0 20px;
@left-middle {
content: "left";
background-color: pink;
}
@top-center {
content: "top";
background-color: teal;
}
}
.big {
font-size: 8px;
}
</style>
<script src="../../../../dist/paged.polyfill.js"></script>
</head>
<body>
<p class="big">Big</p>
</body>
</html>
const TIMEOUT = 10000; // Some book might take longer than this to renderer
describe("margin-0", () => {
let page;
beforeAll(async () => {
page = await loadPage("page-rules/size/margin/margin-0.html");
return page.rendered;
}, TIMEOUT);
afterAll(async () => {
if (!DEBUG) {
await page.close();
}
});
it("should render 1 page", async () => {
let pages = await page.$$eval(".pagedjs_page", (r) => r.length);
expect(pages).toBe(1);
});
if (!DEBUG) {
it("should create a pdf", async () => {
let pdf = await page.pdf(PDF_SETTINGS);
expect(pdf).toMatchPDFSnapshot(1);
});
}
});
<!DOCTYPE html PUBLIC>
<html lang="en" lang="en">
<head>
<style>
@page {
size: 4cm 4cm;
padding: 0 20px;
@left-middle {
content: "left";
background-color: pink;
}
@top-center {
content: "top";
background-color: teal;
}
}
.big {
font-size: 8px;
}
</style>
<script src="../../../../dist/paged.polyfill.js"></script>
</head>
<body>
<p class="big">Big</p>
</body>
</html>
const TIMEOUT = 10000; // Some book might take longer than this to renderer
describe("padding-0", () => {
let page;
beforeAll(async () => {
page = await loadPage("page-rules/size/padding/padding-0.html");
return page.rendered;
}, TIMEOUT);
afterAll(async () => {
if (!DEBUG) {
await page.close();
}
});
it("should render 1 page", async () => {
let pages = await page.$$eval(".pagedjs_page", (r) => r.length);
expect(pages).toBe(1);
});
if (!DEBUG) {
it("should create a pdf", async () => {
let pdf = await page.pdf(PDF_SETTINGS);
expect(pdf).toMatchPDFSnapshot(1);
});
}
});
......@@ -84,7 +84,7 @@ class AtPage extends Handler {
page.marginalia = marginalia;
}
let declarations = this.replaceDeclartations(node);
let declarations = this.replaceDeclarations(node);
if (declarations.size) {
page.size = declarations.size;
......@@ -289,7 +289,7 @@ class AtPage extends Handler {
return parsed;
}
replaceDeclartations(ast) {
replaceDeclarations(ast) {
let parsed = {};
csstree.walk(ast.block, {
......@@ -448,9 +448,17 @@ class AtPage extends Handler {
};
csstree.walk(declaration, {
visit: "Dimension",
enter: (node, item, list) => {
margins.push(node);
enter: (node) => {
switch (node.type) {
case "Dimension": // margin: 1in 2in, margin: 20px, etc...
margins.push(node);
break;
case "Number": // margin: 0
margins.push({value: node.value, unit: "px"});
break;
default:
// ignore
}
}
});
......@@ -488,9 +496,17 @@ class AtPage extends Handler {
};
csstree.walk(declaration, {
visit: "Dimension",
enter: (node, item, list) => {
paddings.push(node);
enter: (node) => {
switch (node.type) {
case "Dimension": // padding: 1in 2in, padding: 20px, etc...
paddings.push(node);
break;
case "Number": // padding: 0
paddings.push({value: node.value, unit: "px"});
break;
default:
// ignore
}
}
});
if (paddings.length === 1) {
......@@ -886,11 +902,11 @@ class AtPage extends Handler {
let pageHeightVar = this.createVariable("--pagedjs-height", CSSValueToString(height));
rules.push(
bleedTop,
bleedRight,
bleedBottom,
bleedLeft,
bleedTopRecto,
bleedTop,
bleedRight,
bleedBottom,
bleedLeft,
bleedTopRecto,
bleedRightRecto,
bleedBottomRecto,
bleedLeftRecto,
......@@ -898,7 +914,7 @@ class AtPage extends Handler {
bleedRightVerso,
bleedBottomVerso,
bleedLeftVerso,
pageWidthVar,
pageWidthVar,
pageHeightVar
);
}
......
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