diff options
Diffstat (limited to 'layout/reftests/svg/smil/transform')
23 files changed, 1143 insertions, 0 deletions
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 000000000..1b5f9a5aa --- /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 000000000..20f035a3a --- /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 000000000..3f874cdd9 --- /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 000000000..c09c6601e --- /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 000000000..ac843a13e --- /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 000000000..2e8238b3c --- /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-stylo.list b/layout/reftests/svg/smil/transform/reftest-stylo.list new file mode 100644 index 000000000..bac1a7061 --- /dev/null +++ b/layout/reftests/svg/smil/transform/reftest-stylo.list @@ -0,0 +1,23 @@ +# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing +# Tests related to SVG Animation (using SMIL), focusing on the animateTransform +# element. + +fuzzy(111,1802) fuzzy-if(skiaContent,130,1000) == additive-1.svg additive-1.svg +# bug 981344, bug 1239766 +== animate-width-1.svg animate-width-1.svg +fuzzy-if(cocoaWidget,1,32) fuzzy-if(winWidget,15,4) == paced-1.svg paced-1.svg +# bug 981640 +fuzzy-if(skiaContent,1,220) == rotate-angle-1.svg rotate-angle-1.svg +== rotate-angle-2.svg rotate-angle-2.svg +fuzzy-if(skiaContent,1,130) == rotate-angle-3.svg rotate-angle-3.svg +fuzzy-if(skiaContent,1,110) == rotate-angle-4.svg rotate-angle-4.svg +fuzzy-if(skiaContent,1,130) == rotate-angle-5.svg rotate-angle-5.svg +fuzzy(12,27) fuzzy-if(skiaContent,1,180) == scale-1.svg scale-1.svg +# bug 981004 +== set-transform-1.svg set-transform-1.svg +fuzzy-if(winWidget,1,3) == skew-1.svg skew-1.svg +# bug 983671 +== translate-clipPath-1.svg translate-clipPath-1.svg +fails-if(OSX==1006&&!skiaContent) == translate-gradient-1.svg translate-gradient-1.svg +== translate-pattern-1.svg translate-pattern-1.svg +== use-1.svg use-1.svg diff --git a/layout/reftests/svg/smil/transform/reftest.list b/layout/reftests/svg/smil/transform/reftest.list new file mode 100644 index 000000000..184e708fa --- /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(111,1802) fuzzy-if(skiaContent,130,1000) == additive-1.svg additive-1-ref.svg # bug 981344, bug 1239766 +== animate-width-1.svg lime.svg +fuzzy-if(cocoaWidget,1,32) fuzzy-if(winWidget,15,30) fuzzy-if(gtkWidget,1,30) == paced-1.svg paced-1-ref.svg # bug 981640, Bug 1293550 +fuzzy-if(skiaContent,1,220) == rotate-angle-1.svg rotate-angle-ref.svg +== rotate-angle-2.svg rotate-angle-ref.svg +fuzzy-if(skiaContent,1,130) == rotate-angle-3.svg rotate-angle-ref.svg +fuzzy-if(skiaContent,1,110) == rotate-angle-4.svg rotate-angle-ref.svg +fuzzy-if(skiaContent,1,130) == rotate-angle-5.svg rotate-angle-ref.svg +fuzzy(12,27) fuzzy-if(skiaContent,1,180) fuzzy-if(Android,16,3) == scale-1.svg scale-1-ref.svg # bug 981004 +== set-transform-1.svg lime.svg +fuzzy-if(winWidget||gtkWidget||OSX,1,27) fuzzy-if(Android&&skiaContent,1,20) == skew-1.svg skew-1-ref.svg # bug 983671, Bug 1260629 +== translate-clipPath-1.svg lime.svg +fails-if(OSX==1006&&!skiaContent) == 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 000000000..75ace79c2 --- /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 000000000..8d75991aa --- /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 000000000..c24a2a5b5 --- /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 000000000..48a9e8b92 --- /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 000000000..354b0f7e0 --- /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 000000000..e69ce351e --- /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 000000000..58a3c117f --- /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 000000000..7393c35e1 --- /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 000000000..f698cbaa8 --- /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 000000000..10c7ca8a3 --- /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 000000000..603c7f402 --- /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 000000000..80291076c --- /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 000000000..240777b14 --- /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 000000000..b6b9983f0 --- /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 000000000..eee0b3379 --- /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> + |
