blob: 0fb8850c4a7eb37c336b34e595be43356a90b4f5 (
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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
|
<!DOCTYPE html>
<html>
<head>
<title>Testing the interpolation of new font-style values introduced in CSS Fonts level 4</title>
<meta name="timeout" content="long">
<link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-style-prop" />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
@keyframes fontStyleAnimation {
from { font-style: oblique -12deg; }
to { font-style: oblique 12deg; }
}
#animation-test.animate {
animation: fontStyleAnimation 1s infinite alternate;
}
#transition-test {
font-style: oblique -12deg;
transition-property: font-style;
transition-duration: 10s;
}
#transition-test.animate {
font-style: oblique 12deg;
}
</style>
</head>
<body>
<div style="font-family: serif;">
<div id="animation-test">Animation test</div>
<div id="transition-test">Transition test</div>
</div>
<script>
async_test(function (test) {
var animationElement = document.getElementById("animation-test");
// Verify starting value
assert_equals(window.getComputedStyle(animationElement).fontStyle, "normal", "Font style before animation");
// Start animation
animationElement.classList.add("animate");
var waitForAnimationStep = test.step_func(function() {
var computedFontStyle = window.getComputedStyle(animationElement).fontStyle;
if (computedFontStyle != "normal" &&
computedFontStyle != "oblique -12deg" &&
computedFontStyle != "oblique 12deg") {
test.done();
}
else {
window.requestAnimationFrame(waitForAnimationStep);
}
});
waitForAnimationStep();
}, "font-style animation");
async_test(function (test) {
var transitionElement = document.getElementById("transition-test");
// Verify starting value
assert_equals(window.getComputedStyle(transitionElement).fontStyle, "oblique -12deg", "Font style before transition");
// Start transition
transitionElement.classList.add("animate");
var waitForTransitionStep = test.step_func(function() {
var computedFontStyle = window.getComputedStyle(transitionElement).fontStyle;
if (computedFontStyle != "normal" &&
computedFontStyle != "oblique -12deg" &&
computedFontStyle != "oblique 12deg") {
test.done();
}
else {
window.requestAnimationFrame(waitForTransitionStep);
}
});
waitForTransitionStep();
}, "font-style transition");
</script>
</body>
</html>
|
