Commit a37f0e50 authored by Fred Chasen's avatar Fred Chasen

Add dimension specs

parent b55e9fa5
Pipeline #30 canceled with stage
<!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>
Margin Boxes - Defaults
</title>
<script src="../../../dist/paged.polyfill.js"></script>
<style>
:root{
font-size: 18px;
}
@page {
size: 6in 8in;
margin: 30mm 20mm;
@top-left-corner{
background-color: crimson;
content: "top-left-corner";
}
@top-left{
background-color: coral;
content: "top-left";
}
@top-center{
background-color: yellow;
content: "top-left";
}
@top-right{
background-color: coral;
content: "top-left";
}
@top-right-corner{
background-color: crimson;
content: "top-right-corner";
}
@right-top{
background-color: cornflowerblue;
content: "right-top";
}
@right-middle{
background-color: aquamarine;
content: "right-middle";
}
@right-bottom{
background-color: cornflowerblue;
content: "right-bottom";
}
@bottom-right-corner{
background-color: crimson;
content: "bottom-right-corner";
}
@bottom-left{
background-color: coral;
content: "bottom-left";
}
@bottom-center{
background-color: yellow;
content: "bottom-center";
}
@bottom-right{
background-color: coral;
content: "bottom-right";
}
@bottom-left-corner{
background-color: crimson;
content: "bottom-left-corner";
}
@left-top{
background-color: cornflowerblue;
content: "left-top";
}
@left-middle{
background-color: aquamarine;
content: "left-middle";
}
@left-bottom{
background-color: cornflowerblue;
content: "left-bottom";
}
}
p {
line-height: 22px;
}
</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>
const TIMEOUT = 10000;
describe('margin-box-defaults', async () => {
let page;
let rendered;
beforeAll(async () => {
page = await loadPage('margin-boxes/defaults/defaults.html')
return page.rendered;
}, TIMEOUT)
afterAll(async () => {
if (!DEBUG) {
await page.close();
}
})
// top
it('Render the top-left-corner aligned right', async () => {
let pages = await page.$eval(".pagedjs_margin-top-left-corner", (r) => {
return window.getComputedStyle(r)["text-align"];
});
expect(pages).toEqual("right");
})
it('Render the top-left-corner in the middle', async () => {
let pages = await page.$eval(".pagedjs_margin-top-left-corner", (r) => {
return window.getComputedStyle(r)["align-items"];
});
expect(pages).toEqual("center");
})
it('Render the top-left aligned left', async () => {
let pages = await page.$eval(".pagedjs_margin-top-left", (r) => {
return window.getComputedStyle(r)["text-align"];
});
expect(pages).toEqual("left");
})
it('Render the top-left in the middle', async () => {
let pages = await page.$eval(".pagedjs_margin-top-left", (r) => {
return window.getComputedStyle(r)["align-items"];
});
expect(pages).toEqual("center");
})
it('Render the top-center aligned center', async () => {
let pages = await page.$eval(".pagedjs_margin-top-center", (r) => {
return window.getComputedStyle(r)["text-align"];
});
expect(pages).toEqual("center");
})
it('Render the top-center in the middle', async () => {
let pages = await page.$eval(".pagedjs_margin-top-center", (r) => {
return window.getComputedStyle(r)["align-items"];
});
expect(pages).toEqual("center");
})
it('Render the top-right aligned right', async () => {
let pages = await page.$eval(".pagedjs_margin-top-right", (r) => {
return window.getComputedStyle(r)["text-align"];
});
expect(pages).toEqual("right");
})
it('Render the top-right in the middle', async () => {
let pages = await page.$eval(".pagedjs_margin-top-right", (r) => {
return window.getComputedStyle(r)["align-items"];
});
expect(pages).toEqual("center");
})
it('Render the top-right-corner aligned left', async () => {
let pages = await page.$eval(".pagedjs_margin-top-right-corner", (r) => {
return window.getComputedStyle(r)["text-align"];
});
expect(pages).toEqual("left");
})
it('Render the top-right-corner in the middle', async () => {
let pages = await page.$eval(".pagedjs_margin-top-right-corner", (r) => {
return window.getComputedStyle(r)["align-items"];
});
expect(pages).toEqual("center");
})
// left
it('Render the left-top aligned center', async () => {
let pages = await page.$eval(".pagedjs_margin-left-top", (r) => {
return window.getComputedStyle(r)["text-align"];
});
expect(pages).toEqual("center");
})
it('Render the left-top at the top', async () => {
let pages = await page.$eval(".pagedjs_margin-left-top", (r) => {
return window.getComputedStyle(r)["align-items"];
});
expect(pages).toEqual("flex-start");
})
it('Render the left-middle aligned center', async () => {
let pages = await page.$eval(".pagedjs_margin-left-middle", (r) => {
return window.getComputedStyle(r)["text-align"];
});
expect(pages).toEqual("center");
})
it('Render the left-top in the middle', async () => {
let pages = await page.$eval(".pagedjs_margin-left-middle", (r) => {
return window.getComputedStyle(r)["align-items"];
});
expect(pages).toEqual("center");
})
it('Render the left-bottom aligned center', async () => {
let pages = await page.$eval(".pagedjs_margin-left-bottom", (r) => {
return window.getComputedStyle(r)["text-align"];
});
expect(pages).toEqual("center");
})
it('Render the left-bottom at the bottom', async () => {
let pages = await page.$eval(".pagedjs_margin-left-bottom", (r) => {
return window.getComputedStyle(r)["align-items"];
});
expect(pages).toEqual("flex-end");
})
// right
it('Render the right-top aligned center', async () => {
let pages = await page.$eval(".pagedjs_margin-right-top", (r) => {
return window.getComputedStyle(r)["text-align"];
});
expect(pages).toEqual("center");
})
it('Render the right-top at the top', async () => {
let pages = await page.$eval(".pagedjs_margin-right-top", (r) => {
return window.getComputedStyle(r)["align-items"];
});
expect(pages).toEqual("flex-start");
})
it('Render the right-middle aligned center', async () => {
let pages = await page.$eval(".pagedjs_margin-right-middle", (r) => {
return window.getComputedStyle(r)["text-align"];
});
expect(pages).toEqual("center");
})
it('Render the right-middle at the middle', async () => {
let pages = await page.$eval(".pagedjs_margin-right-middle", (r) => {
return window.getComputedStyle(r)["align-items"];
});
expect(pages).toEqual("center");
})
it('Render the right-bottom aligned center', async () => {
let pages = await page.$eval(".pagedjs_margin-right-bottom", (r) => {
return window.getComputedStyle(r)["text-align"];
});
expect(pages).toEqual("center");
})
it('Render the right-bottom at the bottom', async () => {
let pages = await page.$eval(".pagedjs_margin-right-bottom", (r) => {
return window.getComputedStyle(r)["align-items"];
});
expect(pages).toEqual("flex-end");
})
// bottom
it('Render the bottom-left-corner aligned right', async () => {
let pages = await page.$eval(".pagedjs_margin-bottom-left-corner", (r) => {
return window.getComputedStyle(r)["text-align"];
});
expect(pages).toEqual("right");
})
it('Render the bottom-left-corner in the middle', async () => {
let pages = await page.$eval(".pagedjs_margin-bottom-left-corner", (r) => {
return window.getComputedStyle(r)["align-items"];
});
expect(pages).toEqual("center");
})
it('Render the bottom-left aligned left', async () => {
let pages = await page.$eval(".pagedjs_margin-bottom-left", (r) => {
return window.getComputedStyle(r)["text-align"];
});
expect(pages).toEqual("left");
})
it('Render the bottom-left in the middle', async () => {
let pages = await page.$eval(".pagedjs_margin-top-left", (r) => {
return window.getComputedStyle(r)["align-items"];
});
expect(pages).toEqual("center");
})
it('Render the bottom-center aligned center', async () => {
let pages = await page.$eval(".pagedjs_margin-bottom-center", (r) => {
return window.getComputedStyle(r)["text-align"];
});
expect(pages).toEqual("center");
})
it('Render the bottom-center in the middle', async () => {
let pages = await page.$eval(".pagedjs_margin-bottom-center", (r) => {
return window.getComputedStyle(r)["align-items"];
});
expect(pages).toEqual("center");
})
it('Render the bottom-right aligned right', async () => {
let pages = await page.$eval(".pagedjs_margin-bottom-right", (r) => {
return window.getComputedStyle(r)["text-align"];
});
expect(pages).toEqual("right");
})
it('Render the bottom-right in the middle', async () => {
let pages = await page.$eval(".pagedjs_margin-bottom-right", (r) => {
return window.getComputedStyle(r)["align-items"];
});
expect(pages).toEqual("center");
})
it('Render the bottom-right-corner aligned left', async () => {
let pages = await page.$eval(".pagedjs_margin-bottom-right-corner", (r) => {
return window.getComputedStyle(r)["text-align"];
});
expect(pages).toEqual("left");
})
it('Render the bottom-right-corner in the middle', async () => {
let pages = await page.$eval(".pagedjs_margin-bottom-right-corner", (r) => {
return window.getComputedStyle(r)["align-items"];
});
expect(pages).toEqual("center");
})
if (!DEBUG) {
it('should create a pdf', async () => {
let pdf = await page.pdf(PDF_SETTINGS);
expect(pdf).toMatchPDFSnapshot(1);
})
}
}
)
This diff is collapsed.
const TIMEOUT = 10000;
describe('margin-box-dimension', async () => {
let page;
let rendered;
beforeAll(async () => {
page = await loadPage('margin-boxes/dimension/dimension.html')
return page.rendered;
}, TIMEOUT)
afterAll(async () => {
if (!DEBUG) {
await page.close();
}
})
if (!DEBUG) {
xit('should create a pdf', async () => {
let pdf = await page.pdf(PDF_SETTINGS);
expect(pdf).toMatchPDFSnapshot(1);
})
}
}
)
......@@ -34,6 +34,7 @@ export default `
display: flex;
grid-column: left / right;
grid-row: header;
flex-wrap: nowrap;
}
.pagedjs_margin-top .pagedjs_margin-top-left-corner {
......@@ -74,6 +75,7 @@ export default `
display: flex;
grid-column: left / right;
grid-row: footer;
flex-wrap: nowrap;
}
.pagedjs_margin-bottom .pagedjs_margin-bottom-left-corner {
......@@ -129,21 +131,35 @@ export default `
counter-reset: pages var(--page-count);
}
.pagedjs_page .pagedjs_margin-top-left-corner,
.pagedjs_page .pagedjs_margin-top-left,
.pagedjs_page .pagedjs_margin-top-center,
.pagedjs_page .pagedjs_margin-top-right,
.pagedjs_page .pagedjs_margin-top-right-corner,
.pagedjs_page .pagedjs_margin-bottom-left-corner,
.pagedjs_page .pagedjs_margin-bottom-left,
.pagedjs_page .pagedjs_margin-bottom-center,
.pagedjs_page .pagedjs_margin-bottom-right,
.pagedjs_page .pagedjs_margin-bottom-right-corner {
.pagedjs_page .pagedjs_margin-bottom-right {
height: 100%;
display: flex;
align-items: center;
flex: 1 1 0;
}
.pagedjs_page .pagedjs_margin-top-center,
.pagedjs_page .pagedjs_margin-bottom-center {
height: 100%;
display: flex;
align-items: center;
flex: 0 0 auto;
margin: 0 auto;
}
.pagedjs_page .pagedjs_margin-top-left-corner,
.pagedjs_page .pagedjs_margin-top-right-corner,
.pagedjs_page .pagedjs_margin-bottom-right-corner,
.pagedjs_page .pagedjs_margin-bottom-left-corner {
height: 100%;
display: flex;
}
.pagedjs_page .pagedjs_margin-left-top,
.pagedjs_page .pagedjs_margin-right-top {
display: flex;
......
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