4 <title>cubic-bezier value overflow: SVG Lengths
</title>
7 -webkit-transition: stroke-dashoffset
1s linear;
9 stroke-dasharray:
15,
15;
15 -webkit-transition-timing-function: cubic-bezier(
0.3,
1.5,
0.8,
1.5);
18 -webkit-transition-timing-function: cubic-bezier(
0.4, -
0.8,
0.7,
1.7);
21 -webkit-transition-timing-function: cubic-bezier(
0.7, -
2,
1, -
1.5);
24 -webkit-transition-timing-function: cubic-bezier(
0,
4,
1, -
3);
27 stroke-dashoffset:
50;
30 <script src=
"../animations/resources/animation-test-helpers.js"></script>
32 const expectedValues
= [
33 // [time, element-id, property, expected-value, tolerance]
34 [0.50, "box1", "stroke-dashoffset", 61, 4],
35 [0.95, "box1", "stroke-dashoffset", 55, 4],
36 [0.10, "box2", "stroke-dashoffset", -6, 4],
37 [0.50, "box2", "stroke-dashoffset", 19, 4],
38 [0.95, "box2", "stroke-dashoffset", 54, 4],
39 [0.10, "box3", "stroke-dashoffset", -12, 4],
40 [0.50, "box3", "stroke-dashoffset", -53, 4],
41 [0.15, "box4", "stroke-dashoffset", 64, 4],
42 [0.50, "box4", "stroke-dashoffset", 26, 4],
43 [0.80, "box4", "stroke-dashoffset", -11, 4],
46 function setupTest() {
47 document
.getElementById('container').setAttribute('class', 'animating');
50 runTransitionTest(expectedValues
, setupTest
);
55 <path class=
"box" id=
"box1" d=
"M5,10 l0,100 l100,0 l0,-100 l-100,0" />
56 <path class=
"box" id=
"box2" d=
"M5,130 l0,100 l100,0 l0,-100 l-100,0" />
57 <path class=
"box" id=
"box3" d=
"M5,250 l0,100 l100,0 l0,-100 l-100,0" />
58 <path class=
"box" id=
"box4" d=
"M5,370 l0,100 l100,0 l0,-100 l-100,0" />
60 <div id=
"result"></div>