2020-09-17 12:39:28 +00:00
|
|
|
|
2011-08-25 19:17:51 +00:00
|
|
|
<html>
|
|
|
|
<head>
|
|
|
|
<style>
|
|
|
|
|
|
|
|
svg * {
|
2013-08-06 15:54:23 +00:00
|
|
|
-webkit-transition-property: fill, stroke, fill-opacity, stroke-opacity, stroke-width, stroke-dasharray, stroke-dashoffset, stroke-miterlimit, kerning, baseline-shift, flood-color, flood-opacity, stop-color, stop-opacity, lighting-color;
|
2011-08-25 19:17:51 +00:00
|
|
|
-webkit-transition-duration: 2s;
|
|
|
|
-webkit-transition-timing-function: linear;
|
|
|
|
}
|
|
|
|
|
|
|
|
#rect1 {
|
|
|
|
fill: rgb(0, 0, 255);
|
|
|
|
stroke: red;
|
|
|
|
fill-opacity: 1;
|
|
|
|
stroke-opacity: 1;
|
|
|
|
stroke-width: 2;
|
|
|
|
stroke-dashoffset: 0;
|
2013-08-06 15:54:23 +00:00
|
|
|
stroke-dasharray: 10 10;
|
2011-08-25 19:17:51 +00:00
|
|
|
}
|
|
|
|
.animating #rect1 {
|
|
|
|
fill: rgb(0, 255, 0);
|
|
|
|
stroke: black;
|
|
|
|
fill-opacity: 0.2;
|
|
|
|
stroke-opacity: 0.2;
|
|
|
|
stroke-width: 4;
|
|
|
|
stroke-dashoffset: 10;
|
2013-08-06 15:54:23 +00:00
|
|
|
stroke-dasharray: 20 20;
|
2011-08-25 19:17:51 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
#rect2 {
|
|
|
|
fill: rgb(0, 0, 255);
|
|
|
|
stroke: rgb(255, 0, 0);
|
2013-08-06 15:54:23 +00:00
|
|
|
stroke-dasharray: 10;
|
2011-08-25 19:17:51 +00:00
|
|
|
}
|
|
|
|
.animating #rect2 {
|
|
|
|
fill: rgb(0, 255, 0);
|
|
|
|
stroke: rgb(0, 0, 0);
|
2013-08-06 15:54:23 +00:00
|
|
|
stroke-dasharray: 20 20;
|
2011-08-25 19:17:51 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
#rect3 {
|
|
|
|
fill: url(#gradient1);
|
|
|
|
}
|
|
|
|
.animating #rect3 {
|
|
|
|
fill: url(#gradient2);
|
|
|
|
}
|
|
|
|
|
|
|
|
#stop1 {
|
|
|
|
stop-color: rgb(255,0,0);
|
|
|
|
stop-opacity: 1;
|
|
|
|
}
|
|
|
|
.animating #stop1 {
|
|
|
|
stop-color: rgb(0,255,0);
|
|
|
|
stop-opacity: 0.5;
|
|
|
|
}
|
|
|
|
|
|
|
|
#rect4 {
|
|
|
|
stroke: red;
|
|
|
|
stroke-width: 1px;
|
|
|
|
}
|
|
|
|
.animating #rect4 {
|
|
|
|
stroke-width: 4mm;
|
|
|
|
}
|
|
|
|
|
|
|
|
#rect5 {
|
|
|
|
stroke: black;
|
|
|
|
stroke-width: 0;
|
2013-08-06 15:54:23 +00:00
|
|
|
stroke-dasharray: none;
|
2011-08-25 19:17:51 +00:00
|
|
|
}
|
|
|
|
.animating #rect5 {
|
|
|
|
stroke-width: 10px;
|
2013-08-06 15:54:23 +00:00
|
|
|
stroke-dasharray: 20;
|
2011-08-25 19:17:51 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
#rect6 {
|
|
|
|
stroke: black;
|
|
|
|
stroke-width: 10%;
|
2013-08-06 15:54:23 +00:00
|
|
|
stroke-dasharray: 20 15;
|
2011-08-25 19:17:51 +00:00
|
|
|
}
|
|
|
|
.animating #rect6 {
|
|
|
|
stroke-width: 20%;
|
2013-08-06 15:54:23 +00:00
|
|
|
stroke-dasharray: 10 15 20;
|
2011-08-25 19:17:51 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
#rect7 {
|
|
|
|
fill: url(#invalid) black;
|
2013-08-06 15:54:23 +00:00
|
|
|
stroke-dasharray: 20;
|
2011-08-25 19:17:51 +00:00
|
|
|
}
|
|
|
|
.animating #rect7 {
|
|
|
|
fill: url(#invalid) blue;
|
2013-08-06 15:54:23 +00:00
|
|
|
stroke-dasharray: none;
|
2011-08-25 19:17:51 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
#polyline1 {
|
|
|
|
fill: none;
|
|
|
|
stroke: black;
|
|
|
|
stroke-width: 4;
|
|
|
|
stroke-miterlimit: 12;
|
|
|
|
}
|
|
|
|
.animating #polyline1 {
|
|
|
|
stroke-miterlimit: 10;
|
|
|
|
}
|
|
|
|
|
|
|
|
#text1 {
|
|
|
|
kerning: 0;
|
|
|
|
baseline-shift: 0;
|
|
|
|
}
|
|
|
|
.animating #text1 {
|
|
|
|
kerning: 10px;
|
|
|
|
baseline-shift: 10px;
|
|
|
|
}
|
|
|
|
|
|
|
|
#flood1 {
|
|
|
|
flood-opacity: 1;
|
|
|
|
flood-color: rgb(255, 0, 0);
|
|
|
|
}
|
|
|
|
.animating #flood1 {
|
|
|
|
flood-opacity: 0;
|
|
|
|
flood-color: rgb(0, 255, 0);
|
|
|
|
}
|
|
|
|
|
|
|
|
#light1 {
|
|
|
|
lighting-color: rgb(255, 0, 0);
|
|
|
|
}
|
|
|
|
.animating #light1 {
|
|
|
|
lighting-color: rgb(0, 255, 0);
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
<script src="resources/transition-test-helpers.js"></script>
|
|
|
|
<script>
|
|
|
|
const expectedValues = [
|
|
|
|
// [time, element-id, property, expected-value, tolerance]
|
|
|
|
[1, "rect1", "fill-opacity", 0.6, 0.1], // 1 -> 0.2
|
|
|
|
[1, "rect1", "stroke-width", 3, 0.5], // 2 -> 4
|
|
|
|
[1, "rect1", "stroke-opacity", 0.6, 0.1], // 1 -> 0.2
|
2013-08-06 15:54:23 +00:00
|
|
|
[1, "rect1", "stroke-dasharray", [15, 15], 1], // 10 -> 20
|
2011-08-25 19:17:51 +00:00
|
|
|
[1, "rect1", "stroke-dashoffset", 5, 1], // 0 -> 10
|
2013-08-06 15:54:23 +00:00
|
|
|
[1, "rect2", "stroke-dasharray", [15, 15], 1], // 10 -> 20
|
2011-08-25 19:17:51 +00:00
|
|
|
[1, "rect4", "stroke-width", 8, 1], // 1px to 4mm
|
|
|
|
[1, "rect5", "stroke-width", 5, 1], // 0 to 10px
|
2013-08-06 15:54:23 +00:00
|
|
|
[1, "rect5", "stroke-dasharray", [20], 1], // 20 at half time
|
2011-08-25 19:17:51 +00:00
|
|
|
[1, "rect6", "stroke-width", 15, 2], // 10% to 20%
|
2013-08-06 15:54:23 +00:00
|
|
|
[1, "rect6", "stroke-dasharray", [15, 15, 20, 12.5, 17.5, 17.5], 1], // 20 -> 10, 15 -> 15, 20 -> 20, 15 -> 10, 20 -> 15, 15 -> 20
|
|
|
|
[1, "rect7", "stroke-dasharray", "none", 1], // none at half time
|
2011-08-25 19:17:51 +00:00
|
|
|
[1, "stop1", "stop-color", [127, 127, 0], 20], // rgb(255,0,0) -> rgb(0, 255, 0)
|
|
|
|
[1, "stop1", "stop-opacity", 0.75, 0.1], // 1 -> 0.5
|
|
|
|
[1, "polyline1", "stroke-miterlimit", 11, 0.5], // 12 -> 10 (this is an abrupt change in rendering even though the property animation is smooth)
|
|
|
|
[1, "text1", "kerning", 5, 1], // 0 -> 10px
|
|
|
|
[1, "text1", "baseline-shift", 5, 1], // 0 -> 10px
|
|
|
|
[1, "flood1", "flood-opacity", 0.5, 0.1], // 1 -> 0
|
|
|
|
[1, "flood1", "flood-color", [127, 127, 0], 20], // rgb(0, 255, 0) -> rgb(255, 0, 0)
|
|
|
|
[1, "light1", "lighting-color", [127, 127, 0], 20], // rgb(255, 0, 0) -> rgb(0, 255, 0)
|
|
|
|
];
|
|
|
|
|
|
|
|
function setupTest()
|
|
|
|
{
|
|
|
|
document.getElementById('container').className = 'animating';
|
|
|
|
}
|
|
|
|
|
|
|
|
runTransitionTest(expectedValues, setupTest, usePauseAPI);
|
|
|
|
</script>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
|
|
|
|
<div id="container">
|
|
|
|
<svg viewBox="0 0 160 120" width="400px" height="300px">
|
|
|
|
<defs>
|
|
|
|
<linearGradient id="gradient1">
|
|
|
|
<stop id="stop1" offset="5%"/>
|
|
|
|
<stop offset="95%" stop-color="rgb(0,0,255)" />
|
|
|
|
</linearGradient>
|
|
|
|
<linearGradient id="gradient2">
|
|
|
|
<stop offset="10%" stop-color="rgb(0,255,255)" />
|
|
|
|
<stop offset="95%" stop-color="rgb(255, 0,255)" />
|
|
|
|
</linearGradient>
|
|
|
|
<filter id="filter1">
|
|
|
|
<feFlood id="flood1"/>
|
|
|
|
<feDiffuseLighting id="light1"/>
|
|
|
|
</filter>
|
|
|
|
</defs>
|
|
|
|
<rect id="rect1" x="10" y="10" width="30" height="30"/>
|
|
|
|
<rect id="rect2" x="90" y="10" width="30" height="30"/>
|
|
|
|
<rect id="rect3" x="90" y="60" width="30" height="20"/>
|
|
|
|
<rect id="rect4" x="10" y="100" width="10" height="10"/>
|
|
|
|
<rect id="rect5" x="50" y="100" width="10" height="10"/>
|
|
|
|
<rect id="rect6" x="90" y="100" width="10" height="10"/>
|
|
|
|
<rect id="rect7" x="130" y="100" width="10" height="10"/>
|
|
|
|
<polyline id="polyline1" points="10,70 60,75 10,80"/>
|
|
|
|
<text id="text1" x="100" y="60">Example</text>
|
|
|
|
</svg>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div id="result"></div>
|
|
|
|
|
|
|
|
</body>
|
2013-08-06 15:54:23 +00:00
|
|
|
</html>
|