diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
| commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
| tree | f435a8308119effd964b339f76abb83a57c29483 /layout/reftests/svg/smil/container | |
| parent | Initial commit. (diff) | |
| download | firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip | |
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'layout/reftests/svg/smil/container')
22 files changed, 905 insertions, 0 deletions
diff --git a/layout/reftests/svg/smil/container/deferred-anim-1-ref.xhtml b/layout/reftests/svg/smil/container/deferred-anim-1-ref.xhtml new file mode 100644 index 0000000000..ea59e77c8d --- /dev/null +++ b/layout/reftests/svg/smil/container/deferred-anim-1-ref.xhtml @@ -0,0 +1,12 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no" ?> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>Deferred animation</title> + </head> + + <body> + <svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px"> + <rect width="199" height="199" fill="green"/> + </svg> + </body> +</html> diff --git a/layout/reftests/svg/smil/container/deferred-anim-1.xhtml b/layout/reftests/svg/smil/container/deferred-anim-1.xhtml new file mode 100644 index 0000000000..369f572045 --- /dev/null +++ b/layout/reftests/svg/smil/container/deferred-anim-1.xhtml @@ -0,0 +1,70 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no" ?> +<html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait"> + <head> + <title>Deferred animation</title> + <!-- + PURPOSE: Although we'd like to disable animation components for those + documents that don't use animation, there's always the possibility that an + animation element will be added via the DOM after the document is loaded. + This test case checks that this case is not neglected. + + OPERATION: There is an un-animated document. Then an <animate> element is + attached to the rectangle by script causing it to move to the right. + + EXPECTED RESULTS: The box begins moving from the center. + --> + <script> + var timeoutID; + + function animate() + { + addAnimation(); + var svg = document.getElementsByTagName('svg')[0]; + var anim = svg.getElementsByTagName('animate')[0]; + // We should pass quickly and fail slowly. + // In the pass case, we'll get an end event almost immediately. + // In the failure case, wait 30s before giving up. + timeoutID = window.setTimeout(giveUp, 30000); + anim.addEventListener('endEvent', finish, true); + } + + function giveUp() { + var svg = document.getElementsByTagName('svg')[0]; + var rect = svg.getElementsByTagName('rect')[0]; + rect.setAttribute("fill", "red"); + var anim = svg.getElementsByTagName('animate')[0]; + anim.parentNode.removeChild(anim); + timeoutID = null; + finish(); + } + + function finish() { + if (timeoutID) { + window.clearTimeout(timeoutID); + timeoutID = null; + } + document.documentElement.removeAttribute('class'); + } + + function addAnimation() + { + const svgns="http://www.w3.org/2000/svg"; + var anim = document.createElementNS(svgns,'animate'); + anim.setAttribute('attributeName','fill'); + anim.setAttribute('from', 'red'); + anim.setAttribute('to','green'); + anim.setAttribute('begin','0s'); + anim.setAttribute('dur','0.001s'); + anim.setAttribute('fill','freeze'); + var target = document.getElementById('target'); + target.appendChild(anim); + } + </script> + </head> + + <body onload="animate()"> + <svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px"> + <rect width="199" height="199" fill="red" id="target"/> + </svg> + </body> +</html> diff --git a/layout/reftests/svg/smil/container/deferred-tree-1-ref.xhtml b/layout/reftests/svg/smil/container/deferred-tree-1-ref.xhtml new file mode 100644 index 0000000000..e70151c7cc --- /dev/null +++ b/layout/reftests/svg/smil/container/deferred-tree-1-ref.xhtml @@ -0,0 +1,15 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no" ?> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>Deferred tree</title> + </head> + + <body> + <p id="tree-container"> + <svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px" + id="created-svg"> + <rect x="0" y="0" width="199" height="199" fill="green"/> + </svg> + </p> + </body> +</html> diff --git a/layout/reftests/svg/smil/container/deferred-tree-1.xhtml b/layout/reftests/svg/smil/container/deferred-tree-1.xhtml new file mode 100644 index 0000000000..ac83d53340 --- /dev/null +++ b/layout/reftests/svg/smil/container/deferred-tree-1.xhtml @@ -0,0 +1,87 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no" ?> +<html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait"> + <head> + <title>Deferred tree</title> + <!-- + PURPOSE: This is similar to the deferred-anim test case. The animation + controller is not created for every web page, but only for those pages that + contain SMIL animatable content. But, if some SVG content containing + animation is added after the page is loaded, the animation should still run. + + OPERATION: There is a plain XHTML document, but later an SVG document is + added. This document contains a moving circle. + + EXPECTED RESULTS: The SVG document fragment appears containing a circle that + is animated. + --> + <script> + var timeoutID; + + function animate() + { + makeTree(); + var svg = document.getElementById('created-svg'); + var anim = svg.getElementsByTagName('animate')[0]; + // We should pass quickly and fail slowly. + // In the pass case, we'll get an end event almost immediately. + // In the failure case, wait 30s before giving up. + timeoutID = window.setTimeout(giveUp, 30000); + anim.addEventListener('endEvent', finish, true); + } + + function giveUp() { + var svg = document.getElementById('created-svg'); + var rect = svg.getElementsByTagName('rect')[0]; + // It's possible we could arrive here after successfully running the + // animation but failing to fire the end event. + // Technically that's a pass as far as this test is concerned, but it + // will mean every test run is taking 30s longer than it should and + // we'd like to know about that so we'll make it a failure. + rect.setAttribute("fill", "red"); + // We'll need to clear the animation for this to take effect + var anim = svg.getElementsByTagName('animate')[0]; + anim.parentNode.removeChild(anim); + timeoutID = null; + finish(); + } + + function finish() { + if (timeoutID) { + window.clearTimeout(timeoutID); + timeoutID = null; + } + document.documentElement.removeAttribute('class'); + } + + function makeTree() + { + const svgns="http://www.w3.org/2000/svg"; + var svg = document.createElementNS(svgns, 'svg'); + svg.setAttribute('xmlns', svgns); + svg.setAttribute('width', '200px'); + svg.setAttribute('height', '200px'); + svg.setAttribute('id', 'created-svg'); + var rect = document.createElementNS(svgns, 'rect'); + rect.setAttribute('x', '0'); + rect.setAttribute('y', '0'); + rect.setAttribute('width', '199'); + rect.setAttribute('height', '199'); + var anim = document.createElementNS(svgns, 'animate'); + anim.setAttribute('attributeName', 'fill'); + anim.setAttribute('begin', '0s'); + anim.setAttribute('from', 'red'); + anim.setAttribute('to', 'green'); + anim.setAttribute('dur', '0.001s'); + anim.setAttribute('fill', 'freeze'); + rect.appendChild(anim); + svg.appendChild(rect); + var target = document.getElementById('tree-container'); + target.appendChild(svg); + } + </script> + </head> + + <body onload="animate()"> + <p id="tree-container"/> + </body> +</html> diff --git a/layout/reftests/svg/smil/container/deferred-tree-2-ref.xhtml b/layout/reftests/svg/smil/container/deferred-tree-2-ref.xhtml new file mode 100644 index 0000000000..8aff24fdd2 --- /dev/null +++ b/layout/reftests/svg/smil/container/deferred-tree-2-ref.xhtml @@ -0,0 +1,17 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no" ?> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>Deferred tree</title> + </head> + + <body> + <p id="tree-container"/> + <svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px" + id="created-svg"> + <rect x="0" y="0" width="199" height="199" + style="fill: none; stroke: black"/> + <ellipse stroke-width="1" stroke="black" fill="yellow" cx="100" + cy="20" rx="40" ry="20"/> + </svg> + </body> +</html> diff --git a/layout/reftests/svg/smil/container/deferred-tree-2a.xhtml b/layout/reftests/svg/smil/container/deferred-tree-2a.xhtml new file mode 100644 index 0000000000..821986a706 --- /dev/null +++ b/layout/reftests/svg/smil/container/deferred-tree-2a.xhtml @@ -0,0 +1,44 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no" ?> +<html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait"> + <head> + <title>Deferred tree</title> + <!-- + PURPOSE: If a SVG subdocument is created dynamically, any timing-related + animation API calls on the subdocument should silently fail until it's + been attached to a document. + + OPERATION: We start with a plain XHTML document, but later a div and an SVG + subdocument are created. We attempt an animation API call on the SVG + element before attaching it to the XHTML document. + + EXPECTED RESULTS: The animation API call should have no effect. + --> + <script src="deferred-tree-util.js" type="text/javascript"/> + <script> + function animate() + { + // Set up + var div = makeDiv(); + var svg = makeSvg(); + var target = document.getElementById('tree-container'); + + // Make an animation api call (should have no effect, if we're sane) + svg.setCurrentTime(1.0); + + // Trigger a "BindToTree" call on the SVG element + div.appendChild(svg); + + // Finally, we attach to the document and pause animations. + target.appendChild(div); + + // Reftest Snapshot + svg.pauseAnimations(); + document.documentElement.removeAttribute("class"); + } + </script> + </head> + + <body onload="animate()"> + <p id="tree-container"/> + </body> +</html> diff --git a/layout/reftests/svg/smil/container/deferred-tree-2b.xhtml b/layout/reftests/svg/smil/container/deferred-tree-2b.xhtml new file mode 100644 index 0000000000..890159f4c3 --- /dev/null +++ b/layout/reftests/svg/smil/container/deferred-tree-2b.xhtml @@ -0,0 +1,44 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no" ?> +<html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait"> + <head> + <title>Deferred tree</title> + <!-- + PURPOSE: If a SVG subdocument is created dynamically, any timing-related + animation API calls on the subdocument should silently fail until it's + been attached to a document. + + OPERATION: We start with a plain XHTML document, but later a div and an SVG + subdocument are created. We attempt an animation API call on the SVG + element before attaching it to the XHTML document. + + EXPECTED RESULTS: The animation API call should have no effect. + --> + <script src="deferred-tree-util.js" type="text/javascript"/> + <script> + function animate() + { + // Set up + var div = makeDiv(); + var svg = makeSvg(); + var target = document.getElementById('tree-container'); + + // Trigger a "BindToTree" call on the SVG element + div.appendChild(svg); + + // Make an animation api call (should have no effect, if we're sane) + svg.setCurrentTime(1.0); + + // Finally, we attach to the document and pause animations. + target.appendChild(div); + + // Reftest Snapshot + svg.pauseAnimations(); + document.documentElement.removeAttribute("class"); + } + </script> + </head> + + <body onload="animate()"> + <p id="tree-container"/> + </body> +</html> diff --git a/layout/reftests/svg/smil/container/deferred-tree-3-ref.xhtml b/layout/reftests/svg/smil/container/deferred-tree-3-ref.xhtml new file mode 100644 index 0000000000..96818ff54b --- /dev/null +++ b/layout/reftests/svg/smil/container/deferred-tree-3-ref.xhtml @@ -0,0 +1,17 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no" ?> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>Deferred tree</title> + </head> + + <body> + <p id="tree-container"/> + <svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px" + id="created-svg"> + <rect x="0" y="0" width="199" height="199" + style="fill: none; stroke: black"/> + <ellipse stroke-width="1" stroke="black" fill="yellow" cx="100" + cy="95" rx="40" ry="20"/> + </svg> + </body> +</html> diff --git a/layout/reftests/svg/smil/container/deferred-tree-3a.xhtml b/layout/reftests/svg/smil/container/deferred-tree-3a.xhtml new file mode 100644 index 0000000000..3d9fed19e9 --- /dev/null +++ b/layout/reftests/svg/smil/container/deferred-tree-3a.xhtml @@ -0,0 +1,35 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no" ?> +<html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait"> + <head> + <title>Deferred tree</title> + <script src="deferred-tree-util.js" type="text/javascript"/> + <script> + function animate() + { + // Set up + var div = makeDiv(); + var svg = makeSvg(); + var target = document.getElementById('tree-container'); + + div.appendChild(svg); + target.appendChild(div); + + // These calls *should* have an effect, since they happen + // after 'svg' has been attached to the XHTML document. + svg.setCurrentTime(1.0); + svg.pauseAnimations(); + + // Reattach the SVG element to its parent div. + // (If we're sane, this shouldn't reset its time container.) + div.appendChild(svg); + + // Reftest Snapshot + document.documentElement.removeAttribute("class"); + } + </script> + </head> + + <body onload="animate()"> + <p id="tree-container"/> + </body> +</html> diff --git a/layout/reftests/svg/smil/container/deferred-tree-3b.xhtml b/layout/reftests/svg/smil/container/deferred-tree-3b.xhtml new file mode 100644 index 0000000000..ab894f54ef --- /dev/null +++ b/layout/reftests/svg/smil/container/deferred-tree-3b.xhtml @@ -0,0 +1,35 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no" ?> +<html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait"> + <head> + <title>Deferred tree</title> + <script src="deferred-tree-util.js" type="text/javascript"/> + <script> + function animate() + { + // Set up + var div = makeDiv(); + var svg = makeSvg(); + var target = document.getElementById('tree-container'); + + div.appendChild(svg); + target.appendChild(div); + + // These calls *should* have an effect, since they happen + // after 'svg' has been attached to the XHTML document. + svg.setCurrentTime(1.0); + svg.pauseAnimations(); + + // Shift the SVG element to its parent's parent. + // (If we're sane, this shouldn't reset its time container.) + target.appendChild(svg); + + // Reftest Snapshot + document.documentElement.removeAttribute("class"); + } + </script> + </head> + + <body onload="animate()"> + <p id="tree-container"/> + </body> +</html> diff --git a/layout/reftests/svg/smil/container/deferred-tree-3c.xhtml b/layout/reftests/svg/smil/container/deferred-tree-3c.xhtml new file mode 100644 index 0000000000..12dc91fe5d --- /dev/null +++ b/layout/reftests/svg/smil/container/deferred-tree-3c.xhtml @@ -0,0 +1,40 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no" ?> +<html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait"> + <head> + <title>Deferred tree</title> + <script src="deferred-tree-util.js" type="text/javascript"/> + <script> + function animate() + { + // Set up + var div = makeDiv(); + var svg = makeSvg(); + var target = document.getElementById('tree-container'); + + div.appendChild(svg); + target.appendChild(div); + + // These calls *should* have an effect, since they happen + // after 'svg' has been attached to the XHTML document. + svg.setCurrentTime(1.0); + svg.pauseAnimations(); + + // Create another div container, and move svg element there + // (temporarily detaching it from the document), before attaching + // this new subtree back onto the document. Our current behavior + // (which matches Opera 9.64) is to preserve svg's time container + // through this manipulation. + div2 = makeDiv(); + div2.appendChild(svg); + div.appendChild(div2); + + // Reftest Snapshot + document.documentElement.removeAttribute("class"); + } + </script> + </head> + + <body onload="animate()"> + <p id="tree-container"/> + </body> +</html> diff --git a/layout/reftests/svg/smil/container/deferred-tree-3d.xhtml b/layout/reftests/svg/smil/container/deferred-tree-3d.xhtml new file mode 100644 index 0000000000..d5dc4d0a58 --- /dev/null +++ b/layout/reftests/svg/smil/container/deferred-tree-3d.xhtml @@ -0,0 +1,42 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no" ?> +<html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait"> + <head> + <title>Deferred tree</title> + <script src="deferred-tree-util.js" type="text/javascript"/> + <script> + function animate() + { + // Set up + var div = makeDiv(); + var svg = makeSvg(); + var target = document.getElementById('tree-container'); + + div.appendChild(svg); + target.appendChild(div); + + // Create another div container, and move svg element there + // (temporarily detaching it from the document). + div2 = makeDiv(); + div2.appendChild(svg); + + // These calls *should* have an effect, since they happen + // after 'svg' has been attached to the XHTML document (even though + // it's not currently attached) + svg.setCurrentTime(1.0); + svg.pauseAnimations(); + + // Attach the div2+svg subtree onto the document. Our current + // behavior (which matches Opera 9.64) is to preserve svg's time + // container through this manipulation. + div.appendChild(div2); + + // Reftest Snapshot + document.documentElement.removeAttribute("class"); + } + </script> + </head> + + <body onload="animate()"> + <p id="tree-container"/> + </body> +</html> diff --git a/layout/reftests/svg/smil/container/deferred-tree-util.js b/layout/reftests/svg/smil/container/deferred-tree-util.js new file mode 100644 index 0000000000..71d0b41f53 --- /dev/null +++ b/layout/reftests/svg/smil/container/deferred-tree-util.js @@ -0,0 +1,39 @@ +function makeDiv() +{ + const xhtmlns="http://www.w3.org/1999/xhtml"; + return document.createElementNS(xhtmlns, 'div'); +} + +function makeSvg() +{ + const svgns="http://www.w3.org/2000/svg"; + var svg = document.createElementNS(svgns, 'svg'); + svg.setAttribute('xmlns', svgns); + svg.setAttribute('width', '200px'); + svg.setAttribute('height', '200px'); + var rect = document.createElementNS(svgns, 'rect'); + rect.setAttribute('x', '0'); + rect.setAttribute('y', '0'); + rect.setAttribute('width', '199'); + rect.setAttribute('height', '199'); + rect.setAttribute('style', 'fill: none; stroke: black'); + var ellipse = document.createElementNS(svgns, 'ellipse'); + ellipse.setAttribute('stroke-width', '1'); + ellipse.setAttribute('stroke', 'black'); + ellipse.setAttribute('fill', 'yellow'); + ellipse.setAttribute('cx', '100'); + ellipse.setAttribute('cy', '20'); + ellipse.setAttribute('rx', '40'); + ellipse.setAttribute('ry', '20'); + var anim = document.createElementNS(svgns, 'animate'); + anim.setAttribute('attributeName', 'cy'); + anim.setAttribute('attributeType', 'XML'); + anim.setAttribute('begin', '0s'); + anim.setAttribute('from', '20'); + anim.setAttribute('to', '170'); + anim.setAttribute('dur', '2s'); + ellipse.appendChild(anim); + svg.appendChild(rect); + svg.appendChild(ellipse); + return svg; +} diff --git a/layout/reftests/svg/smil/container/enveloped-tree-1-ref.xhtml b/layout/reftests/svg/smil/container/enveloped-tree-1-ref.xhtml new file mode 100644 index 0000000000..b529c052e3 --- /dev/null +++ b/layout/reftests/svg/smil/container/enveloped-tree-1-ref.xhtml @@ -0,0 +1,25 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no" ?> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>Enveloped tree</title> + </head> + + <body> + <!-- First tree --> + <svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px" + id="adopter"> + <rect x="0" y="0" width="199" height="199" + style="fill: none; stroke: black"/> + <circle cx="100" cy="50" r="15" fill="skyblue" stroke="black" + stroke-width="1"/> + <!-- Second tree --> + <svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px" + id="adoptee"> + <rect x="0" y="0" width="199" height="199" + style="fill: none; stroke: black"/> + <circle cx="100" cy="110" r="15" fill="greenyellow" stroke="black" + stroke-width="1"/> + </svg> + </svg> + </body> +</html> diff --git a/layout/reftests/svg/smil/container/enveloped-tree-1.xhtml b/layout/reftests/svg/smil/container/enveloped-tree-1.xhtml new file mode 100644 index 0000000000..49d3db6b7c --- /dev/null +++ b/layout/reftests/svg/smil/container/enveloped-tree-1.xhtml @@ -0,0 +1,70 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no" ?> +<html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait"> + <head> + <title>Enveloped tree</title> + <!-- + PURPOSE: This test case is the reverse of the promoted tree case. As time + containers are defined relative to the outermost SVG document fragment this + case tests that when an outermost <svg> fragment is added as a child of + another svg document fragment, the animations behave correctly and the time + containers are resolved correctly. + + OPERATION: There are two animations that are more-or-less identical except + for a few aesthetic features. Both contain a circle that moves to the right. + The second document fragment (on the right) is removed and added as a child + of the first document fragment. + + EXPECTED RESULTS: After combining the two document fragments the circles + should have the same horizontal position as they are now controlled by the + same time container. + --> + <script> + function moveAndAdopt() + { + var svgs = document.getElementsByTagName('svg'); + for (var i = 0; i < svgs.length; i++) { + var svg = svgs[i]; + svg.pauseAnimations(); + svg.setCurrentTime(0.5); + } + adopt(); + var svg = document.getElementById('adopter'); + svg.setCurrentTime(1.5); + setTimeout('document.documentElement.removeAttribute("class")', 0); + } + + function adopt() + { + var adoptee = document.getElementById('adoptee'); + adoptee.parentNode.removeChild(adoptee); + var adopter = document.getElementById('adopter'); + adopter.appendChild(adoptee); + } + </script> + </head> + + <body onload="moveAndAdopt()"> + <!-- First tree --> + <svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px" + id="adopter"> + <rect x="0" y="0" width="199" height="199" + style="fill: none; stroke: black"/> + <circle cx="0" cy="50" r="15" fill="skyblue" stroke="black" + stroke-width="1"> + <animate attributeName="cx" from="0" to="200" begin="0s" dur="3s" + fill="freeze"/> + </circle> + </svg> + <!-- Second tree --> + <svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px" + id="adoptee"> + <rect x="0" y="0" width="199" height="199" + style="fill: none; stroke: black"/> + <circle cx="0" cy="110" r="15" fill="greenyellow" stroke="black" + stroke-width="1"> + <animate attributeName="cx" from="0" to="200" begin="0s" dur="3s" + fill="freeze"/> + </circle> + </svg> + </body> +</html> diff --git a/layout/reftests/svg/smil/container/invalid-elem-1-ref.xhtml b/layout/reftests/svg/smil/container/invalid-elem-1-ref.xhtml new file mode 100644 index 0000000000..74a74adb49 --- /dev/null +++ b/layout/reftests/svg/smil/container/invalid-elem-1-ref.xhtml @@ -0,0 +1,19 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no" ?> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>Valid, invalid, valid</title> + </head> + + <body> + <svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px"> + <rect x="0" y="0" width="199" height="199" + style="fill: none; stroke: black"/> + <!-- rect to be animated second --> + <rect x="100" y="80" width="40" height="40" fill="royalblue" + stroke="black" stroke-width="1" id="target"/> + <!-- circle to be animated first --> + <circle cx="0" cy="100" r="15" fill="skyblue" stroke="black" + stroke-width="1"/> + </svg> + </body> +</html> diff --git a/layout/reftests/svg/smil/container/invalid-elem-1.xhtml b/layout/reftests/svg/smil/container/invalid-elem-1.xhtml new file mode 100644 index 0000000000..3a2f79be14 --- /dev/null +++ b/layout/reftests/svg/smil/container/invalid-elem-1.xhtml @@ -0,0 +1,74 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no" ?> +<html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait"> + <head> + <title>Valid, invalid, valid</title> + <!-- + PURPOSE: When manipulating the DOM tree it is quite likely that at some + instant the document will be invalid such as during a chain of + operations. SVG 1.1, section F.2 states: + + "Because of situations where a block of scripting changes might cause + a given SVG document fragment to go into and out of error, error + processing shall occur only at times when document presentation (e.g., + rendering to the display device) is updated" + + A similar requirement exists regarding unsuspend / suspend redraw. + This test checks that behaviour. + + OPERATION: There is a box and a circle. Initially the circle is animated and + should move to the right. The animation element is moved to the rectangle. + At this point the animation points to an invalid attribute. This attribute + is then updated to be valid again. + + EXPECTED RESULTS: The circle is moved and then the rectangle is moved. There + should not be any errors reported in the Javascript console or assertions + etc. + + After the animation is removed from the circle it should reset (I think). + + Currently this hasn't been implemented (we need to make use of + mLastCompositors table in nsSMILAnimationController), so this test is + disabled for now. As the code stands now you'll normally get the correct + result but under other conditions the circle moves a fraction before the + call to pauseAnimations and this effect is not then cleared. + --> + <script> + function moveAnimation() + { + var svg = document.getElementsByTagName('svg')[0]; + svg.pauseAnimations(); + svg.setCurrentTime(0.5); + doMove(); + svg.setCurrentTime(1.0); + setTimeout('document.documentElement.removeAttribute("class")', 0); + } + + function doMove() + { + var anim = document.getElementById('animation-to-move'); + anim.parentNode.removeChild(anim); + var rect = document.getElementById('target'); + rect.appendChild(anim); + // The animation is now in error + anim.setAttribute('attributeName', 'x'); + // Now it's fixed + } + </script> + </head> + + <body onload="moveAnimation()"> + <svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px"> + <rect x="0" y="0" width="199" height="199" + style="fill: none; stroke: black"/> + <!-- rect to be animated second --> + <rect x="-20" y="80" width="40" height="40" fill="royalblue" + stroke="black" stroke-width="1" id="target"/> + <!-- circle to be animated first --> + <circle cx="0" cy="100" r="15" fill="skyblue" stroke="black" + stroke-width="1"> + <animate attributeName="cx" from="0" to="200" begin="0s" dur="2s" + fill="freeze" id="animation-to-move"/> + </circle> + </svg> + </body> +</html> diff --git a/layout/reftests/svg/smil/container/moved-tree-1-ref.xhtml b/layout/reftests/svg/smil/container/moved-tree-1-ref.xhtml new file mode 100644 index 0000000000..0041785b3a --- /dev/null +++ b/layout/reftests/svg/smil/container/moved-tree-1-ref.xhtml @@ -0,0 +1,31 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no" ?> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>Moving sub-trees</title> + </head> + + <body> + <svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px"> + <rect x="0" y="0" width="199" height="199" + style="fill: none; stroke: black"/> + <g> + <!-- background rect to track progress --> + <rect x="0" y="80" width="100" height="40" fill="royalblue" + stroke="black" stroke-width="1"/> + </g> + </svg> + <!-- Second animation --> + <svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px"> + <rect x="0" y="0" width="199" height="199" + style="fill: none; stroke: black"/> + <g id="new-parent"> + <!-- background rect to track progress --> + <rect x="0" y="80" width="100" height="40" fill="greenyellow" + stroke="black" stroke-width="1"/> + <!-- circle to transfer --> + <circle cx="100" cy="100" r="15" fill="skyblue" stroke="black" + stroke-width="1" id="circle-to-move"/> + </g> + </svg> + </body> +</html> diff --git a/layout/reftests/svg/smil/container/moved-tree-1.xhtml b/layout/reftests/svg/smil/container/moved-tree-1.xhtml new file mode 100644 index 0000000000..2206c8837d --- /dev/null +++ b/layout/reftests/svg/smil/container/moved-tree-1.xhtml @@ -0,0 +1,74 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no" ?> +<html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait"> + <head> + <title>Moving sub-trees</title> + <!-- + PURPOSE: This case tests moving an animated sub-tree from one SVG document + fragment to another. Different document fragments have different time + containers and so this test ensures the animation is correctly transferred + from one time container to the other. + + OPERATION: Both animations contain a moving box. The first animation also + contains a circle. Both this circle and its child animation element are + removed from the first animation and added to the second animation. + + EXPECTED RESULTS: The circle appears in the second box at the appropriate + offset. + --> + <script> + function move() + { + var svgs = document.getElementsByTagName('svg'); + for (var i = 0; i < svgs.length; i++) { + var svg = svgs[i]; + svg.pauseAnimations(); + svg.setCurrentTime(1.5); + } + doMove(); + setTimeout('document.documentElement.removeAttribute("class")', 0); + } + + function doMove() + { + var circle = document.getElementById('circle-to-move'); + circle.parentNode.removeChild(circle); + var target = document.getElementById('new-parent'); + target.appendChild(circle); + } + </script> + </head> + + <body onload="move()"> + <svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px"> + <rect x="0" y="0" width="199" height="199" + style="fill: none; stroke: black"/> + <g> + <!-- background rect to track progress --> + <rect x="0" y="80" width="0" height="40" fill="royalblue" + stroke="black" stroke-width="1"> + <animate attributeName="width" from="0" to="200" begin="0s" dur="3s" + fill="freeze"/> + </rect> + <!-- circle to transfer --> + <circle cx="0" cy="100" r="15" fill="skyblue" stroke="black" + stroke-width="1" id="circle-to-move"> + <animate attributeName="cx" from="0" to="200" begin="0s" dur="3s" + fill="freeze"/> + </circle> + </g> + </svg> + <!-- Second animation --> + <svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px"> + <rect x="0" y="0" width="199" height="199" + style="fill: none; stroke: black"/> + <g id="new-parent"> + <!-- background rect to track progress --> + <rect x="0" y="80" width="0" height="40" fill="greenyellow" + stroke="black" stroke-width="1"> + <animate attributeName="width" from="0" to="200" begin="0s" dur="3s" + fill="freeze"/> + </rect> + </g> + </svg> + </body> +</html> diff --git a/layout/reftests/svg/smil/container/promoted-tree-1-ref.xhtml b/layout/reftests/svg/smil/container/promoted-tree-1-ref.xhtml new file mode 100644 index 0000000000..9b40914541 --- /dev/null +++ b/layout/reftests/svg/smil/container/promoted-tree-1-ref.xhtml @@ -0,0 +1,26 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no" ?> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>Promoted subtree</title> + </head> + + <body> + <p id="container"> + <svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px" + id="outer"> + <rect x="0" y="0" width="199" height="199" + style="fill: none; stroke: black"/> + <circle cx="100" cy="50" r="15" fill="skyblue" stroke="black" + stroke-width="1"/> + </svg> + <!-- (was) nested svg fragment --> + <svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px" + id="nested"> + <rect x="0" y="0" width="199" height="199" + style="fill: none; stroke: black"/> + <circle cx="50" cy="110" r="15" fill="greenyellow" stroke="black" + stroke-width="1"/> + </svg> + </p> + </body> +</html> diff --git a/layout/reftests/svg/smil/container/promoted-tree-1.xhtml b/layout/reftests/svg/smil/container/promoted-tree-1.xhtml new file mode 100644 index 0000000000..f788d57e11 --- /dev/null +++ b/layout/reftests/svg/smil/container/promoted-tree-1.xhtml @@ -0,0 +1,71 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no" ?> +<html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait"> + <head> + <title>Promoted subtree</title> + <!-- + PURPOSE: As timing containers are defined according to the outermost SVG + document fragment, this case tests when a nested <svg> element is removed + and added as the outermost svg fragment, that is, promoted. + + OPERATION: There is one animation containing two circles that move to the + right. The second circle is contained in a nested <svg> element. This nested + <svg> is removed from the outer <svg> element and then appended to + the parent <p> element. + + EXPECTED RESULTS: After removing the inner <svg> and making it a child of + the <p> it becomes an outermost <svg> and therefore a new time container and + so the animation resets. This behaviour is the same in Opera and we believe + it to be correct. + --> + <script> + function moveAndSplit() + { + var svg = document.getElementById('outer'); + svg.pauseAnimations(); + svg.setCurrentTime(0.5); + split(); + svg = document.getElementById('nested'); + svg.pauseAnimations(); + var svgs = document.getElementsByTagName('svg'); + for (var i = 0; i < svgs.length; i++) { + var svg = svgs[i]; + svg.setCurrentTime(svg.getCurrentTime() + 0.5); + } + setTimeout('document.documentElement.removeAttribute("class")', 0); + } + + function split() + { + var nested = document.getElementById('nested'); + nested.parentNode.removeChild(nested); + var container = document.getElementById('container'); + container.appendChild(nested); + } + </script> + </head> + + <body onload="moveAndSplit()"> + <p id="container"> + <svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px" + id="outer"> + <rect x="0" y="0" width="199" height="199" + style="fill: none; stroke: black"/> + <circle cx="0" cy="50" r="15" fill="skyblue" stroke="black" + stroke-width="1"> + <animate attributeName="cx" from="0" to="200" begin="0s" dur="2s" + fill="freeze"/> + </circle> + <!-- nested svg fragment --> + <svg width="200px" height="200px" id="nested"> + <rect x="0" y="0" width="199" height="199" + style="fill: none; stroke: black"/> + <circle cx="0" cy="110" r="15" fill="greenyellow" stroke="black" + stroke-width="1"> + <animate attributeName="cx" from="0" to="200" begin="0s" dur="2s" + fill="freeze"/> + </circle> + </svg> + </svg> + </p> + </body> +</html> diff --git a/layout/reftests/svg/smil/container/reftest.list b/layout/reftests/svg/smil/container/reftest.list new file mode 100644 index 0000000000..c492817d3f --- /dev/null +++ b/layout/reftests/svg/smil/container/reftest.list @@ -0,0 +1,18 @@ +# Tests related to SVG Animation (using SMIL), focusing on animation-sorting +# to see which animation takes precedence (out of multiple animations on the +# same attribute) + +random == enveloped-tree-1.xhtml enveloped-tree-1-ref.xhtml # bug 470868 +fuzzy(0-1,0-810) == promoted-tree-1.xhtml promoted-tree-1-ref.xhtml +random == moved-tree-1.xhtml moved-tree-1-ref.xhtml # bug 470868 +random-if(cocoaWidget||d2d) == deferred-anim-1.xhtml deferred-anim-1-ref.xhtml # bug 470868, bug 585484 +random-if(cocoaWidget&&layersGPUAccelerated) == deferred-tree-1.xhtml deferred-tree-1-ref.xhtml # bug 470868 +random-if(cocoaWidget&&layersGPUAccelerated) fuzzy(0-1,0-530) == deferred-tree-2a.xhtml deferred-tree-2-ref.xhtml # bug 470868 +random-if(cocoaWidget&&layersGPUAccelerated) fuzzy(0-1,0-530) == deferred-tree-2b.xhtml deferred-tree-2-ref.xhtml # bug 470868 +fuzzy(0-1,0-410) == deferred-tree-3a.xhtml deferred-tree-3-ref.xhtml +fuzzy(0-1,0-110) == deferred-tree-3b.xhtml deferred-tree-3-ref.xhtml +fuzzy(0-1,0-110) == deferred-tree-3c.xhtml deferred-tree-3-ref.xhtml +fuzzy(0-1,0-110) == deferred-tree-3d.xhtml deferred-tree-3-ref.xhtml +# this will occasionally fail until we correctly clear animation effects from +# no-longer-targeted elements +random == invalid-elem-1.xhtml invalid-elem-1-ref.xhtml |