tor-browser

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

file_animations_omta_scroll_rtl.html (3102B)

      1 <!DOCTYPE HTML>
      2 <html>
      3 <head>
      4  <meta charset="utf-8">
      5  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
      6  <title>Test for css-animations running on the compositor thread with
      7    scroll-timeline and right to left writing mode</title>
      8  <script src="/tests/SimpleTest/SimpleTest.js"></script>
      9  <script src="/tests/SimpleTest/paint_listener.js"></script>
     10  <script src="/tests/gfx/layers/apz/test/mochitest/apz_test_utils.js"></script>
     11  <script type="application/javascript" src="animation_utils.js"></script>
     12  <style type="text/css">
     13    @keyframes transform_anim {
     14      from { transform: translateX(-100px) }
     15      to { transform: translateX(-200px) }
     16    }
     17 
     18    html {
     19      min-width: 100%;
     20      padding-left: 100px;
     21      direction: rtl;
     22    }
     23 
     24    .target {
     25      /* The animation target needs geometry in order to qualify for OMTA */
     26      width: 100px;
     27      height: 100px;
     28      background-color: green;
     29    }
     30  </style>
     31 </head>
     32 <body>
     33  <div id="display"></div>
     34  <pre id="test"></pre>
     35 </body>
     36 <script type="application/javascript">
     37 "use strict";
     38 
     39 // Global state
     40 var gDiv = null;
     41 
     42 // Shortcut omta_is and friends by filling in the initial 'elem' argument
     43 // with gDiv.
     44 [ 'omta_is', 'omta_todo_is', 'omta_is_approx' ].forEach(function(fn) {
     45  var origFn = window[fn];
     46  window[fn] = function() {
     47    var args = Array.from(arguments);
     48    if (!(args[0] instanceof Element)) {
     49      args.unshift(gDiv);
     50    }
     51    return origFn.apply(window, args);
     52  };
     53 });
     54 
     55 // Shortcut new_div and done_div to update gDiv
     56 var originalNewDiv = window.new_div;
     57 window.new_div = function(style) {
     58  [ gDiv ] = originalNewDiv(style);
     59 };
     60 var originalDoneDiv = window.done_div;
     61 window.done_div = function() {
     62  originalDoneDiv();
     63  gDiv = null;
     64 };
     65 
     66 // Bind the ok and todo to the opener, and close this window when we finish.
     67 var ok = opener.ok.bind(opener);
     68 var todo = opener.todo.bind(opener);
     69 function finish() {
     70  var o = opener;
     71  self.close();
     72  o.SimpleTest.finish();
     73 }
     74 
     75 waitUntilApzStable().then(() => {
     76  runOMTATest(function() {
     77    var onAbort = function() {
     78      if (gDiv) {
     79        done_div();
     80      }
     81    };
     82    runAllAsyncAnimTests(onAbort).then(finish);
     83  }, finish);
     84 });
     85 
     86 //----------------------------------------------------------------------
     87 //
     88 // Test cases
     89 //
     90 //----------------------------------------------------------------------
     91 
     92 // transform property with scroll-driven animations. The writing mode is from
     93 // right to left, so we have to use the negative scroll offset.
     94 addAsyncAnimTest(async function() {
     95  new_div("animation: transform_anim 1s linear; " +
     96          "animation-timeline: scroll(x root);");
     97  await waitForPaintsFlushed();
     98 
     99  const root = document.scrollingElement;
    100  const maxScroll = root.scrollWidth - root.clientWidth;
    101  root.scrollLeft = -0.5 * maxScroll;
    102  await waitForPaintsFlushed();
    103 
    104  omta_is_approx("transform", { tx: -150 }, 0.1, RunningOn.Compositor,
    105                 "scroll transform animations should runs on compositor " +
    106                 "thread");
    107 
    108  root.scrollLeft = 0;
    109  done_div();
    110 });
    111 
    112 </script>
    113 </html>