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-quirks-mode.html (1223B)

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