diff options
Diffstat (limited to 'layout/reftests/svg/smil/sort')
15 files changed, 342 insertions, 0 deletions
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> |
