| <html> |
| <head> |
| <style> |
| |
| svg * { |
| -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; |
| -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; |
| stroke-dasharray: 10 10; |
| } |
| .animating #rect1 { |
| fill: rgb(0, 255, 0); |
| stroke: black; |
| fill-opacity: 0.2; |
| stroke-opacity: 0.2; |
| stroke-width: 4; |
| stroke-dashoffset: 10; |
| stroke-dasharray: 20 20; |
| } |
| |
| #rect2 { |
| fill: rgb(0, 0, 255); |
| stroke: rgb(255, 0, 0); |
| stroke-dasharray: 10; |
| } |
| .animating #rect2 { |
| fill: rgb(0, 255, 0); |
| stroke: rgb(0, 0, 0); |
| stroke-dasharray: 20 20; |
| } |
| |
| #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; |
| stroke-dasharray: none; |
| } |
| .animating #rect5 { |
| stroke-width: 10px; |
| stroke-dasharray: 20; |
| } |
| |
| #rect6 { |
| stroke: black; |
| stroke-width: 10%; |
| stroke-dasharray: 20 15; |
| } |
| .animating #rect6 { |
| stroke-width: 20%; |
| stroke-dasharray: 10 15 20; |
| } |
| |
| #rect7 { |
| fill: url(#invalid) black; |
| stroke-dasharray: 20; |
| } |
| .animating #rect7 { |
| fill: url(#invalid) blue; |
| stroke-dasharray: none; |
| } |
| |
| #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 |
| [1, "rect1", "stroke-dasharray", [15, 15], 1], // 10 -> 20 |
| [1, "rect1", "stroke-dashoffset", 5, 1], // 0 -> 10 |
| [1, "rect2", "stroke-dasharray", [15, 15], 1], // 10 -> 20 |
| [1, "rect4", "stroke-width", 8, 1], // 1px to 4mm |
| [1, "rect5", "stroke-width", 5, 1], // 0 to 10px |
| [1, "rect5", "stroke-dasharray", [20], 1], // 20 at half time |
| [1, "rect6", "stroke-width", 15, 2], // 10% to 20% |
| [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 |
| [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> |
| </html> |
