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