blob: 381682197251c5aa4a08a4fb07e64404b3781c22 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>transition end event with shorthand property</title>
<link rel="help" href="https://drafts.csswg.org/css-transitions/#transition-property-property">
<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>
|
