[Web Animations] Expose Web Animations CSS integration as an experimental feature
[WebKit-https.git] / LayoutTests / animations / font-variations / font-stretch.html
1 <!DOCTYPE html><!-- webkit-test-runner [ enableWebAnimationsCSSIntegration=true ] -->
2 <html>
3 <head>
4 <script src="../resources/animation-test-helpers.js"></script>
5 <style>
6
7 @keyframes TheAnimation {
8     from {
9         font-stretch: 151%;
10     }
11     to {
12         font-stretch: 199%;
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-stretch", "159", 1],
30     ["TheAnimation", 1.0, "box", "font-stretch", "167", 1],
31     ["TheAnimation", 2.0, "box", "font-stretch", "183", 1],
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>