Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-03 12:40:06 +01:00
Code Issues Projects Releases Packages Wiki Activity

Add support for faster reversing of interrupted transitions

Browse source 
This is described in the spec and allows interrupted transitions to
reverse in a more natural way. Unfortunately, most of the tests that
exercise this behavior use the WebAnimations API. This change adds a
test using our custom clock control API.
This commit is contained in:
Martin Robinson 2020-05-12 17:05:10 +02:00
parent c7fc4dd275
commit 4ba15c33e3
3 changed files with 281 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

7
tests/wpt/mozilla/meta/MANIFEST.json
View file

@ -12870,6 +12870,13 @@
{}
]
],
"faster-reversing-of-transitions.html": [
"8471a18f962283afd8d6a81c8ab868e5c2eedd7d",
[
null,
{}
]
],
"mixed-units.html": [
"bb029a9fa80650c39e3f9524748e2b8893a476e1",
[

124
tests/wpt/mozilla/tests/css/animations/faster-reversing-of-transitions.html Normal file
View file

@ -0,0 +1,124 @@
<!doctype html>
<meta charset="utf-8">
<title>Transition test: Support for faster reversing of interrupted transitions</title>
<style>
.target {
width: 10px;
height: 50px;
background: red;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<body></body>
<script>
function createTransitionElement() {
let element = document.createElement("div");
element.className = "target";
element.style.transitionProperty = "width";
element.style.transitionDuration = "10s";
element.style.transitionTimingFunction = "linear";
document.body.appendChild(element);
getComputedStyle(element).width;
return element;
}
test(function() {
let testBinding = new window.TestBinding();
let div = createTransitionElement();
// Start a transition and allow 30% of it to complete.
div.style.width = "110px";
getComputedStyle(div).width;
testBinding.advanceClock(3000);
getComputedStyle(div).width;
assert_approx_equals(div.clientWidth, 40, 1);
// Reverse the transition. It should be complete after a proportional
// amount of time and not the "transition-duration" set in the style.
div.style.width = "10px";
getComputedStyle(div).width;
testBinding.advanceClock(3000);
getComputedStyle(div).width;
assert_approx_equals(div.clientWidth, 10, 1);
document.body.removeChild(div);
}, "Reversed transitions are shortened proportionally");
test(function() {
let testBinding = new window.TestBinding();
let div = createTransitionElement();
// Start a transition and allow 50% of it to complete.
div.style.width = "110px";
getComputedStyle(div).width;
testBinding.advanceClock(5000);
getComputedStyle(div).width;
assert_approx_equals(div.clientWidth, 60, 1);
// Reverse the transition.
div.style.width = "10px";
getComputedStyle(div).width;
testBinding.advanceClock(2500);
getComputedStyle(div).width;
assert_approx_equals(div.clientWidth, 35, 1);
// Reverse the reversed transition.
div.style.width = "110px";
getComputedStyle(div).width;
testBinding.advanceClock(2000);
getComputedStyle(div).width;
assert_approx_equals(div.clientWidth, 55, 1);
testBinding.advanceClock(4500);
getComputedStyle(div).width;
assert_approx_equals(div.clientWidth, 100, 1);
testBinding.advanceClock(1000);
getComputedStyle(div).width;
assert_approx_equals(div.clientWidth, 110, 1);
document.body.removeChild(div);
}, "Reversed already reversed transitions are shortened proportionally");
test(function() {
let testBinding = new window.TestBinding();
let div = createTransitionElement();
// Start a transition and allow most of it to complete.
div.style.width = "110px";
getComputedStyle(div).width;
testBinding.advanceClock(9000);
getComputedStyle(div).width;
assert_approx_equals(div.clientWidth, 100, 1);
// Start a new transition that explicitly isn't a reversal. This should
// take the entire 10 seconds.
div.style.width = "0px";
getComputedStyle(div).width;
testBinding.advanceClock(2000);
getComputedStyle(div).width;
assert_approx_equals(div.clientWidth, 80, 1);
testBinding.advanceClock(6000);
getComputedStyle(div).width;
assert_approx_equals(div.clientWidth, 20, 1);
testBinding.advanceClock(2000);
assert_equals(getComputedStyle(div).getPropertyValue("width"), "0px");
document.body.removeChild(div);
}, "Non-reversed transition changes use the full transition-duration");
</script>