tor-browser

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

timeline-trigger-toggle.tentative.html (4225B)

      1 <!DOCTYPE html>
      2 <html>
      3 
      4 <head>
      5  <link rel="help" src="https://drafts.csswg.org/css-animations-2/#animation-trigger">
      6  <script src="/resources/testharness.js"></script>
      7  <script src="/resources/testharnessreport.js"></script>
      8  <script src="/web-animations/testcommon.js"></script>
      9  <script src="/dom/events/scrolling/scroll_support.js"></script>
     10  <script src="support/support.js"></script>
     11 </head>
     12 
     13 <body>
     14  <style>
     15    @keyframes expand {
     16      from {
     17        width: 100px;
     18      }
     19 
     20      to {
     21        width: 100px;
     22      }
     23    }
     24 
     25    #scroller {
     26      width: 300px;
     27      height: 300px;
     28      overflow: scroll;
     29    }
     30 
     31    #source {
     32      height: 100px;
     33      width: 100px;
     34      background-color: seagreen;
     35    }
     36 
     37    .trigger-source {
     38      timeline-trigger: --trigger view() contain;
     39    }
     40 
     41    .blob {
     42      height: 50px;
     43      background-color: lightgrey;
     44    }
     45 
     46    .blob:nth-child(even) {
     47      background-color: darkgrey;
     48    }
     49 
     50    #target {
     51      background-color: tomato;
     52      position: absolute;
     53      animation: expand linear 1s both;
     54      animation-trigger: --trigger play-forwards play-backwards;
     55      width: 50px;
     56    }
     57  </style>
     58  <div id=scroller>
     59    <div class=blob></div>
     60    <div class=blob></div>
     61    <div id=source>Source</div>
     62    <div id=target>Target</div>
     63    <div class=blob></div>
     64    <div class=blob></div>
     65    <div class=blob></div>
     66    <div class=blob></div>
     67    <div class=blob></div>
     68    <div class=blob></div>
     69  </div>
     70  <hr>
     71  <button id=button>Toggle timeline-trigger</button>
     72  <pre id=pre></pre>
     73  <hr>
     74  <script>
     75    const scroller = document.getElementById("scroller");
     76    const source = document.getElementById("source");
     77    const target = document.getElementById("target");
     78    const animation = target.getAnimations()[0];
     79 
     80    async function scrollSourceOutOfView() {
     81      // First, scroll source to the top of the viewport.
     82      let scrollend_promise =
     83            waitForScrollEndFallbackToDelayWithoutScrollEvent(scroller);
     84      source.scrollIntoView({block: "start"});
     85      await scrollend_promise;
     86      // Now scroll a litte further to push it just out of view.
     87      scrollend_promise =
     88            waitForScrollEndFallbackToDelayWithoutScrollEvent(scroller);
     89      scroller.scrollBy({top: 50});
     90      await scrollend_promise;
     91      await waitForCompositorCommit();
     92    }
     93 
     94    async function scrollSourceIntoView() {
     95      let scrollend_promise =
     96            waitForScrollEndFallbackToDelayWithoutScrollEvent(scroller);
     97      source.scrollIntoView({block: "center"});
     98      await scrollend_promise;
     99      await waitForCompositorCommit();
    100    }
    101 
    102    promise_test(async(test) => {
    103      assert_equals(getComputedStyle(source).timelineTrigger, "none");
    104      assert_equals(animation.playState, "paused");
    105 
    106      // Toggle the trigger on.
    107      source.style.timelineTrigger = "--trigger view() contain";
    108      assert_equals(getComputedStyle(source).timelineTrigger,
    109        "--trigger view() contain");
    110      await waitForCompositorCommit();
    111 
    112      // Animation should be playing forwards as source is already in view.
    113      assert_equals(animation.playState, "running");
    114 
    115      // Simulate the animation finishing (instead of stalling the test).
    116      animation.finish();
    117      assert_equals(animation.playState, "finished");
    118 
    119      await scrollSourceOutOfView();
    120      // Animation should be playing backwards.
    121      assert_equals(animation.playState, "running");
    122 
    123      // Simulate the backwards finish.
    124      animation.finish();
    125      assert_equals(animation.playState, "finished");
    126      assert_equals(animation.currentTime, 0);
    127 
    128      // Toggle the trigger off.
    129      source.style.timelineTrigger = "initial";
    130      assert_equals(getComputedStyle(source).timelineTrigger, "none");
    131      await waitForCompositorCommit();
    132 
    133      // There should be no change to the animation.
    134      assert_equals(animation.playState, "finished");
    135 
    136      await scrollSourceIntoView();
    137 
    138      // There should still be no change to the animation.
    139      assert_equals(animation.playState, "finished");
    140      assert_equals(animation.currentTime, 0);
    141    }, "Toggling trigger on starts controlling attached animation; toggling " +
    142       "off stops");
    143  </script>
    144 </body>
    145 </html>