Bug 1339648 - Fix flaky file_transitions_replacement_on_busy_frame.html test; r?hiro
There are two issues with this test:
(a) It fails to flush style when it intends to trigger the first transition.
Specifically, `getComputedStyle(div)` alone does not flush style. Instead we
need `getComputedStyle(div).transform`.
This patch replaces that line with a call to `div.getAnimations()` which
*does* flush style ensuring the first transition is triggered.
(b) It fails to ensure that the first transition has progressed past the first
frame on the main thread before triggering the second transition.
If the first transition is still on its first frame, the computed value of
'transform' will be 'matrix(1, 0, 0, 1, 0, 0)'. If we then update the
specified value of 'transform' to 'translateX(0px)', no transition will be
generated (although the first transition will be canceled) since there is no
change.
This patch fixes that by making the end point of the second transition NOT
match the start point of the first transition (and not be somewhere inside
the range of the first transition).
As an extra precautionary measure, to be sure that the animation has started
progressing on both the main thread and compositor, this patch alters the
initial wait condition for the first transition to also wait on the first
transition's ready promise.
MozReview-Commit-ID: E1OJuHBSMfr
--- a/layout/style/test/file_transitions_replacement_on_busy_frame.html
+++ b/layout/style/test/file_transitions_replacement_on_busy_frame.html
@@ -2,16 +2,17 @@
<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 src="animation_utils.js"></script>
<style>
#target {
height: 100px;
width: 100px;
background: green;
transition: transform 100s linear;
}
</style>
@@ -36,55 +37,61 @@ var omtaEnabled = SpecialPowers.DOMWindo
window.addEventListener("load", function() {
if (!omtaEnabled) {
ok(true, "Skipping the test since OMTA is disabled");
finish();
return;
}
var div = document.getElementById("target");
+
// Start first transition
div.style.transform = "translateX(300px)";
- getComputedStyle(div);
+ const firstTransition = div.getAnimations()[0];
- // Wait for a paint to ensure that the first transition has started.
- waitForAllPaints(function() {
+ // Wait for first transition to start running on the main thread and
+ // compositor.
+ firstTransition.ready.then(waitForPaints).then(() => {
var previousPropertyValue;
var previousKeyframeValue;
- var anim;
+ var secondTransition;
+
requestAnimationFrame(function() {
// Start second transition
- div.style.transform = "translateX(0px)";
- getComputedStyle(div).transform;
+ div.style.transform = "translateX(600px)";
+ secondTransition = div.getAnimations()[0];
- anim = div.getAnimations()[0];
- var properties = SpecialPowers.wrap(anim.effect).getProperties();
+ var properties =
+ SpecialPowers.wrap(secondTransition.effect).getProperties();
previousPropertyValue = properties[0].values[0].value;
- previousKeyframeValue = anim.effect.getKeyframes()[0].transform;
+ previousKeyframeValue =
+ secondTransition.effect.getKeyframes()[0].transform;
});
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 properties = SpecialPowers.wrap(anim.effect).getProperties();
+ var properties =
+ SpecialPowers.wrap(secondTransition.effect).getProperties();
var currentPropertyValue = properties[0].values[0].value;
isnot(currentPropertyValue, previousPropertyValue,
"From value of transition is updated since the moment when " +
"it was generated");
- isnot(anim.effect.getKeyframes()[0].transform, previousKeyframeValue,
+ isnot(secondTransition.effect.getKeyframes()[0].transform,
+ previousKeyframeValue,
"Keyframe value of transition is updated since the moment when " +
"it was generated");
finish();
});
});
});
});
