Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-fonts/variations/font-weight-interpolation.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<html>
<head>
<title>Testing the interpolation of new font-weight values introduced in CSS Fonts level 4</title>
<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>