layout/style/test/test_transitions_replacement_on_busy_frame.html

   1 <!doctype html>
   2 <html>
   3 <!--
   4 https://bugzilla.mozilla.org/show_bug.cgi?id=1167519
   5 -->
   6 <head>
   7   <meta charset=utf-8>
   8   <title>Test for bug 1167519</title>
   9   <script src="/tests/SimpleTest/SimpleTest.js"></script>
  10   <script src="/tests/SimpleTest/paint_listener.js"></script>
  11   <script src="animation_utils.js"></script>
  12   <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css">
  13   <style>
  14     #target {
  15       height: 100px;
  16       width: 100px;
  17       background: green;
  18       transition: transform 100s linear;
  19     }
  20   </style>
  21 </head>
  22 <body>
  23 <div id="target"></div>
  24 <script>
  25 'use strict';
  26
  27 SimpleTest.waitForExplicitFinish();
  28
  29 const OMTAPrefKey = 'layers.offmainthreadcomposition.async-animations';
  30 const omtaEnabled =
  31   SpecialPowers.DOMWindowUtils.layerManagerRemote &&
  32   SpecialPowers.getBoolPref(OMTAPrefKey);
  33
  34 window.addEventListener('load', async function() {
  35   if (!omtaEnabled) {
  36     ok(true, 'Skipping the test since OMTA is disabled');
  37     SimpleTest.finish();
  38     return;
  39   }
  40
  41   const div = document.getElementById('target');
  42
  43   // Start first transition
  44   div.style.transform = 'translateX(300px)';
  45   const firstTransition = div.getAnimations()[0];
  46
  47   // Wait for first transition to start running on the main thread and
  48   // compositor.
  49   await firstTransition.ready;
  50   await waitForPaints();
  51
  52   await new Promise(resolve => requestAnimationFrame(resolve));
  53
  54   // Start second transition
  55   div.style.transform = 'translateX(600px)';
  56   const secondTransition = div.getAnimations()[0];
  57
  58   const originalProperties = SpecialPowers.wrap(
  59     secondTransition.effect
  60   ).getProperties();
  61   const previousPropertyValue = originalProperties[0].values[0].value;
  62   const previousKeyframeValue = secondTransition.effect.getKeyframes()[0]
  63     .transform;
  64
  65   // Tie up main thread for 300ms. In the meantime, the first transition
  66   // will continue running on the compositor. If we don't update the start
  67   // point of the second transition, it will appear to jump when it starts.
  68   const startTime = performance.now();
  69   while (performance.now() - startTime < 300);
  70
  71   // Ensure that our paint process has been done.
  72   //
  73   // Note that requestAnimationFrame is not suitable here since on Android
  74   // there is a case where the paint process has not completed even when the
  75   // requestAnimationFrame callback is run (and it is during the paint
  76   // process that we update the transition start point).
  77   await waitForPaints();
  78
  79   const updatedProperties = SpecialPowers.wrap(
  80     secondTransition.effect
  81   ).getProperties();
  82   const currentPropertyValue = updatedProperties[0].values[0].value;
  83   isnot(
  84     currentPropertyValue,
  85     previousPropertyValue,
  86     'From value of transition is updated since the moment when ' +
  87       'it was generated'
  88   );
  89   isnot(
  90     secondTransition.effect.getKeyframes()[0].transform,
  91     previousKeyframeValue,
  92     'Keyframe value of transition is updated since the moment when ' +
  93       'it was generated'
  94   );
  95   SimpleTest.finish();
  96 });
  97
  98 </script>
  99 </body>
 100 </html>