Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Gecko Bug 1667629] support mpath pointing to shapes #25938

Merged
merged 1 commit into from
Oct 6, 2020
Merged

[Gecko Bug 1667629] support mpath pointing to shapes #25938

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 56 additions & 0 deletions svg/animations/animateMotion-circle.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
<!doctype html>
<html>
<meta charset="utf-8">
<title>Test for checking position of the svg element when animateMotion's mpath is a circle</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">
<circle id="circle" cx="-100" r="100" display="none"/>
<rect width="50" height="50" x="0" y="0" fill="green">
<animateMotion id="anim" begin="0s" dur="4s" fill="freeze">
<mpath href="#circle"/>
</animateMotion>
</rect>
</svg>

<script>
var rootSVGElement = document.querySelector("svg");
var epsilon = 1.0;

// Setup animation test
function sample1() {
assert_approx_equals(rootSVGElement.getBBox().x, 0, epsilon);
assert_approx_equals(rootSVGElement.getBBox().y, 0, epsilon);
}

function sample2() {
assert_approx_equals(rootSVGElement.getBBox().x, -200, epsilon);
assert_approx_equals(rootSVGElement.getBBox().y, 0, epsilon);
}

function sample3() {
assert_approx_equals(rootSVGElement.getBBox().x, 0, epsilon);
assert_approx_equals(rootSVGElement.getBBox().y, 0, epsilon);
}

smil_async_test((t) => {
var rects = rootSVGElement.ownerDocument.getElementsByTagName("rect");
rect1 = rects[0];

const expectedValues = [
// [animationId, time, sampleCallback]
["anim", 0.0, sample1],
["anim", 2.0, sample2],
["anim", 4.0, sample3]
];

runAnimationTest(t, expectedValues);
});

window.animationStartsImmediately = true;

</script>
53 changes: 53 additions & 0 deletions svg/animations/animateMotion-display-none.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
<!doctype html>
<html>
<meta charset="utf-8">
<title>Test for checking position of the svg element when animateMotion's mpath is display:none</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">
<path id="path" d="M0,0 100,0" display="none"/>
<rect width="50" height="50" x="0" y="0" fill="green">
<animateMotion id="anim" begin="0s" dur="4s" fill="freeze">
<mpath href="#path"/>
</animateMotion>
</rect>
</svg>

<script>
var rootSVGElement = document.querySelector("svg");
var epsilon = 1.0;

// Setup animation test
function sample1() {
assert_approx_equals(rootSVGElement.getBBox().x, 0, epsilon);
}

function sample2() {
assert_approx_equals(rootSVGElement.getBBox().x, 50, epsilon);
}

function sample3() {
assert_approx_equals(rootSVGElement.getBBox().x, 100, epsilon);
}

smil_async_test((t) => {
var rects = rootSVGElement.ownerDocument.getElementsByTagName("rect");
rect1 = rects[0];

const expectedValues = [
// [animationId, time, sampleCallback]
["anim", 0.0, sample1],
["anim", 2.0, sample2],
["anim", 4.0, sample3]
];

runAnimationTest(t, expectedValues);
});

window.animationStartsImmediately = true;

</script>
56 changes: 56 additions & 0 deletions svg/animations/animateMotion-ellipse.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
<!doctype html>
<html>
<meta charset="utf-8">
<title>Test for checking position of the svg element when animateMotion's mpath is an ellipse</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">
<ellipse id="ellipse" cx="-100" rx="100" display="none"/>
<rect width="50" height="50" x="0" y="0" fill="green">
<animateMotion id="anim" begin="0s" dur="4s" fill="freeze">
<mpath href="#ellipse"/>
</animateMotion>
</rect>
</svg>

<script>
var rootSVGElement = document.querySelector("svg");
var epsilon = 1.0;

// Setup animation test
function sample1() {
assert_approx_equals(rootSVGElement.getBBox().x, 0, epsilon);
assert_approx_equals(rootSVGElement.getBBox().y, 0, epsilon);
}

function sample2() {
assert_approx_equals(rootSVGElement.getBBox().x, -200, epsilon);
assert_approx_equals(rootSVGElement.getBBox().y, 0, epsilon);
}

function sample3() {
assert_approx_equals(rootSVGElement.getBBox().x, 0, epsilon);
assert_approx_equals(rootSVGElement.getBBox().y, 0, epsilon);
}

smil_async_test((t) => {
var rects = rootSVGElement.ownerDocument.getElementsByTagName("rect");
rect1 = rects[0];

const expectedValues = [
// [animationId, time, sampleCallback]
["anim", 0.0, sample1],
["anim", 2.0, sample2],
["anim", 4.0, sample3]
];

runAnimationTest(t, expectedValues);
});

window.animationStartsImmediately = true;

</script>
53 changes: 53 additions & 0 deletions svg/animations/animateMotion-line.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
<!doctype html>
<html>
<meta charset="utf-8">
<title>Test for checking position of the svg element when animateMotion's mpath is a line</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">
<line id="line" x2="100" display="none"/>
<rect width="50" height="50" x="0" y="0" fill="green">
<animateMotion id="anim" begin="0s" dur="4s" fill="freeze">
<mpath href="#line"/>
</animateMotion>
</rect>
</svg>

<script>
var rootSVGElement = document.querySelector("svg");
var epsilon = 1.0;

// Setup animation test
function sample1() {
assert_approx_equals(rootSVGElement.getBBox().x, 0, epsilon);
}

function sample2() {
assert_approx_equals(rootSVGElement.getBBox().x, 50, epsilon);
}

function sample3() {
assert_approx_equals(rootSVGElement.getBBox().x, 100, epsilon);
}

smil_async_test((t) => {
var rects = rootSVGElement.ownerDocument.getElementsByTagName("rect");
rect1 = rects[0];

const expectedValues = [
// [animationId, time, sampleCallback]
["anim", 0.0, sample1],
["anim", 2.0, sample2],
["anim", 4.0, sample3]
];

runAnimationTest(t, expectedValues);
});

window.animationStartsImmediately = true;

</script>
53 changes: 53 additions & 0 deletions svg/animations/animateMotion-rect.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
<!doctype html>
<html>
<meta charset="utf-8">
<title>Test for checking position of the svg element when animateMotion's mpath is a rect</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">
<rect id="rect" width="100" height="100" display="none"/>
<rect width="50" height="50" x="0" y="0" fill="green">
<animateMotion id="anim" begin="0s" dur="4s" fill="freeze">
<mpath href="#rect"/>
</animateMotion>
</rect>
</svg>

<script>
var rootSVGElement = document.querySelector("svg");
var epsilon = 1.0;

// Setup animation test
function sample1() {
assert_approx_equals(rootSVGElement.getBBox().x, 0, epsilon);
}

function sample2() {
assert_approx_equals(rootSVGElement.getBBox().x, 100, epsilon);
}

function sample3() {
assert_approx_equals(rootSVGElement.getBBox().x, 0, epsilon);
}

smil_async_test((t) => {
var rects = rootSVGElement.ownerDocument.getElementsByTagName("rect");
rect1 = rects[1];

const expectedValues = [
// [animationId, time, sampleCallback]
["anim", 0.0, sample1],
["anim", 2.0, sample2],
["anim", 4.0, sample3]
];

runAnimationTest(t, expectedValues);
});

window.animationStartsImmediately = true;

</script>