Commit 353343f5 authored by Fredrik Söderquist's avatar Fredrik Söderquist Committed by Commit Bot

Rework/update SMIL event tests to better match spec

This is in preparation for fixing the behavior of SMIL events wrt to
seeking. This also makes these tests pass in Gecko with a single
exception.

svg/animations/begin-event.svg,
svg/animations/end-event.svg,
svg/animations/repeat-event.svg,
svg/animations/onbegin.svg,
svg/animations/onend.svg and
svg/animations/onrepeat.svg

 Adjust the seeked-to time so that the beginEvent/endEvent/repeatEvent
 is dispatched. Convert from reftests to testharness.js.

svg/animations/repeatn-event-1a.svg,
svg/animations/repeatn-event-1b.svg,
svg/animations/repeatn-event-1c.svg,
svg/animations/repeatn-event-1d.svg and
svg/animations/repeatn-event-1e.svg

 'repeatEvent's are not dispatched while seeking, so seek to just before
 the relevant repeat and then wait for the event. Convert from reftests
 to testharness.js.

svg/animations/repeatn-event-2a.svg

 Switch to "stepping through" all the repeat points rather than to the
 end directly. Convert from reftest to testharness.js.

wpt/svg/animations/repeatn-remove-add-animation.html

 Need to make sure that 'repeatEvent's are actually dispatched, so this
 test cannot use smil_async_test() which steps while paused.

Bug: 1039886
Change-Id: I500f5005a29ed22a920dd3835f8070b52d4def7c
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2017527Reviewed-by: default avatarPhilip Rogers <pdr@chromium.org>
Commit-Queue: Fredrik Söderquist <fs@opera.com>
Cr-Commit-Position: refs/heads/master@{#735419}
parent 061f86e4
<!doctype html> <!doctype html>
<html>
<meta charset="utf-8"> <meta charset="utf-8">
<title>This removes and adds an animation element while the animation is repeating</title> <title>Remove and add an animation element while the animation is repeating</title>
<script src="/resources/testharness.js"></script> <script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script> <script src="/resources/testharnessreport.js"></script>
<script src="/resources/SVGAnimationTestCase-testharness.js"></script> <svg>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<animate id="anim" attributeName="visibility" to="visible" begin="0s" dur="2s" repeatCount="4"/> <animate id="anim" attributeName="visibility" to="visible" begin="0s" dur="2s" repeatCount="4"/>
<rect x="0" y="0" width="100" height="100" fill="rgb(0, 255, 0)"> <rect x="0" y="0" width="50" height="50" fill="lime">
<set attributeName="fill" to="rgb(255, 0, 0)" begin="anim.repeat(0)"/> <set attributeName="fill" to="red" begin="anim.repeat(0)"/>
</rect> </rect>
<rect x="200" y="0" width="100" height="100" fill="rgb(255, 0, 0)"> <rect x="50" y="0" width="50" height="50" fill="red">
<set attributeName="fill" to="rgb(0, 255, 0)" begin="anim.repeat(1)"/> <set attributeName="fill" to="lime" begin="anim.repeat(1)"/>
</rect> </rect>
<rect x="0" y="200" width="100" height="100" fill="rgb(255, 0, 0)"> <rect x="0" y="50" width="50" height="50" fill="red">
<set attributeName="fill" to="rgb(0, 255, 0)" begin="anim.repeat(2)"/> <set attributeName="fill" to="lime" begin="anim.repeat(2)"/>
</rect> </rect>
<rect x="200" y="200" width="100" height="100" fill="rgb(255, 0, 0)"> <rect x="50" y="50" width="50" height="50" fill="red">
<set attributeName="fill" to="rgb(0, 255, 0)" begin="anim.repeat(3)"/> <set attributeName="fill" to="lime" begin="anim.repeat(3)"/>
</rect> </rect>
</svg> </svg>
<script> <script>
var rootSVGElement = document.querySelector("svg"); function recreate(anim) {
var epsilon = 1.0; anim.parentNode.removeChild(anim);
return document.querySelector('svg').appendChild(anim.cloneNode());
// Setup animation test }
function sample1() {
expectFillColor(rect1, 0, 255, 0, "1.1");
expectFillColor(rect2, 255, 0, 0, "1.2");
expectFillColor(rect3, 255, 0, 0, "1.3");
expectFillColor(rect4, 255, 0, 0, "1.4");
}
function sample2() {
expectFillColor(rect1, 0, 255, 0, "2.1");
expectFillColor(rect2, 0, 255, 0, "2.2");
expectFillColor(rect3, 255, 0, 0, "2.3");
expectFillColor(rect4, 255, 0, 0, "2.4");
}
function sample3() {
expectFillColor(rect1, 0, 255, 0, "3.1");
expectFillColor(rect2, 0, 255, 0, "3.2");
expectFillColor(rect3, 0, 255, 0, "3.3");
expectFillColor(rect4, 255, 0, 0, "3.4");
}
function sample4() {
expectFillColor(rect1, 0, 255, 0, "4.1");
expectFillColor(rect2, 0, 255, 0, "4.2");
expectFillColor(rect3, 0, 255, 0, "4.3");
expectFillColor(rect4, 0, 255, 0, "4.4");
}
function recreate() {
var anim1 = rootSVGElement.ownerDocument.getElementById("anim");
anim1.parentNode.removeChild(anim1);
var anim2 = createSVGElement("animate");
anim2.setAttribute("id", "anim");
anim2.setAttribute("attributeName", "visibility");
anim2.setAttribute("to", "visible");
anim2.setAttribute("begin", "0s");
anim2.setAttribute("dur", "2s");
anim2.setAttribute("repeatCount", "4");
rootSVGElement.appendChild(anim2);
}
smil_async_test((t) => {
var rects = rootSVGElement.ownerDocument.getElementsByTagName("rect");
rect1 = rects[0];
rect2 = rects[1];
rect3 = rects[2];
rect4 = rects[3];
const expectedValues = [
// [animationId, time, sampleCallback]
["anim", 1.999, sample1],
["anim", 2.000, sample2],
["anim", 2.999, sample2],
["anim", 4.000, sample3],
["anim", 5.0, recreate],
["anim", 5.999, sample3],
["anim", 6.000, sample4],
];
runAnimationTest(t, expectedValues); function waitFrame() {
}); return new Promise(resolve => {
window.requestAnimationFrame(resolve);
});
}
window.animationStartsImmediately = true; function checkSetElements(setElements, expected) {
let fillValues = Array.from(setElements).map(set => {
return getComputedStyle(set.targetElement, '').fill;
});
let remappedExpected = expected.map(color => {
const colorMap = {'red': 'rgb(255, 0, 0)', 'lime': 'rgb(0, 255, 0)'};
return colorMap[color];
})
assert_array_equals(fillValues, remappedExpected);
}
promise_test(t => {
let svg = document.querySelector('svg');
let anim = document.getElementById('anim');
let animWatcher = new EventWatcher(t, anim, ['beginEvent', 'repeatEvent']);
// Wait for #anims 'beginEvent' and then step through the
// 'repeatEvents' one at a time.
let stepsPromise = animWatcher.wait_for('beginEvent').then(() => {
checkSetElements(setElements, ['lime', 'red', 'red', 'red']);
svg.setCurrentTime(1.999);
return animWatcher.wait_for('repeatEvent');
}).then(() => {
return waitFrame();
}).then(() => {
checkSetElements(setElements, ['lime', 'lime', 'red', 'red']);
svg.setCurrentTime(2.999);
return waitFrame();
}).then(() => {
checkSetElements(setElements, ['lime', 'lime', 'red', 'red']);
svg.setCurrentTime(3.999);
return animWatcher.wait_for('repeatEvent');
}).then(() => {
return waitFrame();
}).then(() => {
checkSetElements(setElements, ['lime', 'lime', 'lime', 'red']);
let newAnim = recreate(anim);
let animWatcher = new EventWatcher(t, newAnim, ['repeatEvent']);
svg.setCurrentTime(5.999);
return animWatcher.wait_for('repeatEvent');
}).then(() => {
return waitFrame();
}).then(() => {
checkSetElements(setElements, ['lime', 'lime', 'lime', 'lime']);
});
let setElements = document.getElementsByTagName('set');
let setBeginWatchers = Array.from(setElements).map(element => {
return new EventWatcher(t, element, 'beginEvent');
});
// Expect 'beginEvent' to be dispatched once for all but the first 'set' element.
let setPromises = setBeginWatchers.slice(1).map(watcher => {
return watcher.wait_for('beginEvent').then(evt => {
let target = evt.target.targetElement;
assert_equals(getComputedStyle(target, '').fill, 'rgb(0, 255, 0)');
});
});
return Promise.all([stepsPromise, ...setPromises]);
});
</script> </script>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="0" y="0" width="100" height="100" fill="green" />
</svg>
<?xml version="1.0" encoding="UTF-8"?> <svg xmlns="http://www.w3.org/2000/svg">
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd"> <title>Animation triggers on 'beginEvent'</title>
<svg onload="loaded()" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <script href="../../resources/testharness.js"/>
<rect x="0" y="0" width="0" height="100" fill="green"> <script href="../../resources/testharnessreport.js"/>
<rect width="0" height="100" fill="green">
<animate id="anim" attributeName="visibility" to="visible" begin="0s" end="2s" fill="freeze"/> <animate id="anim" attributeName="visibility" to="visible" begin="0s" end="2s" fill="freeze"/>
<set attributeName="width" to="100" begin="anim.beginEvent" /> <set attributeName="width" to="100" begin="anim.beginEvent"/>
</rect> </rect>
<script> <script>
if (window.testRunner) async_test(t => {
testRunner.waitUntilDone(); let set = document.querySelector('set');
set.addEventListener('beginEvent', t.step_func_done(function() {
function loaded() { assert_equals(set.parentNode.getBBox().width, 100);
document.documentElement.setCurrentTime(2); }));
});
if (window.testRunner)
setTimeout(function(){testRunner.notifyDone();}, 100);
}
</script> </script>
</svg> </svg>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="100" y="0" width="50" height="50" fill="green" />
</svg>
<?xml version="1.0" encoding="UTF-8"?> <svg xmlns="http://www.w3.org/2000/svg">
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd"> <title>Animation triggers on 'endEvent'</title>
<svg onload="loaded()" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <script href="../../resources/testharness.js"/>
<rect x="0" y="0" width="50" height="50" fill="green"> <script href="../../resources/testharnessreport.js"/>
<animate id="anim" attributeName="visibility" to="visible" begin="0s" end="2s" /> <rect width="0" height="100" fill="green">
<set attributeName="x" to="100" begin="anim.endEvent" /> <animate id="anim" attributeName="visibility" to="visible" begin="0s" end="2s"/>
<set attributeName="width" to="100" begin="anim.endEvent"/>
</rect> </rect>
<script> <script>
if (window.testRunner) async_test(t => {
testRunner.waitUntilDone(); document.documentElement.setCurrentTime(1.99);
function loaded() { let set = document.querySelector('set');
document.documentElement.setCurrentTime(2); set.addEventListener('beginEvent', t.step_func_done(function() {
assert_equals(set.parentNode.getBBox().width, 100);
if (window.testRunner) }));
setTimeout(function() {testRunner.notifyDone();}, 100); });
}
</script> </script>
</svg> </svg>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="0" y="0" width="100" height="100" fill="green" />
</svg>
<?xml version="1.0" encoding="UTF-8"?> <svg xmlns="http://www.w3.org/2000/svg">
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd"> <title>'onbegin' event handler content attribute</title>
<svg onload="loaded()" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <script href="../../resources/testharness.js"/>
<rect x="0" y="0" width="0" height="100" fill="green"> <script href="../../resources/testharnessreport.js"/>
<animate id="anim" attributeName="visibility" to="visible" begin="0s" end="2s" fill="freeze" onbegin="document.getElementById('anim2').beginElement()"/> <rect width="0" height="100" fill="green">
<set id="anim2" attributeName="width" to="100" begin="indefinite" /> <animate id="anim" attributeName="visibility" to="visible" begin="0s" end="2s" fill="freeze"
onbegin="document.getElementById('anim2').beginElement()"/>
<set id="anim2" attributeName="width" to="100" begin="indefinite"/>
</rect> </rect>
<script> <script>
if (window.testRunner) async_test(t => {
testRunner.waitUntilDone(); let set = document.getElementById('anim2');
set.addEventListener('beginEvent', t.step_func_done(function() {
function loaded() { assert_equals(set.parentNode.getBBox().width, 100);
document.documentElement.setCurrentTime(2); }));
});
if (window.testRunner)
setTimeout(function(){testRunner.notifyDone();}, 100);
}
</script> </script>
</svg> </svg>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="0" y="0" width="100" height="100" fill="green" />
</svg>
<?xml version="1.0" encoding="UTF-8"?> <svg xmlns="http://www.w3.org/2000/svg">
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd"> <title>'onend' event handler content attribute</title>
<svg onload="loaded()" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <script href="../../resources/testharness.js"/>
<rect x="0" y="0" width="0" height="100" fill="green"> <script href="../../resources/testharnessreport.js"/>
<animate id="anim" attributeName="visibility" to="visible" begin="0s" end="2s" fill="freeze" onend="document.getElementById('anim2').beginElement()"/> <rect width="0" height="100" fill="green">
<set id="anim2" attributeName="width" to="100" begin="indefinite" /> <animate id="anim" attributeName="visibility" to="visible" begin="0s" end="2s" fill="freeze"
onend="document.getElementById('anim2').beginElement()"/>
<set id="anim2" attributeName="width" to="100" begin="indefinite"/>
</rect> </rect>
<script> <script>
if (window.testRunner) async_test(t => {
testRunner.waitUntilDone(); document.documentElement.setCurrentTime(1.99);
function loaded() { let set = document.getElementById('anim2');
document.documentElement.setCurrentTime(2); set.addEventListener('beginEvent', t.step_func_done(function() {
assert_equals(set.parentNode.getBBox().width, 100);
if (window.testRunner) }));
setTimeout(function(){testRunner.notifyDone();}, 100); });
}
</script> </script>
</svg> </svg>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="0" y="0" width="100" height="100" fill="green" />
</svg>
<?xml version="1.0" encoding="UTF-8"?> <svg xmlns="http://www.w3.org/2000/svg">
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd"> <title>'onrepeat' event handler content attribute</title>
<svg onload="loaded()" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <script href="../../resources/testharness.js"/>
<rect x="0" y="0" width="0" height="100" fill="green"> <script href="../../resources/testharnessreport.js"/>
<animate id="anim" attributeName="visibility" to="visible" begin="0s" dur="1s" fill="freeze" repeatCount="2" onrepeat="document.getElementById('anim2').beginElement()"/> <rect width="0" height="100" fill="green">
<animate id="anim" attributeName="visibility" to="visible" begin="0s" dur="1s" fill="freeze" repeatCount="2"
onrepeat="document.getElementById('anim2').beginElement()"/>
<set id="anim2" attributeName="width" to="100" begin="indefinite" /> <set id="anim2" attributeName="width" to="100" begin="indefinite" />
</rect> </rect>
<script> <script>
if (window.testRunner) async_test(t => {
testRunner.waitUntilDone(); document.documentElement.setCurrentTime(0.99);
function loaded() { let set = document.getElementById('anim2');
document.documentElement.setCurrentTime(2); set.addEventListener('beginEvent', t.step_func_done(function() {
assert_equals(set.parentNode.getBBox().width, 100);
if (window.testRunner) }));
setTimeout(function(){testRunner.notifyDone();}, 100); });
}
</script> </script>
</svg> </svg>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="0" y="0" width="100" height="100" fill="green" />
</svg>
<?xml version="1.0" encoding="UTF-8"?> <svg xmlns="http://www.w3.org/2000/svg">
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd"> <title>Animation triggers on 'repeatEvent'</title>
<svg onload="loaded()" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <script href="../../resources/testharness.js"/>
<rect x="0" y="0" width="0" height="0" fill="green"> <script href="../../resources/testharnessreport.js"/>
<animate id="anim" attributeName="width" from="0" to="100" begin="0s" dur="1s" repeatCount="2" fill="freeze"/> <rect width="0" height="100" fill="green">
<set attributeName="height" to="100" begin="anim.repeatEvent"/> <animate id="anim" attributeName="visibility" to="visible" begin="0s" dur="1s" repeatCount="2" fill="freeze"/>
<set attributeName="width" to="100" begin="anim.repeatEvent"/>
</rect> </rect>
<script> <script>
if (window.testRunner) async_test(t => {
testRunner.waitUntilDone(); document.documentElement.setCurrentTime(0.99);
function loaded() { let set = document.querySelector('set');
document.documentElement.setCurrentTime(2); set.addEventListener('beginEvent', t.step_func_done(function() {
assert_equals(set.parentNode.getBBox().width, 100);
if (window.testRunner) }));
setTimeout(function(){testRunner.notifyDone();}, 100); });
}
</script> </script>
</svg> </svg>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="0" y="0" width="0" height="100" fill="green" />
</svg>
<?xml version="1.0" encoding="UTF-8"?> <svg xmlns="http://www.w3.org/2000/svg">
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd"> <title>Animation does not triggers on 'repeat(0)'</title>
<svg onload="loaded()" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <script href="../../resources/testharness.js"/>
<rect x="0" y="0" width="0" height="100" fill="green"> <script href="../../resources/testharnessreport.js"/>
<rect width="100" height="100" fill="green">
<animate id="anim" attributeName="visibility" to="visible" begin="0s" dur="2s" repeatCount="4"/> <animate id="anim" attributeName="visibility" to="visible" begin="0s" dur="2s" repeatCount="4"/>
<set attributeName="width" to="100" begin="anim.repeat(0)"/> <set attributeName="width" to="0" begin="anim.repeat(0)"/>
</rect> </rect>
<script> <script>
if (window.testRunner) function waitForFrame() {
testRunner.waitUntilDone(); return new Promise(resolve => {
window.requestAnimationFrame(resolve);
});
}
function loaded() { promise_test(t => {
document.documentElement.setCurrentTime(0); let set = document.querySelector("set");
new EventWatcher(t, set, 'beginEvent');
if (window.testRunner) let windowWatcher = new EventWatcher(t, window, 'load');
setTimeout(function(){testRunner.notifyDone();}, 10); return windowWatcher.wait_for('load').then(() => {
} return waitForFrame();
}).then(() => {
assert_equals(set.parentNode.getBBox().width, 100);
});
});
</script> </script>
</svg> </svg>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="0" y="0" width="100" height="100" fill="green" />
</svg>
<?xml version="1.0" encoding="UTF-8"?> <svg xmlns="http://www.w3.org/2000/svg">
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd"> <title>Animation triggers on 'repeat(1)'</title>
<svg onload="loaded()" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <script href="../../resources/testharness.js"/>
<rect x="0" y="0" width="0" height="100" fill="green"> <script href="../../resources/testharnessreport.js"/>
<rect width="0" height="100" fill="green">
<animate id="anim" attributeName="visibility" to="visible" begin="0s" dur="2s" repeatCount="4"/> <animate id="anim" attributeName="visibility" to="visible" begin="0s" dur="2s" repeatCount="4"/>
<set attributeName="width" to="100" begin="anim.repeat(1)"/> <set attributeName="width" to="100" begin="anim.repeat(1)"/>
</rect> </rect>
<script> <script>
if (window.testRunner) promise_test(t => {
testRunner.waitUntilDone(); document.documentElement.setCurrentTime(1.995);
let set = document.querySelector("set");
function loaded() { return new EventWatcher(t, set, 'beginEvent').wait_for('beginEvent').then(() => {
document.documentElement.setCurrentTime(2); assert_equals(set.parentNode.getBBox().width, 100);
});
if (window.testRunner) });
setTimeout(function(){testRunner.notifyDone();}, 30);
}
</script> </script>
</svg> </svg>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="0" y="0" width="100" height="100" fill="green" />
</svg>
<?xml version="1.0" encoding="UTF-8"?> <svg xmlns="http://www.w3.org/2000/svg">
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd"> <title>Animation triggers on 'repeat(2)'</title>
<svg onload="loaded()" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <script href="../../resources/testharness.js"/>
<rect x="0" y="0" width="0" height="100" fill="green"> <script href="../../resources/testharnessreport.js"/>
<rect width="0" height="100" fill="green">
<animate id="anim" attributeName="visibility" to="visible" begin="0s" dur="2s" repeatCount="4"/> <animate id="anim" attributeName="visibility" to="visible" begin="0s" dur="2s" repeatCount="4"/>
<set attributeName="width" to="100" begin="anim.repeat(2)"/> <set attributeName="width" to="100" begin="anim.repeat(2)"/>
</rect> </rect>
<script> <script>
if (window.testRunner) promise_test(t => {
testRunner.waitUntilDone(); document.documentElement.setCurrentTime(3.995);
let set = document.querySelector("set");
function loaded() { return new EventWatcher(t, set, 'beginEvent').wait_for('beginEvent').then(() => {
document.documentElement.setCurrentTime(4); assert_equals(set.parentNode.getBBox().width, 100);
});
if (window.testRunner) });
setTimeout(function(){testRunner.notifyDone();}, 10);
}
</script> </script>
</svg> </svg>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="0" y="0" width="100" height="100" fill="green" />
</svg>
<?xml version="1.0" encoding="UTF-8"?> <svg xmlns="http://www.w3.org/2000/svg">
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd"> <title>Animation triggers on 'repeat(3)'</title>
<svg onload="loaded()" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <script href="../../resources/testharness.js"/>
<rect x="0" y="0" width="0" height="100" fill="green"> <script href="../../resources/testharnessreport.js"/>
<rect width="0" height="100" fill="green">
<animate id="anim" attributeName="visibility" to="visible" begin="0s" dur="2s" repeatCount="4"/> <animate id="anim" attributeName="visibility" to="visible" begin="0s" dur="2s" repeatCount="4"/>
<set attributeName="width" to="100" begin="anim.repeat(3)"/> <set attributeName="width" to="100" begin="anim.repeat(3)"/>
</rect> </rect>
<script> <script>
if (window.testRunner) promise_test(t => {
testRunner.waitUntilDone(); document.documentElement.setCurrentTime(5.995);
let set = document.querySelector("set");
function loaded() { return new EventWatcher(t, set, 'beginEvent').wait_for('beginEvent').then(() => {
document.documentElement.setCurrentTime(6); assert_equals(set.parentNode.getBBox().width, 100);
});
if (window.testRunner) });
setTimeout(function(){testRunner.notifyDone();}, 30);
}
</script> </script>
</svg> </svg>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="0" y="0" width="0" height="100" fill="green" />
</svg>
<?xml version="1.0" encoding="UTF-8"?> <svg xmlns="http://www.w3.org/2000/svg">
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd"> <title>No repeat iteration at interval end</title>
<svg onload="loaded()" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <script href="../../resources/testharness.js"/>
<rect x="0" y="0" width="0" height="100" fill="green"> <script href="../../resources/testharnessreport.js"/>
<rect width="100" height="100" fill="green">
<animate id="anim" attributeName="visibility" to="visible" begin="0s" dur="2s" repeatCount="4"/> <animate id="anim" attributeName="visibility" to="visible" begin="0s" dur="2s" repeatCount="4"/>
<set attributeName="width" to="100" begin="anim.repeat(4)"/> <set attributeName="width" to="0" begin="anim.repeat(4)"/>
</rect> </rect>
<script> <script>
if (window.testRunner) function waitForFrame() {
testRunner.waitUntilDone(); return new Promise(resolve => {
window.requestAnimationFrame(resolve);
});
}
function loaded() { promise_test(t => {
document.documentElement.setCurrentTime(8); document.documentElement.setCurrentTime(7.995);
let set = document.querySelector("set");
if (window.testRunner) new EventWatcher(t, set, 'beginEvent');
setTimeout(function(){testRunner.notifyDone();}, 10); let anim = document.getElementById("anim");
} let animWatcher = new EventWatcher(t, anim, 'endEvent');
return animWatcher.wait_for('endEvent').then(() => {
return waitForFrame();
}).then(() => {
assert_equals(set.parentNode.getBBox().width, 100);
});
});
</script> </script>
</svg> </svg>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g>
<rect x="0" y="0" width="100" height="100" fill="green" />
<rect x="200" y="0" width="100" height="100" fill="green" />
<rect x="0" y="200" width="100" height="100" fill="green" />
<rect x="200" y="200" width="100" height="100" fill="green" />
</g>
</svg>
<?xml version="1.0" encoding="UTF-8"?> <svg xmlns="http://www.w3.org/2000/svg">
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd"> <title>Animation triggers on 'repeatEvent' iteration</title>
<svg onload="loaded()" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <script href="../../resources/testharness.js"/>
<script href="../../resources/testharnessreport.js"/>
<g> <g>
<animate id="anim" attributeName="visibility" to="visible" begin="0s" dur="2s" repeatCount="4"/> <animate id="anim" attributeName="visibility" to="visible" begin="0s" dur="2s" repeatCount="4"/>
<rect x="0" y="0" width="100" height="100" fill="green"> <rect x="0" y="0" width="100" height="100" fill="green">
...@@ -17,14 +18,31 @@ ...@@ -17,14 +18,31 @@
</rect> </rect>
</g> </g>
<script> <script>
if (window.testRunner) promise_test(t => {
testRunner.waitUntilDone(); let svg = document.documentElement;
let anim = document.getElementById('anim');
function loaded() { let animWatcher = new EventWatcher(t, anim, ['beginEvent', 'repeatEvent']);
document.documentElement.setCurrentTime(8); // Wait for #anims 'beginEvent' and then step through the
// 'repeatEvents' one at a time.
if (window.testRunner) let stepsPromise = animWatcher.wait_for('beginEvent').then(() => {
setTimeout(function(){testRunner.notifyDone();}, 30); svg.setCurrentTime(1.99);
} return animWatcher.wait_for('repeatEvent');
}).then(() => {
svg.setCurrentTime(3.99);
return animWatcher.wait_for('repeatEvent');
}).then(() => {
svg.setCurrentTime(5.99);
return animWatcher.wait_for('repeatEvent');
});
let setElements = document.getElementsByTagName('set');
let setBeginWatchers = Array.from(setElements).map(element => {
return new EventWatcher(t, element, 'beginEvent');
});
// Expect 'beginEvent' to be dispatched for all but the first 'set' element.
let beginPromises = setBeginWatchers.slice(1).map(watcher => {
return watcher.wait_for('beginEvent');
})
return Promise.all([stepsPromise, ...beginPromises]);
});
</script> </script>
</svg> </svg>
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment