Skip to content

P
pagedjs
Commit 98e022fd authored by julien's avatar julien
Browse files
Options

add support for pseudo-element with content: data:...

parent b09521b1
Hide whitespace changes
Inline Side-by-side
Showing with 122 additions and 3 deletions
specs/data64/data64.html 0 → 100644
View file @ 98e022fd
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Data-64 for paged.js</title>
<script src="../../../dist/paged.polyfill.js"></script>
<style>
body {
width: 100%;
column-count: 2;
}
.block {
font-family: "Fira code", monospace;
margin: 0 auto;
width: 80%;
max-height: 80%;
box-shadow: 0 20px 68px rgba(0, 0, 0, .55);
background-color: #282c34;
border-radius: 5px;
color: #d7d3cb;
}
.block>.title {
display: block;
flex-direction: row;
line-height: 1.5em;
padding: 0 20px;
z-index: 10;
height: 1.5em;
min-height: 1.5em;
text-align: center;
position: relative;
}
.dblock {
margin-top: 10em;
}
.flex .block>.title::before {
content: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 14'><g fill='none' fill-rule='evenodd' transform='translate(1 1)' stroke-width='.5'><circle cx='6' cy='6' r='6' fill='%23FF5F56' stroke='%23E0443E'></circle><circle cx='26' cy='6' r='6' fill='%23FFBD2E' stroke='%23DEA123'></circle><circle cx='46' cy='6' r='6' fill='%2327C93F' stroke='%231AAB29'></circle></g></svg>");
height: 1.5em;
width: 36px;
display: flex;
align-items: center;
margin-right: 1rem;
position: absolute;
}
.block>.content {
padding: 1rem;
}
.dblock .block>.title::before {
content: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 14'><g fill='none' fill-rule='evenodd' transform='translate(1 1)' stroke-width='.5'><circle cx='6' cy='6' r='6' fill='%23FF5F56' stroke='%23E0443E'></circle><circle cx='26' cy='6' r='6' fill='%23FFBD2E' stroke='%23DEA123'></circle><circle cx='46' cy='6' r='6' fill='%2327C93F' stroke='%231AAB29'></circle></g></svg>");
height: 1.5em;
width: 36px;
display: block;
align-items: center;
margin-right: 1rem;
position: absolute;
}
</style>
</head>
<body>
<div class="flex">
<div class="block">
<div id="test" class="title">Title</div>
<div class="content">
console.log('hello')
</div>
</div>
</div>
<div class="dblock">
<div class="block">
<div id="test" class="title">Title</div>
<div class="content">
console.log('hello')
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
specs/data64/data64.spec.js 0 → 100644
View file @ 98e022fd
const TIMEOUT = 10000; // Some book might take longer than this to renderer
describe("default", async () => {
let page;
let rendered;
beforeAll(async () => {
page = await loadPage("data64/data64.html");
return page.rendered;
}, TIMEOUT);
afterAll(async () => {
if (!DEBUG) {
await page.close();
}
});
it("pseudo element with data:/image should appear", async () => {
let data = await page.$eval("#test" , (r) => window.getComputedStyle(r, "::before").content);
expect(data).toEqual("url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 14'><g fill='none' fill-rule='evenodd' transform='translate(1 1)' stroke-width='.5'><circle cx='6' cy='6' r='6' fill='%23FF5F56' stroke='%23E0443E'></circle><circle cx='26' cy='6' r='6' fill='%23FFBD2E' stroke='%23DEA123'></circle><circle cx='46' cy='6' r='6' fill='%2327C93F' stroke='%231AAB29'></circle></g></svg>\")");
});
// if (!DEBUG) {
// it('should create a pdf', async () => {
// let pdf = await page.pdf(PDF_SETTINGS);
// expect(pdf).toMatchPDFSnapshot(1);
// })
// }
}
);
src/polisher/sheet.js
View file @ 98e022fd
......@@ -174,9 +174,11 @@ class Sheet {
csstree.walk(ast, {
visit: "Url",
enter: (node, item, list) => {
let href = node.value.value.replace(/["']/g, "");
let url = new URL(href, this.url);
node.value.value = url.toString();
if (!node.value.value.includes("data:")) {
let href = node.value.value.replace(/["']/g, "");
let url = new URL(href, this.url);
node.value.value = url.toString();
}
}
});
}
......
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