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>
<html>
<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/testharnessreport.js"></script>
<script src="/resources/SVGAnimationTestCase-testharness.js"></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">
<svg>
<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)">
<set attributeName="fill" to="rgb(255, 0, 0)" begin="anim.repeat(0)"/>
<rect x="0" y="0" width="50" height="50" fill="lime">
<set attributeName="fill" to="red" begin="anim.repeat(0)"/>
</rect>
<rect x="200" y="0" width="100" height="100" fill="rgb(255, 0, 0)">
<set attributeName="fill" to="rgb(0, 255, 0)" begin="anim.repeat(1)"/>
<rect x="50" y="0" width="50" height="50" fill="red">
<set attributeName="fill" to="lime" begin="anim.repeat(1)"/>
</rect>
<rect x="0" y="200" width="100" height="100" fill="rgb(255, 0, 0)">
<set attributeName="fill" to="rgb(0, 255, 0)" begin="anim.repeat(2)"/>
<rect x="0" y="50" width="50" height="50" fill="red">
<set attributeName="fill" to="lime" begin="anim.repeat(2)"/>
</rect>
<rect x="200" y="200" width="100" height="100" fill="rgb(255, 0, 0)">
<set attributeName="fill" to="rgb(0, 255, 0)" begin="anim.repeat(3)"/>
<rect x="50" y="50" width="50" height="50" fill="red">
<set attributeName="fill" to="lime" begin="anim.repeat(3)"/>
</rect>
</svg>
<script>
var rootSVGElement = document.querySelector("svg");
var epsilon = 1.0;
// 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],
];
function recreate(anim) {
anim.parentNode.removeChild(anim);
return document.querySelector('svg').appendChild(anim.cloneNode());
}
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>
<?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"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
<svg onload="loaded()" 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 xmlns="http://www.w3.org/2000/svg">
<title>Animation triggers on 'beginEvent'</title>
<script href="../../resources/testharness.js"/>
<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"/>
<set attributeName="width" to="100" begin="anim.beginEvent" />
<set attributeName="width" to="100" begin="anim.beginEvent"/>
</rect>
<script>
if (window.testRunner)
testRunner.waitUntilDone();
function loaded() {
document.documentElement.setCurrentTime(2);
if (window.testRunner)
setTimeout(function(){testRunner.notifyDone();}, 100);
}
async_test(t => {
let set = document.querySelector('set');
set.addEventListener('beginEvent', t.step_func_done(function() {
assert_equals(set.parentNode.getBBox().width, 100);
}));
});
</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">
<rect x="100" y="0" width="50" height="50" fill="green" />
</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 onload="loaded()" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="0" y="0" width="50" height="50" fill="green">
<animate id="anim" attributeName="visibility" to="visible" begin="0s" end="2s" />
<set attributeName="x" to="100" begin="anim.endEvent" />
<svg xmlns="http://www.w3.org/2000/svg">
<title>Animation triggers on 'endEvent'</title>
<script href="../../resources/testharness.js"/>
<script href="../../resources/testharnessreport.js"/>
<rect width="0" height="100" fill="green">
<animate id="anim" attributeName="visibility" to="visible" begin="0s" end="2s"/>
<set attributeName="width" to="100" begin="anim.endEvent"/>
</rect>
<script>
if (window.testRunner)
testRunner.waitUntilDone();
async_test(t => {
document.documentElement.setCurrentTime(1.99);
function loaded() {
document.documentElement.setCurrentTime(2);
if (window.testRunner)
setTimeout(function() {testRunner.notifyDone();}, 100);
}
let set = document.querySelector('set');
set.addEventListener('beginEvent', t.step_func_done(function() {
assert_equals(set.parentNode.getBBox().width, 100);
}));
});
</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">
<rect x="0" y="0" width="100" height="100" fill="green" />
</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 onload="loaded()" 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">
<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" />
<svg xmlns="http://www.w3.org/2000/svg">
<title>'onbegin' event handler content attribute</title>
<script href="../../resources/testharness.js"/>
<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"
onbegin="document.getElementById('anim2').beginElement()"/>
<set id="anim2" attributeName="width" to="100" begin="indefinite"/>
</rect>
<script>
if (window.testRunner)
testRunner.waitUntilDone();
function loaded() {
document.documentElement.setCurrentTime(2);
if (window.testRunner)
setTimeout(function(){testRunner.notifyDone();}, 100);
}
async_test(t => {
let set = document.getElementById('anim2');
set.addEventListener('beginEvent', t.step_func_done(function() {
assert_equals(set.parentNode.getBBox().width, 100);
}));
});
</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">
<rect x="0" y="0" width="100" height="100" fill="green" />
</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 onload="loaded()" 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">
<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" />
<svg xmlns="http://www.w3.org/2000/svg">
<title>'onend' event handler content attribute</title>
<script href="../../resources/testharness.js"/>
<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"
onend="document.getElementById('anim2').beginElement()"/>
<set id="anim2" attributeName="width" to="100" begin="indefinite"/>
</rect>
<script>
if (window.testRunner)
testRunner.waitUntilDone();
async_test(t => {
document.documentElement.setCurrentTime(1.99);
function loaded() {
document.documentElement.setCurrentTime(2);
if (window.testRunner)
setTimeout(function(){testRunner.notifyDone();}, 100);
}
let set = document.getElementById('anim2');
set.addEventListener('beginEvent', t.step_func_done(function() {
assert_equals(set.parentNode.getBBox().width, 100);
}));
});
</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">
<rect x="0" y="0" width="100" height="100" fill="green" />
</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 onload="loaded()" 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">
<animate id="anim" attributeName="visibility" to="visible" begin="0s" dur="1s" fill="freeze" repeatCount="2" onrepeat="document.getElementById('anim2').beginElement()"/>
<svg xmlns="http://www.w3.org/2000/svg">
<title>'onrepeat' event handler content attribute</title>
<script href="../../resources/testharness.js"/>
<script href="../../resources/testharnessreport.js"/>
<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" />
</rect>
<script>
if (window.testRunner)
testRunner.waitUntilDone();
async_test(t => {
document.documentElement.setCurrentTime(0.99);
function loaded() {
document.documentElement.setCurrentTime(2);
if (window.testRunner)
setTimeout(function(){testRunner.notifyDone();}, 100);
}
let set = document.getElementById('anim2');
set.addEventListener('beginEvent', t.step_func_done(function() {
assert_equals(set.parentNode.getBBox().width, 100);
}));
});
</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">
<rect x="0" y="0" width="100" height="100" fill="green" />
</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 onload="loaded()" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="0" y="0" width="0" height="0" fill="green">
<animate id="anim" attributeName="width" from="0" to="100" begin="0s" dur="1s" repeatCount="2" fill="freeze"/>
<set attributeName="height" to="100" begin="anim.repeatEvent"/>
<svg xmlns="http://www.w3.org/2000/svg">
<title>Animation triggers on 'repeatEvent'</title>
<script href="../../resources/testharness.js"/>
<script href="../../resources/testharnessreport.js"/>
<rect width="0" height="100" fill="green">
<animate id="anim" attributeName="visibility" to="visible" begin="0s" dur="1s" repeatCount="2" fill="freeze"/>
<set attributeName="width" to="100" begin="anim.repeatEvent"/>
</rect>
<script>
if (window.testRunner)
testRunner.waitUntilDone();
async_test(t => {
document.documentElement.setCurrentTime(0.99);
function loaded() {
document.documentElement.setCurrentTime(2);
if (window.testRunner)
setTimeout(function(){testRunner.notifyDone();}, 100);
}
let set = document.querySelector('set');
set.addEventListener('beginEvent', t.step_func_done(function() {
assert_equals(set.parentNode.getBBox().width, 100);
}));
});
</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">
<rect x="0" y="0" width="0" height="100" fill="green" />
</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 onload="loaded()" 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 xmlns="http://www.w3.org/2000/svg">
<title>Animation does not triggers on 'repeat(0)'</title>
<script href="../../resources/testharness.js"/>
<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"/>
<set attributeName="width" to="100" begin="anim.repeat(0)"/>
<set attributeName="width" to="0" begin="anim.repeat(0)"/>
</rect>
<script>
if (window.testRunner)
testRunner.waitUntilDone();
function loaded() {
document.documentElement.setCurrentTime(0);
if (window.testRunner)
setTimeout(function(){testRunner.notifyDone();}, 10);
function waitForFrame() {
return new Promise(resolve => {
window.requestAnimationFrame(resolve);
});
}
promise_test(t => {
let set = document.querySelector("set");
new EventWatcher(t, set, 'beginEvent');
let windowWatcher = new EventWatcher(t, window, 'load');
return windowWatcher.wait_for('load').then(() => {
return waitForFrame();
}).then(() => {
assert_equals(set.parentNode.getBBox().width, 100);
});
});
</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">
<rect x="0" y="0" width="100" height="100" fill="green" />
</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 onload="loaded()" 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 xmlns="http://www.w3.org/2000/svg">
<title>Animation triggers on 'repeat(1)'</title>
<script href="../../resources/testharness.js"/>
<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"/>
<set attributeName="width" to="100" begin="anim.repeat(1)"/>
</rect>
<script>
if (window.testRunner)
testRunner.waitUntilDone();
function loaded() {
document.documentElement.setCurrentTime(2);
if (window.testRunner)
setTimeout(function(){testRunner.notifyDone();}, 30);
}
promise_test(t => {
document.documentElement.setCurrentTime(1.995);
let set = document.querySelector("set");
return new EventWatcher(t, set, 'beginEvent').wait_for('beginEvent').then(() => {
assert_equals(set.parentNode.getBBox().width, 100);
});
});
</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">
<rect x="0" y="0" width="100" height="100" fill="green" />
</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 onload="loaded()" 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 xmlns="http://www.w3.org/2000/svg">
<title>Animation triggers on 'repeat(2)'</title>
<script href="../../resources/testharness.js"/>
<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"/>
<set attributeName="width" to="100" begin="anim.repeat(2)"/>
</rect>
<script>
if (window.testRunner)
testRunner.waitUntilDone();
function loaded() {
document.documentElement.setCurrentTime(4);
if (window.testRunner)
setTimeout(function(){testRunner.notifyDone();}, 10);
}
promise_test(t => {
document.documentElement.setCurrentTime(3.995);
let set = document.querySelector("set");
return new EventWatcher(t, set, 'beginEvent').wait_for('beginEvent').then(() => {
assert_equals(set.parentNode.getBBox().width, 100);
});
});
</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">
<rect x="0" y="0" width="100" height="100" fill="green" />
</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 onload="loaded()" 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 xmlns="http://www.w3.org/2000/svg">
<title>Animation triggers on 'repeat(3)'</title>
<script href="../../resources/testharness.js"/>
<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"/>
<set attributeName="width" to="100" begin="anim.repeat(3)"/>
</rect>
<script>
if (window.testRunner)
testRunner.waitUntilDone();
function loaded() {
document.documentElement.setCurrentTime(6);
if (window.testRunner)
setTimeout(function(){testRunner.notifyDone();}, 30);
}
promise_test(t => {
document.documentElement.setCurrentTime(5.995);
let set = document.querySelector("set");
return new EventWatcher(t, set, 'beginEvent').wait_for('beginEvent').then(() => {
assert_equals(set.parentNode.getBBox().width, 100);
});
});
</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">
<rect x="0" y="0" width="0" height="100" fill="green" />
</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 onload="loaded()" 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 xmlns="http://www.w3.org/2000/svg">
<title>No repeat iteration at interval end</title>
<script href="../../resources/testharness.js"/>
<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"/>
<set attributeName="width" to="100" begin="anim.repeat(4)"/>
<set attributeName="width" to="0" begin="anim.repeat(4)"/>
</rect>
<script>
if (window.testRunner)
testRunner.waitUntilDone();
function loaded() {
document.documentElement.setCurrentTime(8);
if (window.testRunner)
setTimeout(function(){testRunner.notifyDone();}, 10);
function waitForFrame() {
return new Promise(resolve => {
window.requestAnimationFrame(resolve);
});
}
promise_test(t => {
document.documentElement.setCurrentTime(7.995);
let set = document.querySelector("set");
new EventWatcher(t, set, 'beginEvent');
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>
</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"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
<svg onload="loaded()" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<svg xmlns="http://www.w3.org/2000/svg">
<title>Animation triggers on 'repeatEvent' iteration</title>
<script href="../../resources/testharness.js"/>
<script href="../../resources/testharnessreport.js"/>
<g>
<animate id="anim" attributeName="visibility" to="visible" begin="0s" dur="2s" repeatCount="4"/>
<rect x="0" y="0" width="100" height="100" fill="green">
......@@ -17,14 +18,31 @@
</rect>
</g>
<script>
if (window.testRunner)
testRunner.waitUntilDone();
function loaded() {
document.documentElement.setCurrentTime(8);
if (window.testRunner)
setTimeout(function(){testRunner.notifyDone();}, 30);
}
promise_test(t => {
let svg = document.documentElement;
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(() => {
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>
</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