Bug 1275718 - Part 2: Check the new transition position with KeyframeEffectReadOnly.getProperties(). r?birtles
We should just check the from value of the new transition instead of
checking computed style. That's because the new transition moves back
to the original position while we are waiting for the callback of paints.
For example, on Android, thumbnail creation is sometimes processed between
paints and callbacks. (Gecko's main loop spins after paints process, most
of callbacks are processed there)
MozReview-Commit-ID: JyJsmEuIiKn
--- a/layout/style/test/file_transitions_replacement_on_busy_frame.html
+++ b/layout/style/test/file_transitions_replacement_on_busy_frame.html
@@ -2,33 +2,32 @@
<html>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=1167519
-->
<head>
<meta charset=utf-8>
<script type="application/javascript"
src="/tests/SimpleTest/paint_listener.js"></script>
- <script type="application/javascript" src="animation_utils.js"></script>
<style>
#target {
height: 100px;
width: 100px;
background: green;
transition: transform 100s linear;
}
</style>
</head>
<body>
<div id="target"></div>
<script>
'use strict';
var ok = opener.ok.bind(opener);
-var info = opener.info.bind(opener);
+var isnot = opener.isnot.bind(opener);
function finish() {
var o = opener;
self.close();
o.SimpleTest.finish();
}
var OMTAPrefKey = "layers.offmainthreadcomposition.async-animations";
@@ -44,49 +43,46 @@ window.addEventListener("load", function
var div = document.getElementById("target");
// Start first transition
div.style.transform = "translateX(300px)";
getComputedStyle(div);
// Wait for a paint to ensure that the first transition has started.
waitForAllPaints(function() {
var previousMatrix;
+ var anim;
requestAnimationFrame(function() {
// Start second transition
div.style.transform = "translateX(0px)";
- previousMatrix =
- convertTo3dMatrix(getComputedStyle(div).transform);
+ getComputedStyle(div).transform;
+
+ anim = div.getAnimations()[0];
+ var properties = SpecialPowers.wrap(anim.effect).getProperties();
+ previousMatrix = properties[0].values[0].value;
});
requestAnimationFrame(function() {
// Tie up main thread for 300ms. In the meantime, the first transition
// will continue running on the compositor. If we don't update the start
// point of the second transition, it will appear to jump when it starts.
var startTime = performance.now();
while (performance.now() - startTime < 300);
// Ensure that our paint process has been done.
// Note that requestAnimationFrame is not suitable here since on Android
// there is a case where the paint process has not completed even when the
// requestAnimationFrame callback is run (and it is during the paint
// process that we update the transition start point).
waitForAllPaints(function() {
- var anim = div.getAnimations()[0];
- anim.pause();
-
- // Wait for being animated style updated by animation.pause().
- anim.ready.then(function() {
- var currentMatrix =
- convertTo3dMatrix(getComputedStyle(div).transform);
- // Now the position on x-axis should be at least 300ms ahead.
- var difference = 0.9; // 300px / (100s / 300ms)
- ok(currentMatrix[3][0] - previousMatrix[3][0] >= difference,
- currentMatrix + " should be advanced ahead of " + previousMatrix);
- finish();
- });
+ var properties = SpecialPowers.wrap(anim.effect).getProperties();
+ var currentMatrix = properties[0].values[0].value;
+ isnot(currentMatrix, previousMatrix,
+ "From value of transition is updated since the moment when " +
+ "it was generated");
+ finish();
});
});
});
});
</script>
</body>
</html>