chromium/src/third_party/blink/web_tests/svg/animations/repeating-path-animation.svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onload="loaded()">
<style type="text/css">
    path { fill: none; stroke: blue; stroke-width: 1px; }
</style>

<!-- By-animations -->
<g>
    <!-- Simple by-animation -->
    <path d="M50,50 L60,50 L60,60 L50,60 Z">
        <animate attributeName="d" begin="0s" dur="4s" by="M0,0 L40,0 L40,40 L0,40 Z" fill="freeze"/>
    </path>

    <!-- By-animation enforces additive="sum" behaviour. -->
    <path d="M50,50 L60,50 L60,60 L50,60 Z" transform="translate(100,0)">
        <animate attributeName="d" begin="0s" dur="4s" by="M0,0 L20,0 L20,20 L0,20 Z" fill="freeze"/>
        <animate attributeName="d" begin="0s" dur="4s" by="M0,0 L20,0 L20,20 L0,20 Z" fill="freeze"/>
    </path>

    <!-- Lower priority animations contribute to the additive behavior of following animations -->
    <path d="M50,50 L60,50 L60,60 L50,60 Z" transform="translate(200,0)">
        <animate attributeName="d" begin="0s" dur="2s" by="M0,0 L20,0 L20,20 L0,20 Z" fill="freeze"/>
        <animate attributeName="d" begin="2s" dur="2s" by="M0,0 L20,0 L20,20 L0,20 Z" fill="freeze"/>
    </path>
</g>

<!-- By-animations with repetitions -->
<g transform="translate(0,100)">
    <!-- Testing repeatCount="2" without accumulation. -->
    <path d="M50,50 L60,50 L60,60 L50,60 Z">
        <animate attributeName="d" begin="0s" dur="2s" repeatCount="2" by="M0,0 L40,0 L40,40 L0,40 Z" fill="freeze"/>
    </path>

    <!-- Testing repeatCount="2" with accumulation. -->
    <path d="M50,50 L60,50 L60,60 L50,60 Z" transform="translate(100,0)">
        <animate attributeName="d" begin="0s" dur="2s" accumulate="sum" repeatCount="2" by="M0,0 L20,0 L20,20 L0,20 Z" fill="freeze"/>
    </path>

    <!-- Testing two animations with repeatCount="2" and accumulation. -->
    <path d="M50,50 L60,50 L60,60 L50,60 Z" transform="translate(200,0)">
        <animate attributeName="d" begin="0s" dur="2s" accumulate="sum" repeatCount="2" by="M0,0 L10,0 L10,10 L0,10 Z" fill="freeze"/>
        <animate attributeName="d" begin="0s" dur="2s" accumulate="sum" repeatCount="2" by="M0,0 L10,0 L10,10 L0,10 Z" fill="freeze"/>
    </path>
</g>

<!-- From-by animations -->
<g transform="translate(0,200)">
    <!-- Simple from-by animation -->
    <path d="M50,50 L60,50 L60,60 L50,60 Z">
        <animate attributeName="d" begin="0s" dur="4s" from="M50,50 L60,50 L60,60 L50,60 Z" by="M0,0 L40,0 L40,40 L0,40 Z" fill="freeze"/>
    </path>

    <!-- If additive="sum" is not given the second animation always overrides the first -->
    <path d="M50,50 L60,50 L60,60 L50,60 Z" transform="translate(100,0)">
        <animate attributeName="d" begin="0s" dur="4s" from="M50,50 L60,50 L60,60 L50,60 Z" by="M0,0 L666,0 L666,666 L0,666 Z" fill="freeze"/>
        <animate attributeName="d" begin="0s" dur="4s" from="M50,50 L60,50 L60,60 L50,60 Z" by="M0,0 L40,0 L40,40 L0,40 Z" fill="freeze"/>
    </path>

    <!-- Testing additive="sum" on from-by animations -->
    <path d="M50,50 L60,50 L60,60 L50,60 Z" transform="translate(200,0)">
        <animate attributeName="d" begin="0s" dur="4s" from="M25,25 L30,25 L30,30 L25,30 Z" by="M0,0 L20,0 L20,20 L0,20 Z" fill="freeze"/>
        <animate attributeName="d" begin="0s" dur="4s" additive="sum" from="M25,25 L30,25 L30,30 L25,30 Z" by="M0,0 L20,0 L20,20 L0,20 Z" fill="freeze"/>
    </path>
</g>

<!-- From-by animations with repetitions -->
<g transform="translate(0,300)">
    <!-- Testing repeatCount="4" with accumulation & addition -->
    <path d="M50,50 L60,50 L60,60 L50,60 Z">
        <animate attributeName="d" begin="0s" dur="1s" additive="sum" accumulate="sum" repeatCount="4" from="M0,0 L0,0 L0,0 L0,0 Z" by="M0,0 L10,0 L10,10 L0,10 Z" fill="freeze"/>
    </path>

    <!-- Testing repeatCount="4" with accumulation and without addition -->
    <path d="M50,50 L60,50 L60,60 L50,60 Z" transform="translate(100,0)">
        <animate attributeName="d" begin="0s" dur="1s" additive="replace" accumulate="sum" repeatCount="4" from="M12.5,12.5 L15,12.5 L15,15 L12.5,15 Z" by="M0,0 L10,0 L10,10 L0,10 Z" fill="freeze"/>
    </path>

    <!-- Testing multiple additive combinations with accumulation -->
    <path d="M50,50 L60,50 L60,60 L50,60 Z" transform="translate(200,0)">
        <animate attributeName="d" begin="0s" dur="1s" additive="replace" accumulate="sum" repeatCount="2" from="M0,0 L0,0 L0,0 L0,0 Z" by="M0,0 L10,0 L10,10 L0,10 Z" fill="freeze"/>
        <animate attributeName="d" begin="2s" dur="1s" additive="sum" accumulate="sum" repeatCount="2" from="M25,25 L30,25 L30,30 L25,30 Z" by="M0,0 L10,0 L10,10 L0,10 Z" fill="freeze"/>
    </path>
</g>

<script>
if (window.testRunner)
    testRunner.waitUntilDone();

function loaded() {
    document.documentElement.setCurrentTime(5);
    if (window.testRunner)
        testRunner.notifyDone();
}
</script>
</svg>