diff options
Diffstat (limited to 'layout/reftests/svg/smil/style')
117 files changed, 2701 insertions, 0 deletions
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 000000000..acda8e0c5 --- /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 000000000..42f4b65b6 --- /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 000000000..8b480cd86 --- /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 000000000..f15b4a3c2 --- /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 000000000..553b95f12 --- /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 000000000..727107841 --- /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 000000000..970237093 --- /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 000000000..c44f16b7c --- /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 000000000..1c6d06895 --- /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 000000000..cd34fc58d --- /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 000000000..163c392e0 --- /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 000000000..b30fa4963 --- /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 000000000..cdd1dd1d5 --- /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 000000000..e2832b174 --- /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 000000000..fca9cc1d7 --- /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 000000000..61dc61da0 --- /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 000000000..a6fe27433 --- /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 000000000..86cc1fedd --- /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 000000000..6cb3da74f --- /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 000000000..f5f8114da --- /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 000000000..e1b968d35 --- /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 000000000..767407048 --- /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 000000000..65a681269 --- /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 000000000..73540fcc4 --- /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 000000000..9b1010426 --- /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 000000000..4c1e16c53 --- /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 000000000..1058125a6 --- /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 000000000..16fbbc062 --- /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 000000000..a2bdf8e8f --- /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 000000000..b2b8b689e --- /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 000000000..8a14da61e --- /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 000000000..d65f963b3 --- /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 000000000..df06aea2d --- /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 000000000..917bfef9f --- /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 000000000..fc3f4b042 --- /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 000000000..39e03b8db --- /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 000000000..2ec29db9b --- /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 000000000..f35de241c --- /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 000000000..110cbd6d8 --- /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 000000000..61ac49a8d --- /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 000000000..c30942bcf --- /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 000000000..0faec1156 --- /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 000000000..d7ff87e20 --- /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 000000000..bc089e43c --- /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-font-1-ref.svg b/layout/reftests/svg/smil/style/anim-css-font-1-ref.svg new file mode 100644 index 000000000..de028ec6b --- /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 000000000..d4aa76f34 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-font-1.svg @@ -0,0 +1,139 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + width="300px" height="400px" + class="reftest-wait" + onload="setTimeAndSnapshot(3.0, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + + <!-- '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 000000000..38afe61f0 --- /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 000000000..ea4d7c3e8 --- /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 000000000..8e4b6d586 --- /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 000000000..637c49e31 --- /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 000000000..2b4e18030 --- /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 000000000..7ced25e9a --- /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 000000000..0cf6c0cf3 --- /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 000000000..fc4ff3afd --- /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 000000000..56e51eeab --- /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 000000000..94c195c2f --- /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 000000000..7158f6464 --- /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 000000000..4747c2824 --- /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 000000000..3fe3ae0ce --- /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 000000000..44b407e18 --- /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 000000000..70199be78 --- /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 000000000..6edb8deff --- /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-strokedasharray-1-ref.svg b/layout/reftests/svg/smil/style/anim-css-strokedasharray-1-ref.svg new file mode 100644 index 000000000..d2cfe9b4b --- /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 000000000..9488f6546 --- /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 000000000..1472123ee --- /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 000000000..2b6a983f2 --- /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 000000000..0ae489d62 --- /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 000000000..e9e1cc2d6 --- /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 000000000..319905976 --- /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 000000000..f1a918ea7 --- /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 000000000..076e49adf --- /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 000000000..65d3bbc6e --- /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 000000000..2058d8366 --- /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 000000000..e37bc12cf --- /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 000000000..0c1afad42 --- /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 000000000..76e5c1e52 --- /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 000000000..3394572e7 --- /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 000000000..3e26f8973 --- /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 000000000..66c0f137b --- /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 000000000..e4bba5ae2 --- /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 000000000..7e7d03573 --- /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 000000000..5c538b65b --- /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 000000000..1f4e5d09a --- /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 000000000..0da954bb5 --- /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 000000000..37afdef68 --- /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 000000000..4dd6908d0 --- /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 000000000..3c0b237f0 --- /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 000000000..2e4631b7a --- /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 000000000..0c6ad1674 --- /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 000000000..07df6d5a1 --- /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 000000000..56ffff8d0 --- /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 000000000..7784dd6ca --- /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 000000000..d44e56b49 --- /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 000000000..9d00d2744 --- /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 000000000..17d5b7628 --- /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 000000000..c7dd235f2 --- /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 000000000..5121cb2bf --- /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 000000000..fc16e6515 --- /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 000000000..d26e7d704 --- /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 000000000..27a15b666 --- /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 000000000..4fb2e6190 --- /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 000000000..b1a21817d --- /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 000000000..2449345ec --- /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 000000000..2ddabf480 --- /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 000000000..9a55c55fc --- /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 000000000..43845db4f --- /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 000000000..96aa4e409 --- /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 000000000..f70c9617b --- /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 000000000..bfbb8e3fa --- /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-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 000000000..2583c2a7c --- /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 000000000..4a487ece7 --- /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 000000000..689fd045d --- /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 000000000..39f37ae6d --- /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 000000000..197ba26b6 --- /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 000000000..e5515db10 --- /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/reftest-stylo.list b/layout/reftests/svg/smil/style/reftest-stylo.list new file mode 100644 index 000000000..8edffb202 --- /dev/null +++ b/layout/reftests/svg/smil/style/reftest-stylo.list @@ -0,0 +1,159 @@ +# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing +# 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-color-1-by-ident-hex.svg +== anim-css-color-1-from-by-hex-hex.svg anim-css-color-1-from-by-hex-hex.svg +fuzzy-if(skiaContent,1,550) == anim-css-color-1-from-by-ident-hex.svg anim-css-color-1-from-by-ident-hex.svg +fuzzy-if(skiaContent,1,550) == anim-css-color-1-from-to-hex-hex.svg anim-css-color-1-from-to-hex-hex.svg +fuzzy-if(skiaContent,1,550) == anim-css-color-1-from-to-ident-ident.svg anim-css-color-1-from-to-ident-ident.svg +fuzzy-if(skiaContent,1,550) == anim-css-color-1-to-ident-hex.svg anim-css-color-1-to-ident-hex.svg +fuzzy-if(skiaContent,1,550) == anim-css-color-1-to-ident-ident.svg anim-css-color-1-to-ident-ident.svg + +# 'color' property, paced calcMode +== anim-css-color-2-paced-rgb.svg anim-css-color-2-paced-rgb.svg + +# 'color' property, animating *by* a named color +fuzzy-if(skiaContent,1,580) == anim-css-color-3-by-ident-ident.svg anim-css-color-3-by-ident-ident.svg +fuzzy-if(skiaContent,1,580) == anim-css-color-3-from-by-ident-ident.svg anim-css-color-3-from-by-ident-ident.svg +fuzzy-if(skiaContent,1,580) == anim-css-color-3-from-by-rgb-ident.svg anim-css-color-3-from-by-rgb-ident.svg + +# 'fill' property, from/to/by with named colors & hex values +fuzzy-if(skiaContent,1,550) == anim-css-fill-1-by-ident-hex.svg anim-css-fill-1-by-ident-hex.svg +fuzzy-if(skiaContent,1,550) == anim-css-fill-1-from-by-hex-hex.svg anim-css-fill-1-from-by-hex-hex.svg +fuzzy-if(skiaContent,1,550) == anim-css-fill-1-from-by-ident-hex.svg anim-css-fill-1-from-by-ident-hex.svg +fuzzy-if(skiaContent,1,550) == anim-css-fill-1-from-to-hex-hex.svg anim-css-fill-1-from-to-hex-hex.svg +fuzzy-if(skiaContent,1,550) == anim-css-fill-1-from-to-ident-ident.svg anim-css-fill-1-from-to-ident-ident.svg +fuzzy-if(skiaContent,1,550) == anim-css-fill-1-to-ident-hex.svg anim-css-fill-1-to-ident-hex.svg +fuzzy-if(skiaContent,1,550) == anim-css-fill-1-to-ident-ident.svg anim-css-fill-1-to-ident-ident.svg + +# 'fill' property, from/to/by, with 'currentColor' keyword +fuzzy-if(skiaContent,1,550) == anim-css-fill-1-by-ident-curcol.svg anim-css-fill-1-by-ident-curcol.svg +fuzzy-if(skiaContent,1,550) == anim-css-fill-1-from-by-curcol-hex.svg anim-css-fill-1-from-by-curcol-hex.svg +fuzzy-if(skiaContent,1,550) == anim-css-fill-1-from-by-hex-curcol.svg anim-css-fill-1-from-by-hex-curcol.svg +fuzzy-if(skiaContent,1,550) == anim-css-fill-1-from-to-curcol-hex.svg anim-css-fill-1-from-to-curcol-hex.svg +fuzzy-if(skiaContent,1,550) == anim-css-fill-1-from-to-hex-curcol.svg anim-css-fill-1-from-to-hex-curcol.svg +fuzzy-if(skiaContent,1,550) == anim-css-fill-1-to-ident-curcol.svg anim-css-fill-1-to-ident-curcol.svg + +# 'fill' property, paced calcMode +== anim-css-fill-2-paced-rgb.svg anim-css-fill-2-paced-rgb.svg + +# 'fill' property, animating *by* a named color +fuzzy-if(skiaContent,1,580) == anim-css-fill-3-by-ident-ident.svg anim-css-fill-3-by-ident-ident.svg +fuzzy-if(skiaContent,1,580) == anim-css-fill-3-from-by-ident-ident.svg anim-css-fill-3-from-by-ident-ident.svg +fuzzy-if(skiaContent,1,580) == anim-css-fill-3-from-by-rgb-ident.svg anim-css-fill-3-from-by-rgb-ident.svg + +# check handling of overflowing color values +# NOTE: The second test fails 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-by.svg +== anim-css-fill-overflow-1-from-by.svg anim-css-fill-overflow-1-from-by.svg + +# 'fill-opacity' property +fuzzy-if(skiaContent,1,885) == anim-css-fillopacity-1-by.svg anim-css-fillopacity-1-by.svg +fuzzy-if(skiaContent,1,210) == anim-css-fillopacity-1-from-by.svg anim-css-fillopacity-1-from-by.svg +== anim-css-fillopacity-1-from-to.svg anim-css-fillopacity-1-from-to.svg +fuzzy-if(skiaContent,1,550) == anim-css-fillopacity-1-to.svg anim-css-fillopacity-1-to.svg +== anim-css-fillopacity-2-paced.svg anim-css-fillopacity-2-paced.svg +== anim-css-fillopacity-3-clamp-big.svg anim-css-fillopacity-3-clamp-big.svg +# bug 501188 +fuzzy-if(skiaContent,1,365) == anim-css-fillopacity-3-clamp-small.svg anim-css-fillopacity-3-clamp-small.svg + +# 'font' shorthand property +== anim-css-font-1.svg anim-css-font-1.svg + +# 'font-size' property, from/by/to with pixel values only +== anim-css-fontsize-1-from-by-px-px.svg anim-css-fontsize-1-from-by-px-px.svg +== anim-css-fontsize-1-from-to-px-px.svg anim-css-fontsize-1-from-to-px-px.svg + +# 'font-size' property (accepts unitless values) +== anim-css-fontsize-1-from-to-no-no.svg anim-css-fontsize-1-from-to-no-no.svg +== anim-css-fontsize-1-from-to-no-px.svg anim-css-fontsize-1-from-to-no-px.svg +== anim-css-fontsize-1-from-to-px-no.svg anim-css-fontsize-1-from-to-px-no.svg + +# 'font-size' mapped attribute (accepts unitless values) +skip == anim-mapped-fontsize-1-from-to-no-no.svg anim-mapped-fontsize-1-from-to-no-no.svg +skip == anim-mapped-fontsize-1-from-to-no-px.svg anim-mapped-fontsize-1-from-to-no-px.svg +skip == anim-mapped-fontsize-1-from-to-px-no.svg anim-mapped-fontsize-1-from-to-px-no.svg + +# 'font-size' property, from/by/to with percent values +== anim-css-fontsize-1-from-by-pct-pct.svg anim-css-fontsize-1-from-by-pct-pct.svg +== anim-css-fontsize-1-from-by-pct-px.svg anim-css-fontsize-1-from-by-pct-px.svg +== anim-css-fontsize-1-from-by-px-pct.svg anim-css-fontsize-1-from-by-px-pct.svg +== anim-css-fontsize-1-from-to-pct-pct.svg anim-css-fontsize-1-from-to-pct-pct.svg +== anim-css-fontsize-1-from-to-pct-px.svg anim-css-fontsize-1-from-to-pct-px.svg +== anim-css-fontsize-1-from-to-px-pct.svg anim-css-fontsize-1-from-to-px-pct.svg + +# 'font-size' property, with negative addition +== anim-css-fontsize-2-from-by-px-px.svg anim-css-fontsize-2-from-by-px-px.svg +== anim-css-fontsize-2-from-by-px-em.svg anim-css-fontsize-2-from-by-px-em.svg +== anim-css-fontsize-2-from-by-em-em.svg anim-css-fontsize-2-from-by-em-em.svg + +# 'stroke-dasharray' property, from/to with pixel values only +== anim-css-strokedasharray-1.svg anim-css-strokedasharray-1.svg + +# 'stroke-width' property, from/by/to with pixel values only +== anim-css-strokewidth-1-by-px-px.svg anim-css-strokewidth-1-by-px-px.svg +== anim-css-strokewidth-1-from-by-px-px.svg anim-css-strokewidth-1-from-by-px-px.svg +== anim-css-strokewidth-1-from-to-px-px.svg anim-css-strokewidth-1-from-to-px-px.svg +== anim-css-strokewidth-1-to-px-px.svg anim-css-strokewidth-1-to-px-px.svg + +# 'stroke-width' property, from/by/to with unitless values only +== anim-css-strokewidth-1-by-no-no.svg anim-css-strokewidth-1-by-no-no.svg +== anim-css-strokewidth-1-from-by-no-no.svg anim-css-strokewidth-1-from-by-no-no.svg +== anim-css-strokewidth-1-from-to-no-no.svg anim-css-strokewidth-1-from-to-no-no.svg +== anim-css-strokewidth-1-to-no-no.svg anim-css-strokewidth-1-to-no-no.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 594933). +== anim-css-strokewidth-1-by-pct-pct.svg anim-css-strokewidth-1-by-pct-pct.svg +== anim-css-strokewidth-1-by-pct-px.svg anim-css-strokewidth-1-by-pct-px.svg +== anim-css-strokewidth-1-by-px-pct.svg anim-css-strokewidth-1-by-px-pct.svg +== anim-css-strokewidth-1-from-by-pct-pct.svg anim-css-strokewidth-1-from-by-pct-pct.svg +== anim-css-strokewidth-1-from-by-pct-px.svg anim-css-strokewidth-1-from-by-pct-px.svg +== anim-css-strokewidth-1-from-by-px-pct.svg anim-css-strokewidth-1-from-by-px-pct.svg +== anim-css-strokewidth-1-from-to-pct-pct.svg anim-css-strokewidth-1-from-to-pct-pct.svg +== anim-css-strokewidth-1-from-to-pct-px.svg anim-css-strokewidth-1-from-to-pct-px.svg +== anim-css-strokewidth-1-from-to-px-pct.svg anim-css-strokewidth-1-from-to-px-pct.svg +== anim-css-strokewidth-1-to-pct-pct.svg anim-css-strokewidth-1-to-pct-pct.svg +== anim-css-strokewidth-1-to-pct-px.svg anim-css-strokewidth-1-to-pct-px.svg +== anim-css-strokewidth-1-to-px-pct.svg anim-css-strokewidth-1-to-px-pct.svg + +# 'stroke-width' property, from/by/to with em values +== anim-css-strokewidth-1-by-px-em.svg anim-css-strokewidth-1-by-px-em.svg +== anim-css-strokewidth-1-by-em-em.svg anim-css-strokewidth-1-by-em-em.svg +== anim-css-strokewidth-1-by-em-px.svg anim-css-strokewidth-1-by-em-px.svg +== anim-css-strokewidth-1-from-by-px-em.svg anim-css-strokewidth-1-from-by-px-em.svg +== anim-css-strokewidth-1-from-by-em-em.svg anim-css-strokewidth-1-from-by-em-em.svg +== anim-css-strokewidth-1-from-by-em-px.svg anim-css-strokewidth-1-from-by-em-px.svg +== anim-css-strokewidth-1-from-to-px-em.svg anim-css-strokewidth-1-from-to-px-em.svg +== anim-css-strokewidth-1-from-to-em-em.svg anim-css-strokewidth-1-from-to-em-em.svg +== anim-css-strokewidth-1-from-to-em-px.svg anim-css-strokewidth-1-from-to-em-px.svg +== anim-css-strokewidth-1-to-px-em.svg anim-css-strokewidth-1-to-px-em.svg +== anim-css-strokewidth-1-to-em-em.svg anim-css-strokewidth-1-to-em-em.svg +== anim-css-strokewidth-1-to-em-px.svg anim-css-strokewidth-1-to-em-px.svg + +# 'stroke-width' property, values-array & paced calc-mode support +== anim-css-strokewidth-2-values-em-em.svg anim-css-strokewidth-2-values-em-em.svg +== anim-css-strokewidth-2-values-em-px.svg anim-css-strokewidth-2-values-em-px.svg +== anim-css-strokewidth-2-values-px-em.svg anim-css-strokewidth-2-values-px-em.svg +fuzzy-if(skiaContent,1,360) == anim-css-strokewidth-2-values-px-px.svg anim-css-strokewidth-2-values-px-px.svg +== anim-css-strokewidth-3-paced.svg anim-css-strokewidth-3-paced.svg + +# 'stroke-width' property, negative addition +== anim-css-strokewidth-4-from-by-px-px.svg anim-css-strokewidth-4-from-by-px-px.svg +== anim-css-strokewidth-4-from-by-px-em.svg anim-css-strokewidth-4-from-by-px-em.svg +== anim-css-strokewidth-4-from-by-em-em.svg anim-css-strokewidth-4-from-by-em-em.svg +fuzzy-if(skiaContent,1,170) == anim-css-strokewidth-4-from-by-no-no.svg anim-css-strokewidth-4-from-by-no-no.svg + +# check correct handling of "!important" values +== important-set-1.svg important-set-1.svg +== important-set-2.svg important-set-2.svg diff --git a/layout/reftests/svg/smil/style/reftest.list b/layout/reftests/svg/smil/style/reftest.list new file mode 100644 index 000000000..b56ba0f21 --- /dev/null +++ b/layout/reftests/svg/smil/style/reftest.list @@ -0,0 +1,157 @@ +# 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-if(skiaContent,1,550) == anim-css-color-1-from-by-ident-hex.svg anim-css-fill-1-ref.svg +fuzzy-if(skiaContent,1,550) == anim-css-color-1-from-to-hex-hex.svg anim-css-fill-1-ref.svg +fuzzy-if(skiaContent,1,550) == anim-css-color-1-from-to-ident-ident.svg anim-css-fill-1-ref.svg +fuzzy-if(skiaContent,1,550) == anim-css-color-1-to-ident-hex.svg anim-css-fill-1-ref.svg +fuzzy-if(skiaContent,1,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-if(skiaContent,1,580) == anim-css-color-3-by-ident-ident.svg anim-css-fill-3-ref.svg +fuzzy-if(skiaContent,1,580) == anim-css-color-3-from-by-ident-ident.svg anim-css-fill-3-ref.svg +fuzzy-if(skiaContent,1,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-if(skiaContent,1,550) == anim-css-fill-1-by-ident-hex.svg anim-css-fill-1-ref.svg +fuzzy-if(skiaContent,1,550) == anim-css-fill-1-from-by-hex-hex.svg anim-css-fill-1-ref.svg +fuzzy-if(skiaContent,1,550) == anim-css-fill-1-from-by-ident-hex.svg anim-css-fill-1-ref.svg +fuzzy-if(skiaContent,1,550) == anim-css-fill-1-from-to-hex-hex.svg anim-css-fill-1-ref.svg +fuzzy-if(skiaContent,1,550) == anim-css-fill-1-from-to-ident-ident.svg anim-css-fill-1-ref.svg +fuzzy-if(skiaContent,1,550) == anim-css-fill-1-to-ident-hex.svg anim-css-fill-1-ref.svg +fuzzy-if(skiaContent,1,550) == anim-css-fill-1-to-ident-ident.svg anim-css-fill-1-ref.svg + +# 'fill' property, from/to/by, with 'currentColor' keyword +fuzzy-if(skiaContent,1,550) == anim-css-fill-1-by-ident-curcol.svg anim-css-fill-1-ref.svg +fuzzy-if(skiaContent,1,550) == anim-css-fill-1-from-by-curcol-hex.svg anim-css-fill-1-ref.svg +fuzzy-if(skiaContent,1,550) == anim-css-fill-1-from-by-hex-curcol.svg anim-css-fill-1-ref.svg +fuzzy-if(skiaContent,1,550) == anim-css-fill-1-from-to-curcol-hex.svg anim-css-fill-1-ref.svg +fuzzy-if(skiaContent,1,550) == anim-css-fill-1-from-to-hex-curcol.svg anim-css-fill-1-ref.svg +fuzzy-if(skiaContent,1,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-if(skiaContent,1,580) == anim-css-fill-3-by-ident-ident.svg anim-css-fill-3-ref.svg +fuzzy-if(skiaContent,1,580) == anim-css-fill-3-from-by-ident-ident.svg anim-css-fill-3-ref.svg +fuzzy-if(skiaContent,1,580) == anim-css-fill-3-from-by-rgb-ident.svg anim-css-fill-3-ref.svg + +# check handling of overflowing color values +# NOTE: The second test fails 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 +fails == anim-css-fill-overflow-1-from-by.svg anim-css-fill-overflow-1-ref.svg + +# 'fill-opacity' property +fuzzy-if(skiaContent,1,885) == anim-css-fillopacity-1-by.svg anim-css-fillopacity-1-ref.svg +fuzzy-if(skiaContent,1,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-if(skiaContent,1,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-if(skiaContent,1,365) == anim-css-fillopacity-3-clamp-small.svg anim-css-fillopacity-3-ref.svg + +# 'font' shorthand property +== anim-css-font-1.svg anim-css-font-1-ref.svg + +# '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 + +# '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 594933). +== 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 +== anim-css-strokewidth-1-from-by-pct-pct.svg anim-css-strokewidth-1-ref.svg +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 +== anim-css-strokewidth-1-from-to-pct-pct.svg anim-css-strokewidth-1-ref.svg +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 +== anim-css-strokewidth-1-to-pct-pct.svg anim-css-strokewidth-1-ref.svg +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-if(skiaContent,1,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-if(skiaContent,1,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 |
