Bug 788549 Part 14: Add a test for async opacity animations r=dbaron
authorDavid Zbarsky <dzbarsky@gmail.com>
Mon, 24 Jun 2013 01:09:40 -0700
changeset 136223 6c3acc2030b014ad0f722cca7b6ae9cba2ae85c6
parent 136222 a257161ff2359a4c9a16db620ed73c973e337532
child 136224 7edda78eca8bc23c99cebfcab24ccd8838d09f16
push id29995
push userdzbarsky@gmail.com
push dateMon, 24 Jun 2013 08:09:55 +0000
treeherdermozilla-inbound@6c3acc2030b0 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdbaron
bugs788549
milestone24.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 788549 Part 14: Add a test for async opacity animations r=dbaron
layout/style/test/test_transitions_per_property.html
--- a/layout/style/test/test_transitions_per_property.html
+++ b/layout/style/test/test_transitions_per_property.html
@@ -255,19 +255,19 @@ if (SpecialPowers.getBoolPref("layout.cs
         "order": [ test_integer_transition ]
     };
     for (var prop in flexbox_properties) {
       supported_properties[prop] = flexbox_properties[prop];
     }
 }
 
 var div = document.getElementById("display");
-var transformDiv = document.getElementById("transformTest");
+var OMTAdiv = document.getElementById("transformTest");
 var cs = getComputedStyle(div, "");
-var transformCs = getComputedStyle(transformDiv, "");
+var OMTACs = getComputedStyle(OMTAdiv, "");
 var winUtils = SpecialPowers.getDOMWindowUtils(window);
 
 function computeMatrix(v) {
   div.style.setProperty("transform", v, "");
   var result = cs.getPropertyValue("transform");
   div.style.removeProperty("transform");
   return result;
 }
@@ -1669,49 +1669,48 @@ function test_transform_transition(prop)
          "interpolation of transitions: " + test.start + " to " + test.end +
          ": " + actual + " should approximately equal " + test.expected);
     }
   }
 
   // FIXME: should perhaps test that no clamping occurs
 
   // These tests check the computed value 2/3 of the way through the transition
-  transformDiv.style.setProperty("transition-duration", "300s", "");
-  transformDiv.style.setProperty("transition-timing-function", "linear", "");
+  OMTAdiv.style.setProperty("transition-duration", "300s", "");
+  OMTAdiv.style.setProperty("transition-timing-function", "linear", "");
   window.requestAnimationFrame(nextAsyncTransformTest);
 }
 
 function nextAsyncTransformTest()
 {
   var test = transformTests[transformTestIndex];
 
   if (transformTestIndex >= transformTests.length) {
-    transformDiv.style.removeProperty("transition");
-    SimpleTest.finish();
+    window.requestAnimationFrame(asyncOpacityTest);
     return;
   }
 
-  transformDiv.style.setProperty("transition-property", "none", "");
-  transformDiv.style.setProperty("transform", test.start, "");
-  transformCs.getPropertyValue("transform");
-  transformDiv.style.setProperty("transition-property", "transform", "");
-  transformDiv.style.setProperty("transform", test.end, "");
-  transformCs.getPropertyValue("transform");
+  OMTAdiv.style.setProperty("transition-property", "none", "");
+  OMTAdiv.style.setProperty("transform", test.start, "");
+  OMTACs.getPropertyValue("transform");
+  OMTAdiv.style.setProperty("transition-property", "transform", "");
+  OMTAdiv.style.setProperty("transform", test.end, "");
+  OMTACs.getPropertyValue("transform");
 
   window.requestAnimationFrame(checkAsyncTransformTest);
 }
 
 function checkAsyncTransformTest() {
   function s(matrix) {
     return matrix.replace(/^\w*\(/, '').replace(')','').split(/\s*,\s*/);
   }
   winUtils.advanceTimeAndRefresh(200000);
   var test = transformTests[transformTestIndex];
-  var async_transform = winUtils.getOMTAOrComputedStyle(transformDiv, "transform");
-  var computed_transform = transformCs.getPropertyValue("transform");
+  var async_transform = winUtils.getOMTAOrComputedStyle(OMTAdiv, "transform");
+  var computed_transform = OMTACs.getPropertyValue("transform");
   var async_split = s(async_transform);
   var cs_split = s(computed_transform);
   var pass = true;
   for (var j = 0; j < 16; ++j) {
     var epsilon = test.big_omta_round_error ? 0.1 : 0.0001;
     if (Math.abs(Number(async_split[j]) - Number(cs_split[j])) > epsilon) {
       pass = false;
     }
@@ -1719,12 +1718,34 @@ function checkAsyncTransformTest() {
   ok(pass,
      "interpolation of transitions: " + test.start + " to " + test.end +
      ": OMTA - " + async_transform + ", computed style - " + computed_transform);
   transformTestIndex++;
   winUtils.restoreNormalRefresh();
   window.requestAnimationFrame(nextAsyncTransformTest);
 }
 
+function asyncOpacityTest() {
+  OMTAdiv.style.setProperty("transition-property", "none", "");
+  OMTAdiv.style.setProperty("opacity", 0, "");
+  OMTACs.getPropertyValue("opacity");
+  OMTAdiv.style.setProperty("transition-property", "opacity", "");
+  OMTAdiv.style.setProperty("opacity", 1, "");
+  OMTACs.getPropertyValue("opacity");
+
+  window.requestAnimationFrame(checkAsyncOpacityTest);
+}
+
+function checkAsyncOpacityTest() {
+  winUtils.advanceTimeAndRefresh(200000);
+  var async_opacity = winUtils.getOMTAOrComputedStyle(OMTAdiv, "opacity");
+  var computed_opacity = OMTACs.getPropertyValue("opacity");
+  is(async_opacity, computed_opacity,
+     "Async animated opacity should match computed opacity");
+  winUtils.restoreNormalRefresh();
+  OMTAdiv.style.removeProperty("transition");
+  SimpleTest.finish();
+}
+
 </script>
 </pre>
 </body>
 </html>