c2817650ed
The check of negative elapsedDuration is basically no longer valid since animation delay is not factored into start time any more. But still we have somtimes met negative elapsedDuration sice we use a previous vsync time stamp for async animations to make the animations more sync. This is not a problem in most cases but makes two reftests intermitent failure because both of them used steps(1, start), the steps(1, start) composed different results in the before phase and in the active phase. To avoid this difference this patch replace the steps(1, start) with steps(1, end). Once we incorpolate playbackRate into GetCurrentOrPendingStartTime, we don't need to call AnimationTimeToTimeStamp for deviding delay by playbackRate since the time passed to AnimationTimeToTimeStamp does not contain delay any more. MozReview-Commit-ID: IVE2IFfNgm0
43 lines
1.1 KiB
HTML
43 lines
1.1 KiB
HTML
<!DOCTYPE html>
|
|
<html class="reftest-wait">
|
|
<title>
|
|
Opacity transition winning over !important rule creates a stacking context
|
|
</title>
|
|
<style>
|
|
span {
|
|
height: 100px;
|
|
width: 100px;
|
|
position: fixed;
|
|
background: green;
|
|
top: 50px;
|
|
}
|
|
#test {
|
|
width: 100px; height: 100px;
|
|
background: blue;
|
|
/*
|
|
* On the compositor we use a previous vsync time stamp rather than the
|
|
* current time stamp, as a result sometimes transition may be still in
|
|
* before phase after waiting a frame. To compose the same opacity value
|
|
* regardless of whether the transition is in before or active phase, we use
|
|
* steps(1, end) here.
|
|
*/
|
|
transition: opacity 100s steps(1, end);
|
|
opacity: 1 ! important;
|
|
}
|
|
</style>
|
|
<span></span>
|
|
<div id="test"></div>
|
|
<script>
|
|
window.addEventListener("load", () => {
|
|
var target = document.getElementById("test");
|
|
getComputedStyle(target).opacity;
|
|
|
|
target.style.setProperty("opacity", "0", "important");
|
|
getComputedStyle(target).opacity;
|
|
|
|
requestAnimationFrame(() => {
|
|
document.documentElement.classList.remove("reftest-wait");
|
|
});
|
|
});
|
|
</script>
|