mirror of
https://github.com/servo/servo.git
synced 2025-06-28 19:13:41 +01:00
89 lines
3 KiB
HTML
89 lines
3 KiB
HTML
<!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>
|