Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Resolve relative urls for blob stylesheets #279

Merged
merged 2 commits into from
Aug 26, 2024
Merged

Resolve relative urls for blob stylesheets #279

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f451d57
Resolve relative urls for blob stylesheets
manuelmeister Aug 8, 2024
24ba542
Fix replaceUrlFunctions
manuelmeister Aug 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added demo/view-timeline-external-css-with-url/asset/green.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added demo/view-timeline-external-css-with-url/asset/red.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
13 changes: 13 additions & 0 deletions demo/view-timeline-external-css-with-url/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<!DOCTYPE html>
<script src="../../dist/scroll-timeline.js"></script>

<link rel="stylesheet" href="styles.css">
<body>
<div id="container">
<div class="big-spacer"></div>
<div id="subject"></div>
<div class="big-spacer"></div>
<div id=box></div>
</div>
</body>

48 changes: 48 additions & 0 deletions demo/view-timeline-external-css-with-url/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
#container {
overflow-y: scroll;
height: 300px;
width: 300px;
border: 1px solid black;
timeline-scope: --foo;
}
.big-spacer {
height: 800px;
}
#subject {
background: url(asset/green.png), blue;
height: 100px;
width: 100px;
view-timeline-name: --foo;
}
#box {
position: fixed;
top: 0;
background: url("../view-timeline-external-css-with-url/asset/red.png"), yellow;
width: 50px;
height: 50px;
/* Please don't delete the following comments */
/* This comment has been added to make sure css parser ignores it */
/* animation-range: entry 0% 100%; */
animation: linear anim forwards;
animation-timeline: --foo;
}

/* Please don't delete the following comments */
/* This comment has been added to make sure css parser ignores it */
/*
#box {
position: fixed;
top: 0;
background-color: red;
width: 50px;
height: 50px;
animation-timeline: foo;
animation-range: entry 0% 100%;
animation: linear anim;
}
*/

@keyframes anim {
from { top: 0px; left: 0px; }
to { top: 100px; left: 200px; }
}
manuelmeister marked this conversation as resolved.
Show resolved Hide resolved
3 changes: 3 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,9 @@
<li>
<a href="demo/view-timeline-external-css/">demo/view-timeline-external-css</a>
</li>
<li>
<a href="demo/view-timeline-external-css-with-url/">demo/view-timeline-external-css-with-url</a>
</li>
<li>
<a href="demo/basic/anonymous-scroll-timeline.html">demo/basic/anonymous-scroll-timeline.html</a>
</li>
Expand Down
20 changes: 14 additions & 6 deletions src/scroll-timeline-css-parser.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,9 +84,17 @@ export class StyleParser {
}

// If this sheet has no srcURL (like from a <style> tag), we are done.
// TODO: Otherwise, we have to find `url()` functions and resolve
// relative and path-absolute URLs to absolute URLs.
return p.sheetSrc;
// Otherwise, we have to find `url()` functions and resolve
// relative URLs to absolute URLs.
if (!srcUrl) {
return p.sheetSrc;
}

const srcUrlDir = srcUrl.lastIndexOf('/') > location.origin.length
? srcUrl.substring(0, srcUrl.lastIndexOf('/'))
: location.origin;
manuelmeister marked this conversation as resolved.
Show resolved Hide resolved

return p.sheetSrc.replace(/url\((["'])?(?:\.?\/|(?!https?:\/\/|(?:data|blob):))/gm, `url($1${srcUrlDir}/`);
manuelmeister marked this conversation as resolved.
Show resolved Hide resolved
}

getAnimationTimelineOptions(animationName, target) {
Expand All @@ -107,7 +115,7 @@ export class StyleParser {
}
} catch {
// TODO: handle nested at-rules
}
}
}

return null;
Expand Down Expand Up @@ -154,10 +162,10 @@ export class StyleParser {
findPreviousSiblingOrAncestorMatchingSelector(target, selector) {
// Target self
let candidate = target;

// Walk the DOM tree: preceding siblings and ancestors
while (candidate) {
if (candidate.matches(selector))
if (candidate.matches(selector))
return candidate;
candidate = candidate.previousElementSibling || candidate.parentElement;
}
Expand Down
2 changes: 1 addition & 1 deletion src/scroll-timeline-css.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ function initMutationObserver() {
fetch(linkElement.getAttribute('href')).then(async (response) => {
const result = await response.text();
let newSrc = parser.transpileStyleSheet(result, true);
newSrc = parser.transpileStyleSheet(result, false);
newSrc = parser.transpileStyleSheet(result, false, response.url);
if (newSrc != result) {
const blob = new Blob([newSrc], { type: 'text/css' });
const url = URL.createObjectURL(blob);
Expand Down