test_animations_omta_start.html (5870B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=975261 5 --> 6 <head> 7 <meta charset="utf-8"> 8 <title>Test OMTA animations start correctly (Bug 975261)</title> 9 <script src="/tests/SimpleTest/SimpleTest.js"></script> 10 <script src="/tests/SimpleTest/paint_listener.js"></script> 11 <script type="application/javascript" src="animation_utils.js"></script> 12 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> 13 <style type="text/css"> 14 @keyframes anim-opacity { 15 0% { opacity: 0.5 } 16 100% { opacity: 0.5 } 17 } 18 @keyframes anim-opacity-2 { 19 0% { opacity: 0.0 } 20 100% { opacity: 1.0 } 21 } 22 @keyframes anim-transform { 23 0% { transform: translate(50px); } 24 100% { transform: translate(50px); } 25 } 26 @keyframes anim-transform-2 { 27 0% { transform: translate(0px); } 28 100% { transform: translate(100px); } 29 } 30 .target { 31 /* These two lines are needed so that an opacity/transform layer 32 * already exists when the animation is applied. */ 33 opacity: 0.99; 34 transform: translate(99px); 35 36 /* Element needs geometry in order to be animated on the 37 * compositor. */ 38 width: 100px; 39 height: 100px; 40 background-color: white; 41 } 42 </style> 43 </head> 44 <body> 45 <a target="_blank" 46 href="https://bugzilla.mozilla.org/show_bug.cgi?id=975261">Mozilla Bug 47 975261</a> 48 <div id="display"></div> 49 <pre id="test"> 50 <script type="application/javascript"> 51 "use strict"; 52 53 var gUtils = SpecialPowers.DOMWindowUtils; 54 55 SimpleTest.waitForExplicitFinish(); 56 runOMTATest(testDelay, SimpleTest.finish); 57 58 function newTarget() { 59 var target = document.createElement("div"); 60 target.classList.add("target"); 61 document.getElementById("display").appendChild(target); 62 return target; 63 } 64 65 function testDelay() { 66 gUtils.advanceTimeAndRefresh(0); 67 68 var target = newTarget(); 69 target.setAttribute("style", "animation: 10s 10s anim-opacity linear"); 70 gUtils.advanceTimeAndRefresh(0); 71 72 waitForAllPaints(function() { 73 gUtils.advanceTimeAndRefresh(10100); 74 waitForAllPaints(function() { 75 var opacity = gUtils.getOMTAStyle(target, "opacity"); 76 is(opacity, "0.5", 77 "opacity is set on compositor thread after delayed start"); 78 target.removeAttribute("style"); 79 gUtils.restoreNormalRefresh(); 80 testTransform(); 81 }); 82 }); 83 } 84 85 function testTransform() { 86 gUtils.advanceTimeAndRefresh(0); 87 88 var target = newTarget(); 89 target.setAttribute("style", "animation: 10s 10s anim-transform linear"); 90 gUtils.advanceTimeAndRefresh(0); 91 92 waitForAllPaints(function() { 93 gUtils.advanceTimeAndRefresh(10100); 94 waitForAllPaints(function() { 95 var transform = gUtils.getOMTAStyle(target, "transform"); 96 ok(matricesRoughlyEqual(convertTo3dMatrix(transform), 97 convertTo3dMatrix("matrix(1, 0, 0, 1, 50, 0)")), 98 "transform is set on compositor thread after delayed start"); 99 target.remove(); 100 gUtils.restoreNormalRefresh(); 101 testBackwardsFill(); 102 }); 103 }); 104 } 105 106 function testBackwardsFill() { 107 gUtils.advanceTimeAndRefresh(0); 108 109 var target = newTarget(); 110 target.setAttribute("style", 111 "transform: translate(30px); " + 112 "animation: 10s 10s anim-transform-2 linear backwards"); 113 114 gUtils.advanceTimeAndRefresh(0); 115 waitForAllPaints(function() { 116 gUtils.advanceTimeAndRefresh(10000); 117 waitForAllPaints(function() { 118 gUtils.advanceTimeAndRefresh(100); 119 waitForAllPaints(function() { 120 var transform = gUtils.getOMTAStyle(target, "transform"); 121 ok(matricesRoughlyEqual(convertTo3dMatrix(transform), 122 convertTo3dMatrix("matrix(1, 0, 0, 1, 1, 0)")), 123 "transform is set on compositor thread after delayed start " + 124 "with backwards fill"); 125 target.remove(); 126 gUtils.restoreNormalRefresh(); 127 testTransitionTakingOver(); 128 }); 129 }); 130 }); 131 } 132 133 function testTransitionTakingOver() { 134 gUtils.advanceTimeAndRefresh(0); 135 136 var parent = newTarget(); 137 var child = newTarget(); 138 parent.appendChild(child); 139 parent.style.opacity = "0.0"; 140 parent.style.animation = "10s anim-opacity-2 linear"; 141 child.style.opacity = "inherit"; 142 child.style.transition = "10s opacity linear"; 143 144 var childCS = getComputedStyle(child, ""); 145 146 gUtils.advanceTimeAndRefresh(0); 147 waitForAllPaints(function() { 148 gUtils.advanceTimeAndRefresh(4000); 149 waitForAllPaints(function() { 150 child.style.opacity = "1.0"; 151 var opacity = gUtils.getOMTAStyle(child, "opacity"); 152 // FIXME Bug 1039799 (or lower priority followup): Animations 153 // inherited from an animating parent element don't get shipped to 154 // the compositor thread. 155 todo_is(opacity, "0.4", 156 "transition that interrupted animation is correct"); 157 158 // Trigger to start the transition, without this the transition will 159 // be pending in advanceTimeAndRefresh(0) so the transition will not 160 // be sent to the compositor until we call advanceTimeAndRefresh with 161 // a positive time value. 162 getComputedStyle(child).opacity; 163 gUtils.advanceTimeAndRefresh(0); 164 waitForAllPaints(function() { 165 opacity = gUtils.getOMTAStyle(child, "opacity"); 166 is(opacity, "0.4", 167 "transition that interrupted animation is correct"); 168 gUtils.advanceTimeAndRefresh(5000); 169 waitForAllPaints(function() { 170 opacity = gUtils.getOMTAStyle(child, "opacity"); 171 is(opacity, "0.7", 172 "transition that interrupted animation is correct"); 173 is(childCS.opacity, "0.7", 174 "transition that interrupted animation is correct"); 175 parent.remove(); 176 gUtils.restoreNormalRefresh(); 177 SimpleTest.finish(); 178 }); 179 }); 180 }); 181 }); 182 } 183 184 </script> 185 </pre> 186 </body> 187 </html>