tor-browser

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

scroll-timeline-anonymous-source-scrollable-body.html (1358B)

      1 <!DOCTYPE html>
      2 <html>
      3 <title>The scroll() timeline source in quirks mode with a scrollable &lt;body></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 
     11 @keyframes move {
     12  to { margin-left: 100px }
     13 }
     14 
     15 html {
     16  height: 100px;
     17  padding: 20px;
     18 }
     19 
     20 body {
     21  height: 110vh;
     22  overflow: auto;
     23 
     24  animation: 1s move linear, 1s move linear, 1s move linear;
     25  animation-timeline: scroll(self), scroll(nearest), scroll(root);
     26 }
     27 
     28 body::after {
     29  content: "";
     30  display: block;
     31  height: 110%;
     32 }
     33 </style>
     34 <body>
     35 <script>
     36 "use strict";
     37 
     38 const timelineSourceTest = data => {
     39  test(() => {
     40    assert_equals(document.body.getAnimations()[data.index].timeline.source, data.expectedSource);
     41  }, `CSS animation correctly uses the <${data.expectedSource.localName}> element as the source for the ${data.keyword} scroll() timeline`);
     42 };
     43 
     44 timelineSourceTest({ index: 0, keyword: "self", expectedSource: document.body });
     45 timelineSourceTest({ index: 1, keyword: "nearest", expectedSource: document.documentElement });
     46 timelineSourceTest({ index: 1, keyword: "root", expectedSource: document.documentElement });
     47 
     48 </script>
     49 </body>