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 | |
| 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')
585 files changed, 15843 insertions, 0 deletions
diff --git a/layout/reftests/svg/smil/anim-additive-fallback-1.svg b/layout/reftests/svg/smil/anim-additive-fallback-1.svg new file mode 100644 index 0000000000..1978663e2c --- /dev/null +++ b/layout/reftests/svg/smil/anim-additive-fallback-1.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="setTimeAndSnapshot(0.5, true)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="15" y="15" width="200" height="200" fill="blue" display="none"> + <!-- The following animation is marked as additive even though the display + property is not additive. We should basically behave as if the additive + attribute were not specified and set display to 'block' after 0.5s. + --> + <animate attributeName="display" from="none" to="block" additive="sum" + dur="1s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-change-display-block-for-dynamically-appended-elem.html b/layout/reftests/svg/smil/anim-change-display-block-for-dynamically-appended-elem.html new file mode 100644 index 0000000000..e9be6a7cae --- /dev/null +++ b/layout/reftests/svg/smil/anim-change-display-block-for-dynamically-appended-elem.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <head> + <title>Test dynamically-appended animation in a subtree that dynamically became 'display:none'</title> + </head> + <body style="background-color: lime;"> + <div id="target" style="display: none;"> + <svg> + <rect width="100" height="100" fill="brown" id="rect"> + </rect> + </svg> + </div> + <script> + document.addEventListener('MozReftestInvalidate', function() { + var svg = document.getElementsByTagName("svg")[0]; + svg.pauseAnimations(); // pause svg animation. + + var target = document.getElementById("target"); + var rect = document.getElementById("rect"); + var animate = document.createElementNS('http://www.w3.org/2000/svg', + 'animate'); + animate.setAttribute('attributeName', 'fill'); + animate.setAttribute('from', 'blue'); + animate.setAttribute('to', 'red'); + animate.setAttribute('dur', '100s'); + rect.appendChild(animate); + + requestAnimationFrame(function(time) { + target.style.display = 'block'; + requestAnimationFrame(function(time) { + document.documentElement.removeAttribute("class"); + }); + }); + }); + </script> + </body> +</html> diff --git a/layout/reftests/svg/smil/anim-change-display-none-for-ancestor-elem.html b/layout/reftests/svg/smil/anim-change-display-none-for-ancestor-elem.html new file mode 100644 index 0000000000..e34f52056e --- /dev/null +++ b/layout/reftests/svg/smil/anim-change-display-none-for-ancestor-elem.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <head> + <title>Test animation in a subtree that dynamically becames 'display:none'</title> + </head> + <body style="background-color: lime;"> + <div id="target"> + <svg> + <rect width="100%" height="100%" fill="blue"> + <animate attributeName="fill" from="brown" to="red" dur="100s"/> + </rect> + </svg> + </div> + <script> + document.addEventListener('MozReftestInvalidate', function() { + var target = document.getElementById("target"); + target.style.display = "none"; + + requestAnimationFrame(function(time) { + document.documentElement.removeAttribute("class"); + }); + }); + </script> + </body> +</html> diff --git a/layout/reftests/svg/smil/anim-change-display-none-for-dynamically-appended-elem.html b/layout/reftests/svg/smil/anim-change-display-none-for-dynamically-appended-elem.html new file mode 100644 index 0000000000..ecb1720b9b --- /dev/null +++ b/layout/reftests/svg/smil/anim-change-display-none-for-dynamically-appended-elem.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <head> + <title>Test dynamically-appended animation on an element that dynamically becomes 'display:none'</title> + </head> + <body style="background-color: lime;"> + <div> + <svg> + <rect width="100" height="100" fill="brown" id="rect"> + </rect> + </svg> + </div> + <script> + document.addEventListener('MozReftestInvalidate', function() { + var rect = document.getElementById("rect"); + var animate = document.createElementNS('http://www.w3.org/2000/svg', + 'animate'); + animate.setAttribute('attributeName', 'fill'); + animate.setAttribute('from', 'blue'); + animate.setAttribute('to', 'red'); + animate.setAttribute('dur', '100s'); + rect.appendChild(animate); + + requestAnimationFrame(function(time) { + rect.style.display = 'none'; + requestAnimationFrame(function(time) { + document.documentElement.removeAttribute("class"); + }); + }); + }); + </script> + </body> +</html> diff --git a/layout/reftests/svg/smil/anim-change-display-none-for-target-elem.html b/layout/reftests/svg/smil/anim-change-display-none-for-target-elem.html new file mode 100644 index 0000000000..6852994571 --- /dev/null +++ b/layout/reftests/svg/smil/anim-change-display-none-for-target-elem.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <head> + <title>Test animation on an element that dynamically becomes 'display:none'</title> + </head> + <body style="background-color: lime;"> + <div> + <svg> + <rect width="100%" height="100%" fill="blue" id="rect"> + <animate attributeName="fill" from="brown" to="red" dur="100s"/> + </rect> + </svg> + </div> + <script> + document.addEventListener('MozReftestInvalidate', function() { + var rect = document.getElementById("rect"); + rect.style.display = "none"; + + requestAnimationFrame(function(time) { + document.documentElement.removeAttribute("class"); + }); + }); + </script> + </body> +</html> diff --git a/layout/reftests/svg/smil/anim-class-01.svg b/layout/reftests/svg/smil/anim-class-01.svg new file mode 100644 index 0000000000..4fe4faab21 --- /dev/null +++ b/layout/reftests/svg/smil/anim-class-01.svg @@ -0,0 +1,23 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" onload="setTimeAndSnapshot(1, true)"> + <title>Test animation of the class attribute on "rect" elements</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + <style type="text/css"> + + .start {visibility: hidden; fill: red; } + .midway {visibility: visible; fill: red; } + .final {fill: lime; } + + </style> + + <rect width="100%" height="100%" fill="red"/> + <rect width="100%" height="100%"> + <animate attributeName="class" attributeType="XML" + from="midway" to="final midway" begin="0.5s" dur="1s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-class-02.svg b/layout/reftests/svg/smil/anim-class-02.svg new file mode 100644 index 0000000000..67b2b3f4d9 --- /dev/null +++ b/layout/reftests/svg/smil/anim-class-02.svg @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" onload="setTimeAndSnapshot(1, true)"> + <title>Test animation of the class attribute on "rect" elements</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + <style type="text/css"> + + * {fill: lime;} + .start {visibility: visible; fill: red; } + + </style> + + <rect width="100%" height="100%" fill="red"/> + <rect width="100%" height="100%" class="start"> + <set attributeName="class" attributeType="XML" + to="" begin="0.5s" dur="1s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-class-03.svg b/layout/reftests/svg/smil/anim-class-03.svg new file mode 100644 index 0000000000..297569edfd --- /dev/null +++ b/layout/reftests/svg/smil/anim-class-03.svg @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" onload="setTimeAndSnapshot(1, true)"> + <title>Test animation of the class attribute on "rect" elements</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + <style type="text/css"> + + .start {fill: red; } + .finish {fill: lime;} + + </style> + + <rect width="100%" height="100%" fill="red"/> + <rect width="100%" height="100%" class="start"> + <set attributeName="class" attributeType="XML" + to="finish" begin="0.5s" dur="1s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-class-04-ref.svg b/layout/reftests/svg/smil/anim-class-04-ref.svg new file mode 100644 index 0000000000..0f5d535bd4 --- /dev/null +++ b/layout/reftests/svg/smil/anim-class-04-ref.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"> + <title>Reference for animation of the class attribute to an invalid value on "rect" elements</title> + <rect width="100%" height="100%" fill="black"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-class-04.svg b/layout/reftests/svg/smil/anim-class-04.svg new file mode 100644 index 0000000000..191b5d3b97 --- /dev/null +++ b/layout/reftests/svg/smil/anim-class-04.svg @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" onload="setTimeAndSnapshot(1, true)"> + <title>Test animation of the class attribute on "rect" elements</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + <style type="text/css"> + + .start {fill: red; } + + </style> + + <rect width="100%" height="100%" fill="red"/> + <rect width="100%" height="100%" class="start"> + <set attributeName="class" attributeType="XML" + to="#ThisIsAnInvalidClassName" begin="0.5s" dur="1s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-clipPath-viewBox-ref.svg b/layout/reftests/svg/smil/anim-clipPath-viewBox-ref.svg new file mode 100644 index 0000000000..ffc7694ba4 --- /dev/null +++ b/layout/reftests/svg/smil/anim-clipPath-viewBox-ref.svg @@ -0,0 +1,5 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + width="600" height="400"> + <circle cx="300" cy="200" r="100" style="fill:blue;"/> +</svg>
\ No newline at end of file diff --git a/layout/reftests/svg/smil/anim-clipPath-viewBox.svg b/layout/reftests/svg/smil/anim-clipPath-viewBox.svg new file mode 100644 index 0000000000..e02dbea7d3 --- /dev/null +++ b/layout/reftests/svg/smil/anim-clipPath-viewBox.svg @@ -0,0 +1,12 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + width="600" height="400" preserveAspectRatio="none" + viewBox="50 100 500 200" + class="reftest-wait" + onload="setTimeAndSnapshot(1, true)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="50" y="100" width="500" height="200" style="fill:blue;" + clip-path="circle(100px at center) view-box"/> + <animate attributeName="viewBox" values="50 100 500 200; 0 0 600 400" + dur="0.5s" fill="freeze"/> +</svg>
\ No newline at end of file diff --git a/layout/reftests/svg/smil/anim-conditions-01.svg b/layout/reftests/svg/smil/anim-conditions-01.svg new file mode 100644 index 0000000000..093a425e1e --- /dev/null +++ b/layout/reftests/svg/smil/anim-conditions-01.svg @@ -0,0 +1,12 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1, true)"> + <title>Test animation is disabled if conditional processing fails</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect width="100%" height="100%" fill="red"/> + <rect width="100%" height="100%" fill="lime"> + <set systemLanguage="foo" attributeName="width" + to="0%" dur="5s" begin="0s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-conditions-02.svg b/layout/reftests/svg/smil/anim-conditions-02.svg new file mode 100644 index 0000000000..0b24d9a3e3 --- /dev/null +++ b/layout/reftests/svg/smil/anim-conditions-02.svg @@ -0,0 +1,12 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1, true)"> + <title>Test animation is enabled if conditional processing succeeds</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect width="100%" height="100%" fill="red"/> + <rect width="0%" height="100%" fill="lime"> + <set requiredFeatures="http://www.w3.org/TR/SVG11/feature#Gradient" attributeName="width" + to="100%" dur="5s" begin="0s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-defs-fill.svg b/layout/reftests/svg/smil/anim-defs-fill.svg new file mode 100644 index 0000000000..e71e59f0b2 --- /dev/null +++ b/layout/reftests/svg/smil/anim-defs-fill.svg @@ -0,0 +1,22 @@ +<svg version="1.1" xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait"> + + <title>Test animation element in 'defs' element with 'fill' property</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + + <rect id="target" fill="red" width="100%" height="100%"/> + <defs> + <animate xlink:href="#target" + attributeName="fill" + calcMode="discrete" + values="red;lime" + dur="100s"/> + </defs> + + <script> + window.addEventListener("MozReftestInvalidate", function() { + setTimeAndWaitToSnapshot(49.9, 0.1); + }); + </script> +</svg> diff --git a/layout/reftests/svg/smil/anim-defs-gradient-attribute.svg b/layout/reftests/svg/smil/anim-defs-gradient-attribute.svg new file mode 100644 index 0000000000..56fea42473 --- /dev/null +++ b/layout/reftests/svg/smil/anim-defs-gradient-attribute.svg @@ -0,0 +1,25 @@ +<svg version="1.1" xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait"> + + <title>Test animation of gradient attribute in 'defs' element</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + + <rect fill="url(#gradient)" width="100%" height="100%"/> + <defs> + <linearGradient id="gradient" x1="0"> + <stop offset="0%" stop-color="red" /> + <stop offset="100%" stop-color="lime" /> + <animate attributeName="x1" + values="0;1" + calcMode="discrete" + dur="100s"/> + </linearGradient> + </defs> + + <script> + window.addEventListener("MozReftestInvalidate", function() { + setTimeAndWaitToSnapshot(49.9, 0.1); + }); + </script> +</svg> diff --git a/layout/reftests/svg/smil/anim-defs-gradient-property.svg b/layout/reftests/svg/smil/anim-defs-gradient-property.svg new file mode 100644 index 0000000000..11cc58687e --- /dev/null +++ b/layout/reftests/svg/smil/anim-defs-gradient-property.svg @@ -0,0 +1,25 @@ +<svg version="1.1" xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait"> + + <title>Test animation of gradient property in 'defs' element</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + + <rect fill="url(#gradient)" width="100%" height="100%"/> + <defs> + <linearGradient id="gradient"> + <stop> + <animate attributeName="stop-color" + values="red;lime" + calcMode="discrete" + dur="100s"/> + </stop> + </linearGradient> + </defs> + + <script> + window.addEventListener("MozReftestInvalidate", function() { + setTimeAndWaitToSnapshot(49.9, 0.1); + }); + </script> +</svg> diff --git a/layout/reftests/svg/smil/anim-defs-width.svg b/layout/reftests/svg/smil/anim-defs-width.svg new file mode 100644 index 0000000000..1308e0edfd --- /dev/null +++ b/layout/reftests/svg/smil/anim-defs-width.svg @@ -0,0 +1,22 @@ +<svg version="1.1" xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait"> + + <title>Test animation element in 'defs' element with 'width' attribute</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + + <rect id="target" fill="lime" width="0%" height="100%"/> + <defs> + <animate xlink:href="#target" + attributeName="width" + values="0%;100%" + calcMode="discrete" + dur="100s"/> + </defs> + + <script> + window.addEventListener("MozReftestInvalidate", function() { + setTimeAndWaitToSnapshot(49.9, 0.1); + }); + </script> +</svg> diff --git a/layout/reftests/svg/smil/anim-discrete-replace-sum-1.svg b/layout/reftests/svg/smil/anim-discrete-replace-sum-1.svg new file mode 100644 index 0000000000..d973c4a857 --- /dev/null +++ b/layout/reftests/svg/smil/anim-discrete-replace-sum-1.svg @@ -0,0 +1,12 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2.5, false)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="15" y="15" width="200" height="20" fill="blue"> + <animate attributeName="height" calcMode="discrete" + additive="replace" accumulate="sum" + from="20" to="100" repeatCount="2" + begin="0s" dur="1s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-discrete-sum-none-1.svg b/layout/reftests/svg/smil/anim-discrete-sum-none-1.svg new file mode 100644 index 0000000000..dd554cc78a --- /dev/null +++ b/layout/reftests/svg/smil/anim-discrete-sum-none-1.svg @@ -0,0 +1,12 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2.5, false)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="15" y="15" width="200" height="20" fill="blue"> + <animate attributeName="height" calcMode="discrete" + additive="sum" accumulate="none" + from="20" to="180" + begin="0s" dur="2s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-discrete-sum-sum-1.svg b/layout/reftests/svg/smil/anim-discrete-sum-sum-1.svg new file mode 100644 index 0000000000..e57c692122 --- /dev/null +++ b/layout/reftests/svg/smil/anim-discrete-sum-sum-1.svg @@ -0,0 +1,12 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2.5, false)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="15" y="15" width="200" height="20" fill="blue"> + <animate attributeName="height" calcMode="discrete" + additive="sum" accumulate="sum" + from="20" to="90" repeatCount="2" + begin="0s" dur="1s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-discrete-to-1.svg b/layout/reftests/svg/smil/anim-discrete-to-1.svg new file mode 100644 index 0000000000..41a078764c --- /dev/null +++ b/layout/reftests/svg/smil/anim-discrete-to-1.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(0.0, true)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="15" y="15" width="200" height="200" fill="blue"> + <animate attributeName="height" calcMode="discrete" + to="100" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-discrete-to-2.svg b/layout/reftests/svg/smil/anim-discrete-to-2.svg new file mode 100644 index 0000000000..e64d5d9d0f --- /dev/null +++ b/layout/reftests/svg/smil/anim-discrete-to-2.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(0.99, true)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="15" y="15" width="200" height="200" fill="blue"> + <animate attributeName="height" calcMode="discrete" + to="100" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-discrete-to-3.svg b/layout/reftests/svg/smil/anim-discrete-to-3.svg new file mode 100644 index 0000000000..0430821609 --- /dev/null +++ b/layout/reftests/svg/smil/anim-discrete-to-3.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1.0, true)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="15" y="15" width="200" height="100" fill="blue"> + <animate attributeName="height" calcMode="discrete" + to="200" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-discrete-to-4.svg b/layout/reftests/svg/smil/anim-discrete-to-4.svg new file mode 100644 index 0000000000..4295ce0552 --- /dev/null +++ b/layout/reftests/svg/smil/anim-discrete-to-4.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2.5, false)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="15" y="15" width="200" height="100" fill="blue"> + <animate attributeName="height" calcMode="discrete" + to="200" dur="2s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-discrete-values-1.svg b/layout/reftests/svg/smil/anim-discrete-values-1.svg new file mode 100644 index 0000000000..8af8ac636c --- /dev/null +++ b/layout/reftests/svg/smil/anim-discrete-values-1.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2.5, true)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="15" y="15" width="200" height="50" fill="blue"> + <animate attributeName="height" calcMode="discrete" + values="100; 200; 50" begin="0s" dur="5s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-discrete-values-2.svg b/layout/reftests/svg/smil/anim-discrete-values-2.svg new file mode 100644 index 0000000000..c05693e143 --- /dev/null +++ b/layout/reftests/svg/smil/anim-discrete-values-2.svg @@ -0,0 +1,31 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(29, true)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <title>Test discrete keyTimes are scaled correctly (Bug 681645)</title> + <rect x="15" y="15" width="200" height="200" fill="blue"> + <animate attributeName="fill" begin="0" dur="100s" + calcMode="discrete" + values="red;red;red;red;red;red;red;red;red;red; + red;red;red;red;red;red;red;red;red;red; + red;red;red;red;red;red;red;red;red;blue; + red;red;red;red;red;red;red;red;red;red; + red;red;red;red;red;red;red;red;red;red; + red;red;red;red;red;red;red;red;red;red; + red;red;red;red;red;red;red;red;red;red; + red;red;red;red;red;red;red;red;red;red; + red;red;red;red;red;red;red;red;red;red; + red;red;red;red;red;red;red;red;red;red" + keyTimes="0.00;0.01;0.02;0.03;0.04;0.05;0.06;0.07;0.08;0.09; + 0.10;0.11;0.12;0.13;0.14;0.15;0.16;0.17;0.18;0.19; + 0.20;0.21;0.22;0.23;0.24;0.25;0.26;0.27;0.28;0.29; + 0.30;0.31;0.32;0.33;0.34;0.35;0.36;0.37;0.38;0.39; + 0.40;0.41;0.42;0.43;0.44;0.45;0.46;0.47;0.48;0.49; + 0.50;0.51;0.52;0.53;0.54;0.55;0.56;0.57;0.58;0.59; + 0.60;0.61;0.62;0.63;0.64;0.65;0.66;0.67;0.68;0.69; + 0.70;0.71;0.72;0.73;0.74;0.75;0.76;0.77;0.78;0.79; + 0.80;0.81;0.82;0.83;0.84;0.85;0.86;0.87;0.88;0.89; + 0.90;0.91;0.92;0.93;0.94;0.95;0.96;0.97;0.98;0.99"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-discrete-values-3.svg b/layout/reftests/svg/smil/anim-discrete-values-3.svg new file mode 100644 index 0000000000..c6b850bfd6 --- /dev/null +++ b/layout/reftests/svg/smil/anim-discrete-values-3.svg @@ -0,0 +1,21 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(29, true)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <title>Test discrete keyTimes are scaled correctly (Bug 681645)</title> + <rect x="15" y="15" width="200" height="200" fill="blue"> + <animate attributeName="fill" begin="0" dur="100s" + calcMode="discrete" + values="red;red;red;red;red;red;red;red;red;red; + red;red;red;red;red;red;red;red;red;red; + red;red;red;red;red;red;red;red;red;blue; + red;red;red;red;red;red;red;red;red;red; + red;red;red;red;red;red;red;red;red;red; + red;red;red;red;red;red;red;red;red;red; + red;red;red;red;red;red;red;red;red;red; + red;red;red;red;red;red;red;red;red;red; + red;red;red;red;red;red;red;red;red;red; + red;red;red;red;red;red;red;red;red;red"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-display-in-g-element.svg b/layout/reftests/svg/smil/anim-display-in-g-element.svg new file mode 100644 index 0000000000..8916aea893 --- /dev/null +++ b/layout/reftests/svg/smil/anim-display-in-g-element.svg @@ -0,0 +1,23 @@ +<svg version="1.1" xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait"> + + <title>Test animation that changes 'display' attribute on an element that is not the immediate parent</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + + <g display="none" id="g"> + <rect width="100%" height="100%" fill="lime"> + <animate xlink:href="#g" + attributeName="display" + values="none;inline" + calcMode="discrete" + dur="100s"/> + </rect> + </g> + + <script> + window.addEventListener("MozReftestInvalidate", function() { + setTimeAndWaitToSnapshot(49.9, 0.1); + }); + </script> +</svg> diff --git a/layout/reftests/svg/smil/anim-display.svg b/layout/reftests/svg/smil/anim-display.svg new file mode 100644 index 0000000000..53e92d26bb --- /dev/null +++ b/layout/reftests/svg/smil/anim-display.svg @@ -0,0 +1,20 @@ +<svg version="1.1" xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait"> + + <title>Test animation that changes 'display' attribute</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + + <rect display="none" width="100%" height="100%" fill="lime"> + <animate attributeName="display" + values="none;inline" + calcMode="discrete" + dur="100s"/> + </rect> + + <script> + window.addEventListener("MozReftestInvalidate", function() { + setTimeAndWaitToSnapshot(49.9, 0.1); + }); + </script> +</svg> diff --git a/layout/reftests/svg/smil/anim-feComponentTransfer-01.svg b/layout/reftests/svg/smil/anim-feComponentTransfer-01.svg new file mode 100644 index 0000000000..69f879d804 --- /dev/null +++ b/layout/reftests/svg/smil/anim-feComponentTransfer-01.svg @@ -0,0 +1,32 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1, true)"> + <title>Test animation of the "intercept" attribute of the "feComponentTransfer" element</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + <filter id="flood_filter" x="0%" y="0%" width="100%" height="100%"> + <feComponentTransfer> + <feFuncR type="linear" slope="0" intercept="1"> + <animate attributeName="intercept" + calcMode="linear" + begin="0s" dur="2s" + from="1" to="-1" + fill="freeze"/> + </feFuncR> + <feFuncG type="linear" slope="0" intercept="0"> + <animate attributeName="intercept" + calcMode="linear" + begin="0s" dur="2s" + from="0" to="2" + fill="freeze"/> + </feFuncG> + <feFuncB type="identity"/> + </feComponentTransfer> + </filter> + <rect width="100%" height="100%" fill="red"/> + <rect width="100%" height="100%" fill="red" filter="url(#flood_filter)"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-feComposite-operator-01.svg b/layout/reftests/svg/smil/anim-feComposite-operator-01.svg new file mode 100644 index 0000000000..0223cea931 --- /dev/null +++ b/layout/reftests/svg/smil/anim-feComposite-operator-01.svg @@ -0,0 +1,38 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1, true)"> + <title>Test animation of the "operator" enum attribute on the "feComposite" element</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + <filter id="composite_filter_1" x="-100%" y="0%" width="200%" height="100%"> + <feFlood flood-color="lime" result="lime"/> + <feComposite in="lime" in2="SourceGraphic" operator="out"> + <!-- this should turn the referencing element red at 1.25s --> + <animate attributeName="operator" + calcMode="discrete" + begin="0s" dur="2.5s" + from="out" to="in" + fill="freeze"/> + </feComposite> + </filter> + <filter id="composite_filter_2" x="0%" y="0%" width="200%" height="100%"> + <feFlood flood-color="lime" result="lime"/> + <feComposite in="lime" in2="SourceGraphic" operator="out"> + <!-- this should turn the referencing element lime at 1s --> + <animate attributeName="operator" + calcMode="discrete" + begin="0s" dur="2s" + from="out" to="in" + fill="freeze"/> + </feComposite> + </filter> + <rect width="100%" height="100%" fill="lime"/> + + <!-- 40% through discrete animation simple duration - test animation doesn't affect the element too early --> + <rect width="100" height="100" fill="red"/> + <rect x="100" width="100" height="100" fill="red" filter="url(#composite_filter_1)"/> + + <!-- 50% through discrete animation simple duration - test animation affects the element now --> + <rect y="100" width="100" height="100" fill="red"/> + <rect y="100" width="100" height="100" fill="red" filter="url(#composite_filter_2)"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-feConvolveMatrix-order-01-ref.svg b/layout/reftests/svg/smil/anim-feConvolveMatrix-order-01-ref.svg new file mode 100644 index 0000000000..db5ab20e38 --- /dev/null +++ b/layout/reftests/svg/smil/anim-feConvolveMatrix-order-01-ref.svg @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <title>Testcase for animation of the "order" attribute of the "feConvolveMatrix" element</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + <defs> + <filter id="f"> + <feConvolveMatrix order="3" kernelMatrix="1 1 1 1 1 1 1 1 1" edgeMode="none"></feConvolveMatrix> + </filter> + </defs> + <g filter="url(#f)"> + <rect x="10" y="10" width="50" height="100" fill="orange"/> + <rect x="60" y="10" width="50" height="100" fill="blue"/> + </g> +</svg> diff --git a/layout/reftests/svg/smil/anim-feConvolveMatrix-order-01.svg b/layout/reftests/svg/smil/anim-feConvolveMatrix-order-01.svg new file mode 100644 index 0000000000..d24eb3b8d7 --- /dev/null +++ b/layout/reftests/svg/smil/anim-feConvolveMatrix-order-01.svg @@ -0,0 +1,53 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <title>Testcase for animation of the "order" attribute of the "feConvolveMatrix" element</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + <defs> + <filter id="f"> + <feConvolveMatrix order="1" kernelMatrix="1" edgeMode="none"> + <!-- Animate the kernel matrix dimensions from 1x1 to 5x5. --> + <animate attributeName="order" + calcMode="linear" + begin="0s" dur="4s" + from="1" to="5 5" + fill="freeze"/> + <!-- + Animate the kernel matrix values. + Each successive matrix blurs the image more. + We will pause on the 3x3 matrix. + --> + <animate attributeName="kernelMatrix" + calcMode="linear" + begin="0s" dur="1s" + from="1" to="1 1 1 1" + fill="freeze"/> + <animate attributeName="kernelMatrix" + calcMode="linear" + begin="1s" dur="1s" + from="1 1 1 1" to="1 1 1 1 1 1 1 1 1" + fill="freeze"/> + <animate attributeName="kernelMatrix" + calcMode="linear" + begin="2s" dur="1s" + from="1 1 1 1 1 1 1 1 1" to="1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1" + fill="freeze"/> + <animate attributeName="kernelMatrix" + calcMode="linear" + begin="3s" dur="1s" + from="1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1" to="1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1" + fill="freeze"/> + </feConvolveMatrix> + </filter> + </defs> + <g filter="url(#f)"> + <!-- The edge between the orange rect and the blue rect will become blurry. --> + <rect x="10" y="10" width="50" height="100" fill="orange"/> + <rect x="60" y="10" width="50" height="100" fill="blue"/> + </g> +</svg> diff --git a/layout/reftests/svg/smil/anim-feConvolveMatrix-preserveAlpha-01.svg b/layout/reftests/svg/smil/anim-feConvolveMatrix-preserveAlpha-01.svg new file mode 100644 index 0000000000..0eb3a7a7d6 --- /dev/null +++ b/layout/reftests/svg/smil/anim-feConvolveMatrix-preserveAlpha-01.svg @@ -0,0 +1,41 @@ +<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(1, true)">
+ <title>Test animation of the "preserveAlpha" <boolean> attribute on the "feConvolveMatrix" element</title>
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <filter id="convolve_1">
+ <feConvolveMatrix order="2 2" kernelMatrix="0 0 0 0" preserveAlpha="true">
+ <!-- turn the referencing element from transparent to red at 1.25s -->
+ <animate attributeName="preserveAlpha"
+ calcMode="discrete"
+ begin="0s" dur="2.5s"
+ from="false" to="true"
+ fill="freeze"/>
+ </feConvolveMatrix>
+ <feColorMatrix type="matrix"
+ values="0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+ </filter>
+ <filter id="convolve_2">
+ <feConvolveMatrix order="2 2" kernelMatrix="0 0 0 0" preserveAlpha="true">
+ <!-- turn the referencing element from red to transparent at 1s -->
+ <animate attributeName="preserveAlpha"
+ calcMode="discrete"
+ begin="0s" dur="2s"
+ from="true" to="false"
+ fill="freeze"/>
+ </feConvolveMatrix>
+ <feColorMatrix type="matrix"
+ values="0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+ </filter>
+ <rect width="100%" height="100%" fill="lime"/>
+
+ <!-- 40% through discrete animation simple duration -
+ tests that the animation doesn't affect the element too early -->
+ <rect width="100" height="50" fill="red" filter="url(#convolve_1)"/>
+
+ <!-- 50% through discrete animation simple duration -
+ tests that the animation affects the element now -->
+ <rect y="50" width="100" height="50" fill="red" filter="url(#convolve_2)"/>
+
+</svg>
diff --git a/layout/reftests/svg/smil/anim-feDistantLight-01-ref.svg b/layout/reftests/svg/smil/anim-feDistantLight-01-ref.svg new file mode 100644 index 0000000000..6fe45b7faf --- /dev/null +++ b/layout/reftests/svg/smil/anim-feDistantLight-01-ref.svg @@ -0,0 +1,17 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Reference for animation of the "elevation" attribute of the "feDistantLight" element</title> + <defs> + <filter id="f" x="0" y="0" width="0.5" height="0.5"> + <feDiffuseLighting kernelUnitLength="1" lighting-color="lime"> + <feDistantLight elevation="100"> + </feDistantLight> + </feDiffuseLighting> + </filter> + </defs> + <path d="M0,0 h100 v100 h-100 z" filter="url(#f)"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-feDistantLight-01.svg b/layout/reftests/svg/smil/anim-feDistantLight-01.svg new file mode 100644 index 0000000000..42221cdb48 --- /dev/null +++ b/layout/reftests/svg/smil/anim-feDistantLight-01.svg @@ -0,0 +1,25 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1, true)"> + <title>Testcase for animation of the "elevation" attribute of the "feDistantLight" element</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + <defs> + <filter id="f" x="0" y="0" width="0.5" height="0.5"> + <feDiffuseLighting kernelUnitLength="1" lighting-color="lime"> + <feDistantLight elevation="0"> + <animate attributeName="elevation" + calcMode="linear" + begin="0s" dur="2s" + from="0" to="200" + fill="freeze"/> + </feDistantLight> + </feDiffuseLighting> + </filter> + </defs> + <path d="M0,0 h100 v100 h-100 z" filter="url(#f)"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-feFuncR-tableValues-01-ref.svg b/layout/reftests/svg/smil/anim-feFuncR-tableValues-01-ref.svg new file mode 100644 index 0000000000..fd09b807e7 --- /dev/null +++ b/layout/reftests/svg/smil/anim-feFuncR-tableValues-01-ref.svg @@ -0,0 +1,52 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <title></title> + + <linearGradient id="gradient"> + <stop offset="0" stop-color="black" /> + <stop offset="100%" stop-color="red" /> + </linearGradient> + + <!-- Comparison for calcMode="linear". --> + + <filter id="f_calcMode_linear_to" x="0%" y="0%" width="100%" height="100%"> + <feComponentTransfer> + <feFuncR type="table" tableValues="0 2 2 0"/> + </feComponentTransfer> + </filter> + <rect x="20" y="20" width="256" height="20" fill="url(#gradient)" + filter="url(#f_calcMode_linear_to)"/> + + + <!-- Comparison for 'by' animation. --> + + <filter id="f_calcMode_linear_by" x="0%" y="0%" width="100%" height="100%"> + <feComponentTransfer> + <feFuncR type="table" tableValues="0 2 2 0"/> + </feComponentTransfer> + </filter> + <rect x="20" y="60" width="256" height="20" fill="url(#gradient)" + filter="url(#f_calcMode_linear_by)"/> + + + <!-- Comparison for calcMode="paced". --> + + <filter id="f_calcMode_paced" x="0%" y="0%" width="100%" height="100%"> + <feComponentTransfer> + <feFuncR type="table" tableValues="0 2 2 0"/> + </feComponentTransfer> + </filter> + <rect x="20" y="100" width="256" height="20" fill="url(#gradient)" + filter="url(#f_calcMode_paced)"/> + + + <!-- Comparison for calcMode="discrete". --> + + <filter id="f_calcMode_discrete" x="0%" y="0%" width="100%" height="100%"> + <feComponentTransfer> + <feFuncR type="table" tableValues="0 2 2 0"/> + </feComponentTransfer> + </filter> + <rect x="20" y="140" width="256" height="20" fill="url(#gradient)" + filter="url(#f_calcMode_discrete)"/> + +</svg> diff --git a/layout/reftests/svg/smil/anim-feFuncR-tableValues-01.svg b/layout/reftests/svg/smil/anim-feFuncR-tableValues-01.svg new file mode 100644 index 0000000000..512e1ab074 --- /dev/null +++ b/layout/reftests/svg/smil/anim-feFuncR-tableValues-01.svg @@ -0,0 +1,101 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1, true)"> + <title>Test animation of the <number-list> attribute on the 'text' element</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + + <linearGradient id="gradient"> + <stop offset="0" stop-color="black" /> + <stop offset="100%" stop-color="red" /> + </linearGradient> + + <!-- The difference between respective numbers in the effective 'from' and + 'to' lists below is carefully designed to be a factor of 3. That way + our reference file (which checks against a one third complete animation) + can contain whole numbers, which is necessary to avoid failure due to + hard coded rounded numbers in the reference not matching platform + specific rounding behaviour. + --> + + + <!-- Test calcMode="linear". --> + + <filter id="f_calcMode_linear_to" x="0%" y="0%" width="100%" height="100%"> + <feComponentTransfer> + <feFuncR type="table" tableValues="-1 3 3 -1"> + + <!-- At 1s the animVal should be "0 2 2 0". --> + <animate attributeName="tableValues" + calcMode="linear" + begin="0s" dur="3s" + to="2 0 0 2" + fill="freeze"/> + + </feFuncR> + </feComponentTransfer> + </filter> + <rect x="20" y="20" width="256" height="20" fill="url(#gradient)" + filter="url(#f_calcMode_linear_to)"/> + + + <!-- Test 'by' animation. --> + + <filter id="f_calcMode_linear_by" x="0%" y="0%" width="100%" height="100%"> + <feComponentTransfer> + <feFuncR type="table" tableValues="-1 3 3 -1"> + + <!-- At 1s the animVal should be "0 2 2 0". --> + <animate attributeName="tableValues" + calcMode="linear" + begin="0s" dur="3s" + by="3 -3 -3 3" + fill="freeze"/> + + </feFuncR> + </feComponentTransfer> + </filter> + <rect x="20" y="60" width="256" height="20" fill="url(#gradient)" + filter="url(#f_calcMode_linear_by)"/> + + + <!-- Test calcMode="paced". --> + + <filter id="f_calcMode_paced" x="0%" y="0%" width="100%" height="100%"> + <feComponentTransfer> + <feFuncR type="table" tableValues="-1 3 3 -1"> + + <!-- At 1s the animVal should be "0 2 2 0". --> + <animate attributeName="tableValues" + calcMode="paced" + begin="0s" dur="3s" + values="-1 3 3 -1; 1 1 1 1; 2 0 0 2" + fill="freeze"/> + + </feFuncR> + </feComponentTransfer> + </filter> + <rect x="20" y="100" width="256" height="20" fill="url(#gradient)" + filter="url(#f_calcMode_paced)"/> + + + <!-- Test calcMode="discrete". --> + + <filter id="f_calcMode_discrete" x="0%" y="0%" width="100%" height="100%"> + <feComponentTransfer> + <feFuncR type="table" tableValues="0 0 0 0"> + + <!-- The value should be "0 2 2 0" from 1s onwards. --> + <animate attributeName="tableValues" + calcMode="discrete" + begin="0s" dur="2s" + to="0 2 2 0" + fill="freeze"/> + + </feFuncR> + </feComponentTransfer> + </filter> + <rect x="20" y="140" width="256" height="20" fill="url(#gradient)" + filter="url(#f_calcMode_discrete)"/> + +</svg> diff --git a/layout/reftests/svg/smil/anim-feGaussianBlur-01.svg b/layout/reftests/svg/smil/anim-feGaussianBlur-01.svg new file mode 100644 index 0000000000..40f804d74c --- /dev/null +++ b/layout/reftests/svg/smil/anim-feGaussianBlur-01.svg @@ -0,0 +1,25 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1.9999, true)"> + <title>Test animation of the "stdDeviation" <number-optional-number> attribute on "feGaussianBlur" elements</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + <filter id="filter" x="0" y="0" width="1" height="1"> + <feGaussianBlur stdDeviation="50"> + <animate attributeName="stdDeviation" + calcMode="linear" + begin="0s" dur="2s" + from="100,100" to="0" + fill="freeze"/> + </feGaussianBlur> + </filter> + <rect width="100%" height="100%" fill="lime"/> + <g transform="translate(50, 0)"> + <circle fill="red" cx="100" cy="100" r="98" transform="translate(50, 0)" filter="url(#filter)"/> + </g> + <circle fill="lime" cx="200" cy="100" r="100"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-feImage-preserveAspectRatio-01.svg b/layout/reftests/svg/smil/anim-feImage-preserveAspectRatio-01.svg new file mode 100644 index 0000000000..13d3113a21 --- /dev/null +++ b/layout/reftests/svg/smil/anim-feImage-preserveAspectRatio-01.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 animation of the "preserveAspectRatio" attribute on the "feImage" element</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + <script type="text/javascript"> + function doTest() { + setTimeAndSnapshot(1, true); + } + window.addEventListener("MozReftestInvalidate", doTest, false); + </script> + + <rect width="100%" height="100%" fill="lime"/> + + <filter id="filter" filterUnits="userSpaceOnUse" + x="0" y="0" width="100" height="20"> + <!-- data: URI is a 1x1 lime GIF --> + <feImage preserveAspectRatio="xMidYMid meet" + style="image-rendering: optimizeSpeed;" + xlink:href="data:image/gif,GIF87a%01%00%01%00%80%01%00%00%FF%00%FF%FF%FF%2C%00%00%00%00%01%00%01%00%00%02%02D%01%00%3B"> + <animate attributeName="preserveAspectRatio" + begin="0s" dur="2s" + to="xMidYMid slice" + fill="freeze"/> + </feImage> + </filter> + + <rect width="100" height="20" fill="red"/> + <rect width="100" height="20" filter="url(#filter)"/> + +</svg> diff --git a/layout/reftests/svg/smil/anim-feOffset-01.svg b/layout/reftests/svg/smil/anim-feOffset-01.svg new file mode 100644 index 0000000000..30c8795670 --- /dev/null +++ b/layout/reftests/svg/smil/anim-feOffset-01.svg @@ -0,0 +1,34 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1, true)"> + <title>Test animation of the "dx" and "dy" attributes on the "feOffset" element</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + <filter id="offset_filter_1" x="0%" y="0%" width="300%" height="100%"> + <feOffset in="SourceGraphic"> + <animate attributeName="dx" + calcMode="linear" + begin="0s" dur="2s" + from="0" to="200" + fill="freeze"/> + </feOffset> + </filter> + <filter id="offset_filter_2" x="0%" y="0%" width="100%" height="200%"> + <feOffset in="SourceGraphic"> + <animate attributeName="dy" + calcMode="linear" + begin="0s" dur="1s" + from="0" to="100" + fill="freeze"/> + </feOffset> + </filter> + <rect width="100%" height="100%" fill="lime"/> + + <!-- test 50% completed animation --> + <rect x="100" width="100" height="100" fill="red"/> + <rect width="100" height="100" fill="lime" filter="url(#offset_filter_1)"/> + + <!-- test 100% completed animation --> + <rect y="100" width="100" height="100" fill="red"/> + <rect width="100" height="100" fill="lime" filter="url(#offset_filter_2)"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-feSpotLight-01-ref.svg b/layout/reftests/svg/smil/anim-feSpotLight-01-ref.svg new file mode 100644 index 0000000000..adc43569ee --- /dev/null +++ b/layout/reftests/svg/smil/anim-feSpotLight-01-ref.svg @@ -0,0 +1,18 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Reference for animation of the "elevation" attribute of the "feSpotLight" element</title> + <defs> + <filter id="f" x="0" y="0" width="0.5" height="0.5"> + <feSpecularLighting surfaceScale="5" specularConstant=".75" + specularExponent="20" lighting-color="lime"> + <feSpotLight x="0.25" y="0.25" z="100"> + </feSpotLight> + </feSpecularLighting> + </filter> + </defs> + <path d="M0,0 h100 v100 h-100 z" filter="url(#f)"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-feSpotLight-01.svg b/layout/reftests/svg/smil/anim-feSpotLight-01.svg new file mode 100644 index 0000000000..011a9ecff9 --- /dev/null +++ b/layout/reftests/svg/smil/anim-feSpotLight-01.svg @@ -0,0 +1,26 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1, true)"> + <title>Testcase for animation of the "elevation" attribute of the "feSpotLight" element</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + <defs> + <filter id="f" x="0" y="0" width="0.5" height="0.5"> + <feSpecularLighting surfaceScale="5" specularConstant=".75" + specularExponent="20" lighting-color="lime"> + <feSpotLight x="0.25" y="0.25" z="0"> + <animate attributeName="z" + calcMode="linear" + begin="0s" dur="2s" + from="0" to="200" + fill="freeze"/> + </feSpotLight> + </feSpecularLighting> + </filter> + </defs> + <path d="M0,0 h100 v100 h-100 z" filter="url(#f)"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-feTurbulence-numOctaves-01-ref.svg b/layout/reftests/svg/smil/anim-feTurbulence-numOctaves-01-ref.svg new file mode 100644 index 0000000000..74f4070e5f --- /dev/null +++ b/layout/reftests/svg/smil/anim-feTurbulence-numOctaves-01-ref.svg @@ -0,0 +1,26 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <filter id="filter_1" x="0%" y="0%" width="100%" height="100%"> + <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="1"/> + </filter> + <filter id="filter_2" x="0%" y="0%" width="100%" height="100%"> + <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="2"/> + </filter> + <filter id="filter_3" x="0%" y="0%" width="100%" height="100%"> + <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="3"/> + </filter> + <filter id="filter_4" x="0%" y="0%" width="100%" height="100%"> + <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="4"/> + </filter> + <rect x="0" y="0" width="20" height="20" filter="url(#filter_3)"/> + <rect x="20" y="0" width="20" height="20" filter="url(#filter_4)"/> + <rect x="0" y="20" width="20" height="20" filter="url(#filter_2)"/> + <rect x="20" y="20" width="20" height="20" filter="url(#filter_1)"/> + <rect x="0" y="40" width="20" height="20" filter="url(#filter_3)"/> + <rect x="20" y="40" width="20" height="20" filter="url(#filter_4)"/> + <rect x="0" y="60" width="20" height="20" filter="url(#filter_2)"/> + <rect x="20" y="60" width="20" height="20" filter="url(#filter_1)"/> + <rect x="0" y="80" width="20" height="20" filter="url(#filter_1)"/> + <rect x="20" y="80" width="20" height="20" filter="url(#filter_4)"/> + <rect x="0" y="100" width="20" height="20" filter="url(#filter_4)"/> + <rect x="20" y="100" width="20" height="20" filter="url(#filter_1)"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-feTurbulence-numOctaves-01.svg b/layout/reftests/svg/smil/anim-feTurbulence-numOctaves-01.svg new file mode 100644 index 0000000000..e48a6bd55e --- /dev/null +++ b/layout/reftests/svg/smil/anim-feTurbulence-numOctaves-01.svg @@ -0,0 +1,217 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(5, true)"> + <title>Test animation of the "numOctaves" <integer> attribute on the "feTurbulence" element</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + + + <!-- Our implementation strategy for animating integers with + calcMode="linear" is to use round(), with the slight twist that we + round "to the NEXT value" when the current time puts us exactly midway + between two integer values. (This is so that the result of midpoint + rounding does not depend on whether we're animating up to a higher + value or animating down to a lower value.) Note that one of the quirks + of using round() is that the start and end values of any integer + range only receive half as much time as any intermediary values. This + is as you would expect mathematically, but it's probably unexpected + for most users! + + We could try to avoid this round() quirk by coming up with a better + implementation strategy for calcMode="linear", but animation of the + few integer attributes in SVG 1.1 is extremely unlikely (so this + issue is very low priority), and it's actually difficult to find a + better strategy that doesn't have its own undesirable quirks. + + One alternative could be to divide the time evenly amoungst each + integer. (I.e. it would be similar to calcMode="discrete", except it + would also visit all the intermediary values, not just the start and + end values). The issue with this approach is that for a simple "to" + animation the animation wouldn't actually seem to change anything until + interpolation reaches the second integer value. This could be avoided + by skipping the initial value and distributing the time between the + other values, but then in the case of a "from-to" animation where the + from value is different to the underlying attribute value, the + animation would seem to skip the first value. Not that the same sort of + problem exists at the other end of the simple duration, where it will + reach the final integer value before the end of the simple duration. + This could be avoided by only setting the final value right at the end + of the simple duration and distributing the time between evenly + between the other values, but then the final value will only be seen if + fill="freeze". + + There are many other problems with other implementation strategies. The + more you think about them, add the complexity of 'values', 'by' etc, + and think of cases where they behave strangely (e.g. animating between + just two adjacent integers, up or down, etc.), the more ugly it gets. + It's really not worth it for SVG 1.1. Maybe if you could use SMIL for + 'font-size' or something even more likely to be animated it would be. + --> + + + <!-- Some calcMode="linear" tests animating *up* to higher values. --> + + <!-- At 5s the animated value should be 3. --> + <filter id="filter_1" x="0%" y="0%" width="100%" height="100%"> + <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="1"> + <animate attributeName="numOctaves" + calcMode="linear" + begin="0s" dur="6.1s" + to="4" + fill="freeze"/> + </feTurbulence> + </filter> + <rect x="0" width="20" height="20" filter="url(#filter_1)"/> + + <!-- At exactly 5s the animated value should change to 4. --> + <filter id="filter_2" x="0%" y="0%" width="100%" height="100%"> + <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="1"> + <animate attributeName="numOctaves" + calcMode="linear" + begin="0s" dur="6s" + to="4" + fill="freeze"/> + </feTurbulence> + </filter> + <rect x="20" width="20" height="20" filter="url(#filter_2)"/> + + + <!-- Some calcMode="linear" tests animating *down* to lower values. --> + + <!-- At 5s the animated value should be 2. --> + <filter id="filter_3" x="0%" y="0%" width="100%" height="100%"> + <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="4"> + <animate attributeName="numOctaves" + calcMode="linear" + begin="0s" dur="6.1s" + to="1" + fill="freeze"/> + </feTurbulence> + </filter> + <rect x="0" y="20" width="20" height="20" filter="url(#filter_3)"/> + + <!-- At exactly 5s the animated value should change to 1. --> + <filter id="filter_4" x="0%" y="0%" width="100%" height="100%"> + <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="4"> + <animate attributeName="numOctaves" + calcMode="linear" + begin="0s" dur="6s" + to="1" + fill="freeze"/> + </feTurbulence> + </filter> + <rect x="20" y="20" width="20" height="20" filter="url(#filter_4)"/> + + + <!-- Some 'by' animation tests --> + + <!-- At 5s the animated value should be 3. --> + <filter id="filter_5" x="0%" y="0%" width="100%" height="100%"> + <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="1"> + <animate attributeName="numOctaves" + calcMode="linear" + begin="0s" dur="6.1s" + by="3" + fill="freeze"/> + </feTurbulence> + </filter> + <rect y="40" width="20" height="20" filter="url(#filter_5)"/> + + <!-- At exactly 5s the animated value should change to 4. --> + <filter id="filter_6" x="0%" y="0%" width="100%" height="100%"> + <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="1"> + <animate attributeName="numOctaves" + calcMode="linear" + begin="0s" dur="6s" + by="3" + fill="freeze"/> + </feTurbulence> + </filter> + <rect x="20" y="40" width="20" height="20" filter="url(#filter_6)"/> + + + <!-- calcMode="paced" tests --> + + <!-- At 5s the animated value should be 2. --> + <filter id="filter_7" x="0%" y="0%" width="100%" height="100%"> + <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="4"> + <animate attributeName="numOctaves" + calcMode="paced" + begin="0s" dur="6.1s" + values="4; 3; 1" + fill="freeze"/> + </feTurbulence> + </filter> + <rect y="60" width="20" height="20" filter="url(#filter_7)"/> + + <!-- At exactly 5s the animated value should change to 1. --> + <filter id="filter_8" x="0%" y="0%" width="100%" height="100%"> + <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="4"> + <animate attributeName="numOctaves" + calcMode="paced" + begin="0s" dur="6s" + values="4; 3; 1" + fill="freeze"/> + </feTurbulence> + </filter> + <rect x="20" y="60" width="20" height="20" filter="url(#filter_8)"/> + + + <!-- Some calcMode="discrete" tests animating *up* to higher values. --> + + <!-- At 5s the animated value should be 1. --> + <filter id="filter_9" x="0%" y="0%" width="100%" height="100%"> + <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="1"> + <animate attributeName="numOctaves" + calcMode="discrete" + begin="0s" dur="10.1s" + from="1" + to="4" + fill="freeze"/> + </feTurbulence> + </filter> + <rect x="0" y="80" width="20" height="20" filter="url(#filter_9)"/> + + <!-- At exactly 5s the animated value should change to 4. --> + <filter id="filter_10" x="0%" y="0%" width="100%" height="100%"> + <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="1"> + <animate attributeName="numOctaves" + calcMode="discrete" + begin="0s" dur="10s" + from="1" + to="4" + fill="freeze"/> + </feTurbulence> + </filter> + <rect x="20" y="80" width="20" height="20" filter="url(#filter_10)"/> + + + <!-- Some calcMode="discrete" tests animating *down* to lower values. --> + + <!-- At 5s the animated value should be 4. --> + <filter id="filter_11" x="0%" y="0%" width="100%" height="100%"> + <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="4"> + <animate attributeName="numOctaves" + calcMode="discrete" + begin="0s" dur="10.1s" + from="4" + to="1" + fill="freeze"/> + </feTurbulence> + </filter> + <rect x="0" y="100" width="20" height="20" filter="url(#filter_11)"/> + + <!-- At exactly 5s the animated value should change to 1. --> + <filter id="filter_12" x="0%" y="0%" width="100%" height="100%"> + <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="4"> + <animate attributeName="numOctaves" + calcMode="discrete" + begin="0s" dur="10s" + from="4" + to="1" + fill="freeze"/> + </feTurbulence> + </filter> + <rect x="20" y="100" width="20" height="20" filter="url(#filter_12)"/> + +</svg> diff --git a/layout/reftests/svg/smil/anim-feTurbulence-numOctaves-02.svg b/layout/reftests/svg/smil/anim-feTurbulence-numOctaves-02.svg new file mode 100644 index 0000000000..ffade083b0 --- /dev/null +++ b/layout/reftests/svg/smil/anim-feTurbulence-numOctaves-02.svg @@ -0,0 +1,202 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(3, true)"> + <title>Test animation of the "numOctaves" <integer> attribute on the "feTurbulence" element</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + + <!-- This is an unfinished and unused testcase that would not pass given the + current implementation strategy. This testcase assumes that the + strategy should be to give each value an equal slice of the simple + duration. In other words if animating from 1 to 4 in 4 seconds, then + each of the values 1, 2, 3 and 4 would get 1 second each. + + See the comment in anim-feTurbulence-numOctaves-01.svg for more on + implementation strategy. + --> + + + + <!-- Animation of integers is actually more complicated than lengths. It's + necessary to "jump" from value to value since you're dealing with + discrete integers rather than continuous real numbers. + + The spec doesn't say exactly how to behave, but we assume that the each + of the values in a from-to animation gets an equal slice of the simple + duration. We also assume that at times that are exactly midway between + two integers, we should jump to the "next" integer. In other words, when + animating from 0 to 1 in 1 second, at 0.5 seconds the value changes to + 1; but when animating from 1 to 0 in 1 second, at 0.5 seconds the value + changes to 0. This is different from floor(), round() or ceil() + behavior, and we test that by animating both "up" and "down" below. + --> + + + <!-- Some tests animating *up* to higher values. --> + + <!-- Each of the four values should get an equal slice of the duration - + that is 3.25s - so at 3s the animated value should still be 1. --> + <filter id="filter_1" x="0%" y="0%" width="100%" height="100%"> + <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="1"> + <animate attributeName="numOctaves" + calcMode="linear" + begin="0s" dur="13s" + to="4" + fill="freeze"/> + </feTurbulence> + </filter> + <rect width="20" height="20" filter="url(#filter_1)"/> + + <!-- Each of the four values should get an equal slice of the duration - + that is 3s - so at exactly 3s the animated value should become 2. --> + <filter id="filter_2" x="0%" y="0%" width="100%" height="100%"> + <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="1"> + <animate attributeName="numOctaves" + calcMode="linear" + begin="0s" dur="12s" + to="4" + fill="freeze"/> + </feTurbulence> + </filter> + <rect x="20" width="20" height="20" filter="url(#filter_2)"/> + + <!-- Each of the four values should get an equal slice of the duration - + that is 1.25s - so at 3s the animated value should still be 3. --> + <filter id="filter_3" x="0%" y="0%" width="100%" height="100%"> + <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="1"> + <animate attributeName="numOctaves" + calcMode="linear" + begin="0s" dur="5s" + to="4" + fill="freeze"/> + </feTurbulence> + </filter> + <rect x="40" width="20" height="20" filter="url(#filter_3)"/> + + <!-- Each of the four values should get an equal slice of the duration - + that is 1s - so at exactly 3s the animated value should become 4. --> + <filter id="filter_4" x="0%" y="0%" width="100%" height="100%"> + <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="1"> + <animate attributeName="numOctaves" + calcMode="linear" + begin="0s" dur="4s" + to="4" + fill="freeze"/> + </feTurbulence> + </filter> + <rect x="60" width="20" height="20" filter="url(#filter_4)"/> + + + <!-- Some tests animating *down* to lower values. --> + + <!-- Each of the four values should get an equal slice of the duration - + that is 3.25s - so at 3s the animated value should still be 4. --> + <filter id="filter_5" x="0%" y="0%" width="100%" height="100%"> + <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="4"> + <animate attributeName="numOctaves" + calcMode="linear" + begin="0s" dur="13s" + to="1" + fill="freeze"/> + </feTurbulence> + </filter> + <rect y="20" width="20" height="20" filter="url(#filter_5)"/> + + <!-- Each of the four values should get an equal slice of the duration - + that is 3s - so at exactly 3s the animated value should become 3. --> + <filter id="filter_6" x="0%" y="0%" width="100%" height="100%"> + <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="4"> + <animate attributeName="numOctaves" + calcMode="linear" + begin="0s" dur="12s" + to="1" + fill="freeze"/> + </feTurbulence> + </filter> + <rect x="20" y="20" width="20" height="20" filter="url(#filter_6)"/> + + <!-- Each of the four values should get an equal slice of the duration - + that is 1.25s - so at 3s the animated value should still be 2. --> + <filter id="filter_7" x="0%" y="0%" width="100%" height="100%"> + <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="4"> + <animate attributeName="numOctaves" + calcMode="linear" + begin="0s" dur="5s" + to="1" + fill="freeze"/> + </feTurbulence> + </filter> + <rect x="40" y="20" width="20" height="20" filter="url(#filter_7)"/> + + <!-- Each of the four values should get an equal slice of the duration - + that is 1s - so at exactly 3s the animated value should become 1. --> + <filter id="filter_8" x="0%" y="0%" width="100%" height="100%"> + <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="4"> + <animate attributeName="numOctaves" + calcMode="linear" + begin="0s" dur="4s" + to="1" + fill="freeze"/> + </feTurbulence> + </filter> + <rect x="60" y="20" width="20" height="20" filter="url(#filter_8)"/> + + + <!-- Some 'by' animation tests --> + + <!-- Each of the four values should get an equal slice of the duration - + that is 1.25s - so at 3s the animated value should still be 3. --> + <filter id="filter_9" x="0%" y="0%" width="100%" height="100%"> + <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="1"> + <animate attributeName="numOctaves" + calcMode="linear" + begin="0s" dur="5s" + by="3" + fill="freeze"/> + </feTurbulence> + </filter> + <rect y="40" width="20" height="20" filter="url(#filter_9)"/> + + <!-- Each of the four values should get an equal slice of the duration - + that is 1s - so at exactly 3s the animated value should become 4. --> + <filter id="filter_10" x="0%" y="0%" width="100%" height="100%"> + <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="1"> + <animate attributeName="numOctaves" + calcMode="linear" + begin="0s" dur="4s" + by="3" + fill="freeze"/> + </feTurbulence> + </filter> + <rect x="20" y="40" width="20" height="20" filter="url(#filter_10)"/> + + + <!-- calcMode="paced" tests --> + + <!-- Each of the four values should get an equal slice of the duration - + that is 1.25s - so at 3s the animated value should still be 2. --> + <filter id="filter_11" x="0%" y="0%" width="100%" height="100%"> + <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="4"> + <animate attributeName="numOctaves" + calcMode="paced" + begin="0s" dur="5s" + values="4; 3; 1" + fill="freeze"/> + </feTurbulence> + </filter> + <rect y="60" width="20" height="20" filter="url(#filter_11)"/> + + <!-- Each of the four values should get an equal slice of the duration - + that is 1s - so at exactly 3s the animated value should become 1. --> + <filter id="filter_12" x="0%" y="0%" width="100%" height="100%"> + <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="4"> + <animate attributeName="numOctaves" + calcMode="paced" + begin="0s" dur="4s" + values="4; 3; 1" + fill="freeze"/> + </feTurbulence> + </filter> + <rect x="20" y="60" width="20" height="20" filter="url(#filter_12)"/> + +</svg> diff --git a/layout/reftests/svg/smil/anim-fill-overpaintserver-1.svg b/layout/reftests/svg/smil/anim-fill-overpaintserver-1.svg new file mode 100644 index 0000000000..d1a8d61597 --- /dev/null +++ b/layout/reftests/svg/smil/anim-fill-overpaintserver-1.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <defs> + <linearGradient id="red"> + <stop offset="0.0" stop-color="#f00"/> + </linearGradient> + </defs> + <rect width="100%" height="100%" fill="url(#red)"> + <set attributeName="fill" to="lime"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-fill-overpaintserver-2.svg b/layout/reftests/svg/smil/anim-fill-overpaintserver-2.svg new file mode 100644 index 0000000000..e3ee053636 --- /dev/null +++ b/layout/reftests/svg/smil/anim-fill-overpaintserver-2.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <!-- In this test we will attempt to interpolate since fill is interpolatable + but fail since the base value can't be converted to an RGB color value + and hence should fall back to discrete calcMode which, in the case of + to-animation, sets the to value for the second half of the simple + duration. --> + <defs> + <linearGradient id="red"> + <stop offset="0.0" stop-color="#f00"/> + </linearGradient> + </defs> + <rect width="100%" height="100%" fill="url(#red)"> + <animate attributeName="fill" to="lime" dur="3s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-fillcolor-1.svg b/layout/reftests/svg/smil/anim-fillcolor-1.svg new file mode 100644 index 0000000000..7b6ed390f1 --- /dev/null +++ b/layout/reftests/svg/smil/anim-fillcolor-1.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2.5, false)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="15" y="15" width="200" height="200" fill="rgb(255,0,0)"> + <animateColor attributeName="fill" from="rgb(255,0,0)" to="rgb(0,0,255)" + begin="0s" dur="2s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-fillopacity-1css.svg b/layout/reftests/svg/smil/anim-fillopacity-1css.svg new file mode 100644 index 0000000000..68462b6e53 --- /dev/null +++ b/layout/reftests/svg/smil/anim-fillopacity-1css.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2.5, false)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="15" y="15" width="200" height="200" fill="blue" fill-opacity="0"> + <animate attributeName="fill-opacity" attributeType="CSS" + from="0" to="1" begin="0s" dur="2s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-fillopacity-1none.svg b/layout/reftests/svg/smil/anim-fillopacity-1none.svg new file mode 100644 index 0000000000..7a8bfcc81e --- /dev/null +++ b/layout/reftests/svg/smil/anim-fillopacity-1none.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2.5, false)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="15" y="15" width="200" height="200" fill="blue" fill-opacity="0"> + <animate attributeName="fill-opacity" + from="0" to="1" begin="0s" dur="2s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-fillopacity-1xml.svg b/layout/reftests/svg/smil/anim-fillopacity-1xml.svg new file mode 100644 index 0000000000..f543745cc5 --- /dev/null +++ b/layout/reftests/svg/smil/anim-fillopacity-1xml.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2.5, false)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="15" y="15" width="200" height="200" fill="blue" fill-opacity="0"> + <animate attributeName="fill-opacity" attributeType="XML" + from="0" to="1" begin="0s" dur="2s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-filter-filterUnits-01.svg b/layout/reftests/svg/smil/anim-filter-filterUnits-01.svg new file mode 100644 index 0000000000..641f711931 --- /dev/null +++ b/layout/reftests/svg/smil/anim-filter-filterUnits-01.svg @@ -0,0 +1,42 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1, true)"> + <title>Test animation of the "filterUnits" enum attributes of the "filter" element</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + <filter id="flood_filter_1" filterUnits="userSpaceOnUse" + x="0%" y="0%" width="100%" height="100%"> + <!-- this should reduce the referencing element to 50% of the + viewport width at 1.25s --> + <animate attributeName="filterUnits" + calcMode="discrete" + begin="0s" dur="2.5s" + from="userSpaceOnUse" to="objectBoundingBox" + fill="freeze"/> + <feFlood width="100%" height="100%" flood-color="lime"/> + </filter> + <filter id="flood_filter_2" x="0%" y="0%" width="100%" height="100%"> + <!-- this should expand the referencing element to 100% of the + viewport width at 1s --> + <animate attributeName="filterUnits" + calcMode="discrete" + begin="0s" dur="2s" + from="objectBoundingBox" to="userSpaceOnUse" + fill="freeze"/> + <feFlood width="100%" height="100%" flood-color="lime"/> + </filter> + <rect width="100%" height="100%" fill="lime"/> + <rect width="100%" height="100" fill="red"/> + + <!-- 40% through discrete animation simple duration - + tests animation doesn't affect the element too early --> + <svg height="50"> + <rect width="50%" height="100%" fill="red" filter="url(#flood_filter_1)"/> + </svg> + + <!-- 50% through discrete animation simple duration - + tests animation affects the element now --> + <svg y="50" height="50"> + <rect width="50%" height="100%" fill="red" filter="url(#flood_filter_2)"/> + </svg> +</svg> diff --git a/layout/reftests/svg/smil/anim-filter-href-01.svg b/layout/reftests/svg/smil/anim-filter-href-01.svg new file mode 100644 index 0000000000..fa259de4ee --- /dev/null +++ b/layout/reftests/svg/smil/anim-filter-href-01.svg @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1, true)"> + <title>Test animation of the "in" and "result" <string> attributes on "filter" elements</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + + <defs> + <filter id="filt"> + <feFlood flood-color="red" result="flood1"/> + <feFlood flood-color="lime" result="nowhere"> + <animate attributeName="result" + calcMode="discrete" + begin="0s" dur="0.5s" + from="nowhere" to="flood2" + fill="freeze"/> + </feFlood> + <feOffset in="flood1"> + <animate attributeName="in" + calcMode="discrete" + begin="0s" dur="0.5s" + from="flood1" to="flood2" + fill="freeze"/> + </feOffset> + </filter> + </defs> + <rect width="100%" height="100%" fill="red"/> + <rect width="100%" height="100%" fill="red" filter="url(#filt)"/> + +</svg> diff --git a/layout/reftests/svg/smil/anim-filter-primitive-size-01.svg b/layout/reftests/svg/smil/anim-filter-primitive-size-01.svg new file mode 100644 index 0000000000..ceb7c32856 --- /dev/null +++ b/layout/reftests/svg/smil/anim-filter-primitive-size-01.svg @@ -0,0 +1,32 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait"> + <title>Test animation of the "width" and "height" attributes of a filter primitive element</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + <script> + +window.addEventListener("MozReftestInvalidate", run, false); +setTimeout(run, 4000); // fallback for running outside reftest + +function run() { + setTimeAndSnapshot(1, true) +} + + </script> + <filter id="flood_filter" x="0%" y="0%" width="100%" height="100%"> + <feFlood width="0%" height="0%" flood-color="lime"> + <animate attributeName="width" + calcMode="linear" + begin="0s" dur="2s" + from="0%" to="200%" + fill="freeze"/> + <animate attributeName="height" + calcMode="linear" + begin="0s" dur="1s" + from="0%" to="100%" + fill="freeze"/> + </feFlood> + </filter> + <rect width="100%" height="100%" fill="red"/> + <rect width="100%" height="100%" fill="red" filter="url(#flood_filter)"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-filter-size-01.svg b/layout/reftests/svg/smil/anim-filter-size-01.svg new file mode 100644 index 0000000000..e047b89d92 --- /dev/null +++ b/layout/reftests/svg/smil/anim-filter-size-01.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 animation of the "width" and "height" attributes of the "filter" element</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + <script> + +window.addEventListener("MozReftestInvalidate", run, false); +setTimeout(run, 4000); // fallback for running outside reftest + +function run() { + setTimeAndSnapshot(1, true) +} + + </script> + <filter id="flood_filter" x="0%" y="0%" width="0%" height="0%"> + <animate attributeName="width" + calcMode="linear" + begin="0s" dur="2s" + from="0%" to="200%" + fill="freeze"/> + <animate attributeName="height" + calcMode="linear" + begin="0s" dur="1s" + from="0%" to="100%" + fill="freeze"/> + <feFlood width="100%" height="100%" flood-color="lime"/> + </filter> + <rect width="100%" height="100%" fill="red"/> + <rect width="100%" height="100%" fill="red" filter="url(#flood_filter)"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-gradient-attr-presence-01-ref.svg b/layout/reftests/svg/smil/anim-gradient-attr-presence-01-ref.svg new file mode 100644 index 0000000000..77212fbb3f --- /dev/null +++ b/layout/reftests/svg/smil/anim-gradient-attr-presence-01-ref.svg @@ -0,0 +1,142 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 900"> + <!-- 1. gradientUnits --> + <defs> + <linearGradient id="gradientUnits" x1="0" y1="0" x2="100" y2="0" + gradientUnits="userSpaceOnUse"> + <stop offset="0%" stop-color="#F60" /> + <stop offset="100%" stop-color="#FF6" /> + </linearGradient> + </defs> + <rect width="100px" height="100px" fill="url(#gradientUnits)"/> + <g transform="translate(100px)"> + <rect width="100px" height="100px" fill="url(#gradientUnits)"/> + </g> + <!-- 2. gradientTransform --> + <defs> + <linearGradient id="gradientTransform" + gradientTransform="rotate(90 0.5 0.5)"> + <stop offset="0%" stop-color="#F60" /> + <stop offset="100%" stop-color="#FF6" /> + </linearGradient> + </defs> + <g transform="translate(0px 100px)"> + <rect width="100px" height="100px" fill="url(#gradientTransform)"/> + <g transform="translate(100px)"> + <rect width="100px" height="100px" fill="url(#gradientTransform)"/> + </g> + </g> + <!-- 3. x1, x2 --> + <defs> + <linearGradient id="x1x2" x1="40%" x2="60%"> + <stop offset="0%" stop-color="#F60" /> + <stop offset="100%" stop-color="#FF6" /> + </linearGradient> + </defs> + <g transform="translate(0px 200px)"> + <rect width="100px" height="100px" fill="url(#x1x2)"/> + <g transform="translate(100px)"> + <rect width="100px" height="100px" fill="url(#x1x2)"/> + </g> + </g> + <!-- 4. y1, y2 --> + <defs> + <linearGradient id="y1y2" x2="0%" y1="40%" y2="60%"> + <stop offset="0%" stop-color="#F60" /> + <stop offset="100%" stop-color="#FF6" /> + </linearGradient> + </defs> + <g transform="translate(0px 300px)"> + <rect width="100px" height="100px" fill="url(#y1y2)"/> + <g transform="translate(100px)"> + <rect width="100px" height="100px" fill="url(#y1y2)"/> + </g> + </g> + <!-- 5. cx, cy --> + <defs> + <radialGradient id="cxcy" cx="0%" cy="100%"> + <stop offset="0%" stop-color="#F60" /> + <stop offset="100%" stop-color="#FF6" /> + </radialGradient> + </defs> + <g transform="translate(0px 400px)"> + <rect width="100px" height="100px" fill="url(#cxcy)"/> + <g transform="translate(100px)"> + <rect width="100px" height="100px" fill="url(#cxcy)"/> + </g> + </g> + <!-- 6. r --> + <defs> + <radialGradient id="r" r="100%"> + <stop offset="0%" stop-color="#F60" /> + <stop offset="100%" stop-color="#FF6" /> + </radialGradient> + </defs> + <g transform="translate(0px 500px)"> + <rect width="100px" height="100px" fill="url(#r)"/> + <g transform="translate(100px)"> + <rect width="100px" height="100px" fill="url(#r)"/> + </g> + </g> + <!-- 7. fx, fy --> + <defs> + <radialGradient id="fxfy" fx="20%" fy="80%"> + <stop offset="0%" stop-color="#F60" /> + <stop offset="100%" stop-color="#FF6" /> + </radialGradient> + </defs> + <g transform="translate(0px 600px)"> + <rect width="100px" height="100px" fill="url(#fxfy)"/> + <g transform="translate(100px)"> + <rect width="100px" height="100px" fill="url(#fxfy)"/> + </g> + </g> + <!-- 8. spreadMethod --> + <defs> + <linearGradient id="spreadMethod" x1="50%" spreadMethod="reflect"> + <stop offset="0%" stop-color="#F60" /> + <stop offset="100%" stop-color="#FF6" /> + </linearGradient> + </defs> + <g transform="translate(0px 700px)"> + <rect width="100px" height="100px" fill="url(#spreadMethod)"/> + <g transform="translate(100px)"> + <rect width="100px" height="100px" fill="url(#spreadMethod)"/> + </g> + </g> + <!-- 9. xlink:href --> + <defs> + <linearGradient id="xlink" xlink:href="#xlinkRef"/> + <linearGradient id="xlinkRef"> + <stop offset="0%" stop-color="#F60" /> + <stop offset="100%" stop-color="#FF6" /> + </linearGradient> + </defs> + <g transform="translate(0px 800px)"> + <rect width="100px" height="100" fill="url(#xlink)"/> + <g transform="translate(100px)"> + <rect width="100px" height="100px" fill="url(#xlinkRef)"/> + </g> + </g> + <!-- We were getting random but very minor anti-aliasing differences on OSX + and OSX64 along the edges of these gradients so we draw a thick stroke + over all the edges. --> + <path stroke="black" stroke-width="3px" stroke-linecap="square" fill="none" + d="M0 0H200V900H0V0 + M0 100H200 + M0 200H200 + M0 300H200 + M0 400H200 + M0 500H200 + M0 600H200 + M0 700H200 + M0 800H200 + M0 900H200 + M100 0V900"/> + <!-- If adding more tests here, be sure to update the viewBox on the root svg + element --> +</svg> diff --git a/layout/reftests/svg/smil/anim-gradient-attr-presence-01.svg b/layout/reftests/svg/smil/anim-gradient-attr-presence-01.svg new file mode 100644 index 0000000000..36b1339376 --- /dev/null +++ b/layout/reftests/svg/smil/anim-gradient-attr-presence-01.svg @@ -0,0 +1,193 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 900"> + <!-- Bug 608161 - SVG SMIL: Don't use HasAttr to test for presence of animated + attributes. + + Test animating gradient attributes doesn't rely on the presence of + attributes in the DOM, but also correctly detects attributes set by + animation. + + The format of each test is that we have a base gradient named + (attName)Ref which does NOT specify the attribute under test, but instead + sets the attribute to a non-default value using animation. + + Then we have a referencing gradient named (attName) that refers to the + base gradient and also does NOT specify the attribute under test. + + When we go to look up the attribute under test we begin at (attName), + notice the attribute isn't specified (either in the DOM or by animation), + then go to (attName)Ref and detect that the attribute is specified there + by animation and use that value. + + To the right of each test we also include a rect that directly references + (attName)Ref. The two rectangles should be identical but prior to fixing + this bug they were not. + --> + <!-- 1. gradientUnits: defaults to objectBoundingBox --> + <defs> + <linearGradient xlink:href="#gradientUnitsRef" id="gradientUnits"/> + <linearGradient id="gradientUnitsRef" x1="0" y1="0" x2="100" y2="0"> + <set attributeName="gradientUnits" to="userSpaceOnUse"/> + <stop offset="0%" stop-color="#F60" /> + <stop offset="100%" stop-color="#FF6" /> + </linearGradient> + </defs> + <rect width="100px" height="100px" fill="url(#gradientUnits)"/> + <g transform="translate(100px)"> + <rect width="100px" height="100px" fill="url(#gradientUnitsRef)"/> + </g> + <!-- 2. gradientTransform: defaults to identity --> + <defs> + <linearGradient xlink:href="#gradientTransformRef" id="gradientTransform"/> + <linearGradient id="gradientTransformRef"> + <animateTransform attributeName="gradientTransform" type="rotate" + values="90 0.5 0.5" fill="freeze"/> + <stop offset="0%" stop-color="#F60" /> + <stop offset="100%" stop-color="#FF6" /> + </linearGradient> + </defs> + <g transform="translate(0px 100px)"> + <rect width="100px" height="100px" fill="url(#gradientTransform)"/> + <g transform="translate(100px)"> + <rect width="100px" height="100px" fill="url(#gradientTransformRef)"/> + </g> + </g> + <!-- 3. x1: defaults to 0% + x2: defaults to 100% --> + <defs> + <linearGradient xlink:href="#x1x2Ref" id="x1x2"/> + <linearGradient id="x1x2Ref"> + <set attributeName="x1" to="40%"/> + <set attributeName="x2" to="60%"/> + <stop offset="0%" stop-color="#F60" /> + <stop offset="100%" stop-color="#FF6" /> + </linearGradient> + </defs> + <g transform="translate(0px 200px)"> + <rect width="100px" height="100px" fill="url(#x1x2)"/> + <g transform="translate(100px)"> + <rect width="100px" height="100px" fill="url(#x1x2Ref)"/> + </g> + </g> + <!-- 4. y1: defaults to 0% + y2: defaults to 0% --> + <defs> + <linearGradient xlink:href="#y1y2Ref" id="y1y2"/> + <linearGradient id="y1y2Ref" x2="0%"> + <set attributeName="y1" to="40%"/> + <set attributeName="y2" to="60%"/> + <stop offset="0%" stop-color="#F60" /> + <stop offset="100%" stop-color="#FF6" /> + </linearGradient> + </defs> + <g transform="translate(0px 300px)"> + <rect width="100px" height="100px" fill="url(#y1y2)"/> + <g transform="translate(100px)"> + <rect width="100px" height="100px" fill="url(#y1y2Ref)"/> + </g> + </g> + <!-- 5. cx: defaults to 50% + cy: defaults to 50% --> + <defs> + <radialGradient xlink:href="#cxcyRef" id="cxcy"/> + <radialGradient id="cxcyRef"> + <set attributeName="cx" to="0%"/> + <set attributeName="cy" to="100%"/> + <stop offset="0%" stop-color="#F60" /> + <stop offset="100%" stop-color="#FF6" /> + </radialGradient> + </defs> + <g transform="translate(0px 400px)"> + <rect width="100px" height="100px" fill="url(#cxcy)"/> + <g transform="translate(100px)"> + <rect width="100px" height="100px" fill="url(#cxcyRef)"/> + </g> + </g> + <!-- 6. r: defaults to 50% --> + <defs> + <radialGradient xlink:href="#rRef" id="r"/> + <radialGradient id="rRef"> + <set attributeName="r" to="100%"/> + <stop offset="0%" stop-color="#F60" /> + <stop offset="100%" stop-color="#FF6" /> + </radialGradient> + </defs> + <g transform="translate(0px 500px)"> + <rect width="100px" height="100px" fill="url(#r)"/> + <g transform="translate(100px)"> + <rect width="100px" height="100px" fill="url(#rRef)"/> + </g> + </g> + <!-- 7. fx: defaults to cx + fy: defaults to cy --> + <defs> + <radialGradient xlink:href="#fxfyRef" id="fxfy"/> + <radialGradient id="fxfyRef"> + <set attributeName="fx" to="20%"/> + <set attributeName="fy" to="80%"/> + <stop offset="0%" stop-color="#F60" /> + <stop offset="100%" stop-color="#FF6" /> + </radialGradient> + </defs> + <g transform="translate(0px 600px)"> + <rect width="100px" height="100px" fill="url(#fxfy)"/> + <g transform="translate(100px)"> + <rect width="100px" height="100px" fill="url(#fxfyRef)"/> + </g> + </g> + <!-- 8. spreadMethod: defaults to pad --> + <defs> + <linearGradient xlink:href="#spreadMethodRef" id="spreadMethod"/> + <linearGradient id="spreadMethodRef" x1="50%"> + <set attributeName="spreadMethod" to="reflect"/> + <stop offset="0%" stop-color="#F60" /> + <stop offset="100%" stop-color="#FF6" /> + </linearGradient> + </defs> + <g transform="translate(0px 700px)"> + <rect width="100px" height="100px" fill="url(#spreadMethod)"/> + <g transform="translate(100px)"> + <rect width="100px" height="100px" fill="url(#spreadMethodRef)"/> + </g> + </g> + <!-- 9. xlink:href + This attribute is not affected by bug 608161 but we test it here for + completeness. + --> + <defs> + <linearGradient id="xlink"> + <set attributeName="xlink:href" to="#xlinkRef"/> + </linearGradient> + <linearGradient id="xlinkRef"> + <stop offset="0%" stop-color="#F60" /> + <stop offset="100%" stop-color="#FF6" /> + </linearGradient> + </defs> + <g transform="translate(0px 800px)"> + <rect width="100px" height="100px" fill="url(#xlink)"/> + <g transform="translate(100px)"> + <rect width="100px" height="100px" fill="url(#xlinkRef)"/> + </g> + </g> + <!-- We were getting random but very minor anti-aliasing differences on OSX + and OSX64 along the edges of these gradients so we draw a thick stroke + over all the edges. --> + <path stroke="black" stroke-width="3px" stroke-linecap="square" fill="none" + d="M0 0H200V900H0V0 + M0 100H200 + M0 200H200 + M0 300H200 + M0 400H200 + M0 500H200 + M0 600H200 + M0 700H200 + M0 800H200 + M0 900H200 + M100 0V900"/> + <!-- If adding more tests here, be sure to update the viewBox on the root svg + element --> +</svg> diff --git a/layout/reftests/svg/smil/anim-gradient-href-01.svg b/layout/reftests/svg/smil/anim-gradient-href-01.svg new file mode 100644 index 0000000000..717454e47d --- /dev/null +++ b/layout/reftests/svg/smil/anim-gradient-href-01.svg @@ -0,0 +1,29 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(0.25, true)"> + <title>Test animation of the "xlink:href" <string> attribute on the "linearGradient" element</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + + <defs> + <linearGradient id="grad1a" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="0"> + <stop id="red" stop-color="red" offset="0"/> + </linearGradient> + <linearGradient id="grad1b" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="0"> + <stop id="lime" stop-color="lime" offset="0"/> + </linearGradient> + <linearGradient id="grad2" xlink:href="#grad1a"> + <animate attributeName="xlink:href" + begin="0s" dur="0.5s" + from="#grad1a" to="#grad1b" + fill="freeze"/> + </linearGradient> + </defs> + <rect width="100%" height="100%" fill="lime"/> + <rect x="20" y="150" width="440" height="80" fill="url(#grad2)" /> + +</svg> diff --git a/layout/reftests/svg/smil/anim-height-done-1a.svg b/layout/reftests/svg/smil/anim-height-done-1a.svg new file mode 100644 index 0000000000..2c76c78820 --- /dev/null +++ b/layout/reftests/svg/smil/anim-height-done-1a.svg @@ -0,0 +1,11 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, false)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="15" y="15" width="200" height="50" fill="blue"> + <animate attributeName="height" + from="50" to="200" begin="0s" dur="2s" fill="freeze"/> + </rect> +</svg> + diff --git a/layout/reftests/svg/smil/anim-height-done-1b.svg b/layout/reftests/svg/smil/anim-height-done-1b.svg new file mode 100644 index 0000000000..e36788264a --- /dev/null +++ b/layout/reftests/svg/smil/anim-height-done-1b.svg @@ -0,0 +1,11 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2.5, false)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="15" y="15" width="200" height="50" fill="blue"> + <animate attributeName="height" + from="50" to="200" begin="0s" dur="2s" fill="freeze"/> + </rect> +</svg> + diff --git a/layout/reftests/svg/smil/anim-height-done-2.svg b/layout/reftests/svg/smil/anim-height-done-2.svg new file mode 100644 index 0000000000..9b967b8b73 --- /dev/null +++ b/layout/reftests/svg/smil/anim-height-done-2.svg @@ -0,0 +1,12 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, false)" width="0%" height="0%" viewBox="0 0 100 100" preserveAspectRatio="none"> + <animate attributeName="height" + from="0%" to="100%" begin="0s" dur="2s" fill="freeze"/> + <animate attributeName="width" + from="0%" to="100%" begin="0s" dur="2s" fill="freeze"/> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect width="100" height="100" fill="lime"/> +</svg> + diff --git a/layout/reftests/svg/smil/anim-height-interp-1-ref.svg b/layout/reftests/svg/smil/anim-height-interp-1-ref.svg new file mode 100644 index 0000000000..27a02e1471 --- /dev/null +++ b/layout/reftests/svg/smil/anim-height-interp-1-ref.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <rect x="15" y="15" width="200" height="115" fill="blue"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-height-interp-1.svg b/layout/reftests/svg/smil/anim-height-interp-1.svg new file mode 100644 index 0000000000..d9bae4605d --- /dev/null +++ b/layout/reftests/svg/smil/anim-height-interp-1.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(0.3, true)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="15" y="15" width="200" height="50" fill="blue"> + <animate attributeName="height" + from="100" to="200" begin="0s" dur="2s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-height-interp-2-ref.svg b/layout/reftests/svg/smil/anim-height-interp-2-ref.svg new file mode 100644 index 0000000000..7c9ee8e593 --- /dev/null +++ b/layout/reftests/svg/smil/anim-height-interp-2-ref.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <rect x="15" y="15" width="200" height="125" fill="blue"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-height-interp-2.svg b/layout/reftests/svg/smil/anim-height-interp-2.svg new file mode 100644 index 0000000000..5226dad75d --- /dev/null +++ b/layout/reftests/svg/smil/anim-height-interp-2.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(0.5, true)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="15" y="15" width="200" height="50" fill="blue"> + <animate attributeName="height" + from="100" to="200" begin="0s" dur="2s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-height-interp-3-ref.svg b/layout/reftests/svg/smil/anim-height-interp-3-ref.svg new file mode 100644 index 0000000000..d7c16a4d18 --- /dev/null +++ b/layout/reftests/svg/smil/anim-height-interp-3-ref.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <rect x="15" y="15" width="200" height="160" fill="blue"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-height-interp-3.svg b/layout/reftests/svg/smil/anim-height-interp-3.svg new file mode 100644 index 0000000000..170fc41936 --- /dev/null +++ b/layout/reftests/svg/smil/anim-height-interp-3.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1.2, true)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="15" y="15" width="200" height="50" fill="blue"> + <animate attributeName="height" + from="100" to="200" begin="0s" dur="2s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-height-interp-4-ref.svg b/layout/reftests/svg/smil/anim-height-interp-4-ref.svg new file mode 100644 index 0000000000..5d51804a08 --- /dev/null +++ b/layout/reftests/svg/smil/anim-height-interp-4-ref.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <rect x="15" y="15" width="200" height="170" fill="blue"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-height-interp-4.svg b/layout/reftests/svg/smil/anim-height-interp-4.svg new file mode 100644 index 0000000000..ffea9649cb --- /dev/null +++ b/layout/reftests/svg/smil/anim-height-interp-4.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1.4, true)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="15" y="15" width="200" height="50" fill="blue"> + <animate attributeName="height" + from="100" to="200" begin="0s" dur="2s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-height-interp-5-ref.svg b/layout/reftests/svg/smil/anim-height-interp-5-ref.svg new file mode 100644 index 0000000000..1c8991152f --- /dev/null +++ b/layout/reftests/svg/smil/anim-height-interp-5-ref.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <rect x="15" y="15" width="200" height="190" fill="blue"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-height-interp-5.svg b/layout/reftests/svg/smil/anim-height-interp-5.svg new file mode 100644 index 0000000000..d0562ee6f1 --- /dev/null +++ b/layout/reftests/svg/smil/anim-height-interp-5.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1.8, true)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="15" y="15" width="200" height="50" fill="blue"> + <animate attributeName="height" + from="100" to="200" begin="0s" dur="2s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-height-interp-6-ref.svg b/layout/reftests/svg/smil/anim-height-interp-6-ref.svg new file mode 100644 index 0000000000..a809eb515c --- /dev/null +++ b/layout/reftests/svg/smil/anim-height-interp-6-ref.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <rect x="15" y="15" width="200" height="195" fill="blue"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-height-interp-6.svg b/layout/reftests/svg/smil/anim-height-interp-6.svg new file mode 100644 index 0000000000..eeb3bdfadb --- /dev/null +++ b/layout/reftests/svg/smil/anim-height-interp-6.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1.9, true)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="15" y="15" width="200" height="50" fill="blue"> + <animate attributeName="height" + from="100" to="200" begin="0s" dur="2s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-image-href-01.svg b/layout/reftests/svg/smil/anim-image-href-01.svg new file mode 100644 index 0000000000..44d63b23b3 --- /dev/null +++ b/layout/reftests/svg/smil/anim-image-href-01.svg @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1, true)"> + <title>Test animation of the "xlink:href" <string> attribute on the "image" element</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + + <rect width="100%" height="100%" fill="lime"/> + <rect width="64" height="64" fill="red"/> + <image fill="none" width="64" height="64" xlink:href=""> + <animate attributeName="xlink:href" + calcMode="discrete" + begin="0s" dur="0.5s" + from="" to="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAIAAAAlC+aJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAJFJREFUaEPt1UEOg0AMBEHz/0ez8IY5zFqqKFdLkGrHz7yz/PO9wOrv7qf/81n983uBCwAl1EYgQCD8H5eQhCTUboAAgbCBcNwdaBdIgIAlbjdAgEDYQDjuDrQLJEDAErcbIEAgbCAcdwfaBRIgYInbDRAgEDYQjrsD7QIJELDE7QYIEAgbCMfdgXaBBAhkS3wAXsqyIo0zj4gAAAAASUVORK5CYII=" + fill="freeze"/> + </image> + +</svg> diff --git a/layout/reftests/svg/smil/anim-indefinite-to-1.svg b/layout/reftests/svg/smil/anim-indefinite-to-1.svg new file mode 100644 index 0000000000..0826e113b1 --- /dev/null +++ b/layout/reftests/svg/smil/anim-indefinite-to-1.svg @@ -0,0 +1,7 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <!-- Test that an indefinite to-animation just sticks to the base value for + interpolatable attributes. --> + <rect x="15" y="15" width="200" height="200" fill="blue"> + <animate attributeName="height" to="100" dur="indefinite"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-indefinite-to-2.svg b/layout/reftests/svg/smil/anim-indefinite-to-2.svg new file mode 100644 index 0000000000..3de1aecad7 --- /dev/null +++ b/layout/reftests/svg/smil/anim-indefinite-to-2.svg @@ -0,0 +1,8 @@ +<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 x="15" y="15" width="200" height="200" fill="blue"> + <animate attributeName="height" to="100" dur="indefinite" + calcMode="discrete"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-indefinite-to-3.svg b/layout/reftests/svg/smil/anim-indefinite-to-3.svg new file mode 100644 index 0000000000..e4e7d22f86 --- /dev/null +++ b/layout/reftests/svg/smil/anim-indefinite-to-3.svg @@ -0,0 +1,8 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <!-- Test that an indefinite to-animation that falls back to discrete calcMode + because the property is not interpolatable, applies the underlying value + for the whole time. --> + <rect x="15" y="15" width="200" height="200" fill="blue" visibility="visible"> + <animate attributeName="visibility" to="hidden" dur="indefinite"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-indefinite-to-4.svg b/layout/reftests/svg/smil/anim-indefinite-to-4.svg new file mode 100644 index 0000000000..29086705f6 --- /dev/null +++ b/layout/reftests/svg/smil/anim-indefinite-to-4.svg @@ -0,0 +1,14 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <!-- This is not really a to-animation, but we want to check that set + animation isn't incorrectly treated as to-animation. + + Provided the attribute being animated is interpolatable (as it is in this + case) and calcMode != discrete, to-animation will begin from the base + value (and never change in this case as the simple duration is + indefinite). + + Set animation, however, never sets the base value, only the to value. --> + <rect x="15" y="15" width="200" height="100" fill="blue"> + <set attributeName="height" to="200" dur="indefinite"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-length-reset-01.svg b/layout/reftests/svg/smil/anim-length-reset-01.svg new file mode 100644 index 0000000000..a4bab46520 --- /dev/null +++ b/layout/reftests/svg/smil/anim-length-reset-01.svg @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="document.documentElement.setCurrentTime(0); + if (document.getElementById('x').width.animVal.value != 0) { + /* fail */ + document.documentElement.textContent = ''; + } + setTimeAndSnapshot(1, true)"> + <title>Test that an animation for a length correctly restores the original + pixel size when the animation is done.</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect width="100%" height="100%" fill="lime"/> + <rect width="100" height="100" fill="red"/> + <rect width="100" height="100" fill="lime" id="x"> + <set attributeName="width" to="0" dur="1s" begin="0s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-marker-orient-01.svg b/layout/reftests/svg/smil/anim-marker-orient-01.svg new file mode 100644 index 0000000000..1172961cf7 --- /dev/null +++ b/layout/reftests/svg/smil/anim-marker-orient-01.svg @@ -0,0 +1,38 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(4, true)"> + <title>Test animation of the "orient" attribute of the "marker" element</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + + <rect width="100%" height="100%" fill="lime"/> + + <!-- Check that midway through the simple duration the orient attribute has + an animated value of -90deg --> + <marker id="marker_1" markerWidth="50" markerHeight="50" + markerUnits="userSpaceOnUse"> + <rect width="20" height="20" fill="lime"/> + <animate attributeName="orient" + calcMode="linear" + begin="0s" dur="8s" + from="0deg" to="-180deg" + fill="freeze"/> + </marker> + <rect width="20" height="20" fill="red"/> + <line x2="0" y2="20" marker-end="url(#marker_1)" stroke="transparent"/> + + <!-- Check that at the end of the simple duration the orient attribute has + an animated value of -90deg --> + <marker id="marker_2" markerWidth="50" markerHeight="50" + markerUnits="userSpaceOnUse"> + <rect width="20" height="20" fill="lime"/> + <animate attributeName="orient" + calcMode="linear" + begin="0s" dur="4s" + from="0deg" to="-90deg" + fill="freeze"/> + </marker> + <rect x="20" width="20" height="20" fill="red"/> + <line x2="20" y2="20" marker-end="url(#marker_2)" stroke="transparent"/> + +</svg> diff --git a/layout/reftests/svg/smil/anim-marker-orient-02.svg b/layout/reftests/svg/smil/anim-marker-orient-02.svg new file mode 100644 index 0000000000..2c2d96ceaf --- /dev/null +++ b/layout/reftests/svg/smil/anim-marker-orient-02.svg @@ -0,0 +1,38 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(4, true)"> + <title>Test animation of the "orient" attribute of the "marker" element</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + + <rect width="100%" height="100%" fill="lime"/> + <!-- Check that partway through the simple duration, the orient attribute is + still stuck at the initial value ("-90deg"), since we currently can't + interpolate between angle-values and "auto" --> + <marker id="marker_1" markerWidth="50" markerHeight="50" + markerUnits="userSpaceOnUse"> + <rect width="20" height="20" fill="lime"/> + <animate attributeName="orient" + calcMode="linear" + begin="0s" dur="10s" + from="-90deg" to="auto" + fill="freeze"/> + </marker> + <rect width="20" height="20" fill="red"/> + <line x2="0" y2="20" marker-end="url(#marker_1)" stroke="transparent"/> + + <!-- Check that at the end of the simple duration the orient attribute has + an animated value of "auto" (which in this case corresponds to 90deg) --> + <marker id="marker_2" markerWidth="50" markerHeight="50" + markerUnits="userSpaceOnUse"> + <rect width="20" height="20" fill="lime"/> + <animate attributeName="orient" + calcMode="linear" + begin="0s" dur="4s" + from="-45deg" to="auto" + fill="freeze"/> + </marker> + <rect x="20" width="20" height="20" fill="red"/> + <line x1="40" y1="-20" x2="40" y2="0" marker-end="url(#marker_2)" + stroke="transparent"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-nonpixel-length-reset-01.svg b/layout/reftests/svg/smil/anim-nonpixel-length-reset-01.svg new file mode 100644 index 0000000000..c362695a75 --- /dev/null +++ b/layout/reftests/svg/smil/anim-nonpixel-length-reset-01.svg @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="document.documentElement.setCurrentTime(0); + if (document.getElementById('x').width.animVal.value != 0) { + /* fail */ + document.documentElement.textContent = ''; + } + setTimeAndSnapshot(1, true)"> + <title>Test that an animation for a length correctly restores the original + pixel size when the animation is done.</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect width="100%" height="100%" fill="lime"/> + <rect width="100" height="100" fill="red"/> + <rect width="10em" height="100" fill="lime" font-size="10px" id="x"> + <set attributeName="width" to="0" dur="1s" begin="0s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-offset-01.svg b/layout/reftests/svg/smil/anim-offset-01.svg new file mode 100644 index 0000000000..6fd68fc848 --- /dev/null +++ b/layout/reftests/svg/smil/anim-offset-01.svg @@ -0,0 +1,52 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1, true)"> + <title>Test animation of the "offset" attribute on the "stop" element</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + <linearGradient id="gradient_1"> + <stop stop-color="lime" offset="0"/> + <stop stop-color="lime" offset="0"> + <animate attributeName="offset" attributeType="XML" + calcMode="linear" + begin="0s" dur="2s" + to="100%" + fill="freeze"/> + </stop> + <stop stop-color="red" offset="0"> + <animate attributeName="offset" attributeType="XML" + calcMode="linear" + begin="0s" dur="2s" + to="1" + fill="freeze"/> + </stop> + <stop stop-color="red" offset="1"/> + </linearGradient> + <linearGradient id="gradient_2"> + <stop stop-color="lime" offset="0"/> + <stop stop-color="lime" offset="0"> + <animate attributeName="offset" attributeType="XML" + calcMode="linear" + begin="0s" dur="1s" + to="100%" + fill="freeze"/> + </stop> + <stop stop-color="red" offset="0"> + <animate attributeName="offset" attributeType="XML" + calcMode="linear" + begin="0s" dur="1s" + to="1" + fill="freeze"/> + </stop> + <stop stop-color="red" offset="1"/> + </linearGradient> + <rect width="100%" height="100%" fill="lime"/> + <rect width="200" height="200" fill="red"/> + + <!-- test 50% completed animation --> + <rect width="200" height="100" fill="url(#gradient_1)"/> + <rect x="100" width="100" height="100" fill="lime"/> + + <!-- test 100% completed animation --> + <rect y="100" width="200" height="100" fill="url(#gradient_2)"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-opacity-01.svg b/layout/reftests/svg/smil/anim-opacity-01.svg new file mode 100644 index 0000000000..bc4a368de5 --- /dev/null +++ b/layout/reftests/svg/smil/anim-opacity-01.svg @@ -0,0 +1,23 @@ +<!-- + 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" class="reftest-wait" + xmlns:xlink="http://www.w3.org/1999/xlink" + onload="setTimeAndSnapshot(101, false)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <title>Testing that opacity changes are reflected in patterns</title> + + <defs> + <pattern id="p" width="100%" height="100%"> + <g> + <rect width="100%" height="100%" fill="lime" stroke="lime" stroke-width="1" opacity="0"> + <animate attributeName="opacity" values="0;1" dur="1s" begin="99s" fill="freeze" /> + </rect> + </g> + </pattern> + </defs> + + <rect width="100%" height="100%" fill="red"/> + <rect width="100%" height="100%" fill="url(#p)"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-overflow-shorthand-ref.svg b/layout/reftests/svg/smil/anim-overflow-shorthand-ref.svg new file mode 100644 index 0000000000..07676395d3 --- /dev/null +++ b/layout/reftests/svg/smil/anim-overflow-shorthand-ref.svg @@ -0,0 +1,11 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Reference for animation of the "overflow" shorthand attribute</title> + + <rect width="100%" height="100%" fill="none"/> + <marker id="marker" markerWidth="20" markerHeight="20" + viewBox="0 0 10 10" style="overflow: hidden"> + <path fill="red" d="M 0 0 L 20 10 L 0 20 z" /> + </marker> + <line x2="0" y2="0" marker-end="url(#marker)" stroke="transparent"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-overflow-shorthand.svg b/layout/reftests/svg/smil/anim-overflow-shorthand.svg new file mode 100644 index 0000000000..a79dd44db2 --- /dev/null +++ b/layout/reftests/svg/smil/anim-overflow-shorthand.svg @@ -0,0 +1,19 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(4, true)"> + <title>Test animation of the "overflow" shorthand attribute</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + + <rect width="100%" height="100%" fill="none"/> + <marker id="marker" markerWidth="20" markerHeight="20" + viewBox="0 0 10 10"> + <path fill="red" d="M 0 0 L 20 10 L 0 20 z" /> + <set attributeName="overflow" + calcMode="linear" + begin="0s" dur="2s" + from="hidden" to="hidden" + fill="freeze"/> + </marker> + <line x2="0" y2="0" marker-end="url(#marker)" stroke="transparent"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-paintserver-1-ref.svg b/layout/reftests/svg/smil/anim-paintserver-1-ref.svg new file mode 100644 index 0000000000..d6cf9488ee --- /dev/null +++ b/layout/reftests/svg/smil/anim-paintserver-1-ref.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <rect x="0" y="0" width="300" height="400" fill="lime"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-paintserver-1.svg b/layout/reftests/svg/smil/anim-paintserver-1.svg new file mode 100644 index 0000000000..33f5fa158a --- /dev/null +++ b/layout/reftests/svg/smil/anim-paintserver-1.svg @@ -0,0 +1,86 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <defs> + <linearGradient id="lime"> + <stop offset="0.0" stop-color="lime"/> + </linearGradient> + <linearGradient id="red"> + <stop offset="0.0" stop-color="red"/> + </linearGradient> + </defs> + + <!-- 1. Set paint server --> + <rect x="0" y="0" width="100" height="100" fill="red"> + <set attributeName="fill" to="url(#lime)"/> + </rect> + <!-- 2. Get paint server. We're looking for a code path that will fetch the + base value, fail to replace it, and end up setting the animation + value as the fetched base value. + To-animation requires fetching the base value so we use that, plus + invalid animation values so that we won't replace the base value. --> + <rect x="100" y="0" width="100" height="100" fill="url(#lime)"> + <animate attributeName="fill" to="pikapikaglittergold"/> + </rect> + <!-- 3. "Interpolate" paint servers. We should fall back to discrete mode + which should mean that 150s into a 3-valued animation of 400s duration + we're in the middle value since each value will get about 133s each. + --> + <rect x="200" y="0" width="100" height="100" fill="red"> + <animate attributeName="fill" values="orange; url(#lime); purple" + begin="-150s" dur="400s"/> + </rect> + + <!-- By addition tests: In the following cases we'll go to calculate our + animation function values but since they're by-animation we'll try to do + some addition which should fail since addition with paint servers isn't + supported and hence the animation should not be applied. --> + <!-- 4. Check by-addition behaves (1): by: paint server --> + <rect x="0" y="100" width="100" height="100" fill="lime"> + <animate attributeName="fill" from="#f00" by="url(#red)"/> + </rect> + <!-- 5. Check by-addition behaves (2): from: paint server --> + <rect x="100" y="100" width="100" height="100" fill="lime"> + <animate attributeName="fill" from="url(#red)" by="#f00"/> + </rect> + <!-- 6. Check by-addition behaves (3): from-by paint server --> + <rect x="200" y="100" width="100" height="100" fill="#0f0"> + <animate attributeName="fill" from="url(#red)" by="url(#red)"/> + </rect> + + <!-- 7. Check that by-addition without a paint server is ok though. + (Since the animation has indefinite simple duration we'll never get past + the first value which is is lime green.) --> + <rect x="0" y="200" width="100" height="100" fill="red"> + <animate attributeName="fill" from="#0f0" by="#00f" dur="indefinite"/> + </rect> + <!-- 8. Sandwich addition test. In the following cases we should be able to + calculate the animation function ok, but we'll fail to add it to the + underlying values (since paint servers can't be added) and just set the + value instead. (SMIL 3 12.6.3 says, "[The additive] attribute is + ignored if the target attribute does not support additive animation.") + --> + <rect x="100" y="200" width="100" height="100" fill="red"> + <animate attributeName="fill" values="url(#lime)" additive="sum"/> + </rect> + <!-- 9. Check paced animation fails expectedly. The operation is as with case + 3 and we should fall back to discrete mode --> + <rect x="200" y="200" width="100" height="100" fill="red"> + <animate attributeName="fill" values="#0f1; url(#lime); #00f" + begin="-150s" dur="400s" calcMode="paced"/> + </rect> + + <!-- 10. Fallback color - specified color --> + <rect x="0" y="300" width="100" height="100" fill="red"> + <set attributeName="fill" to="url(#nonexistant) lime"/> + </rect> + <!-- 11. Fallback color - currentColor --> + <g color="lime"> + <rect x="100" y="300" width="100" height="100" fill="red"> + <set attributeName="fill" to="url(#nonexistant) currentColor"/> + </rect> + </g> + <!-- 12. Fallback color - none --> + <rect x="200" y="300" width="100" height="100" fill="lime"/> + <rect x="200" y="300" width="100" height="100" fill="red"> + <set attributeName="fill" to="url(#nonexistant) none"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-path-d-01-ref.svg b/layout/reftests/svg/smil/anim-path-d-01-ref.svg new file mode 100644 index 0000000000..b32fd77dbe --- /dev/null +++ b/layout/reftests/svg/smil/anim-path-d-01-ref.svg @@ -0,0 +1,134 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <style type="text/css"> + path { fill: none; stroke: blue; stroke-width: 1px; + shape-rendering: crispEdges; } + </style> + + <path d="M10,10 + L26,10 + l-16,32 + H26 + V10 + h16 + v32 + + M80,10 + C90,30 85,30 96,30 + S102,30 112,10 + + m30,0 + c10,20 5,20 16,20 + s6,0 16,-20 + + M220,20 + Q225,46 236,26 + T252,20 + + M290,20 + q5,26 16,6 + t16,-6 + + M364,36 + A16,11 -30 1 1 380,36 + + M410,36 + a16,11 -30 1 1 16,0 + "/> + + <path transform="translate(0,70)" + d="M10,10 + L26,10 + l-16,32 + H26 + V10 + h16 + v32 + + M80,10 + C90,30 85,30 96,30 + S102,30 112,10 + + m30,0 + c10,20 5,20 16,20 + s6,0 16,-20 + + M220,20 + Q225,46 236,26 + T252,20 + + M290,20 + q5,26 16,6 + t16,-6 + + M364,36 + A16,11 -30 1 1 380,36 + + M410,36 + a16,11 -30 1 1 16,0 + "/> + + <path transform="translate(0,140)" + d="M10,10 + L33,10 + l-23,46 + H33 + V10 + h23 + v46 + + M80,10 + C100,20 90,50 103,50 + S106,20 126,10 + + m20,0 + c20,10 10,40 23,40 + s3,-30 23,-40 + + M220,30 + Q230,72 243,33 + T266,30 + + M290,30 + q10,42 23,3 + t23,-3 + + M368,53 + A23,13 -60 1 1 382,53 + + M410,53 + a23,13 -60 1 1 14,0 + "/> + + <path transform="translate(0,210)" + d="M10,10 + L40,10 + l-30,60 + H40 + V10 + h30 + v60 + + M80,10 + C110,10 95,70 110,70 + S110,10 140,10 + + m10,0 + c30,0 15,60 30,60 + s0,-60 30,-60 + + M220,40 + Q235,98 250,40 + T280,40 + + M290,40 + q15,58 30,0 + t30,0 + + M372,70 + A30,15 -90 1 1 384,70 + + M410,70 + a30,15 -90 1 1 12,0 + "/> + +</svg> diff --git a/layout/reftests/svg/smil/anim-path-d-01.svg b/layout/reftests/svg/smil/anim-path-d-01.svg new file mode 100644 index 0000000000..180cfe5679 --- /dev/null +++ b/layout/reftests/svg/smil/anim-path-d-01.svg @@ -0,0 +1,340 @@ +<!-- + From https://bugzilla.mozilla.org/show_bug.cgi?id=522306 +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1, true)"> + <title>Test animation of the 'd' attribute on the 'path' element</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + <style type="text/css"> + path { fill: none; stroke: blue; stroke-width: 1px; + shape-rendering: crispEdges; } + </style> + + + <!-- The difference between respective numbers in the effective 'from' and + 'to' path data below is carefully designed to be a factor of 3. That way + our reference file (which checks against a one third complete animation) + can contain whole numbers, which is necessary to avoid failure due to + hard coded rounded numbers in the reference not matching platform + specific rounding behaviour. + --> + + <!-- Test 'to' animation. --> + + <path d="M10,10 + L19,10 + l-9,18 + H19 + V10 + h9 + v18 + + M80,10 + C80,40 80,10 89,10 + S98,40 98,10 + + m40,0 + c0,30 0,0 9,0 + s9,30 9,0 + + M220,10 + Q220,20 229,19 + T238,10 + + M290,10 + q0,10 9,9 + t9,-9 + + M360,19 + A9,9 0 1 1 378,19 + + M410,19 + a9,9 0 1 1 18,0 + "> + <animate attributeName="d" + calcMode="linear" + begin="0s" dur="3s" + to="M10,10 + L40,10 + l-30,60 + H40 + V10 + h30 + v60 + + M80,10 + C110,10 95,70 110,70 + S110,10 140,10 + + m10,0 + c30,0 15,60 30,60 + s0,-60 30,-60 + + M220,40 + Q235,98 250,40 + T280,40 + + M290,40 + q15,58 30,0 + t30,0 + + M372,70 + A30,15 -90 1 1 384,70 + + M410,70 + a30,15 -90 1 1 12,0 + " + fill="freeze"/> + </path> + + + <!-- Test 'by' animation. --> + + <path transform="translate(0, 70)" + d="M10,10 + L19,10 + l-9,18 + H19 + V10 + h9 + v18 + + M80,10 + C80,40 80,10 89,10 + S98,40 98,10 + + m40,0 + c0,30 0,0 9,0 + s9,30 9,0 + + M220,10 + Q220,20 229,19 + T238,10 + + M290,10 + q0,10 9,9 + t9,-9 + + M360,19 + A9,9 0 1 1 378,19 + + M410,19 + a9,9 0 1 1 18,0 + "> + <animate attributeName="d" + calcMode="linear" + begin="0s" dur="3s" + by="M0,0 + L21,0 + l-21,42 + H21 + V0 + h21 + v42 + + M0,0 + C30,-30 15,60 21,60 + S12,-30 42,0 + + m-30,0 + c30,-30 15,60 21,60 + s-9,-90 21,-60 + + M0,30 + Q15,78 21,21 + T42,30 + + M0,30 + q15,48 21,-9 + t21,9 + + M12,51 + A21,6 -90 1 1 6,51 + + M0,51 + a21,6 -90 1 1 -6,0 + " + fill="freeze"/> + </path> + + + <!-- Test calcMode="paced". We don't currently support paced animation, so + we're just testing that we don't do anything unexpected (that we behave + as if calcMode="discrete"). + --> + + <path transform="translate(0, 140)"> + <animate attributeName="d" + calcMode="paced" + begin="0s" dur="3s" + values=" + M10,10 + L19,10 + l-9,18 + H19 + V10 + h9 + v18 + + M80,10 + C80,40 80,10 89,10 + S98,40 98,10 + + m40,0 + c0,30 0,0 9,0 + s9,30 9,0 + + M220,10 + Q220,20 229,19 + T238,10 + + M290,10 + q0,10 9,9 + t9,-9 + + M360,19 + A9,9 0 1 1 378,19 + + M410,19 + a9,9 0 1 1 18,0 + + ; + + M10,10 + L33,10 + l-23,46 + H33 + V10 + h23 + v46 + + M80,10 + C100,20 90,50 103,50 + S106,20 126,10 + + m20,0 + c20,10 10,40 23,40 + s3,-30 23,-40 + + M220,30 + Q230,72 243,33 + T266,30 + + M290,30 + q10,42 23,3 + t23,-3 + + M368,53 + A23,13 -60 1 1 382,53 + + M410,53 + a23,13 -60 1 1 14,0 + + ; + + M10,10 + L40,10 + l-30,60 + H40 + V10 + h30 + v60 + + M80,10 + C110,10 95,70 110,70 + S110,10 140,10 + + m10,0 + c30,0 15,60 30,60 + s0,-60 30,-60 + + M220,40 + Q235,98 250,40 + T280,40 + + M290,40 + q15,58 30,0 + t30,0 + + M372,70 + A30,15 -90 1 1 384,70 + + M410,70 + a30,15 -90 1 1 12,0 + " + fill="freeze"/> + </path> + + + <!-- Test calcMode="discrete". --> + + <path transform="translate(0, 210)" + d="M10,10 + L19,10 + l-9,18 + H19 + V10 + h9 + v18 + + M80,10 + C80,40 80,10 89,10 + S98,40 98,10 + + m40,0 + c0,30 0,0 9,0 + s9,30 9,0 + + M220,10 + Q220,20 229,19 + T238,10 + + M290,10 + q0,10 9,9 + t9,-9 + + M360,19 + A9,9 0 1 1 378,19 + + M410,19 + a9,9 0 1 1 18,0 + "> + <animate attributeName="d" + calcMode="discrete" + begin="0s" dur="2s" + to="M10,10 + L40,10 + l-30,60 + H40 + V10 + h30 + v60 + + M80,10 + C110,10 95,70 110,70 + S110,10 140,10 + + m10,0 + c30,0 15,60 30,60 + s0,-60 30,-60 + + M220,40 + Q235,98 250,40 + T280,40 + + M290,40 + q15,58 30,0 + t30,0 + + M372,70 + A30,15 -90 1 1 384,70 + + M410,70 + a30,15 -90 1 1 12,0 + " + fill="freeze"/> + </path> + +</svg> diff --git a/layout/reftests/svg/smil/anim-pathLength-01-ref.svg b/layout/reftests/svg/smil/anim-pathLength-01-ref.svg new file mode 100644 index 0000000000..3766e11912 --- /dev/null +++ b/layout/reftests/svg/smil/anim-pathLength-01-ref.svg @@ -0,0 +1,14 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <path id="path_1" fill="none" d="M 0,50 h 500"/> + <path id="path_2" fill="none" d="M 0,100 h 500"/> + <text fill="blue"> + <textPath xlink:href="#path_1" startOffset="20"> + Some text + </textPath> + </text> + <text fill="blue"> + <textPath xlink:href="#path_2" startOffset="20"> + Some text + </textPath> + </text> +</svg> diff --git a/layout/reftests/svg/smil/anim-pathLength-01.svg b/layout/reftests/svg/smil/anim-pathLength-01.svg new file mode 100644 index 0000000000..66e60b3350 --- /dev/null +++ b/layout/reftests/svg/smil/anim-pathLength-01.svg @@ -0,0 +1,35 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1, true)"> + <title>Test animation of the "pathLength" attribute on the "path" element</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + <path id="path_1" fill="none" d="M 0,50 h 500" pathLength="5000"> + <animate attributeName="pathLength" + calcMode="linear" + begin="0s" dur="2s" + from="5000" to="95000" + fill="freeze"/> + </path> + <path id="path_2" fill="none" d="M 0,100 h 500" pathLength="5000"> + <animate attributeName="pathLength" + calcMode="linear" + begin="0s" dur="1s" + from="5000" to="50000" + fill="freeze"/> + </path> + + <!-- test 50% completed animation --> + <text fill="blue"> + <textPath xlink:href="#path_1" startOffset="2000"> + Some text + </textPath> + </text> + + <!-- test 100% completed animation --> + <text fill="blue"> + <textPath xlink:href="#path_2" startOffset="2000"> + Some text + </textPath> + </text> +</svg> diff --git a/layout/reftests/svg/smil/anim-pattern-attr-presence-01-ref.svg b/layout/reftests/svg/smil/anim-pattern-attr-presence-01-ref.svg new file mode 100644 index 0000000000..078798d2e8 --- /dev/null +++ b/layout/reftests/svg/smil/anim-pattern-attr-presence-01-ref.svg @@ -0,0 +1,133 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 800"> + <!-- 1. patternUnits --> + <defs> + <pattern id="patternUnits" width="80" height="80" + patternUnits="userSpaceOnUse"> + <rect width="50" height="50" fill="blue"/> + <rect x="50" width="50" height="50" fill="red"/> + <rect y="50" width="50" height="50" fill="red"/> + <rect x="50" y="50" width="50" height="50" fill="blue"/> + </pattern> + </defs> + <rect width="100" height="100" stroke="black" fill="url(#patternUnits)"/> + <g transform="translate(100)"> + <rect width="100" height="100" stroke="black" fill="url(#patternUnits)"/> + </g> + <!-- 2. patternContentUnits --> + <defs> + <pattern id="patternContentUnits" width="1" height="1" + patternContentUnits="objectBoundingBox"> + <rect width="0.5" height="0.5" fill="blue"/> + <rect x="0.5" width="0.5" height="0.5" fill="red"/> + <rect y="0.5" width="0.5" height="0.5" fill="red"/> + <rect x="0.5" y="0.5" width="0.5" height="0.5" fill="blue"/> + </pattern> + </defs> + <g transform="translate(0 100)"> + <rect width="100" height="100" stroke="black" + fill="url(#patternContentUnits)"/> + <g transform="translate(100)"> + <rect width="100" height="100" stroke="black" + fill="url(#patternContentUnits)"/> + </g> + </g> + <!-- 3. patternTransform --> + <defs> + <pattern id="patternTransform" width="1" height="1" + patternTransform="rotate(45 50 50)"> + <rect width="50" height="50" fill="blue"/> + <rect x="50" width="50" height="50" fill="red"/> + <rect y="50" width="50" height="50" fill="red"/> + <rect x="50" y="50" width="50" height="50" fill="blue"/> + </pattern> + </defs> + <g transform="translate(0 200)"> + <rect width="100" height="100" stroke="black" + fill="url(#patternTransform)"/> + <g transform="translate(100)"> + <rect width="100" height="100" stroke="black" + fill="url(#patternTransform)"/> + </g> + </g> + <!-- 4. preserveAspectRatio --> + <defs> + <pattern id="par" width="1" height="1" viewBox="0.1 0.1 0.6 0.85" + preserveAspectRatio="none"> + <rect width="50" height="50" fill="blue"/> + <rect x="50" width="50" height="50" fill="red"/> + <rect y="50" width="50" height="50" fill="red"/> + <rect x="50" y="50" width="50" height="50" fill="blue"/> + </pattern> + </defs> + <g transform="translate(0 300)"> + <rect width="100" height="100" stroke="black" fill="url(#par)"/> + <g transform="translate(100)"> + <rect width="100" height="100" stroke="black" fill="url(#par)"/> + </g> + </g> + <!-- 5. viewBox --> + <defs> + <pattern id="viewBox" width="1" height="1" viewBox="0.1 0.1 0.6 0.85" + preserveAspectRatio="none"> + <rect width="50" height="50" fill="blue"/> + <rect x="50" width="50" height="50" fill="red"/> + <rect y="50" width="50" height="50" fill="red"/> + <rect x="50" y="50" width="50" height="50" fill="blue"/> + </pattern> + </defs> + <g transform="translate(0 400)"> + <rect width="100" height="100" stroke="black" fill="url(#viewBox)"/> + <g transform="translate(100)"> + <rect width="100" height="100" stroke="black" fill="url(#viewBox)"/> + </g> + </g> + <!-- 6. xlink:href --> + <defs> + <pattern id="xlink" xlink:href="#xlinkRef"/> + <pattern id="xlinkRef" width="1" height="1"> + <rect width="50" height="50" fill="blue"/> + <rect x="50" width="50" height="50" fill="red"/> + <rect y="50" width="50" height="50" fill="red"/> + <rect x="50" y="50" width="50" height="50" fill="blue"/> + </pattern> + </defs> + <g transform="translate(0 500)"> + <rect width="100" height="100" stroke="black" fill="url(#xlink)"/> + <g transform="translate(100)"> + <rect width="100" height="100" stroke="black" fill="url(#xlink)"/> + </g> + </g> + <!-- 6. x, y --> + <defs> + <pattern id="xy" width="1" height="1" x="0.1" y="-0.1"> + <rect width="50" height="50" fill="blue"/> + <rect x="50" width="50" height="50" fill="red"/> + <rect y="50" width="50" height="50" fill="red"/> + <rect x="50" y="50" width="50" height="50" fill="blue"/> + </pattern> + </defs> + <g transform="translate(0 600)"> + <rect width="100" height="100" stroke="black" fill="url(#xy)"/> + <g transform="translate(100)"> + <rect width="100" height="100" stroke="black" fill="url(#xy)"/> + </g> + </g> + <!-- 7. width, height --> + <defs> + <pattern id="widthHeight" width="1" height="1"> + <rect width="50" height="50" fill="blue"/> + <rect x="50" width="50" height="50" fill="red"/> + <rect y="50" width="50" height="50" fill="red"/> + <rect x="50" y="50" width="50" height="50" fill="blue"/> + </pattern> + </defs> + <g transform="translate(0 700)"> + <rect width="100" height="100" stroke="black" fill="url(#widthHeight)"/> + <g transform="translate(100)"> + <rect width="100" height="100" stroke="black" fill="url(#widthHeight)"/> + </g> + </g> + <!-- If adding more tests here, be sure to update the viewBox on the root svg + element --> +</svg> diff --git a/layout/reftests/svg/smil/anim-pattern-attr-presence-01.svg b/layout/reftests/svg/smil/anim-pattern-attr-presence-01.svg new file mode 100644 index 0000000000..8a75347a81 --- /dev/null +++ b/layout/reftests/svg/smil/anim-pattern-attr-presence-01.svg @@ -0,0 +1,175 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 800"> + <!-- Bug 544809 - nsSVGPatternFrame::GetPatternWithAttr and callers should + take account of SMIL animation. + + Test animating pattern attributes doesn't rely on the presence of + attributes in the DOM, but also correctly detects attributes set by + animation. + + The format of each test is that we have a base pattern named (attName)Ref + which does NOT specify the attribute under test, but instead sets the + attribute to a non-default value using animation. + + Then we have a referencing pattern named (attName) that refers to the + base pattern and also does NOT specify the attribute under test. + + When we go to look up the attribute under test we begin at (attName), + notice the attribute isn't specified (either in the DOM or by animation), + then go to (attName)Ref and detect that the attribute is specified there + by animation and use that value. + + To the right of each test we also include a rect that directly references + (attName)Ref. The two rectangles should be identical but prior to fixing + this bug they were not. + --> + <!-- 1. patternUnits: defaults to objectBoundingBox --> + <defs> + <pattern xlink:href="#patternUnitsRef" id="patternUnits"/> + <pattern id="patternUnitsRef" width="80" height="80"> + <set attributeName="patternUnits" to="userSpaceOnUse"/> + <rect width="50" height="50" fill="blue"/> + <rect x="50" width="50" height="50" fill="red"/> + <rect y="50" width="50" height="50" fill="red"/> + <rect x="50" y="50" width="50" height="50" fill="blue"/> + </pattern> + </defs> + <rect width="100" height="100" stroke="black" fill="url(#patternUnits)"/> + <g transform="translate(100)"> + <rect width="100" height="100" stroke="black" fill="url(#patternUnitsRef)"/> + </g> + <!-- 2. patternContentUnits: defaults to userSpaceOnUse --> + <defs> + <pattern xlink:href="#patternContentUnitsRef" id="patternContentUnits"/> + <pattern id="patternContentUnitsRef" width="1" height="1"> + <set attributeName="patternContentUnits" to="objectBoundingBox"/> + <rect width="0.5" height="0.5" fill="blue"/> + <rect x="0.5" width="0.5" height="0.5" fill="red"/> + <rect y="0.5" width="0.5" height="0.5" fill="red"/> + <rect x="0.5" y="0.5" width="0.5" height="0.5" fill="blue"/> + </pattern> + </defs> + <g transform="translate(0 100)"> + <rect width="100" height="100" stroke="black" + fill="url(#patternContentUnits)"/> + <g transform="translate(100)"> + <rect width="100" height="100" stroke="black" + fill="url(#patternContentUnitsRef)"/> + </g> + </g> + <!-- 3. patternTransform: defaults to identity --> + <defs> + <pattern xlink:href="#patternTransformRef" id="patternTransform"/> + <pattern id="patternTransformRef" width="1" height="1"> + <animateTransform attributeName="patternTransform" type="rotate" + values="45 50 50" fill="freeze"/> + <rect width="50" height="50" fill="blue"/> + <rect x="50" width="50" height="50" fill="red"/> + <rect y="50" width="50" height="50" fill="red"/> + <rect x="50" y="50" width="50" height="50" fill="blue"/> + </pattern> + </defs> + <g transform="translate(0 200)"> + <rect width="100" height="100" stroke="black" + fill="url(#patternTransform)"/> + <g transform="translate(100)"> + <rect width="100" height="100" stroke="black" + fill="url(#patternTransformRef)"/> + </g> + </g> + <!-- 4. preserveAspectRatio: defaults to xMidYMid meet --> + <defs> + <pattern xlink:href="#parRef" id="par"/> + <pattern id="parRef" width="1" height="1" viewBox="0.1 0.1 0.6 0.85"> + <set attributeName="preserveAspectRatio" to="none"/> + <rect width="50" height="50" fill="blue"/> + <rect x="50" width="50" height="50" fill="red"/> + <rect y="50" width="50" height="50" fill="red"/> + <rect x="50" y="50" width="50" height="50" fill="blue"/> + </pattern> + </defs> + <g transform="translate(0 300)"> + <rect width="100" height="100" stroke="black" fill="url(#par)"/> + <g transform="translate(100)"> + <rect width="100" height="100" stroke="black" fill="url(#parRef)"/> + </g> + </g> + <!-- 5. viewBox --> + <defs> + <pattern xlink:href="#viewBoxRef" id="viewBox"/> + <pattern id="viewBoxRef" width="1" height="1" + preserveAspectRatio="none"> + <set attributeName="viewBox" to="0.1 0.1 0.6 0.85"/> + <rect width="50" height="50" fill="blue"/> + <rect x="50" width="50" height="50" fill="red"/> + <rect y="50" width="50" height="50" fill="red"/> + <rect x="50" y="50" width="50" height="50" fill="blue"/> + </pattern> + </defs> + <g transform="translate(0 400)"> + <rect width="100" height="100" stroke="black" fill="url(#viewBox)"/> + <g transform="translate(100)"> + <rect width="100" height="100" stroke="black" fill="url(#viewBoxRef)"/> + </g> + </g> + <!-- 6. xlink:href + This attribute is not affected by bug 544809, i.e. it doesn't use + nsSVGPatternFrame::GetPatternWithAttr, but we test it here for completeness + --> + <defs> + <pattern id="xlink"> + <set attributeName="xlink:href" to="#xlinkRef"/> + </pattern> + <pattern id="xlinkRef" width="1" height="1"> + <rect width="50" height="50" fill="blue"/> + <rect x="50" width="50" height="50" fill="red"/> + <rect y="50" width="50" height="50" fill="red"/> + <rect x="50" y="50" width="50" height="50" fill="blue"/> + </pattern> + </defs> + <g transform="translate(0 500)"> + <rect width="100" height="100" stroke="black" fill="url(#xlink)"/> + <g transform="translate(100)"> + <rect width="100" height="100" stroke="black" fill="url(#xlinkRef)"/> + </g> + </g> + <!-- 6. x, y: defaults to 0 --> + <defs> + <pattern xlink:href="#xyRef" id="xy"/> + <pattern id="xyRef" width="1" height="1"> + <set attributeName="x" to="0.1"/> + <set attributeName="y" to="-0.1"/> + <rect width="50" height="50" fill="blue"/> + <rect x="50" width="50" height="50" fill="red"/> + <rect y="50" width="50" height="50" fill="red"/> + <rect x="50" y="50" width="50" height="50" fill="blue"/> + </pattern> + </defs> + <g transform="translate(0 600)"> + <rect width="100" height="100" stroke="black" fill="url(#xy)"/> + <g transform="translate(100)"> + <rect width="100" height="100" stroke="black" fill="url(#xyRef)"/> + </g> + </g> + <!-- 7. width, height: defaults to 0 (disables rendering) --> + <defs> + <pattern xlink:href="#widthHeightRef" id="widthHeight"/> + <pattern id="widthHeightRef"> + <set attributeName="width" to="1"/> + <set attributeName="height" to="1"/> + <rect width="50" height="50" fill="blue"/> + <rect x="50" width="50" height="50" fill="red"/> + <rect y="50" width="50" height="50" fill="red"/> + <rect x="50" y="50" width="50" height="50" fill="blue"/> + </pattern> + </defs> + <g transform="translate(0 700)"> + <rect width="100" height="100" stroke="black" fill="url(#widthHeight)"/> + <g transform="translate(100)"> + <rect width="100" height="100" stroke="black" + fill="url(#widthHeightRef)"/> + </g> + </g> + <!-- If adding more tests here, be sure to update the viewBox on the root svg + element --> +</svg> diff --git a/layout/reftests/svg/smil/anim-pattern-href-01.svg b/layout/reftests/svg/smil/anim-pattern-href-01.svg new file mode 100644 index 0000000000..3c9b051558 --- /dev/null +++ b/layout/reftests/svg/smil/anim-pattern-href-01.svg @@ -0,0 +1,28 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(0.5, true)"> + <title>Test animation of the "xlink:href" <string> attribute on the "pattern" element</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + + <defs> + <pattern id="pat1a" patternUnits="objectBoundingBox" width="1" height="1"> + <rect width="100%" height="100%" fill="red"/> + </pattern> + <pattern id="pat1b" patternUnits="objectBoundingBox" width="1" height="1"> + <rect width="100%" height="100%" fill="lime"/> + </pattern> + <pattern id="pat2" xlink:href="#pat1a"> + <animate attributeName="xlink:href" + begin="0s" dur="1s" + from="#pat1a" to="#pat1b"/> + </pattern> + </defs> + <rect width="100%" height="100%" fill="lime"/> + <rect x="20" y="150" width="440" height="80" fill="url(#pat2)" /> + +</svg> diff --git a/layout/reftests/svg/smil/anim-polygon-points-01-ref.svg b/layout/reftests/svg/smil/anim-polygon-points-01-ref.svg new file mode 100644 index 0000000000..fc5393f525 --- /dev/null +++ b/layout/reftests/svg/smil/anim-polygon-points-01-ref.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <style type="text/css"> + polygon { fill: blue; } + </style> + + <polygon points="10,10 70,50 110,10 160,30 210,10"/> + + <polygon transform="translate(0, 70)" + points="10,10 70,50 110,10 160,30 210,10"/> + + <polygon transform="translate(0, 140)" + points="10,10 70,50 110,10 160,30 210,10"/> + + <polygon transform="translate(0, 210)" + points="10,10 70,10 110,10 160,70 210,10"/> + +</svg> diff --git a/layout/reftests/svg/smil/anim-polygon-points-01.svg b/layout/reftests/svg/smil/anim-polygon-points-01.svg new file mode 100644 index 0000000000..1f4f9e6432 --- /dev/null +++ b/layout/reftests/svg/smil/anim-polygon-points-01.svg @@ -0,0 +1,73 @@ +<!-- + From https://bugzilla.mozilla.org/show_bug.cgi?id=522308 +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1, true)"> + <title>Test animation of the 'points' attribute on the 'polygon' element</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + <style type="text/css"> + polygon { fill: blue; } + </style> + + + <!-- The difference between respective numbers in the effective 'from' and + 'to' lists below is carefully designed to be a factor of 3. That way + our reference file (which checks against a one third complete animation) + can contain whole numbers, which is necessary to avoid failure due to + hard coded rounded numbers in the reference not matching platform + specific rounding behaviour. + --> + + <!-- Test 'to' animation. --> + + <polygon points="10,10 70,70 110,10 160,10 210,10"> + <animate attributeName="points" + calcMode="linear" + begin="0s" dur="3s" + to="10,10 70,10 110,10 160,70 210,10" + fill="freeze"/> + </polygon> + + + <!-- Test 'by' animation. --> + + <polygon transform="translate(0, 70)" + points="10,10 70,70 110,10 160,10 210,10"> + <animate attributeName="points" + calcMode="linear" + begin="0s" dur="3s" + by="0,0 0,-60 0,0 0,60 0,0" + fill="freeze"/> + </polygon> + + + <!-- Test calcMode="paced". We don't currently support paced animation, so + we're just testing that we don't do anything unexpected (that we behave + as if calcMode="discrete"). + --> + + <polygon transform="translate(0, 140)"> + <animate attributeName="points" + calcMode="paced" + begin="0s" dur="3s" + values="10,10 70,70 110,10 160,10 210,10; + 10,10 70,30 110,10 160,50 210,10; + 10,10 70,10 110,10 160,70 210,10" + fill="freeze"/> + </polygon> + + + <!-- Test calcMode="discrete". --> + + <polygon transform="translate(0, 210)" + points="10,10 70,70 110,10 160,10 210,10"> + <animate attributeName="points" + calcMode="discrete" + begin="0s" dur="2s" + to="10,10 70,10 110,10 160,70 210,10" + fill="freeze"/> + </polygon> + +</svg> diff --git a/layout/reftests/svg/smil/anim-polyline-points-01-ref.svg b/layout/reftests/svg/smil/anim-polyline-points-01-ref.svg new file mode 100644 index 0000000000..812b1ae2e8 --- /dev/null +++ b/layout/reftests/svg/smil/anim-polyline-points-01-ref.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <style type="text/css"> + polyline { fill: none; stroke: blue; stroke-width: 2px; } + </style> + + <polyline points="10,10 70,50 110,10 160,30 210,10"/> + + <polyline transform="translate(0, 70)" + points="10,10 70,50 110,10 160,30 210,10"/> + + <polyline transform="translate(0, 140)" + points="10,10 70,50 110,10 160,30 210,10"/> + + <polyline transform="translate(0, 210)" + points="10,10 70,10 110,10 160,70 210,10"/> + +</svg> diff --git a/layout/reftests/svg/smil/anim-polyline-points-01.svg b/layout/reftests/svg/smil/anim-polyline-points-01.svg new file mode 100644 index 0000000000..89dc2f3b1e --- /dev/null +++ b/layout/reftests/svg/smil/anim-polyline-points-01.svg @@ -0,0 +1,73 @@ +<!-- + From https://bugzilla.mozilla.org/show_bug.cgi?id=522308 +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1, true)"> + <title>Test animation of the 'points' attribute on the 'polyline' element</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + <style type="text/css"> + polyline { fill: none; stroke: blue; stroke-width: 2px; } + </style> + + + <!-- The difference between respective numbers in the effective 'from' and + 'to' lists below is carefully designed to be a factor of 3. That way + our reference file (which checks against a one third complete animation) + can contain whole numbers, which is necessary to avoid failure due to + hard coded rounded numbers in the reference not matching platform + specific rounding behaviour. + --> + + <!-- Test 'to' animation. --> + + <polyline points="10,10 70,70 110,10 160,10 210,10"> + <animate attributeName="points" + calcMode="linear" + begin="0s" dur="3s" + to="10,10 70,10 110,10 160,70 210,10" + fill="freeze"/> + </polyline> + + + <!-- Test 'by' animation. --> + + <polyline transform="translate(0, 70)" + points="10,10 70,70 110,10 160,10 210,10"> + <animate attributeName="points" + calcMode="linear" + begin="0s" dur="3s" + by="0,0 0,-60 0,0 0,60 0,0" + fill="freeze"/> + </polyline> + + + <!-- Test calcMode="paced". We don't currently support paced animation, so + we're just testing that we don't do anything unexpected (that we behave + as if calcMode="discrete"). + --> + + <polyline transform="translate(0, 140)"> + <animate attributeName="points" + calcMode="paced" + begin="0s" dur="3s" + values="10,10 70,70 110,10 160,10 210,10; + 10,10 70,30 110,10 160,50 210,10; + 10,10 70,10 110,10 160,70 210,10" + fill="freeze"/> + </polyline> + + + <!-- Test calcMode="discrete". --> + + <polyline transform="translate(0, 210)" + points="10,10 70,70 110,10 160,10 210,10"> + <animate attributeName="points" + calcMode="discrete" + begin="0s" dur="2s" + to="10,10 70,10 110,10 160,70 210,10" + fill="freeze"/> + </polyline> + +</svg> diff --git a/layout/reftests/svg/smil/anim-rect-rxry-1-ref.svg b/layout/reftests/svg/smil/anim-rect-rxry-1-ref.svg new file mode 100644 index 0000000000..bda4c9e518 --- /dev/null +++ b/layout/reftests/svg/smil/anim-rect-rxry-1-ref.svg @@ -0,0 +1,25 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" shape-rendering="crispEdges"> + <g fill="blue" stroke="red" stroke-width="10" transform="translate(10 10)"> + <!-- Squares --> + <rect x="0" width="40" height="40"/> + <rect x="60" width="40" height="40"/> + <rect x="120" width="40" height="40"/> + <rect x="180" width="40" height="40"/> + + <!-- rx=0 ry=20 --> + <rect x="0" y="60" width="40" height="40" rx="0" ry="20"/> + <rect x="60" y="60" width="40" height="40" rx="0" ry="20"/> + <rect x="120" y="60" width="40" height="40" rx="0" ry="20"/> + <rect x="180" y="60" width="40" height="40" rx="0" ry="20"/> + <rect x="240" y="60" width="40" height="40" rx="0" ry="20"/> + + <!-- rx=20 (hence ry=20) --> + <rect x="0" y="120" width="40" height="40" rx="20"/> + <rect x="60" y="120" width="40" height="40" rx="20"/> + <rect x="120" y="120" width="40" height="40" rx="20"/> + <rect x="180" y="120" width="40" height="40" rx="20"/> + <rect x="240" y="120" width="40" height="40" rx="20"/> + <rect x="300" y="120" width="40" height="40" rx="20"/> + </g> +</svg> diff --git a/layout/reftests/svg/smil/anim-rect-rxry-1.svg b/layout/reftests/svg/smil/anim-rect-rxry-1.svg new file mode 100644 index 0000000000..462388b719 --- /dev/null +++ b/layout/reftests/svg/smil/anim-rect-rxry-1.svg @@ -0,0 +1,65 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" shape-rendering="crispEdges"> + <g fill="blue" stroke="red" stroke-width="10" transform="translate(10 10)"> + <!-- Squares --> + <rect x="0" width="40" height="40"/> + <rect x="60" width="40" height="40"> + <set attributeName="rx" to="0"/> + </rect> + <rect x="120" width="40" height="40" rx="20"> + <set attributeName="rx" to="0"/> + </rect> + <rect x="180" width="40" height="40" rx="20" ry="20"> + <set attributeName="rx" to="0"/> + <set attributeName="ry" to="0"/> + </rect> + + <!-- rx=0 ry=20 --> + <rect x="0" y="60" width="40" height="40" rx="0" ry="20"/> + <rect x="60" y="60" width="40" height="40" ry="20"> + <set attributeName="rx" to="0"/> + </rect> + <rect x="120" y="60" width="40" height="40" rx="20" ry="20"> + <set attributeName="rx" to="0"/> + </rect> + <rect x="180" y="60" width="40" height="40"> + <set attributeName="rx" to="0"/> + <set attributeName="ry" to="20"/> + </rect> + <rect x="240" y="60" width="40" height="40" id="a"> + <set attributeName="ry" to="20"/> + <!-- rx.baseVal will be set to 0 by script --> + </rect> + + <!-- rx=20 (hence ry=20) --> + <rect x="0" y="120" width="40" height="40" rx="20"/> + <rect x="60" y="120" width="40" height="40"> + <set attributeName="rx" to="20"/> + </rect> + <rect x="120" y="120" width="40" height="40" rx="0"> + <set attributeName="rx" to="20"/> + </rect> + <rect x="180" y="120" width="40" height="40" rx="10"> + <set attributeName="rx" to="20"/> + </rect> + <rect x="240" y="120" width="40" height="40" ry="0" id="b"> + <set attributeName="rx" to="20"/> + <!-- ry attribute will be removed by script --> + </rect> + <!-- rx.baseVal attribute will be set by script --> + <rect x="300" y="120" width="40" height="40" id="c"/> + </g> + <script xlink:href="smil-util.js" type="text/javascript"/> + <script type="text/javascript"> + document.getElementById('a').rx.baseVal.value = 0; + document.getElementById('b').removeAttribute('ry'); + document.getElementById('c').rx.baseVal.value = 20; + // We can get very minor rendering differences on Windows due to the + // presence of animation in the document, even on un-animated content. + // This is most likely due to interaction with layers so we forcibly seek + // the animation timeline to try to produce a steady state for snapshot. + setTimeAndSnapshot(0.0, true); + </script> +</svg> diff --git a/layout/reftests/svg/smil/anim-remove-1.svg b/layout/reftests/svg/smil/anim-remove-1.svg new file mode 100644 index 0000000000..825a4c817d --- /dev/null +++ b/layout/reftests/svg/smil/anim-remove-1.svg @@ -0,0 +1,23 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + onload="go()"> + <!-- In this test, we delete an <animate> node while its animation is in + progress. We verify that animation effects are removed from its former + target. --> + <script> + function go() { + // Seek animation before we start tweaking things, to make sure we've + // already started sampling it. + document.documentElement.setCurrentTime(0.5); + + var anim = document.getElementById("anim"); + anim.parentNode.removeChild(anim); + setTimeAndSnapshot(1, false); + } + </script> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="15" y="15" width="200" height="200" fill="blue"> + <animate id="anim" attributeName="height" + begin="0s" dur="2s" by="-100" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-remove-2.svg b/layout/reftests/svg/smil/anim-remove-2.svg new file mode 100644 index 0000000000..e48104bd37 --- /dev/null +++ b/layout/reftests/svg/smil/anim-remove-2.svg @@ -0,0 +1,23 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + onload="go()"> + <!-- In this test, we delete an <animate> node after its animation is + completed & frozen. We verify that animation effects are removed from its + former target. --> + <script> + function go() { + // Seek animation before we start tweaking things, to make sure we've + // already started sampling it. + document.documentElement.setCurrentTime(2.0); + + var anim = document.getElementById("anim"); + anim.parentNode.removeChild(anim); + setTimeAndSnapshot(2.5, false); + } + </script> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="15" y="15" width="200" height="200" fill="blue"> + <animate id="anim" attributeName="height" + begin="0s" dur="2s" by="-100" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-remove-3.svg b/layout/reftests/svg/smil/anim-remove-3.svg new file mode 100644 index 0000000000..783cc2d02f --- /dev/null +++ b/layout/reftests/svg/smil/anim-remove-3.svg @@ -0,0 +1,22 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + onload="go()"> + <!-- In this test, we delete an <animate> node while its animation is in + progress. We verify that animation effects are removed from its former + target. --> + <script> + function go() { + // Seek animation before we start tweaking things, to make sure we've + // already started sampling it. + document.documentElement.setCurrentTime(0.5); + + var anim = document.getElementById("anim"); + anim.parentNode.removeChild(anim); + setTimeAndSnapshot(1, false); + } + </script> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect id="blueRect" x="15" y="15" width="200" height="200" fill="blue"/> + <animate id="anim" xlink:href="#blueRect" attributeName="height" + begin="0s" dur="2s" by="-100" fill="freeze"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-remove-4.svg b/layout/reftests/svg/smil/anim-remove-4.svg new file mode 100644 index 0000000000..ff2f7a4502 --- /dev/null +++ b/layout/reftests/svg/smil/anim-remove-4.svg @@ -0,0 +1,22 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + onload="go()"> + <!-- In this test, we delete an <animate> node after its animation is + completed & frozen. We verify that animation effects are removed from its + former target. --> + <script> + function go() { + // Seek animation before we start tweaking things, to make sure we've + // already started sampling it. + document.documentElement.setCurrentTime(2.0); + + var anim = document.getElementById("anim"); + anim.parentNode.removeChild(anim); + setTimeAndSnapshot(2.5, false); + } + </script> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect id="blueRect" x="15" y="15" width="200" height="200" fill="blue"/> + <animate id="anim" xlink:href="#blueRect" attributeName="height" + begin="0s" dur="2s" by="-100" fill="freeze"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-remove-5.svg b/layout/reftests/svg/smil/anim-remove-5.svg new file mode 100644 index 0000000000..a65ae5aba4 --- /dev/null +++ b/layout/reftests/svg/smil/anim-remove-5.svg @@ -0,0 +1,24 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + onload="go()"> + <!-- In this test, we remove an animation element's "attributeName" + attribute, which invalidates a completed, frozen animation. We verify + that animation effects are removed from the previously-targeted + attribute. --> + <script> + function go() { + // Seek animation before we start tweaking things, to make sure we've + // already started sampling it. + document.documentElement.setCurrentTime(2.0); + + var anim = document.getElementById("anim"); + anim.removeAttributeNS(null, "attributeName"); + setTimeAndSnapshot(2.5, false); + } + </script> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="15" y="15" width="200" height="200" fill="blue"> + <animate id="anim" attributeName="x" + begin="0s" dur="2s" by="100" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-remove-6.svg b/layout/reftests/svg/smil/anim-remove-6.svg new file mode 100644 index 0000000000..841884619f --- /dev/null +++ b/layout/reftests/svg/smil/anim-remove-6.svg @@ -0,0 +1,25 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + onload="go()"> + <!-- In this test, we change an animation element's "attributeType" attribute + to refer to another namespace, which invalidates a completed, frozen animation + (since there is no animatable 'x' attribute in the xlink namespace on a rect) + We verify that animation effects are removed from the previously-targeted + attribute. --> + <script> + function go() { + // Seek animation before we start tweaking things, to make sure we've + // already started sampling it. + document.documentElement.setCurrentTime(2.0); + + var anim = document.getElementById("anim"); + anim.setAttributeNS(null, "attributeName", "xlink:x"); + setTimeAndSnapshot(2.5, false); + } + </script> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="15" y="15" width="200" height="200" fill="blue"> + <animate id="anim" attributeName="x" + begin="0s" dur="2s" by="100" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-remove-7.svg b/layout/reftests/svg/smil/anim-remove-7.svg new file mode 100644 index 0000000000..6aa58cd16c --- /dev/null +++ b/layout/reftests/svg/smil/anim-remove-7.svg @@ -0,0 +1,23 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + onload="go()"> + <!-- In this test, we change an animation element's "by" attribute to an + invalid value. We verify that animation effects are removed from the + previously-targeted attribute. --> + <script> + function go() { + // Seek animation before we start tweaking things, to make sure we've + // already started sampling it. + document.documentElement.setCurrentTime(2.0); + + var anim = document.getElementById("anim"); + anim.setAttributeNS(null, "by", "invalid value that can't be added"); + setTimeAndSnapshot(2.5, false); + } + </script> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="15" y="15" width="200" height="200" fill="blue"> + <animate id="anim" attributeName="x" + begin="0s" dur="2s" by="100" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-remove-8css.svg b/layout/reftests/svg/smil/anim-remove-8css.svg new file mode 100644 index 0000000000..6e4b0517a3 --- /dev/null +++ b/layout/reftests/svg/smil/anim-remove-8css.svg @@ -0,0 +1,35 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + onload="go()" + class="reftest-wait"> + <!-- In this test, we temporarily remove the animation target, detach + its <animate> node, and then reinsert the (now former) animation target. + We verify that animation effects are removed from the former target. --> + <script> + var parent; + var rect; + function go() { + // Seek animation before we start tweaking things, to make sure we've + // already started sampling it. + document.documentElement.setCurrentTime(0.5); + + var anim = document.getElementById("anim"); + rect = anim.parentNode; + parent = rect.parentNode; + parent.removeChild(rect); + rect.removeChild(anim); + + setTimeout(reinsert, 50); // Allow time for a sample + } + function reinsert() { + parent.appendChild(rect); + document.documentElement.removeAttribute("class"); + } + </script> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="15" y="15" width="200" height="200" fill="blue" + stroke="red" stroke-width="0"> + <animate id="anim" attributeName="stroke-width" + begin="0s" dur="2s" from="25" to="50" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-remove-8xml.svg b/layout/reftests/svg/smil/anim-remove-8xml.svg new file mode 100644 index 0000000000..bef228d49e --- /dev/null +++ b/layout/reftests/svg/smil/anim-remove-8xml.svg @@ -0,0 +1,34 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + onload="go()" + class="reftest-wait"> + <!-- In this test, we temporarily remove the animation target, detach + its <animate> node, and then reinsert the (now former) animation target. + We verify that animation effects are removed from the former target. --> + <script> + var parent; + var rect; + function go() { + // Seek animation before we start tweaking things, to make sure we've + // already started sampling it. + document.documentElement.setCurrentTime(0.5); + + var anim = document.getElementById("anim"); + rect = anim.parentNode; + parent = rect.parentNode; + parent.removeChild(rect); + rect.removeChild(anim); + + setTimeout(reinsert, 50); // Allow time for a sample + } + function reinsert() { + parent.appendChild(rect); + document.documentElement.removeAttribute("class"); + } + </script> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="15" y="15" width="200" height="200" fill="blue"> + <animate id="anim" attributeName="height" + begin="0s" dur="2s" from="25" to="50" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-remove-9.svg b/layout/reftests/svg/smil/anim-remove-9.svg new file mode 100644 index 0000000000..0cbe3d0a90 --- /dev/null +++ b/layout/reftests/svg/smil/anim-remove-9.svg @@ -0,0 +1,27 @@ +<svg xmlns="http://www.w3.org/2000/svg" + class="reftest-wait" + onload="go()"> + <!-- Bug 728758 - Removing a stacked animation fails to update --> + <!-- In this test we check that removing an animation applied on top of + another animation causes the underlying animation's result to show. --> + <script> + function go() { + document.documentElement.pauseAnimations(); + // Force a sample after starting the bottom animation, but before starting + // the top animation. + document.documentElement.setCurrentTime(0.5); + // Sample again after the top animation has started + document.documentElement.setCurrentTime(1); + // Remove top animation + var anim = document.getElementById("anim"); + anim.parentNode.removeChild(anim); + // Sample again + document.documentElement.setCurrentTime(1); + document.documentElement.removeAttribute("class"); + } + </script> + <rect x="15" y="15" width="200" height="200" fill="orange"> + <set attributeName="fill" to="blue"/> + <set attributeName="fill" to="red" begin="1s" id="anim"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-retarget-1.svg b/layout/reftests/svg/smil/anim-retarget-1.svg new file mode 100644 index 0000000000..8b44bd7cb6 --- /dev/null +++ b/layout/reftests/svg/smil/anim-retarget-1.svg @@ -0,0 +1,25 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + onload="go()"> + <!-- In this test, we move an in-progress animation from one parent to + another. We verify that animation effects are removed from the old + parent and are applied to the new parent. --> + <script> + function go() { + // Seek animation before we start tweaking things, to make sure we've + // already started sampling it. + document.documentElement.setCurrentTime(0.5); + + var anim = document.getElementById("anim"); + var redRect = document.getElementById("redRect"); + redRect.appendChild(anim); + setTimeAndSnapshot(1, false); + } + </script> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect id="redRect" x ="15" y="15" width="200" height="250" fill="red"/> + <rect id="blueRect" x="15" y="15" width="200" height="200" fill="blue"> + <animate id="anim" attributeName="height" + begin="0s" dur="2s" by="-100" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-retarget-2.svg b/layout/reftests/svg/smil/anim-retarget-2.svg new file mode 100644 index 0000000000..7972e47ee7 --- /dev/null +++ b/layout/reftests/svg/smil/anim-retarget-2.svg @@ -0,0 +1,25 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + onload="go()"> + <!-- In this test, we move a completed & frozen animation from one parent to + another. We verify that animation effects are removed from the old + parent and are applied to the new parent. --> + <script> + function go() { + // Seek animation before we start tweaking things, to make sure we've + // already started sampling it. + document.documentElement.setCurrentTime(2.0); + + var anim = document.getElementById("anim"); + var redRect = document.getElementById("redRect"); + redRect.appendChild(anim); + setTimeAndSnapshot(2.5, false); + } + </script> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect id="redRect" x ="15" y="15" width="200" height="300" fill="red"/> + <rect id="blueRect" x="15" y="15" width="200" height="200" fill="blue"> + <animate id="anim" attributeName="height" + begin="0s" dur="2s" by="-100" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-retarget-3.svg b/layout/reftests/svg/smil/anim-retarget-3.svg new file mode 100644 index 0000000000..e42365211a --- /dev/null +++ b/layout/reftests/svg/smil/anim-retarget-3.svg @@ -0,0 +1,23 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + onload="go()"> + <!-- In this test, we retarget an in-progress animation from one target to + another. We verify that animation effects are removed from the old + target and are applied to the new target. --> + <script> + function go() { + // Seek animation before we start tweaking things, to make sure we've + // already started sampling it. + document.documentElement.setCurrentTime(0.5); + + var anim = document.getElementById("anim"); + anim.setAttributeNS("http://www.w3.org/1999/xlink", "href", "#redRect"); + setTimeAndSnapshot(1, false); + } + </script> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect id="redRect" x="15" y="15" width="200" height="250" fill="red"/> + <rect id="blueRect" x="15" y="15" width="200" height="200" fill="blue"/> + <animate id="anim" xlink:href="#blueRect" attributeName="height" + begin="0s" dur="2s" by="-100" fill="freeze"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-retarget-4.svg b/layout/reftests/svg/smil/anim-retarget-4.svg new file mode 100644 index 0000000000..c48c3e11af --- /dev/null +++ b/layout/reftests/svg/smil/anim-retarget-4.svg @@ -0,0 +1,25 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + onload="go()"> + <!-- In this test, we remove the "xlink:href" attribute on an in-progress + animation, changing it to target its parent. We verify that animation + effects are removed from the old target and are applied to the new + target. --> + <script> + function go() { + // Seek animation before we start tweaking things, to make sure we've + // already started sampling it. + document.documentElement.setCurrentTime(0.5); + + var anim = document.getElementById("anim"); + anim.removeAttributeNS("http://www.w3.org/1999/xlink", "href"); + setTimeAndSnapshot(1, false); + } + </script> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect id="redRect" x="15" y="15" width="200" height="250" fill="red"> + <animate id="anim" xlink:href="#blueRect" attributeName="height" + begin="0s" dur="2s" by="-100" fill="freeze"/> + </rect> + <rect id="blueRect" x="15" y="15" width="200" height="200" fill="blue"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-retarget-5.svg b/layout/reftests/svg/smil/anim-retarget-5.svg new file mode 100644 index 0000000000..b1e50efd27 --- /dev/null +++ b/layout/reftests/svg/smil/anim-retarget-5.svg @@ -0,0 +1,25 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + onload="go()"> + <!-- In this test, we add an "xlink:href" attribute to an in-progress + animation, changing it to no longer target its parent. We verify that + animation effects are removed from the old target and are applied to the + new target. --> + <script> + function go() { + // Seek animation before we start tweaking things, to make sure we've + // already started sampling it. + document.documentElement.setCurrentTime(0.5); + + var anim = document.getElementById("anim"); + anim.setAttributeNS("http://www.w3.org/1999/xlink", "href", "#redRect"); + setTimeAndSnapshot(1, false); + } + </script> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect id="redRect" x="15" y="15" width="200" height="250" fill="red"/> + <rect id="blueRect" x="15" y="15" width="200" height="200" fill="blue"> + <animate id="anim" attributeName="height" + begin="0s" dur="2s" by="-100" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-retarget-6.svg b/layout/reftests/svg/smil/anim-retarget-6.svg new file mode 100644 index 0000000000..2f2f8b05d9 --- /dev/null +++ b/layout/reftests/svg/smil/anim-retarget-6.svg @@ -0,0 +1,23 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + onload="go()"> + <!-- In this test, we tweak an element's "id" attribute, which retargets an + in-progress animation to that element. We verify that animation effects + are removed from the old target and are applied to the new target. --> + <script> + function go() { + // Seek animation before we start tweaking things, to make sure we've + // already started sampling it. + document.documentElement.setCurrentTime(0.5); + + var newTarget = document.getElementById("newTarget"); + newTarget.setAttributeNS(null, "id", "target"); + setTimeAndSnapshot(1, false); + } + </script> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect id="newTarget" x="15" y="15" width="200" height="250" fill="red"/> + <rect id="target" x="15" y="15" width="200" height="200" fill="blue"/> + <animate id="anim" xlink:href="#target" attributeName="height" + begin="0s" dur="2s" by="-100" fill="freeze"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-retarget-7.svg b/layout/reftests/svg/smil/anim-retarget-7.svg new file mode 100644 index 0000000000..d54c4e9468 --- /dev/null +++ b/layout/reftests/svg/smil/anim-retarget-7.svg @@ -0,0 +1,24 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + onload="go()"> + <!-- In this test, we remove an element's "id" attribute, which retargets a + completed, frozen animation from that element to another. We verify + that animation effects are removed from the old target and are applied + to the new target. --> + <script> + function go() { + // Seek animation before we start tweaking things, to make sure we've + // already started sampling it. + document.documentElement.setCurrentTime(2.0); + + var newTarget = document.getElementById("target"); + newTarget.removeAttributeNS(null, "id"); + setTimeAndSnapshot(2.5, false); + } + </script> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect id="target" x="15" y="15" width="200" height="200" fill="red"/> + <rect id="target" x="15" y="15" width="200" height="100" fill="blue"/> + <animate id="anim" xlink:href="#target" attributeName="height" + begin="0s" dur="2s" by="100" fill="freeze"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-retarget-8.svg b/layout/reftests/svg/smil/anim-retarget-8.svg new file mode 100644 index 0000000000..6b4a3fc220 --- /dev/null +++ b/layout/reftests/svg/smil/anim-retarget-8.svg @@ -0,0 +1,24 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + onload="go()"> + <!-- In this test, we change an animation element's "attributeName" + attribute, which retargets a completed, frozen animation from one + attribute to another. We verify that animation effects are removed from + the old attribute and are applied to the new one. --> + <script> + function go() { + // Seek animation before we start tweaking things, to make sure we've + // already started sampling it. + document.documentElement.setCurrentTime(2.0); + + var anim = document.getElementById("anim"); + anim.setAttributeNS(null, "attributeName", "height"); + setTimeAndSnapshot(2.5, false); + } + </script> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="15" y="15" width="200" height="100" fill="blue"> + <animate id="anim" attributeName="x" + begin="0s" dur="2s" by="100" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-standard-ref.html b/layout/reftests/svg/smil/anim-standard-ref.html new file mode 100644 index 0000000000..cc2ca1a67f --- /dev/null +++ b/layout/reftests/svg/smil/anim-standard-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<html> + <head> + <title>Testcase reference file for animated pass condition(HTML)</title> + </head> + <body style="background-color: lime;"> +<svg xmlns="http://www.w3.org/2000/svg"> + <rect width="100" height="100" fill="blue"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-standard-ref.svg b/layout/reftests/svg/smil/anim-standard-ref.svg new file mode 100644 index 0000000000..39f37ae6d1 --- /dev/null +++ b/layout/reftests/svg/smil/anim-standard-ref.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <rect x="15" y="15" width="200" height="200" fill="blue"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-strokecolor-1.svg b/layout/reftests/svg/smil/anim-strokecolor-1.svg new file mode 100644 index 0000000000..8da75727d5 --- /dev/null +++ b/layout/reftests/svg/smil/anim-strokecolor-1.svg @@ -0,0 +1,12 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2.5, false)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="20" y="20" width="190" height="190" + fill="rgb(0,0,255)" stroke="rgb(255,0,0)" stroke-width="10"> + <animateColor attributeName="stroke" + from="rgb(255,0,0)" to="rgb(0,0,255)" + begin="0s" dur="2s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-strokewidth-1xml.svg b/layout/reftests/svg/smil/anim-strokewidth-1xml.svg new file mode 100644 index 0000000000..828ecdb84e --- /dev/null +++ b/layout/reftests/svg/smil/anim-strokewidth-1xml.svg @@ -0,0 +1,11 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2.5, false)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="15" y="15" width="200" height="200" + fill="blue" stroke="red" stroke-width="10"> + <animate attributeName="stroke-width" attributeType="XML" + from="10" to="0" begin="0s" dur="2s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-svg-preserveAspectRatio-01.svg b/layout/reftests/svg/smil/anim-svg-preserveAspectRatio-01.svg new file mode 100644 index 0000000000..c6b43efdbe --- /dev/null +++ b/layout/reftests/svg/smil/anim-svg-preserveAspectRatio-01.svg @@ -0,0 +1,40 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1, true)"> + <title>Test animation of the "preserveAspectRatio" attribute on the "svg" element</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect width="100%" height="100%" fill="lime"/> + + <!-- 40% through animation simple duration - + tests that the animation doesn't affect the element too early --> + <svg width="100" height="50" viewBox="0 0 100 100" + preserveAspectRatio="xMidYMid meet"> + <!-- this should change the referencing element at 1.25s, + causing the red rect to stretch to fill its whole viewport --> + <animate attributeName="preserveAspectRatio" + calcMode="discrete" + begin="0s" dur="2.5s" + from="xMidYMid meet" + to="xMidYMid slice" + fill="freeze"/> + <rect width="100%" height="100%" fill="red"/> + </svg> + <rect x="25" width="50" height="50" fill="lime"/> + + <!-- 50% through animation simple duration - + tests that the animation affects the element now --> + <rect y="50" width="100" height="50" fill="red"/> + <svg y="50" width="100" height="50" viewBox="0 0 100 100" + preserveAspectRatio="xMidYMid meet"> + <!-- this should change the referencing element at 1s, + causing the lime rect to stretch to fill its whole viewport --> + <animate attributeName="preserveAspectRatio" + calcMode="discrete" + begin="0s" dur="2s" + from="xMidYMid meet" + to="xMidYMid slice" + fill="freeze"/> + <rect width="100%" height="100%" fill="lime"/> + </svg> +</svg> diff --git a/layout/reftests/svg/smil/anim-svg-viewBox-01.svg b/layout/reftests/svg/smil/anim-svg-viewBox-01.svg new file mode 100644 index 0000000000..cd4d863a78 --- /dev/null +++ b/layout/reftests/svg/smil/anim-svg-viewBox-01.svg @@ -0,0 +1,32 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1, true)"> + <title>Test linear animation of the "viewBox" attribute on the "svg" element</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect width="100%" height="100%" fill="lime"/> + + <!-- 50% through animation simple duration - + the red rect should only be half the width of the viewport --> + <svg width="100" height="50" viewBox="0 0 0 50"> + <animate attributeName="viewBox" + calcMode="linear" + begin="0s" dur="2s" + to="0 0 100 50" + fill="freeze"/> + <rect width="100%" height="100%" fill="red"/> + </svg> + <rect x="25" width="50" height="50" fill="lime"/> + + <!-- 100% through animation simple duration - + the lime rect should stretch the entire width of the viewport --> + <rect y="50" width="100" height="50" fill="red"/> + <svg y="50" width="100" height="50" viewBox="0 0 0 50"> + <animate attributeName="viewBox" + calcMode="linear" + begin="0s" dur="1s" + to="0 0 100 50" + fill="freeze"/> + <rect width="100%" height="100%" fill="lime"/> + </svg> +</svg> diff --git a/layout/reftests/svg/smil/anim-svg-viewBox-02.svg b/layout/reftests/svg/smil/anim-svg-viewBox-02.svg new file mode 100644 index 0000000000..196d3bfe34 --- /dev/null +++ b/layout/reftests/svg/smil/anim-svg-viewBox-02.svg @@ -0,0 +1,22 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1, true)"> + <title>Test paced animation of the "viewBox" attribute on the "svg" element</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect width="100%" height="100%" fill="lime"/> + + <!-- Check that the simple duration is split one third to the first + animation and two thirds to the second. This is because in the first + animation the left side travels 50, and in the second animation the + right side travels 100. --> + <svg width="50" height="50" viewBox="0 0 100 50"> + <animate attributeName="viewBox" + calcMode="paced" + begin="0s" dur="3s" + values="0 0 100 50; 50 0 50 50; 50 0 150 50" + fill="freeze"/> + <rect x="-100" y="-100" width="1000" height="1000" fill="red"/> + <rect x="50" y="0" width="50" height="50" fill="lime"/> + </svg> +</svg> diff --git a/layout/reftests/svg/smil/anim-svg-viewBox-03.svg b/layout/reftests/svg/smil/anim-svg-viewBox-03.svg new file mode 100644 index 0000000000..5415840333 --- /dev/null +++ b/layout/reftests/svg/smil/anim-svg-viewBox-03.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(12, true)"> + <title>Test discrete animation of the "viewBox" attribute on the "svg" element</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect width="100%" height="100%" fill="lime"/> + + <svg width="200" height="200" viewBox="200 0 150 50"> + <animate attributeName="viewBox" + calcMode="discrete" + begin="10s" dur="4s" + values="200 0 150 50; none; 200 0 150 50" + fill="freeze"/> + <rect x="-100" y="-100" width="1000" height="1000" fill="red"/> + <rect width="200" height="200" fill="lime"/> + </svg> +</svg> diff --git a/layout/reftests/svg/smil/anim-targethref-1.svg b/layout/reftests/svg/smil/anim-targethref-1.svg new file mode 100644 index 0000000000..23f8ade19b --- /dev/null +++ b/layout/reftests/svg/smil/anim-targethref-1.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2.5, false)"> + <!-- This test checks a basic animation with "xlink:href" targeting --> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect id="blueRect" x="15" y="15" width="200" height="100" fill="blue"/> + <animate xlink:href="#blueRect" attributeName="height" + to="200" begin="0s" dur="2s" fill="freeze"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-targethref-10.svg b/layout/reftests/svg/smil/anim-targethref-10.svg new file mode 100644 index 0000000000..f015d8c052 --- /dev/null +++ b/layout/reftests/svg/smil/anim-targethref-10.svg @@ -0,0 +1,9 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <animate href="#x" attributeName="href" values="https://www.google.com"/> + <a id="x" fill="red"><rect x="15" y="15" width="200" height="200"/></a> + <style> + a:any-link { + fill: blue; + } + </style> +</svg> diff --git a/layout/reftests/svg/smil/anim-targethref-2.svg b/layout/reftests/svg/smil/anim-targethref-2.svg new file mode 100644 index 0000000000..fd3864df4f --- /dev/null +++ b/layout/reftests/svg/smil/anim-targethref-2.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <!-- This test checks our behavior when "xlink:href" is modified --> + <script xlink:href="smil-util.js" type="text/javascript"/> + <script type="text/javascript"> + function go() { + var anim = document.getElementById("anim"); + anim.setAttributeNS("http://www.w3.org/1999/xlink", "href", "#blueRect"); + setTimeAndSnapshot(2.5, false) + } + </script> + <rect id="redRect" x="15" y="15" width="200" height="100" fill="red"/> + <rect id="blueRect" x="15" y="15" width="200" height="100" fill="blue"/> + <animate id="anim" xlink:href="#redRect" attributeName="height" + to="200" begin="0s" dur="2s" fill="freeze"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-targethref-3.svg b/layout/reftests/svg/smil/anim-targethref-3.svg new file mode 100644 index 0000000000..e15886fbad --- /dev/null +++ b/layout/reftests/svg/smil/anim-targethref-3.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="setTimeAndSnapshot(2.5, false)"> + <!-- This test checks our behavior with animations that target nodes + other than their parents. --> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect id="blueRect" x="15" y="15" width="200" height="100" fill="blue"/> + <animate id="anim" xlink:href="#redRect" attributeName="height" + to="0" begin="0s" dur="2s" fill="freeze"/> + <rect id="redRect" x="15" y="215" width="200" height="100" fill="red"> + <animate id="anim" xlink:href="#blueRect" attributeName="height" + to="200" begin="0s" dur="2s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-targethref-4.svg b/layout/reftests/svg/smil/anim-targethref-4.svg new file mode 100644 index 0000000000..34cd3f346d --- /dev/null +++ b/layout/reftests/svg/smil/anim-targethref-4.svg @@ -0,0 +1,20 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <!-- This test checks our behavior with animations that are initially + href-targeted, but lose their href attribute. --> + <script xlink:href="smil-util.js" type="text/javascript"/> + <script type="text/javascript"> + function go() { + var anim = document.getElementById("anim"); + anim.removeAttributeNS("http://www.w3.org/1999/xlink", "href"); + setTimeAndSnapshot(2.5, false) + } + </script> + <rect id="blueRect" x="15" y="15" width="200" height="100" fill="blue"> + <animate id="anim" xlink:href="#redRect" attributeName="height" + to="200" begin="0s" dur="2s" fill="freeze"/> + </rect> + <rect id="redRect" x="15" y="215" width="200" height="0" fill="red"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-targethref-5.svg b/layout/reftests/svg/smil/anim-targethref-5.svg new file mode 100644 index 0000000000..1e7e2f907a --- /dev/null +++ b/layout/reftests/svg/smil/anim-targethref-5.svg @@ -0,0 +1,21 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <!-- This test checks our behavior with animations that initially + have no 'xlink:href' attribute, but receive one via scripting. --> + <script xlink:href="smil-util.js" type="text/javascript"/> + <script type="text/javascript"> + function go() { + var anim = document.getElementById("anim"); + anim.setAttributeNS("http://www.w3.org/1999/xlink", "href", "#blueRect"); + setTimeAndSnapshot(2.5, false) + } + </script> + <rect id="blueRect" x="15" y="15" width="200" height="100" fill="blue"> + </rect> + <rect id="redRect" x="15" y="215" width="200" height="0" fill="red"> + <animate id="anim" attributeName="height" + to="200" begin="0s" dur="2s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-targethref-6.svg b/layout/reftests/svg/smil/anim-targethref-6.svg new file mode 100644 index 0000000000..0d8998a2b9 --- /dev/null +++ b/layout/reftests/svg/smil/anim-targethref-6.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <!-- This test checks our behavior with an 'xlink:href'-targeted animation + when the target's ID is changed (which makes it no longer the target) --> + <script xlink:href="smil-util.js" type="text/javascript"/> + <script type="text/javascript"> + function go() { + var rect = document.getElementById("blueRect"); + rect.setAttributeNS(null, "id", "differentBlueRect"); + setTimeAndSnapshot(2.5, false) + } + </script> + <rect id="blueRect" x="15" y="15" width="200" height="200" fill="blue"/> + <animate id="anim" xlink:href="#blueRect" attributeName="height" + to="0" begin="0s" dur="2s" fill="freeze"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-targethref-7.svg b/layout/reftests/svg/smil/anim-targethref-7.svg new file mode 100644 index 0000000000..f131a45d0c --- /dev/null +++ b/layout/reftests/svg/smil/anim-targethref-7.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <!-- This test checks our behavior with an 'xlink:href'-targeted animation + when the target's ID is removed (which makes it no longer the target) --> + <script xlink:href="smil-util.js" type="text/javascript"/> + <script type="text/javascript"> + function go() { + var rect = document.getElementById("blueRect"); + rect.removeAttributeNS(null, "id"); + setTimeAndSnapshot(2.5, false) + } + </script> + <rect id="blueRect" x="15" y="15" width="200" height="200" fill="blue"/> + <animate id="anim" xlink:href="#blueRect" attributeName="height" + to="0" begin="0s" dur="2s" fill="freeze"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-targethref-8.svg b/layout/reftests/svg/smil/anim-targethref-8.svg new file mode 100644 index 0000000000..c95e34e237 --- /dev/null +++ b/layout/reftests/svg/smil/anim-targethref-8.svg @@ -0,0 +1,20 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <!-- This test checks our behavior with an 'xlink:href'-targeted animation + when an earlier node suddenly obtains the target ID string (thereby + becoming the new animation target). --> + <script xlink:href="smil-util.js" type="text/javascript"/> + <script type="text/javascript"> + function go() { + var rect = document.getElementById("myLaterRect"); + rect.setAttributeNS(null, "id", "myRect"); + setTimeAndSnapshot(2.5, false) + } + </script> + <rect id="myLaterRect" x="15" y="15" width="200" height="0" fill="blue"/> + <rect id="myRect" x="15" y="215" width="200" height="0" fill="red"/> + <animate id="anim" xlink:href="#myRect" attributeName="height" + to="200" begin="0s" dur="2s" fill="freeze"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-targethref-9.svg b/layout/reftests/svg/smil/anim-targethref-9.svg new file mode 100644 index 0000000000..b13e97c71c --- /dev/null +++ b/layout/reftests/svg/smil/anim-targethref-9.svg @@ -0,0 +1,19 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <!-- This test checks our behavior with an 'xlink:href'-targeted animation + where there's initially no matching target, but then an element's ID is + set to match (making it the target) --> + <script xlink:href="smil-util.js" type="text/javascript"/> + <script type="text/javascript"> + function go() { + var rect = document.getElementById("rect"); + rect.setAttributeNS(null, "id", "blueRect"); + setTimeAndSnapshot(2.5, false) + } + </script> + <rect id="rect" x="15" y="15" width="200" height="100" fill="blue"/> + <animate id="anim" xlink:href="#blueRect" attributeName="height" + to="200" begin="0s" dur="2s" fill="freeze"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-text-attr-01-ref.svg b/layout/reftests/svg/smil/anim-text-attr-01-ref.svg new file mode 100644 index 0000000000..6cd3dff448 --- /dev/null +++ b/layout/reftests/svg/smil/anim-text-attr-01-ref.svg @@ -0,0 +1,31 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="font: 16px sans-serif"> + + <title>Reference for animating attributes on child text content elements</title> + + <text x="200" y="20">Test 1</text> + <text x="20" y="60">Test 2</text> + <text x="20" y="80" rotate="10">Test 3</text> + <text> + <tspan x="200" y="100">Test 4</tspan> + </text> + <text> + <tspan x="20" y="140">Test 5</tspan> + </text> + <text> + <tspan x="20" y="160" rotate="30">Test 6</tspan> + </text> + <path id="p" d="M 20,180 h 400"/> + <text> + <textPath xlink:href="#p" startOffset="180">Test 7</textPath> + </text> + <text x="20" y="200" textLength="100" lengthAdjust="spacingAndGlyphs">Test 8</text> + <text> + <tspan x="20" y="220" textLength="100" lengthAdjust="spacingAndGlyphs">Test 9</tspan> + </text> +</svg> diff --git a/layout/reftests/svg/smil/anim-text-attr-01.svg b/layout/reftests/svg/smil/anim-text-attr-01.svg new file mode 100644 index 0000000000..c61c612fb4 --- /dev/null +++ b/layout/reftests/svg/smil/anim-text-attr-01.svg @@ -0,0 +1,61 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + style="font: 16px sans-serif"> + + <title>Testcase for animating attributes on child text content elements</title> + + <text x="20" y="20">Test 1 + <set attributeName="x" to="200" begin="indefinite"/> + </text> + <text x="20" y="40">Test 2 + <set attributeName="y" to="60" begin="indefinite"/> + </text> + <text x="20" y="80">Test 3 + <set attributeName="rotate" to="10" begin="indefinite"/> + </text> + <text> + <tspan x="20" y="100">Test 4 + <set attributeName="x" to="200" begin="indefinite"/> + </tspan> + </text> + <text> + <tspan x="20" y="120">Test 5 + <set attributeName="y" to="140" begin="indefinite"/> + </tspan> + </text> + <text> + <tspan x="20" y="160">Test 6 + <set attributeName="rotate" to="30" begin="indefinite"/> + </tspan> + </text> + <path id="p" d="M 20,180 h 400"/> + <text> + <textPath xlink:href="#p">Test 7 + <set attributeName="startOffset" to="180" begin="indefinite"/> + </textPath> + </text> + <text x="20" y="200" textLength="100" lengthAdjust="spacing">Test 8 + <set attributeName="lengthAdjust" to="spacingAndGlyphs" begin="indefinite"/> + </text> + <!-- We don't support textLength/lengthAdjust on child text content + elements currently (bug 890692), so Test 9 doesn't really test + anything at the moment. But it is the only animatable enumerated + attribute value on text content elements to test. --> + <text> + <tspan x="20" y="220" textLength="100" lengthAdjust="spacing">Test 9 + <set attributeName="lengthAdjust" to="spacingAndGlyphs" begin="indefinite"/> + </tspan> + </text> + + <script> + window.addEventListener("MozReftestInvalidate", function() { + [...document.querySelectorAll("set")].forEach((e) => e.beginElement()); + document.documentElement.removeAttribute("class"); + }, false); + </script> +</svg> diff --git a/layout/reftests/svg/smil/anim-text-rotate-01-ref.svg b/layout/reftests/svg/smil/anim-text-rotate-01-ref.svg new file mode 100644 index 0000000000..8e9f604695 --- /dev/null +++ b/layout/reftests/svg/smil/anim-text-rotate-01-ref.svg @@ -0,0 +1,9 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <title></title> + + <text transform="translate(20, 20)" rotate="110 120 130">ABC</text> + <text transform="translate(120, 20)" rotate="110 120 130">DEF</text> + <text transform="translate(220, 20)" rotate="110 120 130">GHI</text> + <text transform="translate(320, 20)" rotate="310 320 330">JKL</text> + +</svg> diff --git a/layout/reftests/svg/smil/anim-text-rotate-01.svg b/layout/reftests/svg/smil/anim-text-rotate-01.svg new file mode 100644 index 0000000000..828ed87799 --- /dev/null +++ b/layout/reftests/svg/smil/anim-text-rotate-01.svg @@ -0,0 +1,73 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(5, true)"> + <title>Test animation of the <number-list> attribute on the 'text' element</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + + <!-- The difference between respective numbers in the effective 'from' and + 'to' lists below is carefully designed to be a factor of 3. That way + our reference file (which checks against a one third complete animation) + can contain whole numbers, which is necessary to avoid failure due to + hard coded rounded numbers in the reference not matching platform + specific rounding behaviour. + --> + + <!-- Test calcMode="linear". --> + + <text transform="translate(20, 20)" + rotate="10 20 30">ABC + + <!-- At 5s the animVal should be "110 120 130". --> + <animate attributeName="rotate" + calcMode="linear" + begin="0s" dur="15s" + to="310 320 330" + fill="freeze"/> + + </text> + + + <!-- Test 'by' animation. --> + + <text transform="translate(120, 20)" + rotate="10 20 30">DEF + + <!-- At 5s the animVal should be "110 120 130". --> + <animate attributeName="rotate" + calcMode="linear" + begin="0s" dur="15s" + by="300 300 300" + fill="freeze"/> + + </text> + + + <!-- Test calcMode="paced". --> + + <text transform="translate(220, 20)">GHI + + <!-- At 5s the animVal should be "110 120 130". --> + <animate attributeName="rotate" + calcMode="paced" + begin="0s" dur="15s" + values="10 20 30; 210 220 230; 310 320 330" + fill="freeze"/> + + </text> + + + <!-- Test calcMode="discrete". --> + + <text transform="translate(320, 20)" rotate="10 20 30">JKL + + <!-- The value should be "310 320 330" at 3s. --> + <animate attributeName="rotate" + calcMode="discrete" + begin="0s" dur="6s" + to="310 320 330" + fill="freeze"/> + + </text> + +</svg> diff --git a/layout/reftests/svg/smil/anim-text-x-y-dx-dy-01-ref.svg b/layout/reftests/svg/smil/anim-text-x-y-dx-dy-01-ref.svg new file mode 100644 index 0000000000..795c39ba7f --- /dev/null +++ b/layout/reftests/svg/smil/anim-text-x-y-dx-dy-01-ref.svg @@ -0,0 +1,32 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + + <text transform="translate(20, 20)" + x="20 10mm 3pc 72pt 2em 3% 1ex" + dy="20 10mm 3pc 36pt 2em 3% 1ex 1">ABCDEFGH + </text> + + <text transform="translate(120, 20)" + x="20 10mm 3pc 72pt 2em 3% 1ex" + dy="20 10mm 3pc 36pt 2em 3% 1ex">IJKLMNOP + </text> + + <text transform="translate(220, 20)" + x="20 10mm 3pc 72pt 2em 3% 1ex" + dy="20 10mm 3pc 36pt 2em 3% 1ex 1">QRSTUVWX + </text> + + <text transform="translate(320, 20)" + x="20 10mm 3pc 72pt 2em 3% 1ex" + dy="20 10mm 3pc 36pt 2em 3% 1ex">YZ123456 + </text> + + <text transform="translate(420, 20)" + x="20 10mm 3pc 72pt 2em 3% 1ex" + dy="20 10mm 3pc 36pt 2em 3% 1ex">7890abcd + </text> + + <text transform="translate(520, 20)" + x="20 10mm 3pc 72pt 2em 3% 1ex" + dy="20 10mm 3pc 36pt 2em 3% 1ex">efghijkl + </text> +</svg> diff --git a/layout/reftests/svg/smil/anim-text-x-y-dx-dy-01.svg b/layout/reftests/svg/smil/anim-text-x-y-dx-dy-01.svg new file mode 100644 index 0000000000..5e9208271c --- /dev/null +++ b/layout/reftests/svg/smil/anim-text-x-y-dx-dy-01.svg @@ -0,0 +1,222 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(5, true)"> + <title>Test animation of the <length-list> attributes on the 'text' element</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + + <style type="text/css"> + :root { font-size: 16px; } /* see comment below - sets 1em == 16px */ + </style> + + <!-- If we start getting random orange on this test, see: + https://bugzilla.mozilla.org/show_bug.cgi?id=515116#c34 + --> + + <!-- One of the things that this file tests is animation between lengths + of _different unit_. One difficulty this creates is knowing the + values to use in the reference file. For example, what length should + be used in the reference to comparing against an animation that's mid + way between 50px and 10in? The SMIL engine will convert the start + length to the unit of the end length and then interpolate, but the + number of inches in 50px is not always the same, so we can't fix how + many inches is midway between 50px and 10in in the reference file. To + get around this problem this test mainly pairs different units with a + known, fixed, relationship. For example, animating between cm and mm, + or between 'in' and pt (72 pt/in) or between 'in' and pc (6 pc/in). + Note that we can animate between px and em by fixing the relationship + between these units by setting the CSS 'font-size' property to a fixed + number of px units as we've done above. + + The problem with only testing pairs with a fixed relationship is that + implementations may only implement interpolation between those pairs + because it's easy. To test interpolation between pairs of units + without a fixed relationship we use another strategy: we animate from + zero of the start unit. Since zero is zero regardless of the unit, we + then know what to use in the reference. In theory implementations might + specialize for zero, but that's unlikely (hopefully!). + + (An alternative would be to only test end points of the animation, but + implementations may use discrete animation rather than interpolation + when lengths of different units are encountered, so that would be a bad + approach.) + + (Another better alternative would be to use + SVGLength.convertToSpecifiedUnits() in the reference file to figure out + the conversion of the start unit and set values in the reference file + dynamically.) + --> + + <!-- Another thing that this file test is animation between lists + of _different length_. One implementation strategy when faced with such + an animation is to pad the shorter list with zeros for the purposes of + animation. This works exactly as you would hope in the case of the + <text> element's 'dx' and 'dy' attributes, since for those attributes + lengths are offsets from the coordinate at which respective glyph's + would otherwise be positioned. In other words, appending a list of + zeros to any 'dx' or 'dy' attribute will never have an affect on + rendering. However, in the case of 'x' and 'y' attributes on <text>, + any lengths given are distances from zero along the relevant axis of + the current coordinate system, and zero is not likely to be the + position that all glyphs would otherwise be given. Their position will + actually depend on CSS parameters, the implementation's text layout + algorithm, and the layout of the characters that came before it. Hence + zero padding any 'x' or 'y' attribute will likely drastically alter + the rendering of the text, and in the case of animation would cause + glyphs to animate from/to zero in their coordinate system instead of + from/to their natural position. Clearly this is neither what authors + would expect, or want, so Mozilla currently disallows animation of 'x' + and 'y' if lists of different length are encountered to prevent content + being created that relies on such undesirable behavior. + + Ideally the implementation would provide the SMIL engine with the + natural position of each glyph so that it can animate from/to those + positions. That's tricky, but we do have a bug open to try and + implement that. See: + + https://bugzilla.mozilla.org/show_bug.cgi?id=573431 + --> + + <!-- Test calcMode="linear". --> + + <text transform="translate(20, 20)" + x="10px 0.5cm 0.25in 0.5in 16px 0cm 0%">ABCDEFGH + + <!-- At 5s the animVal should be "20 10mm 3pc 72pt 2em 3% 1ex". --> + <animate attributeName="x" + calcMode="linear" + begin="0s" dur="15s" + to="40 20mm 6pc 144pt 4em 9% 3ex" + fill="freeze"/> + + <!-- At 5s the animVal should be "20 10mm 3pc 36pt 2em 3% 1ex 1". + Note that the 'to' list has one extra list item on purpose! --> + <animate attributeName="dy" + calcMode="linear" + begin="0s" dur="15s" + from="10px 0.5cm 0.25in 0.25in 16px 0cm 0%" + to="40 20mm 6pc 72pt 4em 9% 3ex 3" + fill="freeze"/> + </text> + + + <!-- Test 'by' animation. --> + + <text transform="translate(120, 20)" + x="10px 0.5cm 0.25in 0.5in 16px 0cm 0%">IJKLMNOP + + <!-- At 5s the animVal should be "20 10mm 3pc 72pt 2em 3% 1ex". --> + <animate attributeName="x" + calcMode="linear" + begin="0s" dur="15s" + by="30 15mm 4.5pc 108pt 3em 9% 3ex" + fill="freeze"/> + + <!-- At 5s the animVal should be "20 10mm 3pc 36pt 2em 3% 1ex". + Note that the 'from' list is essentially zero length! --> + <animate attributeName="dy" + calcMode="linear" + begin="0s" dur="15s" + by="60 30mm 9pc 108pt 6em 9% 3ex" + fill="freeze"/> + </text> + + + <!-- Test calcMode="paced". It doesn't make a lot of sense to use paced + animation with a length list, but since we support it, we test it. + --> + + <text transform="translate(220, 20)">QRSTUVWX + + <!-- At 5s the animVal should be "20 10mm 3pc 72pt 2em 3% 1ex". --> + <animate attributeName="x" + calcMode="paced" + begin="0s" dur="15s" + values="10px 0.5cm 0.25in 0.5in 16px 0cm 0%; + 30 15mm 4.5pc 108pt 3em 6% 2ex; + 40 20mm 6pc 144pt 4em 9% 3ex" + fill="freeze"/> + + <!-- At 5s the animVal should be "20 10mm 3pc 36pt 2em 3% 1ex 1". + Note that the 'to' lists have one extra list item on purpose! --> + <animate attributeName="dy" + calcMode="paced" + begin="0s" dur="15s" + values="10px 0.5cm 0.25in 0.25in 16px 0cm 0%; + 30 15mm 4.5pc 54pt 3em 6% 2ex 2; + 40 20mm 6pc 72pt 4em 9% 3ex 3" + fill="freeze"/> + </text> + + + <!-- Test calcMode="discrete". In this case SMIL treats the 'from' and 'to' + as two discrete values to jump between. Some authors may expect + discrete animation to jump from integer to integer in the unit of the + list item in question (or the unit of the 'to' item if the units of + corresponding 'from' and 'to' items differ), but that's not the case. + --> + + <text transform="translate(320, 20)">YZ123456 + + <!-- At 5s the animVal should be "20 10mm 3pc 72pt 2em 3% 1ex". --> + <animate attributeName="x" + calcMode="discrete" + begin="0s" dur="10s" + from="10px 0.5cm 0.25in 0.5in 16px 0cm 0%" + to="20 10mm 3pc 72pt 2em 3% 1ex" + fill="freeze"/> + + <!-- At 5s the animVal should be "20 10mm 3pc 36pt 2em 3% 1ex". + Note that the 'to' list has one extra list item on purpose! --> + <animate attributeName="dy" + calcMode="discrete" + begin="0s" dur="10.1s" + from="20 10mm 3pc 36pt 2em 3% 1ex" + to="40px 2cm 1in 1in 16px 0cm 0% 3" + fill="freeze"/> + </text> + + + <!-- Test 'by' animation with calcMode="discrete". --> + + <text transform="translate(420, 20)" + x="20 10mm 3pc 72pt 2em 3% 1ex">7890abcd + + <!-- At 5s the animVal should be "10px 0.5cm 0.25in 0.5in 16px 0cm 0%", + since the discrete animation is considered to be an additive + animation from an empty list to the list specified in by="". --> + <animate attributeName="x" + calcMode="discrete" + begin="0s" dur="15s" + by="30 15mm 4.5pc 108pt 3em 9% 3ex" + fill="freeze"/> + + <!-- At 5s the animVal should be the empty list, as both the underlying + value and the first value of the equivalent additive animation are + empty lists. --> + <animate attributeName="dy" + calcMode="discrete" + begin="0s" dur="15s" + by="20 10mm 3pc 36pt 2em 3% 1ex" + fill="freeze"/> + </text> + + <text transform="translate(520, 20)" + x="10px 0.5cm 0.25in 0.5in 16px 0cm 0%">efghijkl + + <!-- At 5s the animVal should be "20 10mm 3pc 72pt 2em 3% 1ex". --> + <animate attributeName="x" + calcMode="discrete" + begin="0s" dur="8s" + by="10 5mm 1.5pc 36pt 1em 3% 1ex" + fill="freeze"/> + + <!-- At 5s the animVal should be "20 10mm 3pc 36pt 2em 3% 1ex". --> + <animate attributeName="dy" + calcMode="discrete" + begin="0s" dur="8s" + by="20 10mm 3pc 36pt 2em 3% 1ex" + fill="freeze"/> + </text> + +</svg> diff --git a/layout/reftests/svg/smil/anim-use-href-01.svg b/layout/reftests/svg/smil/anim-use-href-01.svg new file mode 100644 index 0000000000..a3aa5a2586 --- /dev/null +++ b/layout/reftests/svg/smil/anim-use-href-01.svg @@ -0,0 +1,29 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1, true)"> + <title>Test animation of the "xlink:href" <string> attribute on the "use" element</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + + <defs> + <symbol id="sym1"> + <rect x="20" y="150" width="440" height="80" fill="red" /> + </symbol> + <symbol id="sym2"> + <rect x="20" y="150" width="440" height="80" fill="lime" /> + </symbol> + </defs> + <rect width="100%" height="100%" fill="lime"/> + <use xlink:href="#sym1"> + <animate attributeName="xlink:href" + calcMode="discrete" + begin="0s" dur="0.5s" + from="#sym1" to="#sym2" + fill="freeze"/> + </use> + +</svg> diff --git a/layout/reftests/svg/smil/anim-use-length-01.svg b/layout/reftests/svg/smil/anim-use-length-01.svg new file mode 100644 index 0000000000..d89e37c018 --- /dev/null +++ b/layout/reftests/svg/smil/anim-use-length-01.svg @@ -0,0 +1,38 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1, true)"> + <title>Test animation of the "width" & "height" <length> attributes on the "use" element</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + + <defs> + <symbol id="sym1"> + <rect width="100" height="50" fill="lime" /> + </symbol> + <symbol id="sym2"> + <rect y="100" width="100" height="50" fill="red" /> + </symbol> + </defs> + <rect width="100%" height="100%" fill="lime"/> + <rect width="100" height="50" fill="red" /> + <use xlink:href="#sym1" height="100%" width="0%"> + <animate attributeName="width" + calcMode="linear" + begin="0s" dur="2s" + from="0%" to="200%" + fill="freeze"/> + </use> + <use xlink:href="#sym2" height="100%" width="200%"> + <animate attributeName="width" + calcMode="linear" + begin="0s" dur="2s" + from="200%" to="0%" + fill="freeze"/> + </use> + <rect y="100" width="100" height="50" fill="lime" /> + +</svg> diff --git a/layout/reftests/svg/smil/anim-use-length-02.svg b/layout/reftests/svg/smil/anim-use-length-02.svg new file mode 100644 index 0000000000..a9d7390d88 --- /dev/null +++ b/layout/reftests/svg/smil/anim-use-length-02.svg @@ -0,0 +1,37 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait"> + <title>Test animation of the "width" & "height" <length> attributes on the "use" element</title> + <script type="text/javascript"> + function doTest() { + setTimeAndSnapshot(1, true); + } + window.addEventListener("MozReftestInvalidate", doTest, false); + </script> + <script xlink:href="smil-util.js" type="text/javascript"/> + + <defs> + <g id="g1"> + <rect width="100" height="50" fill="lime" /> + </g> + <g id="g2"> + <rect y="50" width="100" height="50" fill="lime" /> + </g> + </defs> + + <rect width="100%" height="100%" fill="lime"/> + <rect width="100" height="100" fill="red" /> + <use xlink:href="#g1"> + <set attributeName="width" + to="0" begin="0s" dur="0.5s"/> + </use> + <use xlink:href="#g2"> + <set attributeName="height" + to="0" begin="0s" dur="0.5s"/> + </use> + +</svg> diff --git a/layout/reftests/svg/smil/anim-view-01.svg b/layout/reftests/svg/smil/anim-view-01.svg new file mode 100644 index 0000000000..b6730263a7 --- /dev/null +++ b/layout/reftests/svg/smil/anim-view-01.svg @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + viewBox="0 0 100 100" preserveAspectRatio="none"> + + <title>Test animation of view on view overriding svg element</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + <script> + window.addEventListener("MozReftestInvalidate", run, false); + setTimeout(run, 4000); // fallback for running outside reftest + + function run() { + setTimeAndSnapshot(101, true); + } + </script> + + <view id="view"> + <animate attributeName="viewBox" + calcMode="linear" + begin="100s" dur="2s" + values="0 0 100 100;10 10 10 10;0 0 100 100" + fill="freeze"/> + </view> + + <rect width="100%" height="100%" fill="red"/> + + <rect x="10" y="10" width="10" height="10" fill="lime"/> + +</svg> diff --git a/layout/reftests/svg/smil/anim-width-done-1a.svg b/layout/reftests/svg/smil/anim-width-done-1a.svg new file mode 100644 index 0000000000..3f4e01bb67 --- /dev/null +++ b/layout/reftests/svg/smil/anim-width-done-1a.svg @@ -0,0 +1,11 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, false)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="15" y="15" width="50" height="200" fill="blue"> + <animate attributeName="width" + from="50" to="200" begin="0s" dur="2s" fill="freeze"/> + </rect> +</svg> + diff --git a/layout/reftests/svg/smil/anim-width-done-1b.svg b/layout/reftests/svg/smil/anim-width-done-1b.svg new file mode 100644 index 0000000000..64289244e2 --- /dev/null +++ b/layout/reftests/svg/smil/anim-width-done-1b.svg @@ -0,0 +1,11 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2.5, false)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="15" y="15" width="50" height="200" fill="blue"> + <animate attributeName="width" + from="50" to="200" begin="0s" dur="2s" fill="freeze"/> + </rect> +</svg> + diff --git a/layout/reftests/svg/smil/anim-x-done-1a.svg b/layout/reftests/svg/smil/anim-x-done-1a.svg new file mode 100644 index 0000000000..ba41cc8209 --- /dev/null +++ b/layout/reftests/svg/smil/anim-x-done-1a.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, false)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="200" y="15" width="200" height="200" fill="blue"> + <animate attributeName="x" + from="200" to="15" begin="0s" dur="2s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-x-done-1b.svg b/layout/reftests/svg/smil/anim-x-done-1b.svg new file mode 100644 index 0000000000..efba0023b6 --- /dev/null +++ b/layout/reftests/svg/smil/anim-x-done-1b.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2.5, false)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="200" y="15" width="200" height="200" fill="blue"> + <animate attributeName="x" + from="200" to="15" begin="0s" dur="2s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-x-interp-1-ref.svg b/layout/reftests/svg/smil/anim-x-interp-1-ref.svg new file mode 100644 index 0000000000..a4995ebbbf --- /dev/null +++ b/layout/reftests/svg/smil/anim-x-interp-1-ref.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <rect x="115" y="15" width="200" height="200" fill="blue"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-x-interp-1.svg b/layout/reftests/svg/smil/anim-x-interp-1.svg new file mode 100644 index 0000000000..3a03306469 --- /dev/null +++ b/layout/reftests/svg/smil/anim-x-interp-1.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(0.3, true)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="200" y="15" width="200" height="200" fill="blue"> + <animate attributeName="x" + from="100" to="200" begin="0s" dur="2s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-x-interp-2-ref.svg b/layout/reftests/svg/smil/anim-x-interp-2-ref.svg new file mode 100644 index 0000000000..6ff54764f6 --- /dev/null +++ b/layout/reftests/svg/smil/anim-x-interp-2-ref.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <rect x="125" y="15" width="200" height="200" fill="blue"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-x-interp-2.svg b/layout/reftests/svg/smil/anim-x-interp-2.svg new file mode 100644 index 0000000000..7b3d456a84 --- /dev/null +++ b/layout/reftests/svg/smil/anim-x-interp-2.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(0.5, true)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="200" y="15" width="200" height="200" fill="blue"> + <animate attributeName="x" + from="100" to="200" begin="0s" dur="2s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-x-interp-3-ref.svg b/layout/reftests/svg/smil/anim-x-interp-3-ref.svg new file mode 100644 index 0000000000..f533524f81 --- /dev/null +++ b/layout/reftests/svg/smil/anim-x-interp-3-ref.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <rect x="160" y="15" width="200" height="200" fill="blue"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-x-interp-3.svg b/layout/reftests/svg/smil/anim-x-interp-3.svg new file mode 100644 index 0000000000..44d1b1c058 --- /dev/null +++ b/layout/reftests/svg/smil/anim-x-interp-3.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1.2, true)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="200" y="15" width="200" height="200" fill="blue"> + <animate attributeName="x" + from="100" to="200" begin="0s" dur="2s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-x-interp-4-ref.svg b/layout/reftests/svg/smil/anim-x-interp-4-ref.svg new file mode 100644 index 0000000000..5b846c7a2e --- /dev/null +++ b/layout/reftests/svg/smil/anim-x-interp-4-ref.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <rect x="170" y="15" width="200" height="200" fill="blue"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-x-interp-4.svg b/layout/reftests/svg/smil/anim-x-interp-4.svg new file mode 100644 index 0000000000..c231dc8376 --- /dev/null +++ b/layout/reftests/svg/smil/anim-x-interp-4.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1.4, true)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="200" y="15" width="200" height="200" fill="blue"> + <animate attributeName="x" + from="100" to="200" begin="0s" dur="2s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-x-interp-5-ref.svg b/layout/reftests/svg/smil/anim-x-interp-5-ref.svg new file mode 100644 index 0000000000..889ad4c335 --- /dev/null +++ b/layout/reftests/svg/smil/anim-x-interp-5-ref.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <rect x="190" y="15" width="200" height="200" fill="blue"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-x-interp-5.svg b/layout/reftests/svg/smil/anim-x-interp-5.svg new file mode 100644 index 0000000000..e9fce72fae --- /dev/null +++ b/layout/reftests/svg/smil/anim-x-interp-5.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1.8, true)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="200" y="15" width="200" height="200" fill="blue"> + <animate attributeName="x" + from="100" to="200" begin="0s" dur="2s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-x-interp-6-ref.svg b/layout/reftests/svg/smil/anim-x-interp-6-ref.svg new file mode 100644 index 0000000000..007aa0b88a --- /dev/null +++ b/layout/reftests/svg/smil/anim-x-interp-6-ref.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <rect x="195" y="15" width="200" height="200" fill="blue"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-x-interp-6.svg b/layout/reftests/svg/smil/anim-x-interp-6.svg new file mode 100644 index 0000000000..150286be2d --- /dev/null +++ b/layout/reftests/svg/smil/anim-x-interp-6.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1.9, true)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="200" y="15" width="200" height="200" fill="blue"> + <animate attributeName="x" + from="100" to="200" begin="0s" dur="2s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-y-done-1a.svg b/layout/reftests/svg/smil/anim-y-done-1a.svg new file mode 100644 index 0000000000..5a7fb9c580 --- /dev/null +++ b/layout/reftests/svg/smil/anim-y-done-1a.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, false)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="15" y="200" width="200" height="200" fill="blue"> + <animate attributeName="y" + from="200" to="15" begin="0s" dur="2s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-y-done-1b.svg b/layout/reftests/svg/smil/anim-y-done-1b.svg new file mode 100644 index 0000000000..9d964d4e32 --- /dev/null +++ b/layout/reftests/svg/smil/anim-y-done-1b.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2.5, false)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="15" y="200" width="200" height="200" fill="blue"> + <animate attributeName="y" + from="200" to="15" begin="0s" dur="2s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-y-interp-1-ref.svg b/layout/reftests/svg/smil/anim-y-interp-1-ref.svg new file mode 100644 index 0000000000..b64a0c62ee --- /dev/null +++ b/layout/reftests/svg/smil/anim-y-interp-1-ref.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <rect x="15" y="115" width="200" height="200" fill="blue"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-y-interp-1.svg b/layout/reftests/svg/smil/anim-y-interp-1.svg new file mode 100644 index 0000000000..a4a3750c31 --- /dev/null +++ b/layout/reftests/svg/smil/anim-y-interp-1.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(0.3, true)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="15" y="200" width="200" height="200" fill="blue"> + <animate attributeName="y" + from="100" to="200" begin="0s" dur="2s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-y-interp-2-ref.svg b/layout/reftests/svg/smil/anim-y-interp-2-ref.svg new file mode 100644 index 0000000000..a57a0c0617 --- /dev/null +++ b/layout/reftests/svg/smil/anim-y-interp-2-ref.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <rect x="15" y="125" width="200" height="200" fill="blue"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-y-interp-2.svg b/layout/reftests/svg/smil/anim-y-interp-2.svg new file mode 100644 index 0000000000..4affbcfb70 --- /dev/null +++ b/layout/reftests/svg/smil/anim-y-interp-2.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(0.5, true)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="15" y="200" width="200" height="200" fill="blue"> + <animate attributeName="y" + from="100" to="200" begin="0s" dur="2s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-y-interp-3-ref.svg b/layout/reftests/svg/smil/anim-y-interp-3-ref.svg new file mode 100644 index 0000000000..bf096b395d --- /dev/null +++ b/layout/reftests/svg/smil/anim-y-interp-3-ref.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <rect x="15" y="160" width="200" height="200" fill="blue"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-y-interp-3.svg b/layout/reftests/svg/smil/anim-y-interp-3.svg new file mode 100644 index 0000000000..a6f91720a1 --- /dev/null +++ b/layout/reftests/svg/smil/anim-y-interp-3.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1.2, true)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="15" y="200" width="200" height="200" fill="blue"> + <animate attributeName="y" + from="100" to="200" begin="0s" dur="2s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-y-interp-4-ref.svg b/layout/reftests/svg/smil/anim-y-interp-4-ref.svg new file mode 100644 index 0000000000..f90829237d --- /dev/null +++ b/layout/reftests/svg/smil/anim-y-interp-4-ref.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <rect x="15" y="170" width="200" height="200" fill="blue"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-y-interp-4.svg b/layout/reftests/svg/smil/anim-y-interp-4.svg new file mode 100644 index 0000000000..8b5a137f64 --- /dev/null +++ b/layout/reftests/svg/smil/anim-y-interp-4.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1.4, true)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="15" y="200" width="200" height="200" fill="blue"> + <animate attributeName="y" + from="100" to="200" begin="0s" dur="2s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-y-interp-5-ref.svg b/layout/reftests/svg/smil/anim-y-interp-5-ref.svg new file mode 100644 index 0000000000..8cb83e9020 --- /dev/null +++ b/layout/reftests/svg/smil/anim-y-interp-5-ref.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <rect x="15" y="190" width="200" height="200" fill="blue"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-y-interp-5.svg b/layout/reftests/svg/smil/anim-y-interp-5.svg new file mode 100644 index 0000000000..44d5165ae0 --- /dev/null +++ b/layout/reftests/svg/smil/anim-y-interp-5.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1.8, true)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="15" y="200" width="200" height="200" fill="blue"> + <animate attributeName="y" + from="100" to="200" begin="0s" dur="2s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-y-interp-6-ref.svg b/layout/reftests/svg/smil/anim-y-interp-6-ref.svg new file mode 100644 index 0000000000..b0c80b09f5 --- /dev/null +++ b/layout/reftests/svg/smil/anim-y-interp-6-ref.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <rect x="15" y="195" width="200" height="200" fill="blue"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-y-interp-6.svg b/layout/reftests/svg/smil/anim-y-interp-6.svg new file mode 100644 index 0000000000..bd0f537432 --- /dev/null +++ b/layout/reftests/svg/smil/anim-y-interp-6.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1.9, true)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="15" y="200" width="200" height="200" fill="blue"> + <animate attributeName="y" + from="100" to="200" begin="0s" dur="2s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/api-sanity-1.svg b/layout/reftests/svg/smil/api-sanity-1.svg new file mode 100644 index 0000000000..22807d91b6 --- /dev/null +++ b/layout/reftests/svg/smil/api-sanity-1.svg @@ -0,0 +1,33 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + onload="go()" + class="reftest-wait" +> + <script type="application/javascript"> + function go() { + // Try calling the animation-related methods in SVGSVGElement.cpp + // If any aren't implemented, we'll throw an exception and + // the rect will stay red. + + try { + document.documentElement.animationsPaused(); + document.documentElement.pauseAnimations(); + document.documentElement.unpauseAnimations(); + document.documentElement.getCurrentTime(); + document.documentElement.setCurrentTime(0); + } catch (e) { + // If something failed and threw an exception, we still need to remove + // the "reftest-wait" class + document.documentElement.removeAttribute("class"); + throw e; + } + + // If we get here, we're successful! + // Change the rect color. + var rect = document.getElementById("rect"); + rect.setAttributeNS(null, "fill", "lime"); + document.documentElement.removeAttribute("class"); + } + </script> + <rect id="rect" width="100%" height="100%" fill="red" /> +</svg> 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 diff --git a/layout/reftests/svg/smil/event/event-begin-1.svg b/layout/reftests/svg/smil/event/event-begin-1.svg new file mode 100644 index 0000000000..3b87def1df --- /dev/null +++ b/layout/reftests/svg/smil/event/event-begin-1.svg @@ -0,0 +1,16 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(0); + click('circle'); + delayedSnapshot(2)"> + <script xlink:href="event-util.js" type="text/javascript"/> + <circle id="circle" r="10"/> + <rect width="100" height="100" fill="red"> + <set attributeName="fill" attributeType="CSS" + to="green" + begin="circle.click" dur="4s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/event/event-begin-load-1.svg b/layout/reftests/svg/smil/event/event-begin-load-1.svg new file mode 100644 index 0000000000..e53d845e16 --- /dev/null +++ b/layout/reftests/svg/smil/event/event-begin-load-1.svg @@ -0,0 +1,14 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" id="svg" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(0); + delayedSnapshot(2)"> + <script xlink:href="event-util.js" type="text/javascript"/> + <rect width="100" height="100" fill="red"> + <set attributeName="fill" attributeType="CSS" + to="green" + begin="svg.SVGLoad" dur="4s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/event/event-begin-offset-1.svg b/layout/reftests/svg/smil/event/event-begin-offset-1.svg new file mode 100644 index 0000000000..30b541b8dc --- /dev/null +++ b/layout/reftests/svg/smil/event/event-begin-offset-1.svg @@ -0,0 +1,16 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(0); + click('circle'); + delayedSnapshot(6)"> + <script xlink:href="event-util.js" type="text/javascript"/> + <circle id="circle" r="10"/> + <rect width="100" height="100" fill="red"> + <set attributeName="fill" attributeType="CSS" + to="green" + begin="circle.click+4s" dur="4s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/event/event-begin-offset-2.svg b/layout/reftests/svg/smil/event/event-begin-offset-2.svg new file mode 100644 index 0000000000..f1e503cf0d --- /dev/null +++ b/layout/reftests/svg/smil/event/event-begin-offset-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" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(4); + click('circle'); + delayedSnapshot(4)"> + <script xlink:href="event-util.js" type="text/javascript"/> + <circle id="circle" r="10"/> + <rect width="100" height="100" fill="red"> + <animate attributeName="fill" attributeType="CSS" + values="orange; green" calcMode="discrete" + begin="circle.click-4s" dur="8s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/event/event-begin-timeevent-1.svg b/layout/reftests/svg/smil/event/event-begin-timeevent-1.svg new file mode 100644 index 0000000000..37fa8d9c86 --- /dev/null +++ b/layout/reftests/svg/smil/event/event-begin-timeevent-1.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(0); + /* Make sure the event gets fired */ + document.documentElement.setCurrentTime(0.1); + delayedSnapshot(2)"> + <script xlink:href="event-util.js" type="text/javascript"/> + <rect width="100" height="100" fill="red"> + <set attributeName="x" to="0" begin="0s" id="a"/> + <set attributeName="fill" attributeType="CSS" + to="green" + begin="a.beginEvent" dur="4s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/event/event-begin-timeevent-2.svg b/layout/reftests/svg/smil/event/event-begin-timeevent-2.svg new file mode 100644 index 0000000000..6472fab70a --- /dev/null +++ b/layout/reftests/svg/smil/event/event-begin-timeevent-2.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(0); + /* Make sure the event gets fired */ + document.documentElement.setCurrentTime(0.1); + document.documentElement.setCurrentTime(0.6); + delayedSnapshot(2.5)"> + <script xlink:href="event-util.js" type="text/javascript"/> + <rect width="100" height="100" fill="red"> + <set attributeName="x" to="0" begin="0s" dur="0.5s" id="a"/> + <set attributeName="fill" attributeType="CSS" + to="green" + begin="a.endEvent" dur="4s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/event/event-begin-timeevent-3.svg b/layout/reftests/svg/smil/event/event-begin-timeevent-3.svg new file mode 100644 index 0000000000..35247ed46d --- /dev/null +++ b/layout/reftests/svg/smil/event/event-begin-timeevent-3.svg @@ -0,0 +1,36 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="fastForwardToEvent()"> + <script xlink:href="event-util.js" type="text/javascript"/> + <script type="text/javascript"> + const gTimeoutDur = 60000; // Time until we give up waiting for events in ms + var timeoutID; + function fastForwardToEvent() + { + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(4.99); + // This test is designed to pass quickly and fail slowly. + // + // In the success case, the second animation will start almost + // immediately, fire a beginEvent and trigger gotBegin below. + // + // In the failure case, the following timeout will fire (after + // gTimeoutDur), we'll seek to t=1s (to make sure we show the red + // square) and then finish. + timeoutID = window.setTimeout(finish, gTimeoutDur, + 1 /*seekTimeInSeconds*/); + document.documentElement.unpauseAnimations(); + } + function gotBegin() + { + window.clearTimeout(timeoutID); + finish(); + } + </script> + <rect width="100" height="100" fill="red"> + <set attributeName="x" to="0" begin="0s" dur="5s" repeatCount="2" id="a"/> + <set attributeName="fill" attributeType="CSS" to="green" + begin="a.repeatEvent" onbegin="gotBegin()"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/event/event-bubble-1.svg b/layout/reftests/svg/smil/event/event-bubble-1.svg new file mode 100644 index 0000000000..b4b4ed4cd8 --- /dev/null +++ b/layout/reftests/svg/smil/event/event-bubble-1.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(0); + click('circle'); + delayedSnapshot(2)"> + <script xlink:href="event-util.js" type="text/javascript"/> + <g id="g"> + <circle id="circle" r="10"/> + </g> + <rect width="100" height="100" fill="red"> + <set attributeName="fill" attributeType="CSS" + to="green" + begin="g.click" dur="4s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/event/event-custom-1.svg b/layout/reftests/svg/smil/event/event-custom-1.svg new file mode 100644 index 0000000000..c3b9a50d3e --- /dev/null +++ b/layout/reftests/svg/smil/event/event-custom-1.svg @@ -0,0 +1,26 @@ +<!-- Tests support for custom events --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="sendEvent()"> + <script xlink:href="event-util.js" type="text/javascript"/> + <script type="text/javascript"> + function sendEvent() + { + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(0); + var evt = document.createEvent("SVGEvents"); + evt.initEvent("user.defined", false, false); + var target = document.getElementById('rect'); + target.dispatchEvent(evt); + delayedSnapshot(2); + } + </script> + <rect width="100" height="100" fill="red" id="rect"> + <!-- SMIL allows periods to be embedded in the event name by escaping them + with a backslash. (Otherwise the part before the period would be + treated as an ID reference.) Test that we support that. --> + <set attributeName="fill" attributeType="CSS" to="green" + begin="rect.user\.defined" dur="4s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/event/event-end-1.svg b/layout/reftests/svg/smil/event/event-end-1.svg new file mode 100644 index 0000000000..b846de94dd --- /dev/null +++ b/layout/reftests/svg/smil/event/event-end-1.svg @@ -0,0 +1,16 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(2); + click('circle'); + delayedSnapshot(3)"> + <script xlink:href="event-util.js" type="text/javascript"/> + <circle id="circle" r="10"/> + <rect width="100" height="100" fill="green"> + <set attributeName="fill" attributeType="CSS" + to="red" + begin="1s" end="circle.click" dur="4s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/event/event-end-2.svg b/layout/reftests/svg/smil/event/event-end-2.svg new file mode 100644 index 0000000000..36bbb9f26f --- /dev/null +++ b/layout/reftests/svg/smil/event/event-end-2.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(0); + /* Click event should be ignored since the element is inactive as per + * SMIL's event sensitivity rules */ + click('circle'); + delayedSnapshot(3)"> + <script xlink:href="event-util.js" type="text/javascript"/> + <circle id="circle" r="10"/> + <rect width="100" height="100" fill="red"> + <set attributeName="fill" attributeType="CSS" + to="green" + begin="1s" end="circle.click+2s" dur="4s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/event/event-end-open-1.svg b/layout/reftests/svg/smil/event/event-end-open-1.svg new file mode 100644 index 0000000000..0b9afb913a --- /dev/null +++ b/layout/reftests/svg/smil/event/event-end-open-1.svg @@ -0,0 +1,20 @@ +<!-- + Generally speaking, when constructing intervals if all the end instance times + are before the next begin time there's no valid interval. + + However, SMIL specifically makes an exception when the end attribute has event + conditions in which case an unresolved end is used. + --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(2); + document.documentElement.removeAttribute('class')"> + <circle id="circle" r="10"/> + <rect width="100" height="100" fill="red"> + <set attributeName="fill" attributeType="CSS" to="green" + begin="0s; 2s" end="1s; circle.click"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/event/event-end-trimmed-1.svg b/layout/reftests/svg/smil/event/event-end-trimmed-1.svg new file mode 100644 index 0000000000..d4c06b5992 --- /dev/null +++ b/layout/reftests/svg/smil/event/event-end-trimmed-1.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(1); + document.getElementById('a').setAttribute('end', '0s'); + /* Force a sample to make sure that event gets fired */ + document.documentElement.setCurrentTime(1); + delayedSnapshot(2)"> + <script xlink:href="event-util.js" type="text/javascript"/> + <rect width="100" height="100" fill="red"> + <set attributeName="x" to="0" begin="0.5s" dur="10s" id="a"/> + <set attributeName="fill" attributeType="CSS" + to="green" begin="a.endEvent" dur="4s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/event/event-preventDefault-1.svg b/layout/reftests/svg/smil/event/event-preventDefault-1.svg new file mode 100644 index 0000000000..4ebadda39b --- /dev/null +++ b/layout/reftests/svg/smil/event/event-preventDefault-1.svg @@ -0,0 +1,16 @@ +<!-- Calling preventDefault on the event should have no effect --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(0); + click('circle'); + delayedSnapshot(2)"> + <script xlink:href="event-util.js" type="text/javascript"/> + <circle id="circle" r="10" onclick="evt.preventDefault()"/> + <rect width="100" height="100" fill="red"> + <set attributeName="fill" attributeType="CSS" + to="green" begin="circle.click" dur="4s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/event/event-seek-1.svg b/layout/reftests/svg/smil/event/event-seek-1.svg new file mode 100644 index 0000000000..727c244c6c --- /dev/null +++ b/layout/reftests/svg/smil/event/event-seek-1.svg @@ -0,0 +1,20 @@ +<!-- Test a backwards seek with an event-generated time --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + id="svg" + class="reftest-wait"> + <script xlink:href="event-util.js" type="text/javascript"/> + <script type="text/javascript"> + function seek() + { + document.documentElement.setCurrentTime(40); + finish(30); + } + document.addEventListener("MozReftestInvalidate", seek, false); + setTimeout(seek, 4000); // fallback for running outside reftest + </script> + <rect width="100" height="100" fill="red"> + <set attributeName="fill" attributeType="CSS" to="green" + begin="svg.SVGLoad+20s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/event/event-target-default-1.svg b/layout/reftests/svg/smil/event/event-target-default-1.svg new file mode 100644 index 0000000000..2fedc40369 --- /dev/null +++ b/layout/reftests/svg/smil/event/event-target-default-1.svg @@ -0,0 +1,15 @@ +<!-- Test default parent target --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(0); + click('rect'); + delayedSnapshot(2)"> + <script xlink:href="event-util.js" type="text/javascript"/> + <rect width="100" height="100" fill="red" id="rect"> + <set attributeName="fill" attributeType="CSS" to="green" + begin="click" dur="4s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/event/event-target-default-2.svg b/layout/reftests/svg/smil/event/event-target-default-2.svg new file mode 100644 index 0000000000..dec770e7e9 --- /dev/null +++ b/layout/reftests/svg/smil/event/event-target-default-2.svg @@ -0,0 +1,14 @@ +<!-- Test default target with xlink:href --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(0); + click('rect'); + delayedSnapshot(2)"> + <script xlink:href="event-util.js" type="text/javascript"/> + <rect width="100" height="100" fill="red" id="rect"/> + <set xlink:href="#rect" attributeName="fill" attributeType="CSS" to="green" + begin="click" dur="4s"/> +</svg> diff --git a/layout/reftests/svg/smil/event/event-target-id-change-1.svg b/layout/reftests/svg/smil/event/event-target-id-change-1.svg new file mode 100644 index 0000000000..836ebc9d46 --- /dev/null +++ b/layout/reftests/svg/smil/event/event-target-id-change-1.svg @@ -0,0 +1,15 @@ +<!-- Test that changes to ID assignments are reflected in event registration --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(0); + document.getElementById('square').setAttribute('id', 'rect'); + click('rect'); + delayedSnapshot(2)"> + <script xlink:href="event-util.js" type="text/javascript"/> + <rect width="100" height="100" fill="red" id="square"/> + <set xlink:href="#rect" attributeName="fill" attributeType="CSS" to="green" + begin="click" dur="4s"/> +</svg> diff --git a/layout/reftests/svg/smil/event/event-target-id-change-2.svg b/layout/reftests/svg/smil/event/event-target-id-change-2.svg new file mode 100644 index 0000000000..2046eb9c82 --- /dev/null +++ b/layout/reftests/svg/smil/event/event-target-id-change-2.svg @@ -0,0 +1,16 @@ +<!-- Test that changes to ID assignments are reflected in event registration. + Test for when the animation target becomes invalid. --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(0); + document.getElementById('rect').setAttribute('id', 'square'); + click('square'); + delayedSnapshot(2)"> + <script xlink:href="event-util.js" type="text/javascript"/> + <rect width="100" height="100" fill="green" id="rect"/> + <set xlink:href="#rect" attributeName="fill" attributeType="CSS" to="red" + begin="click" dur="4s"/> +</svg> diff --git a/layout/reftests/svg/smil/event/event-target-id-change-3.svg b/layout/reftests/svg/smil/event/event-target-id-change-3.svg new file mode 100644 index 0000000000..9e73efb26b --- /dev/null +++ b/layout/reftests/svg/smil/event/event-target-id-change-3.svg @@ -0,0 +1,16 @@ +<!-- Test that changes to ID assignments are reflected in event registration. + Test with end specifications. --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(1); + document.getElementById('square').setAttribute('id', 'rect'); + click('rect'); + delayedSnapshot(2)"> + <script xlink:href="event-util.js" type="text/javascript"/> + <rect width="100" height="100" fill="green" id="square"/> + <set xlink:href="#rect" attributeName="fill" attributeType="CSS" to="red" + begin="0s" end="click" dur="4s"/> +</svg> diff --git a/layout/reftests/svg/smil/event/event-target-non-svg-1.xhtml b/layout/reftests/svg/smil/event/event-target-non-svg-1.xhtml new file mode 100644 index 0000000000..d57948d6c3 --- /dev/null +++ b/layout/reftests/svg/smil/event/event-target-non-svg-1.xhtml @@ -0,0 +1,41 @@ +<?xml version="1.0" encoding="UTF-8" ?> +<html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait"> +<!-- + Test for non-SVG event bases. This isn't strictly required but we at very + least we want to make sure our behaviour is defined. + --> +<head> +<script src="event-util.js" type="text/javascript"></script> +<script> +function snapshot() { + var svg = document.getElementById("svg"); + svg.pauseAnimations(); + svg.setCurrentTime(0); + click('a'); + var a = document.getElementById('a'); + a.style.display = 'none'; + window.setTimeout(doSnapshot, 10); +} + +function doSnapshot() { + var svg = document.getElementById("svg"); + svg.pauseAnimations(); + svg.setCurrentTime(2); + document.documentElement.removeAttribute("class"); +} + +document.addEventListener("MozReftestInvalidate", snapshot, false); +setTimeout(snapshot, 4000); // fallback for running outside reftest + +</script> +</head> +<body> +<a href="#" id="a">Play!</a> +<svg xmlns="http://www.w3.org/2000/svg" width="120px" height="120px" id="svg"> + <rect width="100" height="100" fill="red"> + <set attributeName="fill" attributeType="CSS" to="green" + begin="a.click" dur="4s"/> + </rect> +</svg> +</body> +</html> diff --git a/layout/reftests/svg/smil/event/event-target-surgery-1.svg b/layout/reftests/svg/smil/event/event-target-surgery-1.svg new file mode 100644 index 0000000000..9959a14df2 --- /dev/null +++ b/layout/reftests/svg/smil/event/event-target-surgery-1.svg @@ -0,0 +1,17 @@ +<!-- Test that animations are unregistered when removed --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(0); + document.getElementById('rect').removeChild( + document.getElementById('anim')); + click('rect'); + delayedSnapshot(2)"> + <script xlink:href="event-util.js" type="text/javascript"/> + <rect width="100" height="100" fill="green" id="rect"> + <set attributeName="fill" attributeType="CSS" + to="red" begin="click" dur="4s" id="anim"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/event/event-target-surgery-2.svg b/layout/reftests/svg/smil/event/event-target-surgery-2.svg new file mode 100644 index 0000000000..b9a778b38d --- /dev/null +++ b/layout/reftests/svg/smil/event/event-target-surgery-2.svg @@ -0,0 +1,15 @@ +<!-- Test that animations are unregistered when removed --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(0); + document.documentElement.removeChild(document.getElementById('anim')); + click('rect'); + delayedSnapshot(2)"> + <script xlink:href="event-util.js" type="text/javascript"/> + <rect width="100" height="100" fill="green" id="rect"/> + <set xlink:href="#rect" attributeName="fill" attributeType="CSS" + to="red" begin="click" dur="4s" id="anim"/> +</svg> diff --git a/layout/reftests/svg/smil/event/event-target-surgery-3.svg b/layout/reftests/svg/smil/event/event-target-surgery-3.svg new file mode 100644 index 0000000000..cf68fc691b --- /dev/null +++ b/layout/reftests/svg/smil/event/event-target-surgery-3.svg @@ -0,0 +1,32 @@ +<!-- Test that event registration is updated when reparenting --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="reparent()"> + <script xlink:href="event-util.js" type="text/javascript"/> + <script type="text/javascript"> + function reparent() + { + var svg = document.documentElement; + svg.pauseAnimations(); + svg.setCurrentTime(0); + var circle = document.getElementById('circle'); + var rect = document.getElementById('rect'); + var animmove = document.getElementById('anim-move'); + var animcolor = document.getElementById('anim-color'); + circle.appendChild(animmove); + rect.appendChild(animcolor); + click('rect'); + delayedSnapshot(2); + } + </script> + <circle id="circle" r="10"> + <set attributeName="fill" attributeType="CSS" + to="green" begin="click" dur="4s" id="anim-color"/> + </circle> + <rect width="100" height="100" fill="red" id="rect"> + <animateTransform attributeName="transform" type="translate" + values="100; 100" calcMode="discrete" + begin="click" dur="4s" id="anim-move"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/event/event-target-xlink-change-1.svg b/layout/reftests/svg/smil/event/event-target-xlink-change-1.svg new file mode 100644 index 0000000000..f742e9276e --- /dev/null +++ b/layout/reftests/svg/smil/event/event-target-xlink-change-1.svg @@ -0,0 +1,17 @@ +<!-- Test that changes to animation targets update event registration. --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(0); + document.getElementById('anim').setAttributeNS( + 'http://www.w3.org/1999/xlink', 'href', '#rect'); + click('rect'); + delayedSnapshot(2)"> + <script xlink:href="event-util.js" type="text/javascript"/> + <circle id="circle" r="10"/> + <rect width="100" height="100" fill="red" id="rect"/> + <set xlink:href="#circle" attributeName="fill" attributeType="CSS" to="green" + begin="click" dur="4s" id="anim"/> +</svg> diff --git a/layout/reftests/svg/smil/event/event-target-xlink-change-2.svg b/layout/reftests/svg/smil/event/event-target-xlink-change-2.svg new file mode 100644 index 0000000000..0b8283f8bd --- /dev/null +++ b/layout/reftests/svg/smil/event/event-target-xlink-change-2.svg @@ -0,0 +1,18 @@ +<!-- Test that changes to animation targets update event registration. --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(0); + document.getElementById('anim').setAttributeNS( + 'http://www.w3.org/1999/xlink', 'href', '#circle'); + click('rect'); + delayedSnapshot(2)"> + <script xlink:href="event-util.js" type="text/javascript"/> + <circle id="circle" r="10"/> + <rect width="100" height="100" fill="green" id="rect"> + <set attributeName="fill" attributeType="CSS" + to="red" begin="click" dur="4s" id="anim"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/event/event-target-xlink-change-3.svg b/layout/reftests/svg/smil/event/event-target-xlink-change-3.svg new file mode 100644 index 0000000000..d88f1aa77a --- /dev/null +++ b/layout/reftests/svg/smil/event/event-target-xlink-change-3.svg @@ -0,0 +1,18 @@ +<!-- Test that changes to animation targets update event registration. --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(0); + document.getElementById('anim').removeAttributeNS( + 'http://www.w3.org/1999/xlink', 'href'); + click('rect'); + delayedSnapshot(2)"> + <script xlink:href="event-util.js" type="text/javascript"/> + <circle id="circle" r="10"/> + <rect width="100" height="100" fill="red" id="rect"> + <set xlink:href="#circle" attributeName="fill" attributeType="CSS" + to="green" begin="click" dur="4s" id="anim"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/event/event-target-xlink-change-4.svg b/layout/reftests/svg/smil/event/event-target-xlink-change-4.svg new file mode 100644 index 0000000000..14e6a46553 --- /dev/null +++ b/layout/reftests/svg/smil/event/event-target-xlink-change-4.svg @@ -0,0 +1,18 @@ +<!-- Test that changes to animation targets update event registration. --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(0); + document.getElementById('anim').removeAttributeNS( + 'http://www.w3.org/1999/xlink', 'href'); + click('circle'); + delayedSnapshot(2)"> + <script xlink:href="event-util.js" type="text/javascript"/> + <circle id="circle" r="10"/> + <rect width="100" height="100" fill="green" id="rect"> + <set xlink:href="#circle" attributeName="fill" attributeType="CSS" + to="red" begin="click" dur="4s" id="anim"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/event/event-util.js b/layout/reftests/svg/smil/event/event-util.js new file mode 100644 index 0000000000..fd0d1bd3e9 --- /dev/null +++ b/layout/reftests/svg/smil/event/event-util.js @@ -0,0 +1,24 @@ +// Allows a moment for events to be processed then performs a seek and runs +// a snapshot. +function delayedSnapshot(seekTimeInSeconds) +{ + // Allow time for events to be processed + window.setTimeout(finish, 10, seekTimeInSeconds); +} + +function finish(seekTimeInSeconds) +{ + document.documentElement.pauseAnimations(); + if (seekTimeInSeconds) + document.documentElement.setCurrentTime(seekTimeInSeconds); + document.documentElement.removeAttribute("class"); +} + +function click(targetId) +{ + var evt = document.createEvent("MouseEvents"); + evt.initMouseEvent("click", true, true, window, + 0, 0, 0, 0, 0, false, false, false, false, 0, null); + var target = document.getElementById(targetId); + target.dispatchEvent(evt); +} diff --git a/layout/reftests/svg/smil/event/green-box-ref.svg b/layout/reftests/svg/smil/event/green-box-ref.svg new file mode 100644 index 0000000000..120941444a --- /dev/null +++ b/layout/reftests/svg/smil/event/green-box-ref.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <rect width="100" height="100" fill="green"/> +</svg> diff --git a/layout/reftests/svg/smil/event/green-box-ref.xhtml b/layout/reftests/svg/smil/event/green-box-ref.xhtml new file mode 100644 index 0000000000..ce0bc78f12 --- /dev/null +++ b/layout/reftests/svg/smil/event/green-box-ref.xhtml @@ -0,0 +1,8 @@ +<?xml version="1.0" encoding="UTF-8" ?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<body> +<svg xmlns="http://www.w3.org/2000/svg" width="120px" height="120px"> + <rect width="100" height="100" fill="green"/> +</svg> +</body> +</html> diff --git a/layout/reftests/svg/smil/event/reftest.list b/layout/reftests/svg/smil/event/reftest.list new file mode 100644 index 0000000000..74add0ead3 --- /dev/null +++ b/layout/reftests/svg/smil/event/reftest.list @@ -0,0 +1,30 @@ +# Tests related to SVG Animation (using SMIL) that use event timing. + +== event-begin-1.svg green-box-ref.svg +== event-begin-offset-1.svg green-box-ref.svg +== event-begin-offset-2.svg green-box-ref.svg +== event-begin-timeevent-1.svg green-box-ref.svg +== event-begin-timeevent-2.svg green-box-ref.svg +random-if(Android) == event-begin-timeevent-3.svg green-box-ref.svg +== event-begin-load-1.svg green-box-ref.svg +== event-bubble-1.svg green-box-ref.svg +== event-custom-1.svg green-box-ref.svg +== event-end-1.svg green-box-ref.svg +== event-end-2.svg green-box-ref.svg +== event-end-open-1.svg green-box-ref.svg +== event-end-trimmed-1.svg green-box-ref.svg +== event-preventDefault-1.svg green-box-ref.svg +== event-seek-1.svg green-box-ref.svg +== event-target-default-1.svg green-box-ref.svg +== event-target-default-2.svg green-box-ref.svg +== event-target-id-change-1.svg green-box-ref.svg +== event-target-id-change-2.svg green-box-ref.svg +== event-target-id-change-3.svg green-box-ref.svg +== event-target-xlink-change-1.svg green-box-ref.svg +== event-target-xlink-change-2.svg green-box-ref.svg +== event-target-xlink-change-3.svg green-box-ref.svg +== event-target-xlink-change-4.svg green-box-ref.svg +== event-target-surgery-1.svg green-box-ref.svg +== event-target-surgery-2.svg green-box-ref.svg +== event-target-surgery-3.svg green-box-ref.svg +== event-target-non-svg-1.xhtml green-box-ref.xhtml diff --git a/layout/reftests/svg/smil/filtered-instance-time-1.svg b/layout/reftests/svg/smil/filtered-instance-time-1.svg new file mode 100644 index 0000000000..36d69cd122 --- /dev/null +++ b/layout/reftests/svg/smil/filtered-instance-time-1.svg @@ -0,0 +1,63 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <!-- Instance time filtering involves removing instance times that are no + longer needed. However, under some arrangements an excessive number of + instance times may be generated that will never be cleaned up since they + might potentially still affect the behavior of the timing model. + + For example, consider the case where we have a valid cyclic dependency + (e.g. a ping-pong effect) between TimeEvents. For example, + a.begin=b.endEvent and b.begin=a.endEvent. The times generated by this + arrangement won't be cleared by regular filtering since they're + technically unpredictable (e.g. seeking the document will cause some + events to be suppressed) and so we preserve them to provide correct + backwards seeking support. + + Therefore, after reaching a certain threshold, old instance times are + simply discarded indiscriminantly to avoid consuming memory in unbounded + fashion as the animation progresses. + + This test checks this second stage of instance time filtering. --> + <script> + function go() { + var svg = document.documentElement; + var anim = document.getElementById('anim'); + + // To begin with we have an animation from 0s-2s + svg.pauseAnimations(); + svg.setCurrentTime(1.0); // Seek to mid-interval + + // Generate a lot of instance times beyond the interval end at t=2s + // The threshold will be something like 100 but just in case it's 200 + // let's make 210 instance times. + for (var i = 0; i < 210; i++) { + // The first instance time will be at t=3s and then we'll generate lots + // of times following on from there + anim.beginElementAt(2 + i * 0.1); + } + + // Seek past the interval end -- this will cause the filtering to kick in. + // The first stage of filtering will only filter instance times before the + // end of the previous interval (i.e. before t=2s in this case). + // The second stage of filtering should take care of the rest. + svg.setCurrentTime(2.5); + + // The second stage of filtering will clear out the oldest times first. + // However, since first time we generated at t=3s is now used as begin of + // the yet-to-begin current interval it should not be cleared. + // So if we force the current interval to be updated by adding another + // instance time the next interval should still start at t=3s. + anim.beginElementAt(100); + + // Now when we go to do a snapshot at t=3s, the animation should be in + // effect. + svg.setCurrentTime(3.0); + svg.removeAttribute("class"); + } + </script> + <rect id="blueRect" x="100" y="15" width="200" height="200" fill="blue"> + <set id="anim" attributeName="x" to="15" begin="0s" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/freeze-applied-late-1.svg b/layout/reftests/svg/smil/freeze-applied-late-1.svg new file mode 100644 index 0000000000..2dd25e1392 --- /dev/null +++ b/layout/reftests/svg/smil/freeze-applied-late-1.svg @@ -0,0 +1,22 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <!-- This test checks for correct behavior when fill="freeze" is applied + *after* the end of an animation's interval. In this case, we immediately + seek to a time after the end, so that no samples will have been taken + when we apply fill="freeze". --> + <script> + function go() { + var svg = document.documentElement; + svg.pauseAnimations(); + svg.setCurrentTime(4.0); + document.getElementById("anim").setAttribute("fill", "freeze"); + svg.removeAttribute("class"); + } + </script> + <rect id="blueRect" x="15" y="15" width="200" height="100" fill="blue"> + <animate id="anim" attributeName="height" + to="200" begin="0s" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/freeze-applied-late-2.svg b/layout/reftests/svg/smil/freeze-applied-late-2.svg new file mode 100644 index 0000000000..fd15cd9915 --- /dev/null +++ b/layout/reftests/svg/smil/freeze-applied-late-2.svg @@ -0,0 +1,24 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <!-- This test checks for correct behavior when fill="freeze" is applied + *after* the end of an animation's interval. In this case, we take one + sample partway through the animation. Then we immediately seek to a + time after the end, so that only the one sample will have been taken + when we apply fill="freeze". --> + <script> + function go() { + var svg = document.documentElement; + svg.pauseAnimations(); + svg.setCurrentTime(1.0); + svg.setCurrentTime(4.0); + document.getElementById("anim").setAttribute("fill", "freeze"); + svg.removeAttribute("class"); + } + </script> + <rect id="blueRect" x="15" y="15" width="200" height="100" fill="blue"> + <animate id="anim" attributeName="height" + to="200" begin="0s" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/freeze-applied-late-3.svg b/layout/reftests/svg/smil/freeze-applied-late-3.svg new file mode 100644 index 0000000000..d6f150df0c --- /dev/null +++ b/layout/reftests/svg/smil/freeze-applied-late-3.svg @@ -0,0 +1,23 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <!-- This test checks for correct behavior when fill="freeze" is applied when + the only interval on an animation is entirely before the document begins + (before 0). The SMIL Animation spec says that such intervals should be + filtered out[1] (ignored). So, since we have no valid intervals, + applying fill="freeze" shouldn't have any effect in this case. + [1] http://www.w3.org/TR/2001/REC-smil-animation-20010904/#Timing-BeginEnd-LC-Start + --> + <script> + function go() { + var svg = document.documentElement; + document.getElementById("anim").setAttribute("fill", "freeze"); + svg.removeAttribute("class"); + } + </script> + <rect id="blueRect" x="15" y="15" width="200" height="200" fill="blue"> + <animate id="anim" attributeName="height" + to="100" begin="-2s" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/freeze-applied-late-4.svg b/layout/reftests/svg/smil/freeze-applied-late-4.svg new file mode 100644 index 0000000000..f755ee5c62 --- /dev/null +++ b/layout/reftests/svg/smil/freeze-applied-late-4.svg @@ -0,0 +1,30 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <!-- This test checks for correct behavior when fill="freeze" is applied when + one interval on an animation is entirely before the document begins + (before 0), and a second interval is at least partly after the document + begins (yet before our first sample, since we immediately seek forward + on document load). + + The SMIL Animation spec says that the former interval should be + filtered out[1] (ignored), but the latter should not. So, because of + the latter interval, applying fill="freeze" should have an effect in + this case. + [1] http://www.w3.org/TR/2001/REC-smil-animation-20010904/#Timing-BeginEnd-LC-Start + --> + <script> + function go() { + var svg = document.documentElement; + svg.pauseAnimations(); + svg.setCurrentTime(4.0); + document.getElementById("anim").setAttribute("fill", "freeze"); + svg.removeAttribute("class"); + } + </script> + <rect id="blueRect" x="15" y="15" width="200" height="100" fill="blue"> + <animate id="anim" attributeName="height" + to="200" begin="-3s; -1s" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/frozen-to-anim-1.svg b/layout/reftests/svg/smil/frozen-to-anim-1.svg new file mode 100644 index 0000000000..a934d45342 --- /dev/null +++ b/layout/reftests/svg/smil/frozen-to-anim-1.svg @@ -0,0 +1,33 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(50, true)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <!-- Covered up red area, if we succeed --> + <rect width="100%" height="100%" fill="red"/> + <rect width="100%" height="100%" fill="lime"> + <!-- At time t=50s, this will give a base value of 50% --> + <animate attributeName="width" from="0%" to="100%" + dur="100s"/> + <!-- From time t=1s onwards this should apply 50% of its effect to the base + value (since it is frozen at repeatCount=0.5). + So, if the base value is 50%, and the to-value is 150%, it will produce + 100%. --> + <animate attributeName="width" to="150%" fill="freeze" + dur="2s" repeatCount="0.5"/> + <!-- The above will check that the resulting width is *at least* 100%. But + if it's, say, 120%, we won't see any failure. + Therefore, we perform the reverse operation on the height to ensure we + don't apply a value that's too large. --> + <!-- At time t=50s, this will give a base value of 150% --> + <animate attributeName="height" from="200%" to="100%" + dur="100s"/> + <!-- From time t=1s onwards this should apply 50% of its effect to the + value. + So, if the base value is 150%, and the to-value is 50%, it will produce + 100%. --> + <animate attributeName="height" to="50%" fill="freeze" + dur="2s" repeatCount="0.5"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/inactivate-with-active-unchanged-1.svg b/layout/reftests/svg/smil/inactivate-with-active-unchanged-1.svg new file mode 100644 index 0000000000..c3e734aea0 --- /dev/null +++ b/layout/reftests/svg/smil/inactivate-with-active-unchanged-1.svg @@ -0,0 +1,23 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(1); + setTimeAndSnapshot(2, false);"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <!-- + Test that we correctly handle "HasChanged()" flags when an animation becomes + inactive while its siblings haven't changed. + In this test case, we take our first sample at 1s, and both animations are + active. We take our second sample at 2s, and the first animation is the only + active animation. It hasn't changed, so we might think that we don't need to + recompose its target - BUT we *do* need to recompose, because the other + animation is newly inactive, and we need to reevaluate the animation + sandwich now that it's gone. + --> + <rect x="15" y="15" width="200" height="200" fill="orange"> + <set attributeName="fill" to="blue" begin="0s" dur="indefinite"/> + <set attributeName="fill" to="red" begin="1s" dur="0.5s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/inactivate-with-active-unchanged-2.svg b/layout/reftests/svg/smil/inactivate-with-active-unchanged-2.svg new file mode 100644 index 0000000000..be23416fe1 --- /dev/null +++ b/layout/reftests/svg/smil/inactivate-with-active-unchanged-2.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(1); + setTimeAndSnapshot(2, false);"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <!-- + Same as in inactivate-with-active-unchanged-1.svg, but with a frozen + animation. + --> + <rect x="15" y="15" width="200" height="200" fill="orange"> + <set attributeName="fill" to="blue" begin="0s" dur="0.5s" fill="freeze"/> + <set attributeName="fill" to="red" begin="1s" dur="0.5s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/lime.html b/layout/reftests/svg/smil/lime.html new file mode 100644 index 0000000000..c4542815b5 --- /dev/null +++ b/layout/reftests/svg/smil/lime.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<html> + <head> + <title>Testcase reference file for generic pass condition(HTML)</title> + </head> + <body style="background-color: lime;"> + </body> +</html> diff --git a/layout/reftests/svg/smil/lime.svg b/layout/reftests/svg/smil/lime.svg new file mode 100644 index 0000000000..c09c6601e8 --- /dev/null +++ b/layout/reftests/svg/smil/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/mapped-attr-long-url-1.svg b/layout/reftests/svg/smil/mapped-attr-long-url-1.svg new file mode 100644 index 0000000000..7c4c3b66cb --- /dev/null +++ b/layout/reftests/svg/smil/mapped-attr-long-url-1.svg @@ -0,0 +1,13 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <rect height="100%" width="100%" fill="lime" /> + <rect height="100" width="100" fill="red"> + <set attributeName="fill" attributeType="XML" dur="indefinite" + to="url(#reaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaallyLongURL) transparent"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/mapped-attr-long-url-2.svg b/layout/reftests/svg/smil/mapped-attr-long-url-2.svg new file mode 100644 index 0000000000..94c0c6ebc2 --- /dev/null +++ b/layout/reftests/svg/smil/mapped-attr-long-url-2.svg @@ -0,0 +1,32 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait"> + <script> + window.addEventListener("MozReftestInvalidate", run, false); + + function run() { + var svg = document.documentElement; + svg.pauseAnimations(); + + // Seek to first half of animation + svg.setCurrentTime(101); + + // Seek to second half of animation + svg.setCurrentTime(103); + + // Take snapshot + svg.removeAttribute("class"); + } + </script> + <rect height="100%" width="100%" fill="lime" /> + <rect height="100" width="100" fill="red"> + <animate attributeName="fill" attributeType="XML" begin="100s" dur="4s" + from="url(#another_reaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaallyLongURL) purple" + to="url(#reaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaallyLongURL) transparent"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/min-1.svg b/layout/reftests/svg/smil/min-1.svg new file mode 100644 index 0000000000..6ba576d452 --- /dev/null +++ b/layout/reftests/svg/smil/min-1.svg @@ -0,0 +1,24 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(115, true)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <!-- Test min behavior + + Set up is as follows: + 1. There is a rectangle with a lime fill. + 2. A <set> animation (with default fill="none") sets the fill to + orange at t=100s. + It has a simple duration of 10s and a min duration of 20s. + 3. A further <set> animation sets the fill to red when the first + animation finishes (using syncbase timing). + + At time t=115s we should still be in the first animation's active + interval with its fill mode of 'none' applied which should mean the + original lime fill is used. --> + <rect width="100%" height="100%" fill="lime"> + <set attributeName="fill" to="orange" dur="10s" min="20s" begin="100s" + id="a"/> + <set attributeName="fill" to="red" begin="a.end"/> + </rect> +</svg> 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..9163259736 --- /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(0-15,0-1600) == 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(0-1,0-40) == animateMotion-rotate-2.svg lime.svg +== animateMotion-to-overridden-1.svg lime.svg +fuzzy(0-4,0-15) == animateMotion-values-linear-1.svg animateMotion-values-linear-1-ref.svg +fuzzy(0-5,0-91) == animateMotion-values-paced-1a.svg animateMotion-values-paced-1-ref.svg +fuzzy(0-5,0-91) == 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 diff --git a/layout/reftests/svg/smil/pause/init-pause-1-ref.svg b/layout/reftests/svg/smil/pause/init-pause-1-ref.svg new file mode 100644 index 0000000000..7d9aa5082f --- /dev/null +++ b/layout/reftests/svg/smil/pause/init-pause-1-ref.svg @@ -0,0 +1,5 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <circle cx="150" cy="50" r="30" fill="blue"/> + <!-- Tick mark to show where the circle should be --> + <path d="M150 40v20" stroke="green"/> +</svg> diff --git a/layout/reftests/svg/smil/pause/init-pause-1.svg b/layout/reftests/svg/smil/pause/init-pause-1.svg new file mode 100644 index 0000000000..a352dd8345 --- /dev/null +++ b/layout/reftests/svg/smil/pause/init-pause-1.svg @@ -0,0 +1,49 @@ +<!-- + + Tests various aspects of initial pause behaviour including getCurrentTime and + setCurrentTime. In particular, we test the behaviour described in + +http://www.w3.org/2003/01/REC-SVG11-20030114-errata#getCurrentTime_setCurrentTime_undefined_before_document_timeline_begin + + --> +<svg xmlns="http://www.w3.org/2000/svg" + class="reftest-wait" + onload="unpause()"> + <script type="text/ecmascript"><![CDATA[ + // If we try to update the DOM as we go we very occasionally run into timing + // issues that produce false positives for this test. So instead we just set + // this flag and update the DOM at the end of the test. + var ok = true; + + function assert(condition) { + ok = ok & condition; + } + + // === Test the state before the document starts === + document.documentElement.setCurrentTime(2); + assert(document.documentElement.getCurrentTime() == 0); + assert(!document.documentElement.animationsPaused()); + document.documentElement.pauseAnimations(); + + function unpause() { + // === Test the state after that the document has started === + assert(document.documentElement.getCurrentTime() == 2); + assert(document.documentElement.animationsPaused()); + + if (!ok) { + document.getElementById('wrong').style.visibility = 'visible'; + } + + document.documentElement.removeAttribute("class"); + } + ]]></script> + <circle cx="50" cy="50" r="30" fill="blue"> + <animate attributeName="cx" attributeType="XML" + to="250" begin="1s" dur="2s" fill="freeze"/> + </circle> + <!-- Tick mark to show where the circle should be --> + <path d="M150 40v20" stroke="green"/> + <!-- Marker to show if something is wrong in the DOM --> + <text fill="red" stroke="none" font-size="60" x="125" y="70" + font-family="sans-serif" id="wrong" visibility="hidden">X</text> +</svg> diff --git a/layout/reftests/svg/smil/pause/reftest.list b/layout/reftests/svg/smil/pause/reftest.list new file mode 100644 index 0000000000..a4af69c477 --- /dev/null +++ b/layout/reftests/svg/smil/pause/reftest.list @@ -0,0 +1,2 @@ +# Tests for pause behaviour +== init-pause-1.svg init-pause-1-ref.svg diff --git a/layout/reftests/svg/smil/reftest.list b/layout/reftests/svg/smil/reftest.list new file mode 100644 index 0000000000..1ec28de14a --- /dev/null +++ b/layout/reftests/svg/smil/reftest.list @@ -0,0 +1,295 @@ +# Tests related to SVG Animation (using SMIL) +# XXXdholbert Partial list of features that still need reftests: +# - calcMode=discrete, paced, spline +# - Stacking of additive=[sum|replace] animations +# - Stacking of additive animations, w/ "hybrid case of to-animation" +# - Repeating animations, w/ & w/out accumulate=sum +# - Interpolation between different units (e.g. font-size attr, 3em to 50px) +# - Correct behavior for em/ex font-size animations, when context changes +# (with change happening 1. when completed/frozen and 2. when animating) +# - CSS properties +# - DOM interfaces: +# * Section 6.2 of http://www.w3.org/TR/smil-animation/ +# * Animation-related bits of http://www.w3.org/TR/SVG/struct.html#DOMInterfaces +# - Some more "anim-retarget" tests, with attributeType being changed/cleared. +# (after we've got support for SVG/SMIL animation of CSS properties) + +# animateMotion tests +include motion/reftest.list + +# animation sort-order tests +include sort/reftest.list + +# set tests +include set/reftest.list + +# style tests +include style/reftest.list + +# animateTransform tests +include transform/reftest.list + +# time-dependent tests +# XXXdholbert Disabling this class of tests for now, because most of them +# can & should be converted so they don't depend on specific timeout values. +# (to prevent sporadic failures due to nondeterminism) +# include timed/reftest.list + +# time container tests +include container/reftest.list + +# repeat tests +include repeat/reftest.list + +# restart tests +include restart/reftest.list + +# pause tests +include pause/reftest.list + +# syncbase tests +include syncbase/reftest.list + +# seek tests +include seek/reftest.list + +# event tests +include event/reftest.list + +# General tests +== anim-discrete-values-1.svg anim-standard-ref.svg +== anim-discrete-values-2.svg anim-standard-ref.svg +== anim-discrete-values-3.svg anim-standard-ref.svg +== anim-discrete-replace-sum-1.svg anim-standard-ref.svg +== anim-discrete-sum-none-1.svg anim-standard-ref.svg +== anim-discrete-sum-sum-1.svg anim-standard-ref.svg + +== anim-discrete-to-1.svg anim-standard-ref.svg +== anim-discrete-to-2.svg anim-standard-ref.svg +== anim-discrete-to-3.svg anim-standard-ref.svg +== anim-discrete-to-4.svg anim-standard-ref.svg + +== anim-indefinite-to-1.svg anim-standard-ref.svg +== anim-indefinite-to-2.svg anim-standard-ref.svg +== anim-indefinite-to-3.svg anim-standard-ref.svg +== anim-indefinite-to-4.svg anim-standard-ref.svg + +fails == anim-fillcolor-1.svg anim-standard-ref.svg # bug 436296 +== anim-fillopacity-1none.svg anim-standard-ref.svg +== anim-fillopacity-1css.svg anim-standard-ref.svg +== anim-fillopacity-1xml.svg anim-standard-ref.svg + +fuzzy(0-1,0-3600) == anim-opacity-01.svg lime.svg + +== anim-height-done-1a.svg anim-standard-ref.svg +== anim-height-done-1b.svg anim-standard-ref.svg +== anim-height-done-2.svg lime.svg +== anim-height-interp-1.svg anim-height-interp-1-ref.svg +== anim-height-interp-2.svg anim-height-interp-2-ref.svg +== anim-height-interp-3.svg anim-height-interp-3-ref.svg +== anim-height-interp-4.svg anim-height-interp-4-ref.svg +== anim-height-interp-5.svg anim-height-interp-5-ref.svg +== anim-height-interp-6.svg anim-height-interp-6-ref.svg + +# check conditional processing +== anim-conditions-01.svg lime.svg +== anim-conditions-02.svg lime.svg + +# animate some <length> attributes: +== anim-filter-primitive-size-01.svg lime.svg +== anim-filter-size-01.svg lime.svg +== anim-length-reset-01.svg lime.svg +== anim-nonpixel-length-reset-01.svg lime.svg +== anim-use-length-01.svg lime.svg +== anim-use-length-02.svg lime.svg + +# animate some <number> attributes: +== anim-feComponentTransfer-01.svg lime.svg +== anim-feDistantLight-01.svg anim-feDistantLight-01-ref.svg +== anim-feOffset-01.svg lime.svg +== anim-feSpotLight-01.svg anim-feSpotLight-01-ref.svg +== anim-offset-01.svg lime.svg +== anim-pathLength-01.svg anim-pathLength-01-ref.svg + +# animate some <number-optional-number> attributes: +fuzzy(0-1,0-600) == anim-feGaussianBlur-01.svg lime.svg + +# animate some <integer> attributes: +== anim-feTurbulence-numOctaves-01.svg anim-feTurbulence-numOctaves-01-ref.svg + +# animate some <integer-optional-integer> attributes: +== anim-feConvolveMatrix-order-01.svg anim-feConvolveMatrix-order-01-ref.svg + +# animate some <angle> attributes: +== anim-marker-orient-01.svg lime.svg +# The test fails intermittently if this pref is enabled, see bug 1768650. +pref(gfx.webrender.svg-shapes,false) == anim-marker-orient-02.svg lime.svg + +#animate points list: +== anim-polygon-points-01.svg anim-polygon-points-01-ref.svg +== anim-polyline-points-01.svg anim-polyline-points-01-ref.svg + +# animate path data: +== anim-path-d-01.svg anim-path-d-01-ref.svg + +# animate some enumeration attributes: +== anim-feComposite-operator-01.svg lime.svg +== anim-filter-filterUnits-01.svg lime.svg + +# animate some boolean attributes: +== anim-feConvolveMatrix-preserveAlpha-01.svg lime.svg + +# animate some viewBox attributes +fuzzy-if(Android,0-4,0-1) == anim-svg-viewBox-01.svg lime.svg +== anim-svg-viewBox-02.svg lime.svg +== anim-svg-viewBox-03.svg lime.svg +== anim-view-01.svg#view lime.svg + +# animate some preserveAspectRatio attributes +== anim-feImage-preserveAspectRatio-01.svg lime.svg +== anim-svg-preserveAspectRatio-01.svg lime.svg + +# animate some string attributes: +== anim-filter-href-01.svg lime.svg +== anim-gradient-href-01.svg lime.svg +== anim-image-href-01.svg lime.svg +== anim-pattern-href-01.svg lime.svg +== anim-use-href-01.svg lime.svg + +# animate the class attribute +== anim-class-01.svg lime.svg +== anim-class-02.svg lime.svg +== anim-class-03.svg lime.svg +== anim-class-04.svg anim-class-04-ref.svg + +# animate with some paint server values +== anim-paintserver-1.svg anim-paintserver-1-ref.svg + +# animate attributes on text content children +== anim-text-attr-01.svg anim-text-attr-01-ref.svg + +# animate where the base value is non-interpolatable but will be replaced anyway +== anim-fill-overpaintserver-1.svg lime.svg +== anim-fill-overpaintserver-2.svg lime.svg + +# animate where we fallback from 'additive' animation to non-additive +== anim-additive-fallback-1.svg anim-standard-ref.svg + +== anim-remove-1.svg anim-standard-ref.svg +== anim-remove-2.svg anim-standard-ref.svg +== anim-remove-3.svg anim-standard-ref.svg +== anim-remove-4.svg anim-standard-ref.svg +== anim-remove-5.svg anim-standard-ref.svg +== anim-remove-6.svg anim-standard-ref.svg +== anim-remove-7.svg anim-standard-ref.svg +== anim-remove-8css.svg anim-standard-ref.svg +== anim-remove-8xml.svg anim-standard-ref.svg +== anim-remove-9.svg anim-standard-ref.svg +== anim-retarget-1.svg anim-standard-ref.svg +== anim-retarget-2.svg anim-standard-ref.svg +== anim-retarget-3.svg anim-standard-ref.svg +== anim-retarget-4.svg anim-standard-ref.svg +== anim-retarget-5.svg anim-standard-ref.svg +== anim-retarget-6.svg anim-standard-ref.svg +== anim-retarget-7.svg anim-standard-ref.svg +== anim-retarget-8.svg anim-standard-ref.svg + +fails == anim-strokecolor-1.svg anim-standard-ref.svg # bug 436296 +== anim-strokewidth-1xml.svg anim-standard-ref.svg + +== anim-targethref-1.svg anim-standard-ref.svg +== anim-targethref-2.svg anim-standard-ref.svg +== anim-targethref-3.svg anim-standard-ref.svg +== anim-targethref-4.svg anim-standard-ref.svg +== anim-targethref-5.svg anim-standard-ref.svg +== anim-targethref-6.svg anim-standard-ref.svg +== anim-targethref-7.svg anim-standard-ref.svg +== anim-targethref-8.svg anim-standard-ref.svg +== anim-targethref-9.svg anim-standard-ref.svg +== anim-targethref-10.svg anim-standard-ref.svg + +== anim-text-rotate-01.svg anim-text-rotate-01-ref.svg +== anim-feFuncR-tableValues-01.svg anim-feFuncR-tableValues-01-ref.svg + +skip == anim-text-x-y-dx-dy-01.svg anim-text-x-y-dx-dy-01-ref.svg # bug 579588 + +== anim-width-done-1a.svg anim-standard-ref.svg +== anim-width-done-1b.svg anim-standard-ref.svg + +== anim-x-done-1a.svg anim-standard-ref.svg +== anim-x-done-1b.svg anim-standard-ref.svg +== anim-x-interp-1.svg anim-x-interp-1-ref.svg +== anim-x-interp-2.svg anim-x-interp-2-ref.svg +== anim-x-interp-3.svg anim-x-interp-3-ref.svg +== anim-x-interp-4.svg anim-x-interp-4-ref.svg +== anim-x-interp-5.svg anim-x-interp-5-ref.svg +== anim-x-interp-6.svg anim-x-interp-6-ref.svg + +== anim-y-done-1a.svg anim-standard-ref.svg +== anim-y-done-1b.svg anim-standard-ref.svg +== anim-y-interp-1.svg anim-y-interp-1-ref.svg +== anim-y-interp-2.svg anim-y-interp-2-ref.svg +== anim-y-interp-3.svg anim-y-interp-3-ref.svg +== anim-y-interp-4.svg anim-y-interp-4-ref.svg +== anim-y-interp-5.svg anim-y-interp-5-ref.svg +== anim-y-interp-6.svg anim-y-interp-6-ref.svg + +# Test we don't rely on HasAttr to see if an attribute has been set +== anim-rect-rxry-1.svg anim-rect-rxry-1-ref.svg +fuzzy(0-1,0-350) == anim-pattern-attr-presence-01.svg anim-pattern-attr-presence-01-ref.svg +fuzzy-if(cocoaWidget&&layersGPUAccelerated,0-1,0-2) == anim-gradient-attr-presence-01.svg anim-gradient-attr-presence-01-ref.svg + +== api-sanity-1.svg lime.svg + +== freeze-applied-late-1.svg anim-standard-ref.svg +== freeze-applied-late-2.svg anim-standard-ref.svg +== freeze-applied-late-3.svg anim-standard-ref.svg +== freeze-applied-late-4.svg anim-standard-ref.svg +== frozen-to-anim-1.svg lime.svg + +== inactivate-with-active-unchanged-1.svg anim-standard-ref.svg +== inactivate-with-active-unchanged-2.svg anim-standard-ref.svg + +== mapped-attr-long-url-1.svg lime.svg +== mapped-attr-long-url-2.svg lime.svg + +== min-1.svg lime.svg + +== shadow-dom-01.html lime.svg + +== smil-transitions-interaction-1a.svg lime.svg +== smil-transitions-interaction-1b.svg lime.svg +== smil-transitions-interaction-2a.svg lime.svg +== smil-transitions-interaction-2b.svg lime.svg +== smil-transitions-interaction-3a.svg lime.svg +== smil-transitions-interaction-3b.svg lime.svg +== smil-transitions-interaction-4a.svg lime.svg +== smil-transitions-interaction-4b.svg lime.svg + +# Test filtering of excessive times +== filtered-instance-time-1.svg anim-standard-ref.svg + +# Animation tests disable reduceTimerPrecision because they use a screenshot +# mechanism that relies on performance.now(), and on low precision that can be +# finnicky. + +# Test animation using defs element +pref(privacy.reduceTimerPrecision,false) == anim-defs-gradient-property.svg lime.svg +pref(privacy.reduceTimerPrecision,false) == anim-defs-gradient-attribute.svg lime.svg +pref(privacy.reduceTimerPrecision,false) == anim-defs-fill.svg lime.svg +pref(privacy.reduceTimerPrecision,false) == anim-defs-width.svg lime.svg + +# Test animation that changes 'display' attribute +pref(privacy.reduceTimerPrecision,false) == anim-display.svg lime.svg +pref(privacy.reduceTimerPrecision,false) == anim-display-in-g-element.svg lime.svg + +# Test animation that change 'display' style value to 'none' +== anim-change-display-none-for-ancestor-elem.html lime.html +== anim-change-display-none-for-target-elem.html lime.html +== anim-change-display-none-for-dynamically-appended-elem.html lime.html +== anim-change-display-block-for-dynamically-appended-elem.html anim-standard-ref.html + +fuzzy(0-31,0-308) == anim-clipPath-viewBox.svg anim-clipPath-viewBox-ref.svg + +# Test animations for overflow. +== anim-overflow-shorthand.svg anim-overflow-shorthand-ref.svg diff --git a/layout/reftests/svg/smil/repeat/green-box-ref.svg b/layout/reftests/svg/smil/repeat/green-box-ref.svg new file mode 100644 index 0000000000..120941444a --- /dev/null +++ b/layout/reftests/svg/smil/repeat/green-box-ref.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <rect width="100" height="100" fill="green"/> +</svg> diff --git a/layout/reftests/svg/smil/repeat/indefinite-repeat-1.svg b/layout/reftests/svg/smil/repeat/indefinite-repeat-1.svg new file mode 100644 index 0000000000..5283736bdb --- /dev/null +++ b/layout/reftests/svg/smil/repeat/indefinite-repeat-1.svg @@ -0,0 +1,9 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(5)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <rect width="100" height="100" fill="red"> + <set attributeName="fill" to="green" dur="1s" repeatDur="indefinite"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/repeat/init-repeat-1-ref.svg b/layout/reftests/svg/smil/repeat/init-repeat-1-ref.svg new file mode 100644 index 0000000000..88af1199fd --- /dev/null +++ b/layout/reftests/svg/smil/repeat/init-repeat-1-ref.svg @@ -0,0 +1,8 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <g transform="translate(50 50)"> + <circle r="40" style="fill: yellow; stroke: black; stroke-width: 1"/> + <path d="M0 -10v20" stroke="blue"/> + <path d="M100 -10v20" stroke="blue"/> + <path d="M200 -10v20" stroke="blue"/> + </g> +</svg> diff --git a/layout/reftests/svg/smil/repeat/init-repeat-1.svg b/layout/reftests/svg/smil/repeat/init-repeat-1.svg new file mode 100644 index 0000000000..7481fbcba8 --- /dev/null +++ b/layout/reftests/svg/smil/repeat/init-repeat-1.svg @@ -0,0 +1,47 @@ +<!-- + The following tests an anomaly in the SMIL Animation spec. + + SMILANIM 3.6.8 says: + + Thus the strict definition of the first acceptable interval for the element + is the first interval that ends after the document begins. + + This is then demonstrated in pseudocode. + + However, it is contradicted by a statement just before the first that says: + + The element has one or more intervals defined that begin and end before the + document begins (before 0). These are filtered out of the model. + + So there is some ambiguity about intervals that end at time zero. However, the + first statement seems more authorative ("the strict definition") and the + second statement does not explicitly say that intervals that end at t=0 are + not filtered. Furthermore, the pseudocode is in agreement with the first + statement so we conclude that if an interval finishes at time zero it is not + an acceptable interval and is filtered out. + + The following animation sets up such an interval, that, based on its + repeatCount has an active duration of 1s, producing an interval of (-1s, 0s). + Therefore this interval should be filtered out and no animation effect should + be produced. The circle should remain at position 0 (the first marker). If the + interval is not correctly filtered out it will be at position 100 (the second + marker). + + We include this test as a regression test so that no one is tempted to "fix" + this behaviour. + + Note that this behaviour persists even in SMIL 3 (including the ambiguity + noted above). + See http://www.w3.org/TR/SMIL3/smil-timing.html#Timing-BeginEnd-LC-Start + --> +<svg xmlns="http://www.w3.org/2000/svg"> + <g transform="translate(50 50)"> + <circle r="40" style="fill: yellow; stroke: black; stroke-width: 1"> + <animate attributeName="cx" attributeType="XML" fill="freeze" + values="0; 200" dur="2s" begin="-1s" repeatCount="0.5"/> + </circle> + <path d="M0 -10v20" stroke="blue"/> + <path d="M100 -10v20" stroke="blue"/> + <path d="M200 -10v20" stroke="blue"/> + </g> +</svg> diff --git a/layout/reftests/svg/smil/repeat/reftest.list b/layout/reftests/svg/smil/repeat/reftest.list new file mode 100644 index 0000000000..9249500c7c --- /dev/null +++ b/layout/reftests/svg/smil/repeat/reftest.list @@ -0,0 +1,3 @@ +# Tests for repeat behaviour +== indefinite-repeat-1.svg green-box-ref.svg +== init-repeat-1.svg init-repeat-1-ref.svg diff --git a/layout/reftests/svg/smil/restart/green-box-ref.svg b/layout/reftests/svg/smil/restart/green-box-ref.svg new file mode 100644 index 0000000000..120941444a --- /dev/null +++ b/layout/reftests/svg/smil/restart/green-box-ref.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <rect width="100" height="100" fill="green"/> +</svg> diff --git a/layout/reftests/svg/smil/restart/reftest.list b/layout/reftests/svg/smil/restart/reftest.list new file mode 100644 index 0000000000..98ed6d4b13 --- /dev/null +++ b/layout/reftests/svg/smil/restart/reftest.list @@ -0,0 +1,8 @@ +# Tests for restart behaviour +== reset-1.svg reset-1-ref.svg +== reset-2.svg green-box-ref.svg +== reset-3.svg green-box-ref.svg +== reset-4.svg green-box-ref.svg +# reset-5.svg is no longer valid and has been removed +== reset-6.svg green-box-ref.svg +== reset-7.svg green-box-ref.svg diff --git a/layout/reftests/svg/smil/restart/reset-1-ref.svg b/layout/reftests/svg/smil/restart/reset-1-ref.svg new file mode 100644 index 0000000000..2e85bda91d --- /dev/null +++ b/layout/reftests/svg/smil/restart/reset-1-ref.svg @@ -0,0 +1,6 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <circle cx="150" cy="50" r="30" fill="blue"/> + <circle cx="150" cy="120" r="30" fill="blue"/> + <circle cx="150" cy="190" r="30" fill="blue"/> + <circle cx="50" cy="260" r="30" fill="blue"/> +</svg> diff --git a/layout/reftests/svg/smil/restart/reset-1.svg b/layout/reftests/svg/smil/restart/reset-1.svg new file mode 100644 index 0000000000..d33c3b38a1 --- /dev/null +++ b/layout/reftests/svg/smil/restart/reset-1.svg @@ -0,0 +1,84 @@ +<!-- + This tests reset behaviour (SMILANIM 3.3.7). + + Reset behaviour is invoked when an element restarts. Some instance times + (DOM calls, event-based instance times etc.) should be cleared on a reset. + Other instance times should not. This test build up the following timegraph: + + |...| |...| |...| |...| + ^ ^ ^ ^ + A B C D + + Instance times A and C are created by the begin spec and are offset time + values which should NOT be cleared on a reset, e.g. begin="1s; 3s" + + Instance times B and D are created by DOM calls and SHOULD be cleared on + a reset. + + A reset will occur when the interval beginning with begin instance time + B begins. At this time a reset is performed and only instance time D should + be cleared. That is, the animation should play THREE (3) times, not four. + + We would like to inspect the result at each of the intervals. To do this + using a reftest we duplicate the animate four-times and adjust the timing so + that at the animation sample time we are mid-way through each of the four + intervals. + + --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="addInstanceTimes()"> + <script type="text/ecmascript"><![CDATA[ + function addInstanceTimes() { + document.documentElement.setCurrentTime(0); + var animate1 = document.getElementById('animate1'); + animate1.beginElementAt(10); + animate1.beginElementAt(4); + var animate2 = document.getElementById('animate2'); + animate2.beginElementAt(1.8); + animate2.beginElementAt(3.8); + var animate3 = document.getElementById('animate3'); + animate3.beginElementAt(1.2); + animate3.beginElementAt(2.4); + var animate4 = document.getElementById('animate4'); + animate4.beginElementAt(0.6); + animate4.beginElementAt(1.8); + setTimeAndSnapshot(2, true); + } + ]]></script> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Animation #1: Should be mid-way through first interval at t=2 + Set up intervals: 1-3 4-6 7-9 10-12 + --> + <circle cx="50" cy="50" r="30" fill="blue"> + <animate attributeName="cx" attributeType="XML" + to="250" begin="1s; 7s" dur="2s" fill="remove" id="animate1"/> + </circle> + <!-- + Animation #2: Should be mid-way through second interval at t=2 + Set up intervals: 0.8-1.2 1.8-2.2 2.8-3.2 3.8-4.2 + --> + <circle cx="50" cy="120" r="30" fill="blue"> + <animate attributeName="cx" attributeType="XML" + to="250" begin="0.8; 2.8" dur="0.4s" fill="remove" id="animate2"/> + </circle> + <!-- + Animation #3: Should be mid-way through third interval at t=2 + Set up intervals: 0.6-1.0 1.2-1.6 1.8-2.2 2.4-2.8 + --> + <circle cx="50" cy="190" r="30" fill="blue"> + <animate attributeName="cx" attributeType="XML" + to="250" begin="0.6; 1.8" dur="0.4s" fill="remove" id="animate3"/> + </circle> + <!-- + Animation #4: Would be mid-way through fourth interval at t=2 if the + instance time wasn't cleared + Set up intervals: 0.1-0.5 0.6-1.0 1.2-1.6 1.8-2.2 + --> + <circle cx="50" cy="260" r="30" fill="blue"> + <animate attributeName="cx" attributeType="XML" + to="250" begin="0.1; 1.2" dur="0.4s" fill="remove" id="animate4"/> + </circle> +</svg> diff --git a/layout/reftests/svg/smil/restart/reset-2.svg b/layout/reftests/svg/smil/restart/reset-2.svg new file mode 100644 index 0000000000..04b4b1bfff --- /dev/null +++ b/layout/reftests/svg/smil/restart/reset-2.svg @@ -0,0 +1,33 @@ +<!-- + We want to test that reset behaviour is actually applied when an animation + restarts and not before. + + Therefore we build up the following graph: + + |..| |..| + 1 2 3 4 + + But at t=2.5s we add a begin instance at t=3.9s. This should be cleared when + we restart at t=3s and hence the animation should no longer be playing at + t=4s. + --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="addInstanceTimes()"> + <script type="text/ecmascript"><![CDATA[ + function addInstanceTimes() { + var svg = document.documentElement; + svg.pauseAnimations(); + svg.setCurrentTime(2.5); + var anim = document.getElementById('anim'); + anim.beginElementAt(1.4); + setTimeAndSnapshot(4.0, true); + } + ]]></script> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <rect width="100" height="100" fill="green"> + <set attributeName="fill" attributeType="CSS" + to="red" begin="1s; 3s" dur="1s" fill="remove" id="anim"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/restart/reset-3.svg b/layout/reftests/svg/smil/restart/reset-3.svg new file mode 100644 index 0000000000..e4f44b29c0 --- /dev/null +++ b/layout/reftests/svg/smil/restart/reset-3.svg @@ -0,0 +1,39 @@ +<!-- + A variation on reset-2.svg. + + Perhaps surprisingly, restart behaviour only applies for the second interval + onwards. This is inconsistent but it's the spec + (see http://lists.w3.org/Archives/Public/www-smil/2009OctDec/0004.html) + + In this test we ensure that times are NOT cleared upon starting the first + interval. + + Therefore we build up the following graph: + + |..| + 1 2 + + But at t=0.5s we add a begin instance at t=1.5s. This should NOT be cleared + when we start at t=1s and hence the animation should STILL be playing + at t=2.0s. + --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="addInstanceTimes()"> + <script type="text/ecmascript"><![CDATA[ + function addInstanceTimes() { + var svg = document.documentElement; + svg.pauseAnimations(); + svg.setCurrentTime(0.5); + var anim = document.getElementById('anim'); + anim.beginElementAt(1); + setTimeAndSnapshot(2.0, true); + } + ]]></script> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <rect width="100" height="100" fill="red"> + <set attributeName="fill" attributeType="CSS" + to="green" begin="1s" dur="1s" fill="remove" id="anim"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/restart/reset-4.svg b/layout/reftests/svg/smil/restart/reset-4.svg new file mode 100644 index 0000000000..320a8245a4 --- /dev/null +++ b/layout/reftests/svg/smil/restart/reset-4.svg @@ -0,0 +1,27 @@ +<!-- + According to the SMIL pseudocode if no end attribute is specified the end of + an interval is just the active end. This, however, effectively makes + endElement useless on animations which have no end attribute specified. This + seems counter-intuitive, so this test checks that endElement still takes + effect on animation without an end attribute. + --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="addInstanceTimes()"> + <script type="text/ecmascript"><![CDATA[ + function addInstanceTimes() { + var svg = document.documentElement; + svg.pauseAnimations(); + svg.setCurrentTime(1.0); + var anim = document.getElementById('anim'); + anim.endElementAt(0.5); + setTimeAndSnapshot(1.5, true); + } + ]]></script> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <rect width="100" height="100" fill="green"> + <set attributeName="fill" attributeType="CSS" + to="red" begin="1s" dur="1s" fill="remove" id="anim"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/restart/reset-6.svg b/layout/reftests/svg/smil/restart/reset-6.svg new file mode 100644 index 0000000000..a0fe33ae2d --- /dev/null +++ b/layout/reftests/svg/smil/restart/reset-6.svg @@ -0,0 +1,58 @@ +<!-- + SMIL3 5.4.3, "Resetting element state" has: + + Any instance times associated with past Event-values, Repeat-values, + Accesskey-values or added via DOM method calls are removed from the + dependent begin and end instance times lists. In effect, all events and DOM + methods calls in the past are cleared. This does not apply to an instance + time that defines the begin of the current interval. + + In this test we have the following scenario: + + <set begin="1s" end="2s" dur="1s" ... /> + + giving us: + + |...| + 1 2 + + Then at t=1.5s we have the following DOM calls + + anim.beginElementAt(1.5); + anim.endElementAt(2); + + potentially giving us: + + |...| | | + ^ + 1 2 3 3.5 + + At t=2s we'll go to look for the next interval and construct one from 3s-3.5s. + We should apply restart behaviour at t=3s meaning we'll reset instance times + generated by DOM calls in the past however we'll keep the begin instance time + at 3s since it defines the beginning of the (now) current interval. Sticking + to the letter of the spec quoted above however, we'll end up clearing the end + instance at 3.5s. Yet in this case we should use the active end (t=4s) since + there's no end attribute specified. + --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="addInstanceTimes()"> + <script type="text/ecmascript"><![CDATA[ + function addInstanceTimes() { + var svg = document.documentElement; + svg.pauseAnimations(); + svg.setCurrentTime(1.5); + var anim = document.getElementById('anim'); + anim.beginElementAt(1.5); + anim.endElementAt(2); + setTimeAndSnapshot(3.7, true); + } + ]]></script> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <rect width="100" height="100" fill="red"> + <set attributeName="fill" attributeType="CSS" + to="green" begin="1s" dur="1s" fill="remove" id="anim"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/restart/reset-7.svg b/layout/reftests/svg/smil/restart/reset-7.svg new file mode 100644 index 0000000000..4614b81198 --- /dev/null +++ b/layout/reftests/svg/smil/restart/reset-7.svg @@ -0,0 +1,25 @@ +<!-- + A variation on reset-6.svg but this time since the animation has an end + specification the second interval SHOULD be deleted. + --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="addInstanceTimes()"> + <script type="text/ecmascript"><![CDATA[ + function addInstanceTimes() { + var svg = document.documentElement; + svg.pauseAnimations(); + svg.setCurrentTime(1.5); + var anim = document.getElementById('anim'); + anim.beginElementAt(1.5); + anim.endElementAt(2.5); + setTimeAndSnapshot(3.2, true); + } + ]]></script> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <rect width="100" height="100" fill="green"> + <set attributeName="fill" attributeType="CSS" + to="red" begin="1s" end="2s" dur="1s" fill="remove" id="anim"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/seek/anim-standard-ref.svg b/layout/reftests/svg/smil/seek/anim-standard-ref.svg new file mode 100644 index 0000000000..39f37ae6d1 --- /dev/null +++ b/layout/reftests/svg/smil/seek/anim-standard-ref.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <rect x="15" y="15" width="200" height="200" fill="blue"/> +</svg> diff --git a/layout/reftests/svg/smil/seek/anim-standard-ref.xhtml b/layout/reftests/svg/smil/seek/anim-standard-ref.xhtml new file mode 100644 index 0000000000..a50c83bd0e --- /dev/null +++ b/layout/reftests/svg/smil/seek/anim-standard-ref.xhtml @@ -0,0 +1,8 @@ +<?xml version="1.0" encoding="UTF-8" ?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<body> +<svg xmlns="http://www.w3.org/2000/svg" width="230px" height="230px"> + <rect x="15" y="15" width="200" height="200" fill="blue"/> +</svg> +</body> +</html> diff --git a/layout/reftests/svg/smil/seek/anim-x-seek-1a.svg b/layout/reftests/svg/smil/seek/anim-x-seek-1a.svg new file mode 100644 index 0000000000..76c4f098ab --- /dev/null +++ b/layout/reftests/svg/smil/seek/anim-x-seek-1a.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + class="reftest-wait" + onload="go()"> + <script type="text/javascript"> + function go() { + // Pause, seek to middle of animation, and then seek to exactly 1 duration + // before the animation begins (to make sure animation effects are cleared) + var svg = document.documentElement; + svg.pauseAnimations(); + svg.setCurrentTime(3); + svg.setCurrentTime(0); + svg.removeAttribute("class"); + } + </script> + <rect x="15" y="15" width="200" height="200" fill="blue"> + <set attributeName="x" to="100" begin="2s" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/seek/anim-x-seek-1b.svg b/layout/reftests/svg/smil/seek/anim-x-seek-1b.svg new file mode 100644 index 0000000000..76c4f098ab --- /dev/null +++ b/layout/reftests/svg/smil/seek/anim-x-seek-1b.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + class="reftest-wait" + onload="go()"> + <script type="text/javascript"> + function go() { + // Pause, seek to middle of animation, and then seek to exactly 1 duration + // before the animation begins (to make sure animation effects are cleared) + var svg = document.documentElement; + svg.pauseAnimations(); + svg.setCurrentTime(3); + svg.setCurrentTime(0); + svg.removeAttribute("class"); + } + </script> + <rect x="15" y="15" width="200" height="200" fill="blue"> + <set attributeName="x" to="100" begin="2s" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/seek/anim-x-seek-1c.svg b/layout/reftests/svg/smil/seek/anim-x-seek-1c.svg new file mode 100644 index 0000000000..95fd19bb4b --- /dev/null +++ b/layout/reftests/svg/smil/seek/anim-x-seek-1c.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + class="reftest-wait" + onload="go()"> + <script type="text/javascript"> + function go() { + // Pause, seek to middle of animation, and then seek to the exact ending + // of the animation (to make sure animation effects are cleared) + var svg = document.documentElement; + svg.pauseAnimations(); + svg.setCurrentTime(3); + svg.setCurrentTime(4); + svg.removeAttribute("class"); + } + </script> + <rect x="15" y="15" width="200" height="200" fill="blue"> + <set attributeName="x" to="100" begin="2s" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/seek/anim-x-seek-1d.svg b/layout/reftests/svg/smil/seek/anim-x-seek-1d.svg new file mode 100644 index 0000000000..bb0edc7474 --- /dev/null +++ b/layout/reftests/svg/smil/seek/anim-x-seek-1d.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + class="reftest-wait" + onload="go()"> + <script type="text/javascript"> + function go() { + // Pause, seek to middle of animation, and then seek to a time after + // the animation is over (to make sure animation effects are cleared) + var svg = document.documentElement; + svg.pauseAnimations(); + svg.setCurrentTime(3); + svg.setCurrentTime(5); + svg.removeAttribute("class"); + } + </script> + <rect x="15" y="15" width="200" height="200" fill="blue"> + <set attributeName="x" to="100" begin="2s" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/seek/anim-x-seek-1e.svg b/layout/reftests/svg/smil/seek/anim-x-seek-1e.svg new file mode 100644 index 0000000000..b8175fb4cd --- /dev/null +++ b/layout/reftests/svg/smil/seek/anim-x-seek-1e.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" + class="reftest-wait" + onload="go()"> + <script type="text/javascript"> + function go() { + // Test a backwards seek covering many intervals + var svg = document.documentElement; + svg.pauseAnimations(); + svg.setCurrentTime(15); + svg.setCurrentTime(3.5); + svg.removeAttribute("class"); + } + </script> + <rect x="100" y="15" width="200" height="200" fill="blue"> + <set attributeName="x" to="15" begin="1s; 3s; 5s; 7s; 9s; 11s" dur="1s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/seek/anim-x-seek-cross-container-1a.xhtml b/layout/reftests/svg/smil/seek/anim-x-seek-cross-container-1a.xhtml new file mode 100644 index 0000000000..4e7cc65222 --- /dev/null +++ b/layout/reftests/svg/smil/seek/anim-x-seek-cross-container-1a.xhtml @@ -0,0 +1,35 @@ +<?xml version="1.0" encoding="UTF-8" ?> +<html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait"> +<!-- + Test backwards seeking with cross-time container dependencies. + --> +<head> +<script> +function snapshot() +{ + var a = document.getElementById("svg-a"); + var b = document.getElementById("svg-b"); + a.pauseAnimations(); + b.pauseAnimations(); + a.setCurrentTime(0); + b.setCurrentTime(2); // 'b' has now begun and 'a' has a begin time of '-1s' in + // a's container time + b.setCurrentTime(1); // Perform a backwards seek--'a' should now have a begin + // time of '0s' in container time + a.setCurrentTime(1); // So seeking forward 1s should get us to the middle of + // the interval + document.documentElement.removeAttribute("class"); +} +</script> +</head> +<body onload="snapshot()"> +<svg xmlns="http://www.w3.org/2000/svg" width="230px" height="230px" id="svg-a"> + <rect x="100" y="15" width="200" height="200" fill="blue"> + <animate attributeName="x" from="0" to="30" begin="b.begin" dur="2s"/> + </rect> +</svg> +<svg xmlns="http://www.w3.org/2000/svg" width="230px" height="230px" id="svg-b"> + <set attributeName="y" to="0" begin="1s" id="b"/> +</svg> +</body> +</html> diff --git a/layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1a.svg b/layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1a.svg new file mode 100644 index 0000000000..75a782ab52 --- /dev/null +++ b/layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1a.svg @@ -0,0 +1,20 @@ +<svg xmlns="http://www.w3.org/2000/svg" + class="reftest-wait" + onload="go()"> + <script type="text/javascript"> + function go() { + // Perform a backwards seek within an interval whose begin point is + // generated by a dynamic event (to make sure such times are preserved when + // we rewind). + var svg = document.documentElement; + svg.pauseAnimations(); + document.getElementById('a').beginElementAt(2); + svg.setCurrentTime(3); + svg.setCurrentTime(2.5); + svg.removeAttribute("class"); + } + </script> + <rect x="100" y="15" width="200" height="200" fill="blue"> + <set attributeName="x" to="15" begin="indefinite" dur="2s" id="a"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1b.svg b/layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1b.svg new file mode 100644 index 0000000000..e17b49edf2 --- /dev/null +++ b/layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1b.svg @@ -0,0 +1,19 @@ +<svg xmlns="http://www.w3.org/2000/svg" + class="reftest-wait" + onload="go()"> + <script type="text/javascript"> + function go() { + // Check that dynamic end times are preserved during a backwards seek + var svg = document.documentElement; + svg.pauseAnimations(); + svg.setCurrentTime(3); + document.getElementById('a').endElement(); + svg.setCurrentTime(4); + svg.setCurrentTime(3); + svg.removeAttribute("class"); + } + </script> + <rect x="15" y="15" width="200" height="200" fill="blue"> + <set attributeName="x" to="100" begin="2s" dur="2s" id="a"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1c.svg b/layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1c.svg new file mode 100644 index 0000000000..0a015bf4b3 --- /dev/null +++ b/layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1c.svg @@ -0,0 +1,31 @@ +<svg xmlns="http://www.w3.org/2000/svg" + class="reftest-wait" + onload="go()"> + <script type="text/javascript"> + function go() { + // Check that dynamic times are preserved even from filtering + var svg = document.documentElement; + var a = document.getElementById('a'); + svg.pauseAnimations(); + // Generate a series of intervals with dynamic begin points + svg.setCurrentTime(1); + a.beginElement(); + svg.setCurrentTime(3); + a.beginElement(); + svg.setCurrentTime(5); + a.beginElement(); + svg.setCurrentTime(7); + a.beginElement(); + svg.setCurrentTime(9); + a.beginElement(); + svg.setCurrentTime(11); + // By now, the first interval will have been filtered but test that we have + // preserved the instance time in order to reconstruct it + svg.setCurrentTime(1.5); + svg.removeAttribute("class"); + } + </script> + <rect x="100" y="15" width="200" height="200" fill="blue"> + <set attributeName="x" to="15" begin="indefinite" dur="1s" id="a"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1d.svg b/layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1d.svg new file mode 100644 index 0000000000..e02ecd9ff9 --- /dev/null +++ b/layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1d.svg @@ -0,0 +1,30 @@ +<svg xmlns="http://www.w3.org/2000/svg" + class="reftest-wait" + onload="go()"> + <script type="text/javascript"> + function go() { + // Check that whilst processing past intervals reset does not clear dynamic + // instance times of future intervals + var svg = document.documentElement; + var a = document.getElementById('a'); + svg.pauseAnimations(); + // Generate a series of intervals with dynamic begin points + svg.setCurrentTime(1); + a.beginElement(); + svg.setCurrentTime(3); + a.beginElement(); + svg.setCurrentTime(5); + a.beginElement(); + svg.setCurrentTime(7); + a.beginElement(); + svg.setCurrentTime(5.5); // Backwards seek will cause us to rebuild the + // world but in the process we should not clear the + // dynamic instance times for future intervals on + // each restart + svg.removeAttribute("class"); + } + </script> + <rect x="100" y="15" width="200" height="200" fill="blue"> + <set attributeName="x" to="15" begin="indefinite" dur="1s" id="a"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1e.svg b/layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1e.svg new file mode 100644 index 0000000000..87743e9dd6 --- /dev/null +++ b/layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1e.svg @@ -0,0 +1,23 @@ +<svg xmlns="http://www.w3.org/2000/svg" + class="reftest-wait" + onload="go()"> + <script type="text/javascript"> + function go() { + // Check that dynamic times are reset during a forwards seek + var svg = document.documentElement; + var a = document.getElementById('a'); + svg.pauseAnimations(); + svg.setCurrentTime(1); // First interval 1s-2s + a.beginElement(); + svg.setCurrentTime(2); + a.beginElementAt(1); // Add instance time t=3s + a.beginElementAt(3); // Add instance time t=5s -- should be cleared during + // the seek when we process the restart at t=3s + svg.setCurrentTime(5); // Hence at t=5s we should be inactive + svg.removeAttribute("class"); + } + </script> + <rect x="15" y="15" width="200" height="200" fill="blue"> + <set attributeName="x" to="100" begin="indefinite" dur="1s" id="a"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1f.svg b/layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1f.svg new file mode 100644 index 0000000000..9164c2ca6a --- /dev/null +++ b/layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1f.svg @@ -0,0 +1,30 @@ +<svg xmlns="http://www.w3.org/2000/svg" + class="reftest-wait" + onload="go()"> + <script type="text/javascript"> + function go() { + // Check that dynamic times are reset during a backwards seek + var svg = document.documentElement; + var a = document.getElementById('a'); + svg.pauseAnimations(); + svg.setCurrentTime(1); + a.beginElement(); // First interval: 1s-2s + a.endElementAt(1); + a.beginElementAt(2); // Second interval: 3s-indef + svg.setCurrentTime(5); + a.endElementAt(1); // Add end time at 6s + svg.setCurrentTime(4); // Perform backwards seek from 5s->4s + svg.setCurrentTime(6); // End time at 6s should have been cleared + // and we should still be active + // (See SMIL 3.0, 'Hyperlinks and timing' which has: + // Resolved end times associated with events, + // Repeat-values, Accesskey-values or added via DOM + // method calls are cleared when seeking to time + // earlier than the resolved end time. + svg.removeAttribute("class"); + } + </script> + <rect x="100" y="15" width="200" height="200" fill="blue"> + <set attributeName="x" to="15" begin="indefinite" dur="indefinite" id="a"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1g.svg b/layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1g.svg new file mode 100644 index 0000000000..43a0d4e907 --- /dev/null +++ b/layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1g.svg @@ -0,0 +1,23 @@ +<svg xmlns="http://www.w3.org/2000/svg" + class="reftest-wait" + onload="go()"> + <script type="text/javascript"> + function go() { + // Check that dynamic interval end times are reset during a backwards seek + var svg = document.documentElement; + var a = document.getElementById('a'); + svg.pauseAnimations(); + svg.setCurrentTime(1); + a.beginElement(); // First interval 1s-2s + a.endElementAt(1); + svg.setCurrentTime(3); + svg.setCurrentTime(1.5); // Backwards seek to 1.5s -- instance time at t=2s + // should be reset + svg.setCurrentTime(3); // Should still be active + svg.removeAttribute("class"); + } + </script> + <rect x="100" y="15" width="200" height="200" fill="blue"> + <set attributeName="x" to="15" begin="indefinite" dur="indefinite" id="a"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1h.svg b/layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1h.svg new file mode 100644 index 0000000000..a00cefdf48 --- /dev/null +++ b/layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1h.svg @@ -0,0 +1,21 @@ +<svg xmlns="http://www.w3.org/2000/svg" + class="reftest-wait" + onload="go()"> + <script type="text/javascript"> + function go() { + // Check that dynamic times are not prematurely reset during a forwards seek + var svg = document.documentElement; + var a = document.getElementById('a'); + svg.pauseAnimations(); + svg.setCurrentTime(1); + a.beginElement(); // Interval: 1s-3s + a.endElementAt(2); + svg.setCurrentTime(2); // Should not cause end time at t=3s to be reset + svg.setCurrentTime(3); // Should no longer be active + svg.removeAttribute("class"); + } + </script> + <rect x="15" y="15" width="200" height="200" fill="blue"> + <set attributeName="x" to="100" begin="indefinite" dur="indefinite" id="a"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1i.svg b/layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1i.svg new file mode 100644 index 0000000000..9f19eefcd6 --- /dev/null +++ b/layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1i.svg @@ -0,0 +1,31 @@ +<svg xmlns="http://www.w3.org/2000/svg" + class="reftest-wait" + onload="go()"> + <script type="text/javascript"> + function go() { + // Check that past dynamic times are still preserved after a backwards seek. + // (The converse, that now-future dynamic times are reset during a backwards + // seek is covered by anim-x-seek-dynamic-1g.svg) + var svg = document.documentElement; + var a = document.getElementById('a'); + svg.pauseAnimations(); + // Generate a series of intervals with dynamic begin points + svg.setCurrentTime(1); + a.beginElement(); + svg.setCurrentTime(3); + a.beginElement(); + svg.setCurrentTime(5); + a.beginElement(); + svg.setCurrentTime(7); + a.beginElement(); + svg.setCurrentTime(5); // Backwards seek (1) -- at this point we'll do + // a reset but old dynamic times (e.g. t=1s) should + // be preserved + svg.setCurrentTime(1); // Backwards seek (2) + svg.removeAttribute("class"); + } + </script> + <rect x="100" y="15" width="200" height="200" fill="blue"> + <set attributeName="x" to="15" begin="indefinite" dur="1s" id="a"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/seek/anim-x-seek-negative-1a.svg b/layout/reftests/svg/smil/seek/anim-x-seek-negative-1a.svg new file mode 100644 index 0000000000..5e04739a0e --- /dev/null +++ b/layout/reftests/svg/smil/seek/anim-x-seek-negative-1a.svg @@ -0,0 +1,16 @@ +<svg xmlns="http://www.w3.org/2000/svg" + class="reftest-wait" + onload="go()"> + <script type="text/javascript"> + function go() { + // A negative seek should be clamped to 0 + var svg = document.documentElement; + svg.pauseAnimations(); + svg.setCurrentTime(-1); + svg.removeAttribute("class"); + } + </script> + <rect x="100" y="15" width="200" height="200" fill="blue"> + <animate attributeName="x" from="0" to="30" begin="-1s" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/seek/reftest.list b/layout/reftests/svg/smil/seek/reftest.list new file mode 100644 index 0000000000..28e055885e --- /dev/null +++ b/layout/reftests/svg/smil/seek/reftest.list @@ -0,0 +1,17 @@ +# Tests for seeking behaviour +== anim-x-seek-1a.svg anim-standard-ref.svg +== anim-x-seek-1b.svg anim-standard-ref.svg +== anim-x-seek-1c.svg anim-standard-ref.svg +== anim-x-seek-1d.svg anim-standard-ref.svg +== anim-x-seek-1e.svg anim-standard-ref.svg +== anim-x-seek-dynamic-1a.svg anim-standard-ref.svg +== anim-x-seek-dynamic-1b.svg anim-standard-ref.svg +== anim-x-seek-dynamic-1c.svg anim-standard-ref.svg +== anim-x-seek-dynamic-1d.svg anim-standard-ref.svg +== anim-x-seek-dynamic-1e.svg anim-standard-ref.svg +== anim-x-seek-dynamic-1f.svg anim-standard-ref.svg +== anim-x-seek-dynamic-1g.svg anim-standard-ref.svg +== anim-x-seek-dynamic-1h.svg anim-standard-ref.svg +== anim-x-seek-dynamic-1i.svg anim-standard-ref.svg +== anim-x-seek-negative-1a.svg anim-standard-ref.svg +== anim-x-seek-cross-container-1a.xhtml anim-standard-ref.xhtml diff --git a/layout/reftests/svg/smil/set/reftest.list b/layout/reftests/svg/smil/set/reftest.list new file mode 100644 index 0000000000..d5ec83f243 --- /dev/null +++ b/layout/reftests/svg/smil/set/reftest.list @@ -0,0 +1,2 @@ +== set-css-fontsize-freeze-1.svg set-css-fontsize-freeze-1-ref.svg +== set-css-fontsize-remove-1.svg set-css-fontsize-remove-1-ref.svg diff --git a/layout/reftests/svg/smil/set/set-css-fontsize-freeze-1-ref.svg b/layout/reftests/svg/smil/set/set-css-fontsize-freeze-1-ref.svg new file mode 100644 index 0000000000..086c9367a5 --- /dev/null +++ b/layout/reftests/svg/smil/set/set-css-fontsize-freeze-1-ref.svg @@ -0,0 +1,11 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <text x="20px" y="20px" style="font-size: 10px">abc</text> + <text x="70px" y="20px" style="font-size: 20px">abc</text> + <text x="120px" y="20px" style="font-size: 20px">abc</text> + <text x="20px" y="70px" style="font-size: 20px">abc</text> + <text x="70px" y="70px" style="font-size: 20px">abc</text> + <text x="120px" y="70px" style="font-size: 20px">abc</text> + <text x="20px" y="120px" style="font-size: 20px">abc</text> + <text x="70px" y="120px" style="font-size: 20px">abc</text> + <text x="120px" y="120px" style="font-size: 20px">abc</text> +</svg> diff --git a/layout/reftests/svg/smil/set/set-css-fontsize-freeze-1.svg b/layout/reftests/svg/smil/set/set-css-fontsize-freeze-1.svg new file mode 100644 index 0000000000..f2865b1e80 --- /dev/null +++ b/layout/reftests/svg/smil/set/set-css-fontsize-freeze-1.svg @@ -0,0 +1,16 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="font-size: 10px" + class="reftest-wait" + onload="go()"> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "font-size", + "to" : "20px", + "fill" : "freeze"}; + testAnimatedTextGrid("set", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/set/set-css-fontsize-remove-1-ref.svg b/layout/reftests/svg/smil/set/set-css-fontsize-remove-1-ref.svg new file mode 100644 index 0000000000..d8ac85218a --- /dev/null +++ b/layout/reftests/svg/smil/set/set-css-fontsize-remove-1-ref.svg @@ -0,0 +1,11 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <text x="20px" y="20px" style="font-size: 10px">abc</text> + <text x="70px" y="20px" style="font-size: 20px">abc</text> + <text x="120px" y="20px" style="font-size: 20px">abc</text> + <text x="20px" y="70px" style="font-size: 20px">abc</text> + <text x="70px" y="70px" style="font-size: 20px">abc</text> + <text x="120px" y="70px" style="font-size: 20px">abc</text> + <text x="20px" y="120px" style="font-size: 20px">abc</text> + <text x="70px" y="120px" style="font-size: 10px">abc</text> + <text x="120px" y="120px" style="font-size: 10px">abc</text> +</svg> diff --git a/layout/reftests/svg/smil/set/set-css-fontsize-remove-1.svg b/layout/reftests/svg/smil/set/set-css-fontsize-remove-1.svg new file mode 100644 index 0000000000..4264c07ef8 --- /dev/null +++ b/layout/reftests/svg/smil/set/set-css-fontsize-remove-1.svg @@ -0,0 +1,16 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="font-size: 10px" + class="reftest-wait" + onload="go()"> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "font-size", + "to" : "20px", + "fill" : "remove"}; + testAnimatedTextGrid("set", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/shadow-dom-01.html b/layout/reftests/svg/smil/shadow-dom-01.html new file mode 100644 index 0000000000..01a3309340 --- /dev/null +++ b/layout/reftests/svg/smil/shadow-dom-01.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <svg width="100%" height="100%" viewBox="0 0 100 100"> + <rect width="100" height="100" fill="red"> + <set attributeName="width" to="0" begin="0s" fill="freeze"/> + </rect> + </svg> + <p></p> + <script> + let p = document.querySelector("p") + let shadow = p.attachShadow({mode: 'open'}); + shadow.appendChild(document.querySelector("svg")) + document.documentElement.removeAttribute("class"); + </script> + <style> + * { + margin: 0; + } + html { + background-color: lime; + } + </style> +</html> diff --git a/layout/reftests/svg/smil/smil-grid.js b/layout/reftests/svg/smil/smil-grid.js new file mode 100644 index 0000000000..0c8036ea27 --- /dev/null +++ b/layout/reftests/svg/smil/smil-grid.js @@ -0,0 +1,200 @@ +/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */ +/* vim: set ts=2 sw=2 sts=2 et: */ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +/* Javascript library for dynamically generating a simple SVG/SMIL reftest + * with several copies of the same animation, each seeked to a different time. + */ + +// Global variables +const START_TIMES = [ "4.0s", "3.0s", "2.7s", + "2.25s", "2.01s", "1.5s", + "1.4s", "1.0s", "0.5s" ]; + +const X_POSNS = [ "20px", "70px", "120px", + "20px", "70px", "120px", + "20px", "70px", "120px" ]; + +const Y_POSNS = [ "20px", "20px", "20px", + "70px", "70px", "70px", + "120px", "120px", "120px" ]; + +const DURATION = "2s"; +const SNAPSHOT_TIME ="3"; +const SVGNS = "http://www.w3.org/2000/svg"; + +// Convenience wrapper using testAnimatedGrid to make 15pt-by-15pt rects +function testAnimatedRectGrid(animationTagName, animationAttrHashList) { + var targetTagName = "rect"; + var targetAttrHash = {"width" : "15px", + "height" : "15px" }; + testAnimatedGrid(targetTagName, targetAttrHash, + animationTagName, animationAttrHashList); +} + +// Convenience wrapper using testAnimatedGrid to make grid of text +function testAnimatedTextGrid(animationTagName, animationAttrHashList) { + var targetTagName = "text"; + var targetAttrHash = { }; + testAnimatedGrid(targetTagName, targetAttrHash, + animationTagName, animationAttrHashList); +} + +// Generates a visual grid of elements of type "targetTagName", with the +// attribute values given in targetAttrHash. Each generated element has +// exactly one child -- an animation element of type "animationTagName", with +// the attribute values given in animationAttrHash. +function testAnimatedGrid(targetTagName, targetAttrHash, + animationTagName, animationAttrHashList) { + // SANITY CHECK + const numElementsToMake = START_TIMES.length; + if (X_POSNS.length != numElementsToMake || + Y_POSNS.length != numElementsToMake) { + return; + } + + for (var i = 0; i < animationAttrHashList.length; i++) { + var animationAttrHash = animationAttrHashList[i]; + // Default to fill="freeze" so we can test the final value of the animation + if (!animationAttrHash["fill"]) { + animationAttrHash["fill"] = "freeze"; + } + } + + // Build the grid! + var svg = document.documentElement; + for (var i = 0; i < numElementsToMake; i++) { + // Build target & animation elements + var targetElem = buildElement(targetTagName, targetAttrHash); + for (var j = 0; j < animationAttrHashList.length; j++) { + var animationAttrHash = animationAttrHashList[j]; + var animElem = buildElement(animationTagName, animationAttrHash); + + // Customize them using global constant values + targetElem.setAttribute("x", X_POSNS[i]); + targetElem.setAttribute("y", Y_POSNS[i]); + animElem.setAttribute("begin", START_TIMES[i]); + animElem.setAttribute("dur", DURATION); + + // Append to target + targetElem.appendChild(animElem); + } + // Insert target into DOM + svg.appendChild(targetElem); + } + + // Take snapshot + setTimeAndSnapshot(SNAPSHOT_TIME, true); +} + +// Generates a visual grid of elements of type |graphicElemTagName|, with the +// attribute values given in |graphicElemAttrHash|. This is a variation of the +// above function. We use <defs> to include the reference elements because +// some animatable properties are only applicable to some specific elements +// (e.g. feFlood, stop), so then we apply an animation element of type +// |animationTagName|, with the attribute values given in |animationAttrHash|, +// to those specific elements. |defTagNameList| is an array of tag names. +// We will create elements hierarchically according to this array. The first tag +// in |defTagNameList| is the outer-most one in <defs>, and the last tag is the +// inner-most one and it is the target to which the animation element will be +// applied. We visualize the effect of our animation by referencing each +// animated subtree from some graphical element that we generate. The +// |graphicElemIdValueProperty| parameter provides the name of the CSS property +// that we should use to hook up this reference. +// +// e.g. if a caller passes a defTagNameList of [ "linearGradient", "stop" ], +// this function will generate the following subtree: +// <defs> +// <linearGradient id="elem0"> +// <stop> +// <animate ..../> +// </stop> +// </linearGradient> +// <linearGradient id="elem1"> +// <stop> +// <animate ..../> +// </stop> +// </linearGradient> +// +// <!--- more similar linearGradients here, up to START_TIMES.length --> +// </defs> +function testAnimatedGridWithDefs(graphicElemTagName, + graphicElemAttrHash, + graphicElemIdValuedProperty, + defTagNameList, + animationTagName, + animationAttrHashList) { + // SANITY CHECK + const numElementsToMake = START_TIMES.length; + if (X_POSNS.length != numElementsToMake || + Y_POSNS.length != numElementsToMake) { + return; + } + + if (defTagNameList.length == 0) { + return; + } + + for (var i = 0; i < animationAttrHashList.length; i++) { + var animationAttrHash = animationAttrHashList[i]; + // Default to fill="freeze" so we can test the final value of the animation + if (!animationAttrHash["fill"]) { + animationAttrHash["fill"] = "freeze"; + } + } + + var svg = document.documentElement; + + // Build defs element. + var defs = buildElement('defs'); + for (var i = 0; i < numElementsToMake; i++) { + // This will track the innermost element in our subtree: + var innerElement = defs; + + for (var defIdx = 0; defIdx < defTagNameList.length; ++defIdx) { + // Set an ID on the first level of nesting (on child of defs): + var attrs = defIdx == 0 ? { "id": "elem" + i } : {}; + + var newElem = buildElement(defTagNameList[defIdx], attrs); + innerElement.appendChild(newElem); + innerElement = newElem; + } + + for (var j = 0; j < animationAttrHashList.length; ++j) { + var animationAttrHash = animationAttrHashList[j]; + var animElem = buildElement(animationTagName, animationAttrHash); + animElem.setAttribute("begin", START_TIMES[i]); + animElem.setAttribute("dur", DURATION); + innerElement.appendChild(animElem); + } + } + svg.appendChild(defs); + + // Build the grid! + for (var i = 0; i < numElementsToMake; ++i) { + var graphicElem = buildElement(graphicElemTagName, graphicElemAttrHash); + graphicElem.setAttribute("x", X_POSNS[i]); + graphicElem.setAttribute("y", Y_POSNS[i]); + graphicElem.setAttribute("style", graphicElemIdValuedProperty + + ":url(#elem" + i + ")"); + svg.appendChild(graphicElem); + } + + // Take snapshot + setTimeAndSnapshot(SNAPSHOT_TIME, true); +} + +function buildElement(tagName, attrHash) { + var elem = document.createElementNS(SVGNS, tagName); + for (var attrName in attrHash) { + var attrValue = attrHash[attrName]; + elem.setAttribute(attrName, attrValue); + } + // If we're creating a text node, populate it with some text. + if (tagName == "text") { + elem.appendChild(document.createTextNode("abc")); + } + return elem; +} diff --git a/layout/reftests/svg/smil/smil-transitions-interaction-1a.svg b/layout/reftests/svg/smil/smil-transitions-interaction-1a.svg new file mode 100644 index 0000000000..493ce991d8 --- /dev/null +++ b/layout/reftests/svg/smil/smil-transitions-interaction-1a.svg @@ -0,0 +1,12 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1.0, true)"> + <!-- This test checks that we don't trigger a CSS transition when + SMIL animation effects are first applied. --> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect width="100%" height="100%" + style="fill: red; transition: 200s fill"> + <set attributeName="fill" to="lime" begin="1s" dur="indefinite"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/smil-transitions-interaction-1b.svg b/layout/reftests/svg/smil/smil-transitions-interaction-1b.svg new file mode 100644 index 0000000000..ee67deb63b --- /dev/null +++ b/layout/reftests/svg/smil/smil-transitions-interaction-1b.svg @@ -0,0 +1,13 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1.0, true)"> + <!-- This test checks that we don't trigger a CSS transition when + SMIL animation effects are first applied. --> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect width="100%" height="100%" fill="red" + style="transition: 200s fill"> + <set attributeName="fill" attributeType="XML" + to="lime" begin="1s" dur="indefinite"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/smil-transitions-interaction-2a.svg b/layout/reftests/svg/smil/smil-transitions-interaction-2a.svg new file mode 100644 index 0000000000..05a5082998 --- /dev/null +++ b/layout/reftests/svg/smil/smil-transitions-interaction-2a.svg @@ -0,0 +1,12 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1.0, true)"> + <!-- This test checks that we don't trigger a CSS transition after + SMIL animation effects are applied. --> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect width="100%" height="100%" + style="fill: red; transition: 1s fill"> + <set attributeName="fill" to="lime" begin="1s" dur="indefinite"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/smil-transitions-interaction-2b.svg b/layout/reftests/svg/smil/smil-transitions-interaction-2b.svg new file mode 100644 index 0000000000..8742b208a3 --- /dev/null +++ b/layout/reftests/svg/smil/smil-transitions-interaction-2b.svg @@ -0,0 +1,13 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1.0, true)"> + <!-- This test checks that we don't trigger a CSS transition after + SMIL animation effects are applied. --> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect width="100%" height="100%" fill="red" + style="transition: 1s fill"> + <set attributeName="fill" attributeType="XML" + to="lime" begin="1s" dur="indefinite"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/smil-transitions-interaction-3a.svg b/layout/reftests/svg/smil/smil-transitions-interaction-3a.svg new file mode 100644 index 0000000000..64077c9076 --- /dev/null +++ b/layout/reftests/svg/smil/smil-transitions-interaction-3a.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="document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(1.0); + setTimeAndSnapshot(2.0, false)"> + <!-- This test checks that we don't trigger a CSS transition when + SMIL animation effects are removed. --> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect width="100%" height="100%" + style="fill: lime; transition: 200s fill"> + <set attributeName="fill" to="red" begin="1s" dur="1s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/smil-transitions-interaction-3b.svg b/layout/reftests/svg/smil/smil-transitions-interaction-3b.svg new file mode 100644 index 0000000000..331fc6f407 --- /dev/null +++ b/layout/reftests/svg/smil/smil-transitions-interaction-3b.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="document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(1.0); + setTimeAndSnapshot(2.0, false)"> + <!-- This test checks that we don't trigger a CSS transition when + SMIL animation effects are removed. --> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect width="100%" height="100%" fill="lime" + style="transition: 200s fill"> + <set attributeName="fill" attributeType="XML" + to="red" begin="1s" dur="1s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/smil-transitions-interaction-4a.svg b/layout/reftests/svg/smil/smil-transitions-interaction-4a.svg new file mode 100644 index 0000000000..2e967ccf0d --- /dev/null +++ b/layout/reftests/svg/smil/smil-transitions-interaction-4a.svg @@ -0,0 +1,21 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(1.0); + setTimeAndSnapshot(1.5, false)"> + <!-- This test checks that we don't trigger a CSS transition during + interpolation from-to animation. We seek to 1.5s, halfway through the + animation, when we're *just* to the point where the lime stroke is wide + enough to cover up the red rect behind it. If a transition were to + start, it would slow us down and allow some red to show. + --> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect width="100%" height="100%" style="fill: lime"/> + <rect width="30" height="30" style="fill: red"/> + <rect width="20" height="20" + style="fill: lime; stroke: lime; transition: 200s stroke-width"> + <animate attributeName="stroke-width" from="10px" to="30px" + begin="1s" dur="1s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/smil-transitions-interaction-4b.svg b/layout/reftests/svg/smil/smil-transitions-interaction-4b.svg new file mode 100644 index 0000000000..8033ff7cd3 --- /dev/null +++ b/layout/reftests/svg/smil/smil-transitions-interaction-4b.svg @@ -0,0 +1,21 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(1.0); + setTimeAndSnapshot(1.5, false)"> + <!-- This test checks that we don't trigger a CSS transition during + interpolation from-to animation. We seek to 1.5s, halfway through the + animation, when we're *just* to the point where the lime stroke is wide + enough to cover up the red rect behind it. If a transition were to + start, it would slow us down and allow some red to show. + --> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect width="100%" height="100%" style="fill: lime"/> + <rect width="30" height="30" style="fill: red"/> + <rect width="20" height="20" + style="fill: lime; stroke: lime; transition: 200s stroke-width"> + <animate attributeName="stroke-width" attributeType="XML" + from="10px" to="30px" begin="1s" dur="1s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/smil-util.js b/layout/reftests/svg/smil/smil-util.js new file mode 100644 index 0000000000..18573c4b64 --- /dev/null +++ b/layout/reftests/svg/smil/smil-util.js @@ -0,0 +1,26 @@ +// Seeks to the given time and then removes the SVG document's class to trigger +// a reftest snapshot. If pauseFlag is true, animations will be paused. +function setTimeAndSnapshot(timeInSeconds, pauseFlag) { + var svg = document.documentElement; + if (pauseFlag) { + svg.pauseAnimations(); + } + svg.setCurrentTime(timeInSeconds); + svg.removeAttribute("class"); +} + +// Seeks to the given time and then removes the SVG document's class to trigger +// a reftest snapshot after waiting at least minWaitTimeInSeconds. +function setTimeAndWaitToSnapshot(seekTimeInSeconds, minWaitTimeInSeconds) { + var svg = document.documentElement; + svg.setCurrentTime(seekTimeInSeconds); + var timeToTakeSnapshot = + window.performance.now() + minWaitTimeInSeconds * 1000; + requestAnimationFrame(function takeSnapshot(currentTime) { + if (currentTime > timeToTakeSnapshot) { + svg.removeAttribute("class"); + } else { + requestAnimationFrame(takeSnapshot); + } + }); +} diff --git a/layout/reftests/svg/smil/sort/reftest.list b/layout/reftests/svg/smil/sort/reftest.list new file mode 100644 index 0000000000..9303754773 --- /dev/null +++ b/layout/reftests/svg/smil/sort/reftest.list @@ -0,0 +1,12 @@ +# 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) + +== sort-startAfter-1.svg sort-startAfter-1-ref.svg +== sort-startAfter-2.svg sort-startAfter-2-ref.svg +== sort-startAfter-3.svg sort-startAfter-3-ref.svg +== sort-startSame-1a.svg sort-startSame-1-ref.svg +== sort-startSame-1b.svg sort-startSame-1-ref.svg +== sort-startSame-2a.svg sort-startSame-2-ref.svg +== sort-startSame-2b.svg sort-startSame-2-ref.svg +random == sort-additive-1.svg sort-additive-1-ref.svg # bug 547801 diff --git a/layout/reftests/svg/smil/sort/sort-additive-1-ref.svg b/layout/reftests/svg/smil/sort/sort-additive-1-ref.svg new file mode 100644 index 0000000000..755c5cf02d --- /dev/null +++ b/layout/reftests/svg/smil/sort/sort-additive-1-ref.svg @@ -0,0 +1,44 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<svg xmlns="http://www.w3.org/2000/svg"> + <!-- start line --> + <line x1="5" x2="5" y1="0" y2="330" stroke="grey" stroke-width="2" + stroke-dasharray="5,5"/> + <!-- non-additive line --> + <line x1="105" x2="105" y1="0" y2="330" stroke="grey" stroke-width="2" + stroke-dasharray="5,5"/> + <!-- additive line --> + <line x1="205" x2="205" y1="0" y2="330" stroke="grey" stroke-width="2" + stroke-dasharray="5,5"/> + <g transform="translate(5, 5)"> + <rect style="stroke: black; fill: lightskyblue" x="100" y="0" width="30" + height="30"/> + </g> + <g transform="translate(5, 45)"> + <rect style="stroke: black; fill: lightskyblue" x="200" y="0" width="30" + height="30"/> + </g> + <g transform="translate(5, 85)"> + <rect style="stroke: black; fill: lightskyblue" x="100" y="0" width="30" + height="30"/> + </g> + <g transform="translate(5, 125)"> + <rect style="stroke: black; fill: lightskyblue" x="200" y="0" width="30" + height="30"/> + </g> + <g transform="translate(5, 165)"> + <rect style="stroke: black; fill: lightskyblue" x="100" y="0" width="30" + height="30"/> + </g> + <g transform="translate(5, 205)"> + <rect style="stroke: black; fill: lightskyblue" x="200" y="0" width="30" + height="30"/> + </g> + <g transform="translate(5, 245)"> + <rect style="stroke: black; fill: lightskyblue" x="100" y="0" width="30" + height="30"/> + </g> + <g transform="translate(5, 285)"> + <rect style="stroke: black; fill: lightskyblue" x="200" y="0" width="30" + height="30"/> + </g> +</svg> diff --git a/layout/reftests/svg/smil/sort/sort-additive-1.svg b/layout/reftests/svg/smil/sort/sort-additive-1.svg new file mode 100644 index 0000000000..e60ff0a15f --- /dev/null +++ b/layout/reftests/svg/smil/sort/sort-additive-1.svg @@ -0,0 +1,116 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait"> + <script type="text/ecmascript"><![CDATA[ + function swapAnimations() { + var high = document.getElementById("high"); + high.parentNode.insertBefore(high, null); + + var low = document.getElementById("low"); + low.parentNode.insertBefore(low, low.parentNode.firstChild); + + setTimeAndSnapshot(103.1, true); + } + window.addEventListener("MozReftestInvalidate", swapAnimations, false); + ]]></script> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- start line --> + <line x1="5" x2="5" y1="0" y2="330" stroke="grey" stroke-width="2" + stroke-dasharray="5,5"/> + <!-- non-additive line --> + <line x1="105" x2="105" y1="0" y2="330" stroke="grey" stroke-width="2" + stroke-dasharray="5,5"/> + <!-- additive line --> + <line x1="205" x2="205" y1="0" y2="330" stroke="grey" stroke-width="2" + stroke-dasharray="5,5"/> + <!-- Not additive group --> + <!-- additive behaviour defaults to replace so this shouldn't add --> + <g transform="translate(5, 5)"> + <rect style="stroke: black; fill: lightskyblue" x="0" y="0" width="30" + height="30"> + <animate attributeName="x" from="0" to="100" begin="100s" dur="3s" fill="freeze"/> + <animate attributeName="x" from="0" to="100" begin="100s" dur="3s" fill="freeze"/> + </rect> + </g> + <!-- Additive group --> + <!-- We only need to specify additive behaviour on the second animation as + it will be higher in the animation sandwich --> + <g transform="translate(5, 45)"> + <rect style="stroke: black; fill: lightskyblue" x="0" y="0" width="30" + height="30"> + <animate attributeName="x" from="0" to="100" begin="100s" dur="3s" fill="freeze"/> + <animate attributeName="x" from="0" to="100" begin="100s" dur="3s" fill="freeze" + additive="sum"/> + </rect> + </g> + <!-- Not additive group --> + <!-- Specifying additive behaviour on the first animation has no effect + as it is lower in the animation sandwich (begin times are the same + so the order in the document takes precedence). --> + <g transform="translate(5, 85)"> + <rect style="stroke: black; fill: lightskyblue" x="0" y="0" width="30" + height="30"> + <animate attributeName="x" from="0" to="100" begin="100s" dur="3s" fill="freeze" + additive="sum"/> + <animate attributeName="x" from="0" to="100" begin="100s" dur="3s" fill="freeze"/> + </rect> + </g> + <!-- Additive group --> + <!-- The first animation should be composed second as it has a later begin + time so its additive attribute should apply even though it appears + first in the document --> + <g transform="translate(5, 125)"> + <rect style="stroke: black; fill: lightskyblue" x="0" y="0" width="30" + height="30"> + <animate attributeName="x" from="0" to="100" begin="100.001s" dur="3s" fill="freeze" + additive="sum"/> + <animate attributeName="x" from="0" to="100" begin="100s" dur="3s" fill="freeze"/> + </rect> + </g> + <!-- Not additive group --> + <!-- The first animation overrides the second animation because of its + later begin time. --> + <g transform="translate(5, 165)"> + <rect style="stroke: black; fill: lightskyblue" x="0" y="0" width="30" + height="30"> + <animate attributeName="x" from="0" to="100" begin="100.001s" dur="3s" fill="freeze"/> + <animate attributeName="x" from="0" to="100" begin="100s" dur="3s" fill="freeze" + additive="sum"/> + </rect> + </g> + <!-- Additive group --> + <!-- Even though additive is replace, by animation is always additive --> + <g transform="translate(5, 205)"> + <rect style="stroke: black; fill: lightskyblue" x="0" y="0" width="30" + height="30"> + <animate attributeName="x" from="0" to="100" begin="100s" dur="3s" fill="freeze"/> + <animate attributeName="x" by="100" dur="3s" begin="100s" fill="freeze" + additive="replace"/> + </rect> + </g> + <!-- Not additive group --> + <!-- This begins as additive, but after the document loads the two animations + will be swapped giving them the opposite priority and making this not + additive. --> + <g transform="translate(5, 245)"> + <rect style="stroke: black; fill: lightskyblue" x="0" y="0" width="30" + height="30"> + <animate attributeName="x" from="0" to="100" begin="100s" dur="3s" fill="freeze"/> + <animate attributeName="x" from="0" to="100" begin="100s" dur="3s" fill="freeze" + additive="sum" id="low"/> + </rect> + </g> + <!-- Additive group --> + <!-- This is the inverse of the above. The animations will have their + positions in the document swapped effectively making this not additive. + --> + <g transform="translate(5, 285)"> + <rect style="stroke: black; fill: lightskyblue" x="0" y="0" width="30" + height="30"> + <animate attributeName="x" from="0" to="100" begin="100s" dur="3s" fill="freeze" + additive="sum" id="high"/> + <animate attributeName="x" from="0" to="100" begin="100s" dur="3s" fill="freeze"/> + </rect> + </g> +</svg> diff --git a/layout/reftests/svg/smil/sort/sort-startAfter-1-ref.svg b/layout/reftests/svg/smil/sort/sort-startAfter-1-ref.svg new file mode 100644 index 0000000000..e0d50579b0 --- /dev/null +++ b/layout/reftests/svg/smil/sort/sort-startAfter-1-ref.svg @@ -0,0 +1,4 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <rect x="125" y="0" width="100" height="100" fill="blue"/> + <rect x="125" y="200" width="100" height="100" fill="blue"/> +</svg> diff --git a/layout/reftests/svg/smil/sort/sort-startAfter-1.svg b/layout/reftests/svg/smil/sort/sort-startAfter-1.svg new file mode 100644 index 0000000000..43b6ed9e13 --- /dev/null +++ b/layout/reftests/svg/smil/sort/sort-startAfter-1.svg @@ -0,0 +1,16 @@ +<!-- If two conflicting animations start at diffent times, the one starting + later should win. --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1.0, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <rect x="0" y="0" width="100" height="100" fill="blue"> + <animate attributeName="x" from="100" to="200" begin="0.5s" dur="2s"/> + <animate attributeName="x" from="300" to="400" begin="0s" dur="2s"/> + </rect> + <rect x="0" y="200" width="100" height="100" fill="blue"> + <animate attributeName="x" from="300" to="400" begin="0s" dur="2s"/> + <animate attributeName="x" from="100" to="200" begin="0.5s" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/sort/sort-startAfter-2-ref.svg b/layout/reftests/svg/smil/sort/sort-startAfter-2-ref.svg new file mode 100644 index 0000000000..aacb1998e4 --- /dev/null +++ b/layout/reftests/svg/smil/sort/sort-startAfter-2-ref.svg @@ -0,0 +1,4 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <rect x="150" y="0" width="100" height="100" fill="blue"/> + <rect x="150" y="200" width="100" height="100" fill="blue"/> +</svg> diff --git a/layout/reftests/svg/smil/sort/sort-startAfter-2.svg b/layout/reftests/svg/smil/sort/sort-startAfter-2.svg new file mode 100644 index 0000000000..3d82a59cc2 --- /dev/null +++ b/layout/reftests/svg/smil/sort/sort-startAfter-2.svg @@ -0,0 +1,18 @@ +<!-- If two conflicting animations start at diffent times, the one starting + later should win. --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1.5, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <rect x="0" y="0" width="100" height="100" fill="blue"> + <animate attributeName="x" from="100" to="200" begin="0.5s" dur="2s"/> + <animate attributeName="x" from="300" to="400" begin="0s" dur="1s" + fill="freeze"/> + </rect> + <rect x="0" y="200" width="100" height="100" fill="blue"> + <animate attributeName="x" from="300" to="400" begin="0s" dur="1s" + fill="freeze"/> + <animate attributeName="x" from="100" to="200" begin="0.5s" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/sort/sort-startAfter-3-ref.svg b/layout/reftests/svg/smil/sort/sort-startAfter-3-ref.svg new file mode 100644 index 0000000000..a20bbc496e --- /dev/null +++ b/layout/reftests/svg/smil/sort/sort-startAfter-3-ref.svg @@ -0,0 +1,4 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <rect x="200" y="0" width="100" height="100" fill="blue"/> + <rect x="200" y="200" width="100" height="100" fill="blue"/> +</svg> diff --git a/layout/reftests/svg/smil/sort/sort-startAfter-3.svg b/layout/reftests/svg/smil/sort/sort-startAfter-3.svg new file mode 100644 index 0000000000..2fb71aab33 --- /dev/null +++ b/layout/reftests/svg/smil/sort/sort-startAfter-3.svg @@ -0,0 +1,18 @@ +<!-- If two conflicting animations start at diffent times, the one starting + later (including its lasting "freeze" effect) should win. --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1.5, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <rect x="0" y="0" width="100" height="100" fill="blue"> + <animate attributeName="x" from="100" to="200" begin="0.25s" dur="1s" + fill="freeze"/> + <animate attributeName="x" from="300" to="400" begin="0s" dur="2s"/> + </rect> + <rect x="0" y="200" width="100" height="100" fill="blue"> + <animate attributeName="x" from="300" to="400" begin="0s" dur="2s"/> + <animate attributeName="x" from="100" to="200" begin="0.25s" dur="1s" + fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/sort/sort-startSame-1-ref.svg b/layout/reftests/svg/smil/sort/sort-startSame-1-ref.svg new file mode 100644 index 0000000000..5c0bf560e3 --- /dev/null +++ b/layout/reftests/svg/smil/sort/sort-startSame-1-ref.svg @@ -0,0 +1,4 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <rect x="350" y="0" width="100" height="100" fill="blue"/> + <rect x="150" y="200" width="100" height="100" fill="blue"/> +</svg> diff --git a/layout/reftests/svg/smil/sort/sort-startSame-1a.svg b/layout/reftests/svg/smil/sort/sort-startSame-1a.svg new file mode 100644 index 0000000000..af503df445 --- /dev/null +++ b/layout/reftests/svg/smil/sort/sort-startSame-1a.svg @@ -0,0 +1,16 @@ +<!-- If two conflicting animations start at same time, the one appearing + later in the document should win. --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1.0, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <rect x="0" y="0" width="100" height="100" fill="blue"> + <animate attributeName="x" from="100" to="200" begin="0s" dur="2s"/> + <animate attributeName="x" from="300" to="400" begin="0s" dur="2s"/> + </rect> + <rect x="0" y="200" width="100" height="100" fill="blue"> + <animate attributeName="x" from="300" to="400" begin="0s" dur="2s"/> + <animate attributeName="x" from="100" to="200" begin="0s" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/sort/sort-startSame-1b.svg b/layout/reftests/svg/smil/sort/sort-startSame-1b.svg new file mode 100644 index 0000000000..7e99e50865 --- /dev/null +++ b/layout/reftests/svg/smil/sort/sort-startSame-1b.svg @@ -0,0 +1,31 @@ +<!-- If two conflicting animations start at same time, and if we swap their + positions, the one that ends up later in the document should win. --> +<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><![CDATA[ + function go() { + // Move "a" and "b" to both be their parents' last child + var a = document.getElementById("a"); + a.parentNode.insertBefore(a, null); + + var b = document.getElementById("b"); + b.parentNode.insertBefore(b, null); + + setTimeAndSnapshot(1.0, true) + } + document.addEventListener("MozReftestInvalidate", go, false); + setTimeout(go, 4000); // fallback for running outside reftest + ]]></script> + + <rect x="0" y="0" width="100" height="100" fill="blue"> + <animate attributeName="x" from="300" to="400" begin="0s" dur="2s" id="a"/> + <animate attributeName="x" from="100" to="200" begin="0s" dur="2s"/> + </rect> + <rect x="0" y="200" width="100" height="100" fill="blue"> + <animate attributeName="x" from="100" to="200" begin="0s" dur="2s" id="b"/> + <animate attributeName="x" from="300" to="400" begin="0s" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/sort/sort-startSame-2-ref.svg b/layout/reftests/svg/smil/sort/sort-startSame-2-ref.svg new file mode 100644 index 0000000000..77e5427399 --- /dev/null +++ b/layout/reftests/svg/smil/sort/sort-startSame-2-ref.svg @@ -0,0 +1,4 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <rect x="400" y="0" width="100" height="100" fill="blue"/> + <rect x="175" y="200" width="100" height="100" fill="blue"/> +</svg> diff --git a/layout/reftests/svg/smil/sort/sort-startSame-2a.svg b/layout/reftests/svg/smil/sort/sort-startSame-2a.svg new file mode 100644 index 0000000000..b2404be941 --- /dev/null +++ b/layout/reftests/svg/smil/sort/sort-startSame-2a.svg @@ -0,0 +1,18 @@ +<!-- If two conflicting animations start at same time, the one appearing + later in the document should win (including its freeze effects). --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1.5, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <rect x="0" y="0" width="100" height="100" fill="blue"> + <animate attributeName="x" from="100" to="200" begin="0s" dur="2s"/> + <animate attributeName="x" from="300" to="400" begin="0s" dur="1s" + fill="freeze"/> + </rect> + <rect x="0" y="200" width="100" height="100" fill="blue"> + <animate attributeName="x" from="300" to="400" begin="0s" dur="1s" + fill="freeze"/> + <animate attributeName="x" from="100" to="200" begin="0s" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/sort/sort-startSame-2b.svg b/layout/reftests/svg/smil/sort/sort-startSame-2b.svg new file mode 100644 index 0000000000..f028b35033 --- /dev/null +++ b/layout/reftests/svg/smil/sort/sort-startSame-2b.svg @@ -0,0 +1,33 @@ +<!-- If two conflicting animations start at same time, and if we swap their + positions, the one that ends up later in the document should win + (including its freeze effects). --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeout('go()', 0)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + + <script><![CDATA[ + function go() { + // Move "a" and "b" to both be their parents' last child + var a = document.getElementById("a"); + a.parentNode.insertBefore(a, null); + + var b = document.getElementById("b"); + b.parentNode.insertBefore(b, null); + + setTimeAndSnapshot(1.5, true) + } + ]]></script> + + <rect x="0" y="0" width="100" height="100" fill="blue"> + <animate attributeName="x" from="300" to="400" begin="0s" dur="1s" id="a" + fill="freeze"/> + <animate attributeName="x" from="100" to="200" begin="0s" dur="2s"/> + </rect> + <rect x="0" y="200" width="100" height="100" fill="blue"> + <animate attributeName="x" from="100" to="200" begin="0s" dur="2s" id="b"/> + <animate attributeName="x" from="300" to="400" begin="0s" dur="1s" + fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-color-1-by-ident-hex.svg b/layout/reftests/svg/smil/style/anim-css-color-1-by-ident-hex.svg new file mode 100644 index 0000000000..acda8e0c50 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-color-1-by-ident-hex.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <style> + rect { color: indigo; fill: currentColor; stroke: black; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "color", + "by" : "#AAF573" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-color-1-from-by-hex-hex.svg b/layout/reftests/svg/smil/style/anim-css-color-1-from-by-hex-hex.svg new file mode 100644 index 0000000000..42f4b65b6f --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-color-1-from-by-hex-hex.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <style> + rect { color: indigo; fill: currentColor; stroke: black; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "color", + "from" : "#4B0082", + "by" : "#AAF573" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-color-1-from-by-ident-hex.svg b/layout/reftests/svg/smil/style/anim-css-color-1-from-by-ident-hex.svg new file mode 100644 index 0000000000..8b480cd864 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-color-1-from-by-ident-hex.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <style> + rect { color: indigo; fill: currentColor; stroke: black; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "color", + "from" : "indigo", + "by" : "#AAF573" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-color-1-from-to-hex-hex.svg b/layout/reftests/svg/smil/style/anim-css-color-1-from-to-hex-hex.svg new file mode 100644 index 0000000000..f15b4a3c22 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-color-1-from-to-hex-hex.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <style> + rect { color: indigo; fill: currentColor; stroke: black; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "color", + "from" : "#4B0082", + "to" : "#F5F5F5" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-color-1-from-to-ident-ident.svg b/layout/reftests/svg/smil/style/anim-css-color-1-from-to-ident-ident.svg new file mode 100644 index 0000000000..553b95f12f --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-color-1-from-to-ident-ident.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <style> + rect { color: indigo; fill: currentColor; stroke: black; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "color", + "from" : "indigo", + "to" : "whitesmoke" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-color-1-to-ident-hex.svg b/layout/reftests/svg/smil/style/anim-css-color-1-to-ident-hex.svg new file mode 100644 index 0000000000..727107841f --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-color-1-to-ident-hex.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <style> + rect { color: indigo; fill: currentColor; stroke: black; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "color", + "to" : "#F5F5F5" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-color-1-to-ident-ident.svg b/layout/reftests/svg/smil/style/anim-css-color-1-to-ident-ident.svg new file mode 100644 index 0000000000..9702370931 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-color-1-to-ident-ident.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <style> + rect { color: indigo; fill: currentColor; stroke: black; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "color", + "to" : "whitesmoke" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-color-2-paced-rgb.svg b/layout/reftests/svg/smil/style/anim-css-color-2-paced-rgb.svg new file mode 100644 index 0000000000..c44f16b7c5 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-color-2-paced-rgb.svg @@ -0,0 +1,20 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <style> + rect { color: yellow; fill: currentColor; stroke: black; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "color", + "calcMode" : "paced", + "values" : "rgb(0, 10, 20); " + + "rgb(20, 50, 80); " + + "rgb(140, 130, 120)" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-color-3-by-ident-ident.svg b/layout/reftests/svg/smil/style/anim-css-color-3-by-ident-ident.svg new file mode 100644 index 0000000000..1c6d06895c --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-color-3-by-ident-ident.svg @@ -0,0 +1,19 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <!-- This is a test with a named color (DarkSlateGray == rgb(47, 79, 79)) --> + <!-- being added to another color (DarkOliveGreen == rbg(85, 107, 47)). --> + <style> + rect { color: DarkOliveGreen; fill: currentColor; stroke: Black; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "color", + "by" : "DarkSlateGray" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-color-3-from-by-ident-ident.svg b/layout/reftests/svg/smil/style/anim-css-color-3-from-by-ident-ident.svg new file mode 100644 index 0000000000..cd34fc58df --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-color-3-from-by-ident-ident.svg @@ -0,0 +1,20 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <!-- This is a test with a named color (DarkSlateGray == rgb(47, 79, 79)) --> + <!-- being added to another color (DarkOliveGreen == rbg(85, 107, 47)). --> + <style> + rect { color: DarkOliveGreen; fill: currentColor; stroke: Black; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "color", + "from" : "DarkOliveGreen", + "by" : "DarkSlateGray" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-color-3-from-by-rgb-ident.svg b/layout/reftests/svg/smil/style/anim-css-color-3-from-by-rgb-ident.svg new file mode 100644 index 0000000000..163c392e00 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-color-3-from-by-rgb-ident.svg @@ -0,0 +1,20 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <!-- This is a test with a named color (DarkSlateGray == rgb(47, 79, 79)) --> + <!-- being added to another color (DarkOliveGreen == rbg(85, 107, 47)). --> + <style> + rect { color: DarkOliveGreen; fill: currentColor; stroke: Black; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "color", + "from" : "rgb(85, 107, 47)", + "by" : "DarkSlateGray" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fill-1-by-ident-curcol.svg b/layout/reftests/svg/smil/style/anim-css-fill-1-by-ident-curcol.svg new file mode 100644 index 0000000000..b30fa4963f --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fill-1-by-ident-curcol.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <style> + rect { fill: Indigo; stroke: black; color: #AAF573} + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "fill", + "by" : "currentColor" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fill-1-by-ident-hex.svg b/layout/reftests/svg/smil/style/anim-css-fill-1-by-ident-hex.svg new file mode 100644 index 0000000000..cdd1dd1d52 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fill-1-by-ident-hex.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <style> + rect { fill: Indigo; stroke: black; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "fill", + "by" : "#AAF573" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fill-1-from-by-curcol-hex.svg b/layout/reftests/svg/smil/style/anim-css-fill-1-from-by-curcol-hex.svg new file mode 100644 index 0000000000..e2832b174a --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fill-1-from-by-curcol-hex.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <style> + rect { fill: Indigo; stroke: black; color: Indigo } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "fill", + "from" : "currentColor", + "by" : "#AAF573" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fill-1-from-by-hex-curcol.svg b/layout/reftests/svg/smil/style/anim-css-fill-1-from-by-hex-curcol.svg new file mode 100644 index 0000000000..fca9cc1d7a --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fill-1-from-by-hex-curcol.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <style> + rect { fill: Indigo; stroke: black; color: #AAF573 } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "fill", + "from" : "#4B0082", + "by" : "currentColor" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fill-1-from-by-hex-hex.svg b/layout/reftests/svg/smil/style/anim-css-fill-1-from-by-hex-hex.svg new file mode 100644 index 0000000000..61dc61da05 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fill-1-from-by-hex-hex.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <style> + rect { fill: Indigo; stroke: black; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "fill", + "from" : "#4B0082", + "by" : "#AAF573" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fill-1-from-by-ident-hex.svg b/layout/reftests/svg/smil/style/anim-css-fill-1-from-by-ident-hex.svg new file mode 100644 index 0000000000..a6fe27433a --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fill-1-from-by-ident-hex.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <style> + rect { fill: Indigo; stroke: black; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "fill", + "from" : "indigo", + "by" : "#AAF573" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fill-1-from-to-curcol-hex.svg b/layout/reftests/svg/smil/style/anim-css-fill-1-from-to-curcol-hex.svg new file mode 100644 index 0000000000..86cc1fedd7 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fill-1-from-to-curcol-hex.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <style> + rect { fill: Indigo; stroke: black; color: Indigo; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "fill", + "from" : "currentColor", + "to" : "#F5F5F5" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fill-1-from-to-hex-curcol.svg b/layout/reftests/svg/smil/style/anim-css-fill-1-from-to-hex-curcol.svg new file mode 100644 index 0000000000..6cb3da74fd --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fill-1-from-to-hex-curcol.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <style> + rect { fill: Indigo; stroke: black; color: Whitesmoke; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "fill", + "from" : "#4B0082", + "to" : "currentColor" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fill-1-from-to-hex-hex.svg b/layout/reftests/svg/smil/style/anim-css-fill-1-from-to-hex-hex.svg new file mode 100644 index 0000000000..f5f8114da9 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fill-1-from-to-hex-hex.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <style> + rect { fill: Indigo; stroke: black; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "fill", + "from" : "#4B0082", + "to" : "#F5F5F5" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fill-1-from-to-ident-ident.svg b/layout/reftests/svg/smil/style/anim-css-fill-1-from-to-ident-ident.svg new file mode 100644 index 0000000000..e1b968d35a --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fill-1-from-to-ident-ident.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <style> + rect { fill: Indigo; stroke: black; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "fill", + "from" : "indigo", + "to" : "whitesmoke" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fill-1-ref.svg b/layout/reftests/svg/smil/style/anim-css-fill-1-ref.svg new file mode 100644 index 0000000000..767407048d --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fill-1-ref.svg @@ -0,0 +1,32 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <style> + rect { stroke: black; } + </style> + <rect x="20px" y="20px" width="15px" height="15px" + style="fill: #4B0082"> + </rect> + <rect x="70px" y="20px" width="15px" height="15px" + style="fill: #4B0082"> + </rect> + <rect x="120px" y="20px" width="15px" height="15px" + style="fill: #652593"> + </rect> + <rect x="20px" y="70px" width="15px" height="15px" + style="fill: #8B5CAD"> + </rect> + <rect x="70px" y="70px" width="15px" height="15px" + style="fill: #9F79BB"> + </rect> + <rect x="120px" y="70px" width="15px" height="15px" + style="fill: #CBB8D8"> + </rect> + <rect x="20px" y="120px" width="15px" height="15px" + style="fill: #D3C4DE"> + </rect> + <rect x="70px" y="120px" width="15px" height="15px" + style="fill: #F5F5F5"> + </rect> + <rect x="120px" y="120px" width="15px" height="15px" + style="fill: #F5F5F5"> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fill-1-to-ident-curcol.svg b/layout/reftests/svg/smil/style/anim-css-fill-1-to-ident-curcol.svg new file mode 100644 index 0000000000..65a6812694 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fill-1-to-ident-curcol.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <style> + rect { fill: Indigo; stroke: black; color: Whitesmoke; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "fill", + "to" : "currentColor" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fill-1-to-ident-hex.svg b/layout/reftests/svg/smil/style/anim-css-fill-1-to-ident-hex.svg new file mode 100644 index 0000000000..73540fcc49 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fill-1-to-ident-hex.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <style> + rect { fill: Indigo; stroke: black; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "fill", + "to" : "#F5F5F5" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fill-1-to-ident-ident.svg b/layout/reftests/svg/smil/style/anim-css-fill-1-to-ident-ident.svg new file mode 100644 index 0000000000..9b1010426a --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fill-1-to-ident-ident.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <style> + rect { fill: Indigo; stroke: black; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "fill", + "to" : "whitesmoke" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fill-2-paced-rgb.svg b/layout/reftests/svg/smil/style/anim-css-fill-2-paced-rgb.svg new file mode 100644 index 0000000000..4c1e16c53f --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fill-2-paced-rgb.svg @@ -0,0 +1,20 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <style> + rect { fill: yellow; stroke: black; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "fill", + "calcMode" : "paced", + "values" : "rgb(0, 10, 20); " + + "rgb(20, 50, 80); " + + "rgb(140, 130, 120)" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fill-2-ref.svg b/layout/reftests/svg/smil/style/anim-css-fill-2-ref.svg new file mode 100644 index 0000000000..1058125a66 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fill-2-ref.svg @@ -0,0 +1,32 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <style> + rect { stroke: black; } + </style> + <rect x="20px" y="20px" width="15px" height="15px" + style="fill: yellow"> + </rect> + <rect x="70px" y="20px" width="15px" height="15px" + style="fill: rgb(0, 10, 20)"> + </rect> + <rect x="120px" y="20px" width="15px" height="15px" + style="fill: rgb(9, 28, 47)"> + </rect> + <rect x="20px" y="70px" width="15px" height="15px" + style="fill: rgb(28, 55, 83)"> + </rect> + <rect x="70px" y="70px" width="15px" height="15px" + style="fill: rgb(49, 69, 90)"> + </rect> + <rect x="120px" y="70px" width="15px" height="15px" + style="fill: rgb(95, 100, 105)"> + </rect> + <rect x="20px" y="120px" width="15px" height="15px" + style="fill: rgb(104, 106, 108)"> + </rect> + <rect x="70px" y="120px" width="15px" height="15px" + style="fill: rgb(140, 130, 120)"> + </rect> + <rect x="120px" y="120px" width="15px" height="15px" + style="fill: rgb(140, 130, 120)"> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fill-3-by-ident-ident.svg b/layout/reftests/svg/smil/style/anim-css-fill-3-by-ident-ident.svg new file mode 100644 index 0000000000..16fbbc062d --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fill-3-by-ident-ident.svg @@ -0,0 +1,19 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <!-- This is a test with a named color (DarkSlateGray == rgb(47, 79, 79)) --> + <!-- being added to another color (DarkOliveGreen == rbg(85, 107, 47)). --> + <style> + rect { fill: DarkOliveGreen; stroke: Black; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "fill", + "by" : "DarkSlateGray" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fill-3-from-by-ident-ident.svg b/layout/reftests/svg/smil/style/anim-css-fill-3-from-by-ident-ident.svg new file mode 100644 index 0000000000..a2bdf8e8fc --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fill-3-from-by-ident-ident.svg @@ -0,0 +1,20 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <!-- This is a test with a named color (DarkSlateGray == rgb(47, 79, 79)) --> + <!-- being added to another color (DarkOliveGreen == rbg(85, 107, 47)). --> + <style> + rect { fill: DarkOliveGreen; stroke: Black; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "fill", + "from" : "DarkOliveGreen", + "by" : "DarkSlateGray" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fill-3-from-by-rgb-ident.svg b/layout/reftests/svg/smil/style/anim-css-fill-3-from-by-rgb-ident.svg new file mode 100644 index 0000000000..b2b8b689ea --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fill-3-from-by-rgb-ident.svg @@ -0,0 +1,20 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <!-- This is a test with a named color (DarkSlateGray == rgb(47, 79, 79)) --> + <!-- being added to another color (DarkOliveGreen == rbg(85, 107, 47)). --> + <style> + rect { fill: DarkOliveGreen; stroke: Black; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "fill", + "from" : "rgb(85, 107, 47)", + "by" : "DarkSlateGray" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fill-3-ref.svg b/layout/reftests/svg/smil/style/anim-css-fill-3-ref.svg new file mode 100644 index 0000000000..8a14da61ea --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fill-3-ref.svg @@ -0,0 +1,32 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <style> + rect { stroke: black; } + </style> + <rect x="20px" y="20px" width="15px" height="15px" + style="fill: rgb(85, 107, 47)"> + </rect> + <rect x="70px" y="20px" width="15px" height="15px" + style="fill: rgb(85, 107, 47)"> + </rect> + <rect x="120px" y="20px" width="15px" height="15px" + style="fill: rgb(92, 119, 59)"> + </rect> + <rect x="20px" y="70px" width="15px" height="15px" + style="fill: rgb(103, 137, 77)"> + </rect> + <rect x="70px" y="70px" width="15px" height="15px" + style="fill: rgb(108, 146, 86)"> + </rect> + <rect x="120px" y="70px" width="15px" height="15px" + style="fill: rgb(120, 166, 106)"> + </rect> + <rect x="20px" y="120px" width="15px" height="15px" + style="fill: rgb(123, 170, 110)"> + </rect> + <rect x="70px" y="120px" width="15px" height="15px" + style="fill: rgb(132, 186, 126)"> + </rect> + <rect x="120px" y="120px" width="15px" height="15px" + style="fill: rgb(132, 186, 126)"> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fill-overflow-1-by.svg b/layout/reftests/svg/smil/style/anim-css-fill-overflow-1-by.svg new file mode 100644 index 0000000000..d65f963b33 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fill-overflow-1-by.svg @@ -0,0 +1,20 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <!-- This is a series of snapshots of a color animation, starting at --> + <!-- YellowGreen (#9ACD32 == rgb(154,205,50)) and increasing each --> + <!-- channel beyond its maximum. (which should clamp it to 255) --> + <style> + rect { fill: yellowgreen; stroke: black; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "fill", + "by" : "rgb(200, 100, 250)" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fill-overflow-1-from-by.svg b/layout/reftests/svg/smil/style/anim-css-fill-overflow-1-from-by.svg new file mode 100644 index 0000000000..df06aea2de --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fill-overflow-1-from-by.svg @@ -0,0 +1,21 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <!-- This is a series of snapshots of a color animation, starting at --> + <!-- YellowGreen (#9ACD32 == rgb(154,205,50)) and increasing each --> + <!-- channel beyond its maximum. (which should clamp it to 255) --> + <style> + rect { fill: yellowgreen; stroke: black; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "fill", + "from" : "yellowgreen", + "by" : "rgb(200, 100, 250)" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fill-overflow-1-ref.svg b/layout/reftests/svg/smil/style/anim-css-fill-overflow-1-ref.svg new file mode 100644 index 0000000000..917bfef9f5 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fill-overflow-1-ref.svg @@ -0,0 +1,32 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <style> + rect { stroke: black; } + </style> + <rect x="20px" y="20px" width="15px" height="15px" + style="fill: yellowgreen"> + </rect> + <rect x="70px" y="20px" width="15px" height="15px" + style="fill: yellowgreen"> + </rect> + <rect x="120px" y="20px" width="15px" height="15px" + style="fill: rgb(184, 220, 88)"> + </rect> + <rect x="20px" y="70px" width="15px" height="15px" + style="fill: rgb(229, 243, 144)"> + </rect> + <rect x="70px" y="70px" width="15px" height="15px" + style="fill: rgb(253, 255, 174)"> + </rect> + <rect x="120px" y="70px" width="15px" height="15px" + style="fill: rgb(255, 255, 238)"> + </rect> + <rect x="20px" y="120px" width="15px" height="15px" + style="fill: rgb(255, 255, 250)"> + </rect> + <rect x="70px" y="120px" width="15px" height="15px" + style="fill: rgb(255, 255, 255)"> + </rect> + <rect x="120px" y="120px" width="15px" height="15px" + style="fill: rgb(255, 255, 255)"> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fillopacity-1-by.svg b/layout/reftests/svg/smil/style/anim-css-fillopacity-1-by.svg new file mode 100644 index 0000000000..fc3f4b042e --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fillopacity-1-by.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <style> + rect { fill: blue; stroke: black; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "fill-opacity", + "by" : "-1" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fillopacity-1-from-by.svg b/layout/reftests/svg/smil/style/anim-css-fillopacity-1-from-by.svg new file mode 100644 index 0000000000..39e03b8db2 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fillopacity-1-from-by.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <style> + rect { fill: blue; stroke: black; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "fill-opacity", + "from" : "1", + "by" : "-1" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fillopacity-1-from-to.svg b/layout/reftests/svg/smil/style/anim-css-fillopacity-1-from-to.svg new file mode 100644 index 0000000000..2ec29db9b2 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fillopacity-1-from-to.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <style> + rect { fill: blue; stroke: black; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "fill-opacity", + "from" : "1", + "to" : "0" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fillopacity-1-ref.svg b/layout/reftests/svg/smil/style/anim-css-fillopacity-1-ref.svg new file mode 100644 index 0000000000..f35de241c1 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fillopacity-1-ref.svg @@ -0,0 +1,32 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <style> + rect { fill: blue; stroke: black; } + </style> + <rect x="20px" y="20px" width="15px" height="15px" + style="fill-opacity: 1"> + </rect> + <rect x="70px" y="20px" width="15px" height="15px" + style="fill-opacity: 1"> + </rect> + <rect x="120px" y="20px" width="15px" height="15px" + style="fill-opacity: 0.85"> + </rect> + <rect x="20px" y="70px" width="15px" height="15px" + style="fill-opacity: 0.625"> + </rect> + <rect x="70px" y="70px" width="15px" height="15px" + style="fill-opacity: 0.505"> + </rect> + <rect x="120px" y="70px" width="15px" height="15px" + style="fill-opacity: 0.25"> + </rect> + <rect x="20px" y="120px" width="15px" height="15px" + style="fill-opacity: 0.2"> + </rect> + <rect x="70px" y="120px" width="15px" height="15px" + style="fill-opacity: 0.0"> + </rect> + <rect x="120px" y="120px" width="15px" height="15px" + style="fill-opacity: 0.0"> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fillopacity-1-to.svg b/layout/reftests/svg/smil/style/anim-css-fillopacity-1-to.svg new file mode 100644 index 0000000000..110cbd6d82 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fillopacity-1-to.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <style> + rect { fill: blue; stroke: black; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "fill-opacity", + "to" : "0" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fillopacity-2-paced.svg b/layout/reftests/svg/smil/style/anim-css-fillopacity-2-paced.svg new file mode 100644 index 0000000000..61ac49a8d1 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fillopacity-2-paced.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <style> + rect { fill: blue; stroke: black; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "fill-opacity", + "calcMode" : "paced", + "values" : "0.6;0.1;0.95;0.3" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fillopacity-2-ref.svg b/layout/reftests/svg/smil/style/anim-css-fillopacity-2-ref.svg new file mode 100644 index 0000000000..c30942bcf6 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fillopacity-2-ref.svg @@ -0,0 +1,32 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <style> + rect { fill: blue; stroke: black; } + </style> + <rect x="20px" y="20px" width="15px" height="15px" + style="fill-opacity: 1"> + </rect> + <rect x="70px" y="20px" width="15px" height="15px" + style="fill-opacity: 0.6"> + </rect> + <rect x="120px" y="20px" width="15px" height="15px" + style="fill-opacity: 0.3"> + </rect> + <rect x="20px" y="70px" width="15px" height="15px" + style="fill-opacity: 0.35"> + </rect> + <rect x="70px" y="70px" width="15px" height="15px" + style="fill-opacity: 0.59"> + </rect> + <rect x="120px" y="70px" width="15px" height="15px" + style="fill-opacity: 0.8"> + </rect> + <rect x="20px" y="120px" width="15px" height="15px" + style="fill-opacity: 0.7"> + </rect> + <rect x="70px" y="120px" width="15px" height="15px" + style="fill-opacity: 0.3"> + </rect> + <rect x="120px" y="120px" width="15px" height="15px" + style="fill-opacity: 0.3"> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fillopacity-3-clamp-big.svg b/layout/reftests/svg/smil/style/anim-css-fillopacity-3-clamp-big.svg new file mode 100644 index 0000000000..0faec1156b --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fillopacity-3-clamp-big.svg @@ -0,0 +1,27 @@ +<!-- + This testcase checks that we don't clamp negative opacity values to their + valid range [0,1] until *after* we've done animation & interpolation. + If we clamped intermediate results too early (e.g. after parsing, during + interpolation, or right after we add the first animation's interpolated + value), we'd end up with the wrong intermediate opacity values here. + --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <style> + rect { fill: blue; stroke: black; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHashA = { "attributeName" : "fill-opacity", + "from" : "-0.4", + "by" : "1.2" }; + var animAttrHashB = { "attributeName" : "fill-opacity", + "by" : "0.2" }; + testAnimatedRectGrid("animate", [animAttrHashA, animAttrHashB]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fillopacity-3-clamp-small.svg b/layout/reftests/svg/smil/style/anim-css-fillopacity-3-clamp-small.svg new file mode 100644 index 0000000000..d7ff87e20a --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fillopacity-3-clamp-small.svg @@ -0,0 +1,27 @@ +<!-- + This testcase checks that we don't clamp negative opacity values to their + valid range [0,1] until *after* we've done animation & interpolation. + If we clamped intermediate results too early (e.g. after parsing, during + interpolation, or right after we add the first animation's interpolated + value), we'd end up with the wrong intermediate opacity values here. + --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <style> + rect { fill: blue; stroke: black; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHashA = { "attributeName" : "fill-opacity", + "from" : "-0.4", + "by" : "0.6" }; + var animAttrHashB = { "attributeName" : "fill-opacity", + "by" : "0.4" }; + testAnimatedRectGrid("animate", [animAttrHashA, animAttrHashB]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fillopacity-3-ref.svg b/layout/reftests/svg/smil/style/anim-css-fillopacity-3-ref.svg new file mode 100644 index 0000000000..bc089e43c4 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fillopacity-3-ref.svg @@ -0,0 +1,32 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <style> + rect { fill: blue; stroke: black; } + </style> + <rect x="20px" y="20px" width="15px" height="15px" + style="fill-opacity: 1"> + </rect> + <rect x="70px" y="20px" width="15px" height="15px" + style="fill-opacity: 0"> + </rect> + <rect x="120px" y="20px" width="15px" height="15px" + style="fill-opacity: 0"> + </rect> + <rect x="20px" y="70px" width="15px" height="15px" + style="fill-opacity: 0"> + </rect> + <rect x="70px" y="70px" width="15px" height="15px" + style="fill-opacity: 0.095"> + </rect> + <rect x="120px" y="70px" width="15px" height="15px" + style="fill-opacity: 0.35"> + </rect> + <rect x="20px" y="120px" width="15px" height="15px" + style="fill-opacity: 0.4"> + </rect> + <rect x="70px" y="120px" width="15px" height="15px" + style="fill-opacity: 0.6"> + </rect> + <rect x="120px" y="120px" width="15px" height="15px" + style="fill-opacity: 0.6"> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-floodcolor-overflow-1-from-by.svg b/layout/reftests/svg/smil/style/anim-css-floodcolor-overflow-1-from-by.svg new file mode 100644 index 0000000000..1def47fafd --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-floodcolor-overflow-1-from-by.svg @@ -0,0 +1,26 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <!-- This is a series of snapshots of a color animation, starting at --> + <!-- YellowGreen (#9ACD32 == rgb(154,205,50)) and increasing each --> + <!-- channel beyond its maximum. (which should clamp it to 255) --> + <style> + feFlood { flood-color: yellowgreen; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "flood-color", + "from" : "yellowgreen", + "by" : "rgb(200, 100, 250)" }; + var graphicElemTag = "rect"; + var graphicElemAttrHash = { "width" : "15px", + "height" : "15px" }; + testAnimatedGridWithDefs(graphicElemTag, graphicElemAttrHash, "filter", + [ "filter", "feFlood" ], + "animate", [ animAttrHash ]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-floodcolor-overflow-1-ref.svg b/layout/reftests/svg/smil/style/anim-css-floodcolor-overflow-1-ref.svg new file mode 100644 index 0000000000..27d0bcd56e --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-floodcolor-overflow-1-ref.svg @@ -0,0 +1,40 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <defs> + <filter id="f0"><feFlood flood-color="yellowgreen" /></filter> + <filter id="f1"><feFlood flood-color="yellowgreen" /></filter> + <filter id="f2"><feFlood flood-color="rgb(184, 220, 88)" /></filter> + <filter id="f3"><feFlood flood-color="rgb(229, 243, 144)" /></filter> + <filter id="f4"><feFlood flood-color="rgb(253, 255, 174)" /></filter> + <filter id="f5"><feFlood flood-color="rgb(255, 255, 238)" /></filter> + <filter id="f6"><feFlood flood-color="rgb(255, 255, 250)" /></filter> + <filter id="f7"><feFlood flood-color="rgb(255, 255, 255)" /></filter> + <filter id="f8"><feFlood flood-color="rgb(255, 255, 255)" /></filter> + </defs> + <rect x="20px" y="20px" width="15px" height="15px" + style="filter:url(#f0)"> + </rect> + <rect x="70px" y="20px" width="15px" height="15px" + style="filter:url(#f1)"> + </rect> + <rect x="120px" y="20px" width="15px" height="15px" + style="filter:url(#f2)"> + </rect> + <rect x="20px" y="70px" width="15px" height="15px" + style="filter:url(#f3)"> + </rect> + <rect x="70px" y="70px" width="15px" height="15px" + style="filter:url(#f4)"> + </rect> + <rect x="120px" y="70px" width="15px" height="15px" + style="filter:url(#f5)"> + </rect> + <rect x="20px" y="120px" width="15px" height="15px" + style="filter:url(#f6)"> + </rect> + <rect x="70px" y="120px" width="15px" height="15px" + style="filter:url(#f7)"> + </rect> + <rect x="120px" y="120px" width="15px" height="15px" + style="filter:url(#f8)"> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-font-1-ref.svg b/layout/reftests/svg/smil/style/anim-css-font-1-ref.svg new file mode 100644 index 0000000000..de028ec6be --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-font-1-ref.svg @@ -0,0 +1,76 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + width="300px" height="400px"> + + <!-- 'inherit' to 'caption' --> + <text x="0px" y="50px" style="font: inherit">abc + </text> + <text x="50px" y="50px" style="font: inherit">abc + </text> + <text x="100px" y="50px" style="font: inherit">abc + </text> + <text x="150px" y="50px" style="font: caption">abc + </text> + <text x="200px" y="50px" style="font: caption">abc + </text> + + <!-- 'caption' to 'inherit' --> + <text x="0px" y="100px" style="font: inherit">abc + </text> + <text x="50px" y="100px" style="font: caption">abc + </text> + <text x="100px" y="100px" style="font: caption">abc + </text> + <text x="150px" y="100px" style="font: inherit">abc + </text> + <text x="200px" y="100px" style="font: inherit">abc + </text> + + <!-- 'caption' to 'icon' --> + <text x="0px" y="150px" style="font: inherit">abc + </text> + <text x="50px" y="150px" style="font: caption">abc + </text> + <text x="100px" y="150px" style="font: caption">abc + </text> + <text x="150px" y="150px" style="font: icon">abc + </text> + <text x="200px" y="150px" style="font: icon">abc + </text> + + <!-- 'caption' to 'menu' --> + <text x="0px" y="200px" style="font: inherit">abc + </text> + <text x="50px" y="200px" style="font: caption">abc + </text> + <text x="100px" y="200px" style="font: caption">abc + </text> + <text x="150px" y="200px" style="font: menu">abc + </text> + <text x="200px" y="200px" style="font: menu">abc + </text> + + <!-- 'caption' to 'message-box' --> + <text x="0px" y="250px" style="font: inherit">abc + </text> + <text x="50px" y="250px" style="font: caption">abc + </text> + <text x="100px" y="250px" style="font: caption">abc + </text> + <text x="150px" y="250px" style="font: message-box">abc + </text> + <text x="200px" y="250px" style="font: message-box">abc + </text> + + <!-- 'caption' to 'small-caption' --> + <text x="0px" y="300px" style="font: inherit">abc + </text> + <text x="50px" y="300px" style="font: caption">abc + </text> + <text x="100px" y="300px" style="font: caption">abc + </text> + <text x="150px" y="300px" style="font: small-caption">abc + </text> + <text x="200px" y="300px" style="font: small-caption">abc + </text> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-font-1.svg b/layout/reftests/svg/smil/style/anim-css-font-1.svg new file mode 100644 index 0000000000..0cd69258fd --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-font-1.svg @@ -0,0 +1,144 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + width="300px" height="400px" + class="reftest-wait" + onload="go()"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + requestAnimationFrame(() => { setTimeAndSnapshot(3.0, true) }); + } + </script> + + <!-- 'inherit' to 'caption' --> + <text x="0px" y="50px">abc + <animate attributeName="font" attributeType="CSS" fill="freeze" + from="inherit" to="caption" begin="4.0s" dur="2s"/> + </text> + <text x="50px" y="50px">abc + <animate attributeName="font" attributeType="CSS" fill="freeze" + from="inherit" to="caption" begin="3.0s" dur="2s"/> + </text> + <text x="100px" y="50px">abc + <animate attributeName="font" attributeType="CSS" fill="freeze" + from="inherit" to="caption" begin="2.01s" dur="2s"/> + </text> + <text x="150px" y="50px">abc + <animate attributeName="font" attributeType="CSS" fill="freeze" + from="inherit" to="caption" begin="2.0s" dur="2s"/> + </text> + <text x="200px" y="50px">abc + <animate attributeName="font" attributeType="CSS" fill="freeze" + from="inherit" to="caption" begin="1.0s" dur="2s"/> + </text> + + <!-- 'caption' to 'inherit' --> + <text x="0px" y="100px">abc + <animate attributeName="font" attributeType="CSS" fill="freeze" + from="caption" to="inherit" begin="4.0s" dur="2s"/> + </text> + <text x="50px" y="100px">abc + <animate attributeName="font" attributeType="CSS" fill="freeze" + from="caption" to="inherit" begin="3.0s" dur="2s"/> + </text> + <text x="100px" y="100px">abc + <animate attributeName="font" attributeType="CSS" fill="freeze" + from="caption" to="inherit" begin="2.01s" dur="2s"/> + </text> + <text x="150px" y="100px">abc + <animate attributeName="font" attributeType="CSS" fill="freeze" + from="caption" to="inherit" begin="2.0s" dur="2s"/> + </text> + <text x="200px" y="100px">abc + <animate attributeName="font" attributeType="CSS" fill="freeze" + from="caption" to="inherit" begin="1.0s" dur="2s"/> + </text> + + <!-- 'caption' to 'icon' --> + <text x="0px" y="150px">abc + <animate attributeName="font" attributeType="CSS" fill="freeze" + from="caption" to="icon" begin="4.0s" dur="2s"/> + </text> + <text x="50px" y="150px">abc + <animate attributeName="font" attributeType="CSS" fill="freeze" + from="caption" to="icon" begin="3.0s" dur="2s"/> + </text> + <text x="100px" y="150px">abc + <animate attributeName="font" attributeType="CSS" fill="freeze" + from="caption" to="icon" begin="2.01s" dur="2s"/> + </text> + <text x="150px" y="150px">abc + <animate attributeName="font" attributeType="CSS" fill="freeze" + from="caption" to="icon" begin="2.0s" dur="2s"/> + </text> + <text x="200px" y="150px">abc + <animate attributeName="font" attributeType="CSS" fill="freeze" + from="caption" to="icon" begin="1.0s" dur="2s"/> + </text> + + <!-- 'caption' to 'menu' --> + <text x="0px" y="200px">abc + <animate attributeName="font" attributeType="CSS" fill="freeze" + from="caption" to="menu" begin="4.0s" dur="2s"/> + </text> + <text x="50px" y="200px">abc + <animate attributeName="font" attributeType="CSS" fill="freeze" + from="caption" to="menu" begin="3.0s" dur="2s"/> + </text> + <text x="100px" y="200px">abc + <animate attributeName="font" attributeType="CSS" fill="freeze" + from="caption" to="menu" begin="2.01s" dur="2s"/> + </text> + <text x="150px" y="200px">abc + <animate attributeName="font" attributeType="CSS" fill="freeze" + from="caption" to="menu" begin="2.0s" dur="2s"/> + </text> + <text x="200px" y="200px">abc + <animate attributeName="font" attributeType="CSS" fill="freeze" + from="caption" to="menu" begin="1.0s" dur="2s"/> + </text> + + <!-- 'caption' to 'message-box' --> + <text x="0px" y="250px">abc + <animate attributeName="font" attributeType="CSS" fill="freeze" + from="caption" to="message-box" begin="4.0s" dur="2s"/> + </text> + <text x="50px" y="250px">abc + <animate attributeName="font" attributeType="CSS" fill="freeze" + from="caption" to="message-box" begin="3.0s" dur="2s"/> + </text> + <text x="100px" y="250px">abc + <animate attributeName="font" attributeType="CSS" fill="freeze" + from="caption" to="message-box" begin="2.01s" dur="2s"/> + </text> + <text x="150px" y="250px">abc + <animate attributeName="font" attributeType="CSS" fill="freeze" + from="caption" to="message-box" begin="2.0s" dur="2s"/> + </text> + <text x="200px" y="250px">abc + <animate attributeName="font" attributeType="CSS" fill="freeze" + from="caption" to="message-box" begin="1.0s" dur="2s"/> + </text> + + <!-- 'caption' to 'small-caption' --> + <text x="0px" y="300px">abc + <animate attributeName="font" attributeType="CSS" fill="freeze" + from="caption" to="small-caption" begin="4.0s" dur="2s"/> + </text> + <text x="50px" y="300px">abc + <animate attributeName="font" attributeType="CSS" fill="freeze" + from="caption" to="small-caption" begin="3.0s" dur="2s"/> + </text> + <text x="100px" y="300px">abc + <animate attributeName="font" attributeType="CSS" fill="freeze" + from="caption" to="small-caption" begin="2.01s" dur="2s"/> + </text> + <text x="150px" y="300px">abc + <animate attributeName="font" attributeType="CSS" fill="freeze" + from="caption" to="small-caption" begin="2.0s" dur="2s"/> + </text> + <text x="200px" y="300px">abc + <animate attributeName="font" attributeType="CSS" fill="freeze" + from="caption" to="small-caption" begin="1.0s" dur="2s"/> + </text> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-by-pct-pct.svg b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-by-pct-pct.svg new file mode 100644 index 0000000000..38afe61f07 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-by-pct-pct.svg @@ -0,0 +1,16 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="font-size: 2px" + class="reftest-wait" + onload="go()"> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "font-size", + "from" : "500%", + "by" : "1000%" }; + testAnimatedTextGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-by-pct-px.svg b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-by-pct-px.svg new file mode 100644 index 0000000000..ea4d7c3e8c --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-by-pct-px.svg @@ -0,0 +1,16 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="font-size: 2px" + class="reftest-wait" + onload="go()"> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "font-size", + "from" : "500%", + "by" : "20px" }; + testAnimatedTextGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-by-px-pct.svg b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-by-px-pct.svg new file mode 100644 index 0000000000..8e4b6d5866 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-by-px-pct.svg @@ -0,0 +1,16 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="font-size: 2px" + class="reftest-wait" + onload="go()"> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "font-size", + "from" : "10px", + "by" : "1000%" }; + testAnimatedTextGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-by-px-px.svg b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-by-px-px.svg new file mode 100644 index 0000000000..637c49e318 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-by-px-px.svg @@ -0,0 +1,16 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="font-size: 2px" + class="reftest-wait" + onload="go()"> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "font-size", + "from" : "10px", + "by" : "20px" }; + testAnimatedTextGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-no-no.svg b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-no-no.svg new file mode 100644 index 0000000000..2b4e18030e --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-no-no.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="font-size: 2px" + class="reftest-wait" + onload="go()"> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "font-size", + "attributeType" : "CSS", + "from" : "10", + "to" : "30" }; + testAnimatedTextGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-no-px.svg b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-no-px.svg new file mode 100644 index 0000000000..7ced25e9af --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-no-px.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="font-size: 2px" + class="reftest-wait" + onload="go()"> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "font-size", + "attributeType" : "CSS", + "from" : "10", + "to" : "30px" }; + testAnimatedTextGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-pct-pct.svg b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-pct-pct.svg new file mode 100644 index 0000000000..0cf6c0cf36 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-pct-pct.svg @@ -0,0 +1,16 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="font-size: 2px" + class="reftest-wait" + onload="go()"> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "font-size", + "from" : "500%", + "to" : "1500%" }; + testAnimatedTextGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-pct-px.svg b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-pct-px.svg new file mode 100644 index 0000000000..fc4ff3afd1 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-pct-px.svg @@ -0,0 +1,16 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="font-size: 2px" + class="reftest-wait" + onload="go()"> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "font-size", + "from" : "500%", + "to" : "30px" }; + testAnimatedTextGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-px-no.svg b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-px-no.svg new file mode 100644 index 0000000000..56e51eeab7 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-px-no.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="font-size: 2px" + class="reftest-wait" + onload="go()"> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "font-size", + "attributeType" : "CSS", + "from" : "10px", + "to" : "30" }; + testAnimatedTextGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-px-pct.svg b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-px-pct.svg new file mode 100644 index 0000000000..94c195c2f3 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-px-pct.svg @@ -0,0 +1,16 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="font-size: 2px" + class="reftest-wait" + onload="go()"> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "font-size", + "from" : "10px", + "to" : "1500%" }; + testAnimatedTextGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-px-px.svg b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-px-px.svg new file mode 100644 index 0000000000..7158f64644 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-px-px.svg @@ -0,0 +1,16 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="font-size: 2px" + class="reftest-wait" + onload="go()"> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "font-size", + "from" : "10px", + "to" : "30px" }; + testAnimatedTextGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fontsize-1-ref.svg b/layout/reftests/svg/smil/style/anim-css-fontsize-1-ref.svg new file mode 100644 index 0000000000..4747c2824c --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fontsize-1-ref.svg @@ -0,0 +1,20 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <text x="20px" y="20px" style="font-size: 2px">abc + </text> + <text x="70px" y="20px" style="font-size: 10px">abc + </text> + <text x="120px" y="20px" style="font-size: 13px">abc + </text> + <text x="20px" y="70px" style="font-size: 17.5px">abc + </text> + <text x="70px" y="70px" style="font-size: 19.9px">abc + </text> + <text x="120px" y="70px" style="font-size: 25px">abc + </text> + <text x="20px" y="120px" style="font-size: 26px">abc + </text> + <text x="70px" y="120px" style="font-size: 30px">abc + </text> + <text x="120px" y="120px" style="font-size: 30px">abc + </text> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fontsize-2-from-by-em-em.svg b/layout/reftests/svg/smil/style/anim-css-fontsize-2-from-by-em-em.svg new file mode 100644 index 0000000000..3fe3ae0ce9 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fontsize-2-from-by-em-em.svg @@ -0,0 +1,16 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="font-size: 2px" + class="reftest-wait" + onload="go()"> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "font-size", + "from" : "15em", + "by" : "-10em" }; + testAnimatedTextGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fontsize-2-from-by-px-em.svg b/layout/reftests/svg/smil/style/anim-css-fontsize-2-from-by-px-em.svg new file mode 100644 index 0000000000..44b407e185 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fontsize-2-from-by-px-em.svg @@ -0,0 +1,16 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="font-size: 2px" + class="reftest-wait" + onload="go()"> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "font-size", + "from" : "30px", + "by" : "-10em" }; + testAnimatedTextGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fontsize-2-from-by-px-px.svg b/layout/reftests/svg/smil/style/anim-css-fontsize-2-from-by-px-px.svg new file mode 100644 index 0000000000..70199be78b --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fontsize-2-from-by-px-px.svg @@ -0,0 +1,16 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="font-size: 2px" + class="reftest-wait" + onload="go()"> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "font-size", + "from" : "30px", + "by" : "-20px" }; + testAnimatedTextGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fontsize-2-ref.svg b/layout/reftests/svg/smil/style/anim-css-fontsize-2-ref.svg new file mode 100644 index 0000000000..6edb8deff6 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fontsize-2-ref.svg @@ -0,0 +1,20 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <text x="20px" y="20px" style="font-size: 2px">abc + </text> + <text x="70px" y="20px" style="font-size: 30px">abc + </text> + <text x="120px" y="20px" style="font-size: 27px">abc + </text> + <text x="20px" y="70px" style="font-size: 22.5px">abc + </text> + <text x="70px" y="70px" style="font-size: 20.1px">abc + </text> + <text x="120px" y="70px" style="font-size: 15px">abc + </text> + <text x="20px" y="120px" style="font-size: 14px">abc + </text> + <text x="70px" y="120px" style="font-size: 10px">abc + </text> + <text x="120px" y="120px" style="font-size: 10px">abc + </text> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-letterspacing-1-ref.svg b/layout/reftests/svg/smil/style/anim-css-letterspacing-1-ref.svg new file mode 100644 index 0000000000..b56522931c --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-letterspacing-1-ref.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <text x="50" y="50" font-size="20" letter-spacing="15">abc</text> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-letterspacing-1.svg b/layout/reftests/svg/smil/style/anim-css-letterspacing-1.svg new file mode 100644 index 0000000000..e10d430cf0 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-letterspacing-1.svg @@ -0,0 +1,8 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" onload="setTimeAndSnapshot(3.0, true)"> + <script xlink:href="../smil-util.js"/> + <text x="50" y="50" font-size="20">abc + <animate attributeName="letter-spacing" fill="freeze" from="0" to="20" begin="0s" dur="4s"/> + </text> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-stopcolor-overflow-1-from-by.svg b/layout/reftests/svg/smil/style/anim-css-stopcolor-overflow-1-from-by.svg new file mode 100644 index 0000000000..da3ace6784 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-stopcolor-overflow-1-from-by.svg @@ -0,0 +1,27 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <!-- This is a series of snapshots of a color animation, starting at --> + <!-- YellowGreen (#9ACD32 == rgb(154,205,50)) and increasing each --> + <!-- channel beyond its maximum. (which should clamp it to 255) --> + <style> + stop { stop-color: yellowgreen; } + rect { stroke: black; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stop-color", + "from" : "yellowgreen", + "by" : "rgb(200, 100, 250)" }; + var graphicElemTag = "rect"; + var graphicElemAttrHash = { "width" : "15px", + "height" : "15px" }; + testAnimatedGridWithDefs(graphicElemTag, graphicElemAttrHash, "fill", + [ "linearGradient", "stop" ], + "animate", [ animAttrHash ]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-stopcolor-overflow-1-ref.svg b/layout/reftests/svg/smil/style/anim-css-stopcolor-overflow-1-ref.svg new file mode 100644 index 0000000000..917bfef9f5 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-stopcolor-overflow-1-ref.svg @@ -0,0 +1,32 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <style> + rect { stroke: black; } + </style> + <rect x="20px" y="20px" width="15px" height="15px" + style="fill: yellowgreen"> + </rect> + <rect x="70px" y="20px" width="15px" height="15px" + style="fill: yellowgreen"> + </rect> + <rect x="120px" y="20px" width="15px" height="15px" + style="fill: rgb(184, 220, 88)"> + </rect> + <rect x="20px" y="70px" width="15px" height="15px" + style="fill: rgb(229, 243, 144)"> + </rect> + <rect x="70px" y="70px" width="15px" height="15px" + style="fill: rgb(253, 255, 174)"> + </rect> + <rect x="120px" y="70px" width="15px" height="15px" + style="fill: rgb(255, 255, 238)"> + </rect> + <rect x="20px" y="120px" width="15px" height="15px" + style="fill: rgb(255, 255, 250)"> + </rect> + <rect x="70px" y="120px" width="15px" height="15px" + style="fill: rgb(255, 255, 255)"> + </rect> + <rect x="120px" y="120px" width="15px" height="15px" + style="fill: rgb(255, 255, 255)"> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokedasharray-1-ref.svg b/layout/reftests/svg/smil/style/anim-css-strokedasharray-1-ref.svg new file mode 100644 index 0000000000..d2cfe9b4bb --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokedasharray-1-ref.svg @@ -0,0 +1,32 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <style> + rect { stroke: blue; stroke-width: 5px; } + </style> + <rect x="20px" y="20px" width="15px" height="15px" + style="stroke-dasharray: 20px, 5px"> + </rect> + <rect x="70px" y="20px" width="15px" height="15px" + style="stroke-dasharray: 20px, 5px"> + </rect> + <rect x="120px" y="20px" width="15px" height="15px" + style="stroke-dasharray: 18.5px, 6.5px"> + </rect> + <rect x="20px" y="70px" width="15px" height="15px" + style="stroke-dasharray: 16.25px, 8.75px"> + </rect> + <rect x="70px" y="70px" width="15px" height="15px" + style="stroke-dasharray: 15.05px, 9.95px"> + </rect> + <rect x="120px" y="70px" width="15px" height="15px" + style="stroke-dasharray: 12.5px, 12.5px"> + </rect> + <rect x="20px" y="120px" width="15px" height="15px" + style="stroke-dasharray: 12px, 13px"> + </rect> + <rect x="70px" y="120px" width="15px" height="15px" + style="stroke-dasharray: 10px, 15px"> + </rect> + <rect x="120px" y="120px" width="15px" height="15px" + style="stroke-dasharray: 10px, 15px"> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokedasharray-1.svg b/layout/reftests/svg/smil/style/anim-css-strokedasharray-1.svg new file mode 100644 index 0000000000..9488f6546e --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokedasharray-1.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <style> + rect { stroke: blue; stroke-width: 5px; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stroke-dasharray", + "from" : "20px, 5px", + "to" : "10px, 15px" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-em-em.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-em-em.svg new file mode 100644 index 0000000000..1472123ee7 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-em-em.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="font-size: 2px" + class="reftest-wait" + onload="go()"> + <style> + rect { stroke: blue; stroke-width: 5em; shape-rendering: crispEdges; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stroke-width", + "by" : "10em" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-em-px.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-em-px.svg new file mode 100644 index 0000000000..2b6a983f2d --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-em-px.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="font-size: 2px" + class="reftest-wait" + onload="go()"> + <style> + rect { stroke: blue; stroke-width: 5em; shape-rendering: crispEdges; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stroke-width", + "by" : "20px" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-no-no.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-no-no.svg new file mode 100644 index 0000000000..0ae489d628 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-no-no.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <style> + rect { stroke: blue; stroke-width: 10; shape-rendering: crispEdges; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stroke-width", + "by" : "20" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-pct-pct.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-pct-pct.svg new file mode 100644 index 0000000000..e9e1cc2d6e --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-pct-pct.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + width="200px" height="200px" + class="reftest-wait" + onload="go()"> + <style> + rect { stroke: blue; stroke-width: 5%; shape-rendering: crispEdges; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stroke-width", + "by" : "10%" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-pct-px.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-pct-px.svg new file mode 100644 index 0000000000..3199059764 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-pct-px.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + width="200px" height="200px" + class="reftest-wait" + onload="go()"> + <style> + rect { stroke: blue; stroke-width: 5%; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stroke-width", + "by" : "20px" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-px-em.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-px-em.svg new file mode 100644 index 0000000000..f1a918ea75 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-px-em.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="font-size: 2px" + class="reftest-wait" + onload="go()"> + <style> + rect { stroke: blue; stroke-width: 10px; shape-rendering: crispEdges; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stroke-width", + "by" : "10em" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-px-pct.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-px-pct.svg new file mode 100644 index 0000000000..076e49adf4 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-px-pct.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + width="200px" height="200px" + class="reftest-wait" + onload="go()"> + <style> + rect { stroke: blue; stroke-width: 10px; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stroke-width", + "by" : "10%" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-px-px.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-px-px.svg new file mode 100644 index 0000000000..65d3bbc6e9 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-px-px.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <style> + rect { stroke: blue; stroke-width: 10px; shape-rendering: crispEdges; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stroke-width", + "by" : "20px" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-em-em.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-em-em.svg new file mode 100644 index 0000000000..2058d83661 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-em-em.svg @@ -0,0 +1,19 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="font-size: 2px" + class="reftest-wait" + onload="go()"> + <style> + rect { stroke: blue; stroke-width: 10px; shape-rendering: crispEdges; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stroke-width", + "from" : "5em", + "by" : "10em" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-em-px.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-em-px.svg new file mode 100644 index 0000000000..e37bc12cf3 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-em-px.svg @@ -0,0 +1,19 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="font-size: 2px" + class="reftest-wait" + onload="go()"> + <style> + rect { stroke: blue; stroke-width: 10px; shape-rendering: crispEdges; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stroke-width", + "from" : "5em", + "by" : "20px" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-no-no.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-no-no.svg new file mode 100644 index 0000000000..0c1afad42b --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-no-no.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <style> + rect { stroke: blue; stroke-width: 10px; shape-rendering: crispEdges; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stroke-width", + "from" : "10", + "by" : "20" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-pct-pct.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-pct-pct.svg new file mode 100644 index 0000000000..76e5c1e520 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-pct-pct.svg @@ -0,0 +1,19 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + width="200px" height="200px" + class="reftest-wait" + onload="go()"> + <style> + rect { stroke: blue; stroke-width: 5%; shape-rendering: crispEdges; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stroke-width", + "from" : "5%", + "by" : "10%" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-pct-px.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-pct-px.svg new file mode 100644 index 0000000000..3394572e76 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-pct-px.svg @@ -0,0 +1,19 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + width="200px" height="200px" + class="reftest-wait" + onload="go()"> + <style> + rect { stroke: blue; stroke-width: 5%; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stroke-width", + "from" : "5%", + "by" : "20px" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-px-em.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-px-em.svg new file mode 100644 index 0000000000..3e26f8973a --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-px-em.svg @@ -0,0 +1,19 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="font-size: 2px" + class="reftest-wait" + onload="go()"> + <style> + rect { stroke: blue; stroke-width: 10px; shape-rendering: crispEdges; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stroke-width", + "from" : "10px", + "by" : "10em" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-px-pct.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-px-pct.svg new file mode 100644 index 0000000000..66c0f137ba --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-px-pct.svg @@ -0,0 +1,19 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + width="200px" height="200px" + class="reftest-wait" + onload="go()"> + <style> + rect { stroke: blue; stroke-width: 10px; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stroke-width", + "from" : "10px", + "by" : "10%" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-px-px.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-px-px.svg new file mode 100644 index 0000000000..e4bba5ae2e --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-px-px.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <style> + rect { stroke: blue; stroke-width: 10px; shape-rendering: crispEdges; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stroke-width", + "from" : "10px", + "by" : "20px" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-em-em.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-em-em.svg new file mode 100644 index 0000000000..7e7d035739 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-em-em.svg @@ -0,0 +1,19 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="font-size: 2px" + class="reftest-wait" + onload="go()"> + <style> + rect { stroke: blue; stroke-width: 10px; shape-rendering: crispEdges; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stroke-width", + "from" : "5em", + "to" : "15em" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-em-px.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-em-px.svg new file mode 100644 index 0000000000..5c538b65b4 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-em-px.svg @@ -0,0 +1,19 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="font-size: 2px" + class="reftest-wait" + onload="go()"> + <style> + rect { stroke: blue; stroke-width: 10px; shape-rendering: crispEdges; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stroke-width", + "from" : "5em", + "to" : "30px" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-no-no.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-no-no.svg new file mode 100644 index 0000000000..1f4e5d09a2 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-no-no.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <style> + rect { stroke: blue; stroke-width: 10px; shape-rendering: crispEdges; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stroke-width", + "from" : "10", + "to" : "30" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-pct-pct.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-pct-pct.svg new file mode 100644 index 0000000000..0da954bb54 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-pct-pct.svg @@ -0,0 +1,19 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + width="200px" height="200px" + class="reftest-wait" + onload="go()"> + <style> + rect { stroke: blue; stroke-width: 5%; shape-rendering: crispEdges; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stroke-width", + "from" : "5%", + "to" : "15%" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-pct-px.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-pct-px.svg new file mode 100644 index 0000000000..37afdef686 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-pct-px.svg @@ -0,0 +1,19 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + width="200px" height="200px" + class="reftest-wait" + onload="go()"> + <style> + rect { stroke: blue; stroke-width: 5%; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stroke-width", + "from" : "5%", + "to" : "30px" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-px-em.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-px-em.svg new file mode 100644 index 0000000000..4dd6908d09 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-px-em.svg @@ -0,0 +1,19 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="font-size: 2px" + class="reftest-wait" + onload="go()"> + <style> + rect { stroke: blue; stroke-width: 10px; shape-rendering: crispEdges; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stroke-width", + "from" : "10px", + "to" : "15em" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-px-pct.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-px-pct.svg new file mode 100644 index 0000000000..3c0b237f08 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-px-pct.svg @@ -0,0 +1,19 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + width="200px" height="200px" + class="reftest-wait" + onload="go()"> + <style> + rect { stroke: blue; stroke-width: 10px; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stroke-width", + "from" : "10px", + "to" : "15%" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-px-px.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-px-px.svg new file mode 100644 index 0000000000..2e4631b7a4 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-px-px.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <style> + rect { stroke: blue; stroke-width: 10px; shape-rendering: crispEdges; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stroke-width", + "from" : "10px", + "to" : "30px" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-ref.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-ref.svg new file mode 100644 index 0000000000..0c6ad16742 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-ref.svg @@ -0,0 +1,29 @@ +<svg xmlns="http://www.w3.org/2000/svg" shape-rendering="crispEdges"> + <rect x="20px" y="20px" width="15px" height="15px" stroke="blue" + style="stroke-width: 10px"> + </rect> + <rect x="70px" y="20px" width="15px" height="15px" stroke="blue" + style="stroke-width: 10px"> + </rect> + <rect x="120px" y="20px" width="15px" height="15px" stroke="blue" + style="stroke-width: 13px"> + </rect> + <rect x="20px" y="70px" width="15px" height="15px" stroke="blue" + style="stroke-width: 17.5px"> + </rect> + <rect x="70px" y="70px" width="15px" height="15px" stroke="blue" + style="stroke-width: 19.9px"> + </rect> + <rect x="120px" y="70px" width="15px" height="15px" stroke="blue" + style="stroke-width: 25px"> + </rect> + <rect x="20px" y="120px" width="15px" height="15px" stroke="blue" + style="stroke-width: 26px"> + </rect> + <rect x="70px" y="120px" width="15px" height="15px" stroke="blue" + style="stroke-width: 30px"> + </rect> + <rect x="120px" y="120px" width="15px" height="15px" stroke="blue" + style="stroke-width: 30px"> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-em-em.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-em-em.svg new file mode 100644 index 0000000000..07df6d5a1a --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-em-em.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="font-size: 2px" + class="reftest-wait" + onload="go()"> + <style> + rect { stroke: blue; stroke-width: 5em; shape-rendering: crispEdges; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stroke-width", + "to" : "15em" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-em-px.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-em-px.svg new file mode 100644 index 0000000000..56ffff8d02 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-em-px.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="font-size: 2px" + class="reftest-wait" + onload="go()"> + <style> + rect { stroke: blue; stroke-width: 5em; shape-rendering: crispEdges; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stroke-width", + "to" : "30px" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-no-no.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-no-no.svg new file mode 100644 index 0000000000..7784dd6ca2 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-no-no.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <style> + rect { stroke: blue; stroke-width: 10; shape-rendering: crispEdges; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stroke-width", + "to" : "30" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-pct-pct.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-pct-pct.svg new file mode 100644 index 0000000000..d44e56b499 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-pct-pct.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + width="200px" height="200px" + class="reftest-wait" + onload="go()"> + <style> + rect { stroke: blue; stroke-width: 5%; shape-rendering: crispEdges; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stroke-width", + "to" : "15%" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-pct-px.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-pct-px.svg new file mode 100644 index 0000000000..9d00d27444 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-pct-px.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + width="200px" height="200px" + class="reftest-wait" + onload="go()"> + <style> + rect { stroke: blue; stroke-width: 5%; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stroke-width", + "to" : "30px" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-px-em.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-px-em.svg new file mode 100644 index 0000000000..17d5b76284 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-px-em.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="font-size: 2px" + class="reftest-wait" + onload="go()"> + <style> + rect { stroke: blue; stroke-width: 10px; shape-rendering: crispEdges; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stroke-width", + "to" : "15em" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-px-pct.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-px-pct.svg new file mode 100644 index 0000000000..c7dd235f25 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-px-pct.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + width="200px" height="200px" + class="reftest-wait" + onload="go()"> + <style> + rect { stroke: blue; stroke-width: 10px; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stroke-width", + "to" : "15%" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-px-px.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-px-px.svg new file mode 100644 index 0000000000..5121cb2bf0 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-px-px.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <style> + rect { stroke: blue; stroke-width: 10px; shape-rendering: crispEdges; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stroke-width", + "to" : "30px" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-2-ref.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-2-ref.svg new file mode 100644 index 0000000000..fc16e65154 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-2-ref.svg @@ -0,0 +1,29 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <rect x="20px" y="20px" width="15px" height="15px" stroke="blue" + style="stroke-width: 10px"> + </rect> + <rect x="70px" y="20px" width="15px" height="15px" stroke="blue" + style="stroke-width: 20px"> + </rect> + <rect x="120px" y="20px" width="15px" height="15px" stroke="blue" + style="stroke-width: 17px"> + </rect> + <rect x="20px" y="70px" width="15px" height="15px" stroke="blue" + style="stroke-width: 12.5px"> + </rect> + <rect x="70px" y="70px" width="15px" height="15px" stroke="blue" + style="stroke-width: 10.1px"> + </rect> + <rect x="120px" y="70px" width="15px" height="15px" stroke="blue" + style="stroke-width: 20px"> + </rect> + <rect x="20px" y="120px" width="15px" height="15px" stroke="blue" + style="stroke-width: 22px"> + </rect> + <rect x="70px" y="120px" width="15px" height="15px" stroke="blue" + style="stroke-width: 30px"> + </rect> + <rect x="120px" y="120px" width="15px" height="15px" stroke="blue" + style="stroke-width: 30px"> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-2-values-em-em.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-2-values-em-em.svg new file mode 100644 index 0000000000..d26e7d7041 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-2-values-em-em.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="font-size: 2px" + class="reftest-wait" + onload="go()"> + <style> + rect { stroke: blue; stroke-width: 10px; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stroke-width", + "values" : "10em; 5em; 15em" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-2-values-em-px.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-2-values-em-px.svg new file mode 100644 index 0000000000..27a15b6663 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-2-values-em-px.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="font-size: 2px" + class="reftest-wait" + onload="go()"> + <style> + rect { stroke: blue; stroke-width: 10px; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stroke-width", + "values" : "10em; 10px; 15em" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-2-values-px-em.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-2-values-px-em.svg new file mode 100644 index 0000000000..4fb2e61906 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-2-values-px-em.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="font-size: 2px" + class="reftest-wait" + onload="go()"> + <style> + rect { stroke: blue; stroke-width: 10px; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stroke-width", + "values" : "20px; 5em; 30px" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-2-values-px-px.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-2-values-px-px.svg new file mode 100644 index 0000000000..b1a21817d3 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-2-values-px-px.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <style> + rect { stroke: blue; stroke-width: 10px; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stroke-width", + "values" : "20px; 10px; 30px" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-3-paced.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-3-paced.svg new file mode 100644 index 0000000000..2449345ecd --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-3-paced.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <style> + rect { stroke: blue; stroke-width: 10px; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stroke-width", + "calcMode" : "paced", + "values" : "10px; 5px; 30px; 20px" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-3-ref.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-3-ref.svg new file mode 100644 index 0000000000..2ddabf480c --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-3-ref.svg @@ -0,0 +1,29 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <rect x="20px" y="20px" width="15px" height="15px" stroke="blue" + style="stroke-width: 10px"> + </rect> + <rect x="70px" y="20px" width="15px" height="15px" stroke="blue" + style="stroke-width: 10px"> + </rect> + <rect x="120px" y="20px" width="15px" height="15px" stroke="blue" + style="stroke-width: 6px"> + </rect> + <rect x="20px" y="70px" width="15px" height="15px" stroke="blue" + style="stroke-width: 15px"> + </rect> + <rect x="70px" y="70px" width="15px" height="15px" stroke="blue" + style="stroke-width: 19.8px"> + </rect> + <rect x="120px" y="70px" width="15px" height="15px" stroke="blue" + style="stroke-width: 30px"> + </rect> + <rect x="20px" y="120px" width="15px" height="15px" stroke="blue" + style="stroke-width: 28px"> + </rect> + <rect x="70px" y="120px" width="15px" height="15px" stroke="blue" + style="stroke-width: 20px"> + </rect> + <rect x="120px" y="120px" width="15px" height="15px" stroke="blue" + style="stroke-width: 20px"> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-4-from-by-em-em.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-4-from-by-em-em.svg new file mode 100644 index 0000000000..9a55c55fc6 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-4-from-by-em-em.svg @@ -0,0 +1,19 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="font-size: 2px" + class="reftest-wait" + onload="go()"> + <style> + rect { stroke: blue; stroke-width: 30px; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stroke-width", + "from" : "15em", + "by" : "-10em" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-4-from-by-no-no.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-4-from-by-no-no.svg new file mode 100644 index 0000000000..43845db4f7 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-4-from-by-no-no.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <style> + rect { stroke: blue; stroke-width: 30px; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stroke-width", + "from" : "30", + "by" : "-20" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-4-from-by-px-em.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-4-from-by-px-em.svg new file mode 100644 index 0000000000..96aa4e4095 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-4-from-by-px-em.svg @@ -0,0 +1,19 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="font-size: 2px" + class="reftest-wait" + onload="go()"> + <style> + rect { stroke: blue; stroke-width: 30px; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stroke-width", + "from" : "30px", + "by" : "-10em" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-4-from-by-px-px.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-4-from-by-px-px.svg new file mode 100644 index 0000000000..f70c9617b1 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-4-from-by-px-px.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <style> + rect { stroke: blue; stroke-width: 30px; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stroke-width", + "from" : "30px", + "by" : "-20px" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-4-ref.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-4-ref.svg new file mode 100644 index 0000000000..bfbb8e3fae --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-4-ref.svg @@ -0,0 +1,29 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <rect x="20px" y="20px" width="15px" height="15px" stroke="blue" + style="stroke-width: 30px"> + </rect> + <rect x="70px" y="20px" width="15px" height="15px" stroke="blue" + style="stroke-width: 30px"> + </rect> + <rect x="120px" y="20px" width="15px" height="15px" stroke="blue" + style="stroke-width: 27px"> + </rect> + <rect x="20px" y="70px" width="15px" height="15px" stroke="blue" + style="stroke-width: 22.5px"> + </rect> + <rect x="70px" y="70px" width="15px" height="15px" stroke="blue" + style="stroke-width: 20.1px"> + </rect> + <rect x="120px" y="70px" width="15px" height="15px" stroke="blue" + style="stroke-width: 15px"> + </rect> + <rect x="20px" y="120px" width="15px" height="15px" stroke="blue" + style="stroke-width: 14px"> + </rect> + <rect x="70px" y="120px" width="15px" height="15px" stroke="blue" + style="stroke-width: 10px"> + </rect> + <rect x="120px" y="120px" width="15px" height="15px" stroke="blue" + style="stroke-width: 10px"> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-wordspacing-1-ref.svg b/layout/reftests/svg/smil/style/anim-css-wordspacing-1-ref.svg new file mode 100644 index 0000000000..18ab815f77 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-wordspacing-1-ref.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <text x="50" y="50" font-size="20" word-spacing="15">hello there</text> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-wordspacing-1.svg b/layout/reftests/svg/smil/style/anim-css-wordspacing-1.svg new file mode 100644 index 0000000000..46e636e076 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-wordspacing-1.svg @@ -0,0 +1,8 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" onload="setTimeAndSnapshot(3.0, true)"> + <script xlink:href="../smil-util.js"/> + <text x="50" y="50" font-size="20">hello there + <animate attributeName="word-spacing" fill="freeze" from="0" to="20" begin="0s" dur="4s"/> + </text> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-mapped-fontsize-1-from-to-no-no.svg b/layout/reftests/svg/smil/style/anim-mapped-fontsize-1-from-to-no-no.svg new file mode 100644 index 0000000000..2583c2a7ce --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-mapped-fontsize-1-from-to-no-no.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="font-size: 2px" + class="reftest-wait" + onload="go()"> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "font-size", + "attributeType" : "XML", + "from" : "10", + "to" : "30" }; + testAnimatedTextGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-mapped-fontsize-1-from-to-no-px.svg b/layout/reftests/svg/smil/style/anim-mapped-fontsize-1-from-to-no-px.svg new file mode 100644 index 0000000000..4a487ece7a --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-mapped-fontsize-1-from-to-no-px.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="font-size: 2px" + class="reftest-wait" + onload="go()"> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "font-size", + "attributeType" : "XML", + "from" : "10", + "to" : "30px" }; + testAnimatedTextGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-mapped-fontsize-1-from-to-px-no.svg b/layout/reftests/svg/smil/style/anim-mapped-fontsize-1-from-to-px-no.svg new file mode 100644 index 0000000000..689fd045d4 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-mapped-fontsize-1-from-to-px-no.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="font-size: 2px" + class="reftest-wait" + onload="go()"> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "font-size", + "attributeType" : "XML", + "from" : "10px", + "to" : "30" }; + testAnimatedTextGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-standard-ref.svg b/layout/reftests/svg/smil/style/anim-standard-ref.svg new file mode 100644 index 0000000000..39f37ae6d1 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-standard-ref.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <rect x="15" y="15" width="200" height="200" fill="blue"/> +</svg> diff --git a/layout/reftests/svg/smil/style/important-set-1.svg b/layout/reftests/svg/smil/style/important-set-1.svg new file mode 100644 index 0000000000..197ba26b6f --- /dev/null +++ b/layout/reftests/svg/smil/style/important-set-1.svg @@ -0,0 +1,8 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" +> + <rect x="15" y="15" width="200" height="200" style="fill: blue !important"> + <set attributeName="fill" attributeType="CSS" + to="red" begin="0s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/style/important-set-2.svg b/layout/reftests/svg/smil/style/important-set-2.svg new file mode 100644 index 0000000000..e5515db10c --- /dev/null +++ b/layout/reftests/svg/smil/style/important-set-2.svg @@ -0,0 +1,11 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" +> + <style> + rect { fill: blue !important; } + </style> + <rect x="15" y="15" width="200" height="200"> + <set attributeName="fill" attributeType="CSS" + to="red" begin="0s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/style/namespaced-property-1.svg b/layout/reftests/svg/smil/style/namespaced-property-1.svg new file mode 100644 index 0000000000..415c1ffb62 --- /dev/null +++ b/layout/reftests/svg/smil/style/namespaced-property-1.svg @@ -0,0 +1,6 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <rect x="15" y="15" width="200" height="200" fill="blue"> + <set attributeName="xlink:opacity" to="0.5" begin="0s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/style/reftest.list b/layout/reftests/svg/smil/style/reftest.list new file mode 100644 index 0000000000..a7888a3abe --- /dev/null +++ b/layout/reftests/svg/smil/style/reftest.list @@ -0,0 +1,169 @@ +# Tests related to SVG Animation (using SMIL) of CSS properties + +# XXXdholbert TODO: Test color animation with "color-interpolation: linearRGB" +# (when it's implemented) + +# 'color' property, from/to/by with named colors & hex values +== anim-css-color-1-by-ident-hex.svg anim-css-fill-1-ref.svg +== anim-css-color-1-from-by-hex-hex.svg anim-css-fill-1-ref.svg +fuzzy(0-1,0-550) == anim-css-color-1-from-by-ident-hex.svg anim-css-fill-1-ref.svg +fuzzy(0-1,0-550) == anim-css-color-1-from-to-hex-hex.svg anim-css-fill-1-ref.svg +fuzzy(0-1,0-550) == anim-css-color-1-from-to-ident-ident.svg anim-css-fill-1-ref.svg +fuzzy(0-1,0-550) == anim-css-color-1-to-ident-hex.svg anim-css-fill-1-ref.svg +fuzzy(0-1,0-550) == anim-css-color-1-to-ident-ident.svg anim-css-fill-1-ref.svg + +# 'color' property, paced calcMode +== anim-css-color-2-paced-rgb.svg anim-css-fill-2-ref.svg + +# 'color' property, animating *by* a named color +fuzzy(0-1,0-580) == anim-css-color-3-by-ident-ident.svg anim-css-fill-3-ref.svg +fuzzy(0-1,0-580) == anim-css-color-3-from-by-ident-ident.svg anim-css-fill-3-ref.svg +fuzzy(0-1,0-580) == anim-css-color-3-from-by-rgb-ident.svg anim-css-fill-3-ref.svg + +# 'fill' property, from/to/by with named colors & hex values +fuzzy(0-1,0-550) == anim-css-fill-1-by-ident-hex.svg anim-css-fill-1-ref.svg +fuzzy(0-1,0-550) == anim-css-fill-1-from-by-hex-hex.svg anim-css-fill-1-ref.svg +fuzzy(0-1,0-550) == anim-css-fill-1-from-by-ident-hex.svg anim-css-fill-1-ref.svg +fuzzy(0-1,0-550) == anim-css-fill-1-from-to-hex-hex.svg anim-css-fill-1-ref.svg +fuzzy(0-1,0-550) == anim-css-fill-1-from-to-ident-ident.svg anim-css-fill-1-ref.svg +fuzzy(0-1,0-550) == anim-css-fill-1-to-ident-hex.svg anim-css-fill-1-ref.svg +fuzzy(0-1,0-550) == anim-css-fill-1-to-ident-ident.svg anim-css-fill-1-ref.svg + +# 'fill' property, from/to/by, with 'currentColor' keyword +fuzzy(0-1,0-550) == anim-css-fill-1-by-ident-curcol.svg anim-css-fill-1-ref.svg +fuzzy(0-1,0-550) == anim-css-fill-1-from-by-curcol-hex.svg anim-css-fill-1-ref.svg +fuzzy(0-1,0-550) == anim-css-fill-1-from-by-hex-curcol.svg anim-css-fill-1-ref.svg +fuzzy(0-1,0-550) == anim-css-fill-1-from-to-curcol-hex.svg anim-css-fill-1-ref.svg +fuzzy(0-1,0-550) == anim-css-fill-1-from-to-hex-curcol.svg anim-css-fill-1-ref.svg +fuzzy(0-1,0-550) == anim-css-fill-1-to-ident-curcol.svg anim-css-fill-1-ref.svg + +# 'fill' property, paced calcMode +== anim-css-fill-2-paced-rgb.svg anim-css-fill-2-ref.svg + +# 'fill' property, animating *by* a named color +fuzzy(0-1,0-580) == anim-css-fill-3-by-ident-ident.svg anim-css-fill-3-ref.svg +fuzzy(0-1,0-580) == anim-css-fill-3-from-by-ident-ident.svg anim-css-fill-3-ref.svg +fuzzy(0-1,0-580) == anim-css-fill-3-from-by-rgb-ident.svg anim-css-fill-3-ref.svg + +# check handling of overflowing color values +# NOTE: Some of the tests below fail in Gecko because we compute +# "from + by" as the animation end-point, and we clamp that final color value +# (due to bug 515919) and use the clamped value for interpolation. +# That's earlier than the SVG spec wants us to clamp -- we're only supposed to +# clamp *final presentation values*. +# (Reference: SVG 1.1 Appendix F.4) +== anim-css-fill-overflow-1-by.svg anim-css-fill-overflow-1-ref.svg +== anim-css-fill-overflow-1-from-by.svg anim-css-fill-overflow-1-ref.svg # bug 515919 +== anim-css-stopcolor-overflow-1-from-by.svg anim-css-stopcolor-overflow-1-ref.svg # bug 515919 +== anim-css-floodcolor-overflow-1-from-by.svg anim-css-floodcolor-overflow-1-ref.svg # bug 515919 + +# 'fill-opacity' property +fuzzy(0-1,0-885) == anim-css-fillopacity-1-by.svg anim-css-fillopacity-1-ref.svg +fuzzy(0-1,0-210) == anim-css-fillopacity-1-from-by.svg anim-css-fillopacity-1-ref.svg +== anim-css-fillopacity-1-from-to.svg anim-css-fillopacity-1-ref.svg +fuzzy(0-1,0-550) == anim-css-fillopacity-1-to.svg anim-css-fillopacity-1-ref.svg +== anim-css-fillopacity-2-paced.svg anim-css-fillopacity-2-ref.svg +fails == anim-css-fillopacity-3-clamp-big.svg anim-css-fillopacity-3-ref.svg # bug 501188 +fuzzy(0-1,0-365) == anim-css-fillopacity-3-clamp-small.svg anim-css-fillopacity-3-ref.svg + +# 'font' shorthand property +fuzzy-if(gtkWidget,255-255,1520-1520) == anim-css-font-1.svg anim-css-font-1-ref.svg # Windows: Bug 1392106 Linux: Bug 1599619 + +# 'font-size' property, from/by/to with pixel values only +== anim-css-fontsize-1-from-by-px-px.svg anim-css-fontsize-1-ref.svg +== anim-css-fontsize-1-from-to-px-px.svg anim-css-fontsize-1-ref.svg + +# 'font-size' property (accepts unitless values) +== anim-css-fontsize-1-from-to-no-no.svg anim-css-fontsize-1-ref.svg +== anim-css-fontsize-1-from-to-no-px.svg anim-css-fontsize-1-ref.svg +== anim-css-fontsize-1-from-to-px-no.svg anim-css-fontsize-1-ref.svg + +# 'font-size' mapped attribute (accepts unitless values) +== anim-mapped-fontsize-1-from-to-no-no.svg anim-css-fontsize-1-ref.svg +== anim-mapped-fontsize-1-from-to-no-px.svg anim-css-fontsize-1-ref.svg +== anim-mapped-fontsize-1-from-to-px-no.svg anim-css-fontsize-1-ref.svg + +# 'font-size' property, from/by/to with percent values +== anim-css-fontsize-1-from-by-pct-pct.svg anim-css-fontsize-1-ref.svg +== anim-css-fontsize-1-from-by-pct-px.svg anim-css-fontsize-1-ref.svg +== anim-css-fontsize-1-from-by-px-pct.svg anim-css-fontsize-1-ref.svg +== anim-css-fontsize-1-from-to-pct-pct.svg anim-css-fontsize-1-ref.svg +== anim-css-fontsize-1-from-to-pct-px.svg anim-css-fontsize-1-ref.svg +== anim-css-fontsize-1-from-to-px-pct.svg anim-css-fontsize-1-ref.svg + +# 'font-size' property, with negative addition +== anim-css-fontsize-2-from-by-px-px.svg anim-css-fontsize-2-ref.svg +== anim-css-fontsize-2-from-by-px-em.svg anim-css-fontsize-2-ref.svg +== anim-css-fontsize-2-from-by-em-em.svg anim-css-fontsize-2-ref.svg + +# 'stroke-dasharray' property, from/to with pixel values only +fails == anim-css-strokedasharray-1.svg anim-css-strokedasharray-1-ref.svg # bug 474049 + +# 'stroke-width' property, from/by/to with pixel values only +== anim-css-strokewidth-1-by-px-px.svg anim-css-strokewidth-1-ref.svg +== anim-css-strokewidth-1-from-by-px-px.svg anim-css-strokewidth-1-ref.svg +== anim-css-strokewidth-1-from-to-px-px.svg anim-css-strokewidth-1-ref.svg +== anim-css-strokewidth-1-to-px-px.svg anim-css-strokewidth-1-ref.svg + +# 'stroke-width' property, from/by/to with unitless values only +== anim-css-strokewidth-1-by-no-no.svg anim-css-strokewidth-1-ref.svg +== anim-css-strokewidth-1-from-by-no-no.svg anim-css-strokewidth-1-ref.svg +== anim-css-strokewidth-1-from-to-no-no.svg anim-css-strokewidth-1-ref.svg +== anim-css-strokewidth-1-to-no-no.svg anim-css-strokewidth-1-ref.svg + +# 'stroke-width' property, from/by/to with percent values +# XXXdholbert the mixed pct + px tests fail right now, because we need calc() +# in order to interpolate between pct and non-pct values, and we don't yet +# support calc() for stroke-width & other SVG-specific properties. +# +# Bug 1258270 and 1386967 +== anim-css-strokewidth-1-by-pct-pct.svg anim-css-strokewidth-1-ref.svg +fails == anim-css-strokewidth-1-by-pct-px.svg anim-css-strokewidth-1-ref.svg +fails == anim-css-strokewidth-1-by-px-pct.svg anim-css-strokewidth-1-ref.svg +fails-if(!useDrawSnapshot) == anim-css-strokewidth-1-from-by-pct-pct.svg anim-css-strokewidth-1-ref.svg # bug 1459418 +fails == anim-css-strokewidth-1-from-by-pct-px.svg anim-css-strokewidth-1-ref.svg +fails == anim-css-strokewidth-1-from-by-px-pct.svg anim-css-strokewidth-1-ref.svg +fails-if(!useDrawSnapshot) == anim-css-strokewidth-1-from-to-pct-pct.svg anim-css-strokewidth-1-ref.svg # bug 1459418 +fails == anim-css-strokewidth-1-from-to-pct-px.svg anim-css-strokewidth-1-ref.svg +fails == anim-css-strokewidth-1-from-to-px-pct.svg anim-css-strokewidth-1-ref.svg +fails-if(!useDrawSnapshot) == anim-css-strokewidth-1-to-pct-pct.svg anim-css-strokewidth-1-ref.svg # bug 1459418 +fails == anim-css-strokewidth-1-to-pct-px.svg anim-css-strokewidth-1-ref.svg +fails == anim-css-strokewidth-1-to-px-pct.svg anim-css-strokewidth-1-ref.svg + +# 'stroke-width' property, from/by/to with em values +== anim-css-strokewidth-1-by-px-em.svg anim-css-strokewidth-1-ref.svg +== anim-css-strokewidth-1-by-em-em.svg anim-css-strokewidth-1-ref.svg +== anim-css-strokewidth-1-by-em-px.svg anim-css-strokewidth-1-ref.svg +== anim-css-strokewidth-1-from-by-px-em.svg anim-css-strokewidth-1-ref.svg +== anim-css-strokewidth-1-from-by-em-em.svg anim-css-strokewidth-1-ref.svg +== anim-css-strokewidth-1-from-by-em-px.svg anim-css-strokewidth-1-ref.svg +== anim-css-strokewidth-1-from-to-px-em.svg anim-css-strokewidth-1-ref.svg +== anim-css-strokewidth-1-from-to-em-em.svg anim-css-strokewidth-1-ref.svg +== anim-css-strokewidth-1-from-to-em-px.svg anim-css-strokewidth-1-ref.svg +== anim-css-strokewidth-1-to-px-em.svg anim-css-strokewidth-1-ref.svg +== anim-css-strokewidth-1-to-em-em.svg anim-css-strokewidth-1-ref.svg +== anim-css-strokewidth-1-to-em-px.svg anim-css-strokewidth-1-ref.svg + +# 'stroke-width' property, values-array & paced calc-mode support +== anim-css-strokewidth-2-values-em-em.svg anim-css-strokewidth-2-ref.svg +== anim-css-strokewidth-2-values-em-px.svg anim-css-strokewidth-2-ref.svg +== anim-css-strokewidth-2-values-px-em.svg anim-css-strokewidth-2-ref.svg +fuzzy(0-1,0-360) == anim-css-strokewidth-2-values-px-px.svg anim-css-strokewidth-2-ref.svg +== anim-css-strokewidth-3-paced.svg anim-css-strokewidth-3-ref.svg + +# 'stroke-width' property, negative addition +== anim-css-strokewidth-4-from-by-px-px.svg anim-css-strokewidth-4-ref.svg +== anim-css-strokewidth-4-from-by-px-em.svg anim-css-strokewidth-4-ref.svg +== anim-css-strokewidth-4-from-by-em-em.svg anim-css-strokewidth-4-ref.svg +fuzzy(0-1,0-170) == anim-css-strokewidth-4-from-by-no-no.svg anim-css-strokewidth-4-ref.svg + +# check correct handling of "!important" values +== important-set-1.svg anim-standard-ref.svg +== important-set-2.svg anim-standard-ref.svg + +# check namespaced attribute +== namespaced-property-1.svg anim-standard-ref.svg + +# 'letter-spacing' and 'word-spacing' +== anim-css-letterspacing-1.svg anim-css-letterspacing-1-ref.svg +== anim-css-wordspacing-1.svg anim-css-wordspacing-1-ref.svg diff --git a/layout/reftests/svg/smil/syncbase/changed-interval-change-spec-1.svg b/layout/reftests/svg/smil/syncbase/changed-interval-change-spec-1.svg new file mode 100644 index 0000000000..5952d99125 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/changed-interval-change-spec-1.svg @@ -0,0 +1,21 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(1.5); + document.getElementById('a').removeAttribute('begin'); + setTimeAndSnapshot(2, false)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Deleting the begin spec whilst the element is active should not cause + a change notification to be generated. + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="1s" dur="10s"/> + <animate attributeName="fill" attributeType="CSS" + values="green" + begin="a.begin" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/changed-interval-change-spec-2.svg b/layout/reftests/svg/smil/syncbase/changed-interval-change-spec-2.svg new file mode 100644 index 0000000000..c2db156479 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/changed-interval-change-spec-2.svg @@ -0,0 +1,22 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(1.2); + document.getElementById('a').removeAttribute('begin'); + setTimeAndSnapshot(2, false)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Deleting the begin spec whilst the syncbase element is active should not + cause a change notification to be generated since the begin time is fixed + once the element is active. + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="1s" dur="10s"/> + <animate attributeName="fill" attributeType="CSS" + values="green" + begin="a.begin+0.5s" dur="1s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/changed-interval-change-spec-3.svg b/layout/reftests/svg/smil/syncbase/changed-interval-change-spec-3.svg new file mode 100644 index 0000000000..103b0e780c --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/changed-interval-change-spec-3.svg @@ -0,0 +1,22 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(1.2); + document.getElementById('a').setAttribute('begin', '0s'); + setTimeAndSnapshot(2, false)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Changing the begin spec whilst the syncbase element is active should not + cause a change notification to be generated since the begin time is fixed + once the element is active. + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="1s" dur="10s"/> + <animate attributeName="fill" attributeType="CSS" + values="green" + begin="a.begin+0.5s" dur="1s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/changed-interval-change-spec-4.svg b/layout/reftests/svg/smil/syncbase/changed-interval-change-spec-4.svg new file mode 100644 index 0000000000..ef7ba61a94 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/changed-interval-change-spec-4.svg @@ -0,0 +1,27 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(0); + document.getElementById('b').removeAttribute('begin'); + document.getElementById('a').setAttribute('dur', '1s'); + setTimeAndSnapshot(2, false)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + 1. Initially, we have a begin time that is dependent on an unresolved time + (a.end). + 2. The begin attribute that created the begin time is then removed. + 3. The base interval on which the begin time is dependent is then resolved. + + In this case, the unresolved dependent begin should have been cleared in + at point 2 and no new interval should be created. + --> + <rect width="100" height="100" fill="green"> + <!-- Base interval with unresolved end time --> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a"/> + <!-- Dependent interval --> + <animate attributeName="fill" attributeType="CSS" id="b" + values="red" begin="a.end" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/changed-interval-resolved-1.svg b/layout/reftests/svg/smil/syncbase/changed-interval-resolved-1.svg new file mode 100644 index 0000000000..d6bbd1da78 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/changed-interval-resolved-1.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + When the animations are initially set up there's potential for a change + notification once b is resolved. + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="10s; b.begin" dur="10s"/> + <animate attributeName="fill" attributeType="CSS" + values="orange; green; purple" + begin="a.begin" dur="2s"/> + <set attributeName="y" begin="1s" id="b" to="0"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/changed-interval-resolved-2.svg b/layout/reftests/svg/smil/syncbase/changed-interval-resolved-2.svg new file mode 100644 index 0000000000..d4b3c681ef --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/changed-interval-resolved-2.svg @@ -0,0 +1,20 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.getElementById('c').setAttribute('id', 'b'); + setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + When the animations are initially set up a change notice should resolved + when c's id is updated to b. + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="10s; b.begin" dur="10s"/> + <animate attributeName="fill" attributeType="CSS" + values="orange; green; purple" + begin="a.begin" dur="2s"/> + <set attributeName="y" begin="1s" id="c" to="0"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/changed-interval-simple-1.svg b/layout/reftests/svg/smil/syncbase/changed-interval-simple-1.svg new file mode 100644 index 0000000000..3ba8c6687d --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/changed-interval-simple-1.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + A simple case of a changing interval. + The end will be updated when the syncbase does an early end. + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="0s; 1s" dur="10s"/> + <animate attributeName="fill" attributeType="CSS" + values="orange; green; purple" + begin="a.end" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/changed-interval-simple-2.svg b/layout/reftests/svg/smil/syncbase/changed-interval-simple-2.svg new file mode 100644 index 0000000000..fc7756800f --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/changed-interval-simple-2.svg @@ -0,0 +1,21 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(0); + document.getElementById('a').beginElementAt(1); + setTimeAndSnapshot(2, false)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + We'll add another begin instance time at t=1s for 'a' by script, causing a + change notification. + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="10s" dur="4s"/> + <animate attributeName="fill" attributeType="CSS" + values="orange; green; purple" + begin="a.begin" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/changed-interval-simple-3.svg b/layout/reftests/svg/smil/syncbase/changed-interval-simple-3.svg new file mode 100644 index 0000000000..ae5f28fbfb --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/changed-interval-simple-3.svg @@ -0,0 +1,21 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(0); + document.getElementById('a').endElementAt(1); + setTimeAndSnapshot(2, false)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + We'll add another end instance time at t=1s for 'a' by script, causing a + change notification. + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="0s" dur="4s"/> + <animate attributeName="fill" attributeType="CSS" + values="orange; green; purple" + begin="a.end" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/changed-interval-simple-4.svg b/layout/reftests/svg/smil/syncbase/changed-interval-simple-4.svg new file mode 100644 index 0000000000..671e9cd370 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/changed-interval-simple-4.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + An early end should generate two change notices here and because + restart="whenNotActive" we should only apply the earlier one, regardless of + what order they arrive in. + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="0s; 1.5s" dur="4s"/> + <animate attributeName="fill" attributeType="CSS" + values="orange; green; purple" + begin="a.end; a.end-0.5s" dur="2s" restart="whenNotActive"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/changed-interval-simple-5.svg b/layout/reftests/svg/smil/syncbase/changed-interval-simple-5.svg new file mode 100644 index 0000000000..07648813c1 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/changed-interval-simple-5.svg @@ -0,0 +1,21 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(0); + document.getElementById('a').removeAttribute('begin'); + setTimeAndSnapshot(2, false)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Changing the begin attribute by script should cause a change notice to be + generated. + --> + <rect width="100" height="100" fill="green"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="1s" dur="10s"/> + <animate attributeName="fill" attributeType="CSS" + values="red; red" + begin="a.begin" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/changed-interval-sort-1.svg b/layout/reftests/svg/smil/syncbase/changed-interval-sort-1.svg new file mode 100644 index 0000000000..6fbd62a462 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/changed-interval-sort-1.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + A simple case of a changing interval to check that instances times are + re-sorted. + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="0s; 1s" dur="10s"/> + <animate attributeName="fill" attributeType="CSS" + values="orange; green; purple" + begin="3s; a.end" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/cross-container-1.xhtml b/layout/reftests/svg/smil/syncbase/cross-container-1.xhtml new file mode 100644 index 0000000000..72d7eb782e --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/cross-container-1.xhtml @@ -0,0 +1,33 @@ +<?xml version="1.0" encoding="UTF-8" ?> +<html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait"> +<!-- + The simplest possible test of a cross-time container dependency. + --> +<head> +<script> +function snapshot() { + var a = document.getElementById("svg-a"); + var b = document.getElementById("svg-b"); + b.pauseAnimations(); + a.pauseAnimations(); + b.setCurrentTime(1); // In document time, 'b' has now begun and therefore so + // has 'a' + a.setCurrentTime(1); // So we only need seek forward 1s to get to the middle + // of the animation + document.documentElement.removeAttribute("class"); +} +</script> +</head> +<body onload="snapshot()"> +<svg xmlns="http://www.w3.org/2000/svg" width="120px" height="120px" id="svg-a"> + <rect width="100" height="100" fill="red"> + <animate attributeName="fill" attributeType="CSS" id="a" + values="orange; green; purple" calcMode="discrete" + begin="b.begin" dur="2s"/> + </rect> +</svg> +<svg xmlns="http://www.w3.org/2000/svg" width="120px" height="120px" id="svg-b"> + <set attributeName="y" to="0" begin="1s" id="b"/> +</svg> +</body> +</html> diff --git a/layout/reftests/svg/smil/syncbase/cross-container-2.xhtml b/layout/reftests/svg/smil/syncbase/cross-container-2.xhtml new file mode 100644 index 0000000000..272b65ae75 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/cross-container-2.xhtml @@ -0,0 +1,43 @@ +<?xml version="1.0" encoding="UTF-8" ?> +<html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait"> +<!-- + Check that pausing the base time container makes dependent times unresolved. + --> +<head> +<script><!----><![CDATA[ +function snapshot() { + var a = document.getElementById("svg-a"); + var b = document.getElementById("svg-b"); + a.pauseAnimations(); + b.pauseAnimations(); + a.setCurrentTime(2); // Since b is paused, the start time of a is now + // unresolved. + // Check DOM state as well + var wrong = document.getElementById("wrong"); + try { + document.getElementById("a").getStartTime(); + } catch (e) { + if (e.name == "InvalidStateError" && + e.code == DOMException.INVALID_STATE_ERR) { + wrong.style.setProperty('visibility', 'hidden', ''); + } + } + document.documentElement.removeAttribute("class"); +} +//]]></script> +</head> +<body onload="snapshot()"> +<svg xmlns="http://www.w3.org/2000/svg" width="120px" height="120px" id="svg-a"> + <rect width="100" height="100" fill="green"> + <set attributeName="fill" to="red" begin="b.begin" id="a"/> + </rect> + <g id="wrong"> + <line stroke="black" stroke-width="8" x1="0" y1="0" x2="100" y2="100"/> + <line stroke="black" stroke-width="8" x1="0" y1="100" x2="100" y2="0"/> + </g> +</svg> +<svg xmlns="http://www.w3.org/2000/svg" width="120px" height="120px" id="svg-b"> + <set attributeName="y" to="0" begin="1s" id="b"/> +</svg> +</body> +</html> diff --git a/layout/reftests/svg/smil/syncbase/cross-container-3.xhtml b/layout/reftests/svg/smil/syncbase/cross-container-3.xhtml new file mode 100644 index 0000000000..d5e94ac12e --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/cross-container-3.xhtml @@ -0,0 +1,63 @@ +<?xml version="1.0" encoding="UTF-8" ?> +<html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait"> +<!-- + Check that calls to beginElement cause the pause time to be updated. + + This is an area that's underspecified so we're just going with what's + intuitive. A is supposed to start at the same time as B. However, whilst B is + paused, a script calls 'beginElement'. Yet A is not paused. Intuitively, + A should start at the time beginElement is called. However, unless we handle + this situation specifically, what happens instead is that A is considered to + begin at the time when B was paused as follows: + + + Document time: + 0 1 2 3 4 ... + A: + B: |.......*.......... + ^ Pause starts here + ^ beginElement called here + + Intuitively, A should start at t=2s, not t=1s. To provide this behaviour we + must specifically handle it. + + Perhaps a more fundamental question is whether a call to beginElement should + take effect whilst the document is paused. Currently it does. This is + consistent with Opera but not Safari. + --> +<head> +<script> +function snapshot() { + var svgb = document.getElementById("svg-b"); + svgb.pauseAnimations(); + setTimeout('snapshotB()', 100); +} + +function snapshotB() { + var svga = document.getElementById("svg-a"); + svga.pauseAnimations(); + var b = document.getElementById("b"); + b.beginElement(); + // Force a sample on the first document fragment before taking a snapshot + svga.setCurrentTime(svga.getCurrentTime()); + document.documentElement.removeAttribute("class"); +} + +document.addEventListener("MozReftestInvalidate", snapshot, false); +setTimeout(snapshot, 4000); // fallback for running outside reftest + +</script> +</head> +<body> +<svg xmlns="http://www.w3.org/2000/svg" width="120px" height="120px" id="svg-a"> + <rect width="100" height="100" fill="orange"> + <animate attributeName="fill" attributeType="CSS" id="a" + values="green; red" + begin="b.begin" dur="0.5s"/> + </rect> +</svg> +<svg xmlns="http://www.w3.org/2000/svg" width="120px" height="120px" id="svg-b"> + <set attributeName="y" to="0" begin="indefinite" id="b"/> +</svg> +</body> +</html> diff --git a/layout/reftests/svg/smil/syncbase/cycle-change-1.svg b/layout/reftests/svg/smil/syncbase/cycle-change-1.svg new file mode 100644 index 0000000000..25a3c4ad39 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/cycle-change-1.svg @@ -0,0 +1,20 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(0); + document.getElementById('a').beginElementAt(1); + setTimeAndSnapshot(2, false)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Test that cycles don't cause problems for change notices as well. + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="b.begin; 3s" dur="4s"/> + <animate attributeName="fill" attributeType="CSS" id="b" + values="orange; green; purple" + begin="a.begin" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/cycle-change-2.svg b/layout/reftests/svg/smil/syncbase/cycle-change-2.svg new file mode 100644 index 0000000000..861be05c9a --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/cycle-change-2.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Test that cycles don't cause problems for change notices as well. In this + case we have an early end. + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="b.begin; 0s; 1s" dur="4s"/> + <animate attributeName="fill" attributeType="CSS" id="b" + values="orange; green; purple" + begin="a.begin" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/cycle-delete-1.svg b/layout/reftests/svg/smil/syncbase/cycle-delete-1.svg new file mode 100644 index 0000000000..79408a0483 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/cycle-delete-1.svg @@ -0,0 +1,20 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(0); + document.getElementById('a').setAttribute('end', '0s'); + setTimeAndSnapshot(2, false)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Test that cycles don't cause problems for deleted intervals. + --> + <rect width="100" height="100" fill="green"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="b.begin; 1s" dur="4s"/> + <animate attributeName="fill" attributeType="CSS" id="b" + values="red; red" + begin="a.begin" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/cycle-invalid-1.svg b/layout/reftests/svg/smil/syncbase/cycle-invalid-1.svg new file mode 100644 index 0000000000..863de4a938 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/cycle-invalid-1.svg @@ -0,0 +1,16 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + An invalid cycle. Example 1 from SMIL3 section 5.4.5. + --> + <rect width="100" height="100" fill="green"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="b.begin" dur="4s"/> + <animate attributeName="fill" attributeType="CSS" id="b" + values="red" + begin="a.begin" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/cycle-invalid-2.svg b/layout/reftests/svg/smil/syncbase/cycle-invalid-2.svg new file mode 100644 index 0000000000..97829d6554 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/cycle-invalid-2.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + An invalid cycle. Example 2 From SMIL3 section 5.4.5. + --> + <rect width="100" height="100" fill="blue"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="c.end" dur="4s"/> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="b" + begin="a.begin" dur="3s"/> + <animate attributeName="fill" attributeType="CSS" id="c" + values="green; red" + begin="0" end="b.end"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/cycle-invalid-3.svg b/layout/reftests/svg/smil/syncbase/cycle-invalid-3.svg new file mode 100644 index 0000000000..9e7d460aff --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/cycle-invalid-3.svg @@ -0,0 +1,54 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + An invalid cycle that propagates backwards. + Example 4 from SMIL3 section 5.4.5. + + Regarding cycle detection SMIL 3.0 says: + + "When a cycle is detected, the change propagation is ignored. The element + that detected the second visit ignores the second change notice, and so + breaks the cycle." + + So we are only concerned with cycles amongst CHANGE notices. We understand + this as follows: + + a: 5s-7s + new -> b: 4s-6s + new -> a: 3s-5s + change -> b: 2s-4s + change -> a: 1s-3s + change -> b: second change notice, break cycle! + + Thus giving us: + a: 1s-3s; 3s-5s; 5s-7s + b: 2s-4s; 4s-6s + + Opera gives us: + a: -1s-1s; 1s-3s; 3s-5s; 5s-7s + b: 0s-2s; 2s-4s; 4s-6s + + Safari gives us: + a: 3s-5s; 5s-7s + b: 2s-4s; 4s-6s + + Batik 1.7 gives: + a: 5s-7s + b: 4s-6s + + Currently we have the result described above, i.e. + a: 1s-3s; 3s-5s; 5s-7s + b: 2s-4s; 4s-6s + + --> + <rect y="100" width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="-50" to="50" id="a" + begin="5s; b.begin-1s" dur="2s"/> + <animate attributeName="fill" attributeType="CSS" id="b" + values="green; orange" + begin="a.begin-1s" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/cycle-invalid-4.svg b/layout/reftests/svg/smil/syncbase/cycle-invalid-4.svg new file mode 100644 index 0000000000..ddf489308d --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/cycle-invalid-4.svg @@ -0,0 +1,33 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(0); + document.getElementById('a').removeAttribute('dur'); + setTimeAndSnapshot(2, false)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + A cycle that is valid at first but then becomes invalid. + + So at first we have: + a: 0s-1.5s + new -> b: 1.5s-2.5s + new -> a: add 1.5s begin instance time + + Remove 'dur' attr: + a: 0s-unresolved + change -> b: unresolved... delete interval + delete -> a: already visited <break> + + a: 0s-unresolved + b: unresolved-unresolved + --> + <rect width="100" height="100" fill="green"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="b.begin; 0s" dur="1.5s"/> + <animate attributeName="fill" attributeType="CSS" id="b" + values="red; red" + begin="a.end" dur="1s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/cycle-ok-1.svg b/layout/reftests/svg/smil/syncbase/cycle-ok-1.svg new file mode 100644 index 0000000000..7040027044 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/cycle-ok-1.svg @@ -0,0 +1,16 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + A cycle that should be allowed. + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="b.begin; 1s" dur="4s"/> + <animate attributeName="fill" attributeType="CSS" id="b" + values="orange; green; purple" + begin="a.begin" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/cycle-ok-2.svg b/layout/reftests/svg/smil/syncbase/cycle-ok-2.svg new file mode 100644 index 0000000000..df53f6f80c --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/cycle-ok-2.svg @@ -0,0 +1,20 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + A ping-pong cycle that should be allowed. + Example 3 from SMIL3 section 5.4.5. + We have: + t=0s --> b: 0s-1s, a: 1s-2s + t=1s --> a: 1s-2s, b: 1.5s->2.5s + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="b.begin+1s" dur="1s"/> + <animate attributeName="fill" attributeType="CSS" id="b" + values="orange; green; purple" + begin="0s; a.begin+0.5s" dur="1s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/cycle-ok-3.svg b/layout/reftests/svg/smil/syncbase/cycle-ok-3.svg new file mode 100644 index 0000000000..7ef9b866c1 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/cycle-ok-3.svg @@ -0,0 +1,34 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(0); + document.getElementById('c').setAttribute('dur', '1s'); + setTimeAndSnapshot(2, false)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Based on Example 2 from SMIL3 section 5.4.5, an invalid cycle, + but made valid by a DOM call. + + At first we have: + a: unresolved-unresolved + b: unresolved-unresolved + c: 0s-unresolved + + Then we set dur on c=1s, giving us + a: 1s-1.5s + b: 1s-3s + c: 0s-1s + --> + <rect width="100" height="100" fill="blue"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="c.end" dur="0.5s"/> + <animate attributeName="fill" attributeType="CSS" id="b" + values="orange; green; purple" + begin="a.begin" dur="2s"/> + <animate attributeName="fill" attributeType="CSS" id="c" + values="red; red" + begin="0" end="b.end"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/cycle-ok-4.svg b/layout/reftests/svg/smil/syncbase/cycle-ok-4.svg new file mode 100644 index 0000000000..02bd95f928 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/cycle-ok-4.svg @@ -0,0 +1,20 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + A cycle that should be allowed. Here ends and begins coincide. + + So we have: + a: 0s-1.5s, 1.5s-3s, 3s-4.5s, ... + b: 1.5s-2.5s, 3s-4s, ... + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="b.begin; 0s" dur="1.5s"/> + <animate attributeName="fill" attributeType="CSS" id="b" + values="orange; green; purple" + begin="a.end" dur="1s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/cycle-ok-5.svg b/layout/reftests/svg/smil/syncbase/cycle-ok-5.svg new file mode 100644 index 0000000000..f6597a0cc3 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/cycle-ok-5.svg @@ -0,0 +1,23 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + From SVG 1.2 Tiny Test Suite, animate-elem-221-t.svg + + This test case is interesting because begin is not set on the first + animation. If we incorrectly detect this as a deleted begin time and thus + a deleted interval we get stuck in a loop marking the interval as deleted + and the new. + --> + <rect y="100" width="100" height="100" fill="red"> + <animate id="a1" attributeName="y" attributeType="XML" + from="-20" to="80" dur="10s" + end="a1.begin+6s" max="2.5s" /> + <animate attributeName="fill" attributeType="CSS" + values="orange; green; purple" keyTimes="0; 0.1; 1" dur="10s" + begin="1s" end="a1.end+6s" + max="7.5s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/cycle-recursion-1.svg b/layout/reftests/svg/smil/syncbase/cycle-recursion-1.svg new file mode 100644 index 0000000000..cb0411dc27 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/cycle-recursion-1.svg @@ -0,0 +1,42 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(0); + document.getElementById('c').removeAttribute('dur'); + setTimeAndSnapshot(2, false)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + At first we have: + c: 0s-1s + new -> a: 1s-1.5s + new -> b: 1s-2s + new -> c: 0s-1s [end: 2s] + + Then we remove dur on c giving us: + c: 0s-2s + change -> a: 2s-2.5s + change -> b: 2s-3s + change -> c: 0s-3s + change -> a: 3s-3.5s [Should break the cycle here] + change -> b: 3s-4s + change -> c: 0s-4s + etc. + + If we break on the second change notice we should arrive at: + a: 2s-2.5s + b: 2s-3s + c: 0s-3s + --> + <rect x="100" y="100" width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="c.end" dur="0.5s"/> + <animate attributeName="fill" attributeType="CSS" id="b" + values="green; blue" + begin="a.begin" dur="1s"/> + <animate attributeName="x" attributeType="XML" id="c" + from="0" to="100" fill="freeze" + begin="0" end="b.end" dur="1s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/cycle-recursion-2.svg b/layout/reftests/svg/smil/syncbase/cycle-recursion-2.svg new file mode 100644 index 0000000000..df859a5305 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/cycle-recursion-2.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + If we don't detect the cycle here, we'll keep doing reverse propagation for + a very long time. Probably long enough for something to go really wrong. + --> + <rect width="100" height="100" fill="green"> + <animate attributeName="y" attributeType="XML" from="100" to="100" id="a" + begin="20h; b.begin-1s" dur="4s"/> + <animate attributeName="fill" attributeType="CSS" id="b" + values="red; red" + begin="a.begin-1s" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/cycle-self-ref-1.svg b/layout/reftests/svg/smil/syncbase/cycle-self-ref-1.svg new file mode 100644 index 0000000000..2163529726 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/cycle-self-ref-1.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="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + A valid self-referential cycle. + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="fill" attributeType="CSS" id="a" + values="orange; green; purple" + begin="a.begin+1.5s; -0.5s" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/cycle-self-ref-2.svg b/layout/reftests/svg/smil/syncbase/cycle-self-ref-2.svg new file mode 100644 index 0000000000..b5fe6e1dd4 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/cycle-self-ref-2.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="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + A valid self-referential cycle. + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="fill" attributeType="CSS" id="a" + values="orange; green; purple" + begin="a.end; -1s" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/cycle-self-ref-3.svg b/layout/reftests/svg/smil/syncbase/cycle-self-ref-3.svg new file mode 100644 index 0000000000..50fdaf9739 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/cycle-self-ref-3.svg @@ -0,0 +1,19 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + A valid self-referential cycle. + + We have a 4s animation which should give us green after 1s of its active + duration. The active duration is constrained to 2s using a self-referential + end spec. Furthermore a self-referential begin spec causes the animation to + restart as soon as it begins. + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="fill" attributeType="CSS" id="a" + values="orange; green; blue; yellow; purple" + begin="a.end; -1s" end="a.begin+2s" dur="4s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/cycle-self-ref-4.svg b/layout/reftests/svg/smil/syncbase/cycle-self-ref-4.svg new file mode 100644 index 0000000000..c53b3c5fa7 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/cycle-self-ref-4.svg @@ -0,0 +1,32 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no" ?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="byeByeB()"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script type="text/javascript"> + function byeByeB() + { + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(0); + // Drop b + var b = document.getElementById('b'); + b.parentNode.removeChild(b); + b = null; + // Snapshot at time t=4s. This is because there are two possible error cases + // we want to detect: + // i) b disappears and we just keep the existing time for a.begin+1s of t=2s + // ii) b disappears and we update the time for a.begin+1s to t=3s + setTimeAndSnapshot(4, false); + } + </script> + <!-- We have an arrangement where a is dependent on b and itself. If b's + interval disappears while a is still in the waiting state then the begin + time "a.begin+1s" should disappear too since a never begun. --> + <rect width="100" height="100" fill="green"> + <set id="a" attributeName="fill" attributeType="CSS" to="red" + begin="b.begin; a.begin+1s"/> + <set id="b" attributeName="y" attributeType="XML" to="0" + begin="1s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/cycle-self-ref-5.svg b/layout/reftests/svg/smil/syncbase/cycle-self-ref-5.svg new file mode 100644 index 0000000000..e0e36e152a --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/cycle-self-ref-5.svg @@ -0,0 +1,56 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no" ?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="byeByeB()"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script type="text/javascript"> + function byeByeB() + { + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(2.5); + // Drop b + var b = document.getElementById('b'); + b.parentNode.removeChild(b); + b = null; + setTimeAndSnapshot(8, false); + } + </script> + <!-- Similar to cycle-self-ref-4.svg but with end times. + + We have an arrangement where a's end time is dependent on b and on + itself. + + Initially: + - a's end time will be resolved as "b.end", i.e. 3s. + - Accordingly, the instance time for "a.end+2s" will be 5s (3s+2s). + - i.e. a's list of end instance times will be: [3, 5, 9]. + + If b's interval disappears (because we delete b): + - The end time "b.end" will become unresolved. + - i.e. a's list of end instance times will be: [5, 9, unresolved]. + + However, when updating a's end time we should not use the "5s" instance + time since it is based on a's end time which is what we are updating. + + Expected behaviour: + - The instance time of "5s" will be skipped and the time of "9s" will be + used instead. + - At t=8s the animation will still be playing and the rectangle will be + green. + + Failure behaviour: + - The next end instance time in the list will be used, giving a an end + time of 5s. + - The time "a.end+2s" will then be accordingly updated to 7s since a's + end time is now 5s. (Any subsequent attempts to update the time will be + ignored according to SMIL's cycle detection rules.) + - At t=8s the animation will have stopped and the rectangle will be red. + --> + <rect width="100" height="100" fill="red"> + <set id="a" attributeName="fill" attributeType="CSS" to="green" + begin="2s" end="b.end; a.end+2s; 9s"/> + <set id="b" attributeName="y" attributeType="XML" to="0" + begin="1s" end="3s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/deleted-interval-simple-1.svg b/layout/reftests/svg/smil/syncbase/deleted-interval-simple-1.svg new file mode 100644 index 0000000000..cb516275a8 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/deleted-interval-simple-1.svg @@ -0,0 +1,22 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(0); + document.getElementById('a').setAttribute('end', '0s'); + setTimeAndSnapshot(2, false)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + A simple case of a deleting interval. + The timebase interval is made invalid by script and hence a delete + notification should be propagated to the dependent interval. + --> + <rect width="100" height="100" fill="green"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="1s" dur="10s"/> + <animate attributeName="fill" attributeType="CSS" id="b" + values="red; red" + begin="a.begin" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/deleted-interval-simple-2.svg b/layout/reftests/svg/smil/syncbase/deleted-interval-simple-2.svg new file mode 100644 index 0000000000..6e4df7dbce --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/deleted-interval-simple-2.svg @@ -0,0 +1,26 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(0.75); + document.getElementById('a').setAttribute('restart', 'never'); + setTimeAndSnapshot(2, false)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Originally we have an interval from -1.5s to 0.5s. We'll ignore 'a's begin + time of t=0s because we are restart="whenNotActive". + At time t=0.1s, 'a' will create a new interval from 1.0 to 1.1s and we'll + add the new instance time of 1.0s. + However, at t=0.75s the restart mode of 'a' is changed to restart="never" + therefore the second interval is deleted and the change should be propagated + to us. + --> + <rect width="100" height="100" fill="green"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="0s; 1s" dur="0.1s"/> + <animate attributeName="fill" attributeType="CSS" + values="red; red" + begin="-1.5s; a.begin" dur="2s" restart="whenNotActive"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/deleted-interval-simple-3.svg b/layout/reftests/svg/smil/syncbase/deleted-interval-simple-3.svg new file mode 100644 index 0000000000..7f290b8a0c --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/deleted-interval-simple-3.svg @@ -0,0 +1,21 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(0.25); + document.getElementById('a').setAttribute('restart', 'never'); + setTimeAndSnapshot(2, false)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + As with deleted-interval-simple-2.svg but this time we should get the + deleted interval notice while in the active state. + --> + <rect width="100" height="100" fill="green"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="0s; 1s" dur="0.1s"/> + <animate attributeName="fill" attributeType="CSS" + values="red; red" + begin="-1.5s; a.begin" dur="2s" restart="whenNotActive"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/deleted-interval-simple-4.svg b/layout/reftests/svg/smil/syncbase/deleted-interval-simple-4.svg new file mode 100644 index 0000000000..e7d1a8e599 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/deleted-interval-simple-4.svg @@ -0,0 +1,26 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(0); + document.getElementById('a').beginElementAt(0.5); + setTimeAndSnapshot(2, false)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Originally the third animation's interval is from 1s->3s, but then by + script we add another begin time to 'a' at 0.5, and since 'a' can't + restart, this is the only begin time it will ever generate. Therefore, all + the ends for animation 'b' are before the begin, and there's no valid + interval. + --> + <rect width="100" height="100" fill="green"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="3s" dur="10s" restart="never"/> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="b" + begin="1s" end="a.begin" dur="3s"/> + <animate attributeName="fill" attributeType="CSS" + values="red; red" + begin="b.begin" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/deleted-interval-simple-5.svg b/layout/reftests/svg/smil/syncbase/deleted-interval-simple-5.svg new file mode 100644 index 0000000000..677c960330 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/deleted-interval-simple-5.svg @@ -0,0 +1,21 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(0); + document.getElementById('a').removeAttribute('dur'); + setTimeAndSnapshot(2, false)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + A case of a changing interval that causes another interval to have an + unresolved begin time and hence be deleted. + --> + <rect width="100" height="100" fill="green"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="0s" dur="1s"/> + <animate attributeName="fill" attributeType="CSS" id="b" + values="red; red" + begin="a.end" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/filtered-interval-1.svg b/layout/reftests/svg/smil/syncbase/filtered-interval-1.svg new file mode 100644 index 0000000000..2ed6d549be --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/filtered-interval-1.svg @@ -0,0 +1,24 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + This test ensures that even if we have an old interval, if it is part of an + active dependency chain it should not be filtered. + --> + <rect width="100" height="100" fill="orange"> + <!-- This animation is indirectly dependent on anim 'b' and hence, even + though it appears earlier in the document it should be given + priority. --> + <set attributeName="fill" to="green" begin="a.begin"/> + + <!-- This will generate a series of short intervals such that by t=2s the + interval via which the first animation depends on b might be considered + as a candidate for filtering. --> + <set attributeName="width" to="100" begin="b.begin-2s; a.begin+0.2s" + dur="0.1s" id="a"/> + + <set attributeName="fill" to="red" begin="2s" id="b"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/green-box-ref.svg b/layout/reftests/svg/smil/syncbase/green-box-ref.svg new file mode 100644 index 0000000000..120941444a --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/green-box-ref.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <rect width="100" height="100" fill="green"/> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/green-box-ref.xhtml b/layout/reftests/svg/smil/syncbase/green-box-ref.xhtml new file mode 100644 index 0000000000..ce0bc78f12 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/green-box-ref.xhtml @@ -0,0 +1,8 @@ +<?xml version="1.0" encoding="UTF-8" ?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<body> +<svg xmlns="http://www.w3.org/2000/svg" width="120px" height="120px"> + <rect width="100" height="100" fill="green"/> +</svg> +</body> +</html> diff --git a/layout/reftests/svg/smil/syncbase/new-interval-chain-1.svg b/layout/reftests/svg/smil/syncbase/new-interval-chain-1.svg new file mode 100644 index 0000000000..ec71c47eee --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/new-interval-chain-1.svg @@ -0,0 +1,22 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Test some chained interval creation. + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="0s; 1s" dur="4s"/> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="b" + begin="a.begin" dur="4s"/> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="c" + begin="b.begin-1s" dur="4s"/> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="d" + begin="c.begin+0.5s" dur="4s"/> + <animate attributeName="fill" attributeType="CSS" + values="orange; green; purple" + begin="d.begin; a.begin" dur="5s" restart="whenNotActive"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/new-interval-chain-2.svg b/layout/reftests/svg/smil/syncbase/new-interval-chain-2.svg new file mode 100644 index 0000000000..831f12e262 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/new-interval-chain-2.svg @@ -0,0 +1,22 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Test some chained interval creation. + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="0s; 1s" dur="4s"/> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="b" + begin="a.begin" dur="4s"/> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="c" + begin="b.begin-1s" dur="4s"/> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="d" + begin="c.begin+0.5s" dur="4s"/> + <animate attributeName="fill" attributeType="CSS" + values="orange; green; purple" + begin="d.begin; a.begin" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/new-interval-doubly-dependent-1.svg b/layout/reftests/svg/smil/syncbase/new-interval-doubly-dependent-1.svg new file mode 100644 index 0000000000..17f5daf97e --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/new-interval-doubly-dependent-1.svg @@ -0,0 +1,16 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Test a relationship where one element depends on another twice. + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="1s" dur="4s"/> + <animate attributeName="fill" attributeType="CSS" + values="orange; green; purple" + begin="a.begin+0.5s; a.begin" dur="1s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/new-interval-doubly-dependent-2.svg b/layout/reftests/svg/smil/syncbase/new-interval-doubly-dependent-2.svg new file mode 100644 index 0000000000..1f669b0898 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/new-interval-doubly-dependent-2.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Test a relationship where one element depends on another twice. + (As with previous test but reversing the order of the specifications.) + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="1s" dur="4s"/> + <animate attributeName="fill" attributeType="CSS" + values="orange; green; purple" + begin="a.begin; a.begin+0.5s" dur="1s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/new-interval-doubly-dependent-3.svg b/layout/reftests/svg/smil/syncbase/new-interval-doubly-dependent-3.svg new file mode 100644 index 0000000000..d3d2908ebd --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/new-interval-doubly-dependent-3.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Test a relationship where one element depends on another twice and where the + restart mode should cause one instance time to be ignored. + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="1s" dur="4s"/> + <animate attributeName="fill" attributeType="CSS" + values="orange; green; purple" + begin="a.begin+0.5s; a.begin" dur="2s" restart="whenNotActive"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/new-interval-early-end-1.svg b/layout/reftests/svg/smil/syncbase/new-interval-early-end-1.svg new file mode 100644 index 0000000000..3fd87aff8f --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/new-interval-early-end-1.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Test an early end with a negative offset. + (An early end is when a new interval restarts the current animation + mid-way.) + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="0s; 2s" dur="4s"/> + <animate attributeName="fill" attributeType="CSS" + values="orange; green; purple" + begin="a.begin-0.5s" dur="1s" restart="whenNotActive"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/new-interval-early-end-2.svg b/layout/reftests/svg/smil/syncbase/new-interval-early-end-2.svg new file mode 100644 index 0000000000..9dc79c318d --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/new-interval-early-end-2.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Test an early end where two times could be chosen for the following + interval. + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="0s; 1.5s" dur="1s"/> + <animate attributeName="fill" attributeType="CSS" + values="orange; green; purple" + begin="a.begin+0.25s; a.begin" dur="1s" restart="whenNotActive"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/new-interval-early-end-3.svg b/layout/reftests/svg/smil/syncbase/new-interval-early-end-3.svg new file mode 100644 index 0000000000..de8920f48f --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/new-interval-early-end-3.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Test an early end where two times could be chosen for the following + interval. + (As before but with a negative offset.) + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="0s; 1.75s" dur="4s"/> + <animate attributeName="fill" attributeType="CSS" + values="orange; green; purple" + begin="a.begin-0.25s; a.begin" dur="1s" restart="whenNotActive"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/new-interval-early-end-4.svg b/layout/reftests/svg/smil/syncbase/new-interval-early-end-4.svg new file mode 100644 index 0000000000..e46c2d62da --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/new-interval-early-end-4.svg @@ -0,0 +1,26 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Test an early end where two times could be chosen for the following + interval. + (As before but with a negative offset and with the second animation getting + overlapping intervals from a's begin times, with one such interval being + rejected since it overlaps an already-completed interval when it's + created.) + + Details: At time t=1.75, we generate an interval starting at 1.35 for the + second animation. However, this overlaps that animation's already-complete + previous interval from 0.4s to 1.4s (which is "already complete" because + we're at t=1.75, past its end at 1.4s). So, the new interval is rejected. + --> + <rect width="100" height="100" fill="green"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="0s; 1.75s" dur="4s"/> + <animate attributeName="fill" attributeType="CSS" + values="red" + begin="a.begin-0.4s; a.begin+0.4s" dur="1s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/new-interval-early-end-5.svg b/layout/reftests/svg/smil/syncbase/new-interval-early-end-5.svg new file mode 100644 index 0000000000..545e640a22 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/new-interval-early-end-5.svg @@ -0,0 +1,19 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Test two early ends where one generates an earlier time for the other. + + So both restart at 1.5s, and both old intervals should be ended off. Hence + the syncbase time should be ignored. + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="0.5s; 1.5s" dur="4s"/> + <animate attributeName="fill" attributeType="CSS" + values="orange; green; purple" + begin="0.75s; 1.5s; a.begin-0.5s" dur="1s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/new-interval-early-end-6.svg b/layout/reftests/svg/smil/syncbase/new-interval-early-end-6.svg new file mode 100644 index 0000000000..f4ea84c903 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/new-interval-early-end-6.svg @@ -0,0 +1,16 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Test two early ends where one generates a later time for the other. + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="0.5s; 1s" dur="4s"/> + <animate attributeName="fill" attributeType="CSS" + values="orange; green; purple" + begin="0.5s; 1s; a.begin+0.5s" dur="1s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/new-interval-early-end-7.svg b/layout/reftests/svg/smil/syncbase/new-interval-early-end-7.svg new file mode 100644 index 0000000000..79f99594a5 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/new-interval-early-end-7.svg @@ -0,0 +1,22 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Test that we don't apply an early end too soon. + + Although the second animation will have an interval from 2s-6s, it shouldn't + be informed about this until the early end happens, at t=3s. Until that time + it should be expecting to start at t=4s. + + If the second animation is started at t=2s it means the early end has been + applied too soon. + --> + <rect width="100" height="100" fill="green"> + <set attributeName="y" attributeType="XML" to="0" id="a" + begin="0s; 3s" dur="5s"/> + <set attributeName="fill" attributeType="CSS" + to="red" begin="a.end-1s" dur="4s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/new-interval-end-dep-1.svg b/layout/reftests/svg/smil/syncbase/new-interval-end-dep-1.svg new file mode 100644 index 0000000000..4140569239 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/new-interval-end-dep-1.svg @@ -0,0 +1,16 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + The simplest possible end dependency. + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="0s" dur="1s"/> + <animate attributeName="fill" attributeType="CSS" + values="orange; green; purple" + begin="a.end" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/new-interval-end-negative-1.svg b/layout/reftests/svg/smil/syncbase/new-interval-end-negative-1.svg new file mode 100644 index 0000000000..0ba96dbeb4 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/new-interval-end-negative-1.svg @@ -0,0 +1,39 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Test a dependency with a negative offset that occurs at the end of another + interval. + + This is one of the most important tests in the suite. + + REALLY IMPORTANT: Suppose we generate a new instance time, placed at a + particular instant during the previous interval. In fact, correct behavior + depends on *when* we generate this instance time. If we generate it AFTER + the previous interval has ended, then the new instance time will be + IGNORED. However, if we generate it BEFORE the previous interval has ended + (and if restart="always"), then a new interval will be generated, and the + animation will restart. + (To be absolutely clear: above, the words "AFTER" and "BEFORE" describe + *when the instance time is generated*, as opposed to *where on the timeline + the instance time is placed*). + + So, if a new instance time is generated at the same time as an interval is + due to end what should happen? SMIL's endpoint-exclusive timing seems to + imply that interval ends should be processed first and hence the new + instance time should be ignored. Opera, WebKit and Batik seem to agree on + this. + + Hence why this test is so important. It tests that we are actually + processing ends first. + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="0s; 1.5s" dur="1.5s"/> + <animate attributeName="fill" attributeType="CSS" + values="orange; green" fill="freeze" + begin="a.begin-0.5s" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/new-interval-end-negative-2.svg b/layout/reftests/svg/smil/syncbase/new-interval-end-negative-2.svg new file mode 100644 index 0000000000..e9c1f2f448 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/new-interval-end-negative-2.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Test a dependency with a negative offset that occurs at the end of another + interval. + (As with the previous test but with an early end.) + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="0s; 1.5s" dur="4s"/> + <animate attributeName="fill" attributeType="CSS" + values="orange; green" fill="freeze" + begin="a.begin-0.5s" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/new-interval-freeze-begin-1.svg b/layout/reftests/svg/smil/syncbase/new-interval-freeze-begin-1.svg new file mode 100644 index 0000000000..07df8fc111 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/new-interval-freeze-begin-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" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(1.5); + document.getElementById('a').setAttribute('begin', '3s'); + setTimeAndSnapshot(2, false)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Tests that when we create an interval we freeze the begin time once it has + started. + + So we have: + + a: begin: 2s + b: begin: a.begin-1s + + at t=1s, b begins + at t=1.5s, a's begin time is updated to 3s which will create a change notice + + However, b should not then restart at t=2s regardless of the restart mode + because once the interval has started the begin time is fixed. + --> + <rect width="100" height="100" fill="red"> + <set attributeName="y" attributeType="XML" to="0" id="a" begin="2s"/> + <animate attributeName="fill" attributeType="CSS" + values="orange; green; purple" + begin="a.begin-1s" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/new-interval-negative-offset-1.svg b/layout/reftests/svg/smil/syncbase/new-interval-negative-offset-1.svg new file mode 100644 index 0000000000..8116606d74 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/new-interval-negative-offset-1.svg @@ -0,0 +1,16 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Simple case of a negative offset. + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="1s" dur="4s"/> + <animate attributeName="fill" attributeType="CSS" + values="orange; green; purple" + begin="a.begin-0.5s" dur="3s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/new-interval-negative-offset-2.svg b/layout/reftests/svg/smil/syncbase/new-interval-negative-offset-2.svg new file mode 100644 index 0000000000..e06b9607d8 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/new-interval-negative-offset-2.svg @@ -0,0 +1,30 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Simple case of a negative offset before the syncbase has begun. + + SMILANIM 3.3.6 Propagating changes to times has: + + When an element begins or ends, the time dependents of the element are + effectively notified of the action, and the schedule for the time + dependents may be affected. Note than an element must actually begin + before any of the time dependents (dependent on the begin) are affected, + and that an element must actually end before any of the time dependents + (dependent on the end) are affected. + + This would suggest that a time dependent that is defined to start BEFORE its + syncbase does not actually start until the syncbase starts. However Opera, + WebKit, and Batik all agree that when we know when the syncbase will start, + we resolve the negative offset in advance. + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="3s" dur="4s"/> + <animate attributeName="fill" attributeType="CSS" + values="green; orange" + begin="a.begin-1s" dur="3s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/new-interval-negative-offset-3.svg b/layout/reftests/svg/smil/syncbase/new-interval-negative-offset-3.svg new file mode 100644 index 0000000000..fc8f5c0324 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/new-interval-negative-offset-3.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + A simple syncbase relationship using a negative offset that creates a begin + time before the document begin. We're really just testing for unwanted + clamping here. + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="1s" dur="4s"/> + <animate attributeName="fill" attributeType="CSS" + values="orange; green; purple" + begin="a.begin-3s" dur="8s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/new-interval-negative-offset-4.svg b/layout/reftests/svg/smil/syncbase/new-interval-negative-offset-4.svg new file mode 100644 index 0000000000..663e3c562a --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/new-interval-negative-offset-4.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + A simple syncbase relationship using a negative offset that creates a begin + time of 0. Just checking that 0 is not treated as a special value. + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="2s" dur="4s"/> + <animate attributeName="fill" attributeType="CSS" + values="orange; green; purple" + begin="a.begin-2s" dur="4s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/new-interval-negative-syncbase-1.svg b/layout/reftests/svg/smil/syncbase/new-interval-negative-syncbase-1.svg new file mode 100644 index 0000000000..428becb376 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/new-interval-negative-syncbase-1.svg @@ -0,0 +1,16 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + A simple syncbase relationship using negative times. + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="-1s" dur="4s"/> + <animate attributeName="fill" attributeType="CSS" + values="orange; green; purple" + begin="a.begin-1s" dur="8s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/new-interval-restart-1.svg b/layout/reftests/svg/smil/syncbase/new-interval-restart-1.svg new file mode 100644 index 0000000000..ce7f6480d1 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/new-interval-restart-1.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + A simple test that a syncbase that fires twice will also cause its dependent + to run twice (assuming restart="always" which is the default). + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="0.5s; 1s" dur="4s"/> + <animate attributeName="fill" attributeType="CSS" + values="orange; green; purple" + begin="a.begin" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/new-interval-restart-2.svg b/layout/reftests/svg/smil/syncbase/new-interval-restart-2.svg new file mode 100644 index 0000000000..dc03b9bcac --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/new-interval-restart-2.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Test that restart="whenNotActive" on the syncbase prevents a new instance + time from being propagated to the time dependent. + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="1s; 1.5s" dur="4s" restart="whenNotActive"/> + <animate attributeName="fill" attributeType="CSS" + values="orange; green; purple" + begin="a.begin" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/new-interval-restart-3.svg b/layout/reftests/svg/smil/syncbase/new-interval-restart-3.svg new file mode 100644 index 0000000000..78e79d8c83 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/new-interval-restart-3.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Test that restart="whenNotActive" on the time dependent causes new instance + times from the syncbase to be ignored. + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="1s; 1.5s" dur="4s"/> + <animate attributeName="fill" attributeType="CSS" + values="orange; green; purple" + begin="a.begin" dur="2s" restart="whenNotActive"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/new-interval-sample-order-1.svg b/layout/reftests/svg/smil/syncbase/new-interval-sample-order-1.svg new file mode 100644 index 0000000000..3f7b668b02 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/new-interval-sample-order-1.svg @@ -0,0 +1,29 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Test that ends are sampled first. + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="-3s; 1.5s" dur="20s"/> + <animate attributeName="fill" attributeType="CSS" + values="orange; green; purple" + begin="a.begin-0.5s; 1.5s" dur="2s" restart="whenNotActive"/> + <!-- + So initially we have: + a: -3->17s + (b): -3.5->-1.5s (instance times: -3.5s, 1.5s) + + At t=1.5s we get an early end on 'a', giving us: + a: 1.5->21.5s + (b): 1.0->3.0s (instance times: 1.0s, 1.5s) + + If, at t=1.5s, we sample the second animation first, we'll start an + interval from 1.5s instead of 1.0s. So this is a test that ends are + actually sampled first. + --> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/new-interval-simple-1.svg b/layout/reftests/svg/smil/syncbase/new-interval-simple-1.svg new file mode 100644 index 0000000000..ed0ea22d62 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/new-interval-simple-1.svg @@ -0,0 +1,16 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + The simplest possible syncbase test. + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="1s" dur="4s"/> + <animate attributeName="fill" attributeType="CSS" + values="orange; green; purple" + begin="a.begin" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/new-interval-simple-2.svg b/layout/reftests/svg/smil/syncbase/new-interval-simple-2.svg new file mode 100644 index 0000000000..25d627805b --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/new-interval-simple-2.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + A simple syncbase relationship where the syncbase appears after the + time dependent in the document. + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="fill" attributeType="CSS" + values="orange; green; purple" + begin="a.begin" dur="2s"/> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="1s" dur="4s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/new-interval-triply-dependent-1.svg b/layout/reftests/svg/smil/syncbase/new-interval-triply-dependent-1.svg new file mode 100644 index 0000000000..c3b7cc3ead --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/new-interval-triply-dependent-1.svg @@ -0,0 +1,16 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Test a relationship where one element depends on another thrice. + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="1s" dur="4s"/> + <animate attributeName="fill" attributeType="CSS" + values="orange; green; purple" + begin="a.begin; a.begin; a.begin" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/new-interval-triply-dependent-2.svg b/layout/reftests/svg/smil/syncbase/new-interval-triply-dependent-2.svg new file mode 100644 index 0000000000..b1ade9c624 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/new-interval-triply-dependent-2.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Test a relationship where one element depends on another thrice. + (As before but with different offsets.) + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="1s" dur="4s"/> + <animate attributeName="fill" attributeType="CSS" + values="orange; green; purple" + begin="a.begin-0.5s; a.begin+0.5s; a.begin" dur="1s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/reftest.list b/layout/reftests/svg/smil/syncbase/reftest.list new file mode 100644 index 0000000000..52728b2a53 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/reftest.list @@ -0,0 +1,99 @@ +# Tests related to SVG Animation (using SMIL) that use syncbase timing. + +# New intervals +== new-interval-simple-1.svg green-box-ref.svg +== new-interval-simple-2.svg green-box-ref.svg +== new-interval-negative-offset-1.svg green-box-ref.svg +== new-interval-negative-offset-2.svg green-box-ref.svg +== new-interval-negative-offset-3.svg green-box-ref.svg +== new-interval-negative-offset-4.svg green-box-ref.svg +== new-interval-negative-syncbase-1.svg green-box-ref.svg +== new-interval-restart-1.svg green-box-ref.svg +== new-interval-restart-2.svg green-box-ref.svg +== new-interval-restart-3.svg green-box-ref.svg +== new-interval-early-end-1.svg green-box-ref.svg +== new-interval-early-end-2.svg green-box-ref.svg +== new-interval-early-end-3.svg green-box-ref.svg +== new-interval-early-end-4.svg green-box-ref.svg +== new-interval-early-end-5.svg green-box-ref.svg +== new-interval-early-end-6.svg green-box-ref.svg +== new-interval-early-end-7.svg green-box-ref.svg +== new-interval-doubly-dependent-1.svg green-box-ref.svg +== new-interval-doubly-dependent-2.svg green-box-ref.svg +== new-interval-doubly-dependent-3.svg green-box-ref.svg +== new-interval-triply-dependent-1.svg green-box-ref.svg +== new-interval-triply-dependent-2.svg green-box-ref.svg +== new-interval-end-negative-1.svg green-box-ref.svg +== new-interval-end-negative-2.svg green-box-ref.svg +== new-interval-end-dep-1.svg green-box-ref.svg +== new-interval-chain-1.svg green-box-ref.svg +== new-interval-chain-2.svg green-box-ref.svg +== new-interval-sample-order-1.svg green-box-ref.svg +== new-interval-freeze-begin-1.svg green-box-ref.svg + +# Changing intervals +== changed-interval-simple-1.svg green-box-ref.svg +== changed-interval-simple-2.svg green-box-ref.svg +== changed-interval-simple-3.svg green-box-ref.svg +== changed-interval-simple-4.svg green-box-ref.svg +== changed-interval-simple-5.svg green-box-ref.svg +== changed-interval-resolved-1.svg green-box-ref.svg +== changed-interval-resolved-2.svg green-box-ref.svg +== changed-interval-sort-1.svg green-box-ref.svg +== changed-interval-change-spec-1.svg green-box-ref.svg +== changed-interval-change-spec-2.svg green-box-ref.svg +== changed-interval-change-spec-3.svg green-box-ref.svg +== changed-interval-change-spec-4.svg green-box-ref.svg + +# Deleted intervals +== deleted-interval-simple-1.svg green-box-ref.svg +== deleted-interval-simple-2.svg green-box-ref.svg +== deleted-interval-simple-3.svg green-box-ref.svg +== deleted-interval-simple-4.svg green-box-ref.svg +== deleted-interval-simple-5.svg green-box-ref.svg + +# Trimmed intervals +== trimmed-interval-1.svg green-box-ref.svg + +# Cyclic dependencies +== cycle-ok-1.svg green-box-ref.svg +== cycle-ok-2.svg green-box-ref.svg +== cycle-ok-3.svg green-box-ref.svg +== cycle-ok-4.svg green-box-ref.svg +== cycle-ok-5.svg green-box-ref.svg +== cycle-self-ref-1.svg green-box-ref.svg +== cycle-self-ref-2.svg green-box-ref.svg +== cycle-self-ref-3.svg green-box-ref.svg +== cycle-self-ref-4.svg green-box-ref.svg +== cycle-self-ref-5.svg green-box-ref.svg +== cycle-invalid-1.svg green-box-ref.svg +== cycle-invalid-2.svg green-box-ref.svg +== cycle-invalid-3.svg green-box-ref.svg +== cycle-invalid-4.svg green-box-ref.svg +== cycle-change-1.svg green-box-ref.svg +== cycle-change-2.svg green-box-ref.svg +== cycle-delete-1.svg green-box-ref.svg +== cycle-recursion-1.svg green-box-ref.svg +== cycle-recursion-2.svg green-box-ref.svg + +# Animation sandwich priority +== sandwich-priority-1.svg green-box-ref.svg +== sandwich-priority-2.svg green-box-ref.svg +== sandwich-priority-3.svg green-box-ref.svg +== sandwich-priority-4.svg green-box-ref.svg +== sandwich-priority-5.svg green-box-ref.svg +== sandwich-priority-6.svg green-box-ref.svg +== sandwich-priority-7.svg green-box-ref.svg +== sandwich-priority-8.svg green-box-ref.svg +== sandwich-priority-9.svg green-box-ref.svg +== sandwich-priority-10.svg green-box-ref.svg +== sandwich-priority-11.svg green-box-ref.svg +== sandwich-priority-12.svg green-box-ref.svg + +# Cross-time container dependencies +== cross-container-1.xhtml green-box-ref.xhtml +== cross-container-2.xhtml green-box-ref.xhtml +== cross-container-3.xhtml green-box-ref.xhtml + +# Filtering +== filtered-interval-1.svg green-box-ref.svg diff --git a/layout/reftests/svg/smil/syncbase/sandwich-priority-1.svg b/layout/reftests/svg/smil/syncbase/sandwich-priority-1.svg new file mode 100644 index 0000000000..9d99fa0829 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/sandwich-priority-1.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Test of animation sandwich priority based on syncbase dependencies. + + Normally, the second element would win because it appears later in the + document, but since the first element is dependent on the second, it should + apply on top of the second. + --> + <rect width="100" height="100" fill="orange"> + <set attributeName="fill" to="green" begin="a.begin"/> + <set attributeName="fill" to="red" begin="0s" id="a"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/sandwich-priority-10.svg b/layout/reftests/svg/smil/syncbase/sandwich-priority-10.svg new file mode 100644 index 0000000000..0732c695f5 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/sandwich-priority-10.svg @@ -0,0 +1,26 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(0); + document.getElementById('b').setAttribute('end', 'a.begin'); + setTimeAndSnapshot(2, false)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Test of animation sandwich priority based on syncbase dependencies. + + Tests a change to an interval end that leaves the time the same but changes + the dependency chain. + + At first c is dependent on b only. + Then via script we make b dependent on a's begin time so that c's begin time + is indirectly dependent on a's begin time and so should have a higher + priority. + --> + <rect width="100" height="100" fill="orange"> + <set attributeName="fill" to="green" begin="b.end" id="c"/> + <set attributeName="fill" to="orange" begin="0s" end="1s" id="b"/> + <set attributeName="fill" to="red" begin="1s" id="a"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/sandwich-priority-11.svg b/layout/reftests/svg/smil/syncbase/sandwich-priority-11.svg new file mode 100644 index 0000000000..05407bd6c9 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/sandwich-priority-11.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Test of animation sandwich priority based on syncbase dependencies. + + Test in the waiting state, with frozen animation effects from an + earlier interval. + --> + <rect width="100" height="100" fill="orange"> + <set attributeName="fill" to="green" begin="a.begin" dur="1s" + fill="freeze"/> + <set attributeName="fill" to="red" begin="0s; 3s" dur="1s" id="a" + fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/sandwich-priority-12.svg b/layout/reftests/svg/smil/syncbase/sandwich-priority-12.svg new file mode 100644 index 0000000000..8164e56fa8 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/sandwich-priority-12.svg @@ -0,0 +1,24 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(0); + document.getElementById('a').beginElementAt(1); + setTimeAndSnapshot(2, false)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Test of animation sandwich priority based on syncbase dependencies. + + This case includes a complex cycle that should nevertheless produce + consistent results. + + If this fails, it will fail intermittently. The test is not so much + concerned with which colour should win (there are other tests for that) but + simply with determinancy. + --> + <rect width="100" height="100" fill="orange"> + <set attributeName="fill" id="a" to="green" begin="b.begin; 3s"/> + <set attributeName="fill" id="b" to="red" begin="a.begin"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/sandwich-priority-2.svg b/layout/reftests/svg/smil/syncbase/sandwich-priority-2.svg new file mode 100644 index 0000000000..3d6d458f50 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/sandwich-priority-2.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Test of animation sandwich priority based on syncbase dependencies. + + A longer chain. + --> + <rect width="100" height="100" fill="orange"> + <set attributeName="fill" to="blue" begin="a.begin-0.5s" id="b"/> + <set attributeName="fill" to="green" begin="d.begin"/> + <set attributeName="fill" to="black" begin="c.begin-0.5s" id="d"/> + <set attributeName="x" to="0" begin="b.begin+1s" id="c"/> + <set attributeName="fill" to="red" begin="1s" id="a"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/sandwich-priority-3.svg b/layout/reftests/svg/smil/syncbase/sandwich-priority-3.svg new file mode 100644 index 0000000000..f8ba708d75 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/sandwich-priority-3.svg @@ -0,0 +1,20 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Test of animation sandwich priority based on syncbase dependencies. + + This chain goes through end and begin specs but SMIL seems to imply that + it's only when one element's begin time is dependent on another's begin time + that it affects the chaining because it should act as if the time base begun + before the the dependent. So in this case 'c' is (indirectly) dependent on + 'a's end time and so shouldn't be given the higher priority. + --> + <rect width="100" height="100" fill="orange"> + <set attributeName="fill" to="red" begin="b.begin-1s" id="c"/> + <set attributeName="x" to="0" begin="a.end-1s" id="b"/> + <set attributeName="fill" to="green" begin="1s" dur="2s" id="a"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/sandwich-priority-4.svg b/layout/reftests/svg/smil/syncbase/sandwich-priority-4.svg new file mode 100644 index 0000000000..7ce158672a --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/sandwich-priority-4.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="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Test of animation sandwich priority based on syncbase dependencies. + + This case includes a cycle. + --> + <rect width="100" height="100" fill="orange"> + <set attributeName="fill" id="b" to="green" begin="a.begin"/> + <set attributeName="fill" id="a" to="red" begin="0s; b.begin"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/sandwich-priority-5.svg b/layout/reftests/svg/smil/syncbase/sandwich-priority-5.svg new file mode 100644 index 0000000000..05d82ffdf1 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/sandwich-priority-5.svg @@ -0,0 +1,20 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Test of animation sandwich priority based on syncbase dependencies. + + This case includes many cycles. + + c is dependent on a. + b is dependent on c. + So b is the most dependent and should be on top. + --> + <rect width="100" height="100" fill="purple"> + <set attributeName="fill" id="c" to="orange" begin="a.begin; b.begin"/> + <set attributeName="fill" id="b" to="green" begin="c.begin; b.begin"/> + <set attributeName="fill" id="a" to="red" begin="1s; b.begin; c.begin"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/sandwich-priority-6.svg b/layout/reftests/svg/smil/syncbase/sandwich-priority-6.svg new file mode 100644 index 0000000000..a27b81dfab --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/sandwich-priority-6.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Test of animation sandwich priority based on syncbase dependencies. + + Test in the postactive state. + --> + <rect width="100" height="100" fill="orange"> + <set attributeName="fill" to="green" begin="a.begin" + dur="1s" fill="freeze"/> + <set attributeName="fill" to="red" begin="0s" id="a" + dur="1s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/sandwich-priority-7.svg b/layout/reftests/svg/smil/syncbase/sandwich-priority-7.svg new file mode 100644 index 0000000000..db72072a75 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/sandwich-priority-7.svg @@ -0,0 +1,27 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Test of animation sandwich priority based on syncbase dependencies. + + Test for true dependency checking. + + We construct a tree as follows: + + b-c + a< + d + + If we're doing naive dependency checking that only considers the depth of + a dependency in the tree we'll end up saying that 'c' is dependent on 'd' + but it's not. + --> + <rect width="100" height="100" fill="orange"> + <set attributeName="fill" to="yellow" begin="1s" dur="2s" id="a"/> + <set attributeName="fill" to="purple" begin="a.begin" dur="2s" id="b"/> + <set attributeName="fill" to="red" begin="b.begin" dur="2s" id="c"/> + <set attributeName="fill" to="green" begin="a.begin" dur="2s" id="d"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/sandwich-priority-8.svg b/layout/reftests/svg/smil/syncbase/sandwich-priority-8.svg new file mode 100644 index 0000000000..7d31b87bff --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/sandwich-priority-8.svg @@ -0,0 +1,25 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(0); + document.getElementById('b').setAttribute('begin', 'a.begin'); + setTimeAndSnapshot(2, false)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Test of animation sandwich priority based on syncbase dependencies. + + Test that we don't filter out a change to the timing model that does not + affect the start time of an interval but which DOES affect the dependency + chain. + + Given the arrangement below, 'a' will have higher priority, as it is later + in the document. However, via script, we make 'b' dependent on 'a' giving + it a higher priority whilst preserving the interval times. + --> + <rect width="100" height="100" fill="orange"> + <set attributeName="fill" to="green" begin="1s" id="b"/> + <set attributeName="fill" to="red" begin="1s" id="a"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/sandwich-priority-9.svg b/layout/reftests/svg/smil/syncbase/sandwich-priority-9.svg new file mode 100644 index 0000000000..d8ec1709cd --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/sandwich-priority-9.svg @@ -0,0 +1,21 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(0); + document.getElementById('b').setAttribute('begin', 'a.begin'); + setTimeAndSnapshot(2, false)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Test of animation sandwich priority based on syncbase dependencies. + + As with test 8 but here we check that such changes are propagated to + dependent elements. + --> + <rect width="100" height="100" fill="orange"> + <set attributeName="fill" to="yellow" begin="1s" id="b"/> + <set attributeName="fill" to="green" begin="b.begin" id="c"/> + <set attributeName="fill" to="red" begin="1s" id="a"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/trimmed-interval-1.svg b/layout/reftests/svg/smil/syncbase/trimmed-interval-1.svg new file mode 100644 index 0000000000..c22af2e315 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/trimmed-interval-1.svg @@ -0,0 +1,22 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(1); + document.getElementById('a').setAttribute('end', '0s'); + setTimeAndSnapshot(2, false)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + The timebase interval is updated such that it would be deleted but because + it is active, it is trimmed instead. Test that the dependent interval is + notified accordingly. + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="0.5s" dur="10s"/> + <animate attributeName="fill" attributeType="CSS" + values="purple; green; orange" keyTimes="0; 0.75; 1" + begin="a.end" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/timed/appendChild-1a-ref.svg b/layout/reftests/svg/smil/timed/appendChild-1a-ref.svg new file mode 100644 index 0000000000..65d4170afa --- /dev/null +++ b/layout/reftests/svg/smil/timed/appendChild-1a-ref.svg @@ -0,0 +1,8 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" +> + <rect id="rect1" y="40" width="10" height="10" fill="blue"> + </rect> + <rect id="rect2" y="80" width="10" height="10" fill="blue"> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/timed/appendChild-1a.svg b/layout/reftests/svg/smil/timed/appendChild-1a.svg new file mode 100644 index 0000000000..4d740087c1 --- /dev/null +++ b/layout/reftests/svg/smil/timed/appendChild-1a.svg @@ -0,0 +1,30 @@ +<!-- This test's animation sets x=100 from 1sec to 1.5sec. We'll + remove the animate element at time 1.1sec to capture this, and + then wait a little, and make sure the animation is frozen there. --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait"> + <script> + function go() { + var rect1 = document.getElementById("rect1"); + var rect2 = document.getElementById("rect2"); + var anim = document.getElementById("anim"); + rect2.appendChild(anim); + + // Wait >= 1s before taking screenshot, to give animation time to finish + setTimeout('document.documentElement.removeAttribute("class")', 1100); + } + function delay_go() { + setTimeout(go, 1100); + } + document.addEventListener("MozReftestInvalidate", delay_go, false); + setTimeout(delay_go, 4000); // fallback for running outside reftest + </script> + <rect id="rect1" y="40" width="10" height="10" fill="blue"> + <animate id="anim" attributeName="x" + dur="2s" values="0; 50; 100; 150" + calcMode="discrete" /> + </rect> + <rect id="rect2" y="80" width="10" height="10" fill="blue"> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/timed/appendChild-1b-ref.svg b/layout/reftests/svg/smil/timed/appendChild-1b-ref.svg new file mode 100644 index 0000000000..cee137ecc9 --- /dev/null +++ b/layout/reftests/svg/smil/timed/appendChild-1b-ref.svg @@ -0,0 +1,6 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" +> + <rect id="rect2" y="80" width="10" height="10" fill="blue"> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/timed/appendChild-1b.svg b/layout/reftests/svg/smil/timed/appendChild-1b.svg new file mode 100644 index 0000000000..cedf58a8f6 --- /dev/null +++ b/layout/reftests/svg/smil/timed/appendChild-1b.svg @@ -0,0 +1,29 @@ +<!-- This test makes the first rect white (invisible), so that we can + focus just on the second rect. --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait"> + <script> + function go() { + var rect1 = document.getElementById("rect1"); + var rect2 = document.getElementById("rect2"); + var anim = document.getElementById("anim"); + rect2.appendChild(anim); + + // Wait >= 1s before taking screenshot, to give animation time to finish + setTimeout('document.documentElement.removeAttribute("class")', 1100); + } + function delay_go() { + setTimeout(go, 1100); + } + document.addEventListener("MozReftestInvalidate", delay_go, false); + setTimeout(delay_go, 4000); // fallback for running outside reftest + </script> + <rect id="rect1" y="40" width="10" height="10" fill="white"> + <animate id="anim" attributeName="x" + dur="2s" values="0; 50; 100; 150" + calcMode="discrete" /> + </rect> + <rect id="rect2" y="80" width="10" height="10" fill="blue"> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/timed/appendChild-2a-ref.svg b/layout/reftests/svg/smil/timed/appendChild-2a-ref.svg new file mode 100644 index 0000000000..db44b46a7a --- /dev/null +++ b/layout/reftests/svg/smil/timed/appendChild-2a-ref.svg @@ -0,0 +1,8 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" +> + <rect id="rect1" y="40" width="10" height="10" fill="blue"> + </rect> + <rect id="rect2" x="150" y="80" width="10" height="10" fill="blue"> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/timed/appendChild-2a.svg b/layout/reftests/svg/smil/timed/appendChild-2a.svg new file mode 100644 index 0000000000..19d7c85b8d --- /dev/null +++ b/layout/reftests/svg/smil/timed/appendChild-2a.svg @@ -0,0 +1,30 @@ +<!-- This test's animation sets x=100 from 1sec to 1.5sec. We'll + remove the animate element at time 1.1sec to capture this, and + then wait a little, and make sure the animation is frozen there. --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait"> + <script> + function go() { + var rect1 = document.getElementById("rect1"); + var rect2 = document.getElementById("rect2"); + var anim = document.getElementById("anim"); + rect2.appendChild(anim); + + // Wait >= 1s before taking screenshot, to give animation time to finish + setTimeout('document.documentElement.removeAttribute("class")', 1100); + } + function delay_go() { + setTimeout(go, 1100); + } + document.addEventListener("MozReftestInvalidate", delay_go, false); + setTimeout(delay_go, 4000); // fallback for running outside reftest + </script> + <rect id="rect1" y="40" width="10" height="10" fill="blue"> + <animate id="anim" attributeName="x" + dur="2s" values="0; 50; 100; 150" + calcMode="discrete" fill="freeze"/> + </rect> + <rect id="rect2" y="80" width="10" height="10" fill="blue"> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/timed/appendChild-2b-ref.svg b/layout/reftests/svg/smil/timed/appendChild-2b-ref.svg new file mode 100644 index 0000000000..6bef89aca7 --- /dev/null +++ b/layout/reftests/svg/smil/timed/appendChild-2b-ref.svg @@ -0,0 +1,6 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" +> + <rect id="rect2" x="150" y="80" width="10" height="10" fill="blue"> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/timed/appendChild-2b.svg b/layout/reftests/svg/smil/timed/appendChild-2b.svg new file mode 100644 index 0000000000..f8b772bd56 --- /dev/null +++ b/layout/reftests/svg/smil/timed/appendChild-2b.svg @@ -0,0 +1,29 @@ +<!-- This test makes the first rect white (invisible), so that we can + focus just on the second rect. --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait"> + <script> + function go() { + var rect1 = document.getElementById("rect1"); + var rect2 = document.getElementById("rect2"); + var anim = document.getElementById("anim"); + rect2.appendChild(anim); + + // Wait >= 1s before taking screenshot, to give animation time to finish + setTimeout('document.documentElement.removeAttribute("class")', 1100); + } + function delay_go() { + setTimeout(go, 1100); + } + document.addEventListener("MozReftestInvalidate", delay_go, false); + setTimeout(delay_go, 4000); // fallback for running outside reftest + </script> + <rect id="rect1" y="40" width="10" height="10" fill="white"> + <animate id="anim" attributeName="x" + dur="2s" values="0; 50; 100; 150" + calcMode="discrete" fill="freeze"/> + </rect> + <rect id="rect2" y="80" width="10" height="10" fill="blue"> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/timed/paced-1-ref.svg b/layout/reftests/svg/smil/timed/paced-1-ref.svg new file mode 100644 index 0000000000..4a2165f26e --- /dev/null +++ b/layout/reftests/svg/smil/timed/paced-1-ref.svg @@ -0,0 +1,5 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" +> + <rect height="90" width="90" fill="green"></rect> +</svg> diff --git a/layout/reftests/svg/smil/timed/paced-1.svg b/layout/reftests/svg/smil/timed/paced-1.svg new file mode 100644 index 0000000000..0416e0eace --- /dev/null +++ b/layout/reftests/svg/smil/timed/paced-1.svg @@ -0,0 +1,22 @@ +<!-- In paced calcmode, this animation should jump to -990 really fast, + despite the many small-jump values before it, leaving the canvas blank. --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait"> + <script> + function go() { + document.documentElement.removeAttribute("class"); + } + function delay_go() { + setTimeout(go, 1000); + } + document.addEventListener("MozReftestInvalidate", delay_go, false); + setTimeout(delay_go, 4000); // fallback for running outside reftest + </script> + <rect height="90" width="90" fill="green"></rect> + <rect x="40" y="40" width="10" height="10" fill="red"> + <animate attributeName="x" + dur="5s" values="40; 41; 42; 43; 44; 45; 46; 47; 48; 49; 50; -950" + calcMode="paced" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/timed/pause-1-ref.svg b/layout/reftests/svg/smil/timed/pause-1-ref.svg new file mode 100644 index 0000000000..ef492d492b --- /dev/null +++ b/layout/reftests/svg/smil/timed/pause-1-ref.svg @@ -0,0 +1,6 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" +> + <rect x="100" y="40" width="10" height="10" fill="blue"> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/timed/pause-1.svg b/layout/reftests/svg/smil/timed/pause-1.svg new file mode 100644 index 0000000000..36101cadf0 --- /dev/null +++ b/layout/reftests/svg/smil/timed/pause-1.svg @@ -0,0 +1,38 @@ +<!-- This test's animation sets x=100 from 1sec to 1.5sec. We'll + pause the animation at time 1.1sec to capture this, and then wait + a little, and make sure the animation is frozen there. --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait"> + <script> + function go() { + // Use try/catch, so that we make sure to remove the reftest-wait + // attribute even on older browser versions that don't support + // pauseAnimations. + try { + document.documentElement.pauseAnimations(); + } catch (e) { + // pauseAnimations not implemented. Change rect to red, + // and clear class to fail/end immediately. + document.documentElement.removeAttribute("class"); + var rect = document.getElementById("rect"); + rect.setAttributeNS(null, "fill", "red"); + throw e; + } + + // Wait > 0.5s before taking screenshot, to give animation time to + // jump to next value if the freeze didn't work. + setTimeout('document.documentElement.removeAttribute("class")', 600); + } + function delay_go() { + setTimeout(go, 1100); + } + document.addEventListener("MozReftestInvalidate", delay_go, false); + setTimeout(delay_go, 4000); // fallback for running outside reftest + </script> + <rect y="40" width="10" height="10" fill="blue"> + <animate id="rect" attributeName="x" + dur="3s" values="0; 50; 100; 150; 200; 250" + calcMode="discrete" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/timed/reftest.list b/layout/reftests/svg/smil/timed/reftest.list new file mode 100644 index 0000000000..600a690d9b --- /dev/null +++ b/layout/reftests/svg/smil/timed/reftest.list @@ -0,0 +1,14 @@ +# Tests related to SVG Animation that use timeouts to interrupt, modify, +# and examine animations. +# +# NOTE: Most of these tests require a few seconds to run. +# (That's longer than most other reftests) + +== paced-1.svg paced-1-ref.svg +== pause-1.svg pause-1-ref.svg +fails == removeChild-1.svg removeChild-1-ref.svg # rect needs to reset +fails == removeChild-2.svg removeChild-2-ref.svg # rect needs to reset +fails == appendChild-1a.svg appendChild-1a-ref.svg # first rect needs to reset +== appendChild-1b.svg appendChild-1b-ref.svg +fails == appendChild-2a.svg appendChild-2a-ref.svg # first rect needs to reset +== appendChild-2b.svg appendChild-2b-ref.svg diff --git a/layout/reftests/svg/smil/timed/removeChild-1-ref.svg b/layout/reftests/svg/smil/timed/removeChild-1-ref.svg new file mode 100644 index 0000000000..a1bbb50933 --- /dev/null +++ b/layout/reftests/svg/smil/timed/removeChild-1-ref.svg @@ -0,0 +1,6 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" +> + <rect id="rect1" y="40" width="10" height="10" fill="blue"> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/timed/removeChild-1.svg b/layout/reftests/svg/smil/timed/removeChild-1.svg new file mode 100644 index 0000000000..905373d710 --- /dev/null +++ b/layout/reftests/svg/smil/timed/removeChild-1.svg @@ -0,0 +1,28 @@ +<!-- This test's animation sets x=100 from 1sec to 1.5sec. We'll + remove the animate element at time 1.1sec, give it a little more + time, and see what happens. --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait"> + <script> + function go() { + var rect1 = document.getElementById("rect1"); + var anim = document.getElementById("anim"); + rect1.removeChild(anim); + + // Wait > 0.5s before taking screenshot, to give animation time to + // finish, if it's still going + setTimeout('document.documentElement.removeAttribute("class")', 700); + } + function delay_go() { + setTimeout(go, 1100); + } + document.addEventListener("MozReftestInvalidate", delay_go, false); + setTimeout(delay_go, 4000); // fallback for running outside reftest + </script> + <rect id="rect1" y="40" width="10" height="10" fill="blue"> + <animate id="anim" attributeName="x" + dur="2s" values="0; 50; 100; 150" + calcMode="discrete" /> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/timed/removeChild-2-ref.svg b/layout/reftests/svg/smil/timed/removeChild-2-ref.svg new file mode 100644 index 0000000000..a1bbb50933 --- /dev/null +++ b/layout/reftests/svg/smil/timed/removeChild-2-ref.svg @@ -0,0 +1,6 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" +> + <rect id="rect1" y="40" width="10" height="10" fill="blue"> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/timed/removeChild-2.svg b/layout/reftests/svg/smil/timed/removeChild-2.svg new file mode 100644 index 0000000000..ba07abc2af --- /dev/null +++ b/layout/reftests/svg/smil/timed/removeChild-2.svg @@ -0,0 +1,28 @@ +<!-- This test's animation sets x=100 from 1sec to 1.5sec. We'll + remove the animate element at time 1.1sec, give it a little more + time, and see what happens. --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait"> + <script> + function go() { + var rect1 = document.getElementById("rect1"); + var anim = document.getElementById("anim"); + rect1.removeChild(anim); + + // Wait > 0.5s before taking screenshot, to give animation time to + // finish, if it's still going + setTimeout('document.documentElement.removeAttribute("class")', 700); + } + function delay_go() { + setTimeout(go, 1100); + } + document.addEventListener("MozReftestInvalidate", delay_go, false); + setTimeout(delay_go, 4000); // fallback for running outside reftest + </script> + <rect id="rect1" y="40" width="10" height="10" fill="blue"> + <animate id="anim" attributeName="x" + dur="2s" values="0; 50; 100; 150" + calcMode="discrete" fill="freeze" /> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/transform/additive-1-ref.svg b/layout/reftests/svg/smil/transform/additive-1-ref.svg new file mode 100644 index 0000000000..1b5f9a5aad --- /dev/null +++ b/layout/reftests/svg/smil/transform/additive-1-ref.svg @@ -0,0 +1,42 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <g transform="translate(50 50)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" + transform="rotate(90)"/> + </g> + <g transform="translate(150 50)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" + transform="rotate(90)"/> + </g> + <g transform="translate(250 50)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" + transform="rotate(90)"/> + </g> + <g transform="translate(50 150)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" + transform="rotate(90)"/> + </g> + <g transform="translate(150 150)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" + transform="rotate(90)"/> + </g> + <g transform="translate(250 150)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" + transform="rotate(90)"/> + </g> + <g transform="translate(50 250)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" + transform="rotate(90)"/> + </g> + <g transform="translate(150 250)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" + transform="rotate(90)"/> + </g> + <g transform="translate(250 250)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" + transform="rotate(90)"/> + </g> + <g transform="translate(50 350)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" + transform="rotate(90)"/> + </g> +</svg> diff --git a/layout/reftests/svg/smil/transform/additive-1.svg b/layout/reftests/svg/smil/transform/additive-1.svg new file mode 100644 index 0000000000..20f035a3ac --- /dev/null +++ b/layout/reftests/svg/smil/transform/additive-1.svg @@ -0,0 +1,111 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1.5, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- not additive --> + <g transform="translate(50 50)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" + transform="rotate(-90)"> + <animateTransform attributeName="transform" + type="rotate" from="0" to="90" dur="1s" fill="freeze"/> + </path> + </g> + <!-- to-animation: special additive --> + <g transform="translate(150 50)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" + transform="rotate(-90)"> + <animateTransform attributeName="transform" + type="rotate" to="90" dur="1s" fill="freeze"/> + </path> + </g> + <!-- by-animation: special additive --> + <g transform="translate(250 50)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" + transform="rotate(-90)"> + <animateTransform attributeName="transform" + type="rotate" by="180" dur="1s" fill="freeze"/> + </path> + </g> + <!-- normal additive: same type --> + <g transform="translate(50 150)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" + transform="rotate(45)"> + <animateTransform attributeName="transform" + type="rotate" from="0" to="45" dur="1s" fill="freeze" + additive="sum"/> + </path> + </g> + <!-- normal additive: different type --> + <g transform="translate(100 150)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" + transform="translate(50)"> + <animateTransform attributeName="transform" + type="rotate" from="0" to="90" dur="1s" fill="freeze" + additive="sum"/> + </path> + </g> + <!-- stacked additive: same type --> + <g transform="translate(250 150)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" + transform="rotate(-90)"> + <animateTransform attributeName="transform" + type="rotate" from="0" to="90" dur="1s" fill="freeze" + additive="sum"/> + <animateTransform attributeName="transform" + type="rotate" from="0" to="90" dur="1s" fill="freeze" + additive="sum"/> + </path> + </g> + <!-- stacked additive: different types #1 --> + <g transform="translate(0 250)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" + transform="translate(50)"> + <animateTransform attributeName="transform" + type="rotate" from="0" to="45" dur="1s" fill="freeze" + additive="sum"/> + <animateTransform attributeName="transform" + type="rotate" from="0" to="45" dur="1s" fill="freeze" + additive="sum"/> + </path> + </g> + <!-- stacked additive: different types #2 --> + <g transform="translate(100 250) skewX(-20)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" + transform="skewX(20) translate(50)"> + <animateTransform attributeName="transform" + type="rotate" from="0" to="45" dur="1s" fill="freeze" + additive="sum"/> + <animateTransform attributeName="transform" + type="rotate" from="0" to="45" dur="1s" fill="freeze" + additive="sum"/> + </path> + </g> + <!-- stacked additive: different types #3 --> + <g transform="translate(200 250) skewX(-20)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" + transform="skewX(20) translate(50)"> + <animateTransform attributeName="transform" + type="rotate" from="0" to="45" dur="1s" fill="freeze" + additive="sum"/> + <animateTransform attributeName="transform" + type="translate" from="0" to="30" dur="1s" fill="freeze" + additive="sum"/> + <animateTransform attributeName="transform" + type="translate" from="0" to="-30" dur="1s" fill="freeze" + additive="sum"/> + <animateTransform attributeName="transform" + type="rotate" from="0" to="45" dur="1s" fill="freeze" + additive="sum"/> + </path> + </g> + <!-- base value with rotation around a centre --> + <g transform="translate(-50 300)"> + <path d="M48 100h4v -90h4l -6 -10 -6 10h4z" fill="blue" + transform="rotate(90 50 50)"> + <animateTransform attributeName="transform" + type="translate" from="0 0" to="0 -50" dur="1s" fill="freeze" + additive="sum"/> + </path> + </g> +</svg> diff --git a/layout/reftests/svg/smil/transform/animate-width-1.svg b/layout/reftests/svg/smil/transform/animate-width-1.svg new file mode 100644 index 0000000000..3f874cdd95 --- /dev/null +++ b/layout/reftests/svg/smil/transform/animate-width-1.svg @@ -0,0 +1,22 @@ +<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> + function doTest() { + setTimeAndSnapshot(101, false); + } + window.addEventListener("MozReftestInvalidate", doTest, false); + </script> + + <rect width="100%" height="100%" fill="lime" /> + + <!-- Test 1: We shouldn't animate a width attribute with animateTransform --> + + <rect width="0px" height="50px" fill="red"> + <animateTransform attributeName="width" begin="100s" dur="1s" + from="0" to="100" fill="freeze" /> + </rect> + +</svg> diff --git a/layout/reftests/svg/smil/transform/lime.svg b/layout/reftests/svg/smil/transform/lime.svg new file mode 100644 index 0000000000..c09c6601e8 --- /dev/null +++ b/layout/reftests/svg/smil/transform/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/transform/paced-1-ref.svg b/layout/reftests/svg/smil/transform/paced-1-ref.svg new file mode 100644 index 0000000000..ac843a13e4 --- /dev/null +++ b/layout/reftests/svg/smil/transform/paced-1-ref.svg @@ -0,0 +1,31 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <defs> + <g id="smiley"> + <circle fill="yellow" stroke="black" stroke-width="2" cx="0" cy="0" + r="40"/> + <circle fill="white" stroke="black" stroke-width="1" cx="-14" cy="-14" + r="14"/> + <circle fill="white" stroke="black" stroke-width="1" cx="14" cy="-14" + r="14"/> + <circle cx="-10" cy="-14" r="4"/> + <circle cx="10" cy="-14" r="4"/> + <path d="m-11 14a13,13 0 0,0 22,0" fill="none" stroke="black"/> + </g> + </defs> + <g transform="translate(50 50)"> + <use xlink:href="#smiley"/> + </g> + <g transform="translate(150 50)"> + <use xlink:href="#smiley"/> + </g> + <g transform="translate(250 50)"> + <use xlink:href="#smiley"/> + </g> + <g transform="translate(50 150)"> + <use xlink:href="#smiley"/> + </g> + <g transform="translate(150 150)"> + <use xlink:href="#smiley"/> + </g> +</svg> diff --git a/layout/reftests/svg/smil/transform/paced-1.svg b/layout/reftests/svg/smil/transform/paced-1.svg new file mode 100644 index 0000000000..2e8238b3cb --- /dev/null +++ b/layout/reftests/svg/smil/transform/paced-1.svg @@ -0,0 +1,64 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(101, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <defs> + <g id="smiley"> + <circle fill="yellow" stroke="black" stroke-width="2" cx="0" cy="0" + r="40"/> + <circle fill="white" stroke="black" stroke-width="1" cx="-14" cy="-14" + r="14"/> + <circle fill="white" stroke="black" stroke-width="1" cx="14" cy="-14" + r="14"/> + <circle cx="-10" cy="-14" r="4"/> + <circle cx="10" cy="-14" r="4"/> + <path d="m-11 14a13,13 0 0,0 22,0" fill="none" stroke="black"/> + </g> + </defs> + <!-- translation --> + <g transform="translate(0 50)"> + <use xlink:href="#smiley"> + <animateTransform attributeName="transform" attributeType="XML" + type="translate" fill="freeze" begin="100s" dur="2s" calcMode="paced" + values="-5 -10; 35 20; 95 -60"/> + </use> + </g> + <!-- rotation --> + <g transform="translate(150 50) rotate(-90)"> + <use xlink:href="#smiley"> + <animateTransform attributeName="transform" attributeType="XML" + type="rotate" fill="freeze" begin="100s" dur="2s" calcMode="paced" + values="20 10 10; 40 -15 25; 160 21 -35"/> + </use> + </g> + <!-- skewY --> + <g transform="translate(250 50) skewY(-30)"> + <use xlink:href="#smiley"> + <animateTransform attributeName="transform" attributeType="XML" + type="skewY" fill="freeze" begin="100s" dur="2s" calcMode="paced" + values="10; 40; 50"/> + </use> + </g> + <!-- scale --> + <g transform="translate(50 150) scale(0.5)"> + <use xlink:href="#smiley"> + <animateTransform attributeName="transform" attributeType="XML" + type="scale" fill="freeze" begin="100s" dur="2s" calcMode="paced" + values="-4 -2.5; 4 3.5; 8 0.5"/> + </use> + </g> + <!-- to-animation + + You can't have to-animation with a paced calcMode. This test should just + produce regular to-animation without any assertions. This is a white-box + test. + --> + <g transform="translate(100 150)"> + <use xlink:href="#smiley"> + <animateTransform attributeName="transform" attributeType="XML" + type="translate" fill="freeze" begin="100s" dur="2s" calcMode="paced" + to="100"/> + </use> + </g> +</svg> diff --git a/layout/reftests/svg/smil/transform/reftest.list b/layout/reftests/svg/smil/transform/reftest.list new file mode 100644 index 0000000000..ef97515317 --- /dev/null +++ b/layout/reftests/svg/smil/transform/reftest.list @@ -0,0 +1,18 @@ +# Tests related to SVG Animation (using SMIL), focusing on the animateTransform +# element. + +fuzzy(0-130,0-1000) == additive-1.svg additive-1-ref.svg # bug 981344, bug 1239766 +== animate-width-1.svg lime.svg +fuzzy-if(cocoaWidget,0-5,0-101) fuzzy-if(winWidget,0-15,0-101) fuzzy-if(gtkWidget,0-5,0-101) fuzzy-if(Android,0-16,0-1) == paced-1.svg paced-1-ref.svg # bug 981640, Bug 1293550, Bug 1592998 +fuzzy(0-7,0-90) == rotate-angle-1.svg rotate-angle-ref.svg +fuzzy(0-7,0-90) == rotate-angle-2.svg rotate-angle-ref.svg +fuzzy(0-7,0-130) == rotate-angle-3.svg rotate-angle-ref.svg +fuzzy(0-7,0-90) == rotate-angle-4.svg rotate-angle-ref.svg +fuzzy(0-7,0-60) == rotate-angle-5.svg rotate-angle-ref.svg +fuzzy(0-7,0-306) fuzzy-if(Android,0-16,0-3) == scale-1.svg scale-1-ref.svg # bug 981004, AA difference +== set-transform-1.svg lime.svg +fuzzy(0-7,0-1548) == skew-1.svg skew-1-ref.svg # bug 983671, Bug 1260629 +== translate-clipPath-1.svg lime.svg +== translate-gradient-1.svg lime.svg +== translate-pattern-1.svg lime.svg +== use-1.svg lime.svg diff --git a/layout/reftests/svg/smil/transform/rotate-angle-1.svg b/layout/reftests/svg/smil/transform/rotate-angle-1.svg new file mode 100644 index 0000000000..75ace79c2d --- /dev/null +++ b/layout/reftests/svg/smil/transform/rotate-angle-1.svg @@ -0,0 +1,60 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(101, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <g transform="translate(50 50) rotate(90)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"> + <animateTransform attributeName="transform" + type="rotate" from="0" to="0" begin="100s" dur="4s" fill="freeze"/> + </path> + </g> + <g transform="translate(150 50)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"> + <animateTransform attributeName="transform" + type="rotate" from="0" to="90" begin="100s" dur="1s" fill="freeze"/> + </path> + </g> + <g transform="translate(250 50)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"> + <animateTransform attributeName="transform" + type="rotate" from="0" to="180" begin="100s" dur="2s" fill="freeze"/> + </path> + </g> + <g transform="translate(50 150)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"> + <animateTransform attributeName="transform" + type="rotate" from="0" to="270" begin="100s" dur="3s" fill="freeze"/> + </path> + </g> + <g transform="translate(150 150)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"> + <animateTransform attributeName="transform" + type="rotate" from="0" to="360" begin="100s" dur="4s" fill="freeze"/> + </path> + </g> + <g transform="translate(250 150)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"> + <animateTransform attributeName="transform" + type="rotate" from="0" to="540" begin="100s" dur="6s" fill="freeze"/> + </path> + </g> + <g transform="translate(50 250)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"> + <animateTransform attributeName="transform" + type="rotate" from="0" to="3600" begin="100s" dur="40s" fill="freeze"/> + </path> + </g> + <g transform="translate(150 250)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"> + <animateTransform attributeName="transform" + type="rotate" from="0" to="-270" begin="100s" dur="1s" fill="freeze"/> + </path> + </g> + <g transform="translate(250 250)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"> + <animateTransform attributeName="transform" + type="rotate" from="0" to="-540" begin="100s" dur="2s" fill="freeze"/> + </path> + </g> +</svg> diff --git a/layout/reftests/svg/smil/transform/rotate-angle-2.svg b/layout/reftests/svg/smil/transform/rotate-angle-2.svg new file mode 100644 index 0000000000..8d75991aa0 --- /dev/null +++ b/layout/reftests/svg/smil/transform/rotate-angle-2.svg @@ -0,0 +1,60 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(101, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <g transform="translate(44 0) rotate(90 6 50)"> + <path d="M4 100h4v -90h4l -6 -10 -6 10h4z" fill="blue"> + <animateTransform attributeName="transform" + type="rotate" from="0 6 50" to="0 6 50" begin="100s" dur="4s" fill="freeze"/> + </path> + </g> + <g transform="translate(144 0)"> + <path d="M4 100h4v -90h4l -6 -10 -6 10h4z" fill="blue"> + <animateTransform attributeName="transform" + type="rotate" from="0,6,50" to="90 6 50" begin="100s" dur="1s" fill="freeze"/> + </path> + </g> + <g transform="translate(244,0)"> + <path d="M4 100h4v -90h4l -6 -10 -6 10h4z" fill="blue"> + <animateTransform attributeName="transform" + type="rotate" from="0 6 50" to="180,6,50" begin="100s" dur="2s" fill="freeze"/> + </path> + </g> + <g transform="translate(44,100)"> + <path d="M4 100h4v -90h4l -6 -10 -6 10h4z" fill="blue"> + <animateTransform attributeName="transform" + type="rotate" from="0,6,50" to="270,6,50" begin="100s" dur="3s" fill="freeze"/> + </path> + </g> + <g transform="translate(144,100)"> + <path d="M4 100h4v -90h4l -6 -10 -6 10h4z" fill="blue"> + <animateTransform attributeName="transform" + type="rotate" from="0 6 50" to="360 6 50" begin="100s" dur="4s" fill="freeze"/> + </path> + </g> + <g transform="translate(244,100)"> + <path d="M4 100h4v -90h4l -6 -10 -6 10h4z" fill="blue"> + <animateTransform attributeName="transform" + type="rotate" from="0 6 50" to="540 6 50" begin="100s" dur="6s" fill="freeze"/> + </path> + </g> + <g transform="translate(44,200)"> + <path d="M4 100h4v -90h4l -6 -10 -6 10h4z" fill="blue"> + <animateTransform attributeName="transform" + type="rotate" from="0 6 50" to="3600 6 50" begin="100s" dur="40s" fill="freeze"/> + </path> + </g> + <g transform="translate(144,200)"> + <path d="M4 100h4v -90h4l -6 -10 -6 10h4z" fill="blue"> + <animateTransform attributeName="transform" + type="rotate" from="0 6 50" to="-270 6 50" begin="100s" dur="1s" fill="freeze"/> + </path> + </g> + <g transform="translate(244,200)"> + <path d="M4 100h4v -90h4l -6 -10 -6 10h4z" fill="blue"> + <animateTransform attributeName="transform" + type="rotate" from="0 6 50" to="-540 6 50" begin="100s" dur="2s" fill="freeze"/> + </path> + </g> +</svg> diff --git a/layout/reftests/svg/smil/transform/rotate-angle-3.svg b/layout/reftests/svg/smil/transform/rotate-angle-3.svg new file mode 100644 index 0000000000..c24a2a5b54 --- /dev/null +++ b/layout/reftests/svg/smil/transform/rotate-angle-3.svg @@ -0,0 +1,60 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(101, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <g transform="translate(0 0) rotate(90 50 50)"> + <path d="M48 100h4v -90h4l -6 -10 -6 10h4z" fill="blue"> + <animateTransform attributeName="transform" + type="rotate" from="0 0 50" to="0 200 50" begin="100s" dur="4s" fill="freeze"/> + </path> + </g> + <g transform="translate(100 0)"> + <path d="M48 100h4v -90h4l -6 -10 -6 10h4z" fill="blue"> + <animateTransform attributeName="transform" + type="rotate" from="0 0 50" to="90 50 50" begin="100s" dur="1s" fill="freeze"/> + </path> + </g> + <g transform="translate(200 0)"> + <path d="M48 100h4v -90h4l -6 -10 -6 10h4z" fill="blue"> + <animateTransform attributeName="transform" + type="rotate" from="0 0 50" to="180 100 50" begin="100s" dur="2s" fill="freeze"/> + </path> + </g> + <g transform="translate(0 100)"> + <path d="M48 100h4v -90h4l -6 -10 -6 10h4z" fill="blue"> + <animateTransform attributeName="transform" + type="rotate" from="0 0 50" to="270 150 50" begin="100s" dur="3s" fill="freeze"/> + </path> + </g> + <g transform="translate(100 100)"> + <path d="M48 100h4v -90h4l -6 -10 -6 10h4z" fill="blue"> + <animateTransform attributeName="transform" + type="rotate" from="0 0 50" to="360 200 50" begin="100s" dur="4s" fill="freeze"/> + </path> + </g> + <g transform="translate(200 100)"> + <path d="M48 100h4v -90h4l -6 -10 -6 10h4z" fill="blue"> + <animateTransform attributeName="transform" + type="rotate" from="0 0 50" to="540 300 50" begin="100s" dur="6s" fill="freeze"/> + </path> + </g> + <g transform="translate(0 200)"> + <path d="M48 100h4v -90h4l -6 -10 -6 10h4z" fill="blue"> + <animateTransform attributeName="transform" + type="rotate" from="0 0 50" to="3600 2000 50" begin="100s" dur="40s" fill="freeze"/> + </path> + </g> + <g transform="translate(100 200)"> + <path d="M48 100h4v -90h4l -6 -10 -6 10h4z" fill="blue"> + <animateTransform attributeName="transform" + type="rotate" from="0 0 50" to="-270 50 50" begin="100s" dur="1s" fill="freeze"/> + </path> + </g> + <g transform="translate(200 200)"> + <path d="M48 100h4v -90h4l -6 -10 -6 10h4z" fill="blue"> + <animateTransform attributeName="transform" + type="rotate" from="0 0 50" to="-540 100 50" begin="100s" dur="2s" fill="freeze"/> + </path> + </g> +</svg> diff --git a/layout/reftests/svg/smil/transform/rotate-angle-4.svg b/layout/reftests/svg/smil/transform/rotate-angle-4.svg new file mode 100644 index 0000000000..48a9e8b92f --- /dev/null +++ b/layout/reftests/svg/smil/transform/rotate-angle-4.svg @@ -0,0 +1,79 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(101, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- no animation --> + <g transform="translate(50 50) rotate(90)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"/> + </g> + <!-- accumulate: sum --> + <g transform="translate(150 50)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"> + <animateTransform attributeName="transform" + type="rotate" from="0" to="45" begin="100s" dur="0.5s" fill="freeze" + repeatCount="4" accumulate="sum"/> + </path> + </g> + <!-- accumulate: none --> + <g transform="translate(250 50)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"> + <animateTransform attributeName="transform" + type="rotate" from="0" to="270" begin="100s" dur="0.75s" fill="freeze" + repeatCount="2"/> + </path> + </g> + <!-- additive: replace --> + <g transform="translate(50 150)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" + transform="rotate(-90)"> + <animateTransform attributeName="transform" + type="rotate" from="0" to="180" begin="100s" dur="2s" fill="freeze"/> + </path> + </g> + <!-- additive: sum (adding to base value) --> + <g transform="translate(150 150)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" + transform="rotate(-90)"> + <animateTransform attributeName="transform" + type="rotate" from="0" to="270" begin="100s" dur="1.5s" fill="freeze" + additive="sum"/> + </path> + </g> + <!-- additive: sum (adding to other animations) --> + <g transform="translate(250 150)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"> + <animateTransform attributeName="transform" + type="rotate" from="0" to="60" begin="100s" dur="2s" fill="freeze"/> + <animateTransform attributeName="transform" + type="rotate" from="0" to="60" begin="100s" dur="2s" fill="freeze" + additive="sum"/> + <animateTransform attributeName="transform" + type="rotate" from="0" to="60" begin="100s" dur="2s" fill="freeze" + additive="sum"/> + </path> + </g> + <!-- to animation --> + <g transform="translate(50 250)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" + transform="rotate(45)"> + <animateTransform attributeName="transform" + type="rotate" to="135" begin="100s" dur="2s" fill="freeze"/> + </path> + </g> + <!-- by animation --> + <g transform="translate(150 250)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" + transform="rotate(45)"> + <animateTransform attributeName="transform" + type="rotate" by="90" begin="100s" dur="2s" fill="freeze"/> + </path> + </g> + <!-- values animation --> + <g transform="translate(250 250)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"> + <animateTransform attributeName="transform" + type="rotate" values="0; 135; 0" begin="100s" dur="1.5s" fill="freeze"/> + </path> + </g> +</svg> diff --git a/layout/reftests/svg/smil/transform/rotate-angle-5.svg b/layout/reftests/svg/smil/transform/rotate-angle-5.svg new file mode 100644 index 0000000000..354b0f7e0b --- /dev/null +++ b/layout/reftests/svg/smil/transform/rotate-angle-5.svg @@ -0,0 +1,86 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(101, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- Tests to-animation behaviour for a lot of undefined situations. + SVG 1.1 doesn't define what should happen here but the behaviour we + expect is based on other browsers. --> + <!-- to animation: rotation from base value -90 to final value 180 --> + <g transform="translate(50 50)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" + transform="rotate(-90)"> + <animateTransform attributeName="transform" + type="rotate" to="180" begin="100s" dur="1.5s" fill="freeze"/> + </path> + </g> + <!-- to animation: rotation from base value -810 to final value 990 --> + <g transform="translate(150 50)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" + transform="rotate(-810)"> + <animateTransform attributeName="transform" + type="rotate" to="990" begin="100s" dur="2s" fill="freeze"/> + </path> + </g> + <!-- to animation: rotation from base value -180 to final value 90 but with + other animations combined. + + What happens here is that the rotation animation can't interpolate from + the base value as it's not a rotation transformation, so instead it + assumes an underlying zero matrix as the base value. (see next comment) + --> + <g transform="translate(250 50)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" + transform="rotate(-90) translate(0 50) scale(2)"> + <animateTransform attributeName="transform" + type="rotate" to="180" begin="100s" dur="2s" fill="freeze" additive="sum"/> + </path> + </g> + <!-- to animation: rotate and scale + + Here again the scale animation can't interpolate from its base value + which is of a different type so it assumes a zero matrix NOT an identity + matrix (this is what the SVG WG have decided in the SVGT1.2 Tiny test + suite). + --> + <g transform="translate(50 150) rotate(90)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" + transform="scale(2)"> + <animateTransform attributeName="transform" + type="rotate" to="180" begin="100s" dur="1s" fill="freeze" additive="sum"/> + <animateTransform attributeName="transform" + type="scale" to="2" begin="100s" dur="2s" fill="freeze" additive="sum"/> + </path> + </g> + <!-- to animation: translate and rotate + + Likewise here we end up rotating from 0 to 180 because we can't + interpolate from the underlying translation transformation. + --> + <g transform="translate(150 150)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" + transform="rotate(-90) translate(0 50) scale(2)"> + <animateTransform attributeName="transform" + type="translate" to="0" begin="100s" dur="1s" fill="freeze" additive="sum"/> + <animateTransform attributeName="transform" + type="rotate" to="180" begin="100s" dur="2s" fill="freeze" additive="sum"/> + </path> + </g> + <!-- The following are from the reference image --> + <g transform="translate(250 150)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" + transform="rotate(90)"/> + </g> + <g transform="translate(50 250)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" + transform="rotate(90)"/> + </g> + <g transform="translate(150 250)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" + transform="rotate(90)"/> + </g> + <g transform="translate(250 250)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" + transform="rotate(90)"/> + </g> +</svg> diff --git a/layout/reftests/svg/smil/transform/rotate-angle-ref.svg b/layout/reftests/svg/smil/transform/rotate-angle-ref.svg new file mode 100644 index 0000000000..e69ce351ef --- /dev/null +++ b/layout/reftests/svg/smil/transform/rotate-angle-ref.svg @@ -0,0 +1,38 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <g transform="translate(50 50)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" + transform="rotate(90)"/> + </g> + <g transform="translate(150 50)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" + transform="rotate(90)"/> + </g> + <g transform="translate(250 50)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" + transform="rotate(90)"/> + </g> + <g transform="translate(50 150)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" + transform="rotate(90)"/> + </g> + <g transform="translate(150 150)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" + transform="rotate(90)"/> + </g> + <g transform="translate(250 150)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" + transform="rotate(90)"/> + </g> + <g transform="translate(50 250)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" + transform="rotate(90)"/> + </g> + <g transform="translate(150 250)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" + transform="rotate(90)"/> + </g> + <g transform="translate(250 250)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" + transform="rotate(90)"/> + </g> +</svg> diff --git a/layout/reftests/svg/smil/transform/scale-1-ref.svg b/layout/reftests/svg/smil/transform/scale-1-ref.svg new file mode 100644 index 0000000000..58a3c117f9 --- /dev/null +++ b/layout/reftests/svg/smil/transform/scale-1-ref.svg @@ -0,0 +1,43 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <defs> + <g id="smiley"> + <circle fill="yellow" stroke="black" stroke-width="1" cx="0" cy="0" + r="20"/> + <circle fill="white" stroke="black" stroke-width="1" cx="-7" cy="-7" + r="7"/> + <circle fill="white" stroke="black" stroke-width="1" cx="7" cy="-7" + r="7"/> + <circle cx="-5" cy="-7" r="2"/> + <circle cx="5" cy="-7" r="2"/> + <path d="m-11 7a13,13 0 0,0 22,0" fill="none" stroke="black"/> + </g> + </defs> + <g transform="translate(50 50)"> + <use xlink:href="#smiley" transform="scale(2)"/> + </g> + <g transform="translate(150 50)"> + <use xlink:href="#smiley" transform="scale(2)"/> + </g> + <g transform="translate(250 50)"> + <use xlink:href="#smiley" transform="scale(2)"/> + </g> + <g transform="translate(50 150)"> + <use xlink:href="#smiley" transform="scale(2)"/> + </g> + <g transform="translate(150 150)"> + <use xlink:href="#smiley" transform="scale(2)"/> + </g> + <g transform="translate(250 150)"> + <use xlink:href="#smiley" transform="scale(2)"/> + </g> + <g transform="translate(50 250)"> + <use xlink:href="#smiley" transform="scale(2)"/> + </g> + <g transform="translate(150 250)"> + <use xlink:href="#smiley" transform="scale(2)"/> + </g> + <g transform="translate(250 250)"> + <use xlink:href="#smiley" transform="scale(2)"/> + </g> +</svg> diff --git a/layout/reftests/svg/smil/transform/scale-1.svg b/layout/reftests/svg/smil/transform/scale-1.svg new file mode 100644 index 0000000000..7393c35e11 --- /dev/null +++ b/layout/reftests/svg/smil/transform/scale-1.svg @@ -0,0 +1,119 @@ +<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> + window.addEventListener("MozReftestInvalidate", run, false); + + function run() { + setTimeAndSnapshot(101, true); + } + </script> + <defs> + <g id="smiley"> + <circle fill="yellow" stroke="black" stroke-width="1" cx="0" cy="0" + r="20"/> + <circle fill="white" stroke="black" stroke-width="1" cx="-7" cy="-7" + r="7"/> + <circle fill="white" stroke="black" stroke-width="1" cx="7" cy="-7" + r="7"/> + <circle cx="-5" cy="-7" r="2"/> + <circle cx="5" cy="-7" r="2"/> + <path d="m-11 7a13,13 0 0,0 22,0" fill="none" stroke="black"/> + </g> + </defs> + <!-- to animation + + This should interpolate from 0 (not 1) to 4 to match the behaviour + required by the SVGT1.2 test suite and Opera's behaviour. + --> + <g transform="translate(50 50)"> + <use xlink:href="#smiley"> + <animateTransform attributeName="transform" + type="scale" to="4" begin="100s" dur="2s" fill="freeze"/> + </use> + </g> + <!-- from-to animation --> + <g transform="translate(150 50)"> + <use xlink:href="#smiley"> + <animateTransform attributeName="transform" + type="scale" from="-5" to="9" begin="100s" dur="2s" fill="freeze"/> + </use> + </g> + <!-- negative to-animation + + Should go from 0 to -4 over 2s, therefore at t=1s, the scale factor + should be -2, so we add a rotation animation to correct the gradient + --> + <g transform="translate(250 50)"> + <use xlink:href="#smiley"> + <animateTransform attributeName="transform" + type="scale" to="-4" begin="100s" dur="2s" fill="freeze"/> + <animateTransform attributeName="transform" + type="rotate" from="0" to="360" begin="100s" dur="2s" fill="freeze" additive="sum"/> + </use> + </g> + <!-- by animation + + The behaviour at this point is not clear. The definition of by-animation + is: + + "simple animation in which the animation function is defined to offset + the underlying value for the attribute, using a delta that varies over + the course of the simple duration, starting from a delta of 0 and ending + with the delta specified with the by attribute." (SMILANIM 3.2.2) + + Therefore it might seem like by-animation of by="1" means to ADD to the + underlying scale factor. Furthermore, the underlying scale factor when + not otherwise specified might seemt to be 1, but the SVG WG have decided + it's 0. This is inconsistent with the definition of addition for + animateTransform (post-multiplication of matrices) but it is the + behaviour required by SVGT1.2 test suite and used by Opera. + + The following animation should go from 0 to 4, over 2s so at t=1s, the + scale factor should be 2. + --> + <g transform="translate(50 150)"> + <use xlink:href="#smiley"> + <animateTransform attributeName="transform" + type="scale" by="4" begin="100s" dur="2s" fill="freeze"/> + </use> + </g> + <!-- by animation #2 --> + <g transform="translate(150 150)"> + <use xlink:href="#smiley" transform="scale(4)"> + <animateTransform attributeName="transform" + type="scale" by="1" begin="100s" dur="2s" fill="freeze" additive="sum"/> + </use> + </g> + <!-- from-by animation --> + <g transform="translate(250 150)"> + <use xlink:href="#smiley"> + <animateTransform attributeName="transform" + type="scale" from="2" by="0" begin="100s" dur="2s" fill="freeze"/> + </use> + </g> + <!-- values animation --> + <g transform="translate(50 250)"> + <use xlink:href="#smiley"> + <animateTransform attributeName="transform" + type="scale" values="0; 10; 2; 5; -1" begin="100s" dur="2s" fill="freeze"/> + </use> + </g> + <!-- repetition --> + <g transform="translate(150 250)"> + <use xlink:href="#smiley"> + <animateTransform attributeName="transform" type="scale" from="0" + to="0.6" begin="100s" dur="0.3s" repeatCount="4" accumulate="sum" + fill="freeze"/> + </use> + </g> + <!-- repeated to-animation (should NOT accumulate) --> + <g transform="translate(250 250)"> + <use xlink:href="#smiley"> + <animateTransform attributeName="transform" type="scale" + to="6" begin="100s" dur="0.75" repeatCount="2" accumulate="sum" + fill="freeze"/> + </use> + </g> +</svg> diff --git a/layout/reftests/svg/smil/transform/set-transform-1.svg b/layout/reftests/svg/smil/transform/set-transform-1.svg new file mode 100644 index 0000000000..f698cbaa82 --- /dev/null +++ b/layout/reftests/svg/smil/transform/set-transform-1.svg @@ -0,0 +1,27 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<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> + function doTest() { + setTimeAndSnapshot(101, false); + } + window.addEventListener("MozReftestInvalidate", doTest, false); + </script> + + <rect width="100%" height="100%" fill="lime" /> + + <!-- Test 1: We shouldn't animate a transform attribute with set --> + + <rect x="50" y="50" width="100" height="100" fill="red"> + <set attributeName="transform" to="75,75" begin="100s"/> + </rect> + + <rect x="50" y="50" width="100" height="100" fill="lime"/> + +</svg> diff --git a/layout/reftests/svg/smil/transform/skew-1-ref.svg b/layout/reftests/svg/smil/transform/skew-1-ref.svg new file mode 100644 index 0000000000..10c7ca8a38 --- /dev/null +++ b/layout/reftests/svg/smil/transform/skew-1-ref.svg @@ -0,0 +1,43 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <defs> + <g id="smiley"> + <circle fill="yellow" stroke="black" stroke-width="2" cx="0" cy="0" + r="40"/> + <circle fill="white" stroke="black" stroke-width="1" cx="-14" cy="-14" + r="14"/> + <circle fill="white" stroke="black" stroke-width="1" cx="14" cy="-14" + r="14"/> + <circle cx="-10" cy="-14" r="4"/> + <circle cx="10" cy="-14" r="4"/> + <path d="m-11 14a13,13 0 0,0 22,0" fill="none" stroke="black"/> + </g> + </defs> + <g transform="translate(50 50)"> + <use xlink:href="#smiley" transform="skewX(30)"/> + </g> + <g transform="translate(150 50)"> + <use xlink:href="#smiley" transform="skewX(30)"/> + </g> + <g transform="translate(250 50)"> + <use xlink:href="#smiley" transform="skewX(30)"/> + </g> + <g transform="translate(50 150)"> + <use xlink:href="#smiley" transform="skewX(30)"/> + </g> + <g transform="translate(150 150)"> + <use xlink:href="#smiley" transform="skewX(30)"/> + </g> + <g transform="translate(250 150)"> + <use xlink:href="#smiley" transform="skewX(30)"/> + </g> + <g transform="translate(50 250)"> + <use xlink:href="#smiley" transform="skewX(30)"/> + </g> + <g transform="translate(150 250)"> + <use xlink:href="#smiley" transform="skewX(30)"/> + </g> + <g transform="translate(250 250)"> + <use xlink:href="#smiley" transform="skewX(30)"/> + </g> +</svg> diff --git a/layout/reftests/svg/smil/transform/skew-1.svg b/layout/reftests/svg/smil/transform/skew-1.svg new file mode 100644 index 0000000000..603c7f4025 --- /dev/null +++ b/layout/reftests/svg/smil/transform/skew-1.svg @@ -0,0 +1,86 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(101, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <defs> + <g id="smiley"> + <circle fill="yellow" stroke="black" stroke-width="2" cx="0" cy="0" + r="40"/> + <circle fill="white" stroke="black" stroke-width="1" cx="-14" cy="-14" + r="14"/> + <circle fill="white" stroke="black" stroke-width="1" cx="14" cy="-14" + r="14"/> + <circle cx="-10" cy="-14" r="4"/> + <circle cx="10" cy="-14" r="4"/> + <path d="m-11 14a13,13 0 0,0 22,0" fill="none" stroke="black"/> + </g> + </defs> + <!-- from-to animation --> + <g transform="translate(50 50)"> + <use xlink:href="#smiley"> + <animateTransform attributeName="transform" attributeType="XML" + type="skewX" fill="freeze" from="-30" to="90" begin="100s" dur="2s"/> + </use> + </g> + <!-- from-by animation --> + <g transform="translate(150 50)"> + <use xlink:href="#smiley"> + <animateTransform attributeName="transform" attributeType="XML" + type="skewX" fill="freeze" from="60" by="-60" begin="100s" dur="2s"/> + </use> + </g> + <!-- by animation --> + <g transform="translate(250 50) skewX(-15)"> + <use xlink:href="#smiley" transform="skewX(15)"> + <animateTransform attributeName="transform" attributeType="XML" + type="skewX" fill="freeze" by="60" begin="100s" dur="2s"/> + </use> + </g> + <!-- to animation --> + <g transform="translate(50 150)"> + <use xlink:href="#smiley" transform="skewX(15)"> + <animateTransform attributeName="transform" attributeType="XML" + type="skewX" fill="freeze" to="45" begin="100s" dur="2s"/> + </use> + </g> + <!-- values animation --> + <g transform="translate(150 150)"> + <use xlink:href="#smiley"> + <animateTransform attributeName="transform" attributeType="XML" + type="skewX" fill="freeze" values="10; 40; 20; 60" begin="100s" dur="2s"/> + </use> + </g> + <!-- additive --> + <g transform="translate(250 150)"> + <use xlink:href="#smiley" transform="skewY(-30)"> + <animateTransform attributeName="transform" attributeType="XML" + type="skewY" fill="freeze" to="30" begin="100s" dur="2s"/> + <animateTransform attributeName="transform" attributeType="XML" + type="skewX" fill="freeze" from="-30" to="90" begin="100s" dur="2s" additive="sum"/> + </use> + </g> + <!-- accumulate: none --> + <g transform="translate(50 250)"> + <use xlink:href="#smiley"> + <animateTransform attributeName="transform" attributeType="XML" + type="skewX" fill="freeze" from="20" to="50" begin="100s" dur="0.75s" + repeatCount="3"/> + </use> + </g> + <!-- accumulate: sum --> + <g transform="translate(150 250)"> + <use xlink:href="#smiley"> + <animateTransform attributeName="transform" attributeType="XML" + type="skewX" fill="freeze" from="0" to="22.5" begin="100s" dur="0.75" + accumulate="sum" repeatCount="3"/> + </use> + </g> + <!-- angles > 360 --> + <g transform="translate(250 250)"> + <use xlink:href="#smiley"> + <animateTransform attributeName="transform" attributeType="XML" + type="skewX" fill="freeze" from="-690" to="750" begin="100s" dur="2s"/> + </use> + </g> +</svg> diff --git a/layout/reftests/svg/smil/transform/translate-clipPath-1.svg b/layout/reftests/svg/smil/transform/translate-clipPath-1.svg new file mode 100644 index 0000000000..80291076cd --- /dev/null +++ b/layout/reftests/svg/smil/transform/translate-clipPath-1.svg @@ -0,0 +1,39 @@ +<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> + function doTest() { + setTimeAndSnapshot(101, false); + } + window.addEventListener("MozReftestInvalidate", doTest, false); + </script> + <defs> + <clipPath id="clip"> + <rect x="0" y="0" width="50" height="100%"/> + <animateTransform attributeName="transform" type="translate" begin="100s" dur="1s" + from="0 0" to="-50 0" fill="freeze"/> + </clipPath> + </defs> + + <!-- Test 1: Lime background covered by clipped red block. + After the animation, the clipping path doesn't intersecting the red + block at all, so no red is shown. --> + <rect x="0" width="50" height="100%" fill="lime" /> + <rect x="0" width="50" height="100%" fill="red" + style="clip-path: url(#clip);"/> + + <!-- Test 2: Purple background covered by clipped lime block. + Initially, the clipping path is to the right of the lime, so the purple + background shows through. But after the animation, the clipping path + exactly matches the dimensions of the lime block, which lets it + completly cover all the purple. --> + <g transform="translate(100, 0)"> + <rect x="-50" y="0" width="50" height="100%" fill="purple"/> + <rect x="-50" y="0" width="50" height="100%" fill="lime" + style="clip-path: url(#clip);"/> + </g> + + <!-- Not a test: Paint the rest of the viewport, to match lime.svg --> + <rect x="100" height="100%" width="100%" fill="lime"/> +</svg> diff --git a/layout/reftests/svg/smil/transform/translate-gradient-1.svg b/layout/reftests/svg/smil/transform/translate-gradient-1.svg new file mode 100644 index 0000000000..240777b14e --- /dev/null +++ b/layout/reftests/svg/smil/transform/translate-gradient-1.svg @@ -0,0 +1,29 @@ +<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> + function doTest() { + setTimeAndSnapshot(101, false); + } + window.addEventListener("MozReftestInvalidate", doTest, false); + </script> + <defs> + <linearGradient id="grad" width="200%"> + <stop offset="0" stop-color="red"/> + <stop offset="1" stop-color="lime"/> + <stop offset="2" stop-color="lime"/> + <animateTransform attributeName="gradientTransform" type="translate" begin="100s" dur="1s" + from="0 0" to="-1 0" fill="freeze"/> + </linearGradient> + </defs> + + <!-- Test 1: Lime background covered by left hand side of gradient. + After the animation, the right hand lime side of the gradient + is visible, so no red is shown. --> + <rect x="0" width="50" height="100%" fill="lime" /> + <rect x="0" width="50" height="100%" fill="url(#grad)"/> + + <!-- Not a test: Paint the rest of the viewport, to match lime.svg --> + <rect x="50" height="100%" width="100%" fill="lime"/> +</svg> diff --git a/layout/reftests/svg/smil/transform/translate-pattern-1.svg b/layout/reftests/svg/smil/transform/translate-pattern-1.svg new file mode 100644 index 0000000000..b6b9983f03 --- /dev/null +++ b/layout/reftests/svg/smil/transform/translate-pattern-1.svg @@ -0,0 +1,28 @@ +<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> + function doTest() { + setTimeAndSnapshot(101, false); + } + window.addEventListener("MozReftestInvalidate", doTest, false); + </script> + <defs> + <pattern id="pat" width="200%" height="100%"> + <rect x="0" y="0" width="50" height="100%" fill="red"/> + <rect x="50" y="0" width="50" height="100%" fill="lime"/> + <animateTransform attributeName="patternTransform" type="translate" begin="100s" dur="1s" + from="0 0" to="-50 0" fill="freeze"/> + </pattern> + </defs> + + <!-- Test 1: Lime background covered by left hand side of pattern. + After the animation, the right hand lime side of the pattern + is visible, so no red is shown. --> + <rect x="0" width="50" height="100%" fill="lime" /> + <rect x="0" width="50" height="100%" fill="url(#pat)" /> + + <!-- Not a test: Paint the rest of the viewport, to match lime.svg --> + <rect x="50" height="100%" width="100%" fill="lime"/> +</svg> diff --git a/layout/reftests/svg/smil/transform/use-1.svg b/layout/reftests/svg/smil/transform/use-1.svg new file mode 100644 index 0000000000..eee0b33796 --- /dev/null +++ b/layout/reftests/svg/smil/transform/use-1.svg @@ -0,0 +1,27 @@ +<svg width="100%" xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait"> +<script> + function run() { + document.documentElement.setCurrentTime(30); + document.documentElement.removeAttribute('class'); + } + window.addEventListener("MozReftestInvalidate", run, false); +</script> +<defs> + <g id="shape"> + <rect height="100" width="100" fill="red"/> + <rect x="100" height="100" width="100" fill="lime"/> + </g> + + <pattern id="pattern" width="200" height="100" patternUnits="userSpaceOnUse"> + <use xlink:href="#shape"> + <animateTransform attributeName="transform" type="translate" calcMode="discrete" + dur="30s" from="0 0" to="-100 0" fill="freeze"/> + </use> + </pattern> +</defs> +<rect height="100%" width="100%" fill="lime"/> +<rect height="100%" width="100%" fill="url(#pattern)"/> +</svg> + |
