mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-11-12 22:28:59 +02:00
20e6065a94
Automatic update from web-platform-tests Add <meta name=timeout content=long> to WPT in SlowTests This is the 2nd step in the process of banning external/wpt from SlowTests. After cleaning up the wtp entries we're marking them as slow by using wpt idioms, i.e.: 1) Add <meta name="timeout" content="long"> to .html files 2) Add // META: timeout=long to .js files Bug: 765026 Change-Id: Iaf051104f419524916e19324996cc36ee37d5426 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1497005 Commit-Queue: Sergio Villar <svillar@igalia.com> Reviewed-by: Andy Paicu <andypaicu@chromium.org> Reviewed-by: Robert Ma <robertma@chromium.org> Cr-Commit-Position: refs/heads/master@{#643402} -- wpt-commits: 7287608f90f6b9530635d10086fd2ab386faab38 wpt-pr: 15630
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>
|