Bug 1315874 part 1 - Add mochitest for SMIL with CSS-Transition. r=dbaron
MozReview-Commit-ID: D8zZTFkoY6p
--- a/dom/smil/test/mochitest.ini
+++ b/dom/smil/test/mochitest.ini
@@ -52,9 +52,10 @@ skip-if = toolkit == 'android' #TIMED_OU
[test_smilSyncTransform.xhtml]
[test_smilSyncbaseTarget.xhtml]
[test_smilTextZoom.xhtml]
[test_smilTimeEvents.xhtml]
[test_smilTiming.xhtml]
[test_smilTimingZeroIntervals.xhtml]
[test_smilUpdatedInterval.xhtml]
[test_smilValues.xhtml]
+[test_smilWithTransition.html]
[test_smilXHR.xhtml]
new file mode 100644
--- /dev/null
+++ b/dom/smil/test/test_smilWithTransition.html
@@ -0,0 +1,72 @@
+<!doctype html>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=1315874
+-->
+<head>
+ <meta charset="utf-8">
+ <title>Test SMIL with CSS-Transitions (bug 1315874)</title>
+ <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
+ <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1315874">Mozilla Bug 1315874</a>
+<svg>
+ <rect width="100%" height="100%"
+ style="fill: red; transition: fill 10s" id="rect">
+ <animate attributeName="fill" to="lime" dur="1s" fill="freeze">
+ </rect>
+</svg>
+<pre id="test">
+<script type="text/javascript">
+ SimpleTest.waitForExplicitFinish();
+ window.addEventListener("load", runTests, false);
+
+ var rect = document.getElementById("rect");
+ var svg = document.getElementsByTagName("svg")[0];
+ is(getComputedStyle(rect).fill, "rgb(255, 0, 0)",
+ "The initial color should be red.");
+
+ function runTests() {
+ waitForFrame().then(function() {
+ svg.setCurrentTime(1);
+ ok(getComputedStyle(rect).fill, "rgb(0, 255, 0)",
+ "The end color should be lime.");
+
+ // wait to 2 frame for restyle to the current SMIL.
+ return waitForAnimationFrames(2);
+ }).then(function() {
+ var anim = document.getAnimations()[0];
+ todo(!anim, "CSS-Transition shouldn't created by restyling of SMIL.");
+ SimpleTest.finish();
+ });
+ }
+
+
+ // Utility methods from testscommon.js
+ // For detail, see dom/animationte/test/testcommon.js.
+
+ function waitForFrame() {
+ return new Promise(function(resolve, reject) {
+ requestAnimationFrame(function(time) {
+ resolve();
+ });
+ });
+ }
+
+ function waitForAnimationFrames(frameCount) {
+ return new Promise(function(resolve, reject) {
+ function handleFrame() {
+ if (--frameCount <= 0) {
+ resolve();
+ } else {
+ window.requestAnimationFrame(handleFrame);
+ }
+ }
+ window.requestAnimationFrame(handleFrame);
+ });
+ }
+</script>
+</pre>
+</body>
+</html>