Animation Elements and Attributes for timing
In the chapter 'Animatable Attributes and Properties' we used simple
animation for any attributes, now we animate more or less simple shapes
in a more sophisticated way and with special attributes for animation.
Timing
Timing Accuracy and Model
First we can check the timing itself. Normally for timing the
user-agent should use the local oscillator of the computer,
the uncertainty of these oscillators should be below one second
per day (1/86400). This should be accurate enough for
many applications. But if the user-agent has another source
for timing or one thinks, it does something nasty, the following
tests may be useful. If it is once known, that the timing of a
simple animation is correct, it is easy to compare this to other
animations directly.
It is important to know something about measurement errors
and the own reaction time, to evaluate the result of the
timing test offered here.
e2006-01-29-01: §P
simple test of the timing:
A simple from to animation from far away left to far away right
for a circle starts after 3s, the duration dur is given with an
external parameter in seconds in the URI
(the value is written bottom left,
default is 100s, use another one, if you like).
The scale shows the deviation from the dur - testers have
to compare this to their local oscillator.
Uncertainty of this measurement can be estimated to be
about 1s, therefore a test with a dur of 100s is ok within
the uncertainty of measurement, if the center of the
circle is in the given 1% range.
With magnification the scale around zero goes down to
1/10000, therefore it should be possible to determine
deviations around 1/50000, typical uncertainties of
a local oscillator should be below 1/100000.
Uncertainties
in this range are not significant anymore, if the tester
uses his (radio controlled) wristwatch to compare with the
oscillator of his computer, which should be used by the user-agent.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | ok | - |
| WebKit 528.16 | fail | zoom corrupts display |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2006-01-29-02: §PI
test of the timing:
A simple from to animation from far away left to far away right
for a circle starts with a click on the green rectangle and stops with
a click on the magenta ellipse, the duration dur is given with an
external parameter in seconds in the URI
(the value is written bottom left, default is 100s,
use another one, if you like). To test almost any time within
the linear animation another parameter frac can be used,
this is larger than 0 and smaller than 1, default is 0.5.
The scale shows the deviation from the dur - testers have
to compare this to their local oscillator.
Uncertainty of this measurement can be estimated to be
about 0.2s, therefore a test with a dur of 100s is ok within
the uncertainty of measurement, if the center of the
circle is in the given 0.2% range.
With magnification the scale around zero goes down to
1/50000, therefore it should be possible to determine
deviations around 1/200000, typical uncertainties of
a local oscillator should be below 1/100000. Uncertainties
in this range are not significant anymore, if the tester
uses his (radio controlled) wristwatch to compare with the
oscillator of his computer, which should be used by the
user-agent.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | not testable, ignores start and stop interaction |
| WebKit 528.16 | fail | circle vanishes after stop |
| Adobe | ok | - |
| Squiggle 1.7 | fail | stopped value not frozen |
| Opera8.02/50 | fail | not testable, crashes with stop (and ignores it) |
| Opera9tp1 | fail | stop ignored |
| Opera9tp2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Opera9 beta1/2 | fail | not testable, start ignored |
| Gecko 2.0/ 8.0/ 60.0 | ok | - |
| Gecko 12.0/ 24.0/ 36.0/ 48.0 | fail | no interactivity |
e2007-05-08-01: §M(1)P
timing and accuracy 1:
timing and accuracy 2:
timing and accuracy 3:
timing and accuracy 4:
timing and accuracy 5:
A simple animation is used to test accurate rendering and timing.
SVG tiny requires a rendering accuracy within one device pixel and
a number range between -32767.9999 and +32767.9999 for the
data type number.
A simple from-to animation of cx of a blue circle with a duration of
32000ms (32s) is used with a from value of 0 and a to value of 32000.
The animation ends with an end attribute with a value in this
range. With a transform attribute for a g element the end value is
centered in the document.
Only the frozen final value is target of the test, it is not expected
to see a high precision continuous animation.
The correct frozen position is indicated with a dark red circle,
The fill of the dark red circle is set to red at the end time.
For an additional circle of the same group the fill is set from dark gray
to light red, covering the red circle, if cx and transform is correct, while
this is covered by the blue circle.
This means, all circles have to be rendered within an
accuracy within one device pixel. The animated blue circle has to
cover the red circles within an accuracy of less than one pixel. If
more than such a residual of red is visible or the circles are not
rendered as circles, an error is occurred.
To get the highest accuracy for the test, the size of the document
and therefore the viewport in the viewer has to be as large as
possible.
The test has three optional GET-parameters, one is the radius of
the circles (rad) within the range from 0.0001 to 10 and the
end position and time of the animation (pos) within the
range from 1 to 32000 pixel respectively ms. The fraction of
rad and pos cannot have more than 4 digits.
The third parameter is a scaling correction factor (sc between
0.0001 and 3). This is useful just to increase accuracy (sc above 1)
or to decrease accuracy (sc below 1) only to analyse errors
(larger deviations), if the blue circle is not displayed in the viewport
when the light blue circle turned red, respecitively the gray red.
timing and accuracy 6:
Similar test as the previous, but now it moves in x-direction with the parameter posx and in y-direction it starts with
a large value and decreases with the value posy.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | end ignored |
| WebKit 528.16 | fail | accuracy and display problem |
| Adobe | fail | accuracy problem for rendering and timing |
| Squiggle 1.7 | fail | accuracy problem for rendering and timing |
| Opera8.02/50/ 9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | accuracy problem for rendering and timing |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | accuracy and display problem |
e2007-05-17-01: §M(1)P
timing and accuracy 1:
timing and accuracy 2:
timing and accuracy 3:
timing and accuracy 4:
timing and accuracy 5:
timing and accuracy 6:
Two simple animateTransform are used to test accurate rendering and timing.
SVG tiny requires a rendering accuracy within one device pixel and
a number range between -32767.9999 and +32767.9999 for the
data type number.
A blue circle is far outside of the rendered area but inside the allowed
number range (distance 32000). This is rotated with a duration of
32767.9999ms starting with -32767.9999 degree and ending with a
positive value either of random choice or given with the GET-parameter 'phi'.
A parent g element is rotated in the opposite direction and a simple values
animateTransform of the translation type is applied to another parent g
element in such a way, that the circle is centered always at the rotation
center.
Therefore the circle does not move and covers always an
underlying red stroked circle completely within an accuracy
below one device pixel.
If more than such a residual of red is visible or the circles are not
rendered as circles, an error is occurred.
To get the highest accuracy for the test, the size of the document
and therefore the viewport in the viewer has to be as large as
possible.
The blue circle is switched to gray if the test animation is finished.
The test has five optional GET-parameters, one is the radius of
the circles (rad) within the range from 0.0001 to 1000 and the
end angle of the animation (phi) within the
range from -32400 to 32400 degree. The fraction of
rad and phi cannot have more than 4 digits.
The third parameter is a scaling factor (sc integer
between 2 and 20) for the viewBox relative to the radius of the circle.
This is useful only to analyse errors
(larger deviations), if the blue circle is not displayed in the viewport.
The last two parameters cx and cy are the position of the circle,
both in the range -32710 to -32710 with not more than 4 digits for
the fractional part.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | no display of blue circle |
| Adobe | fail | accuracy problem for rendering and timing |
| Squiggle 1.7 | fail | no animation, wrong error messages |
| Opera8.02/50/ 9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | accuracy problem for rendering and for some versions for timing too |
| Gecko 2.0/ 8.0 | fail | accuracy problem for timing |
| Gecko 12.0 | ok | - |
| Gecko 24.0/ 36.0/ 48.0/ 60.0 | fail | display problem |
e2007-05-17-02: §M(1)P
timing and accuracy 1:
timing and accuracy 2:
timing and accuracy 3:
timing and accuracy 4:
timing and accuracy 5:
animate for path data, animateTransform translate and animateMotion
are used to test accurate rendering and timing.
SVG tiny requires a rendering accuracy within one device pixel and
a number range between -32767.9999 and +32767.9999 for the
data type number.
A blue stroked triangle with stroke-linejoin="round" is animated with a duration of
32767.9999ms using animate for path data, animateTransform and animateMotion
in such a way, that in the superposition of all three animations no visible change
gets visible.
Therefore the triangle does not move and covers always an
underlying red stroked triangle completely within an accuracy
below one device pixel.
If more than such a residual of red is visible, an error is occurred.
To get the highest accuracy for the test, the size of the document
and therefore the viewport in the viewer has to be as large as
possible.
The blue triangle is switched to gray if the test animation is finished.
The test has two optional GET-parameters, one is the stroke-width of
the triangles (width) within the range from 0.0001 to 500.
The fraction of width cannot have more than 4 digits.
The second parameter is a scaling factor for the viewBox (sc integer
between 1 and 50) for the viewBox relative to the width.
This is useful only to analyse errors
(larger deviations), if the blue triangle is not displayed in the viewport.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation, incomplete rendering |
| KSVG1 | fail | no animation, incomplete rendering |
| WebKit 528.16 | fail | positioning and accuracy problem |
| Adobe | fail | accuracy problem for timing |
| Squiggle 1.7 | fail | no animation, wrong error messages |
| Opera8.02/50 | fail | crash after a few seconds |
| Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | accuracy problem for rendering and timing |
| Gecko 2.0/ 8.0/ 12.0 | fail | accuracy problem for timing |
| Gecko 24.0/ 36.0/ 48.0/ 60.0 | fail | accuracy and display problem |
SVG and SMIL have a well defined timing interval
model. Time intervals are always in such a way defined,
that the initial given point in time belongs to the interval and
the final given point does not belong to the interval.
e2007-01-21-11: §M(1)P
time interval with begin and end:
In this example with
values="100; 900"
keyTimes="0;0.5"
dur="10s"
begin="0s"
end="5s"
fill="freeze"
begin and end define a time interval, this means,
the interval starts with included 0s and excluded 5s.
Therefore the final presentation value is 100 and not 900.
Note, that the keyTimes are the same as calculated
automatically without using keyTimes.
The cx of a circle is animated discrete from left to right with
some values and keyTimes and a duration of 10s, but an
end already at 5s.
This animation is superposed by a simple from to
animation from top to bottom. The visible effect is
a motion along the given gray path.
If something red becomes visible, an error is
occurred.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | values ignored |
| WebKit 528.16 | fail | wrong frozen value |
| Adobe | ok | - |
| Squiggle 1.7 | fail | wrong frozen value |
| Opera8.02/50/ 9tp2/ beta1/2/ 9.00/9.10 | fail | wrong timing without keyTimes |
| Opera9tp1/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | wrong frozen value |
e2007-01-21-12: §M(1)P
time interval with repeatDur:
In this example with
values="100; 900"
keyTimes="0;0.5"
dur="10s"
repeatDur="5s"
fill="freeze"
because repeatDur is 5s, the final value is
100 and not 900. The implicite given begin at 0s
and the repeatDur give a time interval for the active
duration with included begin and open end.
Note, that the keyTimes are the same as calculated
automatically without using keyTimes.
The cx of a circle is animated discrete from left to right with
some values and keyTimes and a duration of 10s, but a
repeatDur from only 5s.
This animation is superposed by a simple from to
animation from top to bottom. The visible effect is
a motion along the given gray path.
If something red becomes visible, an error is occurred.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | values ignored |
| WebKit 528.16 | fail | wrong frozen value |
| Adobe | ok | - |
| Squiggle 1.7 | fail | wrong frozen value |
| Opera8.02/50/ 9tp2/ beta1/2/ 9.00/9.10 | fail | wrong timing without keyTimes |
| Opera9tp1/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | wrong frozen value |
e2007-01-21-13: §M(1)P
time interval with max:
In this example with
values="100; 900"
keyTimes="0;0.5"
dur="10s"
max="5s"
fill="freeze"
because max is 5s, the final value is
100 and not 900. The implicite given begin at 0s
and the max give a time interval for the active
duration with included begin and open end.
Note, that the keyTimes are the same as calculated
automatically without using keyTimes.
The cx of a circle is animated discrete from left to right with
some values and keyTimes and a duration of 10s, but a
max of only 5s.
This animation is superposed by a simple from to
animation from top to bottom. The visible effect is
a motion along the given gray path.
If something red becomes visible, an error is occurred.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | values ignored |
| WebKit 528.16 | fail | wrong frozen value |
| Adobe | fail | max ignored |
| Squiggle 1.7 | fail | wrong frozen value |
| Opera8.02/50/ 9tp1/2/ beta1/2/ 9.00/9.10 | fail | wrong timing (only without keyTimes for tp2 and later) |
| Opera9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | wrong frozen value |
e2007-01-21-14: §M(1)P
time interval, end and animateMotion:
In this example with animateMotion and
path="M100 0L500 0M900 0 L500 0"
dur="10s"
end="5s"
fill="freeze"
because end is 5s, the final value is
500 0 and not 900 0. The implicit given begin at 0s
and the end give a time interval for the active
duration with included begin and open end.
The cx of a circle is animated from left to right with
animateMotion and a duration of 10s, but an
end at 5s.
This animation is superposed by a simple from to
animation from top to bottom. The visible effect is
a motion along the given gray path.
If something red becomes visible, an is error occurred.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no animateMotion |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | |
| Opera9tp1 | fail | animateMotion confused |
| Gecko 2.0 | fail | animateMotion confused |
| Gecko 8.0/ 12.0/ 24.0 | ok | - |
| Gecko 36.0/ 48.0/ 60.0 | fail | wrong frozen value |
e2007-01-21-15: §M(1)P
time interval, repeatCount and animateMotion:
In this example with animateMotion and
path="M100 0L500 0M900 0 L500 0"
dur="10s"
repeatCount="0.5"
fill="freeze"
because repeatCount is 0.5, the final value is
500 0 and not 900 0. The implicite given begin at 0s
and the repeatCount give a time interval for the active
duration with included begin and open end.
The cx of a circle is animated from left to right with
animateMotion and a duration of 10s, but an
repeatCount of 0.5.
This animation is superposed by a simple from to
animation from top to bottom. The visible effect is
a motion along the given gray path.
If something red becomes visible, an is error occurred.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no animateMotion |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | |
| Opera9tp1 | fail | animateMotion confused |
| Gecko 2.0 | fail | animateMotion confused |
| Gecko 8.0/ 12.0/ 24.0 | ok | - |
| Gecko 36.0/ 48.0/ 60.0 | fail | wrong frozen value |
e2007-01-21-16: §M(1)P
time interval, max and animateMotion:
In this example with animateMotion and
path="M100 0L500 0M900 0 L500 0"
dur="10s"
end="7.5s"
max="5s"
fill="freeze"
because max is 5s, the final value is
500 0 and not 900 0 or 700 0.
The implicite given begin at 0s
and the max give a time interval for the active
duration with included begin and open end.
The cx of a circle is animated from left to right with
animateMotion and a duration of 10s, an end at 7.5s,
but a max at 5s.
This animation is superposed by a simple from to
animation from top to bottom. The visible effect is
a motion along the given gray path.
If something red becomes visible, an is error occurred.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no animateMotion |
| WebKit 528.16 | ok | - |
| Adobe | fail | max ignored |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | fail | max ignored |
| Opera9tp1 | fail | animateMotion confused |
| Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | |
| Gecko 2.0 | fail | animateMotion confused |
| Gecko 8.0/ 12.0/ 24.0 | ok | - |
| Gecko 36.0/ 48.0/ 60.0 | fail | wrong frozen value |
e2007-02-19-01: §M(1)P
time interval model and keyTimes:
The blue testcase has for a calcMode discrete
the keyTimes 0;0.5;1 with the corresponding
values 100; 500; 900. Because fill is remove,
the last value is never applied.
The animation is superposed with the simple
top-down animation. This results in a motion
along the gray path.
If something red gets visible, an error is
occurred.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no or wrong animation |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | fail | wrong final value |
| Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2007-02-19-02: §M(1)P
time interval model and keyTimes:
The blue testcase has for a calcMode discrete
the keyTimes 0;0.5;1 for a duration of 10s
with the corresponding values 100; 500; 900
and fill freeze.
According to the SMIL time interval modell
this results in those intervals including the begin
and excluding the end:
from 0s to 5s, from 5s to 10s and from 10s to 10s.
The last interval is an empty or bad interval.
Because the active duration is the same as the
simple duration (applies too for the simple duration
multiplied with a positive integer), a special rule
for fill freeze has to be applied (see SMIL2.0/2.1 rules
for fill).
The last value in the values list (respectively the to
value) hat to be used as the frozen value.
Therefore the last value 900 has to be used as the
frozen value.
The animation is superposed with the simple
top-down animation. This results in a motion
along the gray path.
If something red gets visible, an error is
occurred.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no or wrong animation |
| WebKit 528.16 | fail | wrong frozen value |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | fail | wrong final value for red comparison |
| Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2007-02-19-03: §M(1)P
time interval model and keyTimes:
The blue testcase has for a calcMode discrete
the keyTimes 0;0.5;1 for a duration of 4s
with the corresponding values 20; 120; 220
and a repeatCount of 3 with additive and
cumulative behaviour and fill freeze.
According to the SMIL time interval model
this results in those intervals including the begin
and excluding the end:
from 0s to 2s, from 2s to 4s, from 4s to 6s, from 6s to 8s,
from 8s to 10s, from 10s to 12s and from 12s to 12s.
The last interval of the simple duration is an empty or
bad interval.
Because the active duration is three times the
simple duration, a special rule for fill freeze has to be
applied (see SMIL animation recommendation and
SMIL2.0/2.1 rules for fill).
For all turns the value 220 corresponding to
the keyTimes value 1 is not displayed itself but used in
the cumulative animation as final value to be added
to the next turn.
The last value in the values list (respectively the to
value) has to be used as the frozen value. Because
the animation is repeated, this value is cumulated too.
Therefore the last value 220 * 3 +100 (additive!) = 760
has to be used as the frozen value.
The animation is superposed with the simple
top-down animation. This results in a motion
along the gray path.
If something red gets visible, an error is
occurred.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no or wrong animation |
| WebKit 528.16 | fail | wrong timing, wrong frozen value |
| Adobe | fail | wrong final value |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | fail | wrong timing |
| Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2007-02-19-04: §M(1)P
time interval model and keyTimes:
The blue testcase has for a calcMode discrete
the keyTimes 0;0.5;1 for a duration of 4s
with the corresponding values 0; 100; 200
and a repeatCount of 3 with additive and
cumulative behaviour and fill freeze and
a min of 14s.
According to the SMIL time interval model
this results in those intervals including the begin
and excluding the end:
from 0s to 2s, from 2s to 4s, from 4s to 6s, from 6s to 8s,
from 8s to 10s, from 10s to 12s, from 12s to 12s
and from 0 to 13s for time interval related to the min attribute.
The interval from 12 to 12 is an empty or bad interval.
Because the active duration is three times the
simple duration, a special rule for fill freeze has to be
applied (see SMIL animation recommendation and
SMIL2.0/2.1 rules for fill).
For all turns the value 200 corresponding to
the keyTimes value 1 is not displayed itself but used in
the cumulative animation as final value to be added
to the next turn.
Because the active duration is determined with the
min attribute in this case and the simple duration of
4s cannot be multiplied with a positive integer to get
the active duration of 14s, the last value 200 for the
keyTimes value 1 is not applied.
Therefore the last applied cumulative value
200 * 2 +100 +100 (additive!) = 600
has to be used as the frozen value.
The animation is superposed with the simple
top-down animation. This results in a motion
along the gray path.
If something red gets visible, an error is
occurred.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no or wrong animation |
| WebKit 528.16 | fail | wrong timing, wrong frozen value |
| Adobe | fail | wrong frozen value |
| Squiggle 1.7 | fail | confused close to the end, but frozen value ok again |
| Opera8.02/50 | fail | wrong timing, wrong frozen value |
| Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | wrong frozen value |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | wrong frozen value |
e2008-03-09-01: §M(1)P
time interval model, keyTimes and endEvent:
The discrete animation of cy of a circle with a duration of
10s ends with an endEvent of another not displayed animation
6s after the begin exactly on a keyTimes value.
The SMIL timing model is end exclusive, and the endEvent itself
is the moment in time where the interval ends, therefore the
value does not switch anymore at this time similar to the
behaviour with an offset value for end.
An animation of the cx gives the timing, the resulting
motion is indicated by a grey path covering the red fill
of the circle. If the circle does not move along the path
or the red center gets visible, an error is occurred.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no values animation |
| WebKit 528.16 | fail | endEvent ignored |
| Adobe | fail | endEvent ignored |
| Squiggle 1.7 | fail | wrong timing, wrong frozen value |
| Opera8.02/50 | fail | no cy animation |
| Opera9tp1 | fail | endEvent ignored, wrong frozen value |
| Opera9tp2 | fail | browser frozen/crash |
| Opera9beta1/2/ 9.00/9.10/ 9.50 alpha | fail | endEvent ignored,
wrong frozen value |
| Opera9.50 beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | wrong timing, wrong frozen value |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | wrong frozen value |
e2008-03-10-01: §P(I)
pathLength of a cubic path and timinig:
Testing accuracy of path interpretation using stroke-dasharray, stroke-dashoffset and
animateMotion.
A symmetrical cubic path stroked in dark blue is used for the test.
Magenta is the painted curve fraction of 0.5 of the complete path.
The end point of the painted fraction is painted yellow - this is the
test point at the half path.
Centered black concentrical circles test the accuracy of animateMotion
stopped with different methods at the test point at the half path (after 1s of animation).
A dark blue scale with yellow markers is aligned in such a way, that
the yellow markers are between the different circles, respectively mark
the positions of the stroke-dasharray fractional path.
Click the dark blue path to see the complete path, click the magenta
path to see details around the test point.
The required accuracy of positioning has to be within one device pixel.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation, wrong display |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | many display and timing problems |
| Adobe | fail | missing min, max, keyPoints, minor accuracy problem |
| Squiggle 1.7 | fail | error messages, incomplete animation |
| Opera8.02/50 | fail | no animation |
| Opera9tp1 | fail | incomplete, no zoom |
| Opera9tp2 | fail | no discrete keyPoints |
| Opera9beta1/2 | fail | incomplete, no interactivity |
| Opera9.00/9.10 | fail | no discrete keyPoints |
| Opera9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | accuracy not sufficient, no discrete keyPoints |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | missing min |
e2008-03-10-02: §P
pathLength of a random cubic path and timinig:
Testing accuracy of path interpretation using stroke-dasharray, stroke-dashoffset and
animateMotion.
With the GET parameter 'area' the area of viewBox size is determined, default is 1000.
Possible values are between 50 and 10000.
The painted fraction of the random path can be determined with the GET parameter
'fraction', default is determined randomly, possible values are between 0 and 1.
A random cubic path stroked in dark blue is used for the test.
Magenta is the painted curve fraction of the complete path.
The end point of the painted fraction is painted yellow - this is the
test point at the related length of the path fraction.
Centered black concentrical circles test the accuracy of animateMotion
stopped with different methods at the test point (after 1s of animation).
A dark blue scale with yellow markers is aligned in such a way, that
the yellow markers are between the different circles, respectively mark
the positions of the stroke-dasharray fractional path (exception: a large
curvature at the test point).
The required accuracy of positioning has to be within one device pixel.
After 5s the test point with the concentrical circles is magnified and
centered.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation, wrong display |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | many display and timing problems |
| Adobe | fail | missing min, max, keyPoints, accuracy problem |
| Squiggle 1.7 | fail | error messages, incomplete animation |
| Opera8.02/50 | fail | no animation |
| Opera9tp1 | fail | incomplete, no zoom |
| Opera9tp2/ beta1/2/ 9.00/9.10 | fail | no discrete keyPoints |
| Opera9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | accuracy not sufficient, no discrete keyPoints |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | missing min, minor accuracy problem |
Test results for Accuracy and Model
| user-agent | SVG tiny 1.1 | SVG 1.1 |
| user-agent | SVG tiny 1.1 | SVG 1.1 |
| Amaya9.51/ 11.3.1 | 0/18 | 0/18 |
| KSVG1 | 1/18 | 1/18 |
| WebKit 528.16 | 4/18 | 4/18 |
| Adobe | 8/18 | 8/18 |
| Squiggle 1.7 | 7/18 | 7/18 |
| Opera8.02/50 | 3/18 | 3/18 |
| Opera9tp1 | 6/18 | 6/18 |
| Opera9tp2/ 9.00/9.10 | 8/18 | 8/18 |
| Opera9 beta1/2 | 7/18 | 7/18 |
| Opera9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | 11/18 | 11/18 |
| Gecko 2.0 | 5/18 | 5/18 |
| Gecko 8.0/ 12.0 | 8/18 | 8/18 |
| Gecko 24.0 | 7/18 | 7/18 |
| Gecko 36.0/ 48.0 | 4/18 | 4/18 |
| Gecko 60.0 | 5/18 | 5/18 |
dur
e2005-09-03-01: §Q
Types of dur values:
For five circles the colour is animated from yellow to
blue within 39.6s independently.
The dur values are:
39.6s, 39600ms, 39.6, 0.66min, 0.011h
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51 | fail | a fast animation before the 39.6s? |
| Amaya11.3.1 | fail | not frozen |
| KSVG1 | fail | instable, animation not reproducible |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | no animateColor |
The dur values in this example are SVG1.1, but in parts not SVG tiny -
e2005-09-03-02: §Q
Types of dur values:
For five circles the colour is animated from yellow to
blue within 61.5s independently.
The dur values are:
00:01:01.5, 01:01.5, 61.5, 61.5s, 1.025min
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | a fast animation before the 61.5s? |
| KSVG1 | fail | instable, animation not reproducible |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | no animateColor |
e2005-09-03-03: §M(1)Q
indefinite dur:
The dur of an animation is set to indefinite.
The colour of the circle will not change.
Everything but a blue circle is wrong.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ok | - |
| KSVG1 | ok | - |
| WebKit 528.16 | fail | confused by end? |
| Adobe | fail | completely confused - turns to black, but the only given colours are yellow and blue |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-09-03-04: §Q
indefinite dur and begin:
The dur of a set animation is set to indefinite.
The colour of the circle will change after 3s because
of the value of the begin attribute.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ok | - |
| KSVG1 | ok | - |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-09-03-05: §Q
dur and begin:
The dur of a set animation is set to 3s.
The colour of the circle will change for 3s after 3s to blue because
of the value of the begin attribute and the fill attribute.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | Does not switch back to yellow after a duration of 3s. |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
Test results for dur
| user-agent | SVG tiny 1.1 | SVG 1.1 |
| user-agent | SVG tiny 1.1 | SVG 1.1 |
| Amaya9.51/ 11.3.1 | 2/4 | 2/5 |
| KSVG1 | 2/4 | 2/5 |
| WebKit 528.16 | 3/4 | 4/5 |
| Adobe | 3/4 | 4/5 |
| Squiggle 1.7 | 4/4 | 5/5 |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | 4/4 | 5/5 |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | 3/4 | 3/5 |
begin
offset-value
e2005-09-03-07: §Q
offset value of begin:
The begin of an animation is set to 5s, the dur
value is 10s.
The animation of the colour of a circle goes
from black to white.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ok | - |
| KSVG1 | ok | - |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | no animateColor |
e2005-09-03-08: §Q
semicolon separated list of begin values:
The begin is a semicolon separated list in
steps of 3s from 0s to 15s for a 3s animation
of the colour of a circle.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | just one begin, the others are ignored. |
| KSVG1 | fail | No animation. |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | fail | just one begin, the others are ignored. |
| Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | no animateColor |
e2005-09-03-09: §M(2)P
negative value of begin:
The begin of an animation is set to -5s, the dur
value is 10s.
The animation of the color of a circle goes
from dark blue to light blue, but because of the negative
start value the visible effect starts with gray blue.
stroke shows the same animateColor.
If something red becomes visible, an error
occurred.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51 | fail | wrong animation |
| Amaya11.3.1 | (ok) | minor problems at the beginning |
| KSVG1 | fail | Starts with black, not with gray. |
| WebKit 528.16 | ok | - |
| Adobe | fail | No animation. |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | no animateColor |
Test results for begin offset-value
| user-agent | SVG tiny 1.1 | SVG 1.1 |
| user-agent | SVG tiny 1.1 | SVG 1.1 |
| Amaya9.51 | 1/3 | 1/3 |
| Amaya11.3.1 | 2/3 | 2/3 |
| KSVG1 | 1/3 | 1/3 |
| WebKit 528.16 | 3/3 | 3/3 |
| Adobe | 2/3 | 2/3 |
| Squiggle 1.7 | 3/3 | 3/3 |
| Opera8.02/50 | 2/3 | 2/3 |
| Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | 3/3 | 3/3 |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | 0/3 | 0/3 |
syncbase-value
e2005-09-03-11: §M(3)P
syncbase-value of begin:
The colour animation of the bottom circle starts, when
the animation of the top ends. The colour animation of
the top circle animation starts at 0s. All dur values are 3s.
The stroke has the same animateColor with a simple offset for begin.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | wrong animation |
| KSVG1 | fail | attribute ignored |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | no animateColor |
e2005-09-03-12: §M(3)P
syncbase-value of begin:
syncbase-values are tested for the begin attribute.
The colour animation of the right circle starts, when
the animation of the left ends. The colour animation of
the left circle animation starts at 0s. The animation of the bottom circle
starts, when the animation of the right circle begins.
All dur values are 3s.
The stroke have the same animateColor with simple offsets for begin.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | wrong animation |
| KSVG1 | fail | attribute ignored |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | no animateColor |
e2005-09-03-13: §M(3)P
syncbase-value of begin + clock value:
The colour animation of the bottom circle starts 3s after
the animation of the top ends. The colour animation of
the top circle animation starts at 0s. All dur values are 3s.
The stroke has the same animateColor with a simple offset for begin.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | wrong animation |
| KSVG1 | fail | attribute ignored |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | no animateColor |
e2005-09-03-14: §M(3)P
syncbase-value of begin - clock value:
syncbase-values are tested for the begin attribute.
The colour animation of the bottom circle starts 2s before
the animation of the top ends. The colour animation of
the top circle animation starts at 0s. All dur values are 5s.
The strokes have the same animateColor with simple offsets for begin.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | wrong animation |
| KSVG1 | fail | attribute ignored |
| WebKit 528.16 | ok | - |
| Adobe | fail | bottom circle is not animated |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | fail | confused - wild colour oscillations of the bottom circle |
| Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | no animateColor |
e2005-09-03-15: §M(3)P
syncbase-value of begin - clock value:
syncbase-values are tested for the begin attribute.
The colour animation of the right circle starts, when
the animation of the left ends. The colour animation of
the left circle animation starts at 0s.
The animation of the bottom circles
starts 2s before the animation of the right circle begins.
All dur values are 5s.
The strokes have the same animateColor with simple offsets for begin.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | wrong animation |
| KSVG1 | fail | attribute ignored |
| WebKit 528.16 | ok | - |
| Adobe | fail | bottom circle is not animated |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | fail | confused - wild colour oscillations of the bottom circle |
| Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | no animateColor |
e2005-09-03-16: §M(3)P
syncbase-value of begin:
syncbase-values are tested for the begin attribute.
The colour animation of the top circles start, when
the animation of the bottom ends. The colour animation of
the bottom circle animation starts at 0s.
The animation of the bottom circles starts
two animations.
All dur values are 5s.
The strokes have the same animateColor with simple offsets for begin.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | wrong animation |
| KSVG1 | fail | attribute ignored |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | no animateColor |
e2005-09-03-17: §M(3)P
syncbase-value of begin:
syncbase-values are tested for the begin attribute.
Two animations target the same attribute of the same
element. One starts at 0s and the duration is 20s (dark to blue).
The second starts at 5s and the duration is 5s (light blue to blue).
The later animation has higher priority, because the begin value
is larger. Under the given conditions it overrides the first animation.
When the second animation is finished, the first is visible again, because
the animation fill attribute is remove for the second one.
The stroke has for comparison three animateColor animations with the same visible effect.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | wrong animation |
| KSVG1 | fail | no second animation |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | no animateColor |
e2005-09-03-18: §M(3)P
syncbase-value of begin:
syncbase-values are tested for the begin attribute.
Two set animations target the same attribute of the same
element. One sets the colour to blue at 5s.
The second sets the colour to light blue at 10s and has a duration of 5s.
The later animation has higher priority, because the begin value
is larger. Under the given conditions it overrides the first animation.
When the second animation is finished, the first is visible again, because
the animation fill attribute is remove for the second one.
Initial value is gray, first set is blue after 5s, second set is light blue at 10s for
5s. Final value is blue again.
The stroke has for comparison three set animations with the same visible effect.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | wrong animation |
| KSVG1 | fail | does not switch back from yellow to blue |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | fail | no second animation |
| Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2007-01-20-01: §M(1)P
interval before document begin as syncbase-value:
The color of the large blue circle is set to red
with the syncbase-value end for the animation of
the small blue circle. But the interval for the animation
of the small blue circle is before the document begin
and is therefore sorted out, this means, the animation does
not start, the circle remains blue. If something
red gets visible, an error is occurred.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | both animations started |
| KSVG1 | ok | - |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2011-01-08-01: §M(1)P
syncbase and priority:
syncbase-values are tested for the begin attribute.
The animation of the cy attribute is animated with
two animations, one of them with an offset of 1s, one
with this as a syncbase-value. The one with the syncbase-value
is earlier in the source code. However due to a specific SMIL
rule this has nevertheless higher priority. But because
the syncbase has a longer active duration, its effect
becomes visible after the time dependent is finished.
If the red comparison becomes visible, an error is occurred.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | wrong priority |
| Adobe | fail | wrong priority |
| Squiggle 1.7 | fail | wrong priority |
| Opera8.02/50 | (ok) | minor syncronisation problems |
| Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/ 10.60/ 11.00 | fail | wrong priority |
| Opera10.0 beta/ 10.0 | fail | wrong priority, funny residuals |
| Opera11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2011-01-09-01: §M(1)P
syncbase and priority:
syncbase-values are tested for the begin attribute.
The animation of the cy attribute is animated with
two animations, one of them with an offset of 1s, one
with this as a syncbase-value. The one with the syncbase-value
is earlier in the source code. However due to a specific SMIL
rule this has nevertheless higher priority.
The syncbase has a longer active duration, but the effect is
covered by a frozen fill.
If the red comparison becomes visible, an error is occurred.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | wrong priority |
| Adobe | fail | wrong priority |
| Squiggle 1.7 | fail | wrong priority |
| Opera8.02/50 | (ok) | minor syncronisation problems |
| Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/ 10.60/ 11.00 | fail | wrong priority |
| Opera10.0 beta/ 10.0 | fail | wrong priority, funny residuals |
| Opera11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2011-01-10-01: §M(1)P
syncbase and priority:
syncbase-values are tested for the begin attribute.
The animation of the cy attribute is animated with
two animations, one of them with an offset of 1s, one
with a syncbase-value following a chain of syncbases.
Those with the syncbase-value are earlier in the source code.
However due to a specific SMIL rule this has nevertheless
higher priority.
The syncbase has a longer active duration, but the effect is
covered by a frozen fill.
If the red comparison becomes visible, an error is occurred.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | wrong priority |
| Adobe | fail | wrong priority |
| Squiggle 1.7 | fail | wrong priority |
| Opera8.02/50 | fail | timing problems |
| Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/ 10.60/ 11.00 | fail | wrong priority |
| Opera10.0 beta/ 10.0 | fail | wrong priority, funny residuals |
| Opera11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
Test results for begin syncbase-value
| user-agent | SVG tiny 1.1 | SVG 1.1 |
| user-agent | SVG tiny 1.1 | SVG 1.1 |
| Amaya9.51/ 11.3.1 | 0/12 | 0/12 |
| KSVG1 | 1/12 | 1/12 |
| WebKit 528.16 | 9/12 | 9/12 |
| Adobe | 7/12 | 7/12 |
| Squiggle 1.7 | 9/12 | 9/12 |
| Opera8.02/50 | 8/12 | 8/12 |
| Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00 | 9/12 | 9/12 |
| Opera11.60/ 12,00 | 12/12 | 12/12 |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | 5/12 | 5/12 |
event-value
e2008-02-29-01: §IQ
begin-list with offset and events:
The begin of the animation is started either with
a click on the circle, 6s after the activation of the circle or
after 30s. This starts a color animation
of 4s duration.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no events |
| KSVG1 | fail | no events |
| WebKit 528.16 | fail |
activate ignored |
| Adobe | fail | activate with offset ignored |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1/2/ 9.00/9.10 | fail |
activate ignored, offset value prevents event begin |
| Opera9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60 | fail |
activate ignored |
| Opera11.00/11.60/ 12,00 | fail | immediate activation with tab and return |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | no animateColor |
e2005-09-04-01: §IQ
event-value click of begin:
The begin of the animation is started with
a click on the circle. This starts a colour animation
of 3s duration.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | attribute ignored |
| KSVG1 | fail | attribute ignored |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | no animateColor |
e2005-09-04-02: §IQ
event-value click +
clock-value of begin:
The begin of the animation is started 2s after
a click on the circle. This starts a colour animation
of 3s duration.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | attribute ignored |
| KSVG1 | fail | attribute ignored |
| WebKit 528.16 | ok | - |
| Adobe | fail | click stops the running animation immediately |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Opera9tp1 | fail | no animation |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | no animateColor |
e2005-09-04-03: §IQS
event-value click -
clock-value of begin:
The begin of the animation is started 5s before
a click on the circle.
This starts a fill animation from black to white
of 10s duration. Of course the animation can't really
start 5s before the click. This means, the visible
animation has to start with gray and not black.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | attribute ignored |
| KSVG1 | fail | attribute ignored |
| WebKit 528.16 | fail | ignores first event short after the animation is finished* |
| Adobe | fail | no animation |
| Squiggle 1.7 | fail | ignores first event short after the animation is finished* |
| Opera8.02/50 | fail | somestimes nearly correct, shows oscillatory animation and crashes browser |
| Opera9tp1/ 9.00/9.10 | fail |
not started, if clicked while already running |
| Opera9tp2 | fail | no animation, bug-196703 |
| Opera9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | ignores first event short after the animation is finished* |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | no animateColor |
* This is an inconsistency with SMIL. According to SMIL a new begin between the begin and end of the
current interval will end the current interval due to a restart. On the other hand, a pseudocode excludes
a begin before the end of the current interval. The first impression would be, that a second event within
the active duration will end the current interval without a restart. However, without a restart the end due
to the restart condition is nonsense. WebKit, Squiggle and Opera do something funny with this, within the
active duration it is possible to restart, but not in the interval between the 'normal' end due to the
dur attribute and 5s after this end.
e2005-09-04-04: §IQ
event-value activate of begin:
The begin of the animation is started with
an activation of the circle. This starts a colour animation
of 3s duration.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | attribute ignored |
| KSVG1 | fail | attribute ignored |
| WebKit 528.16 | fail | attribute ignored |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ Opera9tp1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | attribute ignored; Opera bug-174503 |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | no animateColor |
e2005-09-04-05: §IQ
event-value activate +
clock-value of begin:
The begin of the animation is started 2s after
an activation of the circle. This starts a colour animation
of 3s duration.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | attribute ignored |
| KSVG1 | fail | attribute ignored |
| WebKit 528.16 | fail | attribute ignored |
| Adobe | fail | activate stops the running animation immediately |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ Opera9tp1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | attribute ignored, bug-174503 |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | no animateColor |
e2005-09-04-06: §IQS
event-value activate -
clock-value of begin:
The begin of the animation is started 5s before
an activation of the circle.
This starts a fill animation from black to white
of 10s duration. Of course the animation can't really
start 5s before the activation. This means, the visible
animation has to start with gray and not black.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | attribute ignored |
| KSVG1 | fail | attribute ignored |
| WebKit 528.16 | fail | attribute ignored |
| Adobe | fail | attribute ignored |
| Squiggle 1.7 | fail | ignores first event short after the animation is finished, see comment
for test e2005-09-04-03 above. |
| Opera8.02/50/ Opera9tp1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | attribute ignored, bug-174503 |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | no animateColor |
e2005-09-04-07: §IQ
event-value mouseover of begin:
The begin of the animation is started with
a mouseover of the circle. This starts a colour animation
of 3s duration.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | attribute ignored |
| KSVG1 | fail | attribute ignored |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | fail | attribute ignored |
| Opera9tp1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | no animateColor |
e2005-09-04-08: §IQ
event-value mouseover +
clock-value of begin:
The begin of the animation is started 2s after
a mouseover of the circle. This starts a colour animation
of 3s duration.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | attribute ignored |
| KSVG1 | fail | attribute ignored |
| WebKit 528.16 | ok | - |
| Adobe | fail | mouseover stops the running animation immediately |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | fail | attribute ignored |
| Opera9tp1 | fail | wrong timing, animation not relyable |
| Opera9tp2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | no animateColor |
e2005-09-04-09: §IQS
event-value mouseover -
clock-value of begin:
The begin of the animation is started 5s before
a mouseover of the circle.
This starts a fill animation from black to white
of 10s duration. Of course the animation can't really
start 5s before the mouseover. This means, the visible
animation has to start with gray and not black.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | attribute ignored |
| KSVG1 | fail | attribute ignored |
| WebKit 528.16 | fail | ignores first event short after the animation is finished * |
| Adobe | fail | attribute ignored |
| Squiggle 1.7 | fail | ignores first event short after the animation is finished * |
| Opera8.02/50/ Opera9tp2 | fail | attribute ignored, bug-196703 |
| Opera9tp1/ 9.00/9.10 | fail | almost correct, but stops to work if the mouse goes
out and in again, while the animation is performed. |
| Opera9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | ignores first event short after the animation is finished * |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | no animateColor |
* See comment for test e2005-09-04-03 above.
e2005-09-04-10: §IQ
event-value mousedown of begin:
The begin of the animation is started with
a mousedown of the circle. This starts a colour animation
of 3s duration.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | attribute ignored |
| KSVG1 | fail | attribute ignored |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ Opera9tp1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | no animateColor |
e2006-03-21-01: §IQ
event-value mousedown + clock-value of begin:
The begin of the animation is started 2s after
a mousedown of the circle. This starts a colour animation
of 3s duration.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | attribute ignored |
| KSVG1 | fail | attribute ignored |
| WebKit 528.16 | ok | - |
| Adobe | fail | mousedown stops the running animation immediately |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ Opera9tp1 | fail | timing wrong, sometimes no reaction |
| Opera9tp2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | no animateColor |
e2006-03-21-02: §IQS
event-value mousedown - clock-value of begin:
The begin of the animation is started 3s before
a mousedown of the circle. This starts a colour animation
of 6s duration. This means, the visible
animation has to start with gray and not black.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | attribute ignored |
| KSVG1 | fail | attribute ignored |
| WebKit 528.16 | fail | ignores first event short after the animation is finished * |
| Adobe | fail | attribute ignored |
| Squiggle 1.7 | fail | ignores first event short after the animation is finished * |
| Opera8.02/50 | fail | crashes immediately |
| Opera9tp1/ 9.00/9.10 | fail | does not work, if the mousedown occurs, if
the animation is already running |
| Opera9tp2 | fail | attribute ignored, bug-196703 |
| Opera9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | ignores first event short after the animation is finished * |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | no animateColor |
* See comment for test e2005-09-04-03 above.
e2005-09-04-11: §IQ
event-value mouseup of begin:
The begin of the animation is started with
a mouseup of the circle. This starts a colour animation
of 3s duration.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | attribute ignored |
| KSVG1 | fail | attribute ignored |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ Opera9tp1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | no animateColor |
e2006-03-21-11: §IQ
event-value mouseup + clock-value of begin:
The begin of the animation is started 2s after
a mouseup of the circle. This starts a colour animation
of 3s duration.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | attribute ignored |
| KSVG1 | fail | attribute ignored |
| WebKit 528.16 | ok | - |
| Adobe | fail | mouseup stops the running animation immediately |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | fail | sometimes no reaction |
| Opera9tp1 | fail | timing wrong, sometimes no reaction |
| Opera9tp2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | no animateColor |
e2006-03-21-12: §IQS
event-value mouseup - clock-value of begin:
The begin of the animation is started 3s before
a mouseup of the circle. This starts a colour animation
of 6s duration. This means, the visible
animation has to start with gray and not black.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | attribute ignored |
| KSVG1 | fail | attribute ignored |
| WebKit 528.16 | fail | ignores first event short after the animation is finished * |
| Adobe | fail | attribute ignored |
| Squiggle 1.7 | fail | ignores first event short after the animation is finished * |
| Opera8.02/50 | fail | crashes immediately |
| Opera9tp1/ 9.00/9.10 | fail | does not work, if the mousedown occurs, if
the animation is already running |
| Opera9tp2 | fail | attribute ignored, bug-196703 |
| Opera9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | ignores first event short after the animation is finished * |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | no animateColor |
* See comment for test e2005-09-04-03 above.
e2005-09-04-12: §IQ
event-value mouseout of begin:
The begin of the animation is started with
a mouseout of the circle. This starts a colour animation
of 3s duration.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | attribute ignored |
| KSVG1 | fail | attribute ignored |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | fail | attribute ignored |
| Opera9tp1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | no animateColor |
e2006-03-21-21: §IQ
event-value mouseout + clock-value of begin:
The begin of the animation is started 2s after
a mouseout of the circle. This starts a colour animation
of 3s duration.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | attribute ignored |
| KSVG1 | fail | attribute ignored |
| WebKit 528.16 | ok | - |
| Adobe | fail | mouseout stops the running animation immediately |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | fail | attribute ignored |
| Opera9tp1 | fail | sometimes no reaction |
| Opera9tp2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | no animateColor |
e2006-03-21-22: §IQS
event-value mouseout - clock-value of begin:
The begin of the animation is started 3s before
a mouseout of the circle. This starts a colour animation
of 6s duration. This means, the visible
animation has to start with gray and not black.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | attribute ignored |
| KSVG1 | fail | attribute ignored |
| WebKit 528.16 | fail | ignores first event short after the animation is finished * |
| Adobe | fail | attribute ignored |
| Squiggle 1.7 | fail | ignores first event short after the animation is finished * |
| Opera8.02/50/ Opera9tp2 | fail | attribute ignored, bug-196703 |
| Opera9tp1/ 9.00/9.10 | fail | does not work, if the mouseout occurs, if
the animation is already running |
| Opera9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | ignores first event short after the animation is finished * |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | no animateColor |
* See comment for test e2005-09-04-03 above.
e2005-09-04-13: §IQ
event-value mousemove of begin:
The begin of the animation is started with
a mousemove of the circle. This starts a colour animation
of 3s duration.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | attribute ignored |
| KSVG1 | fail | attribute ignored |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | fail | minor disturbances while mouse is moved |
| Opera8.02/50 | ok | (Test sucessfull, but browser crashes sometimes after animation) |
| Opera9tp1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | no animateColor |
e2006-03-21-31: §IQ
event-value mousemove + clock-value of begin:
The begin of the animation is started 2s after
a mousemove of the circle. This starts a colour animation
of 3s duration.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | attribute ignored |
| KSVG1 | fail | attribute ignored |
| WebKit 528.16 | ok | - |
| Adobe | fail | mousemove stops the running animation immediately |
| Squiggle 1.7 | fail | minor disturbances while mouse is moved |
| Opera8.02/50 | fail | just one animation |
| Opera9tp1 | fail | sometimes confused animation |
| Opera9tp2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | no animateColor |
e2006-03-21-32: §IQS
event-value mousemove - clock-value of begin:
The begin of the animation is started 3s before
a mousemove of the circle. This starts a colour animation
of 6s duration. This means, the visible
animation has to start with gray and not black.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | attribute ignored |
| KSVG1 | fail | attribute ignored |
| WebKit 528.16 | fail | ignores first event short after the animation is finished * |
| Adobe | fail | attribute ignored |
| Squiggle 1.7 | fail | ignores first event short after the animation is finished * |
| Opera8.02/50 | fail | attribute ignored |
| Opera9tp1/ 9.00/9.10 | fail | does not work, if the mousemove occurs, if
the animation is already running |
| Opera9tp2 | fail | attribute ignored, bug-196703 |
| Opera9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | ignores first event short after the animation is finished * |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | no animateColor |
* See comment for test e2005-09-04-03 above.
e2005-09-04-14: §M(1)P
event-value SVGLoad of begin:
The begin of the animation is started with
a SVGLoad. This starts a colour animation
of 3s duration after the document is completely loaded.
begin="SVGLoad" corresponds for practical
applications to begin="0s", it is trivial, as
if no begin is given.
stroke shows the same animateColor.
If something red becomes visible, an error
occurred.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | (ok) | short initial red circle |
| KSVG1 | ok | - |
| WebKit 528.16 | fail | attribute ignored |
| Adobe | fail | attribute ignored |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ Opera9tp1/2 | fail | attribute ignored |
| Opera9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | no animateColor |
e2005-09-04-15: §M(2)P
event-value repeatEvent of begin:
The begin of the animation of the large circle of a
duration of 3s is started with
a repeatEvent of the animation of the small circle
with a duration of 3s.
The animation of the small circle is repeated 6 times.
Both are colour animations.
stroke shows the same animateColor.
If something red becomes visible, an error
occurred.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | attribute ignored |
| KSVG1 | fail | attribute ignored |
| WebKit 528.16 | fail | attribute ignored |
| Adobe | fail | attribute ignored |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | fail | attribute ignored |
| Opera9tp1/ 9.00/9.10 | fail | no animation - even the animation of the small circle is ignored |
| Opera9tp2 | fail | crashes immediately, bug-196701 |
| Opera9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | no animateColor |
e2005-09-04-16: §IQ
event-value SVGZoom of begin:
The begin of the animation is started with
a SVGZoom. This starts a colour animation
of 3s duration after the document is zoomed (zoom into the document).
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | attribute ignored |
| KSVG1 | fail | attribute ignored |
| WebKit 528.16 | fail | attribute ignored |
| Adobe | fail | no animation |
| Squiggle 1.7 | fail | no animation |
| Opera8.02/50/ Opera9tp1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | no animation |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | no animateColor |
e2005-09-04-17: §IQ
event-value SVGResize of begin:
The begin of the animation is started with
a SVGResize. This starts a colour animation
of 3s duration after the document is resized (resize the window of the user agent).
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | attribute ignored |
| KSVG1 | fail | attribute ignored |
| WebKit 528.16 | fail | attribute ignored |
| Adobe | fail | no animation, sometimes the plugin crashes |
| Squiggle 1.7 | fail | no animation |
| Opera8.02/50/ Opera9tp1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | no animation |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | no animateColor |
e2005-09-04-18: §IQ
event-value SVGScroll of begin:
The begin of the animation is started with
a SVGScroll. This starts a colour animation
of 3s duration after the document is scrolled
(choose a window-size smaller than 500px x 500px
to get scroll bars and scroll the document).
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | attribute ignored |
| KSVG1 | fail | attribute ignored, no scrollbars |
| WebKit 528.16 | fail | attribute ignored, no scrolbars |
| Adobe | fail | no animation, no scrollbars |
| Squiggle 1.7 | fail | no animation, no scrollbars |
| Opera8.02/50/ Opera9tp1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | no animation |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | no animateColor |
e2005-09-04-19: §M(2)P
event-value beginEvent of begin:
The begin of the animation of the large circle of a
duration of 3s is started with
the beginEvent of the animation of the small circle
with a duration of 3s.
The animation of the small circle is repeated 6 times.
Both are colour animations.
stroke shows the same animateColor.
If something red becomes visible, an error
occurred.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | attribute ignored |
| KSVG1 | fail | attribute ignored, not reproducible animations or no animation |
| WebKit 528.16 | fail | attribute ignored |
| Adobe | fail | attribute ignored |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | fail | attribute ignored |
| Opera9tp1/ 9.00/9.10 | fail | no animation at all, even not for the small circle |
| Opera9tp2/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00 | fail | crashes immediately, bug-196701 |
| Opera11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | no animateColor |
e2005-09-04-20: §M(2)P
event-value endEvent of begin:
The begin of the animation of the large circle of a
duration of 3s is started with
the endEvent of the animation of the small circle
with a duration of 3s.
stroke shows the same animateColor.
If something red becomes visible, an error
occurred.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | attribute ignored |
| KSVG1 | fail | attribute ignored, not reproducible animations or no animation |
| WebKit 528.16 | fail | attribute ignored |
| Adobe | fail | attribute ignored |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | fail | attribute ignored |
| Opera9tp1/ 9.00/9.10 | fail | no animation at all, even not for the small circle |
| Opera9tp2 | fail | crashes immediately, bug-196701 |
| Opera9.50 alpha | fail | event ignored |
| Opera9.50 beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | no animateColor |
e2005-09-04-21: §IQ
event-values focusin and focusout of begin:
The font-size of the blue stroked text is animated with repetition.
The animation of the text 'focusin' can be started with a
focusin event.
The animation of the text 'focusout' can be started with a
focusout event.
For example mark the text with the mouse, to set the focusin.
For focusout for example mark another text.
The initial and final font-sizes of the animations are marked in gray.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | attribute ignored |
| KSVG1 | fail | attribute ignored, not reproducible animations
or no animation for both text elements together |
| WebKit 528.16 | fail | attribute ignored |
| Adobe | fail | attribute ignored, not reproducible animations for both text elements together |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ Opera9tp1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | no animation |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | no animation |
Note, that there are more event-values as tested here, but as far as I can imagine, they have
nothing to do with declarative animation or no visible effect in SVG tiny.
These other values are correlated to the DOM.
Test results for begin event-value
| user-agent | SVG tiny 1.1 | SVG 1.1 |
| user-agent | SVG tiny 1.1 | SVG 1.1 |
| Amaya9.51/ 11.3.1 | 1/30 | 1/30 |
| KSVG1 | 1/30 | 1/30 |
| WebKit 528.16 | 12/30 | 12/30 |
| Adobe | 7/30 | 7/30 |
| Squiggle 1.7 | 18/30 | 18/30 |
| Opera8.02/50 | 5/30 | 5/30 |
| Opera9tp1 | 6/30 | 6/30 |
| Opera9tp2 | 12/30 | 12/30 |
| Opera9 beta1/2 * | 0/30 | 0/30 |
| Opera9.00/9.10 | 13/30 | 13/30 |
| Opera9.50 alpha | 14/30 | 14/30 |
| Opera9.50 beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00 | 15/30 | 15/30 |
| Opera11.60/ 12,00 | 16/30 | 16/30 |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | 0/30 | 0/30 |
* Opera9 beta1/2 ignore events completely.
repeat-value
e2005-09-04-31: §M(3)P
repeat-value repeat of begin:
The begin of the animation of the large circle of a
duration of 3s is started with the second repetition
(repeat(2)) of the animation of the small circle
with a duration of 3s.
The animation of the small circle is repeated 6 times.
Both are colour animations.
stroke shows the same animateColor.
If something red becomes visible, an error
occurred.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | ignored, wrong animation |
| KSVG1 | fail | attribute ignored |
| WebKit 528.16 | fail | attribute ignored |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1 | fail | attribute ignored; Opera bug-174507 |
| Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | no animateColor |
e2005-09-04-32: §M(3)P
repeat-value repeat + clock-value of begin:
The begin of the animation of the large circle of a
duration of 3s is started 2s after the second repetition
(repeat(2)) of the animation of the small circle
with a duration of 3s.
The animation of the small circle is repeated 6 times.
Both are colour animations.
stroke shows the same animateColor.
If something red becomes visible, an error
occurred.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | ignored, wrong animation |
| KSVG1 | fail | attribute ignored |
| WebKit 528.16 | fail | attribute ignored |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1 | fail | attribute ignored |
| Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | no animateColor |
e2005-09-04-33: §M(3)P
repeat-value repeat - clock-value of begin:
The begin of the animation of the large circle of a
duration of 3s is started 2s before the second repetition
(repeat(2)) of the animation of the small circle
with a duration of 3s.
The animation of the small circle is repeated 6 times.
Both are colour animations.
troke shows the same animateColor.
If something red becomes visible, an error
occurred.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | ignored, wrong animation |
| KSVG1 | fail | attribute ignored |
| WebKit 528.16 | fail | attribute ignored |
| Adobe | fail | attribute ignored |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1/2 | fail | attribute ignored |
| Opera9beta1/2/ 9.00/9.10 | fail | minor accuracy problem |
| Opera9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | no animateColor |
Test results for begin repeat-value
| user-agent | SVG tiny 1.1 | SVG 1.1 |
| user-agent | SVG tiny 1.1 | SVG 1.1 |
| Amaya9.51/ 11.3.1 | 0/3 | 0/3 |
| KSVG1 | 0/3 | 0/3 |
| WebKit 528.16 | 0/3 | 0/3 |
| Adobe | 2/3 | 2/3 |
| Squiggle 1.7 | 3/3 | 3/3 |
| Opera8.02/50/ 9tp1 | 0/3 | 0/3 |
| Opera9tp2/ beta1/2/ 9.00/9.10 | 2/3 | 2/3 |
| Opera9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | 3/3 | 3/3 |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | 0/3 | 0/3 |
accessKey-value
e2005-09-04-41: §IQ
accessKey-value of begin:
The begin of the animation is started with
the accessKey b. This starts a colour animation
of 3s duration.
According to the SMIL animation recommendation the accessKey has to be
accessable without the use of another key like ALT, but
note, that the access to the accessKey in real user-agents often depends on
additional keys, which have to be pressed
before or with the desired key - look in the manual of the user-agent, if you
want to check this too - but it is not correct anyway.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | ignored |
| KSVG1 | fail | attribute ignored |
| WebKit 528.16 | fail | attribute ignored |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9beta1/2 | fail | attribute ignored; Opera bug-174505 |
| Opera9tp1/2 | fail | if the circle is clicked or the mouse is over the circle, any key can activate the animation,
if the circle is not clicked or something different, nothing happens with the key. While the animation is running, it can
be restarted with any key, but if it is finished, the circle has to be clicked before (just tp1). |
| Opera9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | needs shift+escape to activate accessKey; Opera bug-174505 |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | no animateColor |
e2005-09-04-42: §IQ
accessKey-value + clock-value of begin:
The begin of the animation is started 3s after
the accessKey b is pressed. This starts a colour animation
of 3s duration.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | ignored |
| KSVG1 | fail | attribute ignored |
| WebKit 528.16 | fail | attribute ignored |
| Adobe | fail | attribute ignored |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9beta1/2 | fail | attribute ignored |
| Opera9tp1/2 | fail | either no animation (just tp1)
or similar behaviour as in the previous example. |
| Opera9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | needs shift+escape to activate accessKey; Opera bug-174505 |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | no animateColor |
e2005-09-04-43: §IQ
accessKey-value - clock-value of begin:
The begin of the animation is started 5s before
the accessKey b is pressed. This starts a colour animation
of 10s duration. Because it is not possible to start the
animation before the key is pressed, the part of the
animation before this event is not visible. The visible
effect is a colour animation from magenta to blue in
5s and not from red to blue in 10s.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | ignored |
| KSVG1 | fail | attribute ignored |
| WebKit 528.16 | fail | attribute ignored |
| Adobe | fail | attribute ignored |
| Squiggle 1.7 | fail | ignores first event short after the animation is finished * |
| Opera8.02/50/ 9tp2/beta1/2 | fail | attribute ignored |
| Opera9tp1 | fail | similar behaviour as described in the two
previous examples. |
| Opera9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | needs shift+escape to activate accessKey; Opera bug-174505 |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | no animateColor |
* See comment for test e2005-09-04-03 above.
Test results for begin accessKey-value
| user-agent | SVG tiny 1.1 | SVG 1.1 |
| user-agent | SVG tiny 1.1 | SVG 1.1 |
| Amaya9.51/ 11.3.1 | 0/3 | 0/3 |
| KSVG1 | 0/3 | 0/3 |
| WebKit 528.16 | 0/3 | 0/3 |
| Adobe | 1/3 | 1/3 |
| Squiggle 1.7 | 2/3 | 2/3 |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | 0/3 | 0/3 |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | 0/3 | 0/3 |
wallclock-value
e2005-09-04-51: §AUP
wallclock-value of begin:
The wallclock value is checked for the begin attribute.
A simple wall clock is animated. The begin value is
wallclock(2005-09-04T00:00Z), this means the
animation begins at 2005-09-04T00:00Z or
at midnight of 2005-09-04, UTC time.
If the current date of the user-agent is later than this
date, the animations show the UTC time.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | attribute ignored |
| KSVG1 | fail | attribute ignored |
| WebKit 528.16 | fail | attribute ignored |
| Adobe | fail | attribute ignored |
| Squiggle 1.7 | ok | (takes a moment to get the correct UTC to start the animation) |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | attribute ignored |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | attribute ignored |
e2005-09-04-52: §AUP
wallclock-value of begin:
The wallclock value is checked for the begin attribute.
A simple wall clock is animated. The begin value is
wallclock(00:00), this means the
animation begun at 00:00 or
at midnight local time.
The clock shows the current local time.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | attribute ignored |
| KSVG1 | fail | attribute ignored |
| WebKit 528.16 | fail | attribute ignored |
| Adobe | fail | attribute ignored |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | attribute ignored |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | attribute ignored |
begin with a element
e2005-09-04-61: §IQ
indefinite begin and start with an a element:
The begin attribute is set to indefinite.
The animation is started with an activation of
the a element around the circle.
This starts a colour animation
of 10s duration.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | ignored |
| KSVG1 | fail | almost correct, but the animation starts at 0s, too |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0 | fail | ignored |
| Gecko 24.0/ 36.0/ 48.0/ 60.0 | fail | no animateColor |
e2005-09-04-62: §IQ
indefinite begin and start with an a element:
A click on one of the magenta symbols gives
a by animation for a circle as expected intuitively by the type
of the symbol. fill is set to freeze, therefore the
animations stop at their end points.
Because by animations without from are additive, the start
of an animation depends on the history.
The first click on a symbol resolves the begin time for the
corresponding animation. If the symbol is clicked again,
all animations after the first click have to be repeated with
corresponding begin times.
(see SMIL animation recommendation for hyperlinking rules).
For example: If after one motion the opposite
direction is chosen, the motion starts at the final position
of the previous animation. If the same direction is chosen,
the animation has to start with the initial value for the
first click on the same symbol. The history
since the last click on the same symbol has to be repeated.
If the animation is started, while itself is already running,
it has to start at the intial value. If it is started, while an
animation in the opposite direction is running, it is
additive, the visual effect is, that it stops until the other
animation is finished.
Animation for different attributes superpose always and
have no influence on each other, unless a repeated click
on one symbol results in the repetition of the history of
the animation.
Initial values for horizontal and vertical motions are given
as small circle and lines as a help.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | starts all animations with a click and the animations start at 0s, too |
| WebKit 528.16 | fail | no history with restart |
| Adobe | ok | - |
| Squiggle 1.7 | fail | creates a huge number of wrong error messages and freezes
the complete X11 environment with them! The error messages are related to a wrong interpretation of restarted additive animations. |
| Opera8.02/50 | fail | seems to be confused, sometimes the
fill freeze is forgotten and the different animations are not always additive. |
| Opera9tp1/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Opera9tp2/ beta1/2/ 9.00/9.10 | fail | does not resolve the begin times correctly for repeated start of the animation history. |
| Gecko 2.0/ 8.0/ 12.0 | fail | ignored |
| Gecko 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-10-21-01: §IQ
begin to end with an a element:
With an a element an animation can just be started
directly. To stop it, a trick is necessary.
A begin attribute is set to indefinite.
With a click on the circle the begin of a set
animations ends the animateColor.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | ignored |
| KSVG1 | ok | sometimes the browser crashes a little bit later |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | ok | sometimes the browser crashes a little bit later |
| Opera9tp1 | fail | attribute ignored, wrong behaviour after click. |
| Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0 | fail | ignored |
| Gecko 24.0/ 36.0/ 48.0/ 60.0 | fail | no animateColor |
e2005-10-21-02: §IQ
begin with a and several begin times:
Without interactivity the colour animation restarts
three times. With a click on the circle the colour animation
can be restarted. If the the stroke is gray, the animation
is repeated three times. If the stroke is magenta, the
animation is repeated two times. If the stroke is
blue, the animation is repeated just one time.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | ignored, wrong animation |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | no history with restart |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | fail | ignores more than one begin |
| Opera9tp1 | fail | number of repeats wrong |
| Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0 | fail | ignored |
| Gecko 24.0/ 36.0/ 48.0/ 60.0 | fail | no animateColor |
e2005-10-21-03: §IQ
restart animations with a click:
Restart and history of different attributes with a element.
Without interactivity, the ellipse moves from left to right
after 10s and after 5s additionally from top to bottom for
10s. A click on the ellipse start to animate rx and 5s later
ry. This resolves the begin times for these animations.
A click on one of the text options will repeat the history
of the last animations since the begin of the last animation
of the referenced attribute - for a detailed description see
the similar example in the SMIL animation recommendation.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | ignores begin and history |
| WebKit 528.16 | fail | no history with restart |
| Adobe | ok | - |
| Squiggle 1.7 | fail | wrong interpretation of history |
| Opera8.02/50 | fail | ignores history of begin times |
| Opera9tp1/2/ beta1/2/ 9.00/9.10 | fail | history of begin times not completely interpreted |
| Opera9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | wrong interpretation of history |
| Gecko 2.0/ 8.0/ 12.0 | fail | no linking |
| Gecko 24.0/ 36.0/ 48.0 | fail | no action, if ellipse is clicked |
| Gecko 60.0 | ok | - |
e2007-03-27-01: §IQ
a and begin and bubbling:
The radius of two circles (one behind the other)
can be animated, this can be started with a click on the circle. One circle
is enlarged, the other shrinks. The shrinking circle animation is started
with a click event, the enlarging animation is started with an a element
surround both circles. Because the shrinking circle covers the other
completely at the beginning, it is not possible, to start just the enlarging
animation. Even if this is restarted with a second click on the larger circle,
this will result in a restart of the shrinking animation too, due to the
specific timing rules for animations started with an a element.
The other focus of the test is, that both animations are started, not just
the inner shrinking one, this behaviour is called bubbling and is applicable
for the click event.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no interactivity |
| KSVG1 | fail | no interactivity |
| WebKit 528.16 | fail | no history with restart |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Opera9tp1/2/ beta1/2/ 9.00/9.10 | fail | wrong timing if smaller circle is clicked while the animation is already running |
| Gecko 2.0/ 8.0/ 12.0 | fail | no linking |
| Gecko 24.0/ 36.0/ 48.0 | fail | no click event |
| Gecko 60.0 | ok | - |
Test results for begin with element a
| user-agent | SVG tiny 1.1 | SVG 1.1 |
| user-agent | SVG tiny 1.1 | SVG 1.1 |
| Amaya9.51/ 11.3.1 | 0/6 | 0/6 |
| KSVG1 | 1/6 | 1/6 |
| WebKit 528.16 | 2/6 | 2/6 |
| Adobe | 6/6 | 6/6 |
| Squiggle 1.7 | 4/6 | 4/6 |
| Opera8.02/50 | 3/6 | 3/6 |
| Opera9tp1 | 2/6 | 2/6 |
| Opera9tp2/ beta1/2/ 9.00/9.10 | 3/6 | 3/6 |
| Opera9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | 5/6 | 5/6 |
| Gecko 2.0/ 8.0/ 12.0 | 0/6 | 0/6 |
| Gecko 24.0/ 36.0/ 48.0 | 1/6 | 1/6 |
| Gecko 60.0 | 3/6 | 3/6 |
Test results for begin
| user-agent | SVG tiny 1.1 | SVG 1.1 |
| user-agent | SVG tiny 1.1 | SVG 1.1 |
| Amaya9.51 | 2/59 | 2/59 |
| Amaya11.3.1 | 3/56 | 3/56 |
| KSVG1 | 4/59 | 4/59 |
| WebKit 528.16 | 26/59 | 26/59 |
| Adobe | 25/59 | 25/59 |
| Squiggle 1.7 | 40/59 | 40/59 |
| Opera8.02/50 | 18/59 | 18/59 |
| Opera9tp1 | 20/59 | 20/59 |
| Opera9tp2 | 29/59 | 29/59 |
| Opera9 beta1/2 | 17/59 | 17/59 |
| Opera9.00/9.10 | 30/59 | 30/59 |
| Opera9.50 alpha | 34/59 | 34/59 |
| Opera9.50 beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00 | 35/59 | 35/59 |
| Opera11.60/ 12,00 | 39/59 | 39/59 |
| Gecko 2.0/ 8.0/ 12.0 | 5/59 | 5/59 |
| Gecko 24.0/ 36.0/ 48.0 | 6/59 | 6/59 |
| Gecko 60.0 | 8/59 | 8/59 |
end
The end attribute has almost the same possibilities for values as the begin attribute.
Therefore here is nothing more to learn, but similar things to check.
end with offset-value
e2005-09-05-01: §M(2)Q
end with offset-value:
A rectangle is rotated around the center of
the image with a dur value of 60s, but the
anmation is already stopped after 30s with
the end attribute.
The active duration is marked with
a blue fill.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | ignored |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | final value not frozen |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-09-05-02: §M(2)Q
end with offset-value:
A rectangle is rotated around the center of
the image with a dur value of 6s and the
repeatCount is set to indefinite, but the
animation is already stopped after 12s or
after 2 repetitions with the end attribute.
The active duration is marked with
a blue fill.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | ignored |
| KSVG1 | fail | no animation |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-09-05-03: §M(1)P
end before begin:
The radius of a circle is animated with a
duration of 20s after 3s with the begin value,
the given end value is already 0s.
This results in no animation, because
the end-value before begin without any
end value after begin prevents the animation
from starting.
If something red becomes visible, an error
occurred.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ok | - |
| KSVG1 | fail | ignores end |
| WebKit 528.16 | ok | - |
| Adobe | fail | ignores end |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10 | fail | ignores end |
| Opera9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2007-01-16-01: §M(1)P
end and begin before the document begins:
The radius of a circle is animated with a
duration of 20s with the begin value of -5.01s,
the given end value is already -0.01s.
This results in no animation, because
both end and begin are before the begin of the
document. This time interval is sorted out.
end and begin before the load of the document
prevents the animation from starting.
If something red becomes visible, an error
occurred.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ok | - |
| KSVG1 | fail | ignores bgegin and end |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2007-01-21-01: §M(1)P
begin equals end:
The color of a blue circle is set to red for 100s.
begin and end are both 2s. This is an invalid or
empty interval, this means, the animation does
not start, the circle remains blue. If something
red gets visible, an error is occurred.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | ok | - |
| KSVG1 | ok | - |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-09-05-04: §M(2)Q
end list with offset-values:
A rectangle is rotated around the center of
the image with a dur value of 3s with repetition.
A begin list is given with start times of
3s, 9s, 15s, 21s.
An end list is given with end times of
4s, 11s, 18s, 25s.
This results in several animations with
the durations 1s, 2s, 3s, 4s.
The active duration is marked with
a blue fill.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | ignored |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | final values not frozen |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | fail | just one value, the others are ignored. |
| Opera9tp1/tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2006-08-08-01: §M(2)Q
end list with offset-values:
A rectangle is rotated around the center of
the image with a dur value of 3s with repetition.
A begin list is given with start times of
3s, 9s, 15s, 21s, 27s.
An end list is given with end times of
4s, 11s, 18s, 25s.
This results in several animations with
the durations 1s, 2s, 3s, 4s.
The last begin does not start, because their
is no later end.
The active duration is marked with
a blue fill. If a gray object rotates, an error
is occurred.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | ignored |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | final value not frozen |
| Adobe | fail | last begin animated |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | fail | just one value, the others are ignored. |
| Opera9tp1/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Opera9tp2/ beta1/2/ 9.00/9.10 | fail | last begin animated |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2006-02-20-01: §M(1)P
end later than begin+dur:
cx and cy of a circle are animated from small to large in 10s.
end for cx is set to 12s and has no influence on the animation.
A gray path shows the correct trajectory of the circle.
If the red center of the circle becomes visible, an error
occurred.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | ok | - |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2006-02-20-02: §M(1)P
discrete animation and end:
cx of a circle is discrete animated from small to large in 10s.
end is set to 8s.
This means for the overall animation a constant cx for the last 2s.
cy is animated linear.
A gray path shows the correct trajectory of the circle.
If the red center of the circle becomes visible, an error
occurred.
Note that time intervals in SVG have a closed begin and open
end. begin and end define an interval too, therefore in this
example for 8s and later still 800 is the presentation value.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no cx animation |
| WebKit 528.16 | fail | wrong frozen value |
| Adobe | ok | - |
| Squiggle 1.7 | fail | wrong time interval model |
| Opera8.02/50/ 9tp2/beta1/2/ 9.00/9.10 | fail | wrong time interval model |
| Opera9tp1 | fail | wrong timing |
| Opera9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | wrong frozen value |
e2006-02-20-03: §M(1)P
discrete animation with
keyTimes and end:
cx of a circle is discrete animated from small to large in 10s.
end is set to 8s.
This means for the overall animation a constant cx for the last 2s.
cy is animated linear.
A gray path shows the correct trajectory of the circle.
If the red center of the circle becomes visible, an error
occurred.
Note that time intervals in SVG have a closed begin and open
end. begin and end define an interval too, therefore in this
example for 8s and later still 800 is the presentation value.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no cx animation |
| WebKit 528.16 | fail | wrong frozen value |
| Adobe | ok | - |
| Squiggle 1.7 | fail | wrong time interval model |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | wrong frozen value |
e2006-08-08-11: §IAQ
interactive begin and fixed end:
The radius of a circle is enlarged in a
duration of 20s after a click with the begin value,
if the circle is clicked before the end at 20s, indicated
with a blue stroke. The animation ends at 20s.
A click later as 20s cannot start or restart the animation
anymore, because the only end value is before begin.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no interactivity |
| KSVG1 | fail | no interactivity |
| WebKit 528.16 | fail | wrong frozen value |
| Adobe | fail | end ignored |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | end ignored |
| Opera9beta1/2 | fail | no interactivity |
| Opera9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 60.0 | ok | - |
| Gecko 12.0/ 24.0/ 36.0/ 48.0 | fail | no interactivity |
Test results for end offset-value
| user-agent | SVG tiny 1.1 | SVG 1.1 |
| user-agent | SVG tiny 1.1 | SVG 1.1 |
| Amaya9.51/ 11.3.1 | 3/11 | 3/11 |
| KSVG1 | 2/11 | 2/11 |
| WebKit 528.16 | 5/11 | 5/11 |
| Adobe | 8/11 | 8/11 |
| Squiggle 1.7 | 9/11 | 9/11 |
| Opera8.02/50 | 6/11 | 6/11 |
| Opera9tp1 | 8/11 | 8/11 |
| Opera9tp2/ beta1/2/ 9.00/9.10 | 7/11 | 7/11 |
| Opera9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | 11/11 | 11/11 |
| Gecko 2.0/ 8.0/ 60.0 | 9/11 | 9/11 |
| Gecko 12.0/ 24.0/ 36.0/ 48.0 | 8/11 | 8/11 |
end with syncbase-value
e2005-09-05-05: §M(3)P
end with syncbase-value end:
Two rectangles are rotated around the center of
the image with a dur value of 3s or 10s with repetition.
The end of the fast rotation of the small rectangle
finishes the animation of the slow large rectangle
after 16s, using the syncbase-value end.
The active duration is marked with
a blue fill.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | ignored |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | wrong frozen values |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | fail | instead of end there are wild oscillatory motions
and the browser crashes. |
| Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-09-05-06: §M(3)P
end with syncbase-value begin:
Two rectangles are rotated around the center of
the image with a dur value of 3s or 10s with repetition.
The begin of the fast rotation of the small rectangle
finishes the animation of the slow large rectangle
after 13s, using the syncbase-value begin.
The active duration is marked with
a blue fill.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | ignored |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | wrong frozen values |
| Adobe | ok | - |
| Squiggle 1.7 | fail | large rectangle not animated |
| Opera8.02/50 | fail | The event crashes the browser immediately
or instead of end there are wild oscillatory motions
and the browser crashes. |
| Opera9tp1 | fail | event ignored |
| Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-09-05-07: §M(3)P
end with syncbase-value end + clock-value:
Two rectangles are rotated around the center of
the image with a dur value of 3s or 10s with repetition.
3s after the end of the fast rotation of the small rectangle
of 16s duration the animation of the slow large rectangle
is finished, using a syncbase-value.
The active duration is marked with
a blue fill.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | ignored |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | wrong frozen values |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | fail | The event crashes the browser immediately
or instead of end there are wild oscillatory motions
and the browser crashes. |
| Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-09-05-08: §M(3)P
end with syncbase-value end - clock-value:
Two rectangles are rotated around the center of
the image with a dur value of 3s or 10s with repetition.
3s before the end of the fast rotation of the small rectangle
of 16s duration the animation of the slow large rectangle
is finished, using a syncbase-value.
The active duration is marked with
a blue fill.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | ignored |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | wrong frozen value |
| Adobe | fail | attribute ignored, animation does not stop. |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | fail | The event crashes the browser immediately
or instead of end there are wild oscillatory motions
and the browser crashes. |
| Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-09-05-09: §M(3)P
end with syncbase-value begin + clock-value:
Two rectangles are rotated around the center of
the image with a dur value of 3s or 10s with repetition.
The black rectangle starts the animation at 0s.
The red rectangle starts the animation at 13s.
3s after the begin of the fast rotation of the small rectangle
the animation of the slow large rectangle
is finished, using a syncbase-value.
The active duration is marked with
a blue fill.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | ignored |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | wrong frozen values |
| Adobe | ok | - |
| Squiggle 1.7 | fail | large rectangle not animated |
| Opera8.02/50 | fail | The event crashes the browser immediately
or instead of end there are wild oscillatory motions
and the browser crashes. |
| Opera9tp1 | fail | event ignored |
| Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-09-05-10: §M(3)P
end with syncbase-value begin - clock-value:
Two rectangles are rotated around the center of
the image with a dur value of 3s or 10s with repetition.
The black rectangle starts the animation at 0s.
The red rectangle starts the animation at 13s.
3s before the begin of the fast rotation of the small rectangle
the animation of the slow large rectangle
is finished, using a syncbase-value.
The active duration is marked with
a blue fill.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | ignored |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | wrong frozen value |
| Adobe | fail | attribute ignored, animation does not stop. |
| Squiggle 1.7 | fail | large rectangle not animated |
| Opera8.02/50 | fail | The event crashes the browser immediately
or instead of end there are wild oscillatory motions
and the browser crashes. |
| Opera9tp1 | fail | event ignored |
| Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2008-04-24-01: §M(1)P
begin lists and end with syncbase:
A blue circle is moved from top to bottom
in 8s, from left to right in 10s, the animations
are started three respectively four times with multiple begin
and end times, end with syncbase values. For the second begin
time there is no fitting end value in the list, therefore it cannot
start at the given time. 6s later the related end value is received
from repeat and the second turns starts late within the
animation. For the last begin there are all end values earlier
and therefore it does never start.
This is compared with a red circle below with the same motion
realised with some simpler animations.
If something red is getting visible, an error occurred.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | wrong timing |
| Adobe | fail | second and last turn wrong |
| Squiggle 1.7 | fail | second turn wrong |
| Opera8.02/50/ 9tp1/2/ beta1/2/ 9.00/9.10 | fail | completely wrong |
| Opera9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | second turn wrong |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | wrong animation |
Test results for end syncbase-value
| user-agent | SVG tiny 1.1 | SVG 1.1 |
| user-agent | SVG tiny 1.1 | SVG 1.1 |
| Amaya9.51/ 11.3.1 | 0/7 | 0/7 |
| KSVG1 | 0/7 | 0/7 |
| WebKit 528.16 | 0/7 | 0/7 |
| Adobe | 4/7 | 4/7 |
| Squiggle 1.7 | 3/7 | 3/7 |
| Opera8.02/50 | 0/7 | 0/7 |
| Opera9tp1 | 3/7 | 3/7 |
| Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | 6/7 | 6/7 |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | 6/7 | 6/7 |
end with event-value
e2005-09-06-01: §IQ
end with event-value click:
width and height of a rectangle is enlarged
in 30s.
The animation can be stopped with a click
on the rectangle.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no animation or ignores event |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | fail | The event crashes the browser immediately. |
| Opera9tp1 | fail | event ignored |
| Opera9tp2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60 | ok | - |
| Opera12,00 | fail | first event for height ignored |
| Gecko 2.0/ 8.0/ 60.0 | ok | - |
| Gecko 12.0/ 24.0/ 36.0/ 48.0 | fail | event ignored |
e2005-09-06-02: §IQ
end with event-value click + clock-value:
width and height of a rectangle is enlarged
in 30s.
The animation can be stopped with a click
on the rectangle. width is stopped after 3s,
height is stopped after 6s.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | ignores event |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | fail | ends immediately, offsets ignored |
| Opera8.02/50 | fail | The event crashes the browser immediately. |
| Opera9tp1 | fail | event ignored |
| Opera9tp2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60 | ok | - |
| Opera12,00 | fail | first event for height ignored |
| Gecko 2.0/ 8.0/ 60.0 | ok | - |
| Gecko 12.0/ 24.0/ 36.0/ 48.0 | fail | event ignored |
e2005-09-06-03: §IQ
end with event-value click - clock-value:
width and height of a rectangle is enlarged
in 30s.
The animation can be stopped with a click
on the rectangle. width is ended 3s before the
click, height is ended 4s after the end of the width animation.
Of course, this cannot have a visible effect for the
width animation, but the user-agent has to recalculate
the end-time with the effect, that the height animation
is stopped 1s after the click.
The test assumes, that the click event is later than 3s after
the begin of the document. Else the end has to be ignored,
because when the animation was started at 0s the end was indefinite,
therefore to begin the animation is correct. But if the end with click event then
is resolved before begin, it is ignored, not fitting to the begin time.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | ignores event |
| WebKit 528.16 | ok | - |
| Adobe | fail | ignores event |
| Squiggle 1.7 | fail | ends immediately, offsets ignored |
| Opera8.02/50 | fail | The event crashes the browser immediately. |
| Opera9tp1 | fail | event ignored |
| Opera9tp2/ 9.00/9.10 | fail | wrong timing for end |
| Opera9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60 | ok | - |
| Opera12,00 | fail | wrong timing for end height |
| Gecko 2.0/ 8.0/ 60.0 | ok | - |
| Gecko 12.0/ 24.0/ 36.0/ 48.0 | fail | event ignored |
e2005-09-06-04: §IQ
end with event-value activate:
width and height of a rectangle is enlarged
in 30s.
The animation can be stopped with the event
activate of the rectangle.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | ignores event |
| WebKit 528.16 | fail | ignores event |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ Opera9tp1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | ignores event |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | ignores event |
e2005-09-06-05: §IQ
end with event-value mousemove:
width and height of a rectangle is enlarged, x is moved to the right
in 30s.
The animation can be stopped with the event
mousemove of the rectangle.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | ignores event |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | fail | The event crashes the browser immediately. |
| Opera9tp1 | fail | event ignored |
| Opera9tp2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60 | ok | - |
| Opera12,00 | fail | first event for height ignored |
| Gecko 2.0/ 8.0/ 60.0 | ok | - |
| Gecko 12.0/ 24.0/ 36.0/ 48.0 | fail | event ignored |
e2005-09-06-06: §IQ
end with event-value mouseover:
width and height of a rectangle is enlarged, x is moved to the right
in 30s.
The animation can be stopped with the event
mouseover of the rectangle.
Note: Either the mouse moves over the rectangle or the rectangle animates below the mouse to get this
event.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | ignores event |
| WebKit 528.16 | fail | does not stop, if the rectangle animates below the mouse |
| Adobe | fail | does not stop, if the rectangle animates below the mouse |
| Squiggle 1.7 | fail | does not stop, if the rectangle animates below the mouse |
| Opera8.02/50 | fail | The event crashes the browser immediately. |
| Opera9tp1 | fail | event ignored |
| Opera9tp2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60 | fail | does not stop, if the rectangle animates below the mouse |
| Opera12,00 | fail | first event for height ignored, does not stop, if the rectangle animates below the mouse |
| Gecko 2.0/ 8.0 | fail | does not stop, if the rectangle animates below the mouse |
| Gecko 12.0/ 24.0/ 36.0/ 48.0 | fail | event ignored |
| Gecko 60.0 | ok | - |
e2005-09-06-07: §IQ
end with event-value mousedown:
width and height of a rectangle is enlarged, x is moved to the right
in 30s.
The animation can be stopped with the event
mousedown of the rectangle.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | ignores event |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | fail | If only the mouse is above the rectangle, the browsers crashes. |
| Opera9tp1 | fail | event ignored |
| Opera9tp2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60 | ok | - |
| Opera12,00 | fail | first event for height ignored |
| Gecko 2.0/ 8.0/ 60.0 | ok | - |
| Gecko 12.0/ 24.0/ 36.0/ 48.0 | fail | event ignored |
e2005-09-06-08: §IQ
end with event-value mouseup:
width and height of a rectangle is enlarged, x is moved to the right
in 30s.
The animation can be stopped with the event
mouseup of the rectangle.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | ignores event |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | fail | If only the mouse is above the rectangle, the browsers crashes. |
| Opera9tp1 | fail | event ignored |
| Opera9tp2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0 | fail | if the mousedown was inside the
rectangle, but the mouseup is outside and the mouse not moved between, just the rectangle, there is an event, but it should not.
Another experiment goes wrong too - if mousedown is
outside and mouseup inside due to the animation of the
rectangle, there is no event. |
| Opera10.60/ 11.00/11.60 | ok | - |
| Opera12,00 | fail | first event for height ignored |
| Gecko 2.0/ 8.0/ 60.0 | ok | - |
| Gecko 12.0/ 24.0/ 36.0/ 48.0 | fail | event ignored |
e2005-09-06-09: §IQ
end with event-value mouseout:
width and height of a rectangle is enlarged
in 30s.
The animation can be stopped with the event
mouseout of the rectangle.
mouseout occurs according to the specification,
if the mouse is moved away from the element.
It is not mentioned, that the conditions is fulfilled,
if the element moves away from the mouse, therefore
the mouse has to be moved, not just the element.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | ignores event |
| WebKit 528.16 | fail | end if mouse moved outside shape, if the mouse was inside before and
the shape moved away from the mouse |
| Adobe | fail | end if mouse moved outside shape, if the mouse was inside before and
the shape moved away from the mouse |
| Squiggle 1.7 | fail | end if mouse moved outside shape, if the mouse was inside before and
the shape moved away from the mouse |
| Opera8.02/50 | fail | no animation, but if only the mouse is above the rectangle, the browsers crashes. |
| Opera9tp1 | fail | event ignored |
| Opera9tp2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60 | fail | end if mouse moved outside shape, if the mouse was inside before and
the shape moved away from the mouse |
| Opera12,00 | fail | first event for height ignored |
| Gecko 2.0/ 8.0/ 60.0 | fail | end if mouse moved outside shape, if the mouse was inside before and
the shape moved away from the mouse |
| Gecko 12.0/ 24.0/ 36.0/ 48.0 | fail | event ignored |
e2005-09-06-10: §IQ
end with event-value SVGResize:
width and height of a rectangle is enlarged
in 60s.
The animation can be stopped with the event
SVGResize of the SVG document.
(change the size of the viewport of the user-agent.)
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | ignores event |
| WebKit 528.16 | fail | ignores event |
| Adobe | fail | ignores event, but plugin crashes a short time after resizeing |
| Squiggle 1.7 | fail | ignores event |
| Opera8.02/50/ Opera9tp1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | ignores event |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | ignores event |
e2005-09-06-11: §IQ
end with event-value SVGZoom:
width and height of a rectangle is enlarged
in 60s.
The animation can be stopped with the event
SVGZoom in the SVG document.
(zoom into the document.)
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | ignores event |
| WebKit 528.16 | fail | ignores event |
| Adobe | fail | ignores event |
| Squiggle 1.7 | fail | ignores event |
| Opera8.02/50/ Opera9tp1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | ignores event |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | ignores event |
e2005-09-06-12: §M(1)P
end with event-value repeatEvent:
width and height of a rectangle is enlarged
in 10s. The width animation is repeated until
the end at 60s.
The animation of the height ends with
the repeatEvent of the width animation.
If something red is getting visible, an error occurred.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no repetition |
| WebKit 528.16 | fail | ignores event |
| Adobe | fail | ignores event |
| Squiggle 1.7 | fail | ignores event |
| Opera8.02/50 | fail | height not animated |
| Opera9tp1/ 9.00/9.10 | fail | width not animated |
| Opera9tp2 | fail | crashes immediately |
| Opera9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | end slightly too late |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | end slightly too late |
e2005-09-06-13: §M(1)P
end with event-value endEvent:
width and height of a rectangle is enlarged
in 3s. The width animation is repeated until
the end at 11s.
The animation of the height ends with
the endEvent of the width animation.
If something red is getting visible, an error occurred.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no repetition |
| WebKit 528.16 | fail | ignores event |
| Adobe | fail | ignores event |
| Squiggle 1.7 | fail | wrong final value |
| Opera8.02/50 | fail | height not animated |
| Opera9tp1/ 9.00/9.10 | fail | width not animated |
| Opera9tp2 | fail | crashes immediately |
| Opera9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | end slightly too late |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | end slightly too late |
e2006-02-18-01: §M(1)P
end with event-value beginEvent:
width and height of a rectangle is enlarged
in 10s. The width animation starts after 10s.
The animation of the height ends with
the beginEvent of the width animation.
If something red is getting visible, an error occurred.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no repetition |
| WebKit 528.16 | fail | ignores event |
| Adobe | fail | ignores event |
| Squiggle 1.7 | fail | wrong frozen value |
| Opera8.02/50 | fail | height not animated |
| Opera9tp1/ 9.00/9.10 | fail | width not animated |
| Opera9tp2 | fail | crashes immediately |
| Opera9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | end slightly too late |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | end slightly too late |
e2005-09-06-14: §IQ
end with event-value SVGScroll:
width and height of a rectangle is enlarged
in 60s.
The animation can be stopped with the event
SVGScroll of the SVG document.
(the viewport of the user-agent should be smaller than 500px x 500px,
to stop the animation, the viewport has to be scrolled.)
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | ignores event |
| WebKit 528.16 | fail | no scrolling |
| Adobe | fail | ignores event |
| Squiggle 1.7 | fail | no scrolling available |
| Opera8.02/50/ Opera9tp1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | ignores event |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | ignores event |
e2005-09-06-15: §IQ
end with event-values focusin and focusout:
The font-size of a text is animated with repetition.
The animation of the text 'focusin' can be stopped with a
focusin event.
The animation of the text 'focusout' can be stopped with a
focusout event.
For example mark the text with the mouse, to set the focusin.
For focusout for example mark another text.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | ignores event |
| WebKit 528.16 | fail | ignores event |
| Adobe | fail | wrong behaviour - focusin on focusout stops the focusout animation, the focusin animation is not stopped. |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ Opera9tp1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | ignores event, for tp2 confused animation |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | ignores event |
e2005-09-06-16: §AUP
end with event-value SVGLoad and
begin with wallclock-value:
The wallclock value is checked for the begin attribute.
A simple wall clock is animated. The begin value is
wallclock(00:00) and the end value is SVGLoad+0.01s,
this means the animation begun at 00:00 or
at midnight local time.
The clock shows the local time at the start of the
document without any visible animation.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | ignores end and begin |
| WebKit 528.16 | fail | ignores end and begin |
| Adobe | fail | ignores end and begin |
| Squiggle 1.7 | fail | ignores end |
| Opera8.02/50/ Opera9tp1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | ignores end and begin |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | ignores end and begin |
e2006-08-09-01: §IAQ
interactive begin and end:
The radius of a blue circle is enlarged in a
duration of 10s after a click on the small green circle on the top.
A click on the yellow circle left below resets the size of the
circle to the initial value. A click on the red circle left below
stops the animation or sets it back to the last frozen animated
value if resetted before.
After the click on the red circle the animation cannot be
restarted with the green circle anymore indicated by a
gray stroke. But the reset circle and stop circle still works.
Note that the event for end occurs only in the active duration.
If the red circle is clicked when
the animation is not active, this has no effect and prevents
not the start of the animation (gray stroke is a wrong indicator
only in this case).
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no animation and interactivity |
| WebKit 528.16 | fail | wrong frozen value with yellow button |
| Adobe | fail | no begin, if red button clicked first |
| Squiggle 1.7 | fail | yellow button does not work anymore after end |
| Opera8.02/50 | fail | no restart after reset, crash with restart
after stop |
| Opera9tp1 | fail | no stop, no second reset |
| Opera9tp2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | no
begin, if red button clicked first |
| Gecko 2.0/ 8.0/ 60.0 | fail | no begin, if red button clicked first |
| Gecko 12.0/ 24.0/ 36.0/ 48.0 | fail | no event |
Test results for end event-value
| user-agent | SVG tiny 1.1 | SVG 1.1 |
| user-agent | SVG tiny 1.1 | SVG 1.1 |
| Amaya9.51/ 11.3.1 | 0/18 | 0/18 |
| KSVG1 | 0/18 | 0/18 |
| WebKit 528.16 | 6/18 | 6/18 |
| Adobe | 6/18 | 6/18 |
| Squiggle 1.7 | 6/18 | 6/18 |
| Opera8.02/50/ 9tp1/beta1/2 * | 0/18 | 0/18 |
| Opera9tp2/ 9.00/9.10 | 4/18 | 4/18 |
| Opera9.50 alpha/beta 9.52/10.0 alpha/beta/ 10.0 | 5/18 | 5/18 |
| Opera10.60/ 11.00/11.60 | 6/18 | 6/18 |
| Opera12,00 | 0/18 | 0/18 |
| Gecko 2.0/ 8.0 | 6/18 | 6/18 |
| Gecko 12.0/ 24.0/ 36.0/ 48.0 * | 0/18 | 0/18 |
| Gecko 60.0 | 7/18 | 7/18 |
* Opera9 beta1/2 and Gecko 12.0/ 24.0/ 36.0/ 48.0 ignore events completely.
end with repeat-value
e2005-09-07-01: §M(1)P
end with a repeat-value:
A small circle is moved from top to bottom
in 10s, from left to right in 10s, the animations
are repeated.
The second repetition of the horizontal animation
stops the animation of the vertical animation.
Therefore the repeat(2) event is at 20s, which is the
end of the vertical animation. Because of the end exclusive
timing model, this means
the second repetition of the movement from
top left to bottom right the animation is changed to
a movement from bottom left to bottom right.
If something red is getting visible, an error is occurred.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no repetition |
| WebKit 528.16 | fail | attribute ignored |
| Adobe | ok | - |
| Squiggle 1.7 | fail | wrong frozen value |
| Opera8.02/50/ 9tp1 | fail | vertical motion not animated |
| Opera9tp2/ beta1/2/ 9.00/9.10 | fail | last turns not on bottom, but on top |
| Opera9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | last turns not on bottom, but on top |
| Gecko 12.0 | ok | - |
e2005-09-07-02: §M(1)P
end with a repeat-value + clock-value:
A small circle is moved from top to bottom
in 10s, from left to right in 10s, the animations
are repeated.
The second repetition of the horizontal animation
stops the animation of the vertical animation after 5s.
Therefore after the 2.5 repetition of the movement from
top left to bottom right the animation is changed to
a movement from middle left to middle right starting in the middle.
If something red is getting visible, an error occurred.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no repetition |
| WebKit 528.16 | fail | attribute ignored |
| Adobe | ok | - |
| Squiggle 1.7 | fail | wrong timing |
| Opera8.02/50/ 9tp1 | fail | vertical motion not animated |
| Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-09-07-03: §M(1)P
end with a repeat-value - clock-value:
A small circle is moved from top to bottom
in 10s, from left to right in 10s, the animations
are repeated.
The begin of the second repetition - repeat(2) - of the horizontal animation
stops the animation of the vertical animation 5s before this event.
Therefore the repetition stops it late at 20s, but because the
active duration is determined by the computed time 15s, the frozen value
is determined with the computed time interval, resulting in a switch back to the
middle. This means after a movement from
top left to bottom right two times the animation is changed to
a movement from middle left to middle right.
If something red is getting visible, an error occurred.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no repetition |
| WebKit 528.16 | fail | attribute ignored |
| Adobe | fail | ignores attribute |
| Squiggle 1.7 | fail | wrong frozen value |
| Opera8.02/50/ 9tp1 | fail | vertical motion not animated |
| Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00 | ok | - |
| Opera11.60/ 12,00 | fail | wrong frozen value |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2008-04-20-01: §M(1)P
end lists with a repeat-value:
A blue circle is moved from top to bottom
in 8s, from left to right in 10s, the animations
are repeated with multiple begin and end times, end with
repeat values. For the last begin time there is no fitting
end value in the list, therefore it cannot start at the given
time. 5s later the related end value is received from repeat and
the last turns starts late within the animation.
This is compared with a red circle below with the same motion
realised with some simpler animations.
If something red is getting visible, an error occurred.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no repetition, no vertical motion |
| WebKit 528.16 | fail | attribute ignored |
| Adobe | fail | third turn starts immediately |
| Squiggle 1.7 | fail | third turn starts immediately |
| Opera8.02/50/ 9tp1 | fail | vertical motion not animated |
| Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | third turn starts immediately |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | third turn starts immediately |
Test results for end repeat-value
| user-agent | SVG tiny 1.1 | SVG 1.1 |
| user-agent | SVG tiny 1.1 | SVG 1.1 |
| Amaya9.51/ 11.3.1 | 0/4 | 0/4 |
| KSVG1 | 0/4 | 0/4 |
| WebKit 528.16 | 0/4 | 0/4 |
| Adobe | 2/4 | 2/4 |
| Squiggle 1.7 | 0/4 | 0/4 |
| Opera8.02/50 | 0/4 | 0/4 |
| Opera9tp1/2/ beta1/2/ 9.00/9.10 | 2/4 | 2/4 |
| Opera9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00 | 3/4 | 3/4 |
| Opera11.60/ 12,00 | 2/4 | 2/4 |
| Gecko 2.0/ 8.0 | 2/4 | 2/4 |
| Gecko 12.0 | 3/4 | 3/4 |
| Gecko 24.0/ 36.0/ 48.0/ 60.0 | 2/4 | 2/4 |
end with accessKey-value
e2005-09-07-04: §IQ
end with an accessKey-value:
A small circle is moved from top to bottom
in 10s, from left to right in 10s, the animations
are repeated.
Horizontal movement can be stopped with accessKey h
and vertical movement with accessKey v.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | attribute ignored |
| WebKit 528.16 | fail | attribute ignored |
| Adobe | fail | stops everything and crashes plugin. |
| Squiggle 1.7 | fail | wrong frozen values |
| Opera8.02/50/ 9tp1/beta1/2 | fail | attribute ignored |
| Opera9tp2 | fail | no end without click on circle, with click the
key is not specific, h does something else |
| Opera9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | works only with previous shift+escape |
| Gecko 2.0/ 8.0 | ok | - |
| Gecko 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | ignores events |
e2005-09-07-05: §IQ
end with an accessKey-value + clock-value:
A small circle is moved from top to bottom
in 10s, from left to right in 10s, the animations
are repeated.
Horizontal movement can be stopped with accessKey h
and vertical movement with accessKey v. The animations
will stop 5s after the keys are pressed.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | attribute ignored |
| WebKit 528.16 | fail | attribute ignored |
| Adobe | fail | stops everything and crashes plugin. |
| Squiggle 1.7 | fail | offset ignored, wrong frozen values |
| Opera8.02/50/ 9tp1/beta1/2 | fail | attribute ignored |
| Opera9tp2 | fail | no end without click on circle, with click the
key is not specific, h does something else |
| Opera9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | works only with previous shift+escape |
| Gecko 2.0/ 8.0 | ok | - |
| Gecko 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | ignores events |
end with wallclock-value
e2005-09-07-06: §IP
end with a wallclock-sync-value:
A small circle is moved from top to bottom
in 10s, from left to right in 10s, the animations
are repeated. The animations have a wallclock-sync-value
for the end attributes.
With a XHTML form the wallclock-sync-value has to be set
first, then it can be tested (if XHTML is not interpreted, another program can be used
for the form and the URI can be simply copied).
If the wallclock-sync-value is within the presentation of the document,
the animation has to stop at the given time.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | attribute ignored |
| WebKit 528.16 | fail | attribute ignored |
| Adobe | fail | attribute ignored |
| Squiggle 1.7 | fail | attribute ignored |
| Opera8.02/50/ 9tp1/2/ beta1/2/ 9.00/9.10 | fail | no animation |
| Opera9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | attribute ignored |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | attribute ignored |
e2007-01-23-01: §M(1)P
begin and end with wallclock:
The colour of a circle is discrete animated
with the values #f00;#00f;#f00.
The begin is wallclock(1700-01-01T00:00Z)
and the end is wallclock(2300-01-01T00:00Z)
with a dur value of a little bit more than 600 years.
Assuming that a user looks at the animation
around in the range between the years 1900 and
2100 the colour will be blue and not red, earlier
or later it will be red for different reasons.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | attribute ignored |
| Adobe | fail | no animation |
| Squiggle 1.7 | fail | attribute ignored |
| Opera8.02/50/ 9tp1/2/ beta1/2/ 9.00/9.10 | fail | no animation |
| Opera9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | attribute ignored |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | no animateColor |
Test results for end
| user-agent | SVG tiny 1.1 | SVG 1.1 |
| user-agent | SVG tiny 1.1 | SVG 1.1 |
| Amaya9.51/ 11.3.1 | 3/44 | 3/44 |
| KSVG1 | 2/44 | 2/44 |
| WebKit 528.16 | 11/44 | 11/44 |
| Adobe | 20/44 | 20/44 |
| Squiggle 1.7 | 18/44 | 18/44 |
| Opera8.02/50 | 6/44 | 6/44 |
| Opera9tp1 | 11/44 | 11/44 |
| Opera9tp2/ 9.00/9.10 | 19/44 | 19/44 |
| Opera9 beta1/2 | 15/44 | 15/44 |
| Opera9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | 25/44 | 25/44 |
| Opera10.60/ 11.00 | 26/44 | 26/44 |
| Opera11.60 | 25/44 | 25/44 |
| Opera12,00 | 19/44 | 19/44 |
| Gecko 2.0/ 8.0 | 25/44 | 25/44 |
| Gecko 12.0 | 17/44 | 17/44 |
| Gecko 24.0/ 36.0/ 48.0 | 16/44 | 16/44 |
| Gecko 60.0 | 23/44 | 23/44 |
event bubbling
Event bubbling means, that an event is not only applied to an element
directly, it is applied to all parent elements. Due to DOM2 bubbling is applicable
for click, mousedown, mouseup, mouseover, mousemove, mouseout, activate,
focusin, focusout. Due to the SMIL animation recommendation beginEvent, endEvent,
repeatEvent do not bubble.
e2008-06-06-01: §IM(1)P
event bubbling: click:
For the event click bubbling is applicable.
Clicking the blue stroked circle (re)starts the animation
for cx directly, for cy due to bubbling up to the parent g
element. The animations are stopped due to bubbling up
to the svg element with an offset of 5s.
The circle moves always along the grey line. The frozen
position depends on the question, whether the grey line is
clicked within 5s before the circle is clicked or not.
If the red fill of the circle gets visible, an error is occurred.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no interactivity |
| KSVG1 | fail | no interactivity |
| WebKit 528.16 | fail | wrong frozen value |
| Adobe | ok | - |
| Squiggle 1.7 | fail | bubbling ignored for end |
| Opera8.02/50/ 9beta1/2 | fail | no animation/interactivity |
| Opera9tp1/2/ 9.00/9.10 | fail | no bubbling |
| Opera9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | (ok) | minor timing accuracy problem |
| Gecko 2.0/ 8.0/ 60.0 | fail | ignores click for svg |
| Gecko 12.0/ 24.0/ 36.0/ 48.0 | fail | ignores event |
e2008-06-06-02: §IM(1)P
event bubbling: mousedown:
For the event mousedown bubbling is applicable.
mousedown on the blue stroked circle (re)starts the animation
for cx directly, for cy due to bubbling up to the parent g
element. The animations are stopped due to bubbling up
to the svg element with an offset of 5s.
The circle moves always along the grey line. The frozen
position depends on the question, whether the grey line or
the circle is started within 5s before the circle is started (again)
or not.
If the red fill of the circle gets visible, an error is occurred.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no interactivity |
| KSVG1 | fail | no interactivity |
| WebKit 528.16 | fail | wrong frozen value |
| Adobe | ok | - |
| Squiggle 1.7 | fail | bubbling ignored for end |
| Opera8.02/50/ 9beta1/2 | fail | no animation/interactivity |
| Opera9tp1/2/ 9.00/9.10 | fail | no bubbling |
| Opera9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | (ok) | minor timing accuracy problem |
| Gecko 2.0/ 8.0/ 60.0 | fail | ignores click for svg |
| Gecko 12.0/ 24.0/ 36.0/ 48.0 | fail | ignores event |
e2008-06-06-03: §IM(1)P
event bubbling: mouseup:
For the event mouseup bubbling is applicable.
mouseup on the blue stroked circle (re)starts the animation
for cx directly, for cy due to bubbling up to the parent g
element. The animations are stopped due to bubbling up
to the svg element with an offset of 5s.
The circle moves always along the grey line. The frozen
position depends on the question, whether the grey line or
the circle is started within 5s before the circle is started (again)
or not.
If the red fill of the circle gets visible, an error is occurred.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no interactivity |
| KSVG1 | fail | no interactivity |
| WebKit 528.16 | fail | wrong frozen value |
| Adobe | ok | - |
| Squiggle 1.7 | fail | bubbling ignored for end |
| Opera8.02/50/ 9beta1/2 | fail | no animation/interactivity |
| Opera9tp1/2/ 9.00/9.10 | fail | no bubbling |
| Opera9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | (ok) | minor timing accuracy problem |
| Gecko 2.0/ 8.0/ 60.0 | fail | ignores click for svg |
| Gecko 12.0/ 24.0/ 36.0/ 48.0 | fail | ignores event |
e2008-06-06-04: §IM(1)P
event bubbling: mouseover:
For the event mouseover bubbling is applicable.
mouseover on the blue stroked circle (re)starts the animation
for cx directly, for cy due to bubbling up to the parent g
element. The animations are stopped due to bubbling up
to the svg element with an offset of 5s.
The circle moves always along the grey line. The frozen
position depends on the question, whether the grey line or
the circle is started within 5s before the circle is started (again)
or not.
If the red fill of the circle gets visible, an error is occurred.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no interactivity |
| KSVG1 | fail | no interactivity |
| WebKit 528.16 | fail | wrong frozen value |
| Adobe | ok | - |
| Squiggle 1.7 | fail | bubbling ignored for end |
| Opera8.02/50/ 9beta1/2 | fail | no animation/interactivity |
| Opera9tp1/2/ 9.00/9.10 | fail | no bubbling |
| Opera9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | (ok) | minor timing accuracy problem |
| Gecko 2.0/ 8.0/ 60.0 | fail | wrong frozen value |
| Gecko 12.0/ 24.0/ 36.0/ 48.0 | fail | ignores event |
e2008-06-06-05: §IM(1)P
event bubbling: mouseout:
For the event mouseout bubbling is applicable.
mouseout on the blue stroked circle (re)starts the animation
for cx directly, for cy due to bubbling up to the parent g
element. The animations are stopped due to bubbling up
to the svg element with an offset of 5s.
The circle moves always along the grey line. The frozen
position depends on the question, whether the grey line or
the circle is started within 5s before the circle is started (again)
or not.
If the red fill of the circle gets visible, an error is occurred.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no interactivity |
| KSVG1 | fail | no interactivity |
| WebKit 528.16 | fail | wrong frozen value |
| Adobe | ok | - |
| Squiggle 1.7 | fail | bubbling ignored for end |
| Opera8.02/50/ 9beta1/2 | fail | no animation/interactivity |
| Opera9tp1/2/ 9.00/9.10 | fail | no bubbling |
| Opera9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | (ok) | minor timing accuracy problem |
| Gecko 2.0/ 8.0/ 60.0 | fail | ignores event for svg |
| Gecko 12.0/ 24.0/ 36.0/ 48.0 | fail | ignores event |
e2008-06-06-06: §IM(1)P
event bubbling: mousemove:
For the event mousemove bubbling is applicable.
mousemove on the blue stroked circle (re)starts the animation
for cx directly, for cy due to bubbling up to the parent g
element. The animations are stopped due to bubbling up
to the svg element with an offset of 5s.
The circle moves always along the grey line. The frozen
position depends on the question, whether the grey line or
the circle is started within 5s before the circle is started (again)
or not.
If the red fill of the circle gets visible, an error is occurred.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no interactivity |
| KSVG1 | fail | no interactivity |
| WebKit 528.16 | fail | wrong frozen value |
| Adobe | ok | - |
| Squiggle 1.7 | fail | bubbling ignored for end |
| Opera8.02/50/ 9beta1/2 | fail | no animation/interactivity |
| Opera9tp1/2/ 9.00/9.10 | fail | no bubbling |
| Opera9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | not all events bubble |
| Gecko 2.0/ 8.0/ 60.0 | fail | ignores event for svg |
| Gecko 12.0/ 24.0/ 36.0/ 48.0 | fail | ignores event |
e2008-06-06-07: §IM(1)P
event bubbling: activate:
For the event activate bubbling is applicable.
activate on the blue stroked circle (re)starts the animation
for cx directly, for cy due to bubbling up to the parent g
element. The animations are stopped due to bubbling up
to the svg element with an offset of 5s.
The circle moves always along the grey line. The frozen
position depends on the question, whether the grey line or
the circle is started within 5s before the circle is started (again)
or not.
If the red fill of the circle gets visible, an error is occurred.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no interactivity |
| KSVG1 | fail | no interactivity |
| WebKit 528.16 | fail | attribute ignored |
| Adobe | ok | - |
| Squiggle 1.7 | fail | bubbling ignored for end |
| Opera8.02/50/ 9tp1/2/ 9beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | no animation/interactivity |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | attribute ignored |
e2008-06-08-01: §M(1)P
event bubbling: beginEvent:
For the event beginEvent bubbling is not applicable.
The beginEvent of the stroke animation of the circle
starts the animation for cx directly. If bubbling would
be applicable, cy would start too, but without bubbling the cy
animation does not start at all.
The cx animations is repeated once.
The circle moves always along the grey line.
If the red fill of the circle gets visible, an error is occurred.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | event ignored |
| KSVG1 | fail | event ignored |
| WebKit 528.16 | fail | attribute ignored |
| Adobe | fail | event ignored |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1/ 9beta1/2/ 9.00/9.10 | fail | event ignored |
| Opera9tp2/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | crashed/frozen |
| Gecko 2.0/ 8.0/ 12.0/ 24.0 | fail | confused |
| Gecko 36.0/ 48.0/ 60.0 | ok | - |
e2008-06-08-02: §M(1)P
event bubbling: endEvent:
For the event endEvent bubbling is not applicable.
The endEvent of the stroke animation of the circle
starts the animation for cx directly. If bubbling would
be applicable, cy would start too, but without bubbling the cy
animation does not start at all.
The cx animations is repeated once.
The circle moves always along the grey line.
If the red fill of the circle gets visible, an error is occurred.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | event ignored |
| KSVG1 | fail | event ignored |
| WebKit 528.16 | fail | attribute ignored |
| Adobe | fail | event ignored |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1/ 9beta1/2/ 9.00/9.10 | fail | event ignored |
| Opera9tp2 | fail | crashed/frozen |
| Opera9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | bubbles |
| Gecko 2.0/ 8.0/ 12.0/ 24.0 | fail | confused |
| Gecko 36.0/ 48.0/ 60.0 | ok | - |
e2008-06-08-03: §M(1)P
event bubbling: repeatEvent:
For the event repeatEvent bubbling is not applicable.
The repeatEvent of the stroke animation of the circle
starts the animation for cx directly. If bubbling would
be applicable, cy would start too, but without bubbling the cy
animation does not start at all.
The cx animations itself is repeated once, but because it
depends on the repeated stroke animations the behaviour
is slightly more complex.
The circle moves always along the grey line.
If the red fill of the circle gets visible, an error is occurred.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | event ignored |
| KSVG1 | fail | event ignored |
| WebKit 528.16 | fail | attribute ignored |
| Adobe | fail | event ignored |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1/ 9beta1/2/ 9.00/9.10 | fail | event ignored |
| Opera9tp2 | fail | crashed/frozen |
| Opera9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | bubbles |
| Gecko 2.0/ 8.0/ 12.0/ 24.0 | fail | confused |
| Gecko 36.0/ 48.0/ 60.0 | ok | - |
This is SVG or SVG basic, but not SVG tiny:
e2008-06-07-01: §IM(2)P
event bubbling: focusin:
For the event focusin bubbling is applicable.
focusin the blue '+' (re)starts the animation
for x directly, for y due to bubbling up to the parent tspan
element. The animations are stopped due to bubbling up
to the parent text element with an offset of 5s.
The '+' moves always parallel along the grey line. The frozen
position depends on the question, whether one of the glyphs is
focussed within 5s before the '+' is focussed or not.
Note, that only the position of the '+' is animated, the positions of
the other two glyphs are explicitely set, they do not move at all.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | no interactivity |
| KSVG1 | fail | no interactivity |
| WebKit 528.16 | fail | attribute ignored |
| Adobe | fail | confused |
| Squiggle 1.7 | fail | bubbling ignored for end |
| Opera8.02/50 | fail | no tspan display |
| Opera9tp1/2/ 9beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | no animation/interactivity |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | ignores event |
This is SVG or SVG basic, but not SVG tiny:
e2008-06-07-02: §IM(2)P
event bubbling: focusout:
For the event focusout bubbling is applicable.
focusout the blue '+' (re)starts the animation
for x directly, for y due to bubbling up to the parent tspan
element. The animations are stopped due to bubbling up
to the parent text element with an offset of 5s.
The '+' moves always parallel along the grey line. The frozen
position depends on the question, whether one of the glyphs is
unfocussed within 5s before the '+' is unfocussed or not.
Note, that only the position of the '+' is animated, the positions of
the other two glyphs are explicitely set, they do not move at all.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG 1.1 |
| Amaya9.51/ 11.3.1 | fail | no interactivity |
| KSVG1 | fail | no interactivity |
| WebKit 528.16 | fail | attribute ignored |
| Adobe | fail | confused |
| Squiggle 1.7 | fail | bubbling ignored for end |
| Opera8.02/50 | fail | no tspan display |
| Opera9tp1/2/ 9beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | no animation/interactivity |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | ignores event |
e2008-06-10-01: §IM(2)P
event bubbling: focusin:
For the event focusin bubbling is applicable.
focusin on the blue stroked '+' (re)starts the animation
for x directly, for y due to bubbling up to the parent g
element. The animations are stopped due to bubbling up
to the svg element with an offset of 5s.
The '+' moves always parallel along the grey line. The frozen
position depends on the question, whether the grey line or
the '+' is started within 5s before the '+' is started (again)
or not.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no interactivity |
| KSVG1 | fail | no interactivity |
| WebKit 528.16 | fail | attribute ignored |
| Adobe | ok | - |
| Squiggle 1.7 | fail | bubbling ignored for end |
| Opera8.02/50/ 9tp1/2/ 9beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | no animation/interactivity |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | ignores event |
e2008-06-10-02: §IM(2)P
event bubbling: focusout:
For the event focusout bubbling is applicable.
focusout on the blue stroked '+' (re)starts the animation
for x directly, for y due to bubbling up to the parent g
element. The animations are stopped due to bubbling up
to the svg element with an offset of 5s.
The '+' moves always parallel along the grey line. The frozen
position depends on the question, whether the grey line or
the '+' is started within 5s before the '+' is started (again)
or not.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no interactivity |
| KSVG1 | fail | no interactivity |
| WebKit 528.16 | fail | attribute ignored |
| Adobe | ok | - |
| Squiggle 1.7 | fail | bubbling ignored for end |
| Opera8.02/50/ 9tp1/2/ 9beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | no animation/interactivity |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | ignores event |
e2008-06-11-01: §IQ
event bubbling and use:
A simple IFS (iterated function system) fractal is used to
test bubbling for reused, deeply cloned elements.
Activation of one of the squares starts a scale animation
and a fill animation for all of them.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no interactivity |
| KSVG1 | fail | no interactivity |
| WebKit 528.16 | fail | wrong frozen value |
| Adobe | ok | no animation/interactivity |
| Squiggle 1.7 | fail | no animation/interactivity |
| Opera8.02/50/ 9tp1/ 9beta1/2 | fail | no animation/interactivity |
| Opera9tp2 | fail | does not bubble |
| Opera9.00/9.10 | fail | incomplete animation |
| Opera9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0 | fail | all clones independent |
| Gecko 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | ignores event |
Test results for event bubbling
| user-agent | SVG tiny 1.1 | SVG 1.1 |
| user-agent | SVG tiny 1.1 | SVG 1.1 |
| Amaya9.51/ 11.3.1 | 0/13 | 0/15 |
| KSVG1 | 0/13 | 0/15 |
| WebKit 528.16 | 0/13 | 0/15 |
| Adobe | 9/13 | 9/15 |
| Squiggle 1.7 | 3/13 | 3/15 |
| Opera8.02/50/ 9tp1/2/ 9beta1/2/ 9.00/9.10 | 0/13 | 0/15 |
| Opera9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | 6/13 | 6/15 |
| Gecko 2.0/ 8.0/ 12.0/ 24.0 | 0/13 | 0/15 |
| Gecko 36.0/ 48.0/ 60.0 | 3/13 | 3/15 |
restart
e2005-09-08-01: §IQ
restart values and click event:
With a click on one of the three circles, the user
can try to restart its animation. This is not possible for the yellow one.
The magenta circle animation is just restartable, if the animation is
already finished at the right border. The animation
of the light blue circle is always restartable.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no restart for all |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | fail | restart for all at any time; Opera bug-178257 |
| Opera9tp1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 60.0 | ok | - |
| Gecko 12.0/ 24.0/ 36.0/ 48.0 | fail | ignores event |
e2005-10-20-01: §IQ
begin and end with one click:
With a click on a circle, its animation is started.
With another click it is stopped. This works, because
restart is set to never for the magenta and whenNotActive
for the light blue.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no restart for all |
| WebKit 528.16 | fail | jumps only to the final value |
| Adobe | fail | whenNotActive ignored |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | fail | restart for all at any time; Opera bug-178257 |
| Opera9tp1 | fail | no stop with the second click |
| Opera9tp2/ 9.00/9.10 | fail | the top circle just jumps with a click to the initial value of the animation, the bottom one does not stop after the first click with another |
| Opera9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60 | fail | the circles just jumps to the final (or initial) value with a click |
| Opera12,00 | ok | - |
| Gecko 2.0/ 8.0/ 60.0 | fail | whenNotActive ignored |
| Gecko 12.0/ 24.0/ 36.0/ 48.0 | fail | ignores event |
e2005-10-20-02: §IQ
retarded restart:
The animation can be restarted with a click on the circle
more than 5s after the animation is
stopped (marked with a blue stroke in the first turn).
This is done with a restart whenNotActive and a click
event with a negative offset. Because of the negative
offset, only the second half of the animation is visible
with a restart. But this is the same animation as seen
before, because the initial animation had a negative
offset, too.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | negative offset ignored, no restart |
| WebKit 528.16 | ok | - |
| Adobe | fail | no animation |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | fail | restart at any time; Opera bug-178257, Opera crashes at restart or a little bit later |
| Opera9tp1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 60.0 | ok | - |
| Gecko 12.0/ 24.0/ 36.0/ 48.0 | fail | ignores event |
e2005-10-20-03: §IQ
retarded restart:
The animation can be restarted with a click on the circle
more than 5s after the animation is
stopped (marked with a blue stroke).
This is done with a restart whenNotActive and the
min attribute.
If something red gets visible for a limited time,
this is an indication, that min is interpreted wrong.
In the SMIL animation recommendation it is mentioned:
'The min attribute does not prevent an element from restarting before the minimum active duration is reached.'
Discussion: Is this applicable here? min gives the lower bound for the active duration. In this case, this
means, the active duration is corrected to the value of the min attribute. The restart attribute whenNotActive
means, the animation cannot be restarted, when it is active. In this case, it is not the min attribute preventing
from restart, it is the value of the restart attribute. Therefore the meaning of the cited sentence is, it is in
general possible to restart the animation before reaching the value of min, if this is not prevented by the
restart attribute. min is not responsible for the prevention, but the restart attribute is as in situations
without the min attribute.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no restart |
| WebKit 528.16 | ok | - |
| Adobe | fail | ignores min attribute |
| Squiggle 1.7 | fail | wrong frozen value |
| Opera8.02/50 | fail | restart at any time; Opera bug-178257 |
| Opera9tp1 | fail | ignores min attribute |
| Opera9tp2/ 9.00/9.10 | fail | wrong interpretation of the min attribute,
repeats animation |
| Opera9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | wrong frozen value |
| Gecko 2.0/ 8.0 | fail | wrong interpretation of the min attribute |
| Gecko 12.0/ 24.0/ 36.0/ 48.0 | fail | ignores event |
| Gecko 60.0 | ok | - |
e2007-06-23-01: §IQ
Interactive restart and end for animations:
The document contains six subtests with different behaviour.
They have cyan areas to activate or to mouseup to try to start the
animation of a polyline. The top subtests have
red areas too to try to stop the animation with the event
activate or mouseup. All animations have an end attribute with the
value 60s, therefore no animation can be started or restarted
after 60s anymore. This is indicated with a change of the
areas to gray. The dur values for the animations is 5s,
the repeatDur value is 10s.
The tests on the left can be restarted always
on the middle whenNotActive and on the right never.
Behaviour to be tested:
- Top left: always restartable within the 60s, stop has a visible
effect, if the animation is active.
- Bottom left: always restartable within the 60s
- Top middle: restartable whenNotActive and within 60s,
stop has a visible effect, if the animation is active
- Bottom middle: restartable whenNotActive and within 60s
- Top right: never restartable or no start after 60s,
stop has a visible effect, if the animation is active
- Bottom right: never restartable or no start after 60s
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation or interaction |
| KSVG1 | fail | crashes/freezes |
| WebKit 528.16 | fail | discrete animation, end at 60s ignored |
| Adobe | fail | end at 60s ignored |
| Squiggle 1.7 | fail | not all activations work, end at 60s ignored for top left and top middle animation |
| Opera8.02/50 | fail | no animation or interaction |
| Opera9tp1 | fail | end ignored |
| Opera9tp2/ 9.00/9.10 | fail | no end if restart is whenNotActive and end at 60s ignored |
| Opera9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | end at 60s ignored for top left and top middle animation |
| Gecko 2.0/ 8.0/ 60.0 | fail | end at 60s ignored for top left and top middle animation |
| Gecko 12.0/ 24.0/ 36.0/ 48.0 | fail | ignores event |
e2008-03-08-01: §M(1)P
begin list and restart:
The animation of cy of a circle with a duration of
4s is started with a begin list at 1s and 5s with a
restart whenNotActive. Due to the end exclusive
SMIL timing model the first turn is not active
at 5s and therefore the second begin can be started.
An animation of the cx gives the timing, the resulting
motion is indicated by a grey path covering the red fill
of the circle. If the circle does not move along the path
or the red center gets visible, an error is occurred.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no animation |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1 | fail | wrong timing |
| Opera9tp2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2008-03-08-02: §M(1)P
begin list and restart:
The animation of cy of a circle with a duration of
6s is started with a begin list at 1s and 5s with a
restart whenNotActive. Because the first turn is still
active at 5s the second begin cannot be started and is
ignored.
An animation of the cx gives the timing, the resulting
motion is indicated by a grey path covering the red fill
of the circle. If the circle does not move along the path
or the red center gets visible, an error is occurred.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no animation |
| WebKit 528.16 | ok | - |
| Adobe | fail | freezes plugin and browser |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2008-03-08-03: §M(1)P
begin list and restart:
The animation of cy of some circles with a duration of
3s is started with a begin list at 1s and some more, each
of them 2s later than the begin before.
The attributes accumulate or additive are set to sum,
but this is not relevant for a restart.
An animation of the cx gives the timing, the resulting
motion is indicated by grey paths covering the red fill
of the circles. If the circles do not move along the paths
or the red center gets visible, an error is occurred.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no animation |
| WebKit 528.16 | (ok) | minor timing problems |
| Adobe | ok | - |
| Squiggle 1.7 | fail | to animation wrong |
| Opera8.02/50 | fail | no restart |
| Opera9tp1 | fail | minor accuracy problems |
| Opera9tp2/beta1/2/ 9.00/9.10 | ok | - |
| Opera9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | wrong animations |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2011-01-11-01: §M(1)P
multiple restart with syncbase:
A dark blue circle on the left is used as a syncbase for the
animation of the blue circle.
The animation restarts multiple times.
A gray line indicates the trajectory of the blue circle.
If something red appears, an error is occurred.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | wrong frozen value |
| Adobe | ok | - |
| Squiggle 1.7 | fail | first turn wrong |
| Opera8.02/50 | fail | crash with end |
| Opera9tp1/tp2/beta1/2/ 9.00/9.10 | fail | events ignored |
| Opera9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | . |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2011-01-12-01: §IM(1)P
multiple restart with syncbase:
The animation can be started (always) with the green button
and stopped with the orange button.
Test this multiple times, at different times within or outside
active duration.
A gray line indicates the trajectory of the blue circle.
If something red appears, an error is occurred.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | wrong frozen value |
| Adobe | fail | sometimes events ignored |
| Squiggle 1.7 | fail | no animation |
| Opera8.02/50 | fail | crash with end |
| Opera9tp1 | fail | no end |
| Opera9tp2/beta1/2 | fail | no animation |
| Opera9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | some events ignored |
| Gecko 2.0/ 8.0/ 60.0 | ok | - |
| Gecko 12.0/ 24.0/ 36.0/ 48.0 | fail | ignores events |
Test results for restart
| user-agent | SVG tiny 1.1 | SVG 1.1 |
| user-agent | SVG tiny 1.1 | SVG 1.1 |
| Amaya9.51/ 11.3.1 | 0/10 | 0/10 |
| KSVG1 | 0/10 | 0/10 |
| WebKit 528.16 | 6/10 | 6/10 |
| Adobe | 4/10 | 4/10 |
| Squiggle 1.7 | 5/10 | 5/10 |
| Opera8.02/50 | 1/10 | 1/10 |
| Opera9tp1 | 3/10 | 3/10 |
| Opera9tp2 | 5/10 | 5/10 |
| Opera9beta1/2 * | 3/10 | 3/10 |
| Opera9.00/9.10 | 5/10 | 5/10 |
| Opera9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60 | 5/10 | 5/10 |
| Opera12,00 | 6/10 | 6/10 |
| Gecko 2.0/ 8.0 | 7/10 | 7/10 |
| Gecko 12.0/ 24.0/ 36.0/ 48.0 | 4/10 | 4/10 |
| Gecko 60.0 | 8/10 | 8/10 |
* Opera9 beta1/2 ignore events completely.
repeatCount
e2005-09-08-03: §M(2)P
repeatCount values:
cx of an ellipse is animated from 300 to 700 with a duration
of 14s and a repeatCount of 1.
cy of an ellipse is animated from 300 to 700 with a duration
of 12s and a repeatCount of 2.
rx of an ellipse is animated from 50 to 300 with a duration
of 10s and a repeatCount of 3.
ry of an ellipse is animated from 50 to 300 with a duration
of 8s and a repeatCount of 4.
Initial and final shapes for the repeats are given in gray for
comparison.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no repetition |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-09-08-04: §M(2)P
repeatCount values:
cx of an ellipse is animated from 300 to 700 with a duration
of 20s and a repeatCount of 1.25.
cy of an ellipse is animated from 300 to 700 with a duration
of 10s and a repeatCount of 2.5.
rx of an ellipse is animated from 50 to 300 with a duration
of 5s and a repeatCount of 5.
ry of an ellipse is animated from 50 to 300 with a duration
of 4s and a repeatCount of 6.25.
This means, all animations end exactly after 25s.
Initial and final shape are given in gray for
comparison.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no repetition |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-09-08-05: §QU
repeatCount values:
Animations with indefinite repeatCount:
cx of an ellipse is animated from 300 to 700 with a duration
of 10.2314s.
cy of an ellipse is animated from 300 to 700 with a duration
of 11.5629s.
rx of an ellipse is animated from 50 to 300 with a duration
of 8.0021s.
ry of an ellipse is animated from 50 to 300 with a duration
of 12.2031s.
fill is animated over several values with a duration of 15.7691s.
stroke is animated over several values with a duration of 16.0041s.
stroke-width is animated over several values with a duration of 10.1034s.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no repetition |
| WebKit 528.16 | fail | wrong frozen value |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | no animateColor |
Test results for repeatCount
| user-agent | SVG tiny 1.1 | SVG 1.1 |
| user-agent | SVG tiny 1.1 | SVG 1.1 |
| Amaya9.51/ 11.3.1 | 0/3 | 0/3 |
| KSVG1 | 0/3 | 0/3 |
| WebKit 528.16 | 2/3 | 2/3 |
| Adobe | 3/3 | 3/3 |
| Squiggle 1.7 | 3/3 | 3/3 |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | 3/3 | 3/3 |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | 2/3 | 2/3 |
repeatDur
e2005-09-08-06: §M(2)P
repeatDur values:
cx of an ellipse is animated from 300 to 700 with a duration
of 14s and a repeatDur of 28s.
cy of an ellipse is animated from 300 to 700 with a duration
of 12s and a repeatDur of 26s.
rx of an ellipse is animated from 50 to 300 with a duration
of 10s and a repeatDur of 24s.
ry of an ellipse is animated from 50 to 300 with a duration
of 8s and a repeatDur of 22s.
Shapes for 0s, 22s, 24s, 26s and 28s are given in gray for
comparison.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no repetition |
| WebKit 528.16 | fail | wrong frozen value |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-09-08-07: §M(2)P
repeatDur values:
cx of an ellipse is animated from 300 to 700 with a duration
of 20s and a repeatDur of 25.3451s.
cy of an ellipse is animated from 300 to 700 with a duration
of 10s and a repeatDur of 25.3451s.
rx of an ellipse is animated from 50 to 300 with a duration
of 5s and a repeatDur of 25.3451s.
ry of an ellipse is animated from 50 to 300 with a duration
of 4s and a repeatDur of 25.3451s.
This means, all animations end exactly after 25.3451s.
Initial and final shape are given in gray for
comparison.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no repetition |
| WebKit 528.16 | fail | wrong frozen value |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-09-08-08: §QU
repeatDur values:
Animations with indefinite repeatDur:
cx of an ellipse is animated from 300 to 700 with a duration
of 10.2314s.
cy of an ellipse is animated from 300 to 700 with a duration
of 11.5629s.
rx of an ellipse is animated from 50 to 300 with a duration
of 8.0021s.
ry of an ellipse is animated from 50 to 300 with a duration
of 12.2031s.
fill is animated over several values with a duration of 15.7691s.
stroke is animated over several values with a duration of 16.0041s.
stroke-width is animated over several values with a duration of 10.1034s.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no repetition |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | no animateColor |
e2008-06-05-01: §M(1)P
repeatDur and repeatCount:
Animations with both repeatCount and repeatDur specified are tested.
For authors this is not recommended, but the behaviour is defined -
the shorter time is used to determine the active duration.
A red comparison is covered by the blue test completely, if the
timing is correct. Red indicates an error.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no repetition / incomplete animation |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | ok | - |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
Test results for repeatDur
| user-agent | SVG tiny 1.1 | SVG 1.1 |
| user-agent | SVG tiny 1.1 | SVG 1.1 |
| Amaya9.51/ 11.3.1 | 0/4 | 0/4 |
| KSVG1 | 0/4 | 0/4 |
| WebKit 528.16 | 2/4 | 2/4 |
| Adobe | 4/4 | 4/4 |
| Squiggle 1.7 | 4/4 | 4/4 |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | 4/4 | 4/4 |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | 3/4 | 3/4 |
fill
e2005-09-08-09: §IP
animate attribute fill:
The animation of the magenta circle is frozen with
the end value of the animation.
The animation of the light blue circle is removed to
the begin value of the animation at the end of the
animation.
The animations end after 30s or after a click on
the circles.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no stop with click, but fill result ok |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | fail | wrong frozen value for magenta after click |
| Opera8.02/50 | fail | crashes browser with click, but fill result ok if not combined with end-event. |
| Opera9tp1/ beta1/2 | fail | ignores click event, but fill result ok if not combined with end-event. |
| Opera9tp2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60 | ok | - |
| Opera12,00 | fail | remove ignored |
| Gecko 2.0/ 8.0/ 60.0 | ok | - |
| Gecko 12.0/ 24.0/ 36.0/ 48.0 | fail | ignores events |
e2005-11-05-01: §M(1)P
animate attribute fill:
cx and cy of a circle are animated from small to large in 10s.
For cx a second animation is applied after 3s for 4s from medium
to small with a fill value of freeze. This means for the overall
animation a constant small cx for the last 3s.
A gray path shows the correct trajectory of the circle.
If the red center of the circle becomes visible, an error
occurred.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | one animation ignored |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | fail | circle vanishes for the last 3s |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-11-05-02: §M(1)P
animate attribute fill:
cx and cy of a circle are discrete animated from small to large in 10s.
For cx a second animation is applied after 3s for 4s from medium
to small with a fill value of freeze. This means for the overall
animation a constant small cx for the last 3s.
A gray path shows the correct trajectory of the circle.
If the red center of the circle becomes visible, an error
occurred.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | one animation ignored |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | fail | wrong animation for the last 3s |
| Opera8.02/50/ 9tp2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Opera9tp1 | fail | wrong timing of discrete animation |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-11-05-03: §M(1)P
animate attribute fill:
cx and cy of a circle are animated from small to large in 10s.
For cx a second animation is applied after 3s for 4s from medium
to small with a fill value of freeze. This animation uses end after
7.001s to finish, the dur is given as 7s with additional not visible values.
This means for the overall animation a constant small cx for the last 3s.
A gray path shows the correct trajectory of the circle.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | one animation ignored |
| WebKit 528.16 | fail | wrong animation for the last 3s |
| Adobe | ok | - |
| Squiggle 1.7 | fail | wrong animation for the last 3s |
| Opera8.02/50/ Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Opera9tp1 | fail | wrong timing of discrete animation |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-11-05-04: §M(1)P
animate attribute fill:
cx and cy of a circle are animated from small to large in 10s.
There is an underlying not visible additional animation for cx
from large to small. For this and the cy animation the repeatDur
is 20s, for the higher priority animation of cx it is 15s with freeze.
A light gray path shows the correct trajectory of the circle for the
first run, the dark shows it for the second.
If the red center of the circle becomes visible, an error
occurred.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | one animation ignored |
| WebKit 528.16 | fail | wrong frozen value |
| Adobe | ok | - |
| Squiggle 1.7 | fail | wrong animation at the end |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2008-10-02-01: §M(1)P
animate attribute fill:
cx and cy of a circle are animated in 10s, cx with fill freeze and remove.
This sample tests especially the behaviour at the end of the simple duration
with a still active lower priority animation.
A gray path shows the correct trajectory of the circle.
If the red center of the circle becomes visible, an error is
occurred.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | no animation |
| WebKit 528.16 | ok | - |
| Adobe | ok | - |
| Squiggle 1.7 | fail | wrong animation |
| Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
Test results for fill
| user-agent | SVG tiny 1.1 | SVG 1.1 |
| user-agent | SVG tiny 1.1 | SVG 1.1 |
| Amaya9.51/ 11.3.1 | 0/6 | 0/6 |
| KSVG1 | 0/6 | 0/6 |
| WebKit 528.16 | 4/6 | 4/6 |
| Adobe | 5/6 | 5/6 |
| Squiggle 1.7 | 0/6 | 0/6 |
| Opera8.02/50 | 4/6 | 4/6 |
| Opera9tp1 | 3/6 | 3/6 |
| Opera9tp2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60 | 6/6 | 6/6 |
| Opera9 beta1/2/ 12,00 | 5/6 | 5/6 |
| Gecko 2.0/ 8.0/ 60.0 | 6/6 | 6/6 |
| Gecko 12.0/ 24.0/ 36.0/ 48.0 | 5/6 | 5/6 |
min and max
The influence of min and max is a little bit more sophisticated, therefore it is useful to look a little bit
closer to the SVG and SMIL specification to understand the behaviour.
While the end-attribute can constrain the active duration of an animation, but not extend, the attributes min and max
give more control over the active duration of an animation.
min gives the lower bound for the active duration of an animation and max an upper bound.
If the active duration is shorter than min, the element is in the time between end and min in the state
given by the fill attribute, but is still defined as active. If the active duration is longer than max, the
animation is constrained to max as the end of the active duration.
This corrected end-event can have influence on other events in the document, too, if the end of active duration is not
between min and max.
For example if another animation refers to the end of this animation (id=a1) having min or max attributes with a1.end,
this will see the corrected values for this event.
If the animation has a negative begin value, min is calculated from this value and not from the SVGload event, which
starts the visible effects of the animation.
For example, min and max may be useful in combination with interactivity. If the user does not start or stop something between
min and max, this can be triggered automatically with animations, which have min or max attributes.
e2005-09-09-01: §M(2)P
animate attribute min:
The color of a triangle is animated from dark blue to light blue in
5s, but the min is 10s.
This means after 5s the color is frozen to light blue, but
the animation is still active for another 5s.
The end of the color animation triggers a set animation
of the color to blue for 5s.
The stroke has the same color animation but with simple
clock values for begin and no min.
A difference in the colors of stroke and fill indicates an
error.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51 | fail | no animation |
| Amaya11.3.1 | fail | wrong animation |
| KSVG1 | fail | no animation |
| WebKit 528.16 | ok | - |
| Adobe | fail | ignores attribute |
| Squiggle 1.7 | fail | wrong frozen value |
| Opera8.02/50 | fail | ignores attribute |
| Opera9tp1 | fail | ignores attribute |
| Opera9tp2/ beta1/2/ 9.00/9.10 | fail | repeats animation instead to freeze it until the reach of min |
| Opera9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0 | fail | ignored |
| Gecko 36.0/ 48.0/ 60.0 | ok | - |
e2005-09-09-02: §M(1)PX
animate attribute min:
A square is rotated within 10s. It is restarted at the end of
this animation. The active duration is extended with min to
15s. This means, the rotation will stop after one turn for
5s and is then repeated.
Note that the repetition bases on a recursive call - this is not
described in the SMIL animation recommendation, user agents
can ignore this and can stop without repetition.
Either the user agent repeats or not. In both cases the square
will cover the red square completely for 15s. If the user agent
repeats, the red square will never get visible, if not, only
a gray square will continue moving and the blue one is
frozen. If something red gets visible, an error occurred.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | wrong animation |
| KSVG1 | fail | no animation |
| WebKit 528.16 | ok | (interpretes the recursion) |
| Adobe | fail | ignores attribute |
| Squiggle 1.7 | ok | (interpretes the recursion) |
| Opera8.02/50 | fail | crashes browser |
| Opera9tp1 | fail | no repetition, ignores attribute |
| Opera9tp2/ beta1/2/ 9.00/9.10 | fail | repeats all the time |
| Opera9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | (interpretes the recursion) |
| Gecko 2.0/ 8.0/ 12.0/ 24.0 | fail | ignored |
| Gecko 36.0/ 48.0/ 60.0 | ok | - |
e2005-09-09-03: §IM(1)P
animate attribute min:
A square is rotated within 10s. It is restarted with a click
on the rectangle. The active duration is extended with min to
20s. This means, the earliest time, the animation can be started
is 20s, indicated with a change of the colour of the rectangle.
The effect is, if the stroke of the rectangle is blue, the animation can be
restarted, if it is gray, it cannot be restarted
(clicking in a time with gray stroke will confuse the
marking with the stroke colour until the next begin of the
animation).
If something red gets
visible, an error occurred.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | wrong animation |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | stroke not animated |
| Adobe | fail | ignores attribute |
| Squiggle 1.7 | fail | test almost ok, but wrong error messages due to single values animation |
| Opera8.02/50 | fail | ignores attribute |
| Opera9tp1 | fail | ignores attribute |
| Opera9tp2/ beta1/2/ 9.00/9.10 | fail | Timing ok, but does not freeze animation after dur. beta1/2not interactive. |
| Opera9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Opera12,00 | fail | some events ignored |
| Gecko 2.0/ 8.0 | fail | ignored |
| Gecko 12.0/ 24.0/ 36.0/ 48.0 | fail | no interactivity |
| Gecko 60.0 | ok | - |
e2006-02-20-11: §M(1)P
animate attribute min:
Simple from to animations for cx and cy of a
circle are used with min attributes and correlated
with syncbase values.
The gray path gives the correct trajectory.
If something red becomes visible, an error
occurred.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | wrong animation |
| KSVG1 | fail | ignores attribute |
| WebKit 528.16 | fail | one wrong frozen value |
| Adobe | fail | ignores attribute |
| Squiggle 1.7 | fail | test stopped by wrong error messages due to single values animation |
| Opera8.02/50 | fail | ignores attribute |
| Opera9tp1 | fail | ignores attribute |
| Opera9tp2/ beta1/2/ 9.00/9.10 | fail | repeats until min is reached |
| Opera9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0 | fail | ignored |
| Gecko 36.0/ 48.0/ 60.0 | ok | - |
e2006-08-10-01: §M(1)P
animate attribute min:
Simple from to animations for cx and cy of a
circle are used with dur, end and min attributes and correlated
with syncbase values.
The gray path gives the correct trajectory.
If something red becomes visible, an error
occurred.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | wrong animation |
| KSVG1 | fail | ignores attribute |
| WebKit 528.16 | fail | one wrong frozen value |
| Adobe | fail | ignores attribute |
| Squiggle 1.7 | fail | test stopped by wrong error messages due to single values animation |
| Opera8.02/50 | fail | ignores attribute |
| Opera9tp1/2/ beta1/2/ 9.00/9.10 | fail | wrong animation |
| Opera9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0 | fail | ignored |
| Gecko 36.0/ 48.0/ 60.0 | ok | - |
e2006-02-20-12: §M(1)P
animate attribute max:
Simple from to animations for cx and cy of a
circle are stopped with max attributes.
The gray path gives the correct trajectory.
If the red center of the circle becomes visible, an error
occurred.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | ignores attribute |
| WebKit 528.16 | fail | circle vanishes finally |
| Adobe | fail | ignores attribute |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | fail | ignores attribute |
| Opera9tp1 | fail | ignores attribute |
| Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2006-08-11-01: §M(1)P
animate attribute max:
Simple from to animations for cx and cy of a
circle are stopped with max attributes (overwrites dur and syncbase values for end).
The gray path gives the correct trajectory.
If the red center of the circle becomes visible, an error
occurred.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | ignores attributes |
| WebKit 528.16 | fail | circle vanishes finally |
| Adobe | fail | ignores attributes |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | fail | ignores attributes, crashes after wild oscillations |
| Opera9tp1 | fail | ignores attributes |
| Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2006-08-11-02: §IM(1)P
animate attribute max:
Simple from to animations for cx and cy of a
circle are stopped with max attributes (overwrites dur and event based end).
Start the animation with a click on the circle.
The gray path gives the correct trajectory.
If the red center of the circle becomes visible, an error
occurred.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | ignores attributes, no interactivity |
| WebKit 528.16 | fail | circle vanishes finally |
| Adobe | fail | ignores attributes |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | fail | ignores attributes |
| Opera9tp1 | fail | ignores attributes |
| Opera9 beta1/2 | fail | no interactivity |
| Opera9tp2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 60.0 | ok | - |
| Gecko 12.0/ 24.0/ 36.0/ 48.0 | fail | ignores event |
e2005-09-09-04: §M(1)P
animate attribute max:
The display of a triangle is set to none with a begin of
3s and a remove fill. max is set to 4s.
After an active duration of 4s the display will
be removed to inline, the initial value of display.
For this example the max value has the same effect
as a duration of 4s.
If a red circle is getting visible, an error occurred.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | no animation |
| KSVG1 | fail | ignores attribute |
| WebKit 528.16 | fail | triangle vanishes for a few seconds |
| Adobe | fail | ignores attribute |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | fail | ignores attribute |
| Opera9tp1 | fail | ignores attribute |
| Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-09-09-05: §P
animate attributes min and max:
With min respectively max the active duration
for the blue and the yellow circle is set to 20s deviating from the
values of the dur attribute. If the stroke is set to gray,
this indicates the end of the visible animation of the object.
At the end of the active duration of the animation
the colour of one of the small circles should be set to the
same colour as the finished animated circle.
An additional circle is set to a dark green colour after 20s.
Because of the adequate set of min and max attributes
all three small circles should change their colour after
20s independently of the visible duration of animation
of the big circles.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | wrong animation |
| KSVG1 | fail | no animation |
| WebKit 528.16 | fail | wrong frozen values |
| Adobe | fail | ignores attribute |
| Squiggle 1.7 | ok | - |
| Opera8.02/50 | fail | ignores attribute |
| Opera9tp1 | fail | ignores attribute |
| Opera9tp2/ beta1/2/ 9.00/9.10 | fail | timing ok, but animation with min not frozen (fill is set to freeze) after end of dur, rotates further |
| Opera9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0 | fail | ignores min |
| Gecko 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-09-09-06: §IP
animate attributes min and max:
The begin of the rotation of the blue circle around the large
magenta circle is triggered by the end of the colour-set of the large
circle. This will end with a click on the large circle. With min
the minimum active duration is set to 10s and with max the
maximum active duration to 30s.
This means, if the circle is clicked earlier than 10s the animation
of the blue circle will start at 10s. If the circle is clicked later
than 30s or never, anyway the animation of the blue circle will
start after 30s.
Just as a time control two small gray circles will do the same
animation as the blue one, these are starting at 10s and 30s.
Additionally the colour of the large circle will switch to dark magenta,
when its set animation ends.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | wrong animation |
| KSVG1 | fail | no animation |
| WebKit 528.16 | ok | - |
| Adobe | fail | ignores attribute |
| Squiggle 1.7 | fail | ignores min? |
| Opera8.02/50 | fail | ignores attribute, click crashes
browser |
| Opera9tp1 | fail | no animation of the blue circle, ignores attribute |
| Opera9tp2/ 9.00/9.10 | fail | starts always with max |
| Opera9 beta1/2 | fail | click ignored |
| Opera9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | (re)starts additionally with max |
| Gecko 2.0/ 8.0 | fail | min ignored |
| Gecko 12.0/ 24.0/ 36.0/ 48.0 | fail | ignores event |
| Gecko 60.0 | ok | - |
e2005-09-09-06: §IP
animate attributes min and max:
The height of an rectangle can be enlarged with a click on the
start button and this can be stopped with the stop button. It starts 1s after
the click on the start button.
The duration is 40s, min is 20s, max is 30s with the related size
of the rectangle marked in gray.
This means:
1. The animation can be started or restarted always with a click
on the start button because this is not prevented in the document.
2. If the animation is started and not restarted earlier as it ends
somewhere between the min and the max value.
3. If the stop button is clicked after the animation reached the
max value or never, the animation has already stopped at the max
value and nothing more happens.
4. If the stop button is clicked between min and max the animation
stops immediately.
5. If the stop button is clicked before the animation reaches the min
value, the animation continues and is stopped at the min value.
Test results
| user-agent | result | comment |
| W3C-Validator | ok | SVG tiny 1.1 |
| Amaya9.51/ 11.3.1 | fail | wrong animation |
| KSVG1 | fail | starts immediately, ignores max and end event |
| WebKit 528.16 | fail | wrong frozen value |
| Adobe | fail | ignores attributes |
| Squiggle 1.7 | fail | ignores min, wrong frozen value with stop before max |
| Opera8.02/50 | fail | stop click crashes
browser, ignores attribute |
| Opera9tp1 | fail | start event not relyable, stop ignored, ignores attributes |
| Opera9tp2 | fail | min ignored |
| Opera9 beta1/2/ 9.00/9.10 | fail | click ignored |
| Opera9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
| Gecko 2.0/ 8.0/ 60.0 | ok | - |
| Gecko 12.0/ 24.0/ 36.0/ 48.0 | fail | ignores event |
Test results for min and max
| user-agent | SVG tiny 1.1 | SVG 1.1 |
| user-agent | SVG tiny 1.1 | SVG 1.1 |
| Amaya9.51/ 11.3.1 | 0/12 | 0/12 |
| KSVG1 | 0/12 | 0/12 |
| WebKit 528.16 | 3/12 | 3/12 |
| Adobe | 0/12 | 0/12 |
| Squiggle 1.7 | 6/12 | 6/12 |
| Opera8.02/50/ 9tp1 | 0/12 | 0/12 |
| Opera9 beta1/2 | 3/12 | 3/12 |
| Opera9tp2/ 9.00/9.10 | 4/12 | 4/12 |
| Opera9.50 alpha/beta/ 9.52/10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60 | 11/12 | 11/12 |
| Opera12,00 | 10/12 | 10/12 |
| Gecko 2.0/ 8.0 | 5/12 | 5/12 |
| Gecko 12.0/ 24.0 | 4/12 | 4/12 |
| Gecko 36.0/ 48.0 | 8/12 | 8/12 |
| Gecko 60.0 | 12/12 | 12/12 |
Test results for Timing
| user-agent | SVG tiny 1.1 | SVG 1.1 |
| user-agent | SVG tiny 1.1 | SVG 1.1 |
| Amaya9.51 | 7/173 | 7/176 |
| Amaya11.3.1 | 8/173 | 8/176 |
| KSVG1 | 9/173 | 9/176 |
| WebKit 528.16 | 61/173 | 62/176 |
| Adobe | 80/173 | 81/176 |
| Squiggle 1.7 | 90/173 | 91/176 |
| Opera8.02/50 | 44/173 | 45/176 |
| Opera9tp1 | 53/173 | 53/176 |
| Opera9tp2 | 82/173 | 83/176 |
| Opera9 beta1/2 | 61/173 | 62/176 |
| Opera9.00/9.10 | 83/173 | 84/176 |
| Opera9.50 alpha | 109/173 | 110/176 |
| Opera9.50 beta/ 9.52/10.0 alpha/beta/ 10.0 | 110/173 | 111/176 |
| Opera10.60/ 11.00 | 111/173 | 112/176 |
| Opera11.60 | 114/173 | 115/176 |
| Opera12,00 | 106/173 | 107/176 |
| Gecko 2.0 | 53/173 | 53/176 |
| Gecko 8.0 | 56/173 | 56/176 |
| Gecko 12.0 | 43/173 | 43/176 |
| Gecko 24.0 | 42/173 | 42/176 |
| Gecko 36.0/ 48.0 | 46/173 | 46/176 |
| Gecko 60.0 | 63/173 | 63/176 |
