mirror of
https://github.com/servo/servo.git
synced 2025-08-03 04:30:10 +01:00
Add support for remaining animation and transition events
Fixes #21564.
This commit is contained in:
Martin Robinson
parent
47642e0eee
commit
77aa3721c5
28 changed files with 493 additions and 68 deletions
|
|
@ -1,5 +0,0 @@
|
|||
[animationevent-types.html]
|
||||
expected: TIMEOUT
|
||||
[animationstart event is instanceof AnimationEvent]
|
||||
expected: TIMEOUT
|
||||
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
[Element-getAnimations.tentative.html]
|
||||
bug: https://github.com/servo/servo/issues/21564
|
||||
bug: https://github.com/servo/servo/issues/26626
|
||||
[getAnimations for CSS Animations with animation-name: none]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
[animationevent-pseudoelement.html]
|
||||
bug: https://github.com/servo/servo/issues/21564
|
||||
bug: https://github.com/servo/servo/issues/10316
|
||||
expected: TIMEOUT
|
||||
[AnimationEvent should have the correct pseudoElement memeber]
|
||||
expected: TIMEOUT
|
||||
|
|
|
|||
|
|
@ -1,6 +0,0 @@
|
|||
[animationevent-types.html]
|
||||
bug: https://github.com/servo/servo/issues/21564
|
||||
expected: TIMEOUT
|
||||
[animationstart event is instanceof AnimationEvent]
|
||||
expected: TIMEOUT
|
||||
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
[events-006.html]
|
||||
bug: https://github.com/servo/servo/issues/21564
|
||||
bug: https://github.com/servo/servo/issues/10316
|
||||
expected: TIMEOUT
|
||||
[transition padding-left on ::after]
|
||||
expected: NOTRUN
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
[variable-animation-from-to.html]
|
||||
bug: https://github.com/servo/servo/issues/21564
|
||||
bug: https://github.com/servo/servo/issues/26625
|
||||
expected: TIMEOUT
|
||||
[Verify CSS variable value before animation]
|
||||
expected: FAIL
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
[variable-animation-over-transition.html]
|
||||
bug: https://github.com/servo/servo/issues/21564
|
||||
bug: https://github.com/servo/servo/issues/26625
|
||||
expected: TIMEOUT
|
||||
[Verify CSS variable value before animation]
|
||||
expected: FAIL
|
||||
|
|
|
|||
|
|
@ -1,2 +1,2 @@
|
|||
[variable-animation-substitute-into-keyframe-shorthand.html]
|
||||
bug: https://github.com/servo/servo/issues/21564
|
||||
bug: https://github.com/servo/servo/issues/26625
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
[variable-animation-substitute-into-keyframe-transform.html]
|
||||
bug: https://github.com/servo/servo/issues/21564
|
||||
bug: https://github.com/servo/servo/issues/26625
|
||||
[Verify transform before animation]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -1,2 +1,2 @@
|
|||
[variable-animation-substitute-into-keyframe.html]
|
||||
bug: https://github.com/servo/servo/issues/21564
|
||||
bug: https://github.com/servo/servo/issues/26625
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
[variable-animation-substitute-within-keyframe-fallback.html]
|
||||
bug: https://github.com/servo/servo/issues/21564
|
||||
bug: https://github.com/servo/servo/issues/26625
|
||||
[Verify color after animation]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
[variable-animation-substitute-within-keyframe-multiple.html]
|
||||
bug: https://github.com/servo/servo/issues/21564
|
||||
bug: https://github.com/servo/servo/issues/26625
|
||||
[Verify color after animation]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
[variable-animation-substitute-within-keyframe.html]
|
||||
bug: https://github.com/servo/servo/issues/21564
|
||||
bug: https://github.com/servo/servo/issues/26625
|
||||
[Verify color after animation]
|
||||
expected: FAIL
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
[variable-animation-to-only.html]
|
||||
bug: https://github.com/servo/servo/issues/21564
|
||||
bug: https://github.com/servo/servo/issues/26625
|
||||
expected: TIMEOUT
|
||||
[Verify CSS variable value after animation]
|
||||
expected: TIMEOUT
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
[variable-transitions-from-no-value.html]
|
||||
bug: https://github.com/servo/servo/issues/21564
|
||||
bug: https://github.com/servo/servo/issues/26625
|
||||
expected: TIMEOUT
|
||||
[Verify CSS variable value after transition]
|
||||
expected: NOTRUN
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
[variable-transitions-to-no-value.html]
|
||||
bug: https://github.com/servo/servo/issues/21564
|
||||
bug: https://github.com/servo/servo/issues/26625
|
||||
expected: TIMEOUT
|
||||
[Verify CSS variable value after transition]
|
||||
expected: NOTRUN
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
[variable-transitions-transition-property-variable-before-value.html]
|
||||
bug: https://github.com/servo/servo/issues/21564
|
||||
bug: https://github.com/servo/servo/issues/26625
|
||||
expected: TIMEOUT
|
||||
[Verify CSS variable value after transition]
|
||||
expected: NOTRUN
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
[variable-transitions-value-before-transition-property-variable.html]
|
||||
bug: https://github.com/servo/servo/issues/21564
|
||||
bug: https://github.com/servo/servo/issues/26625
|
||||
expected: TIMEOUT
|
||||
[Verify CSS variable value after transition]
|
||||
expected: NOTRUN
|
||||
|
|
|
|||
|
|
@ -0,0 +1,2 @@
|
|||
prefs: ["layout.animations.test.enabled:false",
|
||||
"dom.testbinding.enabled:false"]
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
prefs: ["layout.animations.test.enabled:false",
|
||||
"dom.testbinding.enabled:false"]
|
||||
|
||||
|
|
@ -12849,6 +12849,15 @@
|
|||
},
|
||||
"css": {
|
||||
"animations": {
|
||||
"animation-events.html": [
|
||||
"0975aa64ec47ca4b4c8fc1e0a40414a51719ad67",
|
||||
[
|
||||
null,
|
||||
{
|
||||
"timeout": "long"
|
||||
}
|
||||
]
|
||||
],
|
||||
"animation-fill-mode.html": [
|
||||
"4cfaab9fbce0adccd83f592935e63fa8ff58a1cf",
|
||||
[
|
||||
|
|
@ -12884,6 +12893,13 @@
|
|||
{}
|
||||
]
|
||||
],
|
||||
"transition-events.html": [
|
||||
"b561fc8353276e6bdd13a9d1b965f57733ecd19b",
|
||||
[
|
||||
null,
|
||||
{}
|
||||
]
|
||||
],
|
||||
"transition-raf.html": [
|
||||
"c38404503408e04b3c75b42df18ec3a7ec0819f5",
|
||||
[
|
||||
|
|
|
|||
|
|
@ -0,0 +1,2 @@
|
|||
prefs: ["layout.animations.test.enabled:false",
|
||||
"dom.testbinding.enabled:false"]
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
prefs: ["layout.animations.test.enabled:false",
|
||||
"dom.testbinding.enabled:false"]
|
||||
|
||||
160
tests/wpt/mozilla/tests/css/animations/animation-events.html
Normal file
160
tests/wpt/mozilla/tests/css/animations/animation-events.html
Normal file
|
|
@ -0,0 +1,160 @@
|
|||
<!doctype html>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS animation event dispatch</title>
|
||||
<meta name="timeout" content="long">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-2/#event-dispatch"/>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
@keyframes anim {
|
||||
from { margin-left: 0px; }
|
||||
to { margin-left: 100px; }
|
||||
}
|
||||
</style>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
// This series of tests is a forked version of the Web Platform Test
|
||||
// /css/css-animations/event-dispatch.tentative that do not make use
|
||||
// of the Web Animations API, since Servo doesn't yet support Web Animations.
|
||||
|
||||
function waitForFrame() {
|
||||
return new Promise(resolve => {
|
||||
window.requestAnimationFrame(resolve);
|
||||
});
|
||||
}
|
||||
|
||||
// All animation events should be received on the next animation frame.
|
||||
const animationEventsTimeout = () => {
|
||||
return new Promise(function(resolve) {
|
||||
setTimeout(resolve, 5000);
|
||||
});
|
||||
}
|
||||
|
||||
const setupAnimation = (t, animationStyle) => {
|
||||
var div = document.createElement('div');
|
||||
div.setAttribute('style', 'animation: ' + animationStyle);
|
||||
document.body.appendChild(div);
|
||||
if (t && typeof t.add_cleanup === 'function') {
|
||||
t.add_cleanup(function() {
|
||||
if (div.parentNode) {
|
||||
div.remove();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const watcher = new EventWatcher(t, div, [ 'animationstart',
|
||||
'animationiteration',
|
||||
'animationend',
|
||||
'animationcancel' ],
|
||||
animationEventsTimeout);
|
||||
|
||||
return { watcher, div };
|
||||
};
|
||||
|
||||
promise_test(async t => {
|
||||
const { watcher } = setupAnimation(t, 'anim 100s');
|
||||
|
||||
const events = await watcher.wait_for(
|
||||
['animationstart' ],
|
||||
{
|
||||
record: 'all',
|
||||
}
|
||||
);
|
||||
assert_equals(events[0].elapsedTime, 0.0);
|
||||
}, 'animationstart');
|
||||
|
||||
promise_test(async t => {
|
||||
const { watcher } = setupAnimation(t, 'anim 0.1s');
|
||||
|
||||
const events = await watcher.wait_for(
|
||||
['animationstart', 'animationend'],
|
||||
{
|
||||
record: 'all',
|
||||
}
|
||||
);
|
||||
assert_equals(events[0].elapsedTime, 0);
|
||||
assert_equals(events[0].animationName, "anim");
|
||||
|
||||
assert_approx_equals(events[1].elapsedTime, 0.1, 0.001);
|
||||
assert_equals(events[1].animationName, "anim");
|
||||
}, 'animationstart and animationend');
|
||||
|
||||
promise_test(async t => {
|
||||
const { watcher } = setupAnimation(t, 'anim 1s 0.5s');
|
||||
|
||||
const events = await watcher.wait_for(
|
||||
['animationstart', 'animationend'], { record: 'all', }
|
||||
);
|
||||
assert_approx_equals(events[0].elapsedTime, 0, 0.01);
|
||||
assert_equals(events[0].animationName, "anim");
|
||||
|
||||
assert_approx_equals(events[1].elapsedTime, 1, 0.01);
|
||||
assert_equals(events[1].animationName, "anim");
|
||||
}, 'animationstart and animationend with positive delay');
|
||||
|
||||
promise_test(async t => {
|
||||
const { watcher } = setupAnimation(t, 'anim 100s -99.99s');
|
||||
|
||||
const events = await watcher.wait_for(
|
||||
['animationstart', 'animationend'], { record: 'all', }
|
||||
);
|
||||
assert_approx_equals(events[0].elapsedTime, 99.99, 0.1);
|
||||
assert_equals(events[0].animationName, "anim");
|
||||
|
||||
assert_approx_equals(events[1].elapsedTime, 99.99, 0.1);
|
||||
assert_equals(events[1].animationName, "anim");
|
||||
}, 'animationstart and animationend with negative delay');
|
||||
|
||||
promise_test(async t => {
|
||||
const { watcher } = setupAnimation(t, 'anim 100s -200s');
|
||||
|
||||
const events = await watcher.wait_for(
|
||||
['animationstart', 'animationend'], { record: 'all', }
|
||||
);
|
||||
assert_approx_equals(events[0].elapsedTime, 99.99, 0.1);
|
||||
assert_equals(events[0].animationName, "anim");
|
||||
|
||||
assert_approx_equals(events[1].elapsedTime, 99.99, 0.1);
|
||||
assert_equals(events[1].animationName, "anim");
|
||||
}, 'animationstart and animationend with negative delay larger than active duration');
|
||||
|
||||
promise_test(async t => {
|
||||
const { watcher, div } = setupAnimation(t, 'anim 100s');
|
||||
await watcher.wait_for('animationstart');
|
||||
|
||||
div.style.animation = "";
|
||||
|
||||
await watcher.wait_for('animationcancel');
|
||||
}, 'animationcancel');
|
||||
|
||||
promise_test(async t => {
|
||||
const { watcher, div } = setupAnimation(t, 'anim 100s 50s');
|
||||
|
||||
// Wait for two animation frames. One is not enough in some browser engines.
|
||||
await waitForFrame();
|
||||
await waitForFrame();
|
||||
|
||||
div.style.animation = "";
|
||||
const events = await watcher.wait_for(
|
||||
['animationcancel'], { record: 'all', }
|
||||
);
|
||||
|
||||
assert_equals(events[0].elapsedTime, 0);
|
||||
}, 'animationcancel with positive delay');
|
||||
|
||||
promise_test(async t => {
|
||||
const { watcher, div } = setupAnimation(t, 'anim 100s -50s');
|
||||
await watcher.wait_for('animationstart');
|
||||
|
||||
div.style.animation = "";
|
||||
|
||||
const events = await watcher.wait_for(
|
||||
['animationcancel'], { record: 'all', }
|
||||
);
|
||||
|
||||
assert_approx_equals(events[0].elapsedTime, 50, 0.1);
|
||||
}, 'animationcancel with negative delay');
|
||||
|
||||
</script>
|
||||
131
tests/wpt/mozilla/tests/css/animations/transition-events.html
Normal file
131
tests/wpt/mozilla/tests/css/animations/transition-events.html
Normal file
|
|
@ -0,0 +1,131 @@
|
|||
<!doctype html>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS transition event dispatch</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transitions-2/#event-dispatch">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
// This series of tests is a forked version of the Web Platform Test
|
||||
// /css/css-transitions/event-dispatch.tentative that do not make use
|
||||
// of the Web Animations API, since Servo doesn't yet support Web Animations.
|
||||
|
||||
|
||||
// All transition events should be received on the next animation frame.
|
||||
function transitionEventsTimeout() {
|
||||
return new Promise(function(resolve) {
|
||||
return new Promise(resolve => {
|
||||
window.requestAnimationFrame(resolve);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const setupTransition = (t, transitionStyle) => {
|
||||
var div = document.createElement('div');
|
||||
div.setAttribute('style', 'transition: ' + transitionStyle);
|
||||
document.body.appendChild(div);
|
||||
if (t && typeof t.add_cleanup === 'function') {
|
||||
t.add_cleanup(function() {
|
||||
if (div.parentNode) {
|
||||
div.remove();
|
||||
}
|
||||
});
|
||||
}
|
||||
const watcher = new EventWatcher(t, div, [ 'transitionrun',
|
||||
'transitionstart',
|
||||
'transitionend',
|
||||
'transitioncancel' ],
|
||||
transitionEventsTimeout);
|
||||
getComputedStyle(div).marginLeft;
|
||||
|
||||
div.style.marginLeft = '100px';
|
||||
|
||||
return { watcher, div };
|
||||
};
|
||||
|
||||
promise_test(async t => {
|
||||
const { watcher } = setupTransition(t, 'margin-left 100s 100s');
|
||||
const events = await watcher.wait_for(
|
||||
['transitionrun' ],
|
||||
{
|
||||
record: 'all',
|
||||
}
|
||||
);
|
||||
assert_equals(events[0].elapsedTime, 0.0);
|
||||
}, 'transitionrun');
|
||||
|
||||
promise_test(async t => {
|
||||
const { watcher } = setupTransition(t, 'margin-left 100s');
|
||||
const events = await watcher.wait_for(
|
||||
['transitionrun', 'transitionstart', ],
|
||||
{
|
||||
record: 'all',
|
||||
}
|
||||
);
|
||||
assert_equals(events[0].elapsedTime, 0.0);
|
||||
assert_equals(events[1].elapsedTime, 0.0);
|
||||
}, 'transitionrun, transitionstart');
|
||||
|
||||
promise_test(async t => {
|
||||
const { watcher, div } = setupTransition(t, 'margin-left 0.1s');
|
||||
|
||||
const events = await watcher.wait_for(
|
||||
['transitionrun', 'transitionstart', 'transitionend'],
|
||||
{
|
||||
record: 'all',
|
||||
}
|
||||
);
|
||||
assert_equals(events[0].elapsedTime, 0);
|
||||
assert_equals(events[0].propertyName, "margin-left");
|
||||
|
||||
assert_equals(events[1].elapsedTime, 0);
|
||||
assert_equals(events[1].propertyName, "margin-left");
|
||||
|
||||
assert_approx_equals(events[2].elapsedTime, 0.1, 0.01);
|
||||
assert_equals(events[2].propertyName, "margin-left");
|
||||
|
||||
}, 'transitionrun, transitionstart, transitionend');
|
||||
|
||||
promise_test(async t => {
|
||||
const { watcher, div } = setupTransition(t, 'margin-left 1s 0.5s');
|
||||
|
||||
const events = await watcher.wait_for(
|
||||
['transitionrun', 'transitionstart', 'transitionend'],
|
||||
{
|
||||
record: 'all',
|
||||
}
|
||||
);
|
||||
|
||||
assert_equals(events[0].elapsedTime, 0);
|
||||
assert_equals(events[0].propertyName, "margin-left");
|
||||
|
||||
assert_equals(events[1].elapsedTime, 0);
|
||||
assert_equals(events[1].propertyName, "margin-left");
|
||||
|
||||
assert_equals(events[2].elapsedTime, 1);
|
||||
assert_equals(events[2].propertyName, "margin-left");
|
||||
}, 'transitionrun, transitionstart, transitionend with positive delay');
|
||||
|
||||
|
||||
promise_test(async t => {
|
||||
const { watcher, div } = setupTransition(t, 'margin-left 100s -99.99s');
|
||||
|
||||
const events = await watcher.wait_for(
|
||||
['transitionrun', 'transitionstart', 'transitionend'],
|
||||
{
|
||||
record: 'all',
|
||||
}
|
||||
);
|
||||
assert_approx_equals(events[0].elapsedTime, 99.99, 0.1);
|
||||
assert_equals(events[0].propertyName, "margin-left");
|
||||
|
||||
assert_approx_equals(events[1].elapsedTime, 99.99, 0.1);
|
||||
assert_equals(events[1].propertyName, "margin-left");
|
||||
|
||||
assert_approx_equals(events[2].elapsedTime, 99.99, 0.1);
|
||||
assert_equals(events[2].propertyName, "margin-left");
|
||||
}, 'transitionrun, transitionstart, transitionend with negative delay');
|
||||
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue