From f451d571baa217a6469230ba949684fc28b58f85 Mon Sep 17 00:00:00 2001 From: Manuel Meister Date: Thu, 8 Aug 2024 15:06:53 +0200 Subject: [PATCH] Resolve relative urls for blob stylesheets --- .../asset/green.png | Bin 0 -> 79 bytes .../asset/red.png | Bin 0 -> 78 bytes .../index.html | 13 +++++ .../styles.css | 48 ++++++++++++++++++ index.html | 3 ++ src/scroll-timeline-css-parser.js | 20 +++++--- src/scroll-timeline-css.js | 2 +- 7 files changed, 79 insertions(+), 7 deletions(-) create mode 100644 demo/view-timeline-external-css-with-url/asset/green.png create mode 100644 demo/view-timeline-external-css-with-url/asset/red.png create mode 100644 demo/view-timeline-external-css-with-url/index.html create mode 100644 demo/view-timeline-external-css-with-url/styles.css diff --git a/demo/view-timeline-external-css-with-url/asset/green.png b/demo/view-timeline-external-css-with-url/asset/green.png new file mode 100644 index 0000000000000000000000000000000000000000..8a978f46e2feeaa4b3f278b85720e98722646d9c GIT binary patch literal 79 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61SBU+%rFB|VxBIJAr-fh6LJz%I1PKUB(56N bm@+WP?QCM)_5S5~pb7?0S3j3^P6m-ZCkC+t6) + + + + +
+
+
+
+
+
+ + diff --git a/demo/view-timeline-external-css-with-url/styles.css b/demo/view-timeline-external-css-with-url/styles.css new file mode 100644 index 0000000..fab5000 --- /dev/null +++ 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 index 54985ea..205daf5 100644 --- a/index.html +++ b/index.html @@ -33,6 +33,9 @@
  • demo/view-timeline-external-css
    • +
  • + demo/view-timeline-external-css-with-url +
  • demo/basic/anonymous-scroll-timeline.html
    • diff --git a/src/scroll-timeline-css-parser.js b/src/scroll-timeline-css-parser.js index 7720a09..b0a5eaf 100644 --- 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