blob: c6e345e2d406f340fff99ec48cc545f9f66c4d7a (
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
|
<!DOCTYPE html>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<style>
@keyframes anim {
0% { background-color: red; }
50% { left: 50px; background-color: green; }
100% { background-color: red; }
}
#target {
width: 100px;
height: 100px;
position: relative;
}
</style>
<div id="target"></div>
<script>
test(function() {
var rules = document.styleSheets[0].rules;
for (var i = 0; i < rules.length; i++) {
if (rules[i].type == CSSRule.KEYFRAMES_RULE) {
rules[i].appendRule('50% { left: 0px; }');
assert_equals(rules[i].cssRules.length, 4);
assert_equals(rules[i].cssRules[0].cssText, '0% { background-color: red; }');
assert_equals(rules[i].cssRules[1].cssText, '50% { left: 50px; background-color: green; }');
assert_equals(rules[i].cssRules[2].cssText, '100% { background-color: red; }');
assert_equals(rules[i].cssRules[3].cssText, '50% { left: 0px; }');
}
}
target.style.animation = 'anim 2s -1s paused';
assert_equals(getComputedStyle(target).backgroundColor, 'rgb(0, 128, 0)', 'background color');
assert_equals(getComputedStyle(target).left, '0px', 'left offset');
}, "Check that duplicate keyframe offsets are correctly merged");
</script>
|
