From 30bbd9e21da235f3265d327cf3ef387cebf54604 Mon Sep 17 00:00:00 2001 From: Filip Slatinac Date: Mon, 30 Sep 2019 23:32:50 -0400 Subject: [PATCH] Added srcset support (#18) * added src set as a parsed attribute * added tests * changed to /a * added multiple attribute handling * added better comment * made snapshot ignore invalid input as if it is invalid input in the original DOM, it should stay invalid in the recreated DOM * added extra absolute test case * code style * addressed comments --- src/snapshot.ts | 31 ++++++++++++++++++++++++++ test/__snapshots__/integration.ts.snap | 5 ++++- test/html/with-relative-res.html | 3 +++ test/snapshot.test.ts | 2 +- 4 files changed, 39 insertions(+), 2 deletions(-) diff --git a/src/snapshot.ts b/src/snapshot.ts index 5f76994e..1ebb8709 100644 --- a/src/snapshot.ts +++ b/src/snapshot.ts @@ -85,7 +85,36 @@ export function absoluteToStylesheet(cssText: string, href: string): string { }); } +function getAbsoluteSrcsetString(doc: Document, attributeValue: string) { + if(attributeValue.trim() === "") { + return attributeValue + } + + const srcsetValues = attributeValue.split(",") + // srcset attributes is defined as such: + // srcset = "url size,url1 size1" + const resultingSrcsetString = srcsetValues.map((srcItem) => { + // removing all but middle spaces + const trimmedSrcItem = srcItem.trimLeft().trimRight() + const urlAndSize = trimmedSrcItem.split(" ") + // this means we have both 0:url and 1:size + if (urlAndSize.length === 2) { + const absUrl = absoluteToDoc(doc, urlAndSize[0]) + return `${absUrl} ${urlAndSize[1]}` + } else if(urlAndSize.length === 1){ + const absUrl = absoluteToDoc(doc, urlAndSize[0]) + return `${absUrl}` + } + return "" + }).join(',') + + return resultingSrcsetString +} + function absoluteToDoc(doc: Document, attributeValue: string): string { + if (attributeValue.trim() === ""){ + return attributeValue + } const a: HTMLAnchorElement = doc.createElement('a'); a.href = attributeValue; return a.href; @@ -132,6 +161,8 @@ function serializeNode( // relative path in attribute if (name === 'src' || name === 'href') { attributes[name] = absoluteToDoc(doc, value); + } else if (name == 'srcset') { + attributes[name] = getAbsoluteSrcsetString(doc, value) } else if (name === 'style') { attributes[name] = absoluteToStylesheet(value, location.href); } else { diff --git a/test/__snapshots__/integration.ts.snap b/test/__snapshots__/integration.ts.snap index 2ee77d42..3a38ee10 100644 --- a/test/__snapshots__/integration.ts.snap +++ b/test/__snapshots__/integration.ts.snap @@ -181,7 +181,10 @@ exports[`[html file]: with-relative-res.html 1`] = ` - \\"\\"" + \\"\\" + \\"\\" + \\"\\" + \\"\\"" `; exports[`[html file]: with-script.html 1`] = ` diff --git a/test/html/with-relative-res.html b/test/html/with-relative-res.html index 9e75f035..f8cd16dc 100644 --- a/test/html/with-relative-res.html +++ b/test/html/with-relative-res.html @@ -9,5 +9,8 @@ + + + \ No newline at end of file diff --git a/test/snapshot.test.ts b/test/snapshot.test.ts index 36d697ce..9c58dca7 100644 --- a/test/snapshot.test.ts +++ b/test/snapshot.test.ts @@ -5,7 +5,7 @@ import { absoluteToStylesheet } from '../src/snapshot'; describe('absolute url to stylesheet', () => { const href = 'http://localhost/css/style.css'; - it('cam handle relative path', () => { + it('can handle relative path', () => { expect(absoluteToStylesheet('url(a.jpg)', href)).to.equal( `url('http://localhost/css/a.jpg')`, );