test_transitions_replacement_on_busy_frame.html (3018B)
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>