test_transitions_and_restyles.html (1325B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=1030993 5 --> 6 <head> 7 <meta charset="utf-8"> 8 <title>Test for Bug 1030993</title> 9 <script src="/tests/SimpleTest/SimpleTest.js"></script> 10 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> 11 <style> 12 #display { 13 background: blue; height: 10px; width: 0; color: black; 14 transition: width linear 1s, color linear 1s; 15 } 16 </style> 17 </head> 18 <body> 19 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1030993">Mozilla Bug 1030993</a> 20 <p id="display"></p> 21 <pre id="test"> 22 </pre> 23 <script type="application/javascript"> 24 25 /** Test for Bug 1030993 */ 26 27 function advance_clock(milliseconds) { 28 SpecialPowers.DOMWindowUtils.advanceTimeAndRefresh(milliseconds); 29 } 30 31 var p = document.getElementById("display"); 32 var cs = getComputedStyle(p, ""); 33 advance_clock(0); 34 cs.width; // flush 35 p.style.width = "1000px"; // initiate transition 36 is(cs.width, "0px", "transition at 0ms"); // flush (and test) 37 advance_clock(100); 38 is(cs.width, "100px", "transition at 100ms"); // flush 39 // restyle *and* trigger new transitions 40 p.style.color = "blue"; 41 // flush again, at the same timestamp 42 is(cs.width, "100px", "transition at 100ms, after restyle"); 43 44 SpecialPowers.DOMWindowUtils.restoreNormalRefresh(); 45 46 </script> 47 </body> 48 </html>