The Tor Browser / file comparison
comparison: layout/style/test/test_animations_omta_start.html
layout/style/test/test_animations_omta_start.html
- branch
- TOR_BUG_3246
- changeset 6
- 8bccb770b82d
equal
deleted
inserted
replaced
| -1:000000000000 | 0:048715aee7d5 |
|---|---|
| 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 type="application/javascript" | |
| 10 src="/tests/SimpleTest/SimpleTest.js"></script> | |
| 11 <script type="application/javascript" | |
| 12 src="/tests/SimpleTest/paint_listener.js"></script> | |
| 13 <script type="application/javascript" src="animation_utils.js"></script> | |
| 14 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> | |
| 15 <style type="text/css"> | |
| 16 @keyframes anim-opacity { | |
| 17 0% { opacity: 0.5 } | |
| 18 100% { opacity: 0.5 } | |
| 19 } | |
| 20 @keyframes anim-transform { | |
| 21 0% { transform: translate(50px); } | |
| 22 100% { transform: translate(50px); } | |
| 23 } | |
| 24 @keyframes anim-transform-2 { | |
| 25 0% { transform: translate(0px); } | |
| 26 100% { transform: translate(100px); } | |
| 27 } | |
| 28 .target { | |
| 29 /* These two lines are needed so that an opacity/transform layer | |
| 30 * already exists when the animation is applied. */ | |
| 31 opacity: 0.99; | |
| 32 transform: translate(99px); | |
| 33 | |
| 34 /* Element needs geometry in order to be animated on the | |
| 35 * compositor. */ | |
| 36 width: 100px; | |
| 37 height: 100px; | |
| 38 background-color: white; | |
| 39 } | |
| 40 </style> | |
| 41 </head> | |
| 42 <body> | |
| 43 <a target="_blank" | |
| 44 href="https://bugzilla.mozilla.org/show_bug.cgi?id=975261">Mozilla Bug | |
| 45 975261</a> | |
| 46 <div id="display"></div> | |
| 47 <pre id="test"> | |
| 48 <script type="application/javascript"> | |
| 49 "use strict"; | |
| 50 | |
| 51 var gUtils = SpecialPowers.DOMWindowUtils; | |
| 52 | |
| 53 SimpleTest.waitForExplicitFinish(); | |
| 54 runOMTATest(testDelay, SimpleTest.finish); | |
| 55 | |
| 56 function newTarget() { | |
| 57 var target = document.createElement("div"); | |
| 58 target.classList.add("target"); | |
| 59 document.getElementById("display").appendChild(target); | |
| 60 return target; | |
| 61 } | |
| 62 | |
| 63 function testDelay() { | |
| 64 gUtils.advanceTimeAndRefresh(0); | |
| 65 | |
| 66 var target = newTarget(); | |
| 67 target.setAttribute("style", "animation: 10s 10s anim-opacity linear"); | |
| 68 gUtils.advanceTimeAndRefresh(0); | |
| 69 | |
| 70 waitForAllPaints(function() { | |
| 71 gUtils.advanceTimeAndRefresh(10100); | |
| 72 waitForAllPaints(function() { | |
| 73 var opacity = gUtils.getOMTAStyle(target, "opacity"); | |
| 74 is(opacity, 0.5, | |
| 75 "opacity is set on compositor thread after delayed start"); | |
| 76 target.removeAttribute("style"); | |
| 77 gUtils.restoreNormalRefresh(); | |
| 78 testTransform(); | |
| 79 }); | |
| 80 }); | |
| 81 } | |
| 82 | |
| 83 function testTransform() { | |
| 84 gUtils.advanceTimeAndRefresh(0); | |
| 85 | |
| 86 var target = newTarget(); | |
| 87 target.setAttribute("style", "animation: 10s 10s anim-transform linear"); | |
| 88 gUtils.advanceTimeAndRefresh(0); | |
| 89 | |
| 90 waitForAllPaints(function() { | |
| 91 gUtils.advanceTimeAndRefresh(10100); | |
| 92 waitForAllPaints(function() { | |
| 93 var transform = gUtils.getOMTAStyle(target, "transform"); | |
| 94 is(transform, "matrix(1, 0, 0, 1, 50, 0)", | |
| 95 "transform is set on compositor thread after delayed start"); | |
| 96 target.removeAttribute("style"); | |
| 97 gUtils.restoreNormalRefresh(); | |
| 98 testBackwardsFill(); | |
| 99 }); | |
| 100 }); | |
| 101 } | |
| 102 | |
| 103 function testBackwardsFill() { | |
| 104 gUtils.advanceTimeAndRefresh(0); | |
| 105 | |
| 106 var target = newTarget(); | |
| 107 target.setAttribute("style", | |
| 108 "transform: translate(30px); " + | |
| 109 "animation: 10s 10s anim-transform-2 linear backwards"); | |
| 110 | |
| 111 gUtils.advanceTimeAndRefresh(0); | |
| 112 waitForAllPaints(function() { | |
| 113 gUtils.advanceTimeAndRefresh(10000); | |
| 114 waitForAllPaints(function() { | |
| 115 gUtils.advanceTimeAndRefresh(100); | |
| 116 waitForAllPaints(function() { | |
| 117 var transform = gUtils.getOMTAStyle(target, "transform"); | |
| 118 is(transform, "matrix(1, 0, 0, 1, 1, 0)", | |
| 119 "transform is set on compositor thread after delayed start " + | |
| 120 "with backwards fill"); | |
| 121 target.removeAttribute("style"); | |
| 122 gUtils.restoreNormalRefresh(); | |
| 123 SimpleTest.finish(); | |
| 124 }); | |
| 125 }); | |
| 126 }); | |
| 127 } | |
| 128 | |
| 129 </script> | |
| 130 </pre> | |
| 131 </body> | |
| 132 </html> |
