tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

scroll-timeline-anonymous-source.html (1258B)

      1 <!DOCTYPE html>
      2 <html>
      3 <title>The scroll() timeline source</title>
      4 <link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#scroll-notation">
      5 <link rel="help" href="https://drafts.csswg.org/css-animations-2/#animation-timeline">
      6 <script src="/resources/testharness.js"></script>
      7 <script src="/resources/testharnessreport.js"></script>
      8 
      9 <style>
     10  @keyframes move {
     11    to { margin-left: 100px }
     12  }
     13 
     14  .animated {
     15    animation: move 1s linear;
     16  }
     17 
     18  #default {
     19    animation-timeline: scroll();
     20  }
     21 
     22  #root {
     23    animation-timeline: scroll(root);
     24  }
     25 
     26  #nearest {
     27    animation-timeline: scroll(nearest);
     28  }
     29 </style>
     30 
     31 <div class="animated" id="default"></div>
     32 <div class="animated" id="root"></div>
     33 <div class="animated" id="nearest"></div>
     34 
     35 <script>
     36 "use strict";
     37 
     38 const timelineSourceTest = type => {
     39  test(() => {
     40    const target = document.getElementById(type);
     41    const animations = target.getAnimations();
     42    assert_equals(animations.length, 1);
     43    assert_equals(animations[0].timeline.source, document.documentElement);
     44  }, `CSS animation correctly uses the <html> element as the source for the ${type} scroll() timeline`);
     45 };
     46 
     47 timelineSourceTest("default");
     48 timelineSourceTest("root");
     49 timelineSourceTest("nearest");
     50 
     51 </script>