animateTransform-circular-linked-syncbases.html

<!DOCTYPE html>
<svg height="100" width="200">
  <rect x="100" width="100" height="100" fill="#ff0000"></rect>
  <rect width="100" height="100" fill="#008000">
    <animateTransform attributeName="transform" type="translate"
                      from="50 0" to="100 0" dur="0.1s" id="right" begin="left.end" onend="checkResult()" fill="freeze"/>
    <animateTransform attributeName="transform" type="translate"
                      from="0 0" to="50 0" dur="0.1s" id="left" begin="0s; right.end+100s"/>
  </rect>
</svg>
<script>
if (window.testRunner) {
    testRunner.dumpAsText();
    testRunner.waitUntilDone();
}
function checkResult() {
    document.querySelector('svg').pauseAnimations();
    var rect = document.querySelector('rect + rect');
    var rectTransformList = rect.transform.animVal;
    if (rectTransformList.numberOfItems == 1 &&
        rectTransformList.getItem(0).matrix.e === 100) {
        result = 'PASS';
    } else {
        result = 'FAIL';
    }
    document.body.appendChild(document.createTextNode(result));
    if (window.testRunner)
        testRunner.notifyDone();
}
</script>

chromium/third_party/blink/web_tests/svg/animations/animateTransform-circular-linked-syncbases.html