Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-transitions/animations/transition-end-event-shorthands.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>transition end event with shorthand property</title>
<style>
#box {
transition: padding 1s;
padding: 0px 1px 2px 3px; // top right bottom left
}
</style>
</head>
<body>
<div id="container">
<div id="box"></div>
</div>
</body>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/css-transitions/support/helper.js"></script>
<script>
window.onload = () => {
function timeoutPromise() {
return waitForAnimationFrames(5);
}
promise_test(async t => {
// Make sure we have rendered the page before making the style change
// to ensure we get transitions.
await waitForAnimationFrames(2);
// Change three padding properties, but preserve padding-bottom.
// This should trigger 3 transitions.
box.style.padding = "8px 7px 2px 5px";
const animations = document.getAnimations();
const properties =
animations.map(anim => anim.transitionProperty).sort();
assert_array_equals(properties,
['padding-left', 'padding-right', 'padding-top']);
// Expect a transitionend event for each of the CSSTransitions.
const eventWatcher =
new EventWatcher(t, box, 'transitionend', timeoutPromise);
const eventsPromise =
eventWatcher.wait_for(
['transitionend', 'transitionend', 'transitionend'],
{ record: 'all' }).then(events => {
events.forEach(event => {
assert_times_equal(event.elapsedTime, 1);
})
});
animations.forEach(anim => {
anim.finish();
});
await eventsPromise;
// Ensure no unexpected events are received.
await waitForAnimationFrames(2);
}, 'Transition end events generated for transition on shorthand property');
};
</script>
</html>