mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-31 14:15:30 +00:00
d8ec730df8
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 --HG-- extra : rebase_source : 7cb42e57067c21451706bd89284016d996dc8b12
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>
|