<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
<title>CSS3 Animations Test: pseudoElement attribute of Event - return the name or empty string</title>
<link href="http://www.intel.com" rel="author" title="Intel" />
<link href="mailto:jieqiongx.cui@intel.com" rel="author" title="Jieqiong Cui" />
<link href="http://www.w3.org/TR/css3-animations/#AnimationEvent-attributes" rel="help" title="5.1.2. Attributes" />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
@keyframes sample {
from {
left: 150px;
}
to {
left: 0px;
}
}
.test {
animation-duration: 10s;
animation-name: sample;
animation-timing-function: linear;
background-color: blue;
height: 50px;
position: relative;
width: 100px;
}
#testDiv2::after {
content: "pseudoElement";
}
</style>
</head><body><div id="log"></div>
<div id="testDiv1" class="test"></div>
<div id="testDiv2" class="test"></div>
<script>
var t1 = async_test("Check if the pseudoElement attribute returns the empty string when the animation runs on an element");
var t2 = async_test("Check if the pseudoElement attribute returns the name (beginning with two colons) of the CSS pseudo-element when the animation runs");
var testDiv1 = document.getElementById('testDiv1');
var testDiv2 = document.getElementById('testDiv2');
testDiv1.addEventListener('animationstart', function(event) {
t1.step(function() {
assert_equals(event.pseudoElement, "", "the pseudoElement value");
});
t1.done();
}, false);
testDiv2.addEventListener('animationstart', function(event) {
t2.step(function() {
assert_equals(event.pseudoElement, "::after", "the pseudoElement value");
});
t2.done();
}, false);
</script>
</body></html>