diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-28 14:29:10 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-28 14:29:10 +0000 |
commit | 2aa4a82499d4becd2284cdb482213d541b8804dd (patch) | |
tree | b80bf8bf13c3766139fbacc530efd0dd9d54394c /layout/reftests/svg/smil/motion | |
parent | Initial commit. (diff) | |
download | firefox-upstream.tar.xz firefox-upstream.zip |
Adding upstream version 86.0.1.upstream/86.0.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'layout/reftests/svg/smil/motion')
21 files changed, 779 insertions, 0 deletions
diff --git a/layout/reftests/svg/smil/motion/animateMotion-by-1.svg b/layout/reftests/svg/smil/motion/animateMotion-by-1.svg new file mode 100644 index 0000000000..072947735e --- /dev/null +++ b/layout/reftests/svg/smil/motion/animateMotion-by-1.svg @@ -0,0 +1,53 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script type="text/javascript"> + function doTest() { + setTimeAndSnapshot(101, true); + } + window.addEventListener("MozReftestInvalidate", doTest, false); + </script> + + <!-- Big green background to match lime.svg --> + <rect width="100%" height="100%" fill="lime"/> + <!-- Red "workspaces" (should be covered up, if tests pass) --> + <rect x="100" y="100" width="100" height="100" fill="red"/> + <rect x="100" y="300" width="100" height="100" fill="red"/> + + <!-- FIRST ROW --> + <!-- Check that 'by' works at all --> + <rect fill="lime" x="0" y="0" width="50" height="50"> + <animateMotion by="100, 100" begin="100" dur="1" fill="freeze"/> + </rect> + + <!-- Check that 'by' is additive w/ 'by' --> + <rect fill="lime" x="50" y="50" width="50" height="50"> + <animateMotion by="60, 75" begin="100" dur="1" fill="freeze"/> + <animateMotion by="40, -25" begin="100" dur="1" fill="freeze"/> + </rect> + + <!-- SECOND ROW --> + <!-- Check that 'by' is additive w/ 'to' --> + <rect fill="lime" width="50" height="50"> + <animateMotion to="50,100" begin="100" dur="1" fill="freeze"/> + <animateMotion by="50, 50" begin="100" dur="1" fill="freeze"/> + </rect> + + <!-- Check that 'from-to' replaces 'by' --> + <rect fill="lime" width="50" height="50"> + <animateMotion by="500, 500" begin="100" dur="1" fill="freeze"/> + <animateMotion from="300,300" to="150,150" begin="100" dur="1" fill="freeze"/> + </rect> + + <!-- Other tags --> + <foreignObject id="fo" x="0" y="0" width="100" height="50"> + <div xmlns="http://www.w3.org/1999/xhtml" style="width:100%;height:100%;background-color:lime"/> + </foreignObject> + <animateMotion xlink:href="#fo" by="100, 300" begin="100" dur="1" fill="freeze"/> + + <svg x="0" y="50" width="100" height="50"> + <rect width="100" height="50" fill="lime"/> + <animateMotion by="100, 300" begin="100" dur="1" fill="freeze"/> + </svg> +</svg> diff --git a/layout/reftests/svg/smil/motion/animateMotion-by-2.svg b/layout/reftests/svg/smil/motion/animateMotion-by-2.svg new file mode 100644 index 0000000000..9502828c35 --- /dev/null +++ b/layout/reftests/svg/smil/motion/animateMotion-by-2.svg @@ -0,0 +1,16 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" transform="translate(100,0)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script type="text/javascript"> + function doTest() { + setTimeAndSnapshot(101, true); + } + window.addEventListener("MozReftestInvalidate", doTest, false); + </script> + + <animateMotion by="-100, 0" begin="100" dur="1" fill="freeze"/> + + <!-- Big green background to match lime.svg --> + <rect width="100%" height="100%" fill="lime"/> +</svg> diff --git a/layout/reftests/svg/smil/motion/animateMotion-flattening-1.svg b/layout/reftests/svg/smil/motion/animateMotion-flattening-1.svg new file mode 100644 index 0000000000..cf3a55523a --- /dev/null +++ b/layout/reftests/svg/smil/motion/animateMotion-flattening-1.svg @@ -0,0 +1,26 @@ + <svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="100%" height="100%" viewBox="0 0 45 45" preserveAspectRatio="none"
+ class="reftest-wait">
+ <!--
+ Bug 946540. Test that motion paths with inflection points that both lie
+ outside of (0, 1) are flattened correctly.
+
+ We have a lime background and move a red square along a motion path. If
+ the path is not flattened correctly the red square will get stuck at the
+ point where it covers the viewport.
+ -->
+ <script xlink:href="../smil-util.js"/>
+ <script>
+ window.addEventListener("MozReftestInvalidate", function() {
+ setTimeAndSnapshot(110, true);
+ }, false);
+ </script>
+ <!-- Lime background -->
+ <rect width="100%" height="100%" fill="lime"/>
+ <!-- Animated square -->
+ <rect x="-25" y="-25" width="50" height="50" fill="red">
+ <animateMotion calcMode="paced" begin="100s" dur="1s" fill="freeze"
+ path="m0-32c0 25 10 46 22 56 34 28 75 35 102 38"/>
+ </rect>
+ </svg>
diff --git a/layout/reftests/svg/smil/motion/animateMotion-from-to-1.svg b/layout/reftests/svg/smil/motion/animateMotion-from-to-1.svg new file mode 100644 index 0000000000..065ee36b12 --- /dev/null +++ b/layout/reftests/svg/smil/motion/animateMotion-from-to-1.svg @@ -0,0 +1,44 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script type="text/javascript"> + function doTest() { + setTimeAndSnapshot(101, true); + } + window.addEventListener("MozReftestInvalidate", doTest, false); + </script> + + <!-- Big green background to match lime.svg --> + <rect width="100%" height="100%" fill="lime"/> + <!-- Red "workspace" (should be covered up, if tests pass) --> + <rect x="100" y="100" width="100" height="100" fill="red"/> + + <!-- FIRST ROW --> + <!-- Check that 'from' gets applied at begin time --> + <rect fill="lime" x="0" y="0" width="50" height="50"> + <animateMotion from="100, 100" to="500, 500" begin="101" dur="1"/> + </rect> + + <!-- Check that 'to' gets hit at end time --> + <rect fill="lime" x="0" y="0" width="50" height="50"> + <animateMotion from="200,200" to="150,100" begin="100" dur="1" fill="freeze"/> + </rect> + + <!-- SECOND ROW --> + <!-- Check that animation effects are removed after end time + (note that fill="remove" is default; just specifying it for clarity --> + <rect fill="lime" x="100" y="150" width="50" height="50"> + <animateMotion from="500,500" to="600,600" begin="1000" dur="1" fill="remove"/> + </rect> + <rect fill="purple" x="-25" y="-25" width="25" height="25"> + <!-- With the purple rect's x/y offsets, this animateMotion path moves us + around the 2nd row, 1st col --> + <animateMotion from="125,175" to="150,175" begin="100" dur="1" fill="remove"/> + </rect> + + <!-- Check interpolation halfway through animation --> + <rect fill="lime" width="50" height="50"> + <animateMotion from="200,100" to="100,200" begin="100.5" dur="1"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/motion/animateMotion-indefinite-to-1.svg b/layout/reftests/svg/smil/motion/animateMotion-indefinite-to-1.svg new file mode 100644 index 0000000000..12c62da2c8 --- /dev/null +++ b/layout/reftests/svg/smil/motion/animateMotion-indefinite-to-1.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <!-- Test that an indefinite to-animation just sticks to the base value for + animateMotion. --> + <rect width="100%" height="100%" fill="lime"/> + + <rect x="15" y="15" width="100" height="100" fill="red"/> + <rect x="15" y="15" width="100" height="100" fill="lime"> + <animateMotion to="500,500" dur="indefinite"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/motion/animateMotion-indefinite-to-2.svg b/layout/reftests/svg/smil/motion/animateMotion-indefinite-to-2.svg new file mode 100644 index 0000000000..82f5a61a05 --- /dev/null +++ b/layout/reftests/svg/smil/motion/animateMotion-indefinite-to-2.svg @@ -0,0 +1,11 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <!-- Test that an indefinite to-animation with discrete calcMode applies + the underlying value for the whole time. --> + <rect width="100%" height="100%" fill="lime"/> + + <rect x="15" y="15" width="100" height="100" fill="red"/> + <rect x="15" y="15" width="100" height="100" fill="lime"> + <animateMotion to="500,500" dur="indefinite" + calcMode="discrete"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/motion/animateMotion-mpath-pathLength-1.svg b/layout/reftests/svg/smil/motion/animateMotion-mpath-pathLength-1.svg new file mode 100644 index 0000000000..ffb991c1a6 --- /dev/null +++ b/layout/reftests/svg/smil/motion/animateMotion-mpath-pathLength-1.svg @@ -0,0 +1,31 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" class="reftest-wait"> + <title>Test that pathLength of paths has no effect in animation</title> + <defs> + <path id="path" pathLength="100" d="M0,0 h400" /> + </defs> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script type="text/javascript"> + function doTest() { + setTimeAndSnapshot(100.5, true); + } + window.addEventListener("MozReftestInvalidate", doTest, false); + </script> + <rect width="100%" height="100%" fill="lime"/> + + <!-- calcMode="linear" --> + <rect x="10" y="10" width="100" height="100" fill="red"/> + <rect x="-190" y="10" width="100" height="100" fill="lime"> + <animateMotion begin="100s" dur="1s" keyPoints="0;1" keyTimes="0;1" calcMode="linear"> + <mpath xlink:href="#path" /> + </animateMotion> + </rect> + + <!-- calcMode="paced" --> + <rect x="10" y="110" width="100" height="100" fill="red"/> + <rect x="-190" y="110" width="100" height="100" fill="lime"> + <animateMotion begin="100s" dur="1s"> + <mpath xlink:href="#path" /> + </animateMotion> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/motion/animateMotion-mpath-shadow.svg b/layout/reftests/svg/smil/motion/animateMotion-mpath-shadow.svg new file mode 100644 index 0000000000..d57aa1a29f --- /dev/null +++ b/layout/reftests/svg/smil/motion/animateMotion-mpath-shadow.svg @@ -0,0 +1,34 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" class="reftest-wait"> + <title>Test that pathLength works inside a shadow tree</title> + <defs> + <path id="path" pathLength="100" d="M0,0 h400" /> + <g id="content"> + <rect width="100%" height="100%" fill="lime"/> + + <!-- calcMode="linear" --> + <rect x="10" y="10" width="100" height="100" fill="red"/> + <rect x="-190" y="10" width="100" height="100" fill="lime"> + <animateMotion begin="100s" dur="1s" keyPoints="0;1" keyTimes="0;1" calcMode="linear"> + <mpath xlink:href="#path" /> + </animateMotion> + </rect> + + <!-- calcMode="paced" --> + <rect x="10" y="110" width="100" height="100" fill="red"/> + <rect x="-190" y="110" width="100" height="100" fill="lime"> + <animateMotion begin="100s" dur="1s"> + <mpath xlink:href="#path" /> + </animateMotion> + </rect> + </g> + </defs> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script type="text/javascript"> + function doTest() { + setTimeAndSnapshot(100.5, true); + } + window.addEventListener("MozReftestInvalidate", doTest, false); + </script> + <use xlink:href="#content"></use> +</svg> diff --git a/layout/reftests/svg/smil/motion/animateMotion-mpath-target-transform-1.svg b/layout/reftests/svg/smil/motion/animateMotion-mpath-target-transform-1.svg new file mode 100644 index 0000000000..c8f5919b79 --- /dev/null +++ b/layout/reftests/svg/smil/motion/animateMotion-mpath-target-transform-1.svg @@ -0,0 +1,14 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Test that 'transform' on the <mpath> target has no affect</title> + <defs> + <path id="path" d="M0,0 L100,100" transform="translate(100,0)"/> + </defs> + <rect width="100%" height="100%" fill="lime"/> + <rect x="10" y="10" width="100" height="100" fill="red"/> + <rect x="10" y="10" width="100" height="100" fill="lime"> + <animateMotion dur="indefinite"> + <mpath xlink:href="#path"/> + </animateMotion> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/motion/animateMotion-mpath-targetChange-1.svg b/layout/reftests/svg/smil/motion/animateMotion-mpath-targetChange-1.svg new file mode 100644 index 0000000000..b2a408ca62 --- /dev/null +++ b/layout/reftests/svg/smil/motion/animateMotion-mpath-targetChange-1.svg @@ -0,0 +1,151 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait"> + <style> + .background { fill: lime } + .workspace { fill: red } + .test { fill: lime } + </style> + <defs> + <!-- 'Dummy' path --> + <path id="moveFarAway" d="M300,300 h0"/> + + <path id="moveToUpperLeft" d="M100,100 h0"/> + + <path id="pathWhoseDAttrChanges" d="M360,360 h0"/> + + <!-- The first of these two elems w/ same ID should be used. --> + <path id="moveToMiddleLeft" d="M100,150 h0"/> + <path id="moveToMiddleLeft" d="M350,350 h0"/> + + <!-- The first of these two elems w/ same ID initially wins, but then + it gets removed via script. --> + <path id="moveToMiddleCenter" d="M340,340 h0"/> + <path id="moveToMiddleCenter" d="M150,150 h0"/> + + <!-- This elem doesn't do what its id would suggest, but we'll use JS to + add an earlier elem with the same ID that *does* do what it says. --> + <path id="moveToMiddleRight" d="M330,330 h0"/> + + <path id="moveToLowerLeft" d="M100,200 h0"/> + <path id="moveToLowerCenter" d="M150,200 h0"/> + + </defs> + + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script type="text/javascript"> + const SVGNS = "http://www.w3.org/2000/svg"; + const XLINKNS = "http://www.w3.org/1999/xlink"; + + + function insertPathElem(aPathId, aPathSpec) { + var newPath = document.createElementNS(SVGNS, "path"); + newPath.setAttribute("id", aPathId); + newPath.setAttribute("d", aPathSpec); + + // Insert new path into defs + var defsElem = document.getElementsByTagName("defs")[0]; + defsElem.insertBefore(newPath, defsElem.firstChild); + } + + function doTest() { + // Seek already, so we'll have sampled the initial 'stale' state + document.documentElement.setCurrentTime(1); + + // Make tweaks + var mpathToModify = document.getElementById("modifyMyTarget"); + mpathToModify.setAttributeNS(XLINKNS, "href", "#moveToUpperLeft"); + + var mpathWhoseHrefNeedsClearing = document.getElementById("unsetMyTarget"); + mpathWhoseHrefNeedsClearing.removeAttributeNS(XLINKNS, "href"); + + var pathToTweak = document.getElementById("pathWhoseDAttrChanges"); + pathToTweak.setAttribute("d", "M200 100 h0"); + + var mpathToDelete = document.getElementById("removeMe"); + mpathToDelete.parentNode.removeChild(mpathToDelete); + + var pathToDelete = document.getElementById("moveToMiddleCenter"); + pathToDelete.parentNode.removeChild(pathToDelete); + + insertPathElem("moveToMiddleRight", "M200,150 h0"); + insertPathElem("moveToLowerRight", "M200,200 h0"); + + setTimeAndSnapshot(1, true); + } + window.addEventListener("MozReftestInvalidate", doTest, false); + </script> + + <!-- Big green background to match lime.svg --> + <rect class="background" width="100%" height="100%" /> + <!-- Red "workspace" (should be covered up, if tests pass) --> + <rect class="workspace" x="100" y="100" width="150" height="150"/> + + <!-- FIRST ROW: Test behavior... --> + <!-- ...when mpath's 'xlink:href' attr is modified. --> + <rect class="test" x="0" y="0" width="50" height="50"> + <animateMotion begin="1" dur="1" fill="freeze"> + <mpath id="modifyMyTarget" xlink:href="#moveFarAway"/> + </animateMotion> + </rect> + + <!-- ...when mpath's 'xlink:href' is unset. --> + <rect class="test" x="150" y="100" width="50" height="50"> + <animateMotion begin="1" dur="1" fill="freeze"> + <mpath id="unsetMyTarget" xlink:href="#moveFarAway"/> + </animateMotion> + </rect> + + <!-- ...when the target-path's "d" attr is modified. --> + <rect class="test" x="0" y="0" width="50" height="50"> + <animateMotion begin="1" dur="1" fill="freeze"> + <mpath xlink:href="#pathWhoseDAttrChanges"/> + </animateMotion> + </rect> + + <!-- SECOND ROW: Test behavior... --> + <!-- ...when there are two paths with same ID (first should win) --> + <rect class="test" x="0" y="0" width="50" height="50"> + <animateMotion begin="1" dur="1" fill="freeze"> + <mpath xlink:href="#moveToMiddleLeft"/> + </animateMotion> + </rect> + + <!-- ...when there are two paths with same ID, and the first is removed. --> + <rect class="test" x="0" y="0" width="50" height="50"> + <animateMotion begin="1" dur="1" fill="freeze"> + <mpath xlink:href="#moveToMiddleCenter"/> + </animateMotion> + </rect> + + <!-- ...when an earlier path is added with our target ID. --> + <rect class="test" x="0" y="0" width="50" height="50"> + <animateMotion begin="1" dur="1" fill="freeze"> + <mpath xlink:href="#moveToMiddleRight"/> + </animateMotion> + </rect> + + <!-- THIRD ROW: Test behavior... --> + <!-- ...when there are two mpath children (first should win). --> + <rect class="test" x="0" y="0" width="50" height="50"> + <animateMotion begin="1" dur="1" fill="freeze"> + <mpath xlink:href="#moveToLowerLeft"/> + <mpath xlink:href="#moveFarAway"/> + </animateMotion> + </rect> + + <!-- ...when there are two mpath children, and the first is removed. --> + <rect class="test" x="0" y="0" width="50" height="50"> + <animateMotion begin="1" dur="1" fill="freeze"> + <mpath id="removeMe" xlink:href="#moveFarAway"/> + <mpath xlink:href="#moveToLowerCenter"/> + </animateMotion> + </rect> + <!-- ...when there's an mpath child that initially matches nothing, until + a node with the right ID is inserted into the DOM. --> + <rect class="test" x="0" y="0" width="50" height="50"> + <animateMotion begin="1" dur="1" fill="freeze"> + <mpath xlink:href="#moveToLowerRight"/> + </animateMotion> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/motion/animateMotion-rotate-1a.svg b/layout/reftests/svg/smil/motion/animateMotion-rotate-1a.svg new file mode 100644 index 0000000000..414a6c718b --- /dev/null +++ b/layout/reftests/svg/smil/motion/animateMotion-rotate-1a.svg @@ -0,0 +1,63 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait"> + <style> + .background { fill: lime } + .workspace { fill: red } + .test { fill: lime } + .filler { fill: lime } + </style> + + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script type="text/javascript"> + function doTest() { + setTimeAndSnapshot(101, true); + } + window.addEventListener("MozReftestInvalidate", doTest, false); + </script> + + <!-- Big green background to match lime.svg --> + <rect class="background" width="100%" height="100%" /> + <!-- Red "workspace" (should be covered up, if tests pass) --> + <rect class="workspace" x="100" y="100" width="100" height="100"/> + + <!-- FIRST ROW --> + <!-- Check that 'rotate' gets applied at begin time --> + <g> + <animateMotion from="150, 100" to="500, 500" rotate="90" + begin="101" dur="1"/> + <rect class="test" x="0" y="0" width="20" height="50"/> + <rect class="test" x="0" y="0" width="50" height="20"/> + </g> + <rect class="filler" x="100" y="120" width="30" height="30"/> + + <!-- Check that 'rotate' gets applied at end time --> + <g> + <animateMotion from="600, 700" to="200, 150" rotate="180" begin="100" + dur="1" fill="freeze"/> + <rect class="test" x="0" y="0" width="20" height="50"/> + <rect class="test" x="0" y="0" width="50" height="20"/> + </g> + <rect class="filler" x="150" y="100" width="30" height="30"/> + + <!-- SECOND ROW --> + <!-- Check that rotate combines with existing rotate --> + <g transform="rotate(90)"> + <animateMotion from="150,200" to="600,600" rotate="90" + begin="101" dur="1"/> + <rect class="test" x="0" y="0" width="20" height="50"/> + <rect class="test" x="0" y="0" width="50" height="20"/> + </g> + <rect class="filler" x="100" y="150" width="30" height="30"/> + + <!-- Check additivity of <animateMotion> "rotate" adds --> + <g> + <animateMotion from="100,100" to="100,200" rotate="90" + begin="100.5" dur="1"/> + <animateMotion by="100,-200" rotate="90" + begin="100.5" dur="1"/> + <rect class="test" x="0" y="0" width="20" height="50"/> + <rect class="test" x="0" y="0" width="50" height="20"/> + </g> + <rect class="filler" x="150" y="150" width="30" height="30"/> +</svg> diff --git a/layout/reftests/svg/smil/motion/animateMotion-rotate-1b.svg b/layout/reftests/svg/smil/motion/animateMotion-rotate-1b.svg new file mode 100644 index 0000000000..8c4287d33e --- /dev/null +++ b/layout/reftests/svg/smil/motion/animateMotion-rotate-1b.svg @@ -0,0 +1,63 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait"> + <style> + .background { fill: lime } + .workspace { fill: red } + .test { fill: lime } + .filler { fill: lime } + </style> + + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script type="text/javascript"> + function doTest() { + setTimeAndSnapshot(101, true); + } + window.addEventListener("MozReftestInvalidate", doTest, false); + </script> + + <!-- Big green background to match lime.svg --> + <rect class="background" width="100%" height="100%" /> + <!-- Red "workspace" (should be covered up, if tests pass) --> + <rect class="workspace" x="100" y="100" width="100" height="100"/> + + <!-- FIRST ROW --> + <!-- Check that 'rotate' gets applied at begin time --> + <g> + <animateMotion from="150, 100" to="500, 500" rotate="100grad" + begin="101" dur="1"/> + <rect class="test" x="0" y="0" width="20" height="50"/> + <rect class="test" x="0" y="0" width="50" height="20"/> + </g> + <rect class="filler" x="100" y="120" width="30" height="30"/> + + <!-- Check that 'rotate' gets applied at end time --> + <g> + <animateMotion from="600, 700" to="200, 150" rotate="200grad" begin="100" + dur="1" fill="freeze"/> + <rect class="test" x="0" y="0" width="20" height="50"/> + <rect class="test" x="0" y="0" width="50" height="20"/> + </g> + <rect class="filler" x="150" y="100" width="30" height="30"/> + + <!-- SECOND ROW --> + <!-- Check that rotate combines with existing rotate --> + <g transform="rotate(90)"> + <animateMotion from="150,200" to="600,600" rotate="100grad" + begin="101" dur="1"/> + <rect class="test" x="0" y="0" width="20" height="50"/> + <rect class="test" x="0" y="0" width="50" height="20"/> + </g> + <rect class="filler" x="100" y="150" width="30" height="30"/> + + <!-- Check additivity of <animateMotion> "rotate" adds --> + <g> + <animateMotion from="100,100" to="100,200" rotate="100grad" + begin="100.5" dur="1"/> + <animateMotion by="100,-200" rotate="100grad" + begin="100.5" dur="1"/> + <rect class="test" x="0" y="0" width="20" height="50"/> + <rect class="test" x="0" y="0" width="50" height="20"/> + </g> + <rect class="filler" x="150" y="150" width="30" height="30"/> +</svg> diff --git a/layout/reftests/svg/smil/motion/animateMotion-rotate-2.svg b/layout/reftests/svg/smil/motion/animateMotion-rotate-2.svg new file mode 100644 index 0000000000..7f6fcc7cf5 --- /dev/null +++ b/layout/reftests/svg/smil/motion/animateMotion-rotate-2.svg @@ -0,0 +1,52 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait"> + <!-- Tests for rotate="auto" and "auto-reverse" --> + <!-- The idea here is to create positioned red "holes" in the lime + background, and then hopefully use paused <animateMotion> elements to + position other elements exactly on top of the hole. --> + <style> + .background { fill: lime } + .hole { color: red } + .testBegin { color: purple } + .testEnd { color: orange } + .mask { color: lime } + </style> + <defs> + <!-- A 'pin' marker, just offscreen, pointing directly down at 0,0 --> + <!-- NOTE: The lime 2.83px-wide stroke is a hack to get around "seams" in + SVG when redrawing the same non-pixel-aligned shape on top of itself + in different colors. 2.83 is just over 2*sqrt(2), sqrt(2) being the + maximum distance from a path that antialiasing of square pixels can + cause the path to affect. --> + <path id="marker" d="m0,0 l-10,-30 c-5,-20 25,-20 20,0 z" + style="fill: currentColor; stroke: lime; stroke-width: 2.83px"/> + </defs> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script type="text/javascript"> + function doTest() { + setTimeAndSnapshot(101, true); + } + window.addEventListener("MozReftestInvalidate", doTest, false); + </script> + + <!-- Big green background to match lime.svg --> + <rect class="background" width="100%" height="100%" /> + <g transform="translate(50,50)"> + <!-- Here's the hole --> + <use xlink:href="#marker" class="hole" + transform="translate(20,20) rotate(45)"/> + + <!-- And here's a stack of elements animated with 'animateMotion' that + should end up there. --> + <use xlink:href="#marker" class="testBegin"> + <animateMotion from="20,20" to="40,40" rotate="auto" begin="101s" dur="1s"/> + </use> + <use xlink:href="#marker" class="testEnd"> + <animateMotion by="20,20" rotate="auto" begin="100" dur="1s" fill="freeze"/> + </use> + <use xlink:href="#marker" class="mask"> + <animateMotion by="40,40" rotate="auto" begin="100s" dur="2s"/> + </use> + </g> +</svg> diff --git a/layout/reftests/svg/smil/motion/animateMotion-to-overridden-1.svg b/layout/reftests/svg/smil/motion/animateMotion-to-overridden-1.svg new file mode 100644 index 0000000000..2c6179640a --- /dev/null +++ b/layout/reftests/svg/smil/motion/animateMotion-to-overridden-1.svg @@ -0,0 +1,61 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script type="text/javascript"> + function doTest() { + setTimeAndSnapshot(101, true); + } + window.addEventListener("MozReftestInvalidate", doTest, false); + </script> + + <!-- Big green background to match lime.svg --> + <rect fill="lime" width="100%" height="100%" /> + + <!-- In the following pairs of rects, the only pairwise differences are the + fill-color and the presence of the "to" attribute on the animateMotion + element. "to" shouldn't have any effect in these cases, since it has + lower priority than "values," "path," and "mpath". So in each case, the + lime rect should cover up the red rect at all times. --> + + <!-- Single-point path specified with "values" attribute: --> + <g transform="translate(0,0)"> + <rect width="20" height="20" fill="red"> + <animateMotion values="20,0" dur="2" begin="100"/> + </rect> + <rect width="20" height="20" fill="lime"> + <animateMotion values="20,0" dur="2" to="-50,0" begin="100"/> + </rect> + </g> + + <!-- Multi-point path specified with "values" attribute: --> + <g transform="translate(0,30)"> + <rect width="20" height="20" fill="red"> + <animateMotion values="20,0; 80,0" dur="2" begin="100"/> + </rect> + <rect width="20" height="20" fill="lime"> + <animateMotion values="20,0; 80,0" dur="2" to="-50,0" begin="100"/> + </rect> + </g> + + <!-- Path specified with "path" attribute: --> + <g transform="translate(0,60)"> + <rect width="20" height="20" fill="red"> + <animateMotion path="m0,0 h100" dur="2" begin="100"/> + </rect> + <rect width="20" height="20" fill="lime"> + <animateMotion path="m0,0 h100" dur="2" to="-50,0" begin="100"/> + </rect> + </g> + + <!-- Path specified with "mpath" subelement: --> + <path id="p" d="m0,0 h100"/> + <g transform="translate(0,90)"> + <rect width="20" height="20" fill="red"> + <animateMotion dur="2" begin="100"><mpath xlink:href="#p"/></animateMotion> + </rect> + <rect width="20" height="20" fill="lime"> + <animateMotion dur="2" to="-50,0" begin="100"><mpath xlink:href="#p"/></animateMotion> + </rect> + </g> +</svg> diff --git a/layout/reftests/svg/smil/motion/animateMotion-values-linear-1-ref.svg b/layout/reftests/svg/smil/motion/animateMotion-values-linear-1-ref.svg new file mode 100644 index 0000000000..fbb06fcf13 --- /dev/null +++ b/layout/reftests/svg/smil/motion/animateMotion-values-linear-1-ref.svg @@ -0,0 +1,38 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <!-- First row --> + <g transform="translate(20,20)"> + <g> + <rect width="15px" height="15px"/> + </g> + <g transform="translate(50,0)"> + <rect x="0" y="10" width="15px" height="15px"/> + </g> + <g transform="translate(100,0)"> + <rect x="9" y="10" width="15px" height="15px"/> + </g> + </g> + <!-- Second row --> + <g transform="translate(20,70)"> + <g> + <rect x="22.5" y="10" width="15px" height="15px"/> + </g> + <g transform="translate(50,0)"> + <rect x="29.7" y="10" width="15px" height="15px"/> + </g> + <g transform="translate(100,0)"> + <rect x="45" y="30" width="15px" height="15px"/> + </g> + </g> + <!-- Third row --> + <g transform="translate(20,120)"> + <g> + <rect x="48" y="34" width="15px" height="15px"/> + </g> + <g transform="translate(50,0)"> + <rect x="60" y="50" width="15px" height="15px"/> + </g> + <g transform="translate(100,0)"> + <rect x="60" y="50" width="15px" height="15px"/> + </g> + </g> +</svg> diff --git a/layout/reftests/svg/smil/motion/animateMotion-values-linear-1.svg b/layout/reftests/svg/smil/motion/animateMotion-values-linear-1.svg new file mode 100644 index 0000000000..6c4721cca0 --- /dev/null +++ b/layout/reftests/svg/smil/motion/animateMotion-values-linear-1.svg @@ -0,0 +1,15 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <!-- Tests for <animateMotion> with 'values' attribute --> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "values" : "0,10; 30,10; 60,50", + "calcMode" : "linear" }; + testAnimatedRectGrid("animateMotion", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/motion/animateMotion-values-paced-1-ref.svg b/layout/reftests/svg/smil/motion/animateMotion-values-paced-1-ref.svg new file mode 100644 index 0000000000..d933fb8381 --- /dev/null +++ b/layout/reftests/svg/smil/motion/animateMotion-values-paced-1-ref.svg @@ -0,0 +1,38 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <!-- First row --> + <g transform="translate(20,20)"> + <g> + <rect width="15px" height="15px"/> + </g> + <g transform="translate(50,0)"> + <rect x="0" y="10" width="15px" height="15px"/> + </g> + <g transform="translate(100,0)"> + <rect x="12" y="10" width="15px" height="15px"/> + </g> + </g> + <!-- Second row --> + <g transform="translate(20,70)"> + <g> + <rect x="30" y="10" width="15px" height="15px"/> + </g> + <g transform="translate(50,0)"> + <rect x="35.76" y="17.68" width="15px" height="15px"/> + </g> + <g transform="translate(100,0)"> + <rect x="48" y="34" width="15px" height="15px"/> + </g> + </g> + <!-- Third row --> + <g transform="translate(20,120)"> + <g> + <rect x="50.4" y="37.2" width="15px" height="15px"/> + </g> + <g transform="translate(50,0)"> + <rect x="60" y="50" width="15px" height="15px"/> + </g> + <g transform="translate(100,0)"> + <rect x="60" y="50" width="15px" height="15px"/> + </g> + </g> +</svg> diff --git a/layout/reftests/svg/smil/motion/animateMotion-values-paced-1a.svg b/layout/reftests/svg/smil/motion/animateMotion-values-paced-1a.svg new file mode 100644 index 0000000000..737574cae5 --- /dev/null +++ b/layout/reftests/svg/smil/motion/animateMotion-values-paced-1a.svg @@ -0,0 +1,14 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <!-- Tests for <animateMotion> with 'values' attribute --> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "values" : "0,10; 30,10; 60,50"}; + testAnimatedRectGrid("animateMotion", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/motion/animateMotion-values-paced-1b.svg b/layout/reftests/svg/smil/motion/animateMotion-values-paced-1b.svg new file mode 100644 index 0000000000..9d72807d9e --- /dev/null +++ b/layout/reftests/svg/smil/motion/animateMotion-values-paced-1b.svg @@ -0,0 +1,15 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <!-- Tests for <animateMotion> with 'values' attribute --> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "values" : "0,10; 30,10; 60,50", + "calcMode" : "paced" }; + testAnimatedRectGrid("animateMotion", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/motion/lime.svg b/layout/reftests/svg/smil/motion/lime.svg new file mode 100644 index 0000000000..c09c6601e8 --- /dev/null +++ b/layout/reftests/svg/smil/motion/lime.svg @@ -0,0 +1,8 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> + <title>Testcase reference file for generic pass condition</title> + <rect width="100%" height="100%" fill="lime"/> +</svg> diff --git a/layout/reftests/svg/smil/motion/reftest.list b/layout/reftests/svg/smil/motion/reftest.list new file mode 100644 index 0000000000..5acfeab8bc --- /dev/null +++ b/layout/reftests/svg/smil/motion/reftest.list @@ -0,0 +1,22 @@ +# Tests related to SVG Animation (using SMIL), focusing on the animateMotion +# element. + +== animateMotion-by-1.svg lime.svg +== animateMotion-by-2.svg lime.svg +fuzzy-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu)||/^Windows\x20NT\x206\.2/.test(http.oscpu),0-1,0-800) == animateMotion-flattening-1.svg lime.svg # bug 951541 +== animateMotion-from-to-1.svg lime.svg +== animateMotion-indefinite-to-1.svg lime.svg +== animateMotion-indefinite-to-2.svg lime.svg +== animateMotion-rotate-1a.svg lime.svg +== animateMotion-rotate-1b.svg lime.svg +fuzzy-if(skiaContent,0-1,0-40) == animateMotion-rotate-2.svg lime.svg +== animateMotion-to-overridden-1.svg lime.svg +== animateMotion-values-linear-1.svg animateMotion-values-linear-1-ref.svg +== animateMotion-values-paced-1a.svg animateMotion-values-paced-1-ref.svg +fuzzy-if(skiaContent,0-1,0-30) == animateMotion-values-paced-1b.svg animateMotion-values-paced-1-ref.svg + +# Tests involving <mpath> sub-element +== animateMotion-mpath-pathLength-1.svg lime.svg +== animateMotion-mpath-targetChange-1.svg lime.svg +== animateMotion-mpath-target-transform-1.svg lime.svg +== animateMotion-mpath-shadow.svg lime.svg |