tor-browser

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

siblings-with-anonymous-timelines.html (1948B)

      1 <!DOCTYPE html>
      2 <html>
      3 <head>
      4 <meta charset="utf-8">
      5 <link rel="help" src="https://drafts.csswg.org/scroll-animations-1/#scroll-timelines-anonymous">
      6 <link rel="help" src="https://drafts.csswg.org/scroll-animations-1/#view-timelines-anonymous">
      7 <script src="/resources/testharness.js"></script>
      8 <script src="/resources/testharnessreport.js"></script>
      9 <script src="/scroll-animations/scroll-timelines/testcommon.js"></script>
     10 <title>The "animation-timeline" CSS property yields a unique anonymous timeline for siblings matching the same CSS rules</title>
     11 <style>
     12 
     13  @keyframes anim {
     14    from { opacity: 0 }
     15  }
     16 
     17  .scroller {
     18    overflow-y: scroll;
     19    width: 100px;
     20    height: 100px;
     21  }
     22 
     23  .scroller > div {
     24    width: 100%;
     25    height: 100%;
     26 
     27    animation: anim auto linear;
     28  }
     29 
     30  .scroller.scroll > div {
     31    animation-timeline: scroll();
     32  }
     33 
     34  .scroller.view > div {
     35    animation-timeline: view();
     36  }
     37 
     38 </style>
     39 </head>
     40 <body>
     41 
     42  <div class="scroller scroll">
     43    <div></div>
     44    <div></div>
     45    <div></div>
     46    <div></div>
     47    <div></div>
     48  </div>
     49 
     50  <div class="scroller view">
     51    <div></div>
     52    <div></div>
     53    <div></div>
     54    <div></div>
     55    <div></div>
     56  </div>
     57 
     58  <script>
     59 
     60 const types = ["scroll", "view"];
     61 
     62 types.forEach(type => {
     63  test(t => {
     64    const scroller = document.querySelector(`.scroller.${type}`);
     65 
     66    const animations = scroller.getAnimations({ subtree: true });
     67    const numberOfChildren = scroller.childElementCount;
     68    assert_equals(animations.length, numberOfChildren, "There are as many animations as there are children");
     69 
     70    const timelines = new Set;
     71    for (const animation of animations)
     72      timelines.add(animation.timeline);
     73    assert_equals(timelines.size, numberOfChildren, `There are as many ${type} timelines as there are children`);
     74  }, `Setting "animation-timeline: ${type}()" yields a unique ${type} timeline for siblings matching the same CSS rules`);
     75 });
     76 
     77  </script>
     78 </body>
     79 </html>