[Web Animations] Expose Web Animations CSS integration as an experimental feature
[WebKit-https.git] / LayoutTests / transitions / cubic-bezier-overflow-svg-length.html
1 <!doctype html><!-- webkit-test-runner [ enableWebAnimationsCSSIntegration=true ] -->
2 <html>
3   <head>
4     <title>cubic-bezier value overflow: SVG Lengths</title>
5     <style>
6       .box {
7         -webkit-transition: stroke-width 1s linear;
8         stroke-width: 1;
9         stroke: black;
10         fill: blue;
11       }
12       .animating > .box {
13         stroke-width: 50;
14       }
15     </style>
16     <script src="resources/transition-test-helpers.js"></script>
17     <script>
18       const expectedValues = [
19         // [time, element-id, property, expected-value, tolerance]
20         [0.50, "box1", "stroke-width", 61, 4],
21         [0.95, "box1", "stroke-width", 55, 4],
22         [0.10, "box2", "stroke-width", -6, 4],
23         [0.50, "box2", "stroke-width", 19, 4],
24         [0.95, "box2", "stroke-width", 54, 4],
25         [0.10, "box3", "stroke-width", -12, 4],
26         [0.50, "box3", "stroke-width", -53, 4],
27         [0.15, "box4", "stroke-width", 64, 4],
28         [0.50, "box4", "stroke-width", 26, 4],
29         [0.80, "box4", "stroke-width", -11, 4],
30       ];
31
32       function setupTest() {
33         document.getElementById('container').setAttribute('class', 'animating');
34       }
35
36       runTransitionTest(expectedValues, setupTest, usePauseAPI);
37     </script>
38   </head>
39   <body>
40     <svg id="container">
41       <rect class="box" id="box1" width="100" height="100" style="-webkit-transition-timing-function: cubic-bezier(0.3, 1.5, 0.8, 1.5);" />
42       <rect class="box" id="box2" width="100" height="100" y="110" style="-webkit-transition-timing-function: cubic-bezier(0.4, -0.8, 0.7, 1.7);" />
43       <rect class="box" id="box3" width="100" height="100" y="220" style="-webkit-transition-timing-function: cubic-bezier(0.7, -2, 1, -1.5);" />
44       <rect class="box" id="box4" width="100" height="100" y="330" style="-webkit-transition-timing-function: cubic-bezier(0, 4, 1, -3);" />
45     </svg>
46     <div id="result"></div>
47   </body>
48 </html>