Resolve relative urls for blob stylesheets

flackr · Aug 8, 2024 · f451d57 · f451d57
1 parent 9b56353
commit f451d57
Show file tree

Hide file tree

Showing 7 changed files with 79 additions and 7 deletions.
diff --git a/demo/view-timeline-external-css-with-url/asset/green.png b/demo/view-timeline-external-css-with-url/asset/green.png
diff --git a/demo/view-timeline-external-css-with-url/asset/red.png b/demo/view-timeline-external-css-with-url/asset/red.png
diff --git a/demo/view-timeline-external-css-with-url/index.html b/demo/view-timeline-external-css-with-url/index.html
@@ -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>
+
diff --git a/demo/view-timeline-external-css-with-url/styles.css b/demo/view-timeline-external-css-with-url/styles.css
@@ -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; }
+}
diff --git a/index.html b/index.html
@@ -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>

diff --git a/src/scroll-timeline-css-parser.js b/src/scroll-timeline-css-parser.js
@@ -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;
+
+    return p.sheetSrc.replace(/url\((["'])?(?:\.?\/|(?!https?:\/\/|(?:data|blob):))/gm, `url($1${srcUrlDir}/`);
   }
 
   getAnimationTimelineOptions(animationName, target) {
@@ -107,7 +115,7 @@ export class StyleParser {
         }
       } catch {
         // TODO: handle nested at-rules
-      }      
+      }
     }
 
     return null;
@@ -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;
     }

diff --git a/src/scroll-timeline-css.js b/src/scroll-timeline-css.js
@@ -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);
-Original file 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 @@