tor-browser

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

scroll-timeline-anonymous-source-quirks-mode.html (1261B)

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