8e6bd6ef2a93f1ac8bab10dbc14be343189909c4
[WebKit-https.git] / LayoutTests / animations / font-variations / font-style.html
1 <!DOCTYPE html><!-- webkit-test-runner [ enableCSSAnimationsAndCSSTransitionsBackedByWebAnimations=true ] -->
2 <html>
3 <head>
4 <script src="../resources/animation-test-helpers.js"></script>
5 <style>
6
7 @keyframes TheAnimation {
8     from {
9         font-style: oblique 21deg;
10     }
11     to {
12         font-style: oblique 89deg;
13     }
14 }
15
16 #box {
17     font-size: 100px;
18     animation-duration: 3s;
19     animation-timing-function: linear;
20 }
21 </style>
22 </head>
23 <body>
24 <div id="box">Hello</div>
25 <div id="result"></div>
26 <script>
27 var expectedValues = [
28     // [animation-name, time, element-id, property, expected-value, tolerance]
29     ["TheAnimation", 0.5, "box", "font-style", "oblique 32.3666", 10],
30     ["TheAnimation", 1.0, "box", "font-style", "oblique 43.6666", 10],
31     ["TheAnimation", 2.0, "box", "font-style", "oblique 66.3333", 10],
32 ];
33
34 var promises = [];
35
36 document.fonts.forEach(function(f) {
37     promises.push(f.loaded);
38 });
39
40 Promise.all(promises).then(function() {
41     document.getElementById("box").style.animationName = "TheAnimation";
42     runAnimationTest(expectedValues, undefined, undefined, undefined, false, undefined);
43 });
44 </script>
45 </body>
46 </html>