Commit 7a6abf6b authored by krit@webkit.org's avatar krit@webkit.org

2011-01-27 Dirk Schulze <krit@webkit.org>

        Reviewed by Nikolas Zimmermann.

        SVG animation of Paths with segments of different coordinate modes on begin and end
        https://bugs.webkit.org/show_bug.cgi?id=52984

        Added tests to check the correct behavior on path animations, where the coordinate modes
        of the start path differs from the one on the end path.

        * svg/animations/animate-path-animation-Cc-Ss-expected.txt: Added.
        * svg/animations/animate-path-animation-Cc-Ss.html: Added.
        * svg/animations/animate-path-animation-Ll-Vv-Hh-expected.txt: Added.
        * svg/animations/animate-path-animation-Ll-Vv-Hh.html: Added.
        * svg/animations/animate-path-animation-Qq-Tt-expected.txt: Added.
        * svg/animations/animate-path-animation-Qq-Tt.html: Added.
        * svg/animations/animate-path-animation-cC-sS-inverse-expected.txt: Added.
        * svg/animations/animate-path-animation-cC-sS-inverse.html: Added.
        * svg/animations/animate-path-animation-lL-vV-hH-inverse-expected.txt: Added.
        * svg/animations/animate-path-animation-lL-vV-hH-inverse.html: Added.
        * svg/animations/animate-path-animation-qQ-tT-inverse-expected.txt: Added.
        * svg/animations/animate-path-animation-qQ-tT-inverse.html: Added.
        * svg/animations/animate-path-nested-transforms.html: Cleanup.
        * svg/animations/animate-text-nested-transforms.html: Cleanup.
        * svg/animations/resources/SVGAnimationTestCase.js:
        (shouldBeCloseEnough): For debug output of values with tolerance level.
        (startTest):
        (sampleAnimation):
        * svg/animations/script-tests/animate-path-animation-Cc-Ss.js: Added.
        (sample1):
        (sample2):
        (sample3):
        (sample4):
        (executeTest):
        * svg/animations/script-tests/animate-path-animation-Ll-Vv-Hh.js: Added.
        (sample1):
        (sample2):
        (sample3):
        (sample4):
        (executeTest):
        * svg/animations/script-tests/animate-path-animation-Qq-Tt.js: Added.
        (sample1):
        (sample2):
        (sample3):
        (sample4):
        (executeTest):
        * svg/animations/script-tests/animate-path-animation-cC-sS-inverse.js: Added.
        (sample1):
        (sample2):
        (sample3):
        (sample4):
        (executeTest):
        * svg/animations/script-tests/animate-path-animation-lL-vV-hH-inverse.js: Added.
        (sample1):
        (sample2):
        (sample3):
        (sample4):
        (executeTest):
        * svg/animations/script-tests/animate-path-animation-qQ-tT-inverse.js: Added.
        (sample1):
        (sample2):
        (sample3):
        (sample4):
        (executeTest):
2011-01-27  Dirk Schulze  <krit@webkit.org>

        Reviewed by Nikolas Zimmermann.

        SVG animation of Paths with segments of different coordinate modes on begin and end
        https://bugs.webkit.org/show_bug.cgi?id=52984

        At the moment we just support SVG path animations, if the number of segments on the given start path
        is the same as the number of segments on the given end path. But a segment on a given position must be identical
        on both paths as well. Not only the segment type, also the coordinate mode of the segments must be identical.
        If MoveToRel is on the second position on the start path a MoveToRel must be on the second position
        of the end path too. According to the SVG spec, at least the coordinate mode can differ. Means, if we have MoveToRel
        in the start path, we can use MoveToAbs on the same position in the end path.

        This patch fixes the blending code to follow the spec here. It was necessary to track the current position of
        both paths, transform coordinates to the same coordinate mode and transform the resulting animation coordinate back
        to the coordinate mode of either the start or the end path. Which mode is taken depends on the progress of the
        animation.

        Tests: svg/animations/animate-path-animation-Cc-Ss.html
               svg/animations/animate-path-animation-Ll-Vv-Hh.html
               svg/animations/animate-path-animation-Qq-Tt.html
               svg/animations/animate-path-animation-cC-sS-inverse.html
               svg/animations/animate-path-animation-lL-vV-hH-inverse.html
               svg/animations/animate-path-animation-qQ-tT-inverse.html

        * svg/SVGPathBlender.cpp:
        (WebCore::blendFloatPoint):
        (WebCore::blendAnimatedFloat):
        (WebCore::SVGPathBlender::blendAnimatedDimensionalFloat):
        (WebCore::SVGPathBlender::blendAnimatedFloatPoint):
        (WebCore::SVGPathBlender::blendMoveToSegment):
        (WebCore::SVGPathBlender::blendLineToSegment):
        (WebCore::SVGPathBlender::blendLineToHorizontalSegment):
        (WebCore::SVGPathBlender::blendLineToVerticalSegment):
        (WebCore::SVGPathBlender::blendCurveToCubicSegment):
        (WebCore::SVGPathBlender::blendCurveToCubicSmoothSegment):
        (WebCore::SVGPathBlender::blendCurveToQuadraticSegment):
        (WebCore::SVGPathBlender::blendCurveToQuadraticSmoothSegment):
        (WebCore::SVGPathBlender::blendArcToSegment):
        (WebCore::coordinateModeOfCommand):
        (WebCore::isSegmentEqual):
        (WebCore::SVGPathBlender::blendAnimatedPath):
        (WebCore::SVGPathBlender::cleanup):
        * svg/SVGPathBlender.h:


git-svn-id: http://svn.webkit.org/repository/webkit/trunk@76830 268f45cc-cd09-0410-ab3c-d52691b4dbfc
parent 6eb9e918
2011-01-27 Dirk Schulze <krit@webkit.org>
Reviewed by Nikolas Zimmermann.
SVG animation of Paths with segments of different coordinate modes on begin and end
https://bugs.webkit.org/show_bug.cgi?id=52984
Added tests to check the correct behavior on path animations, where the coordinate modes
of the start path differs from the one on the end path.
* svg/animations/animate-path-animation-Cc-Ss-expected.txt: Added.
* svg/animations/animate-path-animation-Cc-Ss.html: Added.
* svg/animations/animate-path-animation-Ll-Vv-Hh-expected.txt: Added.
* svg/animations/animate-path-animation-Ll-Vv-Hh.html: Added.
* svg/animations/animate-path-animation-Qq-Tt-expected.txt: Added.
* svg/animations/animate-path-animation-Qq-Tt.html: Added.
* svg/animations/animate-path-animation-cC-sS-inverse-expected.txt: Added.
* svg/animations/animate-path-animation-cC-sS-inverse.html: Added.
* svg/animations/animate-path-animation-lL-vV-hH-inverse-expected.txt: Added.
* svg/animations/animate-path-animation-lL-vV-hH-inverse.html: Added.
* svg/animations/animate-path-animation-qQ-tT-inverse-expected.txt: Added.
* svg/animations/animate-path-animation-qQ-tT-inverse.html: Added.
* svg/animations/animate-path-nested-transforms.html: Cleanup.
* svg/animations/animate-text-nested-transforms.html: Cleanup.
* svg/animations/resources/SVGAnimationTestCase.js:
(shouldBeCloseEnough): For debug output of values with tolerance level.
(startTest):
(sampleAnimation):
* svg/animations/script-tests/animate-path-animation-Cc-Ss.js: Added.
(sample1):
(sample2):
(sample3):
(sample4):
(executeTest):
* svg/animations/script-tests/animate-path-animation-Ll-Vv-Hh.js: Added.
(sample1):
(sample2):
(sample3):
(sample4):
(executeTest):
* svg/animations/script-tests/animate-path-animation-Qq-Tt.js: Added.
(sample1):
(sample2):
(sample3):
(sample4):
(executeTest):
* svg/animations/script-tests/animate-path-animation-cC-sS-inverse.js: Added.
(sample1):
(sample2):
(sample3):
(sample4):
(executeTest):
* svg/animations/script-tests/animate-path-animation-lL-vV-hH-inverse.js: Added.
(sample1):
(sample2):
(sample3):
(sample4):
(executeTest):
* svg/animations/script-tests/animate-path-animation-qQ-tT-inverse.js: Added.
(sample1):
(sample2):
(sample3):
(sample4):
(executeTest):
2011-01-27 Cris Neckar <cdn@chromium.org>
Reviewed by Dimitri Glazkov.
SVG 1.1 dynamic animation tests
Test path animation where coordinate modes of start and end differ. You should see PASS messages
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
PASS path.pathSegList.getItem(0).pathSegTypeAsLetter is 'M'
PASS path.pathSegList.getItem(0).x is -20
PASS path.pathSegList.getItem(0).y is -20
PASS path.pathSegList.getItem(1).pathSegTypeAsLetter is 'C'
PASS path.pathSegList.getItem(1).x is 20
PASS path.pathSegList.getItem(1).y is 20
PASS path.pathSegList.getItem(1).x1 is 20
PASS path.pathSegList.getItem(1).y1 is -20
PASS path.pathSegList.getItem(1).x2 is 20
PASS path.pathSegList.getItem(1).y2 is -20
PASS path.pathSegList.getItem(2).pathSegTypeAsLetter is 'S'
PASS path.pathSegList.getItem(2).x is -20
PASS path.pathSegList.getItem(2).y is 20
PASS path.pathSegList.getItem(2).x2 is 20
PASS path.pathSegList.getItem(2).y2 is 40
PASS path.pathSegList.getItem(0).pathSegTypeAsLetter is 'M'
PASS path.pathSegList.getItem(0).x is -20
PASS path.pathSegList.getItem(0).y is -20
PASS path.pathSegList.getItem(1).pathSegTypeAsLetter is 'C'
PASS path.pathSegList.getItem(1).x is 20
PASS path.pathSegList.getItem(1).y is 20
PASS path.pathSegList.getItem(1).x1 is 10
PASS path.pathSegList.getItem(1).y1 is -10
PASS path.pathSegList.getItem(1).x2 is 10
PASS path.pathSegList.getItem(1).y2 is -10
PASS path.pathSegList.getItem(2).pathSegTypeAsLetter is 'S'
PASS path.pathSegList.getItem(2).x is -10
PASS path.pathSegList.getItem(2).y is 10
PASS path.pathSegList.getItem(2).x2 is 30
PASS path.pathSegList.getItem(2).y2 is 35
PASS path.pathSegList.getItem(0).pathSegTypeAsLetter is 'M'
PASS path.pathSegList.getItem(0).x is -20
PASS path.pathSegList.getItem(0).y is -20
PASS path.pathSegList.getItem(1).pathSegTypeAsLetter is 'c'
PASS path.pathSegList.getItem(1).x is 40
PASS path.pathSegList.getItem(1).y is 40
PASS path.pathSegList.getItem(1).x1 is 10
PASS path.pathSegList.getItem(1).y1 is 30
PASS path.pathSegList.getItem(1).x2 is 10
PASS path.pathSegList.getItem(1).y2 is 30
PASS path.pathSegList.getItem(2).pathSegTypeAsLetter is 's'
PASS path.pathSegList.getItem(2).x is -10
PASS path.pathSegList.getItem(2).y is -30
PASS path.pathSegList.getItem(2).x2 is 30
PASS path.pathSegList.getItem(2).y2 is 5
PASS path.pathSegList.getItem(0).pathSegTypeAsLetter is 'M'
PASS path.pathSegList.getItem(0).x is -20
PASS path.pathSegList.getItem(0).y is -20
PASS path.pathSegList.getItem(1).pathSegTypeAsLetter is 'c'
PASS path.pathSegList.getItem(1).x is 40
PASS path.pathSegList.getItem(1).y is 40
PASS path.pathSegList.getItem(1).x1 is 0
PASS path.pathSegList.getItem(1).y1 is 40
PASS path.pathSegList.getItem(1).x2 is 0
PASS path.pathSegList.getItem(1).y2 is 40
PASS path.pathSegList.getItem(2).pathSegTypeAsLetter is 's'
PASS path.pathSegList.getItem(2).x is 0
PASS path.pathSegList.getItem(2).y is -40
PASS path.pathSegList.getItem(2).x2 is 40
PASS path.pathSegList.getItem(2).y2 is 0
PASS path.pathSegList.getItem(0).pathSegTypeAsLetter is 'M'
PASS path.pathSegList.getItem(0).x is -20
PASS path.pathSegList.getItem(0).y is -20
PASS path.pathSegList.getItem(1).pathSegTypeAsLetter is 'C'
PASS path.pathSegList.getItem(1).x is 20
PASS path.pathSegList.getItem(1).y is 20
PASS path.pathSegList.getItem(1).x1 is 20
PASS path.pathSegList.getItem(1).y1 is -20
PASS path.pathSegList.getItem(1).x2 is 20
PASS path.pathSegList.getItem(1).y2 is -20
PASS path.pathSegList.getItem(2).pathSegTypeAsLetter is 'S'
PASS path.pathSegList.getItem(2).x is -20
PASS path.pathSegList.getItem(2).y is 20
PASS path.pathSegList.getItem(2).x2 is 20
PASS path.pathSegList.getItem(2).y2 is 40
PASS successfullyParsed is true
TEST COMPLETE
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<link rel="stylesheet" href="../../fast/js/resources/js-test-style.css">
<script src="../../fast/js/resources/js-test-pre.js"></script>
<script src="../dynamic-updates/resources/SVGTestCase.js"></script>
<script src="resources/SVGAnimationTestCase.js"></script>
</head>
<body>
<h1>SVG 1.1 dynamic animation tests</h1>
<p id="description"></p>
<div id="console"></div>
<script src="script-tests/animate-path-animation-Cc-Ss.js"></script>
</body>
</html>
SVG 1.1 dynamic animation tests
Test path animation where coordinate modes of start and end differ. You should see PASS messages
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
PASS path.pathSegList.getItem(0).pathSegTypeAsLetter is 'M'
PASS path.pathSegList.getItem(0).x is -30
PASS path.pathSegList.getItem(0).y is -30
PASS path.pathSegList.getItem(1).pathSegTypeAsLetter is 'L'
PASS path.pathSegList.getItem(1).x is 30
PASS path.pathSegList.getItem(1).y is 0
PASS path.pathSegList.getItem(2).pathSegTypeAsLetter is 'V'
PASS path.pathSegList.getItem(2).y is 30
PASS path.pathSegList.getItem(3).pathSegTypeAsLetter is 'H'
PASS path.pathSegList.getItem(3).x is 0
PASS path.pathSegList.getItem(0).pathSegTypeAsLetter is 'M'
PASS path.pathSegList.getItem(0).x is -15
PASS path.pathSegList.getItem(0).y is -15
PASS path.pathSegList.getItem(1).pathSegTypeAsLetter is 'L'
PASS path.pathSegList.getItem(1).x is 15
PASS path.pathSegList.getItem(1).y is 0
PASS path.pathSegList.getItem(2).pathSegTypeAsLetter is 'V'
PASS path.pathSegList.getItem(2).y is 15
PASS path.pathSegList.getItem(3).pathSegTypeAsLetter is 'H'
PASS path.pathSegList.getItem(3).x is 0
PASS path.pathSegList.getItem(0).pathSegTypeAsLetter is 'M'
PASS path.pathSegList.getItem(0).x is 15
PASS path.pathSegList.getItem(0).y is 15
PASS path.pathSegList.getItem(1).pathSegTypeAsLetter is 'l'
PASS path.pathSegList.getItem(1).x is -30
PASS path.pathSegList.getItem(1).y is -15
PASS path.pathSegList.getItem(2).pathSegTypeAsLetter is 'v'
PASS path.pathSegList.getItem(2).y is -15
PASS path.pathSegList.getItem(3).pathSegTypeAsLetter is 'h'
PASS path.pathSegList.getItem(3).x is 15
PASS path.pathSegList.getItem(0).pathSegTypeAsLetter is 'M'
PASS path.pathSegList.getItem(0).x is 30
PASS path.pathSegList.getItem(0).y is 30
PASS path.pathSegList.getItem(1).pathSegTypeAsLetter is 'l'
PASS path.pathSegList.getItem(1).x is -60
PASS path.pathSegList.getItem(1).y is -30
PASS path.pathSegList.getItem(2).pathSegTypeAsLetter is 'v'
PASS path.pathSegList.getItem(2).y is -30
PASS path.pathSegList.getItem(3).pathSegTypeAsLetter is 'h'
PASS path.pathSegList.getItem(3).x is 30
PASS path.pathSegList.getItem(0).pathSegTypeAsLetter is 'M'
PASS path.pathSegList.getItem(0).x is -30
PASS path.pathSegList.getItem(0).y is -30
PASS path.pathSegList.getItem(1).pathSegTypeAsLetter is 'L'
PASS path.pathSegList.getItem(1).x is 30
PASS path.pathSegList.getItem(1).y is 0
PASS path.pathSegList.getItem(2).pathSegTypeAsLetter is 'V'
PASS path.pathSegList.getItem(2).y is 30
PASS path.pathSegList.getItem(3).pathSegTypeAsLetter is 'H'
PASS path.pathSegList.getItem(3).x is 0
PASS successfullyParsed is true
TEST COMPLETE
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<link rel="stylesheet" href="../../fast/js/resources/js-test-style.css">
<script src="../../fast/js/resources/js-test-pre.js"></script>
<script src="../dynamic-updates/resources/SVGTestCase.js"></script>
<script src="resources/SVGAnimationTestCase.js"></script>
</head>
<body>
<h1>SVG 1.1 dynamic animation tests</h1>
<p id="description"></p>
<div id="console"></div>
<script src="script-tests/animate-path-animation-Ll-Vv-Hh.js"></script>
</body>
</html>
SVG 1.1 dynamic animation tests
Test path animation where coordinate modes of start and end differ. You should see PASS messages
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
PASS path.pathSegList.getItem(0).pathSegTypeAsLetter is 'M'
PASS path.pathSegList.getItem(0).x is -30
PASS path.pathSegList.getItem(0).y is -30
PASS path.pathSegList.getItem(1).pathSegTypeAsLetter is 'Q'
PASS path.pathSegList.getItem(1).x is 30
PASS path.pathSegList.getItem(1).y is 0
PASS path.pathSegList.getItem(1).x1 is 30
PASS path.pathSegList.getItem(1).y1 is -30
PASS path.pathSegList.getItem(2).pathSegTypeAsLetter is 'T'
PASS path.pathSegList.getItem(2).x is -30
PASS path.pathSegList.getItem(2).y is 30
PASS path.pathSegList.getItem(0).pathSegTypeAsLetter is 'M'
PASS path.pathSegList.getItem(0).x is -30
PASS path.pathSegList.getItem(0).y is -30
PASS path.pathSegList.getItem(1).pathSegTypeAsLetter is 'Q'
PASS path.pathSegList.getItem(1).x is 22.5
PASS path.pathSegList.getItem(1).y is 0
PASS path.pathSegList.getItem(1).x1 is 22.5
PASS path.pathSegList.getItem(1).y1 is -30
PASS path.pathSegList.getItem(2).pathSegTypeAsLetter is 'T'
PASS path.pathSegList.getItem(2).x is -30
PASS path.pathSegList.getItem(2).y is 30
PASS path.pathSegList.getItem(0).pathSegTypeAsLetter is 'M'
PASS path.pathSegList.getItem(0).x is -30
PASS path.pathSegList.getItem(0).y is -30
PASS path.pathSegList.getItem(1).pathSegTypeAsLetter is 'q'
PASS path.pathSegList.getItem(1).x is 37.5
PASS path.pathSegList.getItem(1).y is 30
PASS path.pathSegList.getItem(1).x1 is 37.5
PASS path.pathSegList.getItem(1).y1 is 0
PASS path.pathSegList.getItem(2).pathSegTypeAsLetter is 't'
PASS path.pathSegList.getItem(2).x is -37.5
PASS path.pathSegList.getItem(2).y is 30
PASS path.pathSegList.getItem(0).pathSegTypeAsLetter is 'M'
PASS path.pathSegList.getItem(0).x is -30
PASS path.pathSegList.getItem(0).y is -30
PASS path.pathSegList.getItem(1).pathSegTypeAsLetter is 'q'
PASS path.pathSegList.getItem(1).x is 30
PASS path.pathSegList.getItem(1).y is 30
PASS path.pathSegList.getItem(1).x1 is 30
PASS path.pathSegList.getItem(1).y1 is 0
PASS path.pathSegList.getItem(2).pathSegTypeAsLetter is 't'
PASS path.pathSegList.getItem(2).x is -30
PASS path.pathSegList.getItem(2).y is 30
PASS path.pathSegList.getItem(0).pathSegTypeAsLetter is 'M'
PASS path.pathSegList.getItem(0).x is -30
PASS path.pathSegList.getItem(0).y is -30
PASS path.pathSegList.getItem(1).pathSegTypeAsLetter is 'Q'
PASS path.pathSegList.getItem(1).x is 30
PASS path.pathSegList.getItem(1).y is 0
PASS path.pathSegList.getItem(1).x1 is 30
PASS path.pathSegList.getItem(1).y1 is -30
PASS path.pathSegList.getItem(2).pathSegTypeAsLetter is 'T'
PASS path.pathSegList.getItem(2).x is -30
PASS path.pathSegList.getItem(2).y is 30
PASS successfullyParsed is true
TEST COMPLETE
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<link rel="stylesheet" href="../../fast/js/resources/js-test-style.css">
<script src="../../fast/js/resources/js-test-pre.js"></script>
<script src="../dynamic-updates/resources/SVGTestCase.js"></script>
<script src="resources/SVGAnimationTestCase.js"></script>
</head>
<body>
<h1>SVG 1.1 dynamic animation tests</h1>
<p id="description"></p>
<div id="console"></div>
<script src="script-tests/animate-path-animation-Qq-Tt.js"></script>
</body>
</html>
SVG 1.1 dynamic animation tests
Test path animation where coordinate modes of start and end differ. You should see PASS messages
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
PASS path.pathSegList.getItem(0).pathSegTypeAsLetter is 'M'
PASS path.pathSegList.getItem(0).x is -20
PASS path.pathSegList.getItem(0).y is -20
PASS path.pathSegList.getItem(1).pathSegTypeAsLetter is 'c'
PASS path.pathSegList.getItem(1).x is 40
PASS path.pathSegList.getItem(1).y is 40
PASS path.pathSegList.getItem(1).x1 is 0
PASS path.pathSegList.getItem(1).y1 is 40
PASS path.pathSegList.getItem(1).x2 is 0
PASS path.pathSegList.getItem(1).y2 is 40
PASS path.pathSegList.getItem(2).pathSegTypeAsLetter is 's'
PASS path.pathSegList.getItem(2).x is 0
PASS path.pathSegList.getItem(2).y is -40
PASS path.pathSegList.getItem(2).x2 is 40
PASS path.pathSegList.getItem(2).y2 is 0
PASS path.pathSegList.getItem(0).pathSegTypeAsLetter is 'M'
PASS path.pathSegList.getItem(0).x is -20
PASS path.pathSegList.getItem(0).y is -20
PASS path.pathSegList.getItem(1).pathSegTypeAsLetter is 'c'
PASS path.pathSegList.getItem(1).x is 40
PASS path.pathSegList.getItem(1).y is 40
PASS path.pathSegList.getItem(1).x1 is 10
PASS path.pathSegList.getItem(1).y1 is 30
PASS path.pathSegList.getItem(1).x2 is 10
PASS path.pathSegList.getItem(1).y2 is 30
PASS path.pathSegList.getItem(2).pathSegTypeAsLetter is 's'
PASS path.pathSegList.getItem(2).x is -10
PASS path.pathSegList.getItem(2).y is -30
PASS path.pathSegList.getItem(2).x2 is 30
PASS path.pathSegList.getItem(2).y2 is 5
PASS path.pathSegList.getItem(0).pathSegTypeAsLetter is 'M'
PASS path.pathSegList.getItem(0).x is -20
PASS path.pathSegList.getItem(0).y is -20
PASS path.pathSegList.getItem(1).pathSegTypeAsLetter is 'C'
PASS path.pathSegList.getItem(1).x is 20
PASS path.pathSegList.getItem(1).y is 20
PASS path.pathSegList.getItem(1).x1 is 10
PASS path.pathSegList.getItem(1).y1 is -10
PASS path.pathSegList.getItem(1).x2 is 10
PASS path.pathSegList.getItem(1).y2 is -10
PASS path.pathSegList.getItem(2).pathSegTypeAsLetter is 'S'
PASS path.pathSegList.getItem(2).x is -10
PASS path.pathSegList.getItem(2).y is 10
PASS path.pathSegList.getItem(2).x2 is 30
PASS path.pathSegList.getItem(2).y2 is 35
PASS path.pathSegList.getItem(0).pathSegTypeAsLetter is 'M'
PASS path.pathSegList.getItem(0).x is -20
PASS path.pathSegList.getItem(0).y is -20
PASS path.pathSegList.getItem(1).pathSegTypeAsLetter is 'C'
PASS path.pathSegList.getItem(1).x is 20
PASS path.pathSegList.getItem(1).y is 20
PASS path.pathSegList.getItem(1).x1 is 20
PASS path.pathSegList.getItem(1).y1 is -20
PASS path.pathSegList.getItem(1).x2 is 20
PASS path.pathSegList.getItem(1).y2 is -20
PASS path.pathSegList.getItem(2).pathSegTypeAsLetter is 'S'
PASS path.pathSegList.getItem(2).x is -20
PASS path.pathSegList.getItem(2).y is 20
PASS path.pathSegList.getItem(2).x2 is 20
PASS path.pathSegList.getItem(2).y2 is 40
PASS path.pathSegList.getItem(0).pathSegTypeAsLetter is 'M'
PASS path.pathSegList.getItem(0).x is -20
PASS path.pathSegList.getItem(0).y is -20
PASS path.pathSegList.getItem(1).pathSegTypeAsLetter is 'c'
PASS path.pathSegList.getItem(1).x is 40
PASS path.pathSegList.getItem(1).y is 40
PASS path.pathSegList.getItem(1).x1 is 0
PASS path.pathSegList.getItem(1).y1 is 40
PASS path.pathSegList.getItem(1).x2 is 0
PASS path.pathSegList.getItem(1).y2 is 40
PASS path.pathSegList.getItem(2).pathSegTypeAsLetter is 's'
PASS path.pathSegList.getItem(2).x is 0
PASS path.pathSegList.getItem(2).y is -40
PASS path.pathSegList.getItem(2).x2 is 40
PASS path.pathSegList.getItem(2).y2 is 0
PASS successfullyParsed is true
TEST COMPLETE
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<link rel="stylesheet" href="../../fast/js/resources/js-test-style.css">
<script src="../../fast/js/resources/js-test-pre.js"></script>
<script src="../dynamic-updates/resources/SVGTestCase.js"></script>
<script src="resources/SVGAnimationTestCase.js"></script>
</head>
<body>
<h1>SVG 1.1 dynamic animation tests</h1>
<p id="description"></p>
<div id="console"></div>
<script src="script-tests/animate-path-animation-cC-sS-inverse.js"></script>
</body>
</html>
SVG 1.1 dynamic animation tests
Test path animation where coordinate modes of start and end differ. You should see PASS messages
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
PASS path.pathSegList.getItem(0).pathSegTypeAsLetter is 'M'
PASS path.pathSegList.getItem(0).x is 30
PASS path.pathSegList.getItem(0).y is 30
PASS path.pathSegList.getItem(1).pathSegTypeAsLetter is 'l'
PASS path.pathSegList.getItem(1).x is -60
PASS path.pathSegList.getItem(1).y is -30
PASS path.pathSegList.getItem(2).pathSegTypeAsLetter is 'v'
PASS path.pathSegList.getItem(2).y is -30
PASS path.pathSegList.getItem(3).pathSegTypeAsLetter is 'h'
PASS path.pathSegList.getItem(3).x is 30
PASS path.pathSegList.getItem(0).pathSegTypeAsLetter is 'M'
PASS path.pathSegList.getItem(0).x is 15
PASS path.pathSegList.getItem(0).y is 15
PASS path.pathSegList.getItem(1).pathSegTypeAsLetter is 'l'
PASS path.pathSegList.getItem(1).x is -30
PASS path.pathSegList.getItem(1).y is -15
PASS path.pathSegList.getItem(2).pathSegTypeAsLetter is 'v'
PASS path.pathSegList.getItem(2).y is -15
PASS path.pathSegList.getItem(3).pathSegTypeAsLetter is 'h'
PASS path.pathSegList.getItem(3).x is 15
PASS path.pathSegList.getItem(0).pathSegTypeAsLetter is 'M'
PASS path.pathSegList.getItem(0).x is -15
PASS path.pathSegList.getItem(0).y is -15
PASS path.pathSegList.getItem(1).pathSegTypeAsLetter is 'L'
PASS path.pathSegList.getItem(1).x is 15
PASS path.pathSegList.getItem(1).y is 0
PASS path.pathSegList.getItem(2).pathSegTypeAsLetter is 'V'
PASS path.pathSegList.getItem(2).y is 15
PASS path.pathSegList.getItem(3).pathSegTypeAsLetter is 'H'
PASS path.pathSegList.getItem(3).x is 0
PASS path.pathSegList.getItem(0).pathSegTypeAsLetter is 'M'
PASS path.pathSegList.getItem(0).x is -30
PASS path.pathSegList.getItem(0).y is -30
PASS path.pathSegList.getItem(1).pathSegTypeAsLetter is 'L'
PASS path.pathSegList.getItem(1).x is 30
PASS path.pathSegList.getItem(1).y is 0
PASS path.pathSegList.getItem(2).pathSegTypeAsLetter is 'V'
PASS path.pathSegList.getItem(2).y is 30
PASS path.pathSegList.getItem(3).pathSegTypeAsLetter is 'H'
PASS path.pathSegList.getItem(3).x is 0
PASS path.pathSegList.getItem(0).pathSegTypeAsLetter is 'M'
PASS path.pathSegList.getItem(0).x is 30
PASS path.pathSegList.getItem(0).y is 30
PASS path.pathSegList.getItem(1).pathSegTypeAsLetter is 'l'
PASS path.pathSegList.getItem(1).x is -60
PASS path.pathSegList.getItem(1).y is -30
PASS path.pathSegList.getItem(2).pathSegTypeAsLetter is 'v'
PASS path.pathSegList.getItem(2).y is -30
PASS path.pathSegList.getItem(3).pathSegTypeAsLetter is 'h'
PASS path.pathSegList.getItem(3).x is 30
PASS successfullyParsed is true
TEST COMPLETE
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<link rel="stylesheet" href="../../fast/js/resources/js-test-style.css">
<script src="../../fast/js/resources/js-test-pre.js"></script>
<script src="../dynamic-updates/resources/SVGTestCase.js"></script>
<script src="resources/SVGAnimationTestCase.js"></script>
</head>
<body>
<h1>SVG 1.1 dynamic animation tests</h1>
<p id="description"></p>
<div id="console"></div>
<script src="script-tests/animate-path-animation-lL-vV-hH-inverse.js"></script>
</body>
</html>
SVG 1.1 dynamic animation tests
Test path animation where coordinate modes of start and end differ. You should see PASS messages
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
PASS path.pathSegList.getItem(0).pathSegTypeAsLetter is 'M'
PASS path.pathSegList.getItem(0).x is -30
PASS path.pathSegList.getItem(0).y is -30
PASS path.pathSegList.getItem(1).pathSegTypeAsLetter is 'q'
PASS path.pathSegList.getItem(1).x is 30
PASS path.pathSegList.getItem(1).y is 30
PASS path.pathSegList.getItem(1).x1 is 30
PASS path.pathSegList.getItem(1).y1 is 0
PASS path.pathSegList.getItem(2).pathSegTypeAsLetter is 't'
PASS path.pathSegList.getItem(2).x is -30
PASS path.pathSegList.getItem(2).y is 30
PASS path.pathSegList.getItem(0).pathSegTypeAsLetter is 'M'
PASS path.pathSegList.getItem(0).x is -30
PASS path.pathSegList.getItem(0).y is -30
PASS path.pathSegList.getItem(1).pathSegTypeAsLetter is 'q'
PASS path.pathSegList.getItem(1).x is 37.5
PASS path.pathSegList.getItem(1).y is 30
PASS path.pathSegList.getItem(1).x1 is 37.5
PASS path.pathSegList.getItem(1).y1 is 0
PASS path.pathSegList.getItem(2).pathSegTypeAsLetter is 't'
PASS path.pathSegList.getItem(2).x is -37.5
PASS path.pathSegList.getItem(2).y is 30
PASS path.pathSegList.getItem(0).pathSegTypeAsLetter is 'M'
PASS path.pathSegList.getItem(0).x is -30
PASS path.pathSegList.getItem(0).y is -30
PASS path.pathSegList.getItem(1).pathSegTypeAsLetter is 'Q'
PASS path.pathSegList.getItem(1).x is 22.5
PASS path.pathSegList.getItem(1).y is 0
PASS path.pathSegList.getItem(1).x1 is 22.5
PASS path.pathSegList.getItem(1).y1 is -30
PASS path.pathSegList.getItem(2).pathSegTypeAsLetter is 'T'
PASS path.pathSegList.getItem(2).x is -30
PASS path.pathSegList.getItem(2).y is 30
PASS path.pathSegList.getItem(0).pathSegTypeAsLetter is 'M'
PASS path.pathSegList.getItem(0).x is -30
PASS path.pathSegList.getItem(0).y is -30
PASS path.pathSegList.getItem(1).pathSegTypeAsLetter is 'Q'
PASS path.pathSegList.getItem(1).x is 30
PASS path.pathSegList.getItem(1).y is 0
PASS path.pathSegList.getItem(1).x1 is 30
PASS path.pathSegList.getItem(1).y1 is -30
PASS path.pathSegList.getItem(2).pathSegTypeAsLetter is 'T'
PASS path.pathSegList.getItem(2).x is -30
PASS path.pathSegList.getItem(2).y is 30
PASS path.pathSegList.getItem(0).pathSegTypeAsLetter is 'M'
PASS path.pathSegList.getItem(0).x is -30
PASS path.pathSegList.getItem(0).y is -30
PASS path.pathSegList.getItem(1).pathSegTypeAsLetter is 'q'
PASS path.pathSegList.getItem(1).x is 30
PASS path.pathSegList.getItem(1).y is 30
PASS path.pathSegList.getItem(1).x1 is 30
PASS path.pathSegList.getItem(1).y1 is 0
PASS path.pathSegList.getItem(2).pathSegTypeAsLetter is 't'
PASS path.pathSegList.getItem(2).x is -30
PASS path.pathSegList.getItem(2).y is 30
PASS successfullyParsed is true
TEST COMPLETE
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<link rel="stylesheet" href="../../fast/js/resources/js-test-style.css">
<script src="../../fast/js/resources/js-test-pre.js"></script>
<script src="../dynamic-updates/resources/SVGTestCase.js"></script>
<script src="resources/SVGAnimationTestCase.js"></script>
</head>
<body>
<h1>SVG 1.1 dynamic animation tests</h1>
<p id="description"></p>
<div id="console"></div>
<script src="script-tests/animate-path-animation-qQ-tT-inverse.js"></script>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<link rel="stylesheet" href="../../fast/js/resources/js-test-style.css">
<script src="../../fast/js/resources/js-test-pre.js"></script>
<script src="../dynamic-updates/resources/SVGTestCase.js"></script>
<script src="resources/SVGAnimationTestCase.js"></script>
</head>
<body>
<h1>Test nested transforms with animateMotion</h1>
<p id="description"/>
<div id="console"/>
<script src="script-tests/animate-path-nested-transforms.js"></script>
</body>
<head>
<link rel="stylesheet" href="../../fast/js/resources/js-test-style.css">
<script src="../../fast/js/resources/js-test-pre.js"></script>
<script src="../dynamic-updates/resources/SVGTestCase.js"></script>
<script src="resources/SVGAnimationTestCase.js"></script>
</head>