diff --git a/specs/data64/data64.html b/specs/data64/data64.html new file mode 100644 index 0000000000000000000000000000000000000000..5e83aad552543a4f2595689a835dd164730d7d7e --- /dev/null +++ b/specs/data64/data64.html @@ -0,0 +1,96 @@ + + + + + Data-64 for paged.js + + + + +
+
+
Title
+
+ console.log('hello') +
+
+
+
+
+
Title
+
+ console.log('hello') +
+
+
+
+
+
Title
+
+ console.log('hello') +
+
+
+ + diff --git a/specs/data64/data64.spec.js b/specs/data64/data64.spec.js new file mode 100644 index 0000000000000000000000000000000000000000..f9b9e142a16e3f3c42fa1db695a26d114fdef9a1 --- /dev/null +++ b/specs/data64/data64.spec.js @@ -0,0 +1,31 @@ +const TIMEOUT = 10000; // Some book might take longer than this to renderer + +describe("default", () => { + let page; + + beforeAll(async () => { + page = await loadPage("data64/data64.html"); + return page.rendered; + }, TIMEOUT); + + afterAll(async () => { + if (!DEBUG) { + await page.close(); + } + }); + + it("pseudo element using content with url(\"data:image/svg+xml,...<.svg>\") function should appear", async () => { + let data = await page.$eval("#stringSVGDoubleQuotes" , (r) => window.getComputedStyle(r, "::before").content); + expect(data).toEqual("url(\"data:image/svg+xml,\")"); + }); + + it("pseudo element using content with url('data:image/svg+xml,...<.svg>') function should appear", async () => { + let data = await page.$eval("#stringSVGSingleQuotes" , (r) => window.getComputedStyle(r, "::before").content); + expect(data).toEqual("url(\"data:image/svg+xml,\")"); + }); + + it("pseudo element using content with url(data:image/svg+xml;base64,...) function should appear", async () => { + let data = await page.$eval("#rawBase64" , (r) => window.getComputedStyle(r, "::before").content); + expect(data).toEqual("url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA1NCAxNCc+PGcgZmlsbD0nbm9uZScgZmlsbC1ydWxlPSdldmVub2RkJyB0cmFuc2Zvcm09J3RyYW5zbGF0ZSgxIDEpJyBzdHJva2Utd2lkdGg9Jy41Jz48Y2lyY2xlIGN4PSc2JyBjeT0nNicgcj0nNicgZmlsbD0nI0ZGNUY1Nicgc3Ryb2tlPScjRTA0NDNFJz48L2NpcmNsZT48Y2lyY2xlIGN4PScyNicgY3k9JzYnIHI9JzYnIGZpbGw9JyNGRkJEMkUnIHN0cm9rZT0nI0RFQTEyMyc+PC9jaXJjbGU+PGNpcmNsZSBjeD0nNDYnIGN5PSc2JyByPSc2JyBmaWxsPScjMjdDOTNGJyBzdHJva2U9JyMxQUFCMjknPjwvY2lyY2xlPjwvZz48L3N2Zz4=\")"); + }); +}); diff --git a/src/polisher/sheet.js b/src/polisher/sheet.js index 80b4d2b6cf61c611db32c211f06a9edee0fa3094..12af14559c11a6014ef4a876af226b61c594a826 100644 --- a/src/polisher/sheet.js +++ b/src/polisher/sheet.js @@ -16,7 +16,7 @@ class Sheet { this.hooks.onDeclaration = new Hook(this); this.hooks.onSelector = new Hook(this); this.hooks.onPseudoSelector = new Hook(this); - + this.hooks.onContent = new Hook(this); this.hooks.onImport = new Hook(this); @@ -120,7 +120,7 @@ class Sheet { this.hooks.onRule.trigger(ruleNode, ruleItem, rulelist); this.declarations(ruleNode, ruleItem, rulelist); this.onSelector(ruleNode, ruleItem, rulelist); - + } }); } @@ -153,8 +153,8 @@ class Sheet { enter: (selectNode, selectItem, selectList) => { // console.log(selectNode); this.hooks.onSelector.trigger(selectNode, selectItem, selectList, {ruleNode, ruleItem, rulelist}); - - if (selectNode.children.forEach(node => {if (node.type === "PseudoElementSelector") { + + if (selectNode.children.forEach(node => {if (node.type === "PseudoElementSelector") { csstree.walk(node, { visit: "PseudoElementSelector", enter: (pseudoNode, pItem, pList) => { @@ -174,9 +174,14 @@ 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(); + let content = node.value.value; + if ((node.value.type === "Raw" && content.startsWith("data:")) || (node.value.type === "String" && (content.startsWith("\"data:") || content.startsWith("'data:")))) { + // data-uri should not be parsed using the URL interface. + } else { + let href = content.replace(/["']/g, ""); + let url = new URL(href, this.url); + node.value.value = url.toString(); + } } }); }