file_transition_finish_on_compositor.html (2030B)
1 <!doctype html> 2 <meta charset=utf-8> 3 <script src="../testcommon.js"></script> 4 <script src="/tests/SimpleTest/paint_listener.js"></script> 5 <style> 6 div { 7 /* Element needs geometry to be eligible for layerization */ 8 width: 100px; 9 height: 100px; 10 background-color: white; 11 } 12 </style> 13 <body> 14 <script> 15 'use strict'; 16 17 function waitForPaints() { 18 return new Promise(function(resolve, reject) { 19 waitForAllPaintsFlushed(resolve); 20 }); 21 } 22 23 promise_test(async t => { 24 // This test only applies to compositor animations 25 if (!isOMTAEnabled()) { 26 return; 27 } 28 29 var div = addDiv(t, { style: 'transition: transform 50ms; ' + 30 'transform: translateX(0px)' }); 31 getComputedStyle(div).transform; 32 33 div.style.transform = 'translateX(100px)'; 34 35 var timeBeforeStart = window.performance.now(); 36 await waitForPaints(); 37 38 // If it took over 50ms to paint the transition, we have no luck 39 // to test it. This situation will happen if GC runs while waiting for the 40 // paint. 41 if (window.performance.now() - timeBeforeStart >= 50) { 42 return; 43 } 44 45 var transform = 46 SpecialPowers.DOMWindowUtils.getOMTAStyle(div, 'transform'); 47 assert_not_equals(transform, '', 48 'The transition style is applied on the compositor'); 49 50 // Generate artificial busyness on the main thread for 100ms. 51 var timeAtStart = window.performance.now(); 52 while (window.performance.now() - timeAtStart < 100) {} 53 54 // Now the transition on the compositor should finish but stay at the final 55 // position because there was no chance to pull the transition back from 56 // the compositor. 57 transform = 58 SpecialPowers.DOMWindowUtils.getOMTAStyle(div, 'transform'); 59 assert_equals(transform, 'matrix(1, 0, 0, 1, 100, 0)', 60 'The final transition style is still applied on the ' + 61 'compositor'); 62 }, 'Transition on the compositor keeps the final style while the main thread ' + 63 'is busy even if the transition finished on the compositor'); 64 65 done(); 66 </script> 67 </body>