mirror of
https://github.com/servo/servo.git
synced 2025-10-17 00:39:15 +01:00
100 lines
No EOL
3.2 KiB
HTML
100 lines
No EOL
3.2 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<meta charset="utf-8">
|
|
<title>This removes and adds 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">
|
|
|
|
<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>
|
|
<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>
|
|
<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>
|
|
<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>
|
|
|
|
</svg>
|
|
|
|
<script>
|
|
var rootSVGElement = document.querySelector("svg");
|
|
var epsilon = 1.0;
|
|
|
|
// Setup animation test
|
|
function sample1() {
|
|
expectFillColor(rect1, 0, 255, 0);
|
|
expectFillColor(rect2, 255, 0, 0);
|
|
expectFillColor(rect3, 255, 0, 0);
|
|
expectFillColor(rect4, 255, 0, 0);
|
|
}
|
|
|
|
function sample2() {
|
|
expectFillColor(rect1, 0, 255, 0);
|
|
expectFillColor(rect2, 0, 255, 0);
|
|
expectFillColor(rect3, 255, 0, 0);
|
|
expectFillColor(rect4, 255, 0, 0);
|
|
}
|
|
|
|
function sample3() {
|
|
expectFillColor(rect1, 0, 255, 0);
|
|
expectFillColor(rect2, 0, 255, 0);
|
|
expectFillColor(rect3, 0, 255, 0);
|
|
expectFillColor(rect4, 255, 0, 0);
|
|
}
|
|
|
|
function sample4() {
|
|
expectFillColor(rect1, 0, 255, 0);
|
|
expectFillColor(rect2, 0, 255, 0);
|
|
expectFillColor(rect3, 0, 255, 0);
|
|
expectFillColor(rect4, 0, 255, 0);
|
|
}
|
|
|
|
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", 0.0, sample1],
|
|
["anim", 0.001, sample1],
|
|
["anim", 2.0, sample1],
|
|
["anim", 2.001, sample2],
|
|
["anim", 4.0, sample2],
|
|
["anim", 4.001, sample3],
|
|
["anim", 5.0, recreate],
|
|
["anim", 6.0, sample3],
|
|
["anim", 6.001, sample4]
|
|
];
|
|
|
|
runAnimationTest(t, expectedValues);
|
|
});
|
|
|
|
window.animationStartsImmediately = true;
|
|
|
|
</script> |