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
66
67
68
69
70
71
72
73
74
|
<!DOCTYPE html>
<script src="../../resources/js-test.js"></script>
<style>
#before:before,
#after:after {
content: "";
display: block;
height: 50px;
width: 50px;
-webkit-transition: width 1ms;
transition: width 1ms;
}
#before.transition:before,
#after.transition:after {
height: 10px;
width: 10px;
}
#before,
#after {
display: inline-block;
border: 1px solid black;
background: red;
}
#after.transition,
#before.transition {
background: green;
}
</style>
<div id="before"></div>
<div id="after"></div>
<script>
description('Transitions on :before and :after pseudo elements should run and fire DOM events');
if (window.testRunner) {
testRunner.dumpAsText();
testRunner.waitUntilDone();
}
var expectedEvents = [ ["width", "before", "::before"] , ["width", "after", "::after"] ];
var currentEvent = 0;
function recordTransitionEvent()
{
shouldBe("event.propertyName", "expectedEvents[currentEvent][0]");
shouldBe("event.target.id", "expectedEvents[currentEvent][1]");
shouldBe("event.pseudoElement", "expectedEvents[currentEvent][2]");
if (currentEvent == 1) {
isSuccessfullyParsed();
if (window.testRunner)
testRunner.notifyDone();
} else {
currentEvent++;
testTransition('after');
}
}
function testTransition(id)
{
var div = document.getElementById(id);
div.className = 'transition';
}
onload = function() {
document.addEventListener( 'transitionend', recordTransitionEvent);
testTransition('before');
};
</script>
|
