tor-browser

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

test_composite.html (4873B)

      1 <!doctype html>
      2 <meta charset=utf-8>
      3 <script src="/resources/testharness.js"></script>
      4 <script src="/resources/testharnessreport.js"></script>
      5 <script src="../testcommon.js"></script>
      6 <script src="/tests/SimpleTest/paint_listener.js"></script>
      7 <style>
      8 div {
      9  /* Element needs geometry to be eligible for layerization */
     10  width: 20px;
     11  height: 20px;
     12  background-color: white;
     13 }
     14 </style>
     15 <body>
     16 <div id="log"></div>
     17 <script>
     18 'use strict';
     19 
     20 if (!SpecialPowers.DOMWindowUtils.layerManagerRemote ||
     21    !SpecialPowers.getBoolPref(
     22      'layers.offmainthreadcomposition.async-animations')) {
     23  // If OMTA is disabled, nothing to run.
     24  done();
     25 }
     26 
     27 function waitForPaintsFlushed() {
     28  return new Promise(function(resolve, reject) {
     29    waitForAllPaintsFlushed(resolve);
     30  });
     31 }
     32 
     33 promise_test(t => {
     34  // Without this, the first test case fails on Android.
     35  return waitForDocumentLoad();
     36 }, 'Ensure document has been loaded');
     37 
     38 promise_test(t => {
     39  var div;
     40  return useTestRefreshMode(t).then(() => {
     41    div = addDiv(t, { style: 'transform: translateX(100px)' });
     42    div.animate({ transform: ['translateX(0px)', 'translateX(200px)'],
     43                  composite: 'accumulate' },
     44                100 * MS_PER_SEC);
     45 
     46    return waitForPaintsFlushed();
     47  }).then(() => {
     48    SpecialPowers.DOMWindowUtils.advanceTimeAndRefresh(50 * MS_PER_SEC);
     49    var transform =
     50      SpecialPowers.DOMWindowUtils.getOMTAStyle(div, 'transform');
     51    assert_matrix_equals(transform, 'matrix(1, 0, 0, 1, 200, 0)',
     52      'Transform value at 50%');
     53  });
     54 }, 'Accumulate onto the base value');
     55 
     56 promise_test(t => {
     57  var div;
     58  return useTestRefreshMode(t).then(() => {
     59    div = addDiv(t);
     60    div.animate({ transform: ['translateX(100px)', 'translateX(200px)'],
     61                  composite: 'replace' },
     62                100 * MS_PER_SEC);
     63    div.animate({ transform: ['translateX(0px)', 'translateX(100px)'],
     64                  composite: 'accumulate' },
     65                100 * MS_PER_SEC);
     66 
     67    return waitForPaintsFlushed();
     68  }).then(() => {
     69    SpecialPowers.DOMWindowUtils.advanceTimeAndRefresh(50 * MS_PER_SEC);
     70    var transform =
     71      SpecialPowers.DOMWindowUtils.getOMTAStyle(div, 'transform');
     72    assert_matrix_equals(transform, 'matrix(1, 0, 0, 1, 200, 0)',
     73      'Transform value at 50%');
     74  });
     75 }, 'Accumulate onto an underlying animation value');
     76 
     77 promise_test(t => {
     78  var div;
     79  return useTestRefreshMode(t).then(() => {
     80    div = addDiv(t, { style: 'transform: translateX(100px)' });
     81    div.animate([{ transform: 'translateX(100px)', composite: 'accumulate' },
     82                 { transform: 'translateX(300px)', composite: 'replace' }],
     83                100 * MS_PER_SEC);
     84 
     85    return waitForPaintsFlushed();
     86  }).then(() => {
     87    SpecialPowers.DOMWindowUtils.advanceTimeAndRefresh(50 * MS_PER_SEC);
     88    var transform =
     89      SpecialPowers.DOMWindowUtils.getOMTAStyle(div, 'transform');
     90    assert_matrix_equals(transform, 'matrix(1, 0, 0, 1, 250, 0)',
     91      'Transform value at 50s');
     92  });
     93 }, 'Composite when mixing accumulate and replace');
     94 
     95 promise_test(t => {
     96  var div;
     97  return useTestRefreshMode(t).then(() => {
     98    div = addDiv(t, { style: 'transform: translateX(100px)' });
     99    div.animate([{ transform: 'translateX(100px)', composite: 'replace' },
    100                 { transform: 'translateX(300px)' }],
    101                { duration: 100 * MS_PER_SEC, composite: 'accumulate' });
    102    return waitForPaintsFlushed();
    103  }).then(() => {
    104    SpecialPowers.DOMWindowUtils.advanceTimeAndRefresh(50 * MS_PER_SEC);
    105    var transform =
    106      SpecialPowers.DOMWindowUtils.getOMTAStyle(div, 'transform');
    107    assert_matrix_equals(transform, 'matrix(1, 0, 0, 1, 250, 0)',
    108      'Transform value at 50%');
    109  });
    110 }, 'Composite specified on a keyframe overrides the composite mode of the ' +
    111   'effect');
    112 
    113 promise_test(t => {
    114  var div;
    115  var anim;
    116  return useTestRefreshMode(t).then(() => {
    117    div = addDiv(t);
    118    div.animate({ transform: [ 'scale(2)', 'scale(2)' ] }, 100 * MS_PER_SEC);
    119    anim = div.animate({ transform: [ 'scale(4)', 'scale(4)' ] },
    120                       { duration: 100 * MS_PER_SEC, composite: 'add' });
    121 
    122    return waitForPaintsFlushed();
    123  }).then(() => {
    124    var transform =
    125      SpecialPowers.DOMWindowUtils.getOMTAStyle(div, 'transform');
    126    assert_matrix_equals(transform, 'matrix(8, 0, 0, 8, 0, 0)',
    127      'The additive scale value should be scale(8)'); // scale(2) scale(4)
    128 
    129    anim.effect.composite = 'accumulate';
    130    return waitForPaintsFlushed();
    131  }).then(() => {
    132    SpecialPowers.DOMWindowUtils.advanceTimeAndRefresh(1);
    133    var transform =
    134      SpecialPowers.DOMWindowUtils.getOMTAStyle(div, 'transform');
    135    assert_matrix_equals(transform, 'matrix(5, 0, 0, 5, 0, 0)',
    136      // (scale(2 - 1) + scale(4 - 1) + scale(1))
    137      'The accumulate scale value should be scale(5)');
    138  });
    139 }, 'Composite operation change');
    140 
    141 </script>
    142 </body>