mirror of
https://github.com/servo/servo.git
synced 2025-06-26 01:54:33 +01:00
54 lines
No EOL
1.9 KiB
HTML
54 lines
No EOL
1.9 KiB
HTML
<!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> |