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
|
<!DOCTYPE html>
<html>
<head>
<title>Testing the interpolation of new font-weight values introduced in CSS Fonts level 4</title>
<link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-weight-prop" />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
@keyframes fontWeightAnimation {
from { font-weight: 100; }
to { font-weight: 900; }
}
#animation-test.animate {
animation: fontWeightAnimation 1s infinite alternate;
}
#transition-test {
font-weight: 100;
transition-property: font-weight;
transition-duration: 10s;
}
#transition-test.animate {
font-weight: 900;
}
</style>
</head>
<body>
<div style="font-family: 'CSSTest Weights Full';">
<div id="animation-test">A</div>
<div id="transition-test">A</div>
</div>
<script>
async_test(function (test) {
var animationElement = document.getElementById("animation-test");
// Verify starting value
assert_equals(window.getComputedStyle(animationElement).fontWeight, "400", "Font weight before animation");
// Start animation
animationElement.classList.add("animate");
var waitForAnimationStep = test.step_func(function() {
var computedFontWeight = window.getComputedStyle(animationElement).fontWeight;
if (computedFontWeight[1] != "0" || computedFontWeight[2] != 0) { // the value should eventually not be a multiple of 100
test.done();
}
else {
window.requestAnimationFrame(waitForAnimationStep);
}
});
waitForAnimationStep();
}, "font-weight animation");
async_test(function (test) {
var transitionElement = document.getElementById("transition-test");
// Verify starting value
assert_equals(window.getComputedStyle(transitionElement).fontWeight, "100", "Font weight before transition");
// Start transition
transitionElement.classList.add("animate");
var waitForTransitionStep = test.step_func(function() {
var computedFontWeight = window.getComputedStyle(transitionElement).fontWeight;
if (computedFontWeight[1] != "0" || computedFontWeight[2] != 0) { // the value should eventually not be a multiple of 100
test.done();
}
else {
window.requestAnimationFrame(waitForTransitionStep);
}
});
waitForTransitionStep();
}, "font-weight transition");
</script>
</body>
</html>
|
