Bug 788549 Part 12: Add tests for async transform transitions r=dbaron
authorDavid Zbarsky <dzbarsky@gmail.com>
Tue, 04 Jun 2013 20:11:56 -0700
changeset 134037 e7cf4aeef44dd1525070c19beb376ed7873f693d
parent 134036 411b2e15a28607cc3ada4576947da5fa2f0a20bc
child 134038 b33788d9d17271187c4a46fe3a437508a76aac1e
push id29023
push userdzbarsky@gmail.com
push dateWed, 05 Jun 2013 03:12:01 +0000
treeherdermozilla-inbound@e7cf4aeef44d [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 12: Add tests for async transform transitions 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
@@ -25,24 +25,29 @@ https://bugzilla.mozilla.org/show_bug.cg
   one that depends on whether we're tall enough to need a scrollbar)
 
   Use a 20px font size and line-height so that percentage line-height
   and vertical-align doesn't accumulate rounding error.
   -->
 <div style="height: 50px; width: 300px; font-size: 20px; line-height: 20px">
 
 <div id="display">
+</div>
 
+<div id="transformTest" style="height:100px; width:200px; background-color:blue;">
 </div>
+
 </div>
 <pre id="test">
 <script type="application/javascript">
 
 /** Test for Bug 435441 **/
 
+SimpleTest.waitForExplicitFinish();
+
 function has_num(str)
 {
     return !!String(str).match(/^([\d.]+)/);
 }
 
 function any_unit_to_num(str)
 {
     return Number(String(str).match(/^([\d.]+)/)[1]);
@@ -250,29 +255,33 @@ 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 cs = getComputedStyle(div, "");
+var transformCs = getComputedStyle(transformDiv, "");
+var winUtils = SpecialPowers.getDOMWindowUtils(window);
 
 function computeMatrix(v) {
   div.style.setProperty("transform", v, "");
   var result = cs.getPropertyValue("transform");
   div.style.removeProperty("transform");
   return result;
 }
 var c_rot_15 = computeMatrix("rotate(15deg)");
 is(c_rot_15.substring(0,6), "matrix", "should compute to matrix value");
 var c_rot_60 = computeMatrix("rotate(60deg)");
 is(c_rot_60.substring(0,6), "matrix", "should compute to matrix value");
 
+var transformTestIndex = 0;
 var transformTests = [
   // rotate
   { start: 'none', end: 'rotate(60deg)',
     expected_uncomputed: 'rotate(15deg)',
     expected: c_rot_15 },
   { start: 'rotate(0)', end: 'rotate(60deg)',
     expected_uncomputed: 'rotate(15deg)',
     expected: c_rot_15 },
@@ -356,17 +365,18 @@ var transformTests = [
     round_error_ok: true },
   { start: 'translateX(-20%)', end: 'none',
     expected_uncomputed: 'translateX(-15%)',
     expected: 'matrix(1, 0, 0, 1, -45, 0)',
     round_error_ok: true },
   { start: 'translateY(-40%)', end: 'none',
     expected_uncomputed: 'translateY(-30%)',
     expected: 'matrix(1, 0, 0, 1, 0, -15)',
-    round_error_ok: true },
+    round_error_ok: true,
+    big_omta_round_error: true },
   { start: 'none', end: 'rotate(90deg) translate(20%, 20%) rotate(-90deg)',
     expected_uncomputed: 'rotate(22.5deg) translate(5%, 5%) rotate(-22.5deg)',
     round_error_ok: true },
   { start: 'none', end: 'rotate(-90deg) translate(20%, 20%) rotate(90deg)',
     expected_uncomputed: 'rotate(-22.5deg) translate(5%, 5%) rotate(22.5deg)',
     round_error_ok: true },
   // test percent translation using matrix decomposition
   { start: 'rotate(45deg) rotate(-45deg)',
@@ -379,20 +389,22 @@ var transformTests = [
     round_error_ok: true },
   // test calc() in translate
   // Note that font-size: is 20px, and that percentages are relative
   // to 300px (width) and 50px (height) per the prerequisites in
   // property_database.js
   { start: 'translateX(20%)', /* 60px */
     end: 'translateX(calc(10% + 1em))', /* 30px + 20px = 50px */
     expected_uncomputed: 'translateX(calc(17.5% + 0.25em))',
-    expected: 'matrix(1, 0, 0, 1, 57.5, 0)' },
+    expected: 'matrix(1, 0, 0, 1, 57.5, 0)',
+    big_omta_round_error: true },
   { start: 'translate(calc(0.75 * 3em + 1.5 * 10%), calc(0.5 * 5em + 0.5 * 8%))', /* 90px, 52px */
     end: 'rotate(90deg) translateY(20%) rotate(90deg) translateY(calc(10% + 0.5em)) rotate(180deg)', /* -10px, -15px */
-    expected: 'matrix(1, 0, 0, 1, 65, 35.25)' },
+    expected: 'matrix(1, 0, 0, 1, 65, 35.25)',
+    big_omta_round_error: true },
 
   // scale
   { start: 'scale(2)', end: 'none',
     expected_uncomputed: 'scale(1.75)',
     expected: 'matrix(1.75, 0, 0, 1.75, 0, 0)' },
   { start: 'none', end: 'scale(0.4)',
     expected_uncomputed: 'scale(0.85)',
     expected: 'matrix(0.85, 0, 0, 0.85, 0, 0)',
@@ -1665,14 +1677,70 @@ function test_transform_transition(prop)
       }
       ok(pass,
          "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", "");
+  window.requestAnimationFrame(nextAsyncTransformTest);
+}
+
+function nextAsyncTransformTest()
+{
+  var test = transformTests[transformTestIndex];
+
+  if (transformTestIndex >= transformTests.length) {
+    transformDiv.style.removeProperty("transition");
+    SimpleTest.finish();
+    return;
+  }
+
+  if (test.requires_3d && !transform3D_enabled()) {
+    transformTestIndex++;
+    window.requestAnimationFrame(nextAsyncTransformTest);
+    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");
+
+  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_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;
+    }
+  }
+  ok(pass,
+     "interpolation of transitions: " + test.start + " to " + test.end +
+     ": OMTA - " + async_transform + ", computed style - " + computed_transform);
+  transformTestIndex++;
+  winUtils.restoreNormalRefresh();
+  window.requestAnimationFrame(nextAsyncTransformTest);
 }
 
 </script>
 </pre>
 </body>
 </html>