Merge branch 'master' into getAnimations

.github/workflows/gh-pages.yml

@@ -0,0 +1,75 @@
+name: Build and test
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches:
+      - master
+      - main
+  pull_request:
+    branches:
+      - master
+      - main
+
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+# Default to bash
+defaults:
+  run:
+    shell: bash
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          submodules: recursive
+      - name: Setup Pages
+        id: pages
+        uses: actions/configure-pages@v3
+      - name: Install Node.js dependencies
+        run: "[[ -f package-lock.json || -f npm-shrinkwrap.json ]] && npm ci || true"
+      - name: Build with microbundle
+        run: "npm run build"
+      - name: Checkout WPT
+        run: "npm run test-setup"
+      - name: WPT hosts
+        run: "./test/wpt/wpt make-hosts-file | sudo tee -a /etc/hosts"
+      - name: WPT tests
+        run: "npm run test:wpt"
+      - name: Expected results
+        run: "npm run test:compare"
+      - name: Clean build files
+        run: "rm -rf node_modules test/wpt"
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v2
+        with:
+          path: .
+
+  # Deployment job
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    if: github.event_name == 'push'
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v2

.gitignore

@@ -20,11 +20,13 @@ node_modules
 
 # demos deployment directory
 build
+dist
 
 # jest coverage folder
 coverage
 
 test/wpt
+test/report
 
 .DS_Store
 

README.md

@@ -1,33 +1,46 @@
 # Scroll-timeline Polyfill
 
-Automated tests in CI provided by  [<img width="120px" src="https://saucelabs.com/images/logo-saucelabs.png">](https://saucelabs.com/)
-
-[![Sauce Test Status](https://saucelabs.com/browser-matrix/zochahou.svg)](https://saucelabs.com/u/zochahou)
-
-A polyfill of ScrollTimeline as defined by the [spec](https://wicg.github.io/scroll-animations/).
+A polyfill of ScrollTimeline and ViewTimeline as defined by the [spec](https://drafts.csswg.org/scroll-animations-1/).
 
 View a [cool demo showing its usage](https://flackr.github.io/scroll-timeline/demo/parallax/)!
 
 # Usage
 
-To play with ScrollTimeline, simply import the module into your site and you can start creating animations.
+To use this polyfill, import the module into your site and you can start creating animations that use a `ScrollTimeline` or `ViewTimeline`.
 
 ```js
 import 'https://flackr.github.io/scroll-timeline/dist/scroll-timeline.js';
 
 document.getElementById('parallax').animate(
     { transform: ['translateY(0)', 'translateY(100px)']},
-    { duration: 10000, // Totally arbitrary!
-      fill: 'both',
+    { fill: 'both',
       timeline: new ScrollTimeline({
-          scrollOffsets: [
-              new CSSUnitValue(0, 'px'),
-              new CSSUnitValue(200, 'px')
-          ]
-      })
+        source: document.documentElement,
+      }),
+      rangeStart: new CSSUnitValue(0, 'px'),
+      rangeEnd: new CSSUnitValue(200, 'px'),
     });
 ```
 
+Also works with CSS Animations that use a `view-timeline` or `scroll-timeline`
+
+```html
+<script src="https://flackr.github.io/scroll-timeline/dist/scroll-timeline.js"></script>
+```
+
+```css
+@keyframes parallax-effect {
+  to { transform: translateY(100px) }
+}
+#parallax {
+  animation: parallax-effect linear both;
+  animation-timeline: scroll(block root);
+  animation-range: 0px 200px;
+}
+```
+
+For more details on and use-cases of scroll-driven animations, please refer to [https://developer.chrome.com/articles/scroll-driven-animations/](https://developer.chrome.com/articles/scroll-driven-animations/) and [https://scroll-animations.style/](https://scroll-animations.style/)
+
 # Contributing
 
 ### 1. Polyfill dev 
@@ -39,7 +52,7 @@ npm i
 npm run dev 
 ```
 
-Then open the browser `http://localhost:5000`, choose one of the demos (test) to see how your changes. 
+Then open the browser `http://localhost:3000`, choose one of the demos (test) to see how your changes. 
 
 ### 2. Configure & Run Tests
 
@@ -85,7 +98,7 @@ LOCAL_WEBDRIVER_BIN=? #/path/to/webdriver-binaries
 *Command*
 
 ```shell script
-npm run test:webdriver
+npm run test:wpt
 ```
 
 ##### SauceLabs / CI
@@ -105,5 +118,5 @@ SAUCE_KEY=<secret> # Your API key
 *Command*
 
 ```shell script
-TEST_ENV=sauce npm run test:webdriver
+TEST_ENV=sauce npm run test:wpt
 ```

config.bat

@@ -0,0 +1,14 @@
+@echo off
+rem Configure command environment variables.
+rem    config silent [runs silently]
+rem    config [runs "verbosely", reporting on current settings]
+rem Note that anything will match "silent"
+if "%WPT_DIR%"=="" set WPT_DIR=test\wpt
+if "%WPT_SERVER_PORT%"=="" set WPT_SERVER_PORT=8082
+if "%WPT_SERVER_ADDRESS%"=="" set WPT_SERVER_ADDRESS=127.0.0.1
+if "%LOCAL_BROWSER%"=="" set LOCAL_BROWSER=chrome
+if "%LOCAL_WEBDRIVER_BIN%"=="" set LOCAL_WEBDRIVER_BIN=c:\src\src\out\default\chromedriver.exe
+if NOT "%1"=="" goto END
+echo Configured to run tests on %LOCAL_BROWSER% at http://%WPT_SERVER_ADDRESS%:%WPT_SERVER_PORT%
+echo Tests will be served from %WPT_DIR% using %LOCAL_WEBDRIVER_BIN%
+:END

demo/basic/anonymous-scroll-timeline-animation-shorthand.html

@@ -0,0 +1,52 @@
+<!DOCTYPE HTML>
+<title>Anonymous Scroll Progress Timeline</title>
+
+<style>
+  @keyframes move {
+    to { transform: translateX(350px) translateY(2000px); }
+  }
+
+  @keyframes colorChange {
+    from { background: red; }
+    to { background: blue; }
+  }
+
+  @keyframes widthChange {
+    from { width: 100px; }
+    to { width: 120px; }
+  }
+
+  #box_one {
+    width: 100px;
+    height: 100px;
+    background-color: green;
+    animation: linear colorChange both, linear widthChange both, move linear;
+    animation-timeline: scroll(root), auto, scroll(nearest y);
+  }
+
+  .spacer {
+    width: 100%;
+    height: 2000px;
+  }
+
+  #container {
+    width: 500px;
+    height: 500px;
+    background-color:beige;
+    overflow: auto;
+  }
+
+  body {
+    height: 1000px;
+  }
+</style>
+
+<body>
+
+  <div id="container">
+    <div id="box_one"></div>
+    <div class="spacer"></div>
+  </div>
+
+  <script src="../../dist/scroll-timeline.js"></script>
+</body>

demo/basic/anonymous-scroll-timeline.html

@@ -0,0 +1,42 @@
+<!DOCTYPE HTML>
+<title>Anonymous Scroll Progress Timeline</title>
+
+<style>
+  @keyframes move {
+    to { transform: translateX(350px) translateY(2000px); }
+  }
+
+  #box_one {
+    width: 100px;
+    height: 100px;
+    background-color: green;
+    animation: move linear;
+    animation-timeline: scroll(y nearest);
+  }
+
+  .spacer {
+    width: 100%;
+    height: 2000px;
+  }
+
+  #container {
+    width: 500px;
+    height: 500px;
+    background-color:beige;
+    overflow: auto;
+  }
+
+  body {
+    height: 3000px;
+  }
+</style>
+
+<body>
+
+  <div id="container">
+    <div id="box_one"></div>
+    <div class="spacer"></div>
+  </div>
+
+  <script src="../../dist/scroll-timeline.js"></script>
+</body>

demo/basic/css.html

@@ -22,22 +22,22 @@
         background: blue;
     }
 
-    @scroll-timeline scroll-in-document {
-    }
-
     @keyframes move {
         from {
             transform: translateY(0);
         }
 
         to {
-            transform: translateY(1000px);
+            transform: translateY(calc(100vh - 100px));
         }
     }
 
+    html {
+        scroll-timeline: --scroll-in-document;
+    }
     #test {
-	    animation: 1s linear move forwards;
-	    animation-timeline: scroll-in-document;
+	    animation: linear move both;
+	    animation-timeline: --scroll-in-document;
     }
 </style>
 <body>

demo/basic/index.html

@@ -34,9 +34,9 @@ <h1>ScrollTimeline polyfill</h1>
     var st = new ScrollTimeline();
     var a = document.querySelector('#test').animate([
         {transform: 'translateY(0)'},
-        {transform: 'translateY(' + (window.innerHeight - 100) + 'px)'},
+        {transform: 'translateY(calc(100vh - 100px))'},
     ], {
-        duration: 1000,
+        fill: 'both',
         timeline: st,
     });
 </script>

demo/basic/progress.html

@@ -2,10 +2,6 @@
 <script src="../../dist/scroll-timeline.js"></script>
 
 <style>
-@scroll-timeline progressTimeline {
-
-}
-
 body {
   padding: 0px;
   margin: 0px;
@@ -17,8 +13,8 @@
   width: 100%;
   height: 10px;
   background-color: red;
-  animation-timeline: progressTimeline;
-  animation: progress linear;
+  animation: progress linear forwards;
+  animation-timeline: scroll();
 }
 
 @keyframes progress {