Header parsing for experimental and internal debug features
[WebKit-https.git] / LayoutTests / animations / font-variations / font-variation-settings-order.html
1 <!DOCTYPE html><!-- webkit-test-runner [ experimental:WebAnimationsCSSIntegrationEnabled=true ] -->
2 <html>
3 <head>
4 <script src="../resources/animation-test-helpers.js"></script>
5 <style>
6 @font-face {
7     font-family: "Boxis";
8     src: url("resources/Boxis-VF.ttf");
9 }
10
11 @keyframes TheAnimation {
12     from {
13         font-variation-settings: "hght" 400, "wdth" 500;
14     }
15     to {
16         font-variation-settings: "wdth" 900, "hght" 800;
17     }
18 }
19
20 #box {
21     font: 100px "Boxis";
22     animation-duration: 3s;
23     animation-timing-function: linear;
24 }
25 </style>
26 </head>
27 <body>
28 <div id="box">Hello</div>
29 <div id="result"></div>
30 <script>
31 var expectedValues = [
32     // [animation-name, time, element-id, property, expected-value, tolerance]
33     ["TheAnimation", 0.5, "box", "font-variation-settings", "\"wdth\" 566.6666, \"hght\" 466.6666", 5],
34     ["TheAnimation", 1.0, "box", "font-variation-settings", "\"wdth\" 633.3333, \"hght\" 533.3333", 5],
35     ["TheAnimation", 2.0, "box", "font-variation-settings", "\"wdth\" 766.6666, \"hght\" 666.6666", 5],
36 ];
37
38 var promises = [];
39
40 document.fonts.forEach(function(f) {
41     promises.push(f.loaded);
42 });
43
44 Promise.all(promises).then(function() {
45     document.getElementById("box").style.animationName = "TheAnimation";
46     runAnimationTest(expectedValues, undefined, undefined, undefined, false, undefined);
47 });
48 </script>
49 </body>
50 </html>