summaryrefslogtreecommitdiffstats
path: root/layout/reftests/svg/smil
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 17:32:43 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 17:32:43 +0000
commit6bf0a5cb5034a7e684dcc3500e841785237ce2dd (patch)
treea68f146d7fa01f0134297619fbe7e33db084e0aa /layout/reftests/svg/smil
parentInitial commit. (diff)
downloadthunderbird-6bf0a5cb5034a7e684dcc3500e841785237ce2dd.tar.xz
thunderbird-6bf0a5cb5034a7e684dcc3500e841785237ce2dd.zip
Adding upstream version 1:115.7.0.upstream/1%115.7.0upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'layout/reftests/svg/smil')
-rw-r--r--layout/reftests/svg/smil/anim-additive-fallback-1.svg14
-rw-r--r--layout/reftests/svg/smil/anim-change-display-block-for-dynamically-appended-elem.html37
-rw-r--r--layout/reftests/svg/smil/anim-change-display-none-for-ancestor-elem.html25
-rw-r--r--layout/reftests/svg/smil/anim-change-display-none-for-dynamically-appended-elem.html33
-rw-r--r--layout/reftests/svg/smil/anim-change-display-none-for-target-elem.html25
-rw-r--r--layout/reftests/svg/smil/anim-class-01.svg23
-rw-r--r--layout/reftests/svg/smil/anim-class-02.svg22
-rw-r--r--layout/reftests/svg/smil/anim-class-03.svg22
-rw-r--r--layout/reftests/svg/smil/anim-class-04-ref.svg8
-rw-r--r--layout/reftests/svg/smil/anim-class-04.svg21
-rw-r--r--layout/reftests/svg/smil/anim-clipPath-viewBox-ref.svg5
-rw-r--r--layout/reftests/svg/smil/anim-clipPath-viewBox.svg12
-rw-r--r--layout/reftests/svg/smil/anim-conditions-01.svg12
-rw-r--r--layout/reftests/svg/smil/anim-conditions-02.svg12
-rw-r--r--layout/reftests/svg/smil/anim-defs-fill.svg22
-rw-r--r--layout/reftests/svg/smil/anim-defs-gradient-attribute.svg25
-rw-r--r--layout/reftests/svg/smil/anim-defs-gradient-property.svg25
-rw-r--r--layout/reftests/svg/smil/anim-defs-width.svg22
-rw-r--r--layout/reftests/svg/smil/anim-discrete-replace-sum-1.svg12
-rw-r--r--layout/reftests/svg/smil/anim-discrete-sum-none-1.svg12
-rw-r--r--layout/reftests/svg/smil/anim-discrete-sum-sum-1.svg12
-rw-r--r--layout/reftests/svg/smil/anim-discrete-to-1.svg10
-rw-r--r--layout/reftests/svg/smil/anim-discrete-to-2.svg10
-rw-r--r--layout/reftests/svg/smil/anim-discrete-to-3.svg10
-rw-r--r--layout/reftests/svg/smil/anim-discrete-to-4.svg10
-rw-r--r--layout/reftests/svg/smil/anim-discrete-values-1.svg10
-rw-r--r--layout/reftests/svg/smil/anim-discrete-values-2.svg31
-rw-r--r--layout/reftests/svg/smil/anim-discrete-values-3.svg21
-rw-r--r--layout/reftests/svg/smil/anim-display-in-g-element.svg23
-rw-r--r--layout/reftests/svg/smil/anim-display.svg20
-rw-r--r--layout/reftests/svg/smil/anim-feComponentTransfer-01.svg32
-rw-r--r--layout/reftests/svg/smil/anim-feComposite-operator-01.svg38
-rw-r--r--layout/reftests/svg/smil/anim-feConvolveMatrix-order-01-ref.svg20
-rw-r--r--layout/reftests/svg/smil/anim-feConvolveMatrix-order-01.svg53
-rw-r--r--layout/reftests/svg/smil/anim-feConvolveMatrix-preserveAlpha-01.svg41
-rw-r--r--layout/reftests/svg/smil/anim-feDistantLight-01-ref.svg17
-rw-r--r--layout/reftests/svg/smil/anim-feDistantLight-01.svg25
-rw-r--r--layout/reftests/svg/smil/anim-feFuncR-tableValues-01-ref.svg52
-rw-r--r--layout/reftests/svg/smil/anim-feFuncR-tableValues-01.svg101
-rw-r--r--layout/reftests/svg/smil/anim-feGaussianBlur-01.svg25
-rw-r--r--layout/reftests/svg/smil/anim-feImage-preserveAspectRatio-01.svg31
-rw-r--r--layout/reftests/svg/smil/anim-feOffset-01.svg34
-rw-r--r--layout/reftests/svg/smil/anim-feSpotLight-01-ref.svg18
-rw-r--r--layout/reftests/svg/smil/anim-feSpotLight-01.svg26
-rw-r--r--layout/reftests/svg/smil/anim-feTurbulence-numOctaves-01-ref.svg26
-rw-r--r--layout/reftests/svg/smil/anim-feTurbulence-numOctaves-01.svg217
-rw-r--r--layout/reftests/svg/smil/anim-feTurbulence-numOctaves-02.svg202
-rw-r--r--layout/reftests/svg/smil/anim-fill-overpaintserver-1.svg10
-rw-r--r--layout/reftests/svg/smil/anim-fill-overpaintserver-2.svg18
-rw-r--r--layout/reftests/svg/smil/anim-fillcolor-1.svg10
-rw-r--r--layout/reftests/svg/smil/anim-fillopacity-1css.svg10
-rw-r--r--layout/reftests/svg/smil/anim-fillopacity-1none.svg10
-rw-r--r--layout/reftests/svg/smil/anim-fillopacity-1xml.svg10
-rw-r--r--layout/reftests/svg/smil/anim-filter-filterUnits-01.svg42
-rw-r--r--layout/reftests/svg/smil/anim-filter-href-01.svg34
-rw-r--r--layout/reftests/svg/smil/anim-filter-primitive-size-01.svg32
-rw-r--r--layout/reftests/svg/smil/anim-filter-size-01.svg31
-rw-r--r--layout/reftests/svg/smil/anim-gradient-attr-presence-01-ref.svg142
-rw-r--r--layout/reftests/svg/smil/anim-gradient-attr-presence-01.svg193
-rw-r--r--layout/reftests/svg/smil/anim-gradient-href-01.svg29
-rw-r--r--layout/reftests/svg/smil/anim-height-done-1a.svg11
-rw-r--r--layout/reftests/svg/smil/anim-height-done-1b.svg11
-rw-r--r--layout/reftests/svg/smil/anim-height-done-2.svg12
-rw-r--r--layout/reftests/svg/smil/anim-height-interp-1-ref.svg3
-rw-r--r--layout/reftests/svg/smil/anim-height-interp-1.svg10
-rw-r--r--layout/reftests/svg/smil/anim-height-interp-2-ref.svg3
-rw-r--r--layout/reftests/svg/smil/anim-height-interp-2.svg10
-rw-r--r--layout/reftests/svg/smil/anim-height-interp-3-ref.svg3
-rw-r--r--layout/reftests/svg/smil/anim-height-interp-3.svg10
-rw-r--r--layout/reftests/svg/smil/anim-height-interp-4-ref.svg3
-rw-r--r--layout/reftests/svg/smil/anim-height-interp-4.svg10
-rw-r--r--layout/reftests/svg/smil/anim-height-interp-5-ref.svg3
-rw-r--r--layout/reftests/svg/smil/anim-height-interp-5.svg10
-rw-r--r--layout/reftests/svg/smil/anim-height-interp-6-ref.svg3
-rw-r--r--layout/reftests/svg/smil/anim-height-interp-6.svg10
-rw-r--r--layout/reftests/svg/smil/anim-image-href-01.svg22
-rw-r--r--layout/reftests/svg/smil/anim-indefinite-to-1.svg7
-rw-r--r--layout/reftests/svg/smil/anim-indefinite-to-2.svg8
-rw-r--r--layout/reftests/svg/smil/anim-indefinite-to-3.svg8
-rw-r--r--layout/reftests/svg/smil/anim-indefinite-to-4.svg14
-rw-r--r--layout/reftests/svg/smil/anim-length-reset-01.svg22
-rw-r--r--layout/reftests/svg/smil/anim-marker-orient-01.svg38
-rw-r--r--layout/reftests/svg/smil/anim-marker-orient-02.svg38
-rw-r--r--layout/reftests/svg/smil/anim-nonpixel-length-reset-01.svg22
-rw-r--r--layout/reftests/svg/smil/anim-offset-01.svg52
-rw-r--r--layout/reftests/svg/smil/anim-opacity-01.svg23
-rw-r--r--layout/reftests/svg/smil/anim-overflow-shorthand-ref.svg11
-rw-r--r--layout/reftests/svg/smil/anim-overflow-shorthand.svg19
-rw-r--r--layout/reftests/svg/smil/anim-paintserver-1-ref.svg3
-rw-r--r--layout/reftests/svg/smil/anim-paintserver-1.svg86
-rw-r--r--layout/reftests/svg/smil/anim-path-d-01-ref.svg134
-rw-r--r--layout/reftests/svg/smil/anim-path-d-01.svg340
-rw-r--r--layout/reftests/svg/smil/anim-pathLength-01-ref.svg14
-rw-r--r--layout/reftests/svg/smil/anim-pathLength-01.svg35
-rw-r--r--layout/reftests/svg/smil/anim-pattern-attr-presence-01-ref.svg103
-rw-r--r--layout/reftests/svg/smil/anim-pattern-attr-presence-01.svg138
-rw-r--r--layout/reftests/svg/smil/anim-pattern-attr-presence-02-ref.svg35
-rw-r--r--layout/reftests/svg/smil/anim-pattern-attr-presence-02.svg52
-rw-r--r--layout/reftests/svg/smil/anim-pattern-href-01.svg28
-rw-r--r--layout/reftests/svg/smil/anim-polygon-points-01-ref.svg17
-rw-r--r--layout/reftests/svg/smil/anim-polygon-points-01.svg73
-rw-r--r--layout/reftests/svg/smil/anim-polyline-points-01-ref.svg17
-rw-r--r--layout/reftests/svg/smil/anim-polyline-points-01.svg73
-rw-r--r--layout/reftests/svg/smil/anim-rect-rxry-1-ref.svg25
-rw-r--r--layout/reftests/svg/smil/anim-rect-rxry-1.svg65
-rw-r--r--layout/reftests/svg/smil/anim-remove-1.svg23
-rw-r--r--layout/reftests/svg/smil/anim-remove-2.svg23
-rw-r--r--layout/reftests/svg/smil/anim-remove-3.svg22
-rw-r--r--layout/reftests/svg/smil/anim-remove-4.svg22
-rw-r--r--layout/reftests/svg/smil/anim-remove-5.svg24
-rw-r--r--layout/reftests/svg/smil/anim-remove-6.svg25
-rw-r--r--layout/reftests/svg/smil/anim-remove-7.svg23
-rw-r--r--layout/reftests/svg/smil/anim-remove-8css.svg35
-rw-r--r--layout/reftests/svg/smil/anim-remove-8xml.svg34
-rw-r--r--layout/reftests/svg/smil/anim-remove-9.svg27
-rw-r--r--layout/reftests/svg/smil/anim-retarget-1.svg25
-rw-r--r--layout/reftests/svg/smil/anim-retarget-2.svg25
-rw-r--r--layout/reftests/svg/smil/anim-retarget-3.svg23
-rw-r--r--layout/reftests/svg/smil/anim-retarget-4.svg25
-rw-r--r--layout/reftests/svg/smil/anim-retarget-5.svg25
-rw-r--r--layout/reftests/svg/smil/anim-retarget-6.svg23
-rw-r--r--layout/reftests/svg/smil/anim-retarget-7.svg24
-rw-r--r--layout/reftests/svg/smil/anim-retarget-8.svg24
-rw-r--r--layout/reftests/svg/smil/anim-standard-ref.html9
-rw-r--r--layout/reftests/svg/smil/anim-standard-ref.svg3
-rw-r--r--layout/reftests/svg/smil/anim-strokecolor-1.svg12
-rw-r--r--layout/reftests/svg/smil/anim-strokewidth-1xml.svg11
-rw-r--r--layout/reftests/svg/smil/anim-svg-preserveAspectRatio-01.svg40
-rw-r--r--layout/reftests/svg/smil/anim-svg-viewBox-01.svg32
-rw-r--r--layout/reftests/svg/smil/anim-svg-viewBox-02.svg22
-rw-r--r--layout/reftests/svg/smil/anim-svg-viewBox-03.svg18
-rw-r--r--layout/reftests/svg/smil/anim-targethref-1.svg10
-rw-r--r--layout/reftests/svg/smil/anim-targethref-10.svg9
-rw-r--r--layout/reftests/svg/smil/anim-targethref-2.svg18
-rw-r--r--layout/reftests/svg/smil/anim-targethref-3.svg15
-rw-r--r--layout/reftests/svg/smil/anim-targethref-4.svg20
-rw-r--r--layout/reftests/svg/smil/anim-targethref-5.svg21
-rw-r--r--layout/reftests/svg/smil/anim-targethref-6.svg18
-rw-r--r--layout/reftests/svg/smil/anim-targethref-7.svg18
-rw-r--r--layout/reftests/svg/smil/anim-targethref-8.svg20
-rw-r--r--layout/reftests/svg/smil/anim-targethref-9.svg19
-rw-r--r--layout/reftests/svg/smil/anim-text-attr-01-ref.svg31
-rw-r--r--layout/reftests/svg/smil/anim-text-attr-01.svg61
-rw-r--r--layout/reftests/svg/smil/anim-text-rotate-01-ref.svg9
-rw-r--r--layout/reftests/svg/smil/anim-text-rotate-01.svg73
-rw-r--r--layout/reftests/svg/smil/anim-text-x-y-dx-dy-01-ref.svg32
-rw-r--r--layout/reftests/svg/smil/anim-text-x-y-dx-dy-01.svg222
-rw-r--r--layout/reftests/svg/smil/anim-use-href-01.svg29
-rw-r--r--layout/reftests/svg/smil/anim-use-length-01.svg38
-rw-r--r--layout/reftests/svg/smil/anim-use-length-02.svg37
-rw-r--r--layout/reftests/svg/smil/anim-view-01.svg34
-rw-r--r--layout/reftests/svg/smil/anim-width-done-1a.svg11
-rw-r--r--layout/reftests/svg/smil/anim-width-done-1b.svg11
-rw-r--r--layout/reftests/svg/smil/anim-x-done-1a.svg10
-rw-r--r--layout/reftests/svg/smil/anim-x-done-1b.svg10
-rw-r--r--layout/reftests/svg/smil/anim-x-interp-1-ref.svg3
-rw-r--r--layout/reftests/svg/smil/anim-x-interp-1.svg10
-rw-r--r--layout/reftests/svg/smil/anim-x-interp-2-ref.svg3
-rw-r--r--layout/reftests/svg/smil/anim-x-interp-2.svg10
-rw-r--r--layout/reftests/svg/smil/anim-x-interp-3-ref.svg3
-rw-r--r--layout/reftests/svg/smil/anim-x-interp-3.svg10
-rw-r--r--layout/reftests/svg/smil/anim-x-interp-4-ref.svg3
-rw-r--r--layout/reftests/svg/smil/anim-x-interp-4.svg10
-rw-r--r--layout/reftests/svg/smil/anim-x-interp-5-ref.svg3
-rw-r--r--layout/reftests/svg/smil/anim-x-interp-5.svg10
-rw-r--r--layout/reftests/svg/smil/anim-x-interp-6-ref.svg3
-rw-r--r--layout/reftests/svg/smil/anim-x-interp-6.svg10
-rw-r--r--layout/reftests/svg/smil/anim-y-done-1a.svg10
-rw-r--r--layout/reftests/svg/smil/anim-y-done-1b.svg10
-rw-r--r--layout/reftests/svg/smil/anim-y-interp-1-ref.svg3
-rw-r--r--layout/reftests/svg/smil/anim-y-interp-1.svg10
-rw-r--r--layout/reftests/svg/smil/anim-y-interp-2-ref.svg3
-rw-r--r--layout/reftests/svg/smil/anim-y-interp-2.svg10
-rw-r--r--layout/reftests/svg/smil/anim-y-interp-3-ref.svg3
-rw-r--r--layout/reftests/svg/smil/anim-y-interp-3.svg10
-rw-r--r--layout/reftests/svg/smil/anim-y-interp-4-ref.svg3
-rw-r--r--layout/reftests/svg/smil/anim-y-interp-4.svg10
-rw-r--r--layout/reftests/svg/smil/anim-y-interp-5-ref.svg3
-rw-r--r--layout/reftests/svg/smil/anim-y-interp-5.svg10
-rw-r--r--layout/reftests/svg/smil/anim-y-interp-6-ref.svg3
-rw-r--r--layout/reftests/svg/smil/anim-y-interp-6.svg10
-rw-r--r--layout/reftests/svg/smil/api-sanity-1.svg33
-rw-r--r--layout/reftests/svg/smil/container/deferred-anim-1-ref.xhtml12
-rw-r--r--layout/reftests/svg/smil/container/deferred-anim-1.xhtml70
-rw-r--r--layout/reftests/svg/smil/container/deferred-tree-1-ref.xhtml15
-rw-r--r--layout/reftests/svg/smil/container/deferred-tree-1.xhtml87
-rw-r--r--layout/reftests/svg/smil/container/deferred-tree-2-ref.xhtml17
-rw-r--r--layout/reftests/svg/smil/container/deferred-tree-2a.xhtml44
-rw-r--r--layout/reftests/svg/smil/container/deferred-tree-2b.xhtml44
-rw-r--r--layout/reftests/svg/smil/container/deferred-tree-3-ref.xhtml17
-rw-r--r--layout/reftests/svg/smil/container/deferred-tree-3a.xhtml35
-rw-r--r--layout/reftests/svg/smil/container/deferred-tree-3b.xhtml35
-rw-r--r--layout/reftests/svg/smil/container/deferred-tree-3c.xhtml40
-rw-r--r--layout/reftests/svg/smil/container/deferred-tree-3d.xhtml42
-rw-r--r--layout/reftests/svg/smil/container/deferred-tree-util.js39
-rw-r--r--layout/reftests/svg/smil/container/enveloped-tree-1-ref.xhtml25
-rw-r--r--layout/reftests/svg/smil/container/enveloped-tree-1.xhtml70
-rw-r--r--layout/reftests/svg/smil/container/invalid-elem-1-ref.xhtml19
-rw-r--r--layout/reftests/svg/smil/container/invalid-elem-1.xhtml74
-rw-r--r--layout/reftests/svg/smil/container/moved-tree-1-ref.xhtml31
-rw-r--r--layout/reftests/svg/smil/container/moved-tree-1.xhtml74
-rw-r--r--layout/reftests/svg/smil/container/promoted-tree-1-ref.xhtml26
-rw-r--r--layout/reftests/svg/smil/container/promoted-tree-1.xhtml71
-rw-r--r--layout/reftests/svg/smil/container/reftest.list18
-rw-r--r--layout/reftests/svg/smil/event/event-begin-1.svg16
-rw-r--r--layout/reftests/svg/smil/event/event-begin-load-1.svg14
-rw-r--r--layout/reftests/svg/smil/event/event-begin-offset-1.svg16
-rw-r--r--layout/reftests/svg/smil/event/event-begin-offset-2.svg16
-rw-r--r--layout/reftests/svg/smil/event/event-begin-timeevent-1.svg17
-rw-r--r--layout/reftests/svg/smil/event/event-begin-timeevent-2.svg18
-rw-r--r--layout/reftests/svg/smil/event/event-begin-timeevent-3.svg36
-rw-r--r--layout/reftests/svg/smil/event/event-bubble-1.svg18
-rw-r--r--layout/reftests/svg/smil/event/event-custom-1.svg26
-rw-r--r--layout/reftests/svg/smil/event/event-end-1.svg16
-rw-r--r--layout/reftests/svg/smil/event/event-end-2.svg18
-rw-r--r--layout/reftests/svg/smil/event/event-end-open-1.svg20
-rw-r--r--layout/reftests/svg/smil/event/event-end-trimmed-1.svg17
-rw-r--r--layout/reftests/svg/smil/event/event-preventDefault-1.svg16
-rw-r--r--layout/reftests/svg/smil/event/event-seek-1.svg20
-rw-r--r--layout/reftests/svg/smil/event/event-target-default-1.svg15
-rw-r--r--layout/reftests/svg/smil/event/event-target-default-2.svg14
-rw-r--r--layout/reftests/svg/smil/event/event-target-id-change-1.svg15
-rw-r--r--layout/reftests/svg/smil/event/event-target-id-change-2.svg16
-rw-r--r--layout/reftests/svg/smil/event/event-target-id-change-3.svg16
-rw-r--r--layout/reftests/svg/smil/event/event-target-non-svg-1.xhtml41
-rw-r--r--layout/reftests/svg/smil/event/event-target-surgery-1.svg17
-rw-r--r--layout/reftests/svg/smil/event/event-target-surgery-2.svg15
-rw-r--r--layout/reftests/svg/smil/event/event-target-surgery-3.svg32
-rw-r--r--layout/reftests/svg/smil/event/event-target-xlink-change-1.svg17
-rw-r--r--layout/reftests/svg/smil/event/event-target-xlink-change-2.svg18
-rw-r--r--layout/reftests/svg/smil/event/event-target-xlink-change-3.svg18
-rw-r--r--layout/reftests/svg/smil/event/event-target-xlink-change-4.svg18
-rw-r--r--layout/reftests/svg/smil/event/event-util.js24
-rw-r--r--layout/reftests/svg/smil/event/green-box-ref.svg3
-rw-r--r--layout/reftests/svg/smil/event/green-box-ref.xhtml8
-rw-r--r--layout/reftests/svg/smil/event/reftest.list30
-rw-r--r--layout/reftests/svg/smil/filtered-instance-time-1.svg63
-rw-r--r--layout/reftests/svg/smil/freeze-applied-late-1.svg22
-rw-r--r--layout/reftests/svg/smil/freeze-applied-late-2.svg24
-rw-r--r--layout/reftests/svg/smil/freeze-applied-late-3.svg23
-rw-r--r--layout/reftests/svg/smil/freeze-applied-late-4.svg30
-rw-r--r--layout/reftests/svg/smil/frozen-to-anim-1.svg33
-rw-r--r--layout/reftests/svg/smil/inactivate-with-active-unchanged-1.svg23
-rw-r--r--layout/reftests/svg/smil/inactivate-with-active-unchanged-2.svg17
-rw-r--r--layout/reftests/svg/smil/lime.html8
-rw-r--r--layout/reftests/svg/smil/lime.svg8
-rw-r--r--layout/reftests/svg/smil/mapped-attr-long-url-1.svg13
-rw-r--r--layout/reftests/svg/smil/mapped-attr-long-url-2.svg32
-rw-r--r--layout/reftests/svg/smil/min-1.svg24
-rw-r--r--layout/reftests/svg/smil/motion/animateMotion-by-1.svg53
-rw-r--r--layout/reftests/svg/smil/motion/animateMotion-by-2.svg16
-rw-r--r--layout/reftests/svg/smil/motion/animateMotion-flattening-1.svg26
-rw-r--r--layout/reftests/svg/smil/motion/animateMotion-from-to-1.svg44
-rw-r--r--layout/reftests/svg/smil/motion/animateMotion-indefinite-to-1.svg10
-rw-r--r--layout/reftests/svg/smil/motion/animateMotion-indefinite-to-2.svg11
-rw-r--r--layout/reftests/svg/smil/motion/animateMotion-mpath-pathLength-1.svg31
-rw-r--r--layout/reftests/svg/smil/motion/animateMotion-mpath-shadow.svg34
-rw-r--r--layout/reftests/svg/smil/motion/animateMotion-mpath-target-transform-1.svg14
-rw-r--r--layout/reftests/svg/smil/motion/animateMotion-mpath-targetChange-1.svg151
-rw-r--r--layout/reftests/svg/smil/motion/animateMotion-rotate-1a.svg63
-rw-r--r--layout/reftests/svg/smil/motion/animateMotion-rotate-1b.svg63
-rw-r--r--layout/reftests/svg/smil/motion/animateMotion-rotate-2.svg52
-rw-r--r--layout/reftests/svg/smil/motion/animateMotion-to-overridden-1.svg61
-rw-r--r--layout/reftests/svg/smil/motion/animateMotion-values-linear-1-ref.svg38
-rw-r--r--layout/reftests/svg/smil/motion/animateMotion-values-linear-1.svg15
-rw-r--r--layout/reftests/svg/smil/motion/animateMotion-values-paced-1-ref.svg38
-rw-r--r--layout/reftests/svg/smil/motion/animateMotion-values-paced-1a.svg14
-rw-r--r--layout/reftests/svg/smil/motion/animateMotion-values-paced-1b.svg15
-rw-r--r--layout/reftests/svg/smil/motion/lime.svg8
-rw-r--r--layout/reftests/svg/smil/motion/reftest.list22
-rw-r--r--layout/reftests/svg/smil/pause/init-pause-1-ref.svg5
-rw-r--r--layout/reftests/svg/smil/pause/init-pause-1.svg49
-rw-r--r--layout/reftests/svg/smil/pause/reftest.list2
-rw-r--r--layout/reftests/svg/smil/reftest.list297
-rw-r--r--layout/reftests/svg/smil/repeat/green-box-ref.svg3
-rw-r--r--layout/reftests/svg/smil/repeat/indefinite-repeat-1.svg9
-rw-r--r--layout/reftests/svg/smil/repeat/init-repeat-1-ref.svg8
-rw-r--r--layout/reftests/svg/smil/repeat/init-repeat-1.svg47
-rw-r--r--layout/reftests/svg/smil/repeat/reftest.list3
-rw-r--r--layout/reftests/svg/smil/restart/green-box-ref.svg3
-rw-r--r--layout/reftests/svg/smil/restart/reftest.list8
-rw-r--r--layout/reftests/svg/smil/restart/reset-1-ref.svg6
-rw-r--r--layout/reftests/svg/smil/restart/reset-1.svg84
-rw-r--r--layout/reftests/svg/smil/restart/reset-2.svg33
-rw-r--r--layout/reftests/svg/smil/restart/reset-3.svg39
-rw-r--r--layout/reftests/svg/smil/restart/reset-4.svg27
-rw-r--r--layout/reftests/svg/smil/restart/reset-6.svg58
-rw-r--r--layout/reftests/svg/smil/restart/reset-7.svg25
-rw-r--r--layout/reftests/svg/smil/seek/anim-standard-ref.svg3
-rw-r--r--layout/reftests/svg/smil/seek/anim-standard-ref.xhtml8
-rw-r--r--layout/reftests/svg/smil/seek/anim-x-seek-1a.svg18
-rw-r--r--layout/reftests/svg/smil/seek/anim-x-seek-1b.svg18
-rw-r--r--layout/reftests/svg/smil/seek/anim-x-seek-1c.svg18
-rw-r--r--layout/reftests/svg/smil/seek/anim-x-seek-1d.svg18
-rw-r--r--layout/reftests/svg/smil/seek/anim-x-seek-1e.svg17
-rw-r--r--layout/reftests/svg/smil/seek/anim-x-seek-cross-container-1a.xhtml35
-rw-r--r--layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1a.svg20
-rw-r--r--layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1b.svg19
-rw-r--r--layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1c.svg31
-rw-r--r--layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1d.svg30
-rw-r--r--layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1e.svg23
-rw-r--r--layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1f.svg30
-rw-r--r--layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1g.svg23
-rw-r--r--layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1h.svg21
-rw-r--r--layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1i.svg31
-rw-r--r--layout/reftests/svg/smil/seek/anim-x-seek-negative-1a.svg16
-rw-r--r--layout/reftests/svg/smil/seek/reftest.list17
-rw-r--r--layout/reftests/svg/smil/set/reftest.list2
-rw-r--r--layout/reftests/svg/smil/set/set-css-fontsize-freeze-1-ref.svg11
-rw-r--r--layout/reftests/svg/smil/set/set-css-fontsize-freeze-1.svg16
-rw-r--r--layout/reftests/svg/smil/set/set-css-fontsize-remove-1-ref.svg11
-rw-r--r--layout/reftests/svg/smil/set/set-css-fontsize-remove-1.svg16
-rw-r--r--layout/reftests/svg/smil/shadow-dom-01.html23
-rw-r--r--layout/reftests/svg/smil/smil-grid.js200
-rw-r--r--layout/reftests/svg/smil/smil-transitions-interaction-1a.svg12
-rw-r--r--layout/reftests/svg/smil/smil-transitions-interaction-1b.svg13
-rw-r--r--layout/reftests/svg/smil/smil-transitions-interaction-2a.svg12
-rw-r--r--layout/reftests/svg/smil/smil-transitions-interaction-2b.svg13
-rw-r--r--layout/reftests/svg/smil/smil-transitions-interaction-3a.svg14
-rw-r--r--layout/reftests/svg/smil/smil-transitions-interaction-3b.svg15
-rw-r--r--layout/reftests/svg/smil/smil-transitions-interaction-4a.svg21
-rw-r--r--layout/reftests/svg/smil/smil-transitions-interaction-4b.svg21
-rw-r--r--layout/reftests/svg/smil/smil-util.js26
-rw-r--r--layout/reftests/svg/smil/sort/reftest.list12
-rw-r--r--layout/reftests/svg/smil/sort/sort-additive-1-ref.svg44
-rw-r--r--layout/reftests/svg/smil/sort/sort-additive-1.svg116
-rw-r--r--layout/reftests/svg/smil/sort/sort-startAfter-1-ref.svg4
-rw-r--r--layout/reftests/svg/smil/sort/sort-startAfter-1.svg16
-rw-r--r--layout/reftests/svg/smil/sort/sort-startAfter-2-ref.svg4
-rw-r--r--layout/reftests/svg/smil/sort/sort-startAfter-2.svg18
-rw-r--r--layout/reftests/svg/smil/sort/sort-startAfter-3-ref.svg4
-rw-r--r--layout/reftests/svg/smil/sort/sort-startAfter-3.svg18
-rw-r--r--layout/reftests/svg/smil/sort/sort-startSame-1-ref.svg4
-rw-r--r--layout/reftests/svg/smil/sort/sort-startSame-1a.svg16
-rw-r--r--layout/reftests/svg/smil/sort/sort-startSame-1b.svg31
-rw-r--r--layout/reftests/svg/smil/sort/sort-startSame-2-ref.svg4
-rw-r--r--layout/reftests/svg/smil/sort/sort-startSame-2a.svg18
-rw-r--r--layout/reftests/svg/smil/sort/sort-startSame-2b.svg33
-rw-r--r--layout/reftests/svg/smil/style/anim-css-color-1-by-ident-hex.svg17
-rw-r--r--layout/reftests/svg/smil/style/anim-css-color-1-from-by-hex-hex.svg18
-rw-r--r--layout/reftests/svg/smil/style/anim-css-color-1-from-by-ident-hex.svg18
-rw-r--r--layout/reftests/svg/smil/style/anim-css-color-1-from-to-hex-hex.svg18
-rw-r--r--layout/reftests/svg/smil/style/anim-css-color-1-from-to-ident-ident.svg18
-rw-r--r--layout/reftests/svg/smil/style/anim-css-color-1-to-ident-hex.svg17
-rw-r--r--layout/reftests/svg/smil/style/anim-css-color-1-to-ident-ident.svg17
-rw-r--r--layout/reftests/svg/smil/style/anim-css-color-2-paced-rgb.svg20
-rw-r--r--layout/reftests/svg/smil/style/anim-css-color-3-by-ident-ident.svg19
-rw-r--r--layout/reftests/svg/smil/style/anim-css-color-3-from-by-ident-ident.svg20
-rw-r--r--layout/reftests/svg/smil/style/anim-css-color-3-from-by-rgb-ident.svg20
-rw-r--r--layout/reftests/svg/smil/style/anim-css-fill-1-by-ident-curcol.svg17
-rw-r--r--layout/reftests/svg/smil/style/anim-css-fill-1-by-ident-hex.svg17
-rw-r--r--layout/reftests/svg/smil/style/anim-css-fill-1-from-by-curcol-hex.svg18
-rw-r--r--layout/reftests/svg/smil/style/anim-css-fill-1-from-by-hex-curcol.svg18
-rw-r--r--layout/reftests/svg/smil/style/anim-css-fill-1-from-by-hex-hex.svg18
-rw-r--r--layout/reftests/svg/smil/style/anim-css-fill-1-from-by-ident-hex.svg18
-rw-r--r--layout/reftests/svg/smil/style/anim-css-fill-1-from-to-curcol-hex.svg18
-rw-r--r--layout/reftests/svg/smil/style/anim-css-fill-1-from-to-hex-curcol.svg18
-rw-r--r--layout/reftests/svg/smil/style/anim-css-fill-1-from-to-hex-hex.svg18
-rw-r--r--layout/reftests/svg/smil/style/anim-css-fill-1-from-to-ident-ident.svg18
-rw-r--r--layout/reftests/svg/smil/style/anim-css-fill-1-ref.svg32
-rw-r--r--layout/reftests/svg/smil/style/anim-css-fill-1-to-ident-curcol.svg17
-rw-r--r--layout/reftests/svg/smil/style/anim-css-fill-1-to-ident-hex.svg17
-rw-r--r--layout/reftests/svg/smil/style/anim-css-fill-1-to-ident-ident.svg17
-rw-r--r--layout/reftests/svg/smil/style/anim-css-fill-2-paced-rgb.svg20
-rw-r--r--layout/reftests/svg/smil/style/anim-css-fill-2-ref.svg32
-rw-r--r--layout/reftests/svg/smil/style/anim-css-fill-3-by-ident-ident.svg19
-rw-r--r--layout/reftests/svg/smil/style/anim-css-fill-3-from-by-ident-ident.svg20
-rw-r--r--layout/reftests/svg/smil/style/anim-css-fill-3-from-by-rgb-ident.svg20
-rw-r--r--layout/reftests/svg/smil/style/anim-css-fill-3-ref.svg32
-rw-r--r--layout/reftests/svg/smil/style/anim-css-fill-overflow-1-by.svg20
-rw-r--r--layout/reftests/svg/smil/style/anim-css-fill-overflow-1-from-by.svg21
-rw-r--r--layout/reftests/svg/smil/style/anim-css-fill-overflow-1-ref.svg32
-rw-r--r--layout/reftests/svg/smil/style/anim-css-fillopacity-1-by.svg17
-rw-r--r--layout/reftests/svg/smil/style/anim-css-fillopacity-1-from-by.svg18
-rw-r--r--layout/reftests/svg/smil/style/anim-css-fillopacity-1-from-to.svg18
-rw-r--r--layout/reftests/svg/smil/style/anim-css-fillopacity-1-ref.svg32
-rw-r--r--layout/reftests/svg/smil/style/anim-css-fillopacity-1-to.svg17
-rw-r--r--layout/reftests/svg/smil/style/anim-css-fillopacity-2-paced.svg18
-rw-r--r--layout/reftests/svg/smil/style/anim-css-fillopacity-2-ref.svg32
-rw-r--r--layout/reftests/svg/smil/style/anim-css-fillopacity-3-clamp-big.svg27
-rw-r--r--layout/reftests/svg/smil/style/anim-css-fillopacity-3-clamp-small.svg27
-rw-r--r--layout/reftests/svg/smil/style/anim-css-fillopacity-3-ref.svg32
-rw-r--r--layout/reftests/svg/smil/style/anim-css-floodcolor-overflow-1-from-by.svg26
-rw-r--r--layout/reftests/svg/smil/style/anim-css-floodcolor-overflow-1-ref.svg40
-rw-r--r--layout/reftests/svg/smil/style/anim-css-font-1-ref.svg76
-rw-r--r--layout/reftests/svg/smil/style/anim-css-font-1.svg144
-rw-r--r--layout/reftests/svg/smil/style/anim-css-fontsize-1-from-by-pct-pct.svg16
-rw-r--r--layout/reftests/svg/smil/style/anim-css-fontsize-1-from-by-pct-px.svg16
-rw-r--r--layout/reftests/svg/smil/style/anim-css-fontsize-1-from-by-px-pct.svg16
-rw-r--r--layout/reftests/svg/smil/style/anim-css-fontsize-1-from-by-px-px.svg16
-rw-r--r--layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-no-no.svg17
-rw-r--r--layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-no-px.svg17
-rw-r--r--layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-pct-pct.svg16
-rw-r--r--layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-pct-px.svg16
-rw-r--r--layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-px-no.svg17
-rw-r--r--layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-px-pct.svg16
-rw-r--r--layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-px-px.svg16
-rw-r--r--layout/reftests/svg/smil/style/anim-css-fontsize-1-ref.svg20
-rw-r--r--layout/reftests/svg/smil/style/anim-css-fontsize-2-from-by-em-em.svg16
-rw-r--r--layout/reftests/svg/smil/style/anim-css-fontsize-2-from-by-px-em.svg16
-rw-r--r--layout/reftests/svg/smil/style/anim-css-fontsize-2-from-by-px-px.svg16
-rw-r--r--layout/reftests/svg/smil/style/anim-css-fontsize-2-ref.svg20
-rw-r--r--layout/reftests/svg/smil/style/anim-css-letterspacing-1-ref.svg3
-rw-r--r--layout/reftests/svg/smil/style/anim-css-letterspacing-1.svg8
-rw-r--r--layout/reftests/svg/smil/style/anim-css-stopcolor-overflow-1-from-by.svg27
-rw-r--r--layout/reftests/svg/smil/style/anim-css-stopcolor-overflow-1-ref.svg32
-rw-r--r--layout/reftests/svg/smil/style/anim-css-strokedasharray-1-ref.svg32
-rw-r--r--layout/reftests/svg/smil/style/anim-css-strokedasharray-1.svg18
-rw-r--r--layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-em-em.svg18
-rw-r--r--layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-em-px.svg18
-rw-r--r--layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-no-no.svg17
-rw-r--r--layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-pct-pct.svg18
-rw-r--r--layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-pct-px.svg18
-rw-r--r--layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-px-em.svg18
-rw-r--r--layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-px-pct.svg18
-rw-r--r--layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-px-px.svg17
-rw-r--r--layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-em-em.svg19
-rw-r--r--layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-em-px.svg19
-rw-r--r--layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-no-no.svg18
-rw-r--r--layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-pct-pct.svg19
-rw-r--r--layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-pct-px.svg19
-rw-r--r--layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-px-em.svg19
-rw-r--r--layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-px-pct.svg19
-rw-r--r--layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-px-px.svg18
-rw-r--r--layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-em-em.svg19
-rw-r--r--layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-em-px.svg19
-rw-r--r--layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-no-no.svg18
-rw-r--r--layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-pct-pct.svg19
-rw-r--r--layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-pct-px.svg19
-rw-r--r--layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-px-em.svg19
-rw-r--r--layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-px-pct.svg19
-rw-r--r--layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-px-px.svg18
-rw-r--r--layout/reftests/svg/smil/style/anim-css-strokewidth-1-ref.svg29
-rw-r--r--layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-em-em.svg18
-rw-r--r--layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-em-px.svg18
-rw-r--r--layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-no-no.svg17
-rw-r--r--layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-pct-pct.svg18
-rw-r--r--layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-pct-px.svg18
-rw-r--r--layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-px-em.svg18
-rw-r--r--layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-px-pct.svg18
-rw-r--r--layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-px-px.svg17
-rw-r--r--layout/reftests/svg/smil/style/anim-css-strokewidth-2-ref.svg29
-rw-r--r--layout/reftests/svg/smil/style/anim-css-strokewidth-2-values-em-em.svg18
-rw-r--r--layout/reftests/svg/smil/style/anim-css-strokewidth-2-values-em-px.svg18
-rw-r--r--layout/reftests/svg/smil/style/anim-css-strokewidth-2-values-px-em.svg18
-rw-r--r--layout/reftests/svg/smil/style/anim-css-strokewidth-2-values-px-px.svg17
-rw-r--r--layout/reftests/svg/smil/style/anim-css-strokewidth-3-paced.svg18
-rw-r--r--layout/reftests/svg/smil/style/anim-css-strokewidth-3-ref.svg29
-rw-r--r--layout/reftests/svg/smil/style/anim-css-strokewidth-4-from-by-em-em.svg19
-rw-r--r--layout/reftests/svg/smil/style/anim-css-strokewidth-4-from-by-no-no.svg18
-rw-r--r--layout/reftests/svg/smil/style/anim-css-strokewidth-4-from-by-px-em.svg19
-rw-r--r--layout/reftests/svg/smil/style/anim-css-strokewidth-4-from-by-px-px.svg18
-rw-r--r--layout/reftests/svg/smil/style/anim-css-strokewidth-4-ref.svg29
-rw-r--r--layout/reftests/svg/smil/style/anim-css-wordspacing-1-ref.svg3
-rw-r--r--layout/reftests/svg/smil/style/anim-css-wordspacing-1.svg8
-rw-r--r--layout/reftests/svg/smil/style/anim-mapped-fontsize-1-from-to-no-no.svg17
-rw-r--r--layout/reftests/svg/smil/style/anim-mapped-fontsize-1-from-to-no-px.svg17
-rw-r--r--layout/reftests/svg/smil/style/anim-mapped-fontsize-1-from-to-px-no.svg17
-rw-r--r--layout/reftests/svg/smil/style/anim-standard-ref.svg3
-rw-r--r--layout/reftests/svg/smil/style/important-set-1.svg8
-rw-r--r--layout/reftests/svg/smil/style/important-set-2.svg11
-rw-r--r--layout/reftests/svg/smil/style/namespaced-property-1.svg6
-rw-r--r--layout/reftests/svg/smil/style/reftest.list169
-rw-r--r--layout/reftests/svg/smil/syncbase/changed-interval-change-spec-1.svg21
-rw-r--r--layout/reftests/svg/smil/syncbase/changed-interval-change-spec-2.svg22
-rw-r--r--layout/reftests/svg/smil/syncbase/changed-interval-change-spec-3.svg22
-rw-r--r--layout/reftests/svg/smil/syncbase/changed-interval-change-spec-4.svg27
-rw-r--r--layout/reftests/svg/smil/syncbase/changed-interval-resolved-1.svg18
-rw-r--r--layout/reftests/svg/smil/syncbase/changed-interval-resolved-2.svg20
-rw-r--r--layout/reftests/svg/smil/syncbase/changed-interval-simple-1.svg17
-rw-r--r--layout/reftests/svg/smil/syncbase/changed-interval-simple-2.svg21
-rw-r--r--layout/reftests/svg/smil/syncbase/changed-interval-simple-3.svg21
-rw-r--r--layout/reftests/svg/smil/syncbase/changed-interval-simple-4.svg18
-rw-r--r--layout/reftests/svg/smil/syncbase/changed-interval-simple-5.svg21
-rw-r--r--layout/reftests/svg/smil/syncbase/changed-interval-sort-1.svg17
-rw-r--r--layout/reftests/svg/smil/syncbase/cross-container-1.xhtml33
-rw-r--r--layout/reftests/svg/smil/syncbase/cross-container-2.xhtml43
-rw-r--r--layout/reftests/svg/smil/syncbase/cross-container-3.xhtml63
-rw-r--r--layout/reftests/svg/smil/syncbase/cycle-change-1.svg20
-rw-r--r--layout/reftests/svg/smil/syncbase/cycle-change-2.svg17
-rw-r--r--layout/reftests/svg/smil/syncbase/cycle-delete-1.svg20
-rw-r--r--layout/reftests/svg/smil/syncbase/cycle-invalid-1.svg16
-rw-r--r--layout/reftests/svg/smil/syncbase/cycle-invalid-2.svg18
-rw-r--r--layout/reftests/svg/smil/syncbase/cycle-invalid-3.svg54
-rw-r--r--layout/reftests/svg/smil/syncbase/cycle-invalid-4.svg33
-rw-r--r--layout/reftests/svg/smil/syncbase/cycle-ok-1.svg16
-rw-r--r--layout/reftests/svg/smil/syncbase/cycle-ok-2.svg20
-rw-r--r--layout/reftests/svg/smil/syncbase/cycle-ok-3.svg34
-rw-r--r--layout/reftests/svg/smil/syncbase/cycle-ok-4.svg20
-rw-r--r--layout/reftests/svg/smil/syncbase/cycle-ok-5.svg23
-rw-r--r--layout/reftests/svg/smil/syncbase/cycle-recursion-1.svg42
-rw-r--r--layout/reftests/svg/smil/syncbase/cycle-recursion-2.svg17
-rw-r--r--layout/reftests/svg/smil/syncbase/cycle-self-ref-1.svg14
-rw-r--r--layout/reftests/svg/smil/syncbase/cycle-self-ref-2.svg14
-rw-r--r--layout/reftests/svg/smil/syncbase/cycle-self-ref-3.svg19
-rw-r--r--layout/reftests/svg/smil/syncbase/cycle-self-ref-4.svg32
-rw-r--r--layout/reftests/svg/smil/syncbase/cycle-self-ref-5.svg56
-rw-r--r--layout/reftests/svg/smil/syncbase/deleted-interval-simple-1.svg22
-rw-r--r--layout/reftests/svg/smil/syncbase/deleted-interval-simple-2.svg26
-rw-r--r--layout/reftests/svg/smil/syncbase/deleted-interval-simple-3.svg21
-rw-r--r--layout/reftests/svg/smil/syncbase/deleted-interval-simple-4.svg26
-rw-r--r--layout/reftests/svg/smil/syncbase/deleted-interval-simple-5.svg21
-rw-r--r--layout/reftests/svg/smil/syncbase/filtered-interval-1.svg24
-rw-r--r--layout/reftests/svg/smil/syncbase/green-box-ref.svg3
-rw-r--r--layout/reftests/svg/smil/syncbase/green-box-ref.xhtml8
-rw-r--r--layout/reftests/svg/smil/syncbase/new-interval-chain-1.svg22
-rw-r--r--layout/reftests/svg/smil/syncbase/new-interval-chain-2.svg22
-rw-r--r--layout/reftests/svg/smil/syncbase/new-interval-doubly-dependent-1.svg16
-rw-r--r--layout/reftests/svg/smil/syncbase/new-interval-doubly-dependent-2.svg17
-rw-r--r--layout/reftests/svg/smil/syncbase/new-interval-doubly-dependent-3.svg17
-rw-r--r--layout/reftests/svg/smil/syncbase/new-interval-early-end-1.svg18
-rw-r--r--layout/reftests/svg/smil/syncbase/new-interval-early-end-2.svg17
-rw-r--r--layout/reftests/svg/smil/syncbase/new-interval-early-end-3.svg18
-rw-r--r--layout/reftests/svg/smil/syncbase/new-interval-early-end-4.svg26
-rw-r--r--layout/reftests/svg/smil/syncbase/new-interval-early-end-5.svg19
-rw-r--r--layout/reftests/svg/smil/syncbase/new-interval-early-end-6.svg16
-rw-r--r--layout/reftests/svg/smil/syncbase/new-interval-early-end-7.svg22
-rw-r--r--layout/reftests/svg/smil/syncbase/new-interval-end-dep-1.svg16
-rw-r--r--layout/reftests/svg/smil/syncbase/new-interval-end-negative-1.svg39
-rw-r--r--layout/reftests/svg/smil/syncbase/new-interval-end-negative-2.svg18
-rw-r--r--layout/reftests/svg/smil/syncbase/new-interval-freeze-begin-1.svg31
-rw-r--r--layout/reftests/svg/smil/syncbase/new-interval-negative-offset-1.svg16
-rw-r--r--layout/reftests/svg/smil/syncbase/new-interval-negative-offset-2.svg30
-rw-r--r--layout/reftests/svg/smil/syncbase/new-interval-negative-offset-3.svg18
-rw-r--r--layout/reftests/svg/smil/syncbase/new-interval-negative-offset-4.svg17
-rw-r--r--layout/reftests/svg/smil/syncbase/new-interval-negative-syncbase-1.svg16
-rw-r--r--layout/reftests/svg/smil/syncbase/new-interval-restart-1.svg17
-rw-r--r--layout/reftests/svg/smil/syncbase/new-interval-restart-2.svg17
-rw-r--r--layout/reftests/svg/smil/syncbase/new-interval-restart-3.svg17
-rw-r--r--layout/reftests/svg/smil/syncbase/new-interval-sample-order-1.svg29
-rw-r--r--layout/reftests/svg/smil/syncbase/new-interval-simple-1.svg16
-rw-r--r--layout/reftests/svg/smil/syncbase/new-interval-simple-2.svg17
-rw-r--r--layout/reftests/svg/smil/syncbase/new-interval-triply-dependent-1.svg16
-rw-r--r--layout/reftests/svg/smil/syncbase/new-interval-triply-dependent-2.svg17
-rw-r--r--layout/reftests/svg/smil/syncbase/reftest.list99
-rw-r--r--layout/reftests/svg/smil/syncbase/sandwich-priority-1.svg17
-rw-r--r--layout/reftests/svg/smil/syncbase/sandwich-priority-10.svg26
-rw-r--r--layout/reftests/svg/smil/syncbase/sandwich-priority-11.svg18
-rw-r--r--layout/reftests/svg/smil/syncbase/sandwich-priority-12.svg24
-rw-r--r--layout/reftests/svg/smil/syncbase/sandwich-priority-2.svg18
-rw-r--r--layout/reftests/svg/smil/syncbase/sandwich-priority-3.svg20
-rw-r--r--layout/reftests/svg/smil/syncbase/sandwich-priority-4.svg15
-rw-r--r--layout/reftests/svg/smil/syncbase/sandwich-priority-5.svg20
-rw-r--r--layout/reftests/svg/smil/syncbase/sandwich-priority-6.svg17
-rw-r--r--layout/reftests/svg/smil/syncbase/sandwich-priority-7.svg27
-rw-r--r--layout/reftests/svg/smil/syncbase/sandwich-priority-8.svg25
-rw-r--r--layout/reftests/svg/smil/syncbase/sandwich-priority-9.svg21
-rw-r--r--layout/reftests/svg/smil/syncbase/trimmed-interval-1.svg22
-rw-r--r--layout/reftests/svg/smil/timed/appendChild-1a-ref.svg8
-rw-r--r--layout/reftests/svg/smil/timed/appendChild-1a.svg30
-rw-r--r--layout/reftests/svg/smil/timed/appendChild-1b-ref.svg6
-rw-r--r--layout/reftests/svg/smil/timed/appendChild-1b.svg29
-rw-r--r--layout/reftests/svg/smil/timed/appendChild-2a-ref.svg8
-rw-r--r--layout/reftests/svg/smil/timed/appendChild-2a.svg30
-rw-r--r--layout/reftests/svg/smil/timed/appendChild-2b-ref.svg6
-rw-r--r--layout/reftests/svg/smil/timed/appendChild-2b.svg29
-rw-r--r--layout/reftests/svg/smil/timed/paced-1-ref.svg5
-rw-r--r--layout/reftests/svg/smil/timed/paced-1.svg22
-rw-r--r--layout/reftests/svg/smil/timed/pause-1-ref.svg6
-rw-r--r--layout/reftests/svg/smil/timed/pause-1.svg38
-rw-r--r--layout/reftests/svg/smil/timed/reftest.list14
-rw-r--r--layout/reftests/svg/smil/timed/removeChild-1-ref.svg6
-rw-r--r--layout/reftests/svg/smil/timed/removeChild-1.svg28
-rw-r--r--layout/reftests/svg/smil/timed/removeChild-2-ref.svg6
-rw-r--r--layout/reftests/svg/smil/timed/removeChild-2.svg28
-rw-r--r--layout/reftests/svg/smil/transform/additive-1-ref.svg42
-rw-r--r--layout/reftests/svg/smil/transform/additive-1.svg111
-rw-r--r--layout/reftests/svg/smil/transform/animate-width-1.svg22
-rw-r--r--layout/reftests/svg/smil/transform/lime.svg8
-rw-r--r--layout/reftests/svg/smil/transform/paced-1-ref.svg31
-rw-r--r--layout/reftests/svg/smil/transform/paced-1.svg64
-rw-r--r--layout/reftests/svg/smil/transform/reftest.list18
-rw-r--r--layout/reftests/svg/smil/transform/rotate-angle-1.svg60
-rw-r--r--layout/reftests/svg/smil/transform/rotate-angle-2.svg60
-rw-r--r--layout/reftests/svg/smil/transform/rotate-angle-3.svg60
-rw-r--r--layout/reftests/svg/smil/transform/rotate-angle-4.svg79
-rw-r--r--layout/reftests/svg/smil/transform/rotate-angle-5.svg86
-rw-r--r--layout/reftests/svg/smil/transform/rotate-angle-ref.svg38
-rw-r--r--layout/reftests/svg/smil/transform/scale-1-ref.svg43
-rw-r--r--layout/reftests/svg/smil/transform/scale-1.svg119
-rw-r--r--layout/reftests/svg/smil/transform/set-transform-1.svg27
-rw-r--r--layout/reftests/svg/smil/transform/skew-1-ref.svg43
-rw-r--r--layout/reftests/svg/smil/transform/skew-1.svg86
-rw-r--r--layout/reftests/svg/smil/transform/translate-clipPath-1.svg39
-rw-r--r--layout/reftests/svg/smil/transform/translate-gradient-1.svg29
-rw-r--r--layout/reftests/svg/smil/transform/translate-pattern-1.svg28
-rw-r--r--layout/reftests/svg/smil/transform/use-1.svg27
587 files changed, 15865 insertions, 0 deletions
diff --git a/layout/reftests/svg/smil/anim-additive-fallback-1.svg b/layout/reftests/svg/smil/anim-additive-fallback-1.svg
new file mode 100644
index 0000000000..1978663e2c
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-additive-fallback-1.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(0.5, true)">
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <rect x="15" y="15" width="200" height="200" fill="blue" display="none">
+ <!-- The following animation is marked as additive even though the display
+ property is not additive. We should basically behave as if the additive
+ attribute were not specified and set display to 'block' after 0.5s.
+ -->
+ <animate attributeName="display" from="none" to="block" additive="sum"
+ dur="1s" fill="freeze"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-change-display-block-for-dynamically-appended-elem.html b/layout/reftests/svg/smil/anim-change-display-block-for-dynamically-appended-elem.html
new file mode 100644
index 0000000000..e9be6a7cae
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-change-display-block-for-dynamically-appended-elem.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <head>
+ <title>Test dynamically-appended animation in a subtree that dynamically became 'display:none'</title>
+ </head>
+ <body style="background-color: lime;">
+ <div id="target" style="display: none;">
+ <svg>
+ <rect width="100" height="100" fill="brown" id="rect">
+ </rect>
+ </svg>
+ </div>
+ <script>
+ document.addEventListener('MozReftestInvalidate', function() {
+ var svg = document.getElementsByTagName("svg")[0];
+ svg.pauseAnimations(); // pause svg animation.
+
+ var target = document.getElementById("target");
+ var rect = document.getElementById("rect");
+ var animate = document.createElementNS('http://www.w3.org/2000/svg',
+ 'animate');
+ animate.setAttribute('attributeName', 'fill');
+ animate.setAttribute('from', 'blue');
+ animate.setAttribute('to', 'red');
+ animate.setAttribute('dur', '100s');
+ rect.appendChild(animate);
+
+ requestAnimationFrame(function(time) {
+ target.style.display = 'block';
+ requestAnimationFrame(function(time) {
+ document.documentElement.removeAttribute("class");
+ });
+ });
+ });
+ </script>
+ </body>
+</html>
diff --git a/layout/reftests/svg/smil/anim-change-display-none-for-ancestor-elem.html b/layout/reftests/svg/smil/anim-change-display-none-for-ancestor-elem.html
new file mode 100644
index 0000000000..e34f52056e
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-change-display-none-for-ancestor-elem.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <head>
+ <title>Test animation in a subtree that dynamically becames 'display:none'</title>
+ </head>
+ <body style="background-color: lime;">
+ <div id="target">
+ <svg>
+ <rect width="100%" height="100%" fill="blue">
+ <animate attributeName="fill" from="brown" to="red" dur="100s"/>
+ </rect>
+ </svg>
+ </div>
+ <script>
+ document.addEventListener('MozReftestInvalidate', function() {
+ var target = document.getElementById("target");
+ target.style.display = "none";
+
+ requestAnimationFrame(function(time) {
+ document.documentElement.removeAttribute("class");
+ });
+ });
+ </script>
+ </body>
+</html>
diff --git a/layout/reftests/svg/smil/anim-change-display-none-for-dynamically-appended-elem.html b/layout/reftests/svg/smil/anim-change-display-none-for-dynamically-appended-elem.html
new file mode 100644
index 0000000000..ecb1720b9b
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-change-display-none-for-dynamically-appended-elem.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <head>
+ <title>Test dynamically-appended animation on an element that dynamically becomes 'display:none'</title>
+ </head>
+ <body style="background-color: lime;">
+ <div>
+ <svg>
+ <rect width="100" height="100" fill="brown" id="rect">
+ </rect>
+ </svg>
+ </div>
+ <script>
+ document.addEventListener('MozReftestInvalidate', function() {
+ var rect = document.getElementById("rect");
+ var animate = document.createElementNS('http://www.w3.org/2000/svg',
+ 'animate');
+ animate.setAttribute('attributeName', 'fill');
+ animate.setAttribute('from', 'blue');
+ animate.setAttribute('to', 'red');
+ animate.setAttribute('dur', '100s');
+ rect.appendChild(animate);
+
+ requestAnimationFrame(function(time) {
+ rect.style.display = 'none';
+ requestAnimationFrame(function(time) {
+ document.documentElement.removeAttribute("class");
+ });
+ });
+ });
+ </script>
+ </body>
+</html>
diff --git a/layout/reftests/svg/smil/anim-change-display-none-for-target-elem.html b/layout/reftests/svg/smil/anim-change-display-none-for-target-elem.html
new file mode 100644
index 0000000000..6852994571
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-change-display-none-for-target-elem.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <head>
+ <title>Test animation on an element that dynamically becomes 'display:none'</title>
+ </head>
+ <body style="background-color: lime;">
+ <div>
+ <svg>
+ <rect width="100%" height="100%" fill="blue" id="rect">
+ <animate attributeName="fill" from="brown" to="red" dur="100s"/>
+ </rect>
+ </svg>
+ </div>
+ <script>
+ document.addEventListener('MozReftestInvalidate', function() {
+ var rect = document.getElementById("rect");
+ rect.style.display = "none";
+
+ requestAnimationFrame(function(time) {
+ document.documentElement.removeAttribute("class");
+ });
+ });
+ </script>
+ </body>
+</html>
diff --git a/layout/reftests/svg/smil/anim-class-01.svg b/layout/reftests/svg/smil/anim-class-01.svg
new file mode 100644
index 0000000000..4fe4faab21
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-class-01.svg
@@ -0,0 +1,23 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait" onload="setTimeAndSnapshot(1, true)">
+ <title>Test animation of the class attribute on "rect" elements</title>
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <style type="text/css">
+
+ .start {visibility: hidden; fill: red; }
+ .midway {visibility: visible; fill: red; }
+ .final {fill: lime; }
+
+ </style>
+
+ <rect width="100%" height="100%" fill="red"/>
+ <rect width="100%" height="100%">
+ <animate attributeName="class" attributeType="XML"
+ from="midway" to="final midway" begin="0.5s" dur="1s" fill="freeze"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-class-02.svg b/layout/reftests/svg/smil/anim-class-02.svg
new file mode 100644
index 0000000000..67b2b3f4d9
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-class-02.svg
@@ -0,0 +1,22 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait" onload="setTimeAndSnapshot(1, true)">
+ <title>Test animation of the class attribute on "rect" elements</title>
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <style type="text/css">
+
+ * {fill: lime;}
+ .start {visibility: visible; fill: red; }
+
+ </style>
+
+ <rect width="100%" height="100%" fill="red"/>
+ <rect width="100%" height="100%" class="start">
+ <set attributeName="class" attributeType="XML"
+ to="" begin="0.5s" dur="1s" fill="freeze"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-class-03.svg b/layout/reftests/svg/smil/anim-class-03.svg
new file mode 100644
index 0000000000..297569edfd
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-class-03.svg
@@ -0,0 +1,22 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait" onload="setTimeAndSnapshot(1, true)">
+ <title>Test animation of the class attribute on "rect" elements</title>
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <style type="text/css">
+
+ .start {fill: red; }
+ .finish {fill: lime;}
+
+ </style>
+
+ <rect width="100%" height="100%" fill="red"/>
+ <rect width="100%" height="100%" class="start">
+ <set attributeName="class" attributeType="XML"
+ to="finish" begin="0.5s" dur="1s" fill="freeze"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-class-04-ref.svg b/layout/reftests/svg/smil/anim-class-04-ref.svg
new file mode 100644
index 0000000000..0f5d535bd4
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-class-04-ref.svg
@@ -0,0 +1,8 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+ <title>Reference for animation of the class attribute to an invalid value on "rect" elements</title>
+ <rect width="100%" height="100%" fill="black"/>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-class-04.svg b/layout/reftests/svg/smil/anim-class-04.svg
new file mode 100644
index 0000000000..191b5d3b97
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-class-04.svg
@@ -0,0 +1,21 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait" onload="setTimeAndSnapshot(1, true)">
+ <title>Test animation of the class attribute on "rect" elements</title>
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <style type="text/css">
+
+ .start {fill: red; }
+
+ </style>
+
+ <rect width="100%" height="100%" fill="red"/>
+ <rect width="100%" height="100%" class="start">
+ <set attributeName="class" attributeType="XML"
+ to="#ThisIsAnInvalidClassName" begin="0.5s" dur="1s" fill="freeze"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-clipPath-viewBox-ref.svg b/layout/reftests/svg/smil/anim-clipPath-viewBox-ref.svg
new file mode 100644
index 0000000000..ffc7694ba4
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-clipPath-viewBox-ref.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="600" height="400">
+ <circle cx="300" cy="200" r="100" style="fill:blue;"/>
+</svg> \ No newline at end of file
diff --git a/layout/reftests/svg/smil/anim-clipPath-viewBox.svg b/layout/reftests/svg/smil/anim-clipPath-viewBox.svg
new file mode 100644
index 0000000000..e02dbea7d3
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-clipPath-viewBox.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="600" height="400" preserveAspectRatio="none"
+ viewBox="50 100 500 200"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(1, true)">
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <rect x="50" y="100" width="500" height="200" style="fill:blue;"
+ clip-path="circle(100px at center) view-box"/>
+ <animate attributeName="viewBox" values="50 100 500 200; 0 0 600 400"
+ dur="0.5s" fill="freeze"/>
+</svg> \ No newline at end of file
diff --git a/layout/reftests/svg/smil/anim-conditions-01.svg b/layout/reftests/svg/smil/anim-conditions-01.svg
new file mode 100644
index 0000000000..093a425e1e
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-conditions-01.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(1, true)">
+ <title>Test animation is disabled if conditional processing fails</title>
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <rect width="100%" height="100%" fill="red"/>
+ <rect width="100%" height="100%" fill="lime">
+ <set systemLanguage="foo" attributeName="width"
+ to="0%" dur="5s" begin="0s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-conditions-02.svg b/layout/reftests/svg/smil/anim-conditions-02.svg
new file mode 100644
index 0000000000..0b24d9a3e3
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-conditions-02.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(1, true)">
+ <title>Test animation is enabled if conditional processing succeeds</title>
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <rect width="100%" height="100%" fill="red"/>
+ <rect width="0%" height="100%" fill="lime">
+ <set requiredFeatures="http://www.w3.org/TR/SVG11/feature#Gradient" attributeName="width"
+ to="100%" dur="5s" begin="0s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-defs-fill.svg b/layout/reftests/svg/smil/anim-defs-fill.svg
new file mode 100644
index 0000000000..e71e59f0b2
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-defs-fill.svg
@@ -0,0 +1,22 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait">
+
+ <title>Test animation element in 'defs' element with 'fill' property</title>
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+
+ <rect id="target" fill="red" width="100%" height="100%"/>
+ <defs>
+ <animate xlink:href="#target"
+ attributeName="fill"
+ calcMode="discrete"
+ values="red;lime"
+ dur="100s"/>
+ </defs>
+
+ <script>
+ window.addEventListener("MozReftestInvalidate", function() {
+ setTimeAndWaitToSnapshot(49.9, 0.1);
+ });
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-defs-gradient-attribute.svg b/layout/reftests/svg/smil/anim-defs-gradient-attribute.svg
new file mode 100644
index 0000000000..56fea42473
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-defs-gradient-attribute.svg
@@ -0,0 +1,25 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait">
+
+ <title>Test animation of gradient attribute in 'defs' element</title>
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+
+ <rect fill="url(#gradient)" width="100%" height="100%"/>
+ <defs>
+ <linearGradient id="gradient" x1="0">
+ <stop offset="0%" stop-color="red" />
+ <stop offset="100%" stop-color="lime" />
+ <animate attributeName="x1"
+ values="0;1"
+ calcMode="discrete"
+ dur="100s"/>
+ </linearGradient>
+ </defs>
+
+ <script>
+ window.addEventListener("MozReftestInvalidate", function() {
+ setTimeAndWaitToSnapshot(49.9, 0.1);
+ });
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-defs-gradient-property.svg b/layout/reftests/svg/smil/anim-defs-gradient-property.svg
new file mode 100644
index 0000000000..11cc58687e
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-defs-gradient-property.svg
@@ -0,0 +1,25 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait">
+
+ <title>Test animation of gradient property in 'defs' element</title>
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+
+ <rect fill="url(#gradient)" width="100%" height="100%"/>
+ <defs>
+ <linearGradient id="gradient">
+ <stop>
+ <animate attributeName="stop-color"
+ values="red;lime"
+ calcMode="discrete"
+ dur="100s"/>
+ </stop>
+ </linearGradient>
+ </defs>
+
+ <script>
+ window.addEventListener("MozReftestInvalidate", function() {
+ setTimeAndWaitToSnapshot(49.9, 0.1);
+ });
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-defs-width.svg b/layout/reftests/svg/smil/anim-defs-width.svg
new file mode 100644
index 0000000000..1308e0edfd
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-defs-width.svg
@@ -0,0 +1,22 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait">
+
+ <title>Test animation element in 'defs' element with 'width' attribute</title>
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+
+ <rect id="target" fill="lime" width="0%" height="100%"/>
+ <defs>
+ <animate xlink:href="#target"
+ attributeName="width"
+ values="0%;100%"
+ calcMode="discrete"
+ dur="100s"/>
+ </defs>
+
+ <script>
+ window.addEventListener("MozReftestInvalidate", function() {
+ setTimeAndWaitToSnapshot(49.9, 0.1);
+ });
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-discrete-replace-sum-1.svg b/layout/reftests/svg/smil/anim-discrete-replace-sum-1.svg
new file mode 100644
index 0000000000..d973c4a857
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-discrete-replace-sum-1.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(2.5, false)">
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <rect x="15" y="15" width="200" height="20" fill="blue">
+ <animate attributeName="height" calcMode="discrete"
+ additive="replace" accumulate="sum"
+ from="20" to="100" repeatCount="2"
+ begin="0s" dur="1s" fill="freeze"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-discrete-sum-none-1.svg b/layout/reftests/svg/smil/anim-discrete-sum-none-1.svg
new file mode 100644
index 0000000000..dd554cc78a
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-discrete-sum-none-1.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(2.5, false)">
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <rect x="15" y="15" width="200" height="20" fill="blue">
+ <animate attributeName="height" calcMode="discrete"
+ additive="sum" accumulate="none"
+ from="20" to="180"
+ begin="0s" dur="2s" fill="freeze"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-discrete-sum-sum-1.svg b/layout/reftests/svg/smil/anim-discrete-sum-sum-1.svg
new file mode 100644
index 0000000000..e57c692122
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-discrete-sum-sum-1.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(2.5, false)">
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <rect x="15" y="15" width="200" height="20" fill="blue">
+ <animate attributeName="height" calcMode="discrete"
+ additive="sum" accumulate="sum"
+ from="20" to="90" repeatCount="2"
+ begin="0s" dur="1s" fill="freeze"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-discrete-to-1.svg b/layout/reftests/svg/smil/anim-discrete-to-1.svg
new file mode 100644
index 0000000000..41a078764c
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-discrete-to-1.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(0.0, true)">
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <rect x="15" y="15" width="200" height="200" fill="blue">
+ <animate attributeName="height" calcMode="discrete"
+ to="100" dur="2s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-discrete-to-2.svg b/layout/reftests/svg/smil/anim-discrete-to-2.svg
new file mode 100644
index 0000000000..e64d5d9d0f
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-discrete-to-2.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(0.99, true)">
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <rect x="15" y="15" width="200" height="200" fill="blue">
+ <animate attributeName="height" calcMode="discrete"
+ to="100" dur="2s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-discrete-to-3.svg b/layout/reftests/svg/smil/anim-discrete-to-3.svg
new file mode 100644
index 0000000000..0430821609
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-discrete-to-3.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(1.0, true)">
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <rect x="15" y="15" width="200" height="100" fill="blue">
+ <animate attributeName="height" calcMode="discrete"
+ to="200" dur="2s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-discrete-to-4.svg b/layout/reftests/svg/smil/anim-discrete-to-4.svg
new file mode 100644
index 0000000000..4295ce0552
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-discrete-to-4.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(2.5, false)">
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <rect x="15" y="15" width="200" height="100" fill="blue">
+ <animate attributeName="height" calcMode="discrete"
+ to="200" dur="2s" fill="freeze"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-discrete-values-1.svg b/layout/reftests/svg/smil/anim-discrete-values-1.svg
new file mode 100644
index 0000000000..8af8ac636c
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-discrete-values-1.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(2.5, true)">
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <rect x="15" y="15" width="200" height="50" fill="blue">
+ <animate attributeName="height" calcMode="discrete"
+ values="100; 200; 50" begin="0s" dur="5s" fill="freeze"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-discrete-values-2.svg b/layout/reftests/svg/smil/anim-discrete-values-2.svg
new file mode 100644
index 0000000000..c05693e143
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-discrete-values-2.svg
@@ -0,0 +1,31 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(29, true)">
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <title>Test discrete keyTimes are scaled correctly (Bug 681645)</title>
+ <rect x="15" y="15" width="200" height="200" fill="blue">
+ <animate attributeName="fill" begin="0" dur="100s"
+ calcMode="discrete"
+ values="red;red;red;red;red;red;red;red;red;red;
+ red;red;red;red;red;red;red;red;red;red;
+ red;red;red;red;red;red;red;red;red;blue;
+ red;red;red;red;red;red;red;red;red;red;
+ red;red;red;red;red;red;red;red;red;red;
+ red;red;red;red;red;red;red;red;red;red;
+ red;red;red;red;red;red;red;red;red;red;
+ red;red;red;red;red;red;red;red;red;red;
+ red;red;red;red;red;red;red;red;red;red;
+ red;red;red;red;red;red;red;red;red;red"
+ keyTimes="0.00;0.01;0.02;0.03;0.04;0.05;0.06;0.07;0.08;0.09;
+ 0.10;0.11;0.12;0.13;0.14;0.15;0.16;0.17;0.18;0.19;
+ 0.20;0.21;0.22;0.23;0.24;0.25;0.26;0.27;0.28;0.29;
+ 0.30;0.31;0.32;0.33;0.34;0.35;0.36;0.37;0.38;0.39;
+ 0.40;0.41;0.42;0.43;0.44;0.45;0.46;0.47;0.48;0.49;
+ 0.50;0.51;0.52;0.53;0.54;0.55;0.56;0.57;0.58;0.59;
+ 0.60;0.61;0.62;0.63;0.64;0.65;0.66;0.67;0.68;0.69;
+ 0.70;0.71;0.72;0.73;0.74;0.75;0.76;0.77;0.78;0.79;
+ 0.80;0.81;0.82;0.83;0.84;0.85;0.86;0.87;0.88;0.89;
+ 0.90;0.91;0.92;0.93;0.94;0.95;0.96;0.97;0.98;0.99"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-discrete-values-3.svg b/layout/reftests/svg/smil/anim-discrete-values-3.svg
new file mode 100644
index 0000000000..c6b850bfd6
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-discrete-values-3.svg
@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(29, true)">
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <title>Test discrete keyTimes are scaled correctly (Bug 681645)</title>
+ <rect x="15" y="15" width="200" height="200" fill="blue">
+ <animate attributeName="fill" begin="0" dur="100s"
+ calcMode="discrete"
+ values="red;red;red;red;red;red;red;red;red;red;
+ red;red;red;red;red;red;red;red;red;red;
+ red;red;red;red;red;red;red;red;red;blue;
+ red;red;red;red;red;red;red;red;red;red;
+ red;red;red;red;red;red;red;red;red;red;
+ red;red;red;red;red;red;red;red;red;red;
+ red;red;red;red;red;red;red;red;red;red;
+ red;red;red;red;red;red;red;red;red;red;
+ red;red;red;red;red;red;red;red;red;red;
+ red;red;red;red;red;red;red;red;red;red"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-display-in-g-element.svg b/layout/reftests/svg/smil/anim-display-in-g-element.svg
new file mode 100644
index 0000000000..8916aea893
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-display-in-g-element.svg
@@ -0,0 +1,23 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait">
+
+ <title>Test animation that changes 'display' attribute on an element that is not the immediate parent</title>
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+
+ <g display="none" id="g">
+ <rect width="100%" height="100%" fill="lime">
+ <animate xlink:href="#g"
+ attributeName="display"
+ values="none;inline"
+ calcMode="discrete"
+ dur="100s"/>
+ </rect>
+ </g>
+
+ <script>
+ window.addEventListener("MozReftestInvalidate", function() {
+ setTimeAndWaitToSnapshot(49.9, 0.1);
+ });
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-display.svg b/layout/reftests/svg/smil/anim-display.svg
new file mode 100644
index 0000000000..53e92d26bb
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-display.svg
@@ -0,0 +1,20 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait">
+
+ <title>Test animation that changes 'display' attribute</title>
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+
+ <rect display="none" width="100%" height="100%" fill="lime">
+ <animate attributeName="display"
+ values="none;inline"
+ calcMode="discrete"
+ dur="100s"/>
+ </rect>
+
+ <script>
+ window.addEventListener("MozReftestInvalidate", function() {
+ setTimeAndWaitToSnapshot(49.9, 0.1);
+ });
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-feComponentTransfer-01.svg b/layout/reftests/svg/smil/anim-feComponentTransfer-01.svg
new file mode 100644
index 0000000000..69f879d804
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-feComponentTransfer-01.svg
@@ -0,0 +1,32 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(1, true)">
+ <title>Test animation of the "intercept" attribute of the "feComponentTransfer" element</title>
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <filter id="flood_filter" x="0%" y="0%" width="100%" height="100%">
+ <feComponentTransfer>
+ <feFuncR type="linear" slope="0" intercept="1">
+ <animate attributeName="intercept"
+ calcMode="linear"
+ begin="0s" dur="2s"
+ from="1" to="-1"
+ fill="freeze"/>
+ </feFuncR>
+ <feFuncG type="linear" slope="0" intercept="0">
+ <animate attributeName="intercept"
+ calcMode="linear"
+ begin="0s" dur="2s"
+ from="0" to="2"
+ fill="freeze"/>
+ </feFuncG>
+ <feFuncB type="identity"/>
+ </feComponentTransfer>
+ </filter>
+ <rect width="100%" height="100%" fill="red"/>
+ <rect width="100%" height="100%" fill="red" filter="url(#flood_filter)"/>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-feComposite-operator-01.svg b/layout/reftests/svg/smil/anim-feComposite-operator-01.svg
new file mode 100644
index 0000000000..0223cea931
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-feComposite-operator-01.svg
@@ -0,0 +1,38 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(1, true)">
+ <title>Test animation of the "operator" enum attribute on the "feComposite" element</title>
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <filter id="composite_filter_1" x="-100%" y="0%" width="200%" height="100%">
+ <feFlood flood-color="lime" result="lime"/>
+ <feComposite in="lime" in2="SourceGraphic" operator="out">
+ <!-- this should turn the referencing element red at 1.25s -->
+ <animate attributeName="operator"
+ calcMode="discrete"
+ begin="0s" dur="2.5s"
+ from="out" to="in"
+ fill="freeze"/>
+ </feComposite>
+ </filter>
+ <filter id="composite_filter_2" x="0%" y="0%" width="200%" height="100%">
+ <feFlood flood-color="lime" result="lime"/>
+ <feComposite in="lime" in2="SourceGraphic" operator="out">
+ <!-- this should turn the referencing element lime at 1s -->
+ <animate attributeName="operator"
+ calcMode="discrete"
+ begin="0s" dur="2s"
+ from="out" to="in"
+ fill="freeze"/>
+ </feComposite>
+ </filter>
+ <rect width="100%" height="100%" fill="lime"/>
+
+ <!-- 40% through discrete animation simple duration - test animation doesn't affect the element too early -->
+ <rect width="100" height="100" fill="red"/>
+ <rect x="100" width="100" height="100" fill="red" filter="url(#composite_filter_1)"/>
+
+ <!-- 50% through discrete animation simple duration - test animation affects the element now -->
+ <rect y="100" width="100" height="100" fill="red"/>
+ <rect y="100" width="100" height="100" fill="red" filter="url(#composite_filter_2)"/>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-feConvolveMatrix-order-01-ref.svg b/layout/reftests/svg/smil/anim-feConvolveMatrix-order-01-ref.svg
new file mode 100644
index 0000000000..db5ab20e38
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-feConvolveMatrix-order-01-ref.svg
@@ -0,0 +1,20 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(2, true)">
+ <title>Testcase for animation of the "order" attribute of the "feConvolveMatrix" element</title>
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <defs>
+ <filter id="f">
+ <feConvolveMatrix order="3" kernelMatrix="1 1 1 1 1 1 1 1 1" edgeMode="none"></feConvolveMatrix>
+ </filter>
+ </defs>
+ <g filter="url(#f)">
+ <rect x="10" y="10" width="50" height="100" fill="orange"/>
+ <rect x="60" y="10" width="50" height="100" fill="blue"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-feConvolveMatrix-order-01.svg b/layout/reftests/svg/smil/anim-feConvolveMatrix-order-01.svg
new file mode 100644
index 0000000000..d24eb3b8d7
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-feConvolveMatrix-order-01.svg
@@ -0,0 +1,53 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(2, true)">
+ <title>Testcase for animation of the "order" attribute of the "feConvolveMatrix" element</title>
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <defs>
+ <filter id="f">
+ <feConvolveMatrix order="1" kernelMatrix="1" edgeMode="none">
+ <!-- Animate the kernel matrix dimensions from 1x1 to 5x5. -->
+ <animate attributeName="order"
+ calcMode="linear"
+ begin="0s" dur="4s"
+ from="1" to="5 5"
+ fill="freeze"/>
+ <!--
+ Animate the kernel matrix values.
+ Each successive matrix blurs the image more.
+ We will pause on the 3x3 matrix.
+ -->
+ <animate attributeName="kernelMatrix"
+ calcMode="linear"
+ begin="0s" dur="1s"
+ from="1" to="1 1 1 1"
+ fill="freeze"/>
+ <animate attributeName="kernelMatrix"
+ calcMode="linear"
+ begin="1s" dur="1s"
+ from="1 1 1 1" to="1 1 1 1 1 1 1 1 1"
+ fill="freeze"/>
+ <animate attributeName="kernelMatrix"
+ calcMode="linear"
+ begin="2s" dur="1s"
+ from="1 1 1 1 1 1 1 1 1" to="1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1"
+ fill="freeze"/>
+ <animate attributeName="kernelMatrix"
+ calcMode="linear"
+ begin="3s" dur="1s"
+ from="1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1" to="1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1"
+ fill="freeze"/>
+ </feConvolveMatrix>
+ </filter>
+ </defs>
+ <g filter="url(#f)">
+ <!-- The edge between the orange rect and the blue rect will become blurry. -->
+ <rect x="10" y="10" width="50" height="100" fill="orange"/>
+ <rect x="60" y="10" width="50" height="100" fill="blue"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-feConvolveMatrix-preserveAlpha-01.svg b/layout/reftests/svg/smil/anim-feConvolveMatrix-preserveAlpha-01.svg
new file mode 100644
index 0000000000..0eb3a7a7d6
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-feConvolveMatrix-preserveAlpha-01.svg
@@ -0,0 +1,41 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(1, true)">
+ <title>Test animation of the "preserveAlpha" &lt;boolean&gt; attribute on the "feConvolveMatrix" element</title>
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <filter id="convolve_1">
+ <feConvolveMatrix order="2 2" kernelMatrix="0 0 0 0" preserveAlpha="true">
+ <!-- turn the referencing element from transparent to red at 1.25s -->
+ <animate attributeName="preserveAlpha"
+ calcMode="discrete"
+ begin="0s" dur="2.5s"
+ from="false" to="true"
+ fill="freeze"/>
+ </feConvolveMatrix>
+ <feColorMatrix type="matrix"
+ values="0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+ </filter>
+ <filter id="convolve_2">
+ <feConvolveMatrix order="2 2" kernelMatrix="0 0 0 0" preserveAlpha="true">
+ <!-- turn the referencing element from red to transparent at 1s -->
+ <animate attributeName="preserveAlpha"
+ calcMode="discrete"
+ begin="0s" dur="2s"
+ from="true" to="false"
+ fill="freeze"/>
+ </feConvolveMatrix>
+ <feColorMatrix type="matrix"
+ values="0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+ </filter>
+ <rect width="100%" height="100%" fill="lime"/>
+
+ <!-- 40% through discrete animation simple duration -
+ tests that the animation doesn't affect the element too early -->
+ <rect width="100" height="50" fill="red" filter="url(#convolve_1)"/>
+
+ <!-- 50% through discrete animation simple duration -
+ tests that the animation affects the element now -->
+ <rect y="50" width="100" height="50" fill="red" filter="url(#convolve_2)"/>
+
+</svg>
diff --git a/layout/reftests/svg/smil/anim-feDistantLight-01-ref.svg b/layout/reftests/svg/smil/anim-feDistantLight-01-ref.svg
new file mode 100644
index 0000000000..6fe45b7faf
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-feDistantLight-01-ref.svg
@@ -0,0 +1,17 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Reference for animation of the "elevation" attribute of the "feDistantLight" element</title>
+ <defs>
+ <filter id="f" x="0" y="0" width="0.5" height="0.5">
+ <feDiffuseLighting kernelUnitLength="1" lighting-color="lime">
+ <feDistantLight elevation="100">
+ </feDistantLight>
+ </feDiffuseLighting>
+ </filter>
+ </defs>
+ <path d="M0,0 h100 v100 h-100 z" filter="url(#f)"/>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-feDistantLight-01.svg b/layout/reftests/svg/smil/anim-feDistantLight-01.svg
new file mode 100644
index 0000000000..42221cdb48
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-feDistantLight-01.svg
@@ -0,0 +1,25 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(1, true)">
+ <title>Testcase for animation of the "elevation" attribute of the "feDistantLight" element</title>
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <defs>
+ <filter id="f" x="0" y="0" width="0.5" height="0.5">
+ <feDiffuseLighting kernelUnitLength="1" lighting-color="lime">
+ <feDistantLight elevation="0">
+ <animate attributeName="elevation"
+ calcMode="linear"
+ begin="0s" dur="2s"
+ from="0" to="200"
+ fill="freeze"/>
+ </feDistantLight>
+ </feDiffuseLighting>
+ </filter>
+ </defs>
+ <path d="M0,0 h100 v100 h-100 z" filter="url(#f)"/>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-feFuncR-tableValues-01-ref.svg b/layout/reftests/svg/smil/anim-feFuncR-tableValues-01-ref.svg
new file mode 100644
index 0000000000..fd09b807e7
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-feFuncR-tableValues-01-ref.svg
@@ -0,0 +1,52 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <title></title>
+
+ <linearGradient id="gradient">
+ <stop offset="0" stop-color="black" />
+ <stop offset="100%" stop-color="red" />
+ </linearGradient>
+
+ <!-- Comparison for calcMode="linear". -->
+
+ <filter id="f_calcMode_linear_to" x="0%" y="0%" width="100%" height="100%">
+ <feComponentTransfer>
+ <feFuncR type="table" tableValues="0 2 2 0"/>
+ </feComponentTransfer>
+ </filter>
+ <rect x="20" y="20" width="256" height="20" fill="url(#gradient)"
+ filter="url(#f_calcMode_linear_to)"/>
+
+
+ <!-- Comparison for 'by' animation. -->
+
+ <filter id="f_calcMode_linear_by" x="0%" y="0%" width="100%" height="100%">
+ <feComponentTransfer>
+ <feFuncR type="table" tableValues="0 2 2 0"/>
+ </feComponentTransfer>
+ </filter>
+ <rect x="20" y="60" width="256" height="20" fill="url(#gradient)"
+ filter="url(#f_calcMode_linear_by)"/>
+
+
+ <!-- Comparison for calcMode="paced". -->
+
+ <filter id="f_calcMode_paced" x="0%" y="0%" width="100%" height="100%">
+ <feComponentTransfer>
+ <feFuncR type="table" tableValues="0 2 2 0"/>
+ </feComponentTransfer>
+ </filter>
+ <rect x="20" y="100" width="256" height="20" fill="url(#gradient)"
+ filter="url(#f_calcMode_paced)"/>
+
+
+ <!-- Comparison for calcMode="discrete". -->
+
+ <filter id="f_calcMode_discrete" x="0%" y="0%" width="100%" height="100%">
+ <feComponentTransfer>
+ <feFuncR type="table" tableValues="0 2 2 0"/>
+ </feComponentTransfer>
+ </filter>
+ <rect x="20" y="140" width="256" height="20" fill="url(#gradient)"
+ filter="url(#f_calcMode_discrete)"/>
+
+</svg>
diff --git a/layout/reftests/svg/smil/anim-feFuncR-tableValues-01.svg b/layout/reftests/svg/smil/anim-feFuncR-tableValues-01.svg
new file mode 100644
index 0000000000..512e1ab074
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-feFuncR-tableValues-01.svg
@@ -0,0 +1,101 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(1, true)">
+ <title>Test animation of the &lt;number-list&gt; attribute on the 'text' element</title>
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+
+ <linearGradient id="gradient">
+ <stop offset="0" stop-color="black" />
+ <stop offset="100%" stop-color="red" />
+ </linearGradient>
+
+ <!-- The difference between respective numbers in the effective 'from' and
+ 'to' lists below is carefully designed to be a factor of 3. That way
+ our reference file (which checks against a one third complete animation)
+ can contain whole numbers, which is necessary to avoid failure due to
+ hard coded rounded numbers in the reference not matching platform
+ specific rounding behaviour.
+ -->
+
+
+ <!-- Test calcMode="linear". -->
+
+ <filter id="f_calcMode_linear_to" x="0%" y="0%" width="100%" height="100%">
+ <feComponentTransfer>
+ <feFuncR type="table" tableValues="-1 3 3 -1">
+
+ <!-- At 1s the animVal should be "0 2 2 0". -->
+ <animate attributeName="tableValues"
+ calcMode="linear"
+ begin="0s" dur="3s"
+ to="2 0 0 2"
+ fill="freeze"/>
+
+ </feFuncR>
+ </feComponentTransfer>
+ </filter>
+ <rect x="20" y="20" width="256" height="20" fill="url(#gradient)"
+ filter="url(#f_calcMode_linear_to)"/>
+
+
+ <!-- Test 'by' animation. -->
+
+ <filter id="f_calcMode_linear_by" x="0%" y="0%" width="100%" height="100%">
+ <feComponentTransfer>
+ <feFuncR type="table" tableValues="-1 3 3 -1">
+
+ <!-- At 1s the animVal should be "0 2 2 0". -->
+ <animate attributeName="tableValues"
+ calcMode="linear"
+ begin="0s" dur="3s"
+ by="3 -3 -3 3"
+ fill="freeze"/>
+
+ </feFuncR>
+ </feComponentTransfer>
+ </filter>
+ <rect x="20" y="60" width="256" height="20" fill="url(#gradient)"
+ filter="url(#f_calcMode_linear_by)"/>
+
+
+ <!-- Test calcMode="paced". -->
+
+ <filter id="f_calcMode_paced" x="0%" y="0%" width="100%" height="100%">
+ <feComponentTransfer>
+ <feFuncR type="table" tableValues="-1 3 3 -1">
+
+ <!-- At 1s the animVal should be "0 2 2 0". -->
+ <animate attributeName="tableValues"
+ calcMode="paced"
+ begin="0s" dur="3s"
+ values="-1 3 3 -1; 1 1 1 1; 2 0 0 2"
+ fill="freeze"/>
+
+ </feFuncR>
+ </feComponentTransfer>
+ </filter>
+ <rect x="20" y="100" width="256" height="20" fill="url(#gradient)"
+ filter="url(#f_calcMode_paced)"/>
+
+
+ <!-- Test calcMode="discrete". -->
+
+ <filter id="f_calcMode_discrete" x="0%" y="0%" width="100%" height="100%">
+ <feComponentTransfer>
+ <feFuncR type="table" tableValues="0 0 0 0">
+
+ <!-- The value should be "0 2 2 0" from 1s onwards. -->
+ <animate attributeName="tableValues"
+ calcMode="discrete"
+ begin="0s" dur="2s"
+ to="0 2 2 0"
+ fill="freeze"/>
+
+ </feFuncR>
+ </feComponentTransfer>
+ </filter>
+ <rect x="20" y="140" width="256" height="20" fill="url(#gradient)"
+ filter="url(#f_calcMode_discrete)"/>
+
+</svg>
diff --git a/layout/reftests/svg/smil/anim-feGaussianBlur-01.svg b/layout/reftests/svg/smil/anim-feGaussianBlur-01.svg
new file mode 100644
index 0000000000..40f804d74c
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-feGaussianBlur-01.svg
@@ -0,0 +1,25 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(1.9999, true)">
+ <title>Test animation of the "stdDeviation" &lt;number-optional-number&gt; attribute on "feGaussianBlur" elements</title>
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <filter id="filter" x="0" y="0" width="1" height="1">
+ <feGaussianBlur stdDeviation="50">
+ <animate attributeName="stdDeviation"
+ calcMode="linear"
+ begin="0s" dur="2s"
+ from="100,100" to="0"
+ fill="freeze"/>
+ </feGaussianBlur>
+ </filter>
+ <rect width="100%" height="100%" fill="lime"/>
+ <g transform="translate(50, 0)">
+ <circle fill="red" cx="100" cy="100" r="98" transform="translate(50, 0)" filter="url(#filter)"/>
+ </g>
+ <circle fill="lime" cx="200" cy="100" r="100"/>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-feImage-preserveAspectRatio-01.svg b/layout/reftests/svg/smil/anim-feImage-preserveAspectRatio-01.svg
new file mode 100644
index 0000000000..13d3113a21
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-feImage-preserveAspectRatio-01.svg
@@ -0,0 +1,31 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait">
+ <title>Test animation of the "preserveAspectRatio" attribute on the "feImage" element</title>
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <script type="text/javascript">
+ function doTest() {
+ setTimeAndSnapshot(1, true);
+ }
+ window.addEventListener("MozReftestInvalidate", doTest, false);
+ </script>
+
+ <rect width="100%" height="100%" fill="lime"/>
+
+ <filter id="filter" filterUnits="userSpaceOnUse"
+ x="0" y="0" width="100" height="20">
+ <!-- data: URI is a 1x1 lime GIF -->
+ <feImage preserveAspectRatio="xMidYMid meet"
+ style="image-rendering: optimizeSpeed;"
+ xlink:href="data:image/gif,GIF87a%01%00%01%00%80%01%00%00%FF%00%FF%FF%FF%2C%00%00%00%00%01%00%01%00%00%02%02D%01%00%3B">
+ <animate attributeName="preserveAspectRatio"
+ begin="0s" dur="2s"
+ to="xMidYMid slice"
+ fill="freeze"/>
+ </feImage>
+ </filter>
+
+ <rect width="100" height="20" fill="red"/>
+ <rect width="100" height="20" filter="url(#filter)"/>
+
+</svg>
diff --git a/layout/reftests/svg/smil/anim-feOffset-01.svg b/layout/reftests/svg/smil/anim-feOffset-01.svg
new file mode 100644
index 0000000000..30c8795670
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-feOffset-01.svg
@@ -0,0 +1,34 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(1, true)">
+ <title>Test animation of the "dx" and "dy" attributes on the "feOffset" element</title>
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <filter id="offset_filter_1" x="0%" y="0%" width="300%" height="100%">
+ <feOffset in="SourceGraphic">
+ <animate attributeName="dx"
+ calcMode="linear"
+ begin="0s" dur="2s"
+ from="0" to="200"
+ fill="freeze"/>
+ </feOffset>
+ </filter>
+ <filter id="offset_filter_2" x="0%" y="0%" width="100%" height="200%">
+ <feOffset in="SourceGraphic">
+ <animate attributeName="dy"
+ calcMode="linear"
+ begin="0s" dur="1s"
+ from="0" to="100"
+ fill="freeze"/>
+ </feOffset>
+ </filter>
+ <rect width="100%" height="100%" fill="lime"/>
+
+ <!-- test 50% completed animation -->
+ <rect x="100" width="100" height="100" fill="red"/>
+ <rect width="100" height="100" fill="lime" filter="url(#offset_filter_1)"/>
+
+ <!-- test 100% completed animation -->
+ <rect y="100" width="100" height="100" fill="red"/>
+ <rect width="100" height="100" fill="lime" filter="url(#offset_filter_2)"/>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-feSpotLight-01-ref.svg b/layout/reftests/svg/smil/anim-feSpotLight-01-ref.svg
new file mode 100644
index 0000000000..adc43569ee
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-feSpotLight-01-ref.svg
@@ -0,0 +1,18 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Reference for animation of the "elevation" attribute of the "feSpotLight" element</title>
+ <defs>
+ <filter id="f" x="0" y="0" width="0.5" height="0.5">
+ <feSpecularLighting surfaceScale="5" specularConstant=".75"
+ specularExponent="20" lighting-color="lime">
+ <feSpotLight x="0.25" y="0.25" z="100">
+ </feSpotLight>
+ </feSpecularLighting>
+ </filter>
+ </defs>
+ <path d="M0,0 h100 v100 h-100 z" filter="url(#f)"/>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-feSpotLight-01.svg b/layout/reftests/svg/smil/anim-feSpotLight-01.svg
new file mode 100644
index 0000000000..011a9ecff9
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-feSpotLight-01.svg
@@ -0,0 +1,26 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(1, true)">
+ <title>Testcase for animation of the "elevation" attribute of the "feSpotLight" element</title>
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <defs>
+ <filter id="f" x="0" y="0" width="0.5" height="0.5">
+ <feSpecularLighting surfaceScale="5" specularConstant=".75"
+ specularExponent="20" lighting-color="lime">
+ <feSpotLight x="0.25" y="0.25" z="0">
+ <animate attributeName="z"
+ calcMode="linear"
+ begin="0s" dur="2s"
+ from="0" to="200"
+ fill="freeze"/>
+ </feSpotLight>
+ </feSpecularLighting>
+ </filter>
+ </defs>
+ <path d="M0,0 h100 v100 h-100 z" filter="url(#f)"/>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-feTurbulence-numOctaves-01-ref.svg b/layout/reftests/svg/smil/anim-feTurbulence-numOctaves-01-ref.svg
new file mode 100644
index 0000000000..74f4070e5f
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-feTurbulence-numOctaves-01-ref.svg
@@ -0,0 +1,26 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <filter id="filter_1" x="0%" y="0%" width="100%" height="100%">
+ <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="1"/>
+ </filter>
+ <filter id="filter_2" x="0%" y="0%" width="100%" height="100%">
+ <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="2"/>
+ </filter>
+ <filter id="filter_3" x="0%" y="0%" width="100%" height="100%">
+ <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="3"/>
+ </filter>
+ <filter id="filter_4" x="0%" y="0%" width="100%" height="100%">
+ <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="4"/>
+ </filter>
+ <rect x="0" y="0" width="20" height="20" filter="url(#filter_3)"/>
+ <rect x="20" y="0" width="20" height="20" filter="url(#filter_4)"/>
+ <rect x="0" y="20" width="20" height="20" filter="url(#filter_2)"/>
+ <rect x="20" y="20" width="20" height="20" filter="url(#filter_1)"/>
+ <rect x="0" y="40" width="20" height="20" filter="url(#filter_3)"/>
+ <rect x="20" y="40" width="20" height="20" filter="url(#filter_4)"/>
+ <rect x="0" y="60" width="20" height="20" filter="url(#filter_2)"/>
+ <rect x="20" y="60" width="20" height="20" filter="url(#filter_1)"/>
+ <rect x="0" y="80" width="20" height="20" filter="url(#filter_1)"/>
+ <rect x="20" y="80" width="20" height="20" filter="url(#filter_4)"/>
+ <rect x="0" y="100" width="20" height="20" filter="url(#filter_4)"/>
+ <rect x="20" y="100" width="20" height="20" filter="url(#filter_1)"/>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-feTurbulence-numOctaves-01.svg b/layout/reftests/svg/smil/anim-feTurbulence-numOctaves-01.svg
new file mode 100644
index 0000000000..e48a6bd55e
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-feTurbulence-numOctaves-01.svg
@@ -0,0 +1,217 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(5, true)">
+ <title>Test animation of the "numOctaves" &lt;integer&gt; attribute on the "feTurbulence" element</title>
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+
+
+ <!-- Our implementation strategy for animating integers with
+ calcMode="linear" is to use round(), with the slight twist that we
+ round "to the NEXT value" when the current time puts us exactly midway
+ between two integer values. (This is so that the result of midpoint
+ rounding does not depend on whether we're animating up to a higher
+ value or animating down to a lower value.) Note that one of the quirks
+ of using round() is that the start and end values of any integer
+ range only receive half as much time as any intermediary values. This
+ is as you would expect mathematically, but it's probably unexpected
+ for most users!
+
+ We could try to avoid this round() quirk by coming up with a better
+ implementation strategy for calcMode="linear", but animation of the
+ few integer attributes in SVG 1.1 is extremely unlikely (so this
+ issue is very low priority), and it's actually difficult to find a
+ better strategy that doesn't have its own undesirable quirks.
+
+ One alternative could be to divide the time evenly amoungst each
+ integer. (I.e. it would be similar to calcMode="discrete", except it
+ would also visit all the intermediary values, not just the start and
+ end values). The issue with this approach is that for a simple "to"
+ animation the animation wouldn't actually seem to change anything until
+ interpolation reaches the second integer value. This could be avoided
+ by skipping the initial value and distributing the time between the
+ other values, but then in the case of a "from-to" animation where the
+ from value is different to the underlying attribute value, the
+ animation would seem to skip the first value. Not that the same sort of
+ problem exists at the other end of the simple duration, where it will
+ reach the final integer value before the end of the simple duration.
+ This could be avoided by only setting the final value right at the end
+ of the simple duration and distributing the time between evenly
+ between the other values, but then the final value will only be seen if
+ fill="freeze".
+
+ There are many other problems with other implementation strategies. The
+ more you think about them, add the complexity of 'values', 'by' etc,
+ and think of cases where they behave strangely (e.g. animating between
+ just two adjacent integers, up or down, etc.), the more ugly it gets.
+ It's really not worth it for SVG 1.1. Maybe if you could use SMIL for
+ 'font-size' or something even more likely to be animated it would be.
+ -->
+
+
+ <!-- Some calcMode="linear" tests animating *up* to higher values. -->
+
+ <!-- At 5s the animated value should be 3. -->
+ <filter id="filter_1" x="0%" y="0%" width="100%" height="100%">
+ <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="1">
+ <animate attributeName="numOctaves"
+ calcMode="linear"
+ begin="0s" dur="6.1s"
+ to="4"
+ fill="freeze"/>
+ </feTurbulence>
+ </filter>
+ <rect x="0" width="20" height="20" filter="url(#filter_1)"/>
+
+ <!-- At exactly 5s the animated value should change to 4. -->
+ <filter id="filter_2" x="0%" y="0%" width="100%" height="100%">
+ <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="1">
+ <animate attributeName="numOctaves"
+ calcMode="linear"
+ begin="0s" dur="6s"
+ to="4"
+ fill="freeze"/>
+ </feTurbulence>
+ </filter>
+ <rect x="20" width="20" height="20" filter="url(#filter_2)"/>
+
+
+ <!-- Some calcMode="linear" tests animating *down* to lower values. -->
+
+ <!-- At 5s the animated value should be 2. -->
+ <filter id="filter_3" x="0%" y="0%" width="100%" height="100%">
+ <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="4">
+ <animate attributeName="numOctaves"
+ calcMode="linear"
+ begin="0s" dur="6.1s"
+ to="1"
+ fill="freeze"/>
+ </feTurbulence>
+ </filter>
+ <rect x="0" y="20" width="20" height="20" filter="url(#filter_3)"/>
+
+ <!-- At exactly 5s the animated value should change to 1. -->
+ <filter id="filter_4" x="0%" y="0%" width="100%" height="100%">
+ <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="4">
+ <animate attributeName="numOctaves"
+ calcMode="linear"
+ begin="0s" dur="6s"
+ to="1"
+ fill="freeze"/>
+ </feTurbulence>
+ </filter>
+ <rect x="20" y="20" width="20" height="20" filter="url(#filter_4)"/>
+
+
+ <!-- Some 'by' animation tests -->
+
+ <!-- At 5s the animated value should be 3. -->
+ <filter id="filter_5" x="0%" y="0%" width="100%" height="100%">
+ <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="1">
+ <animate attributeName="numOctaves"
+ calcMode="linear"
+ begin="0s" dur="6.1s"
+ by="3"
+ fill="freeze"/>
+ </feTurbulence>
+ </filter>
+ <rect y="40" width="20" height="20" filter="url(#filter_5)"/>
+
+ <!-- At exactly 5s the animated value should change to 4. -->
+ <filter id="filter_6" x="0%" y="0%" width="100%" height="100%">
+ <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="1">
+ <animate attributeName="numOctaves"
+ calcMode="linear"
+ begin="0s" dur="6s"
+ by="3"
+ fill="freeze"/>
+ </feTurbulence>
+ </filter>
+ <rect x="20" y="40" width="20" height="20" filter="url(#filter_6)"/>
+
+
+ <!-- calcMode="paced" tests -->
+
+ <!-- At 5s the animated value should be 2. -->
+ <filter id="filter_7" x="0%" y="0%" width="100%" height="100%">
+ <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="4">
+ <animate attributeName="numOctaves"
+ calcMode="paced"
+ begin="0s" dur="6.1s"
+ values="4; 3; 1"
+ fill="freeze"/>
+ </feTurbulence>
+ </filter>
+ <rect y="60" width="20" height="20" filter="url(#filter_7)"/>
+
+ <!-- At exactly 5s the animated value should change to 1. -->
+ <filter id="filter_8" x="0%" y="0%" width="100%" height="100%">
+ <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="4">
+ <animate attributeName="numOctaves"
+ calcMode="paced"
+ begin="0s" dur="6s"
+ values="4; 3; 1"
+ fill="freeze"/>
+ </feTurbulence>
+ </filter>
+ <rect x="20" y="60" width="20" height="20" filter="url(#filter_8)"/>
+
+
+ <!-- Some calcMode="discrete" tests animating *up* to higher values. -->
+
+ <!-- At 5s the animated value should be 1. -->
+ <filter id="filter_9" x="0%" y="0%" width="100%" height="100%">
+ <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="1">
+ <animate attributeName="numOctaves"
+ calcMode="discrete"
+ begin="0s" dur="10.1s"
+ from="1"
+ to="4"
+ fill="freeze"/>
+ </feTurbulence>
+ </filter>
+ <rect x="0" y="80" width="20" height="20" filter="url(#filter_9)"/>
+
+ <!-- At exactly 5s the animated value should change to 4. -->
+ <filter id="filter_10" x="0%" y="0%" width="100%" height="100%">
+ <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="1">
+ <animate attributeName="numOctaves"
+ calcMode="discrete"
+ begin="0s" dur="10s"
+ from="1"
+ to="4"
+ fill="freeze"/>
+ </feTurbulence>
+ </filter>
+ <rect x="20" y="80" width="20" height="20" filter="url(#filter_10)"/>
+
+
+ <!-- Some calcMode="discrete" tests animating *down* to lower values. -->
+
+ <!-- At 5s the animated value should be 4. -->
+ <filter id="filter_11" x="0%" y="0%" width="100%" height="100%">
+ <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="4">
+ <animate attributeName="numOctaves"
+ calcMode="discrete"
+ begin="0s" dur="10.1s"
+ from="4"
+ to="1"
+ fill="freeze"/>
+ </feTurbulence>
+ </filter>
+ <rect x="0" y="100" width="20" height="20" filter="url(#filter_11)"/>
+
+ <!-- At exactly 5s the animated value should change to 1. -->
+ <filter id="filter_12" x="0%" y="0%" width="100%" height="100%">
+ <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="4">
+ <animate attributeName="numOctaves"
+ calcMode="discrete"
+ begin="0s" dur="10s"
+ from="4"
+ to="1"
+ fill="freeze"/>
+ </feTurbulence>
+ </filter>
+ <rect x="20" y="100" width="20" height="20" filter="url(#filter_12)"/>
+
+</svg>
diff --git a/layout/reftests/svg/smil/anim-feTurbulence-numOctaves-02.svg b/layout/reftests/svg/smil/anim-feTurbulence-numOctaves-02.svg
new file mode 100644
index 0000000000..ffade083b0
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-feTurbulence-numOctaves-02.svg
@@ -0,0 +1,202 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(3, true)">
+ <title>Test animation of the "numOctaves" &lt;integer&gt; attribute on the "feTurbulence" element</title>
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+
+ <!-- This is an unfinished and unused testcase that would not pass given the
+ current implementation strategy. This testcase assumes that the
+ strategy should be to give each value an equal slice of the simple
+ duration. In other words if animating from 1 to 4 in 4 seconds, then
+ each of the values 1, 2, 3 and 4 would get 1 second each.
+
+ See the comment in anim-feTurbulence-numOctaves-01.svg for more on
+ implementation strategy.
+ -->
+
+
+
+ <!-- Animation of integers is actually more complicated than lengths. It's
+ necessary to "jump" from value to value since you're dealing with
+ discrete integers rather than continuous real numbers.
+
+ The spec doesn't say exactly how to behave, but we assume that the each
+ of the values in a from-to animation gets an equal slice of the simple
+ duration. We also assume that at times that are exactly midway between
+ two integers, we should jump to the "next" integer. In other words, when
+ animating from 0 to 1 in 1 second, at 0.5 seconds the value changes to
+ 1; but when animating from 1 to 0 in 1 second, at 0.5 seconds the value
+ changes to 0. This is different from floor(), round() or ceil()
+ behavior, and we test that by animating both "up" and "down" below.
+ -->
+
+
+ <!-- Some tests animating *up* to higher values. -->
+
+ <!-- Each of the four values should get an equal slice of the duration -
+ that is 3.25s - so at 3s the animated value should still be 1. -->
+ <filter id="filter_1" x="0%" y="0%" width="100%" height="100%">
+ <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="1">
+ <animate attributeName="numOctaves"
+ calcMode="linear"
+ begin="0s" dur="13s"
+ to="4"
+ fill="freeze"/>
+ </feTurbulence>
+ </filter>
+ <rect width="20" height="20" filter="url(#filter_1)"/>
+
+ <!-- Each of the four values should get an equal slice of the duration -
+ that is 3s - so at exactly 3s the animated value should become 2. -->
+ <filter id="filter_2" x="0%" y="0%" width="100%" height="100%">
+ <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="1">
+ <animate attributeName="numOctaves"
+ calcMode="linear"
+ begin="0s" dur="12s"
+ to="4"
+ fill="freeze"/>
+ </feTurbulence>
+ </filter>
+ <rect x="20" width="20" height="20" filter="url(#filter_2)"/>
+
+ <!-- Each of the four values should get an equal slice of the duration -
+ that is 1.25s - so at 3s the animated value should still be 3. -->
+ <filter id="filter_3" x="0%" y="0%" width="100%" height="100%">
+ <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="1">
+ <animate attributeName="numOctaves"
+ calcMode="linear"
+ begin="0s" dur="5s"
+ to="4"
+ fill="freeze"/>
+ </feTurbulence>
+ </filter>
+ <rect x="40" width="20" height="20" filter="url(#filter_3)"/>
+
+ <!-- Each of the four values should get an equal slice of the duration -
+ that is 1s - so at exactly 3s the animated value should become 4. -->
+ <filter id="filter_4" x="0%" y="0%" width="100%" height="100%">
+ <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="1">
+ <animate attributeName="numOctaves"
+ calcMode="linear"
+ begin="0s" dur="4s"
+ to="4"
+ fill="freeze"/>
+ </feTurbulence>
+ </filter>
+ <rect x="60" width="20" height="20" filter="url(#filter_4)"/>
+
+
+ <!-- Some tests animating *down* to lower values. -->
+
+ <!-- Each of the four values should get an equal slice of the duration -
+ that is 3.25s - so at 3s the animated value should still be 4. -->
+ <filter id="filter_5" x="0%" y="0%" width="100%" height="100%">
+ <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="4">
+ <animate attributeName="numOctaves"
+ calcMode="linear"
+ begin="0s" dur="13s"
+ to="1"
+ fill="freeze"/>
+ </feTurbulence>
+ </filter>
+ <rect y="20" width="20" height="20" filter="url(#filter_5)"/>
+
+ <!-- Each of the four values should get an equal slice of the duration -
+ that is 3s - so at exactly 3s the animated value should become 3. -->
+ <filter id="filter_6" x="0%" y="0%" width="100%" height="100%">
+ <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="4">
+ <animate attributeName="numOctaves"
+ calcMode="linear"
+ begin="0s" dur="12s"
+ to="1"
+ fill="freeze"/>
+ </feTurbulence>
+ </filter>
+ <rect x="20" y="20" width="20" height="20" filter="url(#filter_6)"/>
+
+ <!-- Each of the four values should get an equal slice of the duration -
+ that is 1.25s - so at 3s the animated value should still be 2. -->
+ <filter id="filter_7" x="0%" y="0%" width="100%" height="100%">
+ <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="4">
+ <animate attributeName="numOctaves"
+ calcMode="linear"
+ begin="0s" dur="5s"
+ to="1"
+ fill="freeze"/>
+ </feTurbulence>
+ </filter>
+ <rect x="40" y="20" width="20" height="20" filter="url(#filter_7)"/>
+
+ <!-- Each of the four values should get an equal slice of the duration -
+ that is 1s - so at exactly 3s the animated value should become 1. -->
+ <filter id="filter_8" x="0%" y="0%" width="100%" height="100%">
+ <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="4">
+ <animate attributeName="numOctaves"
+ calcMode="linear"
+ begin="0s" dur="4s"
+ to="1"
+ fill="freeze"/>
+ </feTurbulence>
+ </filter>
+ <rect x="60" y="20" width="20" height="20" filter="url(#filter_8)"/>
+
+
+ <!-- Some 'by' animation tests -->
+
+ <!-- Each of the four values should get an equal slice of the duration -
+ that is 1.25s - so at 3s the animated value should still be 3. -->
+ <filter id="filter_9" x="0%" y="0%" width="100%" height="100%">
+ <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="1">
+ <animate attributeName="numOctaves"
+ calcMode="linear"
+ begin="0s" dur="5s"
+ by="3"
+ fill="freeze"/>
+ </feTurbulence>
+ </filter>
+ <rect y="40" width="20" height="20" filter="url(#filter_9)"/>
+
+ <!-- Each of the four values should get an equal slice of the duration -
+ that is 1s - so at exactly 3s the animated value should become 4. -->
+ <filter id="filter_10" x="0%" y="0%" width="100%" height="100%">
+ <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="1">
+ <animate attributeName="numOctaves"
+ calcMode="linear"
+ begin="0s" dur="4s"
+ by="3"
+ fill="freeze"/>
+ </feTurbulence>
+ </filter>
+ <rect x="20" y="40" width="20" height="20" filter="url(#filter_10)"/>
+
+
+ <!-- calcMode="paced" tests -->
+
+ <!-- Each of the four values should get an equal slice of the duration -
+ that is 1.25s - so at 3s the animated value should still be 2. -->
+ <filter id="filter_11" x="0%" y="0%" width="100%" height="100%">
+ <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="4">
+ <animate attributeName="numOctaves"
+ calcMode="paced"
+ begin="0s" dur="5s"
+ values="4; 3; 1"
+ fill="freeze"/>
+ </feTurbulence>
+ </filter>
+ <rect y="60" width="20" height="20" filter="url(#filter_11)"/>
+
+ <!-- Each of the four values should get an equal slice of the duration -
+ that is 1s - so at exactly 3s the animated value should become 1. -->
+ <filter id="filter_12" x="0%" y="0%" width="100%" height="100%">
+ <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="4">
+ <animate attributeName="numOctaves"
+ calcMode="paced"
+ begin="0s" dur="4s"
+ values="4; 3; 1"
+ fill="freeze"/>
+ </feTurbulence>
+ </filter>
+ <rect x="20" y="60" width="20" height="20" filter="url(#filter_12)"/>
+
+</svg>
diff --git a/layout/reftests/svg/smil/anim-fill-overpaintserver-1.svg b/layout/reftests/svg/smil/anim-fill-overpaintserver-1.svg
new file mode 100644
index 0000000000..d1a8d61597
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-fill-overpaintserver-1.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <defs>
+ <linearGradient id="red">
+ <stop offset="0.0" stop-color="#f00"/>
+ </linearGradient>
+ </defs>
+ <rect width="100%" height="100%" fill="url(#red)">
+ <set attributeName="fill" to="lime"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-fill-overpaintserver-2.svg b/layout/reftests/svg/smil/anim-fill-overpaintserver-2.svg
new file mode 100644
index 0000000000..e3ee053636
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-fill-overpaintserver-2.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait" onload="setTimeAndSnapshot(2, true)">
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <!-- In this test we will attempt to interpolate since fill is interpolatable
+ but fail since the base value can't be converted to an RGB color value
+ and hence should fall back to discrete calcMode which, in the case of
+ to-animation, sets the to value for the second half of the simple
+ duration. -->
+ <defs>
+ <linearGradient id="red">
+ <stop offset="0.0" stop-color="#f00"/>
+ </linearGradient>
+ </defs>
+ <rect width="100%" height="100%" fill="url(#red)">
+ <animate attributeName="fill" to="lime" dur="3s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-fillcolor-1.svg b/layout/reftests/svg/smil/anim-fillcolor-1.svg
new file mode 100644
index 0000000000..7b6ed390f1
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-fillcolor-1.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(2.5, false)">
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <rect x="15" y="15" width="200" height="200" fill="rgb(255,0,0)">
+ <animateColor attributeName="fill" from="rgb(255,0,0)" to="rgb(0,0,255)"
+ begin="0s" dur="2s" fill="freeze"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-fillopacity-1css.svg b/layout/reftests/svg/smil/anim-fillopacity-1css.svg
new file mode 100644
index 0000000000..68462b6e53
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-fillopacity-1css.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(2.5, false)">
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <rect x="15" y="15" width="200" height="200" fill="blue" fill-opacity="0">
+ <animate attributeName="fill-opacity" attributeType="CSS"
+ from="0" to="1" begin="0s" dur="2s" fill="freeze"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-fillopacity-1none.svg b/layout/reftests/svg/smil/anim-fillopacity-1none.svg
new file mode 100644
index 0000000000..7a8bfcc81e
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-fillopacity-1none.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(2.5, false)">
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <rect x="15" y="15" width="200" height="200" fill="blue" fill-opacity="0">
+ <animate attributeName="fill-opacity"
+ from="0" to="1" begin="0s" dur="2s" fill="freeze"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-fillopacity-1xml.svg b/layout/reftests/svg/smil/anim-fillopacity-1xml.svg
new file mode 100644
index 0000000000..f543745cc5
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-fillopacity-1xml.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(2.5, false)">
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <rect x="15" y="15" width="200" height="200" fill="blue" fill-opacity="0">
+ <animate attributeName="fill-opacity" attributeType="XML"
+ from="0" to="1" begin="0s" dur="2s" fill="freeze"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-filter-filterUnits-01.svg b/layout/reftests/svg/smil/anim-filter-filterUnits-01.svg
new file mode 100644
index 0000000000..641f711931
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-filter-filterUnits-01.svg
@@ -0,0 +1,42 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(1, true)">
+ <title>Test animation of the "filterUnits" enum attributes of the "filter" element</title>
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <filter id="flood_filter_1" filterUnits="userSpaceOnUse"
+ x="0%" y="0%" width="100%" height="100%">
+ <!-- this should reduce the referencing element to 50% of the
+ viewport width at 1.25s -->
+ <animate attributeName="filterUnits"
+ calcMode="discrete"
+ begin="0s" dur="2.5s"
+ from="userSpaceOnUse" to="objectBoundingBox"
+ fill="freeze"/>
+ <feFlood width="100%" height="100%" flood-color="lime"/>
+ </filter>
+ <filter id="flood_filter_2" x="0%" y="0%" width="100%" height="100%">
+ <!-- this should expand the referencing element to 100% of the
+ viewport width at 1s -->
+ <animate attributeName="filterUnits"
+ calcMode="discrete"
+ begin="0s" dur="2s"
+ from="objectBoundingBox" to="userSpaceOnUse"
+ fill="freeze"/>
+ <feFlood width="100%" height="100%" flood-color="lime"/>
+ </filter>
+ <rect width="100%" height="100%" fill="lime"/>
+ <rect width="100%" height="100" fill="red"/>
+
+ <!-- 40% through discrete animation simple duration -
+ tests animation doesn't affect the element too early -->
+ <svg height="50">
+ <rect width="50%" height="100%" fill="red" filter="url(#flood_filter_1)"/>
+ </svg>
+
+ <!-- 50% through discrete animation simple duration -
+ tests animation affects the element now -->
+ <svg y="50" height="50">
+ <rect width="50%" height="100%" fill="red" filter="url(#flood_filter_2)"/>
+ </svg>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-filter-href-01.svg b/layout/reftests/svg/smil/anim-filter-href-01.svg
new file mode 100644
index 0000000000..fa259de4ee
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-filter-href-01.svg
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(1, true)">
+ <title>Test animation of the "in" and "result" &lt;string&gt; attributes on "filter" elements</title>
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+
+ <defs>
+ <filter id="filt">
+ <feFlood flood-color="red" result="flood1"/>
+ <feFlood flood-color="lime" result="nowhere">
+ <animate attributeName="result"
+ calcMode="discrete"
+ begin="0s" dur="0.5s"
+ from="nowhere" to="flood2"
+ fill="freeze"/>
+ </feFlood>
+ <feOffset in="flood1">
+ <animate attributeName="in"
+ calcMode="discrete"
+ begin="0s" dur="0.5s"
+ from="flood1" to="flood2"
+ fill="freeze"/>
+ </feOffset>
+ </filter>
+ </defs>
+ <rect width="100%" height="100%" fill="red"/>
+ <rect width="100%" height="100%" fill="red" filter="url(#filt)"/>
+
+</svg>
diff --git a/layout/reftests/svg/smil/anim-filter-primitive-size-01.svg b/layout/reftests/svg/smil/anim-filter-primitive-size-01.svg
new file mode 100644
index 0000000000..ceb7c32856
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-filter-primitive-size-01.svg
@@ -0,0 +1,32 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait">
+ <title>Test animation of the "width" and "height" attributes of a filter primitive element</title>
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <script>
+
+window.addEventListener("MozReftestInvalidate", run, false);
+setTimeout(run, 4000); // fallback for running outside reftest
+
+function run() {
+ setTimeAndSnapshot(1, true)
+}
+
+ </script>
+ <filter id="flood_filter" x="0%" y="0%" width="100%" height="100%">
+ <feFlood width="0%" height="0%" flood-color="lime">
+ <animate attributeName="width"
+ calcMode="linear"
+ begin="0s" dur="2s"
+ from="0%" to="200%"
+ fill="freeze"/>
+ <animate attributeName="height"
+ calcMode="linear"
+ begin="0s" dur="1s"
+ from="0%" to="100%"
+ fill="freeze"/>
+ </feFlood>
+ </filter>
+ <rect width="100%" height="100%" fill="red"/>
+ <rect width="100%" height="100%" fill="red" filter="url(#flood_filter)"/>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-filter-size-01.svg b/layout/reftests/svg/smil/anim-filter-size-01.svg
new file mode 100644
index 0000000000..e047b89d92
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-filter-size-01.svg
@@ -0,0 +1,31 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait">
+ <title>Test animation of the "width" and "height" attributes of the "filter" element</title>
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <script>
+
+window.addEventListener("MozReftestInvalidate", run, false);
+setTimeout(run, 4000); // fallback for running outside reftest
+
+function run() {
+ setTimeAndSnapshot(1, true)
+}
+
+ </script>
+ <filter id="flood_filter" x="0%" y="0%" width="0%" height="0%">
+ <animate attributeName="width"
+ calcMode="linear"
+ begin="0s" dur="2s"
+ from="0%" to="200%"
+ fill="freeze"/>
+ <animate attributeName="height"
+ calcMode="linear"
+ begin="0s" dur="1s"
+ from="0%" to="100%"
+ fill="freeze"/>
+ <feFlood width="100%" height="100%" flood-color="lime"/>
+ </filter>
+ <rect width="100%" height="100%" fill="red"/>
+ <rect width="100%" height="100%" fill="red" filter="url(#flood_filter)"/>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-gradient-attr-presence-01-ref.svg b/layout/reftests/svg/smil/anim-gradient-attr-presence-01-ref.svg
new file mode 100644
index 0000000000..77212fbb3f
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-gradient-attr-presence-01-ref.svg
@@ -0,0 +1,142 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 900">
+ <!-- 1. gradientUnits -->
+ <defs>
+ <linearGradient id="gradientUnits" x1="0" y1="0" x2="100" y2="0"
+ gradientUnits="userSpaceOnUse">
+ <stop offset="0%" stop-color="#F60" />
+ <stop offset="100%" stop-color="#FF6" />
+ </linearGradient>
+ </defs>
+ <rect width="100px" height="100px" fill="url(#gradientUnits)"/>
+ <g transform="translate(100px)">
+ <rect width="100px" height="100px" fill="url(#gradientUnits)"/>
+ </g>
+ <!-- 2. gradientTransform -->
+ <defs>
+ <linearGradient id="gradientTransform"
+ gradientTransform="rotate(90 0.5 0.5)">
+ <stop offset="0%" stop-color="#F60" />
+ <stop offset="100%" stop-color="#FF6" />
+ </linearGradient>
+ </defs>
+ <g transform="translate(0px 100px)">
+ <rect width="100px" height="100px" fill="url(#gradientTransform)"/>
+ <g transform="translate(100px)">
+ <rect width="100px" height="100px" fill="url(#gradientTransform)"/>
+ </g>
+ </g>
+ <!-- 3. x1, x2 -->
+ <defs>
+ <linearGradient id="x1x2" x1="40%" x2="60%">
+ <stop offset="0%" stop-color="#F60" />
+ <stop offset="100%" stop-color="#FF6" />
+ </linearGradient>
+ </defs>
+ <g transform="translate(0px 200px)">
+ <rect width="100px" height="100px" fill="url(#x1x2)"/>
+ <g transform="translate(100px)">
+ <rect width="100px" height="100px" fill="url(#x1x2)"/>
+ </g>
+ </g>
+ <!-- 4. y1, y2 -->
+ <defs>
+ <linearGradient id="y1y2" x2="0%" y1="40%" y2="60%">
+ <stop offset="0%" stop-color="#F60" />
+ <stop offset="100%" stop-color="#FF6" />
+ </linearGradient>
+ </defs>
+ <g transform="translate(0px 300px)">
+ <rect width="100px" height="100px" fill="url(#y1y2)"/>
+ <g transform="translate(100px)">
+ <rect width="100px" height="100px" fill="url(#y1y2)"/>
+ </g>
+ </g>
+ <!-- 5. cx, cy -->
+ <defs>
+ <radialGradient id="cxcy" cx="0%" cy="100%">
+ <stop offset="0%" stop-color="#F60" />
+ <stop offset="100%" stop-color="#FF6" />
+ </radialGradient>
+ </defs>
+ <g transform="translate(0px 400px)">
+ <rect width="100px" height="100px" fill="url(#cxcy)"/>
+ <g transform="translate(100px)">
+ <rect width="100px" height="100px" fill="url(#cxcy)"/>
+ </g>
+ </g>
+ <!-- 6. r -->
+ <defs>
+ <radialGradient id="r" r="100%">
+ <stop offset="0%" stop-color="#F60" />
+ <stop offset="100%" stop-color="#FF6" />
+ </radialGradient>
+ </defs>
+ <g transform="translate(0px 500px)">
+ <rect width="100px" height="100px" fill="url(#r)"/>
+ <g transform="translate(100px)">
+ <rect width="100px" height="100px" fill="url(#r)"/>
+ </g>
+ </g>
+ <!-- 7. fx, fy -->
+ <defs>
+ <radialGradient id="fxfy" fx="20%" fy="80%">
+ <stop offset="0%" stop-color="#F60" />
+ <stop offset="100%" stop-color="#FF6" />
+ </radialGradient>
+ </defs>
+ <g transform="translate(0px 600px)">
+ <rect width="100px" height="100px" fill="url(#fxfy)"/>
+ <g transform="translate(100px)">
+ <rect width="100px" height="100px" fill="url(#fxfy)"/>
+ </g>
+ </g>
+ <!-- 8. spreadMethod -->
+ <defs>
+ <linearGradient id="spreadMethod" x1="50%" spreadMethod="reflect">
+ <stop offset="0%" stop-color="#F60" />
+ <stop offset="100%" stop-color="#FF6" />
+ </linearGradient>
+ </defs>
+ <g transform="translate(0px 700px)">
+ <rect width="100px" height="100px" fill="url(#spreadMethod)"/>
+ <g transform="translate(100px)">
+ <rect width="100px" height="100px" fill="url(#spreadMethod)"/>
+ </g>
+ </g>
+ <!-- 9. xlink:href -->
+ <defs>
+ <linearGradient id="xlink" xlink:href="#xlinkRef"/>
+ <linearGradient id="xlinkRef">
+ <stop offset="0%" stop-color="#F60" />
+ <stop offset="100%" stop-color="#FF6" />
+ </linearGradient>
+ </defs>
+ <g transform="translate(0px 800px)">
+ <rect width="100px" height="100" fill="url(#xlink)"/>
+ <g transform="translate(100px)">
+ <rect width="100px" height="100px" fill="url(#xlinkRef)"/>
+ </g>
+ </g>
+ <!-- We were getting random but very minor anti-aliasing differences on OSX
+ and OSX64 along the edges of these gradients so we draw a thick stroke
+ over all the edges. -->
+ <path stroke="black" stroke-width="3px" stroke-linecap="square" fill="none"
+ d="M0 0H200V900H0V0
+ M0 100H200
+ M0 200H200
+ M0 300H200
+ M0 400H200
+ M0 500H200
+ M0 600H200
+ M0 700H200
+ M0 800H200
+ M0 900H200
+ M100 0V900"/>
+ <!-- If adding more tests here, be sure to update the viewBox on the root svg
+ element -->
+</svg>
diff --git a/layout/reftests/svg/smil/anim-gradient-attr-presence-01.svg b/layout/reftests/svg/smil/anim-gradient-attr-presence-01.svg
new file mode 100644
index 0000000000..36b1339376
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-gradient-attr-presence-01.svg
@@ -0,0 +1,193 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 900">
+ <!-- Bug 608161 - SVG SMIL: Don't use HasAttr to test for presence of animated
+ attributes.
+
+ Test animating gradient attributes doesn't rely on the presence of
+ attributes in the DOM, but also correctly detects attributes set by
+ animation.
+
+ The format of each test is that we have a base gradient named
+ (attName)Ref which does NOT specify the attribute under test, but instead
+ sets the attribute to a non-default value using animation.
+
+ Then we have a referencing gradient named (attName) that refers to the
+ base gradient and also does NOT specify the attribute under test.
+
+ When we go to look up the attribute under test we begin at (attName),
+ notice the attribute isn't specified (either in the DOM or by animation),
+ then go to (attName)Ref and detect that the attribute is specified there
+ by animation and use that value.
+
+ To the right of each test we also include a rect that directly references
+ (attName)Ref. The two rectangles should be identical but prior to fixing
+ this bug they were not.
+ -->
+ <!-- 1. gradientUnits: defaults to objectBoundingBox -->
+ <defs>
+ <linearGradient xlink:href="#gradientUnitsRef" id="gradientUnits"/>
+ <linearGradient id="gradientUnitsRef" x1="0" y1="0" x2="100" y2="0">
+ <set attributeName="gradientUnits" to="userSpaceOnUse"/>
+ <stop offset="0%" stop-color="#F60" />
+ <stop offset="100%" stop-color="#FF6" />
+ </linearGradient>
+ </defs>
+ <rect width="100px" height="100px" fill="url(#gradientUnits)"/>
+ <g transform="translate(100px)">
+ <rect width="100px" height="100px" fill="url(#gradientUnitsRef)"/>
+ </g>
+ <!-- 2. gradientTransform: defaults to identity -->
+ <defs>
+ <linearGradient xlink:href="#gradientTransformRef" id="gradientTransform"/>
+ <linearGradient id="gradientTransformRef">
+ <animateTransform attributeName="gradientTransform" type="rotate"
+ values="90 0.5 0.5" fill="freeze"/>
+ <stop offset="0%" stop-color="#F60" />
+ <stop offset="100%" stop-color="#FF6" />
+ </linearGradient>
+ </defs>
+ <g transform="translate(0px 100px)">
+ <rect width="100px" height="100px" fill="url(#gradientTransform)"/>
+ <g transform="translate(100px)">
+ <rect width="100px" height="100px" fill="url(#gradientTransformRef)"/>
+ </g>
+ </g>
+ <!-- 3. x1: defaults to 0%
+ x2: defaults to 100% -->
+ <defs>
+ <linearGradient xlink:href="#x1x2Ref" id="x1x2"/>
+ <linearGradient id="x1x2Ref">
+ <set attributeName="x1" to="40%"/>
+ <set attributeName="x2" to="60%"/>
+ <stop offset="0%" stop-color="#F60" />
+ <stop offset="100%" stop-color="#FF6" />
+ </linearGradient>
+ </defs>
+ <g transform="translate(0px 200px)">
+ <rect width="100px" height="100px" fill="url(#x1x2)"/>
+ <g transform="translate(100px)">
+ <rect width="100px" height="100px" fill="url(#x1x2Ref)"/>
+ </g>
+ </g>
+ <!-- 4. y1: defaults to 0%
+ y2: defaults to 0% -->
+ <defs>
+ <linearGradient xlink:href="#y1y2Ref" id="y1y2"/>
+ <linearGradient id="y1y2Ref" x2="0%">
+ <set attributeName="y1" to="40%"/>
+ <set attributeName="y2" to="60%"/>
+ <stop offset="0%" stop-color="#F60" />
+ <stop offset="100%" stop-color="#FF6" />
+ </linearGradient>
+ </defs>
+ <g transform="translate(0px 300px)">
+ <rect width="100px" height="100px" fill="url(#y1y2)"/>
+ <g transform="translate(100px)">
+ <rect width="100px" height="100px" fill="url(#y1y2Ref)"/>
+ </g>
+ </g>
+ <!-- 5. cx: defaults to 50%
+ cy: defaults to 50% -->
+ <defs>
+ <radialGradient xlink:href="#cxcyRef" id="cxcy"/>
+ <radialGradient id="cxcyRef">
+ <set attributeName="cx" to="0%"/>
+ <set attributeName="cy" to="100%"/>
+ <stop offset="0%" stop-color="#F60" />
+ <stop offset="100%" stop-color="#FF6" />
+ </radialGradient>
+ </defs>
+ <g transform="translate(0px 400px)">
+ <rect width="100px" height="100px" fill="url(#cxcy)"/>
+ <g transform="translate(100px)">
+ <rect width="100px" height="100px" fill="url(#cxcyRef)"/>
+ </g>
+ </g>
+ <!-- 6. r: defaults to 50% -->
+ <defs>
+ <radialGradient xlink:href="#rRef" id="r"/>
+ <radialGradient id="rRef">
+ <set attributeName="r" to="100%"/>
+ <stop offset="0%" stop-color="#F60" />
+ <stop offset="100%" stop-color="#FF6" />
+ </radialGradient>
+ </defs>
+ <g transform="translate(0px 500px)">
+ <rect width="100px" height="100px" fill="url(#r)"/>
+ <g transform="translate(100px)">
+ <rect width="100px" height="100px" fill="url(#rRef)"/>
+ </g>
+ </g>
+ <!-- 7. fx: defaults to cx
+ fy: defaults to cy -->
+ <defs>
+ <radialGradient xlink:href="#fxfyRef" id="fxfy"/>
+ <radialGradient id="fxfyRef">
+ <set attributeName="fx" to="20%"/>
+ <set attributeName="fy" to="80%"/>
+ <stop offset="0%" stop-color="#F60" />
+ <stop offset="100%" stop-color="#FF6" />
+ </radialGradient>
+ </defs>
+ <g transform="translate(0px 600px)">
+ <rect width="100px" height="100px" fill="url(#fxfy)"/>
+ <g transform="translate(100px)">
+ <rect width="100px" height="100px" fill="url(#fxfyRef)"/>
+ </g>
+ </g>
+ <!-- 8. spreadMethod: defaults to pad -->
+ <defs>
+ <linearGradient xlink:href="#spreadMethodRef" id="spreadMethod"/>
+ <linearGradient id="spreadMethodRef" x1="50%">
+ <set attributeName="spreadMethod" to="reflect"/>
+ <stop offset="0%" stop-color="#F60" />
+ <stop offset="100%" stop-color="#FF6" />
+ </linearGradient>
+ </defs>
+ <g transform="translate(0px 700px)">
+ <rect width="100px" height="100px" fill="url(#spreadMethod)"/>
+ <g transform="translate(100px)">
+ <rect width="100px" height="100px" fill="url(#spreadMethodRef)"/>
+ </g>
+ </g>
+ <!-- 9. xlink:href
+ This attribute is not affected by bug 608161 but we test it here for
+ completeness.
+ -->
+ <defs>
+ <linearGradient id="xlink">
+ <set attributeName="xlink:href" to="#xlinkRef"/>
+ </linearGradient>
+ <linearGradient id="xlinkRef">
+ <stop offset="0%" stop-color="#F60" />
+ <stop offset="100%" stop-color="#FF6" />
+ </linearGradient>
+ </defs>
+ <g transform="translate(0px 800px)">
+ <rect width="100px" height="100px" fill="url(#xlink)"/>
+ <g transform="translate(100px)">
+ <rect width="100px" height="100px" fill="url(#xlinkRef)"/>
+ </g>
+ </g>
+ <!-- We were getting random but very minor anti-aliasing differences on OSX
+ and OSX64 along the edges of these gradients so we draw a thick stroke
+ over all the edges. -->
+ <path stroke="black" stroke-width="3px" stroke-linecap="square" fill="none"
+ d="M0 0H200V900H0V0
+ M0 100H200
+ M0 200H200
+ M0 300H200
+ M0 400H200
+ M0 500H200
+ M0 600H200
+ M0 700H200
+ M0 800H200
+ M0 900H200
+ M100 0V900"/>
+ <!-- If adding more tests here, be sure to update the viewBox on the root svg
+ element -->
+</svg>
diff --git a/layout/reftests/svg/smil/anim-gradient-href-01.svg b/layout/reftests/svg/smil/anim-gradient-href-01.svg
new file mode 100644
index 0000000000..717454e47d
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-gradient-href-01.svg
@@ -0,0 +1,29 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(0.25, true)">
+ <title>Test animation of the "xlink:href" &lt;string&gt; attribute on the "linearGradient" element</title>
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+
+ <defs>
+ <linearGradient id="grad1a" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="0">
+ <stop id="red" stop-color="red" offset="0"/>
+ </linearGradient>
+ <linearGradient id="grad1b" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="0">
+ <stop id="lime" stop-color="lime" offset="0"/>
+ </linearGradient>
+ <linearGradient id="grad2" xlink:href="#grad1a">
+ <animate attributeName="xlink:href"
+ begin="0s" dur="0.5s"
+ from="#grad1a" to="#grad1b"
+ fill="freeze"/>
+ </linearGradient>
+ </defs>
+ <rect width="100%" height="100%" fill="lime"/>
+ <rect x="20" y="150" width="440" height="80" fill="url(#grad2)" />
+
+</svg>
diff --git a/layout/reftests/svg/smil/anim-height-done-1a.svg b/layout/reftests/svg/smil/anim-height-done-1a.svg
new file mode 100644
index 0000000000..2c76c78820
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-height-done-1a.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(2, false)">
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <rect x="15" y="15" width="200" height="50" fill="blue">
+ <animate attributeName="height"
+ from="50" to="200" begin="0s" dur="2s" fill="freeze"/>
+ </rect>
+</svg>
+
diff --git a/layout/reftests/svg/smil/anim-height-done-1b.svg b/layout/reftests/svg/smil/anim-height-done-1b.svg
new file mode 100644
index 0000000000..e36788264a
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-height-done-1b.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(2.5, false)">
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <rect x="15" y="15" width="200" height="50" fill="blue">
+ <animate attributeName="height"
+ from="50" to="200" begin="0s" dur="2s" fill="freeze"/>
+ </rect>
+</svg>
+
diff --git a/layout/reftests/svg/smil/anim-height-done-2.svg b/layout/reftests/svg/smil/anim-height-done-2.svg
new file mode 100644
index 0000000000..9b967b8b73
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-height-done-2.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(2, false)" width="0%" height="0%" viewBox="0 0 100 100" preserveAspectRatio="none">
+ <animate attributeName="height"
+ from="0%" to="100%" begin="0s" dur="2s" fill="freeze"/>
+ <animate attributeName="width"
+ from="0%" to="100%" begin="0s" dur="2s" fill="freeze"/>
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <rect width="100" height="100" fill="lime"/>
+</svg>
+
diff --git a/layout/reftests/svg/smil/anim-height-interp-1-ref.svg b/layout/reftests/svg/smil/anim-height-interp-1-ref.svg
new file mode 100644
index 0000000000..27a02e1471
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-height-interp-1-ref.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <rect x="15" y="15" width="200" height="115" fill="blue"/>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-height-interp-1.svg b/layout/reftests/svg/smil/anim-height-interp-1.svg
new file mode 100644
index 0000000000..d9bae4605d
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-height-interp-1.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(0.3, true)">
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <rect x="15" y="15" width="200" height="50" fill="blue">
+ <animate attributeName="height"
+ from="100" to="200" begin="0s" dur="2s" fill="freeze"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-height-interp-2-ref.svg b/layout/reftests/svg/smil/anim-height-interp-2-ref.svg
new file mode 100644
index 0000000000..7c9ee8e593
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-height-interp-2-ref.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <rect x="15" y="15" width="200" height="125" fill="blue"/>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-height-interp-2.svg b/layout/reftests/svg/smil/anim-height-interp-2.svg
new file mode 100644
index 0000000000..5226dad75d
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-height-interp-2.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(0.5, true)">
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <rect x="15" y="15" width="200" height="50" fill="blue">
+ <animate attributeName="height"
+ from="100" to="200" begin="0s" dur="2s" fill="freeze"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-height-interp-3-ref.svg b/layout/reftests/svg/smil/anim-height-interp-3-ref.svg
new file mode 100644
index 0000000000..d7c16a4d18
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-height-interp-3-ref.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <rect x="15" y="15" width="200" height="160" fill="blue"/>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-height-interp-3.svg b/layout/reftests/svg/smil/anim-height-interp-3.svg
new file mode 100644
index 0000000000..170fc41936
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-height-interp-3.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(1.2, true)">
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <rect x="15" y="15" width="200" height="50" fill="blue">
+ <animate attributeName="height"
+ from="100" to="200" begin="0s" dur="2s" fill="freeze"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-height-interp-4-ref.svg b/layout/reftests/svg/smil/anim-height-interp-4-ref.svg
new file mode 100644
index 0000000000..5d51804a08
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-height-interp-4-ref.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <rect x="15" y="15" width="200" height="170" fill="blue"/>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-height-interp-4.svg b/layout/reftests/svg/smil/anim-height-interp-4.svg
new file mode 100644
index 0000000000..ffea9649cb
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-height-interp-4.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(1.4, true)">
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <rect x="15" y="15" width="200" height="50" fill="blue">
+ <animate attributeName="height"
+ from="100" to="200" begin="0s" dur="2s" fill="freeze"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-height-interp-5-ref.svg b/layout/reftests/svg/smil/anim-height-interp-5-ref.svg
new file mode 100644
index 0000000000..1c8991152f
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-height-interp-5-ref.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <rect x="15" y="15" width="200" height="190" fill="blue"/>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-height-interp-5.svg b/layout/reftests/svg/smil/anim-height-interp-5.svg
new file mode 100644
index 0000000000..d0562ee6f1
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-height-interp-5.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(1.8, true)">
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <rect x="15" y="15" width="200" height="50" fill="blue">
+ <animate attributeName="height"
+ from="100" to="200" begin="0s" dur="2s" fill="freeze"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-height-interp-6-ref.svg b/layout/reftests/svg/smil/anim-height-interp-6-ref.svg
new file mode 100644
index 0000000000..a809eb515c
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-height-interp-6-ref.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <rect x="15" y="15" width="200" height="195" fill="blue"/>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-height-interp-6.svg b/layout/reftests/svg/smil/anim-height-interp-6.svg
new file mode 100644
index 0000000000..eeb3bdfadb
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-height-interp-6.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(1.9, true)">
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <rect x="15" y="15" width="200" height="50" fill="blue">
+ <animate attributeName="height"
+ from="100" to="200" begin="0s" dur="2s" fill="freeze"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-image-href-01.svg b/layout/reftests/svg/smil/anim-image-href-01.svg
new file mode 100644
index 0000000000..44d63b23b3
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-image-href-01.svg
@@ -0,0 +1,22 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(1, true)">
+ <title>Test animation of the "xlink:href" &lt;string&gt; attribute on the "image" element</title>
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+
+ <rect width="100%" height="100%" fill="lime"/>
+ <rect width="64" height="64" fill="red"/>
+ <image fill="none" width="64" height="64" xlink:href="">
+ <animate attributeName="xlink:href"
+ calcMode="discrete"
+ begin="0s" dur="0.5s"
+ from="" to="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAIAAAAlC+aJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAJFJREFUaEPt1UEOg0AMBEHz/0ez8IY5zFqqKFdLkGrHz7yz/PO9wOrv7qf/81n983uBCwAl1EYgQCD8H5eQhCTUboAAgbCBcNwdaBdIgIAlbjdAgEDYQDjuDrQLJEDAErcbIEAgbCAcdwfaBRIgYInbDRAgEDYQjrsD7QIJELDE7QYIEAgbCMfdgXaBBAhkS3wAXsqyIo0zj4gAAAAASUVORK5CYII="
+ fill="freeze"/>
+ </image>
+
+</svg>
diff --git a/layout/reftests/svg/smil/anim-indefinite-to-1.svg b/layout/reftests/svg/smil/anim-indefinite-to-1.svg
new file mode 100644
index 0000000000..0826e113b1
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-indefinite-to-1.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <!-- Test that an indefinite to-animation just sticks to the base value for
+ interpolatable attributes. -->
+ <rect x="15" y="15" width="200" height="200" fill="blue">
+ <animate attributeName="height" to="100" dur="indefinite"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-indefinite-to-2.svg b/layout/reftests/svg/smil/anim-indefinite-to-2.svg
new file mode 100644
index 0000000000..3de1aecad7
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-indefinite-to-2.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <!-- Test that an indefinite to-animation with discrete calcMode applies
+ the underlying value for the whole time. -->
+ <rect x="15" y="15" width="200" height="200" fill="blue">
+ <animate attributeName="height" to="100" dur="indefinite"
+ calcMode="discrete"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-indefinite-to-3.svg b/layout/reftests/svg/smil/anim-indefinite-to-3.svg
new file mode 100644
index 0000000000..e4e7d22f86
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-indefinite-to-3.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <!-- Test that an indefinite to-animation that falls back to discrete calcMode
+ because the property is not interpolatable, applies the underlying value
+ for the whole time. -->
+ <rect x="15" y="15" width="200" height="200" fill="blue" visibility="visible">
+ <animate attributeName="visibility" to="hidden" dur="indefinite"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-indefinite-to-4.svg b/layout/reftests/svg/smil/anim-indefinite-to-4.svg
new file mode 100644
index 0000000000..29086705f6
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-indefinite-to-4.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <!-- This is not really a to-animation, but we want to check that set
+ animation isn't incorrectly treated as to-animation.
+
+ Provided the attribute being animated is interpolatable (as it is in this
+ case) and calcMode != discrete, to-animation will begin from the base
+ value (and never change in this case as the simple duration is
+ indefinite).
+
+ Set animation, however, never sets the base value, only the to value. -->
+ <rect x="15" y="15" width="200" height="100" fill="blue">
+ <set attributeName="height" to="200" dur="indefinite"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-length-reset-01.svg b/layout/reftests/svg/smil/anim-length-reset-01.svg
new file mode 100644
index 0000000000..a4bab46520
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-length-reset-01.svg
@@ -0,0 +1,22 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="document.documentElement.setCurrentTime(0);
+ if (document.getElementById('x').width.animVal.value != 0) {
+ /* fail */
+ document.documentElement.textContent = '';
+ }
+ setTimeAndSnapshot(1, true)">
+ <title>Test that an animation for a length correctly restores the original
+ pixel size when the animation is done.</title>
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <rect width="100%" height="100%" fill="lime"/>
+ <rect width="100" height="100" fill="red"/>
+ <rect width="100" height="100" fill="lime" id="x">
+ <set attributeName="width" to="0" dur="1s" begin="0s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-marker-orient-01.svg b/layout/reftests/svg/smil/anim-marker-orient-01.svg
new file mode 100644
index 0000000000..1172961cf7
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-marker-orient-01.svg
@@ -0,0 +1,38 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(4, true)">
+ <title>Test animation of the "orient" attribute of the "marker" element</title>
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+
+ <rect width="100%" height="100%" fill="lime"/>
+
+ <!-- Check that midway through the simple duration the orient attribute has
+ an animated value of -90deg -->
+ <marker id="marker_1" markerWidth="50" markerHeight="50"
+ markerUnits="userSpaceOnUse">
+ <rect width="20" height="20" fill="lime"/>
+ <animate attributeName="orient"
+ calcMode="linear"
+ begin="0s" dur="8s"
+ from="0deg" to="-180deg"
+ fill="freeze"/>
+ </marker>
+ <rect width="20" height="20" fill="red"/>
+ <line x2="0" y2="20" marker-end="url(#marker_1)" stroke="transparent"/>
+
+ <!-- Check that at the end of the simple duration the orient attribute has
+ an animated value of -90deg -->
+ <marker id="marker_2" markerWidth="50" markerHeight="50"
+ markerUnits="userSpaceOnUse">
+ <rect width="20" height="20" fill="lime"/>
+ <animate attributeName="orient"
+ calcMode="linear"
+ begin="0s" dur="4s"
+ from="0deg" to="-90deg"
+ fill="freeze"/>
+ </marker>
+ <rect x="20" width="20" height="20" fill="red"/>
+ <line x2="20" y2="20" marker-end="url(#marker_2)" stroke="transparent"/>
+
+</svg>
diff --git a/layout/reftests/svg/smil/anim-marker-orient-02.svg b/layout/reftests/svg/smil/anim-marker-orient-02.svg
new file mode 100644
index 0000000000..2c2d96ceaf
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-marker-orient-02.svg
@@ -0,0 +1,38 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(4, true)">
+ <title>Test animation of the "orient" attribute of the "marker" element</title>
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+
+ <rect width="100%" height="100%" fill="lime"/>
+ <!-- Check that partway through the simple duration, the orient attribute is
+ still stuck at the initial value ("-90deg"), since we currently can't
+ interpolate between angle-values and "auto" -->
+ <marker id="marker_1" markerWidth="50" markerHeight="50"
+ markerUnits="userSpaceOnUse">
+ <rect width="20" height="20" fill="lime"/>
+ <animate attributeName="orient"
+ calcMode="linear"
+ begin="0s" dur="10s"
+ from="-90deg" to="auto"
+ fill="freeze"/>
+ </marker>
+ <rect width="20" height="20" fill="red"/>
+ <line x2="0" y2="20" marker-end="url(#marker_1)" stroke="transparent"/>
+
+ <!-- Check that at the end of the simple duration the orient attribute has
+ an animated value of "auto" (which in this case corresponds to 90deg) -->
+ <marker id="marker_2" markerWidth="50" markerHeight="50"
+ markerUnits="userSpaceOnUse">
+ <rect width="20" height="20" fill="lime"/>
+ <animate attributeName="orient"
+ calcMode="linear"
+ begin="0s" dur="4s"
+ from="-45deg" to="auto"
+ fill="freeze"/>
+ </marker>
+ <rect x="20" width="20" height="20" fill="red"/>
+ <line x1="40" y1="-20" x2="40" y2="0" marker-end="url(#marker_2)"
+ stroke="transparent"/>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-nonpixel-length-reset-01.svg b/layout/reftests/svg/smil/anim-nonpixel-length-reset-01.svg
new file mode 100644
index 0000000000..c362695a75
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-nonpixel-length-reset-01.svg
@@ -0,0 +1,22 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="document.documentElement.setCurrentTime(0);
+ if (document.getElementById('x').width.animVal.value != 0) {
+ /* fail */
+ document.documentElement.textContent = '';
+ }
+ setTimeAndSnapshot(1, true)">
+ <title>Test that an animation for a length correctly restores the original
+ pixel size when the animation is done.</title>
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <rect width="100%" height="100%" fill="lime"/>
+ <rect width="100" height="100" fill="red"/>
+ <rect width="10em" height="100" fill="lime" font-size="10px" id="x">
+ <set attributeName="width" to="0" dur="1s" begin="0s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-offset-01.svg b/layout/reftests/svg/smil/anim-offset-01.svg
new file mode 100644
index 0000000000..6fd68fc848
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-offset-01.svg
@@ -0,0 +1,52 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(1, true)">
+ <title>Test animation of the "offset" attribute on the "stop" element</title>
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <linearGradient id="gradient_1">
+ <stop stop-color="lime" offset="0"/>
+ <stop stop-color="lime" offset="0">
+ <animate attributeName="offset" attributeType="XML"
+ calcMode="linear"
+ begin="0s" dur="2s"
+ to="100%"
+ fill="freeze"/>
+ </stop>
+ <stop stop-color="red" offset="0">
+ <animate attributeName="offset" attributeType="XML"
+ calcMode="linear"
+ begin="0s" dur="2s"
+ to="1"
+ fill="freeze"/>
+ </stop>
+ <stop stop-color="red" offset="1"/>
+ </linearGradient>
+ <linearGradient id="gradient_2">
+ <stop stop-color="lime" offset="0"/>
+ <stop stop-color="lime" offset="0">
+ <animate attributeName="offset" attributeType="XML"
+ calcMode="linear"
+ begin="0s" dur="1s"
+ to="100%"
+ fill="freeze"/>
+ </stop>
+ <stop stop-color="red" offset="0">
+ <animate attributeName="offset" attributeType="XML"
+ calcMode="linear"
+ begin="0s" dur="1s"
+ to="1"
+ fill="freeze"/>
+ </stop>
+ <stop stop-color="red" offset="1"/>
+ </linearGradient>
+ <rect width="100%" height="100%" fill="lime"/>
+ <rect width="200" height="200" fill="red"/>
+
+ <!-- test 50% completed animation -->
+ <rect width="200" height="100" fill="url(#gradient_1)"/>
+ <rect x="100" width="100" height="100" fill="lime"/>
+
+ <!-- test 100% completed animation -->
+ <rect y="100" width="200" height="100" fill="url(#gradient_2)"/>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-opacity-01.svg b/layout/reftests/svg/smil/anim-opacity-01.svg
new file mode 100644
index 0000000000..bc4a368de5
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-opacity-01.svg
@@ -0,0 +1,23 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="reftest-wait"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ onload="setTimeAndSnapshot(101, false)">
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <title>Testing that opacity changes are reflected in patterns</title>
+
+ <defs>
+ <pattern id="p" width="100%" height="100%">
+ <g>
+ <rect width="100%" height="100%" fill="lime" stroke="lime" stroke-width="1" opacity="0">
+ <animate attributeName="opacity" values="0;1" dur="1s" begin="99s" fill="freeze" />
+ </rect>
+ </g>
+ </pattern>
+ </defs>
+
+ <rect width="100%" height="100%" fill="red"/>
+ <rect width="100%" height="100%" fill="url(#p)"/>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-overflow-shorthand-ref.svg b/layout/reftests/svg/smil/anim-overflow-shorthand-ref.svg
new file mode 100644
index 0000000000..07676395d3
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-overflow-shorthand-ref.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Reference for animation of the "overflow" shorthand attribute</title>
+
+ <rect width="100%" height="100%" fill="none"/>
+ <marker id="marker" markerWidth="20" markerHeight="20"
+ viewBox="0 0 10 10" style="overflow: hidden">
+ <path fill="red" d="M 0 0 L 20 10 L 0 20 z" />
+ </marker>
+ <line x2="0" y2="0" marker-end="url(#marker)" stroke="transparent"/>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-overflow-shorthand.svg b/layout/reftests/svg/smil/anim-overflow-shorthand.svg
new file mode 100644
index 0000000000..a79dd44db2
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-overflow-shorthand.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(4, true)">
+ <title>Test animation of the "overflow" shorthand attribute</title>
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+
+ <rect width="100%" height="100%" fill="none"/>
+ <marker id="marker" markerWidth="20" markerHeight="20"
+ viewBox="0 0 10 10">
+ <path fill="red" d="M 0 0 L 20 10 L 0 20 z" />
+ <set attributeName="overflow"
+ calcMode="linear"
+ begin="0s" dur="2s"
+ from="hidden" to="hidden"
+ fill="freeze"/>
+ </marker>
+ <line x2="0" y2="0" marker-end="url(#marker)" stroke="transparent"/>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-paintserver-1-ref.svg b/layout/reftests/svg/smil/anim-paintserver-1-ref.svg
new file mode 100644
index 0000000000..d6cf9488ee
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-paintserver-1-ref.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <rect x="0" y="0" width="300" height="400" fill="lime"/>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-paintserver-1.svg b/layout/reftests/svg/smil/anim-paintserver-1.svg
new file mode 100644
index 0000000000..33f5fa158a
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-paintserver-1.svg
@@ -0,0 +1,86 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <defs>
+ <linearGradient id="lime">
+ <stop offset="0.0" stop-color="lime"/>
+ </linearGradient>
+ <linearGradient id="red">
+ <stop offset="0.0" stop-color="red"/>
+ </linearGradient>
+ </defs>
+
+ <!-- 1. Set paint server -->
+ <rect x="0" y="0" width="100" height="100" fill="red">
+ <set attributeName="fill" to="url(#lime)"/>
+ </rect>
+ <!-- 2. Get paint server. We're looking for a code path that will fetch the
+ base value, fail to replace it, and end up setting the animation
+ value as the fetched base value.
+ To-animation requires fetching the base value so we use that, plus
+ invalid animation values so that we won't replace the base value. -->
+ <rect x="100" y="0" width="100" height="100" fill="url(#lime)">
+ <animate attributeName="fill" to="pikapikaglittergold"/>
+ </rect>
+ <!-- 3. "Interpolate" paint servers. We should fall back to discrete mode
+ which should mean that 150s into a 3-valued animation of 400s duration
+ we're in the middle value since each value will get about 133s each.
+ -->
+ <rect x="200" y="0" width="100" height="100" fill="red">
+ <animate attributeName="fill" values="orange; url(#lime); purple"
+ begin="-150s" dur="400s"/>
+ </rect>
+
+ <!-- By addition tests: In the following cases we'll go to calculate our
+ animation function values but since they're by-animation we'll try to do
+ some addition which should fail since addition with paint servers isn't
+ supported and hence the animation should not be applied. -->
+ <!-- 4. Check by-addition behaves (1): by: paint server -->
+ <rect x="0" y="100" width="100" height="100" fill="lime">
+ <animate attributeName="fill" from="#f00" by="url(#red)"/>
+ </rect>
+ <!-- 5. Check by-addition behaves (2): from: paint server -->
+ <rect x="100" y="100" width="100" height="100" fill="lime">
+ <animate attributeName="fill" from="url(#red)" by="#f00"/>
+ </rect>
+ <!-- 6. Check by-addition behaves (3): from-by paint server -->
+ <rect x="200" y="100" width="100" height="100" fill="#0f0">
+ <animate attributeName="fill" from="url(#red)" by="url(#red)"/>
+ </rect>
+
+ <!-- 7. Check that by-addition without a paint server is ok though.
+ (Since the animation has indefinite simple duration we'll never get past
+ the first value which is is lime green.) -->
+ <rect x="0" y="200" width="100" height="100" fill="red">
+ <animate attributeName="fill" from="#0f0" by="#00f" dur="indefinite"/>
+ </rect>
+ <!-- 8. Sandwich addition test. In the following cases we should be able to
+ calculate the animation function ok, but we'll fail to add it to the
+ underlying values (since paint servers can't be added) and just set the
+ value instead. (SMIL 3 12.6.3 says, "[The additive] attribute is
+ ignored if the target attribute does not support additive animation.")
+ -->
+ <rect x="100" y="200" width="100" height="100" fill="red">
+ <animate attributeName="fill" values="url(#lime)" additive="sum"/>
+ </rect>
+ <!-- 9. Check paced animation fails expectedly. The operation is as with case
+ 3 and we should fall back to discrete mode -->
+ <rect x="200" y="200" width="100" height="100" fill="red">
+ <animate attributeName="fill" values="#0f1; url(#lime); #00f"
+ begin="-150s" dur="400s" calcMode="paced"/>
+ </rect>
+
+ <!-- 10. Fallback color - specified color -->
+ <rect x="0" y="300" width="100" height="100" fill="red">
+ <set attributeName="fill" to="url(#nonexistant) lime"/>
+ </rect>
+ <!-- 11. Fallback color - currentColor -->
+ <g color="lime">
+ <rect x="100" y="300" width="100" height="100" fill="red">
+ <set attributeName="fill" to="url(#nonexistant) currentColor"/>
+ </rect>
+ </g>
+ <!-- 12. Fallback color - none -->
+ <rect x="200" y="300" width="100" height="100" fill="lime"/>
+ <rect x="200" y="300" width="100" height="100" fill="red">
+ <set attributeName="fill" to="url(#nonexistant) none"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-path-d-01-ref.svg b/layout/reftests/svg/smil/anim-path-d-01-ref.svg
new file mode 100644
index 0000000000..b32fd77dbe
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-path-d-01-ref.svg
@@ -0,0 +1,134 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <style type="text/css">
+ path { fill: none; stroke: blue; stroke-width: 1px;
+ shape-rendering: crispEdges; }
+ </style>
+
+ <path d="M10,10
+ L26,10
+ l-16,32
+ H26
+ V10
+ h16
+ v32
+
+ M80,10
+ C90,30 85,30 96,30
+ S102,30 112,10
+
+ m30,0
+ c10,20 5,20 16,20
+ s6,0 16,-20
+
+ M220,20
+ Q225,46 236,26
+ T252,20
+
+ M290,20
+ q5,26 16,6
+ t16,-6
+
+ M364,36
+ A16,11 -30 1 1 380,36
+
+ M410,36
+ a16,11 -30 1 1 16,0
+ "/>
+
+ <path transform="translate(0,70)"
+ d="M10,10
+ L26,10
+ l-16,32
+ H26
+ V10
+ h16
+ v32
+
+ M80,10
+ C90,30 85,30 96,30
+ S102,30 112,10
+
+ m30,0
+ c10,20 5,20 16,20
+ s6,0 16,-20
+
+ M220,20
+ Q225,46 236,26
+ T252,20
+
+ M290,20
+ q5,26 16,6
+ t16,-6
+
+ M364,36
+ A16,11 -30 1 1 380,36
+
+ M410,36
+ a16,11 -30 1 1 16,0
+ "/>
+
+ <path transform="translate(0,140)"
+ d="M10,10
+ L33,10
+ l-23,46
+ H33
+ V10
+ h23
+ v46
+
+ M80,10
+ C100,20 90,50 103,50
+ S106,20 126,10
+
+ m20,0
+ c20,10 10,40 23,40
+ s3,-30 23,-40
+
+ M220,30
+ Q230,72 243,33
+ T266,30
+
+ M290,30
+ q10,42 23,3
+ t23,-3
+
+ M368,53
+ A23,13 -60 1 1 382,53
+
+ M410,53
+ a23,13 -60 1 1 14,0
+ "/>
+
+ <path transform="translate(0,210)"
+ d="M10,10
+ L40,10
+ l-30,60
+ H40
+ V10
+ h30
+ v60
+
+ M80,10
+ C110,10 95,70 110,70
+ S110,10 140,10
+
+ m10,0
+ c30,0 15,60 30,60
+ s0,-60 30,-60
+
+ M220,40
+ Q235,98 250,40
+ T280,40
+
+ M290,40
+ q15,58 30,0
+ t30,0
+
+ M372,70
+ A30,15 -90 1 1 384,70
+
+ M410,70
+ a30,15 -90 1 1 12,0
+ "/>
+
+</svg>
diff --git a/layout/reftests/svg/smil/anim-path-d-01.svg b/layout/reftests/svg/smil/anim-path-d-01.svg
new file mode 100644
index 0000000000..180cfe5679
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-path-d-01.svg
@@ -0,0 +1,340 @@
+<!--
+ From https://bugzilla.mozilla.org/show_bug.cgi?id=522306
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(1, true)">
+ <title>Test animation of the 'd' attribute on the 'path' element</title>
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <style type="text/css">
+ path { fill: none; stroke: blue; stroke-width: 1px;
+ shape-rendering: crispEdges; }
+ </style>
+
+
+ <!-- The difference between respective numbers in the effective 'from' and
+ 'to' path data below is carefully designed to be a factor of 3. That way
+ our reference file (which checks against a one third complete animation)
+ can contain whole numbers, which is necessary to avoid failure due to
+ hard coded rounded numbers in the reference not matching platform
+ specific rounding behaviour.
+ -->
+
+ <!-- Test 'to' animation. -->
+
+ <path d="M10,10
+ L19,10
+ l-9,18
+ H19
+ V10
+ h9
+ v18
+
+ M80,10
+ C80,40 80,10 89,10
+ S98,40 98,10
+
+ m40,0
+ c0,30 0,0 9,0
+ s9,30 9,0
+
+ M220,10
+ Q220,20 229,19
+ T238,10
+
+ M290,10
+ q0,10 9,9
+ t9,-9
+
+ M360,19
+ A9,9 0 1 1 378,19
+
+ M410,19
+ a9,9 0 1 1 18,0
+ ">
+ <animate attributeName="d"
+ calcMode="linear"
+ begin="0s" dur="3s"
+ to="M10,10
+ L40,10
+ l-30,60
+ H40
+ V10
+ h30
+ v60
+
+ M80,10
+ C110,10 95,70 110,70
+ S110,10 140,10
+
+ m10,0
+ c30,0 15,60 30,60
+ s0,-60 30,-60
+
+ M220,40
+ Q235,98 250,40
+ T280,40
+
+ M290,40
+ q15,58 30,0
+ t30,0
+
+ M372,70
+ A30,15 -90 1 1 384,70
+
+ M410,70
+ a30,15 -90 1 1 12,0
+ "
+ fill="freeze"/>
+ </path>
+
+
+ <!-- Test 'by' animation. -->
+
+ <path transform="translate(0, 70)"
+ d="M10,10
+ L19,10
+ l-9,18
+ H19
+ V10
+ h9
+ v18
+
+ M80,10
+ C80,40 80,10 89,10
+ S98,40 98,10
+
+ m40,0
+ c0,30 0,0 9,0
+ s9,30 9,0
+
+ M220,10
+ Q220,20 229,19
+ T238,10
+
+ M290,10
+ q0,10 9,9
+ t9,-9
+
+ M360,19
+ A9,9 0 1 1 378,19
+
+ M410,19
+ a9,9 0 1 1 18,0
+ ">
+ <animate attributeName="d"
+ calcMode="linear"
+ begin="0s" dur="3s"
+ by="M0,0
+ L21,0
+ l-21,42
+ H21
+ V0
+ h21
+ v42
+
+ M0,0
+ C30,-30 15,60 21,60
+ S12,-30 42,0
+
+ m-30,0
+ c30,-30 15,60 21,60
+ s-9,-90 21,-60
+
+ M0,30
+ Q15,78 21,21
+ T42,30
+
+ M0,30
+ q15,48 21,-9
+ t21,9
+
+ M12,51
+ A21,6 -90 1 1 6,51
+
+ M0,51
+ a21,6 -90 1 1 -6,0
+ "
+ fill="freeze"/>
+ </path>
+
+
+ <!-- Test calcMode="paced". We don't currently support paced animation, so
+ we're just testing that we don't do anything unexpected (that we behave
+ as if calcMode="discrete").
+ -->
+
+ <path transform="translate(0, 140)">
+ <animate attributeName="d"
+ calcMode="paced"
+ begin="0s" dur="3s"
+ values="
+ M10,10
+ L19,10
+ l-9,18
+ H19
+ V10
+ h9
+ v18
+
+ M80,10
+ C80,40 80,10 89,10
+ S98,40 98,10
+
+ m40,0
+ c0,30 0,0 9,0
+ s9,30 9,0
+
+ M220,10
+ Q220,20 229,19
+ T238,10
+
+ M290,10
+ q0,10 9,9
+ t9,-9
+
+ M360,19
+ A9,9 0 1 1 378,19
+
+ M410,19
+ a9,9 0 1 1 18,0
+
+ ;
+
+ M10,10
+ L33,10
+ l-23,46
+ H33
+ V10
+ h23
+ v46
+
+ M80,10
+ C100,20 90,50 103,50
+ S106,20 126,10
+
+ m20,0
+ c20,10 10,40 23,40
+ s3,-30 23,-40
+
+ M220,30
+ Q230,72 243,33
+ T266,30
+
+ M290,30
+ q10,42 23,3
+ t23,-3
+
+ M368,53
+ A23,13 -60 1 1 382,53
+
+ M410,53
+ a23,13 -60 1 1 14,0
+
+ ;
+
+ M10,10
+ L40,10
+ l-30,60
+ H40
+ V10
+ h30
+ v60
+
+ M80,10
+ C110,10 95,70 110,70
+ S110,10 140,10
+
+ m10,0
+ c30,0 15,60 30,60
+ s0,-60 30,-60
+
+ M220,40
+ Q235,98 250,40
+ T280,40
+
+ M290,40
+ q15,58 30,0
+ t30,0
+
+ M372,70
+ A30,15 -90 1 1 384,70
+
+ M410,70
+ a30,15 -90 1 1 12,0
+ "
+ fill="freeze"/>
+ </path>
+
+
+ <!-- Test calcMode="discrete". -->
+
+ <path transform="translate(0, 210)"
+ d="M10,10
+ L19,10
+ l-9,18
+ H19
+ V10
+ h9
+ v18
+
+ M80,10
+ C80,40 80,10 89,10
+ S98,40 98,10
+
+ m40,0
+ c0,30 0,0 9,0
+ s9,30 9,0
+
+ M220,10
+ Q220,20 229,19
+ T238,10
+
+ M290,10
+ q0,10 9,9
+ t9,-9
+
+ M360,19
+ A9,9 0 1 1 378,19
+
+ M410,19
+ a9,9 0 1 1 18,0
+ ">
+ <animate attributeName="d"
+ calcMode="discrete"
+ begin="0s" dur="2s"
+ to="M10,10
+ L40,10
+ l-30,60
+ H40
+ V10
+ h30
+ v60
+
+ M80,10
+ C110,10 95,70 110,70
+ S110,10 140,10
+
+ m10,0
+ c30,0 15,60 30,60
+ s0,-60 30,-60
+
+ M220,40
+ Q235,98 250,40
+ T280,40
+
+ M290,40
+ q15,58 30,0
+ t30,0
+
+ M372,70
+ A30,15 -90 1 1 384,70
+
+ M410,70
+ a30,15 -90 1 1 12,0
+ "
+ fill="freeze"/>
+ </path>
+
+</svg>
diff --git a/layout/reftests/svg/smil/anim-pathLength-01-ref.svg b/layout/reftests/svg/smil/anim-pathLength-01-ref.svg
new file mode 100644
index 0000000000..3766e11912
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-pathLength-01-ref.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <path id="path_1" fill="none" d="M 0,50 h 500"/>
+ <path id="path_2" fill="none" d="M 0,100 h 500"/>
+ <text fill="blue">
+ <textPath xlink:href="#path_1" startOffset="20">
+ Some text
+ </textPath>
+ </text>
+ <text fill="blue">
+ <textPath xlink:href="#path_2" startOffset="20">
+ Some text
+ </textPath>
+ </text>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-pathLength-01.svg b/layout/reftests/svg/smil/anim-pathLength-01.svg
new file mode 100644
index 0000000000..66e60b3350
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-pathLength-01.svg
@@ -0,0 +1,35 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(1, true)">
+ <title>Test animation of the "pathLength" attribute on the "path" element</title>
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <path id="path_1" fill="none" d="M 0,50 h 500" pathLength="5000">
+ <animate attributeName="pathLength"
+ calcMode="linear"
+ begin="0s" dur="2s"
+ from="5000" to="95000"
+ fill="freeze"/>
+ </path>
+ <path id="path_2" fill="none" d="M 0,100 h 500" pathLength="5000">
+ <animate attributeName="pathLength"
+ calcMode="linear"
+ begin="0s" dur="1s"
+ from="5000" to="50000"
+ fill="freeze"/>
+ </path>
+
+ <!-- test 50% completed animation -->
+ <text fill="blue">
+ <textPath xlink:href="#path_1" startOffset="2000">
+ Some text
+ </textPath>
+ </text>
+
+ <!-- test 100% completed animation -->
+ <text fill="blue">
+ <textPath xlink:href="#path_2" startOffset="2000">
+ Some text
+ </textPath>
+ </text>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-pattern-attr-presence-01-ref.svg b/layout/reftests/svg/smil/anim-pattern-attr-presence-01-ref.svg
new file mode 100644
index 0000000000..ddb0ffe454
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-pattern-attr-presence-01-ref.svg
@@ -0,0 +1,103 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 600">
+ <!-- 1. patternUnits -->
+ <defs>
+ <pattern id="patternUnits" width="80" height="80"
+ patternUnits="userSpaceOnUse">
+ <rect width="50" height="50" fill="blue"/>
+ <rect x="50" width="50" height="50" fill="red"/>
+ <rect y="50" width="50" height="50" fill="red"/>
+ <rect x="50" y="50" width="50" height="50" fill="blue"/>
+ </pattern>
+ </defs>
+ <rect width="100" height="100" stroke="black" fill="url(#patternUnits)"/>
+ <g transform="translate(100)">
+ <rect width="100" height="100" stroke="black" fill="url(#patternUnits)"/>
+ </g>
+ <!-- 2. patternContentUnits -->
+ <defs>
+ <pattern id="patternContentUnits" width="1" height="1"
+ patternContentUnits="objectBoundingBox">
+ <rect width="0.5" height="0.5" fill="blue"/>
+ <rect x="0.5" width="0.5" height="0.5" fill="red"/>
+ <rect y="0.5" width="0.5" height="0.5" fill="red"/>
+ <rect x="0.5" y="0.5" width="0.5" height="0.5" fill="blue"/>
+ </pattern>
+ </defs>
+ <g transform="translate(0 100)">
+ <rect width="100" height="100" stroke="black"
+ fill="url(#patternContentUnits)"/>
+ <g transform="translate(100)">
+ <rect width="100" height="100" stroke="black"
+ fill="url(#patternContentUnits)"/>
+ </g>
+ </g>
+ <!-- 3. patternTransform -->
+ <defs>
+ <pattern id="patternTransform" width="1" height="1"
+ patternTransform="rotate(45 50 50)">
+ <rect width="50" height="50" fill="blue"/>
+ <rect x="50" width="50" height="50" fill="red"/>
+ <rect y="50" width="50" height="50" fill="red"/>
+ <rect x="50" y="50" width="50" height="50" fill="blue"/>
+ </pattern>
+ </defs>
+ <g transform="translate(0 200)">
+ <rect width="100" height="100" stroke="black"
+ fill="url(#patternTransform)"/>
+ <g transform="translate(100)">
+ <rect width="100" height="100" stroke="black"
+ fill="url(#patternTransform)"/>
+ </g>
+ </g>
+ <!-- 4. preserveAspectRatio -->
+ <defs>
+ <pattern id="par" width="1" height="1" viewBox="0.1 0.1 0.6 0.85"
+ preserveAspectRatio="none">
+ <rect width="50" height="50" fill="blue"/>
+ <rect x="50" width="50" height="50" fill="red"/>
+ <rect y="50" width="50" height="50" fill="red"/>
+ <rect x="50" y="50" width="50" height="50" fill="blue"/>
+ </pattern>
+ </defs>
+ <g transform="translate(0 300)">
+ <rect width="100" height="100" stroke="black" fill="url(#par)"/>
+ <g transform="translate(100)">
+ <rect width="100" height="100" stroke="black" fill="url(#par)"/>
+ </g>
+ </g>
+ <!-- 5. viewBox -->
+ <defs>
+ <pattern id="viewBox" width="1" height="1" viewBox="0.1 0.1 0.6 0.85"
+ preserveAspectRatio="none">
+ <rect width="50" height="50" fill="blue"/>
+ <rect x="50" width="50" height="50" fill="red"/>
+ <rect y="50" width="50" height="50" fill="red"/>
+ <rect x="50" y="50" width="50" height="50" fill="blue"/>
+ </pattern>
+ </defs>
+ <g transform="translate(0 400)">
+ <rect width="100" height="100" stroke="black" fill="url(#viewBox)"/>
+ <g transform="translate(100)">
+ <rect width="100" height="100" stroke="black" fill="url(#viewBox)"/>
+ </g>
+ </g>
+ <!-- 6. xlink:href -->
+ <defs>
+ <pattern id="xlink" xlink:href="#xlinkRef"/>
+ <pattern id="xlinkRef" width="1" height="1">
+ <rect width="50" height="50" fill="blue"/>
+ <rect x="50" width="50" height="50" fill="red"/>
+ <rect y="50" width="50" height="50" fill="red"/>
+ <rect x="50" y="50" width="50" height="50" fill="blue"/>
+ </pattern>
+ </defs>
+ <g transform="translate(0 500)">
+ <rect width="100" height="100" stroke="black" fill="url(#xlink)"/>
+ <g transform="translate(100)">
+ <rect width="100" height="100" stroke="black" fill="url(#xlink)"/>
+ </g>
+ </g>
+ <!-- If adding more tests here, be sure to update the viewBox on the root svg
+ element -->
+</svg>
diff --git a/layout/reftests/svg/smil/anim-pattern-attr-presence-01.svg b/layout/reftests/svg/smil/anim-pattern-attr-presence-01.svg
new file mode 100644
index 0000000000..b33a58fa27
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-pattern-attr-presence-01.svg
@@ -0,0 +1,138 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 600">
+ <!-- Bug 544809 - nsSVGPatternFrame::GetPatternWithAttr and callers should
+ take account of SMIL animation.
+
+ Test animating pattern attributes doesn't rely on the presence of
+ attributes in the DOM, but also correctly detects attributes set by
+ animation.
+
+ The format of each test is that we have a base pattern named (attName)Ref
+ which does NOT specify the attribute under test, but instead sets the
+ attribute to a non-default value using animation.
+
+ Then we have a referencing pattern named (attName) that refers to the
+ base pattern and also does NOT specify the attribute under test.
+
+ When we go to look up the attribute under test we begin at (attName),
+ notice the attribute isn't specified (either in the DOM or by animation),
+ then go to (attName)Ref and detect that the attribute is specified there
+ by animation and use that value.
+
+ To the right of each test we also include a rect that directly references
+ (attName)Ref. The two rectangles should be identical but prior to fixing
+ this bug they were not.
+ -->
+ <!-- 1. patternUnits: defaults to objectBoundingBox -->
+ <defs>
+ <pattern xlink:href="#patternUnitsRef" id="patternUnits"/>
+ <pattern id="patternUnitsRef" width="80" height="80">
+ <set attributeName="patternUnits" to="userSpaceOnUse"/>
+ <rect width="50" height="50" fill="blue"/>
+ <rect x="50" width="50" height="50" fill="red"/>
+ <rect y="50" width="50" height="50" fill="red"/>
+ <rect x="50" y="50" width="50" height="50" fill="blue"/>
+ </pattern>
+ </defs>
+ <rect width="100" height="100" stroke="black" fill="url(#patternUnits)"/>
+ <g transform="translate(100)">
+ <rect width="100" height="100" stroke="black" fill="url(#patternUnitsRef)"/>
+ </g>
+ <!-- 2. patternContentUnits: defaults to userSpaceOnUse -->
+ <defs>
+ <pattern xlink:href="#patternContentUnitsRef" id="patternContentUnits"/>
+ <pattern id="patternContentUnitsRef" width="1" height="1">
+ <set attributeName="patternContentUnits" to="objectBoundingBox"/>
+ <rect width="0.5" height="0.5" fill="blue"/>
+ <rect x="0.5" width="0.5" height="0.5" fill="red"/>
+ <rect y="0.5" width="0.5" height="0.5" fill="red"/>
+ <rect x="0.5" y="0.5" width="0.5" height="0.5" fill="blue"/>
+ </pattern>
+ </defs>
+ <g transform="translate(0 100)">
+ <rect width="100" height="100" stroke="black"
+ fill="url(#patternContentUnits)"/>
+ <g transform="translate(100)">
+ <rect width="100" height="100" stroke="black"
+ fill="url(#patternContentUnitsRef)"/>
+ </g>
+ </g>
+ <!-- 3. patternTransform: defaults to identity -->
+ <defs>
+ <pattern xlink:href="#patternTransformRef" id="patternTransform"/>
+ <pattern id="patternTransformRef" width="1" height="1">
+ <animateTransform attributeName="patternTransform" type="rotate"
+ values="45 50 50" fill="freeze"/>
+ <rect width="50" height="50" fill="blue"/>
+ <rect x="50" width="50" height="50" fill="red"/>
+ <rect y="50" width="50" height="50" fill="red"/>
+ <rect x="50" y="50" width="50" height="50" fill="blue"/>
+ </pattern>
+ </defs>
+ <g transform="translate(0 200)">
+ <rect width="100" height="100" stroke="black"
+ fill="url(#patternTransform)"/>
+ <g transform="translate(100)">
+ <rect width="100" height="100" stroke="black"
+ fill="url(#patternTransformRef)"/>
+ </g>
+ </g>
+ <!-- 4. preserveAspectRatio: defaults to xMidYMid meet -->
+ <defs>
+ <pattern xlink:href="#parRef" id="par"/>
+ <pattern id="parRef" width="1" height="1" viewBox="0.1 0.1 0.6 0.85">
+ <set attributeName="preserveAspectRatio" to="none"/>
+ <rect width="50" height="50" fill="blue"/>
+ <rect x="50" width="50" height="50" fill="red"/>
+ <rect y="50" width="50" height="50" fill="red"/>
+ <rect x="50" y="50" width="50" height="50" fill="blue"/>
+ </pattern>
+ </defs>
+ <g transform="translate(0 300)">
+ <rect width="100" height="100" stroke="black" fill="url(#par)"/>
+ <g transform="translate(100)">
+ <rect width="100" height="100" stroke="black" fill="url(#parRef)"/>
+ </g>
+ </g>
+ <!-- 5. viewBox -->
+ <defs>
+ <pattern xlink:href="#viewBoxRef" id="viewBox"/>
+ <pattern id="viewBoxRef" width="1" height="1"
+ preserveAspectRatio="none">
+ <set attributeName="viewBox" to="0.1 0.1 0.6 0.85"/>
+ <rect width="50" height="50" fill="blue"/>
+ <rect x="50" width="50" height="50" fill="red"/>
+ <rect y="50" width="50" height="50" fill="red"/>
+ <rect x="50" y="50" width="50" height="50" fill="blue"/>
+ </pattern>
+ </defs>
+ <g transform="translate(0 400)">
+ <rect width="100" height="100" stroke="black" fill="url(#viewBox)"/>
+ <g transform="translate(100)">
+ <rect width="100" height="100" stroke="black" fill="url(#viewBoxRef)"/>
+ </g>
+ </g>
+ <!-- 6. xlink:href
+ This attribute is not affected by bug 544809, i.e. it doesn't use
+ nsSVGPatternFrame::GetPatternWithAttr, but we test it here for completeness
+ -->
+ <defs>
+ <pattern id="xlink">
+ <set attributeName="xlink:href" to="#xlinkRef"/>
+ </pattern>
+ <pattern id="xlinkRef" width="1" height="1">
+ <rect width="50" height="50" fill="blue"/>
+ <rect x="50" width="50" height="50" fill="red"/>
+ <rect y="50" width="50" height="50" fill="red"/>
+ <rect x="50" y="50" width="50" height="50" fill="blue"/>
+ </pattern>
+ </defs>
+ <g transform="translate(0 500)">
+ <rect width="100" height="100" stroke="black" fill="url(#xlink)"/>
+ <g transform="translate(100)">
+ <rect width="100" height="100" stroke="black" fill="url(#xlinkRef)"/>
+ </g>
+ </g>
+ <!-- If adding more tests here, be sure to update the viewBox on the root svg
+ element -->
+</svg>
diff --git a/layout/reftests/svg/smil/anim-pattern-attr-presence-02-ref.svg b/layout/reftests/svg/smil/anim-pattern-attr-presence-02-ref.svg
new file mode 100644
index 0000000000..cfe0027d5f
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-pattern-attr-presence-02-ref.svg
@@ -0,0 +1,35 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 200">
+ <!-- 1. x, y -->
+ <defs>
+ <pattern id="xy" width="1" height="1" x="0.1" y="-0.1">
+ <rect width="50" height="50" fill="blue"/>
+ <rect x="50" width="50" height="50" fill="red"/>
+ <rect y="50" width="50" height="50" fill="red"/>
+ <rect x="50" y="50" width="50" height="50" fill="blue"/>
+ </pattern>
+ </defs>
+ <g>
+ <rect width="100" height="100" stroke="black" fill="url(#xy)"/>
+ <g transform="translate(100)">
+ <rect width="100" height="100" stroke="black" fill="url(#xy)"/>
+ </g>
+ </g>
+ <!-- 2. width, height -->
+ <defs>
+ <pattern id="widthHeight" width="1" height="1">
+ <rect width="50" height="50" fill="blue"/>
+ <rect x="50" width="50" height="50" fill="red"/>
+ <rect y="50" width="50" height="50" fill="red"/>
+ <rect x="50" y="50" width="50" height="50" fill="blue"/>
+ </pattern>
+ </defs>
+ <g transform="translate(0 100)">
+ <rect width="100" height="100" stroke="black" fill="url(#widthHeight)"/>
+ <g transform="translate(100)">
+ <rect width="100" height="100" stroke="black" fill="url(#widthHeight)"/>
+ </g>
+ </g>
+ <!-- If adding more tests here, be sure to update the viewBox on the root svg
+ element -->
+</svg>
diff --git a/layout/reftests/svg/smil/anim-pattern-attr-presence-02.svg b/layout/reftests/svg/smil/anim-pattern-attr-presence-02.svg
new file mode 100644
index 0000000000..e0d2e35dff
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-pattern-attr-presence-02.svg
@@ -0,0 +1,52 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 200">
+ <!-- Bug 544809 - nsSVGPatternFrame::GetPatternWithAttr and callers should
+ take account of SMIL animation.
+
+ This test is a continuation of anim-pattern-attr-presence-01.svg but is
+ separated because it currently fails due to bug 621651. Once that bug is
+ resolved the tests in this file should be merged into
+ anim-pattern-attr-presence-01.svg
+ -->
+ <!-- 1. x, y: defaults to 0 -->
+ <!-- Currently broken by bug 621651 -->
+ <defs>
+ <pattern xlink:href="#xyRef" id="xy"/>
+ <pattern id="xyRef" width="1" height="1">
+ <set attributeName="x" to="0.1"/>
+ <set attributeName="y" to="-0.1"/>
+ <rect width="50" height="50" fill="blue"/>
+ <rect x="50" width="50" height="50" fill="red"/>
+ <rect y="50" width="50" height="50" fill="red"/>
+ <rect x="50" y="50" width="50" height="50" fill="blue"/>
+ </pattern>
+ </defs>
+ <g>
+ <rect width="100" height="100" stroke="black" fill="url(#xy)"/>
+ <g transform="translate(100)">
+ <rect width="100" height="100" stroke="black" fill="url(#xyRef)"/>
+ </g>
+ </g>
+ <!-- 2. width, height: defaults to 0 (disables rendering) -->
+ <!-- Currently broken by bug 621651 -->
+ <defs>
+ <pattern xlink:href="#widthHeightRef" id="widthHeight"/>
+ <pattern id="widthHeightRef">
+ <set attributeName="width" to="1"/>
+ <set attributeName="height" to="1"/>
+ <rect width="50" height="50" fill="blue"/>
+ <rect x="50" width="50" height="50" fill="red"/>
+ <rect y="50" width="50" height="50" fill="red"/>
+ <rect x="50" y="50" width="50" height="50" fill="blue"/>
+ </pattern>
+ </defs>
+ <g transform="translate(0 100)">
+ <rect width="100" height="100" stroke="black" fill="url(#widthHeight)"/>
+ <g transform="translate(100)">
+ <rect width="100" height="100" stroke="black"
+ fill="url(#widthHeightRef)"/>
+ </g>
+ </g>
+ <!-- If adding more tests here, be sure to update the viewBox on the root svg
+ element -->
+</svg>
diff --git a/layout/reftests/svg/smil/anim-pattern-href-01.svg b/layout/reftests/svg/smil/anim-pattern-href-01.svg
new file mode 100644
index 0000000000..3c9b051558
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-pattern-href-01.svg
@@ -0,0 +1,28 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(0.5, true)">
+ <title>Test animation of the "xlink:href" &lt;string&gt; attribute on the "pattern" element</title>
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+
+ <defs>
+ <pattern id="pat1a" patternUnits="objectBoundingBox" width="1" height="1">
+ <rect width="100%" height="100%" fill="red"/>
+ </pattern>
+ <pattern id="pat1b" patternUnits="objectBoundingBox" width="1" height="1">
+ <rect width="100%" height="100%" fill="lime"/>
+ </pattern>
+ <pattern id="pat2" xlink:href="#pat1a">
+ <animate attributeName="xlink:href"
+ begin="0s" dur="1s"
+ from="#pat1a" to="#pat1b"/>
+ </pattern>
+ </defs>
+ <rect width="100%" height="100%" fill="lime"/>
+ <rect x="20" y="150" width="440" height="80" fill="url(#pat2)" />
+
+</svg>
diff --git a/layout/reftests/svg/smil/anim-polygon-points-01-ref.svg b/layout/reftests/svg/smil/anim-polygon-points-01-ref.svg
new file mode 100644
index 0000000000..fc5393f525
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-polygon-points-01-ref.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <style type="text/css">
+ polygon { fill: blue; }
+ </style>
+
+ <polygon points="10,10 70,50 110,10 160,30 210,10"/>
+
+ <polygon transform="translate(0, 70)"
+ points="10,10 70,50 110,10 160,30 210,10"/>
+
+ <polygon transform="translate(0, 140)"
+ points="10,10 70,50 110,10 160,30 210,10"/>
+
+ <polygon transform="translate(0, 210)"
+ points="10,10 70,10 110,10 160,70 210,10"/>
+
+</svg>
diff --git a/layout/reftests/svg/smil/anim-polygon-points-01.svg b/layout/reftests/svg/smil/anim-polygon-points-01.svg
new file mode 100644
index 0000000000..1f4f9e6432
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-polygon-points-01.svg
@@ -0,0 +1,73 @@
+<!--
+ From https://bugzilla.mozilla.org/show_bug.cgi?id=522308
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(1, true)">
+ <title>Test animation of the 'points' attribute on the 'polygon' element</title>
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <style type="text/css">
+ polygon { fill: blue; }
+ </style>
+
+
+ <!-- The difference between respective numbers in the effective 'from' and
+ 'to' lists below is carefully designed to be a factor of 3. That way
+ our reference file (which checks against a one third complete animation)
+ can contain whole numbers, which is necessary to avoid failure due to
+ hard coded rounded numbers in the reference not matching platform
+ specific rounding behaviour.
+ -->
+
+ <!-- Test 'to' animation. -->
+
+ <polygon points="10,10 70,70 110,10 160,10 210,10">
+ <animate attributeName="points"
+ calcMode="linear"
+ begin="0s" dur="3s"
+ to="10,10 70,10 110,10 160,70 210,10"
+ fill="freeze"/>
+ </polygon>
+
+
+ <!-- Test 'by' animation. -->
+
+ <polygon transform="translate(0, 70)"
+ points="10,10 70,70 110,10 160,10 210,10">
+ <animate attributeName="points"
+ calcMode="linear"
+ begin="0s" dur="3s"
+ by="0,0 0,-60 0,0 0,60 0,0"
+ fill="freeze"/>
+ </polygon>
+
+
+ <!-- Test calcMode="paced". We don't currently support paced animation, so
+ we're just testing that we don't do anything unexpected (that we behave
+ as if calcMode="discrete").
+ -->
+
+ <polygon transform="translate(0, 140)">
+ <animate attributeName="points"
+ calcMode="paced"
+ begin="0s" dur="3s"
+ values="10,10 70,70 110,10 160,10 210,10;
+ 10,10 70,30 110,10 160,50 210,10;
+ 10,10 70,10 110,10 160,70 210,10"
+ fill="freeze"/>
+ </polygon>
+
+
+ <!-- Test calcMode="discrete". -->
+
+ <polygon transform="translate(0, 210)"
+ points="10,10 70,70 110,10 160,10 210,10">
+ <animate attributeName="points"
+ calcMode="discrete"
+ begin="0s" dur="2s"
+ to="10,10 70,10 110,10 160,70 210,10"
+ fill="freeze"/>
+ </polygon>
+
+</svg>
diff --git a/layout/reftests/svg/smil/anim-polyline-points-01-ref.svg b/layout/reftests/svg/smil/anim-polyline-points-01-ref.svg
new file mode 100644
index 0000000000..812b1ae2e8
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-polyline-points-01-ref.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <style type="text/css">
+ polyline { fill: none; stroke: blue; stroke-width: 2px; }
+ </style>
+
+ <polyline points="10,10 70,50 110,10 160,30 210,10"/>
+
+ <polyline transform="translate(0, 70)"
+ points="10,10 70,50 110,10 160,30 210,10"/>
+
+ <polyline transform="translate(0, 140)"
+ points="10,10 70,50 110,10 160,30 210,10"/>
+
+ <polyline transform="translate(0, 210)"
+ points="10,10 70,10 110,10 160,70 210,10"/>
+
+</svg>
diff --git a/layout/reftests/svg/smil/anim-polyline-points-01.svg b/layout/reftests/svg/smil/anim-polyline-points-01.svg
new file mode 100644
index 0000000000..89dc2f3b1e
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-polyline-points-01.svg
@@ -0,0 +1,73 @@
+<!--
+ From https://bugzilla.mozilla.org/show_bug.cgi?id=522308
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(1, true)">
+ <title>Test animation of the 'points' attribute on the 'polyline' element</title>
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <style type="text/css">
+ polyline { fill: none; stroke: blue; stroke-width: 2px; }
+ </style>
+
+
+ <!-- The difference between respective numbers in the effective 'from' and
+ 'to' lists below is carefully designed to be a factor of 3. That way
+ our reference file (which checks against a one third complete animation)
+ can contain whole numbers, which is necessary to avoid failure due to
+ hard coded rounded numbers in the reference not matching platform
+ specific rounding behaviour.
+ -->
+
+ <!-- Test 'to' animation. -->
+
+ <polyline points="10,10 70,70 110,10 160,10 210,10">
+ <animate attributeName="points"
+ calcMode="linear"
+ begin="0s" dur="3s"
+ to="10,10 70,10 110,10 160,70 210,10"
+ fill="freeze"/>
+ </polyline>
+
+
+ <!-- Test 'by' animation. -->
+
+ <polyline transform="translate(0, 70)"
+ points="10,10 70,70 110,10 160,10 210,10">
+ <animate attributeName="points"
+ calcMode="linear"
+ begin="0s" dur="3s"
+ by="0,0 0,-60 0,0 0,60 0,0"
+ fill="freeze"/>
+ </polyline>
+
+
+ <!-- Test calcMode="paced". We don't currently support paced animation, so
+ we're just testing that we don't do anything unexpected (that we behave
+ as if calcMode="discrete").
+ -->
+
+ <polyline transform="translate(0, 140)">
+ <animate attributeName="points"
+ calcMode="paced"
+ begin="0s" dur="3s"
+ values="10,10 70,70 110,10 160,10 210,10;
+ 10,10 70,30 110,10 160,50 210,10;
+ 10,10 70,10 110,10 160,70 210,10"
+ fill="freeze"/>
+ </polyline>
+
+
+ <!-- Test calcMode="discrete". -->
+
+ <polyline transform="translate(0, 210)"
+ points="10,10 70,70 110,10 160,10 210,10">
+ <animate attributeName="points"
+ calcMode="discrete"
+ begin="0s" dur="2s"
+ to="10,10 70,10 110,10 160,70 210,10"
+ fill="freeze"/>
+ </polyline>
+
+</svg>
diff --git a/layout/reftests/svg/smil/anim-rect-rxry-1-ref.svg b/layout/reftests/svg/smil/anim-rect-rxry-1-ref.svg
new file mode 100644
index 0000000000..bda4c9e518
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-rect-rxry-1-ref.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" shape-rendering="crispEdges">
+ <g fill="blue" stroke="red" stroke-width="10" transform="translate(10 10)">
+ <!-- Squares -->
+ <rect x="0" width="40" height="40"/>
+ <rect x="60" width="40" height="40"/>
+ <rect x="120" width="40" height="40"/>
+ <rect x="180" width="40" height="40"/>
+
+ <!-- rx=0 ry=20 -->
+ <rect x="0" y="60" width="40" height="40" rx="0" ry="20"/>
+ <rect x="60" y="60" width="40" height="40" rx="0" ry="20"/>
+ <rect x="120" y="60" width="40" height="40" rx="0" ry="20"/>
+ <rect x="180" y="60" width="40" height="40" rx="0" ry="20"/>
+ <rect x="240" y="60" width="40" height="40" rx="0" ry="20"/>
+
+ <!-- rx=20 (hence ry=20) -->
+ <rect x="0" y="120" width="40" height="40" rx="20"/>
+ <rect x="60" y="120" width="40" height="40" rx="20"/>
+ <rect x="120" y="120" width="40" height="40" rx="20"/>
+ <rect x="180" y="120" width="40" height="40" rx="20"/>
+ <rect x="240" y="120" width="40" height="40" rx="20"/>
+ <rect x="300" y="120" width="40" height="40" rx="20"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-rect-rxry-1.svg b/layout/reftests/svg/smil/anim-rect-rxry-1.svg
new file mode 100644
index 0000000000..462388b719
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-rect-rxry-1.svg
@@ -0,0 +1,65 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait" shape-rendering="crispEdges">
+ <g fill="blue" stroke="red" stroke-width="10" transform="translate(10 10)">
+ <!-- Squares -->
+ <rect x="0" width="40" height="40"/>
+ <rect x="60" width="40" height="40">
+ <set attributeName="rx" to="0"/>
+ </rect>
+ <rect x="120" width="40" height="40" rx="20">
+ <set attributeName="rx" to="0"/>
+ </rect>
+ <rect x="180" width="40" height="40" rx="20" ry="20">
+ <set attributeName="rx" to="0"/>
+ <set attributeName="ry" to="0"/>
+ </rect>
+
+ <!-- rx=0 ry=20 -->
+ <rect x="0" y="60" width="40" height="40" rx="0" ry="20"/>
+ <rect x="60" y="60" width="40" height="40" ry="20">
+ <set attributeName="rx" to="0"/>
+ </rect>
+ <rect x="120" y="60" width="40" height="40" rx="20" ry="20">
+ <set attributeName="rx" to="0"/>
+ </rect>
+ <rect x="180" y="60" width="40" height="40">
+ <set attributeName="rx" to="0"/>
+ <set attributeName="ry" to="20"/>
+ </rect>
+ <rect x="240" y="60" width="40" height="40" id="a">
+ <set attributeName="ry" to="20"/>
+ <!-- rx.baseVal will be set to 0 by script -->
+ </rect>
+
+ <!-- rx=20 (hence ry=20) -->
+ <rect x="0" y="120" width="40" height="40" rx="20"/>
+ <rect x="60" y="120" width="40" height="40">
+ <set attributeName="rx" to="20"/>
+ </rect>
+ <rect x="120" y="120" width="40" height="40" rx="0">
+ <set attributeName="rx" to="20"/>
+ </rect>
+ <rect x="180" y="120" width="40" height="40" rx="10">
+ <set attributeName="rx" to="20"/>
+ </rect>
+ <rect x="240" y="120" width="40" height="40" ry="0" id="b">
+ <set attributeName="rx" to="20"/>
+ <!-- ry attribute will be removed by script -->
+ </rect>
+ <!-- rx.baseVal attribute will be set by script -->
+ <rect x="300" y="120" width="40" height="40" id="c"/>
+ </g>
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <script type="text/javascript">
+ document.getElementById('a').rx.baseVal.value = 0;
+ document.getElementById('b').removeAttribute('ry');
+ document.getElementById('c').rx.baseVal.value = 20;
+ // We can get very minor rendering differences on Windows due to the
+ // presence of animation in the document, even on un-animated content.
+ // This is most likely due to interaction with layers so we forcibly seek
+ // the animation timeline to try to produce a steady state for snapshot.
+ setTimeAndSnapshot(0.0, true);
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-remove-1.svg b/layout/reftests/svg/smil/anim-remove-1.svg
new file mode 100644
index 0000000000..825a4c817d
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-remove-1.svg
@@ -0,0 +1,23 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ onload="go()">
+ <!-- In this test, we delete an <animate> node while its animation is in
+ progress. We verify that animation effects are removed from its former
+ target. -->
+ <script>
+ function go() {
+ // Seek animation before we start tweaking things, to make sure we've
+ // already started sampling it.
+ document.documentElement.setCurrentTime(0.5);
+
+ var anim = document.getElementById("anim");
+ anim.parentNode.removeChild(anim);
+ setTimeAndSnapshot(1, false);
+ }
+ </script>
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <rect x="15" y="15" width="200" height="200" fill="blue">
+ <animate id="anim" attributeName="height"
+ begin="0s" dur="2s" by="-100" fill="freeze"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-remove-2.svg b/layout/reftests/svg/smil/anim-remove-2.svg
new file mode 100644
index 0000000000..e48104bd37
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-remove-2.svg
@@ -0,0 +1,23 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ onload="go()">
+ <!-- In this test, we delete an <animate> node after its animation is
+ completed & frozen. We verify that animation effects are removed from its
+ former target. -->
+ <script>
+ function go() {
+ // Seek animation before we start tweaking things, to make sure we've
+ // already started sampling it.
+ document.documentElement.setCurrentTime(2.0);
+
+ var anim = document.getElementById("anim");
+ anim.parentNode.removeChild(anim);
+ setTimeAndSnapshot(2.5, false);
+ }
+ </script>
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <rect x="15" y="15" width="200" height="200" fill="blue">
+ <animate id="anim" attributeName="height"
+ begin="0s" dur="2s" by="-100" fill="freeze"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-remove-3.svg b/layout/reftests/svg/smil/anim-remove-3.svg
new file mode 100644
index 0000000000..783cc2d02f
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-remove-3.svg
@@ -0,0 +1,22 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ onload="go()">
+ <!-- In this test, we delete an <animate> node while its animation is in
+ progress. We verify that animation effects are removed from its former
+ target. -->
+ <script>
+ function go() {
+ // Seek animation before we start tweaking things, to make sure we've
+ // already started sampling it.
+ document.documentElement.setCurrentTime(0.5);
+
+ var anim = document.getElementById("anim");
+ anim.parentNode.removeChild(anim);
+ setTimeAndSnapshot(1, false);
+ }
+ </script>
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <rect id="blueRect" x="15" y="15" width="200" height="200" fill="blue"/>
+ <animate id="anim" xlink:href="#blueRect" attributeName="height"
+ begin="0s" dur="2s" by="-100" fill="freeze"/>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-remove-4.svg b/layout/reftests/svg/smil/anim-remove-4.svg
new file mode 100644
index 0000000000..ff2f7a4502
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-remove-4.svg
@@ -0,0 +1,22 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ onload="go()">
+ <!-- In this test, we delete an <animate> node after its animation is
+ completed & frozen. We verify that animation effects are removed from its
+ former target. -->
+ <script>
+ function go() {
+ // Seek animation before we start tweaking things, to make sure we've
+ // already started sampling it.
+ document.documentElement.setCurrentTime(2.0);
+
+ var anim = document.getElementById("anim");
+ anim.parentNode.removeChild(anim);
+ setTimeAndSnapshot(2.5, false);
+ }
+ </script>
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <rect id="blueRect" x="15" y="15" width="200" height="200" fill="blue"/>
+ <animate id="anim" xlink:href="#blueRect" attributeName="height"
+ begin="0s" dur="2s" by="-100" fill="freeze"/>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-remove-5.svg b/layout/reftests/svg/smil/anim-remove-5.svg
new file mode 100644
index 0000000000..a65ae5aba4
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-remove-5.svg
@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ onload="go()">
+ <!-- In this test, we remove an animation element's "attributeName"
+ attribute, which invalidates a completed, frozen animation. We verify
+ that animation effects are removed from the previously-targeted
+ attribute. -->
+ <script>
+ function go() {
+ // Seek animation before we start tweaking things, to make sure we've
+ // already started sampling it.
+ document.documentElement.setCurrentTime(2.0);
+
+ var anim = document.getElementById("anim");
+ anim.removeAttributeNS(null, "attributeName");
+ setTimeAndSnapshot(2.5, false);
+ }
+ </script>
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <rect x="15" y="15" width="200" height="200" fill="blue">
+ <animate id="anim" attributeName="x"
+ begin="0s" dur="2s" by="100" fill="freeze"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-remove-6.svg b/layout/reftests/svg/smil/anim-remove-6.svg
new file mode 100644
index 0000000000..841884619f
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-remove-6.svg
@@ -0,0 +1,25 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ onload="go()">
+ <!-- In this test, we change an animation element's "attributeType" attribute
+ to refer to another namespace, which invalidates a completed, frozen animation
+ (since there is no animatable 'x' attribute in the xlink namespace on a rect)
+ We verify that animation effects are removed from the previously-targeted
+ attribute. -->
+ <script>
+ function go() {
+ // Seek animation before we start tweaking things, to make sure we've
+ // already started sampling it.
+ document.documentElement.setCurrentTime(2.0);
+
+ var anim = document.getElementById("anim");
+ anim.setAttributeNS(null, "attributeName", "xlink:x");
+ setTimeAndSnapshot(2.5, false);
+ }
+ </script>
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <rect x="15" y="15" width="200" height="200" fill="blue">
+ <animate id="anim" attributeName="x"
+ begin="0s" dur="2s" by="100" fill="freeze"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-remove-7.svg b/layout/reftests/svg/smil/anim-remove-7.svg
new file mode 100644
index 0000000000..6aa58cd16c
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-remove-7.svg
@@ -0,0 +1,23 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ onload="go()">
+ <!-- In this test, we change an animation element's "by" attribute to an
+ invalid value. We verify that animation effects are removed from the
+ previously-targeted attribute. -->
+ <script>
+ function go() {
+ // Seek animation before we start tweaking things, to make sure we've
+ // already started sampling it.
+ document.documentElement.setCurrentTime(2.0);
+
+ var anim = document.getElementById("anim");
+ anim.setAttributeNS(null, "by", "invalid value that can't be added");
+ setTimeAndSnapshot(2.5, false);
+ }
+ </script>
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <rect x="15" y="15" width="200" height="200" fill="blue">
+ <animate id="anim" attributeName="x"
+ begin="0s" dur="2s" by="100" fill="freeze"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-remove-8css.svg b/layout/reftests/svg/smil/anim-remove-8css.svg
new file mode 100644
index 0000000000..6e4b0517a3
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-remove-8css.svg
@@ -0,0 +1,35 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ onload="go()"
+ class="reftest-wait">
+ <!-- In this test, we temporarily remove the animation target, detach
+ its <animate> node, and then reinsert the (now former) animation target.
+ We verify that animation effects are removed from the former target. -->
+ <script>
+ var parent;
+ var rect;
+ function go() {
+ // Seek animation before we start tweaking things, to make sure we've
+ // already started sampling it.
+ document.documentElement.setCurrentTime(0.5);
+
+ var anim = document.getElementById("anim");
+ rect = anim.parentNode;
+ parent = rect.parentNode;
+ parent.removeChild(rect);
+ rect.removeChild(anim);
+
+ setTimeout(reinsert, 50); // Allow time for a sample
+ }
+ function reinsert() {
+ parent.appendChild(rect);
+ document.documentElement.removeAttribute("class");
+ }
+ </script>
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <rect x="15" y="15" width="200" height="200" fill="blue"
+ stroke="red" stroke-width="0">
+ <animate id="anim" attributeName="stroke-width"
+ begin="0s" dur="2s" from="25" to="50" fill="freeze"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-remove-8xml.svg b/layout/reftests/svg/smil/anim-remove-8xml.svg
new file mode 100644
index 0000000000..bef228d49e
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-remove-8xml.svg
@@ -0,0 +1,34 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ onload="go()"
+ class="reftest-wait">
+ <!-- In this test, we temporarily remove the animation target, detach
+ its <animate> node, and then reinsert the (now former) animation target.
+ We verify that animation effects are removed from the former target. -->
+ <script>
+ var parent;
+ var rect;
+ function go() {
+ // Seek animation before we start tweaking things, to make sure we've
+ // already started sampling it.
+ document.documentElement.setCurrentTime(0.5);
+
+ var anim = document.getElementById("anim");
+ rect = anim.parentNode;
+ parent = rect.parentNode;
+ parent.removeChild(rect);
+ rect.removeChild(anim);
+
+ setTimeout(reinsert, 50); // Allow time for a sample
+ }
+ function reinsert() {
+ parent.appendChild(rect);
+ document.documentElement.removeAttribute("class");
+ }
+ </script>
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <rect x="15" y="15" width="200" height="200" fill="blue">
+ <animate id="anim" attributeName="height"
+ begin="0s" dur="2s" from="25" to="50" fill="freeze"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-remove-9.svg b/layout/reftests/svg/smil/anim-remove-9.svg
new file mode 100644
index 0000000000..0cbe3d0a90
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-remove-9.svg
@@ -0,0 +1,27 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ class="reftest-wait"
+ onload="go()">
+ <!-- Bug 728758 - Removing a stacked animation fails to update -->
+ <!-- In this test we check that removing an animation applied on top of
+ another animation causes the underlying animation's result to show. -->
+ <script>
+ function go() {
+ document.documentElement.pauseAnimations();
+ // Force a sample after starting the bottom animation, but before starting
+ // the top animation.
+ document.documentElement.setCurrentTime(0.5);
+ // Sample again after the top animation has started
+ document.documentElement.setCurrentTime(1);
+ // Remove top animation
+ var anim = document.getElementById("anim");
+ anim.parentNode.removeChild(anim);
+ // Sample again
+ document.documentElement.setCurrentTime(1);
+ document.documentElement.removeAttribute("class");
+ }
+ </script>
+ <rect x="15" y="15" width="200" height="200" fill="orange">
+ <set attributeName="fill" to="blue"/>
+ <set attributeName="fill" to="red" begin="1s" id="anim"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-retarget-1.svg b/layout/reftests/svg/smil/anim-retarget-1.svg
new file mode 100644
index 0000000000..8b44bd7cb6
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-retarget-1.svg
@@ -0,0 +1,25 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ onload="go()">
+ <!-- In this test, we move an in-progress animation from one parent to
+ another. We verify that animation effects are removed from the old
+ parent and are applied to the new parent. -->
+ <script>
+ function go() {
+ // Seek animation before we start tweaking things, to make sure we've
+ // already started sampling it.
+ document.documentElement.setCurrentTime(0.5);
+
+ var anim = document.getElementById("anim");
+ var redRect = document.getElementById("redRect");
+ redRect.appendChild(anim);
+ setTimeAndSnapshot(1, false);
+ }
+ </script>
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <rect id="redRect" x ="15" y="15" width="200" height="250" fill="red"/>
+ <rect id="blueRect" x="15" y="15" width="200" height="200" fill="blue">
+ <animate id="anim" attributeName="height"
+ begin="0s" dur="2s" by="-100" fill="freeze"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-retarget-2.svg b/layout/reftests/svg/smil/anim-retarget-2.svg
new file mode 100644
index 0000000000..7972e47ee7
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-retarget-2.svg
@@ -0,0 +1,25 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ onload="go()">
+ <!-- In this test, we move a completed & frozen animation from one parent to
+ another. We verify that animation effects are removed from the old
+ parent and are applied to the new parent. -->
+ <script>
+ function go() {
+ // Seek animation before we start tweaking things, to make sure we've
+ // already started sampling it.
+ document.documentElement.setCurrentTime(2.0);
+
+ var anim = document.getElementById("anim");
+ var redRect = document.getElementById("redRect");
+ redRect.appendChild(anim);
+ setTimeAndSnapshot(2.5, false);
+ }
+ </script>
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <rect id="redRect" x ="15" y="15" width="200" height="300" fill="red"/>
+ <rect id="blueRect" x="15" y="15" width="200" height="200" fill="blue">
+ <animate id="anim" attributeName="height"
+ begin="0s" dur="2s" by="-100" fill="freeze"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-retarget-3.svg b/layout/reftests/svg/smil/anim-retarget-3.svg
new file mode 100644
index 0000000000..e42365211a
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-retarget-3.svg
@@ -0,0 +1,23 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ onload="go()">
+ <!-- In this test, we retarget an in-progress animation from one target to
+ another. We verify that animation effects are removed from the old
+ target and are applied to the new target. -->
+ <script>
+ function go() {
+ // Seek animation before we start tweaking things, to make sure we've
+ // already started sampling it.
+ document.documentElement.setCurrentTime(0.5);
+
+ var anim = document.getElementById("anim");
+ anim.setAttributeNS("http://www.w3.org/1999/xlink", "href", "#redRect");
+ setTimeAndSnapshot(1, false);
+ }
+ </script>
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <rect id="redRect" x="15" y="15" width="200" height="250" fill="red"/>
+ <rect id="blueRect" x="15" y="15" width="200" height="200" fill="blue"/>
+ <animate id="anim" xlink:href="#blueRect" attributeName="height"
+ begin="0s" dur="2s" by="-100" fill="freeze"/>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-retarget-4.svg b/layout/reftests/svg/smil/anim-retarget-4.svg
new file mode 100644
index 0000000000..c48c3e11af
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-retarget-4.svg
@@ -0,0 +1,25 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ onload="go()">
+ <!-- In this test, we remove the "xlink:href" attribute on an in-progress
+ animation, changing it to target its parent. We verify that animation
+ effects are removed from the old target and are applied to the new
+ target. -->
+ <script>
+ function go() {
+ // Seek animation before we start tweaking things, to make sure we've
+ // already started sampling it.
+ document.documentElement.setCurrentTime(0.5);
+
+ var anim = document.getElementById("anim");
+ anim.removeAttributeNS("http://www.w3.org/1999/xlink", "href");
+ setTimeAndSnapshot(1, false);
+ }
+ </script>
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <rect id="redRect" x="15" y="15" width="200" height="250" fill="red">
+ <animate id="anim" xlink:href="#blueRect" attributeName="height"
+ begin="0s" dur="2s" by="-100" fill="freeze"/>
+ </rect>
+ <rect id="blueRect" x="15" y="15" width="200" height="200" fill="blue"/>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-retarget-5.svg b/layout/reftests/svg/smil/anim-retarget-5.svg
new file mode 100644
index 0000000000..b1e50efd27
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-retarget-5.svg
@@ -0,0 +1,25 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ onload="go()">
+ <!-- In this test, we add an "xlink:href" attribute to an in-progress
+ animation, changing it to no longer target its parent. We verify that
+ animation effects are removed from the old target and are applied to the
+ new target. -->
+ <script>
+ function go() {
+ // Seek animation before we start tweaking things, to make sure we've
+ // already started sampling it.
+ document.documentElement.setCurrentTime(0.5);
+
+ var anim = document.getElementById("anim");
+ anim.setAttributeNS("http://www.w3.org/1999/xlink", "href", "#redRect");
+ setTimeAndSnapshot(1, false);
+ }
+ </script>
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <rect id="redRect" x="15" y="15" width="200" height="250" fill="red"/>
+ <rect id="blueRect" x="15" y="15" width="200" height="200" fill="blue">
+ <animate id="anim" attributeName="height"
+ begin="0s" dur="2s" by="-100" fill="freeze"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-retarget-6.svg b/layout/reftests/svg/smil/anim-retarget-6.svg
new file mode 100644
index 0000000000..2f2f8b05d9
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-retarget-6.svg
@@ -0,0 +1,23 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ onload="go()">
+ <!-- In this test, we tweak an element's "id" attribute, which retargets an
+ in-progress animation to that element. We verify that animation effects
+ are removed from the old target and are applied to the new target. -->
+ <script>
+ function go() {
+ // Seek animation before we start tweaking things, to make sure we've
+ // already started sampling it.
+ document.documentElement.setCurrentTime(0.5);
+
+ var newTarget = document.getElementById("newTarget");
+ newTarget.setAttributeNS(null, "id", "target");
+ setTimeAndSnapshot(1, false);
+ }
+ </script>
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <rect id="newTarget" x="15" y="15" width="200" height="250" fill="red"/>
+ <rect id="target" x="15" y="15" width="200" height="200" fill="blue"/>
+ <animate id="anim" xlink:href="#target" attributeName="height"
+ begin="0s" dur="2s" by="-100" fill="freeze"/>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-retarget-7.svg b/layout/reftests/svg/smil/anim-retarget-7.svg
new file mode 100644
index 0000000000..d54c4e9468
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-retarget-7.svg
@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ onload="go()">
+ <!-- In this test, we remove an element's "id" attribute, which retargets a
+ completed, frozen animation from that element to another. We verify
+ that animation effects are removed from the old target and are applied
+ to the new target. -->
+ <script>
+ function go() {
+ // Seek animation before we start tweaking things, to make sure we've
+ // already started sampling it.
+ document.documentElement.setCurrentTime(2.0);
+
+ var newTarget = document.getElementById("target");
+ newTarget.removeAttributeNS(null, "id");
+ setTimeAndSnapshot(2.5, false);
+ }
+ </script>
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <rect id="target" x="15" y="15" width="200" height="200" fill="red"/>
+ <rect id="target" x="15" y="15" width="200" height="100" fill="blue"/>
+ <animate id="anim" xlink:href="#target" attributeName="height"
+ begin="0s" dur="2s" by="100" fill="freeze"/>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-retarget-8.svg b/layout/reftests/svg/smil/anim-retarget-8.svg
new file mode 100644
index 0000000000..6b4a3fc220
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-retarget-8.svg
@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ onload="go()">
+ <!-- In this test, we change an animation element's "attributeName"
+ attribute, which retargets a completed, frozen animation from one
+ attribute to another. We verify that animation effects are removed from
+ the old attribute and are applied to the new one. -->
+ <script>
+ function go() {
+ // Seek animation before we start tweaking things, to make sure we've
+ // already started sampling it.
+ document.documentElement.setCurrentTime(2.0);
+
+ var anim = document.getElementById("anim");
+ anim.setAttributeNS(null, "attributeName", "height");
+ setTimeAndSnapshot(2.5, false);
+ }
+ </script>
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <rect x="15" y="15" width="200" height="100" fill="blue">
+ <animate id="anim" attributeName="x"
+ begin="0s" dur="2s" by="100" fill="freeze"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-standard-ref.html b/layout/reftests/svg/smil/anim-standard-ref.html
new file mode 100644
index 0000000000..cc2ca1a67f
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-standard-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Testcase reference file for animated pass condition(HTML)</title>
+ </head>
+ <body style="background-color: lime;">
+<svg xmlns="http://www.w3.org/2000/svg">
+ <rect width="100" height="100" fill="blue"/>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-standard-ref.svg b/layout/reftests/svg/smil/anim-standard-ref.svg
new file mode 100644
index 0000000000..39f37ae6d1
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-standard-ref.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <rect x="15" y="15" width="200" height="200" fill="blue"/>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-strokecolor-1.svg b/layout/reftests/svg/smil/anim-strokecolor-1.svg
new file mode 100644
index 0000000000..8da75727d5
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-strokecolor-1.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(2.5, false)">
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <rect x="20" y="20" width="190" height="190"
+ fill="rgb(0,0,255)" stroke="rgb(255,0,0)" stroke-width="10">
+ <animateColor attributeName="stroke"
+ from="rgb(255,0,0)" to="rgb(0,0,255)"
+ begin="0s" dur="2s" fill="freeze"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-strokewidth-1xml.svg b/layout/reftests/svg/smil/anim-strokewidth-1xml.svg
new file mode 100644
index 0000000000..828ecdb84e
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-strokewidth-1xml.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(2.5, false)">
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <rect x="15" y="15" width="200" height="200"
+ fill="blue" stroke="red" stroke-width="10">
+ <animate attributeName="stroke-width" attributeType="XML"
+ from="10" to="0" begin="0s" dur="2s" fill="freeze"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-svg-preserveAspectRatio-01.svg b/layout/reftests/svg/smil/anim-svg-preserveAspectRatio-01.svg
new file mode 100644
index 0000000000..c6b43efdbe
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-svg-preserveAspectRatio-01.svg
@@ -0,0 +1,40 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(1, true)">
+ <title>Test animation of the "preserveAspectRatio" attribute on the "svg" element</title>
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <rect width="100%" height="100%" fill="lime"/>
+
+ <!-- 40% through animation simple duration -
+ tests that the animation doesn't affect the element too early -->
+ <svg width="100" height="50" viewBox="0 0 100 100"
+ preserveAspectRatio="xMidYMid meet">
+ <!-- this should change the referencing element at 1.25s,
+ causing the red rect to stretch to fill its whole viewport -->
+ <animate attributeName="preserveAspectRatio"
+ calcMode="discrete"
+ begin="0s" dur="2.5s"
+ from="xMidYMid meet"
+ to="xMidYMid slice"
+ fill="freeze"/>
+ <rect width="100%" height="100%" fill="red"/>
+ </svg>
+ <rect x="25" width="50" height="50" fill="lime"/>
+
+ <!-- 50% through animation simple duration -
+ tests that the animation affects the element now -->
+ <rect y="50" width="100" height="50" fill="red"/>
+ <svg y="50" width="100" height="50" viewBox="0 0 100 100"
+ preserveAspectRatio="xMidYMid meet">
+ <!-- this should change the referencing element at 1s,
+ causing the lime rect to stretch to fill its whole viewport -->
+ <animate attributeName="preserveAspectRatio"
+ calcMode="discrete"
+ begin="0s" dur="2s"
+ from="xMidYMid meet"
+ to="xMidYMid slice"
+ fill="freeze"/>
+ <rect width="100%" height="100%" fill="lime"/>
+ </svg>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-svg-viewBox-01.svg b/layout/reftests/svg/smil/anim-svg-viewBox-01.svg
new file mode 100644
index 0000000000..cd4d863a78
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-svg-viewBox-01.svg
@@ -0,0 +1,32 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(1, true)">
+ <title>Test linear animation of the "viewBox" attribute on the "svg" element</title>
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <rect width="100%" height="100%" fill="lime"/>
+
+ <!-- 50% through animation simple duration -
+ the red rect should only be half the width of the viewport -->
+ <svg width="100" height="50" viewBox="0 0 0 50">
+ <animate attributeName="viewBox"
+ calcMode="linear"
+ begin="0s" dur="2s"
+ to="0 0 100 50"
+ fill="freeze"/>
+ <rect width="100%" height="100%" fill="red"/>
+ </svg>
+ <rect x="25" width="50" height="50" fill="lime"/>
+
+ <!-- 100% through animation simple duration -
+ the lime rect should stretch the entire width of the viewport -->
+ <rect y="50" width="100" height="50" fill="red"/>
+ <svg y="50" width="100" height="50" viewBox="0 0 0 50">
+ <animate attributeName="viewBox"
+ calcMode="linear"
+ begin="0s" dur="1s"
+ to="0 0 100 50"
+ fill="freeze"/>
+ <rect width="100%" height="100%" fill="lime"/>
+ </svg>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-svg-viewBox-02.svg b/layout/reftests/svg/smil/anim-svg-viewBox-02.svg
new file mode 100644
index 0000000000..196d3bfe34
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-svg-viewBox-02.svg
@@ -0,0 +1,22 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(1, true)">
+ <title>Test paced animation of the "viewBox" attribute on the "svg" element</title>
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <rect width="100%" height="100%" fill="lime"/>
+
+ <!-- Check that the simple duration is split one third to the first
+ animation and two thirds to the second. This is because in the first
+ animation the left side travels 50, and in the second animation the
+ right side travels 100. -->
+ <svg width="50" height="50" viewBox="0 0 100 50">
+ <animate attributeName="viewBox"
+ calcMode="paced"
+ begin="0s" dur="3s"
+ values="0 0 100 50; 50 0 50 50; 50 0 150 50"
+ fill="freeze"/>
+ <rect x="-100" y="-100" width="1000" height="1000" fill="red"/>
+ <rect x="50" y="0" width="50" height="50" fill="lime"/>
+ </svg>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-svg-viewBox-03.svg b/layout/reftests/svg/smil/anim-svg-viewBox-03.svg
new file mode 100644
index 0000000000..5415840333
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-svg-viewBox-03.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(12, true)">
+ <title>Test discrete animation of the "viewBox" attribute on the "svg" element</title>
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <rect width="100%" height="100%" fill="lime"/>
+
+ <svg width="200" height="200" viewBox="200 0 150 50">
+ <animate attributeName="viewBox"
+ calcMode="discrete"
+ begin="10s" dur="4s"
+ values="200 0 150 50; none; 200 0 150 50"
+ fill="freeze"/>
+ <rect x="-100" y="-100" width="1000" height="1000" fill="red"/>
+ <rect width="200" height="200" fill="lime"/>
+ </svg>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-targethref-1.svg b/layout/reftests/svg/smil/anim-targethref-1.svg
new file mode 100644
index 0000000000..23f8ade19b
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-targethref-1.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(2.5, false)">
+ <!-- This test checks a basic animation with "xlink:href" targeting -->
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <rect id="blueRect" x="15" y="15" width="200" height="100" fill="blue"/>
+ <animate xlink:href="#blueRect" attributeName="height"
+ to="200" begin="0s" dur="2s" fill="freeze"/>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-targethref-10.svg b/layout/reftests/svg/smil/anim-targethref-10.svg
new file mode 100644
index 0000000000..f015d8c052
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-targethref-10.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <animate href="#x" attributeName="href" values="https://www.google.com"/>
+ <a id="x" fill="red"><rect x="15" y="15" width="200" height="200"/></a>
+ <style>
+ a:any-link {
+ fill: blue;
+ }
+ </style>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-targethref-2.svg b/layout/reftests/svg/smil/anim-targethref-2.svg
new file mode 100644
index 0000000000..fd3864df4f
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-targethref-2.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="go()">
+ <!-- This test checks our behavior when "xlink:href" is modified -->
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <script type="text/javascript">
+ function go() {
+ var anim = document.getElementById("anim");
+ anim.setAttributeNS("http://www.w3.org/1999/xlink", "href", "#blueRect");
+ setTimeAndSnapshot(2.5, false)
+ }
+ </script>
+ <rect id="redRect" x="15" y="15" width="200" height="100" fill="red"/>
+ <rect id="blueRect" x="15" y="15" width="200" height="100" fill="blue"/>
+ <animate id="anim" xlink:href="#redRect" attributeName="height"
+ to="200" begin="0s" dur="2s" fill="freeze"/>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-targethref-3.svg b/layout/reftests/svg/smil/anim-targethref-3.svg
new file mode 100644
index 0000000000..e15886fbad
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-targethref-3.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(2.5, false)">
+ <!-- This test checks our behavior with animations that target nodes
+ other than their parents. -->
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <rect id="blueRect" x="15" y="15" width="200" height="100" fill="blue"/>
+ <animate id="anim" xlink:href="#redRect" attributeName="height"
+ to="0" begin="0s" dur="2s" fill="freeze"/>
+ <rect id="redRect" x="15" y="215" width="200" height="100" fill="red">
+ <animate id="anim" xlink:href="#blueRect" attributeName="height"
+ to="200" begin="0s" dur="2s" fill="freeze"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-targethref-4.svg b/layout/reftests/svg/smil/anim-targethref-4.svg
new file mode 100644
index 0000000000..34cd3f346d
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-targethref-4.svg
@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="go()">
+ <!-- This test checks our behavior with animations that are initially
+ href-targeted, but lose their href attribute. -->
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <script type="text/javascript">
+ function go() {
+ var anim = document.getElementById("anim");
+ anim.removeAttributeNS("http://www.w3.org/1999/xlink", "href");
+ setTimeAndSnapshot(2.5, false)
+ }
+ </script>
+ <rect id="blueRect" x="15" y="15" width="200" height="100" fill="blue">
+ <animate id="anim" xlink:href="#redRect" attributeName="height"
+ to="200" begin="0s" dur="2s" fill="freeze"/>
+ </rect>
+ <rect id="redRect" x="15" y="215" width="200" height="0" fill="red"/>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-targethref-5.svg b/layout/reftests/svg/smil/anim-targethref-5.svg
new file mode 100644
index 0000000000..1e7e2f907a
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-targethref-5.svg
@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="go()">
+ <!-- This test checks our behavior with animations that initially
+ have no 'xlink:href' attribute, but receive one via scripting. -->
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <script type="text/javascript">
+ function go() {
+ var anim = document.getElementById("anim");
+ anim.setAttributeNS("http://www.w3.org/1999/xlink", "href", "#blueRect");
+ setTimeAndSnapshot(2.5, false)
+ }
+ </script>
+ <rect id="blueRect" x="15" y="15" width="200" height="100" fill="blue">
+ </rect>
+ <rect id="redRect" x="15" y="215" width="200" height="0" fill="red">
+ <animate id="anim" attributeName="height"
+ to="200" begin="0s" dur="2s" fill="freeze"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-targethref-6.svg b/layout/reftests/svg/smil/anim-targethref-6.svg
new file mode 100644
index 0000000000..0d8998a2b9
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-targethref-6.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="go()">
+ <!-- This test checks our behavior with an 'xlink:href'-targeted animation
+ when the target's ID is changed (which makes it no longer the target) -->
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <script type="text/javascript">
+ function go() {
+ var rect = document.getElementById("blueRect");
+ rect.setAttributeNS(null, "id", "differentBlueRect");
+ setTimeAndSnapshot(2.5, false)
+ }
+ </script>
+ <rect id="blueRect" x="15" y="15" width="200" height="200" fill="blue"/>
+ <animate id="anim" xlink:href="#blueRect" attributeName="height"
+ to="0" begin="0s" dur="2s" fill="freeze"/>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-targethref-7.svg b/layout/reftests/svg/smil/anim-targethref-7.svg
new file mode 100644
index 0000000000..f131a45d0c
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-targethref-7.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="go()">
+ <!-- This test checks our behavior with an 'xlink:href'-targeted animation
+ when the target's ID is removed (which makes it no longer the target) -->
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <script type="text/javascript">
+ function go() {
+ var rect = document.getElementById("blueRect");
+ rect.removeAttributeNS(null, "id");
+ setTimeAndSnapshot(2.5, false)
+ }
+ </script>
+ <rect id="blueRect" x="15" y="15" width="200" height="200" fill="blue"/>
+ <animate id="anim" xlink:href="#blueRect" attributeName="height"
+ to="0" begin="0s" dur="2s" fill="freeze"/>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-targethref-8.svg b/layout/reftests/svg/smil/anim-targethref-8.svg
new file mode 100644
index 0000000000..c95e34e237
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-targethref-8.svg
@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="go()">
+ <!-- This test checks our behavior with an 'xlink:href'-targeted animation
+ when an earlier node suddenly obtains the target ID string (thereby
+ becoming the new animation target). -->
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <script type="text/javascript">
+ function go() {
+ var rect = document.getElementById("myLaterRect");
+ rect.setAttributeNS(null, "id", "myRect");
+ setTimeAndSnapshot(2.5, false)
+ }
+ </script>
+ <rect id="myLaterRect" x="15" y="15" width="200" height="0" fill="blue"/>
+ <rect id="myRect" x="15" y="215" width="200" height="0" fill="red"/>
+ <animate id="anim" xlink:href="#myRect" attributeName="height"
+ to="200" begin="0s" dur="2s" fill="freeze"/>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-targethref-9.svg b/layout/reftests/svg/smil/anim-targethref-9.svg
new file mode 100644
index 0000000000..b13e97c71c
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-targethref-9.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="go()">
+ <!-- This test checks our behavior with an 'xlink:href'-targeted animation
+ where there's initially no matching target, but then an element's ID is
+ set to match (making it the target) -->
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <script type="text/javascript">
+ function go() {
+ var rect = document.getElementById("rect");
+ rect.setAttributeNS(null, "id", "blueRect");
+ setTimeAndSnapshot(2.5, false)
+ }
+ </script>
+ <rect id="rect" x="15" y="15" width="200" height="100" fill="blue"/>
+ <animate id="anim" xlink:href="#blueRect" attributeName="height"
+ to="200" begin="0s" dur="2s" fill="freeze"/>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-text-attr-01-ref.svg b/layout/reftests/svg/smil/anim-text-attr-01-ref.svg
new file mode 100644
index 0000000000..6cd3dff448
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-text-attr-01-ref.svg
@@ -0,0 +1,31 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ style="font: 16px sans-serif">
+
+ <title>Reference for animating attributes on child text content elements</title>
+
+ <text x="200" y="20">Test 1</text>
+ <text x="20" y="60">Test 2</text>
+ <text x="20" y="80" rotate="10">Test 3</text>
+ <text>
+ <tspan x="200" y="100">Test 4</tspan>
+ </text>
+ <text>
+ <tspan x="20" y="140">Test 5</tspan>
+ </text>
+ <text>
+ <tspan x="20" y="160" rotate="30">Test 6</tspan>
+ </text>
+ <path id="p" d="M 20,180 h 400"/>
+ <text>
+ <textPath xlink:href="#p" startOffset="180">Test 7</textPath>
+ </text>
+ <text x="20" y="200" textLength="100" lengthAdjust="spacingAndGlyphs">Test 8</text>
+ <text>
+ <tspan x="20" y="220" textLength="100" lengthAdjust="spacingAndGlyphs">Test 9</tspan>
+ </text>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-text-attr-01.svg b/layout/reftests/svg/smil/anim-text-attr-01.svg
new file mode 100644
index 0000000000..c61c612fb4
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-text-attr-01.svg
@@ -0,0 +1,61 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ style="font: 16px sans-serif">
+
+ <title>Testcase for animating attributes on child text content elements</title>
+
+ <text x="20" y="20">Test 1
+ <set attributeName="x" to="200" begin="indefinite"/>
+ </text>
+ <text x="20" y="40">Test 2
+ <set attributeName="y" to="60" begin="indefinite"/>
+ </text>
+ <text x="20" y="80">Test 3
+ <set attributeName="rotate" to="10" begin="indefinite"/>
+ </text>
+ <text>
+ <tspan x="20" y="100">Test 4
+ <set attributeName="x" to="200" begin="indefinite"/>
+ </tspan>
+ </text>
+ <text>
+ <tspan x="20" y="120">Test 5
+ <set attributeName="y" to="140" begin="indefinite"/>
+ </tspan>
+ </text>
+ <text>
+ <tspan x="20" y="160">Test 6
+ <set attributeName="rotate" to="30" begin="indefinite"/>
+ </tspan>
+ </text>
+ <path id="p" d="M 20,180 h 400"/>
+ <text>
+ <textPath xlink:href="#p">Test 7
+ <set attributeName="startOffset" to="180" begin="indefinite"/>
+ </textPath>
+ </text>
+ <text x="20" y="200" textLength="100" lengthAdjust="spacing">Test 8
+ <set attributeName="lengthAdjust" to="spacingAndGlyphs" begin="indefinite"/>
+ </text>
+ <!-- We don't support textLength/lengthAdjust on child text content
+ elements currently (bug 890692), so Test 9 doesn't really test
+ anything at the moment. But it is the only animatable enumerated
+ attribute value on text content elements to test. -->
+ <text>
+ <tspan x="20" y="220" textLength="100" lengthAdjust="spacing">Test 9
+ <set attributeName="lengthAdjust" to="spacingAndGlyphs" begin="indefinite"/>
+ </tspan>
+ </text>
+
+ <script>
+ window.addEventListener("MozReftestInvalidate", function() {
+ [...document.querySelectorAll("set")].forEach((e) => e.beginElement());
+ document.documentElement.removeAttribute("class");
+ }, false);
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-text-rotate-01-ref.svg b/layout/reftests/svg/smil/anim-text-rotate-01-ref.svg
new file mode 100644
index 0000000000..8e9f604695
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-text-rotate-01-ref.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <title></title>
+
+ <text transform="translate(20, 20)" rotate="110 120 130">ABC</text>
+ <text transform="translate(120, 20)" rotate="110 120 130">DEF</text>
+ <text transform="translate(220, 20)" rotate="110 120 130">GHI</text>
+ <text transform="translate(320, 20)" rotate="310 320 330">JKL</text>
+
+</svg>
diff --git a/layout/reftests/svg/smil/anim-text-rotate-01.svg b/layout/reftests/svg/smil/anim-text-rotate-01.svg
new file mode 100644
index 0000000000..828ed87799
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-text-rotate-01.svg
@@ -0,0 +1,73 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(5, true)">
+ <title>Test animation of the &lt;number-list&gt; attribute on the 'text' element</title>
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+
+ <!-- The difference between respective numbers in the effective 'from' and
+ 'to' lists below is carefully designed to be a factor of 3. That way
+ our reference file (which checks against a one third complete animation)
+ can contain whole numbers, which is necessary to avoid failure due to
+ hard coded rounded numbers in the reference not matching platform
+ specific rounding behaviour.
+ -->
+
+ <!-- Test calcMode="linear". -->
+
+ <text transform="translate(20, 20)"
+ rotate="10 20 30">ABC
+
+ <!-- At 5s the animVal should be "110 120 130". -->
+ <animate attributeName="rotate"
+ calcMode="linear"
+ begin="0s" dur="15s"
+ to="310 320 330"
+ fill="freeze"/>
+
+ </text>
+
+
+ <!-- Test 'by' animation. -->
+
+ <text transform="translate(120, 20)"
+ rotate="10 20 30">DEF
+
+ <!-- At 5s the animVal should be "110 120 130". -->
+ <animate attributeName="rotate"
+ calcMode="linear"
+ begin="0s" dur="15s"
+ by="300 300 300"
+ fill="freeze"/>
+
+ </text>
+
+
+ <!-- Test calcMode="paced". -->
+
+ <text transform="translate(220, 20)">GHI
+
+ <!-- At 5s the animVal should be "110 120 130". -->
+ <animate attributeName="rotate"
+ calcMode="paced"
+ begin="0s" dur="15s"
+ values="10 20 30; 210 220 230; 310 320 330"
+ fill="freeze"/>
+
+ </text>
+
+
+ <!-- Test calcMode="discrete". -->
+
+ <text transform="translate(320, 20)" rotate="10 20 30">JKL
+
+ <!-- The value should be "310 320 330" at 3s. -->
+ <animate attributeName="rotate"
+ calcMode="discrete"
+ begin="0s" dur="6s"
+ to="310 320 330"
+ fill="freeze"/>
+
+ </text>
+
+</svg>
diff --git a/layout/reftests/svg/smil/anim-text-x-y-dx-dy-01-ref.svg b/layout/reftests/svg/smil/anim-text-x-y-dx-dy-01-ref.svg
new file mode 100644
index 0000000000..795c39ba7f
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-text-x-y-dx-dy-01-ref.svg
@@ -0,0 +1,32 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+
+ <text transform="translate(20, 20)"
+ x="20 10mm 3pc 72pt 2em 3% 1ex"
+ dy="20 10mm 3pc 36pt 2em 3% 1ex 1">ABCDEFGH
+ </text>
+
+ <text transform="translate(120, 20)"
+ x="20 10mm 3pc 72pt 2em 3% 1ex"
+ dy="20 10mm 3pc 36pt 2em 3% 1ex">IJKLMNOP
+ </text>
+
+ <text transform="translate(220, 20)"
+ x="20 10mm 3pc 72pt 2em 3% 1ex"
+ dy="20 10mm 3pc 36pt 2em 3% 1ex 1">QRSTUVWX
+ </text>
+
+ <text transform="translate(320, 20)"
+ x="20 10mm 3pc 72pt 2em 3% 1ex"
+ dy="20 10mm 3pc 36pt 2em 3% 1ex">YZ123456
+ </text>
+
+ <text transform="translate(420, 20)"
+ x="20 10mm 3pc 72pt 2em 3% 1ex"
+ dy="20 10mm 3pc 36pt 2em 3% 1ex">7890abcd
+ </text>
+
+ <text transform="translate(520, 20)"
+ x="20 10mm 3pc 72pt 2em 3% 1ex"
+ dy="20 10mm 3pc 36pt 2em 3% 1ex">efghijkl
+ </text>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-text-x-y-dx-dy-01.svg b/layout/reftests/svg/smil/anim-text-x-y-dx-dy-01.svg
new file mode 100644
index 0000000000..5e9208271c
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-text-x-y-dx-dy-01.svg
@@ -0,0 +1,222 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(5, true)">
+ <title>Test animation of the &lt;length-list&gt; attributes on the 'text' element</title>
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+
+ <style type="text/css">
+ :root { font-size: 16px; } /* see comment below - sets 1em == 16px */
+ </style>
+
+ <!-- If we start getting random orange on this test, see:
+ https://bugzilla.mozilla.org/show_bug.cgi?id=515116#c34
+ -->
+
+ <!-- One of the things that this file tests is animation between lengths
+ of _different unit_. One difficulty this creates is knowing the
+ values to use in the reference file. For example, what length should
+ be used in the reference to comparing against an animation that's mid
+ way between 50px and 10in? The SMIL engine will convert the start
+ length to the unit of the end length and then interpolate, but the
+ number of inches in 50px is not always the same, so we can't fix how
+ many inches is midway between 50px and 10in in the reference file. To
+ get around this problem this test mainly pairs different units with a
+ known, fixed, relationship. For example, animating between cm and mm,
+ or between 'in' and pt (72 pt/in) or between 'in' and pc (6 pc/in).
+ Note that we can animate between px and em by fixing the relationship
+ between these units by setting the CSS 'font-size' property to a fixed
+ number of px units as we've done above.
+
+ The problem with only testing pairs with a fixed relationship is that
+ implementations may only implement interpolation between those pairs
+ because it's easy. To test interpolation between pairs of units
+ without a fixed relationship we use another strategy: we animate from
+ zero of the start unit. Since zero is zero regardless of the unit, we
+ then know what to use in the reference. In theory implementations might
+ specialize for zero, but that's unlikely (hopefully!).
+
+ (An alternative would be to only test end points of the animation, but
+ implementations may use discrete animation rather than interpolation
+ when lengths of different units are encountered, so that would be a bad
+ approach.)
+
+ (Another better alternative would be to use
+ SVGLength.convertToSpecifiedUnits() in the reference file to figure out
+ the conversion of the start unit and set values in the reference file
+ dynamically.)
+ -->
+
+ <!-- Another thing that this file test is animation between lists
+ of _different length_. One implementation strategy when faced with such
+ an animation is to pad the shorter list with zeros for the purposes of
+ animation. This works exactly as you would hope in the case of the
+ <text> element's 'dx' and 'dy' attributes, since for those attributes
+ lengths are offsets from the coordinate at which respective glyph's
+ would otherwise be positioned. In other words, appending a list of
+ zeros to any 'dx' or 'dy' attribute will never have an affect on
+ rendering. However, in the case of 'x' and 'y' attributes on <text>,
+ any lengths given are distances from zero along the relevant axis of
+ the current coordinate system, and zero is not likely to be the
+ position that all glyphs would otherwise be given. Their position will
+ actually depend on CSS parameters, the implementation's text layout
+ algorithm, and the layout of the characters that came before it. Hence
+ zero padding any 'x' or 'y' attribute will likely drastically alter
+ the rendering of the text, and in the case of animation would cause
+ glyphs to animate from/to zero in their coordinate system instead of
+ from/to their natural position. Clearly this is neither what authors
+ would expect, or want, so Mozilla currently disallows animation of 'x'
+ and 'y' if lists of different length are encountered to prevent content
+ being created that relies on such undesirable behavior.
+
+ Ideally the implementation would provide the SMIL engine with the
+ natural position of each glyph so that it can animate from/to those
+ positions. That's tricky, but we do have a bug open to try and
+ implement that. See:
+
+ https://bugzilla.mozilla.org/show_bug.cgi?id=573431
+ -->
+
+ <!-- Test calcMode="linear". -->
+
+ <text transform="translate(20, 20)"
+ x="10px 0.5cm 0.25in 0.5in 16px 0cm 0%">ABCDEFGH
+
+ <!-- At 5s the animVal should be "20 10mm 3pc 72pt 2em 3% 1ex". -->
+ <animate attributeName="x"
+ calcMode="linear"
+ begin="0s" dur="15s"
+ to="40 20mm 6pc 144pt 4em 9% 3ex"
+ fill="freeze"/>
+
+ <!-- At 5s the animVal should be "20 10mm 3pc 36pt 2em 3% 1ex 1".
+ Note that the 'to' list has one extra list item on purpose! -->
+ <animate attributeName="dy"
+ calcMode="linear"
+ begin="0s" dur="15s"
+ from="10px 0.5cm 0.25in 0.25in 16px 0cm 0%"
+ to="40 20mm 6pc 72pt 4em 9% 3ex 3"
+ fill="freeze"/>
+ </text>
+
+
+ <!-- Test 'by' animation. -->
+
+ <text transform="translate(120, 20)"
+ x="10px 0.5cm 0.25in 0.5in 16px 0cm 0%">IJKLMNOP
+
+ <!-- At 5s the animVal should be "20 10mm 3pc 72pt 2em 3% 1ex". -->
+ <animate attributeName="x"
+ calcMode="linear"
+ begin="0s" dur="15s"
+ by="30 15mm 4.5pc 108pt 3em 9% 3ex"
+ fill="freeze"/>
+
+ <!-- At 5s the animVal should be "20 10mm 3pc 36pt 2em 3% 1ex".
+ Note that the 'from' list is essentially zero length! -->
+ <animate attributeName="dy"
+ calcMode="linear"
+ begin="0s" dur="15s"
+ by="60 30mm 9pc 108pt 6em 9% 3ex"
+ fill="freeze"/>
+ </text>
+
+
+ <!-- Test calcMode="paced". It doesn't make a lot of sense to use paced
+ animation with a length list, but since we support it, we test it.
+ -->
+
+ <text transform="translate(220, 20)">QRSTUVWX
+
+ <!-- At 5s the animVal should be "20 10mm 3pc 72pt 2em 3% 1ex". -->
+ <animate attributeName="x"
+ calcMode="paced"
+ begin="0s" dur="15s"
+ values="10px 0.5cm 0.25in 0.5in 16px 0cm 0%;
+ 30 15mm 4.5pc 108pt 3em 6% 2ex;
+ 40 20mm 6pc 144pt 4em 9% 3ex"
+ fill="freeze"/>
+
+ <!-- At 5s the animVal should be "20 10mm 3pc 36pt 2em 3% 1ex 1".
+ Note that the 'to' lists have one extra list item on purpose! -->
+ <animate attributeName="dy"
+ calcMode="paced"
+ begin="0s" dur="15s"
+ values="10px 0.5cm 0.25in 0.25in 16px 0cm 0%;
+ 30 15mm 4.5pc 54pt 3em 6% 2ex 2;
+ 40 20mm 6pc 72pt 4em 9% 3ex 3"
+ fill="freeze"/>
+ </text>
+
+
+ <!-- Test calcMode="discrete". In this case SMIL treats the 'from' and 'to'
+ as two discrete values to jump between. Some authors may expect
+ discrete animation to jump from integer to integer in the unit of the
+ list item in question (or the unit of the 'to' item if the units of
+ corresponding 'from' and 'to' items differ), but that's not the case.
+ -->
+
+ <text transform="translate(320, 20)">YZ123456
+
+ <!-- At 5s the animVal should be "20 10mm 3pc 72pt 2em 3% 1ex". -->
+ <animate attributeName="x"
+ calcMode="discrete"
+ begin="0s" dur="10s"
+ from="10px 0.5cm 0.25in 0.5in 16px 0cm 0%"
+ to="20 10mm 3pc 72pt 2em 3% 1ex"
+ fill="freeze"/>
+
+ <!-- At 5s the animVal should be "20 10mm 3pc 36pt 2em 3% 1ex".
+ Note that the 'to' list has one extra list item on purpose! -->
+ <animate attributeName="dy"
+ calcMode="discrete"
+ begin="0s" dur="10.1s"
+ from="20 10mm 3pc 36pt 2em 3% 1ex"
+ to="40px 2cm 1in 1in 16px 0cm 0% 3"
+ fill="freeze"/>
+ </text>
+
+
+ <!-- Test 'by' animation with calcMode="discrete". -->
+
+ <text transform="translate(420, 20)"
+ x="20 10mm 3pc 72pt 2em 3% 1ex">7890abcd
+
+ <!-- At 5s the animVal should be "10px 0.5cm 0.25in 0.5in 16px 0cm 0%",
+ since the discrete animation is considered to be an additive
+ animation from an empty list to the list specified in by="". -->
+ <animate attributeName="x"
+ calcMode="discrete"
+ begin="0s" dur="15s"
+ by="30 15mm 4.5pc 108pt 3em 9% 3ex"
+ fill="freeze"/>
+
+ <!-- At 5s the animVal should be the empty list, as both the underlying
+ value and the first value of the equivalent additive animation are
+ empty lists. -->
+ <animate attributeName="dy"
+ calcMode="discrete"
+ begin="0s" dur="15s"
+ by="20 10mm 3pc 36pt 2em 3% 1ex"
+ fill="freeze"/>
+ </text>
+
+ <text transform="translate(520, 20)"
+ x="10px 0.5cm 0.25in 0.5in 16px 0cm 0%">efghijkl
+
+ <!-- At 5s the animVal should be "20 10mm 3pc 72pt 2em 3% 1ex". -->
+ <animate attributeName="x"
+ calcMode="discrete"
+ begin="0s" dur="8s"
+ by="10 5mm 1.5pc 36pt 1em 3% 1ex"
+ fill="freeze"/>
+
+ <!-- At 5s the animVal should be "20 10mm 3pc 36pt 2em 3% 1ex". -->
+ <animate attributeName="dy"
+ calcMode="discrete"
+ begin="0s" dur="8s"
+ by="20 10mm 3pc 36pt 2em 3% 1ex"
+ fill="freeze"/>
+ </text>
+
+</svg>
diff --git a/layout/reftests/svg/smil/anim-use-href-01.svg b/layout/reftests/svg/smil/anim-use-href-01.svg
new file mode 100644
index 0000000000..a3aa5a2586
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-use-href-01.svg
@@ -0,0 +1,29 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(1, true)">
+ <title>Test animation of the "xlink:href" &lt;string&gt; attribute on the "use" element</title>
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+
+ <defs>
+ <symbol id="sym1">
+ <rect x="20" y="150" width="440" height="80" fill="red" />
+ </symbol>
+ <symbol id="sym2">
+ <rect x="20" y="150" width="440" height="80" fill="lime" />
+ </symbol>
+ </defs>
+ <rect width="100%" height="100%" fill="lime"/>
+ <use xlink:href="#sym1">
+ <animate attributeName="xlink:href"
+ calcMode="discrete"
+ begin="0s" dur="0.5s"
+ from="#sym1" to="#sym2"
+ fill="freeze"/>
+ </use>
+
+</svg>
diff --git a/layout/reftests/svg/smil/anim-use-length-01.svg b/layout/reftests/svg/smil/anim-use-length-01.svg
new file mode 100644
index 0000000000..d89e37c018
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-use-length-01.svg
@@ -0,0 +1,38 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(1, true)">
+ <title>Test animation of the "width" &amp; "height" &lt;length&gt; attributes on the "use" element</title>
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+
+ <defs>
+ <symbol id="sym1">
+ <rect width="100" height="50" fill="lime" />
+ </symbol>
+ <symbol id="sym2">
+ <rect y="100" width="100" height="50" fill="red" />
+ </symbol>
+ </defs>
+ <rect width="100%" height="100%" fill="lime"/>
+ <rect width="100" height="50" fill="red" />
+ <use xlink:href="#sym1" height="100%" width="0%">
+ <animate attributeName="width"
+ calcMode="linear"
+ begin="0s" dur="2s"
+ from="0%" to="200%"
+ fill="freeze"/>
+ </use>
+ <use xlink:href="#sym2" height="100%" width="200%">
+ <animate attributeName="width"
+ calcMode="linear"
+ begin="0s" dur="2s"
+ from="200%" to="0%"
+ fill="freeze"/>
+ </use>
+ <rect y="100" width="100" height="50" fill="lime" />
+
+</svg>
diff --git a/layout/reftests/svg/smil/anim-use-length-02.svg b/layout/reftests/svg/smil/anim-use-length-02.svg
new file mode 100644
index 0000000000..a9d7390d88
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-use-length-02.svg
@@ -0,0 +1,37 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait">
+ <title>Test animation of the "width" &amp; "height" &lt;length&gt; attributes on the "use" element</title>
+ <script type="text/javascript">
+ function doTest() {
+ setTimeAndSnapshot(1, true);
+ }
+ window.addEventListener("MozReftestInvalidate", doTest, false);
+ </script>
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+
+ <defs>
+ <g id="g1">
+ <rect width="100" height="50" fill="lime" />
+ </g>
+ <g id="g2">
+ <rect y="50" width="100" height="50" fill="lime" />
+ </g>
+ </defs>
+
+ <rect width="100%" height="100%" fill="lime"/>
+ <rect width="100" height="100" fill="red" />
+ <use xlink:href="#g1">
+ <set attributeName="width"
+ to="0" begin="0s" dur="0.5s"/>
+ </use>
+ <use xlink:href="#g2">
+ <set attributeName="height"
+ to="0" begin="0s" dur="0.5s"/>
+ </use>
+
+</svg>
diff --git a/layout/reftests/svg/smil/anim-view-01.svg b/layout/reftests/svg/smil/anim-view-01.svg
new file mode 100644
index 0000000000..b6730263a7
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-view-01.svg
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ viewBox="0 0 100 100" preserveAspectRatio="none">
+
+ <title>Test animation of view on view overriding svg element</title>
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <script>
+ window.addEventListener("MozReftestInvalidate", run, false);
+ setTimeout(run, 4000); // fallback for running outside reftest
+
+ function run() {
+ setTimeAndSnapshot(101, true);
+ }
+ </script>
+
+ <view id="view">
+ <animate attributeName="viewBox"
+ calcMode="linear"
+ begin="100s" dur="2s"
+ values="0 0 100 100;10 10 10 10;0 0 100 100"
+ fill="freeze"/>
+ </view>
+
+ <rect width="100%" height="100%" fill="red"/>
+
+ <rect x="10" y="10" width="10" height="10" fill="lime"/>
+
+</svg>
diff --git a/layout/reftests/svg/smil/anim-width-done-1a.svg b/layout/reftests/svg/smil/anim-width-done-1a.svg
new file mode 100644
index 0000000000..3f4e01bb67
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-width-done-1a.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(2, false)">
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <rect x="15" y="15" width="50" height="200" fill="blue">
+ <animate attributeName="width"
+ from="50" to="200" begin="0s" dur="2s" fill="freeze"/>
+ </rect>
+</svg>
+
diff --git a/layout/reftests/svg/smil/anim-width-done-1b.svg b/layout/reftests/svg/smil/anim-width-done-1b.svg
new file mode 100644
index 0000000000..64289244e2
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-width-done-1b.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(2.5, false)">
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <rect x="15" y="15" width="50" height="200" fill="blue">
+ <animate attributeName="width"
+ from="50" to="200" begin="0s" dur="2s" fill="freeze"/>
+ </rect>
+</svg>
+
diff --git a/layout/reftests/svg/smil/anim-x-done-1a.svg b/layout/reftests/svg/smil/anim-x-done-1a.svg
new file mode 100644
index 0000000000..ba41cc8209
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-x-done-1a.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(2, false)">
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <rect x="200" y="15" width="200" height="200" fill="blue">
+ <animate attributeName="x"
+ from="200" to="15" begin="0s" dur="2s" fill="freeze"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-x-done-1b.svg b/layout/reftests/svg/smil/anim-x-done-1b.svg
new file mode 100644
index 0000000000..efba0023b6
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-x-done-1b.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(2.5, false)">
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <rect x="200" y="15" width="200" height="200" fill="blue">
+ <animate attributeName="x"
+ from="200" to="15" begin="0s" dur="2s" fill="freeze"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-x-interp-1-ref.svg b/layout/reftests/svg/smil/anim-x-interp-1-ref.svg
new file mode 100644
index 0000000000..a4995ebbbf
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-x-interp-1-ref.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <rect x="115" y="15" width="200" height="200" fill="blue"/>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-x-interp-1.svg b/layout/reftests/svg/smil/anim-x-interp-1.svg
new file mode 100644
index 0000000000..3a03306469
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-x-interp-1.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(0.3, true)">
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <rect x="200" y="15" width="200" height="200" fill="blue">
+ <animate attributeName="x"
+ from="100" to="200" begin="0s" dur="2s" fill="freeze"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-x-interp-2-ref.svg b/layout/reftests/svg/smil/anim-x-interp-2-ref.svg
new file mode 100644
index 0000000000..6ff54764f6
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-x-interp-2-ref.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <rect x="125" y="15" width="200" height="200" fill="blue"/>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-x-interp-2.svg b/layout/reftests/svg/smil/anim-x-interp-2.svg
new file mode 100644
index 0000000000..7b3d456a84
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-x-interp-2.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(0.5, true)">
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <rect x="200" y="15" width="200" height="200" fill="blue">
+ <animate attributeName="x"
+ from="100" to="200" begin="0s" dur="2s" fill="freeze"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-x-interp-3-ref.svg b/layout/reftests/svg/smil/anim-x-interp-3-ref.svg
new file mode 100644
index 0000000000..f533524f81
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-x-interp-3-ref.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <rect x="160" y="15" width="200" height="200" fill="blue"/>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-x-interp-3.svg b/layout/reftests/svg/smil/anim-x-interp-3.svg
new file mode 100644
index 0000000000..44d1b1c058
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-x-interp-3.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(1.2, true)">
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <rect x="200" y="15" width="200" height="200" fill="blue">
+ <animate attributeName="x"
+ from="100" to="200" begin="0s" dur="2s" fill="freeze"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-x-interp-4-ref.svg b/layout/reftests/svg/smil/anim-x-interp-4-ref.svg
new file mode 100644
index 0000000000..5b846c7a2e
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-x-interp-4-ref.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <rect x="170" y="15" width="200" height="200" fill="blue"/>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-x-interp-4.svg b/layout/reftests/svg/smil/anim-x-interp-4.svg
new file mode 100644
index 0000000000..c231dc8376
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-x-interp-4.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(1.4, true)">
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <rect x="200" y="15" width="200" height="200" fill="blue">
+ <animate attributeName="x"
+ from="100" to="200" begin="0s" dur="2s" fill="freeze"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-x-interp-5-ref.svg b/layout/reftests/svg/smil/anim-x-interp-5-ref.svg
new file mode 100644
index 0000000000..889ad4c335
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-x-interp-5-ref.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <rect x="190" y="15" width="200" height="200" fill="blue"/>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-x-interp-5.svg b/layout/reftests/svg/smil/anim-x-interp-5.svg
new file mode 100644
index 0000000000..e9fce72fae
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-x-interp-5.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(1.8, true)">
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <rect x="200" y="15" width="200" height="200" fill="blue">
+ <animate attributeName="x"
+ from="100" to="200" begin="0s" dur="2s" fill="freeze"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-x-interp-6-ref.svg b/layout/reftests/svg/smil/anim-x-interp-6-ref.svg
new file mode 100644
index 0000000000..007aa0b88a
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-x-interp-6-ref.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <rect x="195" y="15" width="200" height="200" fill="blue"/>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-x-interp-6.svg b/layout/reftests/svg/smil/anim-x-interp-6.svg
new file mode 100644
index 0000000000..150286be2d
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-x-interp-6.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(1.9, true)">
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <rect x="200" y="15" width="200" height="200" fill="blue">
+ <animate attributeName="x"
+ from="100" to="200" begin="0s" dur="2s" fill="freeze"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-y-done-1a.svg b/layout/reftests/svg/smil/anim-y-done-1a.svg
new file mode 100644
index 0000000000..5a7fb9c580
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-y-done-1a.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(2, false)">
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <rect x="15" y="200" width="200" height="200" fill="blue">
+ <animate attributeName="y"
+ from="200" to="15" begin="0s" dur="2s" fill="freeze"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-y-done-1b.svg b/layout/reftests/svg/smil/anim-y-done-1b.svg
new file mode 100644
index 0000000000..9d964d4e32
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-y-done-1b.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(2.5, false)">
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <rect x="15" y="200" width="200" height="200" fill="blue">
+ <animate attributeName="y"
+ from="200" to="15" begin="0s" dur="2s" fill="freeze"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-y-interp-1-ref.svg b/layout/reftests/svg/smil/anim-y-interp-1-ref.svg
new file mode 100644
index 0000000000..b64a0c62ee
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-y-interp-1-ref.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <rect x="15" y="115" width="200" height="200" fill="blue"/>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-y-interp-1.svg b/layout/reftests/svg/smil/anim-y-interp-1.svg
new file mode 100644
index 0000000000..a4a3750c31
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-y-interp-1.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(0.3, true)">
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <rect x="15" y="200" width="200" height="200" fill="blue">
+ <animate attributeName="y"
+ from="100" to="200" begin="0s" dur="2s" fill="freeze"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-y-interp-2-ref.svg b/layout/reftests/svg/smil/anim-y-interp-2-ref.svg
new file mode 100644
index 0000000000..a57a0c0617
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-y-interp-2-ref.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <rect x="15" y="125" width="200" height="200" fill="blue"/>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-y-interp-2.svg b/layout/reftests/svg/smil/anim-y-interp-2.svg
new file mode 100644
index 0000000000..4affbcfb70
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-y-interp-2.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(0.5, true)">
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <rect x="15" y="200" width="200" height="200" fill="blue">
+ <animate attributeName="y"
+ from="100" to="200" begin="0s" dur="2s" fill="freeze"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-y-interp-3-ref.svg b/layout/reftests/svg/smil/anim-y-interp-3-ref.svg
new file mode 100644
index 0000000000..bf096b395d
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-y-interp-3-ref.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <rect x="15" y="160" width="200" height="200" fill="blue"/>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-y-interp-3.svg b/layout/reftests/svg/smil/anim-y-interp-3.svg
new file mode 100644
index 0000000000..a6f91720a1
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-y-interp-3.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(1.2, true)">
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <rect x="15" y="200" width="200" height="200" fill="blue">
+ <animate attributeName="y"
+ from="100" to="200" begin="0s" dur="2s" fill="freeze"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-y-interp-4-ref.svg b/layout/reftests/svg/smil/anim-y-interp-4-ref.svg
new file mode 100644
index 0000000000..f90829237d
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-y-interp-4-ref.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <rect x="15" y="170" width="200" height="200" fill="blue"/>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-y-interp-4.svg b/layout/reftests/svg/smil/anim-y-interp-4.svg
new file mode 100644
index 0000000000..8b5a137f64
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-y-interp-4.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(1.4, true)">
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <rect x="15" y="200" width="200" height="200" fill="blue">
+ <animate attributeName="y"
+ from="100" to="200" begin="0s" dur="2s" fill="freeze"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-y-interp-5-ref.svg b/layout/reftests/svg/smil/anim-y-interp-5-ref.svg
new file mode 100644
index 0000000000..8cb83e9020
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-y-interp-5-ref.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <rect x="15" y="190" width="200" height="200" fill="blue"/>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-y-interp-5.svg b/layout/reftests/svg/smil/anim-y-interp-5.svg
new file mode 100644
index 0000000000..44d5165ae0
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-y-interp-5.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(1.8, true)">
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <rect x="15" y="200" width="200" height="200" fill="blue">
+ <animate attributeName="y"
+ from="100" to="200" begin="0s" dur="2s" fill="freeze"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-y-interp-6-ref.svg b/layout/reftests/svg/smil/anim-y-interp-6-ref.svg
new file mode 100644
index 0000000000..b0c80b09f5
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-y-interp-6-ref.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <rect x="15" y="195" width="200" height="200" fill="blue"/>
+</svg>
diff --git a/layout/reftests/svg/smil/anim-y-interp-6.svg b/layout/reftests/svg/smil/anim-y-interp-6.svg
new file mode 100644
index 0000000000..bd0f537432
--- /dev/null
+++ b/layout/reftests/svg/smil/anim-y-interp-6.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(1.9, true)">
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <rect x="15" y="200" width="200" height="200" fill="blue">
+ <animate attributeName="y"
+ from="100" to="200" begin="0s" dur="2s" fill="freeze"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/api-sanity-1.svg b/layout/reftests/svg/smil/api-sanity-1.svg
new file mode 100644
index 0000000000..22807d91b6
--- /dev/null
+++ b/layout/reftests/svg/smil/api-sanity-1.svg
@@ -0,0 +1,33 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ onload="go()"
+ class="reftest-wait"
+>
+ <script type="application/javascript">
+ function go() {
+ // Try calling the animation-related methods in SVGSVGElement.cpp
+ // If any aren't implemented, we'll throw an exception and
+ // the rect will stay red.
+
+ try {
+ document.documentElement.animationsPaused();
+ document.documentElement.pauseAnimations();
+ document.documentElement.unpauseAnimations();
+ document.documentElement.getCurrentTime();
+ document.documentElement.setCurrentTime(0);
+ } catch (e) {
+ // If something failed and threw an exception, we still need to remove
+ // the "reftest-wait" class
+ document.documentElement.removeAttribute("class");
+ throw e;
+ }
+
+ // If we get here, we're successful!
+ // Change the rect color.
+ var rect = document.getElementById("rect");
+ rect.setAttributeNS(null, "fill", "lime");
+ document.documentElement.removeAttribute("class");
+ }
+ </script>
+ <rect id="rect" width="100%" height="100%" fill="red" />
+</svg>
diff --git a/layout/reftests/svg/smil/container/deferred-anim-1-ref.xhtml b/layout/reftests/svg/smil/container/deferred-anim-1-ref.xhtml
new file mode 100644
index 0000000000..ea59e77c8d
--- /dev/null
+++ b/layout/reftests/svg/smil/container/deferred-anim-1-ref.xhtml
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>Deferred animation</title>
+ </head>
+
+ <body>
+ <svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px">
+ <rect width="199" height="199" fill="green"/>
+ </svg>
+ </body>
+</html>
diff --git a/layout/reftests/svg/smil/container/deferred-anim-1.xhtml b/layout/reftests/svg/smil/container/deferred-anim-1.xhtml
new file mode 100644
index 0000000000..0df307526f
--- /dev/null
+++ b/layout/reftests/svg/smil/container/deferred-anim-1.xhtml
@@ -0,0 +1,70 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
+<html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait">
+ <head>
+ <title>Deferred animation</title>
+ <!--
+ PURPOSE: Although we'd like to disable animation components for those
+ documents that don't use animation, there's always the possibility that an
+ animation element will be added via the DOM after the document is loaded.
+ This test case checks that this case is not neglected.
+
+ OPERATION: There is an un-animated document. Then an <animate> element is
+ attached to the rectangle by script causing it to move to the right.
+
+ EXPECTED RESULTS: The box begins moving from the center.
+ -->
+ <script>
+ var timeoutID;
+
+ function animate()
+ {
+ addAnimation();
+ var svg = document.getElementsByTagName('svg')[0];
+ var anim = svg.getElementsByTagName('animate')[0];
+ // We should pass quickly and fail slowly.
+ // In the pass case, we'll get an end event almost immediately.
+ // In the failure case, wait 30s before giving up.
+ timeoutID = window.setTimeout(giveUp, 30000);
+ anim.addEventListener('end', finish, true);
+ }
+
+ function giveUp() {
+ var svg = document.getElementsByTagName('svg')[0];
+ var rect = svg.getElementsByTagName('rect')[0];
+ rect.setAttribute("fill", "red");
+ var anim = svg.getElementsByTagName('animate')[0];
+ anim.parentNode.removeChild(anim);
+ timeoutID = null;
+ finish();
+ }
+
+ function finish() {
+ if (timeoutID) {
+ window.clearTimeout(timeoutID);
+ timeoutID = null;
+ }
+ document.documentElement.removeAttribute('class');
+ }
+
+ function addAnimation()
+ {
+ const svgns="http://www.w3.org/2000/svg";
+ var anim = document.createElementNS(svgns,'animate');
+ anim.setAttribute('attributeName','fill');
+ anim.setAttribute('from', 'red');
+ anim.setAttribute('to','green');
+ anim.setAttribute('begin','0s');
+ anim.setAttribute('dur','0.001s');
+ anim.setAttribute('fill','freeze');
+ var target = document.getElementById('target');
+ target.appendChild(anim);
+ }
+ </script>
+ </head>
+
+ <body onload="animate()">
+ <svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px">
+ <rect width="199" height="199" fill="red" id="target"/>
+ </svg>
+ </body>
+</html>
diff --git a/layout/reftests/svg/smil/container/deferred-tree-1-ref.xhtml b/layout/reftests/svg/smil/container/deferred-tree-1-ref.xhtml
new file mode 100644
index 0000000000..e70151c7cc
--- /dev/null
+++ b/layout/reftests/svg/smil/container/deferred-tree-1-ref.xhtml
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>Deferred tree</title>
+ </head>
+
+ <body>
+ <p id="tree-container">
+ <svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px"
+ id="created-svg">
+ <rect x="0" y="0" width="199" height="199" fill="green"/>
+ </svg>
+ </p>
+ </body>
+</html>
diff --git a/layout/reftests/svg/smil/container/deferred-tree-1.xhtml b/layout/reftests/svg/smil/container/deferred-tree-1.xhtml
new file mode 100644
index 0000000000..1b700f180a
--- /dev/null
+++ b/layout/reftests/svg/smil/container/deferred-tree-1.xhtml
@@ -0,0 +1,87 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
+<html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait">
+ <head>
+ <title>Deferred tree</title>
+ <!--
+ PURPOSE: This is similar to the deferred-anim test case. The animation
+ controller is not created for every web page, but only for those pages that
+ contain SMIL animatable content. But, if some SVG content containing
+ animation is added after the page is loaded, the animation should still run.
+
+ OPERATION: There is a plain XHTML document, but later an SVG document is
+ added. This document contains a moving circle.
+
+ EXPECTED RESULTS: The SVG document fragment appears containing a circle that
+ is animated.
+ -->
+ <script>
+ var timeoutID;
+
+ function animate()
+ {
+ makeTree();
+ var svg = document.getElementById('created-svg');
+ var anim = svg.getElementsByTagName('animate')[0];
+ // We should pass quickly and fail slowly.
+ // In the pass case, we'll get an end event almost immediately.
+ // In the failure case, wait 30s before giving up.
+ timeoutID = window.setTimeout(giveUp, 30000);
+ anim.addEventListener('end', finish, true);
+ }
+
+ function giveUp() {
+ var svg = document.getElementById('created-svg');
+ var rect = svg.getElementsByTagName('rect')[0];
+ // It's possible we could arrive here after successfully running the
+ // animation but failing to fire the end event.
+ // Technically that's a pass as far as this test is concerned, but it
+ // will mean every test run is taking 30s longer than it should and
+ // we'd like to know about that so we'll make it a failure.
+ rect.setAttribute("fill", "red");
+ // We'll need to clear the animation for this to take effect
+ var anim = svg.getElementsByTagName('animate')[0];
+ anim.parentNode.removeChild(anim);
+ timeoutID = null;
+ finish();
+ }
+
+ function finish() {
+ if (timeoutID) {
+ window.clearTimeout(timeoutID);
+ timeoutID = null;
+ }
+ document.documentElement.removeAttribute('class');
+ }
+
+ function makeTree()
+ {
+ const svgns="http://www.w3.org/2000/svg";
+ var svg = document.createElementNS(svgns, 'svg');
+ svg.setAttribute('xmlns', svgns);
+ svg.setAttribute('width', '200px');
+ svg.setAttribute('height', '200px');
+ svg.setAttribute('id', 'created-svg');
+ var rect = document.createElementNS(svgns, 'rect');
+ rect.setAttribute('x', '0');
+ rect.setAttribute('y', '0');
+ rect.setAttribute('width', '199');
+ rect.setAttribute('height', '199');
+ var anim = document.createElementNS(svgns, 'animate');
+ anim.setAttribute('attributeName', 'fill');
+ anim.setAttribute('begin', '0s');
+ anim.setAttribute('from', 'red');
+ anim.setAttribute('to', 'green');
+ anim.setAttribute('dur', '0.001s');
+ anim.setAttribute('fill', 'freeze');
+ rect.appendChild(anim);
+ svg.appendChild(rect);
+ var target = document.getElementById('tree-container');
+ target.appendChild(svg);
+ }
+ </script>
+ </head>
+
+ <body onload="animate()">
+ <p id="tree-container"/>
+ </body>
+</html>
diff --git a/layout/reftests/svg/smil/container/deferred-tree-2-ref.xhtml b/layout/reftests/svg/smil/container/deferred-tree-2-ref.xhtml
new file mode 100644
index 0000000000..8aff24fdd2
--- /dev/null
+++ b/layout/reftests/svg/smil/container/deferred-tree-2-ref.xhtml
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>Deferred tree</title>
+ </head>
+
+ <body>
+ <p id="tree-container"/>
+ <svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px"
+ id="created-svg">
+ <rect x="0" y="0" width="199" height="199"
+ style="fill: none; stroke: black"/>
+ <ellipse stroke-width="1" stroke="black" fill="yellow" cx="100"
+ cy="20" rx="40" ry="20"/>
+ </svg>
+ </body>
+</html>
diff --git a/layout/reftests/svg/smil/container/deferred-tree-2a.xhtml b/layout/reftests/svg/smil/container/deferred-tree-2a.xhtml
new file mode 100644
index 0000000000..821986a706
--- /dev/null
+++ b/layout/reftests/svg/smil/container/deferred-tree-2a.xhtml
@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
+<html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait">
+ <head>
+ <title>Deferred tree</title>
+ <!--
+ PURPOSE: If a SVG subdocument is created dynamically, any timing-related
+ animation API calls on the subdocument should silently fail until it's
+ been attached to a document.
+
+ OPERATION: We start with a plain XHTML document, but later a div and an SVG
+ subdocument are created. We attempt an animation API call on the SVG
+ element before attaching it to the XHTML document.
+
+ EXPECTED RESULTS: The animation API call should have no effect.
+ -->
+ <script src="deferred-tree-util.js" type="text/javascript"/>
+ <script>
+ function animate()
+ {
+ // Set up
+ var div = makeDiv();
+ var svg = makeSvg();
+ var target = document.getElementById('tree-container');
+
+ // Make an animation api call (should have no effect, if we're sane)
+ svg.setCurrentTime(1.0);
+
+ // Trigger a "BindToTree" call on the SVG element
+ div.appendChild(svg);
+
+ // Finally, we attach to the document and pause animations.
+ target.appendChild(div);
+
+ // Reftest Snapshot
+ svg.pauseAnimations();
+ document.documentElement.removeAttribute("class");
+ }
+ </script>
+ </head>
+
+ <body onload="animate()">
+ <p id="tree-container"/>
+ </body>
+</html>
diff --git a/layout/reftests/svg/smil/container/deferred-tree-2b.xhtml b/layout/reftests/svg/smil/container/deferred-tree-2b.xhtml
new file mode 100644
index 0000000000..890159f4c3
--- /dev/null
+++ b/layout/reftests/svg/smil/container/deferred-tree-2b.xhtml
@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
+<html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait">
+ <head>
+ <title>Deferred tree</title>
+ <!--
+ PURPOSE: If a SVG subdocument is created dynamically, any timing-related
+ animation API calls on the subdocument should silently fail until it's
+ been attached to a document.
+
+ OPERATION: We start with a plain XHTML document, but later a div and an SVG
+ subdocument are created. We attempt an animation API call on the SVG
+ element before attaching it to the XHTML document.
+
+ EXPECTED RESULTS: The animation API call should have no effect.
+ -->
+ <script src="deferred-tree-util.js" type="text/javascript"/>
+ <script>
+ function animate()
+ {
+ // Set up
+ var div = makeDiv();
+ var svg = makeSvg();
+ var target = document.getElementById('tree-container');
+
+ // Trigger a "BindToTree" call on the SVG element
+ div.appendChild(svg);
+
+ // Make an animation api call (should have no effect, if we're sane)
+ svg.setCurrentTime(1.0);
+
+ // Finally, we attach to the document and pause animations.
+ target.appendChild(div);
+
+ // Reftest Snapshot
+ svg.pauseAnimations();
+ document.documentElement.removeAttribute("class");
+ }
+ </script>
+ </head>
+
+ <body onload="animate()">
+ <p id="tree-container"/>
+ </body>
+</html>
diff --git a/layout/reftests/svg/smil/container/deferred-tree-3-ref.xhtml b/layout/reftests/svg/smil/container/deferred-tree-3-ref.xhtml
new file mode 100644
index 0000000000..96818ff54b
--- /dev/null
+++ b/layout/reftests/svg/smil/container/deferred-tree-3-ref.xhtml
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>Deferred tree</title>
+ </head>
+
+ <body>
+ <p id="tree-container"/>
+ <svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px"
+ id="created-svg">
+ <rect x="0" y="0" width="199" height="199"
+ style="fill: none; stroke: black"/>
+ <ellipse stroke-width="1" stroke="black" fill="yellow" cx="100"
+ cy="95" rx="40" ry="20"/>
+ </svg>
+ </body>
+</html>
diff --git a/layout/reftests/svg/smil/container/deferred-tree-3a.xhtml b/layout/reftests/svg/smil/container/deferred-tree-3a.xhtml
new file mode 100644
index 0000000000..3d9fed19e9
--- /dev/null
+++ b/layout/reftests/svg/smil/container/deferred-tree-3a.xhtml
@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
+<html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait">
+ <head>
+ <title>Deferred tree</title>
+ <script src="deferred-tree-util.js" type="text/javascript"/>
+ <script>
+ function animate()
+ {
+ // Set up
+ var div = makeDiv();
+ var svg = makeSvg();
+ var target = document.getElementById('tree-container');
+
+ div.appendChild(svg);
+ target.appendChild(div);
+
+ // These calls *should* have an effect, since they happen
+ // after 'svg' has been attached to the XHTML document.
+ svg.setCurrentTime(1.0);
+ svg.pauseAnimations();
+
+ // Reattach the SVG element to its parent div.
+ // (If we're sane, this shouldn't reset its time container.)
+ div.appendChild(svg);
+
+ // Reftest Snapshot
+ document.documentElement.removeAttribute("class");
+ }
+ </script>
+ </head>
+
+ <body onload="animate()">
+ <p id="tree-container"/>
+ </body>
+</html>
diff --git a/layout/reftests/svg/smil/container/deferred-tree-3b.xhtml b/layout/reftests/svg/smil/container/deferred-tree-3b.xhtml
new file mode 100644
index 0000000000..ab894f54ef
--- /dev/null
+++ b/layout/reftests/svg/smil/container/deferred-tree-3b.xhtml
@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
+<html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait">
+ <head>
+ <title>Deferred tree</title>
+ <script src="deferred-tree-util.js" type="text/javascript"/>
+ <script>
+ function animate()
+ {
+ // Set up
+ var div = makeDiv();
+ var svg = makeSvg();
+ var target = document.getElementById('tree-container');
+
+ div.appendChild(svg);
+ target.appendChild(div);
+
+ // These calls *should* have an effect, since they happen
+ // after 'svg' has been attached to the XHTML document.
+ svg.setCurrentTime(1.0);
+ svg.pauseAnimations();
+
+ // Shift the SVG element to its parent's parent.
+ // (If we're sane, this shouldn't reset its time container.)
+ target.appendChild(svg);
+
+ // Reftest Snapshot
+ document.documentElement.removeAttribute("class");
+ }
+ </script>
+ </head>
+
+ <body onload="animate()">
+ <p id="tree-container"/>
+ </body>
+</html>
diff --git a/layout/reftests/svg/smil/container/deferred-tree-3c.xhtml b/layout/reftests/svg/smil/container/deferred-tree-3c.xhtml
new file mode 100644
index 0000000000..12dc91fe5d
--- /dev/null
+++ b/layout/reftests/svg/smil/container/deferred-tree-3c.xhtml
@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
+<html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait">
+ <head>
+ <title>Deferred tree</title>
+ <script src="deferred-tree-util.js" type="text/javascript"/>
+ <script>
+ function animate()
+ {
+ // Set up
+ var div = makeDiv();
+ var svg = makeSvg();
+ var target = document.getElementById('tree-container');
+
+ div.appendChild(svg);
+ target.appendChild(div);
+
+ // These calls *should* have an effect, since they happen
+ // after 'svg' has been attached to the XHTML document.
+ svg.setCurrentTime(1.0);
+ svg.pauseAnimations();
+
+ // Create another div container, and move svg element there
+ // (temporarily detaching it from the document), before attaching
+ // this new subtree back onto the document. Our current behavior
+ // (which matches Opera 9.64) is to preserve svg's time container
+ // through this manipulation.
+ div2 = makeDiv();
+ div2.appendChild(svg);
+ div.appendChild(div2);
+
+ // Reftest Snapshot
+ document.documentElement.removeAttribute("class");
+ }
+ </script>
+ </head>
+
+ <body onload="animate()">
+ <p id="tree-container"/>
+ </body>
+</html>
diff --git a/layout/reftests/svg/smil/container/deferred-tree-3d.xhtml b/layout/reftests/svg/smil/container/deferred-tree-3d.xhtml
new file mode 100644
index 0000000000..d5dc4d0a58
--- /dev/null
+++ b/layout/reftests/svg/smil/container/deferred-tree-3d.xhtml
@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
+<html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait">
+ <head>
+ <title>Deferred tree</title>
+ <script src="deferred-tree-util.js" type="text/javascript"/>
+ <script>
+ function animate()
+ {
+ // Set up
+ var div = makeDiv();
+ var svg = makeSvg();
+ var target = document.getElementById('tree-container');
+
+ div.appendChild(svg);
+ target.appendChild(div);
+
+ // Create another div container, and move svg element there
+ // (temporarily detaching it from the document).
+ div2 = makeDiv();
+ div2.appendChild(svg);
+
+ // These calls *should* have an effect, since they happen
+ // after 'svg' has been attached to the XHTML document (even though
+ // it's not currently attached)
+ svg.setCurrentTime(1.0);
+ svg.pauseAnimations();
+
+ // Attach the div2+svg subtree onto the document. Our current
+ // behavior (which matches Opera 9.64) is to preserve svg's time
+ // container through this manipulation.
+ div.appendChild(div2);
+
+ // Reftest Snapshot
+ document.documentElement.removeAttribute("class");
+ }
+ </script>
+ </head>
+
+ <body onload="animate()">
+ <p id="tree-container"/>
+ </body>
+</html>
diff --git a/layout/reftests/svg/smil/container/deferred-tree-util.js b/layout/reftests/svg/smil/container/deferred-tree-util.js
new file mode 100644
index 0000000000..71d0b41f53
--- /dev/null
+++ b/layout/reftests/svg/smil/container/deferred-tree-util.js
@@ -0,0 +1,39 @@
+function makeDiv()
+{
+ const xhtmlns="http://www.w3.org/1999/xhtml";
+ return document.createElementNS(xhtmlns, 'div');
+}
+
+function makeSvg()
+{
+ const svgns="http://www.w3.org/2000/svg";
+ var svg = document.createElementNS(svgns, 'svg');
+ svg.setAttribute('xmlns', svgns);
+ svg.setAttribute('width', '200px');
+ svg.setAttribute('height', '200px');
+ var rect = document.createElementNS(svgns, 'rect');
+ rect.setAttribute('x', '0');
+ rect.setAttribute('y', '0');
+ rect.setAttribute('width', '199');
+ rect.setAttribute('height', '199');
+ rect.setAttribute('style', 'fill: none; stroke: black');
+ var ellipse = document.createElementNS(svgns, 'ellipse');
+ ellipse.setAttribute('stroke-width', '1');
+ ellipse.setAttribute('stroke', 'black');
+ ellipse.setAttribute('fill', 'yellow');
+ ellipse.setAttribute('cx', '100');
+ ellipse.setAttribute('cy', '20');
+ ellipse.setAttribute('rx', '40');
+ ellipse.setAttribute('ry', '20');
+ var anim = document.createElementNS(svgns, 'animate');
+ anim.setAttribute('attributeName', 'cy');
+ anim.setAttribute('attributeType', 'XML');
+ anim.setAttribute('begin', '0s');
+ anim.setAttribute('from', '20');
+ anim.setAttribute('to', '170');
+ anim.setAttribute('dur', '2s');
+ ellipse.appendChild(anim);
+ svg.appendChild(rect);
+ svg.appendChild(ellipse);
+ return svg;
+}
diff --git a/layout/reftests/svg/smil/container/enveloped-tree-1-ref.xhtml b/layout/reftests/svg/smil/container/enveloped-tree-1-ref.xhtml
new file mode 100644
index 0000000000..b529c052e3
--- /dev/null
+++ b/layout/reftests/svg/smil/container/enveloped-tree-1-ref.xhtml
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>Enveloped tree</title>
+ </head>
+
+ <body>
+ <!-- First tree -->
+ <svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px"
+ id="adopter">
+ <rect x="0" y="0" width="199" height="199"
+ style="fill: none; stroke: black"/>
+ <circle cx="100" cy="50" r="15" fill="skyblue" stroke="black"
+ stroke-width="1"/>
+ <!-- Second tree -->
+ <svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px"
+ id="adoptee">
+ <rect x="0" y="0" width="199" height="199"
+ style="fill: none; stroke: black"/>
+ <circle cx="100" cy="110" r="15" fill="greenyellow" stroke="black"
+ stroke-width="1"/>
+ </svg>
+ </svg>
+ </body>
+</html>
diff --git a/layout/reftests/svg/smil/container/enveloped-tree-1.xhtml b/layout/reftests/svg/smil/container/enveloped-tree-1.xhtml
new file mode 100644
index 0000000000..49d3db6b7c
--- /dev/null
+++ b/layout/reftests/svg/smil/container/enveloped-tree-1.xhtml
@@ -0,0 +1,70 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
+<html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait">
+ <head>
+ <title>Enveloped tree</title>
+ <!--
+ PURPOSE: This test case is the reverse of the promoted tree case. As time
+ containers are defined relative to the outermost SVG document fragment this
+ case tests that when an outermost <svg> fragment is added as a child of
+ another svg document fragment, the animations behave correctly and the time
+ containers are resolved correctly.
+
+ OPERATION: There are two animations that are more-or-less identical except
+ for a few aesthetic features. Both contain a circle that moves to the right.
+ The second document fragment (on the right) is removed and added as a child
+ of the first document fragment.
+
+ EXPECTED RESULTS: After combining the two document fragments the circles
+ should have the same horizontal position as they are now controlled by the
+ same time container.
+ -->
+ <script>
+ function moveAndAdopt()
+ {
+ var svgs = document.getElementsByTagName('svg');
+ for (var i = 0; i &lt; svgs.length; i++) {
+ var svg = svgs[i];
+ svg.pauseAnimations();
+ svg.setCurrentTime(0.5);
+ }
+ adopt();
+ var svg = document.getElementById('adopter');
+ svg.setCurrentTime(1.5);
+ setTimeout('document.documentElement.removeAttribute("class")', 0);
+ }
+
+ function adopt()
+ {
+ var adoptee = document.getElementById('adoptee');
+ adoptee.parentNode.removeChild(adoptee);
+ var adopter = document.getElementById('adopter');
+ adopter.appendChild(adoptee);
+ }
+ </script>
+ </head>
+
+ <body onload="moveAndAdopt()">
+ <!-- First tree -->
+ <svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px"
+ id="adopter">
+ <rect x="0" y="0" width="199" height="199"
+ style="fill: none; stroke: black"/>
+ <circle cx="0" cy="50" r="15" fill="skyblue" stroke="black"
+ stroke-width="1">
+ <animate attributeName="cx" from="0" to="200" begin="0s" dur="3s"
+ fill="freeze"/>
+ </circle>
+ </svg>
+ <!-- Second tree -->
+ <svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px"
+ id="adoptee">
+ <rect x="0" y="0" width="199" height="199"
+ style="fill: none; stroke: black"/>
+ <circle cx="0" cy="110" r="15" fill="greenyellow" stroke="black"
+ stroke-width="1">
+ <animate attributeName="cx" from="0" to="200" begin="0s" dur="3s"
+ fill="freeze"/>
+ </circle>
+ </svg>
+ </body>
+</html>
diff --git a/layout/reftests/svg/smil/container/invalid-elem-1-ref.xhtml b/layout/reftests/svg/smil/container/invalid-elem-1-ref.xhtml
new file mode 100644
index 0000000000..74a74adb49
--- /dev/null
+++ b/layout/reftests/svg/smil/container/invalid-elem-1-ref.xhtml
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>Valid, invalid, valid</title>
+ </head>
+
+ <body>
+ <svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px">
+ <rect x="0" y="0" width="199" height="199"
+ style="fill: none; stroke: black"/>
+ <!-- rect to be animated second -->
+ <rect x="100" y="80" width="40" height="40" fill="royalblue"
+ stroke="black" stroke-width="1" id="target"/>
+ <!-- circle to be animated first -->
+ <circle cx="0" cy="100" r="15" fill="skyblue" stroke="black"
+ stroke-width="1"/>
+ </svg>
+ </body>
+</html>
diff --git a/layout/reftests/svg/smil/container/invalid-elem-1.xhtml b/layout/reftests/svg/smil/container/invalid-elem-1.xhtml
new file mode 100644
index 0000000000..3a2f79be14
--- /dev/null
+++ b/layout/reftests/svg/smil/container/invalid-elem-1.xhtml
@@ -0,0 +1,74 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
+<html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait">
+ <head>
+ <title>Valid, invalid, valid</title>
+ <!--
+ PURPOSE: When manipulating the DOM tree it is quite likely that at some
+ instant the document will be invalid such as during a chain of
+ operations. SVG 1.1, section F.2 states:
+
+ "Because of situations where a block of scripting changes might cause
+ a given SVG document fragment to go into and out of error, error
+ processing shall occur only at times when document presentation (e.g.,
+ rendering to the display device) is updated"
+
+ A similar requirement exists regarding unsuspend / suspend redraw.
+ This test checks that behaviour.
+
+ OPERATION: There is a box and a circle. Initially the circle is animated and
+ should move to the right. The animation element is moved to the rectangle.
+ At this point the animation points to an invalid attribute. This attribute
+ is then updated to be valid again.
+
+ EXPECTED RESULTS: The circle is moved and then the rectangle is moved. There
+ should not be any errors reported in the Javascript console or assertions
+ etc.
+
+ After the animation is removed from the circle it should reset (I think).
+
+ Currently this hasn't been implemented (we need to make use of
+ mLastCompositors table in nsSMILAnimationController), so this test is
+ disabled for now. As the code stands now you'll normally get the correct
+ result but under other conditions the circle moves a fraction before the
+ call to pauseAnimations and this effect is not then cleared.
+ -->
+ <script>
+ function moveAnimation()
+ {
+ var svg = document.getElementsByTagName('svg')[0];
+ svg.pauseAnimations();
+ svg.setCurrentTime(0.5);
+ doMove();
+ svg.setCurrentTime(1.0);
+ setTimeout('document.documentElement.removeAttribute("class")', 0);
+ }
+
+ function doMove()
+ {
+ var anim = document.getElementById('animation-to-move');
+ anim.parentNode.removeChild(anim);
+ var rect = document.getElementById('target');
+ rect.appendChild(anim);
+ // The animation is now in error
+ anim.setAttribute('attributeName', 'x');
+ // Now it's fixed
+ }
+ </script>
+ </head>
+
+ <body onload="moveAnimation()">
+ <svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px">
+ <rect x="0" y="0" width="199" height="199"
+ style="fill: none; stroke: black"/>
+ <!-- rect to be animated second -->
+ <rect x="-20" y="80" width="40" height="40" fill="royalblue"
+ stroke="black" stroke-width="1" id="target"/>
+ <!-- circle to be animated first -->
+ <circle cx="0" cy="100" r="15" fill="skyblue" stroke="black"
+ stroke-width="1">
+ <animate attributeName="cx" from="0" to="200" begin="0s" dur="2s"
+ fill="freeze" id="animation-to-move"/>
+ </circle>
+ </svg>
+ </body>
+</html>
diff --git a/layout/reftests/svg/smil/container/moved-tree-1-ref.xhtml b/layout/reftests/svg/smil/container/moved-tree-1-ref.xhtml
new file mode 100644
index 0000000000..0041785b3a
--- /dev/null
+++ b/layout/reftests/svg/smil/container/moved-tree-1-ref.xhtml
@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>Moving sub-trees</title>
+ </head>
+
+ <body>
+ <svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px">
+ <rect x="0" y="0" width="199" height="199"
+ style="fill: none; stroke: black"/>
+ <g>
+ <!-- background rect to track progress -->
+ <rect x="0" y="80" width="100" height="40" fill="royalblue"
+ stroke="black" stroke-width="1"/>
+ </g>
+ </svg>
+ <!-- Second animation -->
+ <svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px">
+ <rect x="0" y="0" width="199" height="199"
+ style="fill: none; stroke: black"/>
+ <g id="new-parent">
+ <!-- background rect to track progress -->
+ <rect x="0" y="80" width="100" height="40" fill="greenyellow"
+ stroke="black" stroke-width="1"/>
+ <!-- circle to transfer -->
+ <circle cx="100" cy="100" r="15" fill="skyblue" stroke="black"
+ stroke-width="1" id="circle-to-move"/>
+ </g>
+ </svg>
+ </body>
+</html>
diff --git a/layout/reftests/svg/smil/container/moved-tree-1.xhtml b/layout/reftests/svg/smil/container/moved-tree-1.xhtml
new file mode 100644
index 0000000000..2206c8837d
--- /dev/null
+++ b/layout/reftests/svg/smil/container/moved-tree-1.xhtml
@@ -0,0 +1,74 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
+<html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait">
+ <head>
+ <title>Moving sub-trees</title>
+ <!--
+ PURPOSE: This case tests moving an animated sub-tree from one SVG document
+ fragment to another. Different document fragments have different time
+ containers and so this test ensures the animation is correctly transferred
+ from one time container to the other.
+
+ OPERATION: Both animations contain a moving box. The first animation also
+ contains a circle. Both this circle and its child animation element are
+ removed from the first animation and added to the second animation.
+
+ EXPECTED RESULTS: The circle appears in the second box at the appropriate
+ offset.
+ -->
+ <script>
+ function move()
+ {
+ var svgs = document.getElementsByTagName('svg');
+ for (var i = 0; i &lt; svgs.length; i++) {
+ var svg = svgs[i];
+ svg.pauseAnimations();
+ svg.setCurrentTime(1.5);
+ }
+ doMove();
+ setTimeout('document.documentElement.removeAttribute("class")', 0);
+ }
+
+ function doMove()
+ {
+ var circle = document.getElementById('circle-to-move');
+ circle.parentNode.removeChild(circle);
+ var target = document.getElementById('new-parent');
+ target.appendChild(circle);
+ }
+ </script>
+ </head>
+
+ <body onload="move()">
+ <svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px">
+ <rect x="0" y="0" width="199" height="199"
+ style="fill: none; stroke: black"/>
+ <g>
+ <!-- background rect to track progress -->
+ <rect x="0" y="80" width="0" height="40" fill="royalblue"
+ stroke="black" stroke-width="1">
+ <animate attributeName="width" from="0" to="200" begin="0s" dur="3s"
+ fill="freeze"/>
+ </rect>
+ <!-- circle to transfer -->
+ <circle cx="0" cy="100" r="15" fill="skyblue" stroke="black"
+ stroke-width="1" id="circle-to-move">
+ <animate attributeName="cx" from="0" to="200" begin="0s" dur="3s"
+ fill="freeze"/>
+ </circle>
+ </g>
+ </svg>
+ <!-- Second animation -->
+ <svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px">
+ <rect x="0" y="0" width="199" height="199"
+ style="fill: none; stroke: black"/>
+ <g id="new-parent">
+ <!-- background rect to track progress -->
+ <rect x="0" y="80" width="0" height="40" fill="greenyellow"
+ stroke="black" stroke-width="1">
+ <animate attributeName="width" from="0" to="200" begin="0s" dur="3s"
+ fill="freeze"/>
+ </rect>
+ </g>
+ </svg>
+ </body>
+</html>
diff --git a/layout/reftests/svg/smil/container/promoted-tree-1-ref.xhtml b/layout/reftests/svg/smil/container/promoted-tree-1-ref.xhtml
new file mode 100644
index 0000000000..9b40914541
--- /dev/null
+++ b/layout/reftests/svg/smil/container/promoted-tree-1-ref.xhtml
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>Promoted subtree</title>
+ </head>
+
+ <body>
+ <p id="container">
+ <svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px"
+ id="outer">
+ <rect x="0" y="0" width="199" height="199"
+ style="fill: none; stroke: black"/>
+ <circle cx="100" cy="50" r="15" fill="skyblue" stroke="black"
+ stroke-width="1"/>
+ </svg>
+ <!-- (was) nested svg fragment -->
+ <svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px"
+ id="nested">
+ <rect x="0" y="0" width="199" height="199"
+ style="fill: none; stroke: black"/>
+ <circle cx="50" cy="110" r="15" fill="greenyellow" stroke="black"
+ stroke-width="1"/>
+ </svg>
+ </p>
+ </body>
+</html>
diff --git a/layout/reftests/svg/smil/container/promoted-tree-1.xhtml b/layout/reftests/svg/smil/container/promoted-tree-1.xhtml
new file mode 100644
index 0000000000..f788d57e11
--- /dev/null
+++ b/layout/reftests/svg/smil/container/promoted-tree-1.xhtml
@@ -0,0 +1,71 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
+<html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait">
+ <head>
+ <title>Promoted subtree</title>
+ <!--
+ PURPOSE: As timing containers are defined according to the outermost SVG
+ document fragment, this case tests when a nested <svg> element is removed
+ and added as the outermost svg fragment, that is, promoted.
+
+ OPERATION: There is one animation containing two circles that move to the
+ right. The second circle is contained in a nested <svg> element. This nested
+ <svg> is removed from the outer <svg> element and then appended to
+ the parent <p> element.
+
+ EXPECTED RESULTS: After removing the inner <svg> and making it a child of
+ the <p> it becomes an outermost <svg> and therefore a new time container and
+ so the animation resets. This behaviour is the same in Opera and we believe
+ it to be correct.
+ -->
+ <script>
+ function moveAndSplit()
+ {
+ var svg = document.getElementById('outer');
+ svg.pauseAnimations();
+ svg.setCurrentTime(0.5);
+ split();
+ svg = document.getElementById('nested');
+ svg.pauseAnimations();
+ var svgs = document.getElementsByTagName('svg');
+ for (var i = 0; i &lt; svgs.length; i++) {
+ var svg = svgs[i];
+ svg.setCurrentTime(svg.getCurrentTime() + 0.5);
+ }
+ setTimeout('document.documentElement.removeAttribute("class")', 0);
+ }
+
+ function split()
+ {
+ var nested = document.getElementById('nested');
+ nested.parentNode.removeChild(nested);
+ var container = document.getElementById('container');
+ container.appendChild(nested);
+ }
+ </script>
+ </head>
+
+ <body onload="moveAndSplit()">
+ <p id="container">
+ <svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px"
+ id="outer">
+ <rect x="0" y="0" width="199" height="199"
+ style="fill: none; stroke: black"/>
+ <circle cx="0" cy="50" r="15" fill="skyblue" stroke="black"
+ stroke-width="1">
+ <animate attributeName="cx" from="0" to="200" begin="0s" dur="2s"
+ fill="freeze"/>
+ </circle>
+ <!-- nested svg fragment -->
+ <svg width="200px" height="200px" id="nested">
+ <rect x="0" y="0" width="199" height="199"
+ style="fill: none; stroke: black"/>
+ <circle cx="0" cy="110" r="15" fill="greenyellow" stroke="black"
+ stroke-width="1">
+ <animate attributeName="cx" from="0" to="200" begin="0s" dur="2s"
+ fill="freeze"/>
+ </circle>
+ </svg>
+ </svg>
+ </p>
+ </body>
+</html>
diff --git a/layout/reftests/svg/smil/container/reftest.list b/layout/reftests/svg/smil/container/reftest.list
new file mode 100644
index 0000000000..c492817d3f
--- /dev/null
+++ b/layout/reftests/svg/smil/container/reftest.list
@@ -0,0 +1,18 @@
+# Tests related to SVG Animation (using SMIL), focusing on animation-sorting
+# to see which animation takes precedence (out of multiple animations on the
+# same attribute)
+
+random == enveloped-tree-1.xhtml enveloped-tree-1-ref.xhtml # bug 470868
+fuzzy(0-1,0-810) == promoted-tree-1.xhtml promoted-tree-1-ref.xhtml
+random == moved-tree-1.xhtml moved-tree-1-ref.xhtml # bug 470868
+random-if(cocoaWidget||d2d) == deferred-anim-1.xhtml deferred-anim-1-ref.xhtml # bug 470868, bug 585484
+random-if(cocoaWidget&&layersGPUAccelerated) == deferred-tree-1.xhtml deferred-tree-1-ref.xhtml # bug 470868
+random-if(cocoaWidget&&layersGPUAccelerated) fuzzy(0-1,0-530) == deferred-tree-2a.xhtml deferred-tree-2-ref.xhtml # bug 470868
+random-if(cocoaWidget&&layersGPUAccelerated) fuzzy(0-1,0-530) == deferred-tree-2b.xhtml deferred-tree-2-ref.xhtml # bug 470868
+fuzzy(0-1,0-410) == deferred-tree-3a.xhtml deferred-tree-3-ref.xhtml
+fuzzy(0-1,0-110) == deferred-tree-3b.xhtml deferred-tree-3-ref.xhtml
+fuzzy(0-1,0-110) == deferred-tree-3c.xhtml deferred-tree-3-ref.xhtml
+fuzzy(0-1,0-110) == deferred-tree-3d.xhtml deferred-tree-3-ref.xhtml
+# this will occasionally fail until we correctly clear animation effects from
+# no-longer-targeted elements
+random == invalid-elem-1.xhtml invalid-elem-1-ref.xhtml
diff --git a/layout/reftests/svg/smil/event/event-begin-1.svg b/layout/reftests/svg/smil/event/event-begin-1.svg
new file mode 100644
index 0000000000..3b87def1df
--- /dev/null
+++ b/layout/reftests/svg/smil/event/event-begin-1.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="
+ document.documentElement.pauseAnimations();
+ document.documentElement.setCurrentTime(0);
+ click('circle');
+ delayedSnapshot(2)">
+ <script xlink:href="event-util.js" type="text/javascript"/>
+ <circle id="circle" r="10"/>
+ <rect width="100" height="100" fill="red">
+ <set attributeName="fill" attributeType="CSS"
+ to="green"
+ begin="circle.click" dur="4s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/event/event-begin-load-1.svg b/layout/reftests/svg/smil/event/event-begin-load-1.svg
new file mode 100644
index 0000000000..e53d845e16
--- /dev/null
+++ b/layout/reftests/svg/smil/event/event-begin-load-1.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait" id="svg"
+ onload="
+ document.documentElement.pauseAnimations();
+ document.documentElement.setCurrentTime(0);
+ delayedSnapshot(2)">
+ <script xlink:href="event-util.js" type="text/javascript"/>
+ <rect width="100" height="100" fill="red">
+ <set attributeName="fill" attributeType="CSS"
+ to="green"
+ begin="svg.SVGLoad" dur="4s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/event/event-begin-offset-1.svg b/layout/reftests/svg/smil/event/event-begin-offset-1.svg
new file mode 100644
index 0000000000..30b541b8dc
--- /dev/null
+++ b/layout/reftests/svg/smil/event/event-begin-offset-1.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="
+ document.documentElement.pauseAnimations();
+ document.documentElement.setCurrentTime(0);
+ click('circle');
+ delayedSnapshot(6)">
+ <script xlink:href="event-util.js" type="text/javascript"/>
+ <circle id="circle" r="10"/>
+ <rect width="100" height="100" fill="red">
+ <set attributeName="fill" attributeType="CSS"
+ to="green"
+ begin="circle.click+4s" dur="4s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/event/event-begin-offset-2.svg b/layout/reftests/svg/smil/event/event-begin-offset-2.svg
new file mode 100644
index 0000000000..f1e503cf0d
--- /dev/null
+++ b/layout/reftests/svg/smil/event/event-begin-offset-2.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="
+ document.documentElement.pauseAnimations();
+ document.documentElement.setCurrentTime(4);
+ click('circle');
+ delayedSnapshot(4)">
+ <script xlink:href="event-util.js" type="text/javascript"/>
+ <circle id="circle" r="10"/>
+ <rect width="100" height="100" fill="red">
+ <animate attributeName="fill" attributeType="CSS"
+ values="orange; green" calcMode="discrete"
+ begin="circle.click-4s" dur="8s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/event/event-begin-timeevent-1.svg b/layout/reftests/svg/smil/event/event-begin-timeevent-1.svg
new file mode 100644
index 0000000000..37fa8d9c86
--- /dev/null
+++ b/layout/reftests/svg/smil/event/event-begin-timeevent-1.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="
+ document.documentElement.pauseAnimations();
+ document.documentElement.setCurrentTime(0);
+ /* Make sure the event gets fired */
+ document.documentElement.setCurrentTime(0.1);
+ delayedSnapshot(2)">
+ <script xlink:href="event-util.js" type="text/javascript"/>
+ <rect width="100" height="100" fill="red">
+ <set attributeName="x" to="0" begin="0s" id="a"/>
+ <set attributeName="fill" attributeType="CSS"
+ to="green"
+ begin="a.beginEvent" dur="4s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/event/event-begin-timeevent-2.svg b/layout/reftests/svg/smil/event/event-begin-timeevent-2.svg
new file mode 100644
index 0000000000..6472fab70a
--- /dev/null
+++ b/layout/reftests/svg/smil/event/event-begin-timeevent-2.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="
+ document.documentElement.pauseAnimations();
+ document.documentElement.setCurrentTime(0);
+ /* Make sure the event gets fired */
+ document.documentElement.setCurrentTime(0.1);
+ document.documentElement.setCurrentTime(0.6);
+ delayedSnapshot(2.5)">
+ <script xlink:href="event-util.js" type="text/javascript"/>
+ <rect width="100" height="100" fill="red">
+ <set attributeName="x" to="0" begin="0s" dur="0.5s" id="a"/>
+ <set attributeName="fill" attributeType="CSS"
+ to="green"
+ begin="a.endEvent" dur="4s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/event/event-begin-timeevent-3.svg b/layout/reftests/svg/smil/event/event-begin-timeevent-3.svg
new file mode 100644
index 0000000000..35247ed46d
--- /dev/null
+++ b/layout/reftests/svg/smil/event/event-begin-timeevent-3.svg
@@ -0,0 +1,36 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="fastForwardToEvent()">
+ <script xlink:href="event-util.js" type="text/javascript"/>
+ <script type="text/javascript">
+ const gTimeoutDur = 60000; // Time until we give up waiting for events in ms
+ var timeoutID;
+ function fastForwardToEvent()
+ {
+ document.documentElement.pauseAnimations();
+ document.documentElement.setCurrentTime(4.99);
+ // This test is designed to pass quickly and fail slowly.
+ //
+ // In the success case, the second animation will start almost
+ // immediately, fire a beginEvent and trigger gotBegin below.
+ //
+ // In the failure case, the following timeout will fire (after
+ // gTimeoutDur), we'll seek to t=1s (to make sure we show the red
+ // square) and then finish.
+ timeoutID = window.setTimeout(finish, gTimeoutDur,
+ 1 /*seekTimeInSeconds*/);
+ document.documentElement.unpauseAnimations();
+ }
+ function gotBegin()
+ {
+ window.clearTimeout(timeoutID);
+ finish();
+ }
+ </script>
+ <rect width="100" height="100" fill="red">
+ <set attributeName="x" to="0" begin="0s" dur="5s" repeatCount="2" id="a"/>
+ <set attributeName="fill" attributeType="CSS" to="green"
+ begin="a.repeatEvent" onbegin="gotBegin()"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/event/event-bubble-1.svg b/layout/reftests/svg/smil/event/event-bubble-1.svg
new file mode 100644
index 0000000000..b4b4ed4cd8
--- /dev/null
+++ b/layout/reftests/svg/smil/event/event-bubble-1.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="
+ document.documentElement.pauseAnimations();
+ document.documentElement.setCurrentTime(0);
+ click('circle');
+ delayedSnapshot(2)">
+ <script xlink:href="event-util.js" type="text/javascript"/>
+ <g id="g">
+ <circle id="circle" r="10"/>
+ </g>
+ <rect width="100" height="100" fill="red">
+ <set attributeName="fill" attributeType="CSS"
+ to="green"
+ begin="g.click" dur="4s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/event/event-custom-1.svg b/layout/reftests/svg/smil/event/event-custom-1.svg
new file mode 100644
index 0000000000..c3b9a50d3e
--- /dev/null
+++ b/layout/reftests/svg/smil/event/event-custom-1.svg
@@ -0,0 +1,26 @@
+<!-- Tests support for custom events -->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="sendEvent()">
+ <script xlink:href="event-util.js" type="text/javascript"/>
+ <script type="text/javascript">
+ function sendEvent()
+ {
+ document.documentElement.pauseAnimations();
+ document.documentElement.setCurrentTime(0);
+ var evt = document.createEvent("SVGEvents");
+ evt.initEvent("user.defined", false, false);
+ var target = document.getElementById('rect');
+ target.dispatchEvent(evt);
+ delayedSnapshot(2);
+ }
+ </script>
+ <rect width="100" height="100" fill="red" id="rect">
+ <!-- SMIL allows periods to be embedded in the event name by escaping them
+ with a backslash. (Otherwise the part before the period would be
+ treated as an ID reference.) Test that we support that. -->
+ <set attributeName="fill" attributeType="CSS" to="green"
+ begin="rect.user\.defined" dur="4s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/event/event-end-1.svg b/layout/reftests/svg/smil/event/event-end-1.svg
new file mode 100644
index 0000000000..b846de94dd
--- /dev/null
+++ b/layout/reftests/svg/smil/event/event-end-1.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="
+ document.documentElement.pauseAnimations();
+ document.documentElement.setCurrentTime(2);
+ click('circle');
+ delayedSnapshot(3)">
+ <script xlink:href="event-util.js" type="text/javascript"/>
+ <circle id="circle" r="10"/>
+ <rect width="100" height="100" fill="green">
+ <set attributeName="fill" attributeType="CSS"
+ to="red"
+ begin="1s" end="circle.click" dur="4s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/event/event-end-2.svg b/layout/reftests/svg/smil/event/event-end-2.svg
new file mode 100644
index 0000000000..36bbb9f26f
--- /dev/null
+++ b/layout/reftests/svg/smil/event/event-end-2.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="
+ document.documentElement.pauseAnimations();
+ document.documentElement.setCurrentTime(0);
+ /* Click event should be ignored since the element is inactive as per
+ * SMIL's event sensitivity rules */
+ click('circle');
+ delayedSnapshot(3)">
+ <script xlink:href="event-util.js" type="text/javascript"/>
+ <circle id="circle" r="10"/>
+ <rect width="100" height="100" fill="red">
+ <set attributeName="fill" attributeType="CSS"
+ to="green"
+ begin="1s" end="circle.click+2s" dur="4s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/event/event-end-open-1.svg b/layout/reftests/svg/smil/event/event-end-open-1.svg
new file mode 100644
index 0000000000..0b9afb913a
--- /dev/null
+++ b/layout/reftests/svg/smil/event/event-end-open-1.svg
@@ -0,0 +1,20 @@
+<!--
+ Generally speaking, when constructing intervals if all the end instance times
+ are before the next begin time there's no valid interval.
+
+ However, SMIL specifically makes an exception when the end attribute has event
+ conditions in which case an unresolved end is used.
+ -->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="
+ document.documentElement.pauseAnimations();
+ document.documentElement.setCurrentTime(2);
+ document.documentElement.removeAttribute('class')">
+ <circle id="circle" r="10"/>
+ <rect width="100" height="100" fill="red">
+ <set attributeName="fill" attributeType="CSS" to="green"
+ begin="0s; 2s" end="1s; circle.click"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/event/event-end-trimmed-1.svg b/layout/reftests/svg/smil/event/event-end-trimmed-1.svg
new file mode 100644
index 0000000000..d4c06b5992
--- /dev/null
+++ b/layout/reftests/svg/smil/event/event-end-trimmed-1.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="
+ document.documentElement.pauseAnimations();
+ document.documentElement.setCurrentTime(1);
+ document.getElementById('a').setAttribute('end', '0s');
+ /* Force a sample to make sure that event gets fired */
+ document.documentElement.setCurrentTime(1);
+ delayedSnapshot(2)">
+ <script xlink:href="event-util.js" type="text/javascript"/>
+ <rect width="100" height="100" fill="red">
+ <set attributeName="x" to="0" begin="0.5s" dur="10s" id="a"/>
+ <set attributeName="fill" attributeType="CSS"
+ to="green" begin="a.endEvent" dur="4s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/event/event-preventDefault-1.svg b/layout/reftests/svg/smil/event/event-preventDefault-1.svg
new file mode 100644
index 0000000000..4ebadda39b
--- /dev/null
+++ b/layout/reftests/svg/smil/event/event-preventDefault-1.svg
@@ -0,0 +1,16 @@
+<!-- Calling preventDefault on the event should have no effect -->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="
+ document.documentElement.pauseAnimations();
+ document.documentElement.setCurrentTime(0);
+ click('circle');
+ delayedSnapshot(2)">
+ <script xlink:href="event-util.js" type="text/javascript"/>
+ <circle id="circle" r="10" onclick="evt.preventDefault()"/>
+ <rect width="100" height="100" fill="red">
+ <set attributeName="fill" attributeType="CSS"
+ to="green" begin="circle.click" dur="4s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/event/event-seek-1.svg b/layout/reftests/svg/smil/event/event-seek-1.svg
new file mode 100644
index 0000000000..727c244c6c
--- /dev/null
+++ b/layout/reftests/svg/smil/event/event-seek-1.svg
@@ -0,0 +1,20 @@
+<!-- Test a backwards seek with an event-generated time -->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ id="svg"
+ class="reftest-wait">
+ <script xlink:href="event-util.js" type="text/javascript"/>
+ <script type="text/javascript">
+ function seek()
+ {
+ document.documentElement.setCurrentTime(40);
+ finish(30);
+ }
+ document.addEventListener("MozReftestInvalidate", seek, false);
+ setTimeout(seek, 4000); // fallback for running outside reftest
+ </script>
+ <rect width="100" height="100" fill="red">
+ <set attributeName="fill" attributeType="CSS" to="green"
+ begin="svg.SVGLoad+20s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/event/event-target-default-1.svg b/layout/reftests/svg/smil/event/event-target-default-1.svg
new file mode 100644
index 0000000000..2fedc40369
--- /dev/null
+++ b/layout/reftests/svg/smil/event/event-target-default-1.svg
@@ -0,0 +1,15 @@
+<!-- Test default parent target -->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="
+ document.documentElement.pauseAnimations();
+ document.documentElement.setCurrentTime(0);
+ click('rect');
+ delayedSnapshot(2)">
+ <script xlink:href="event-util.js" type="text/javascript"/>
+ <rect width="100" height="100" fill="red" id="rect">
+ <set attributeName="fill" attributeType="CSS" to="green"
+ begin="click" dur="4s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/event/event-target-default-2.svg b/layout/reftests/svg/smil/event/event-target-default-2.svg
new file mode 100644
index 0000000000..dec770e7e9
--- /dev/null
+++ b/layout/reftests/svg/smil/event/event-target-default-2.svg
@@ -0,0 +1,14 @@
+<!-- Test default target with xlink:href -->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="
+ document.documentElement.pauseAnimations();
+ document.documentElement.setCurrentTime(0);
+ click('rect');
+ delayedSnapshot(2)">
+ <script xlink:href="event-util.js" type="text/javascript"/>
+ <rect width="100" height="100" fill="red" id="rect"/>
+ <set xlink:href="#rect" attributeName="fill" attributeType="CSS" to="green"
+ begin="click" dur="4s"/>
+</svg>
diff --git a/layout/reftests/svg/smil/event/event-target-id-change-1.svg b/layout/reftests/svg/smil/event/event-target-id-change-1.svg
new file mode 100644
index 0000000000..836ebc9d46
--- /dev/null
+++ b/layout/reftests/svg/smil/event/event-target-id-change-1.svg
@@ -0,0 +1,15 @@
+<!-- Test that changes to ID assignments are reflected in event registration -->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="
+ document.documentElement.pauseAnimations();
+ document.documentElement.setCurrentTime(0);
+ document.getElementById('square').setAttribute('id', 'rect');
+ click('rect');
+ delayedSnapshot(2)">
+ <script xlink:href="event-util.js" type="text/javascript"/>
+ <rect width="100" height="100" fill="red" id="square"/>
+ <set xlink:href="#rect" attributeName="fill" attributeType="CSS" to="green"
+ begin="click" dur="4s"/>
+</svg>
diff --git a/layout/reftests/svg/smil/event/event-target-id-change-2.svg b/layout/reftests/svg/smil/event/event-target-id-change-2.svg
new file mode 100644
index 0000000000..2046eb9c82
--- /dev/null
+++ b/layout/reftests/svg/smil/event/event-target-id-change-2.svg
@@ -0,0 +1,16 @@
+<!-- Test that changes to ID assignments are reflected in event registration.
+ Test for when the animation target becomes invalid. -->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="
+ document.documentElement.pauseAnimations();
+ document.documentElement.setCurrentTime(0);
+ document.getElementById('rect').setAttribute('id', 'square');
+ click('square');
+ delayedSnapshot(2)">
+ <script xlink:href="event-util.js" type="text/javascript"/>
+ <rect width="100" height="100" fill="green" id="rect"/>
+ <set xlink:href="#rect" attributeName="fill" attributeType="CSS" to="red"
+ begin="click" dur="4s"/>
+</svg>
diff --git a/layout/reftests/svg/smil/event/event-target-id-change-3.svg b/layout/reftests/svg/smil/event/event-target-id-change-3.svg
new file mode 100644
index 0000000000..9e73efb26b
--- /dev/null
+++ b/layout/reftests/svg/smil/event/event-target-id-change-3.svg
@@ -0,0 +1,16 @@
+<!-- Test that changes to ID assignments are reflected in event registration.
+ Test with end specifications. -->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="
+ document.documentElement.pauseAnimations();
+ document.documentElement.setCurrentTime(1);
+ document.getElementById('square').setAttribute('id', 'rect');
+ click('rect');
+ delayedSnapshot(2)">
+ <script xlink:href="event-util.js" type="text/javascript"/>
+ <rect width="100" height="100" fill="green" id="square"/>
+ <set xlink:href="#rect" attributeName="fill" attributeType="CSS" to="red"
+ begin="0s" end="click" dur="4s"/>
+</svg>
diff --git a/layout/reftests/svg/smil/event/event-target-non-svg-1.xhtml b/layout/reftests/svg/smil/event/event-target-non-svg-1.xhtml
new file mode 100644
index 0000000000..d57948d6c3
--- /dev/null
+++ b/layout/reftests/svg/smil/event/event-target-non-svg-1.xhtml
@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait">
+<!--
+ Test for non-SVG event bases. This isn't strictly required but we at very
+ least we want to make sure our behaviour is defined.
+ -->
+<head>
+<script src="event-util.js" type="text/javascript"></script>
+<script>
+function snapshot() {
+ var svg = document.getElementById("svg");
+ svg.pauseAnimations();
+ svg.setCurrentTime(0);
+ click('a');
+ var a = document.getElementById('a');
+ a.style.display = 'none';
+ window.setTimeout(doSnapshot, 10);
+}
+
+function doSnapshot() {
+ var svg = document.getElementById("svg");
+ svg.pauseAnimations();
+ svg.setCurrentTime(2);
+ document.documentElement.removeAttribute("class");
+}
+
+document.addEventListener("MozReftestInvalidate", snapshot, false);
+setTimeout(snapshot, 4000); // fallback for running outside reftest
+
+</script>
+</head>
+<body>
+<a href="#" id="a">Play!</a>
+<svg xmlns="http://www.w3.org/2000/svg" width="120px" height="120px" id="svg">
+ <rect width="100" height="100" fill="red">
+ <set attributeName="fill" attributeType="CSS" to="green"
+ begin="a.click" dur="4s"/>
+ </rect>
+</svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/smil/event/event-target-surgery-1.svg b/layout/reftests/svg/smil/event/event-target-surgery-1.svg
new file mode 100644
index 0000000000..9959a14df2
--- /dev/null
+++ b/layout/reftests/svg/smil/event/event-target-surgery-1.svg
@@ -0,0 +1,17 @@
+<!-- Test that animations are unregistered when removed -->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="
+ document.documentElement.pauseAnimations();
+ document.documentElement.setCurrentTime(0);
+ document.getElementById('rect').removeChild(
+ document.getElementById('anim'));
+ click('rect');
+ delayedSnapshot(2)">
+ <script xlink:href="event-util.js" type="text/javascript"/>
+ <rect width="100" height="100" fill="green" id="rect">
+ <set attributeName="fill" attributeType="CSS"
+ to="red" begin="click" dur="4s" id="anim"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/event/event-target-surgery-2.svg b/layout/reftests/svg/smil/event/event-target-surgery-2.svg
new file mode 100644
index 0000000000..b9a778b38d
--- /dev/null
+++ b/layout/reftests/svg/smil/event/event-target-surgery-2.svg
@@ -0,0 +1,15 @@
+<!-- Test that animations are unregistered when removed -->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="
+ document.documentElement.pauseAnimations();
+ document.documentElement.setCurrentTime(0);
+ document.documentElement.removeChild(document.getElementById('anim'));
+ click('rect');
+ delayedSnapshot(2)">
+ <script xlink:href="event-util.js" type="text/javascript"/>
+ <rect width="100" height="100" fill="green" id="rect"/>
+ <set xlink:href="#rect" attributeName="fill" attributeType="CSS"
+ to="red" begin="click" dur="4s" id="anim"/>
+</svg>
diff --git a/layout/reftests/svg/smil/event/event-target-surgery-3.svg b/layout/reftests/svg/smil/event/event-target-surgery-3.svg
new file mode 100644
index 0000000000..cf68fc691b
--- /dev/null
+++ b/layout/reftests/svg/smil/event/event-target-surgery-3.svg
@@ -0,0 +1,32 @@
+<!-- Test that event registration is updated when reparenting -->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="reparent()">
+ <script xlink:href="event-util.js" type="text/javascript"/>
+ <script type="text/javascript">
+ function reparent()
+ {
+ var svg = document.documentElement;
+ svg.pauseAnimations();
+ svg.setCurrentTime(0);
+ var circle = document.getElementById('circle');
+ var rect = document.getElementById('rect');
+ var animmove = document.getElementById('anim-move');
+ var animcolor = document.getElementById('anim-color');
+ circle.appendChild(animmove);
+ rect.appendChild(animcolor);
+ click('rect');
+ delayedSnapshot(2);
+ }
+ </script>
+ <circle id="circle" r="10">
+ <set attributeName="fill" attributeType="CSS"
+ to="green" begin="click" dur="4s" id="anim-color"/>
+ </circle>
+ <rect width="100" height="100" fill="red" id="rect">
+ <animateTransform attributeName="transform" type="translate"
+ values="100; 100" calcMode="discrete"
+ begin="click" dur="4s" id="anim-move"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/event/event-target-xlink-change-1.svg b/layout/reftests/svg/smil/event/event-target-xlink-change-1.svg
new file mode 100644
index 0000000000..f742e9276e
--- /dev/null
+++ b/layout/reftests/svg/smil/event/event-target-xlink-change-1.svg
@@ -0,0 +1,17 @@
+<!-- Test that changes to animation targets update event registration. -->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="
+ document.documentElement.pauseAnimations();
+ document.documentElement.setCurrentTime(0);
+ document.getElementById('anim').setAttributeNS(
+ 'http://www.w3.org/1999/xlink', 'href', '#rect');
+ click('rect');
+ delayedSnapshot(2)">
+ <script xlink:href="event-util.js" type="text/javascript"/>
+ <circle id="circle" r="10"/>
+ <rect width="100" height="100" fill="red" id="rect"/>
+ <set xlink:href="#circle" attributeName="fill" attributeType="CSS" to="green"
+ begin="click" dur="4s" id="anim"/>
+</svg>
diff --git a/layout/reftests/svg/smil/event/event-target-xlink-change-2.svg b/layout/reftests/svg/smil/event/event-target-xlink-change-2.svg
new file mode 100644
index 0000000000..0b8283f8bd
--- /dev/null
+++ b/layout/reftests/svg/smil/event/event-target-xlink-change-2.svg
@@ -0,0 +1,18 @@
+<!-- Test that changes to animation targets update event registration. -->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="
+ document.documentElement.pauseAnimations();
+ document.documentElement.setCurrentTime(0);
+ document.getElementById('anim').setAttributeNS(
+ 'http://www.w3.org/1999/xlink', 'href', '#circle');
+ click('rect');
+ delayedSnapshot(2)">
+ <script xlink:href="event-util.js" type="text/javascript"/>
+ <circle id="circle" r="10"/>
+ <rect width="100" height="100" fill="green" id="rect">
+ <set attributeName="fill" attributeType="CSS"
+ to="red" begin="click" dur="4s" id="anim"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/event/event-target-xlink-change-3.svg b/layout/reftests/svg/smil/event/event-target-xlink-change-3.svg
new file mode 100644
index 0000000000..d88f1aa77a
--- /dev/null
+++ b/layout/reftests/svg/smil/event/event-target-xlink-change-3.svg
@@ -0,0 +1,18 @@
+<!-- Test that changes to animation targets update event registration. -->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="
+ document.documentElement.pauseAnimations();
+ document.documentElement.setCurrentTime(0);
+ document.getElementById('anim').removeAttributeNS(
+ 'http://www.w3.org/1999/xlink', 'href');
+ click('rect');
+ delayedSnapshot(2)">
+ <script xlink:href="event-util.js" type="text/javascript"/>
+ <circle id="circle" r="10"/>
+ <rect width="100" height="100" fill="red" id="rect">
+ <set xlink:href="#circle" attributeName="fill" attributeType="CSS"
+ to="green" begin="click" dur="4s" id="anim"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/event/event-target-xlink-change-4.svg b/layout/reftests/svg/smil/event/event-target-xlink-change-4.svg
new file mode 100644
index 0000000000..14e6a46553
--- /dev/null
+++ b/layout/reftests/svg/smil/event/event-target-xlink-change-4.svg
@@ -0,0 +1,18 @@
+<!-- Test that changes to animation targets update event registration. -->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="
+ document.documentElement.pauseAnimations();
+ document.documentElement.setCurrentTime(0);
+ document.getElementById('anim').removeAttributeNS(
+ 'http://www.w3.org/1999/xlink', 'href');
+ click('circle');
+ delayedSnapshot(2)">
+ <script xlink:href="event-util.js" type="text/javascript"/>
+ <circle id="circle" r="10"/>
+ <rect width="100" height="100" fill="green" id="rect">
+ <set xlink:href="#circle" attributeName="fill" attributeType="CSS"
+ to="red" begin="click" dur="4s" id="anim"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/event/event-util.js b/layout/reftests/svg/smil/event/event-util.js
new file mode 100644
index 0000000000..fd0d1bd3e9
--- /dev/null
+++ b/layout/reftests/svg/smil/event/event-util.js
@@ -0,0 +1,24 @@
+// Allows a moment for events to be processed then performs a seek and runs
+// a snapshot.
+function delayedSnapshot(seekTimeInSeconds)
+{
+ // Allow time for events to be processed
+ window.setTimeout(finish, 10, seekTimeInSeconds);
+}
+
+function finish(seekTimeInSeconds)
+{
+ document.documentElement.pauseAnimations();
+ if (seekTimeInSeconds)
+ document.documentElement.setCurrentTime(seekTimeInSeconds);
+ document.documentElement.removeAttribute("class");
+}
+
+function click(targetId)
+{
+ var evt = document.createEvent("MouseEvents");
+ evt.initMouseEvent("click", true, true, window,
+ 0, 0, 0, 0, 0, false, false, false, false, 0, null);
+ var target = document.getElementById(targetId);
+ target.dispatchEvent(evt);
+}
diff --git a/layout/reftests/svg/smil/event/green-box-ref.svg b/layout/reftests/svg/smil/event/green-box-ref.svg
new file mode 100644
index 0000000000..120941444a
--- /dev/null
+++ b/layout/reftests/svg/smil/event/green-box-ref.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <rect width="100" height="100" fill="green"/>
+</svg>
diff --git a/layout/reftests/svg/smil/event/green-box-ref.xhtml b/layout/reftests/svg/smil/event/green-box-ref.xhtml
new file mode 100644
index 0000000000..ce0bc78f12
--- /dev/null
+++ b/layout/reftests/svg/smil/event/green-box-ref.xhtml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<body>
+<svg xmlns="http://www.w3.org/2000/svg" width="120px" height="120px">
+ <rect width="100" height="100" fill="green"/>
+</svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/smil/event/reftest.list b/layout/reftests/svg/smil/event/reftest.list
new file mode 100644
index 0000000000..74add0ead3
--- /dev/null
+++ b/layout/reftests/svg/smil/event/reftest.list
@@ -0,0 +1,30 @@
+# Tests related to SVG Animation (using SMIL) that use event timing.
+
+== event-begin-1.svg green-box-ref.svg
+== event-begin-offset-1.svg green-box-ref.svg
+== event-begin-offset-2.svg green-box-ref.svg
+== event-begin-timeevent-1.svg green-box-ref.svg
+== event-begin-timeevent-2.svg green-box-ref.svg
+random-if(Android) == event-begin-timeevent-3.svg green-box-ref.svg
+== event-begin-load-1.svg green-box-ref.svg
+== event-bubble-1.svg green-box-ref.svg
+== event-custom-1.svg green-box-ref.svg
+== event-end-1.svg green-box-ref.svg
+== event-end-2.svg green-box-ref.svg
+== event-end-open-1.svg green-box-ref.svg
+== event-end-trimmed-1.svg green-box-ref.svg
+== event-preventDefault-1.svg green-box-ref.svg
+== event-seek-1.svg green-box-ref.svg
+== event-target-default-1.svg green-box-ref.svg
+== event-target-default-2.svg green-box-ref.svg
+== event-target-id-change-1.svg green-box-ref.svg
+== event-target-id-change-2.svg green-box-ref.svg
+== event-target-id-change-3.svg green-box-ref.svg
+== event-target-xlink-change-1.svg green-box-ref.svg
+== event-target-xlink-change-2.svg green-box-ref.svg
+== event-target-xlink-change-3.svg green-box-ref.svg
+== event-target-xlink-change-4.svg green-box-ref.svg
+== event-target-surgery-1.svg green-box-ref.svg
+== event-target-surgery-2.svg green-box-ref.svg
+== event-target-surgery-3.svg green-box-ref.svg
+== event-target-non-svg-1.xhtml green-box-ref.xhtml
diff --git a/layout/reftests/svg/smil/filtered-instance-time-1.svg b/layout/reftests/svg/smil/filtered-instance-time-1.svg
new file mode 100644
index 0000000000..36d69cd122
--- /dev/null
+++ b/layout/reftests/svg/smil/filtered-instance-time-1.svg
@@ -0,0 +1,63 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="go()">
+ <!-- Instance time filtering involves removing instance times that are no
+ longer needed. However, under some arrangements an excessive number of
+ instance times may be generated that will never be cleaned up since they
+ might potentially still affect the behavior of the timing model.
+
+ For example, consider the case where we have a valid cyclic dependency
+ (e.g. a ping-pong effect) between TimeEvents. For example,
+ a.begin=b.endEvent and b.begin=a.endEvent. The times generated by this
+ arrangement won't be cleared by regular filtering since they're
+ technically unpredictable (e.g. seeking the document will cause some
+ events to be suppressed) and so we preserve them to provide correct
+ backwards seeking support.
+
+ Therefore, after reaching a certain threshold, old instance times are
+ simply discarded indiscriminantly to avoid consuming memory in unbounded
+ fashion as the animation progresses.
+
+ This test checks this second stage of instance time filtering. -->
+ <script>
+ function go() {
+ var svg = document.documentElement;
+ var anim = document.getElementById('anim');
+
+ // To begin with we have an animation from 0s-2s
+ svg.pauseAnimations();
+ svg.setCurrentTime(1.0); // Seek to mid-interval
+
+ // Generate a lot of instance times beyond the interval end at t=2s
+ // The threshold will be something like 100 but just in case it's 200
+ // let's make 210 instance times.
+ for (var i = 0; i &lt; 210; i++) {
+ // The first instance time will be at t=3s and then we'll generate lots
+ // of times following on from there
+ anim.beginElementAt(2 + i * 0.1);
+ }
+
+ // Seek past the interval end -- this will cause the filtering to kick in.
+ // The first stage of filtering will only filter instance times before the
+ // end of the previous interval (i.e. before t=2s in this case).
+ // The second stage of filtering should take care of the rest.
+ svg.setCurrentTime(2.5);
+
+ // The second stage of filtering will clear out the oldest times first.
+ // However, since first time we generated at t=3s is now used as begin of
+ // the yet-to-begin current interval it should not be cleared.
+ // So if we force the current interval to be updated by adding another
+ // instance time the next interval should still start at t=3s.
+ anim.beginElementAt(100);
+
+ // Now when we go to do a snapshot at t=3s, the animation should be in
+ // effect.
+ svg.setCurrentTime(3.0);
+ svg.removeAttribute("class");
+ }
+ </script>
+ <rect id="blueRect" x="100" y="15" width="200" height="200" fill="blue">
+ <set id="anim" attributeName="x" to="15" begin="0s" dur="2s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/freeze-applied-late-1.svg b/layout/reftests/svg/smil/freeze-applied-late-1.svg
new file mode 100644
index 0000000000..2dd25e1392
--- /dev/null
+++ b/layout/reftests/svg/smil/freeze-applied-late-1.svg
@@ -0,0 +1,22 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="go()">
+ <!-- This test checks for correct behavior when fill="freeze" is applied
+ *after* the end of an animation's interval. In this case, we immediately
+ seek to a time after the end, so that no samples will have been taken
+ when we apply fill="freeze". -->
+ <script>
+ function go() {
+ var svg = document.documentElement;
+ svg.pauseAnimations();
+ svg.setCurrentTime(4.0);
+ document.getElementById("anim").setAttribute("fill", "freeze");
+ svg.removeAttribute("class");
+ }
+ </script>
+ <rect id="blueRect" x="15" y="15" width="200" height="100" fill="blue">
+ <animate id="anim" attributeName="height"
+ to="200" begin="0s" dur="2s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/freeze-applied-late-2.svg b/layout/reftests/svg/smil/freeze-applied-late-2.svg
new file mode 100644
index 0000000000..fd15cd9915
--- /dev/null
+++ b/layout/reftests/svg/smil/freeze-applied-late-2.svg
@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="go()">
+ <!-- This test checks for correct behavior when fill="freeze" is applied
+ *after* the end of an animation's interval. In this case, we take one
+ sample partway through the animation. Then we immediately seek to a
+ time after the end, so that only the one sample will have been taken
+ when we apply fill="freeze". -->
+ <script>
+ function go() {
+ var svg = document.documentElement;
+ svg.pauseAnimations();
+ svg.setCurrentTime(1.0);
+ svg.setCurrentTime(4.0);
+ document.getElementById("anim").setAttribute("fill", "freeze");
+ svg.removeAttribute("class");
+ }
+ </script>
+ <rect id="blueRect" x="15" y="15" width="200" height="100" fill="blue">
+ <animate id="anim" attributeName="height"
+ to="200" begin="0s" dur="2s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/freeze-applied-late-3.svg b/layout/reftests/svg/smil/freeze-applied-late-3.svg
new file mode 100644
index 0000000000..d6f150df0c
--- /dev/null
+++ b/layout/reftests/svg/smil/freeze-applied-late-3.svg
@@ -0,0 +1,23 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="go()">
+ <!-- This test checks for correct behavior when fill="freeze" is applied when
+ the only interval on an animation is entirely before the document begins
+ (before 0). The SMIL Animation spec says that such intervals should be
+ filtered out[1] (ignored). So, since we have no valid intervals,
+ applying fill="freeze" shouldn't have any effect in this case.
+ [1] http://www.w3.org/TR/2001/REC-smil-animation-20010904/#Timing-BeginEnd-LC-Start
+ -->
+ <script>
+ function go() {
+ var svg = document.documentElement;
+ document.getElementById("anim").setAttribute("fill", "freeze");
+ svg.removeAttribute("class");
+ }
+ </script>
+ <rect id="blueRect" x="15" y="15" width="200" height="200" fill="blue">
+ <animate id="anim" attributeName="height"
+ to="100" begin="-2s" dur="2s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/freeze-applied-late-4.svg b/layout/reftests/svg/smil/freeze-applied-late-4.svg
new file mode 100644
index 0000000000..f755ee5c62
--- /dev/null
+++ b/layout/reftests/svg/smil/freeze-applied-late-4.svg
@@ -0,0 +1,30 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="go()">
+ <!-- This test checks for correct behavior when fill="freeze" is applied when
+ one interval on an animation is entirely before the document begins
+ (before 0), and a second interval is at least partly after the document
+ begins (yet before our first sample, since we immediately seek forward
+ on document load).
+
+ The SMIL Animation spec says that the former interval should be
+ filtered out[1] (ignored), but the latter should not. So, because of
+ the latter interval, applying fill="freeze" should have an effect in
+ this case.
+ [1] http://www.w3.org/TR/2001/REC-smil-animation-20010904/#Timing-BeginEnd-LC-Start
+ -->
+ <script>
+ function go() {
+ var svg = document.documentElement;
+ svg.pauseAnimations();
+ svg.setCurrentTime(4.0);
+ document.getElementById("anim").setAttribute("fill", "freeze");
+ svg.removeAttribute("class");
+ }
+ </script>
+ <rect id="blueRect" x="15" y="15" width="200" height="100" fill="blue">
+ <animate id="anim" attributeName="height"
+ to="200" begin="-3s; -1s" dur="2s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/frozen-to-anim-1.svg b/layout/reftests/svg/smil/frozen-to-anim-1.svg
new file mode 100644
index 0000000000..a934d45342
--- /dev/null
+++ b/layout/reftests/svg/smil/frozen-to-anim-1.svg
@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(50, true)">
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <!-- Covered up red area, if we succeed -->
+ <rect width="100%" height="100%" fill="red"/>
+ <rect width="100%" height="100%" fill="lime">
+ <!-- At time t=50s, this will give a base value of 50% -->
+ <animate attributeName="width" from="0%" to="100%"
+ dur="100s"/>
+ <!-- From time t=1s onwards this should apply 50% of its effect to the base
+ value (since it is frozen at repeatCount=0.5).
+ So, if the base value is 50%, and the to-value is 150%, it will produce
+ 100%. -->
+ <animate attributeName="width" to="150%" fill="freeze"
+ dur="2s" repeatCount="0.5"/>
+ <!-- The above will check that the resulting width is *at least* 100%. But
+ if it's, say, 120%, we won't see any failure.
+ Therefore, we perform the reverse operation on the height to ensure we
+ don't apply a value that's too large. -->
+ <!-- At time t=50s, this will give a base value of 150% -->
+ <animate attributeName="height" from="200%" to="100%"
+ dur="100s"/>
+ <!-- From time t=1s onwards this should apply 50% of its effect to the
+ value.
+ So, if the base value is 150%, and the to-value is 50%, it will produce
+ 100%. -->
+ <animate attributeName="height" to="50%" fill="freeze"
+ dur="2s" repeatCount="0.5"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/inactivate-with-active-unchanged-1.svg b/layout/reftests/svg/smil/inactivate-with-active-unchanged-1.svg
new file mode 100644
index 0000000000..c3e734aea0
--- /dev/null
+++ b/layout/reftests/svg/smil/inactivate-with-active-unchanged-1.svg
@@ -0,0 +1,23 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="
+ document.documentElement.pauseAnimations();
+ document.documentElement.setCurrentTime(1);
+ setTimeAndSnapshot(2, false);">
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <!--
+ Test that we correctly handle "HasChanged()" flags when an animation becomes
+ inactive while its siblings haven't changed.
+ In this test case, we take our first sample at 1s, and both animations are
+ active. We take our second sample at 2s, and the first animation is the only
+ active animation. It hasn't changed, so we might think that we don't need to
+ recompose its target - BUT we *do* need to recompose, because the other
+ animation is newly inactive, and we need to reevaluate the animation
+ sandwich now that it's gone.
+ -->
+ <rect x="15" y="15" width="200" height="200" fill="orange">
+ <set attributeName="fill" to="blue" begin="0s" dur="indefinite"/>
+ <set attributeName="fill" to="red" begin="1s" dur="0.5s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/inactivate-with-active-unchanged-2.svg b/layout/reftests/svg/smil/inactivate-with-active-unchanged-2.svg
new file mode 100644
index 0000000000..be23416fe1
--- /dev/null
+++ b/layout/reftests/svg/smil/inactivate-with-active-unchanged-2.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="
+ document.documentElement.pauseAnimations();
+ document.documentElement.setCurrentTime(1);
+ setTimeAndSnapshot(2, false);">
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <!--
+ Same as in inactivate-with-active-unchanged-1.svg, but with a frozen
+ animation.
+ -->
+ <rect x="15" y="15" width="200" height="200" fill="orange">
+ <set attributeName="fill" to="blue" begin="0s" dur="0.5s" fill="freeze"/>
+ <set attributeName="fill" to="red" begin="1s" dur="0.5s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/lime.html b/layout/reftests/svg/smil/lime.html
new file mode 100644
index 0000000000..c4542815b5
--- /dev/null
+++ b/layout/reftests/svg/smil/lime.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Testcase reference file for generic pass condition(HTML)</title>
+ </head>
+ <body style="background-color: lime;">
+ </body>
+</html>
diff --git a/layout/reftests/svg/smil/lime.svg b/layout/reftests/svg/smil/lime.svg
new file mode 100644
index 0000000000..c09c6601e8
--- /dev/null
+++ b/layout/reftests/svg/smil/lime.svg
@@ -0,0 +1,8 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
+ <title>Testcase reference file for generic pass condition</title>
+ <rect width="100%" height="100%" fill="lime"/>
+</svg>
diff --git a/layout/reftests/svg/smil/mapped-attr-long-url-1.svg b/layout/reftests/svg/smil/mapped-attr-long-url-1.svg
new file mode 100644
index 0000000000..7c4c3b66cb
--- /dev/null
+++ b/layout/reftests/svg/smil/mapped-attr-long-url-1.svg
@@ -0,0 +1,13 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <rect height="100%" width="100%" fill="lime" />
+ <rect height="100" width="100" fill="red">
+ <set attributeName="fill" attributeType="XML" dur="indefinite"
+ to="url(#reaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaallyLongURL) transparent"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/mapped-attr-long-url-2.svg b/layout/reftests/svg/smil/mapped-attr-long-url-2.svg
new file mode 100644
index 0000000000..94c0c6ebc2
--- /dev/null
+++ b/layout/reftests/svg/smil/mapped-attr-long-url-2.svg
@@ -0,0 +1,32 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait">
+ <script>
+ window.addEventListener("MozReftestInvalidate", run, false);
+
+ function run() {
+ var svg = document.documentElement;
+ svg.pauseAnimations();
+
+ // Seek to first half of animation
+ svg.setCurrentTime(101);
+
+ // Seek to second half of animation
+ svg.setCurrentTime(103);
+
+ // Take snapshot
+ svg.removeAttribute("class");
+ }
+ </script>
+ <rect height="100%" width="100%" fill="lime" />
+ <rect height="100" width="100" fill="red">
+ <animate attributeName="fill" attributeType="XML" begin="100s" dur="4s"
+ from="url(#another_reaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaallyLongURL) purple"
+ to="url(#reaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaallyLongURL) transparent"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/min-1.svg b/layout/reftests/svg/smil/min-1.svg
new file mode 100644
index 0000000000..6ba576d452
--- /dev/null
+++ b/layout/reftests/svg/smil/min-1.svg
@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(115, true)">
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <!-- Test min behavior
+
+ Set up is as follows:
+ 1. There is a rectangle with a lime fill.
+ 2. A <set> animation (with default fill="none") sets the fill to
+ orange at t=100s.
+ It has a simple duration of 10s and a min duration of 20s.
+ 3. A further <set> animation sets the fill to red when the first
+ animation finishes (using syncbase timing).
+
+ At time t=115s we should still be in the first animation's active
+ interval with its fill mode of 'none' applied which should mean the
+ original lime fill is used. -->
+ <rect width="100%" height="100%" fill="lime">
+ <set attributeName="fill" to="orange" dur="10s" min="20s" begin="100s"
+ id="a"/>
+ <set attributeName="fill" to="red" begin="a.end"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/motion/animateMotion-by-1.svg b/layout/reftests/svg/smil/motion/animateMotion-by-1.svg
new file mode 100644
index 0000000000..072947735e
--- /dev/null
+++ b/layout/reftests/svg/smil/motion/animateMotion-by-1.svg
@@ -0,0 +1,53 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script type="text/javascript">
+ function doTest() {
+ setTimeAndSnapshot(101, true);
+ }
+ window.addEventListener("MozReftestInvalidate", doTest, false);
+ </script>
+
+ <!-- Big green background to match lime.svg -->
+ <rect width="100%" height="100%" fill="lime"/>
+ <!-- Red "workspaces" (should be covered up, if tests pass) -->
+ <rect x="100" y="100" width="100" height="100" fill="red"/>
+ <rect x="100" y="300" width="100" height="100" fill="red"/>
+
+ <!-- FIRST ROW -->
+ <!-- Check that 'by' works at all -->
+ <rect fill="lime" x="0" y="0" width="50" height="50">
+ <animateMotion by="100, 100" begin="100" dur="1" fill="freeze"/>
+ </rect>
+
+ <!-- Check that 'by' is additive w/ 'by' -->
+ <rect fill="lime" x="50" y="50" width="50" height="50">
+ <animateMotion by="60, 75" begin="100" dur="1" fill="freeze"/>
+ <animateMotion by="40, -25" begin="100" dur="1" fill="freeze"/>
+ </rect>
+
+ <!-- SECOND ROW -->
+ <!-- Check that 'by' is additive w/ 'to' -->
+ <rect fill="lime" width="50" height="50">
+ <animateMotion to="50,100" begin="100" dur="1" fill="freeze"/>
+ <animateMotion by="50, 50" begin="100" dur="1" fill="freeze"/>
+ </rect>
+
+ <!-- Check that 'from-to' replaces 'by' -->
+ <rect fill="lime" width="50" height="50">
+ <animateMotion by="500, 500" begin="100" dur="1" fill="freeze"/>
+ <animateMotion from="300,300" to="150,150" begin="100" dur="1" fill="freeze"/>
+ </rect>
+
+ <!-- Other tags -->
+ <foreignObject id="fo" x="0" y="0" width="100" height="50">
+ <div xmlns="http://www.w3.org/1999/xhtml" style="width:100%;height:100%;background-color:lime"/>
+ </foreignObject>
+ <animateMotion xlink:href="#fo" by="100, 300" begin="100" dur="1" fill="freeze"/>
+
+ <svg x="0" y="50" width="100" height="50">
+ <rect width="100" height="50" fill="lime"/>
+ <animateMotion by="100, 300" begin="100" dur="1" fill="freeze"/>
+ </svg>
+</svg>
diff --git a/layout/reftests/svg/smil/motion/animateMotion-by-2.svg b/layout/reftests/svg/smil/motion/animateMotion-by-2.svg
new file mode 100644
index 0000000000..9502828c35
--- /dev/null
+++ b/layout/reftests/svg/smil/motion/animateMotion-by-2.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait" transform="translate(100,0)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script type="text/javascript">
+ function doTest() {
+ setTimeAndSnapshot(101, true);
+ }
+ window.addEventListener("MozReftestInvalidate", doTest, false);
+ </script>
+
+ <animateMotion by="-100, 0" begin="100" dur="1" fill="freeze"/>
+
+ <!-- Big green background to match lime.svg -->
+ <rect width="100%" height="100%" fill="lime"/>
+</svg>
diff --git a/layout/reftests/svg/smil/motion/animateMotion-flattening-1.svg b/layout/reftests/svg/smil/motion/animateMotion-flattening-1.svg
new file mode 100644
index 0000000000..cf3a55523a
--- /dev/null
+++ b/layout/reftests/svg/smil/motion/animateMotion-flattening-1.svg
@@ -0,0 +1,26 @@
+ <svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="100%" height="100%" viewBox="0 0 45 45" preserveAspectRatio="none"
+ class="reftest-wait">
+ <!--
+ Bug 946540. Test that motion paths with inflection points that both lie
+ outside of (0, 1) are flattened correctly.
+
+ We have a lime background and move a red square along a motion path. If
+ the path is not flattened correctly the red square will get stuck at the
+ point where it covers the viewport.
+ -->
+ <script xlink:href="../smil-util.js"/>
+ <script>
+ window.addEventListener("MozReftestInvalidate", function() {
+ setTimeAndSnapshot(110, true);
+ }, false);
+ </script>
+ <!-- Lime background -->
+ <rect width="100%" height="100%" fill="lime"/>
+ <!-- Animated square -->
+ <rect x="-25" y="-25" width="50" height="50" fill="red">
+ <animateMotion calcMode="paced" begin="100s" dur="1s" fill="freeze"
+ path="m0-32c0 25 10 46 22 56 34 28 75 35 102 38"/>
+ </rect>
+ </svg>
diff --git a/layout/reftests/svg/smil/motion/animateMotion-from-to-1.svg b/layout/reftests/svg/smil/motion/animateMotion-from-to-1.svg
new file mode 100644
index 0000000000..065ee36b12
--- /dev/null
+++ b/layout/reftests/svg/smil/motion/animateMotion-from-to-1.svg
@@ -0,0 +1,44 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script type="text/javascript">
+ function doTest() {
+ setTimeAndSnapshot(101, true);
+ }
+ window.addEventListener("MozReftestInvalidate", doTest, false);
+ </script>
+
+ <!-- Big green background to match lime.svg -->
+ <rect width="100%" height="100%" fill="lime"/>
+ <!-- Red "workspace" (should be covered up, if tests pass) -->
+ <rect x="100" y="100" width="100" height="100" fill="red"/>
+
+ <!-- FIRST ROW -->
+ <!-- Check that 'from' gets applied at begin time -->
+ <rect fill="lime" x="0" y="0" width="50" height="50">
+ <animateMotion from="100, 100" to="500, 500" begin="101" dur="1"/>
+ </rect>
+
+ <!-- Check that 'to' gets hit at end time -->
+ <rect fill="lime" x="0" y="0" width="50" height="50">
+ <animateMotion from="200,200" to="150,100" begin="100" dur="1" fill="freeze"/>
+ </rect>
+
+ <!-- SECOND ROW -->
+ <!-- Check that animation effects are removed after end time
+ (note that fill="remove" is default; just specifying it for clarity -->
+ <rect fill="lime" x="100" y="150" width="50" height="50">
+ <animateMotion from="500,500" to="600,600" begin="1000" dur="1" fill="remove"/>
+ </rect>
+ <rect fill="purple" x="-25" y="-25" width="25" height="25">
+ <!-- With the purple rect's x/y offsets, this animateMotion path moves us
+ around the 2nd row, 1st col -->
+ <animateMotion from="125,175" to="150,175" begin="100" dur="1" fill="remove"/>
+ </rect>
+
+ <!-- Check interpolation halfway through animation -->
+ <rect fill="lime" width="50" height="50">
+ <animateMotion from="200,100" to="100,200" begin="100.5" dur="1"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/motion/animateMotion-indefinite-to-1.svg b/layout/reftests/svg/smil/motion/animateMotion-indefinite-to-1.svg
new file mode 100644
index 0000000000..12c62da2c8
--- /dev/null
+++ b/layout/reftests/svg/smil/motion/animateMotion-indefinite-to-1.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <!-- Test that an indefinite to-animation just sticks to the base value for
+ animateMotion. -->
+ <rect width="100%" height="100%" fill="lime"/>
+
+ <rect x="15" y="15" width="100" height="100" fill="red"/>
+ <rect x="15" y="15" width="100" height="100" fill="lime">
+ <animateMotion to="500,500" dur="indefinite"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/motion/animateMotion-indefinite-to-2.svg b/layout/reftests/svg/smil/motion/animateMotion-indefinite-to-2.svg
new file mode 100644
index 0000000000..82f5a61a05
--- /dev/null
+++ b/layout/reftests/svg/smil/motion/animateMotion-indefinite-to-2.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <!-- Test that an indefinite to-animation with discrete calcMode applies
+ the underlying value for the whole time. -->
+ <rect width="100%" height="100%" fill="lime"/>
+
+ <rect x="15" y="15" width="100" height="100" fill="red"/>
+ <rect x="15" y="15" width="100" height="100" fill="lime">
+ <animateMotion to="500,500" dur="indefinite"
+ calcMode="discrete"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/motion/animateMotion-mpath-pathLength-1.svg b/layout/reftests/svg/smil/motion/animateMotion-mpath-pathLength-1.svg
new file mode 100644
index 0000000000..ffb991c1a6
--- /dev/null
+++ b/layout/reftests/svg/smil/motion/animateMotion-mpath-pathLength-1.svg
@@ -0,0 +1,31 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink" class="reftest-wait">
+ <title>Test that pathLength of paths has no effect in animation</title>
+ <defs>
+ <path id="path" pathLength="100" d="M0,0 h400" />
+ </defs>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script type="text/javascript">
+ function doTest() {
+ setTimeAndSnapshot(100.5, true);
+ }
+ window.addEventListener("MozReftestInvalidate", doTest, false);
+ </script>
+ <rect width="100%" height="100%" fill="lime"/>
+
+ <!-- calcMode="linear" -->
+ <rect x="10" y="10" width="100" height="100" fill="red"/>
+ <rect x="-190" y="10" width="100" height="100" fill="lime">
+ <animateMotion begin="100s" dur="1s" keyPoints="0;1" keyTimes="0;1" calcMode="linear">
+ <mpath xlink:href="#path" />
+ </animateMotion>
+ </rect>
+
+ <!-- calcMode="paced" -->
+ <rect x="10" y="110" width="100" height="100" fill="red"/>
+ <rect x="-190" y="110" width="100" height="100" fill="lime">
+ <animateMotion begin="100s" dur="1s">
+ <mpath xlink:href="#path" />
+ </animateMotion>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/motion/animateMotion-mpath-shadow.svg b/layout/reftests/svg/smil/motion/animateMotion-mpath-shadow.svg
new file mode 100644
index 0000000000..d57aa1a29f
--- /dev/null
+++ b/layout/reftests/svg/smil/motion/animateMotion-mpath-shadow.svg
@@ -0,0 +1,34 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink" class="reftest-wait">
+ <title>Test that pathLength works inside a shadow tree</title>
+ <defs>
+ <path id="path" pathLength="100" d="M0,0 h400" />
+ <g id="content">
+ <rect width="100%" height="100%" fill="lime"/>
+
+ <!-- calcMode="linear" -->
+ <rect x="10" y="10" width="100" height="100" fill="red"/>
+ <rect x="-190" y="10" width="100" height="100" fill="lime">
+ <animateMotion begin="100s" dur="1s" keyPoints="0;1" keyTimes="0;1" calcMode="linear">
+ <mpath xlink:href="#path" />
+ </animateMotion>
+ </rect>
+
+ <!-- calcMode="paced" -->
+ <rect x="10" y="110" width="100" height="100" fill="red"/>
+ <rect x="-190" y="110" width="100" height="100" fill="lime">
+ <animateMotion begin="100s" dur="1s">
+ <mpath xlink:href="#path" />
+ </animateMotion>
+ </rect>
+ </g>
+ </defs>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script type="text/javascript">
+ function doTest() {
+ setTimeAndSnapshot(100.5, true);
+ }
+ window.addEventListener("MozReftestInvalidate", doTest, false);
+ </script>
+ <use xlink:href="#content"></use>
+</svg>
diff --git a/layout/reftests/svg/smil/motion/animateMotion-mpath-target-transform-1.svg b/layout/reftests/svg/smil/motion/animateMotion-mpath-target-transform-1.svg
new file mode 100644
index 0000000000..c8f5919b79
--- /dev/null
+++ b/layout/reftests/svg/smil/motion/animateMotion-mpath-target-transform-1.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Test that 'transform' on the &lt;mpath&gt; target has no affect</title>
+ <defs>
+ <path id="path" d="M0,0 L100,100" transform="translate(100,0)"/>
+ </defs>
+ <rect width="100%" height="100%" fill="lime"/>
+ <rect x="10" y="10" width="100" height="100" fill="red"/>
+ <rect x="10" y="10" width="100" height="100" fill="lime">
+ <animateMotion dur="indefinite">
+ <mpath xlink:href="#path"/>
+ </animateMotion>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/motion/animateMotion-mpath-targetChange-1.svg b/layout/reftests/svg/smil/motion/animateMotion-mpath-targetChange-1.svg
new file mode 100644
index 0000000000..b2a408ca62
--- /dev/null
+++ b/layout/reftests/svg/smil/motion/animateMotion-mpath-targetChange-1.svg
@@ -0,0 +1,151 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait">
+ <style>
+ .background { fill: lime }
+ .workspace { fill: red }
+ .test { fill: lime }
+ </style>
+ <defs>
+ <!-- 'Dummy' path -->
+ <path id="moveFarAway" d="M300,300 h0"/>
+
+ <path id="moveToUpperLeft" d="M100,100 h0"/>
+
+ <path id="pathWhoseDAttrChanges" d="M360,360 h0"/>
+
+ <!-- The first of these two elems w/ same ID should be used. -->
+ <path id="moveToMiddleLeft" d="M100,150 h0"/>
+ <path id="moveToMiddleLeft" d="M350,350 h0"/>
+
+ <!-- The first of these two elems w/ same ID initially wins, but then
+ it gets removed via script. -->
+ <path id="moveToMiddleCenter" d="M340,340 h0"/>
+ <path id="moveToMiddleCenter" d="M150,150 h0"/>
+
+ <!-- This elem doesn't do what its id would suggest, but we'll use JS to
+ add an earlier elem with the same ID that *does* do what it says. -->
+ <path id="moveToMiddleRight" d="M330,330 h0"/>
+
+ <path id="moveToLowerLeft" d="M100,200 h0"/>
+ <path id="moveToLowerCenter" d="M150,200 h0"/>
+
+ </defs>
+
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script type="text/javascript">
+ const SVGNS = "http://www.w3.org/2000/svg";
+ const XLINKNS = "http://www.w3.org/1999/xlink";
+
+
+ function insertPathElem(aPathId, aPathSpec) {
+ var newPath = document.createElementNS(SVGNS, "path");
+ newPath.setAttribute("id", aPathId);
+ newPath.setAttribute("d", aPathSpec);
+
+ // Insert new path into defs
+ var defsElem = document.getElementsByTagName("defs")[0];
+ defsElem.insertBefore(newPath, defsElem.firstChild);
+ }
+
+ function doTest() {
+ // Seek already, so we'll have sampled the initial 'stale' state
+ document.documentElement.setCurrentTime(1);
+
+ // Make tweaks
+ var mpathToModify = document.getElementById("modifyMyTarget");
+ mpathToModify.setAttributeNS(XLINKNS, "href", "#moveToUpperLeft");
+
+ var mpathWhoseHrefNeedsClearing = document.getElementById("unsetMyTarget");
+ mpathWhoseHrefNeedsClearing.removeAttributeNS(XLINKNS, "href");
+
+ var pathToTweak = document.getElementById("pathWhoseDAttrChanges");
+ pathToTweak.setAttribute("d", "M200 100 h0");
+
+ var mpathToDelete = document.getElementById("removeMe");
+ mpathToDelete.parentNode.removeChild(mpathToDelete);
+
+ var pathToDelete = document.getElementById("moveToMiddleCenter");
+ pathToDelete.parentNode.removeChild(pathToDelete);
+
+ insertPathElem("moveToMiddleRight", "M200,150 h0");
+ insertPathElem("moveToLowerRight", "M200,200 h0");
+
+ setTimeAndSnapshot(1, true);
+ }
+ window.addEventListener("MozReftestInvalidate", doTest, false);
+ </script>
+
+ <!-- Big green background to match lime.svg -->
+ <rect class="background" width="100%" height="100%" />
+ <!-- Red "workspace" (should be covered up, if tests pass) -->
+ <rect class="workspace" x="100" y="100" width="150" height="150"/>
+
+ <!-- FIRST ROW: Test behavior... -->
+ <!-- ...when mpath's 'xlink:href' attr is modified. -->
+ <rect class="test" x="0" y="0" width="50" height="50">
+ <animateMotion begin="1" dur="1" fill="freeze">
+ <mpath id="modifyMyTarget" xlink:href="#moveFarAway"/>
+ </animateMotion>
+ </rect>
+
+ <!-- ...when mpath's 'xlink:href' is unset. -->
+ <rect class="test" x="150" y="100" width="50" height="50">
+ <animateMotion begin="1" dur="1" fill="freeze">
+ <mpath id="unsetMyTarget" xlink:href="#moveFarAway"/>
+ </animateMotion>
+ </rect>
+
+ <!-- ...when the target-path's "d" attr is modified. -->
+ <rect class="test" x="0" y="0" width="50" height="50">
+ <animateMotion begin="1" dur="1" fill="freeze">
+ <mpath xlink:href="#pathWhoseDAttrChanges"/>
+ </animateMotion>
+ </rect>
+
+ <!-- SECOND ROW: Test behavior... -->
+ <!-- ...when there are two paths with same ID (first should win) -->
+ <rect class="test" x="0" y="0" width="50" height="50">
+ <animateMotion begin="1" dur="1" fill="freeze">
+ <mpath xlink:href="#moveToMiddleLeft"/>
+ </animateMotion>
+ </rect>
+
+ <!-- ...when there are two paths with same ID, and the first is removed. -->
+ <rect class="test" x="0" y="0" width="50" height="50">
+ <animateMotion begin="1" dur="1" fill="freeze">
+ <mpath xlink:href="#moveToMiddleCenter"/>
+ </animateMotion>
+ </rect>
+
+ <!-- ...when an earlier path is added with our target ID. -->
+ <rect class="test" x="0" y="0" width="50" height="50">
+ <animateMotion begin="1" dur="1" fill="freeze">
+ <mpath xlink:href="#moveToMiddleRight"/>
+ </animateMotion>
+ </rect>
+
+ <!-- THIRD ROW: Test behavior... -->
+ <!-- ...when there are two mpath children (first should win). -->
+ <rect class="test" x="0" y="0" width="50" height="50">
+ <animateMotion begin="1" dur="1" fill="freeze">
+ <mpath xlink:href="#moveToLowerLeft"/>
+ <mpath xlink:href="#moveFarAway"/>
+ </animateMotion>
+ </rect>
+
+ <!-- ...when there are two mpath children, and the first is removed. -->
+ <rect class="test" x="0" y="0" width="50" height="50">
+ <animateMotion begin="1" dur="1" fill="freeze">
+ <mpath id="removeMe" xlink:href="#moveFarAway"/>
+ <mpath xlink:href="#moveToLowerCenter"/>
+ </animateMotion>
+ </rect>
+ <!-- ...when there's an mpath child that initially matches nothing, until
+ a node with the right ID is inserted into the DOM. -->
+ <rect class="test" x="0" y="0" width="50" height="50">
+ <animateMotion begin="1" dur="1" fill="freeze">
+ <mpath xlink:href="#moveToLowerRight"/>
+ </animateMotion>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/motion/animateMotion-rotate-1a.svg b/layout/reftests/svg/smil/motion/animateMotion-rotate-1a.svg
new file mode 100644
index 0000000000..414a6c718b
--- /dev/null
+++ b/layout/reftests/svg/smil/motion/animateMotion-rotate-1a.svg
@@ -0,0 +1,63 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait">
+ <style>
+ .background { fill: lime }
+ .workspace { fill: red }
+ .test { fill: lime }
+ .filler { fill: lime }
+ </style>
+
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script type="text/javascript">
+ function doTest() {
+ setTimeAndSnapshot(101, true);
+ }
+ window.addEventListener("MozReftestInvalidate", doTest, false);
+ </script>
+
+ <!-- Big green background to match lime.svg -->
+ <rect class="background" width="100%" height="100%" />
+ <!-- Red "workspace" (should be covered up, if tests pass) -->
+ <rect class="workspace" x="100" y="100" width="100" height="100"/>
+
+ <!-- FIRST ROW -->
+ <!-- Check that 'rotate' gets applied at begin time -->
+ <g>
+ <animateMotion from="150, 100" to="500, 500" rotate="90"
+ begin="101" dur="1"/>
+ <rect class="test" x="0" y="0" width="20" height="50"/>
+ <rect class="test" x="0" y="0" width="50" height="20"/>
+ </g>
+ <rect class="filler" x="100" y="120" width="30" height="30"/>
+
+ <!-- Check that 'rotate' gets applied at end time -->
+ <g>
+ <animateMotion from="600, 700" to="200, 150" rotate="180" begin="100"
+ dur="1" fill="freeze"/>
+ <rect class="test" x="0" y="0" width="20" height="50"/>
+ <rect class="test" x="0" y="0" width="50" height="20"/>
+ </g>
+ <rect class="filler" x="150" y="100" width="30" height="30"/>
+
+ <!-- SECOND ROW -->
+ <!-- Check that rotate combines with existing rotate -->
+ <g transform="rotate(90)">
+ <animateMotion from="150,200" to="600,600" rotate="90"
+ begin="101" dur="1"/>
+ <rect class="test" x="0" y="0" width="20" height="50"/>
+ <rect class="test" x="0" y="0" width="50" height="20"/>
+ </g>
+ <rect class="filler" x="100" y="150" width="30" height="30"/>
+
+ <!-- Check additivity of <animateMotion> "rotate" adds -->
+ <g>
+ <animateMotion from="100,100" to="100,200" rotate="90"
+ begin="100.5" dur="1"/>
+ <animateMotion by="100,-200" rotate="90"
+ begin="100.5" dur="1"/>
+ <rect class="test" x="0" y="0" width="20" height="50"/>
+ <rect class="test" x="0" y="0" width="50" height="20"/>
+ </g>
+ <rect class="filler" x="150" y="150" width="30" height="30"/>
+</svg>
diff --git a/layout/reftests/svg/smil/motion/animateMotion-rotate-1b.svg b/layout/reftests/svg/smil/motion/animateMotion-rotate-1b.svg
new file mode 100644
index 0000000000..8c4287d33e
--- /dev/null
+++ b/layout/reftests/svg/smil/motion/animateMotion-rotate-1b.svg
@@ -0,0 +1,63 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait">
+ <style>
+ .background { fill: lime }
+ .workspace { fill: red }
+ .test { fill: lime }
+ .filler { fill: lime }
+ </style>
+
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script type="text/javascript">
+ function doTest() {
+ setTimeAndSnapshot(101, true);
+ }
+ window.addEventListener("MozReftestInvalidate", doTest, false);
+ </script>
+
+ <!-- Big green background to match lime.svg -->
+ <rect class="background" width="100%" height="100%" />
+ <!-- Red "workspace" (should be covered up, if tests pass) -->
+ <rect class="workspace" x="100" y="100" width="100" height="100"/>
+
+ <!-- FIRST ROW -->
+ <!-- Check that 'rotate' gets applied at begin time -->
+ <g>
+ <animateMotion from="150, 100" to="500, 500" rotate="100grad"
+ begin="101" dur="1"/>
+ <rect class="test" x="0" y="0" width="20" height="50"/>
+ <rect class="test" x="0" y="0" width="50" height="20"/>
+ </g>
+ <rect class="filler" x="100" y="120" width="30" height="30"/>
+
+ <!-- Check that 'rotate' gets applied at end time -->
+ <g>
+ <animateMotion from="600, 700" to="200, 150" rotate="200grad" begin="100"
+ dur="1" fill="freeze"/>
+ <rect class="test" x="0" y="0" width="20" height="50"/>
+ <rect class="test" x="0" y="0" width="50" height="20"/>
+ </g>
+ <rect class="filler" x="150" y="100" width="30" height="30"/>
+
+ <!-- SECOND ROW -->
+ <!-- Check that rotate combines with existing rotate -->
+ <g transform="rotate(90)">
+ <animateMotion from="150,200" to="600,600" rotate="100grad"
+ begin="101" dur="1"/>
+ <rect class="test" x="0" y="0" width="20" height="50"/>
+ <rect class="test" x="0" y="0" width="50" height="20"/>
+ </g>
+ <rect class="filler" x="100" y="150" width="30" height="30"/>
+
+ <!-- Check additivity of <animateMotion> "rotate" adds -->
+ <g>
+ <animateMotion from="100,100" to="100,200" rotate="100grad"
+ begin="100.5" dur="1"/>
+ <animateMotion by="100,-200" rotate="100grad"
+ begin="100.5" dur="1"/>
+ <rect class="test" x="0" y="0" width="20" height="50"/>
+ <rect class="test" x="0" y="0" width="50" height="20"/>
+ </g>
+ <rect class="filler" x="150" y="150" width="30" height="30"/>
+</svg>
diff --git a/layout/reftests/svg/smil/motion/animateMotion-rotate-2.svg b/layout/reftests/svg/smil/motion/animateMotion-rotate-2.svg
new file mode 100644
index 0000000000..7f6fcc7cf5
--- /dev/null
+++ b/layout/reftests/svg/smil/motion/animateMotion-rotate-2.svg
@@ -0,0 +1,52 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait">
+ <!-- Tests for rotate="auto" and "auto-reverse" -->
+ <!-- The idea here is to create positioned red "holes" in the lime
+ background, and then hopefully use paused <animateMotion> elements to
+ position other elements exactly on top of the hole. -->
+ <style>
+ .background { fill: lime }
+ .hole { color: red }
+ .testBegin { color: purple }
+ .testEnd { color: orange }
+ .mask { color: lime }
+ </style>
+ <defs>
+ <!-- A 'pin' marker, just offscreen, pointing directly down at 0,0 -->
+ <!-- NOTE: The lime 2.83px-wide stroke is a hack to get around "seams" in
+ SVG when redrawing the same non-pixel-aligned shape on top of itself
+ in different colors. 2.83 is just over 2*sqrt(2), sqrt(2) being the
+ maximum distance from a path that antialiasing of square pixels can
+ cause the path to affect. -->
+ <path id="marker" d="m0,0 l-10,-30 c-5,-20 25,-20 20,0 z"
+ style="fill: currentColor; stroke: lime; stroke-width: 2.83px"/>
+ </defs>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script type="text/javascript">
+ function doTest() {
+ setTimeAndSnapshot(101, true);
+ }
+ window.addEventListener("MozReftestInvalidate", doTest, false);
+ </script>
+
+ <!-- Big green background to match lime.svg -->
+ <rect class="background" width="100%" height="100%" />
+ <g transform="translate(50,50)">
+ <!-- Here's the hole -->
+ <use xlink:href="#marker" class="hole"
+ transform="translate(20,20) rotate(45)"/>
+
+ <!-- And here's a stack of elements animated with 'animateMotion' that
+ should end up there. -->
+ <use xlink:href="#marker" class="testBegin">
+ <animateMotion from="20,20" to="40,40" rotate="auto" begin="101s" dur="1s"/>
+ </use>
+ <use xlink:href="#marker" class="testEnd">
+ <animateMotion by="20,20" rotate="auto" begin="100" dur="1s" fill="freeze"/>
+ </use>
+ <use xlink:href="#marker" class="mask">
+ <animateMotion by="40,40" rotate="auto" begin="100s" dur="2s"/>
+ </use>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/smil/motion/animateMotion-to-overridden-1.svg b/layout/reftests/svg/smil/motion/animateMotion-to-overridden-1.svg
new file mode 100644
index 0000000000..2c6179640a
--- /dev/null
+++ b/layout/reftests/svg/smil/motion/animateMotion-to-overridden-1.svg
@@ -0,0 +1,61 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script type="text/javascript">
+ function doTest() {
+ setTimeAndSnapshot(101, true);
+ }
+ window.addEventListener("MozReftestInvalidate", doTest, false);
+ </script>
+
+ <!-- Big green background to match lime.svg -->
+ <rect fill="lime" width="100%" height="100%" />
+
+ <!-- In the following pairs of rects, the only pairwise differences are the
+ fill-color and the presence of the "to" attribute on the animateMotion
+ element. "to" shouldn't have any effect in these cases, since it has
+ lower priority than "values," "path," and "mpath". So in each case, the
+ lime rect should cover up the red rect at all times. -->
+
+ <!-- Single-point path specified with "values" attribute: -->
+ <g transform="translate(0,0)">
+ <rect width="20" height="20" fill="red">
+ <animateMotion values="20,0" dur="2" begin="100"/>
+ </rect>
+ <rect width="20" height="20" fill="lime">
+ <animateMotion values="20,0" dur="2" to="-50,0" begin="100"/>
+ </rect>
+ </g>
+
+ <!-- Multi-point path specified with "values" attribute: -->
+ <g transform="translate(0,30)">
+ <rect width="20" height="20" fill="red">
+ <animateMotion values="20,0; 80,0" dur="2" begin="100"/>
+ </rect>
+ <rect width="20" height="20" fill="lime">
+ <animateMotion values="20,0; 80,0" dur="2" to="-50,0" begin="100"/>
+ </rect>
+ </g>
+
+ <!-- Path specified with "path" attribute: -->
+ <g transform="translate(0,60)">
+ <rect width="20" height="20" fill="red">
+ <animateMotion path="m0,0 h100" dur="2" begin="100"/>
+ </rect>
+ <rect width="20" height="20" fill="lime">
+ <animateMotion path="m0,0 h100" dur="2" to="-50,0" begin="100"/>
+ </rect>
+ </g>
+
+ <!-- Path specified with "mpath" subelement: -->
+ <path id="p" d="m0,0 h100"/>
+ <g transform="translate(0,90)">
+ <rect width="20" height="20" fill="red">
+ <animateMotion dur="2" begin="100"><mpath xlink:href="#p"/></animateMotion>
+ </rect>
+ <rect width="20" height="20" fill="lime">
+ <animateMotion dur="2" to="-50,0" begin="100"><mpath xlink:href="#p"/></animateMotion>
+ </rect>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/smil/motion/animateMotion-values-linear-1-ref.svg b/layout/reftests/svg/smil/motion/animateMotion-values-linear-1-ref.svg
new file mode 100644
index 0000000000..fbb06fcf13
--- /dev/null
+++ b/layout/reftests/svg/smil/motion/animateMotion-values-linear-1-ref.svg
@@ -0,0 +1,38 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <!-- First row -->
+ <g transform="translate(20,20)">
+ <g>
+ <rect width="15px" height="15px"/>
+ </g>
+ <g transform="translate(50,0)">
+ <rect x="0" y="10" width="15px" height="15px"/>
+ </g>
+ <g transform="translate(100,0)">
+ <rect x="9" y="10" width="15px" height="15px"/>
+ </g>
+ </g>
+ <!-- Second row -->
+ <g transform="translate(20,70)">
+ <g>
+ <rect x="22.5" y="10" width="15px" height="15px"/>
+ </g>
+ <g transform="translate(50,0)">
+ <rect x="29.7" y="10" width="15px" height="15px"/>
+ </g>
+ <g transform="translate(100,0)">
+ <rect x="45" y="30" width="15px" height="15px"/>
+ </g>
+ </g>
+ <!-- Third row -->
+ <g transform="translate(20,120)">
+ <g>
+ <rect x="48" y="34" width="15px" height="15px"/>
+ </g>
+ <g transform="translate(50,0)">
+ <rect x="60" y="50" width="15px" height="15px"/>
+ </g>
+ <g transform="translate(100,0)">
+ <rect x="60" y="50" width="15px" height="15px"/>
+ </g>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/smil/motion/animateMotion-values-linear-1.svg b/layout/reftests/svg/smil/motion/animateMotion-values-linear-1.svg
new file mode 100644
index 0000000000..6c4721cca0
--- /dev/null
+++ b/layout/reftests/svg/smil/motion/animateMotion-values-linear-1.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="go()">
+ <!-- Tests for <animateMotion> with 'values' attribute -->
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "values" : "0,10; 30,10; 60,50",
+ "calcMode" : "linear" };
+ testAnimatedRectGrid("animateMotion", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/motion/animateMotion-values-paced-1-ref.svg b/layout/reftests/svg/smil/motion/animateMotion-values-paced-1-ref.svg
new file mode 100644
index 0000000000..d933fb8381
--- /dev/null
+++ b/layout/reftests/svg/smil/motion/animateMotion-values-paced-1-ref.svg
@@ -0,0 +1,38 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <!-- First row -->
+ <g transform="translate(20,20)">
+ <g>
+ <rect width="15px" height="15px"/>
+ </g>
+ <g transform="translate(50,0)">
+ <rect x="0" y="10" width="15px" height="15px"/>
+ </g>
+ <g transform="translate(100,0)">
+ <rect x="12" y="10" width="15px" height="15px"/>
+ </g>
+ </g>
+ <!-- Second row -->
+ <g transform="translate(20,70)">
+ <g>
+ <rect x="30" y="10" width="15px" height="15px"/>
+ </g>
+ <g transform="translate(50,0)">
+ <rect x="35.76" y="17.68" width="15px" height="15px"/>
+ </g>
+ <g transform="translate(100,0)">
+ <rect x="48" y="34" width="15px" height="15px"/>
+ </g>
+ </g>
+ <!-- Third row -->
+ <g transform="translate(20,120)">
+ <g>
+ <rect x="50.4" y="37.2" width="15px" height="15px"/>
+ </g>
+ <g transform="translate(50,0)">
+ <rect x="60" y="50" width="15px" height="15px"/>
+ </g>
+ <g transform="translate(100,0)">
+ <rect x="60" y="50" width="15px" height="15px"/>
+ </g>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/smil/motion/animateMotion-values-paced-1a.svg b/layout/reftests/svg/smil/motion/animateMotion-values-paced-1a.svg
new file mode 100644
index 0000000000..737574cae5
--- /dev/null
+++ b/layout/reftests/svg/smil/motion/animateMotion-values-paced-1a.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="go()">
+ <!-- Tests for <animateMotion> with 'values' attribute -->
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "values" : "0,10; 30,10; 60,50"};
+ testAnimatedRectGrid("animateMotion", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/motion/animateMotion-values-paced-1b.svg b/layout/reftests/svg/smil/motion/animateMotion-values-paced-1b.svg
new file mode 100644
index 0000000000..9d72807d9e
--- /dev/null
+++ b/layout/reftests/svg/smil/motion/animateMotion-values-paced-1b.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="go()">
+ <!-- Tests for <animateMotion> with 'values' attribute -->
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "values" : "0,10; 30,10; 60,50",
+ "calcMode" : "paced" };
+ testAnimatedRectGrid("animateMotion", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/motion/lime.svg b/layout/reftests/svg/smil/motion/lime.svg
new file mode 100644
index 0000000000..c09c6601e8
--- /dev/null
+++ b/layout/reftests/svg/smil/motion/lime.svg
@@ -0,0 +1,8 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
+ <title>Testcase reference file for generic pass condition</title>
+ <rect width="100%" height="100%" fill="lime"/>
+</svg>
diff --git a/layout/reftests/svg/smil/motion/reftest.list b/layout/reftests/svg/smil/motion/reftest.list
new file mode 100644
index 0000000000..9163259736
--- /dev/null
+++ b/layout/reftests/svg/smil/motion/reftest.list
@@ -0,0 +1,22 @@
+# Tests related to SVG Animation (using SMIL), focusing on the animateMotion
+# element.
+
+== animateMotion-by-1.svg lime.svg
+== animateMotion-by-2.svg lime.svg
+fuzzy(0-15,0-1600) == animateMotion-flattening-1.svg lime.svg # bug 951541
+== animateMotion-from-to-1.svg lime.svg
+== animateMotion-indefinite-to-1.svg lime.svg
+== animateMotion-indefinite-to-2.svg lime.svg
+== animateMotion-rotate-1a.svg lime.svg
+== animateMotion-rotate-1b.svg lime.svg
+fuzzy(0-1,0-40) == animateMotion-rotate-2.svg lime.svg
+== animateMotion-to-overridden-1.svg lime.svg
+fuzzy(0-4,0-15) == animateMotion-values-linear-1.svg animateMotion-values-linear-1-ref.svg
+fuzzy(0-5,0-91) == animateMotion-values-paced-1a.svg animateMotion-values-paced-1-ref.svg
+fuzzy(0-5,0-91) == animateMotion-values-paced-1b.svg animateMotion-values-paced-1-ref.svg
+
+# Tests involving <mpath> sub-element
+== animateMotion-mpath-pathLength-1.svg lime.svg
+== animateMotion-mpath-targetChange-1.svg lime.svg
+== animateMotion-mpath-target-transform-1.svg lime.svg
+== animateMotion-mpath-shadow.svg lime.svg
diff --git a/layout/reftests/svg/smil/pause/init-pause-1-ref.svg b/layout/reftests/svg/smil/pause/init-pause-1-ref.svg
new file mode 100644
index 0000000000..7d9aa5082f
--- /dev/null
+++ b/layout/reftests/svg/smil/pause/init-pause-1-ref.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <circle cx="150" cy="50" r="30" fill="blue"/>
+ <!-- Tick mark to show where the circle should be -->
+ <path d="M150 40v20" stroke="green"/>
+</svg>
diff --git a/layout/reftests/svg/smil/pause/init-pause-1.svg b/layout/reftests/svg/smil/pause/init-pause-1.svg
new file mode 100644
index 0000000000..a352dd8345
--- /dev/null
+++ b/layout/reftests/svg/smil/pause/init-pause-1.svg
@@ -0,0 +1,49 @@
+<!--
+
+ Tests various aspects of initial pause behaviour including getCurrentTime and
+ setCurrentTime. In particular, we test the behaviour described in
+
+http://www.w3.org/2003/01/REC-SVG11-20030114-errata#getCurrentTime_setCurrentTime_undefined_before_document_timeline_begin
+
+ -->
+<svg xmlns="http://www.w3.org/2000/svg"
+ class="reftest-wait"
+ onload="unpause()">
+ <script type="text/ecmascript"><![CDATA[
+ // If we try to update the DOM as we go we very occasionally run into timing
+ // issues that produce false positives for this test. So instead we just set
+ // this flag and update the DOM at the end of the test.
+ var ok = true;
+
+ function assert(condition) {
+ ok = ok & condition;
+ }
+
+ // === Test the state before the document starts ===
+ document.documentElement.setCurrentTime(2);
+ assert(document.documentElement.getCurrentTime() == 0);
+ assert(!document.documentElement.animationsPaused());
+ document.documentElement.pauseAnimations();
+
+ function unpause() {
+ // === Test the state after that the document has started ===
+ assert(document.documentElement.getCurrentTime() == 2);
+ assert(document.documentElement.animationsPaused());
+
+ if (!ok) {
+ document.getElementById('wrong').style.visibility = 'visible';
+ }
+
+ document.documentElement.removeAttribute("class");
+ }
+ ]]></script>
+ <circle cx="50" cy="50" r="30" fill="blue">
+ <animate attributeName="cx" attributeType="XML"
+ to="250" begin="1s" dur="2s" fill="freeze"/>
+ </circle>
+ <!-- Tick mark to show where the circle should be -->
+ <path d="M150 40v20" stroke="green"/>
+ <!-- Marker to show if something is wrong in the DOM -->
+ <text fill="red" stroke="none" font-size="60" x="125" y="70"
+ font-family="sans-serif" id="wrong" visibility="hidden">X</text>
+</svg>
diff --git a/layout/reftests/svg/smil/pause/reftest.list b/layout/reftests/svg/smil/pause/reftest.list
new file mode 100644
index 0000000000..a4af69c477
--- /dev/null
+++ b/layout/reftests/svg/smil/pause/reftest.list
@@ -0,0 +1,2 @@
+# Tests for pause behaviour
+== init-pause-1.svg init-pause-1-ref.svg
diff --git a/layout/reftests/svg/smil/reftest.list b/layout/reftests/svg/smil/reftest.list
new file mode 100644
index 0000000000..16469b30a5
--- /dev/null
+++ b/layout/reftests/svg/smil/reftest.list
@@ -0,0 +1,297 @@
+# Tests related to SVG Animation (using SMIL)
+# XXXdholbert Partial list of features that still need reftests:
+# - calcMode=discrete, paced, spline
+# - Stacking of additive=[sum|replace] animations
+# - Stacking of additive animations, w/ "hybrid case of to-animation"
+# - Repeating animations, w/ & w/out accumulate=sum
+# - Interpolation between different units (e.g. font-size attr, 3em to 50px)
+# - Correct behavior for em/ex font-size animations, when context changes
+# (with change happening 1. when completed/frozen and 2. when animating)
+# - CSS properties
+# - DOM interfaces:
+# * Section 6.2 of http://www.w3.org/TR/smil-animation/
+# * Animation-related bits of http://www.w3.org/TR/SVG/struct.html#DOMInterfaces
+# - Some more "anim-retarget" tests, with attributeType being changed/cleared.
+# (after we've got support for SVG/SMIL animation of CSS properties)
+
+# animateMotion tests
+include motion/reftest.list
+
+# animation sort-order tests
+include sort/reftest.list
+
+# set tests
+include set/reftest.list
+
+# style tests
+include style/reftest.list
+
+# animateTransform tests
+include transform/reftest.list
+
+# time-dependent tests
+# XXXdholbert Disabling this class of tests for now, because most of them
+# can & should be converted so they don't depend on specific timeout values.
+# (to prevent sporadic failures due to nondeterminism)
+# include timed/reftest.list
+
+# time container tests
+include container/reftest.list
+
+# repeat tests
+include repeat/reftest.list
+
+# restart tests
+include restart/reftest.list
+
+# pause tests
+include pause/reftest.list
+
+# syncbase tests
+include syncbase/reftest.list
+
+# seek tests
+include seek/reftest.list
+
+# event tests
+include event/reftest.list
+
+# General tests
+== anim-discrete-values-1.svg anim-standard-ref.svg
+== anim-discrete-values-2.svg anim-standard-ref.svg
+== anim-discrete-values-3.svg anim-standard-ref.svg
+== anim-discrete-replace-sum-1.svg anim-standard-ref.svg
+== anim-discrete-sum-none-1.svg anim-standard-ref.svg
+== anim-discrete-sum-sum-1.svg anim-standard-ref.svg
+
+== anim-discrete-to-1.svg anim-standard-ref.svg
+== anim-discrete-to-2.svg anim-standard-ref.svg
+== anim-discrete-to-3.svg anim-standard-ref.svg
+== anim-discrete-to-4.svg anim-standard-ref.svg
+
+== anim-indefinite-to-1.svg anim-standard-ref.svg
+== anim-indefinite-to-2.svg anim-standard-ref.svg
+== anim-indefinite-to-3.svg anim-standard-ref.svg
+== anim-indefinite-to-4.svg anim-standard-ref.svg
+
+fails == anim-fillcolor-1.svg anim-standard-ref.svg # bug 436296
+== anim-fillopacity-1none.svg anim-standard-ref.svg
+== anim-fillopacity-1css.svg anim-standard-ref.svg
+== anim-fillopacity-1xml.svg anim-standard-ref.svg
+
+fuzzy(0-1,0-3600) == anim-opacity-01.svg lime.svg
+
+== anim-height-done-1a.svg anim-standard-ref.svg
+== anim-height-done-1b.svg anim-standard-ref.svg
+== anim-height-done-2.svg lime.svg
+== anim-height-interp-1.svg anim-height-interp-1-ref.svg
+== anim-height-interp-2.svg anim-height-interp-2-ref.svg
+== anim-height-interp-3.svg anim-height-interp-3-ref.svg
+== anim-height-interp-4.svg anim-height-interp-4-ref.svg
+== anim-height-interp-5.svg anim-height-interp-5-ref.svg
+== anim-height-interp-6.svg anim-height-interp-6-ref.svg
+
+# check conditional processing
+== anim-conditions-01.svg lime.svg
+== anim-conditions-02.svg lime.svg
+
+# animate some <length> attributes:
+== anim-filter-primitive-size-01.svg lime.svg
+== anim-filter-size-01.svg lime.svg
+== anim-length-reset-01.svg lime.svg
+== anim-nonpixel-length-reset-01.svg lime.svg
+== anim-use-length-01.svg lime.svg
+== anim-use-length-02.svg lime.svg
+
+# animate some <number> attributes:
+== anim-feComponentTransfer-01.svg lime.svg
+== anim-feDistantLight-01.svg anim-feDistantLight-01-ref.svg
+== anim-feOffset-01.svg lime.svg
+== anim-feSpotLight-01.svg anim-feSpotLight-01-ref.svg
+== anim-offset-01.svg lime.svg
+== anim-pathLength-01.svg anim-pathLength-01-ref.svg
+
+# animate some <number-optional-number> attributes:
+fuzzy(0-1,0-600) == anim-feGaussianBlur-01.svg lime.svg
+
+# animate some <integer> attributes:
+== anim-feTurbulence-numOctaves-01.svg anim-feTurbulence-numOctaves-01-ref.svg
+
+# animate some <integer-optional-integer> attributes:
+== anim-feConvolveMatrix-order-01.svg anim-feConvolveMatrix-order-01-ref.svg
+
+# animate some <angle> attributes:
+== anim-marker-orient-01.svg lime.svg
+# The test fails intermittently if this pref is enabled, see bug 1768650.
+pref(gfx.webrender.svg-shapes,false) == anim-marker-orient-02.svg lime.svg
+
+#animate points list:
+== anim-polygon-points-01.svg anim-polygon-points-01-ref.svg
+== anim-polyline-points-01.svg anim-polyline-points-01-ref.svg
+
+# animate path data:
+== anim-path-d-01.svg anim-path-d-01-ref.svg
+
+# animate some enumeration attributes:
+== anim-feComposite-operator-01.svg lime.svg
+== anim-filter-filterUnits-01.svg lime.svg
+
+# animate some boolean attributes:
+== anim-feConvolveMatrix-preserveAlpha-01.svg lime.svg
+
+# animate some viewBox attributes
+fuzzy-if(Android,0-4,0-1) == anim-svg-viewBox-01.svg lime.svg
+== anim-svg-viewBox-02.svg lime.svg
+== anim-svg-viewBox-03.svg lime.svg
+== anim-view-01.svg#view lime.svg
+
+# animate some preserveAspectRatio attributes
+== anim-feImage-preserveAspectRatio-01.svg lime.svg
+== anim-svg-preserveAspectRatio-01.svg lime.svg
+
+# animate some string attributes:
+== anim-filter-href-01.svg lime.svg
+== anim-gradient-href-01.svg lime.svg
+== anim-image-href-01.svg lime.svg
+== anim-pattern-href-01.svg lime.svg
+== anim-use-href-01.svg lime.svg
+
+# animate the class attribute
+== anim-class-01.svg lime.svg
+== anim-class-02.svg lime.svg
+== anim-class-03.svg lime.svg
+== anim-class-04.svg anim-class-04-ref.svg
+
+# animate with some paint server values
+== anim-paintserver-1.svg anim-paintserver-1-ref.svg
+
+# animate attributes on text content children
+== anim-text-attr-01.svg anim-text-attr-01-ref.svg
+
+# animate where the base value is non-interpolatable but will be replaced anyway
+== anim-fill-overpaintserver-1.svg lime.svg
+== anim-fill-overpaintserver-2.svg lime.svg
+
+# animate where we fallback from 'additive' animation to non-additive
+== anim-additive-fallback-1.svg anim-standard-ref.svg
+
+== anim-remove-1.svg anim-standard-ref.svg
+== anim-remove-2.svg anim-standard-ref.svg
+== anim-remove-3.svg anim-standard-ref.svg
+== anim-remove-4.svg anim-standard-ref.svg
+== anim-remove-5.svg anim-standard-ref.svg
+== anim-remove-6.svg anim-standard-ref.svg
+== anim-remove-7.svg anim-standard-ref.svg
+== anim-remove-8css.svg anim-standard-ref.svg
+== anim-remove-8xml.svg anim-standard-ref.svg
+== anim-remove-9.svg anim-standard-ref.svg
+== anim-retarget-1.svg anim-standard-ref.svg
+== anim-retarget-2.svg anim-standard-ref.svg
+== anim-retarget-3.svg anim-standard-ref.svg
+== anim-retarget-4.svg anim-standard-ref.svg
+== anim-retarget-5.svg anim-standard-ref.svg
+== anim-retarget-6.svg anim-standard-ref.svg
+== anim-retarget-7.svg anim-standard-ref.svg
+== anim-retarget-8.svg anim-standard-ref.svg
+
+fails == anim-strokecolor-1.svg anim-standard-ref.svg # bug 436296
+== anim-strokewidth-1xml.svg anim-standard-ref.svg
+
+== anim-targethref-1.svg anim-standard-ref.svg
+== anim-targethref-2.svg anim-standard-ref.svg
+== anim-targethref-3.svg anim-standard-ref.svg
+== anim-targethref-4.svg anim-standard-ref.svg
+== anim-targethref-5.svg anim-standard-ref.svg
+== anim-targethref-6.svg anim-standard-ref.svg
+== anim-targethref-7.svg anim-standard-ref.svg
+== anim-targethref-8.svg anim-standard-ref.svg
+== anim-targethref-9.svg anim-standard-ref.svg
+== anim-targethref-10.svg anim-standard-ref.svg
+
+== anim-text-rotate-01.svg anim-text-rotate-01-ref.svg
+== anim-feFuncR-tableValues-01.svg anim-feFuncR-tableValues-01-ref.svg
+
+skip == anim-text-x-y-dx-dy-01.svg anim-text-x-y-dx-dy-01-ref.svg # bug 579588
+
+== anim-width-done-1a.svg anim-standard-ref.svg
+== anim-width-done-1b.svg anim-standard-ref.svg
+
+== anim-x-done-1a.svg anim-standard-ref.svg
+== anim-x-done-1b.svg anim-standard-ref.svg
+== anim-x-interp-1.svg anim-x-interp-1-ref.svg
+== anim-x-interp-2.svg anim-x-interp-2-ref.svg
+== anim-x-interp-3.svg anim-x-interp-3-ref.svg
+== anim-x-interp-4.svg anim-x-interp-4-ref.svg
+== anim-x-interp-5.svg anim-x-interp-5-ref.svg
+== anim-x-interp-6.svg anim-x-interp-6-ref.svg
+
+== anim-y-done-1a.svg anim-standard-ref.svg
+== anim-y-done-1b.svg anim-standard-ref.svg
+== anim-y-interp-1.svg anim-y-interp-1-ref.svg
+== anim-y-interp-2.svg anim-y-interp-2-ref.svg
+== anim-y-interp-3.svg anim-y-interp-3-ref.svg
+== anim-y-interp-4.svg anim-y-interp-4-ref.svg
+== anim-y-interp-5.svg anim-y-interp-5-ref.svg
+== anim-y-interp-6.svg anim-y-interp-6-ref.svg
+
+# Test we don't rely on HasAttr to see if an attribute has been set
+== anim-rect-rxry-1.svg anim-rect-rxry-1-ref.svg
+fuzzy(0-1,0-350) == anim-pattern-attr-presence-01.svg anim-pattern-attr-presence-01-ref.svg
+fails == anim-pattern-attr-presence-02.svg anim-pattern-attr-presence-02-ref.svg
+# ^ bug 621651
+fuzzy-if(cocoaWidget&&layersGPUAccelerated,0-1,0-2) == anim-gradient-attr-presence-01.svg anim-gradient-attr-presence-01-ref.svg
+
+== api-sanity-1.svg lime.svg
+
+== freeze-applied-late-1.svg anim-standard-ref.svg
+== freeze-applied-late-2.svg anim-standard-ref.svg
+== freeze-applied-late-3.svg anim-standard-ref.svg
+== freeze-applied-late-4.svg anim-standard-ref.svg
+== frozen-to-anim-1.svg lime.svg
+
+== inactivate-with-active-unchanged-1.svg anim-standard-ref.svg
+== inactivate-with-active-unchanged-2.svg anim-standard-ref.svg
+
+== mapped-attr-long-url-1.svg lime.svg
+== mapped-attr-long-url-2.svg lime.svg
+
+== min-1.svg lime.svg
+
+== shadow-dom-01.html lime.svg
+
+== smil-transitions-interaction-1a.svg lime.svg
+== smil-transitions-interaction-1b.svg lime.svg
+== smil-transitions-interaction-2a.svg lime.svg
+== smil-transitions-interaction-2b.svg lime.svg
+== smil-transitions-interaction-3a.svg lime.svg
+== smil-transitions-interaction-3b.svg lime.svg
+== smil-transitions-interaction-4a.svg lime.svg
+== smil-transitions-interaction-4b.svg lime.svg
+
+# Test filtering of excessive times
+== filtered-instance-time-1.svg anim-standard-ref.svg
+
+# Animation tests disable reduceTimerPrecision because they use a screenshot
+# mechanism that relies on performance.now(), and on low precision that can be
+# finnicky.
+
+# Test animation using defs element
+pref(privacy.reduceTimerPrecision,false) == anim-defs-gradient-property.svg lime.svg
+pref(privacy.reduceTimerPrecision,false) == anim-defs-gradient-attribute.svg lime.svg
+pref(privacy.reduceTimerPrecision,false) == anim-defs-fill.svg lime.svg
+pref(privacy.reduceTimerPrecision,false) == anim-defs-width.svg lime.svg
+
+# Test animation that changes 'display' attribute
+pref(privacy.reduceTimerPrecision,false) == anim-display.svg lime.svg
+pref(privacy.reduceTimerPrecision,false) == anim-display-in-g-element.svg lime.svg
+
+# Test animation that change 'display' style value to 'none'
+== anim-change-display-none-for-ancestor-elem.html lime.html
+== anim-change-display-none-for-target-elem.html lime.html
+== anim-change-display-none-for-dynamically-appended-elem.html lime.html
+== anim-change-display-block-for-dynamically-appended-elem.html anim-standard-ref.html
+
+fuzzy(0-31,0-308) == anim-clipPath-viewBox.svg anim-clipPath-viewBox-ref.svg
+
+# Test animations for overflow.
+== anim-overflow-shorthand.svg anim-overflow-shorthand-ref.svg
diff --git a/layout/reftests/svg/smil/repeat/green-box-ref.svg b/layout/reftests/svg/smil/repeat/green-box-ref.svg
new file mode 100644
index 0000000000..120941444a
--- /dev/null
+++ b/layout/reftests/svg/smil/repeat/green-box-ref.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <rect width="100" height="100" fill="green"/>
+</svg>
diff --git a/layout/reftests/svg/smil/repeat/indefinite-repeat-1.svg b/layout/reftests/svg/smil/repeat/indefinite-repeat-1.svg
new file mode 100644
index 0000000000..5283736bdb
--- /dev/null
+++ b/layout/reftests/svg/smil/repeat/indefinite-repeat-1.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(5)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <rect width="100" height="100" fill="red">
+ <set attributeName="fill" to="green" dur="1s" repeatDur="indefinite"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/repeat/init-repeat-1-ref.svg b/layout/reftests/svg/smil/repeat/init-repeat-1-ref.svg
new file mode 100644
index 0000000000..88af1199fd
--- /dev/null
+++ b/layout/reftests/svg/smil/repeat/init-repeat-1-ref.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <g transform="translate(50 50)">
+ <circle r="40" style="fill: yellow; stroke: black; stroke-width: 1"/>
+ <path d="M0 -10v20" stroke="blue"/>
+ <path d="M100 -10v20" stroke="blue"/>
+ <path d="M200 -10v20" stroke="blue"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/smil/repeat/init-repeat-1.svg b/layout/reftests/svg/smil/repeat/init-repeat-1.svg
new file mode 100644
index 0000000000..7481fbcba8
--- /dev/null
+++ b/layout/reftests/svg/smil/repeat/init-repeat-1.svg
@@ -0,0 +1,47 @@
+<!--
+ The following tests an anomaly in the SMIL Animation spec.
+
+ SMILANIM 3.6.8 says:
+
+ Thus the strict definition of the first acceptable interval for the element
+ is the first interval that ends after the document begins.
+
+ This is then demonstrated in pseudocode.
+
+ However, it is contradicted by a statement just before the first that says:
+
+ The element has one or more intervals defined that begin and end before the
+ document begins (before 0). These are filtered out of the model.
+
+ So there is some ambiguity about intervals that end at time zero. However, the
+ first statement seems more authorative ("the strict definition") and the
+ second statement does not explicitly say that intervals that end at t=0 are
+ not filtered. Furthermore, the pseudocode is in agreement with the first
+ statement so we conclude that if an interval finishes at time zero it is not
+ an acceptable interval and is filtered out.
+
+ The following animation sets up such an interval, that, based on its
+ repeatCount has an active duration of 1s, producing an interval of (-1s, 0s).
+ Therefore this interval should be filtered out and no animation effect should
+ be produced. The circle should remain at position 0 (the first marker). If the
+ interval is not correctly filtered out it will be at position 100 (the second
+ marker).
+
+ We include this test as a regression test so that no one is tempted to "fix"
+ this behaviour.
+
+ Note that this behaviour persists even in SMIL 3 (including the ambiguity
+ noted above).
+ See http://www.w3.org/TR/SMIL3/smil-timing.html#Timing-BeginEnd-LC-Start
+ -->
+<svg xmlns="http://www.w3.org/2000/svg">
+ <g transform="translate(50 50)">
+ <circle r="40" style="fill: yellow; stroke: black; stroke-width: 1">
+ <animate attributeName="cx" attributeType="XML" fill="freeze"
+ values="0; 200" dur="2s" begin="-1s" repeatCount="0.5"/>
+ </circle>
+ <path d="M0 -10v20" stroke="blue"/>
+ <path d="M100 -10v20" stroke="blue"/>
+ <path d="M200 -10v20" stroke="blue"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/smil/repeat/reftest.list b/layout/reftests/svg/smil/repeat/reftest.list
new file mode 100644
index 0000000000..9249500c7c
--- /dev/null
+++ b/layout/reftests/svg/smil/repeat/reftest.list
@@ -0,0 +1,3 @@
+# Tests for repeat behaviour
+== indefinite-repeat-1.svg green-box-ref.svg
+== init-repeat-1.svg init-repeat-1-ref.svg
diff --git a/layout/reftests/svg/smil/restart/green-box-ref.svg b/layout/reftests/svg/smil/restart/green-box-ref.svg
new file mode 100644
index 0000000000..120941444a
--- /dev/null
+++ b/layout/reftests/svg/smil/restart/green-box-ref.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <rect width="100" height="100" fill="green"/>
+</svg>
diff --git a/layout/reftests/svg/smil/restart/reftest.list b/layout/reftests/svg/smil/restart/reftest.list
new file mode 100644
index 0000000000..98ed6d4b13
--- /dev/null
+++ b/layout/reftests/svg/smil/restart/reftest.list
@@ -0,0 +1,8 @@
+# Tests for restart behaviour
+== reset-1.svg reset-1-ref.svg
+== reset-2.svg green-box-ref.svg
+== reset-3.svg green-box-ref.svg
+== reset-4.svg green-box-ref.svg
+# reset-5.svg is no longer valid and has been removed
+== reset-6.svg green-box-ref.svg
+== reset-7.svg green-box-ref.svg
diff --git a/layout/reftests/svg/smil/restart/reset-1-ref.svg b/layout/reftests/svg/smil/restart/reset-1-ref.svg
new file mode 100644
index 0000000000..2e85bda91d
--- /dev/null
+++ b/layout/reftests/svg/smil/restart/reset-1-ref.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <circle cx="150" cy="50" r="30" fill="blue"/>
+ <circle cx="150" cy="120" r="30" fill="blue"/>
+ <circle cx="150" cy="190" r="30" fill="blue"/>
+ <circle cx="50" cy="260" r="30" fill="blue"/>
+</svg>
diff --git a/layout/reftests/svg/smil/restart/reset-1.svg b/layout/reftests/svg/smil/restart/reset-1.svg
new file mode 100644
index 0000000000..d33c3b38a1
--- /dev/null
+++ b/layout/reftests/svg/smil/restart/reset-1.svg
@@ -0,0 +1,84 @@
+<!--
+ This tests reset behaviour (SMILANIM 3.3.7).
+
+ Reset behaviour is invoked when an element restarts. Some instance times
+ (DOM calls, event-based instance times etc.) should be cleared on a reset.
+ Other instance times should not. This test build up the following timegraph:
+
+ |...| |...| |...| |...|
+ ^ ^ ^ ^
+ A B C D
+
+ Instance times A and C are created by the begin spec and are offset time
+ values which should NOT be cleared on a reset, e.g. begin="1s; 3s"
+
+ Instance times B and D are created by DOM calls and SHOULD be cleared on
+ a reset.
+
+ A reset will occur when the interval beginning with begin instance time
+ B begins. At this time a reset is performed and only instance time D should
+ be cleared. That is, the animation should play THREE (3) times, not four.
+
+ We would like to inspect the result at each of the intervals. To do this
+ using a reftest we duplicate the animate four-times and adjust the timing so
+ that at the animation sample time we are mid-way through each of the four
+ intervals.
+
+ -->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="addInstanceTimes()">
+ <script type="text/ecmascript"><![CDATA[
+ function addInstanceTimes() {
+ document.documentElement.setCurrentTime(0);
+ var animate1 = document.getElementById('animate1');
+ animate1.beginElementAt(10);
+ animate1.beginElementAt(4);
+ var animate2 = document.getElementById('animate2');
+ animate2.beginElementAt(1.8);
+ animate2.beginElementAt(3.8);
+ var animate3 = document.getElementById('animate3');
+ animate3.beginElementAt(1.2);
+ animate3.beginElementAt(2.4);
+ var animate4 = document.getElementById('animate4');
+ animate4.beginElementAt(0.6);
+ animate4.beginElementAt(1.8);
+ setTimeAndSnapshot(2, true);
+ }
+ ]]></script>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <!--
+ Animation #1: Should be mid-way through first interval at t=2
+ Set up intervals: 1-3 4-6 7-9 10-12
+ -->
+ <circle cx="50" cy="50" r="30" fill="blue">
+ <animate attributeName="cx" attributeType="XML"
+ to="250" begin="1s; 7s" dur="2s" fill="remove" id="animate1"/>
+ </circle>
+ <!--
+ Animation #2: Should be mid-way through second interval at t=2
+ Set up intervals: 0.8-1.2 1.8-2.2 2.8-3.2 3.8-4.2
+ -->
+ <circle cx="50" cy="120" r="30" fill="blue">
+ <animate attributeName="cx" attributeType="XML"
+ to="250" begin="0.8; 2.8" dur="0.4s" fill="remove" id="animate2"/>
+ </circle>
+ <!--
+ Animation #3: Should be mid-way through third interval at t=2
+ Set up intervals: 0.6-1.0 1.2-1.6 1.8-2.2 2.4-2.8
+ -->
+ <circle cx="50" cy="190" r="30" fill="blue">
+ <animate attributeName="cx" attributeType="XML"
+ to="250" begin="0.6; 1.8" dur="0.4s" fill="remove" id="animate3"/>
+ </circle>
+ <!--
+ Animation #4: Would be mid-way through fourth interval at t=2 if the
+ instance time wasn't cleared
+ Set up intervals: 0.1-0.5 0.6-1.0 1.2-1.6 1.8-2.2
+ -->
+ <circle cx="50" cy="260" r="30" fill="blue">
+ <animate attributeName="cx" attributeType="XML"
+ to="250" begin="0.1; 1.2" dur="0.4s" fill="remove" id="animate4"/>
+ </circle>
+</svg>
diff --git a/layout/reftests/svg/smil/restart/reset-2.svg b/layout/reftests/svg/smil/restart/reset-2.svg
new file mode 100644
index 0000000000..04b4b1bfff
--- /dev/null
+++ b/layout/reftests/svg/smil/restart/reset-2.svg
@@ -0,0 +1,33 @@
+<!--
+ We want to test that reset behaviour is actually applied when an animation
+ restarts and not before.
+
+ Therefore we build up the following graph:
+
+ |..| |..|
+ 1 2 3 4
+
+ But at t=2.5s we add a begin instance at t=3.9s. This should be cleared when
+ we restart at t=3s and hence the animation should no longer be playing at
+ t=4s.
+ -->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="addInstanceTimes()">
+ <script type="text/ecmascript"><![CDATA[
+ function addInstanceTimes() {
+ var svg = document.documentElement;
+ svg.pauseAnimations();
+ svg.setCurrentTime(2.5);
+ var anim = document.getElementById('anim');
+ anim.beginElementAt(1.4);
+ setTimeAndSnapshot(4.0, true);
+ }
+ ]]></script>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <rect width="100" height="100" fill="green">
+ <set attributeName="fill" attributeType="CSS"
+ to="red" begin="1s; 3s" dur="1s" fill="remove" id="anim"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/restart/reset-3.svg b/layout/reftests/svg/smil/restart/reset-3.svg
new file mode 100644
index 0000000000..e4f44b29c0
--- /dev/null
+++ b/layout/reftests/svg/smil/restart/reset-3.svg
@@ -0,0 +1,39 @@
+<!--
+ A variation on reset-2.svg.
+
+ Perhaps surprisingly, restart behaviour only applies for the second interval
+ onwards. This is inconsistent but it's the spec
+ (see http://lists.w3.org/Archives/Public/www-smil/2009OctDec/0004.html)
+
+ In this test we ensure that times are NOT cleared upon starting the first
+ interval.
+
+ Therefore we build up the following graph:
+
+ |..|
+ 1 2
+
+ But at t=0.5s we add a begin instance at t=1.5s. This should NOT be cleared
+ when we start at t=1s and hence the animation should STILL be playing
+ at t=2.0s.
+ -->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="addInstanceTimes()">
+ <script type="text/ecmascript"><![CDATA[
+ function addInstanceTimes() {
+ var svg = document.documentElement;
+ svg.pauseAnimations();
+ svg.setCurrentTime(0.5);
+ var anim = document.getElementById('anim');
+ anim.beginElementAt(1);
+ setTimeAndSnapshot(2.0, true);
+ }
+ ]]></script>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <rect width="100" height="100" fill="red">
+ <set attributeName="fill" attributeType="CSS"
+ to="green" begin="1s" dur="1s" fill="remove" id="anim"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/restart/reset-4.svg b/layout/reftests/svg/smil/restart/reset-4.svg
new file mode 100644
index 0000000000..320a8245a4
--- /dev/null
+++ b/layout/reftests/svg/smil/restart/reset-4.svg
@@ -0,0 +1,27 @@
+<!--
+ According to the SMIL pseudocode if no end attribute is specified the end of
+ an interval is just the active end. This, however, effectively makes
+ endElement useless on animations which have no end attribute specified. This
+ seems counter-intuitive, so this test checks that endElement still takes
+ effect on animation without an end attribute.
+ -->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="addInstanceTimes()">
+ <script type="text/ecmascript"><![CDATA[
+ function addInstanceTimes() {
+ var svg = document.documentElement;
+ svg.pauseAnimations();
+ svg.setCurrentTime(1.0);
+ var anim = document.getElementById('anim');
+ anim.endElementAt(0.5);
+ setTimeAndSnapshot(1.5, true);
+ }
+ ]]></script>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <rect width="100" height="100" fill="green">
+ <set attributeName="fill" attributeType="CSS"
+ to="red" begin="1s" dur="1s" fill="remove" id="anim"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/restart/reset-6.svg b/layout/reftests/svg/smil/restart/reset-6.svg
new file mode 100644
index 0000000000..a0fe33ae2d
--- /dev/null
+++ b/layout/reftests/svg/smil/restart/reset-6.svg
@@ -0,0 +1,58 @@
+<!--
+ SMIL3 5.4.3, "Resetting element state" has:
+
+ Any instance times associated with past Event-values, Repeat-values,
+ Accesskey-values or added via DOM method calls are removed from the
+ dependent begin and end instance times lists. In effect, all events and DOM
+ methods calls in the past are cleared. This does not apply to an instance
+ time that defines the begin of the current interval.
+
+ In this test we have the following scenario:
+
+ <set begin="1s" end="2s" dur="1s" ... />
+
+ giving us:
+
+ |...|
+ 1 2
+
+ Then at t=1.5s we have the following DOM calls
+
+ anim.beginElementAt(1.5);
+ anim.endElementAt(2);
+
+ potentially giving us:
+
+ |...| | |
+ ^
+ 1 2 3 3.5
+
+ At t=2s we'll go to look for the next interval and construct one from 3s-3.5s.
+ We should apply restart behaviour at t=3s meaning we'll reset instance times
+ generated by DOM calls in the past however we'll keep the begin instance time
+ at 3s since it defines the beginning of the (now) current interval. Sticking
+ to the letter of the spec quoted above however, we'll end up clearing the end
+ instance at 3.5s. Yet in this case we should use the active end (t=4s) since
+ there's no end attribute specified.
+ -->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="addInstanceTimes()">
+ <script type="text/ecmascript"><![CDATA[
+ function addInstanceTimes() {
+ var svg = document.documentElement;
+ svg.pauseAnimations();
+ svg.setCurrentTime(1.5);
+ var anim = document.getElementById('anim');
+ anim.beginElementAt(1.5);
+ anim.endElementAt(2);
+ setTimeAndSnapshot(3.7, true);
+ }
+ ]]></script>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <rect width="100" height="100" fill="red">
+ <set attributeName="fill" attributeType="CSS"
+ to="green" begin="1s" dur="1s" fill="remove" id="anim"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/restart/reset-7.svg b/layout/reftests/svg/smil/restart/reset-7.svg
new file mode 100644
index 0000000000..4614b81198
--- /dev/null
+++ b/layout/reftests/svg/smil/restart/reset-7.svg
@@ -0,0 +1,25 @@
+<!--
+ A variation on reset-6.svg but this time since the animation has an end
+ specification the second interval SHOULD be deleted.
+ -->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="addInstanceTimes()">
+ <script type="text/ecmascript"><![CDATA[
+ function addInstanceTimes() {
+ var svg = document.documentElement;
+ svg.pauseAnimations();
+ svg.setCurrentTime(1.5);
+ var anim = document.getElementById('anim');
+ anim.beginElementAt(1.5);
+ anim.endElementAt(2.5);
+ setTimeAndSnapshot(3.2, true);
+ }
+ ]]></script>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <rect width="100" height="100" fill="green">
+ <set attributeName="fill" attributeType="CSS"
+ to="red" begin="1s" end="2s" dur="1s" fill="remove" id="anim"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/seek/anim-standard-ref.svg b/layout/reftests/svg/smil/seek/anim-standard-ref.svg
new file mode 100644
index 0000000000..39f37ae6d1
--- /dev/null
+++ b/layout/reftests/svg/smil/seek/anim-standard-ref.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <rect x="15" y="15" width="200" height="200" fill="blue"/>
+</svg>
diff --git a/layout/reftests/svg/smil/seek/anim-standard-ref.xhtml b/layout/reftests/svg/smil/seek/anim-standard-ref.xhtml
new file mode 100644
index 0000000000..a50c83bd0e
--- /dev/null
+++ b/layout/reftests/svg/smil/seek/anim-standard-ref.xhtml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<body>
+<svg xmlns="http://www.w3.org/2000/svg" width="230px" height="230px">
+ <rect x="15" y="15" width="200" height="200" fill="blue"/>
+</svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/smil/seek/anim-x-seek-1a.svg b/layout/reftests/svg/smil/seek/anim-x-seek-1a.svg
new file mode 100644
index 0000000000..76c4f098ab
--- /dev/null
+++ b/layout/reftests/svg/smil/seek/anim-x-seek-1a.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ class="reftest-wait"
+ onload="go()">
+ <script type="text/javascript">
+ function go() {
+ // Pause, seek to middle of animation, and then seek to exactly 1 duration
+ // before the animation begins (to make sure animation effects are cleared)
+ var svg = document.documentElement;
+ svg.pauseAnimations();
+ svg.setCurrentTime(3);
+ svg.setCurrentTime(0);
+ svg.removeAttribute("class");
+ }
+ </script>
+ <rect x="15" y="15" width="200" height="200" fill="blue">
+ <set attributeName="x" to="100" begin="2s" dur="2s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/seek/anim-x-seek-1b.svg b/layout/reftests/svg/smil/seek/anim-x-seek-1b.svg
new file mode 100644
index 0000000000..76c4f098ab
--- /dev/null
+++ b/layout/reftests/svg/smil/seek/anim-x-seek-1b.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ class="reftest-wait"
+ onload="go()">
+ <script type="text/javascript">
+ function go() {
+ // Pause, seek to middle of animation, and then seek to exactly 1 duration
+ // before the animation begins (to make sure animation effects are cleared)
+ var svg = document.documentElement;
+ svg.pauseAnimations();
+ svg.setCurrentTime(3);
+ svg.setCurrentTime(0);
+ svg.removeAttribute("class");
+ }
+ </script>
+ <rect x="15" y="15" width="200" height="200" fill="blue">
+ <set attributeName="x" to="100" begin="2s" dur="2s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/seek/anim-x-seek-1c.svg b/layout/reftests/svg/smil/seek/anim-x-seek-1c.svg
new file mode 100644
index 0000000000..95fd19bb4b
--- /dev/null
+++ b/layout/reftests/svg/smil/seek/anim-x-seek-1c.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ class="reftest-wait"
+ onload="go()">
+ <script type="text/javascript">
+ function go() {
+ // Pause, seek to middle of animation, and then seek to the exact ending
+ // of the animation (to make sure animation effects are cleared)
+ var svg = document.documentElement;
+ svg.pauseAnimations();
+ svg.setCurrentTime(3);
+ svg.setCurrentTime(4);
+ svg.removeAttribute("class");
+ }
+ </script>
+ <rect x="15" y="15" width="200" height="200" fill="blue">
+ <set attributeName="x" to="100" begin="2s" dur="2s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/seek/anim-x-seek-1d.svg b/layout/reftests/svg/smil/seek/anim-x-seek-1d.svg
new file mode 100644
index 0000000000..bb0edc7474
--- /dev/null
+++ b/layout/reftests/svg/smil/seek/anim-x-seek-1d.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ class="reftest-wait"
+ onload="go()">
+ <script type="text/javascript">
+ function go() {
+ // Pause, seek to middle of animation, and then seek to a time after
+ // the animation is over (to make sure animation effects are cleared)
+ var svg = document.documentElement;
+ svg.pauseAnimations();
+ svg.setCurrentTime(3);
+ svg.setCurrentTime(5);
+ svg.removeAttribute("class");
+ }
+ </script>
+ <rect x="15" y="15" width="200" height="200" fill="blue">
+ <set attributeName="x" to="100" begin="2s" dur="2s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/seek/anim-x-seek-1e.svg b/layout/reftests/svg/smil/seek/anim-x-seek-1e.svg
new file mode 100644
index 0000000000..b8175fb4cd
--- /dev/null
+++ b/layout/reftests/svg/smil/seek/anim-x-seek-1e.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ class="reftest-wait"
+ onload="go()">
+ <script type="text/javascript">
+ function go() {
+ // Test a backwards seek covering many intervals
+ var svg = document.documentElement;
+ svg.pauseAnimations();
+ svg.setCurrentTime(15);
+ svg.setCurrentTime(3.5);
+ svg.removeAttribute("class");
+ }
+ </script>
+ <rect x="100" y="15" width="200" height="200" fill="blue">
+ <set attributeName="x" to="15" begin="1s; 3s; 5s; 7s; 9s; 11s" dur="1s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/seek/anim-x-seek-cross-container-1a.xhtml b/layout/reftests/svg/smil/seek/anim-x-seek-cross-container-1a.xhtml
new file mode 100644
index 0000000000..4e7cc65222
--- /dev/null
+++ b/layout/reftests/svg/smil/seek/anim-x-seek-cross-container-1a.xhtml
@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait">
+<!--
+ Test backwards seeking with cross-time container dependencies.
+ -->
+<head>
+<script>
+function snapshot()
+{
+ var a = document.getElementById("svg-a");
+ var b = document.getElementById("svg-b");
+ a.pauseAnimations();
+ b.pauseAnimations();
+ a.setCurrentTime(0);
+ b.setCurrentTime(2); // 'b' has now begun and 'a' has a begin time of '-1s' in
+ // a's container time
+ b.setCurrentTime(1); // Perform a backwards seek--'a' should now have a begin
+ // time of '0s' in container time
+ a.setCurrentTime(1); // So seeking forward 1s should get us to the middle of
+ // the interval
+ document.documentElement.removeAttribute("class");
+}
+</script>
+</head>
+<body onload="snapshot()">
+<svg xmlns="http://www.w3.org/2000/svg" width="230px" height="230px" id="svg-a">
+ <rect x="100" y="15" width="200" height="200" fill="blue">
+ <animate attributeName="x" from="0" to="30" begin="b.begin" dur="2s"/>
+ </rect>
+</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="230px" height="230px" id="svg-b">
+ <set attributeName="y" to="0" begin="1s" id="b"/>
+</svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1a.svg b/layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1a.svg
new file mode 100644
index 0000000000..75a782ab52
--- /dev/null
+++ b/layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1a.svg
@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ class="reftest-wait"
+ onload="go()">
+ <script type="text/javascript">
+ function go() {
+ // Perform a backwards seek within an interval whose begin point is
+ // generated by a dynamic event (to make sure such times are preserved when
+ // we rewind).
+ var svg = document.documentElement;
+ svg.pauseAnimations();
+ document.getElementById('a').beginElementAt(2);
+ svg.setCurrentTime(3);
+ svg.setCurrentTime(2.5);
+ svg.removeAttribute("class");
+ }
+ </script>
+ <rect x="100" y="15" width="200" height="200" fill="blue">
+ <set attributeName="x" to="15" begin="indefinite" dur="2s" id="a"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1b.svg b/layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1b.svg
new file mode 100644
index 0000000000..e17b49edf2
--- /dev/null
+++ b/layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1b.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ class="reftest-wait"
+ onload="go()">
+ <script type="text/javascript">
+ function go() {
+ // Check that dynamic end times are preserved during a backwards seek
+ var svg = document.documentElement;
+ svg.pauseAnimations();
+ svg.setCurrentTime(3);
+ document.getElementById('a').endElement();
+ svg.setCurrentTime(4);
+ svg.setCurrentTime(3);
+ svg.removeAttribute("class");
+ }
+ </script>
+ <rect x="15" y="15" width="200" height="200" fill="blue">
+ <set attributeName="x" to="100" begin="2s" dur="2s" id="a"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1c.svg b/layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1c.svg
new file mode 100644
index 0000000000..0a015bf4b3
--- /dev/null
+++ b/layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1c.svg
@@ -0,0 +1,31 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ class="reftest-wait"
+ onload="go()">
+ <script type="text/javascript">
+ function go() {
+ // Check that dynamic times are preserved even from filtering
+ var svg = document.documentElement;
+ var a = document.getElementById('a');
+ svg.pauseAnimations();
+ // Generate a series of intervals with dynamic begin points
+ svg.setCurrentTime(1);
+ a.beginElement();
+ svg.setCurrentTime(3);
+ a.beginElement();
+ svg.setCurrentTime(5);
+ a.beginElement();
+ svg.setCurrentTime(7);
+ a.beginElement();
+ svg.setCurrentTime(9);
+ a.beginElement();
+ svg.setCurrentTime(11);
+ // By now, the first interval will have been filtered but test that we have
+ // preserved the instance time in order to reconstruct it
+ svg.setCurrentTime(1.5);
+ svg.removeAttribute("class");
+ }
+ </script>
+ <rect x="100" y="15" width="200" height="200" fill="blue">
+ <set attributeName="x" to="15" begin="indefinite" dur="1s" id="a"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1d.svg b/layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1d.svg
new file mode 100644
index 0000000000..e02ecd9ff9
--- /dev/null
+++ b/layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1d.svg
@@ -0,0 +1,30 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ class="reftest-wait"
+ onload="go()">
+ <script type="text/javascript">
+ function go() {
+ // Check that whilst processing past intervals reset does not clear dynamic
+ // instance times of future intervals
+ var svg = document.documentElement;
+ var a = document.getElementById('a');
+ svg.pauseAnimations();
+ // Generate a series of intervals with dynamic begin points
+ svg.setCurrentTime(1);
+ a.beginElement();
+ svg.setCurrentTime(3);
+ a.beginElement();
+ svg.setCurrentTime(5);
+ a.beginElement();
+ svg.setCurrentTime(7);
+ a.beginElement();
+ svg.setCurrentTime(5.5); // Backwards seek will cause us to rebuild the
+ // world but in the process we should not clear the
+ // dynamic instance times for future intervals on
+ // each restart
+ svg.removeAttribute("class");
+ }
+ </script>
+ <rect x="100" y="15" width="200" height="200" fill="blue">
+ <set attributeName="x" to="15" begin="indefinite" dur="1s" id="a"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1e.svg b/layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1e.svg
new file mode 100644
index 0000000000..87743e9dd6
--- /dev/null
+++ b/layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1e.svg
@@ -0,0 +1,23 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ class="reftest-wait"
+ onload="go()">
+ <script type="text/javascript">
+ function go() {
+ // Check that dynamic times are reset during a forwards seek
+ var svg = document.documentElement;
+ var a = document.getElementById('a');
+ svg.pauseAnimations();
+ svg.setCurrentTime(1); // First interval 1s-2s
+ a.beginElement();
+ svg.setCurrentTime(2);
+ a.beginElementAt(1); // Add instance time t=3s
+ a.beginElementAt(3); // Add instance time t=5s -- should be cleared during
+ // the seek when we process the restart at t=3s
+ svg.setCurrentTime(5); // Hence at t=5s we should be inactive
+ svg.removeAttribute("class");
+ }
+ </script>
+ <rect x="15" y="15" width="200" height="200" fill="blue">
+ <set attributeName="x" to="100" begin="indefinite" dur="1s" id="a"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1f.svg b/layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1f.svg
new file mode 100644
index 0000000000..9164c2ca6a
--- /dev/null
+++ b/layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1f.svg
@@ -0,0 +1,30 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ class="reftest-wait"
+ onload="go()">
+ <script type="text/javascript">
+ function go() {
+ // Check that dynamic times are reset during a backwards seek
+ var svg = document.documentElement;
+ var a = document.getElementById('a');
+ svg.pauseAnimations();
+ svg.setCurrentTime(1);
+ a.beginElement(); // First interval: 1s-2s
+ a.endElementAt(1);
+ a.beginElementAt(2); // Second interval: 3s-indef
+ svg.setCurrentTime(5);
+ a.endElementAt(1); // Add end time at 6s
+ svg.setCurrentTime(4); // Perform backwards seek from 5s->4s
+ svg.setCurrentTime(6); // End time at 6s should have been cleared
+ // and we should still be active
+ // (See SMIL 3.0, 'Hyperlinks and timing' which has:
+ // Resolved end times associated with events,
+ // Repeat-values, Accesskey-values or added via DOM
+ // method calls are cleared when seeking to time
+ // earlier than the resolved end time.
+ svg.removeAttribute("class");
+ }
+ </script>
+ <rect x="100" y="15" width="200" height="200" fill="blue">
+ <set attributeName="x" to="15" begin="indefinite" dur="indefinite" id="a"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1g.svg b/layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1g.svg
new file mode 100644
index 0000000000..43a0d4e907
--- /dev/null
+++ b/layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1g.svg
@@ -0,0 +1,23 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ class="reftest-wait"
+ onload="go()">
+ <script type="text/javascript">
+ function go() {
+ // Check that dynamic interval end times are reset during a backwards seek
+ var svg = document.documentElement;
+ var a = document.getElementById('a');
+ svg.pauseAnimations();
+ svg.setCurrentTime(1);
+ a.beginElement(); // First interval 1s-2s
+ a.endElementAt(1);
+ svg.setCurrentTime(3);
+ svg.setCurrentTime(1.5); // Backwards seek to 1.5s -- instance time at t=2s
+ // should be reset
+ svg.setCurrentTime(3); // Should still be active
+ svg.removeAttribute("class");
+ }
+ </script>
+ <rect x="100" y="15" width="200" height="200" fill="blue">
+ <set attributeName="x" to="15" begin="indefinite" dur="indefinite" id="a"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1h.svg b/layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1h.svg
new file mode 100644
index 0000000000..a00cefdf48
--- /dev/null
+++ b/layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1h.svg
@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ class="reftest-wait"
+ onload="go()">
+ <script type="text/javascript">
+ function go() {
+ // Check that dynamic times are not prematurely reset during a forwards seek
+ var svg = document.documentElement;
+ var a = document.getElementById('a');
+ svg.pauseAnimations();
+ svg.setCurrentTime(1);
+ a.beginElement(); // Interval: 1s-3s
+ a.endElementAt(2);
+ svg.setCurrentTime(2); // Should not cause end time at t=3s to be reset
+ svg.setCurrentTime(3); // Should no longer be active
+ svg.removeAttribute("class");
+ }
+ </script>
+ <rect x="15" y="15" width="200" height="200" fill="blue">
+ <set attributeName="x" to="100" begin="indefinite" dur="indefinite" id="a"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1i.svg b/layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1i.svg
new file mode 100644
index 0000000000..9f19eefcd6
--- /dev/null
+++ b/layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1i.svg
@@ -0,0 +1,31 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ class="reftest-wait"
+ onload="go()">
+ <script type="text/javascript">
+ function go() {
+ // Check that past dynamic times are still preserved after a backwards seek.
+ // (The converse, that now-future dynamic times are reset during a backwards
+ // seek is covered by anim-x-seek-dynamic-1g.svg)
+ var svg = document.documentElement;
+ var a = document.getElementById('a');
+ svg.pauseAnimations();
+ // Generate a series of intervals with dynamic begin points
+ svg.setCurrentTime(1);
+ a.beginElement();
+ svg.setCurrentTime(3);
+ a.beginElement();
+ svg.setCurrentTime(5);
+ a.beginElement();
+ svg.setCurrentTime(7);
+ a.beginElement();
+ svg.setCurrentTime(5); // Backwards seek (1) -- at this point we'll do
+ // a reset but old dynamic times (e.g. t=1s) should
+ // be preserved
+ svg.setCurrentTime(1); // Backwards seek (2)
+ svg.removeAttribute("class");
+ }
+ </script>
+ <rect x="100" y="15" width="200" height="200" fill="blue">
+ <set attributeName="x" to="15" begin="indefinite" dur="1s" id="a"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/seek/anim-x-seek-negative-1a.svg b/layout/reftests/svg/smil/seek/anim-x-seek-negative-1a.svg
new file mode 100644
index 0000000000..5e04739a0e
--- /dev/null
+++ b/layout/reftests/svg/smil/seek/anim-x-seek-negative-1a.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ class="reftest-wait"
+ onload="go()">
+ <script type="text/javascript">
+ function go() {
+ // A negative seek should be clamped to 0
+ var svg = document.documentElement;
+ svg.pauseAnimations();
+ svg.setCurrentTime(-1);
+ svg.removeAttribute("class");
+ }
+ </script>
+ <rect x="100" y="15" width="200" height="200" fill="blue">
+ <animate attributeName="x" from="0" to="30" begin="-1s" dur="2s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/seek/reftest.list b/layout/reftests/svg/smil/seek/reftest.list
new file mode 100644
index 0000000000..28e055885e
--- /dev/null
+++ b/layout/reftests/svg/smil/seek/reftest.list
@@ -0,0 +1,17 @@
+# Tests for seeking behaviour
+== anim-x-seek-1a.svg anim-standard-ref.svg
+== anim-x-seek-1b.svg anim-standard-ref.svg
+== anim-x-seek-1c.svg anim-standard-ref.svg
+== anim-x-seek-1d.svg anim-standard-ref.svg
+== anim-x-seek-1e.svg anim-standard-ref.svg
+== anim-x-seek-dynamic-1a.svg anim-standard-ref.svg
+== anim-x-seek-dynamic-1b.svg anim-standard-ref.svg
+== anim-x-seek-dynamic-1c.svg anim-standard-ref.svg
+== anim-x-seek-dynamic-1d.svg anim-standard-ref.svg
+== anim-x-seek-dynamic-1e.svg anim-standard-ref.svg
+== anim-x-seek-dynamic-1f.svg anim-standard-ref.svg
+== anim-x-seek-dynamic-1g.svg anim-standard-ref.svg
+== anim-x-seek-dynamic-1h.svg anim-standard-ref.svg
+== anim-x-seek-dynamic-1i.svg anim-standard-ref.svg
+== anim-x-seek-negative-1a.svg anim-standard-ref.svg
+== anim-x-seek-cross-container-1a.xhtml anim-standard-ref.xhtml
diff --git a/layout/reftests/svg/smil/set/reftest.list b/layout/reftests/svg/smil/set/reftest.list
new file mode 100644
index 0000000000..d5ec83f243
--- /dev/null
+++ b/layout/reftests/svg/smil/set/reftest.list
@@ -0,0 +1,2 @@
+== set-css-fontsize-freeze-1.svg set-css-fontsize-freeze-1-ref.svg
+== set-css-fontsize-remove-1.svg set-css-fontsize-remove-1-ref.svg
diff --git a/layout/reftests/svg/smil/set/set-css-fontsize-freeze-1-ref.svg b/layout/reftests/svg/smil/set/set-css-fontsize-freeze-1-ref.svg
new file mode 100644
index 0000000000..086c9367a5
--- /dev/null
+++ b/layout/reftests/svg/smil/set/set-css-fontsize-freeze-1-ref.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <text x="20px" y="20px" style="font-size: 10px">abc</text>
+ <text x="70px" y="20px" style="font-size: 20px">abc</text>
+ <text x="120px" y="20px" style="font-size: 20px">abc</text>
+ <text x="20px" y="70px" style="font-size: 20px">abc</text>
+ <text x="70px" y="70px" style="font-size: 20px">abc</text>
+ <text x="120px" y="70px" style="font-size: 20px">abc</text>
+ <text x="20px" y="120px" style="font-size: 20px">abc</text>
+ <text x="70px" y="120px" style="font-size: 20px">abc</text>
+ <text x="120px" y="120px" style="font-size: 20px">abc</text>
+</svg>
diff --git a/layout/reftests/svg/smil/set/set-css-fontsize-freeze-1.svg b/layout/reftests/svg/smil/set/set-css-fontsize-freeze-1.svg
new file mode 100644
index 0000000000..f2865b1e80
--- /dev/null
+++ b/layout/reftests/svg/smil/set/set-css-fontsize-freeze-1.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ style="font-size: 10px"
+ class="reftest-wait"
+ onload="go()">
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "font-size",
+ "to" : "20px",
+ "fill" : "freeze"};
+ testAnimatedTextGrid("set", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/set/set-css-fontsize-remove-1-ref.svg b/layout/reftests/svg/smil/set/set-css-fontsize-remove-1-ref.svg
new file mode 100644
index 0000000000..d8ac85218a
--- /dev/null
+++ b/layout/reftests/svg/smil/set/set-css-fontsize-remove-1-ref.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <text x="20px" y="20px" style="font-size: 10px">abc</text>
+ <text x="70px" y="20px" style="font-size: 20px">abc</text>
+ <text x="120px" y="20px" style="font-size: 20px">abc</text>
+ <text x="20px" y="70px" style="font-size: 20px">abc</text>
+ <text x="70px" y="70px" style="font-size: 20px">abc</text>
+ <text x="120px" y="70px" style="font-size: 20px">abc</text>
+ <text x="20px" y="120px" style="font-size: 20px">abc</text>
+ <text x="70px" y="120px" style="font-size: 10px">abc</text>
+ <text x="120px" y="120px" style="font-size: 10px">abc</text>
+</svg>
diff --git a/layout/reftests/svg/smil/set/set-css-fontsize-remove-1.svg b/layout/reftests/svg/smil/set/set-css-fontsize-remove-1.svg
new file mode 100644
index 0000000000..4264c07ef8
--- /dev/null
+++ b/layout/reftests/svg/smil/set/set-css-fontsize-remove-1.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ style="font-size: 10px"
+ class="reftest-wait"
+ onload="go()">
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "font-size",
+ "to" : "20px",
+ "fill" : "remove"};
+ testAnimatedTextGrid("set", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/shadow-dom-01.html b/layout/reftests/svg/smil/shadow-dom-01.html
new file mode 100644
index 0000000000..01a3309340
--- /dev/null
+++ b/layout/reftests/svg/smil/shadow-dom-01.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <svg width="100%" height="100%" viewBox="0 0 100 100">
+ <rect width="100" height="100" fill="red">
+ <set attributeName="width" to="0" begin="0s" fill="freeze"/>
+ </rect>
+ </svg>
+ <p></p>
+ <script>
+ let p = document.querySelector("p")
+ let shadow = p.attachShadow({mode: 'open'});
+ shadow.appendChild(document.querySelector("svg"))
+ document.documentElement.removeAttribute("class");
+ </script>
+ <style>
+ * {
+ margin: 0;
+ }
+ html {
+ background-color: lime;
+ }
+ </style>
+</html>
diff --git a/layout/reftests/svg/smil/smil-grid.js b/layout/reftests/svg/smil/smil-grid.js
new file mode 100644
index 0000000000..0c8036ea27
--- /dev/null
+++ b/layout/reftests/svg/smil/smil-grid.js
@@ -0,0 +1,200 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* vim: set ts=2 sw=2 sts=2 et: */
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/* Javascript library for dynamically generating a simple SVG/SMIL reftest
+ * with several copies of the same animation, each seeked to a different time.
+ */
+
+// Global variables
+const START_TIMES = [ "4.0s", "3.0s", "2.7s",
+ "2.25s", "2.01s", "1.5s",
+ "1.4s", "1.0s", "0.5s" ];
+
+const X_POSNS = [ "20px", "70px", "120px",
+ "20px", "70px", "120px",
+ "20px", "70px", "120px" ];
+
+const Y_POSNS = [ "20px", "20px", "20px",
+ "70px", "70px", "70px",
+ "120px", "120px", "120px" ];
+
+const DURATION = "2s";
+const SNAPSHOT_TIME ="3";
+const SVGNS = "http://www.w3.org/2000/svg";
+
+// Convenience wrapper using testAnimatedGrid to make 15pt-by-15pt rects
+function testAnimatedRectGrid(animationTagName, animationAttrHashList) {
+ var targetTagName = "rect";
+ var targetAttrHash = {"width" : "15px",
+ "height" : "15px" };
+ testAnimatedGrid(targetTagName, targetAttrHash,
+ animationTagName, animationAttrHashList);
+}
+
+// Convenience wrapper using testAnimatedGrid to make grid of text
+function testAnimatedTextGrid(animationTagName, animationAttrHashList) {
+ var targetTagName = "text";
+ var targetAttrHash = { };
+ testAnimatedGrid(targetTagName, targetAttrHash,
+ animationTagName, animationAttrHashList);
+}
+
+// Generates a visual grid of elements of type "targetTagName", with the
+// attribute values given in targetAttrHash. Each generated element has
+// exactly one child -- an animation element of type "animationTagName", with
+// the attribute values given in animationAttrHash.
+function testAnimatedGrid(targetTagName, targetAttrHash,
+ animationTagName, animationAttrHashList) {
+ // SANITY CHECK
+ const numElementsToMake = START_TIMES.length;
+ if (X_POSNS.length != numElementsToMake ||
+ Y_POSNS.length != numElementsToMake) {
+ return;
+ }
+
+ for (var i = 0; i < animationAttrHashList.length; i++) {
+ var animationAttrHash = animationAttrHashList[i];
+ // Default to fill="freeze" so we can test the final value of the animation
+ if (!animationAttrHash["fill"]) {
+ animationAttrHash["fill"] = "freeze";
+ }
+ }
+
+ // Build the grid!
+ var svg = document.documentElement;
+ for (var i = 0; i < numElementsToMake; i++) {
+ // Build target & animation elements
+ var targetElem = buildElement(targetTagName, targetAttrHash);
+ for (var j = 0; j < animationAttrHashList.length; j++) {
+ var animationAttrHash = animationAttrHashList[j];
+ var animElem = buildElement(animationTagName, animationAttrHash);
+
+ // Customize them using global constant values
+ targetElem.setAttribute("x", X_POSNS[i]);
+ targetElem.setAttribute("y", Y_POSNS[i]);
+ animElem.setAttribute("begin", START_TIMES[i]);
+ animElem.setAttribute("dur", DURATION);
+
+ // Append to target
+ targetElem.appendChild(animElem);
+ }
+ // Insert target into DOM
+ svg.appendChild(targetElem);
+ }
+
+ // Take snapshot
+ setTimeAndSnapshot(SNAPSHOT_TIME, true);
+}
+
+// Generates a visual grid of elements of type |graphicElemTagName|, with the
+// attribute values given in |graphicElemAttrHash|. This is a variation of the
+// above function. We use <defs> to include the reference elements because
+// some animatable properties are only applicable to some specific elements
+// (e.g. feFlood, stop), so then we apply an animation element of type
+// |animationTagName|, with the attribute values given in |animationAttrHash|,
+// to those specific elements. |defTagNameList| is an array of tag names.
+// We will create elements hierarchically according to this array. The first tag
+// in |defTagNameList| is the outer-most one in <defs>, and the last tag is the
+// inner-most one and it is the target to which the animation element will be
+// applied. We visualize the effect of our animation by referencing each
+// animated subtree from some graphical element that we generate. The
+// |graphicElemIdValueProperty| parameter provides the name of the CSS property
+// that we should use to hook up this reference.
+//
+// e.g. if a caller passes a defTagNameList of [ "linearGradient", "stop" ],
+// this function will generate the following subtree:
+// <defs>
+// <linearGradient id="elem0">
+// <stop>
+// <animate ..../>
+// </stop>
+// </linearGradient>
+// <linearGradient id="elem1">
+// <stop>
+// <animate ..../>
+// </stop>
+// </linearGradient>
+//
+// <!--- more similar linearGradients here, up to START_TIMES.length -->
+// </defs>
+function testAnimatedGridWithDefs(graphicElemTagName,
+ graphicElemAttrHash,
+ graphicElemIdValuedProperty,
+ defTagNameList,
+ animationTagName,
+ animationAttrHashList) {
+ // SANITY CHECK
+ const numElementsToMake = START_TIMES.length;
+ if (X_POSNS.length != numElementsToMake ||
+ Y_POSNS.length != numElementsToMake) {
+ return;
+ }
+
+ if (defTagNameList.length == 0) {
+ return;
+ }
+
+ for (var i = 0; i < animationAttrHashList.length; i++) {
+ var animationAttrHash = animationAttrHashList[i];
+ // Default to fill="freeze" so we can test the final value of the animation
+ if (!animationAttrHash["fill"]) {
+ animationAttrHash["fill"] = "freeze";
+ }
+ }
+
+ var svg = document.documentElement;
+
+ // Build defs element.
+ var defs = buildElement('defs');
+ for (var i = 0; i < numElementsToMake; i++) {
+ // This will track the innermost element in our subtree:
+ var innerElement = defs;
+
+ for (var defIdx = 0; defIdx < defTagNameList.length; ++defIdx) {
+ // Set an ID on the first level of nesting (on child of defs):
+ var attrs = defIdx == 0 ? { "id": "elem" + i } : {};
+
+ var newElem = buildElement(defTagNameList[defIdx], attrs);
+ innerElement.appendChild(newElem);
+ innerElement = newElem;
+ }
+
+ for (var j = 0; j < animationAttrHashList.length; ++j) {
+ var animationAttrHash = animationAttrHashList[j];
+ var animElem = buildElement(animationTagName, animationAttrHash);
+ animElem.setAttribute("begin", START_TIMES[i]);
+ animElem.setAttribute("dur", DURATION);
+ innerElement.appendChild(animElem);
+ }
+ }
+ svg.appendChild(defs);
+
+ // Build the grid!
+ for (var i = 0; i < numElementsToMake; ++i) {
+ var graphicElem = buildElement(graphicElemTagName, graphicElemAttrHash);
+ graphicElem.setAttribute("x", X_POSNS[i]);
+ graphicElem.setAttribute("y", Y_POSNS[i]);
+ graphicElem.setAttribute("style", graphicElemIdValuedProperty +
+ ":url(#elem" + i + ")");
+ svg.appendChild(graphicElem);
+ }
+
+ // Take snapshot
+ setTimeAndSnapshot(SNAPSHOT_TIME, true);
+}
+
+function buildElement(tagName, attrHash) {
+ var elem = document.createElementNS(SVGNS, tagName);
+ for (var attrName in attrHash) {
+ var attrValue = attrHash[attrName];
+ elem.setAttribute(attrName, attrValue);
+ }
+ // If we're creating a text node, populate it with some text.
+ if (tagName == "text") {
+ elem.appendChild(document.createTextNode("abc"));
+ }
+ return elem;
+}
diff --git a/layout/reftests/svg/smil/smil-transitions-interaction-1a.svg b/layout/reftests/svg/smil/smil-transitions-interaction-1a.svg
new file mode 100644
index 0000000000..bf2b042532
--- /dev/null
+++ b/layout/reftests/svg/smil/smil-transitions-interaction-1a.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(1.0, true)">
+ <!-- This test checks that we don't trigger a CSS transition when
+ SMIL animation effects are first applied. -->
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <rect width="100%" height="100%"
+ style="fill: red; -moz-transition: 200s fill">
+ <set attributeName="fill" to="lime" begin="1s" dur="indefinite"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/smil-transitions-interaction-1b.svg b/layout/reftests/svg/smil/smil-transitions-interaction-1b.svg
new file mode 100644
index 0000000000..9ec40cbfee
--- /dev/null
+++ b/layout/reftests/svg/smil/smil-transitions-interaction-1b.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(1.0, true)">
+ <!-- This test checks that we don't trigger a CSS transition when
+ SMIL animation effects are first applied. -->
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <rect width="100%" height="100%" fill="red"
+ style="-moz-transition: 200s fill">
+ <set attributeName="fill" attributeType="XML"
+ to="lime" begin="1s" dur="indefinite"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/smil-transitions-interaction-2a.svg b/layout/reftests/svg/smil/smil-transitions-interaction-2a.svg
new file mode 100644
index 0000000000..7a2499e1ce
--- /dev/null
+++ b/layout/reftests/svg/smil/smil-transitions-interaction-2a.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(1.0, true)">
+ <!-- This test checks that we don't trigger a CSS transition after
+ SMIL animation effects are applied. -->
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <rect width="100%" height="100%"
+ style="fill: red; -moz-transition: 1s fill">
+ <set attributeName="fill" to="lime" begin="1s" dur="indefinite"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/smil-transitions-interaction-2b.svg b/layout/reftests/svg/smil/smil-transitions-interaction-2b.svg
new file mode 100644
index 0000000000..eae4a6c899
--- /dev/null
+++ b/layout/reftests/svg/smil/smil-transitions-interaction-2b.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(1.0, true)">
+ <!-- This test checks that we don't trigger a CSS transition after
+ SMIL animation effects are applied. -->
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <rect width="100%" height="100%" fill="red"
+ style="-moz-transition: 1s fill">
+ <set attributeName="fill" attributeType="XML"
+ to="lime" begin="1s" dur="indefinite"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/smil-transitions-interaction-3a.svg b/layout/reftests/svg/smil/smil-transitions-interaction-3a.svg
new file mode 100644
index 0000000000..b820b4ff3c
--- /dev/null
+++ b/layout/reftests/svg/smil/smil-transitions-interaction-3a.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="document.documentElement.pauseAnimations();
+ document.documentElement.setCurrentTime(1.0);
+ setTimeAndSnapshot(2.0, false)">
+ <!-- This test checks that we don't trigger a CSS transition when
+ SMIL animation effects are removed. -->
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <rect width="100%" height="100%"
+ style="fill: lime; -moz-transition: 200s fill">
+ <set attributeName="fill" to="red" begin="1s" dur="1s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/smil-transitions-interaction-3b.svg b/layout/reftests/svg/smil/smil-transitions-interaction-3b.svg
new file mode 100644
index 0000000000..8bc634f53d
--- /dev/null
+++ b/layout/reftests/svg/smil/smil-transitions-interaction-3b.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="document.documentElement.pauseAnimations();
+ document.documentElement.setCurrentTime(1.0);
+ setTimeAndSnapshot(2.0, false)">
+ <!-- This test checks that we don't trigger a CSS transition when
+ SMIL animation effects are removed. -->
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <rect width="100%" height="100%" fill="lime"
+ style="-moz-transition: 200s fill">
+ <set attributeName="fill" attributeType="XML"
+ to="red" begin="1s" dur="1s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/smil-transitions-interaction-4a.svg b/layout/reftests/svg/smil/smil-transitions-interaction-4a.svg
new file mode 100644
index 0000000000..a4058361f5
--- /dev/null
+++ b/layout/reftests/svg/smil/smil-transitions-interaction-4a.svg
@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="document.documentElement.pauseAnimations();
+ document.documentElement.setCurrentTime(1.0);
+ setTimeAndSnapshot(1.5, false)">
+ <!-- This test checks that we don't trigger a CSS transition during
+ interpolation from-to animation. We seek to 1.5s, halfway through the
+ animation, when we're *just* to the point where the lime stroke is wide
+ enough to cover up the red rect behind it. If a transition were to
+ start, it would slow us down and allow some red to show.
+ -->
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <rect width="100%" height="100%" style="fill: lime"/>
+ <rect width="30" height="30" style="fill: red"/>
+ <rect width="20" height="20"
+ style="fill: lime; stroke: lime; -moz-transition: 200s stroke-width">
+ <animate attributeName="stroke-width" from="10px" to="30px"
+ begin="1s" dur="1s" fill="freeze"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/smil-transitions-interaction-4b.svg b/layout/reftests/svg/smil/smil-transitions-interaction-4b.svg
new file mode 100644
index 0000000000..74f4c5197e
--- /dev/null
+++ b/layout/reftests/svg/smil/smil-transitions-interaction-4b.svg
@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="document.documentElement.pauseAnimations();
+ document.documentElement.setCurrentTime(1.0);
+ setTimeAndSnapshot(1.5, false)">
+ <!-- This test checks that we don't trigger a CSS transition during
+ interpolation from-to animation. We seek to 1.5s, halfway through the
+ animation, when we're *just* to the point where the lime stroke is wide
+ enough to cover up the red rect behind it. If a transition were to
+ start, it would slow us down and allow some red to show.
+ -->
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <rect width="100%" height="100%" style="fill: lime"/>
+ <rect width="30" height="30" style="fill: red"/>
+ <rect width="20" height="20"
+ style="fill: lime; stroke: lime; -moz-transition: 200s stroke-width">
+ <animate attributeName="stroke-width" attributeType="XML"
+ from="10px" to="30px" begin="1s" dur="1s" fill="freeze"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/smil-util.js b/layout/reftests/svg/smil/smil-util.js
new file mode 100644
index 0000000000..18573c4b64
--- /dev/null
+++ b/layout/reftests/svg/smil/smil-util.js
@@ -0,0 +1,26 @@
+// Seeks to the given time and then removes the SVG document's class to trigger
+// a reftest snapshot. If pauseFlag is true, animations will be paused.
+function setTimeAndSnapshot(timeInSeconds, pauseFlag) {
+ var svg = document.documentElement;
+ if (pauseFlag) {
+ svg.pauseAnimations();
+ }
+ svg.setCurrentTime(timeInSeconds);
+ svg.removeAttribute("class");
+}
+
+// Seeks to the given time and then removes the SVG document's class to trigger
+// a reftest snapshot after waiting at least minWaitTimeInSeconds.
+function setTimeAndWaitToSnapshot(seekTimeInSeconds, minWaitTimeInSeconds) {
+ var svg = document.documentElement;
+ svg.setCurrentTime(seekTimeInSeconds);
+ var timeToTakeSnapshot =
+ window.performance.now() + minWaitTimeInSeconds * 1000;
+ requestAnimationFrame(function takeSnapshot(currentTime) {
+ if (currentTime > timeToTakeSnapshot) {
+ svg.removeAttribute("class");
+ } else {
+ requestAnimationFrame(takeSnapshot);
+ }
+ });
+}
diff --git a/layout/reftests/svg/smil/sort/reftest.list b/layout/reftests/svg/smil/sort/reftest.list
new file mode 100644
index 0000000000..9303754773
--- /dev/null
+++ b/layout/reftests/svg/smil/sort/reftest.list
@@ -0,0 +1,12 @@
+# Tests related to SVG Animation (using SMIL), focusing on animation-sorting
+# to see which animation takes precedence (out of multiple animations on the
+# same attribute)
+
+== sort-startAfter-1.svg sort-startAfter-1-ref.svg
+== sort-startAfter-2.svg sort-startAfter-2-ref.svg
+== sort-startAfter-3.svg sort-startAfter-3-ref.svg
+== sort-startSame-1a.svg sort-startSame-1-ref.svg
+== sort-startSame-1b.svg sort-startSame-1-ref.svg
+== sort-startSame-2a.svg sort-startSame-2-ref.svg
+== sort-startSame-2b.svg sort-startSame-2-ref.svg
+random == sort-additive-1.svg sort-additive-1-ref.svg # bug 547801
diff --git a/layout/reftests/svg/smil/sort/sort-additive-1-ref.svg b/layout/reftests/svg/smil/sort/sort-additive-1-ref.svg
new file mode 100644
index 0000000000..755c5cf02d
--- /dev/null
+++ b/layout/reftests/svg/smil/sort/sort-additive-1-ref.svg
@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg">
+ <!-- start line -->
+ <line x1="5" x2="5" y1="0" y2="330" stroke="grey" stroke-width="2"
+ stroke-dasharray="5,5"/>
+ <!-- non-additive line -->
+ <line x1="105" x2="105" y1="0" y2="330" stroke="grey" stroke-width="2"
+ stroke-dasharray="5,5"/>
+ <!-- additive line -->
+ <line x1="205" x2="205" y1="0" y2="330" stroke="grey" stroke-width="2"
+ stroke-dasharray="5,5"/>
+ <g transform="translate(5, 5)">
+ <rect style="stroke: black; fill: lightskyblue" x="100" y="0" width="30"
+ height="30"/>
+ </g>
+ <g transform="translate(5, 45)">
+ <rect style="stroke: black; fill: lightskyblue" x="200" y="0" width="30"
+ height="30"/>
+ </g>
+ <g transform="translate(5, 85)">
+ <rect style="stroke: black; fill: lightskyblue" x="100" y="0" width="30"
+ height="30"/>
+ </g>
+ <g transform="translate(5, 125)">
+ <rect style="stroke: black; fill: lightskyblue" x="200" y="0" width="30"
+ height="30"/>
+ </g>
+ <g transform="translate(5, 165)">
+ <rect style="stroke: black; fill: lightskyblue" x="100" y="0" width="30"
+ height="30"/>
+ </g>
+ <g transform="translate(5, 205)">
+ <rect style="stroke: black; fill: lightskyblue" x="200" y="0" width="30"
+ height="30"/>
+ </g>
+ <g transform="translate(5, 245)">
+ <rect style="stroke: black; fill: lightskyblue" x="100" y="0" width="30"
+ height="30"/>
+ </g>
+ <g transform="translate(5, 285)">
+ <rect style="stroke: black; fill: lightskyblue" x="200" y="0" width="30"
+ height="30"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/smil/sort/sort-additive-1.svg b/layout/reftests/svg/smil/sort/sort-additive-1.svg
new file mode 100644
index 0000000000..e60ff0a15f
--- /dev/null
+++ b/layout/reftests/svg/smil/sort/sort-additive-1.svg
@@ -0,0 +1,116 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait">
+ <script type="text/ecmascript"><![CDATA[
+ function swapAnimations() {
+ var high = document.getElementById("high");
+ high.parentNode.insertBefore(high, null);
+
+ var low = document.getElementById("low");
+ low.parentNode.insertBefore(low, low.parentNode.firstChild);
+
+ setTimeAndSnapshot(103.1, true);
+ }
+ window.addEventListener("MozReftestInvalidate", swapAnimations, false);
+ ]]></script>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <!-- start line -->
+ <line x1="5" x2="5" y1="0" y2="330" stroke="grey" stroke-width="2"
+ stroke-dasharray="5,5"/>
+ <!-- non-additive line -->
+ <line x1="105" x2="105" y1="0" y2="330" stroke="grey" stroke-width="2"
+ stroke-dasharray="5,5"/>
+ <!-- additive line -->
+ <line x1="205" x2="205" y1="0" y2="330" stroke="grey" stroke-width="2"
+ stroke-dasharray="5,5"/>
+ <!-- Not additive group -->
+ <!-- additive behaviour defaults to replace so this shouldn't add -->
+ <g transform="translate(5, 5)">
+ <rect style="stroke: black; fill: lightskyblue" x="0" y="0" width="30"
+ height="30">
+ <animate attributeName="x" from="0" to="100" begin="100s" dur="3s" fill="freeze"/>
+ <animate attributeName="x" from="0" to="100" begin="100s" dur="3s" fill="freeze"/>
+ </rect>
+ </g>
+ <!-- Additive group -->
+ <!-- We only need to specify additive behaviour on the second animation as
+ it will be higher in the animation sandwich -->
+ <g transform="translate(5, 45)">
+ <rect style="stroke: black; fill: lightskyblue" x="0" y="0" width="30"
+ height="30">
+ <animate attributeName="x" from="0" to="100" begin="100s" dur="3s" fill="freeze"/>
+ <animate attributeName="x" from="0" to="100" begin="100s" dur="3s" fill="freeze"
+ additive="sum"/>
+ </rect>
+ </g>
+ <!-- Not additive group -->
+ <!-- Specifying additive behaviour on the first animation has no effect
+ as it is lower in the animation sandwich (begin times are the same
+ so the order in the document takes precedence). -->
+ <g transform="translate(5, 85)">
+ <rect style="stroke: black; fill: lightskyblue" x="0" y="0" width="30"
+ height="30">
+ <animate attributeName="x" from="0" to="100" begin="100s" dur="3s" fill="freeze"
+ additive="sum"/>
+ <animate attributeName="x" from="0" to="100" begin="100s" dur="3s" fill="freeze"/>
+ </rect>
+ </g>
+ <!-- Additive group -->
+ <!-- The first animation should be composed second as it has a later begin
+ time so its additive attribute should apply even though it appears
+ first in the document -->
+ <g transform="translate(5, 125)">
+ <rect style="stroke: black; fill: lightskyblue" x="0" y="0" width="30"
+ height="30">
+ <animate attributeName="x" from="0" to="100" begin="100.001s" dur="3s" fill="freeze"
+ additive="sum"/>
+ <animate attributeName="x" from="0" to="100" begin="100s" dur="3s" fill="freeze"/>
+ </rect>
+ </g>
+ <!-- Not additive group -->
+ <!-- The first animation overrides the second animation because of its
+ later begin time. -->
+ <g transform="translate(5, 165)">
+ <rect style="stroke: black; fill: lightskyblue" x="0" y="0" width="30"
+ height="30">
+ <animate attributeName="x" from="0" to="100" begin="100.001s" dur="3s" fill="freeze"/>
+ <animate attributeName="x" from="0" to="100" begin="100s" dur="3s" fill="freeze"
+ additive="sum"/>
+ </rect>
+ </g>
+ <!-- Additive group -->
+ <!-- Even though additive is replace, by animation is always additive -->
+ <g transform="translate(5, 205)">
+ <rect style="stroke: black; fill: lightskyblue" x="0" y="0" width="30"
+ height="30">
+ <animate attributeName="x" from="0" to="100" begin="100s" dur="3s" fill="freeze"/>
+ <animate attributeName="x" by="100" dur="3s" begin="100s" fill="freeze"
+ additive="replace"/>
+ </rect>
+ </g>
+ <!-- Not additive group -->
+ <!-- This begins as additive, but after the document loads the two animations
+ will be swapped giving them the opposite priority and making this not
+ additive. -->
+ <g transform="translate(5, 245)">
+ <rect style="stroke: black; fill: lightskyblue" x="0" y="0" width="30"
+ height="30">
+ <animate attributeName="x" from="0" to="100" begin="100s" dur="3s" fill="freeze"/>
+ <animate attributeName="x" from="0" to="100" begin="100s" dur="3s" fill="freeze"
+ additive="sum" id="low"/>
+ </rect>
+ </g>
+ <!-- Additive group -->
+ <!-- This is the inverse of the above. The animations will have their
+ positions in the document swapped effectively making this not additive.
+ -->
+ <g transform="translate(5, 285)">
+ <rect style="stroke: black; fill: lightskyblue" x="0" y="0" width="30"
+ height="30">
+ <animate attributeName="x" from="0" to="100" begin="100s" dur="3s" fill="freeze"
+ additive="sum" id="high"/>
+ <animate attributeName="x" from="0" to="100" begin="100s" dur="3s" fill="freeze"/>
+ </rect>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/smil/sort/sort-startAfter-1-ref.svg b/layout/reftests/svg/smil/sort/sort-startAfter-1-ref.svg
new file mode 100644
index 0000000000..e0d50579b0
--- /dev/null
+++ b/layout/reftests/svg/smil/sort/sort-startAfter-1-ref.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <rect x="125" y="0" width="100" height="100" fill="blue"/>
+ <rect x="125" y="200" width="100" height="100" fill="blue"/>
+</svg>
diff --git a/layout/reftests/svg/smil/sort/sort-startAfter-1.svg b/layout/reftests/svg/smil/sort/sort-startAfter-1.svg
new file mode 100644
index 0000000000..43b6ed9e13
--- /dev/null
+++ b/layout/reftests/svg/smil/sort/sort-startAfter-1.svg
@@ -0,0 +1,16 @@
+<!-- If two conflicting animations start at diffent times, the one starting
+ later should win. -->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(1.0, true)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <rect x="0" y="0" width="100" height="100" fill="blue">
+ <animate attributeName="x" from="100" to="200" begin="0.5s" dur="2s"/>
+ <animate attributeName="x" from="300" to="400" begin="0s" dur="2s"/>
+ </rect>
+ <rect x="0" y="200" width="100" height="100" fill="blue">
+ <animate attributeName="x" from="300" to="400" begin="0s" dur="2s"/>
+ <animate attributeName="x" from="100" to="200" begin="0.5s" dur="2s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/sort/sort-startAfter-2-ref.svg b/layout/reftests/svg/smil/sort/sort-startAfter-2-ref.svg
new file mode 100644
index 0000000000..aacb1998e4
--- /dev/null
+++ b/layout/reftests/svg/smil/sort/sort-startAfter-2-ref.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <rect x="150" y="0" width="100" height="100" fill="blue"/>
+ <rect x="150" y="200" width="100" height="100" fill="blue"/>
+</svg>
diff --git a/layout/reftests/svg/smil/sort/sort-startAfter-2.svg b/layout/reftests/svg/smil/sort/sort-startAfter-2.svg
new file mode 100644
index 0000000000..3d82a59cc2
--- /dev/null
+++ b/layout/reftests/svg/smil/sort/sort-startAfter-2.svg
@@ -0,0 +1,18 @@
+<!-- If two conflicting animations start at diffent times, the one starting
+ later should win. -->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(1.5, true)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <rect x="0" y="0" width="100" height="100" fill="blue">
+ <animate attributeName="x" from="100" to="200" begin="0.5s" dur="2s"/>
+ <animate attributeName="x" from="300" to="400" begin="0s" dur="1s"
+ fill="freeze"/>
+ </rect>
+ <rect x="0" y="200" width="100" height="100" fill="blue">
+ <animate attributeName="x" from="300" to="400" begin="0s" dur="1s"
+ fill="freeze"/>
+ <animate attributeName="x" from="100" to="200" begin="0.5s" dur="2s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/sort/sort-startAfter-3-ref.svg b/layout/reftests/svg/smil/sort/sort-startAfter-3-ref.svg
new file mode 100644
index 0000000000..a20bbc496e
--- /dev/null
+++ b/layout/reftests/svg/smil/sort/sort-startAfter-3-ref.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <rect x="200" y="0" width="100" height="100" fill="blue"/>
+ <rect x="200" y="200" width="100" height="100" fill="blue"/>
+</svg>
diff --git a/layout/reftests/svg/smil/sort/sort-startAfter-3.svg b/layout/reftests/svg/smil/sort/sort-startAfter-3.svg
new file mode 100644
index 0000000000..2fb71aab33
--- /dev/null
+++ b/layout/reftests/svg/smil/sort/sort-startAfter-3.svg
@@ -0,0 +1,18 @@
+<!-- If two conflicting animations start at diffent times, the one starting
+ later (including its lasting "freeze" effect) should win. -->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(1.5, true)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <rect x="0" y="0" width="100" height="100" fill="blue">
+ <animate attributeName="x" from="100" to="200" begin="0.25s" dur="1s"
+ fill="freeze"/>
+ <animate attributeName="x" from="300" to="400" begin="0s" dur="2s"/>
+ </rect>
+ <rect x="0" y="200" width="100" height="100" fill="blue">
+ <animate attributeName="x" from="300" to="400" begin="0s" dur="2s"/>
+ <animate attributeName="x" from="100" to="200" begin="0.25s" dur="1s"
+ fill="freeze"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/sort/sort-startSame-1-ref.svg b/layout/reftests/svg/smil/sort/sort-startSame-1-ref.svg
new file mode 100644
index 0000000000..5c0bf560e3
--- /dev/null
+++ b/layout/reftests/svg/smil/sort/sort-startSame-1-ref.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <rect x="350" y="0" width="100" height="100" fill="blue"/>
+ <rect x="150" y="200" width="100" height="100" fill="blue"/>
+</svg>
diff --git a/layout/reftests/svg/smil/sort/sort-startSame-1a.svg b/layout/reftests/svg/smil/sort/sort-startSame-1a.svg
new file mode 100644
index 0000000000..af503df445
--- /dev/null
+++ b/layout/reftests/svg/smil/sort/sort-startSame-1a.svg
@@ -0,0 +1,16 @@
+<!-- If two conflicting animations start at same time, the one appearing
+ later in the document should win. -->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(1.0, true)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <rect x="0" y="0" width="100" height="100" fill="blue">
+ <animate attributeName="x" from="100" to="200" begin="0s" dur="2s"/>
+ <animate attributeName="x" from="300" to="400" begin="0s" dur="2s"/>
+ </rect>
+ <rect x="0" y="200" width="100" height="100" fill="blue">
+ <animate attributeName="x" from="300" to="400" begin="0s" dur="2s"/>
+ <animate attributeName="x" from="100" to="200" begin="0s" dur="2s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/sort/sort-startSame-1b.svg b/layout/reftests/svg/smil/sort/sort-startSame-1b.svg
new file mode 100644
index 0000000000..7e99e50865
--- /dev/null
+++ b/layout/reftests/svg/smil/sort/sort-startSame-1b.svg
@@ -0,0 +1,31 @@
+<!-- If two conflicting animations start at same time, and if we swap their
+ positions, the one that ends up later in the document should win. -->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+
+ <script><![CDATA[
+ function go() {
+ // Move "a" and "b" to both be their parents' last child
+ var a = document.getElementById("a");
+ a.parentNode.insertBefore(a, null);
+
+ var b = document.getElementById("b");
+ b.parentNode.insertBefore(b, null);
+
+ setTimeAndSnapshot(1.0, true)
+ }
+ document.addEventListener("MozReftestInvalidate", go, false);
+ setTimeout(go, 4000); // fallback for running outside reftest
+ ]]></script>
+
+ <rect x="0" y="0" width="100" height="100" fill="blue">
+ <animate attributeName="x" from="300" to="400" begin="0s" dur="2s" id="a"/>
+ <animate attributeName="x" from="100" to="200" begin="0s" dur="2s"/>
+ </rect>
+ <rect x="0" y="200" width="100" height="100" fill="blue">
+ <animate attributeName="x" from="100" to="200" begin="0s" dur="2s" id="b"/>
+ <animate attributeName="x" from="300" to="400" begin="0s" dur="2s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/sort/sort-startSame-2-ref.svg b/layout/reftests/svg/smil/sort/sort-startSame-2-ref.svg
new file mode 100644
index 0000000000..77e5427399
--- /dev/null
+++ b/layout/reftests/svg/smil/sort/sort-startSame-2-ref.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <rect x="400" y="0" width="100" height="100" fill="blue"/>
+ <rect x="175" y="200" width="100" height="100" fill="blue"/>
+</svg>
diff --git a/layout/reftests/svg/smil/sort/sort-startSame-2a.svg b/layout/reftests/svg/smil/sort/sort-startSame-2a.svg
new file mode 100644
index 0000000000..b2404be941
--- /dev/null
+++ b/layout/reftests/svg/smil/sort/sort-startSame-2a.svg
@@ -0,0 +1,18 @@
+<!-- If two conflicting animations start at same time, the one appearing
+ later in the document should win (including its freeze effects). -->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(1.5, true)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <rect x="0" y="0" width="100" height="100" fill="blue">
+ <animate attributeName="x" from="100" to="200" begin="0s" dur="2s"/>
+ <animate attributeName="x" from="300" to="400" begin="0s" dur="1s"
+ fill="freeze"/>
+ </rect>
+ <rect x="0" y="200" width="100" height="100" fill="blue">
+ <animate attributeName="x" from="300" to="400" begin="0s" dur="1s"
+ fill="freeze"/>
+ <animate attributeName="x" from="100" to="200" begin="0s" dur="2s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/sort/sort-startSame-2b.svg b/layout/reftests/svg/smil/sort/sort-startSame-2b.svg
new file mode 100644
index 0000000000..f028b35033
--- /dev/null
+++ b/layout/reftests/svg/smil/sort/sort-startSame-2b.svg
@@ -0,0 +1,33 @@
+<!-- If two conflicting animations start at same time, and if we swap their
+ positions, the one that ends up later in the document should win
+ (including its freeze effects). -->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeout('go()', 0)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+
+ <script><![CDATA[
+ function go() {
+ // Move "a" and "b" to both be their parents' last child
+ var a = document.getElementById("a");
+ a.parentNode.insertBefore(a, null);
+
+ var b = document.getElementById("b");
+ b.parentNode.insertBefore(b, null);
+
+ setTimeAndSnapshot(1.5, true)
+ }
+ ]]></script>
+
+ <rect x="0" y="0" width="100" height="100" fill="blue">
+ <animate attributeName="x" from="300" to="400" begin="0s" dur="1s" id="a"
+ fill="freeze"/>
+ <animate attributeName="x" from="100" to="200" begin="0s" dur="2s"/>
+ </rect>
+ <rect x="0" y="200" width="100" height="100" fill="blue">
+ <animate attributeName="x" from="100" to="200" begin="0s" dur="2s" id="b"/>
+ <animate attributeName="x" from="300" to="400" begin="0s" dur="1s"
+ fill="freeze"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-color-1-by-ident-hex.svg b/layout/reftests/svg/smil/style/anim-css-color-1-by-ident-hex.svg
new file mode 100644
index 0000000000..acda8e0c50
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-color-1-by-ident-hex.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="go()">
+ <style>
+ rect { color: indigo; fill: currentColor; stroke: black; }
+ </style>
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "color",
+ "by" : "#AAF573" };
+ testAnimatedRectGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-color-1-from-by-hex-hex.svg b/layout/reftests/svg/smil/style/anim-css-color-1-from-by-hex-hex.svg
new file mode 100644
index 0000000000..42f4b65b6f
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-color-1-from-by-hex-hex.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="go()">
+ <style>
+ rect { color: indigo; fill: currentColor; stroke: black; }
+ </style>
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "color",
+ "from" : "#4B0082",
+ "by" : "#AAF573" };
+ testAnimatedRectGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-color-1-from-by-ident-hex.svg b/layout/reftests/svg/smil/style/anim-css-color-1-from-by-ident-hex.svg
new file mode 100644
index 0000000000..8b480cd864
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-color-1-from-by-ident-hex.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="go()">
+ <style>
+ rect { color: indigo; fill: currentColor; stroke: black; }
+ </style>
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "color",
+ "from" : "indigo",
+ "by" : "#AAF573" };
+ testAnimatedRectGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-color-1-from-to-hex-hex.svg b/layout/reftests/svg/smil/style/anim-css-color-1-from-to-hex-hex.svg
new file mode 100644
index 0000000000..f15b4a3c22
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-color-1-from-to-hex-hex.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="go()">
+ <style>
+ rect { color: indigo; fill: currentColor; stroke: black; }
+ </style>
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "color",
+ "from" : "#4B0082",
+ "to" : "#F5F5F5" };
+ testAnimatedRectGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-color-1-from-to-ident-ident.svg b/layout/reftests/svg/smil/style/anim-css-color-1-from-to-ident-ident.svg
new file mode 100644
index 0000000000..553b95f12f
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-color-1-from-to-ident-ident.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="go()">
+ <style>
+ rect { color: indigo; fill: currentColor; stroke: black; }
+ </style>
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "color",
+ "from" : "indigo",
+ "to" : "whitesmoke" };
+ testAnimatedRectGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-color-1-to-ident-hex.svg b/layout/reftests/svg/smil/style/anim-css-color-1-to-ident-hex.svg
new file mode 100644
index 0000000000..727107841f
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-color-1-to-ident-hex.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="go()">
+ <style>
+ rect { color: indigo; fill: currentColor; stroke: black; }
+ </style>
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "color",
+ "to" : "#F5F5F5" };
+ testAnimatedRectGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-color-1-to-ident-ident.svg b/layout/reftests/svg/smil/style/anim-css-color-1-to-ident-ident.svg
new file mode 100644
index 0000000000..9702370931
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-color-1-to-ident-ident.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="go()">
+ <style>
+ rect { color: indigo; fill: currentColor; stroke: black; }
+ </style>
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "color",
+ "to" : "whitesmoke" };
+ testAnimatedRectGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-color-2-paced-rgb.svg b/layout/reftests/svg/smil/style/anim-css-color-2-paced-rgb.svg
new file mode 100644
index 0000000000..c44f16b7c5
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-color-2-paced-rgb.svg
@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="go()">
+ <style>
+ rect { color: yellow; fill: currentColor; stroke: black; }
+ </style>
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "color",
+ "calcMode" : "paced",
+ "values" : "rgb(0, 10, 20); " +
+ "rgb(20, 50, 80); " +
+ "rgb(140, 130, 120)" };
+ testAnimatedRectGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-color-3-by-ident-ident.svg b/layout/reftests/svg/smil/style/anim-css-color-3-by-ident-ident.svg
new file mode 100644
index 0000000000..1c6d06895c
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-color-3-by-ident-ident.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="go()">
+ <!-- This is a test with a named color (DarkSlateGray == rgb(47, 79, 79)) -->
+ <!-- being added to another color (DarkOliveGreen == rbg(85, 107, 47)). -->
+ <style>
+ rect { color: DarkOliveGreen; fill: currentColor; stroke: Black; }
+ </style>
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "color",
+ "by" : "DarkSlateGray" };
+ testAnimatedRectGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-color-3-from-by-ident-ident.svg b/layout/reftests/svg/smil/style/anim-css-color-3-from-by-ident-ident.svg
new file mode 100644
index 0000000000..cd34fc58df
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-color-3-from-by-ident-ident.svg
@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="go()">
+ <!-- This is a test with a named color (DarkSlateGray == rgb(47, 79, 79)) -->
+ <!-- being added to another color (DarkOliveGreen == rbg(85, 107, 47)). -->
+ <style>
+ rect { color: DarkOliveGreen; fill: currentColor; stroke: Black; }
+ </style>
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "color",
+ "from" : "DarkOliveGreen",
+ "by" : "DarkSlateGray" };
+ testAnimatedRectGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-color-3-from-by-rgb-ident.svg b/layout/reftests/svg/smil/style/anim-css-color-3-from-by-rgb-ident.svg
new file mode 100644
index 0000000000..163c392e00
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-color-3-from-by-rgb-ident.svg
@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="go()">
+ <!-- This is a test with a named color (DarkSlateGray == rgb(47, 79, 79)) -->
+ <!-- being added to another color (DarkOliveGreen == rbg(85, 107, 47)). -->
+ <style>
+ rect { color: DarkOliveGreen; fill: currentColor; stroke: Black; }
+ </style>
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "color",
+ "from" : "rgb(85, 107, 47)",
+ "by" : "DarkSlateGray" };
+ testAnimatedRectGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fill-1-by-ident-curcol.svg b/layout/reftests/svg/smil/style/anim-css-fill-1-by-ident-curcol.svg
new file mode 100644
index 0000000000..b30fa4963f
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fill-1-by-ident-curcol.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="go()">
+ <style>
+ rect { fill: Indigo; stroke: black; color: #AAF573}
+ </style>
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "fill",
+ "by" : "currentColor" };
+ testAnimatedRectGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fill-1-by-ident-hex.svg b/layout/reftests/svg/smil/style/anim-css-fill-1-by-ident-hex.svg
new file mode 100644
index 0000000000..cdd1dd1d52
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fill-1-by-ident-hex.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="go()">
+ <style>
+ rect { fill: Indigo; stroke: black; }
+ </style>
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "fill",
+ "by" : "#AAF573" };
+ testAnimatedRectGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fill-1-from-by-curcol-hex.svg b/layout/reftests/svg/smil/style/anim-css-fill-1-from-by-curcol-hex.svg
new file mode 100644
index 0000000000..e2832b174a
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fill-1-from-by-curcol-hex.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="go()">
+ <style>
+ rect { fill: Indigo; stroke: black; color: Indigo }
+ </style>
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "fill",
+ "from" : "currentColor",
+ "by" : "#AAF573" };
+ testAnimatedRectGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fill-1-from-by-hex-curcol.svg b/layout/reftests/svg/smil/style/anim-css-fill-1-from-by-hex-curcol.svg
new file mode 100644
index 0000000000..fca9cc1d7a
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fill-1-from-by-hex-curcol.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="go()">
+ <style>
+ rect { fill: Indigo; stroke: black; color: #AAF573 }
+ </style>
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "fill",
+ "from" : "#4B0082",
+ "by" : "currentColor" };
+ testAnimatedRectGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fill-1-from-by-hex-hex.svg b/layout/reftests/svg/smil/style/anim-css-fill-1-from-by-hex-hex.svg
new file mode 100644
index 0000000000..61dc61da05
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fill-1-from-by-hex-hex.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="go()">
+ <style>
+ rect { fill: Indigo; stroke: black; }
+ </style>
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "fill",
+ "from" : "#4B0082",
+ "by" : "#AAF573" };
+ testAnimatedRectGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fill-1-from-by-ident-hex.svg b/layout/reftests/svg/smil/style/anim-css-fill-1-from-by-ident-hex.svg
new file mode 100644
index 0000000000..a6fe27433a
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fill-1-from-by-ident-hex.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="go()">
+ <style>
+ rect { fill: Indigo; stroke: black; }
+ </style>
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "fill",
+ "from" : "indigo",
+ "by" : "#AAF573" };
+ testAnimatedRectGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fill-1-from-to-curcol-hex.svg b/layout/reftests/svg/smil/style/anim-css-fill-1-from-to-curcol-hex.svg
new file mode 100644
index 0000000000..86cc1fedd7
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fill-1-from-to-curcol-hex.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="go()">
+ <style>
+ rect { fill: Indigo; stroke: black; color: Indigo; }
+ </style>
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "fill",
+ "from" : "currentColor",
+ "to" : "#F5F5F5" };
+ testAnimatedRectGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fill-1-from-to-hex-curcol.svg b/layout/reftests/svg/smil/style/anim-css-fill-1-from-to-hex-curcol.svg
new file mode 100644
index 0000000000..6cb3da74fd
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fill-1-from-to-hex-curcol.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="go()">
+ <style>
+ rect { fill: Indigo; stroke: black; color: Whitesmoke; }
+ </style>
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "fill",
+ "from" : "#4B0082",
+ "to" : "currentColor" };
+ testAnimatedRectGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fill-1-from-to-hex-hex.svg b/layout/reftests/svg/smil/style/anim-css-fill-1-from-to-hex-hex.svg
new file mode 100644
index 0000000000..f5f8114da9
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fill-1-from-to-hex-hex.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="go()">
+ <style>
+ rect { fill: Indigo; stroke: black; }
+ </style>
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "fill",
+ "from" : "#4B0082",
+ "to" : "#F5F5F5" };
+ testAnimatedRectGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fill-1-from-to-ident-ident.svg b/layout/reftests/svg/smil/style/anim-css-fill-1-from-to-ident-ident.svg
new file mode 100644
index 0000000000..e1b968d35a
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fill-1-from-to-ident-ident.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="go()">
+ <style>
+ rect { fill: Indigo; stroke: black; }
+ </style>
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "fill",
+ "from" : "indigo",
+ "to" : "whitesmoke" };
+ testAnimatedRectGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fill-1-ref.svg b/layout/reftests/svg/smil/style/anim-css-fill-1-ref.svg
new file mode 100644
index 0000000000..767407048d
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fill-1-ref.svg
@@ -0,0 +1,32 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <style>
+ rect { stroke: black; }
+ </style>
+ <rect x="20px" y="20px" width="15px" height="15px"
+ style="fill: #4B0082">
+ </rect>
+ <rect x="70px" y="20px" width="15px" height="15px"
+ style="fill: #4B0082">
+ </rect>
+ <rect x="120px" y="20px" width="15px" height="15px"
+ style="fill: #652593">
+ </rect>
+ <rect x="20px" y="70px" width="15px" height="15px"
+ style="fill: #8B5CAD">
+ </rect>
+ <rect x="70px" y="70px" width="15px" height="15px"
+ style="fill: #9F79BB">
+ </rect>
+ <rect x="120px" y="70px" width="15px" height="15px"
+ style="fill: #CBB8D8">
+ </rect>
+ <rect x="20px" y="120px" width="15px" height="15px"
+ style="fill: #D3C4DE">
+ </rect>
+ <rect x="70px" y="120px" width="15px" height="15px"
+ style="fill: #F5F5F5">
+ </rect>
+ <rect x="120px" y="120px" width="15px" height="15px"
+ style="fill: #F5F5F5">
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fill-1-to-ident-curcol.svg b/layout/reftests/svg/smil/style/anim-css-fill-1-to-ident-curcol.svg
new file mode 100644
index 0000000000..65a6812694
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fill-1-to-ident-curcol.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="go()">
+ <style>
+ rect { fill: Indigo; stroke: black; color: Whitesmoke; }
+ </style>
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "fill",
+ "to" : "currentColor" };
+ testAnimatedRectGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fill-1-to-ident-hex.svg b/layout/reftests/svg/smil/style/anim-css-fill-1-to-ident-hex.svg
new file mode 100644
index 0000000000..73540fcc49
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fill-1-to-ident-hex.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="go()">
+ <style>
+ rect { fill: Indigo; stroke: black; }
+ </style>
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "fill",
+ "to" : "#F5F5F5" };
+ testAnimatedRectGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fill-1-to-ident-ident.svg b/layout/reftests/svg/smil/style/anim-css-fill-1-to-ident-ident.svg
new file mode 100644
index 0000000000..9b1010426a
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fill-1-to-ident-ident.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="go()">
+ <style>
+ rect { fill: Indigo; stroke: black; }
+ </style>
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "fill",
+ "to" : "whitesmoke" };
+ testAnimatedRectGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fill-2-paced-rgb.svg b/layout/reftests/svg/smil/style/anim-css-fill-2-paced-rgb.svg
new file mode 100644
index 0000000000..4c1e16c53f
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fill-2-paced-rgb.svg
@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="go()">
+ <style>
+ rect { fill: yellow; stroke: black; }
+ </style>
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "fill",
+ "calcMode" : "paced",
+ "values" : "rgb(0, 10, 20); " +
+ "rgb(20, 50, 80); " +
+ "rgb(140, 130, 120)" };
+ testAnimatedRectGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fill-2-ref.svg b/layout/reftests/svg/smil/style/anim-css-fill-2-ref.svg
new file mode 100644
index 0000000000..1058125a66
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fill-2-ref.svg
@@ -0,0 +1,32 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <style>
+ rect { stroke: black; }
+ </style>
+ <rect x="20px" y="20px" width="15px" height="15px"
+ style="fill: yellow">
+ </rect>
+ <rect x="70px" y="20px" width="15px" height="15px"
+ style="fill: rgb(0, 10, 20)">
+ </rect>
+ <rect x="120px" y="20px" width="15px" height="15px"
+ style="fill: rgb(9, 28, 47)">
+ </rect>
+ <rect x="20px" y="70px" width="15px" height="15px"
+ style="fill: rgb(28, 55, 83)">
+ </rect>
+ <rect x="70px" y="70px" width="15px" height="15px"
+ style="fill: rgb(49, 69, 90)">
+ </rect>
+ <rect x="120px" y="70px" width="15px" height="15px"
+ style="fill: rgb(95, 100, 105)">
+ </rect>
+ <rect x="20px" y="120px" width="15px" height="15px"
+ style="fill: rgb(104, 106, 108)">
+ </rect>
+ <rect x="70px" y="120px" width="15px" height="15px"
+ style="fill: rgb(140, 130, 120)">
+ </rect>
+ <rect x="120px" y="120px" width="15px" height="15px"
+ style="fill: rgb(140, 130, 120)">
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fill-3-by-ident-ident.svg b/layout/reftests/svg/smil/style/anim-css-fill-3-by-ident-ident.svg
new file mode 100644
index 0000000000..16fbbc062d
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fill-3-by-ident-ident.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="go()">
+ <!-- This is a test with a named color (DarkSlateGray == rgb(47, 79, 79)) -->
+ <!-- being added to another color (DarkOliveGreen == rbg(85, 107, 47)). -->
+ <style>
+ rect { fill: DarkOliveGreen; stroke: Black; }
+ </style>
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "fill",
+ "by" : "DarkSlateGray" };
+ testAnimatedRectGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fill-3-from-by-ident-ident.svg b/layout/reftests/svg/smil/style/anim-css-fill-3-from-by-ident-ident.svg
new file mode 100644
index 0000000000..a2bdf8e8fc
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fill-3-from-by-ident-ident.svg
@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="go()">
+ <!-- This is a test with a named color (DarkSlateGray == rgb(47, 79, 79)) -->
+ <!-- being added to another color (DarkOliveGreen == rbg(85, 107, 47)). -->
+ <style>
+ rect { fill: DarkOliveGreen; stroke: Black; }
+ </style>
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "fill",
+ "from" : "DarkOliveGreen",
+ "by" : "DarkSlateGray" };
+ testAnimatedRectGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fill-3-from-by-rgb-ident.svg b/layout/reftests/svg/smil/style/anim-css-fill-3-from-by-rgb-ident.svg
new file mode 100644
index 0000000000..b2b8b689ea
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fill-3-from-by-rgb-ident.svg
@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="go()">
+ <!-- This is a test with a named color (DarkSlateGray == rgb(47, 79, 79)) -->
+ <!-- being added to another color (DarkOliveGreen == rbg(85, 107, 47)). -->
+ <style>
+ rect { fill: DarkOliveGreen; stroke: Black; }
+ </style>
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "fill",
+ "from" : "rgb(85, 107, 47)",
+ "by" : "DarkSlateGray" };
+ testAnimatedRectGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fill-3-ref.svg b/layout/reftests/svg/smil/style/anim-css-fill-3-ref.svg
new file mode 100644
index 0000000000..8a14da61ea
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fill-3-ref.svg
@@ -0,0 +1,32 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <style>
+ rect { stroke: black; }
+ </style>
+ <rect x="20px" y="20px" width="15px" height="15px"
+ style="fill: rgb(85, 107, 47)">
+ </rect>
+ <rect x="70px" y="20px" width="15px" height="15px"
+ style="fill: rgb(85, 107, 47)">
+ </rect>
+ <rect x="120px" y="20px" width="15px" height="15px"
+ style="fill: rgb(92, 119, 59)">
+ </rect>
+ <rect x="20px" y="70px" width="15px" height="15px"
+ style="fill: rgb(103, 137, 77)">
+ </rect>
+ <rect x="70px" y="70px" width="15px" height="15px"
+ style="fill: rgb(108, 146, 86)">
+ </rect>
+ <rect x="120px" y="70px" width="15px" height="15px"
+ style="fill: rgb(120, 166, 106)">
+ </rect>
+ <rect x="20px" y="120px" width="15px" height="15px"
+ style="fill: rgb(123, 170, 110)">
+ </rect>
+ <rect x="70px" y="120px" width="15px" height="15px"
+ style="fill: rgb(132, 186, 126)">
+ </rect>
+ <rect x="120px" y="120px" width="15px" height="15px"
+ style="fill: rgb(132, 186, 126)">
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fill-overflow-1-by.svg b/layout/reftests/svg/smil/style/anim-css-fill-overflow-1-by.svg
new file mode 100644
index 0000000000..d65f963b33
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fill-overflow-1-by.svg
@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="go()">
+ <!-- This is a series of snapshots of a color animation, starting at -->
+ <!-- YellowGreen (#9ACD32 == rgb(154,205,50)) and increasing each -->
+ <!-- channel beyond its maximum. (which should clamp it to 255) -->
+ <style>
+ rect { fill: yellowgreen; stroke: black; }
+ </style>
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "fill",
+ "by" : "rgb(200, 100, 250)" };
+ testAnimatedRectGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fill-overflow-1-from-by.svg b/layout/reftests/svg/smil/style/anim-css-fill-overflow-1-from-by.svg
new file mode 100644
index 0000000000..df06aea2de
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fill-overflow-1-from-by.svg
@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="go()">
+ <!-- This is a series of snapshots of a color animation, starting at -->
+ <!-- YellowGreen (#9ACD32 == rgb(154,205,50)) and increasing each -->
+ <!-- channel beyond its maximum. (which should clamp it to 255) -->
+ <style>
+ rect { fill: yellowgreen; stroke: black; }
+ </style>
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "fill",
+ "from" : "yellowgreen",
+ "by" : "rgb(200, 100, 250)" };
+ testAnimatedRectGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fill-overflow-1-ref.svg b/layout/reftests/svg/smil/style/anim-css-fill-overflow-1-ref.svg
new file mode 100644
index 0000000000..917bfef9f5
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fill-overflow-1-ref.svg
@@ -0,0 +1,32 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <style>
+ rect { stroke: black; }
+ </style>
+ <rect x="20px" y="20px" width="15px" height="15px"
+ style="fill: yellowgreen">
+ </rect>
+ <rect x="70px" y="20px" width="15px" height="15px"
+ style="fill: yellowgreen">
+ </rect>
+ <rect x="120px" y="20px" width="15px" height="15px"
+ style="fill: rgb(184, 220, 88)">
+ </rect>
+ <rect x="20px" y="70px" width="15px" height="15px"
+ style="fill: rgb(229, 243, 144)">
+ </rect>
+ <rect x="70px" y="70px" width="15px" height="15px"
+ style="fill: rgb(253, 255, 174)">
+ </rect>
+ <rect x="120px" y="70px" width="15px" height="15px"
+ style="fill: rgb(255, 255, 238)">
+ </rect>
+ <rect x="20px" y="120px" width="15px" height="15px"
+ style="fill: rgb(255, 255, 250)">
+ </rect>
+ <rect x="70px" y="120px" width="15px" height="15px"
+ style="fill: rgb(255, 255, 255)">
+ </rect>
+ <rect x="120px" y="120px" width="15px" height="15px"
+ style="fill: rgb(255, 255, 255)">
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fillopacity-1-by.svg b/layout/reftests/svg/smil/style/anim-css-fillopacity-1-by.svg
new file mode 100644
index 0000000000..fc3f4b042e
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fillopacity-1-by.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="go()">
+ <style>
+ rect { fill: blue; stroke: black; }
+ </style>
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "fill-opacity",
+ "by" : "-1" };
+ testAnimatedRectGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fillopacity-1-from-by.svg b/layout/reftests/svg/smil/style/anim-css-fillopacity-1-from-by.svg
new file mode 100644
index 0000000000..39e03b8db2
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fillopacity-1-from-by.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="go()">
+ <style>
+ rect { fill: blue; stroke: black; }
+ </style>
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "fill-opacity",
+ "from" : "1",
+ "by" : "-1" };
+ testAnimatedRectGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fillopacity-1-from-to.svg b/layout/reftests/svg/smil/style/anim-css-fillopacity-1-from-to.svg
new file mode 100644
index 0000000000..2ec29db9b2
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fillopacity-1-from-to.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="go()">
+ <style>
+ rect { fill: blue; stroke: black; }
+ </style>
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "fill-opacity",
+ "from" : "1",
+ "to" : "0" };
+ testAnimatedRectGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fillopacity-1-ref.svg b/layout/reftests/svg/smil/style/anim-css-fillopacity-1-ref.svg
new file mode 100644
index 0000000000..f35de241c1
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fillopacity-1-ref.svg
@@ -0,0 +1,32 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <style>
+ rect { fill: blue; stroke: black; }
+ </style>
+ <rect x="20px" y="20px" width="15px" height="15px"
+ style="fill-opacity: 1">
+ </rect>
+ <rect x="70px" y="20px" width="15px" height="15px"
+ style="fill-opacity: 1">
+ </rect>
+ <rect x="120px" y="20px" width="15px" height="15px"
+ style="fill-opacity: 0.85">
+ </rect>
+ <rect x="20px" y="70px" width="15px" height="15px"
+ style="fill-opacity: 0.625">
+ </rect>
+ <rect x="70px" y="70px" width="15px" height="15px"
+ style="fill-opacity: 0.505">
+ </rect>
+ <rect x="120px" y="70px" width="15px" height="15px"
+ style="fill-opacity: 0.25">
+ </rect>
+ <rect x="20px" y="120px" width="15px" height="15px"
+ style="fill-opacity: 0.2">
+ </rect>
+ <rect x="70px" y="120px" width="15px" height="15px"
+ style="fill-opacity: 0.0">
+ </rect>
+ <rect x="120px" y="120px" width="15px" height="15px"
+ style="fill-opacity: 0.0">
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fillopacity-1-to.svg b/layout/reftests/svg/smil/style/anim-css-fillopacity-1-to.svg
new file mode 100644
index 0000000000..110cbd6d82
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fillopacity-1-to.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="go()">
+ <style>
+ rect { fill: blue; stroke: black; }
+ </style>
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "fill-opacity",
+ "to" : "0" };
+ testAnimatedRectGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fillopacity-2-paced.svg b/layout/reftests/svg/smil/style/anim-css-fillopacity-2-paced.svg
new file mode 100644
index 0000000000..61ac49a8d1
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fillopacity-2-paced.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="go()">
+ <style>
+ rect { fill: blue; stroke: black; }
+ </style>
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "fill-opacity",
+ "calcMode" : "paced",
+ "values" : "0.6;0.1;0.95;0.3" };
+ testAnimatedRectGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fillopacity-2-ref.svg b/layout/reftests/svg/smil/style/anim-css-fillopacity-2-ref.svg
new file mode 100644
index 0000000000..c30942bcf6
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fillopacity-2-ref.svg
@@ -0,0 +1,32 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <style>
+ rect { fill: blue; stroke: black; }
+ </style>
+ <rect x="20px" y="20px" width="15px" height="15px"
+ style="fill-opacity: 1">
+ </rect>
+ <rect x="70px" y="20px" width="15px" height="15px"
+ style="fill-opacity: 0.6">
+ </rect>
+ <rect x="120px" y="20px" width="15px" height="15px"
+ style="fill-opacity: 0.3">
+ </rect>
+ <rect x="20px" y="70px" width="15px" height="15px"
+ style="fill-opacity: 0.35">
+ </rect>
+ <rect x="70px" y="70px" width="15px" height="15px"
+ style="fill-opacity: 0.59">
+ </rect>
+ <rect x="120px" y="70px" width="15px" height="15px"
+ style="fill-opacity: 0.8">
+ </rect>
+ <rect x="20px" y="120px" width="15px" height="15px"
+ style="fill-opacity: 0.7">
+ </rect>
+ <rect x="70px" y="120px" width="15px" height="15px"
+ style="fill-opacity: 0.3">
+ </rect>
+ <rect x="120px" y="120px" width="15px" height="15px"
+ style="fill-opacity: 0.3">
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fillopacity-3-clamp-big.svg b/layout/reftests/svg/smil/style/anim-css-fillopacity-3-clamp-big.svg
new file mode 100644
index 0000000000..0faec1156b
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fillopacity-3-clamp-big.svg
@@ -0,0 +1,27 @@
+<!--
+ This testcase checks that we don't clamp negative opacity values to their
+ valid range [0,1] until *after* we've done animation & interpolation.
+ If we clamped intermediate results too early (e.g. after parsing, during
+ interpolation, or right after we add the first animation's interpolated
+ value), we'd end up with the wrong intermediate opacity values here.
+ -->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="go()">
+ <style>
+ rect { fill: blue; stroke: black; }
+ </style>
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHashA = { "attributeName" : "fill-opacity",
+ "from" : "-0.4",
+ "by" : "1.2" };
+ var animAttrHashB = { "attributeName" : "fill-opacity",
+ "by" : "0.2" };
+ testAnimatedRectGrid("animate", [animAttrHashA, animAttrHashB]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fillopacity-3-clamp-small.svg b/layout/reftests/svg/smil/style/anim-css-fillopacity-3-clamp-small.svg
new file mode 100644
index 0000000000..d7ff87e20a
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fillopacity-3-clamp-small.svg
@@ -0,0 +1,27 @@
+<!--
+ This testcase checks that we don't clamp negative opacity values to their
+ valid range [0,1] until *after* we've done animation & interpolation.
+ If we clamped intermediate results too early (e.g. after parsing, during
+ interpolation, or right after we add the first animation's interpolated
+ value), we'd end up with the wrong intermediate opacity values here.
+ -->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="go()">
+ <style>
+ rect { fill: blue; stroke: black; }
+ </style>
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHashA = { "attributeName" : "fill-opacity",
+ "from" : "-0.4",
+ "by" : "0.6" };
+ var animAttrHashB = { "attributeName" : "fill-opacity",
+ "by" : "0.4" };
+ testAnimatedRectGrid("animate", [animAttrHashA, animAttrHashB]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fillopacity-3-ref.svg b/layout/reftests/svg/smil/style/anim-css-fillopacity-3-ref.svg
new file mode 100644
index 0000000000..bc089e43c4
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fillopacity-3-ref.svg
@@ -0,0 +1,32 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <style>
+ rect { fill: blue; stroke: black; }
+ </style>
+ <rect x="20px" y="20px" width="15px" height="15px"
+ style="fill-opacity: 1">
+ </rect>
+ <rect x="70px" y="20px" width="15px" height="15px"
+ style="fill-opacity: 0">
+ </rect>
+ <rect x="120px" y="20px" width="15px" height="15px"
+ style="fill-opacity: 0">
+ </rect>
+ <rect x="20px" y="70px" width="15px" height="15px"
+ style="fill-opacity: 0">
+ </rect>
+ <rect x="70px" y="70px" width="15px" height="15px"
+ style="fill-opacity: 0.095">
+ </rect>
+ <rect x="120px" y="70px" width="15px" height="15px"
+ style="fill-opacity: 0.35">
+ </rect>
+ <rect x="20px" y="120px" width="15px" height="15px"
+ style="fill-opacity: 0.4">
+ </rect>
+ <rect x="70px" y="120px" width="15px" height="15px"
+ style="fill-opacity: 0.6">
+ </rect>
+ <rect x="120px" y="120px" width="15px" height="15px"
+ style="fill-opacity: 0.6">
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-floodcolor-overflow-1-from-by.svg b/layout/reftests/svg/smil/style/anim-css-floodcolor-overflow-1-from-by.svg
new file mode 100644
index 0000000000..1def47fafd
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-floodcolor-overflow-1-from-by.svg
@@ -0,0 +1,26 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="go()">
+ <!-- This is a series of snapshots of a color animation, starting at -->
+ <!-- YellowGreen (#9ACD32 == rgb(154,205,50)) and increasing each -->
+ <!-- channel beyond its maximum. (which should clamp it to 255) -->
+ <style>
+ feFlood { flood-color: yellowgreen; }
+ </style>
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "flood-color",
+ "from" : "yellowgreen",
+ "by" : "rgb(200, 100, 250)" };
+ var graphicElemTag = "rect";
+ var graphicElemAttrHash = { "width" : "15px",
+ "height" : "15px" };
+ testAnimatedGridWithDefs(graphicElemTag, graphicElemAttrHash, "filter",
+ [ "filter", "feFlood" ],
+ "animate", [ animAttrHash ]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-floodcolor-overflow-1-ref.svg b/layout/reftests/svg/smil/style/anim-css-floodcolor-overflow-1-ref.svg
new file mode 100644
index 0000000000..27d0bcd56e
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-floodcolor-overflow-1-ref.svg
@@ -0,0 +1,40 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <defs>
+ <filter id="f0"><feFlood flood-color="yellowgreen" /></filter>
+ <filter id="f1"><feFlood flood-color="yellowgreen" /></filter>
+ <filter id="f2"><feFlood flood-color="rgb(184, 220, 88)" /></filter>
+ <filter id="f3"><feFlood flood-color="rgb(229, 243, 144)" /></filter>
+ <filter id="f4"><feFlood flood-color="rgb(253, 255, 174)" /></filter>
+ <filter id="f5"><feFlood flood-color="rgb(255, 255, 238)" /></filter>
+ <filter id="f6"><feFlood flood-color="rgb(255, 255, 250)" /></filter>
+ <filter id="f7"><feFlood flood-color="rgb(255, 255, 255)" /></filter>
+ <filter id="f8"><feFlood flood-color="rgb(255, 255, 255)" /></filter>
+ </defs>
+ <rect x="20px" y="20px" width="15px" height="15px"
+ style="filter:url(#f0)">
+ </rect>
+ <rect x="70px" y="20px" width="15px" height="15px"
+ style="filter:url(#f1)">
+ </rect>
+ <rect x="120px" y="20px" width="15px" height="15px"
+ style="filter:url(#f2)">
+ </rect>
+ <rect x="20px" y="70px" width="15px" height="15px"
+ style="filter:url(#f3)">
+ </rect>
+ <rect x="70px" y="70px" width="15px" height="15px"
+ style="filter:url(#f4)">
+ </rect>
+ <rect x="120px" y="70px" width="15px" height="15px"
+ style="filter:url(#f5)">
+ </rect>
+ <rect x="20px" y="120px" width="15px" height="15px"
+ style="filter:url(#f6)">
+ </rect>
+ <rect x="70px" y="120px" width="15px" height="15px"
+ style="filter:url(#f7)">
+ </rect>
+ <rect x="120px" y="120px" width="15px" height="15px"
+ style="filter:url(#f8)">
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-font-1-ref.svg b/layout/reftests/svg/smil/style/anim-css-font-1-ref.svg
new file mode 100644
index 0000000000..de028ec6be
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-font-1-ref.svg
@@ -0,0 +1,76 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="300px" height="400px">
+
+ <!-- 'inherit' to 'caption' -->
+ <text x="0px" y="50px" style="font: inherit">abc
+ </text>
+ <text x="50px" y="50px" style="font: inherit">abc
+ </text>
+ <text x="100px" y="50px" style="font: inherit">abc
+ </text>
+ <text x="150px" y="50px" style="font: caption">abc
+ </text>
+ <text x="200px" y="50px" style="font: caption">abc
+ </text>
+
+ <!-- 'caption' to 'inherit' -->
+ <text x="0px" y="100px" style="font: inherit">abc
+ </text>
+ <text x="50px" y="100px" style="font: caption">abc
+ </text>
+ <text x="100px" y="100px" style="font: caption">abc
+ </text>
+ <text x="150px" y="100px" style="font: inherit">abc
+ </text>
+ <text x="200px" y="100px" style="font: inherit">abc
+ </text>
+
+ <!-- 'caption' to 'icon' -->
+ <text x="0px" y="150px" style="font: inherit">abc
+ </text>
+ <text x="50px" y="150px" style="font: caption">abc
+ </text>
+ <text x="100px" y="150px" style="font: caption">abc
+ </text>
+ <text x="150px" y="150px" style="font: icon">abc
+ </text>
+ <text x="200px" y="150px" style="font: icon">abc
+ </text>
+
+ <!-- 'caption' to 'menu' -->
+ <text x="0px" y="200px" style="font: inherit">abc
+ </text>
+ <text x="50px" y="200px" style="font: caption">abc
+ </text>
+ <text x="100px" y="200px" style="font: caption">abc
+ </text>
+ <text x="150px" y="200px" style="font: menu">abc
+ </text>
+ <text x="200px" y="200px" style="font: menu">abc
+ </text>
+
+ <!-- 'caption' to 'message-box' -->
+ <text x="0px" y="250px" style="font: inherit">abc
+ </text>
+ <text x="50px" y="250px" style="font: caption">abc
+ </text>
+ <text x="100px" y="250px" style="font: caption">abc
+ </text>
+ <text x="150px" y="250px" style="font: message-box">abc
+ </text>
+ <text x="200px" y="250px" style="font: message-box">abc
+ </text>
+
+ <!-- 'caption' to 'small-caption' -->
+ <text x="0px" y="300px" style="font: inherit">abc
+ </text>
+ <text x="50px" y="300px" style="font: caption">abc
+ </text>
+ <text x="100px" y="300px" style="font: caption">abc
+ </text>
+ <text x="150px" y="300px" style="font: small-caption">abc
+ </text>
+ <text x="200px" y="300px" style="font: small-caption">abc
+ </text>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-font-1.svg b/layout/reftests/svg/smil/style/anim-css-font-1.svg
new file mode 100644
index 0000000000..0cd69258fd
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-font-1.svg
@@ -0,0 +1,144 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="300px" height="400px"
+ class="reftest-wait"
+ onload="go()">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ requestAnimationFrame(() => { setTimeAndSnapshot(3.0, true) });
+ }
+ </script>
+
+ <!-- 'inherit' to 'caption' -->
+ <text x="0px" y="50px">abc
+ <animate attributeName="font" attributeType="CSS" fill="freeze"
+ from="inherit" to="caption" begin="4.0s" dur="2s"/>
+ </text>
+ <text x="50px" y="50px">abc
+ <animate attributeName="font" attributeType="CSS" fill="freeze"
+ from="inherit" to="caption" begin="3.0s" dur="2s"/>
+ </text>
+ <text x="100px" y="50px">abc
+ <animate attributeName="font" attributeType="CSS" fill="freeze"
+ from="inherit" to="caption" begin="2.01s" dur="2s"/>
+ </text>
+ <text x="150px" y="50px">abc
+ <animate attributeName="font" attributeType="CSS" fill="freeze"
+ from="inherit" to="caption" begin="2.0s" dur="2s"/>
+ </text>
+ <text x="200px" y="50px">abc
+ <animate attributeName="font" attributeType="CSS" fill="freeze"
+ from="inherit" to="caption" begin="1.0s" dur="2s"/>
+ </text>
+
+ <!-- 'caption' to 'inherit' -->
+ <text x="0px" y="100px">abc
+ <animate attributeName="font" attributeType="CSS" fill="freeze"
+ from="caption" to="inherit" begin="4.0s" dur="2s"/>
+ </text>
+ <text x="50px" y="100px">abc
+ <animate attributeName="font" attributeType="CSS" fill="freeze"
+ from="caption" to="inherit" begin="3.0s" dur="2s"/>
+ </text>
+ <text x="100px" y="100px">abc
+ <animate attributeName="font" attributeType="CSS" fill="freeze"
+ from="caption" to="inherit" begin="2.01s" dur="2s"/>
+ </text>
+ <text x="150px" y="100px">abc
+ <animate attributeName="font" attributeType="CSS" fill="freeze"
+ from="caption" to="inherit" begin="2.0s" dur="2s"/>
+ </text>
+ <text x="200px" y="100px">abc
+ <animate attributeName="font" attributeType="CSS" fill="freeze"
+ from="caption" to="inherit" begin="1.0s" dur="2s"/>
+ </text>
+
+ <!-- 'caption' to 'icon' -->
+ <text x="0px" y="150px">abc
+ <animate attributeName="font" attributeType="CSS" fill="freeze"
+ from="caption" to="icon" begin="4.0s" dur="2s"/>
+ </text>
+ <text x="50px" y="150px">abc
+ <animate attributeName="font" attributeType="CSS" fill="freeze"
+ from="caption" to="icon" begin="3.0s" dur="2s"/>
+ </text>
+ <text x="100px" y="150px">abc
+ <animate attributeName="font" attributeType="CSS" fill="freeze"
+ from="caption" to="icon" begin="2.01s" dur="2s"/>
+ </text>
+ <text x="150px" y="150px">abc
+ <animate attributeName="font" attributeType="CSS" fill="freeze"
+ from="caption" to="icon" begin="2.0s" dur="2s"/>
+ </text>
+ <text x="200px" y="150px">abc
+ <animate attributeName="font" attributeType="CSS" fill="freeze"
+ from="caption" to="icon" begin="1.0s" dur="2s"/>
+ </text>
+
+ <!-- 'caption' to 'menu' -->
+ <text x="0px" y="200px">abc
+ <animate attributeName="font" attributeType="CSS" fill="freeze"
+ from="caption" to="menu" begin="4.0s" dur="2s"/>
+ </text>
+ <text x="50px" y="200px">abc
+ <animate attributeName="font" attributeType="CSS" fill="freeze"
+ from="caption" to="menu" begin="3.0s" dur="2s"/>
+ </text>
+ <text x="100px" y="200px">abc
+ <animate attributeName="font" attributeType="CSS" fill="freeze"
+ from="caption" to="menu" begin="2.01s" dur="2s"/>
+ </text>
+ <text x="150px" y="200px">abc
+ <animate attributeName="font" attributeType="CSS" fill="freeze"
+ from="caption" to="menu" begin="2.0s" dur="2s"/>
+ </text>
+ <text x="200px" y="200px">abc
+ <animate attributeName="font" attributeType="CSS" fill="freeze"
+ from="caption" to="menu" begin="1.0s" dur="2s"/>
+ </text>
+
+ <!-- 'caption' to 'message-box' -->
+ <text x="0px" y="250px">abc
+ <animate attributeName="font" attributeType="CSS" fill="freeze"
+ from="caption" to="message-box" begin="4.0s" dur="2s"/>
+ </text>
+ <text x="50px" y="250px">abc
+ <animate attributeName="font" attributeType="CSS" fill="freeze"
+ from="caption" to="message-box" begin="3.0s" dur="2s"/>
+ </text>
+ <text x="100px" y="250px">abc
+ <animate attributeName="font" attributeType="CSS" fill="freeze"
+ from="caption" to="message-box" begin="2.01s" dur="2s"/>
+ </text>
+ <text x="150px" y="250px">abc
+ <animate attributeName="font" attributeType="CSS" fill="freeze"
+ from="caption" to="message-box" begin="2.0s" dur="2s"/>
+ </text>
+ <text x="200px" y="250px">abc
+ <animate attributeName="font" attributeType="CSS" fill="freeze"
+ from="caption" to="message-box" begin="1.0s" dur="2s"/>
+ </text>
+
+ <!-- 'caption' to 'small-caption' -->
+ <text x="0px" y="300px">abc
+ <animate attributeName="font" attributeType="CSS" fill="freeze"
+ from="caption" to="small-caption" begin="4.0s" dur="2s"/>
+ </text>
+ <text x="50px" y="300px">abc
+ <animate attributeName="font" attributeType="CSS" fill="freeze"
+ from="caption" to="small-caption" begin="3.0s" dur="2s"/>
+ </text>
+ <text x="100px" y="300px">abc
+ <animate attributeName="font" attributeType="CSS" fill="freeze"
+ from="caption" to="small-caption" begin="2.01s" dur="2s"/>
+ </text>
+ <text x="150px" y="300px">abc
+ <animate attributeName="font" attributeType="CSS" fill="freeze"
+ from="caption" to="small-caption" begin="2.0s" dur="2s"/>
+ </text>
+ <text x="200px" y="300px">abc
+ <animate attributeName="font" attributeType="CSS" fill="freeze"
+ from="caption" to="small-caption" begin="1.0s" dur="2s"/>
+ </text>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-by-pct-pct.svg b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-by-pct-pct.svg
new file mode 100644
index 0000000000..38afe61f07
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-by-pct-pct.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ style="font-size: 2px"
+ class="reftest-wait"
+ onload="go()">
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "font-size",
+ "from" : "500%",
+ "by" : "1000%" };
+ testAnimatedTextGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-by-pct-px.svg b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-by-pct-px.svg
new file mode 100644
index 0000000000..ea4d7c3e8c
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-by-pct-px.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ style="font-size: 2px"
+ class="reftest-wait"
+ onload="go()">
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "font-size",
+ "from" : "500%",
+ "by" : "20px" };
+ testAnimatedTextGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-by-px-pct.svg b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-by-px-pct.svg
new file mode 100644
index 0000000000..8e4b6d5866
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-by-px-pct.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ style="font-size: 2px"
+ class="reftest-wait"
+ onload="go()">
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "font-size",
+ "from" : "10px",
+ "by" : "1000%" };
+ testAnimatedTextGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-by-px-px.svg b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-by-px-px.svg
new file mode 100644
index 0000000000..637c49e318
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-by-px-px.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ style="font-size: 2px"
+ class="reftest-wait"
+ onload="go()">
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "font-size",
+ "from" : "10px",
+ "by" : "20px" };
+ testAnimatedTextGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-no-no.svg b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-no-no.svg
new file mode 100644
index 0000000000..2b4e18030e
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-no-no.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ style="font-size: 2px"
+ class="reftest-wait"
+ onload="go()">
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "font-size",
+ "attributeType" : "CSS",
+ "from" : "10",
+ "to" : "30" };
+ testAnimatedTextGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-no-px.svg b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-no-px.svg
new file mode 100644
index 0000000000..7ced25e9af
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-no-px.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ style="font-size: 2px"
+ class="reftest-wait"
+ onload="go()">
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "font-size",
+ "attributeType" : "CSS",
+ "from" : "10",
+ "to" : "30px" };
+ testAnimatedTextGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-pct-pct.svg b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-pct-pct.svg
new file mode 100644
index 0000000000..0cf6c0cf36
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-pct-pct.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ style="font-size: 2px"
+ class="reftest-wait"
+ onload="go()">
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "font-size",
+ "from" : "500%",
+ "to" : "1500%" };
+ testAnimatedTextGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-pct-px.svg b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-pct-px.svg
new file mode 100644
index 0000000000..fc4ff3afd1
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-pct-px.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ style="font-size: 2px"
+ class="reftest-wait"
+ onload="go()">
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "font-size",
+ "from" : "500%",
+ "to" : "30px" };
+ testAnimatedTextGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-px-no.svg b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-px-no.svg
new file mode 100644
index 0000000000..56e51eeab7
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-px-no.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ style="font-size: 2px"
+ class="reftest-wait"
+ onload="go()">
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "font-size",
+ "attributeType" : "CSS",
+ "from" : "10px",
+ "to" : "30" };
+ testAnimatedTextGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-px-pct.svg b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-px-pct.svg
new file mode 100644
index 0000000000..94c195c2f3
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-px-pct.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ style="font-size: 2px"
+ class="reftest-wait"
+ onload="go()">
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "font-size",
+ "from" : "10px",
+ "to" : "1500%" };
+ testAnimatedTextGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-px-px.svg b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-px-px.svg
new file mode 100644
index 0000000000..7158f64644
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-px-px.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ style="font-size: 2px"
+ class="reftest-wait"
+ onload="go()">
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "font-size",
+ "from" : "10px",
+ "to" : "30px" };
+ testAnimatedTextGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fontsize-1-ref.svg b/layout/reftests/svg/smil/style/anim-css-fontsize-1-ref.svg
new file mode 100644
index 0000000000..4747c2824c
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fontsize-1-ref.svg
@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <text x="20px" y="20px" style="font-size: 2px">abc
+ </text>
+ <text x="70px" y="20px" style="font-size: 10px">abc
+ </text>
+ <text x="120px" y="20px" style="font-size: 13px">abc
+ </text>
+ <text x="20px" y="70px" style="font-size: 17.5px">abc
+ </text>
+ <text x="70px" y="70px" style="font-size: 19.9px">abc
+ </text>
+ <text x="120px" y="70px" style="font-size: 25px">abc
+ </text>
+ <text x="20px" y="120px" style="font-size: 26px">abc
+ </text>
+ <text x="70px" y="120px" style="font-size: 30px">abc
+ </text>
+ <text x="120px" y="120px" style="font-size: 30px">abc
+ </text>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fontsize-2-from-by-em-em.svg b/layout/reftests/svg/smil/style/anim-css-fontsize-2-from-by-em-em.svg
new file mode 100644
index 0000000000..3fe3ae0ce9
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fontsize-2-from-by-em-em.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ style="font-size: 2px"
+ class="reftest-wait"
+ onload="go()">
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "font-size",
+ "from" : "15em",
+ "by" : "-10em" };
+ testAnimatedTextGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fontsize-2-from-by-px-em.svg b/layout/reftests/svg/smil/style/anim-css-fontsize-2-from-by-px-em.svg
new file mode 100644
index 0000000000..44b407e185
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fontsize-2-from-by-px-em.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ style="font-size: 2px"
+ class="reftest-wait"
+ onload="go()">
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "font-size",
+ "from" : "30px",
+ "by" : "-10em" };
+ testAnimatedTextGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fontsize-2-from-by-px-px.svg b/layout/reftests/svg/smil/style/anim-css-fontsize-2-from-by-px-px.svg
new file mode 100644
index 0000000000..70199be78b
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fontsize-2-from-by-px-px.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ style="font-size: 2px"
+ class="reftest-wait"
+ onload="go()">
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "font-size",
+ "from" : "30px",
+ "by" : "-20px" };
+ testAnimatedTextGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-fontsize-2-ref.svg b/layout/reftests/svg/smil/style/anim-css-fontsize-2-ref.svg
new file mode 100644
index 0000000000..6edb8deff6
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-fontsize-2-ref.svg
@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <text x="20px" y="20px" style="font-size: 2px">abc
+ </text>
+ <text x="70px" y="20px" style="font-size: 30px">abc
+ </text>
+ <text x="120px" y="20px" style="font-size: 27px">abc
+ </text>
+ <text x="20px" y="70px" style="font-size: 22.5px">abc
+ </text>
+ <text x="70px" y="70px" style="font-size: 20.1px">abc
+ </text>
+ <text x="120px" y="70px" style="font-size: 15px">abc
+ </text>
+ <text x="20px" y="120px" style="font-size: 14px">abc
+ </text>
+ <text x="70px" y="120px" style="font-size: 10px">abc
+ </text>
+ <text x="120px" y="120px" style="font-size: 10px">abc
+ </text>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-letterspacing-1-ref.svg b/layout/reftests/svg/smil/style/anim-css-letterspacing-1-ref.svg
new file mode 100644
index 0000000000..b56522931c
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-letterspacing-1-ref.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <text x="50" y="50" font-size="20" letter-spacing="15">abc</text>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-letterspacing-1.svg b/layout/reftests/svg/smil/style/anim-css-letterspacing-1.svg
new file mode 100644
index 0000000000..e10d430cf0
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-letterspacing-1.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait" onload="setTimeAndSnapshot(3.0, true)">
+ <script xlink:href="../smil-util.js"/>
+ <text x="50" y="50" font-size="20">abc
+ <animate attributeName="letter-spacing" fill="freeze" from="0" to="20" begin="0s" dur="4s"/>
+ </text>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-stopcolor-overflow-1-from-by.svg b/layout/reftests/svg/smil/style/anim-css-stopcolor-overflow-1-from-by.svg
new file mode 100644
index 0000000000..da3ace6784
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-stopcolor-overflow-1-from-by.svg
@@ -0,0 +1,27 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="go()">
+ <!-- This is a series of snapshots of a color animation, starting at -->
+ <!-- YellowGreen (#9ACD32 == rgb(154,205,50)) and increasing each -->
+ <!-- channel beyond its maximum. (which should clamp it to 255) -->
+ <style>
+ stop { stop-color: yellowgreen; }
+ rect { stroke: black; }
+ </style>
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "stop-color",
+ "from" : "yellowgreen",
+ "by" : "rgb(200, 100, 250)" };
+ var graphicElemTag = "rect";
+ var graphicElemAttrHash = { "width" : "15px",
+ "height" : "15px" };
+ testAnimatedGridWithDefs(graphicElemTag, graphicElemAttrHash, "fill",
+ [ "linearGradient", "stop" ],
+ "animate", [ animAttrHash ]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-stopcolor-overflow-1-ref.svg b/layout/reftests/svg/smil/style/anim-css-stopcolor-overflow-1-ref.svg
new file mode 100644
index 0000000000..917bfef9f5
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-stopcolor-overflow-1-ref.svg
@@ -0,0 +1,32 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <style>
+ rect { stroke: black; }
+ </style>
+ <rect x="20px" y="20px" width="15px" height="15px"
+ style="fill: yellowgreen">
+ </rect>
+ <rect x="70px" y="20px" width="15px" height="15px"
+ style="fill: yellowgreen">
+ </rect>
+ <rect x="120px" y="20px" width="15px" height="15px"
+ style="fill: rgb(184, 220, 88)">
+ </rect>
+ <rect x="20px" y="70px" width="15px" height="15px"
+ style="fill: rgb(229, 243, 144)">
+ </rect>
+ <rect x="70px" y="70px" width="15px" height="15px"
+ style="fill: rgb(253, 255, 174)">
+ </rect>
+ <rect x="120px" y="70px" width="15px" height="15px"
+ style="fill: rgb(255, 255, 238)">
+ </rect>
+ <rect x="20px" y="120px" width="15px" height="15px"
+ style="fill: rgb(255, 255, 250)">
+ </rect>
+ <rect x="70px" y="120px" width="15px" height="15px"
+ style="fill: rgb(255, 255, 255)">
+ </rect>
+ <rect x="120px" y="120px" width="15px" height="15px"
+ style="fill: rgb(255, 255, 255)">
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokedasharray-1-ref.svg b/layout/reftests/svg/smil/style/anim-css-strokedasharray-1-ref.svg
new file mode 100644
index 0000000000..d2cfe9b4bb
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokedasharray-1-ref.svg
@@ -0,0 +1,32 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <style>
+ rect { stroke: blue; stroke-width: 5px; }
+ </style>
+ <rect x="20px" y="20px" width="15px" height="15px"
+ style="stroke-dasharray: 20px, 5px">
+ </rect>
+ <rect x="70px" y="20px" width="15px" height="15px"
+ style="stroke-dasharray: 20px, 5px">
+ </rect>
+ <rect x="120px" y="20px" width="15px" height="15px"
+ style="stroke-dasharray: 18.5px, 6.5px">
+ </rect>
+ <rect x="20px" y="70px" width="15px" height="15px"
+ style="stroke-dasharray: 16.25px, 8.75px">
+ </rect>
+ <rect x="70px" y="70px" width="15px" height="15px"
+ style="stroke-dasharray: 15.05px, 9.95px">
+ </rect>
+ <rect x="120px" y="70px" width="15px" height="15px"
+ style="stroke-dasharray: 12.5px, 12.5px">
+ </rect>
+ <rect x="20px" y="120px" width="15px" height="15px"
+ style="stroke-dasharray: 12px, 13px">
+ </rect>
+ <rect x="70px" y="120px" width="15px" height="15px"
+ style="stroke-dasharray: 10px, 15px">
+ </rect>
+ <rect x="120px" y="120px" width="15px" height="15px"
+ style="stroke-dasharray: 10px, 15px">
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokedasharray-1.svg b/layout/reftests/svg/smil/style/anim-css-strokedasharray-1.svg
new file mode 100644
index 0000000000..9488f6546e
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokedasharray-1.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="go()">
+ <style>
+ rect { stroke: blue; stroke-width: 5px; }
+ </style>
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "stroke-dasharray",
+ "from" : "20px, 5px",
+ "to" : "10px, 15px" };
+ testAnimatedRectGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-em-em.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-em-em.svg
new file mode 100644
index 0000000000..1472123ee7
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-em-em.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ style="font-size: 2px"
+ class="reftest-wait"
+ onload="go()">
+ <style>
+ rect { stroke: blue; stroke-width: 5em; shape-rendering: crispEdges; }
+ </style>
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "stroke-width",
+ "by" : "10em" };
+ testAnimatedRectGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-em-px.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-em-px.svg
new file mode 100644
index 0000000000..2b6a983f2d
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-em-px.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ style="font-size: 2px"
+ class="reftest-wait"
+ onload="go()">
+ <style>
+ rect { stroke: blue; stroke-width: 5em; shape-rendering: crispEdges; }
+ </style>
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "stroke-width",
+ "by" : "20px" };
+ testAnimatedRectGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-no-no.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-no-no.svg
new file mode 100644
index 0000000000..0ae489d628
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-no-no.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="go()">
+ <style>
+ rect { stroke: blue; stroke-width: 10; shape-rendering: crispEdges; }
+ </style>
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "stroke-width",
+ "by" : "20" };
+ testAnimatedRectGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-pct-pct.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-pct-pct.svg
new file mode 100644
index 0000000000..e9e1cc2d6e
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-pct-pct.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="200px" height="200px"
+ class="reftest-wait"
+ onload="go()">
+ <style>
+ rect { stroke: blue; stroke-width: 5%; shape-rendering: crispEdges; }
+ </style>
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "stroke-width",
+ "by" : "10%" };
+ testAnimatedRectGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-pct-px.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-pct-px.svg
new file mode 100644
index 0000000000..3199059764
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-pct-px.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="200px" height="200px"
+ class="reftest-wait"
+ onload="go()">
+ <style>
+ rect { stroke: blue; stroke-width: 5%; }
+ </style>
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "stroke-width",
+ "by" : "20px" };
+ testAnimatedRectGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-px-em.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-px-em.svg
new file mode 100644
index 0000000000..f1a918ea75
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-px-em.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ style="font-size: 2px"
+ class="reftest-wait"
+ onload="go()">
+ <style>
+ rect { stroke: blue; stroke-width: 10px; shape-rendering: crispEdges; }
+ </style>
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "stroke-width",
+ "by" : "10em" };
+ testAnimatedRectGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-px-pct.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-px-pct.svg
new file mode 100644
index 0000000000..076e49adf4
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-px-pct.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="200px" height="200px"
+ class="reftest-wait"
+ onload="go()">
+ <style>
+ rect { stroke: blue; stroke-width: 10px; }
+ </style>
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "stroke-width",
+ "by" : "10%" };
+ testAnimatedRectGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-px-px.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-px-px.svg
new file mode 100644
index 0000000000..65d3bbc6e9
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-px-px.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="go()">
+ <style>
+ rect { stroke: blue; stroke-width: 10px; shape-rendering: crispEdges; }
+ </style>
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "stroke-width",
+ "by" : "20px" };
+ testAnimatedRectGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-em-em.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-em-em.svg
new file mode 100644
index 0000000000..2058d83661
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-em-em.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ style="font-size: 2px"
+ class="reftest-wait"
+ onload="go()">
+ <style>
+ rect { stroke: blue; stroke-width: 10px; shape-rendering: crispEdges; }
+ </style>
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "stroke-width",
+ "from" : "5em",
+ "by" : "10em" };
+ testAnimatedRectGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-em-px.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-em-px.svg
new file mode 100644
index 0000000000..e37bc12cf3
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-em-px.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ style="font-size: 2px"
+ class="reftest-wait"
+ onload="go()">
+ <style>
+ rect { stroke: blue; stroke-width: 10px; shape-rendering: crispEdges; }
+ </style>
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "stroke-width",
+ "from" : "5em",
+ "by" : "20px" };
+ testAnimatedRectGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-no-no.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-no-no.svg
new file mode 100644
index 0000000000..0c1afad42b
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-no-no.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="go()">
+ <style>
+ rect { stroke: blue; stroke-width: 10px; shape-rendering: crispEdges; }
+ </style>
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "stroke-width",
+ "from" : "10",
+ "by" : "20" };
+ testAnimatedRectGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-pct-pct.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-pct-pct.svg
new file mode 100644
index 0000000000..76e5c1e520
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-pct-pct.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="200px" height="200px"
+ class="reftest-wait"
+ onload="go()">
+ <style>
+ rect { stroke: blue; stroke-width: 5%; shape-rendering: crispEdges; }
+ </style>
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "stroke-width",
+ "from" : "5%",
+ "by" : "10%" };
+ testAnimatedRectGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-pct-px.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-pct-px.svg
new file mode 100644
index 0000000000..3394572e76
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-pct-px.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="200px" height="200px"
+ class="reftest-wait"
+ onload="go()">
+ <style>
+ rect { stroke: blue; stroke-width: 5%; }
+ </style>
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "stroke-width",
+ "from" : "5%",
+ "by" : "20px" };
+ testAnimatedRectGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-px-em.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-px-em.svg
new file mode 100644
index 0000000000..3e26f8973a
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-px-em.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ style="font-size: 2px"
+ class="reftest-wait"
+ onload="go()">
+ <style>
+ rect { stroke: blue; stroke-width: 10px; shape-rendering: crispEdges; }
+ </style>
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "stroke-width",
+ "from" : "10px",
+ "by" : "10em" };
+ testAnimatedRectGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-px-pct.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-px-pct.svg
new file mode 100644
index 0000000000..66c0f137ba
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-px-pct.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="200px" height="200px"
+ class="reftest-wait"
+ onload="go()">
+ <style>
+ rect { stroke: blue; stroke-width: 10px; }
+ </style>
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "stroke-width",
+ "from" : "10px",
+ "by" : "10%" };
+ testAnimatedRectGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-px-px.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-px-px.svg
new file mode 100644
index 0000000000..e4bba5ae2e
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-px-px.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="go()">
+ <style>
+ rect { stroke: blue; stroke-width: 10px; shape-rendering: crispEdges; }
+ </style>
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "stroke-width",
+ "from" : "10px",
+ "by" : "20px" };
+ testAnimatedRectGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-em-em.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-em-em.svg
new file mode 100644
index 0000000000..7e7d035739
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-em-em.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ style="font-size: 2px"
+ class="reftest-wait"
+ onload="go()">
+ <style>
+ rect { stroke: blue; stroke-width: 10px; shape-rendering: crispEdges; }
+ </style>
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "stroke-width",
+ "from" : "5em",
+ "to" : "15em" };
+ testAnimatedRectGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-em-px.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-em-px.svg
new file mode 100644
index 0000000000..5c538b65b4
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-em-px.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ style="font-size: 2px"
+ class="reftest-wait"
+ onload="go()">
+ <style>
+ rect { stroke: blue; stroke-width: 10px; shape-rendering: crispEdges; }
+ </style>
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "stroke-width",
+ "from" : "5em",
+ "to" : "30px" };
+ testAnimatedRectGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-no-no.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-no-no.svg
new file mode 100644
index 0000000000..1f4e5d09a2
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-no-no.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="go()">
+ <style>
+ rect { stroke: blue; stroke-width: 10px; shape-rendering: crispEdges; }
+ </style>
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "stroke-width",
+ "from" : "10",
+ "to" : "30" };
+ testAnimatedRectGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-pct-pct.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-pct-pct.svg
new file mode 100644
index 0000000000..0da954bb54
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-pct-pct.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="200px" height="200px"
+ class="reftest-wait"
+ onload="go()">
+ <style>
+ rect { stroke: blue; stroke-width: 5%; shape-rendering: crispEdges; }
+ </style>
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "stroke-width",
+ "from" : "5%",
+ "to" : "15%" };
+ testAnimatedRectGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-pct-px.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-pct-px.svg
new file mode 100644
index 0000000000..37afdef686
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-pct-px.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="200px" height="200px"
+ class="reftest-wait"
+ onload="go()">
+ <style>
+ rect { stroke: blue; stroke-width: 5%; }
+ </style>
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "stroke-width",
+ "from" : "5%",
+ "to" : "30px" };
+ testAnimatedRectGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-px-em.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-px-em.svg
new file mode 100644
index 0000000000..4dd6908d09
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-px-em.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ style="font-size: 2px"
+ class="reftest-wait"
+ onload="go()">
+ <style>
+ rect { stroke: blue; stroke-width: 10px; shape-rendering: crispEdges; }
+ </style>
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "stroke-width",
+ "from" : "10px",
+ "to" : "15em" };
+ testAnimatedRectGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-px-pct.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-px-pct.svg
new file mode 100644
index 0000000000..3c0b237f08
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-px-pct.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="200px" height="200px"
+ class="reftest-wait"
+ onload="go()">
+ <style>
+ rect { stroke: blue; stroke-width: 10px; }
+ </style>
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "stroke-width",
+ "from" : "10px",
+ "to" : "15%" };
+ testAnimatedRectGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-px-px.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-px-px.svg
new file mode 100644
index 0000000000..2e4631b7a4
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-px-px.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="go()">
+ <style>
+ rect { stroke: blue; stroke-width: 10px; shape-rendering: crispEdges; }
+ </style>
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "stroke-width",
+ "from" : "10px",
+ "to" : "30px" };
+ testAnimatedRectGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-ref.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-ref.svg
new file mode 100644
index 0000000000..0c6ad16742
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-ref.svg
@@ -0,0 +1,29 @@
+<svg xmlns="http://www.w3.org/2000/svg" shape-rendering="crispEdges">
+ <rect x="20px" y="20px" width="15px" height="15px" stroke="blue"
+ style="stroke-width: 10px">
+ </rect>
+ <rect x="70px" y="20px" width="15px" height="15px" stroke="blue"
+ style="stroke-width: 10px">
+ </rect>
+ <rect x="120px" y="20px" width="15px" height="15px" stroke="blue"
+ style="stroke-width: 13px">
+ </rect>
+ <rect x="20px" y="70px" width="15px" height="15px" stroke="blue"
+ style="stroke-width: 17.5px">
+ </rect>
+ <rect x="70px" y="70px" width="15px" height="15px" stroke="blue"
+ style="stroke-width: 19.9px">
+ </rect>
+ <rect x="120px" y="70px" width="15px" height="15px" stroke="blue"
+ style="stroke-width: 25px">
+ </rect>
+ <rect x="20px" y="120px" width="15px" height="15px" stroke="blue"
+ style="stroke-width: 26px">
+ </rect>
+ <rect x="70px" y="120px" width="15px" height="15px" stroke="blue"
+ style="stroke-width: 30px">
+ </rect>
+ <rect x="120px" y="120px" width="15px" height="15px" stroke="blue"
+ style="stroke-width: 30px">
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-em-em.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-em-em.svg
new file mode 100644
index 0000000000..07df6d5a1a
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-em-em.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ style="font-size: 2px"
+ class="reftest-wait"
+ onload="go()">
+ <style>
+ rect { stroke: blue; stroke-width: 5em; shape-rendering: crispEdges; }
+ </style>
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "stroke-width",
+ "to" : "15em" };
+ testAnimatedRectGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-em-px.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-em-px.svg
new file mode 100644
index 0000000000..56ffff8d02
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-em-px.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ style="font-size: 2px"
+ class="reftest-wait"
+ onload="go()">
+ <style>
+ rect { stroke: blue; stroke-width: 5em; shape-rendering: crispEdges; }
+ </style>
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "stroke-width",
+ "to" : "30px" };
+ testAnimatedRectGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-no-no.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-no-no.svg
new file mode 100644
index 0000000000..7784dd6ca2
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-no-no.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="go()">
+ <style>
+ rect { stroke: blue; stroke-width: 10; shape-rendering: crispEdges; }
+ </style>
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "stroke-width",
+ "to" : "30" };
+ testAnimatedRectGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-pct-pct.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-pct-pct.svg
new file mode 100644
index 0000000000..d44e56b499
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-pct-pct.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="200px" height="200px"
+ class="reftest-wait"
+ onload="go()">
+ <style>
+ rect { stroke: blue; stroke-width: 5%; shape-rendering: crispEdges; }
+ </style>
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "stroke-width",
+ "to" : "15%" };
+ testAnimatedRectGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-pct-px.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-pct-px.svg
new file mode 100644
index 0000000000..9d00d27444
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-pct-px.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="200px" height="200px"
+ class="reftest-wait"
+ onload="go()">
+ <style>
+ rect { stroke: blue; stroke-width: 5%; }
+ </style>
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "stroke-width",
+ "to" : "30px" };
+ testAnimatedRectGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-px-em.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-px-em.svg
new file mode 100644
index 0000000000..17d5b76284
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-px-em.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ style="font-size: 2px"
+ class="reftest-wait"
+ onload="go()">
+ <style>
+ rect { stroke: blue; stroke-width: 10px; shape-rendering: crispEdges; }
+ </style>
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "stroke-width",
+ "to" : "15em" };
+ testAnimatedRectGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-px-pct.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-px-pct.svg
new file mode 100644
index 0000000000..c7dd235f25
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-px-pct.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="200px" height="200px"
+ class="reftest-wait"
+ onload="go()">
+ <style>
+ rect { stroke: blue; stroke-width: 10px; }
+ </style>
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "stroke-width",
+ "to" : "15%" };
+ testAnimatedRectGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-px-px.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-px-px.svg
new file mode 100644
index 0000000000..5121cb2bf0
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-px-px.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="go()">
+ <style>
+ rect { stroke: blue; stroke-width: 10px; shape-rendering: crispEdges; }
+ </style>
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "stroke-width",
+ "to" : "30px" };
+ testAnimatedRectGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-2-ref.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-2-ref.svg
new file mode 100644
index 0000000000..fc16e65154
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-2-ref.svg
@@ -0,0 +1,29 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <rect x="20px" y="20px" width="15px" height="15px" stroke="blue"
+ style="stroke-width: 10px">
+ </rect>
+ <rect x="70px" y="20px" width="15px" height="15px" stroke="blue"
+ style="stroke-width: 20px">
+ </rect>
+ <rect x="120px" y="20px" width="15px" height="15px" stroke="blue"
+ style="stroke-width: 17px">
+ </rect>
+ <rect x="20px" y="70px" width="15px" height="15px" stroke="blue"
+ style="stroke-width: 12.5px">
+ </rect>
+ <rect x="70px" y="70px" width="15px" height="15px" stroke="blue"
+ style="stroke-width: 10.1px">
+ </rect>
+ <rect x="120px" y="70px" width="15px" height="15px" stroke="blue"
+ style="stroke-width: 20px">
+ </rect>
+ <rect x="20px" y="120px" width="15px" height="15px" stroke="blue"
+ style="stroke-width: 22px">
+ </rect>
+ <rect x="70px" y="120px" width="15px" height="15px" stroke="blue"
+ style="stroke-width: 30px">
+ </rect>
+ <rect x="120px" y="120px" width="15px" height="15px" stroke="blue"
+ style="stroke-width: 30px">
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-2-values-em-em.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-2-values-em-em.svg
new file mode 100644
index 0000000000..d26e7d7041
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-2-values-em-em.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ style="font-size: 2px"
+ class="reftest-wait"
+ onload="go()">
+ <style>
+ rect { stroke: blue; stroke-width: 10px; }
+ </style>
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "stroke-width",
+ "values" : "10em; 5em; 15em" };
+ testAnimatedRectGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-2-values-em-px.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-2-values-em-px.svg
new file mode 100644
index 0000000000..27a15b6663
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-2-values-em-px.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ style="font-size: 2px"
+ class="reftest-wait"
+ onload="go()">
+ <style>
+ rect { stroke: blue; stroke-width: 10px; }
+ </style>
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "stroke-width",
+ "values" : "10em; 10px; 15em" };
+ testAnimatedRectGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-2-values-px-em.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-2-values-px-em.svg
new file mode 100644
index 0000000000..4fb2e61906
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-2-values-px-em.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ style="font-size: 2px"
+ class="reftest-wait"
+ onload="go()">
+ <style>
+ rect { stroke: blue; stroke-width: 10px; }
+ </style>
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "stroke-width",
+ "values" : "20px; 5em; 30px" };
+ testAnimatedRectGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-2-values-px-px.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-2-values-px-px.svg
new file mode 100644
index 0000000000..b1a21817d3
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-2-values-px-px.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="go()">
+ <style>
+ rect { stroke: blue; stroke-width: 10px; }
+ </style>
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "stroke-width",
+ "values" : "20px; 10px; 30px" };
+ testAnimatedRectGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-3-paced.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-3-paced.svg
new file mode 100644
index 0000000000..2449345ecd
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-3-paced.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="go()">
+ <style>
+ rect { stroke: blue; stroke-width: 10px; }
+ </style>
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "stroke-width",
+ "calcMode" : "paced",
+ "values" : "10px; 5px; 30px; 20px" };
+ testAnimatedRectGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-3-ref.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-3-ref.svg
new file mode 100644
index 0000000000..2ddabf480c
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-3-ref.svg
@@ -0,0 +1,29 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <rect x="20px" y="20px" width="15px" height="15px" stroke="blue"
+ style="stroke-width: 10px">
+ </rect>
+ <rect x="70px" y="20px" width="15px" height="15px" stroke="blue"
+ style="stroke-width: 10px">
+ </rect>
+ <rect x="120px" y="20px" width="15px" height="15px" stroke="blue"
+ style="stroke-width: 6px">
+ </rect>
+ <rect x="20px" y="70px" width="15px" height="15px" stroke="blue"
+ style="stroke-width: 15px">
+ </rect>
+ <rect x="70px" y="70px" width="15px" height="15px" stroke="blue"
+ style="stroke-width: 19.8px">
+ </rect>
+ <rect x="120px" y="70px" width="15px" height="15px" stroke="blue"
+ style="stroke-width: 30px">
+ </rect>
+ <rect x="20px" y="120px" width="15px" height="15px" stroke="blue"
+ style="stroke-width: 28px">
+ </rect>
+ <rect x="70px" y="120px" width="15px" height="15px" stroke="blue"
+ style="stroke-width: 20px">
+ </rect>
+ <rect x="120px" y="120px" width="15px" height="15px" stroke="blue"
+ style="stroke-width: 20px">
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-4-from-by-em-em.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-4-from-by-em-em.svg
new file mode 100644
index 0000000000..9a55c55fc6
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-4-from-by-em-em.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ style="font-size: 2px"
+ class="reftest-wait"
+ onload="go()">
+ <style>
+ rect { stroke: blue; stroke-width: 30px; }
+ </style>
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "stroke-width",
+ "from" : "15em",
+ "by" : "-10em" };
+ testAnimatedRectGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-4-from-by-no-no.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-4-from-by-no-no.svg
new file mode 100644
index 0000000000..43845db4f7
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-4-from-by-no-no.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="go()">
+ <style>
+ rect { stroke: blue; stroke-width: 30px; }
+ </style>
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "stroke-width",
+ "from" : "30",
+ "by" : "-20" };
+ testAnimatedRectGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-4-from-by-px-em.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-4-from-by-px-em.svg
new file mode 100644
index 0000000000..96aa4e4095
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-4-from-by-px-em.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ style="font-size: 2px"
+ class="reftest-wait"
+ onload="go()">
+ <style>
+ rect { stroke: blue; stroke-width: 30px; }
+ </style>
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "stroke-width",
+ "from" : "30px",
+ "by" : "-10em" };
+ testAnimatedRectGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-4-from-by-px-px.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-4-from-by-px-px.svg
new file mode 100644
index 0000000000..f70c9617b1
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-4-from-by-px-px.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="go()">
+ <style>
+ rect { stroke: blue; stroke-width: 30px; }
+ </style>
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "stroke-width",
+ "from" : "30px",
+ "by" : "-20px" };
+ testAnimatedRectGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-4-ref.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-4-ref.svg
new file mode 100644
index 0000000000..bfbb8e3fae
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-4-ref.svg
@@ -0,0 +1,29 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <rect x="20px" y="20px" width="15px" height="15px" stroke="blue"
+ style="stroke-width: 30px">
+ </rect>
+ <rect x="70px" y="20px" width="15px" height="15px" stroke="blue"
+ style="stroke-width: 30px">
+ </rect>
+ <rect x="120px" y="20px" width="15px" height="15px" stroke="blue"
+ style="stroke-width: 27px">
+ </rect>
+ <rect x="20px" y="70px" width="15px" height="15px" stroke="blue"
+ style="stroke-width: 22.5px">
+ </rect>
+ <rect x="70px" y="70px" width="15px" height="15px" stroke="blue"
+ style="stroke-width: 20.1px">
+ </rect>
+ <rect x="120px" y="70px" width="15px" height="15px" stroke="blue"
+ style="stroke-width: 15px">
+ </rect>
+ <rect x="20px" y="120px" width="15px" height="15px" stroke="blue"
+ style="stroke-width: 14px">
+ </rect>
+ <rect x="70px" y="120px" width="15px" height="15px" stroke="blue"
+ style="stroke-width: 10px">
+ </rect>
+ <rect x="120px" y="120px" width="15px" height="15px" stroke="blue"
+ style="stroke-width: 10px">
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-wordspacing-1-ref.svg b/layout/reftests/svg/smil/style/anim-css-wordspacing-1-ref.svg
new file mode 100644
index 0000000000..18ab815f77
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-wordspacing-1-ref.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <text x="50" y="50" font-size="20" word-spacing="15">hello there</text>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-css-wordspacing-1.svg b/layout/reftests/svg/smil/style/anim-css-wordspacing-1.svg
new file mode 100644
index 0000000000..46e636e076
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-css-wordspacing-1.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait" onload="setTimeAndSnapshot(3.0, true)">
+ <script xlink:href="../smil-util.js"/>
+ <text x="50" y="50" font-size="20">hello there
+ <animate attributeName="word-spacing" fill="freeze" from="0" to="20" begin="0s" dur="4s"/>
+ </text>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-mapped-fontsize-1-from-to-no-no.svg b/layout/reftests/svg/smil/style/anim-mapped-fontsize-1-from-to-no-no.svg
new file mode 100644
index 0000000000..2583c2a7ce
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-mapped-fontsize-1-from-to-no-no.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ style="font-size: 2px"
+ class="reftest-wait"
+ onload="go()">
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "font-size",
+ "attributeType" : "XML",
+ "from" : "10",
+ "to" : "30" };
+ testAnimatedTextGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-mapped-fontsize-1-from-to-no-px.svg b/layout/reftests/svg/smil/style/anim-mapped-fontsize-1-from-to-no-px.svg
new file mode 100644
index 0000000000..4a487ece7a
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-mapped-fontsize-1-from-to-no-px.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ style="font-size: 2px"
+ class="reftest-wait"
+ onload="go()">
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "font-size",
+ "attributeType" : "XML",
+ "from" : "10",
+ "to" : "30px" };
+ testAnimatedTextGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-mapped-fontsize-1-from-to-px-no.svg b/layout/reftests/svg/smil/style/anim-mapped-fontsize-1-from-to-px-no.svg
new file mode 100644
index 0000000000..689fd045d4
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-mapped-fontsize-1-from-to-px-no.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ style="font-size: 2px"
+ class="reftest-wait"
+ onload="go()">
+ <script xlink:href="../smil-grid.js" type="text/javascript"/>
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function go() {
+ var animAttrHash = { "attributeName" : "font-size",
+ "attributeType" : "XML",
+ "from" : "10px",
+ "to" : "30" };
+ testAnimatedTextGrid("animate", [animAttrHash]);
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/smil/style/anim-standard-ref.svg b/layout/reftests/svg/smil/style/anim-standard-ref.svg
new file mode 100644
index 0000000000..39f37ae6d1
--- /dev/null
+++ b/layout/reftests/svg/smil/style/anim-standard-ref.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <rect x="15" y="15" width="200" height="200" fill="blue"/>
+</svg>
diff --git a/layout/reftests/svg/smil/style/important-set-1.svg b/layout/reftests/svg/smil/style/important-set-1.svg
new file mode 100644
index 0000000000..197ba26b6f
--- /dev/null
+++ b/layout/reftests/svg/smil/style/important-set-1.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+>
+ <rect x="15" y="15" width="200" height="200" style="fill: blue !important">
+ <set attributeName="fill" attributeType="CSS"
+ to="red" begin="0s" fill="freeze"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/style/important-set-2.svg b/layout/reftests/svg/smil/style/important-set-2.svg
new file mode 100644
index 0000000000..e5515db10c
--- /dev/null
+++ b/layout/reftests/svg/smil/style/important-set-2.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+>
+ <style>
+ rect { fill: blue !important; }
+ </style>
+ <rect x="15" y="15" width="200" height="200">
+ <set attributeName="fill" attributeType="CSS"
+ to="red" begin="0s" fill="freeze"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/style/namespaced-property-1.svg b/layout/reftests/svg/smil/style/namespaced-property-1.svg
new file mode 100644
index 0000000000..415c1ffb62
--- /dev/null
+++ b/layout/reftests/svg/smil/style/namespaced-property-1.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <rect x="15" y="15" width="200" height="200" fill="blue">
+ <set attributeName="xlink:opacity" to="0.5" begin="0s" fill="freeze"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/style/reftest.list b/layout/reftests/svg/smil/style/reftest.list
new file mode 100644
index 0000000000..a7888a3abe
--- /dev/null
+++ b/layout/reftests/svg/smil/style/reftest.list
@@ -0,0 +1,169 @@
+# Tests related to SVG Animation (using SMIL) of CSS properties
+
+# XXXdholbert TODO: Test color animation with "color-interpolation: linearRGB"
+# (when it's implemented)
+
+# 'color' property, from/to/by with named colors & hex values
+== anim-css-color-1-by-ident-hex.svg anim-css-fill-1-ref.svg
+== anim-css-color-1-from-by-hex-hex.svg anim-css-fill-1-ref.svg
+fuzzy(0-1,0-550) == anim-css-color-1-from-by-ident-hex.svg anim-css-fill-1-ref.svg
+fuzzy(0-1,0-550) == anim-css-color-1-from-to-hex-hex.svg anim-css-fill-1-ref.svg
+fuzzy(0-1,0-550) == anim-css-color-1-from-to-ident-ident.svg anim-css-fill-1-ref.svg
+fuzzy(0-1,0-550) == anim-css-color-1-to-ident-hex.svg anim-css-fill-1-ref.svg
+fuzzy(0-1,0-550) == anim-css-color-1-to-ident-ident.svg anim-css-fill-1-ref.svg
+
+# 'color' property, paced calcMode
+== anim-css-color-2-paced-rgb.svg anim-css-fill-2-ref.svg
+
+# 'color' property, animating *by* a named color
+fuzzy(0-1,0-580) == anim-css-color-3-by-ident-ident.svg anim-css-fill-3-ref.svg
+fuzzy(0-1,0-580) == anim-css-color-3-from-by-ident-ident.svg anim-css-fill-3-ref.svg
+fuzzy(0-1,0-580) == anim-css-color-3-from-by-rgb-ident.svg anim-css-fill-3-ref.svg
+
+# 'fill' property, from/to/by with named colors & hex values
+fuzzy(0-1,0-550) == anim-css-fill-1-by-ident-hex.svg anim-css-fill-1-ref.svg
+fuzzy(0-1,0-550) == anim-css-fill-1-from-by-hex-hex.svg anim-css-fill-1-ref.svg
+fuzzy(0-1,0-550) == anim-css-fill-1-from-by-ident-hex.svg anim-css-fill-1-ref.svg
+fuzzy(0-1,0-550) == anim-css-fill-1-from-to-hex-hex.svg anim-css-fill-1-ref.svg
+fuzzy(0-1,0-550) == anim-css-fill-1-from-to-ident-ident.svg anim-css-fill-1-ref.svg
+fuzzy(0-1,0-550) == anim-css-fill-1-to-ident-hex.svg anim-css-fill-1-ref.svg
+fuzzy(0-1,0-550) == anim-css-fill-1-to-ident-ident.svg anim-css-fill-1-ref.svg
+
+# 'fill' property, from/to/by, with 'currentColor' keyword
+fuzzy(0-1,0-550) == anim-css-fill-1-by-ident-curcol.svg anim-css-fill-1-ref.svg
+fuzzy(0-1,0-550) == anim-css-fill-1-from-by-curcol-hex.svg anim-css-fill-1-ref.svg
+fuzzy(0-1,0-550) == anim-css-fill-1-from-by-hex-curcol.svg anim-css-fill-1-ref.svg
+fuzzy(0-1,0-550) == anim-css-fill-1-from-to-curcol-hex.svg anim-css-fill-1-ref.svg
+fuzzy(0-1,0-550) == anim-css-fill-1-from-to-hex-curcol.svg anim-css-fill-1-ref.svg
+fuzzy(0-1,0-550) == anim-css-fill-1-to-ident-curcol.svg anim-css-fill-1-ref.svg
+
+# 'fill' property, paced calcMode
+== anim-css-fill-2-paced-rgb.svg anim-css-fill-2-ref.svg
+
+# 'fill' property, animating *by* a named color
+fuzzy(0-1,0-580) == anim-css-fill-3-by-ident-ident.svg anim-css-fill-3-ref.svg
+fuzzy(0-1,0-580) == anim-css-fill-3-from-by-ident-ident.svg anim-css-fill-3-ref.svg
+fuzzy(0-1,0-580) == anim-css-fill-3-from-by-rgb-ident.svg anim-css-fill-3-ref.svg
+
+# check handling of overflowing color values
+# NOTE: Some of the tests below fail in Gecko because we compute
+# "from + by" as the animation end-point, and we clamp that final color value
+# (due to bug 515919) and use the clamped value for interpolation.
+# That's earlier than the SVG spec wants us to clamp -- we're only supposed to
+# clamp *final presentation values*.
+# (Reference: SVG 1.1 Appendix F.4)
+== anim-css-fill-overflow-1-by.svg anim-css-fill-overflow-1-ref.svg
+== anim-css-fill-overflow-1-from-by.svg anim-css-fill-overflow-1-ref.svg # bug 515919
+== anim-css-stopcolor-overflow-1-from-by.svg anim-css-stopcolor-overflow-1-ref.svg # bug 515919
+== anim-css-floodcolor-overflow-1-from-by.svg anim-css-floodcolor-overflow-1-ref.svg # bug 515919
+
+# 'fill-opacity' property
+fuzzy(0-1,0-885) == anim-css-fillopacity-1-by.svg anim-css-fillopacity-1-ref.svg
+fuzzy(0-1,0-210) == anim-css-fillopacity-1-from-by.svg anim-css-fillopacity-1-ref.svg
+== anim-css-fillopacity-1-from-to.svg anim-css-fillopacity-1-ref.svg
+fuzzy(0-1,0-550) == anim-css-fillopacity-1-to.svg anim-css-fillopacity-1-ref.svg
+== anim-css-fillopacity-2-paced.svg anim-css-fillopacity-2-ref.svg
+fails == anim-css-fillopacity-3-clamp-big.svg anim-css-fillopacity-3-ref.svg # bug 501188
+fuzzy(0-1,0-365) == anim-css-fillopacity-3-clamp-small.svg anim-css-fillopacity-3-ref.svg
+
+# 'font' shorthand property
+fuzzy-if(gtkWidget,255-255,1520-1520) == anim-css-font-1.svg anim-css-font-1-ref.svg # Windows: Bug 1392106 Linux: Bug 1599619
+
+# 'font-size' property, from/by/to with pixel values only
+== anim-css-fontsize-1-from-by-px-px.svg anim-css-fontsize-1-ref.svg
+== anim-css-fontsize-1-from-to-px-px.svg anim-css-fontsize-1-ref.svg
+
+# 'font-size' property (accepts unitless values)
+== anim-css-fontsize-1-from-to-no-no.svg anim-css-fontsize-1-ref.svg
+== anim-css-fontsize-1-from-to-no-px.svg anim-css-fontsize-1-ref.svg
+== anim-css-fontsize-1-from-to-px-no.svg anim-css-fontsize-1-ref.svg
+
+# 'font-size' mapped attribute (accepts unitless values)
+== anim-mapped-fontsize-1-from-to-no-no.svg anim-css-fontsize-1-ref.svg
+== anim-mapped-fontsize-1-from-to-no-px.svg anim-css-fontsize-1-ref.svg
+== anim-mapped-fontsize-1-from-to-px-no.svg anim-css-fontsize-1-ref.svg
+
+# 'font-size' property, from/by/to with percent values
+== anim-css-fontsize-1-from-by-pct-pct.svg anim-css-fontsize-1-ref.svg
+== anim-css-fontsize-1-from-by-pct-px.svg anim-css-fontsize-1-ref.svg
+== anim-css-fontsize-1-from-by-px-pct.svg anim-css-fontsize-1-ref.svg
+== anim-css-fontsize-1-from-to-pct-pct.svg anim-css-fontsize-1-ref.svg
+== anim-css-fontsize-1-from-to-pct-px.svg anim-css-fontsize-1-ref.svg
+== anim-css-fontsize-1-from-to-px-pct.svg anim-css-fontsize-1-ref.svg
+
+# 'font-size' property, with negative addition
+== anim-css-fontsize-2-from-by-px-px.svg anim-css-fontsize-2-ref.svg
+== anim-css-fontsize-2-from-by-px-em.svg anim-css-fontsize-2-ref.svg
+== anim-css-fontsize-2-from-by-em-em.svg anim-css-fontsize-2-ref.svg
+
+# 'stroke-dasharray' property, from/to with pixel values only
+fails == anim-css-strokedasharray-1.svg anim-css-strokedasharray-1-ref.svg # bug 474049
+
+# 'stroke-width' property, from/by/to with pixel values only
+== anim-css-strokewidth-1-by-px-px.svg anim-css-strokewidth-1-ref.svg
+== anim-css-strokewidth-1-from-by-px-px.svg anim-css-strokewidth-1-ref.svg
+== anim-css-strokewidth-1-from-to-px-px.svg anim-css-strokewidth-1-ref.svg
+== anim-css-strokewidth-1-to-px-px.svg anim-css-strokewidth-1-ref.svg
+
+# 'stroke-width' property, from/by/to with unitless values only
+== anim-css-strokewidth-1-by-no-no.svg anim-css-strokewidth-1-ref.svg
+== anim-css-strokewidth-1-from-by-no-no.svg anim-css-strokewidth-1-ref.svg
+== anim-css-strokewidth-1-from-to-no-no.svg anim-css-strokewidth-1-ref.svg
+== anim-css-strokewidth-1-to-no-no.svg anim-css-strokewidth-1-ref.svg
+
+# 'stroke-width' property, from/by/to with percent values
+# XXXdholbert the mixed pct + px tests fail right now, because we need calc()
+# in order to interpolate between pct and non-pct values, and we don't yet
+# support calc() for stroke-width & other SVG-specific properties.
+#
+# Bug 1258270 and 1386967
+== anim-css-strokewidth-1-by-pct-pct.svg anim-css-strokewidth-1-ref.svg
+fails == anim-css-strokewidth-1-by-pct-px.svg anim-css-strokewidth-1-ref.svg
+fails == anim-css-strokewidth-1-by-px-pct.svg anim-css-strokewidth-1-ref.svg
+fails-if(!useDrawSnapshot) == anim-css-strokewidth-1-from-by-pct-pct.svg anim-css-strokewidth-1-ref.svg # bug 1459418
+fails == anim-css-strokewidth-1-from-by-pct-px.svg anim-css-strokewidth-1-ref.svg
+fails == anim-css-strokewidth-1-from-by-px-pct.svg anim-css-strokewidth-1-ref.svg
+fails-if(!useDrawSnapshot) == anim-css-strokewidth-1-from-to-pct-pct.svg anim-css-strokewidth-1-ref.svg # bug 1459418
+fails == anim-css-strokewidth-1-from-to-pct-px.svg anim-css-strokewidth-1-ref.svg
+fails == anim-css-strokewidth-1-from-to-px-pct.svg anim-css-strokewidth-1-ref.svg
+fails-if(!useDrawSnapshot) == anim-css-strokewidth-1-to-pct-pct.svg anim-css-strokewidth-1-ref.svg # bug 1459418
+fails == anim-css-strokewidth-1-to-pct-px.svg anim-css-strokewidth-1-ref.svg
+fails == anim-css-strokewidth-1-to-px-pct.svg anim-css-strokewidth-1-ref.svg
+
+# 'stroke-width' property, from/by/to with em values
+== anim-css-strokewidth-1-by-px-em.svg anim-css-strokewidth-1-ref.svg
+== anim-css-strokewidth-1-by-em-em.svg anim-css-strokewidth-1-ref.svg
+== anim-css-strokewidth-1-by-em-px.svg anim-css-strokewidth-1-ref.svg
+== anim-css-strokewidth-1-from-by-px-em.svg anim-css-strokewidth-1-ref.svg
+== anim-css-strokewidth-1-from-by-em-em.svg anim-css-strokewidth-1-ref.svg
+== anim-css-strokewidth-1-from-by-em-px.svg anim-css-strokewidth-1-ref.svg
+== anim-css-strokewidth-1-from-to-px-em.svg anim-css-strokewidth-1-ref.svg
+== anim-css-strokewidth-1-from-to-em-em.svg anim-css-strokewidth-1-ref.svg
+== anim-css-strokewidth-1-from-to-em-px.svg anim-css-strokewidth-1-ref.svg
+== anim-css-strokewidth-1-to-px-em.svg anim-css-strokewidth-1-ref.svg
+== anim-css-strokewidth-1-to-em-em.svg anim-css-strokewidth-1-ref.svg
+== anim-css-strokewidth-1-to-em-px.svg anim-css-strokewidth-1-ref.svg
+
+# 'stroke-width' property, values-array & paced calc-mode support
+== anim-css-strokewidth-2-values-em-em.svg anim-css-strokewidth-2-ref.svg
+== anim-css-strokewidth-2-values-em-px.svg anim-css-strokewidth-2-ref.svg
+== anim-css-strokewidth-2-values-px-em.svg anim-css-strokewidth-2-ref.svg
+fuzzy(0-1,0-360) == anim-css-strokewidth-2-values-px-px.svg anim-css-strokewidth-2-ref.svg
+== anim-css-strokewidth-3-paced.svg anim-css-strokewidth-3-ref.svg
+
+# 'stroke-width' property, negative addition
+== anim-css-strokewidth-4-from-by-px-px.svg anim-css-strokewidth-4-ref.svg
+== anim-css-strokewidth-4-from-by-px-em.svg anim-css-strokewidth-4-ref.svg
+== anim-css-strokewidth-4-from-by-em-em.svg anim-css-strokewidth-4-ref.svg
+fuzzy(0-1,0-170) == anim-css-strokewidth-4-from-by-no-no.svg anim-css-strokewidth-4-ref.svg
+
+# check correct handling of "!important" values
+== important-set-1.svg anim-standard-ref.svg
+== important-set-2.svg anim-standard-ref.svg
+
+# check namespaced attribute
+== namespaced-property-1.svg anim-standard-ref.svg
+
+# 'letter-spacing' and 'word-spacing'
+== anim-css-letterspacing-1.svg anim-css-letterspacing-1-ref.svg
+== anim-css-wordspacing-1.svg anim-css-wordspacing-1-ref.svg
diff --git a/layout/reftests/svg/smil/syncbase/changed-interval-change-spec-1.svg b/layout/reftests/svg/smil/syncbase/changed-interval-change-spec-1.svg
new file mode 100644
index 0000000000..5952d99125
--- /dev/null
+++ b/layout/reftests/svg/smil/syncbase/changed-interval-change-spec-1.svg
@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="
+ document.documentElement.pauseAnimations();
+ document.documentElement.setCurrentTime(1.5);
+ document.getElementById('a').removeAttribute('begin');
+ setTimeAndSnapshot(2, false)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <!--
+ Deleting the begin spec whilst the element is active should not cause
+ a change notification to be generated.
+ -->
+ <rect width="100" height="100" fill="red">
+ <animate attributeName="y" attributeType="XML" from="0" to="0" id="a"
+ begin="1s" dur="10s"/>
+ <animate attributeName="fill" attributeType="CSS"
+ values="green"
+ begin="a.begin" dur="2s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/syncbase/changed-interval-change-spec-2.svg b/layout/reftests/svg/smil/syncbase/changed-interval-change-spec-2.svg
new file mode 100644
index 0000000000..c2db156479
--- /dev/null
+++ b/layout/reftests/svg/smil/syncbase/changed-interval-change-spec-2.svg
@@ -0,0 +1,22 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="
+ document.documentElement.pauseAnimations();
+ document.documentElement.setCurrentTime(1.2);
+ document.getElementById('a').removeAttribute('begin');
+ setTimeAndSnapshot(2, false)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <!--
+ Deleting the begin spec whilst the syncbase element is active should not
+ cause a change notification to be generated since the begin time is fixed
+ once the element is active.
+ -->
+ <rect width="100" height="100" fill="red">
+ <animate attributeName="y" attributeType="XML" from="0" to="0" id="a"
+ begin="1s" dur="10s"/>
+ <animate attributeName="fill" attributeType="CSS"
+ values="green"
+ begin="a.begin+0.5s" dur="1s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/syncbase/changed-interval-change-spec-3.svg b/layout/reftests/svg/smil/syncbase/changed-interval-change-spec-3.svg
new file mode 100644
index 0000000000..103b0e780c
--- /dev/null
+++ b/layout/reftests/svg/smil/syncbase/changed-interval-change-spec-3.svg
@@ -0,0 +1,22 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="
+ document.documentElement.pauseAnimations();
+ document.documentElement.setCurrentTime(1.2);
+ document.getElementById('a').setAttribute('begin', '0s');
+ setTimeAndSnapshot(2, false)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <!--
+ Changing the begin spec whilst the syncbase element is active should not
+ cause a change notification to be generated since the begin time is fixed
+ once the element is active.
+ -->
+ <rect width="100" height="100" fill="red">
+ <animate attributeName="y" attributeType="XML" from="0" to="0" id="a"
+ begin="1s" dur="10s"/>
+ <animate attributeName="fill" attributeType="CSS"
+ values="green"
+ begin="a.begin+0.5s" dur="1s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/syncbase/changed-interval-change-spec-4.svg b/layout/reftests/svg/smil/syncbase/changed-interval-change-spec-4.svg
new file mode 100644
index 0000000000..ef7ba61a94
--- /dev/null
+++ b/layout/reftests/svg/smil/syncbase/changed-interval-change-spec-4.svg
@@ -0,0 +1,27 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="
+ document.documentElement.pauseAnimations();
+ document.documentElement.setCurrentTime(0);
+ document.getElementById('b').removeAttribute('begin');
+ document.getElementById('a').setAttribute('dur', '1s');
+ setTimeAndSnapshot(2, false)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <!--
+ 1. Initially, we have a begin time that is dependent on an unresolved time
+ (a.end).
+ 2. The begin attribute that created the begin time is then removed.
+ 3. The base interval on which the begin time is dependent is then resolved.
+
+ In this case, the unresolved dependent begin should have been cleared in
+ at point 2 and no new interval should be created.
+ -->
+ <rect width="100" height="100" fill="green">
+ <!-- Base interval with unresolved end time -->
+ <animate attributeName="y" attributeType="XML" from="0" to="0" id="a"/>
+ <!-- Dependent interval -->
+ <animate attributeName="fill" attributeType="CSS" id="b"
+ values="red" begin="a.end" dur="2s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/syncbase/changed-interval-resolved-1.svg b/layout/reftests/svg/smil/syncbase/changed-interval-resolved-1.svg
new file mode 100644
index 0000000000..d6bbd1da78
--- /dev/null
+++ b/layout/reftests/svg/smil/syncbase/changed-interval-resolved-1.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(2, true)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <!--
+ When the animations are initially set up there's potential for a change
+ notification once b is resolved.
+ -->
+ <rect width="100" height="100" fill="red">
+ <animate attributeName="y" attributeType="XML" from="0" to="0" id="a"
+ begin="10s; b.begin" dur="10s"/>
+ <animate attributeName="fill" attributeType="CSS"
+ values="orange; green; purple"
+ begin="a.begin" dur="2s"/>
+ <set attributeName="y" begin="1s" id="b" to="0"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/syncbase/changed-interval-resolved-2.svg b/layout/reftests/svg/smil/syncbase/changed-interval-resolved-2.svg
new file mode 100644
index 0000000000..d4b3c681ef
--- /dev/null
+++ b/layout/reftests/svg/smil/syncbase/changed-interval-resolved-2.svg
@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="
+ document.getElementById('c').setAttribute('id', 'b');
+ setTimeAndSnapshot(2, true)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <!--
+ When the animations are initially set up a change notice should resolved
+ when c's id is updated to b.
+ -->
+ <rect width="100" height="100" fill="red">
+ <animate attributeName="y" attributeType="XML" from="0" to="0" id="a"
+ begin="10s; b.begin" dur="10s"/>
+ <animate attributeName="fill" attributeType="CSS"
+ values="orange; green; purple"
+ begin="a.begin" dur="2s"/>
+ <set attributeName="y" begin="1s" id="c" to="0"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/syncbase/changed-interval-simple-1.svg b/layout/reftests/svg/smil/syncbase/changed-interval-simple-1.svg
new file mode 100644
index 0000000000..3ba8c6687d
--- /dev/null
+++ b/layout/reftests/svg/smil/syncbase/changed-interval-simple-1.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(2, true)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <!--
+ A simple case of a changing interval.
+ The end will be updated when the syncbase does an early end.
+ -->
+ <rect width="100" height="100" fill="red">
+ <animate attributeName="y" attributeType="XML" from="0" to="0" id="a"
+ begin="0s; 1s" dur="10s"/>
+ <animate attributeName="fill" attributeType="CSS"
+ values="orange; green; purple"
+ begin="a.end" dur="2s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/syncbase/changed-interval-simple-2.svg b/layout/reftests/svg/smil/syncbase/changed-interval-simple-2.svg
new file mode 100644
index 0000000000..fc7756800f
--- /dev/null
+++ b/layout/reftests/svg/smil/syncbase/changed-interval-simple-2.svg
@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="
+ document.documentElement.pauseAnimations();
+ document.documentElement.setCurrentTime(0);
+ document.getElementById('a').beginElementAt(1);
+ setTimeAndSnapshot(2, false)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <!--
+ We'll add another begin instance time at t=1s for 'a' by script, causing a
+ change notification.
+ -->
+ <rect width="100" height="100" fill="red">
+ <animate attributeName="y" attributeType="XML" from="0" to="0" id="a"
+ begin="10s" dur="4s"/>
+ <animate attributeName="fill" attributeType="CSS"
+ values="orange; green; purple"
+ begin="a.begin" dur="2s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/syncbase/changed-interval-simple-3.svg b/layout/reftests/svg/smil/syncbase/changed-interval-simple-3.svg
new file mode 100644
index 0000000000..ae5f28fbfb
--- /dev/null
+++ b/layout/reftests/svg/smil/syncbase/changed-interval-simple-3.svg
@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="
+ document.documentElement.pauseAnimations();
+ document.documentElement.setCurrentTime(0);
+ document.getElementById('a').endElementAt(1);
+ setTimeAndSnapshot(2, false)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <!--
+ We'll add another end instance time at t=1s for 'a' by script, causing a
+ change notification.
+ -->
+ <rect width="100" height="100" fill="red">
+ <animate attributeName="y" attributeType="XML" from="0" to="0" id="a"
+ begin="0s" dur="4s"/>
+ <animate attributeName="fill" attributeType="CSS"
+ values="orange; green; purple"
+ begin="a.end" dur="2s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/syncbase/changed-interval-simple-4.svg b/layout/reftests/svg/smil/syncbase/changed-interval-simple-4.svg
new file mode 100644
index 0000000000..671e9cd370
--- /dev/null
+++ b/layout/reftests/svg/smil/syncbase/changed-interval-simple-4.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(2, true)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <!--
+ An early end should generate two change notices here and because
+ restart="whenNotActive" we should only apply the earlier one, regardless of
+ what order they arrive in.
+ -->
+ <rect width="100" height="100" fill="red">
+ <animate attributeName="y" attributeType="XML" from="0" to="0" id="a"
+ begin="0s; 1.5s" dur="4s"/>
+ <animate attributeName="fill" attributeType="CSS"
+ values="orange; green; purple"
+ begin="a.end; a.end-0.5s" dur="2s" restart="whenNotActive"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/syncbase/changed-interval-simple-5.svg b/layout/reftests/svg/smil/syncbase/changed-interval-simple-5.svg
new file mode 100644
index 0000000000..07648813c1
--- /dev/null
+++ b/layout/reftests/svg/smil/syncbase/changed-interval-simple-5.svg
@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="
+ document.documentElement.pauseAnimations();
+ document.documentElement.setCurrentTime(0);
+ document.getElementById('a').removeAttribute('begin');
+ setTimeAndSnapshot(2, false)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <!--
+ Changing the begin attribute by script should cause a change notice to be
+ generated.
+ -->
+ <rect width="100" height="100" fill="green">
+ <animate attributeName="y" attributeType="XML" from="0" to="0" id="a"
+ begin="1s" dur="10s"/>
+ <animate attributeName="fill" attributeType="CSS"
+ values="red; red"
+ begin="a.begin" dur="2s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/syncbase/changed-interval-sort-1.svg b/layout/reftests/svg/smil/syncbase/changed-interval-sort-1.svg
new file mode 100644
index 0000000000..6fbd62a462
--- /dev/null
+++ b/layout/reftests/svg/smil/syncbase/changed-interval-sort-1.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(2, true)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <!--
+ A simple case of a changing interval to check that instances times are
+ re-sorted.
+ -->
+ <rect width="100" height="100" fill="red">
+ <animate attributeName="y" attributeType="XML" from="0" to="0" id="a"
+ begin="0s; 1s" dur="10s"/>
+ <animate attributeName="fill" attributeType="CSS"
+ values="orange; green; purple"
+ begin="3s; a.end" dur="2s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/syncbase/cross-container-1.xhtml b/layout/reftests/svg/smil/syncbase/cross-container-1.xhtml
new file mode 100644
index 0000000000..72d7eb782e
--- /dev/null
+++ b/layout/reftests/svg/smil/syncbase/cross-container-1.xhtml
@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait">
+<!--
+ The simplest possible test of a cross-time container dependency.
+ -->
+<head>
+<script>
+function snapshot() {
+ var a = document.getElementById("svg-a");
+ var b = document.getElementById("svg-b");
+ b.pauseAnimations();
+ a.pauseAnimations();
+ b.setCurrentTime(1); // In document time, 'b' has now begun and therefore so
+ // has 'a'
+ a.setCurrentTime(1); // So we only need seek forward 1s to get to the middle
+ // of the animation
+ document.documentElement.removeAttribute("class");
+}
+</script>
+</head>
+<body onload="snapshot()">
+<svg xmlns="http://www.w3.org/2000/svg" width="120px" height="120px" id="svg-a">
+ <rect width="100" height="100" fill="red">
+ <animate attributeName="fill" attributeType="CSS" id="a"
+ values="orange; green; purple" calcMode="discrete"
+ begin="b.begin" dur="2s"/>
+ </rect>
+</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="120px" height="120px" id="svg-b">
+ <set attributeName="y" to="0" begin="1s" id="b"/>
+</svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/smil/syncbase/cross-container-2.xhtml b/layout/reftests/svg/smil/syncbase/cross-container-2.xhtml
new file mode 100644
index 0000000000..272b65ae75
--- /dev/null
+++ b/layout/reftests/svg/smil/syncbase/cross-container-2.xhtml
@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait">
+<!--
+ Check that pausing the base time container makes dependent times unresolved.
+ -->
+<head>
+<script><!----><![CDATA[
+function snapshot() {
+ var a = document.getElementById("svg-a");
+ var b = document.getElementById("svg-b");
+ a.pauseAnimations();
+ b.pauseAnimations();
+ a.setCurrentTime(2); // Since b is paused, the start time of a is now
+ // unresolved.
+ // Check DOM state as well
+ var wrong = document.getElementById("wrong");
+ try {
+ document.getElementById("a").getStartTime();
+ } catch (e) {
+ if (e.name == "InvalidStateError" &&
+ e.code == DOMException.INVALID_STATE_ERR) {
+ wrong.style.setProperty('visibility', 'hidden', '');
+ }
+ }
+ document.documentElement.removeAttribute("class");
+}
+//]]></script>
+</head>
+<body onload="snapshot()">
+<svg xmlns="http://www.w3.org/2000/svg" width="120px" height="120px" id="svg-a">
+ <rect width="100" height="100" fill="green">
+ <set attributeName="fill" to="red" begin="b.begin" id="a"/>
+ </rect>
+ <g id="wrong">
+ <line stroke="black" stroke-width="8" x1="0" y1="0" x2="100" y2="100"/>
+ <line stroke="black" stroke-width="8" x1="0" y1="100" x2="100" y2="0"/>
+ </g>
+</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="120px" height="120px" id="svg-b">
+ <set attributeName="y" to="0" begin="1s" id="b"/>
+</svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/smil/syncbase/cross-container-3.xhtml b/layout/reftests/svg/smil/syncbase/cross-container-3.xhtml
new file mode 100644
index 0000000000..d5e94ac12e
--- /dev/null
+++ b/layout/reftests/svg/smil/syncbase/cross-container-3.xhtml
@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait">
+<!--
+ Check that calls to beginElement cause the pause time to be updated.
+
+ This is an area that's underspecified so we're just going with what's
+ intuitive. A is supposed to start at the same time as B. However, whilst B is
+ paused, a script calls 'beginElement'. Yet A is not paused. Intuitively,
+ A should start at the time beginElement is called. However, unless we handle
+ this situation specifically, what happens instead is that A is considered to
+ begin at the time when B was paused as follows:
+
+
+ Document time:
+ 0 1 2 3 4 ...
+ A:
+ B: |.......*..........
+ ^ Pause starts here
+ ^ beginElement called here
+
+ Intuitively, A should start at t=2s, not t=1s. To provide this behaviour we
+ must specifically handle it.
+
+ Perhaps a more fundamental question is whether a call to beginElement should
+ take effect whilst the document is paused. Currently it does. This is
+ consistent with Opera but not Safari.
+ -->
+<head>
+<script>
+function snapshot() {
+ var svgb = document.getElementById("svg-b");
+ svgb.pauseAnimations();
+ setTimeout('snapshotB()', 100);
+}
+
+function snapshotB() {
+ var svga = document.getElementById("svg-a");
+ svga.pauseAnimations();
+ var b = document.getElementById("b");
+ b.beginElement();
+ // Force a sample on the first document fragment before taking a snapshot
+ svga.setCurrentTime(svga.getCurrentTime());
+ document.documentElement.removeAttribute("class");
+}
+
+document.addEventListener("MozReftestInvalidate", snapshot, false);
+setTimeout(snapshot, 4000); // fallback for running outside reftest
+
+</script>
+</head>
+<body>
+<svg xmlns="http://www.w3.org/2000/svg" width="120px" height="120px" id="svg-a">
+ <rect width="100" height="100" fill="orange">
+ <animate attributeName="fill" attributeType="CSS" id="a"
+ values="green; red"
+ begin="b.begin" dur="0.5s"/>
+ </rect>
+</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="120px" height="120px" id="svg-b">
+ <set attributeName="y" to="0" begin="indefinite" id="b"/>
+</svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/smil/syncbase/cycle-change-1.svg b/layout/reftests/svg/smil/syncbase/cycle-change-1.svg
new file mode 100644
index 0000000000..25a3c4ad39
--- /dev/null
+++ b/layout/reftests/svg/smil/syncbase/cycle-change-1.svg
@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="
+ document.documentElement.pauseAnimations();
+ document.documentElement.setCurrentTime(0);
+ document.getElementById('a').beginElementAt(1);
+ setTimeAndSnapshot(2, false)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <!--
+ Test that cycles don't cause problems for change notices as well.
+ -->
+ <rect width="100" height="100" fill="red">
+ <animate attributeName="y" attributeType="XML" from="0" to="0" id="a"
+ begin="b.begin; 3s" dur="4s"/>
+ <animate attributeName="fill" attributeType="CSS" id="b"
+ values="orange; green; purple"
+ begin="a.begin" dur="2s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/syncbase/cycle-change-2.svg b/layout/reftests/svg/smil/syncbase/cycle-change-2.svg
new file mode 100644
index 0000000000..861be05c9a
--- /dev/null
+++ b/layout/reftests/svg/smil/syncbase/cycle-change-2.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(2, true)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <!--
+ Test that cycles don't cause problems for change notices as well. In this
+ case we have an early end.
+ -->
+ <rect width="100" height="100" fill="red">
+ <animate attributeName="y" attributeType="XML" from="0" to="0" id="a"
+ begin="b.begin; 0s; 1s" dur="4s"/>
+ <animate attributeName="fill" attributeType="CSS" id="b"
+ values="orange; green; purple"
+ begin="a.begin" dur="2s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/syncbase/cycle-delete-1.svg b/layout/reftests/svg/smil/syncbase/cycle-delete-1.svg
new file mode 100644
index 0000000000..79408a0483
--- /dev/null
+++ b/layout/reftests/svg/smil/syncbase/cycle-delete-1.svg
@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="
+ document.documentElement.pauseAnimations();
+ document.documentElement.setCurrentTime(0);
+ document.getElementById('a').setAttribute('end', '0s');
+ setTimeAndSnapshot(2, false)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <!--
+ Test that cycles don't cause problems for deleted intervals.
+ -->
+ <rect width="100" height="100" fill="green">
+ <animate attributeName="y" attributeType="XML" from="0" to="0" id="a"
+ begin="b.begin; 1s" dur="4s"/>
+ <animate attributeName="fill" attributeType="CSS" id="b"
+ values="red; red"
+ begin="a.begin" dur="2s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/syncbase/cycle-invalid-1.svg b/layout/reftests/svg/smil/syncbase/cycle-invalid-1.svg
new file mode 100644
index 0000000000..863de4a938
--- /dev/null
+++ b/layout/reftests/svg/smil/syncbase/cycle-invalid-1.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(2, true)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <!--
+ An invalid cycle. Example 1 from SMIL3 section 5.4.5.
+ -->
+ <rect width="100" height="100" fill="green">
+ <animate attributeName="y" attributeType="XML" from="0" to="0" id="a"
+ begin="b.begin" dur="4s"/>
+ <animate attributeName="fill" attributeType="CSS" id="b"
+ values="red"
+ begin="a.begin" dur="2s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/syncbase/cycle-invalid-2.svg b/layout/reftests/svg/smil/syncbase/cycle-invalid-2.svg
new file mode 100644
index 0000000000..97829d6554
--- /dev/null
+++ b/layout/reftests/svg/smil/syncbase/cycle-invalid-2.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(2, true)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <!--
+ An invalid cycle. Example 2 From SMIL3 section 5.4.5.
+ -->
+ <rect width="100" height="100" fill="blue">
+ <animate attributeName="y" attributeType="XML" from="0" to="0" id="a"
+ begin="c.end" dur="4s"/>
+ <animate attributeName="y" attributeType="XML" from="0" to="0" id="b"
+ begin="a.begin" dur="3s"/>
+ <animate attributeName="fill" attributeType="CSS" id="c"
+ values="green; red"
+ begin="0" end="b.end"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/syncbase/cycle-invalid-3.svg b/layout/reftests/svg/smil/syncbase/cycle-invalid-3.svg
new file mode 100644
index 0000000000..9e7d460aff
--- /dev/null
+++ b/layout/reftests/svg/smil/syncbase/cycle-invalid-3.svg
@@ -0,0 +1,54 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(2, true)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <!--
+ An invalid cycle that propagates backwards.
+ Example 4 from SMIL3 section 5.4.5.
+
+ Regarding cycle detection SMIL 3.0 says:
+
+ "When a cycle is detected, the change propagation is ignored. The element
+ that detected the second visit ignores the second change notice, and so
+ breaks the cycle."
+
+ So we are only concerned with cycles amongst CHANGE notices. We understand
+ this as follows:
+
+ a: 5s-7s
+ new -> b: 4s-6s
+ new -> a: 3s-5s
+ change -> b: 2s-4s
+ change -> a: 1s-3s
+ change -> b: second change notice, break cycle!
+
+ Thus giving us:
+ a: 1s-3s; 3s-5s; 5s-7s
+ b: 2s-4s; 4s-6s
+
+ Opera gives us:
+ a: -1s-1s; 1s-3s; 3s-5s; 5s-7s
+ b: 0s-2s; 2s-4s; 4s-6s
+
+ Safari gives us:
+ a: 3s-5s; 5s-7s
+ b: 2s-4s; 4s-6s
+
+ Batik 1.7 gives:
+ a: 5s-7s
+ b: 4s-6s
+
+ Currently we have the result described above, i.e.
+ a: 1s-3s; 3s-5s; 5s-7s
+ b: 2s-4s; 4s-6s
+
+ -->
+ <rect y="100" width="100" height="100" fill="red">
+ <animate attributeName="y" attributeType="XML" from="-50" to="50" id="a"
+ begin="5s; b.begin-1s" dur="2s"/>
+ <animate attributeName="fill" attributeType="CSS" id="b"
+ values="green; orange"
+ begin="a.begin-1s" dur="2s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/syncbase/cycle-invalid-4.svg b/layout/reftests/svg/smil/syncbase/cycle-invalid-4.svg
new file mode 100644
index 0000000000..ddf489308d
--- /dev/null
+++ b/layout/reftests/svg/smil/syncbase/cycle-invalid-4.svg
@@ -0,0 +1,33 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="
+ document.documentElement.pauseAnimations();
+ document.documentElement.setCurrentTime(0);
+ document.getElementById('a').removeAttribute('dur');
+ setTimeAndSnapshot(2, false)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <!--
+ A cycle that is valid at first but then becomes invalid.
+
+ So at first we have:
+ a: 0s-1.5s
+ new -> b: 1.5s-2.5s
+ new -> a: add 1.5s begin instance time
+
+ Remove 'dur' attr:
+ a: 0s-unresolved
+ change -> b: unresolved... delete interval
+ delete -> a: already visited <break>
+
+ a: 0s-unresolved
+ b: unresolved-unresolved
+ -->
+ <rect width="100" height="100" fill="green">
+ <animate attributeName="y" attributeType="XML" from="0" to="0" id="a"
+ begin="b.begin; 0s" dur="1.5s"/>
+ <animate attributeName="fill" attributeType="CSS" id="b"
+ values="red; red"
+ begin="a.end" dur="1s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/syncbase/cycle-ok-1.svg b/layout/reftests/svg/smil/syncbase/cycle-ok-1.svg
new file mode 100644
index 0000000000..7040027044
--- /dev/null
+++ b/layout/reftests/svg/smil/syncbase/cycle-ok-1.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(2, true)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <!--
+ A cycle that should be allowed.
+ -->
+ <rect width="100" height="100" fill="red">
+ <animate attributeName="y" attributeType="XML" from="0" to="0" id="a"
+ begin="b.begin; 1s" dur="4s"/>
+ <animate attributeName="fill" attributeType="CSS" id="b"
+ values="orange; green; purple"
+ begin="a.begin" dur="2s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/syncbase/cycle-ok-2.svg b/layout/reftests/svg/smil/syncbase/cycle-ok-2.svg
new file mode 100644
index 0000000000..df53f6f80c
--- /dev/null
+++ b/layout/reftests/svg/smil/syncbase/cycle-ok-2.svg
@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(2, true)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <!--
+ A ping-pong cycle that should be allowed.
+ Example 3 from SMIL3 section 5.4.5.
+ We have:
+ t=0s --> b: 0s-1s, a: 1s-2s
+ t=1s --> a: 1s-2s, b: 1.5s->2.5s
+ -->
+ <rect width="100" height="100" fill="red">
+ <animate attributeName="y" attributeType="XML" from="0" to="0" id="a"
+ begin="b.begin+1s" dur="1s"/>
+ <animate attributeName="fill" attributeType="CSS" id="b"
+ values="orange; green; purple"
+ begin="0s; a.begin+0.5s" dur="1s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/syncbase/cycle-ok-3.svg b/layout/reftests/svg/smil/syncbase/cycle-ok-3.svg
new file mode 100644
index 0000000000..7ef9b866c1
--- /dev/null
+++ b/layout/reftests/svg/smil/syncbase/cycle-ok-3.svg
@@ -0,0 +1,34 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="
+ document.documentElement.pauseAnimations();
+ document.documentElement.setCurrentTime(0);
+ document.getElementById('c').setAttribute('dur', '1s');
+ setTimeAndSnapshot(2, false)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <!--
+ Based on Example 2 from SMIL3 section 5.4.5, an invalid cycle,
+ but made valid by a DOM call.
+
+ At first we have:
+ a: unresolved-unresolved
+ b: unresolved-unresolved
+ c: 0s-unresolved
+
+ Then we set dur on c=1s, giving us
+ a: 1s-1.5s
+ b: 1s-3s
+ c: 0s-1s
+ -->
+ <rect width="100" height="100" fill="blue">
+ <animate attributeName="y" attributeType="XML" from="0" to="0" id="a"
+ begin="c.end" dur="0.5s"/>
+ <animate attributeName="fill" attributeType="CSS" id="b"
+ values="orange; green; purple"
+ begin="a.begin" dur="2s"/>
+ <animate attributeName="fill" attributeType="CSS" id="c"
+ values="red; red"
+ begin="0" end="b.end"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/syncbase/cycle-ok-4.svg b/layout/reftests/svg/smil/syncbase/cycle-ok-4.svg
new file mode 100644
index 0000000000..02bd95f928
--- /dev/null
+++ b/layout/reftests/svg/smil/syncbase/cycle-ok-4.svg
@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(2, true)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <!--
+ A cycle that should be allowed. Here ends and begins coincide.
+
+ So we have:
+ a: 0s-1.5s, 1.5s-3s, 3s-4.5s, ...
+ b: 1.5s-2.5s, 3s-4s, ...
+ -->
+ <rect width="100" height="100" fill="red">
+ <animate attributeName="y" attributeType="XML" from="0" to="0" id="a"
+ begin="b.begin; 0s" dur="1.5s"/>
+ <animate attributeName="fill" attributeType="CSS" id="b"
+ values="orange; green; purple"
+ begin="a.end" dur="1s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/syncbase/cycle-ok-5.svg b/layout/reftests/svg/smil/syncbase/cycle-ok-5.svg
new file mode 100644
index 0000000000..f6597a0cc3
--- /dev/null
+++ b/layout/reftests/svg/smil/syncbase/cycle-ok-5.svg
@@ -0,0 +1,23 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(2, true)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <!--
+ From SVG 1.2 Tiny Test Suite, animate-elem-221-t.svg
+
+ This test case is interesting because begin is not set on the first
+ animation. If we incorrectly detect this as a deleted begin time and thus
+ a deleted interval we get stuck in a loop marking the interval as deleted
+ and the new.
+ -->
+ <rect y="100" width="100" height="100" fill="red">
+ <animate id="a1" attributeName="y" attributeType="XML"
+ from="-20" to="80" dur="10s"
+ end="a1.begin+6s" max="2.5s" />
+ <animate attributeName="fill" attributeType="CSS"
+ values="orange; green; purple" keyTimes="0; 0.1; 1" dur="10s"
+ begin="1s" end="a1.end+6s"
+ max="7.5s" fill="freeze"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/syncbase/cycle-recursion-1.svg b/layout/reftests/svg/smil/syncbase/cycle-recursion-1.svg
new file mode 100644
index 0000000000..cb0411dc27
--- /dev/null
+++ b/layout/reftests/svg/smil/syncbase/cycle-recursion-1.svg
@@ -0,0 +1,42 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="
+ document.documentElement.pauseAnimations();
+ document.documentElement.setCurrentTime(0);
+ document.getElementById('c').removeAttribute('dur');
+ setTimeAndSnapshot(2, false)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <!--
+ At first we have:
+ c: 0s-1s
+ new -> a: 1s-1.5s
+ new -> b: 1s-2s
+ new -> c: 0s-1s [end: 2s]
+
+ Then we remove dur on c giving us:
+ c: 0s-2s
+ change -> a: 2s-2.5s
+ change -> b: 2s-3s
+ change -> c: 0s-3s
+ change -> a: 3s-3.5s [Should break the cycle here]
+ change -> b: 3s-4s
+ change -> c: 0s-4s
+ etc.
+
+ If we break on the second change notice we should arrive at:
+ a: 2s-2.5s
+ b: 2s-3s
+ c: 0s-3s
+ -->
+ <rect x="100" y="100" width="100" height="100" fill="red">
+ <animate attributeName="y" attributeType="XML" from="0" to="0" id="a"
+ begin="c.end" dur="0.5s"/>
+ <animate attributeName="fill" attributeType="CSS" id="b"
+ values="green; blue"
+ begin="a.begin" dur="1s"/>
+ <animate attributeName="x" attributeType="XML" id="c"
+ from="0" to="100" fill="freeze"
+ begin="0" end="b.end" dur="1s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/syncbase/cycle-recursion-2.svg b/layout/reftests/svg/smil/syncbase/cycle-recursion-2.svg
new file mode 100644
index 0000000000..df859a5305
--- /dev/null
+++ b/layout/reftests/svg/smil/syncbase/cycle-recursion-2.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(2, true)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <!--
+ If we don't detect the cycle here, we'll keep doing reverse propagation for
+ a very long time. Probably long enough for something to go really wrong.
+ -->
+ <rect width="100" height="100" fill="green">
+ <animate attributeName="y" attributeType="XML" from="100" to="100" id="a"
+ begin="20h; b.begin-1s" dur="4s"/>
+ <animate attributeName="fill" attributeType="CSS" id="b"
+ values="red; red"
+ begin="a.begin-1s" dur="2s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/syncbase/cycle-self-ref-1.svg b/layout/reftests/svg/smil/syncbase/cycle-self-ref-1.svg
new file mode 100644
index 0000000000..2163529726
--- /dev/null
+++ b/layout/reftests/svg/smil/syncbase/cycle-self-ref-1.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(2, true)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <!--
+ A valid self-referential cycle.
+ -->
+ <rect width="100" height="100" fill="red">
+ <animate attributeName="fill" attributeType="CSS" id="a"
+ values="orange; green; purple"
+ begin="a.begin+1.5s; -0.5s" dur="2s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/syncbase/cycle-self-ref-2.svg b/layout/reftests/svg/smil/syncbase/cycle-self-ref-2.svg
new file mode 100644
index 0000000000..b5fe6e1dd4
--- /dev/null
+++ b/layout/reftests/svg/smil/syncbase/cycle-self-ref-2.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(2, true)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <!--
+ A valid self-referential cycle.
+ -->
+ <rect width="100" height="100" fill="red">
+ <animate attributeName="fill" attributeType="CSS" id="a"
+ values="orange; green; purple"
+ begin="a.end; -1s" dur="2s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/syncbase/cycle-self-ref-3.svg b/layout/reftests/svg/smil/syncbase/cycle-self-ref-3.svg
new file mode 100644
index 0000000000..50fdaf9739
--- /dev/null
+++ b/layout/reftests/svg/smil/syncbase/cycle-self-ref-3.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(2, true)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <!--
+ A valid self-referential cycle.
+
+ We have a 4s animation which should give us green after 1s of its active
+ duration. The active duration is constrained to 2s using a self-referential
+ end spec. Furthermore a self-referential begin spec causes the animation to
+ restart as soon as it begins.
+ -->
+ <rect width="100" height="100" fill="red">
+ <animate attributeName="fill" attributeType="CSS" id="a"
+ values="orange; green; blue; yellow; purple"
+ begin="a.end; -1s" end="a.begin+2s" dur="4s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/syncbase/cycle-self-ref-4.svg b/layout/reftests/svg/smil/syncbase/cycle-self-ref-4.svg
new file mode 100644
index 0000000000..c53b3c5fa7
--- /dev/null
+++ b/layout/reftests/svg/smil/syncbase/cycle-self-ref-4.svg
@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="byeByeB()">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script type="text/javascript">
+ function byeByeB()
+ {
+ document.documentElement.pauseAnimations();
+ document.documentElement.setCurrentTime(0);
+ // Drop b
+ var b = document.getElementById('b');
+ b.parentNode.removeChild(b);
+ b = null;
+ // Snapshot at time t=4s. This is because there are two possible error cases
+ // we want to detect:
+ // i) b disappears and we just keep the existing time for a.begin+1s of t=2s
+ // ii) b disappears and we update the time for a.begin+1s to t=3s
+ setTimeAndSnapshot(4, false);
+ }
+ </script>
+ <!-- We have an arrangement where a is dependent on b and itself. If b's
+ interval disappears while a is still in the waiting state then the begin
+ time "a.begin+1s" should disappear too since a never begun. -->
+ <rect width="100" height="100" fill="green">
+ <set id="a" attributeName="fill" attributeType="CSS" to="red"
+ begin="b.begin; a.begin+1s"/>
+ <set id="b" attributeName="y" attributeType="XML" to="0"
+ begin="1s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/syncbase/cycle-self-ref-5.svg b/layout/reftests/svg/smil/syncbase/cycle-self-ref-5.svg
new file mode 100644
index 0000000000..e0e36e152a
--- /dev/null
+++ b/layout/reftests/svg/smil/syncbase/cycle-self-ref-5.svg
@@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="byeByeB()">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script type="text/javascript">
+ function byeByeB()
+ {
+ document.documentElement.pauseAnimations();
+ document.documentElement.setCurrentTime(2.5);
+ // Drop b
+ var b = document.getElementById('b');
+ b.parentNode.removeChild(b);
+ b = null;
+ setTimeAndSnapshot(8, false);
+ }
+ </script>
+ <!-- Similar to cycle-self-ref-4.svg but with end times.
+
+ We have an arrangement where a's end time is dependent on b and on
+ itself.
+
+ Initially:
+ - a's end time will be resolved as "b.end", i.e. 3s.
+ - Accordingly, the instance time for "a.end+2s" will be 5s (3s+2s).
+ - i.e. a's list of end instance times will be: [3, 5, 9].
+
+ If b's interval disappears (because we delete b):
+ - The end time "b.end" will become unresolved.
+ - i.e. a's list of end instance times will be: [5, 9, unresolved].
+
+ However, when updating a's end time we should not use the "5s" instance
+ time since it is based on a's end time which is what we are updating.
+
+ Expected behaviour:
+ - The instance time of "5s" will be skipped and the time of "9s" will be
+ used instead.
+ - At t=8s the animation will still be playing and the rectangle will be
+ green.
+
+ Failure behaviour:
+ - The next end instance time in the list will be used, giving a an end
+ time of 5s.
+ - The time "a.end+2s" will then be accordingly updated to 7s since a's
+ end time is now 5s. (Any subsequent attempts to update the time will be
+ ignored according to SMIL's cycle detection rules.)
+ - At t=8s the animation will have stopped and the rectangle will be red.
+ -->
+ <rect width="100" height="100" fill="red">
+ <set id="a" attributeName="fill" attributeType="CSS" to="green"
+ begin="2s" end="b.end; a.end+2s; 9s"/>
+ <set id="b" attributeName="y" attributeType="XML" to="0"
+ begin="1s" end="3s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/syncbase/deleted-interval-simple-1.svg b/layout/reftests/svg/smil/syncbase/deleted-interval-simple-1.svg
new file mode 100644
index 0000000000..cb516275a8
--- /dev/null
+++ b/layout/reftests/svg/smil/syncbase/deleted-interval-simple-1.svg
@@ -0,0 +1,22 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="
+ document.documentElement.pauseAnimations();
+ document.documentElement.setCurrentTime(0);
+ document.getElementById('a').setAttribute('end', '0s');
+ setTimeAndSnapshot(2, false)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <!--
+ A simple case of a deleting interval.
+ The timebase interval is made invalid by script and hence a delete
+ notification should be propagated to the dependent interval.
+ -->
+ <rect width="100" height="100" fill="green">
+ <animate attributeName="y" attributeType="XML" from="0" to="0" id="a"
+ begin="1s" dur="10s"/>
+ <animate attributeName="fill" attributeType="CSS" id="b"
+ values="red; red"
+ begin="a.begin" dur="2s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/syncbase/deleted-interval-simple-2.svg b/layout/reftests/svg/smil/syncbase/deleted-interval-simple-2.svg
new file mode 100644
index 0000000000..6e4df7dbce
--- /dev/null
+++ b/layout/reftests/svg/smil/syncbase/deleted-interval-simple-2.svg
@@ -0,0 +1,26 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="
+ document.documentElement.pauseAnimations();
+ document.documentElement.setCurrentTime(0.75);
+ document.getElementById('a').setAttribute('restart', 'never');
+ setTimeAndSnapshot(2, false)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <!--
+ Originally we have an interval from -1.5s to 0.5s. We'll ignore 'a's begin
+ time of t=0s because we are restart="whenNotActive".
+ At time t=0.1s, 'a' will create a new interval from 1.0 to 1.1s and we'll
+ add the new instance time of 1.0s.
+ However, at t=0.75s the restart mode of 'a' is changed to restart="never"
+ therefore the second interval is deleted and the change should be propagated
+ to us.
+ -->
+ <rect width="100" height="100" fill="green">
+ <animate attributeName="y" attributeType="XML" from="0" to="0" id="a"
+ begin="0s; 1s" dur="0.1s"/>
+ <animate attributeName="fill" attributeType="CSS"
+ values="red; red"
+ begin="-1.5s; a.begin" dur="2s" restart="whenNotActive"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/syncbase/deleted-interval-simple-3.svg b/layout/reftests/svg/smil/syncbase/deleted-interval-simple-3.svg
new file mode 100644
index 0000000000..7f290b8a0c
--- /dev/null
+++ b/layout/reftests/svg/smil/syncbase/deleted-interval-simple-3.svg
@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="
+ document.documentElement.pauseAnimations();
+ document.documentElement.setCurrentTime(0.25);
+ document.getElementById('a').setAttribute('restart', 'never');
+ setTimeAndSnapshot(2, false)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <!--
+ As with deleted-interval-simple-2.svg but this time we should get the
+ deleted interval notice while in the active state.
+ -->
+ <rect width="100" height="100" fill="green">
+ <animate attributeName="y" attributeType="XML" from="0" to="0" id="a"
+ begin="0s; 1s" dur="0.1s"/>
+ <animate attributeName="fill" attributeType="CSS"
+ values="red; red"
+ begin="-1.5s; a.begin" dur="2s" restart="whenNotActive"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/syncbase/deleted-interval-simple-4.svg b/layout/reftests/svg/smil/syncbase/deleted-interval-simple-4.svg
new file mode 100644
index 0000000000..e7d1a8e599
--- /dev/null
+++ b/layout/reftests/svg/smil/syncbase/deleted-interval-simple-4.svg
@@ -0,0 +1,26 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="
+ document.documentElement.pauseAnimations();
+ document.documentElement.setCurrentTime(0);
+ document.getElementById('a').beginElementAt(0.5);
+ setTimeAndSnapshot(2, false)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <!--
+ Originally the third animation's interval is from 1s->3s, but then by
+ script we add another begin time to 'a' at 0.5, and since 'a' can't
+ restart, this is the only begin time it will ever generate. Therefore, all
+ the ends for animation 'b' are before the begin, and there's no valid
+ interval.
+ -->
+ <rect width="100" height="100" fill="green">
+ <animate attributeName="y" attributeType="XML" from="0" to="0" id="a"
+ begin="3s" dur="10s" restart="never"/>
+ <animate attributeName="y" attributeType="XML" from="0" to="0" id="b"
+ begin="1s" end="a.begin" dur="3s"/>
+ <animate attributeName="fill" attributeType="CSS"
+ values="red; red"
+ begin="b.begin" dur="2s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/syncbase/deleted-interval-simple-5.svg b/layout/reftests/svg/smil/syncbase/deleted-interval-simple-5.svg
new file mode 100644
index 0000000000..677c960330
--- /dev/null
+++ b/layout/reftests/svg/smil/syncbase/deleted-interval-simple-5.svg
@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="
+ document.documentElement.pauseAnimations();
+ document.documentElement.setCurrentTime(0);
+ document.getElementById('a').removeAttribute('dur');
+ setTimeAndSnapshot(2, false)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <!--
+ A case of a changing interval that causes another interval to have an
+ unresolved begin time and hence be deleted.
+ -->
+ <rect width="100" height="100" fill="green">
+ <animate attributeName="y" attributeType="XML" from="0" to="0" id="a"
+ begin="0s" dur="1s"/>
+ <animate attributeName="fill" attributeType="CSS" id="b"
+ values="red; red"
+ begin="a.end" dur="2s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/syncbase/filtered-interval-1.svg b/layout/reftests/svg/smil/syncbase/filtered-interval-1.svg
new file mode 100644
index 0000000000..2ed6d549be
--- /dev/null
+++ b/layout/reftests/svg/smil/syncbase/filtered-interval-1.svg
@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(2, true)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <!--
+ This test ensures that even if we have an old interval, if it is part of an
+ active dependency chain it should not be filtered.
+ -->
+ <rect width="100" height="100" fill="orange">
+ <!-- This animation is indirectly dependent on anim 'b' and hence, even
+ though it appears earlier in the document it should be given
+ priority. -->
+ <set attributeName="fill" to="green" begin="a.begin"/>
+
+ <!-- This will generate a series of short intervals such that by t=2s the
+ interval via which the first animation depends on b might be considered
+ as a candidate for filtering. -->
+ <set attributeName="width" to="100" begin="b.begin-2s; a.begin+0.2s"
+ dur="0.1s" id="a"/>
+
+ <set attributeName="fill" to="red" begin="2s" id="b"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/syncbase/green-box-ref.svg b/layout/reftests/svg/smil/syncbase/green-box-ref.svg
new file mode 100644
index 0000000000..120941444a
--- /dev/null
+++ b/layout/reftests/svg/smil/syncbase/green-box-ref.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <rect width="100" height="100" fill="green"/>
+</svg>
diff --git a/layout/reftests/svg/smil/syncbase/green-box-ref.xhtml b/layout/reftests/svg/smil/syncbase/green-box-ref.xhtml
new file mode 100644
index 0000000000..ce0bc78f12
--- /dev/null
+++ b/layout/reftests/svg/smil/syncbase/green-box-ref.xhtml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<body>
+<svg xmlns="http://www.w3.org/2000/svg" width="120px" height="120px">
+ <rect width="100" height="100" fill="green"/>
+</svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/smil/syncbase/new-interval-chain-1.svg b/layout/reftests/svg/smil/syncbase/new-interval-chain-1.svg
new file mode 100644
index 0000000000..ec71c47eee
--- /dev/null
+++ b/layout/reftests/svg/smil/syncbase/new-interval-chain-1.svg
@@ -0,0 +1,22 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(2, true)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <!--
+ Test some chained interval creation.
+ -->
+ <rect width="100" height="100" fill="red">
+ <animate attributeName="y" attributeType="XML" from="0" to="0" id="a"
+ begin="0s; 1s" dur="4s"/>
+ <animate attributeName="y" attributeType="XML" from="0" to="0" id="b"
+ begin="a.begin" dur="4s"/>
+ <animate attributeName="y" attributeType="XML" from="0" to="0" id="c"
+ begin="b.begin-1s" dur="4s"/>
+ <animate attributeName="y" attributeType="XML" from="0" to="0" id="d"
+ begin="c.begin+0.5s" dur="4s"/>
+ <animate attributeName="fill" attributeType="CSS"
+ values="orange; green; purple"
+ begin="d.begin; a.begin" dur="5s" restart="whenNotActive"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/syncbase/new-interval-chain-2.svg b/layout/reftests/svg/smil/syncbase/new-interval-chain-2.svg
new file mode 100644
index 0000000000..831f12e262
--- /dev/null
+++ b/layout/reftests/svg/smil/syncbase/new-interval-chain-2.svg
@@ -0,0 +1,22 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(2, true)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <!--
+ Test some chained interval creation.
+ -->
+ <rect width="100" height="100" fill="red">
+ <animate attributeName="y" attributeType="XML" from="0" to="0" id="a"
+ begin="0s; 1s" dur="4s"/>
+ <animate attributeName="y" attributeType="XML" from="0" to="0" id="b"
+ begin="a.begin" dur="4s"/>
+ <animate attributeName="y" attributeType="XML" from="0" to="0" id="c"
+ begin="b.begin-1s" dur="4s"/>
+ <animate attributeName="y" attributeType="XML" from="0" to="0" id="d"
+ begin="c.begin+0.5s" dur="4s"/>
+ <animate attributeName="fill" attributeType="CSS"
+ values="orange; green; purple"
+ begin="d.begin; a.begin" dur="2s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/syncbase/new-interval-doubly-dependent-1.svg b/layout/reftests/svg/smil/syncbase/new-interval-doubly-dependent-1.svg
new file mode 100644
index 0000000000..17f5daf97e
--- /dev/null
+++ b/layout/reftests/svg/smil/syncbase/new-interval-doubly-dependent-1.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(2, true)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <!--
+ Test a relationship where one element depends on another twice.
+ -->
+ <rect width="100" height="100" fill="red">
+ <animate attributeName="y" attributeType="XML" from="0" to="0" id="a"
+ begin="1s" dur="4s"/>
+ <animate attributeName="fill" attributeType="CSS"
+ values="orange; green; purple"
+ begin="a.begin+0.5s; a.begin" dur="1s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/syncbase/new-interval-doubly-dependent-2.svg b/layout/reftests/svg/smil/syncbase/new-interval-doubly-dependent-2.svg
new file mode 100644
index 0000000000..1f669b0898
--- /dev/null
+++ b/layout/reftests/svg/smil/syncbase/new-interval-doubly-dependent-2.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(2, true)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <!--
+ Test a relationship where one element depends on another twice.
+ (As with previous test but reversing the order of the specifications.)
+ -->
+ <rect width="100" height="100" fill="red">
+ <animate attributeName="y" attributeType="XML" from="0" to="0" id="a"
+ begin="1s" dur="4s"/>
+ <animate attributeName="fill" attributeType="CSS"
+ values="orange; green; purple"
+ begin="a.begin; a.begin+0.5s" dur="1s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/syncbase/new-interval-doubly-dependent-3.svg b/layout/reftests/svg/smil/syncbase/new-interval-doubly-dependent-3.svg
new file mode 100644
index 0000000000..d3d2908ebd
--- /dev/null
+++ b/layout/reftests/svg/smil/syncbase/new-interval-doubly-dependent-3.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(2, true)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <!--
+ Test a relationship where one element depends on another twice and where the
+ restart mode should cause one instance time to be ignored.
+ -->
+ <rect width="100" height="100" fill="red">
+ <animate attributeName="y" attributeType="XML" from="0" to="0" id="a"
+ begin="1s" dur="4s"/>
+ <animate attributeName="fill" attributeType="CSS"
+ values="orange; green; purple"
+ begin="a.begin+0.5s; a.begin" dur="2s" restart="whenNotActive"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/syncbase/new-interval-early-end-1.svg b/layout/reftests/svg/smil/syncbase/new-interval-early-end-1.svg
new file mode 100644
index 0000000000..3fd87aff8f
--- /dev/null
+++ b/layout/reftests/svg/smil/syncbase/new-interval-early-end-1.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(2, true)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <!--
+ Test an early end with a negative offset.
+ (An early end is when a new interval restarts the current animation
+ mid-way.)
+ -->
+ <rect width="100" height="100" fill="red">
+ <animate attributeName="y" attributeType="XML" from="0" to="0" id="a"
+ begin="0s; 2s" dur="4s"/>
+ <animate attributeName="fill" attributeType="CSS"
+ values="orange; green; purple"
+ begin="a.begin-0.5s" dur="1s" restart="whenNotActive"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/syncbase/new-interval-early-end-2.svg b/layout/reftests/svg/smil/syncbase/new-interval-early-end-2.svg
new file mode 100644
index 0000000000..9dc79c318d
--- /dev/null
+++ b/layout/reftests/svg/smil/syncbase/new-interval-early-end-2.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(2, true)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <!--
+ Test an early end where two times could be chosen for the following
+ interval.
+ -->
+ <rect width="100" height="100" fill="red">
+ <animate attributeName="y" attributeType="XML" from="0" to="0" id="a"
+ begin="0s; 1.5s" dur="1s"/>
+ <animate attributeName="fill" attributeType="CSS"
+ values="orange; green; purple"
+ begin="a.begin+0.25s; a.begin" dur="1s" restart="whenNotActive"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/syncbase/new-interval-early-end-3.svg b/layout/reftests/svg/smil/syncbase/new-interval-early-end-3.svg
new file mode 100644
index 0000000000..de8920f48f
--- /dev/null
+++ b/layout/reftests/svg/smil/syncbase/new-interval-early-end-3.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(2, true)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <!--
+ Test an early end where two times could be chosen for the following
+ interval.
+ (As before but with a negative offset.)
+ -->
+ <rect width="100" height="100" fill="red">
+ <animate attributeName="y" attributeType="XML" from="0" to="0" id="a"
+ begin="0s; 1.75s" dur="4s"/>
+ <animate attributeName="fill" attributeType="CSS"
+ values="orange; green; purple"
+ begin="a.begin-0.25s; a.begin" dur="1s" restart="whenNotActive"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/syncbase/new-interval-early-end-4.svg b/layout/reftests/svg/smil/syncbase/new-interval-early-end-4.svg
new file mode 100644
index 0000000000..e46c2d62da
--- /dev/null
+++ b/layout/reftests/svg/smil/syncbase/new-interval-early-end-4.svg
@@ -0,0 +1,26 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(2, true)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <!--
+ Test an early end where two times could be chosen for the following
+ interval.
+ (As before but with a negative offset and with the second animation getting
+ overlapping intervals from a's begin times, with one such interval being
+ rejected since it overlaps an already-completed interval when it's
+ created.)
+
+ Details: At time t=1.75, we generate an interval starting at 1.35 for the
+ second animation. However, this overlaps that animation's already-complete
+ previous interval from 0.4s to 1.4s (which is "already complete" because
+ we're at t=1.75, past its end at 1.4s). So, the new interval is rejected.
+ -->
+ <rect width="100" height="100" fill="green">
+ <animate attributeName="y" attributeType="XML" from="0" to="0" id="a"
+ begin="0s; 1.75s" dur="4s"/>
+ <animate attributeName="fill" attributeType="CSS"
+ values="red"
+ begin="a.begin-0.4s; a.begin+0.4s" dur="1s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/syncbase/new-interval-early-end-5.svg b/layout/reftests/svg/smil/syncbase/new-interval-early-end-5.svg
new file mode 100644
index 0000000000..545e640a22
--- /dev/null
+++ b/layout/reftests/svg/smil/syncbase/new-interval-early-end-5.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(2, true)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <!--
+ Test two early ends where one generates an earlier time for the other.
+
+ So both restart at 1.5s, and both old intervals should be ended off. Hence
+ the syncbase time should be ignored.
+ -->
+ <rect width="100" height="100" fill="red">
+ <animate attributeName="y" attributeType="XML" from="0" to="0" id="a"
+ begin="0.5s; 1.5s" dur="4s"/>
+ <animate attributeName="fill" attributeType="CSS"
+ values="orange; green; purple"
+ begin="0.75s; 1.5s; a.begin-0.5s" dur="1s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/syncbase/new-interval-early-end-6.svg b/layout/reftests/svg/smil/syncbase/new-interval-early-end-6.svg
new file mode 100644
index 0000000000..f4ea84c903
--- /dev/null
+++ b/layout/reftests/svg/smil/syncbase/new-interval-early-end-6.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(2, true)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <!--
+ Test two early ends where one generates a later time for the other.
+ -->
+ <rect width="100" height="100" fill="red">
+ <animate attributeName="y" attributeType="XML" from="0" to="0" id="a"
+ begin="0.5s; 1s" dur="4s"/>
+ <animate attributeName="fill" attributeType="CSS"
+ values="orange; green; purple"
+ begin="0.5s; 1s; a.begin+0.5s" dur="1s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/syncbase/new-interval-early-end-7.svg b/layout/reftests/svg/smil/syncbase/new-interval-early-end-7.svg
new file mode 100644
index 0000000000..79f99594a5
--- /dev/null
+++ b/layout/reftests/svg/smil/syncbase/new-interval-early-end-7.svg
@@ -0,0 +1,22 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(2, true)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <!--
+ Test that we don't apply an early end too soon.
+
+ Although the second animation will have an interval from 2s-6s, it shouldn't
+ be informed about this until the early end happens, at t=3s. Until that time
+ it should be expecting to start at t=4s.
+
+ If the second animation is started at t=2s it means the early end has been
+ applied too soon.
+ -->
+ <rect width="100" height="100" fill="green">
+ <set attributeName="y" attributeType="XML" to="0" id="a"
+ begin="0s; 3s" dur="5s"/>
+ <set attributeName="fill" attributeType="CSS"
+ to="red" begin="a.end-1s" dur="4s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/syncbase/new-interval-end-dep-1.svg b/layout/reftests/svg/smil/syncbase/new-interval-end-dep-1.svg
new file mode 100644
index 0000000000..4140569239
--- /dev/null
+++ b/layout/reftests/svg/smil/syncbase/new-interval-end-dep-1.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(2, true)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <!--
+ The simplest possible end dependency.
+ -->
+ <rect width="100" height="100" fill="red">
+ <animate attributeName="y" attributeType="XML" from="0" to="0" id="a"
+ begin="0s" dur="1s"/>
+ <animate attributeName="fill" attributeType="CSS"
+ values="orange; green; purple"
+ begin="a.end" dur="2s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/syncbase/new-interval-end-negative-1.svg b/layout/reftests/svg/smil/syncbase/new-interval-end-negative-1.svg
new file mode 100644
index 0000000000..0ba96dbeb4
--- /dev/null
+++ b/layout/reftests/svg/smil/syncbase/new-interval-end-negative-1.svg
@@ -0,0 +1,39 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(2, true)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <!--
+ Test a dependency with a negative offset that occurs at the end of another
+ interval.
+
+ This is one of the most important tests in the suite.
+
+ REALLY IMPORTANT: Suppose we generate a new instance time, placed at a
+ particular instant during the previous interval. In fact, correct behavior
+ depends on *when* we generate this instance time. If we generate it AFTER
+ the previous interval has ended, then the new instance time will be
+ IGNORED. However, if we generate it BEFORE the previous interval has ended
+ (and if restart="always"), then a new interval will be generated, and the
+ animation will restart.
+ (To be absolutely clear: above, the words "AFTER" and "BEFORE" describe
+ *when the instance time is generated*, as opposed to *where on the timeline
+ the instance time is placed*).
+
+ So, if a new instance time is generated at the same time as an interval is
+ due to end what should happen? SMIL's endpoint-exclusive timing seems to
+ imply that interval ends should be processed first and hence the new
+ instance time should be ignored. Opera, WebKit and Batik seem to agree on
+ this.
+
+ Hence why this test is so important. It tests that we are actually
+ processing ends first.
+ -->
+ <rect width="100" height="100" fill="red">
+ <animate attributeName="y" attributeType="XML" from="0" to="0" id="a"
+ begin="0s; 1.5s" dur="1.5s"/>
+ <animate attributeName="fill" attributeType="CSS"
+ values="orange; green" fill="freeze"
+ begin="a.begin-0.5s" dur="2s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/syncbase/new-interval-end-negative-2.svg b/layout/reftests/svg/smil/syncbase/new-interval-end-negative-2.svg
new file mode 100644
index 0000000000..e9c1f2f448
--- /dev/null
+++ b/layout/reftests/svg/smil/syncbase/new-interval-end-negative-2.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(2, true)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <!--
+ Test a dependency with a negative offset that occurs at the end of another
+ interval.
+ (As with the previous test but with an early end.)
+ -->
+ <rect width="100" height="100" fill="red">
+ <animate attributeName="y" attributeType="XML" from="0" to="0" id="a"
+ begin="0s; 1.5s" dur="4s"/>
+ <animate attributeName="fill" attributeType="CSS"
+ values="orange; green" fill="freeze"
+ begin="a.begin-0.5s" dur="2s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/syncbase/new-interval-freeze-begin-1.svg b/layout/reftests/svg/smil/syncbase/new-interval-freeze-begin-1.svg
new file mode 100644
index 0000000000..07df8fc111
--- /dev/null
+++ b/layout/reftests/svg/smil/syncbase/new-interval-freeze-begin-1.svg
@@ -0,0 +1,31 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="
+ document.documentElement.pauseAnimations();
+ document.documentElement.setCurrentTime(1.5);
+ document.getElementById('a').setAttribute('begin', '3s');
+ setTimeAndSnapshot(2, false)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <!--
+ Tests that when we create an interval we freeze the begin time once it has
+ started.
+
+ So we have:
+
+ a: begin: 2s
+ b: begin: a.begin-1s
+
+ at t=1s, b begins
+ at t=1.5s, a's begin time is updated to 3s which will create a change notice
+
+ However, b should not then restart at t=2s regardless of the restart mode
+ because once the interval has started the begin time is fixed.
+ -->
+ <rect width="100" height="100" fill="red">
+ <set attributeName="y" attributeType="XML" to="0" id="a" begin="2s"/>
+ <animate attributeName="fill" attributeType="CSS"
+ values="orange; green; purple"
+ begin="a.begin-1s" dur="2s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/syncbase/new-interval-negative-offset-1.svg b/layout/reftests/svg/smil/syncbase/new-interval-negative-offset-1.svg
new file mode 100644
index 0000000000..8116606d74
--- /dev/null
+++ b/layout/reftests/svg/smil/syncbase/new-interval-negative-offset-1.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(2, true)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <!--
+ Simple case of a negative offset.
+ -->
+ <rect width="100" height="100" fill="red">
+ <animate attributeName="y" attributeType="XML" from="0" to="0" id="a"
+ begin="1s" dur="4s"/>
+ <animate attributeName="fill" attributeType="CSS"
+ values="orange; green; purple"
+ begin="a.begin-0.5s" dur="3s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/syncbase/new-interval-negative-offset-2.svg b/layout/reftests/svg/smil/syncbase/new-interval-negative-offset-2.svg
new file mode 100644
index 0000000000..e06b9607d8
--- /dev/null
+++ b/layout/reftests/svg/smil/syncbase/new-interval-negative-offset-2.svg
@@ -0,0 +1,30 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(2, true)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <!--
+ Simple case of a negative offset before the syncbase has begun.
+
+ SMILANIM 3.3.6 Propagating changes to times has:
+
+ When an element begins or ends, the time dependents of the element are
+ effectively notified of the action, and the schedule for the time
+ dependents may be affected. Note than an element must actually begin
+ before any of the time dependents (dependent on the begin) are affected,
+ and that an element must actually end before any of the time dependents
+ (dependent on the end) are affected.
+
+ This would suggest that a time dependent that is defined to start BEFORE its
+ syncbase does not actually start until the syncbase starts. However Opera,
+ WebKit, and Batik all agree that when we know when the syncbase will start,
+ we resolve the negative offset in advance.
+ -->
+ <rect width="100" height="100" fill="red">
+ <animate attributeName="y" attributeType="XML" from="0" to="0" id="a"
+ begin="3s" dur="4s"/>
+ <animate attributeName="fill" attributeType="CSS"
+ values="green; orange"
+ begin="a.begin-1s" dur="3s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/syncbase/new-interval-negative-offset-3.svg b/layout/reftests/svg/smil/syncbase/new-interval-negative-offset-3.svg
new file mode 100644
index 0000000000..fc8f5c0324
--- /dev/null
+++ b/layout/reftests/svg/smil/syncbase/new-interval-negative-offset-3.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(2, true)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <!--
+ A simple syncbase relationship using a negative offset that creates a begin
+ time before the document begin. We're really just testing for unwanted
+ clamping here.
+ -->
+ <rect width="100" height="100" fill="red">
+ <animate attributeName="y" attributeType="XML" from="0" to="0" id="a"
+ begin="1s" dur="4s"/>
+ <animate attributeName="fill" attributeType="CSS"
+ values="orange; green; purple"
+ begin="a.begin-3s" dur="8s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/syncbase/new-interval-negative-offset-4.svg b/layout/reftests/svg/smil/syncbase/new-interval-negative-offset-4.svg
new file mode 100644
index 0000000000..663e3c562a
--- /dev/null
+++ b/layout/reftests/svg/smil/syncbase/new-interval-negative-offset-4.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(2, true)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <!--
+ A simple syncbase relationship using a negative offset that creates a begin
+ time of 0. Just checking that 0 is not treated as a special value.
+ -->
+ <rect width="100" height="100" fill="red">
+ <animate attributeName="y" attributeType="XML" from="0" to="0" id="a"
+ begin="2s" dur="4s"/>
+ <animate attributeName="fill" attributeType="CSS"
+ values="orange; green; purple"
+ begin="a.begin-2s" dur="4s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/syncbase/new-interval-negative-syncbase-1.svg b/layout/reftests/svg/smil/syncbase/new-interval-negative-syncbase-1.svg
new file mode 100644
index 0000000000..428becb376
--- /dev/null
+++ b/layout/reftests/svg/smil/syncbase/new-interval-negative-syncbase-1.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(2, true)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <!--
+ A simple syncbase relationship using negative times.
+ -->
+ <rect width="100" height="100" fill="red">
+ <animate attributeName="y" attributeType="XML" from="0" to="0" id="a"
+ begin="-1s" dur="4s"/>
+ <animate attributeName="fill" attributeType="CSS"
+ values="orange; green; purple"
+ begin="a.begin-1s" dur="8s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/syncbase/new-interval-restart-1.svg b/layout/reftests/svg/smil/syncbase/new-interval-restart-1.svg
new file mode 100644
index 0000000000..ce7f6480d1
--- /dev/null
+++ b/layout/reftests/svg/smil/syncbase/new-interval-restart-1.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(2, true)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <!--
+ A simple test that a syncbase that fires twice will also cause its dependent
+ to run twice (assuming restart="always" which is the default).
+ -->
+ <rect width="100" height="100" fill="red">
+ <animate attributeName="y" attributeType="XML" from="0" to="0" id="a"
+ begin="0.5s; 1s" dur="4s"/>
+ <animate attributeName="fill" attributeType="CSS"
+ values="orange; green; purple"
+ begin="a.begin" dur="2s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/syncbase/new-interval-restart-2.svg b/layout/reftests/svg/smil/syncbase/new-interval-restart-2.svg
new file mode 100644
index 0000000000..dc03b9bcac
--- /dev/null
+++ b/layout/reftests/svg/smil/syncbase/new-interval-restart-2.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(2, true)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <!--
+ Test that restart="whenNotActive" on the syncbase prevents a new instance
+ time from being propagated to the time dependent.
+ -->
+ <rect width="100" height="100" fill="red">
+ <animate attributeName="y" attributeType="XML" from="0" to="0" id="a"
+ begin="1s; 1.5s" dur="4s" restart="whenNotActive"/>
+ <animate attributeName="fill" attributeType="CSS"
+ values="orange; green; purple"
+ begin="a.begin" dur="2s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/syncbase/new-interval-restart-3.svg b/layout/reftests/svg/smil/syncbase/new-interval-restart-3.svg
new file mode 100644
index 0000000000..78e79d8c83
--- /dev/null
+++ b/layout/reftests/svg/smil/syncbase/new-interval-restart-3.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(2, true)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <!--
+ Test that restart="whenNotActive" on the time dependent causes new instance
+ times from the syncbase to be ignored.
+ -->
+ <rect width="100" height="100" fill="red">
+ <animate attributeName="y" attributeType="XML" from="0" to="0" id="a"
+ begin="1s; 1.5s" dur="4s"/>
+ <animate attributeName="fill" attributeType="CSS"
+ values="orange; green; purple"
+ begin="a.begin" dur="2s" restart="whenNotActive"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/syncbase/new-interval-sample-order-1.svg b/layout/reftests/svg/smil/syncbase/new-interval-sample-order-1.svg
new file mode 100644
index 0000000000..3f7b668b02
--- /dev/null
+++ b/layout/reftests/svg/smil/syncbase/new-interval-sample-order-1.svg
@@ -0,0 +1,29 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(2, true)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <!--
+ Test that ends are sampled first.
+ -->
+ <rect width="100" height="100" fill="red">
+ <animate attributeName="y" attributeType="XML" from="0" to="0" id="a"
+ begin="-3s; 1.5s" dur="20s"/>
+ <animate attributeName="fill" attributeType="CSS"
+ values="orange; green; purple"
+ begin="a.begin-0.5s; 1.5s" dur="2s" restart="whenNotActive"/>
+ <!--
+ So initially we have:
+ a: -3->17s
+ (b): -3.5->-1.5s (instance times: -3.5s, 1.5s)
+
+ At t=1.5s we get an early end on 'a', giving us:
+ a: 1.5->21.5s
+ (b): 1.0->3.0s (instance times: 1.0s, 1.5s)
+
+ If, at t=1.5s, we sample the second animation first, we'll start an
+ interval from 1.5s instead of 1.0s. So this is a test that ends are
+ actually sampled first.
+ -->
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/syncbase/new-interval-simple-1.svg b/layout/reftests/svg/smil/syncbase/new-interval-simple-1.svg
new file mode 100644
index 0000000000..ed0ea22d62
--- /dev/null
+++ b/layout/reftests/svg/smil/syncbase/new-interval-simple-1.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(2, true)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <!--
+ The simplest possible syncbase test.
+ -->
+ <rect width="100" height="100" fill="red">
+ <animate attributeName="y" attributeType="XML" from="0" to="0" id="a"
+ begin="1s" dur="4s"/>
+ <animate attributeName="fill" attributeType="CSS"
+ values="orange; green; purple"
+ begin="a.begin" dur="2s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/syncbase/new-interval-simple-2.svg b/layout/reftests/svg/smil/syncbase/new-interval-simple-2.svg
new file mode 100644
index 0000000000..25d627805b
--- /dev/null
+++ b/layout/reftests/svg/smil/syncbase/new-interval-simple-2.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(2, true)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <!--
+ A simple syncbase relationship where the syncbase appears after the
+ time dependent in the document.
+ -->
+ <rect width="100" height="100" fill="red">
+ <animate attributeName="fill" attributeType="CSS"
+ values="orange; green; purple"
+ begin="a.begin" dur="2s"/>
+ <animate attributeName="y" attributeType="XML" from="0" to="0" id="a"
+ begin="1s" dur="4s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/syncbase/new-interval-triply-dependent-1.svg b/layout/reftests/svg/smil/syncbase/new-interval-triply-dependent-1.svg
new file mode 100644
index 0000000000..c3b7cc3ead
--- /dev/null
+++ b/layout/reftests/svg/smil/syncbase/new-interval-triply-dependent-1.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(2, true)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <!--
+ Test a relationship where one element depends on another thrice.
+ -->
+ <rect width="100" height="100" fill="red">
+ <animate attributeName="y" attributeType="XML" from="0" to="0" id="a"
+ begin="1s" dur="4s"/>
+ <animate attributeName="fill" attributeType="CSS"
+ values="orange; green; purple"
+ begin="a.begin; a.begin; a.begin" dur="2s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/syncbase/new-interval-triply-dependent-2.svg b/layout/reftests/svg/smil/syncbase/new-interval-triply-dependent-2.svg
new file mode 100644
index 0000000000..b1ade9c624
--- /dev/null
+++ b/layout/reftests/svg/smil/syncbase/new-interval-triply-dependent-2.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(2, true)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <!--
+ Test a relationship where one element depends on another thrice.
+ (As before but with different offsets.)
+ -->
+ <rect width="100" height="100" fill="red">
+ <animate attributeName="y" attributeType="XML" from="0" to="0" id="a"
+ begin="1s" dur="4s"/>
+ <animate attributeName="fill" attributeType="CSS"
+ values="orange; green; purple"
+ begin="a.begin-0.5s; a.begin+0.5s; a.begin" dur="1s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/syncbase/reftest.list b/layout/reftests/svg/smil/syncbase/reftest.list
new file mode 100644
index 0000000000..52728b2a53
--- /dev/null
+++ b/layout/reftests/svg/smil/syncbase/reftest.list
@@ -0,0 +1,99 @@
+# Tests related to SVG Animation (using SMIL) that use syncbase timing.
+
+# New intervals
+== new-interval-simple-1.svg green-box-ref.svg
+== new-interval-simple-2.svg green-box-ref.svg
+== new-interval-negative-offset-1.svg green-box-ref.svg
+== new-interval-negative-offset-2.svg green-box-ref.svg
+== new-interval-negative-offset-3.svg green-box-ref.svg
+== new-interval-negative-offset-4.svg green-box-ref.svg
+== new-interval-negative-syncbase-1.svg green-box-ref.svg
+== new-interval-restart-1.svg green-box-ref.svg
+== new-interval-restart-2.svg green-box-ref.svg
+== new-interval-restart-3.svg green-box-ref.svg
+== new-interval-early-end-1.svg green-box-ref.svg
+== new-interval-early-end-2.svg green-box-ref.svg
+== new-interval-early-end-3.svg green-box-ref.svg
+== new-interval-early-end-4.svg green-box-ref.svg
+== new-interval-early-end-5.svg green-box-ref.svg
+== new-interval-early-end-6.svg green-box-ref.svg
+== new-interval-early-end-7.svg green-box-ref.svg
+== new-interval-doubly-dependent-1.svg green-box-ref.svg
+== new-interval-doubly-dependent-2.svg green-box-ref.svg
+== new-interval-doubly-dependent-3.svg green-box-ref.svg
+== new-interval-triply-dependent-1.svg green-box-ref.svg
+== new-interval-triply-dependent-2.svg green-box-ref.svg
+== new-interval-end-negative-1.svg green-box-ref.svg
+== new-interval-end-negative-2.svg green-box-ref.svg
+== new-interval-end-dep-1.svg green-box-ref.svg
+== new-interval-chain-1.svg green-box-ref.svg
+== new-interval-chain-2.svg green-box-ref.svg
+== new-interval-sample-order-1.svg green-box-ref.svg
+== new-interval-freeze-begin-1.svg green-box-ref.svg
+
+# Changing intervals
+== changed-interval-simple-1.svg green-box-ref.svg
+== changed-interval-simple-2.svg green-box-ref.svg
+== changed-interval-simple-3.svg green-box-ref.svg
+== changed-interval-simple-4.svg green-box-ref.svg
+== changed-interval-simple-5.svg green-box-ref.svg
+== changed-interval-resolved-1.svg green-box-ref.svg
+== changed-interval-resolved-2.svg green-box-ref.svg
+== changed-interval-sort-1.svg green-box-ref.svg
+== changed-interval-change-spec-1.svg green-box-ref.svg
+== changed-interval-change-spec-2.svg green-box-ref.svg
+== changed-interval-change-spec-3.svg green-box-ref.svg
+== changed-interval-change-spec-4.svg green-box-ref.svg
+
+# Deleted intervals
+== deleted-interval-simple-1.svg green-box-ref.svg
+== deleted-interval-simple-2.svg green-box-ref.svg
+== deleted-interval-simple-3.svg green-box-ref.svg
+== deleted-interval-simple-4.svg green-box-ref.svg
+== deleted-interval-simple-5.svg green-box-ref.svg
+
+# Trimmed intervals
+== trimmed-interval-1.svg green-box-ref.svg
+
+# Cyclic dependencies
+== cycle-ok-1.svg green-box-ref.svg
+== cycle-ok-2.svg green-box-ref.svg
+== cycle-ok-3.svg green-box-ref.svg
+== cycle-ok-4.svg green-box-ref.svg
+== cycle-ok-5.svg green-box-ref.svg
+== cycle-self-ref-1.svg green-box-ref.svg
+== cycle-self-ref-2.svg green-box-ref.svg
+== cycle-self-ref-3.svg green-box-ref.svg
+== cycle-self-ref-4.svg green-box-ref.svg
+== cycle-self-ref-5.svg green-box-ref.svg
+== cycle-invalid-1.svg green-box-ref.svg
+== cycle-invalid-2.svg green-box-ref.svg
+== cycle-invalid-3.svg green-box-ref.svg
+== cycle-invalid-4.svg green-box-ref.svg
+== cycle-change-1.svg green-box-ref.svg
+== cycle-change-2.svg green-box-ref.svg
+== cycle-delete-1.svg green-box-ref.svg
+== cycle-recursion-1.svg green-box-ref.svg
+== cycle-recursion-2.svg green-box-ref.svg
+
+# Animation sandwich priority
+== sandwich-priority-1.svg green-box-ref.svg
+== sandwich-priority-2.svg green-box-ref.svg
+== sandwich-priority-3.svg green-box-ref.svg
+== sandwich-priority-4.svg green-box-ref.svg
+== sandwich-priority-5.svg green-box-ref.svg
+== sandwich-priority-6.svg green-box-ref.svg
+== sandwich-priority-7.svg green-box-ref.svg
+== sandwich-priority-8.svg green-box-ref.svg
+== sandwich-priority-9.svg green-box-ref.svg
+== sandwich-priority-10.svg green-box-ref.svg
+== sandwich-priority-11.svg green-box-ref.svg
+== sandwich-priority-12.svg green-box-ref.svg
+
+# Cross-time container dependencies
+== cross-container-1.xhtml green-box-ref.xhtml
+== cross-container-2.xhtml green-box-ref.xhtml
+== cross-container-3.xhtml green-box-ref.xhtml
+
+# Filtering
+== filtered-interval-1.svg green-box-ref.svg
diff --git a/layout/reftests/svg/smil/syncbase/sandwich-priority-1.svg b/layout/reftests/svg/smil/syncbase/sandwich-priority-1.svg
new file mode 100644
index 0000000000..9d99fa0829
--- /dev/null
+++ b/layout/reftests/svg/smil/syncbase/sandwich-priority-1.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(2, true)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <!--
+ Test of animation sandwich priority based on syncbase dependencies.
+
+ Normally, the second element would win because it appears later in the
+ document, but since the first element is dependent on the second, it should
+ apply on top of the second.
+ -->
+ <rect width="100" height="100" fill="orange">
+ <set attributeName="fill" to="green" begin="a.begin"/>
+ <set attributeName="fill" to="red" begin="0s" id="a"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/syncbase/sandwich-priority-10.svg b/layout/reftests/svg/smil/syncbase/sandwich-priority-10.svg
new file mode 100644
index 0000000000..0732c695f5
--- /dev/null
+++ b/layout/reftests/svg/smil/syncbase/sandwich-priority-10.svg
@@ -0,0 +1,26 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="
+ document.documentElement.pauseAnimations();
+ document.documentElement.setCurrentTime(0);
+ document.getElementById('b').setAttribute('end', 'a.begin');
+ setTimeAndSnapshot(2, false)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <!--
+ Test of animation sandwich priority based on syncbase dependencies.
+
+ Tests a change to an interval end that leaves the time the same but changes
+ the dependency chain.
+
+ At first c is dependent on b only.
+ Then via script we make b dependent on a's begin time so that c's begin time
+ is indirectly dependent on a's begin time and so should have a higher
+ priority.
+ -->
+ <rect width="100" height="100" fill="orange">
+ <set attributeName="fill" to="green" begin="b.end" id="c"/>
+ <set attributeName="fill" to="orange" begin="0s" end="1s" id="b"/>
+ <set attributeName="fill" to="red" begin="1s" id="a"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/syncbase/sandwich-priority-11.svg b/layout/reftests/svg/smil/syncbase/sandwich-priority-11.svg
new file mode 100644
index 0000000000..05407bd6c9
--- /dev/null
+++ b/layout/reftests/svg/smil/syncbase/sandwich-priority-11.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(2, true)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <!--
+ Test of animation sandwich priority based on syncbase dependencies.
+
+ Test in the waiting state, with frozen animation effects from an
+ earlier interval.
+ -->
+ <rect width="100" height="100" fill="orange">
+ <set attributeName="fill" to="green" begin="a.begin" dur="1s"
+ fill="freeze"/>
+ <set attributeName="fill" to="red" begin="0s; 3s" dur="1s" id="a"
+ fill="freeze"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/syncbase/sandwich-priority-12.svg b/layout/reftests/svg/smil/syncbase/sandwich-priority-12.svg
new file mode 100644
index 0000000000..8164e56fa8
--- /dev/null
+++ b/layout/reftests/svg/smil/syncbase/sandwich-priority-12.svg
@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="
+ document.documentElement.pauseAnimations();
+ document.documentElement.setCurrentTime(0);
+ document.getElementById('a').beginElementAt(1);
+ setTimeAndSnapshot(2, false)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <!--
+ Test of animation sandwich priority based on syncbase dependencies.
+
+ This case includes a complex cycle that should nevertheless produce
+ consistent results.
+
+ If this fails, it will fail intermittently. The test is not so much
+ concerned with which colour should win (there are other tests for that) but
+ simply with determinancy.
+ -->
+ <rect width="100" height="100" fill="orange">
+ <set attributeName="fill" id="a" to="green" begin="b.begin; 3s"/>
+ <set attributeName="fill" id="b" to="red" begin="a.begin"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/syncbase/sandwich-priority-2.svg b/layout/reftests/svg/smil/syncbase/sandwich-priority-2.svg
new file mode 100644
index 0000000000..3d6d458f50
--- /dev/null
+++ b/layout/reftests/svg/smil/syncbase/sandwich-priority-2.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(2, true)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <!--
+ Test of animation sandwich priority based on syncbase dependencies.
+
+ A longer chain.
+ -->
+ <rect width="100" height="100" fill="orange">
+ <set attributeName="fill" to="blue" begin="a.begin-0.5s" id="b"/>
+ <set attributeName="fill" to="green" begin="d.begin"/>
+ <set attributeName="fill" to="black" begin="c.begin-0.5s" id="d"/>
+ <set attributeName="x" to="0" begin="b.begin+1s" id="c"/>
+ <set attributeName="fill" to="red" begin="1s" id="a"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/syncbase/sandwich-priority-3.svg b/layout/reftests/svg/smil/syncbase/sandwich-priority-3.svg
new file mode 100644
index 0000000000..f8ba708d75
--- /dev/null
+++ b/layout/reftests/svg/smil/syncbase/sandwich-priority-3.svg
@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(2, true)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <!--
+ Test of animation sandwich priority based on syncbase dependencies.
+
+ This chain goes through end and begin specs but SMIL seems to imply that
+ it's only when one element's begin time is dependent on another's begin time
+ that it affects the chaining because it should act as if the time base begun
+ before the the dependent. So in this case 'c' is (indirectly) dependent on
+ 'a's end time and so shouldn't be given the higher priority.
+ -->
+ <rect width="100" height="100" fill="orange">
+ <set attributeName="fill" to="red" begin="b.begin-1s" id="c"/>
+ <set attributeName="x" to="0" begin="a.end-1s" id="b"/>
+ <set attributeName="fill" to="green" begin="1s" dur="2s" id="a"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/syncbase/sandwich-priority-4.svg b/layout/reftests/svg/smil/syncbase/sandwich-priority-4.svg
new file mode 100644
index 0000000000..7ce158672a
--- /dev/null
+++ b/layout/reftests/svg/smil/syncbase/sandwich-priority-4.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(2, true)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <!--
+ Test of animation sandwich priority based on syncbase dependencies.
+
+ This case includes a cycle.
+ -->
+ <rect width="100" height="100" fill="orange">
+ <set attributeName="fill" id="b" to="green" begin="a.begin"/>
+ <set attributeName="fill" id="a" to="red" begin="0s; b.begin"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/syncbase/sandwich-priority-5.svg b/layout/reftests/svg/smil/syncbase/sandwich-priority-5.svg
new file mode 100644
index 0000000000..05d82ffdf1
--- /dev/null
+++ b/layout/reftests/svg/smil/syncbase/sandwich-priority-5.svg
@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(2, true)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <!--
+ Test of animation sandwich priority based on syncbase dependencies.
+
+ This case includes many cycles.
+
+ c is dependent on a.
+ b is dependent on c.
+ So b is the most dependent and should be on top.
+ -->
+ <rect width="100" height="100" fill="purple">
+ <set attributeName="fill" id="c" to="orange" begin="a.begin; b.begin"/>
+ <set attributeName="fill" id="b" to="green" begin="c.begin; b.begin"/>
+ <set attributeName="fill" id="a" to="red" begin="1s; b.begin; c.begin"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/syncbase/sandwich-priority-6.svg b/layout/reftests/svg/smil/syncbase/sandwich-priority-6.svg
new file mode 100644
index 0000000000..a27b81dfab
--- /dev/null
+++ b/layout/reftests/svg/smil/syncbase/sandwich-priority-6.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(2, true)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <!--
+ Test of animation sandwich priority based on syncbase dependencies.
+
+ Test in the postactive state.
+ -->
+ <rect width="100" height="100" fill="orange">
+ <set attributeName="fill" to="green" begin="a.begin"
+ dur="1s" fill="freeze"/>
+ <set attributeName="fill" to="red" begin="0s" id="a"
+ dur="1s" fill="freeze"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/syncbase/sandwich-priority-7.svg b/layout/reftests/svg/smil/syncbase/sandwich-priority-7.svg
new file mode 100644
index 0000000000..db72072a75
--- /dev/null
+++ b/layout/reftests/svg/smil/syncbase/sandwich-priority-7.svg
@@ -0,0 +1,27 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(2, true)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <!--
+ Test of animation sandwich priority based on syncbase dependencies.
+
+ Test for true dependency checking.
+
+ We construct a tree as follows:
+
+ b-c
+ a<
+ d
+
+ If we're doing naive dependency checking that only considers the depth of
+ a dependency in the tree we'll end up saying that 'c' is dependent on 'd'
+ but it's not.
+ -->
+ <rect width="100" height="100" fill="orange">
+ <set attributeName="fill" to="yellow" begin="1s" dur="2s" id="a"/>
+ <set attributeName="fill" to="purple" begin="a.begin" dur="2s" id="b"/>
+ <set attributeName="fill" to="red" begin="b.begin" dur="2s" id="c"/>
+ <set attributeName="fill" to="green" begin="a.begin" dur="2s" id="d"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/syncbase/sandwich-priority-8.svg b/layout/reftests/svg/smil/syncbase/sandwich-priority-8.svg
new file mode 100644
index 0000000000..7d31b87bff
--- /dev/null
+++ b/layout/reftests/svg/smil/syncbase/sandwich-priority-8.svg
@@ -0,0 +1,25 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="
+ document.documentElement.pauseAnimations();
+ document.documentElement.setCurrentTime(0);
+ document.getElementById('b').setAttribute('begin', 'a.begin');
+ setTimeAndSnapshot(2, false)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <!--
+ Test of animation sandwich priority based on syncbase dependencies.
+
+ Test that we don't filter out a change to the timing model that does not
+ affect the start time of an interval but which DOES affect the dependency
+ chain.
+
+ Given the arrangement below, 'a' will have higher priority, as it is later
+ in the document. However, via script, we make 'b' dependent on 'a' giving
+ it a higher priority whilst preserving the interval times.
+ -->
+ <rect width="100" height="100" fill="orange">
+ <set attributeName="fill" to="green" begin="1s" id="b"/>
+ <set attributeName="fill" to="red" begin="1s" id="a"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/syncbase/sandwich-priority-9.svg b/layout/reftests/svg/smil/syncbase/sandwich-priority-9.svg
new file mode 100644
index 0000000000..d8ec1709cd
--- /dev/null
+++ b/layout/reftests/svg/smil/syncbase/sandwich-priority-9.svg
@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="
+ document.documentElement.pauseAnimations();
+ document.documentElement.setCurrentTime(0);
+ document.getElementById('b').setAttribute('begin', 'a.begin');
+ setTimeAndSnapshot(2, false)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <!--
+ Test of animation sandwich priority based on syncbase dependencies.
+
+ As with test 8 but here we check that such changes are propagated to
+ dependent elements.
+ -->
+ <rect width="100" height="100" fill="orange">
+ <set attributeName="fill" to="yellow" begin="1s" id="b"/>
+ <set attributeName="fill" to="green" begin="b.begin" id="c"/>
+ <set attributeName="fill" to="red" begin="1s" id="a"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/syncbase/trimmed-interval-1.svg b/layout/reftests/svg/smil/syncbase/trimmed-interval-1.svg
new file mode 100644
index 0000000000..c22af2e315
--- /dev/null
+++ b/layout/reftests/svg/smil/syncbase/trimmed-interval-1.svg
@@ -0,0 +1,22 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="
+ document.documentElement.pauseAnimations();
+ document.documentElement.setCurrentTime(1);
+ document.getElementById('a').setAttribute('end', '0s');
+ setTimeAndSnapshot(2, false)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <!--
+ The timebase interval is updated such that it would be deleted but because
+ it is active, it is trimmed instead. Test that the dependent interval is
+ notified accordingly.
+ -->
+ <rect width="100" height="100" fill="red">
+ <animate attributeName="y" attributeType="XML" from="0" to="0" id="a"
+ begin="0.5s" dur="10s"/>
+ <animate attributeName="fill" attributeType="CSS"
+ values="purple; green; orange" keyTimes="0; 0.75; 1"
+ begin="a.end" dur="2s"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/timed/appendChild-1a-ref.svg b/layout/reftests/svg/smil/timed/appendChild-1a-ref.svg
new file mode 100644
index 0000000000..65d4170afa
--- /dev/null
+++ b/layout/reftests/svg/smil/timed/appendChild-1a-ref.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+>
+ <rect id="rect1" y="40" width="10" height="10" fill="blue">
+ </rect>
+ <rect id="rect2" y="80" width="10" height="10" fill="blue">
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/timed/appendChild-1a.svg b/layout/reftests/svg/smil/timed/appendChild-1a.svg
new file mode 100644
index 0000000000..4d740087c1
--- /dev/null
+++ b/layout/reftests/svg/smil/timed/appendChild-1a.svg
@@ -0,0 +1,30 @@
+<!-- This test's animation sets x=100 from 1sec to 1.5sec. We'll
+ remove the animate element at time 1.1sec to capture this, and
+ then wait a little, and make sure the animation is frozen there. -->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait">
+ <script>
+ function go() {
+ var rect1 = document.getElementById("rect1");
+ var rect2 = document.getElementById("rect2");
+ var anim = document.getElementById("anim");
+ rect2.appendChild(anim);
+
+ // Wait >= 1s before taking screenshot, to give animation time to finish
+ setTimeout('document.documentElement.removeAttribute("class")', 1100);
+ }
+ function delay_go() {
+ setTimeout(go, 1100);
+ }
+ document.addEventListener("MozReftestInvalidate", delay_go, false);
+ setTimeout(delay_go, 4000); // fallback for running outside reftest
+ </script>
+ <rect id="rect1" y="40" width="10" height="10" fill="blue">
+ <animate id="anim" attributeName="x"
+ dur="2s" values="0; 50; 100; 150"
+ calcMode="discrete" />
+ </rect>
+ <rect id="rect2" y="80" width="10" height="10" fill="blue">
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/timed/appendChild-1b-ref.svg b/layout/reftests/svg/smil/timed/appendChild-1b-ref.svg
new file mode 100644
index 0000000000..cee137ecc9
--- /dev/null
+++ b/layout/reftests/svg/smil/timed/appendChild-1b-ref.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+>
+ <rect id="rect2" y="80" width="10" height="10" fill="blue">
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/timed/appendChild-1b.svg b/layout/reftests/svg/smil/timed/appendChild-1b.svg
new file mode 100644
index 0000000000..cedf58a8f6
--- /dev/null
+++ b/layout/reftests/svg/smil/timed/appendChild-1b.svg
@@ -0,0 +1,29 @@
+<!-- This test makes the first rect white (invisible), so that we can
+ focus just on the second rect. -->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait">
+ <script>
+ function go() {
+ var rect1 = document.getElementById("rect1");
+ var rect2 = document.getElementById("rect2");
+ var anim = document.getElementById("anim");
+ rect2.appendChild(anim);
+
+ // Wait >= 1s before taking screenshot, to give animation time to finish
+ setTimeout('document.documentElement.removeAttribute("class")', 1100);
+ }
+ function delay_go() {
+ setTimeout(go, 1100);
+ }
+ document.addEventListener("MozReftestInvalidate", delay_go, false);
+ setTimeout(delay_go, 4000); // fallback for running outside reftest
+ </script>
+ <rect id="rect1" y="40" width="10" height="10" fill="white">
+ <animate id="anim" attributeName="x"
+ dur="2s" values="0; 50; 100; 150"
+ calcMode="discrete" />
+ </rect>
+ <rect id="rect2" y="80" width="10" height="10" fill="blue">
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/timed/appendChild-2a-ref.svg b/layout/reftests/svg/smil/timed/appendChild-2a-ref.svg
new file mode 100644
index 0000000000..db44b46a7a
--- /dev/null
+++ b/layout/reftests/svg/smil/timed/appendChild-2a-ref.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+>
+ <rect id="rect1" y="40" width="10" height="10" fill="blue">
+ </rect>
+ <rect id="rect2" x="150" y="80" width="10" height="10" fill="blue">
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/timed/appendChild-2a.svg b/layout/reftests/svg/smil/timed/appendChild-2a.svg
new file mode 100644
index 0000000000..19d7c85b8d
--- /dev/null
+++ b/layout/reftests/svg/smil/timed/appendChild-2a.svg
@@ -0,0 +1,30 @@
+<!-- This test's animation sets x=100 from 1sec to 1.5sec. We'll
+ remove the animate element at time 1.1sec to capture this, and
+ then wait a little, and make sure the animation is frozen there. -->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait">
+ <script>
+ function go() {
+ var rect1 = document.getElementById("rect1");
+ var rect2 = document.getElementById("rect2");
+ var anim = document.getElementById("anim");
+ rect2.appendChild(anim);
+
+ // Wait >= 1s before taking screenshot, to give animation time to finish
+ setTimeout('document.documentElement.removeAttribute("class")', 1100);
+ }
+ function delay_go() {
+ setTimeout(go, 1100);
+ }
+ document.addEventListener("MozReftestInvalidate", delay_go, false);
+ setTimeout(delay_go, 4000); // fallback for running outside reftest
+ </script>
+ <rect id="rect1" y="40" width="10" height="10" fill="blue">
+ <animate id="anim" attributeName="x"
+ dur="2s" values="0; 50; 100; 150"
+ calcMode="discrete" fill="freeze"/>
+ </rect>
+ <rect id="rect2" y="80" width="10" height="10" fill="blue">
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/timed/appendChild-2b-ref.svg b/layout/reftests/svg/smil/timed/appendChild-2b-ref.svg
new file mode 100644
index 0000000000..6bef89aca7
--- /dev/null
+++ b/layout/reftests/svg/smil/timed/appendChild-2b-ref.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+>
+ <rect id="rect2" x="150" y="80" width="10" height="10" fill="blue">
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/timed/appendChild-2b.svg b/layout/reftests/svg/smil/timed/appendChild-2b.svg
new file mode 100644
index 0000000000..f8b772bd56
--- /dev/null
+++ b/layout/reftests/svg/smil/timed/appendChild-2b.svg
@@ -0,0 +1,29 @@
+<!-- This test makes the first rect white (invisible), so that we can
+ focus just on the second rect. -->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait">
+ <script>
+ function go() {
+ var rect1 = document.getElementById("rect1");
+ var rect2 = document.getElementById("rect2");
+ var anim = document.getElementById("anim");
+ rect2.appendChild(anim);
+
+ // Wait >= 1s before taking screenshot, to give animation time to finish
+ setTimeout('document.documentElement.removeAttribute("class")', 1100);
+ }
+ function delay_go() {
+ setTimeout(go, 1100);
+ }
+ document.addEventListener("MozReftestInvalidate", delay_go, false);
+ setTimeout(delay_go, 4000); // fallback for running outside reftest
+ </script>
+ <rect id="rect1" y="40" width="10" height="10" fill="white">
+ <animate id="anim" attributeName="x"
+ dur="2s" values="0; 50; 100; 150"
+ calcMode="discrete" fill="freeze"/>
+ </rect>
+ <rect id="rect2" y="80" width="10" height="10" fill="blue">
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/timed/paced-1-ref.svg b/layout/reftests/svg/smil/timed/paced-1-ref.svg
new file mode 100644
index 0000000000..4a2165f26e
--- /dev/null
+++ b/layout/reftests/svg/smil/timed/paced-1-ref.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+>
+ <rect height="90" width="90" fill="green"></rect>
+</svg>
diff --git a/layout/reftests/svg/smil/timed/paced-1.svg b/layout/reftests/svg/smil/timed/paced-1.svg
new file mode 100644
index 0000000000..0416e0eace
--- /dev/null
+++ b/layout/reftests/svg/smil/timed/paced-1.svg
@@ -0,0 +1,22 @@
+<!-- In paced calcmode, this animation should jump to -990 really fast,
+ despite the many small-jump values before it, leaving the canvas blank. -->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait">
+ <script>
+ function go() {
+ document.documentElement.removeAttribute("class");
+ }
+ function delay_go() {
+ setTimeout(go, 1000);
+ }
+ document.addEventListener("MozReftestInvalidate", delay_go, false);
+ setTimeout(delay_go, 4000); // fallback for running outside reftest
+ </script>
+ <rect height="90" width="90" fill="green"></rect>
+ <rect x="40" y="40" width="10" height="10" fill="red">
+ <animate attributeName="x"
+ dur="5s" values="40; 41; 42; 43; 44; 45; 46; 47; 48; 49; 50; -950"
+ calcMode="paced" fill="freeze"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/timed/pause-1-ref.svg b/layout/reftests/svg/smil/timed/pause-1-ref.svg
new file mode 100644
index 0000000000..ef492d492b
--- /dev/null
+++ b/layout/reftests/svg/smil/timed/pause-1-ref.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+>
+ <rect x="100" y="40" width="10" height="10" fill="blue">
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/timed/pause-1.svg b/layout/reftests/svg/smil/timed/pause-1.svg
new file mode 100644
index 0000000000..36101cadf0
--- /dev/null
+++ b/layout/reftests/svg/smil/timed/pause-1.svg
@@ -0,0 +1,38 @@
+<!-- This test's animation sets x=100 from 1sec to 1.5sec. We'll
+ pause the animation at time 1.1sec to capture this, and then wait
+ a little, and make sure the animation is frozen there. -->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait">
+ <script>
+ function go() {
+ // Use try/catch, so that we make sure to remove the reftest-wait
+ // attribute even on older browser versions that don't support
+ // pauseAnimations.
+ try {
+ document.documentElement.pauseAnimations();
+ } catch (e) {
+ // pauseAnimations not implemented. Change rect to red,
+ // and clear class to fail/end immediately.
+ document.documentElement.removeAttribute("class");
+ var rect = document.getElementById("rect");
+ rect.setAttributeNS(null, "fill", "red");
+ throw e;
+ }
+
+ // Wait > 0.5s before taking screenshot, to give animation time to
+ // jump to next value if the freeze didn't work.
+ setTimeout('document.documentElement.removeAttribute("class")', 600);
+ }
+ function delay_go() {
+ setTimeout(go, 1100);
+ }
+ document.addEventListener("MozReftestInvalidate", delay_go, false);
+ setTimeout(delay_go, 4000); // fallback for running outside reftest
+ </script>
+ <rect y="40" width="10" height="10" fill="blue">
+ <animate id="rect" attributeName="x"
+ dur="3s" values="0; 50; 100; 150; 200; 250"
+ calcMode="discrete" fill="freeze"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/timed/reftest.list b/layout/reftests/svg/smil/timed/reftest.list
new file mode 100644
index 0000000000..600a690d9b
--- /dev/null
+++ b/layout/reftests/svg/smil/timed/reftest.list
@@ -0,0 +1,14 @@
+# Tests related to SVG Animation that use timeouts to interrupt, modify,
+# and examine animations.
+#
+# NOTE: Most of these tests require a few seconds to run.
+# (That's longer than most other reftests)
+
+== paced-1.svg paced-1-ref.svg
+== pause-1.svg pause-1-ref.svg
+fails == removeChild-1.svg removeChild-1-ref.svg # rect needs to reset
+fails == removeChild-2.svg removeChild-2-ref.svg # rect needs to reset
+fails == appendChild-1a.svg appendChild-1a-ref.svg # first rect needs to reset
+== appendChild-1b.svg appendChild-1b-ref.svg
+fails == appendChild-2a.svg appendChild-2a-ref.svg # first rect needs to reset
+== appendChild-2b.svg appendChild-2b-ref.svg
diff --git a/layout/reftests/svg/smil/timed/removeChild-1-ref.svg b/layout/reftests/svg/smil/timed/removeChild-1-ref.svg
new file mode 100644
index 0000000000..a1bbb50933
--- /dev/null
+++ b/layout/reftests/svg/smil/timed/removeChild-1-ref.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+>
+ <rect id="rect1" y="40" width="10" height="10" fill="blue">
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/timed/removeChild-1.svg b/layout/reftests/svg/smil/timed/removeChild-1.svg
new file mode 100644
index 0000000000..905373d710
--- /dev/null
+++ b/layout/reftests/svg/smil/timed/removeChild-1.svg
@@ -0,0 +1,28 @@
+<!-- This test's animation sets x=100 from 1sec to 1.5sec. We'll
+ remove the animate element at time 1.1sec, give it a little more
+ time, and see what happens. -->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait">
+ <script>
+ function go() {
+ var rect1 = document.getElementById("rect1");
+ var anim = document.getElementById("anim");
+ rect1.removeChild(anim);
+
+ // Wait > 0.5s before taking screenshot, to give animation time to
+ // finish, if it's still going
+ setTimeout('document.documentElement.removeAttribute("class")', 700);
+ }
+ function delay_go() {
+ setTimeout(go, 1100);
+ }
+ document.addEventListener("MozReftestInvalidate", delay_go, false);
+ setTimeout(delay_go, 4000); // fallback for running outside reftest
+ </script>
+ <rect id="rect1" y="40" width="10" height="10" fill="blue">
+ <animate id="anim" attributeName="x"
+ dur="2s" values="0; 50; 100; 150"
+ calcMode="discrete" />
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/timed/removeChild-2-ref.svg b/layout/reftests/svg/smil/timed/removeChild-2-ref.svg
new file mode 100644
index 0000000000..a1bbb50933
--- /dev/null
+++ b/layout/reftests/svg/smil/timed/removeChild-2-ref.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+>
+ <rect id="rect1" y="40" width="10" height="10" fill="blue">
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/timed/removeChild-2.svg b/layout/reftests/svg/smil/timed/removeChild-2.svg
new file mode 100644
index 0000000000..ba07abc2af
--- /dev/null
+++ b/layout/reftests/svg/smil/timed/removeChild-2.svg
@@ -0,0 +1,28 @@
+<!-- This test's animation sets x=100 from 1sec to 1.5sec. We'll
+ remove the animate element at time 1.1sec, give it a little more
+ time, and see what happens. -->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait">
+ <script>
+ function go() {
+ var rect1 = document.getElementById("rect1");
+ var anim = document.getElementById("anim");
+ rect1.removeChild(anim);
+
+ // Wait > 0.5s before taking screenshot, to give animation time to
+ // finish, if it's still going
+ setTimeout('document.documentElement.removeAttribute("class")', 700);
+ }
+ function delay_go() {
+ setTimeout(go, 1100);
+ }
+ document.addEventListener("MozReftestInvalidate", delay_go, false);
+ setTimeout(delay_go, 4000); // fallback for running outside reftest
+ </script>
+ <rect id="rect1" y="40" width="10" height="10" fill="blue">
+ <animate id="anim" attributeName="x"
+ dur="2s" values="0; 50; 100; 150"
+ calcMode="discrete" fill="freeze" />
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/smil/transform/additive-1-ref.svg b/layout/reftests/svg/smil/transform/additive-1-ref.svg
new file mode 100644
index 0000000000..1b5f9a5aad
--- /dev/null
+++ b/layout/reftests/svg/smil/transform/additive-1-ref.svg
@@ -0,0 +1,42 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <g transform="translate(50 50)">
+ <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"
+ transform="rotate(90)"/>
+ </g>
+ <g transform="translate(150 50)">
+ <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"
+ transform="rotate(90)"/>
+ </g>
+ <g transform="translate(250 50)">
+ <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"
+ transform="rotate(90)"/>
+ </g>
+ <g transform="translate(50 150)">
+ <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"
+ transform="rotate(90)"/>
+ </g>
+ <g transform="translate(150 150)">
+ <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"
+ transform="rotate(90)"/>
+ </g>
+ <g transform="translate(250 150)">
+ <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"
+ transform="rotate(90)"/>
+ </g>
+ <g transform="translate(50 250)">
+ <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"
+ transform="rotate(90)"/>
+ </g>
+ <g transform="translate(150 250)">
+ <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"
+ transform="rotate(90)"/>
+ </g>
+ <g transform="translate(250 250)">
+ <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"
+ transform="rotate(90)"/>
+ </g>
+ <g transform="translate(50 350)">
+ <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"
+ transform="rotate(90)"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/smil/transform/additive-1.svg b/layout/reftests/svg/smil/transform/additive-1.svg
new file mode 100644
index 0000000000..20f035a3ac
--- /dev/null
+++ b/layout/reftests/svg/smil/transform/additive-1.svg
@@ -0,0 +1,111 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(1.5, true)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <!-- not additive -->
+ <g transform="translate(50 50)">
+ <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"
+ transform="rotate(-90)">
+ <animateTransform attributeName="transform"
+ type="rotate" from="0" to="90" dur="1s" fill="freeze"/>
+ </path>
+ </g>
+ <!-- to-animation: special additive -->
+ <g transform="translate(150 50)">
+ <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"
+ transform="rotate(-90)">
+ <animateTransform attributeName="transform"
+ type="rotate" to="90" dur="1s" fill="freeze"/>
+ </path>
+ </g>
+ <!-- by-animation: special additive -->
+ <g transform="translate(250 50)">
+ <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"
+ transform="rotate(-90)">
+ <animateTransform attributeName="transform"
+ type="rotate" by="180" dur="1s" fill="freeze"/>
+ </path>
+ </g>
+ <!-- normal additive: same type -->
+ <g transform="translate(50 150)">
+ <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"
+ transform="rotate(45)">
+ <animateTransform attributeName="transform"
+ type="rotate" from="0" to="45" dur="1s" fill="freeze"
+ additive="sum"/>
+ </path>
+ </g>
+ <!-- normal additive: different type -->
+ <g transform="translate(100 150)">
+ <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"
+ transform="translate(50)">
+ <animateTransform attributeName="transform"
+ type="rotate" from="0" to="90" dur="1s" fill="freeze"
+ additive="sum"/>
+ </path>
+ </g>
+ <!-- stacked additive: same type -->
+ <g transform="translate(250 150)">
+ <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"
+ transform="rotate(-90)">
+ <animateTransform attributeName="transform"
+ type="rotate" from="0" to="90" dur="1s" fill="freeze"
+ additive="sum"/>
+ <animateTransform attributeName="transform"
+ type="rotate" from="0" to="90" dur="1s" fill="freeze"
+ additive="sum"/>
+ </path>
+ </g>
+ <!-- stacked additive: different types #1 -->
+ <g transform="translate(0 250)">
+ <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"
+ transform="translate(50)">
+ <animateTransform attributeName="transform"
+ type="rotate" from="0" to="45" dur="1s" fill="freeze"
+ additive="sum"/>
+ <animateTransform attributeName="transform"
+ type="rotate" from="0" to="45" dur="1s" fill="freeze"
+ additive="sum"/>
+ </path>
+ </g>
+ <!-- stacked additive: different types #2 -->
+ <g transform="translate(100 250) skewX(-20)">
+ <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"
+ transform="skewX(20) translate(50)">
+ <animateTransform attributeName="transform"
+ type="rotate" from="0" to="45" dur="1s" fill="freeze"
+ additive="sum"/>
+ <animateTransform attributeName="transform"
+ type="rotate" from="0" to="45" dur="1s" fill="freeze"
+ additive="sum"/>
+ </path>
+ </g>
+ <!-- stacked additive: different types #3 -->
+ <g transform="translate(200 250) skewX(-20)">
+ <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"
+ transform="skewX(20) translate(50)">
+ <animateTransform attributeName="transform"
+ type="rotate" from="0" to="45" dur="1s" fill="freeze"
+ additive="sum"/>
+ <animateTransform attributeName="transform"
+ type="translate" from="0" to="30" dur="1s" fill="freeze"
+ additive="sum"/>
+ <animateTransform attributeName="transform"
+ type="translate" from="0" to="-30" dur="1s" fill="freeze"
+ additive="sum"/>
+ <animateTransform attributeName="transform"
+ type="rotate" from="0" to="45" dur="1s" fill="freeze"
+ additive="sum"/>
+ </path>
+ </g>
+ <!-- base value with rotation around a centre -->
+ <g transform="translate(-50 300)">
+ <path d="M48 100h4v -90h4l -6 -10 -6 10h4z" fill="blue"
+ transform="rotate(90 50 50)">
+ <animateTransform attributeName="transform"
+ type="translate" from="0 0" to="0 -50" dur="1s" fill="freeze"
+ additive="sum"/>
+ </path>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/smil/transform/animate-width-1.svg b/layout/reftests/svg/smil/transform/animate-width-1.svg
new file mode 100644
index 0000000000..3f874cdd95
--- /dev/null
+++ b/layout/reftests/svg/smil/transform/animate-width-1.svg
@@ -0,0 +1,22 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait">
+
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function doTest() {
+ setTimeAndSnapshot(101, false);
+ }
+ window.addEventListener("MozReftestInvalidate", doTest, false);
+ </script>
+
+ <rect width="100%" height="100%" fill="lime" />
+
+ <!-- Test 1: We shouldn't animate a width attribute with animateTransform -->
+
+ <rect width="0px" height="50px" fill="red">
+ <animateTransform attributeName="width" begin="100s" dur="1s"
+ from="0" to="100" fill="freeze" />
+ </rect>
+
+</svg>
diff --git a/layout/reftests/svg/smil/transform/lime.svg b/layout/reftests/svg/smil/transform/lime.svg
new file mode 100644
index 0000000000..c09c6601e8
--- /dev/null
+++ b/layout/reftests/svg/smil/transform/lime.svg
@@ -0,0 +1,8 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
+ <title>Testcase reference file for generic pass condition</title>
+ <rect width="100%" height="100%" fill="lime"/>
+</svg>
diff --git a/layout/reftests/svg/smil/transform/paced-1-ref.svg b/layout/reftests/svg/smil/transform/paced-1-ref.svg
new file mode 100644
index 0000000000..ac843a13e4
--- /dev/null
+++ b/layout/reftests/svg/smil/transform/paced-1-ref.svg
@@ -0,0 +1,31 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+ <g id="smiley">
+ <circle fill="yellow" stroke="black" stroke-width="2" cx="0" cy="0"
+ r="40"/>
+ <circle fill="white" stroke="black" stroke-width="1" cx="-14" cy="-14"
+ r="14"/>
+ <circle fill="white" stroke="black" stroke-width="1" cx="14" cy="-14"
+ r="14"/>
+ <circle cx="-10" cy="-14" r="4"/>
+ <circle cx="10" cy="-14" r="4"/>
+ <path d="m-11 14a13,13 0 0,0 22,0" fill="none" stroke="black"/>
+ </g>
+ </defs>
+ <g transform="translate(50 50)">
+ <use xlink:href="#smiley"/>
+ </g>
+ <g transform="translate(150 50)">
+ <use xlink:href="#smiley"/>
+ </g>
+ <g transform="translate(250 50)">
+ <use xlink:href="#smiley"/>
+ </g>
+ <g transform="translate(50 150)">
+ <use xlink:href="#smiley"/>
+ </g>
+ <g transform="translate(150 150)">
+ <use xlink:href="#smiley"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/smil/transform/paced-1.svg b/layout/reftests/svg/smil/transform/paced-1.svg
new file mode 100644
index 0000000000..2e8238b3cb
--- /dev/null
+++ b/layout/reftests/svg/smil/transform/paced-1.svg
@@ -0,0 +1,64 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(101, true)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <defs>
+ <g id="smiley">
+ <circle fill="yellow" stroke="black" stroke-width="2" cx="0" cy="0"
+ r="40"/>
+ <circle fill="white" stroke="black" stroke-width="1" cx="-14" cy="-14"
+ r="14"/>
+ <circle fill="white" stroke="black" stroke-width="1" cx="14" cy="-14"
+ r="14"/>
+ <circle cx="-10" cy="-14" r="4"/>
+ <circle cx="10" cy="-14" r="4"/>
+ <path d="m-11 14a13,13 0 0,0 22,0" fill="none" stroke="black"/>
+ </g>
+ </defs>
+ <!-- translation -->
+ <g transform="translate(0 50)">
+ <use xlink:href="#smiley">
+ <animateTransform attributeName="transform" attributeType="XML"
+ type="translate" fill="freeze" begin="100s" dur="2s" calcMode="paced"
+ values="-5 -10; 35 20; 95 -60"/>
+ </use>
+ </g>
+ <!-- rotation -->
+ <g transform="translate(150 50) rotate(-90)">
+ <use xlink:href="#smiley">
+ <animateTransform attributeName="transform" attributeType="XML"
+ type="rotate" fill="freeze" begin="100s" dur="2s" calcMode="paced"
+ values="20 10 10; 40 -15 25; 160 21 -35"/>
+ </use>
+ </g>
+ <!-- skewY -->
+ <g transform="translate(250 50) skewY(-30)">
+ <use xlink:href="#smiley">
+ <animateTransform attributeName="transform" attributeType="XML"
+ type="skewY" fill="freeze" begin="100s" dur="2s" calcMode="paced"
+ values="10; 40; 50"/>
+ </use>
+ </g>
+ <!-- scale -->
+ <g transform="translate(50 150) scale(0.5)">
+ <use xlink:href="#smiley">
+ <animateTransform attributeName="transform" attributeType="XML"
+ type="scale" fill="freeze" begin="100s" dur="2s" calcMode="paced"
+ values="-4 -2.5; 4 3.5; 8 0.5"/>
+ </use>
+ </g>
+ <!-- to-animation
+
+ You can't have to-animation with a paced calcMode. This test should just
+ produce regular to-animation without any assertions. This is a white-box
+ test.
+ -->
+ <g transform="translate(100 150)">
+ <use xlink:href="#smiley">
+ <animateTransform attributeName="transform" attributeType="XML"
+ type="translate" fill="freeze" begin="100s" dur="2s" calcMode="paced"
+ to="100"/>
+ </use>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/smil/transform/reftest.list b/layout/reftests/svg/smil/transform/reftest.list
new file mode 100644
index 0000000000..ef97515317
--- /dev/null
+++ b/layout/reftests/svg/smil/transform/reftest.list
@@ -0,0 +1,18 @@
+# Tests related to SVG Animation (using SMIL), focusing on the animateTransform
+# element.
+
+fuzzy(0-130,0-1000) == additive-1.svg additive-1-ref.svg # bug 981344, bug 1239766
+== animate-width-1.svg lime.svg
+fuzzy-if(cocoaWidget,0-5,0-101) fuzzy-if(winWidget,0-15,0-101) fuzzy-if(gtkWidget,0-5,0-101) fuzzy-if(Android,0-16,0-1) == paced-1.svg paced-1-ref.svg # bug 981640, Bug 1293550, Bug 1592998
+fuzzy(0-7,0-90) == rotate-angle-1.svg rotate-angle-ref.svg
+fuzzy(0-7,0-90) == rotate-angle-2.svg rotate-angle-ref.svg
+fuzzy(0-7,0-130) == rotate-angle-3.svg rotate-angle-ref.svg
+fuzzy(0-7,0-90) == rotate-angle-4.svg rotate-angle-ref.svg
+fuzzy(0-7,0-60) == rotate-angle-5.svg rotate-angle-ref.svg
+fuzzy(0-7,0-306) fuzzy-if(Android,0-16,0-3) == scale-1.svg scale-1-ref.svg # bug 981004, AA difference
+== set-transform-1.svg lime.svg
+fuzzy(0-7,0-1548) == skew-1.svg skew-1-ref.svg # bug 983671, Bug 1260629
+== translate-clipPath-1.svg lime.svg
+== translate-gradient-1.svg lime.svg
+== translate-pattern-1.svg lime.svg
+== use-1.svg lime.svg
diff --git a/layout/reftests/svg/smil/transform/rotate-angle-1.svg b/layout/reftests/svg/smil/transform/rotate-angle-1.svg
new file mode 100644
index 0000000000..75ace79c2d
--- /dev/null
+++ b/layout/reftests/svg/smil/transform/rotate-angle-1.svg
@@ -0,0 +1,60 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(101, true)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <g transform="translate(50 50) rotate(90)">
+ <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue">
+ <animateTransform attributeName="transform"
+ type="rotate" from="0" to="0" begin="100s" dur="4s" fill="freeze"/>
+ </path>
+ </g>
+ <g transform="translate(150 50)">
+ <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue">
+ <animateTransform attributeName="transform"
+ type="rotate" from="0" to="90" begin="100s" dur="1s" fill="freeze"/>
+ </path>
+ </g>
+ <g transform="translate(250 50)">
+ <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue">
+ <animateTransform attributeName="transform"
+ type="rotate" from="0" to="180" begin="100s" dur="2s" fill="freeze"/>
+ </path>
+ </g>
+ <g transform="translate(50 150)">
+ <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue">
+ <animateTransform attributeName="transform"
+ type="rotate" from="0" to="270" begin="100s" dur="3s" fill="freeze"/>
+ </path>
+ </g>
+ <g transform="translate(150 150)">
+ <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue">
+ <animateTransform attributeName="transform"
+ type="rotate" from="0" to="360" begin="100s" dur="4s" fill="freeze"/>
+ </path>
+ </g>
+ <g transform="translate(250 150)">
+ <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue">
+ <animateTransform attributeName="transform"
+ type="rotate" from="0" to="540" begin="100s" dur="6s" fill="freeze"/>
+ </path>
+ </g>
+ <g transform="translate(50 250)">
+ <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue">
+ <animateTransform attributeName="transform"
+ type="rotate" from="0" to="3600" begin="100s" dur="40s" fill="freeze"/>
+ </path>
+ </g>
+ <g transform="translate(150 250)">
+ <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue">
+ <animateTransform attributeName="transform"
+ type="rotate" from="0" to="-270" begin="100s" dur="1s" fill="freeze"/>
+ </path>
+ </g>
+ <g transform="translate(250 250)">
+ <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue">
+ <animateTransform attributeName="transform"
+ type="rotate" from="0" to="-540" begin="100s" dur="2s" fill="freeze"/>
+ </path>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/smil/transform/rotate-angle-2.svg b/layout/reftests/svg/smil/transform/rotate-angle-2.svg
new file mode 100644
index 0000000000..8d75991aa0
--- /dev/null
+++ b/layout/reftests/svg/smil/transform/rotate-angle-2.svg
@@ -0,0 +1,60 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(101, true)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <g transform="translate(44 0) rotate(90 6 50)">
+ <path d="M4 100h4v -90h4l -6 -10 -6 10h4z" fill="blue">
+ <animateTransform attributeName="transform"
+ type="rotate" from="0 6 50" to="0 6 50" begin="100s" dur="4s" fill="freeze"/>
+ </path>
+ </g>
+ <g transform="translate(144 0)">
+ <path d="M4 100h4v -90h4l -6 -10 -6 10h4z" fill="blue">
+ <animateTransform attributeName="transform"
+ type="rotate" from="0,6,50" to="90 6 50" begin="100s" dur="1s" fill="freeze"/>
+ </path>
+ </g>
+ <g transform="translate(244,0)">
+ <path d="M4 100h4v -90h4l -6 -10 -6 10h4z" fill="blue">
+ <animateTransform attributeName="transform"
+ type="rotate" from="0 6 50" to="180,6,50" begin="100s" dur="2s" fill="freeze"/>
+ </path>
+ </g>
+ <g transform="translate(44,100)">
+ <path d="M4 100h4v -90h4l -6 -10 -6 10h4z" fill="blue">
+ <animateTransform attributeName="transform"
+ type="rotate" from="0,6,50" to="270,6,50" begin="100s" dur="3s" fill="freeze"/>
+ </path>
+ </g>
+ <g transform="translate(144,100)">
+ <path d="M4 100h4v -90h4l -6 -10 -6 10h4z" fill="blue">
+ <animateTransform attributeName="transform"
+ type="rotate" from="0 6 50" to="360 6 50" begin="100s" dur="4s" fill="freeze"/>
+ </path>
+ </g>
+ <g transform="translate(244,100)">
+ <path d="M4 100h4v -90h4l -6 -10 -6 10h4z" fill="blue">
+ <animateTransform attributeName="transform"
+ type="rotate" from="0 6 50" to="540 6 50" begin="100s" dur="6s" fill="freeze"/>
+ </path>
+ </g>
+ <g transform="translate(44,200)">
+ <path d="M4 100h4v -90h4l -6 -10 -6 10h4z" fill="blue">
+ <animateTransform attributeName="transform"
+ type="rotate" from="0 6 50" to="3600 6 50" begin="100s" dur="40s" fill="freeze"/>
+ </path>
+ </g>
+ <g transform="translate(144,200)">
+ <path d="M4 100h4v -90h4l -6 -10 -6 10h4z" fill="blue">
+ <animateTransform attributeName="transform"
+ type="rotate" from="0 6 50" to="-270 6 50" begin="100s" dur="1s" fill="freeze"/>
+ </path>
+ </g>
+ <g transform="translate(244,200)">
+ <path d="M4 100h4v -90h4l -6 -10 -6 10h4z" fill="blue">
+ <animateTransform attributeName="transform"
+ type="rotate" from="0 6 50" to="-540 6 50" begin="100s" dur="2s" fill="freeze"/>
+ </path>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/smil/transform/rotate-angle-3.svg b/layout/reftests/svg/smil/transform/rotate-angle-3.svg
new file mode 100644
index 0000000000..c24a2a5b54
--- /dev/null
+++ b/layout/reftests/svg/smil/transform/rotate-angle-3.svg
@@ -0,0 +1,60 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(101, true)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <g transform="translate(0 0) rotate(90 50 50)">
+ <path d="M48 100h4v -90h4l -6 -10 -6 10h4z" fill="blue">
+ <animateTransform attributeName="transform"
+ type="rotate" from="0 0 50" to="0 200 50" begin="100s" dur="4s" fill="freeze"/>
+ </path>
+ </g>
+ <g transform="translate(100 0)">
+ <path d="M48 100h4v -90h4l -6 -10 -6 10h4z" fill="blue">
+ <animateTransform attributeName="transform"
+ type="rotate" from="0 0 50" to="90 50 50" begin="100s" dur="1s" fill="freeze"/>
+ </path>
+ </g>
+ <g transform="translate(200 0)">
+ <path d="M48 100h4v -90h4l -6 -10 -6 10h4z" fill="blue">
+ <animateTransform attributeName="transform"
+ type="rotate" from="0 0 50" to="180 100 50" begin="100s" dur="2s" fill="freeze"/>
+ </path>
+ </g>
+ <g transform="translate(0 100)">
+ <path d="M48 100h4v -90h4l -6 -10 -6 10h4z" fill="blue">
+ <animateTransform attributeName="transform"
+ type="rotate" from="0 0 50" to="270 150 50" begin="100s" dur="3s" fill="freeze"/>
+ </path>
+ </g>
+ <g transform="translate(100 100)">
+ <path d="M48 100h4v -90h4l -6 -10 -6 10h4z" fill="blue">
+ <animateTransform attributeName="transform"
+ type="rotate" from="0 0 50" to="360 200 50" begin="100s" dur="4s" fill="freeze"/>
+ </path>
+ </g>
+ <g transform="translate(200 100)">
+ <path d="M48 100h4v -90h4l -6 -10 -6 10h4z" fill="blue">
+ <animateTransform attributeName="transform"
+ type="rotate" from="0 0 50" to="540 300 50" begin="100s" dur="6s" fill="freeze"/>
+ </path>
+ </g>
+ <g transform="translate(0 200)">
+ <path d="M48 100h4v -90h4l -6 -10 -6 10h4z" fill="blue">
+ <animateTransform attributeName="transform"
+ type="rotate" from="0 0 50" to="3600 2000 50" begin="100s" dur="40s" fill="freeze"/>
+ </path>
+ </g>
+ <g transform="translate(100 200)">
+ <path d="M48 100h4v -90h4l -6 -10 -6 10h4z" fill="blue">
+ <animateTransform attributeName="transform"
+ type="rotate" from="0 0 50" to="-270 50 50" begin="100s" dur="1s" fill="freeze"/>
+ </path>
+ </g>
+ <g transform="translate(200 200)">
+ <path d="M48 100h4v -90h4l -6 -10 -6 10h4z" fill="blue">
+ <animateTransform attributeName="transform"
+ type="rotate" from="0 0 50" to="-540 100 50" begin="100s" dur="2s" fill="freeze"/>
+ </path>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/smil/transform/rotate-angle-4.svg b/layout/reftests/svg/smil/transform/rotate-angle-4.svg
new file mode 100644
index 0000000000..48a9e8b92f
--- /dev/null
+++ b/layout/reftests/svg/smil/transform/rotate-angle-4.svg
@@ -0,0 +1,79 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(101, true)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <!-- no animation -->
+ <g transform="translate(50 50) rotate(90)">
+ <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"/>
+ </g>
+ <!-- accumulate: sum -->
+ <g transform="translate(150 50)">
+ <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue">
+ <animateTransform attributeName="transform"
+ type="rotate" from="0" to="45" begin="100s" dur="0.5s" fill="freeze"
+ repeatCount="4" accumulate="sum"/>
+ </path>
+ </g>
+ <!-- accumulate: none -->
+ <g transform="translate(250 50)">
+ <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue">
+ <animateTransform attributeName="transform"
+ type="rotate" from="0" to="270" begin="100s" dur="0.75s" fill="freeze"
+ repeatCount="2"/>
+ </path>
+ </g>
+ <!-- additive: replace -->
+ <g transform="translate(50 150)">
+ <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"
+ transform="rotate(-90)">
+ <animateTransform attributeName="transform"
+ type="rotate" from="0" to="180" begin="100s" dur="2s" fill="freeze"/>
+ </path>
+ </g>
+ <!-- additive: sum (adding to base value) -->
+ <g transform="translate(150 150)">
+ <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"
+ transform="rotate(-90)">
+ <animateTransform attributeName="transform"
+ type="rotate" from="0" to="270" begin="100s" dur="1.5s" fill="freeze"
+ additive="sum"/>
+ </path>
+ </g>
+ <!-- additive: sum (adding to other animations) -->
+ <g transform="translate(250 150)">
+ <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue">
+ <animateTransform attributeName="transform"
+ type="rotate" from="0" to="60" begin="100s" dur="2s" fill="freeze"/>
+ <animateTransform attributeName="transform"
+ type="rotate" from="0" to="60" begin="100s" dur="2s" fill="freeze"
+ additive="sum"/>
+ <animateTransform attributeName="transform"
+ type="rotate" from="0" to="60" begin="100s" dur="2s" fill="freeze"
+ additive="sum"/>
+ </path>
+ </g>
+ <!-- to animation -->
+ <g transform="translate(50 250)">
+ <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"
+ transform="rotate(45)">
+ <animateTransform attributeName="transform"
+ type="rotate" to="135" begin="100s" dur="2s" fill="freeze"/>
+ </path>
+ </g>
+ <!-- by animation -->
+ <g transform="translate(150 250)">
+ <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"
+ transform="rotate(45)">
+ <animateTransform attributeName="transform"
+ type="rotate" by="90" begin="100s" dur="2s" fill="freeze"/>
+ </path>
+ </g>
+ <!-- values animation -->
+ <g transform="translate(250 250)">
+ <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue">
+ <animateTransform attributeName="transform"
+ type="rotate" values="0; 135; 0" begin="100s" dur="1.5s" fill="freeze"/>
+ </path>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/smil/transform/rotate-angle-5.svg b/layout/reftests/svg/smil/transform/rotate-angle-5.svg
new file mode 100644
index 0000000000..354b0f7e0b
--- /dev/null
+++ b/layout/reftests/svg/smil/transform/rotate-angle-5.svg
@@ -0,0 +1,86 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(101, true)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <!-- Tests to-animation behaviour for a lot of undefined situations.
+ SVG 1.1 doesn't define what should happen here but the behaviour we
+ expect is based on other browsers. -->
+ <!-- to animation: rotation from base value -90 to final value 180 -->
+ <g transform="translate(50 50)">
+ <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"
+ transform="rotate(-90)">
+ <animateTransform attributeName="transform"
+ type="rotate" to="180" begin="100s" dur="1.5s" fill="freeze"/>
+ </path>
+ </g>
+ <!-- to animation: rotation from base value -810 to final value 990 -->
+ <g transform="translate(150 50)">
+ <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"
+ transform="rotate(-810)">
+ <animateTransform attributeName="transform"
+ type="rotate" to="990" begin="100s" dur="2s" fill="freeze"/>
+ </path>
+ </g>
+ <!-- to animation: rotation from base value -180 to final value 90 but with
+ other animations combined.
+
+ What happens here is that the rotation animation can't interpolate from
+ the base value as it's not a rotation transformation, so instead it
+ assumes an underlying zero matrix as the base value. (see next comment)
+ -->
+ <g transform="translate(250 50)">
+ <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"
+ transform="rotate(-90) translate(0 50) scale(2)">
+ <animateTransform attributeName="transform"
+ type="rotate" to="180" begin="100s" dur="2s" fill="freeze" additive="sum"/>
+ </path>
+ </g>
+ <!-- to animation: rotate and scale
+
+ Here again the scale animation can't interpolate from its base value
+ which is of a different type so it assumes a zero matrix NOT an identity
+ matrix (this is what the SVG WG have decided in the SVGT1.2 Tiny test
+ suite).
+ -->
+ <g transform="translate(50 150) rotate(90)">
+ <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"
+ transform="scale(2)">
+ <animateTransform attributeName="transform"
+ type="rotate" to="180" begin="100s" dur="1s" fill="freeze" additive="sum"/>
+ <animateTransform attributeName="transform"
+ type="scale" to="2" begin="100s" dur="2s" fill="freeze" additive="sum"/>
+ </path>
+ </g>
+ <!-- to animation: translate and rotate
+
+ Likewise here we end up rotating from 0 to 180 because we can't
+ interpolate from the underlying translation transformation.
+ -->
+ <g transform="translate(150 150)">
+ <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"
+ transform="rotate(-90) translate(0 50) scale(2)">
+ <animateTransform attributeName="transform"
+ type="translate" to="0" begin="100s" dur="1s" fill="freeze" additive="sum"/>
+ <animateTransform attributeName="transform"
+ type="rotate" to="180" begin="100s" dur="2s" fill="freeze" additive="sum"/>
+ </path>
+ </g>
+ <!-- The following are from the reference image -->
+ <g transform="translate(250 150)">
+ <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"
+ transform="rotate(90)"/>
+ </g>
+ <g transform="translate(50 250)">
+ <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"
+ transform="rotate(90)"/>
+ </g>
+ <g transform="translate(150 250)">
+ <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"
+ transform="rotate(90)"/>
+ </g>
+ <g transform="translate(250 250)">
+ <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"
+ transform="rotate(90)"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/smil/transform/rotate-angle-ref.svg b/layout/reftests/svg/smil/transform/rotate-angle-ref.svg
new file mode 100644
index 0000000000..e69ce351ef
--- /dev/null
+++ b/layout/reftests/svg/smil/transform/rotate-angle-ref.svg
@@ -0,0 +1,38 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <g transform="translate(50 50)">
+ <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"
+ transform="rotate(90)"/>
+ </g>
+ <g transform="translate(150 50)">
+ <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"
+ transform="rotate(90)"/>
+ </g>
+ <g transform="translate(250 50)">
+ <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"
+ transform="rotate(90)"/>
+ </g>
+ <g transform="translate(50 150)">
+ <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"
+ transform="rotate(90)"/>
+ </g>
+ <g transform="translate(150 150)">
+ <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"
+ transform="rotate(90)"/>
+ </g>
+ <g transform="translate(250 150)">
+ <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"
+ transform="rotate(90)"/>
+ </g>
+ <g transform="translate(50 250)">
+ <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"
+ transform="rotate(90)"/>
+ </g>
+ <g transform="translate(150 250)">
+ <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"
+ transform="rotate(90)"/>
+ </g>
+ <g transform="translate(250 250)">
+ <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"
+ transform="rotate(90)"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/smil/transform/scale-1-ref.svg b/layout/reftests/svg/smil/transform/scale-1-ref.svg
new file mode 100644
index 0000000000..58a3c117f9
--- /dev/null
+++ b/layout/reftests/svg/smil/transform/scale-1-ref.svg
@@ -0,0 +1,43 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+ <g id="smiley">
+ <circle fill="yellow" stroke="black" stroke-width="1" cx="0" cy="0"
+ r="20"/>
+ <circle fill="white" stroke="black" stroke-width="1" cx="-7" cy="-7"
+ r="7"/>
+ <circle fill="white" stroke="black" stroke-width="1" cx="7" cy="-7"
+ r="7"/>
+ <circle cx="-5" cy="-7" r="2"/>
+ <circle cx="5" cy="-7" r="2"/>
+ <path d="m-11 7a13,13 0 0,0 22,0" fill="none" stroke="black"/>
+ </g>
+ </defs>
+ <g transform="translate(50 50)">
+ <use xlink:href="#smiley" transform="scale(2)"/>
+ </g>
+ <g transform="translate(150 50)">
+ <use xlink:href="#smiley" transform="scale(2)"/>
+ </g>
+ <g transform="translate(250 50)">
+ <use xlink:href="#smiley" transform="scale(2)"/>
+ </g>
+ <g transform="translate(50 150)">
+ <use xlink:href="#smiley" transform="scale(2)"/>
+ </g>
+ <g transform="translate(150 150)">
+ <use xlink:href="#smiley" transform="scale(2)"/>
+ </g>
+ <g transform="translate(250 150)">
+ <use xlink:href="#smiley" transform="scale(2)"/>
+ </g>
+ <g transform="translate(50 250)">
+ <use xlink:href="#smiley" transform="scale(2)"/>
+ </g>
+ <g transform="translate(150 250)">
+ <use xlink:href="#smiley" transform="scale(2)"/>
+ </g>
+ <g transform="translate(250 250)">
+ <use xlink:href="#smiley" transform="scale(2)"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/smil/transform/scale-1.svg b/layout/reftests/svg/smil/transform/scale-1.svg
new file mode 100644
index 0000000000..7393c35e11
--- /dev/null
+++ b/layout/reftests/svg/smil/transform/scale-1.svg
@@ -0,0 +1,119 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ window.addEventListener("MozReftestInvalidate", run, false);
+
+ function run() {
+ setTimeAndSnapshot(101, true);
+ }
+ </script>
+ <defs>
+ <g id="smiley">
+ <circle fill="yellow" stroke="black" stroke-width="1" cx="0" cy="0"
+ r="20"/>
+ <circle fill="white" stroke="black" stroke-width="1" cx="-7" cy="-7"
+ r="7"/>
+ <circle fill="white" stroke="black" stroke-width="1" cx="7" cy="-7"
+ r="7"/>
+ <circle cx="-5" cy="-7" r="2"/>
+ <circle cx="5" cy="-7" r="2"/>
+ <path d="m-11 7a13,13 0 0,0 22,0" fill="none" stroke="black"/>
+ </g>
+ </defs>
+ <!-- to animation
+
+ This should interpolate from 0 (not 1) to 4 to match the behaviour
+ required by the SVGT1.2 test suite and Opera's behaviour.
+ -->
+ <g transform="translate(50 50)">
+ <use xlink:href="#smiley">
+ <animateTransform attributeName="transform"
+ type="scale" to="4" begin="100s" dur="2s" fill="freeze"/>
+ </use>
+ </g>
+ <!-- from-to animation -->
+ <g transform="translate(150 50)">
+ <use xlink:href="#smiley">
+ <animateTransform attributeName="transform"
+ type="scale" from="-5" to="9" begin="100s" dur="2s" fill="freeze"/>
+ </use>
+ </g>
+ <!-- negative to-animation
+
+ Should go from 0 to -4 over 2s, therefore at t=1s, the scale factor
+ should be -2, so we add a rotation animation to correct the gradient
+ -->
+ <g transform="translate(250 50)">
+ <use xlink:href="#smiley">
+ <animateTransform attributeName="transform"
+ type="scale" to="-4" begin="100s" dur="2s" fill="freeze"/>
+ <animateTransform attributeName="transform"
+ type="rotate" from="0" to="360" begin="100s" dur="2s" fill="freeze" additive="sum"/>
+ </use>
+ </g>
+ <!-- by animation
+
+ The behaviour at this point is not clear. The definition of by-animation
+ is:
+
+ "simple animation in which the animation function is defined to offset
+ the underlying value for the attribute, using a delta that varies over
+ the course of the simple duration, starting from a delta of 0 and ending
+ with the delta specified with the by attribute." (SMILANIM 3.2.2)
+
+ Therefore it might seem like by-animation of by="1" means to ADD to the
+ underlying scale factor. Furthermore, the underlying scale factor when
+ not otherwise specified might seemt to be 1, but the SVG WG have decided
+ it's 0. This is inconsistent with the definition of addition for
+ animateTransform (post-multiplication of matrices) but it is the
+ behaviour required by SVGT1.2 test suite and used by Opera.
+
+ The following animation should go from 0 to 4, over 2s so at t=1s, the
+ scale factor should be 2.
+ -->
+ <g transform="translate(50 150)">
+ <use xlink:href="#smiley">
+ <animateTransform attributeName="transform"
+ type="scale" by="4" begin="100s" dur="2s" fill="freeze"/>
+ </use>
+ </g>
+ <!-- by animation #2 -->
+ <g transform="translate(150 150)">
+ <use xlink:href="#smiley" transform="scale(4)">
+ <animateTransform attributeName="transform"
+ type="scale" by="1" begin="100s" dur="2s" fill="freeze" additive="sum"/>
+ </use>
+ </g>
+ <!-- from-by animation -->
+ <g transform="translate(250 150)">
+ <use xlink:href="#smiley">
+ <animateTransform attributeName="transform"
+ type="scale" from="2" by="0" begin="100s" dur="2s" fill="freeze"/>
+ </use>
+ </g>
+ <!-- values animation -->
+ <g transform="translate(50 250)">
+ <use xlink:href="#smiley">
+ <animateTransform attributeName="transform"
+ type="scale" values="0; 10; 2; 5; -1" begin="100s" dur="2s" fill="freeze"/>
+ </use>
+ </g>
+ <!-- repetition -->
+ <g transform="translate(150 250)">
+ <use xlink:href="#smiley">
+ <animateTransform attributeName="transform" type="scale" from="0"
+ to="0.6" begin="100s" dur="0.3s" repeatCount="4" accumulate="sum"
+ fill="freeze"/>
+ </use>
+ </g>
+ <!-- repeated to-animation (should NOT accumulate) -->
+ <g transform="translate(250 250)">
+ <use xlink:href="#smiley">
+ <animateTransform attributeName="transform" type="scale"
+ to="6" begin="100s" dur="0.75" repeatCount="2" accumulate="sum"
+ fill="freeze"/>
+ </use>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/smil/transform/set-transform-1.svg b/layout/reftests/svg/smil/transform/set-transform-1.svg
new file mode 100644
index 0000000000..f698cbaa82
--- /dev/null
+++ b/layout/reftests/svg/smil/transform/set-transform-1.svg
@@ -0,0 +1,27 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait">
+
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function doTest() {
+ setTimeAndSnapshot(101, false);
+ }
+ window.addEventListener("MozReftestInvalidate", doTest, false);
+ </script>
+
+ <rect width="100%" height="100%" fill="lime" />
+
+ <!-- Test 1: We shouldn't animate a transform attribute with set -->
+
+ <rect x="50" y="50" width="100" height="100" fill="red">
+ <set attributeName="transform" to="75,75" begin="100s"/>
+ </rect>
+
+ <rect x="50" y="50" width="100" height="100" fill="lime"/>
+
+</svg>
diff --git a/layout/reftests/svg/smil/transform/skew-1-ref.svg b/layout/reftests/svg/smil/transform/skew-1-ref.svg
new file mode 100644
index 0000000000..10c7ca8a38
--- /dev/null
+++ b/layout/reftests/svg/smil/transform/skew-1-ref.svg
@@ -0,0 +1,43 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+ <g id="smiley">
+ <circle fill="yellow" stroke="black" stroke-width="2" cx="0" cy="0"
+ r="40"/>
+ <circle fill="white" stroke="black" stroke-width="1" cx="-14" cy="-14"
+ r="14"/>
+ <circle fill="white" stroke="black" stroke-width="1" cx="14" cy="-14"
+ r="14"/>
+ <circle cx="-10" cy="-14" r="4"/>
+ <circle cx="10" cy="-14" r="4"/>
+ <path d="m-11 14a13,13 0 0,0 22,0" fill="none" stroke="black"/>
+ </g>
+ </defs>
+ <g transform="translate(50 50)">
+ <use xlink:href="#smiley" transform="skewX(30)"/>
+ </g>
+ <g transform="translate(150 50)">
+ <use xlink:href="#smiley" transform="skewX(30)"/>
+ </g>
+ <g transform="translate(250 50)">
+ <use xlink:href="#smiley" transform="skewX(30)"/>
+ </g>
+ <g transform="translate(50 150)">
+ <use xlink:href="#smiley" transform="skewX(30)"/>
+ </g>
+ <g transform="translate(150 150)">
+ <use xlink:href="#smiley" transform="skewX(30)"/>
+ </g>
+ <g transform="translate(250 150)">
+ <use xlink:href="#smiley" transform="skewX(30)"/>
+ </g>
+ <g transform="translate(50 250)">
+ <use xlink:href="#smiley" transform="skewX(30)"/>
+ </g>
+ <g transform="translate(150 250)">
+ <use xlink:href="#smiley" transform="skewX(30)"/>
+ </g>
+ <g transform="translate(250 250)">
+ <use xlink:href="#smiley" transform="skewX(30)"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/smil/transform/skew-1.svg b/layout/reftests/svg/smil/transform/skew-1.svg
new file mode 100644
index 0000000000..603c7f4025
--- /dev/null
+++ b/layout/reftests/svg/smil/transform/skew-1.svg
@@ -0,0 +1,86 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(101, true)">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <defs>
+ <g id="smiley">
+ <circle fill="yellow" stroke="black" stroke-width="2" cx="0" cy="0"
+ r="40"/>
+ <circle fill="white" stroke="black" stroke-width="1" cx="-14" cy="-14"
+ r="14"/>
+ <circle fill="white" stroke="black" stroke-width="1" cx="14" cy="-14"
+ r="14"/>
+ <circle cx="-10" cy="-14" r="4"/>
+ <circle cx="10" cy="-14" r="4"/>
+ <path d="m-11 14a13,13 0 0,0 22,0" fill="none" stroke="black"/>
+ </g>
+ </defs>
+ <!-- from-to animation -->
+ <g transform="translate(50 50)">
+ <use xlink:href="#smiley">
+ <animateTransform attributeName="transform" attributeType="XML"
+ type="skewX" fill="freeze" from="-30" to="90" begin="100s" dur="2s"/>
+ </use>
+ </g>
+ <!-- from-by animation -->
+ <g transform="translate(150 50)">
+ <use xlink:href="#smiley">
+ <animateTransform attributeName="transform" attributeType="XML"
+ type="skewX" fill="freeze" from="60" by="-60" begin="100s" dur="2s"/>
+ </use>
+ </g>
+ <!-- by animation -->
+ <g transform="translate(250 50) skewX(-15)">
+ <use xlink:href="#smiley" transform="skewX(15)">
+ <animateTransform attributeName="transform" attributeType="XML"
+ type="skewX" fill="freeze" by="60" begin="100s" dur="2s"/>
+ </use>
+ </g>
+ <!-- to animation -->
+ <g transform="translate(50 150)">
+ <use xlink:href="#smiley" transform="skewX(15)">
+ <animateTransform attributeName="transform" attributeType="XML"
+ type="skewX" fill="freeze" to="45" begin="100s" dur="2s"/>
+ </use>
+ </g>
+ <!-- values animation -->
+ <g transform="translate(150 150)">
+ <use xlink:href="#smiley">
+ <animateTransform attributeName="transform" attributeType="XML"
+ type="skewX" fill="freeze" values="10; 40; 20; 60" begin="100s" dur="2s"/>
+ </use>
+ </g>
+ <!-- additive -->
+ <g transform="translate(250 150)">
+ <use xlink:href="#smiley" transform="skewY(-30)">
+ <animateTransform attributeName="transform" attributeType="XML"
+ type="skewY" fill="freeze" to="30" begin="100s" dur="2s"/>
+ <animateTransform attributeName="transform" attributeType="XML"
+ type="skewX" fill="freeze" from="-30" to="90" begin="100s" dur="2s" additive="sum"/>
+ </use>
+ </g>
+ <!-- accumulate: none -->
+ <g transform="translate(50 250)">
+ <use xlink:href="#smiley">
+ <animateTransform attributeName="transform" attributeType="XML"
+ type="skewX" fill="freeze" from="20" to="50" begin="100s" dur="0.75s"
+ repeatCount="3"/>
+ </use>
+ </g>
+ <!-- accumulate: sum -->
+ <g transform="translate(150 250)">
+ <use xlink:href="#smiley">
+ <animateTransform attributeName="transform" attributeType="XML"
+ type="skewX" fill="freeze" from="0" to="22.5" begin="100s" dur="0.75"
+ accumulate="sum" repeatCount="3"/>
+ </use>
+ </g>
+ <!-- angles > 360 -->
+ <g transform="translate(250 250)">
+ <use xlink:href="#smiley">
+ <animateTransform attributeName="transform" attributeType="XML"
+ type="skewX" fill="freeze" from="-690" to="750" begin="100s" dur="2s"/>
+ </use>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/smil/transform/translate-clipPath-1.svg b/layout/reftests/svg/smil/transform/translate-clipPath-1.svg
new file mode 100644
index 0000000000..80291076cd
--- /dev/null
+++ b/layout/reftests/svg/smil/transform/translate-clipPath-1.svg
@@ -0,0 +1,39 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function doTest() {
+ setTimeAndSnapshot(101, false);
+ }
+ window.addEventListener("MozReftestInvalidate", doTest, false);
+ </script>
+ <defs>
+ <clipPath id="clip">
+ <rect x="0" y="0" width="50" height="100%"/>
+ <animateTransform attributeName="transform" type="translate" begin="100s" dur="1s"
+ from="0 0" to="-50 0" fill="freeze"/>
+ </clipPath>
+ </defs>
+
+ <!-- Test 1: Lime background covered by clipped red block.
+ After the animation, the clipping path doesn't intersecting the red
+ block at all, so no red is shown. -->
+ <rect x="0" width="50" height="100%" fill="lime" />
+ <rect x="0" width="50" height="100%" fill="red"
+ style="clip-path: url(#clip);"/>
+
+ <!-- Test 2: Purple background covered by clipped lime block.
+ Initially, the clipping path is to the right of the lime, so the purple
+ background shows through. But after the animation, the clipping path
+ exactly matches the dimensions of the lime block, which lets it
+ completly cover all the purple. -->
+ <g transform="translate(100, 0)">
+ <rect x="-50" y="0" width="50" height="100%" fill="purple"/>
+ <rect x="-50" y="0" width="50" height="100%" fill="lime"
+ style="clip-path: url(#clip);"/>
+ </g>
+
+ <!-- Not a test: Paint the rest of the viewport, to match lime.svg -->
+ <rect x="100" height="100%" width="100%" fill="lime"/>
+</svg>
diff --git a/layout/reftests/svg/smil/transform/translate-gradient-1.svg b/layout/reftests/svg/smil/transform/translate-gradient-1.svg
new file mode 100644
index 0000000000..240777b14e
--- /dev/null
+++ b/layout/reftests/svg/smil/transform/translate-gradient-1.svg
@@ -0,0 +1,29 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function doTest() {
+ setTimeAndSnapshot(101, false);
+ }
+ window.addEventListener("MozReftestInvalidate", doTest, false);
+ </script>
+ <defs>
+ <linearGradient id="grad" width="200%">
+ <stop offset="0" stop-color="red"/>
+ <stop offset="1" stop-color="lime"/>
+ <stop offset="2" stop-color="lime"/>
+ <animateTransform attributeName="gradientTransform" type="translate" begin="100s" dur="1s"
+ from="0 0" to="-1 0" fill="freeze"/>
+ </linearGradient>
+ </defs>
+
+ <!-- Test 1: Lime background covered by left hand side of gradient.
+ After the animation, the right hand lime side of the gradient
+ is visible, so no red is shown. -->
+ <rect x="0" width="50" height="100%" fill="lime" />
+ <rect x="0" width="50" height="100%" fill="url(#grad)"/>
+
+ <!-- Not a test: Paint the rest of the viewport, to match lime.svg -->
+ <rect x="50" height="100%" width="100%" fill="lime"/>
+</svg>
diff --git a/layout/reftests/svg/smil/transform/translate-pattern-1.svg b/layout/reftests/svg/smil/transform/translate-pattern-1.svg
new file mode 100644
index 0000000000..b6b9983f03
--- /dev/null
+++ b/layout/reftests/svg/smil/transform/translate-pattern-1.svg
@@ -0,0 +1,28 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait">
+ <script xlink:href="../smil-util.js" type="text/javascript"/>
+ <script>
+ function doTest() {
+ setTimeAndSnapshot(101, false);
+ }
+ window.addEventListener("MozReftestInvalidate", doTest, false);
+ </script>
+ <defs>
+ <pattern id="pat" width="200%" height="100%">
+ <rect x="0" y="0" width="50" height="100%" fill="red"/>
+ <rect x="50" y="0" width="50" height="100%" fill="lime"/>
+ <animateTransform attributeName="patternTransform" type="translate" begin="100s" dur="1s"
+ from="0 0" to="-50 0" fill="freeze"/>
+ </pattern>
+ </defs>
+
+ <!-- Test 1: Lime background covered by left hand side of pattern.
+ After the animation, the right hand lime side of the pattern
+ is visible, so no red is shown. -->
+ <rect x="0" width="50" height="100%" fill="lime" />
+ <rect x="0" width="50" height="100%" fill="url(#pat)" />
+
+ <!-- Not a test: Paint the rest of the viewport, to match lime.svg -->
+ <rect x="50" height="100%" width="100%" fill="lime"/>
+</svg>
diff --git a/layout/reftests/svg/smil/transform/use-1.svg b/layout/reftests/svg/smil/transform/use-1.svg
new file mode 100644
index 0000000000..eee0b33796
--- /dev/null
+++ b/layout/reftests/svg/smil/transform/use-1.svg
@@ -0,0 +1,27 @@
+<svg width="100%" xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait">
+<script>
+ function run() {
+ document.documentElement.setCurrentTime(30);
+ document.documentElement.removeAttribute('class');
+ }
+ window.addEventListener("MozReftestInvalidate", run, false);
+</script>
+<defs>
+ <g id="shape">
+ <rect height="100" width="100" fill="red"/>
+ <rect x="100" height="100" width="100" fill="lime"/>
+ </g>
+
+ <pattern id="pattern" width="200" height="100" patternUnits="userSpaceOnUse">
+ <use xlink:href="#shape">
+ <animateTransform attributeName="transform" type="translate" calcMode="discrete"
+ dur="30s" from="0 0" to="-100 0" fill="freeze"/>
+ </use>
+ </pattern>
+</defs>
+<rect height="100%" width="100%" fill="lime"/>
+<rect height="100%" width="100%" fill="url(#pattern)"/>
+</svg>
+