Commit 1b887733 authored by Fred Chasen's avatar Fred Chasen

Merge branch 'update_margins' into 'master'

Update margins

See merge request tools/pagedjs!15
parents a0c786f7 c0ba04d6
Pipeline #39 failed with stage
This diff is collapsed.
{
"name": "pagedjs",
"version": "0.1.7",
"version": "0.1.8",
"description": "Chunks up a document into paged media flows and applies print styles",
"author": "Fred Chasen",
"license": "MIT",
......@@ -23,7 +23,7 @@
"express": "^4.16.3",
"jest": "^23.4.1",
"jest-image-snapshot": "^2.4.3",
"puppeteer": "fchasen/puppeteer",
"puppeteer": "GoogleChrome/puppeteer",
"rimraf": "^2.6.2",
"rollup": "^0.63.2",
"rollup-plugin-commonjs": "^9.1.3",
......
......@@ -14,79 +14,56 @@ describe('break-before-left', async () => {
}
})
it('should render 38 pages', async () => {
it('should render 36 pages', async () => {
let pages = await page.$$eval(".pagedjs_page", (r) => {
return r.length;
});
expect(pages).toEqual(38);
expect(pages).toEqual(36);
})
it('should render page 1 as blank', async () => {
let isBlank = await page.$eval("[data-page-number='1']", (r) => {
return r.classList.contains("pagedjs_blank_page");
});
expect(isBlank).toEqual(true);
})
it('should render page 2 as left', async () => {
let isLeft = await page.$eval("[data-page-number='2']", (r) => {
return r.classList.contains("pagedjs_left_page");
// it('should render page 1 as blank', async () => {
// let isBlank = await page.$eval("[data-page-number='1']", (r) => {
// return r.classList.contains("pagedjs_blank_page");
// });
//
// expect(isBlank).toEqual(true);
// })
it('should render page 1 as right', async () => {
let isLeft = await page.$eval("[data-page-number='1']", (r) => {
return r.classList.contains("pagedjs_right_page");
});
expect(isLeft).toEqual(true);
})
it('page 2 should be Section', async () => {
let text = await page.$eval("[data-page-number='2']", (r) => r.textContent);
it('page 1 should be Section', async () => {
let text = await page.$eval("[data-page-number='1']", (r) => r.textContent);
expect(text).toContain('Section');
})
it('should render page 3 as blank', async () => {
let isBlank = await page.$eval("[data-page-number='3']", (r) => {
return r.classList.contains("pagedjs_blank_page");
});
expect(isBlank).toEqual(true);
})
it('should render page 4 as left', async () => {
let isLeft = await page.$eval("[data-page-number='4']", (r) => {
return r.classList.contains("pagedjs_left_page");
});
expect(isLeft).toEqual(true);
})
it('page 4 should be Section 1', async () => {
let text = await page.$eval("[data-page-number='4']", (r) => r.textContent);
it('page 2 should be Section 1', async () => {
let text = await page.$eval("[data-page-number='2']", (r) => r.textContent);
expect(text).toContain('Section 1');
})
it('should render page 11 as blank', async () => {
let isBlank = await page.$eval("[data-page-number='11']", (r) => {
it('should render page 7 as blank', async () => {
let isBlank = await page.$eval("[data-page-number='7']", (r) => {
return r.classList.contains("pagedjs_blank_page");
});
expect(isBlank).toEqual(true);
})
it('page 12 include h2', async () => {
let text = await page.$eval("[data-page-number='12']", (r) => r.textContent);
it('page 10 include h2', async () => {
let text = await page.$eval("[data-page-number='10']", (r) => r.textContent);
expect(text).toContain('A - h2 (inline element)');
})
it('should render page 12 as left', async () => {
let isLeft = await page.$eval("[data-page-number='12']", (r) => {
return r.classList.contains("pagedjs_left_page");
});
expect(isLeft).toEqual(true);
})
if (!DEBUG) {
it('should create a pdf', async () => {
......@@ -94,10 +71,8 @@ describe('break-before-left', async () => {
expect(pdf).toMatchPDFSnapshot(1);
expect(pdf).toMatchPDFSnapshot(2);
expect(pdf).toMatchPDFSnapshot(3);
expect(pdf).toMatchPDFSnapshot(4);
expect(pdf).toMatchPDFSnapshot(11);
expect(pdf).toMatchPDFSnapshot(12);
expect(pdf).toMatchPDFSnapshot(7);
expect(pdf).toMatchPDFSnapshot(10);
})
}
}
......
......@@ -21,8 +21,8 @@
@bottom-left{
content: counter(page);
background-color: coral;
}
@top-left-corner{
background-color: crimson;
}
......@@ -50,9 +50,9 @@
@bottom-right-corner{
background-color: crimson;
}
@bottom-left{
/* @bottom-left{
background-color: coral;
}
} */
@bottom-center{
background-color: yellow;
}
......
<!DOCTYPE html PUBLIC>
<html lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>
A auto-size // B, C not not generated
</title>
<script src="http://localhost:9090/dist/paged.polyfill.js"></script>
<style>
:root{
font-size: 18px;
}
@page {
size: 6in 8in;
margin: 30mm 20mm;
/* TOP MARGINS */
@top-left{
content: "top-left";
background-color: crimson;
}
/* RIGHT MARGINS*/
@right-top{
content: "right-top";
background-color: aquamarine;
}
/* BOTTOM MARGINS*/
@bottom-left{
content: "bottom-left";
background-color: crimson;
}
/* LEFT MARGINS */
@left-top{
content: "left-top";
background-color: aquamarine;
}
/* CORNERS MARGINS */
@top-left-corner { background-color: Gainsboro; }
@top-right-corner { background-color: Gainsboro; }
@bottom-right-corner { background-color: Gainsboro; }
@bottom-left-corner { background-color: Gainsboro; }
}
</style>
</head>
<body>
<section>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non suscipit odio. Aenean ut ligula id mauris efficitur tincidunt vitae non leo. In convallis convallis leo, eget molestie metus imperdiet eu. Praesent pharetra, leo a laoreet mattis, ligula nisl commodo ante, non vestibulum nisi lacus eget magna. Maecenas scelerisque nibh ac felis egestas, egestas elementum risus pellentesque. Nulla iaculis ut leo a iaculis. Donec vel sodales dolor, vel fringilla elit. Vivamus aliquam diam eu maximus elementum. Integer eu urna at felis fermentum hendrerit.
</p>
</section>
</body>
\ No newline at end of file
<!DOCTYPE html PUBLIC>
<html lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>
A size // B, C not not generated
</title>
<script src="http://localhost:9090/dist/paged.polyfill.js"></script>
<style>
:root{
font-size: 18px;
}
@page {
size: 6in 8in;
margin: 30mm 20mm;
/* TOP MARGINS*/
@top-left{
content: "top-left";
width: 100px;
background-color: crimson;
}
/* RIGHT MARGINS */
@right-top{
content: "right-top";
height: 100px;
background-color: aquamarine;
}
/* BOTTOM MARGINS */
@bottom-left{
content: "bottom-left";
width: 100px;
background-color: crimson;
}
/* LEFT MARGINS */
@left-top{
content: "left-top";
height: 100px;
background-color: aquamarine;
}
/* CORNERS MARGINS */
@top-left-corner { background-color: Gainsboro; }
@top-right-corner { background-color: Gainsboro; }
@bottom-right-corner { background-color: Gainsboro; }
@bottom-left-corner { background-color: Gainsboro; }
}
</style>
</head>
<body>
<section>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non suscipit odio. Aenean ut ligula id mauris efficitur tincidunt vitae non leo. In convallis convallis leo, eget molestie metus imperdiet eu. Praesent pharetra, leo a laoreet mattis, ligula nisl commodo ante, non vestibulum nisi lacus eget magna. Maecenas scelerisque nibh ac felis egestas, egestas elementum risus pellentesque. Nulla iaculis ut leo a iaculis. Donec vel sodales dolor, vel fringilla elit. Vivamus aliquam diam eu maximus elementum. Integer eu urna at felis fermentum hendrerit.
</p>
</section>
</body>
\ No newline at end of file
<!DOCTYPE html PUBLIC>
<html lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>
B generated, auto-size // A, C not not generated
</title>
<script src="http://localhost:9090/dist/paged.polyfill.js"></script>
<style>
:root{
font-size: 18px;
}
@page {
size: 6in 8in;
margin: 30mm 20mm;
/* TOP MARGINS */
@top-center{
content: "top-center";
background-color: yellow;
}
/* RIGHT MARGINS */
@right-middle{
content: "right-middle";
background-color: cornflowerblue;
}
/* BOTTOM MARGINS*/
@bottom-center{
content: "bottom-center";
background-color: yellow;
}
/* LEFT MARGINS */
@left-middle{
content: "left-middle";
background-color: cornflowerblue;
}
@top-left-corner { background-color: Gainsboro; }
@top-right-corner { background-color: Gainsboro; }
@bottom-right-corner { background-color: Gainsboro; }
@bottom-left-corner { background-color: Gainsboro; }
}
</style>
</head>
<body>
<section>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non suscipit odio. Aenean ut ligula id mauris efficitur tincidunt vitae non leo. In convallis convallis leo, eget molestie metus imperdiet eu. Praesent pharetra, leo a laoreet mattis, ligula nisl commodo ante, non vestibulum nisi lacus eget magna. Maecenas scelerisque nibh ac felis egestas, egestas elementum risus pellentesque. Nulla iaculis ut leo a iaculis. Donec vel sodales dolor, vel fringilla elit. Vivamus aliquam diam eu maximus elementum. Integer eu urna at felis fermentum hendrerit.
</p>
</section>
</body>
\ No newline at end of file
<!DOCTYPE html PUBLIC>
<html lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>
B size // A, C not not generated
</title>
<script src="http://localhost:9090/dist/paged.polyfill.js"></script>
<style>
:root{
font-size: 18px;
}
@page {
size: 6in 8in;
margin: 30mm 20mm;
/* TOP MARGINS */
@top-center{
content: "top-center";
width: 300px;
background-color: yellow;
}
/* RIGHT MARGINS */
@right-middle{
content: "right-middle";
height: 300px;
background-color: cornflowerblue;
}
/* BOTTOM MARGINS */
@bottom-center{
content: "bottom-center";
width: 300px;
background-color: yellow;
}
/* LEFT MARGINS */
@left-middle{
content: "left-middle";
height: 300px;
background-color: cornflowerblue;
}
@top-left-corner { background-color: Gainsboro; }
@top-right-corner { background-color: Gainsboro; }
@bottom-right-corner { background-color: Gainsboro; }
@bottom-left-corner { background-color: Gainsboro; }
}
</style>
</head>
<body>
<section>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non suscipit odio. Aenean ut ligula id mauris efficitur tincidunt vitae non leo. In convallis convallis leo, eget molestie metus imperdiet eu. Praesent pharetra, leo a laoreet mattis, ligula nisl commodo ante, non vestibulum nisi lacus eget magna. Maecenas scelerisque nibh ac felis egestas, egestas elementum risus pellentesque. Nulla iaculis ut leo a iaculis. Donec vel sodales dolor, vel fringilla elit. Vivamus aliquam diam eu maximus elementum. Integer eu urna at felis fermentum hendrerit.
</p>
</section>
</body>
\ No newline at end of file
<!DOCTYPE html PUBLIC>
<html lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>
C generated, auto-size // A, B not not generated
</title>
<script src="http://localhost:9090/dist/paged.polyfill.js"></script>
<style>
:root{
font-size: 18px;
}
@page {
size: 6in 8in;
margin: 30mm 20mm;
/* TOP MARGINS */
@top-right{
content: "top-right";
background-color: coral;
}
/* RIGHT MARGINS */
@right-bottom{
content: "right-bottom";
background-color: aqua;
}
/* BOTTOM MARGINS */
@bottom-right{
content: "bottom-right";
background-color: coral;
}
/* LEFT MARGINS*/
@left-bottom{
content: "left-bottom";
background-color: aqua;
}
/* CORNERS MARGINS */
@top-left-corner { background-color: Gainsboro; }
@top-right-corner { background-color: Gainsboro; }
@bottom-right-corner { background-color: Gainsboro; }
@bottom-left-corner { background-color: Gainsboro; }
}
</style>
</head>
<body>
<section>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non suscipit odio. Aenean ut ligula id mauris efficitur tincidunt vitae non leo. In convallis convallis leo, eget molestie metus imperdiet eu. Praesent pharetra, leo a laoreet mattis, ligula nisl commodo ante, non vestibulum nisi lacus eget magna. Maecenas scelerisque nibh ac felis egestas, egestas elementum risus pellentesque. Nulla iaculis ut leo a iaculis. Donec vel sodales dolor, vel fringilla elit. Vivamus aliquam diam eu maximus elementum. Integer eu urna at felis fermentum hendrerit.
</p>
</section>
</body>
\ No newline at end of file
<!DOCTYPE html PUBLIC>
<html lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>
C generated, size // A, B not not generated
</title>
<script src="http://localhost:9090/dist/paged.polyfill.js"></script>
<style>
:root{
font-size: 18px;
}
@page {
size: 6in 8in;
margin: 30mm 20mm;
/* TOP MARGINS */
@top-right{
content: "top-right";
width: 150px;
background-color: coral;
}
/* RIGHT MARGINS */
@right-bottom{
content: "right-bottom";
height: 150px;
background-color: aqua;
}
/* BOTTOM MARGINS */
@bottom-right{
content: "bottom-right";
width: 150px;
background-color: coral;
}
/* LEFT MARGINS*/
@left-bottom{
content: "left-bottom";
height: 150px;
background-color: aqua;
}
/* CORNERS MARGINS */
@top-left-corner { background-color: Gainsboro; }
@top-right-corner { background-color: Gainsboro; }
@bottom-right-corner { background-color: Gainsboro; }
@bottom-left-corner { background-color: Gainsboro; }
}
</style>
</head>
<body>
<section>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non suscipit odio. Aenean ut ligula id mauris efficitur tincidunt vitae non leo. In convallis convallis leo, eget molestie metus imperdiet eu. Praesent pharetra, leo a laoreet mattis, ligula nisl commodo ante, non vestibulum nisi lacus eget magna. Maecenas scelerisque nibh ac felis egestas, egestas elementum risus pellentesque. Nulla iaculis ut leo a iaculis. Donec vel sodales dolor, vel fringilla elit. Vivamus aliquam diam eu maximus elementum. Integer eu urna at felis fermentum hendrerit.
</p>
</section>
</body>
\ No newline at end of file
<!DOCTYPE html PUBLIC>
<html lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>
A (auto size) + B (auto-size) // C not generated
</title>
<script src="http://localhost:9090/dist/paged.polyfill.js"></script>
<style>
:root{
font-size: 18px;
}
@page {
size: 6in 8in;
margin: 30mm 20mm;
/* TOP MARGINS */
@top-left{
content: "top-left";
background-color: crimson;
}
@top-center{
content: "top-center";
background-color: yellow;
}
/* RIGHT MARGINS */
@right-top{
content: "right-top";
background-color: aquamarine;
}
@right-middle{
content: "right-middle";
background-color: cornflowerblue;
}
/* BOTTOM MARGINS */
@bottom-left{
content: "bottom-left";
background-color: crimson;
}
@bottom-center{