summaryrefslogtreecommitdiffstats
path: root/layout/reftests/svg
diff options
context:
space:
mode:
Diffstat (limited to 'layout/reftests/svg')
-rw-r--r--layout/reftests/svg/1570363-1-ref.html29
-rw-r--r--layout/reftests/svg/1570363-1.html29
-rw-r--r--layout/reftests/svg/1792313-ref.svg4
-rw-r--r--layout/reftests/svg/1792313.svg4
-rw-r--r--layout/reftests/svg/active-clip-and-mask-ref.html12
-rw-r--r--layout/reftests/svg/active-clip-and-mask.html41
-rw-r--r--layout/reftests/svg/active-transform-blend-mode-ref.html8
-rw-r--r--layout/reftests/svg/active-transform-blend-mode.html8
-rw-r--r--layout/reftests/svg/as-image/background-display-none-1.html13
-rw-r--r--layout/reftests/svg/as-image/background-image-rect-1png.html8
-rw-r--r--layout/reftests/svg/as-image/background-image-rect-1svg.html8
-rw-r--r--layout/reftests/svg/as-image/background-image-rect-2.html8
-rw-r--r--layout/reftests/svg/as-image/background-resize-1.html18
-rw-r--r--layout/reftests/svg/as-image/background-resize-2.html18
-rw-r--r--layout/reftests/svg/as-image/background-resize-3.html19
-rw-r--r--layout/reftests/svg/as-image/background-resize-4.html20
-rw-r--r--layout/reftests/svg/as-image/background-scale-no-viewbox-1-ref.html21
-rw-r--r--layout/reftests/svg/as-image/background-scale-no-viewbox-1.html22
-rw-r--r--layout/reftests/svg/as-image/background-scale-with-viewbox-1-ref.html21
-rw-r--r--layout/reftests/svg/as-image/background-scale-with-viewbox-1.html22
-rw-r--r--layout/reftests/svg/as-image/background-simple-1.html6
-rw-r--r--layout/reftests/svg/as-image/background-simple-2.html6
-rw-r--r--layout/reftests/svg/as-image/background-stretch-1-ref.html37
-rw-r--r--layout/reftests/svg/as-image/background-stretch-1.html22
-rw-r--r--layout/reftests/svg/as-image/background-viewBox-1.html7
-rw-r--r--layout/reftests/svg/as-image/black100x100-ref.html5
-rw-r--r--layout/reftests/svg/as-image/blue-square-in-square-par-none.svg7
-rw-r--r--layout/reftests/svg/as-image/blue-square-in-square.svg7
-rw-r--r--layout/reftests/svg/as-image/blue100x100-border-ref.html5
-rw-r--r--layout/reftests/svg/as-image/blue100x100-ref.html5
-rw-r--r--layout/reftests/svg/as-image/blue100x100.svg4
-rw-r--r--layout/reftests/svg/as-image/border-image-simple-1.html6
-rw-r--r--layout/reftests/svg/as-image/border-image-simple-2.html6
-rw-r--r--layout/reftests/svg/as-image/canvas-drawImage-alpha-1-ref.html6
-rw-r--r--layout/reftests/svg/as-image/canvas-drawImage-alpha-1.html22
-rw-r--r--layout/reftests/svg/as-image/canvas-drawImage-alpha-2-ref.html6
-rw-r--r--layout/reftests/svg/as-image/canvas-drawImage-alpha-2.html22
-rw-r--r--layout/reftests/svg/as-image/canvas-drawImage-origin-clean-1.html24
-rw-r--r--layout/reftests/svg/as-image/canvas-drawImage-scale-1a.html27
-rw-r--r--layout/reftests/svg/as-image/canvas-drawImage-scale-1b.html28
-rw-r--r--layout/reftests/svg/as-image/canvas-drawImage-scale-1c.html26
-rw-r--r--layout/reftests/svg/as-image/canvas-drawImage-scale-2-ref.html6
-rw-r--r--layout/reftests/svg/as-image/canvas-drawImage-scale-2a.html26
-rw-r--r--layout/reftests/svg/as-image/canvas-drawImage-scale-2b.html26
-rw-r--r--layout/reftests/svg/as-image/canvas-drawImage-simple-1a.html22
-rw-r--r--layout/reftests/svg/as-image/canvas-drawImage-simple-1b.html25
-rw-r--r--layout/reftests/svg/as-image/canvas-drawImage-slice-1a.html28
-rw-r--r--layout/reftests/svg/as-image/canvas-drawImage-slice-1b.html25
-rw-r--r--layout/reftests/svg/as-image/canvas-drawImage-transform-restored-ref.html18
-rw-r--r--layout/reftests/svg/as-image/canvas-drawImage-transform-restored.html24
-rw-r--r--layout/reftests/svg/as-image/content-outside-viewBox-1-helper.svg11
-rw-r--r--layout/reftests/svg/as-image/context-fill-01.html19
-rw-r--r--layout/reftests/svg/as-image/context-fill-02.html20
-rw-r--r--layout/reftests/svg/as-image/context-fill-03.html19
-rw-r--r--layout/reftests/svg/as-image/context-fill-04.html19
-rw-r--r--layout/reftests/svg/as-image/context-fill-05.html27
-rw-r--r--layout/reftests/svg/as-image/context-fill-05.svg3
-rw-r--r--layout/reftests/svg/as-image/context-fill-06.html19
-rw-r--r--layout/reftests/svg/as-image/context-fill-07-ref.html19
-rw-r--r--layout/reftests/svg/as-image/context-fill-07.html22
-rw-r--r--layout/reftests/svg/as-image/context-fill-08.html20
-rw-r--r--layout/reftests/svg/as-image/context-fill-bg-image-01.html21
-rw-r--r--layout/reftests/svg/as-image/context-fill-opacity-01.html19
-rw-r--r--layout/reftests/svg/as-image/context-fill-opacity-02.html27
-rw-r--r--layout/reftests/svg/as-image/context-fill-opacity-02.svg3
-rw-r--r--layout/reftests/svg/as-image/context-fill-opacity-03.html20
-rw-r--r--layout/reftests/svg/as-image/context-fill-opacity-04.html18
-rw-r--r--layout/reftests/svg/as-image/context-fill-opacity-05.html20
-rw-r--r--layout/reftests/svg/as-image/context-fill-or-stroke-05-ref.html17
-rw-r--r--layout/reftests/svg/as-image/context-fill-or-stroke-opacity-01-ref.html6
-rw-r--r--layout/reftests/svg/as-image/context-fill-or-stroke-opacity-02-ref.html18
-rw-r--r--layout/reftests/svg/as-image/context-fill-or-stroke-opacity-03-ref.html6
-rw-r--r--layout/reftests/svg/as-image/context-stroke-01.html19
-rw-r--r--layout/reftests/svg/as-image/context-stroke-02.html20
-rw-r--r--layout/reftests/svg/as-image/context-stroke-03.html19
-rw-r--r--layout/reftests/svg/as-image/context-stroke-04.html19
-rw-r--r--layout/reftests/svg/as-image/context-stroke-05.html27
-rw-r--r--layout/reftests/svg/as-image/context-stroke-05.svg3
-rw-r--r--layout/reftests/svg/as-image/context-stroke-06.html19
-rw-r--r--layout/reftests/svg/as-image/context-stroke-07-ref.html19
-rw-r--r--layout/reftests/svg/as-image/context-stroke-07.html22
-rw-r--r--layout/reftests/svg/as-image/context-stroke-08.html20
-rw-r--r--layout/reftests/svg/as-image/context-stroke-bg-image-01.html21
-rw-r--r--layout/reftests/svg/as-image/context-stroke-opacity-01.html19
-rw-r--r--layout/reftests/svg/as-image/context-stroke-opacity-02.html27
-rw-r--r--layout/reftests/svg/as-image/context-stroke-opacity-02.svg3
-rw-r--r--layout/reftests/svg/as-image/context-stroke-opacity-03.html20
-rw-r--r--layout/reftests/svg/as-image/context-stroke-opacity-04.html18
-rw-r--r--layout/reftests/svg/as-image/context-stroke-opacity-05.html19
-rw-r--r--layout/reftests/svg/as-image/defer-unsupported-1-helper.svg5
-rw-r--r--layout/reftests/svg/as-image/defer-unsupported-1-ref.svg6
-rw-r--r--layout/reftests/svg/as-image/defer-unsupported-1.svg7
-rw-r--r--layout/reftests/svg/as-image/display-none.svg8
-rw-r--r--layout/reftests/svg/as-image/image-orientation-ref.html33
-rw-r--r--layout/reftests/svg/as-image/image-orientation-viewbox-and-size.html19
-rw-r--r--layout/reftests/svg/as-image/image-orientation-viewbox-and-size.svg8
-rw-r--r--layout/reftests/svg/as-image/image-orientation-viewbox-no-size.html22
-rw-r--r--layout/reftests/svg/as-image/image-orientation-viewbox-no-size.svg7
-rw-r--r--layout/reftests/svg/as-image/img-and-image-1-helper-a.svg8
-rw-r--r--layout/reftests/svg/as-image/img-and-image-1-helper-b.svg7
-rw-r--r--layout/reftests/svg/as-image/img-and-image-1-helper-c.svg42
-rw-r--r--layout/reftests/svg/as-image/img-and-image-1-ref.svg43
-rw-r--r--layout/reftests/svg/as-image/img-and-image-1.html24
-rw-r--r--layout/reftests/svg/as-image/img-blobURI-1.html35
-rw-r--r--layout/reftests/svg/as-image/img-blobURI-2.html44
-rw-r--r--layout/reftests/svg/as-image/img-content-outside-viewBox-1-ref.html15
-rw-r--r--layout/reftests/svg/as-image/img-content-outside-viewBox-1.html14
-rw-r--r--layout/reftests/svg/as-image/img-display-none-1.html12
-rw-r--r--layout/reftests/svg/as-image/img-dyn-1-ref.html7
-rw-r--r--layout/reftests/svg/as-image/img-dyn-1.html18
-rw-r--r--layout/reftests/svg/as-image/img-foreignObject-1-helper.svg6
-rw-r--r--layout/reftests/svg/as-image/img-foreignObject-1.html5
-rw-r--r--layout/reftests/svg/as-image/img-foreignObject-embed-1-helper.svg18
-rw-r--r--layout/reftests/svg/as-image/img-foreignObject-embed-1.html5
-rw-r--r--layout/reftests/svg/as-image/img-foreignObject-iframe-1a-helper.svg14
-rw-r--r--layout/reftests/svg/as-image/img-foreignObject-iframe-1a.html5
-rw-r--r--layout/reftests/svg/as-image/img-foreignObject-iframe-1b-helper.svg14
-rw-r--r--layout/reftests/svg/as-image/img-foreignObject-iframe-1b.html5
-rw-r--r--layout/reftests/svg/as-image/img-fragment-1-ref.html18
-rw-r--r--layout/reftests/svg/as-image/img-fragment-1a.html21
-rw-r--r--layout/reftests/svg/as-image/img-fragment-1b.html19
-rw-r--r--layout/reftests/svg/as-image/img-fragment-1c.html23
-rw-r--r--layout/reftests/svg/as-image/img-fragment-2-ref.html18
-rw-r--r--layout/reftests/svg/as-image/img-fragment-2a.html21
-rw-r--r--layout/reftests/svg/as-image/img-fragment-2b.html19
-rw-r--r--layout/reftests/svg/as-image/img-fragment-2c.html23
-rw-r--r--layout/reftests/svg/as-image/img-height-meet-1-ref.html19
-rw-r--r--layout/reftests/svg/as-image/img-height-meet-1.html19
-rw-r--r--layout/reftests/svg/as-image/img-height-meet-2-ref.html19
-rw-r--r--layout/reftests/svg/as-image/img-height-meet-2.html19
-rw-r--r--layout/reftests/svg/as-image/img-height-slice-1-ref.html19
-rw-r--r--layout/reftests/svg/as-image/img-height-slice-1.html19
-rw-r--r--layout/reftests/svg/as-image/img-height-slice-2-ref.html19
-rw-r--r--layout/reftests/svg/as-image/img-height-slice-2.html19
-rw-r--r--layout/reftests/svg/as-image/img-novb-height-all-1-ref.html45
-rw-r--r--layout/reftests/svg/as-image/img-novb-height-meet-1.html20
-rw-r--r--layout/reftests/svg/as-image/img-novb-height-slice-1.html20
-rw-r--r--layout/reftests/svg/as-image/img-novb-width-all-1-ref.html49
-rw-r--r--layout/reftests/svg/as-image/img-novb-width-meet-1.html20
-rw-r--r--layout/reftests/svg/as-image/img-novb-width-slice-1.html20
-rw-r--r--layout/reftests/svg/as-image/img-novb-widthAndHeight-all-1-ref.html20
-rw-r--r--layout/reftests/svg/as-image/img-novb-widthAndHeight-meet-1-em.html20
-rw-r--r--layout/reftests/svg/as-image/img-novb-widthAndHeight-meet-1-px.html20
-rw-r--r--layout/reftests/svg/as-image/img-novb-widthAndHeight-slice-1-em.html20
-rw-r--r--layout/reftests/svg/as-image/img-novb-widthAndHeight-slice-1-px.html20
-rw-r--r--layout/reftests/svg/as-image/img-simple-1.html5
-rw-r--r--layout/reftests/svg/as-image/img-simple-2.html5
-rw-r--r--layout/reftests/svg/as-image/img-simple-3-ref.html11
-rw-r--r--layout/reftests/svg/as-image/img-simple-3.html9
-rw-r--r--layout/reftests/svg/as-image/img-simple-4.html5
-rw-r--r--layout/reftests/svg/as-image/img-simple-5-ref.html12
-rw-r--r--layout/reftests/svg/as-image/img-simple-5.html6
-rw-r--r--layout/reftests/svg/as-image/img-simple-6.html5
-rw-r--r--layout/reftests/svg/as-image/img-simple-7-ref.html11
-rw-r--r--layout/reftests/svg/as-image/img-simple-7.html6
-rw-r--r--layout/reftests/svg/as-image/img-width-meet-1-ref.html19
-rw-r--r--layout/reftests/svg/as-image/img-width-meet-1.html19
-rw-r--r--layout/reftests/svg/as-image/img-width-meet-2-ref.html19
-rw-r--r--layout/reftests/svg/as-image/img-width-meet-2.html19
-rw-r--r--layout/reftests/svg/as-image/img-width-slice-1-ref.html19
-rw-r--r--layout/reftests/svg/as-image/img-width-slice-1.html19
-rw-r--r--layout/reftests/svg/as-image/img-width-slice-2-ref.html19
-rw-r--r--layout/reftests/svg/as-image/img-width-slice-2.html19
-rw-r--r--layout/reftests/svg/as-image/img-widthAndHeight-meet-1-ref.html20
-rw-r--r--layout/reftests/svg/as-image/img-widthAndHeight-meet-1.html20
-rw-r--r--layout/reftests/svg/as-image/img-widthAndHeight-meet-2-ref.html20
-rw-r--r--layout/reftests/svg/as-image/img-widthAndHeight-meet-2.html20
-rw-r--r--layout/reftests/svg/as-image/img-widthAndHeight-slice-1-ref.html20
-rw-r--r--layout/reftests/svg/as-image/img-widthAndHeight-slice-1.html20
-rw-r--r--layout/reftests/svg/as-image/img-widthAndHeight-slice-2-ref.html20
-rw-r--r--layout/reftests/svg/as-image/img-widthAndHeight-slice-2.html20
-rw-r--r--layout/reftests/svg/as-image/lime100x100-50pct-ref.html5
-rw-r--r--layout/reftests/svg/as-image/lime100x100-noSVGDimensions.svg3
-rw-r--r--layout/reftests/svg/as-image/lime100x100-ref.html5
-rw-r--r--layout/reftests/svg/as-image/lime100x100-w-border-ref.html5
-rw-r--r--layout/reftests/svg/as-image/lime100x100.pngbin0 -> 232 bytes
-rw-r--r--layout/reftests/svg/as-image/lime100x100.svg4
-rw-r--r--layout/reftests/svg/as-image/lime200x100.svg4
-rw-r--r--layout/reftests/svg/as-image/lime200x200.svg4
-rw-r--r--layout/reftests/svg/as-image/lime50x25.svg4
-rw-r--r--layout/reftests/svg/as-image/lime50x50.svg4
-rw-r--r--layout/reftests/svg/as-image/limeInRed-noSVGDimensions-animViewBox.svg5
-rw-r--r--layout/reftests/svg/as-image/limeInRed-noSVGDimensions-viewBox.svg5
-rw-r--r--layout/reftests/svg/as-image/limeInRed100x100-viewBox.svg5
-rw-r--r--layout/reftests/svg/as-image/limeInRed100x100.pngbin0 -> 292 bytes
-rw-r--r--layout/reftests/svg/as-image/limeInRed100x100.svg5
-rw-r--r--layout/reftests/svg/as-image/list-simple-1-ref.html8
-rw-r--r--layout/reftests/svg/as-image/list-simple-1.html8
-rw-r--r--layout/reftests/svg/as-image/nonuniform-scale-2d.html35
-rw-r--r--layout/reftests/svg/as-image/nonuniform-scale-3d.html37
-rw-r--r--layout/reftests/svg/as-image/nonuniform-scale-ref.html24
-rw-r--r--layout/reftests/svg/as-image/reftest.list222
-rw-r--r--layout/reftests/svg/as-image/squaredCircle-100x100.svg7
-rw-r--r--layout/reftests/svg/as-image/squaredCircle-100x50.svg7
-rw-r--r--layout/reftests/svg/as-image/squaredCircle-transparent.svg8
-rw-r--r--layout/reftests/svg/as-image/squaredCircle-viewBox-100x100.svg6
-rw-r--r--layout/reftests/svg/as-image/squaredCircle-viewBox-noSize.svg5
-rw-r--r--layout/reftests/svg/as-image/svg-border-image-repaint-1-ref.html14
-rw-r--r--layout/reftests/svg/as-image/svg-border-image-repaint-1.html20
-rw-r--r--layout/reftests/svg/as-image/svg-border-image-repaint-helper.svg9
-rw-r--r--layout/reftests/svg/as-image/svg-border-image-repaint-iframe.html23
-rw-r--r--layout/reftests/svg/as-image/svg-image-datauri-1.html5
-rw-r--r--layout/reftests/svg/as-image/svg-image-datauri.svg8
-rw-r--r--layout/reftests/svg/as-image/svg-image-external-1.html5
-rw-r--r--layout/reftests/svg/as-image/svg-image-external.svg10
-rw-r--r--layout/reftests/svg/as-image/svg-image-recursive-1-ref.svg6
-rw-r--r--layout/reftests/svg/as-image/svg-image-recursive-1a.svg13
-rw-r--r--layout/reftests/svg/as-image/svg-image-recursive-1b.svg15
-rw-r--r--layout/reftests/svg/as-image/svg-image-recursive-2-ref.svg5
-rw-r--r--layout/reftests/svg/as-image/svg-image-recursive-2a.svg10
-rw-r--r--layout/reftests/svg/as-image/svg-image-recursive-2b.html9
-rw-r--r--layout/reftests/svg/as-image/svg-image-simple-1.svg6
-rw-r--r--layout/reftests/svg/as-image/svg-image-simple-2.svg7
-rw-r--r--layout/reftests/svg/as-image/svg-image-simple-3.svg7
-rw-r--r--layout/reftests/svg/as-image/svg-image-synthetic-viewBox-01-helper-1.svg4
-rw-r--r--layout/reftests/svg/as-image/svg-image-synthetic-viewBox-01-helper-2.svg4
-rw-r--r--layout/reftests/svg/as-image/svg-image-synthetic-viewBox-01-ref.svg4
-rw-r--r--layout/reftests/svg/as-image/svg-image-synthetic-viewBox-01.svg4
-rw-r--r--layout/reftests/svg/as-image/svg-image-util.css3
-rw-r--r--layout/reftests/svg/as-image/svg-image-util.js173
-rw-r--r--layout/reftests/svg/as-image/svg-image-visited-1-ref.html24
-rw-r--r--layout/reftests/svg/as-image/svg-image-visited-1a-helper.svg34
-rw-r--r--layout/reftests/svg/as-image/svg-image-visited-1a.html23
-rw-r--r--layout/reftests/svg/as-image/svg-image-visited-1b-helper.svg33
-rw-r--r--layout/reftests/svg/as-image/svg-image-visited-1b.html23
-rw-r--r--layout/reftests/svg/as-image/svg-image-visited-1c-helper.svg33
-rw-r--r--layout/reftests/svg/as-image/svg-image-visited-1c.html23
-rw-r--r--layout/reftests/svg/as-image/svg-image-visited-1d-helper.svg32
-rw-r--r--layout/reftests/svg/as-image/svg-image-visited-1d.html23
-rw-r--r--layout/reftests/svg/as-image/svg-stylesheet-datauri-1.html5
-rw-r--r--layout/reftests/svg/as-image/svg-stylesheet-datauri.svg8
-rw-r--r--layout/reftests/svg/as-image/svg-stylesheet-external-1.html5
-rw-r--r--layout/reftests/svg/as-image/svg-stylesheet-external.css1
-rw-r--r--layout/reftests/svg/as-image/svg-stylesheet-external.svg9
-rw-r--r--layout/reftests/svg/as-image/transparent100x100-w-border-ref.html5
-rw-r--r--layout/reftests/svg/as-image/white-rect-no-viewbox.svg8
-rw-r--r--layout/reftests/svg/as-image/white-rect-with-viewbox.svg11
-rw-r--r--layout/reftests/svg/as-image/zoom/circle-large.svg3
-rw-r--r--layout/reftests/svg/as-image/zoom/circle-small.svg3
-rw-r--r--layout/reftests/svg/as-image/zoom/img-fuzzy-transform-zoomIn-1.html29
-rw-r--r--layout/reftests/svg/as-image/zoom/img-fuzzy-transform-zoomOut-1.html29
-rw-r--r--layout/reftests/svg/as-image/zoom/img-fuzzy-zoomIn-1-ref.html27
-rw-r--r--layout/reftests/svg/as-image/zoom/img-fuzzy-zoomIn-1.html27
-rw-r--r--layout/reftests/svg/as-image/zoom/img-fuzzy-zoomOut-1-ref.html27
-rw-r--r--layout/reftests/svg/as-image/zoom/img-fuzzy-zoomOut-1.html27
-rw-r--r--layout/reftests/svg/as-image/zoom/img-zoomIn-1.html5
-rw-r--r--layout/reftests/svg/as-image/zoom/img-zoomOut-1.html5
-rw-r--r--layout/reftests/svg/as-image/zoom/reftest.list11
-rw-r--r--layout/reftests/svg/as-image/zoom/squaredCircle-150x150-ref.html5
-rw-r--r--layout/reftests/svg/as-image/zoom/squaredCircle-50x50-ref.html5
-rw-r--r--layout/reftests/svg/as-image/zoom/squaredCircle.svg6
-rw-r--r--layout/reftests/svg/autofocus-01-ref.svg8
-rw-r--r--layout/reftests/svg/autofocus-01a.svg6
-rw-r--r--layout/reftests/svg/autofocus-01b.svg8
-rw-r--r--layout/reftests/svg/autofocus-02a.svg8
-rw-r--r--layout/reftests/svg/autofocus-02b.svg10
-rw-r--r--layout/reftests/svg/background-ref.html20
-rw-r--r--layout/reftests/svg/background-svg-without-height-width.html18
-rw-r--r--layout/reftests/svg/background-svg-without-height.html18
-rw-r--r--layout/reftests/svg/background-svg-without-width.html18
-rw-r--r--layout/reftests/svg/baseline-middle-01.svg10
-rw-r--r--layout/reftests/svg/big-image.jpegbin0 -> 160938 bytes
-rw-r--r--layout/reftests/svg/blend-color-burn-ref.svg22
-rw-r--r--layout/reftests/svg/blend-color-burn.svg16
-rw-r--r--layout/reftests/svg/blend-color-dodge-ref.svg22
-rw-r--r--layout/reftests/svg/blend-color-dodge.svg16
-rw-r--r--layout/reftests/svg/blend-color-ref.svg22
-rw-r--r--layout/reftests/svg/blend-color.svg16
-rw-r--r--layout/reftests/svg/blend-darken-ref.svg22
-rw-r--r--layout/reftests/svg/blend-darken.svg16
-rw-r--r--layout/reftests/svg/blend-difference-ref.svg22
-rw-r--r--layout/reftests/svg/blend-difference-stacking-ref.html28
-rw-r--r--layout/reftests/svg/blend-difference-stacking.html28
-rw-r--r--layout/reftests/svg/blend-difference.svg16
-rw-r--r--layout/reftests/svg/blend-exclusion-ref.svg22
-rw-r--r--layout/reftests/svg/blend-exclusion.svg16
-rw-r--r--layout/reftests/svg/blend-hard-light-ref.svg22
-rw-r--r--layout/reftests/svg/blend-hard-light.svg16
-rw-r--r--layout/reftests/svg/blend-hue-ref.svg22
-rw-r--r--layout/reftests/svg/blend-hue.svg16
-rw-r--r--layout/reftests/svg/blend-layer-blend-ref.svg7
-rw-r--r--layout/reftests/svg/blend-layer-blend.svg10
-rw-r--r--layout/reftests/svg/blend-layer-filter-ref.svg7
-rw-r--r--layout/reftests/svg/blend-layer-filter.svg15
-rw-r--r--layout/reftests/svg/blend-layer-mask-ref.svg7
-rw-r--r--layout/reftests/svg/blend-layer-mask.svg15
-rw-r--r--layout/reftests/svg/blend-layer-opacity-ref.svg7
-rw-r--r--layout/reftests/svg/blend-layer-opacity.svg10
-rw-r--r--layout/reftests/svg/blend-lighten-ref.svg22
-rw-r--r--layout/reftests/svg/blend-lighten.svg16
-rw-r--r--layout/reftests/svg/blend-luminosity-ref.svg22
-rw-r--r--layout/reftests/svg/blend-luminosity.svg16
-rw-r--r--layout/reftests/svg/blend-multiply-alpha-ref.svg22
-rw-r--r--layout/reftests/svg/blend-multiply-alpha.svg16
-rw-r--r--layout/reftests/svg/blend-multiply-ref.svg22
-rw-r--r--layout/reftests/svg/blend-multiply.svg16
-rw-r--r--layout/reftests/svg/blend-normal-ref.svg22
-rw-r--r--layout/reftests/svg/blend-normal.svg16
-rw-r--r--layout/reftests/svg/blend-overlay-ref.svg22
-rw-r--r--layout/reftests/svg/blend-overlay.svg16
-rw-r--r--layout/reftests/svg/blend-saturation-ref.svg22
-rw-r--r--layout/reftests/svg/blend-saturation.svg16
-rw-r--r--layout/reftests/svg/blend-screen-ref.svg22
-rw-r--r--layout/reftests/svg/blend-screen.svg16
-rw-r--r--layout/reftests/svg/blend-soft-light-ref.svg22
-rw-r--r--layout/reftests/svg/blend-soft-light.svg16
-rw-r--r--layout/reftests/svg/blur-inside-clipPath-ref.svg12
-rw-r--r--layout/reftests/svg/blur-inside-clipPath.svg17
-rw-r--r--layout/reftests/svg/border-radius-01.html13
-rw-r--r--layout/reftests/svg/bug-1562091-icon.svg14
-rw-r--r--layout/reftests/svg/bug-1562091-ref.html12
-rw-r--r--layout/reftests/svg/bug-1562091.html17
-rw-r--r--layout/reftests/svg/clip-01.svg24
-rw-r--r--layout/reftests/svg/clip-02-ref.svg20
-rw-r--r--layout/reftests/svg/clip-02a.svg34
-rw-r--r--layout/reftests/svg/clip-02b.svg34
-rw-r--r--layout/reftests/svg/clip-surface-clone-01-ref.svg4
-rw-r--r--layout/reftests/svg/clip-surface-clone-01.svg8
-rw-r--r--layout/reftests/svg/clip-use-element-01.svg12
-rw-r--r--layout/reftests/svg/clip-use-element-02.svg13
-rw-r--r--layout/reftests/svg/clipPath-advanced-01.svg84
-rw-r--r--layout/reftests/svg/clipPath-and-mask-on-outflowElement-01a.html51
-rw-r--r--layout/reftests/svg/clipPath-and-mask-on-outflowElement-01b.html51
-rw-r--r--layout/reftests/svg/clipPath-and-shape-rendering-01-ref.svg22
-rw-r--r--layout/reftests/svg/clipPath-and-shape-rendering-01.svg24
-rw-r--r--layout/reftests/svg/clipPath-and-transform-01.svg23
-rw-r--r--layout/reftests/svg/clipPath-and-transform-02.svg13
-rw-r--r--layout/reftests/svg/clipPath-basic-01.svg17
-rw-r--r--layout/reftests/svg/clipPath-basic-02.svg24
-rw-r--r--layout/reftests/svg/clipPath-basic-03.svg24
-rw-r--r--layout/reftests/svg/clipPath-basic-04.svg22
-rw-r--r--layout/reftests/svg/clipPath-basic-05.svg13
-rw-r--r--layout/reftests/svg/clipPath-basic-06.svg21
-rw-r--r--layout/reftests/svg/clipPath-basic-07.svg10
-rw-r--r--layout/reftests/svg/clipPath-basic-08.svg22
-rw-r--r--layout/reftests/svg/clipPath-basic-shape-transform-ref.html6
-rw-r--r--layout/reftests/svg/clipPath-basic-shape-transform.html8
-rw-r--r--layout/reftests/svg/clipPath-css-transform-ref.html18
-rw-r--r--layout/reftests/svg/clipPath-css-transform.html29
-rw-r--r--layout/reftests/svg/clipPath-fill-box-ref.html3
-rw-r--r--layout/reftests/svg/clipPath-fill-box.html3
-rw-r--r--layout/reftests/svg/clipPath-on-outflowElement-01-ref.html10
-rw-r--r--layout/reftests/svg/clipPath-on-outflowElement-01a.html45
-rw-r--r--layout/reftests/svg/clipPath-on-outflowElement-01b.html43
-rw-r--r--layout/reftests/svg/clipPath-on-outflowElement-02-ref.html8
-rw-r--r--layout/reftests/svg/clipPath-on-outflowElement-02a.html46
-rw-r--r--layout/reftests/svg/clipPath-on-outflowElement-02b.html45
-rw-r--r--layout/reftests/svg/clipPath-on-thin-object.svg13
-rw-r--r--layout/reftests/svg/clipPath-polygon-01.svg51
-rw-r--r--layout/reftests/svg/clipPath-polygon-elementFromPoint-01.svg43
-rw-r--r--layout/reftests/svg/clipPath-winding-01.svg17
-rw-r--r--layout/reftests/svg/comments-in-pres-attrs.svg8
-rw-r--r--layout/reftests/svg/conditions-01.svg18
-rw-r--r--layout/reftests/svg/conditions-02.svg17
-rw-r--r--layout/reftests/svg/conditions-03.svg16
-rw-r--r--layout/reftests/svg/conditions-04.svg15
-rw-r--r--layout/reftests/svg/conditions-05.svg11
-rw-r--r--layout/reftests/svg/conditions-07.svg40
-rw-r--r--layout/reftests/svg/conditions-08-ref.svg41
-rw-r--r--layout/reftests/svg/conditions-08.svg42
-rw-r--r--layout/reftests/svg/conditions-09-ref.svg5
-rw-r--r--layout/reftests/svg/conditions-09.svg6
-rw-r--r--layout/reftests/svg/css-transform-svg-ref.html10
-rw-r--r--layout/reftests/svg/css-transform-svg.html13
-rw-r--r--layout/reftests/svg/current-translate-01.svg8
-rw-r--r--layout/reftests/svg/current-translate-02.svg10
-rw-r--r--layout/reftests/svg/currentColor-01.svg14
-rw-r--r--layout/reftests/svg/currentColor-02.svg14
-rw-r--r--layout/reftests/svg/currentColor-03.svg16
-rw-r--r--layout/reftests/svg/currentColor-override-flood.svg10
-rw-r--r--layout/reftests/svg/currentColor-override-lighting-ref.svg14
-rw-r--r--layout/reftests/svg/currentColor-override-lighting.svg15
-rw-r--r--layout/reftests/svg/currentColor-override-stop.svg9
-rw-r--r--layout/reftests/svg/data-uri-with-filter-01-ref.svg13
-rw-r--r--layout/reftests/svg/data-uri-with-filter-01.xhtml16
-rw-r--r--layout/reftests/svg/data-uri-with-gradient-01-ref.svg9
-rw-r--r--layout/reftests/svg/data-uri-with-gradient-01.xhtml16
-rw-r--r--layout/reftests/svg/data-uri-with-pattern-01.xhtml17
-rw-r--r--layout/reftests/svg/dynamic-attr-change-1.svg26
-rw-r--r--layout/reftests/svg/dynamic-attr-change-2.svg26
-rw-r--r--layout/reftests/svg/dynamic-attr-removal-1.svg26
-rw-r--r--layout/reftests/svg/dynamic-attr-removal-2.svg26
-rw-r--r--layout/reftests/svg/dynamic-class-01.svg24
-rw-r--r--layout/reftests/svg/dynamic-clipPath-01.svg125
-rw-r--r--layout/reftests/svg/dynamic-clipPath-02.svg36
-rw-r--r--layout/reftests/svg/dynamic-clipPath-clip-rule-01.svg32
-rw-r--r--layout/reftests/svg/dynamic-conditions-01.svg33
-rw-r--r--layout/reftests/svg/dynamic-conditions-02.svg11
-rw-r--r--layout/reftests/svg/dynamic-conditions-03.svg11
-rw-r--r--layout/reftests/svg/dynamic-conditions-04.svg12
-rw-r--r--layout/reftests/svg/dynamic-conditions-05.svg11
-rw-r--r--layout/reftests/svg/dynamic-conditions-06.svg24
-rw-r--r--layout/reftests/svg/dynamic-conditions-07.svg24
-rw-r--r--layout/reftests/svg/dynamic-conditions-08.svg24
-rw-r--r--layout/reftests/svg/dynamic-conditions-09.svg25
-rw-r--r--layout/reftests/svg/dynamic-conditions-10.svg24
-rw-r--r--layout/reftests/svg/dynamic-conditions-11.svg24
-rw-r--r--layout/reftests/svg/dynamic-conditions-12.svg24
-rw-r--r--layout/reftests/svg/dynamic-conditions-13.svg24
-rw-r--r--layout/reftests/svg/dynamic-feFlood-01.svg24
-rw-r--r--layout/reftests/svg/dynamic-feImage-01.svg28
-rw-r--r--layout/reftests/svg/dynamic-fill-01-ref.svg12
-rw-r--r--layout/reftests/svg/dynamic-fill-01.svg23
-rw-r--r--layout/reftests/svg/dynamic-fill-rule-01-ref.svg20
-rw-r--r--layout/reftests/svg/dynamic-fill-rule-01.svg25
-rw-r--r--layout/reftests/svg/dynamic-filter-contents-01-ref.svg8
-rw-r--r--layout/reftests/svg/dynamic-filter-contents-01a.svg31
-rw-r--r--layout/reftests/svg/dynamic-filter-contents-01b.svg27
-rw-r--r--layout/reftests/svg/dynamic-gradient-contents-01.svg32
-rw-r--r--layout/reftests/svg/dynamic-gradient-contents-02.svg35
-rw-r--r--layout/reftests/svg/dynamic-inner-svg-01.svg39
-rw-r--r--layout/reftests/svg/dynamic-link-style-01.svg16
-rw-r--r--layout/reftests/svg/dynamic-marker-01.svg32
-rw-r--r--layout/reftests/svg/dynamic-marker-02-ref.svg18
-rw-r--r--layout/reftests/svg/dynamic-marker-02.svg36
-rw-r--r--layout/reftests/svg/dynamic-marker-03.svg36
-rw-r--r--layout/reftests/svg/dynamic-mask-01.svg48
-rw-r--r--layout/reftests/svg/dynamic-mask-contents-01.svg29
-rw-r--r--layout/reftests/svg/dynamic-mask-pre-effects-bbox-ref.html40
-rw-r--r--layout/reftests/svg/dynamic-mask-pre-effects-bbox.html71
-rw-r--r--layout/reftests/svg/dynamic-opacity-property-01.svg25
-rw-r--r--layout/reftests/svg/dynamic-pattern-01.svg115
-rw-r--r--layout/reftests/svg/dynamic-pattern-02.svg29
-rw-r--r--layout/reftests/svg/dynamic-pattern-contents-01.svg32
-rw-r--r--layout/reftests/svg/dynamic-pattern-contents-02.svg29
-rw-r--r--layout/reftests/svg/dynamic-rect-01-ref.svg13
-rw-r--r--layout/reftests/svg/dynamic-rect-01.svg24
-rw-r--r--layout/reftests/svg/dynamic-rect-02-ref.svg15
-rw-r--r--layout/reftests/svg/dynamic-rect-02.svg22
-rw-r--r--layout/reftests/svg/dynamic-rect-03-ref.svg16
-rw-r--r--layout/reftests/svg/dynamic-rect-03.svg22
-rw-r--r--layout/reftests/svg/dynamic-rect-04.xhtml32
-rw-r--r--layout/reftests/svg/dynamic-rect-05.svg19
-rw-r--r--layout/reftests/svg/dynamic-reflow-01-ref.svg5
-rw-r--r--layout/reftests/svg/dynamic-reflow-01.svg10
-rw-r--r--layout/reftests/svg/dynamic-small-object-scaled-up-01.svg30
-rw-r--r--layout/reftests/svg/dynamic-small-object-scaled-up-02.svg30
-rw-r--r--layout/reftests/svg/dynamic-stroke-01.svg21
-rw-r--r--layout/reftests/svg/dynamic-stroke-opacity-01.svg21
-rw-r--r--layout/reftests/svg/dynamic-stroke-width-01.svg21
-rw-r--r--layout/reftests/svg/dynamic-switch-01.svg56
-rw-r--r--layout/reftests/svg/dynamic-text-01-ref.svg15
-rw-r--r--layout/reftests/svg/dynamic-text-01.svg28
-rw-r--r--layout/reftests/svg/dynamic-text-02-ref.svg18
-rw-r--r--layout/reftests/svg/dynamic-text-02.svg28
-rw-r--r--layout/reftests/svg/dynamic-text-03-ref.svg19
-rw-r--r--layout/reftests/svg/dynamic-text-03.svg28
-rw-r--r--layout/reftests/svg/dynamic-text-04-ref.svg34
-rw-r--r--layout/reftests/svg/dynamic-text-04.svg49
-rw-r--r--layout/reftests/svg/dynamic-text-05.svg20
-rw-r--r--layout/reftests/svg/dynamic-text-06.svg29
-rw-r--r--layout/reftests/svg/dynamic-text-07-ref.svg11
-rw-r--r--layout/reftests/svg/dynamic-text-07.svg23
-rw-r--r--layout/reftests/svg/dynamic-text-08-ref.svg10
-rw-r--r--layout/reftests/svg/dynamic-text-08.svg24
-rw-r--r--layout/reftests/svg/dynamic-text-attr-01-ref.svg31
-rw-r--r--layout/reftests/svg/dynamic-text-attr-01.svg46
-rw-r--r--layout/reftests/svg/dynamic-textPath-01-ref.svg15
-rw-r--r--layout/reftests/svg/dynamic-textPath-01.svg28
-rw-r--r--layout/reftests/svg/dynamic-textPath-02-ref.svg14
-rw-r--r--layout/reftests/svg/dynamic-textPath-02.svg26
-rw-r--r--layout/reftests/svg/dynamic-textPath-03-ref.svg14
-rw-r--r--layout/reftests/svg/dynamic-textPath-03.svg25
-rw-r--r--layout/reftests/svg/dynamic-textPath-04.html28
-rw-r--r--layout/reftests/svg/dynamic-use-01.svg91
-rw-r--r--layout/reftests/svg/dynamic-use-02.svg17
-rw-r--r--layout/reftests/svg/dynamic-use-03.svg26
-rw-r--r--layout/reftests/svg/dynamic-use-04.svg31
-rw-r--r--layout/reftests/svg/dynamic-use-05.svg31
-rw-r--r--layout/reftests/svg/dynamic-use-06.svg32
-rw-r--r--layout/reftests/svg/dynamic-use-07.svg22
-rw-r--r--layout/reftests/svg/dynamic-use-08.svg30
-rw-r--r--layout/reftests/svg/dynamic-use-nested-01-ref.svg20
-rw-r--r--layout/reftests/svg/dynamic-use-nested-01a.svg33
-rw-r--r--layout/reftests/svg/dynamic-use-nested-01b.svg34
-rw-r--r--layout/reftests/svg/dynamic-use-remove-width-ref.svg12
-rw-r--r--layout/reftests/svg/dynamic-use-remove-width.svg20
-rw-r--r--layout/reftests/svg/dynamic-viewBox-change-01.svg24
-rw-r--r--layout/reftests/svg/dynamic-viewBox-change-02.svg24
-rw-r--r--layout/reftests/svg/dynamic-viewBox-change-03.svg24
-rw-r--r--layout/reftests/svg/explosive-use.svg413
-rw-r--r--layout/reftests/svg/fallback-color-01a.svg13
-rw-r--r--layout/reftests/svg/fallback-color-01b.svg13
-rw-r--r--layout/reftests/svg/fallback-color-02-ref.svg12
-rw-r--r--layout/reftests/svg/fallback-color-02.svg13
-rw-r--r--layout/reftests/svg/fallback-color-03.svg20
-rw-r--r--layout/reftests/svg/fallback-color-04.svg38
-rw-r--r--layout/reftests/svg/fallback-color-05-ref.svg12
-rw-r--r--layout/reftests/svg/fallback-color-05a.svg12
-rw-r--r--layout/reftests/svg/fallback-color-05b.svg12
-rw-r--r--layout/reftests/svg/fallback-color-06.svg13
-rw-r--r--layout/reftests/svg/filter-and-clip-ref.svg3
-rw-r--r--layout/reftests/svg/filter-and-clip.svg12
-rw-r--r--layout/reftests/svg/filter-basic-01.svg12
-rw-r--r--layout/reftests/svg/filter-basic-02.svg16
-rw-r--r--layout/reftests/svg/filter-basic-03.svg16
-rw-r--r--layout/reftests/svg/filter-bounds-01.svg24
-rw-r--r--layout/reftests/svg/filter-bounds-02.svg25
-rw-r--r--layout/reftests/svg/filter-extref-differentOrigin-01.svg20
-rw-r--r--layout/reftests/svg/filter-foreignObject-01.svg16
-rw-r--r--layout/reftests/svg/filter-in-mask-01.svg16
-rw-r--r--layout/reftests/svg/filter-in-mask-ref.html21
-rw-r--r--layout/reftests/svg/filter-in-mask.html21
-rw-r--r--layout/reftests/svg/filter-invalidation-01.svg25
-rw-r--r--layout/reftests/svg/filter-on-continuation-box-01.html23
-rw-r--r--layout/reftests/svg/filter-on-continuation-box-ref.html15
-rw-r--r--layout/reftests/svg/filter-result-01-ref.svg18
-rw-r--r--layout/reftests/svg/filter-result-01.svg23
-rw-r--r--layout/reftests/svg/filter-scaled-01.svg18
-rw-r--r--layout/reftests/svg/filter-scaled-02-ref.html15
-rw-r--r--layout/reftests/svg/filter-scaled-02.html25
-rw-r--r--layout/reftests/svg/filter-translated-01-ref.svg9
-rw-r--r--layout/reftests/svg/filter-translated-01.svg12
-rw-r--r--layout/reftests/svg/filter-use-element-01.svg11
-rw-r--r--layout/reftests/svg/filtered-image-in-pattern-01.svg14
-rw-r--r--layout/reftests/svg/filters-and-group-opacity-01-ref.svg4
-rw-r--r--layout/reftests/svg/filters-and-group-opacity-01.svg17
-rw-r--r--layout/reftests/svg/filters/css-filter-chains/long-chain-ref.html31
-rw-r--r--layout/reftests/svg/filters/css-filter-chains/long-chain.html41
-rw-r--r--layout/reftests/svg/filters/css-filter-chains/moz-element-ref.html28
-rw-r--r--layout/reftests/svg/filters/css-filter-chains/moz-element.html29
-rw-r--r--layout/reftests/svg/filters/css-filter-chains/reftest.list7
-rw-r--r--layout/reftests/svg/filters/css-filter-chains/same-filter-ref.html30
-rw-r--r--layout/reftests/svg/filters/css-filter-chains/same-filter.html28
-rw-r--r--layout/reftests/svg/filters/css-filters/blur-calc-negative-ref.html27
-rw-r--r--layout/reftests/svg/filters/css-filters/blur-calc-negative.html28
-rw-r--r--layout/reftests/svg/filters/css-filters/blur-calc-ref.html23
-rw-r--r--layout/reftests/svg/filters/css-filters/blur-calc.html28
-rw-r--r--layout/reftests/svg/filters/css-filters/blur-cap-large-radius-on-software-ref.html22
-rw-r--r--layout/reftests/svg/filters/css-filters/blur-cap-large-radius-on-software.html26
-rw-r--r--layout/reftests/svg/filters/css-filters/blur-clip-rect.html33
-rw-r--r--layout/reftests/svg/filters/css-filters/blur-em-radius-ref.html28
-rw-r--r--layout/reftests/svg/filters/css-filters/blur-em-radius.html29
-rw-r--r--layout/reftests/svg/filters/css-filters/blur-invalid-radius-ref.html22
-rw-r--r--layout/reftests/svg/filters/css-filters/blur-invalid-radius.html28
-rw-r--r--layout/reftests/svg/filters/css-filters/blur-ref.html28
-rw-r--r--layout/reftests/svg/filters/css-filters/blur-ref.svg29
-rw-r--r--layout/reftests/svg/filters/css-filters/blur-rem-radius-ref.html31
-rw-r--r--layout/reftests/svg/filters/css-filters/blur-rem-radius.html32
-rw-r--r--layout/reftests/svg/filters/css-filters/blur-zero-radius-ref.html22
-rw-r--r--layout/reftests/svg/filters/css-filters/blur-zero-radius.html27
-rw-r--r--layout/reftests/svg/filters/css-filters/blur-zoomed-page-ref.html30
-rw-r--r--layout/reftests/svg/filters/css-filters/blur-zoomed-page.html33
-rw-r--r--layout/reftests/svg/filters/css-filters/blur.html28
-rw-r--r--layout/reftests/svg/filters/css-filters/blur.svg32
-rw-r--r--layout/reftests/svg/filters/css-filters/brightness-darken-ref.html22
-rw-r--r--layout/reftests/svg/filters/css-filters/brightness-darken.html28
-rw-r--r--layout/reftests/svg/filters/css-filters/brightness-extreme-ref.html22
-rw-r--r--layout/reftests/svg/filters/css-filters/brightness-extreme.html28
-rw-r--r--layout/reftests/svg/filters/css-filters/brightness-one-ref.html22
-rw-r--r--layout/reftests/svg/filters/css-filters/brightness-one.html28
-rw-r--r--layout/reftests/svg/filters/css-filters/brightness-percent-ref.html22
-rw-r--r--layout/reftests/svg/filters/css-filters/brightness-percent.html28
-rw-r--r--layout/reftests/svg/filters/css-filters/brightness-ref.html22
-rw-r--r--layout/reftests/svg/filters/css-filters/brightness-zero-ref.html22
-rw-r--r--layout/reftests/svg/filters/css-filters/brightness-zero.html28
-rw-r--r--layout/reftests/svg/filters/css-filters/brightness.html28
-rw-r--r--layout/reftests/svg/filters/css-filters/containing-block-1-ref.html5
-rw-r--r--layout/reftests/svg/filters/css-filters/containing-block-1.html6
-rw-r--r--layout/reftests/svg/filters/css-filters/contrast-extreme-ref.html22
-rw-r--r--layout/reftests/svg/filters/css-filters/contrast-extreme.html29
-rw-r--r--layout/reftests/svg/filters/css-filters/contrast-one-ref.html22
-rw-r--r--layout/reftests/svg/filters/css-filters/contrast-one.html28
-rw-r--r--layout/reftests/svg/filters/css-filters/contrast-percent-ref.html22
-rw-r--r--layout/reftests/svg/filters/css-filters/contrast-percent.html28
-rw-r--r--layout/reftests/svg/filters/css-filters/contrast-reduce-ref.html22
-rw-r--r--layout/reftests/svg/filters/css-filters/contrast-reduce.html29
-rw-r--r--layout/reftests/svg/filters/css-filters/contrast-ref.html22
-rw-r--r--layout/reftests/svg/filters/css-filters/contrast-zero-ref.html23
-rw-r--r--layout/reftests/svg/filters/css-filters/contrast-zero.html28
-rw-r--r--layout/reftests/svg/filters/css-filters/contrast.html28
-rw-r--r--layout/reftests/svg/filters/css-filters/drop-shadow-default-color-ref.html28
-rw-r--r--layout/reftests/svg/filters/css-filters/drop-shadow-default-color.html31
-rw-r--r--layout/reftests/svg/filters/css-filters/drop-shadow-negative-offset-ref.html31
-rw-r--r--layout/reftests/svg/filters/css-filters/drop-shadow-negative-offset.html32
-rw-r--r--layout/reftests/svg/filters/css-filters/drop-shadow-ref.html28
-rw-r--r--layout/reftests/svg/filters/css-filters/drop-shadow.html28
-rw-r--r--layout/reftests/svg/filters/css-filters/filter-on-huge-bbox.html26
-rw-r--r--layout/reftests/svg/filters/css-filters/filter-on-outer-svg.html14
-rw-r--r--layout/reftests/svg/filters/css-filters/grayscale-one-ref.html22
-rw-r--r--layout/reftests/svg/filters/css-filters/grayscale-one.html28
-rw-r--r--layout/reftests/svg/filters/css-filters/grayscale-over-one-ref.html22
-rw-r--r--layout/reftests/svg/filters/css-filters/grayscale-over-one.html28
-rw-r--r--layout/reftests/svg/filters/css-filters/grayscale-percent-ref.html22
-rw-r--r--layout/reftests/svg/filters/css-filters/grayscale-percent.html28
-rw-r--r--layout/reftests/svg/filters/css-filters/grayscale-ref.html22
-rw-r--r--layout/reftests/svg/filters/css-filters/grayscale-zero-ref.html22
-rw-r--r--layout/reftests/svg/filters/css-filters/grayscale-zero.html28
-rw-r--r--layout/reftests/svg/filters/css-filters/grayscale.html28
-rw-r--r--layout/reftests/svg/filters/css-filters/hue-rotate-360-ref.html22
-rw-r--r--layout/reftests/svg/filters/css-filters/hue-rotate-360.html28
-rw-r--r--layout/reftests/svg/filters/css-filters/hue-rotate-grad-ref.html32
-rw-r--r--layout/reftests/svg/filters/css-filters/hue-rotate-grad.html29
-rw-r--r--layout/reftests/svg/filters/css-filters/hue-rotate-multichannel-ref.html37
-rw-r--r--layout/reftests/svg/filters/css-filters/hue-rotate-multichannel.html38
-rw-r--r--layout/reftests/svg/filters/css-filters/hue-rotate-negative-ref.html32
-rw-r--r--layout/reftests/svg/filters/css-filters/hue-rotate-negative.html28
-rw-r--r--layout/reftests/svg/filters/css-filters/hue-rotate-over-360-ref.html32
-rw-r--r--layout/reftests/svg/filters/css-filters/hue-rotate-over-360.html28
-rw-r--r--layout/reftests/svg/filters/css-filters/hue-rotate-rad-ref.html32
-rw-r--r--layout/reftests/svg/filters/css-filters/hue-rotate-rad.html28
-rw-r--r--layout/reftests/svg/filters/css-filters/hue-rotate-ref.html32
-rw-r--r--layout/reftests/svg/filters/css-filters/hue-rotate-turn-ref.html32
-rw-r--r--layout/reftests/svg/filters/css-filters/hue-rotate-turn.html28
-rw-r--r--layout/reftests/svg/filters/css-filters/hue-rotate-zero-ref.html22
-rw-r--r--layout/reftests/svg/filters/css-filters/hue-rotate-zero.html28
-rw-r--r--layout/reftests/svg/filters/css-filters/hue-rotate.html28
-rw-r--r--layout/reftests/svg/filters/css-filters/invert-half-ref.html22
-rw-r--r--layout/reftests/svg/filters/css-filters/invert-half.html28
-rw-r--r--layout/reftests/svg/filters/css-filters/invert-one-ref.html22
-rw-r--r--layout/reftests/svg/filters/css-filters/invert-one.html28
-rw-r--r--layout/reftests/svg/filters/css-filters/invert-over-one-ref.html22
-rw-r--r--layout/reftests/svg/filters/css-filters/invert-over-one.html28
-rw-r--r--layout/reftests/svg/filters/css-filters/invert-percent-ref.html22
-rw-r--r--layout/reftests/svg/filters/css-filters/invert-percent.html28
-rw-r--r--layout/reftests/svg/filters/css-filters/invert-ref.html22
-rw-r--r--layout/reftests/svg/filters/css-filters/invert-zero-ref.html22
-rw-r--r--layout/reftests/svg/filters/css-filters/invert-zero.html28
-rw-r--r--layout/reftests/svg/filters/css-filters/invert.html28
-rw-r--r--layout/reftests/svg/filters/css-filters/opacity-one-ref.html22
-rw-r--r--layout/reftests/svg/filters/css-filters/opacity-one.html36
-rw-r--r--layout/reftests/svg/filters/css-filters/opacity-over-one-ref.html22
-rw-r--r--layout/reftests/svg/filters/css-filters/opacity-over-one-translucent-source-ref.html21
-rw-r--r--layout/reftests/svg/filters/css-filters/opacity-over-one-translucent-source.html28
-rw-r--r--layout/reftests/svg/filters/css-filters/opacity-over-one.html36
-rw-r--r--layout/reftests/svg/filters/css-filters/opacity-percent-ref.html22
-rw-r--r--layout/reftests/svg/filters/css-filters/opacity-percent.html28
-rw-r--r--layout/reftests/svg/filters/css-filters/opacity-ref.html22
-rw-r--r--layout/reftests/svg/filters/css-filters/opacity-zero-ref.html22
-rw-r--r--layout/reftests/svg/filters/css-filters/opacity-zero.html36
-rw-r--r--layout/reftests/svg/filters/css-filters/opacity.html28
-rw-r--r--layout/reftests/svg/filters/css-filters/pass.svg8
-rw-r--r--layout/reftests/svg/filters/css-filters/reftest.list71
-rw-r--r--layout/reftests/svg/filters/css-filters/saturate-desaturate-ref.html22
-rw-r--r--layout/reftests/svg/filters/css-filters/saturate-desaturate.html28
-rw-r--r--layout/reftests/svg/filters/css-filters/saturate-extreme-ref.html22
-rw-r--r--layout/reftests/svg/filters/css-filters/saturate-extreme.html29
-rw-r--r--layout/reftests/svg/filters/css-filters/saturate-one-ref.html22
-rw-r--r--layout/reftests/svg/filters/css-filters/saturate-one.html28
-rw-r--r--layout/reftests/svg/filters/css-filters/saturate-percent-ref.html22
-rw-r--r--layout/reftests/svg/filters/css-filters/saturate-percent.html28
-rw-r--r--layout/reftests/svg/filters/css-filters/saturate-ref.html22
-rw-r--r--layout/reftests/svg/filters/css-filters/saturate-zero-ref.html22
-rw-r--r--layout/reftests/svg/filters/css-filters/saturate-zero.html28
-rw-r--r--layout/reftests/svg/filters/css-filters/saturate.html28
-rw-r--r--layout/reftests/svg/filters/css-filters/scale-filtered-content-01-ref.html33
-rw-r--r--layout/reftests/svg/filters/css-filters/scale-filtered-content-01.html33
-rw-r--r--layout/reftests/svg/filters/css-filters/sepia-one-ref.html22
-rw-r--r--layout/reftests/svg/filters/css-filters/sepia-one.html28
-rw-r--r--layout/reftests/svg/filters/css-filters/sepia-over-one-ref.html22
-rw-r--r--layout/reftests/svg/filters/css-filters/sepia-over-one.html28
-rw-r--r--layout/reftests/svg/filters/css-filters/sepia-percent-ref.html22
-rw-r--r--layout/reftests/svg/filters/css-filters/sepia-percent.html28
-rw-r--r--layout/reftests/svg/filters/css-filters/sepia-ref.html22
-rw-r--r--layout/reftests/svg/filters/css-filters/sepia-zero-ref.html22
-rw-r--r--layout/reftests/svg/filters/css-filters/sepia-zero.html28
-rw-r--r--layout/reftests/svg/filters/css-filters/sepia.html28
-rw-r--r--layout/reftests/svg/filters/css-svg-filter-chains/clip-input-css-filter-ref.html32
-rw-r--r--layout/reftests/svg/filters/css-svg-filter-chains/clip-input-css-filter.html34
-rw-r--r--layout/reftests/svg/filters/css-svg-filter-chains/css-filter-first-ref.html31
-rw-r--r--layout/reftests/svg/filters/css-svg-filter-chains/css-filter-first.html33
-rw-r--r--layout/reftests/svg/filters/css-svg-filter-chains/css-filter-last-ref.html31
-rw-r--r--layout/reftests/svg/filters/css-svg-filter-chains/css-filter-last.html34
-rw-r--r--layout/reftests/svg/filters/css-svg-filter-chains/css-filter-middle-ref.html38
-rw-r--r--layout/reftests/svg/filters/css-svg-filter-chains/css-filter-middle.html42
-rw-r--r--layout/reftests/svg/filters/css-svg-filter-chains/reftest.list8
-rw-r--r--layout/reftests/svg/filters/dynamic-filter-invalidation-01.svg36
-rw-r--r--layout/reftests/svg/filters/dynamic-filter-invalidation-02.svg22
-rw-r--r--layout/reftests/svg/filters/dynamic-filter-invalidation-03.svg30
-rw-r--r--layout/reftests/svg/filters/dynamic-filter-invalidation-04.svg32
-rw-r--r--layout/reftests/svg/filters/dynamic-filtered-foreignObject-01.svg31
-rw-r--r--layout/reftests/svg/filters/feBlend-1-ref.svg20
-rw-r--r--layout/reftests/svg/filters/feBlend-1.svg104
-rw-r--r--layout/reftests/svg/filters/feBlend-2-ref.svg6
-rw-r--r--layout/reftests/svg/filters/feBlend-2.svg17
-rw-r--r--layout/reftests/svg/filters/feColorMatrix-1-ref.svg5
-rw-r--r--layout/reftests/svg/filters/feColorMatrix-1.svg10
-rw-r--r--layout/reftests/svg/filters/feColorMatrix-2-ref.svg5
-rw-r--r--layout/reftests/svg/filters/feColorMatrix-2.svg9
-rw-r--r--layout/reftests/svg/filters/feColorMatrix-saturate-01.svg16
-rw-r--r--layout/reftests/svg/filters/feComponentTransfer-03.svg22
-rw-r--r--layout/reftests/svg/filters/feComponentTransfer-04.svg19
-rw-r--r--layout/reftests/svg/filters/feComponentTransfer-1-ref.svg5
-rw-r--r--layout/reftests/svg/filters/feComponentTransfer-1.svg15
-rw-r--r--layout/reftests/svg/filters/feComponentTransfer-2-ref.svg5
-rw-r--r--layout/reftests/svg/filters/feComponentTransfer-2.svg14
-rw-r--r--layout/reftests/svg/filters/feComposite-1-ref.svg22
-rw-r--r--layout/reftests/svg/filters/feComposite-1.svg82
-rw-r--r--layout/reftests/svg/filters/feComposite-2-ref.svg9
-rw-r--r--layout/reftests/svg/filters/feComposite-2.svg27
-rw-r--r--layout/reftests/svg/filters/feComposite-arguments-01.svg12
-rw-r--r--layout/reftests/svg/filters/feComposite-operator-lighter-ref.html19
-rw-r--r--layout/reftests/svg/filters/feComposite-operator-lighter.svg11
-rw-r--r--layout/reftests/svg/filters/feComposite-paint-01-ref.svg9
-rw-r--r--layout/reftests/svg/filters/feComposite-paint-01.svg35
-rw-r--r--layout/reftests/svg/filters/feConvolveMatrix-1-ref.svg17
-rw-r--r--layout/reftests/svg/filters/feConvolveMatrix-1.svg75
-rw-r--r--layout/reftests/svg/filters/feConvolveMatrix-2-ref.svg6
-rw-r--r--layout/reftests/svg/filters/feConvolveMatrix-2.svg11
-rw-r--r--layout/reftests/svg/filters/feConvolveMatrix-bias-01-ref.svg9
-rw-r--r--layout/reftests/svg/filters/feConvolveMatrix-bias-01.svg14
-rw-r--r--layout/reftests/svg/filters/feConvolveMatrix-order-01-ref.svg12
-rw-r--r--layout/reftests/svg/filters/feConvolveMatrix-order-01.svg18
-rw-r--r--layout/reftests/svg/filters/feDiffuseLighting-1-ref.svg16
-rw-r--r--layout/reftests/svg/filters/feDiffuseLighting-1.svg17
-rw-r--r--layout/reftests/svg/filters/feDisplacementMap-1-ref.svg5
-rw-r--r--layout/reftests/svg/filters/feDisplacementMap-1.svg13
-rw-r--r--layout/reftests/svg/filters/feDisplacementMap-2-ref.svg7
-rw-r--r--layout/reftests/svg/filters/feDisplacementMap-2.svg12
-rw-r--r--layout/reftests/svg/filters/feDisplacementMap-alpha-01.svg22
-rw-r--r--layout/reftests/svg/filters/feDisplacementMap-colour-01-ref.svg11
-rw-r--r--layout/reftests/svg/filters/feDisplacementMap-colour-01.svg19
-rw-r--r--layout/reftests/svg/filters/feDisplacementMap-scale-01.svg15
-rw-r--r--layout/reftests/svg/filters/feDropShadow-01-ref.svg68
-rw-r--r--layout/reftests/svg/filters/feDropShadow-01.svg43
-rw-r--r--layout/reftests/svg/filters/feFlood-1-ref.svg5
-rw-r--r--layout/reftests/svg/filters/feFlood-1.svg11
-rw-r--r--layout/reftests/svg/filters/feFlood-2-ref.svg5
-rw-r--r--layout/reftests/svg/filters/feFlood-2.svg10
-rw-r--r--layout/reftests/svg/filters/feFlood-color-01.svg11
-rw-r--r--layout/reftests/svg/filters/feGaussianBlur-1-ref.svg7
-rw-r--r--layout/reftests/svg/filters/feGaussianBlur-1.svg22
-rw-r--r--layout/reftests/svg/filters/feGaussianBlur-2-ref.svg7
-rw-r--r--layout/reftests/svg/filters/feGaussianBlur-2.svg40
-rw-r--r--layout/reftests/svg/filters/feGaussianBlur-3-ref.svg5
-rw-r--r--layout/reftests/svg/filters/feGaussianBlur-3.svg12
-rw-r--r--layout/reftests/svg/filters/feGaussianBlur-4-ref.svg10
-rw-r--r--layout/reftests/svg/filters/feGaussianBlur-4.svg8
-rw-r--r--layout/reftests/svg/filters/feGaussianBlur-5-ref.svg5
-rw-r--r--layout/reftests/svg/filters/feGaussianBlur-5.svg8
-rw-r--r--layout/reftests/svg/filters/feGaussianBlur-6-ref.svg5
-rw-r--r--layout/reftests/svg/filters/feGaussianBlur-6.svg8
-rw-r--r--layout/reftests/svg/filters/feGaussianBlur-alpha-01-ref.svg20
-rw-r--r--layout/reftests/svg/filters/feGaussianBlur-alpha-01.svg20
-rw-r--r--layout/reftests/svg/filters/feGaussianBlur-cap-large-directional-radius-on-software-ref.html12
-rw-r--r--layout/reftests/svg/filters/feGaussianBlur-cap-large-directional-radius-on-software.html16
-rw-r--r--layout/reftests/svg/filters/feImage-1-ref.svg5
-rw-r--r--layout/reftests/svg/filters/feImage-1.svg11
-rw-r--r--layout/reftests/svg/filters/feImage-scale-to-primitive-subregion-ref.html21
-rw-r--r--layout/reftests/svg/filters/feImage-scale-to-primitive-subregion.html44
-rw-r--r--layout/reftests/svg/filters/feMerge-1-ref.svg6
-rw-r--r--layout/reftests/svg/filters/feMerge-1.svg16
-rw-r--r--layout/reftests/svg/filters/feMerge-2-ref.svg6
-rw-r--r--layout/reftests/svg/filters/feMerge-2.svg14
-rw-r--r--layout/reftests/svg/filters/feMorphology-1-ref.svg12
-rw-r--r--layout/reftests/svg/filters/feMorphology-1.svg38
-rw-r--r--layout/reftests/svg/filters/feMorphology-2-ref.svg12
-rw-r--r--layout/reftests/svg/filters/feMorphology-2.svg32
-rw-r--r--layout/reftests/svg/filters/feMorphology-radius-negative-01.svg23
-rw-r--r--layout/reftests/svg/filters/feMorphology-radius-negative-02.svg23
-rw-r--r--layout/reftests/svg/filters/feMorphology-radius-zero-01.svg23
-rw-r--r--layout/reftests/svg/filters/feMorphology-radius-zero-02.svg23
-rw-r--r--layout/reftests/svg/filters/feOffset-1-ref.svg5
-rw-r--r--layout/reftests/svg/filters/feOffset-1.svg11
-rw-r--r--layout/reftests/svg/filters/feOffset-2-ref.svg5
-rw-r--r--layout/reftests/svg/filters/feOffset-2.svg10
-rw-r--r--layout/reftests/svg/filters/fePointLight-zoomed-page-ref.svg15
-rw-r--r--layout/reftests/svg/filters/fePointLight-zoomed-page.svg29
-rw-r--r--layout/reftests/svg/filters/feSpecularLighting-1-ref.svg7
-rw-r--r--layout/reftests/svg/filters/feSpecularLighting-1.svg25
-rw-r--r--layout/reftests/svg/filters/feTile-1-ref.svg21
-rw-r--r--layout/reftests/svg/filters/feTile-1.svg14
-rw-r--r--layout/reftests/svg/filters/feTile-2-ref.svg21
-rw-r--r--layout/reftests/svg/filters/feTile-2.svg12
-rw-r--r--layout/reftests/svg/filters/feTile-large-01.svg19
-rw-r--r--layout/reftests/svg/filters/feTile-large-02-ref.svg26
-rw-r--r--layout/reftests/svg/filters/feTile-large-02.svg19
-rw-r--r--layout/reftests/svg/filters/feTile-outside-01-ref.svg20
-rw-r--r--layout/reftests/svg/filters/feTile-outside-01.svg19
-rw-r--r--layout/reftests/svg/filters/feTurbulence-offset-ref.svg17
-rw-r--r--layout/reftests/svg/filters/feTurbulence-offset.svg20
-rw-r--r--layout/reftests/svg/filters/feTurbulence-zero-baseFreq-01-ref.svg13
-rw-r--r--layout/reftests/svg/filters/feTurbulence-zero-baseFreq-01.svg23
-rw-r--r--layout/reftests/svg/filters/feTurbulence-zero-baseFreq-02.svg9
-rw-r--r--layout/reftests/svg/filters/filter-clipped-rect-01.svg25
-rw-r--r--layout/reftests/svg/filters/filter-giant.svg12
-rw-r--r--layout/reftests/svg/filters/filter-in-mask-01.svg12
-rw-r--r--layout/reftests/svg/filters/filter-in-mask-02.svg18
-rw-r--r--layout/reftests/svg/filters/filter-in-pattern-01.svg12
-rw-r--r--layout/reftests/svg/filters/filter-in-pattern-02-ref.svg13
-rw-r--r--layout/reftests/svg/filters/filter-in-pattern-02.svg13
-rw-r--r--layout/reftests/svg/filters/filter-inner-svg-01.svg16
-rw-r--r--layout/reftests/svg/filters/filter-inner-svg-02.svg18
-rw-r--r--layout/reftests/svg/filters/filter-inner-svg-03.svg19
-rw-r--r--layout/reftests/svg/filters/filter-kernelUnitLength-01-ref.svg15
-rw-r--r--layout/reftests/svg/filters/filter-kernelUnitLength-01.svg15
-rw-r--r--layout/reftests/svg/filters/filter-lighting-region-ref.svg11
-rw-r--r--layout/reftests/svg/filters/filter-lighting-region.svg30
-rw-r--r--layout/reftests/svg/filters/filter-marked-line-01.svg19
-rw-r--r--layout/reftests/svg/filters/filter-marked-line-02.svg20
-rw-r--r--layout/reftests/svg/filters/filter-marked-line-03.svg20
-rw-r--r--layout/reftests/svg/filters/filter-marked-line-04.svg20
-rw-r--r--layout/reftests/svg/filters/filter-marked-line-05.svg21
-rw-r--r--layout/reftests/svg/filters/filter-marked-line-06.svg23
-rw-r--r--layout/reftests/svg/filters/filter-marked-line-07.svg25
-rw-r--r--layout/reftests/svg/filters/filter-marked-line-08.svg25
-rw-r--r--layout/reftests/svg/filters/filter-marked-line-09.svg27
-rw-r--r--layout/reftests/svg/filters/filter-nested-filtering-01.svg18
-rw-r--r--layout/reftests/svg/filters/filter-nested-filtering-02.svg18
-rw-r--r--layout/reftests/svg/filters/filter-patterned-rect-01.svg21
-rw-r--r--layout/reftests/svg/filters/filter-patterned-rect-02.svg23
-rw-r--r--layout/reftests/svg/filters/filter-region-01a.html20
-rw-r--r--layout/reftests/svg/filters/filter-region-01b.html22
-rw-r--r--layout/reftests/svg/filters/filter-transform-01.svg17
-rw-r--r--layout/reftests/svg/filters/mozilla-banner.gifbin0 -> 4500 bytes
-rw-r--r--layout/reftests/svg/filters/nested-filter-ref.html14
-rw-r--r--layout/reftests/svg/filters/nested-filter.html23
-rw-r--r--layout/reftests/svg/filters/outside-sourcegraphic-1.svg10
-rw-r--r--layout/reftests/svg/filters/outside-sourcegraphic-2.svg13
-rw-r--r--layout/reftests/svg/filters/outside-sourcegraphic-3.svg15
-rw-r--r--layout/reftests/svg/filters/outside-sourcegraphic-ref.svg7
-rw-r--r--layout/reftests/svg/filters/pass.svg8
-rw-r--r--layout/reftests/svg/filters/reftest.list142
-rw-r--r--layout/reftests/svg/filters/svg-filter-chains/clip-input-ref.svg26
-rw-r--r--layout/reftests/svg/filters/svg-filter-chains/clip-input.svg52
-rw-r--r--layout/reftests/svg/filters/svg-filter-chains/clip-original-SourceGraphic-ref.svg26
-rw-r--r--layout/reftests/svg/filters/svg-filter-chains/clip-original-SourceGraphic.svg50
-rw-r--r--layout/reftests/svg/filters/svg-filter-chains/clip-output-ref.svg30
-rw-r--r--layout/reftests/svg/filters/svg-filter-chains/clip-output.svg52
-rw-r--r--layout/reftests/svg/filters/svg-filter-chains/default-subregion-ref.svg29
-rw-r--r--layout/reftests/svg/filters/svg-filter-chains/default-subregion.svg48
-rw-r--r--layout/reftests/svg/filters/svg-filter-chains/different-FillPaint-filter-regions-ref.svg30
-rw-r--r--layout/reftests/svg/filters/svg-filter-chains/different-FillPaint-filter-regions.svg43
-rw-r--r--layout/reftests/svg/filters/svg-filter-chains/different-StrokePaint-filter-regions-ref.svg30
-rw-r--r--layout/reftests/svg/filters/svg-filter-chains/different-StrokePaint-filter-regions.svg43
-rw-r--r--layout/reftests/svg/filters/svg-filter-chains/dont-clip-previous-primitives-ref.svg30
-rw-r--r--layout/reftests/svg/filters/svg-filter-chains/dont-clip-previous-primitives.svg51
-rw-r--r--layout/reftests/svg/filters/svg-filter-chains/intersecting-filter-regions-ref.svg29
-rw-r--r--layout/reftests/svg/filters/svg-filter-chains/intersecting-filter-regions.svg45
-rw-r--r--layout/reftests/svg/filters/svg-filter-chains/long-chain.svg28
-rw-r--r--layout/reftests/svg/filters/svg-filter-chains/multiple-primitives-per-filter.svg24
-rw-r--r--layout/reftests/svg/filters/svg-filter-chains/reftest.list16
-rw-r--r--layout/reftests/svg/filters/svg-filter-chains/second-filter-uses-SourceAlpha-ref.svg29
-rw-r--r--layout/reftests/svg/filters/svg-filter-chains/second-filter-uses-SourceAlpha.svg49
-rw-r--r--layout/reftests/svg/filters/svg-filter-chains/second-filter-uses-SourceGraphic.svg17
-rw-r--r--layout/reftests/svg/filters/svg-filter-chains/simple-chain-ref.svg14
-rw-r--r--layout/reftests/svg/filters/svg-filter-chains/simple-chain.svg15
-rw-r--r--layout/reftests/svg/foreignObject-01.svg17
-rw-r--r--layout/reftests/svg/foreignObject-02-ref.svg20
-rw-r--r--layout/reftests/svg/foreignObject-02.svg31
-rw-r--r--layout/reftests/svg/foreignObject-ancestor-style-change-01-ref.svg27
-rw-r--r--layout/reftests/svg/foreignObject-ancestor-style-change-01.svg45
-rw-r--r--layout/reftests/svg/foreignObject-change-transform-01.svg32
-rw-r--r--layout/reftests/svg/foreignObject-display-01.svg30
-rw-r--r--layout/reftests/svg/foreignObject-dynamic-abspos-01-ref.html10
-rw-r--r--layout/reftests/svg/foreignObject-dynamic-abspos-01.html18
-rw-r--r--layout/reftests/svg/foreignObject-dynamic-fixedpos-01.html18
-rw-r--r--layout/reftests/svg/foreignObject-dynamic-line-height-01-ref.html8
-rw-r--r--layout/reftests/svg/foreignObject-dynamic-line-height-01.html16
-rw-r--r--layout/reftests/svg/foreignObject-fixedpos-01.html10
-rw-r--r--layout/reftests/svg/foreignObject-fixedpos-02.html9
-rw-r--r--layout/reftests/svg/foreignObject-fixedpos-ref.html4
-rw-r--r--layout/reftests/svg/foreignObject-form-no-theme.svg14
-rw-r--r--layout/reftests/svg/foreignObject-form-theme-ref.html22
-rw-r--r--layout/reftests/svg/foreignObject-form-theme.svg14
-rw-r--r--layout/reftests/svg/foreignObject-img-form-theme-ref.html16
-rw-r--r--layout/reftests/svg/foreignObject-img-form-theme.html16
-rw-r--r--layout/reftests/svg/foreignObject-img-helper.svg5
-rw-r--r--layout/reftests/svg/foreignObject-img-ref.html5
-rw-r--r--layout/reftests/svg/foreignObject-img.html29
-rw-r--r--layout/reftests/svg/foreignObject-move-repaint-01.svg41
-rw-r--r--layout/reftests/svg/foreignObject-overflow-01.svg24
-rw-r--r--layout/reftests/svg/foreignObject-start-hidden-01.svg18
-rw-r--r--layout/reftests/svg/foreignObject-start-hidden-02.svg18
-rw-r--r--layout/reftests/svg/foreignObject-style-change-01.svg30
-rw-r--r--layout/reftests/svg/foreignObject-vertical-01-ref.svg5
-rw-r--r--layout/reftests/svg/foreignObject-vertical-01.svg9
-rw-r--r--layout/reftests/svg/fragid-shadow-1.html22
-rw-r--r--layout/reftests/svg/fragid-shadow-10.html18
-rw-r--r--layout/reftests/svg/fragid-shadow-2.html17
-rw-r--r--layout/reftests/svg/fragid-shadow-3.html14
-rw-r--r--layout/reftests/svg/fragid-shadow-4.html13
-rw-r--r--layout/reftests/svg/fragid-shadow-5.html13
-rw-r--r--layout/reftests/svg/fragid-shadow-6.html23
-rw-r--r--layout/reftests/svg/fragid-shadow-7.html28
-rw-r--r--layout/reftests/svg/fragid-shadow-8.html15
-rw-r--r--layout/reftests/svg/fragid-shadow-9.html24
-rw-r--r--layout/reftests/svg/fragid-shadow-ref.html4
-rw-r--r--layout/reftests/svg/fragid-shadow-resource.svg11
-rw-r--r--layout/reftests/svg/fragmentIdentifier-01.xhtml31
-rw-r--r--layout/reftests/svg/fragmentIdentifier-rect-01.svg19
-rw-r--r--layout/reftests/svg/g-transform-01.svg27
-rw-r--r--layout/reftests/svg/geometry-properties-in-css-ref.html25
-rw-r--r--layout/reftests/svg/geometry-properties-in-css.html92
-rw-r--r--layout/reftests/svg/getElementById-a-element-01.svg27
-rw-r--r--layout/reftests/svg/gradient-href-01.html19
-rw-r--r--layout/reftests/svg/gradient-live-01-ref.svg16
-rw-r--r--layout/reftests/svg/gradient-live-01a.svg30
-rw-r--r--layout/reftests/svg/gradient-live-01b.svg28
-rw-r--r--layout/reftests/svg/gradient-live-01c.svg29
-rw-r--r--layout/reftests/svg/gradient-live-01d.svg32
-rw-r--r--layout/reftests/svg/gradient-transform-01.svg28
-rw-r--r--layout/reftests/svg/href-attr-change-restyles-ref.svg29
-rw-r--r--layout/reftests/svg/href-attr-change-restyles.svg32
-rw-r--r--layout/reftests/svg/image/blueRect10x10-viewBox-animPAR.svg12
-rw-r--r--layout/reftests/svg/image/blueRect10x10-viewBox.svg7
-rw-r--r--layout/reftests/svg/image/blueRect10x10.pngbin0 -> 125 bytes
-rw-r--r--layout/reftests/svg/image/blueRect10x10.svg6
-rw-r--r--layout/reftests/svg/image/image-fill-01.svg13
-rw-r--r--layout/reftests/svg/image/image-fill-opacity-ref.html4
-rw-r--r--layout/reftests/svg/image/image-fill-opacity.html4
-rw-r--r--layout/reftests/svg/image/image-filter-01-ref.svg9
-rw-r--r--layout/reftests/svg/image/image-filter-01.svg21
-rw-r--r--layout/reftests/svg/image/image-load-01.svg20
-rw-r--r--layout/reftests/svg/image/image-opacity-01-ref.svg5
-rw-r--r--layout/reftests/svg/image/image-opacity-01.svg6
-rw-r--r--layout/reftests/svg/image/image-opacity-02-ref.svg6
-rw-r--r--layout/reftests/svg/image/image-opacity-02.svg7
-rw-r--r--layout/reftests/svg/image/image-preserveAspectRatio-01-raster.svg13
-rw-r--r--layout/reftests/svg/image/image-preserveAspectRatio-01-ref.svg9
-rw-r--r--layout/reftests/svg/image/image-preserveAspectRatio-01-svg.svg12
-rw-r--r--layout/reftests/svg/image/image-preserveAspectRatio-02-raster.svg13
-rw-r--r--layout/reftests/svg/image/image-preserveAspectRatio-02-ref.svg9
-rw-r--r--layout/reftests/svg/image/image-preserveAspectRatio-02-svg.svg12
-rw-r--r--layout/reftests/svg/image/image-preserveAspectRatio-03-ref.svg13
-rw-r--r--layout/reftests/svg/image/image-preserveAspectRatio-03.svg13
-rw-r--r--layout/reftests/svg/image/image-preserveAspectRatio-04-ref.svg14
-rw-r--r--layout/reftests/svg/image/image-preserveAspectRatio-04.svg13
-rw-r--r--layout/reftests/svg/image/image-preserveAspectRatio-05.svg41
-rw-r--r--layout/reftests/svg/image/image-rotate-01-ref.svg5
-rw-r--r--layout/reftests/svg/image/image-rotate-01.svg6
-rw-r--r--layout/reftests/svg/image/image-rotate-02-ref.svg5
-rw-r--r--layout/reftests/svg/image/image-rotate-02a.svg6
-rw-r--r--layout/reftests/svg/image/image-rotate-02b.svg7
-rw-r--r--layout/reftests/svg/image/image-scaling-01.svg26
-rw-r--r--layout/reftests/svg/image/image-scaling-02.svg26
-rw-r--r--layout/reftests/svg/image/image-scaling-03.svg19
-rw-r--r--layout/reftests/svg/image/image-svg-inline-01.html16
-rw-r--r--layout/reftests/svg/image/image-svg-inline-sprite-zoom-in-01-ref.html8
-rw-r--r--layout/reftests/svg/image/image-svg-inline-sprite-zoom-in-01a.html16
-rw-r--r--layout/reftests/svg/image/image-svg-inline-sprite-zoom-in-01b.html15
-rw-r--r--layout/reftests/svg/image/image-svg-inline-sprite-zoom-out-01-ref.html8
-rw-r--r--layout/reftests/svg/image/image-svg-inline-sprite-zoom-out-01a.html16
-rw-r--r--layout/reftests/svg/image/image-svg-inline-sprite-zoom-out-01b.html15
-rw-r--r--layout/reftests/svg/image/image-svg-inline-zoom-in-01a.html17
-rw-r--r--layout/reftests/svg/image/image-svg-inline-zoom-in-01b.html16
-rw-r--r--layout/reftests/svg/image/image-svg-inline-zoom-in-01c.html18
-rw-r--r--layout/reftests/svg/image/image-svg-inline-zoom-in-01d.html18
-rw-r--r--layout/reftests/svg/image/image-svg-inline-zoom-out-01a.html16
-rw-r--r--layout/reftests/svg/image/image-svg-inline-zoom-out-01b.html16
-rw-r--r--layout/reftests/svg/image/image-svg-inline-zoom-out-01c.html17
-rw-r--r--layout/reftests/svg/image/image-svg-inline-zoom-out-01d.html17
-rw-r--r--layout/reftests/svg/image/image-translate-01-ref.svg5
-rw-r--r--layout/reftests/svg/image/image-translate-01.svg6
-rw-r--r--layout/reftests/svg/image/image-with-following-content.svg12
-rw-r--r--layout/reftests/svg/image/image-with-mask-and-clipPath.svg13
-rw-r--r--layout/reftests/svg/image/image-x-01-ref.svg5
-rw-r--r--layout/reftests/svg/image/image-x-01.svg6
-rw-r--r--layout/reftests/svg/image/image-xy-01-ref.svg5
-rw-r--r--layout/reftests/svg/image/image-xy-01.svg7
-rw-r--r--layout/reftests/svg/image/image-y-01-ref.svg5
-rw-r--r--layout/reftests/svg/image/image-y-01.svg6
-rw-r--r--layout/reftests/svg/image/image-zoom-02-ref.svg4
-rw-r--r--layout/reftests/svg/image/image-zoom-02.svg7
-rw-r--r--layout/reftests/svg/image/imported-image-01.svg12
-rw-r--r--layout/reftests/svg/image/imported-image-02.svg17
-rw-r--r--layout/reftests/svg/image/imported-image-ref.svg6
-rw-r--r--layout/reftests/svg/image/lime-no-dimensions.svg7
-rw-r--r--layout/reftests/svg/image/lime100x100.pngbin0 -> 232 bytes
-rw-r--r--layout/reftests/svg/image/lime100x100.svg3
-rw-r--r--layout/reftests/svg/image/reftest.list45
-rw-r--r--layout/reftests/svg/image/sprite.pngbin0 -> 5082 bytes
-rw-r--r--layout/reftests/svg/image/sprite.svg5
-rw-r--r--layout/reftests/svg/image/util.js173
-rw-r--r--layout/reftests/svg/import-svg-01.html22
-rw-r--r--layout/reftests/svg/invalid-text-01.svg15
-rw-r--r--layout/reftests/svg/lang-attribute-01.svg16
-rw-r--r--layout/reftests/svg/lang-attribute-02.svg16
-rw-r--r--layout/reftests/svg/lang-attribute-03.svg16
-rw-r--r--layout/reftests/svg/linearGradient-basic-01.svg18
-rw-r--r--layout/reftests/svg/linearGradient-basic-02.svg20
-rw-r--r--layout/reftests/svg/linearGradient-basic-03-ref.svg18
-rw-r--r--layout/reftests/svg/linearGradient-basic-03.svg14
-rw-r--r--layout/reftests/svg/linked-filter-01.svg18
-rw-r--r--layout/reftests/svg/linked-pattern-01.svg19
-rw-r--r--layout/reftests/svg/load-only/filter-primitives-01.svg19
-rw-r--r--layout/reftests/svg/load-only/reftest.list3
-rw-r--r--layout/reftests/svg/marker-attribute-01.svg19
-rw-r--r--layout/reftests/svg/marker-css-transform-ref.html12
-rw-r--r--layout/reftests/svg/marker-css-transform.html17
-rw-r--r--layout/reftests/svg/marker-dynamic-opacity-ref.html12
-rw-r--r--layout/reftests/svg/marker-dynamic-opacity.html20
-rw-r--r--layout/reftests/svg/marker-effects-01-ref.svg44
-rw-r--r--layout/reftests/svg/marker-effects-01.svg36
-rw-r--r--layout/reftests/svg/marker-orientation-01-ref.svg68
-rw-r--r--layout/reftests/svg/marker-orientation-01.svg63
-rw-r--r--layout/reftests/svg/marker-orientation-02-ref.svg69
-rw-r--r--layout/reftests/svg/marker-orientation-02.svg64
-rw-r--r--layout/reftests/svg/marker-orientation-03.svg15
-rw-r--r--layout/reftests/svg/marker-orientation-04.svg39
-rw-r--r--layout/reftests/svg/marker-orientation-05.svg20
-rw-r--r--layout/reftests/svg/marker-viewBox-01-ref.svg15
-rw-r--r--layout/reftests/svg/marker-viewBox-01.svg19
-rw-r--r--layout/reftests/svg/markers-and-group-opacity-01-ref.svg4
-rw-r--r--layout/reftests/svg/markers-and-group-opacity-01.svg17
-rw-r--r--layout/reftests/svg/mask-and-clipPath-2.svg21
-rw-r--r--layout/reftests/svg/mask-and-clipPath-ref.html34
-rw-r--r--layout/reftests/svg/mask-and-clipPath.html36
-rw-r--r--layout/reftests/svg/mask-basic-01.svg13
-rw-r--r--layout/reftests/svg/mask-basic-02-ref.svg11
-rw-r--r--layout/reftests/svg/mask-basic-02.svg17
-rw-r--r--layout/reftests/svg/mask-basic-03.svg19
-rw-r--r--layout/reftests/svg/mask-basic-04.svg18
-rw-r--r--layout/reftests/svg/mask-basic-05.svg12
-rw-r--r--layout/reftests/svg/mask-containing-masked-content-01.svg19
-rw-r--r--layout/reftests/svg/mask-contains-inner-svg-01.svg13
-rw-r--r--layout/reftests/svg/mask-contains-inner-svg-02.svg15
-rw-r--r--layout/reftests/svg/mask-css-transform-ref.html9
-rw-r--r--layout/reftests/svg/mask-css-transform.html19
-rw-r--r--layout/reftests/svg/mask-empty-size.svg8
-rw-r--r--layout/reftests/svg/mask-extref-dataURI-01.svg38
-rw-r--r--layout/reftests/svg/mask-image-filter-transform-ref.html7
-rw-r--r--layout/reftests/svg/mask-image-filter-transform.html9
-rw-r--r--layout/reftests/svg/mask-img-ref.html31
-rw-r--r--layout/reftests/svg/mask-img.html32
-rw-r--r--layout/reftests/svg/mask-invalidation-ref.html5
-rw-r--r--layout/reftests/svg/mask-invalidation.html24
-rw-r--r--layout/reftests/svg/mask-on-outflowElement-01a.html47
-rw-r--r--layout/reftests/svg/mask-on-outflowElement-01b.html40
-rw-r--r--layout/reftests/svg/mask-on-outflowElement.svg6
-rw-r--r--layout/reftests/svg/mask-opacity-01-ref.svg3
-rw-r--r--layout/reftests/svg/mask-opacity-01.svg12
-rw-r--r--layout/reftests/svg/mask-opacity-02-ref.svg5
-rw-r--r--layout/reftests/svg/mask-opacity-02.svg20
-rw-r--r--layout/reftests/svg/mask-opacity-03.svg20
-rw-r--r--layout/reftests/svg/mask-opacity-04.svg20
-rw-r--r--layout/reftests/svg/mask-opacity-05.svg20
-rw-r--r--layout/reftests/svg/mask-opacity-invalidation-1-ref.html27
-rw-r--r--layout/reftests/svg/mask-opacity-invalidation-1.html41
-rw-r--r--layout/reftests/svg/mask-ref-loop-01.svg20
-rw-r--r--layout/reftests/svg/mask-resource-ref.html11
-rw-r--r--layout/reftests/svg/mask-resource.html11
-rw-r--r--layout/reftests/svg/mask-root-svg.svg9
-rw-r--r--layout/reftests/svg/mask-transformed-01-ref.svg8
-rw-r--r--layout/reftests/svg/mask-transformed-01.svg17
-rw-r--r--layout/reftests/svg/mask-transformed-02.svg19
-rw-r--r--layout/reftests/svg/mask-transformed-child-01-ref.svg8
-rw-r--r--layout/reftests/svg/mask-transformed-child-01.svg11
-rw-r--r--layout/reftests/svg/mask-type-01-ref.svg12
-rw-r--r--layout/reftests/svg/mask-type-01.svg15
-rw-r--r--layout/reftests/svg/mask-type-02.svg15
-rw-r--r--layout/reftests/svg/mask-type-03.svg23
-rw-r--r--layout/reftests/svg/mask-type-04.svg16
-rw-r--r--layout/reftests/svg/mask-use-element-01.svg12
-rw-r--r--layout/reftests/svg/moz-only/big.pngbin0 -> 82 bytes
-rw-r--r--layout/reftests/svg/moz-only/feImage-zoom-01-ref.svg13
-rw-r--r--layout/reftests/svg/moz-only/feImage-zoom-01a.svg16
-rw-r--r--layout/reftests/svg/moz-only/feImage-zoom-01b.svg16
-rw-r--r--layout/reftests/svg/moz-only/foreignObject-zoom-01.svg34
-rw-r--r--layout/reftests/svg/moz-only/pass-black.svg8
-rw-r--r--layout/reftests/svg/moz-only/pass.svg8
-rw-r--r--layout/reftests/svg/moz-only/reftest.list7
-rw-r--r--layout/reftests/svg/moz-only/replaced-element-zoom-01.html39
-rw-r--r--layout/reftests/svg/moz-only/small.pngbin0 -> 85 bytes
-rw-r--r--layout/reftests/svg/moz-only/zoom-invalidation-01.svg26
-rw-r--r--layout/reftests/svg/moz-only/zoomed-svg-with-viewBox-01-ref.svg13
-rw-r--r--layout/reftests/svg/moz-only/zoomed-svg-with-viewBox-01.svg14
-rw-r--r--layout/reftests/svg/nested-mask-mode.svg13
-rw-r--r--layout/reftests/svg/nested-viewBox-01.svg21
-rw-r--r--layout/reftests/svg/nesting-invalid-01-ref.svg12
-rw-r--r--layout/reftests/svg/nesting-invalid-01.svg20
-rw-r--r--layout/reftests/svg/non-scaling-stroke-01-ref.svg33
-rw-r--r--layout/reftests/svg/non-scaling-stroke-01.svg36
-rw-r--r--layout/reftests/svg/non-scaling-stroke-02-ref.svg33
-rw-r--r--layout/reftests/svg/non-scaling-stroke-02.svg36
-rw-r--r--layout/reftests/svg/non-scaling-stroke-03-ref.svg7
-rw-r--r--layout/reftests/svg/non-scaling-stroke-03.svg23
-rw-r--r--layout/reftests/svg/non-scaling-stroke-css-transform-ref.html3
-rw-r--r--layout/reftests/svg/non-scaling-stroke-css-transform.html8
-rw-r--r--layout/reftests/svg/objectBoundingBox-and-clipPath.svg25
-rw-r--r--layout/reftests/svg/objectBoundingBox-and-fePointLight-01-ref.svg23
-rw-r--r--layout/reftests/svg/objectBoundingBox-and-fePointLight-01.svg23
-rw-r--r--layout/reftests/svg/objectBoundingBox-and-fePointLight-02-ref.svg22
-rw-r--r--layout/reftests/svg/objectBoundingBox-and-fePointLight-02.svg22
-rw-r--r--layout/reftests/svg/objectBoundingBox-and-mask-02.svg17
-rw-r--r--layout/reftests/svg/objectBoundingBox-and-mask.svg25
-rw-r--r--layout/reftests/svg/objectBoundingBox-and-pattern-01-ref.svg12
-rw-r--r--layout/reftests/svg/objectBoundingBox-and-pattern-01a.svg18
-rw-r--r--layout/reftests/svg/objectBoundingBox-and-pattern-01b.svg19
-rw-r--r--layout/reftests/svg/objectBoundingBox-and-pattern-01c.svg19
-rw-r--r--layout/reftests/svg/objectBoundingBox-and-pattern-02.svg24
-rw-r--r--layout/reftests/svg/objectBoundingBox-and-pattern-03-ref.svg9
-rw-r--r--layout/reftests/svg/objectBoundingBox-and-pattern-03.svg17
-rw-r--r--layout/reftests/svg/opacity-and-gradient-01.svg35
-rw-r--r--layout/reftests/svg/opacity-and-gradient-02-ref.svg34
-rw-r--r--layout/reftests/svg/opacity-and-gradient-02.svg42
-rw-r--r--layout/reftests/svg/opacity-and-pattern-01.svg36
-rw-r--r--layout/reftests/svg/opacity-and-transform-01-ref.svg7
-rw-r--r--layout/reftests/svg/opacity-and-transform-01.svg22
-rw-r--r--layout/reftests/svg/outer-svg-border-and-padding-01-ref.svg9
-rw-r--r--layout/reftests/svg/outer-svg-border-and-padding-01.svg58
-rw-r--r--layout/reftests/svg/outline-ref.html93
-rw-r--r--layout/reftests/svg/outline.html57
-rw-r--r--layout/reftests/svg/overflow-on-outer-svg-01-ref.svg7
-rw-r--r--layout/reftests/svg/overflow-on-outer-svg-01.svg11
-rw-r--r--layout/reftests/svg/overflow-on-outer-svg-02-ref.xhtml10
-rw-r--r--layout/reftests/svg/overflow-on-outer-svg-02a.xhtml16
-rw-r--r--layout/reftests/svg/overflow-on-outer-svg-02b.xhtml16
-rw-r--r--layout/reftests/svg/overflow-on-outer-svg-02c.xhtml16
-rw-r--r--layout/reftests/svg/overflow-on-outer-svg-02d.xhtml28
-rw-r--r--layout/reftests/svg/overflow-on-outer-svg-03-ref.xhtml10
-rw-r--r--layout/reftests/svg/overflow-on-outer-svg-03a.xhtml16
-rw-r--r--layout/reftests/svg/overflow-on-outer-svg-03b.xhtml28
-rw-r--r--layout/reftests/svg/overflow-visible-image-ref.html10
-rw-r--r--layout/reftests/svg/overflow-visible-image.html10
-rw-r--r--layout/reftests/svg/paint-on-maskLayer-1-ref.html11
-rw-r--r--layout/reftests/svg/paint-on-maskLayer-1a.html34
-rw-r--r--layout/reftests/svg/paint-on-maskLayer-1b.html34
-rw-r--r--layout/reftests/svg/paint-on-maskLayer-1c.html27
-rw-r--r--layout/reftests/svg/paint-order-01-ref.svg32
-rw-r--r--layout/reftests/svg/paint-order-01.svg18
-rw-r--r--layout/reftests/svg/paint-order-02-ref.svg36
-rw-r--r--layout/reftests/svg/paint-order-02.svg25
-rw-r--r--layout/reftests/svg/paint-order-03-ref.svg32
-rw-r--r--layout/reftests/svg/paint-order-03.svg20
-rw-r--r--layout/reftests/svg/pass.svg8
-rw-r--r--layout/reftests/svg/path-01-ref.svg11
-rw-r--r--layout/reftests/svg/path-01.svg11
-rw-r--r--layout/reftests/svg/path-02.svg15
-rw-r--r--layout/reftests/svg/path-04.svg33
-rw-r--r--layout/reftests/svg/path-05.svg26
-rw-r--r--layout/reftests/svg/path-06-ref.svg13
-rw-r--r--layout/reftests/svg/path-06.svg13
-rw-r--r--layout/reftests/svg/path-07-ref.svg17
-rw-r--r--layout/reftests/svg/path-07.svg17
-rw-r--r--layout/reftests/svg/path-08.svg14
-rw-r--r--layout/reftests/svg/path-transform-box.svg16
-rw-r--r--layout/reftests/svg/pathLength-01.svg12
-rw-r--r--layout/reftests/svg/pathLength-02.svg13
-rw-r--r--layout/reftests/svg/pattern-basic-01.svg18
-rw-r--r--layout/reftests/svg/pattern-big-image-ref.html5
-rw-r--r--layout/reftests/svg/pattern-big-image.html10
-rw-r--r--layout/reftests/svg/pattern-css-transform-ref.html10
-rw-r--r--layout/reftests/svg/pattern-css-transform.html20
-rw-r--r--layout/reftests/svg/pattern-invalid-01-ref.svg8
-rw-r--r--layout/reftests/svg/pattern-invalid-01.svg14
-rw-r--r--layout/reftests/svg/pattern-live-01-ref.svg10
-rw-r--r--layout/reftests/svg/pattern-live-01a.svg24
-rw-r--r--layout/reftests/svg/pattern-live-01b.svg23
-rw-r--r--layout/reftests/svg/pattern-live-01c.svg27
-rw-r--r--layout/reftests/svg/pattern-scale-01-ref.svg13
-rw-r--r--layout/reftests/svg/pattern-scale-01a.svg13
-rw-r--r--layout/reftests/svg/pattern-scale-01b.svg15
-rw-r--r--layout/reftests/svg/pattern-scale-01c.svg13
-rw-r--r--layout/reftests/svg/pattern-transform-presence-01-ref.svg25
-rw-r--r--layout/reftests/svg/pattern-transform-presence-01.svg58
-rw-r--r--layout/reftests/svg/pattern-transformed-01-ref.svg21
-rw-r--r--layout/reftests/svg/pattern-transformed-01.svg28
-rw-r--r--layout/reftests/svg/pattern-transformed-02-ref.svg20
-rw-r--r--layout/reftests/svg/pattern-transformed-02.svg29
-rw-r--r--layout/reftests/svg/polygon-01-ref.svg12
-rw-r--r--layout/reftests/svg/polygon-01.svg13
-rw-r--r--layout/reftests/svg/polygon-marker-01.svg22
-rw-r--r--layout/reftests/svg/polygon-points-negative-01.svg20
-rw-r--r--layout/reftests/svg/polyline-points-invalid-01.svg50
-rw-r--r--layout/reftests/svg/pseudo-classes-01.svg43
-rw-r--r--layout/reftests/svg/pseudo-classes-02-ref.svg22
-rw-r--r--layout/reftests/svg/pseudo-classes-02.svg48
-rw-r--r--layout/reftests/svg/radialGradient-basic-01.svg18
-rw-r--r--layout/reftests/svg/radialGradient-basic-02.svg20
-rw-r--r--layout/reftests/svg/radialGradient-basic-03-ref.html37
-rw-r--r--layout/reftests/svg/radialGradient-basic-03.svg34
-rw-r--r--layout/reftests/svg/radialGradient-basic-04.svg24
-rw-r--r--layout/reftests/svg/radialGradient-fr-01.svg27
-rw-r--r--layout/reftests/svg/radialGradient-fr-02-ref.svg28
-rw-r--r--layout/reftests/svg/radialGradient-fr-02.svg27
-rw-r--r--layout/reftests/svg/rect-01.svg13
-rw-r--r--layout/reftests/svg/rect-02.svg16
-rw-r--r--layout/reftests/svg/rect-03.svg14
-rw-r--r--layout/reftests/svg/rect-04.svg18
-rw-r--r--layout/reftests/svg/rect-with-rx-and-ry-01.svg21
-rw-r--r--layout/reftests/svg/rect-with-rx-or-ry-01-ref.svg20
-rw-r--r--layout/reftests/svg/rect-with-rx-or-ry-01.svg23
-rw-r--r--layout/reftests/svg/reftest.list636
-rw-r--r--layout/reftests/svg/rootElement-null-01.svg29
-rw-r--r--layout/reftests/svg/script-empty-01.svg14
-rw-r--r--layout/reftests/svg/selector-01.svg19
-rw-r--r--layout/reftests/svg/sizing/ahem.css4
-rw-r--r--layout/reftests/svg/sizing/dynamic--inline-css-height.xhtml49
-rw-r--r--layout/reftests/svg/sizing/dynamic--inline-css-width.xhtml49
-rw-r--r--layout/reftests/svg/sizing/dynamic--inline-resize-window-height.xhtml52
-rw-r--r--layout/reftests/svg/sizing/dynamic--inline-resize-window-width.xhtml52
-rw-r--r--layout/reftests/svg/sizing/dynamic--object--auto-auto--pct-px.html43
-rw-r--r--layout/reftests/svg/sizing/dynamic--object-svg-unloaded-a.svg40
-rw-r--r--layout/reftests/svg/sizing/dynamic--object-svg-unloaded-b.xhtml37
-rw-r--r--layout/reftests/svg/sizing/dynamic--object-svg-unloaded.xhtml48
-rw-r--r--layout/reftests/svg/sizing/inline--display-block--01-ref.xhtml40
-rw-r--r--layout/reftests/svg/sizing/inline--display-block--01.xhtml47
-rw-r--r--layout/reftests/svg/sizing/inline--display-inline--01-ref.xhtml40
-rw-r--r--layout/reftests/svg/sizing/inline--display-inline--01.xhtml47
-rw-r--r--layout/reftests/svg/sizing/inline--display-inline-block--01-ref.xhtml40
-rw-r--r--layout/reftests/svg/sizing/inline--display-inline-block--01.xhtml47
-rw-r--r--layout/reftests/svg/sizing/inline--float-left--01-ref.xhtml39
-rw-r--r--layout/reftests/svg/sizing/inline--float-left--01.xhtml46
-rw-r--r--layout/reftests/svg/sizing/inline--float-right--01-ref.xhtml39
-rw-r--r--layout/reftests/svg/sizing/inline--float-right--01.xhtml46
-rw-r--r--layout/reftests/svg/sizing/inline--position-absolute--01-ref.xhtml39
-rw-r--r--layout/reftests/svg/sizing/inline--position-absolute--01.xhtml46
-rw-r--r--layout/reftests/svg/sizing/inline--position-absolute--02.xhtml50
-rw-r--r--layout/reftests/svg/sizing/inline--position-relative--01-ref.xhtml40
-rw-r--r--layout/reftests/svg/sizing/inline--position-relative--01.xhtml47
-rw-r--r--layout/reftests/svg/sizing/object--auto-auto--0-0.html42
-rw-r--r--layout/reftests/svg/sizing/object--auto-auto--0-0.svg13
-rw-r--r--layout/reftests/svg/sizing/object--auto-auto--0-pct--ref.html37
-rw-r--r--layout/reftests/svg/sizing/object--auto-auto--0-pct.html44
-rw-r--r--layout/reftests/svg/sizing/object--auto-auto--0-pct.svg13
-rw-r--r--layout/reftests/svg/sizing/object--auto-auto--0-px--ref.html37
-rw-r--r--layout/reftests/svg/sizing/object--auto-auto--0-px.html44
-rw-r--r--layout/reftests/svg/sizing/object--auto-auto--0-px.svg13
-rw-r--r--layout/reftests/svg/sizing/object--auto-auto--pct-0--ref.html37
-rw-r--r--layout/reftests/svg/sizing/object--auto-auto--pct-0.html44
-rw-r--r--layout/reftests/svg/sizing/object--auto-auto--pct-0.svg13
-rw-r--r--layout/reftests/svg/sizing/object--auto-auto--pct-pct--ref.html38
-rw-r--r--layout/reftests/svg/sizing/object--auto-auto--pct-pct.html42
-rw-r--r--layout/reftests/svg/sizing/object--auto-auto--pct-pct.svg13
-rw-r--r--layout/reftests/svg/sizing/object--auto-auto--pct-px--ref.html38
-rw-r--r--layout/reftests/svg/sizing/object--auto-auto--pct-px.html42
-rw-r--r--layout/reftests/svg/sizing/object--auto-auto--pct-px.svg13
-rw-r--r--layout/reftests/svg/sizing/object--auto-auto--px-0--ref.html37
-rw-r--r--layout/reftests/svg/sizing/object--auto-auto--px-0.html42
-rw-r--r--layout/reftests/svg/sizing/object--auto-auto--px-0.svg13
-rw-r--r--layout/reftests/svg/sizing/object--auto-auto--px-pct--ref.html38
-rw-r--r--layout/reftests/svg/sizing/object--auto-auto--px-pct.html42
-rw-r--r--layout/reftests/svg/sizing/object--auto-auto--px-pct.svg13
-rw-r--r--layout/reftests/svg/sizing/object--auto-auto--px-px--ref.html38
-rw-r--r--layout/reftests/svg/sizing/object--auto-auto--px-px.html42
-rw-r--r--layout/reftests/svg/sizing/object--auto-auto--px-px.svg13
-rw-r--r--layout/reftests/svg/sizing/object--pct-pct--0-0.html30
-rw-r--r--layout/reftests/svg/sizing/pass-empty.svg8
-rw-r--r--layout/reftests/svg/sizing/pass-pct-height-square.xhtml26
-rw-r--r--layout/reftests/svg/sizing/pass-pct-pct.xhtml30
-rw-r--r--layout/reftests/svg/sizing/pass-pct-px.xhtml30
-rw-r--r--layout/reftests/svg/sizing/pass-pct-width-square.xhtml22
-rw-r--r--layout/reftests/svg/sizing/pass-px-pct.xhtml30
-rw-r--r--layout/reftests/svg/sizing/pass-px-px.xhtml30
-rw-r--r--layout/reftests/svg/sizing/pass.svg8
-rw-r--r--layout/reftests/svg/sizing/reftest.list311
-rw-r--r--layout/reftests/svg/sizing/scrollbars-01-anti-ref.svg11
-rw-r--r--layout/reftests/svg/sizing/scrollbars-01.svg13
-rw-r--r--layout/reftests/svg/sizing/scrollbars-02.svg13
-rw-r--r--layout/reftests/svg/sizing/standalone--0-0--0-0.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--0-0--0-pct.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--0-0--0-px.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--0-0--pct-0.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--0-0--pct-pct.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--0-0--pct-px.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--0-0--px-0.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--0-0--px-pct.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--0-0--px-px.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--0-auto--0-0.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--0-auto--0-pct.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--0-auto--0-px.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--0-auto--pct-0.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--0-auto--pct-pct.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--0-auto--pct-px.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--0-auto--px-0.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--0-auto--px-pct.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--0-auto--px-px.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--0-pct--0-0.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--0-pct--0-pct.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--0-pct--0-px.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--0-pct--pct-0.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--0-pct--pct-pct.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--0-pct--pct-px.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--0-pct--px-0.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--0-pct--px-pct.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--0-pct--px-px.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--0-px--0-0.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--0-px--0-pct.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--0-px--0-px.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--0-px--pct-0.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--0-px--pct-pct.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--0-px--pct-px.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--0-px--px-0.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--0-px--px-pct.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--0-px--px-px.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--auto-0--0-0.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--auto-0--0-pct.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--auto-0--0-px.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--auto-0--pct-0.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--auto-0--pct-pct.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--auto-0--pct-px.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--auto-0--px-0.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--auto-0--px-pct.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--auto-0--px-px.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--auto-auto--0-0.svg21
-rw-r--r--layout/reftests/svg/sizing/standalone--auto-auto--0-pct.svg21
-rw-r--r--layout/reftests/svg/sizing/standalone--auto-auto--0-px.svg21
-rw-r--r--layout/reftests/svg/sizing/standalone--auto-auto--pct-0.svg21
-rw-r--r--layout/reftests/svg/sizing/standalone--auto-auto--pct-pct.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--auto-auto--pct-px.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--auto-auto--px-0.svg21
-rw-r--r--layout/reftests/svg/sizing/standalone--auto-auto--px-pct.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--auto-auto--px-px.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--auto-pct--0-0.svg22
-rw-r--r--layout/reftests/svg/sizing/standalone--auto-pct--0-pct.svg22
-rw-r--r--layout/reftests/svg/sizing/standalone--auto-pct--0-px.svg22
-rw-r--r--layout/reftests/svg/sizing/standalone--auto-pct--pct-0.svg21
-rw-r--r--layout/reftests/svg/sizing/standalone--auto-pct--pct-pct--viewBox.svg23
-rw-r--r--layout/reftests/svg/sizing/standalone--auto-pct--pct-pct.svg21
-rw-r--r--layout/reftests/svg/sizing/standalone--auto-pct--pct-px--viewBox.svg23
-rw-r--r--layout/reftests/svg/sizing/standalone--auto-pct--pct-px.svg21
-rw-r--r--layout/reftests/svg/sizing/standalone--auto-pct--px-0.svg21
-rw-r--r--layout/reftests/svg/sizing/standalone--auto-pct--px-pct--viewBox.svg23
-rw-r--r--layout/reftests/svg/sizing/standalone--auto-pct--px-pct.svg21
-rw-r--r--layout/reftests/svg/sizing/standalone--auto-pct--px-px.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--auto-px--0-0.svg22
-rw-r--r--layout/reftests/svg/sizing/standalone--auto-px--0-pct.svg22
-rw-r--r--layout/reftests/svg/sizing/standalone--auto-px--0-px.svg22
-rw-r--r--layout/reftests/svg/sizing/standalone--auto-px--pct-0.svg21
-rw-r--r--layout/reftests/svg/sizing/standalone--auto-px--pct-pct--viewBox.svg23
-rw-r--r--layout/reftests/svg/sizing/standalone--auto-px--pct-pct.svg21
-rw-r--r--layout/reftests/svg/sizing/standalone--auto-px--pct-px--viewBox.svg23
-rw-r--r--layout/reftests/svg/sizing/standalone--auto-px--pct-px.svg21
-rw-r--r--layout/reftests/svg/sizing/standalone--auto-px--px-0.svg21
-rw-r--r--layout/reftests/svg/sizing/standalone--auto-px--px-pct--viewBox.svg23
-rw-r--r--layout/reftests/svg/sizing/standalone--auto-px--px-pct.svg21
-rw-r--r--layout/reftests/svg/sizing/standalone--auto-px--px-px.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--pct-0--0-0.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--pct-0--0-pct.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--pct-0--0-px.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--pct-0--pct-0.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--pct-0--pct-pct.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--pct-0--pct-px.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--pct-0--px-0.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--pct-0--px-pct.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--pct-0--px-px.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--pct-auto--0-0.svg22
-rw-r--r--layout/reftests/svg/sizing/standalone--pct-auto--0-pct.svg21
-rw-r--r--layout/reftests/svg/sizing/standalone--pct-auto--0-px.svg21
-rw-r--r--layout/reftests/svg/sizing/standalone--pct-auto--pct-0.svg22
-rw-r--r--layout/reftests/svg/sizing/standalone--pct-auto--pct-pct--viewBox.svg23
-rw-r--r--layout/reftests/svg/sizing/standalone--pct-auto--pct-pct.svg21
-rw-r--r--layout/reftests/svg/sizing/standalone--pct-auto--pct-px--viewBox.svg23
-rw-r--r--layout/reftests/svg/sizing/standalone--pct-auto--pct-px.svg21
-rw-r--r--layout/reftests/svg/sizing/standalone--pct-auto--px-0.svg22
-rw-r--r--layout/reftests/svg/sizing/standalone--pct-auto--px-pct--viewBox.svg23
-rw-r--r--layout/reftests/svg/sizing/standalone--pct-auto--px-pct.svg21
-rw-r--r--layout/reftests/svg/sizing/standalone--pct-auto--px-px.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--pct-pct--0-0.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--pct-pct--0-pct.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--pct-pct--0-px.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--pct-pct--pct-0.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--pct-pct--pct-pct.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--pct-pct--pct-px.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--pct-pct--px-0.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--pct-pct--px-pct.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--pct-pct--px-px.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--pct-px--0-0.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--pct-px--0-pct.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--pct-px--0-px.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--pct-px--pct-0.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--pct-px--pct-pct.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--pct-px--pct-px.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--pct-px--px-0.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--pct-px--px-pct.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--pct-px--px-px.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--px-0--0-0.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--px-0--0-pct.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--px-0--0-px.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--px-0--pct-0.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--px-0--pct-pct.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--px-0--pct-px.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--px-0--px-0.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--px-0--px-pct.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--px-0--px-px.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--px-auto--0-0.svg22
-rw-r--r--layout/reftests/svg/sizing/standalone--px-auto--0-pct.svg21
-rw-r--r--layout/reftests/svg/sizing/standalone--px-auto--0-px.svg21
-rw-r--r--layout/reftests/svg/sizing/standalone--px-auto--pct-0.svg22
-rw-r--r--layout/reftests/svg/sizing/standalone--px-auto--pct-pct--viewBox.svg23
-rw-r--r--layout/reftests/svg/sizing/standalone--px-auto--pct-pct.svg21
-rw-r--r--layout/reftests/svg/sizing/standalone--px-auto--pct-px--viewBox.svg23
-rw-r--r--layout/reftests/svg/sizing/standalone--px-auto--pct-px.svg21
-rw-r--r--layout/reftests/svg/sizing/standalone--px-auto--px-0.svg22
-rw-r--r--layout/reftests/svg/sizing/standalone--px-auto--px-pct--viewBox.svg23
-rw-r--r--layout/reftests/svg/sizing/standalone--px-auto--px-pct.svg21
-rw-r--r--layout/reftests/svg/sizing/standalone--px-auto--px-px.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--px-pct--0-0.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--px-pct--0-pct.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--px-pct--0-px.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--px-pct--pct-0.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--px-pct--pct-pct.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--px-pct--pct-px.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--px-pct--px-0.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--px-pct--px-pct.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--px-pct--px-px.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--px-px--0-0.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--px-px--0-pct.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--px-px--0-px.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--px-px--pct-0.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--px-px--pct-pct.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--px-px--pct-px.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--px-px--px-0.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--px-px--px-pct.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone--px-px--px-px.svg20
-rw-r--r--layout/reftests/svg/sizing/standalone-sanity-height-150px.svg8
-rw-r--r--layout/reftests/svg/sizing/standalone-sanity-height-pct.svg8
-rw-r--r--layout/reftests/svg/sizing/standalone-sanity-height-px.svg8
-rw-r--r--layout/reftests/svg/sizing/standalone-sanity-width-300px.svg8
-rw-r--r--layout/reftests/svg/sizing/standalone-sanity-width-pct.svg8
-rw-r--r--layout/reftests/svg/sizing/standalone-sanity-width-px.svg8
-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
-rw-r--r--layout/reftests/svg/stroke-dasharray-01-ref.svg13
-rw-r--r--layout/reftests/svg/stroke-dasharray-01.svg13
-rw-r--r--layout/reftests/svg/stroke-dasharray-02.svg48
-rw-r--r--layout/reftests/svg/stroke-dasharray-03.svg20
-rw-r--r--layout/reftests/svg/stroke-dasharray-and-pathLength-01.svg20
-rw-r--r--layout/reftests/svg/stroke-dasharray-and-text-01-ref.svg10
-rw-r--r--layout/reftests/svg/stroke-dasharray-and-text-01.svg11
-rw-r--r--layout/reftests/svg/stroke-dashoffset-01.svg30
-rw-r--r--layout/reftests/svg/stroke-dashoffset-and-pathLength-01.svg25
-rw-r--r--layout/reftests/svg/stroke-linecap-circle-ellipse-01-ref.svg14
-rw-r--r--layout/reftests/svg/stroke-linecap-circle-ellipse-01.svg14
-rw-r--r--layout/reftests/svg/stroke-linecap-circle-ellipse-dashed-01.svg28
-rw-r--r--layout/reftests/svg/stroke-linecap-round-w-zero-length-segs-01.svg169
-rw-r--r--layout/reftests/svg/stroke-linecap-round-w-zero-length-segs-02.svg32
-rw-r--r--layout/reftests/svg/stroke-linecap-round-w-zero-length-segs-03.svg11
-rw-r--r--layout/reftests/svg/stroke-linecap-square-w-zero-length-segs-01.svg154
-rw-r--r--layout/reftests/svg/stroke-linecap-square-w-zero-length-segs-02.svg33
-rw-r--r--layout/reftests/svg/stroke-width-percentage-01.svg14
-rw-r--r--layout/reftests/svg/stroke-width-percentage-02-ref.svg7
-rw-r--r--layout/reftests/svg/stroke-width-percentage-02a.svg27
-rw-r--r--layout/reftests/svg/stroke-width-percentage-02b.svg26
-rw-r--r--layout/reftests/svg/stroke-width-percentage-03-iframe.svg13
-rw-r--r--layout/reftests/svg/stroke-width-percentage-03-ref.xhtml12
-rw-r--r--layout/reftests/svg/stroke-width-percentage-03.xhtml47
-rw-r--r--layout/reftests/svg/style-property-on-script-element-01.svg21
-rw-r--r--layout/reftests/svg/style-without-type-attribute.svg22
-rw-r--r--layout/reftests/svg/suspend-01.svg14
-rw-r--r--layout/reftests/svg/suspend-02.svg27
-rw-r--r--layout/reftests/svg/suspend-03.svg24
-rw-r--r--layout/reftests/svg/suspend-04.svg31
-rw-r--r--layout/reftests/svg/suspend-05.svg21
-rw-r--r--layout/reftests/svg/suspend-06.svg24
-rw-r--r--layout/reftests/svg/suspend-07.svg25
-rw-r--r--layout/reftests/svg/suspend-08.svg28
-rw-r--r--layout/reftests/svg/svg-blurry-with-subpixel-position-ref.html13
-rw-r--r--layout/reftests/svg/svg-blurry-with-subpixel-position.html13
-rw-r--r--layout/reftests/svg/svg-effects-area-unzoomed-ref.xhtml14
-rw-r--r--layout/reftests/svg/svg-effects-area-unzoomed.xhtml31
-rw-r--r--layout/reftests/svg/svg-effects-area-zoomed-in-ref.xhtml14
-rw-r--r--layout/reftests/svg/svg-effects-area-zoomed-in.xhtml31
-rw-r--r--layout/reftests/svg/svg-effects-area-zoomed-out-ref.xhtml15
-rw-r--r--layout/reftests/svg/svg-effects-area-zoomed-out.xhtml32
-rw-r--r--layout/reftests/svg/svg-in-foreignObject-01-ref.xhtml24
-rw-r--r--layout/reftests/svg/svg-in-foreignObject-01.xhtml27
-rw-r--r--layout/reftests/svg/svg-in-foreignObject-02.xhtml29
-rw-r--r--layout/reftests/svg/svg-in-inner-svg-dimensions.svg11
-rw-r--r--layout/reftests/svg/svg-integration/box-decoration-break-01-ref.xhtml37
-rw-r--r--layout/reftests/svg/svg-integration/box-decoration-break-01.xhtml41
-rw-r--r--layout/reftests/svg/svg-integration/box-decoration-break-02-ref.xhtml27
-rw-r--r--layout/reftests/svg/svg-integration/box-decoration-break-02.xhtml33
-rw-r--r--layout/reftests/svg/svg-integration/box-decoration-break-03.xhtml42
-rw-r--r--layout/reftests/svg/svg-integration/clip-path/clip-path-circle-001-ref.html20
-rw-r--r--layout/reftests/svg/svg-integration/clip-path/clip-path-circle-001.html21
-rw-r--r--layout/reftests/svg/svg-integration/clip-path/clip-path-circle-002-ref.html20
-rw-r--r--layout/reftests/svg/svg-integration/clip-path/clip-path-circle-002.html21
-rw-r--r--layout/reftests/svg/svg-integration/clip-path/clip-path-circle-003-ref.html20
-rw-r--r--layout/reftests/svg/svg-integration/clip-path/clip-path-circle-003.html21
-rw-r--r--layout/reftests/svg/svg-integration/clip-path/clip-path-circle-004-ref.html20
-rw-r--r--layout/reftests/svg/svg-integration/clip-path/clip-path-circle-004.html21
-rw-r--r--layout/reftests/svg/svg-integration/clip-path/clip-path-circle-005-ref.html20
-rw-r--r--layout/reftests/svg/svg-integration/clip-path/clip-path-circle-005.html21
-rw-r--r--layout/reftests/svg/svg-integration/clip-path/clip-path-circle-006-ref.html20
-rw-r--r--layout/reftests/svg/svg-integration/clip-path/clip-path-circle-006.html21
-rw-r--r--layout/reftests/svg/svg-integration/clip-path/clip-path-circle-007-ref.html20
-rw-r--r--layout/reftests/svg/svg-integration/clip-path/clip-path-circle-007.html21
-rw-r--r--layout/reftests/svg/svg-integration/clip-path/clip-path-circle-008-ref.html20
-rw-r--r--layout/reftests/svg/svg-integration/clip-path/clip-path-circle-008.html21
-rw-r--r--layout/reftests/svg/svg-integration/clip-path/clip-path-circle-009-ref.html20
-rw-r--r--layout/reftests/svg/svg-integration/clip-path/clip-path-circle-009.html21
-rw-r--r--layout/reftests/svg/svg-integration/clip-path/clip-path-circle-010-ref.html20
-rw-r--r--layout/reftests/svg/svg-integration/clip-path/clip-path-circle-010.html21
-rw-r--r--layout/reftests/svg/svg-integration/clip-path/clip-path-circle-011.html21
-rw-r--r--layout/reftests/svg/svg-integration/clip-path/clip-path-circle-012.html21
-rw-r--r--layout/reftests/svg/svg-integration/clip-path/clip-path-circle-013.html21
-rw-r--r--layout/reftests/svg/svg-integration/clip-path/clip-path-circle-014.html21
-rw-r--r--layout/reftests/svg/svg-integration/clip-path/clip-path-circle-015.html21
-rw-r--r--layout/reftests/svg/svg-integration/clip-path/clip-path-circle-016.html21
-rw-r--r--layout/reftests/svg/svg-integration/clip-path/clip-path-circle-017.html21
-rw-r--r--layout/reftests/svg/svg-integration/clip-path/clip-path-circle-018.html21
-rw-r--r--layout/reftests/svg/svg-integration/clip-path/clip-path-circle-019.html21
-rw-r--r--layout/reftests/svg/svg-integration/clip-path/clip-path-circle-020.html23
-rw-r--r--layout/reftests/svg/svg-integration/clip-path/clip-path-circle-021-ref.html16
-rw-r--r--layout/reftests/svg/svg-integration/clip-path/clip-path-circle-021.html20
-rw-r--r--layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-001-ref.html20
-rw-r--r--layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-001.html21
-rw-r--r--layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-002.html21
-rw-r--r--layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-003.html21
-rw-r--r--layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-004.html21
-rw-r--r--layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-005.html21
-rw-r--r--layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-006.html21
-rw-r--r--layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-007.html21
-rw-r--r--layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-008.html21
-rw-r--r--layout/reftests/svg/svg-integration/clip-path/clip-path-inset-001-ref.html26
-rw-r--r--layout/reftests/svg/svg-integration/clip-path/clip-path-inset-001a.html26
-rw-r--r--layout/reftests/svg/svg-integration/clip-path/clip-path-inset-001b.html28
-rw-r--r--layout/reftests/svg/svg-integration/clip-path/clip-path-inset-001c.html29
-rw-r--r--layout/reftests/svg/svg-integration/clip-path/clip-path-inset-002-ref.html26
-rw-r--r--layout/reftests/svg/svg-integration/clip-path/clip-path-inset-002a.html26
-rw-r--r--layout/reftests/svg/svg-integration/clip-path/clip-path-inset-002b.html26
-rw-r--r--layout/reftests/svg/svg-integration/clip-path/clip-path-inset-002c.html26
-rw-r--r--layout/reftests/svg/svg-integration/clip-path/clip-path-inset-003-ref.html26
-rw-r--r--layout/reftests/svg/svg-integration/clip-path/clip-path-inset-003.html26
-rw-r--r--layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-001.html21
-rw-r--r--layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-002.html24
-rw-r--r--layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-003.html21
-rw-r--r--layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-004.html25
-rw-r--r--layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-005.html26
-rw-r--r--layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-006.html33
-rw-r--r--layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-007.html34
-rw-r--r--layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-008.html35
-rw-r--r--layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-009.html33
-rw-r--r--layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-010.html36
-rw-r--r--layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-011.html36
-rw-r--r--layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-012.html36
-rw-r--r--layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-013.html51
-rw-r--r--layout/reftests/svg/svg-integration/clip-path/clip-path-rectangle-border-ref.html15
-rw-r--r--layout/reftests/svg/svg-integration/clip-path/clip-path-rectangle-ref.html15
-rw-r--r--layout/reftests/svg/svg-integration/clip-path/clip-path-square-001-ref.html15
-rw-r--r--layout/reftests/svg/svg-integration/clip-path/clip-path-square-002-ref.html15
-rw-r--r--layout/reftests/svg/svg-integration/clip-path/clip-path-stripes-001-ref.html39
-rw-r--r--layout/reftests/svg/svg-integration/clip-path/clip-path-stripes-002-ref.html31
-rw-r--r--layout/reftests/svg/svg-integration/clip-path/clip-path-stripes-003-ref.html63
-rw-r--r--layout/reftests/svg/svg-integration/clip-path/clip-path-stroke-001-ref.html21
-rw-r--r--layout/reftests/svg/svg-integration/clip-path/clip-path-stroke-001.html26
-rw-r--r--layout/reftests/svg/svg-integration/clip-path/clip-path-transform-001-ref.html5
-rw-r--r--layout/reftests/svg/svg-integration/clip-path/clip-path-transform-001.html10
-rw-r--r--layout/reftests/svg/svg-integration/clip-path/reftest.list61
-rw-r--r--layout/reftests/svg/svg-integration/clipPath-html-01-extref.xhtml15
-rw-r--r--layout/reftests/svg/svg-integration/clipPath-html-01-ref.svg8
-rw-r--r--layout/reftests/svg/svg-integration/clipPath-html-01.xhtml18
-rw-r--r--layout/reftests/svg/svg-integration/clipPath-html-02-extref.xhtml18
-rw-r--r--layout/reftests/svg/svg-integration/clipPath-html-02-ref.svg9
-rw-r--r--layout/reftests/svg/svg-integration/clipPath-html-02.xhtml23
-rw-r--r--layout/reftests/svg/svg-integration/clipPath-html-03-extref.xhtml18
-rw-r--r--layout/reftests/svg/svg-integration/clipPath-html-03-ref.svg10
-rw-r--r--layout/reftests/svg/svg-integration/clipPath-html-03.xhtml23
-rw-r--r--layout/reftests/svg/svg-integration/clipPath-html-04-extref.xhtml22
-rw-r--r--layout/reftests/svg/svg-integration/clipPath-html-04-ref.xhtml14
-rw-r--r--layout/reftests/svg/svg-integration/clipPath-html-04.xhtml27
-rw-r--r--layout/reftests/svg/svg-integration/clipPath-html-05-extref.xhtml22
-rw-r--r--layout/reftests/svg/svg-integration/clipPath-html-05-ref.xhtml14
-rw-r--r--layout/reftests/svg/svg-integration/clipPath-html-05.xhtml27
-rw-r--r--layout/reftests/svg/svg-integration/clipPath-html-06-extref.xhtml24
-rw-r--r--layout/reftests/svg/svg-integration/clipPath-html-06-ref.xhtml20
-rw-r--r--layout/reftests/svg/svg-integration/clipPath-html-06.xhtml29
-rw-r--r--layout/reftests/svg/svg-integration/clipPath-html-07-ref.svg4
-rw-r--r--layout/reftests/svg/svg-integration/clipPath-html-07.xhtml31
-rw-r--r--layout/reftests/svg/svg-integration/clipPath-html-08.xhtml26
-rw-r--r--layout/reftests/svg/svg-integration/clipPath-html-zoomed-01.xhtml15
-rw-r--r--layout/reftests/svg/svg-integration/clipPath-transformed-html-01.xhtml44
-rw-r--r--layout/reftests/svg/svg-integration/clipPath-transformed-html-02.xhtml44
-rw-r--r--layout/reftests/svg/svg-integration/conditions-outer-svg-01.xhtml18
-rw-r--r--layout/reftests/svg/svg-integration/conditions-outer-svg-02.xhtml19
-rw-r--r--layout/reftests/svg/svg-integration/css-and-svg-filter-01-ref.html10
-rw-r--r--layout/reftests/svg/svg-integration/css-and-svg-filter-01.html27
-rw-r--r--layout/reftests/svg/svg-integration/dynamic-conditions-outer-svg-01.xhtml18
-rw-r--r--layout/reftests/svg/svg-integration/dynamic-conditions-outer-svg-02.xhtml18
-rw-r--r--layout/reftests/svg/svg-integration/dynamic-conditions-outer-svg-03.xhtml18
-rw-r--r--layout/reftests/svg/svg-integration/dynamic-conditions-outer-svg-04.xhtml18
-rw-r--r--layout/reftests/svg/svg-integration/filter-html-01-extref.xhtml15
-rw-r--r--layout/reftests/svg/svg-integration/filter-html-01-ref.svg14
-rw-r--r--layout/reftests/svg/svg-integration/filter-html-01.xhtml21
-rw-r--r--layout/reftests/svg/svg-integration/filter-html-dynamic-01-ref.xhtml23
-rw-r--r--layout/reftests/svg/svg-integration/filter-html-dynamic-01.xhtml35
-rw-r--r--layout/reftests/svg/svg-integration/filter-html-zoomed-01.xhtml18
-rw-r--r--layout/reftests/svg/svg-integration/mask-clipPath-opacity-01-ref.xhtml14
-rw-r--r--layout/reftests/svg/svg-integration/mask-clipPath-opacity-01a.xhtml20
-rw-r--r--layout/reftests/svg/svg-integration/mask-clipPath-opacity-01b.xhtml21
-rw-r--r--layout/reftests/svg/svg-integration/mask-clipPath-opacity-01c.xhtml21
-rw-r--r--layout/reftests/svg/svg-integration/mask-clipPath-opacity-01d.xhtml21
-rw-r--r--layout/reftests/svg/svg-integration/mask-clipPath-opacity-01e.xhtml25
-rw-r--r--layout/reftests/svg/svg-integration/mask-html-01-extref-01.xhtml15
-rw-r--r--layout/reftests/svg/svg-integration/mask-html-01-extref-02.xhtml15
-rw-r--r--layout/reftests/svg/svg-integration/mask-html-01-ref.svg16
-rw-r--r--layout/reftests/svg/svg-integration/mask-html-01-resource.svg33
-rw-r--r--layout/reftests/svg/svg-integration/mask-html-01.xhtml23
-rw-r--r--layout/reftests/svg/svg-integration/mask-html-zoomed-01.xhtml20
-rw-r--r--layout/reftests/svg/svg-integration/mask-mask-clipPath-opacity-scale-ref.xhtml15
-rw-r--r--layout/reftests/svg/svg-integration/mask-mask-clipPath-opacity-scale.xhtml25
-rw-r--r--layout/reftests/svg/svg-integration/mask-transformed-html-01.xhtml42
-rw-r--r--layout/reftests/svg/svg-integration/mask-transformed-html-02.xhtml42
-rw-r--r--layout/reftests/svg/svg-integration/patterned-svg-under-transformed-html-01.xhtml47
-rw-r--r--layout/reftests/svg/svg-integration/patterned-svg-under-transformed-html-02.xhtml47
-rw-r--r--layout/reftests/svg/svg-integration/reftest.list53
-rw-r--r--layout/reftests/svg/svg-integration/transform-outer-svg-01-ref.xhtml18
-rw-r--r--layout/reftests/svg/svg-integration/transform-outer-svg-01.xhtml18
-rw-r--r--layout/reftests/svg/svg-transform-01.svg16
-rw-r--r--layout/reftests/svg/svg-transform-02.svg16
-rw-r--r--layout/reftests/svg/switch-01.svg64
-rw-r--r--layout/reftests/svg/symbol-01-ref.svg7
-rw-r--r--layout/reftests/svg/symbol-01.svg21
-rw-r--r--layout/reftests/svg/text-font-size-01.svg19
-rw-r--r--layout/reftests/svg/text-font-weight-01-ref.svg17
-rw-r--r--layout/reftests/svg/text-font-weight-01.svg25
-rw-r--r--layout/reftests/svg/text-gradient-01-ref.svg18
-rw-r--r--layout/reftests/svg/text-gradient-01.svg21
-rw-r--r--layout/reftests/svg/text-gradient-02-ref.svg22
-rw-r--r--layout/reftests/svg/text-gradient-02.svg23
-rw-r--r--layout/reftests/svg/text-gradient-03.svg22
-rw-r--r--layout/reftests/svg/text-gradient-04-ref.svg19
-rw-r--r--layout/reftests/svg/text-gradient-04.svg39
-rw-r--r--layout/reftests/svg/text-in-link-01-ref.svg20
-rw-r--r--layout/reftests/svg/text-in-link-01.svg28
-rw-r--r--layout/reftests/svg/text-in-link-02-ref.svg12
-rw-r--r--layout/reftests/svg/text-in-link-02.svg11
-rw-r--r--layout/reftests/svg/text-in-link-03-ref.svg11
-rw-r--r--layout/reftests/svg/text-in-link-03.svg11
-rw-r--r--layout/reftests/svg/text-language-00-ref.xhtml28
-rw-r--r--layout/reftests/svg/text-language-00.xhtml32
-rw-r--r--layout/reftests/svg/text-language-01-ref.xhtml35
-rw-r--r--layout/reftests/svg/text-language-01.xhtml37
-rw-r--r--layout/reftests/svg/text-layout-01-ref.svg42
-rw-r--r--layout/reftests/svg/text-layout-01.svg36
-rw-r--r--layout/reftests/svg/text-layout-02-ref.svg21
-rw-r--r--layout/reftests/svg/text-layout-02.svg21
-rw-r--r--layout/reftests/svg/text-layout-03-ref.svg13
-rw-r--r--layout/reftests/svg/text-layout-03.svg13
-rw-r--r--layout/reftests/svg/text-layout-04-ref.svg11
-rw-r--r--layout/reftests/svg/text-layout-04.svg11
-rw-r--r--layout/reftests/svg/text-layout-05-ref.svg13
-rw-r--r--layout/reftests/svg/text-layout-05.svg13
-rw-r--r--layout/reftests/svg/text-layout-06-ref.svg13
-rw-r--r--layout/reftests/svg/text-layout-06.svg9
-rw-r--r--layout/reftests/svg/text-layout-07-ref.svg8
-rw-r--r--layout/reftests/svg/text-layout-07.svg9
-rw-r--r--layout/reftests/svg/text-layout-08-ref.svg7
-rw-r--r--layout/reftests/svg/text-layout-08.svg10
-rw-r--r--layout/reftests/svg/text-layout-09.svg49
-rw-r--r--layout/reftests/svg/text-layout-10.svg66
-rw-r--r--layout/reftests/svg/text-scale-01-ref.svg14
-rw-r--r--layout/reftests/svg/text-scale-01.svg22
-rw-r--r--layout/reftests/svg/text-scale-02-ref.svg11
-rw-r--r--layout/reftests/svg/text-scale-02.svg17
-rw-r--r--layout/reftests/svg/text-scale-03-ref.svg7
-rw-r--r--layout/reftests/svg/text-scale-03.svg13
-rw-r--r--layout/reftests/svg/text-stroke-scaling-01-ref.svg15
-rw-r--r--layout/reftests/svg/text-stroke-scaling-01.svg11
-rw-r--r--layout/reftests/svg/text-stroke-scaling-02-ref.html9
-rw-r--r--layout/reftests/svg/text-stroke-scaling-02a.html17
-rw-r--r--layout/reftests/svg/text-stroke-scaling-02b.html10
-rw-r--r--layout/reftests/svg/text-style-01-ref.svg21
-rw-r--r--layout/reftests/svg/text-style-01a.svg29
-rw-r--r--layout/reftests/svg/text-style-01b.svg30
-rw-r--r--layout/reftests/svg/text-style-01c.svg29
-rw-r--r--layout/reftests/svg/text-style-01d.svg30
-rw-r--r--layout/reftests/svg/text-style-01e.svg31
-rw-r--r--layout/reftests/svg/text-white-space-01-ref.svg14
-rw-r--r--layout/reftests/svg/text-white-space-01.svg15
-rw-r--r--layout/reftests/svg/text/clipPath-applied-ref.svg23
-rw-r--r--layout/reftests/svg/text/clipPath-applied.svg29
-rw-r--r--layout/reftests/svg/text/clipPath-content-2-ref.svg25
-rw-r--r--layout/reftests/svg/text/clipPath-content-2.svg42
-rw-r--r--layout/reftests/svg/text/clipPath-content-ref.svg18
-rw-r--r--layout/reftests/svg/text/clipPath-content.svg41
-rw-r--r--layout/reftests/svg/text/deselectAll-ref.svg9
-rw-r--r--layout/reftests/svg/text/deselectAll.svg14
-rw-r--r--layout/reftests/svg/text/display-none-1.svg9
-rw-r--r--layout/reftests/svg/text/display-none-2.svg9
-rw-r--r--layout/reftests/svg/text/display-none-3.svg9
-rw-r--r--layout/reftests/svg/text/display-none-4.svg9
-rw-r--r--layout/reftests/svg/text/dynamic-dominant-baseline-ref.svg7
-rw-r--r--layout/reftests/svg/text/dynamic-dominant-baseline.svg15
-rw-r--r--layout/reftests/svg/text/dynamic-font-size-2-ref.svg15
-rw-r--r--layout/reftests/svg/text/dynamic-font-size-2.svg28
-rw-r--r--layout/reftests/svg/text/dynamic-font-size-3-ref.svg17
-rw-r--r--layout/reftests/svg/text/dynamic-font-size-3.svg31
-rw-r--r--layout/reftests/svg/text/dynamic-font-size-4-ref.svg17
-rw-r--r--layout/reftests/svg/text/dynamic-font-size-4.svg31
-rw-r--r--layout/reftests/svg/text/dynamic-font-size-ref.svg7
-rw-r--r--layout/reftests/svg/text/dynamic-font-size.svg15
-rw-r--r--layout/reftests/svg/text/dynamic-multiple-x-ref.svg13
-rw-r--r--layout/reftests/svg/text/dynamic-multiple-x.svg55
-rw-r--r--layout/reftests/svg/text/dynamic-non-scaling-stroke-ref.svg11
-rw-r--r--layout/reftests/svg/text/dynamic-non-scaling-stroke.svg31
-rw-r--r--layout/reftests/svg/text/dynamic-text-shadow.svg15
-rw-r--r--layout/reftests/svg/text/filter-applied-ref.svg33
-rw-r--r--layout/reftests/svg/text/filter-applied.svg40
-rw-r--r--layout/reftests/svg/text/ignore-before-after.svg13
-rw-r--r--layout/reftests/svg/text/ignore-border.svg7
-rw-r--r--layout/reftests/svg/text/ignore-display-ref.svg35
-rw-r--r--layout/reftests/svg/text/ignore-display.svg35
-rw-r--r--layout/reftests/svg/text/ignore-float-first-letter.svg10
-rw-r--r--layout/reftests/svg/text/ignore-float.svg7
-rw-r--r--layout/reftests/svg/text/ignore-invalid-child-2-ref.svg12
-rw-r--r--layout/reftests/svg/text/ignore-invalid-child-2.svg13
-rw-r--r--layout/reftests/svg/text/ignore-invalid-child-ref.svg7
-rw-r--r--layout/reftests/svg/text/ignore-invalid-child.svg7
-rw-r--r--layout/reftests/svg/text/ignore-margin.svg7
-rw-r--r--layout/reftests/svg/text/ignore-overflow-scroll.svg7
-rw-r--r--layout/reftests/svg/text/ignore-padding.svg7
-rw-r--r--layout/reftests/svg/text/ignore-position-ref.svg12
-rw-r--r--layout/reftests/svg/text/ignore-position.svg12
-rw-r--r--layout/reftests/svg/text/ignore-prop-ref.svg7
-rw-r--r--layout/reftests/svg/text/ignore-text-align-2-ref.svg10
-rw-r--r--layout/reftests/svg/text/ignore-text-align-2.svg10
-rw-r--r--layout/reftests/svg/text/ignore-text-align.svg7
-rw-r--r--layout/reftests/svg/text/ignore-vertical-align-ref.svg7
-rw-r--r--layout/reftests/svg/text/ignore-vertical-align.svg7
-rw-r--r--layout/reftests/svg/text/link-surrounding.svg9
-rw-r--r--layout/reftests/svg/text/mask-applied-ref.svg23
-rw-r--r--layout/reftests/svg/text/mask-applied.svg29
-rw-r--r--layout/reftests/svg/text/mask-content-2-ref.svg25
-rw-r--r--layout/reftests/svg/text/mask-content-2.svg44
-rw-r--r--layout/reftests/svg/text/mask-content-ref.svg18
-rw-r--r--layout/reftests/svg/text/mask-content.svg43
-rw-r--r--layout/reftests/svg/text/multiple-chunks-bidi-ref.svg10
-rw-r--r--layout/reftests/svg/text/multiple-chunks-bidi.svg9
-rw-r--r--layout/reftests/svg/text/multiple-chunks-different-anchor-bidi-ref.svg10
-rw-r--r--layout/reftests/svg/text/multiple-chunks-different-anchor-bidi.svg9
-rw-r--r--layout/reftests/svg/text/multiple-chunks-different-anchor-ref.svg10
-rw-r--r--layout/reftests/svg/text/multiple-chunks-different-anchor-rtl-ref.svg10
-rw-r--r--layout/reftests/svg/text/multiple-chunks-different-anchor-rtl.svg9
-rw-r--r--layout/reftests/svg/text/multiple-chunks-different-anchor.svg9
-rw-r--r--layout/reftests/svg/text/multiple-chunks-direction-and-anchor-ref.svg10
-rw-r--r--layout/reftests/svg/text/multiple-chunks-directions-and-anchor-dx-ref.svg9
-rw-r--r--layout/reftests/svg/text/multiple-chunks-directions-and-anchor-dx.svg9
-rw-r--r--layout/reftests/svg/text/multiple-chunks-directions-and-anchor-multiple-dx-ref.svg11
-rw-r--r--layout/reftests/svg/text/multiple-chunks-directions-and-anchor-multiple-dx.svg9
-rw-r--r--layout/reftests/svg/text/multiple-chunks-directions-and-anchor-ref.svg10
-rw-r--r--layout/reftests/svg/text/multiple-chunks-directions-and-anchor.svg9
-rw-r--r--layout/reftests/svg/text/multiple-chunks-dx-bidi-ref.svg9
-rw-r--r--layout/reftests/svg/text/multiple-chunks-dx-bidi.svg9
-rw-r--r--layout/reftests/svg/text/multiple-chunks-dx-different-anchor-bidi-ref.svg9
-rw-r--r--layout/reftests/svg/text/multiple-chunks-dx-different-anchor-bidi.svg9
-rw-r--r--layout/reftests/svg/text/multiple-chunks-dx-different-anchor-ref.svg9
-rw-r--r--layout/reftests/svg/text/multiple-chunks-dx-different-anchor-rtl-ref.svg9
-rw-r--r--layout/reftests/svg/text/multiple-chunks-dx-different-anchor-rtl.svg9
-rw-r--r--layout/reftests/svg/text/multiple-chunks-dx-different-anchor.svg9
-rw-r--r--layout/reftests/svg/text/multiple-chunks-dx-ref.svg9
-rw-r--r--layout/reftests/svg/text/multiple-chunks-dx-rtl-ref.svg9
-rw-r--r--layout/reftests/svg/text/multiple-chunks-dx-rtl.svg9
-rw-r--r--layout/reftests/svg/text/multiple-chunks-dx.svg9
-rw-r--r--layout/reftests/svg/text/multiple-chunks-fill-color-ref.svg12
-rw-r--r--layout/reftests/svg/text/multiple-chunks-fill-color.svg9
-rw-r--r--layout/reftests/svg/text/multiple-chunks-letter-spacing-ref.svg25
-rw-r--r--layout/reftests/svg/text/multiple-chunks-letter-spacing.svg9
-rw-r--r--layout/reftests/svg/text/multiple-chunks-multiple-dx-bidi-ref.svg11
-rw-r--r--layout/reftests/svg/text/multiple-chunks-multiple-dx-bidi.svg9
-rw-r--r--layout/reftests/svg/text/multiple-chunks-multiple-dx-different-anchor-bidi-ref.svg10
-rw-r--r--layout/reftests/svg/text/multiple-chunks-multiple-dx-different-anchor-bidi.svg9
-rw-r--r--layout/reftests/svg/text/multiple-chunks-multiple-dx-different-anchor-ref.svg10
-rw-r--r--layout/reftests/svg/text/multiple-chunks-multiple-dx-different-anchor-rtl-ref.svg10
-rw-r--r--layout/reftests/svg/text/multiple-chunks-multiple-dx-different-anchor-rtl.svg9
-rw-r--r--layout/reftests/svg/text/multiple-chunks-multiple-dx-different-anchor.svg9
-rw-r--r--layout/reftests/svg/text/multiple-chunks-multiple-dx-ref.svg10
-rw-r--r--layout/reftests/svg/text/multiple-chunks-multiple-dx-rtl-ref.svg10
-rw-r--r--layout/reftests/svg/text/multiple-chunks-multiple-dx-rtl.svg9
-rw-r--r--layout/reftests/svg/text/multiple-chunks-multiple-dx.svg9
-rw-r--r--layout/reftests/svg/text/multiple-chunks-ref.svg10
-rw-r--r--layout/reftests/svg/text/multiple-chunks-rtl-ref.svg10
-rw-r--r--layout/reftests/svg/text/multiple-chunks-rtl.svg9
-rw-r--r--layout/reftests/svg/text/multiple-chunks-selection-ref.svg17
-rw-r--r--layout/reftests/svg/text/multiple-chunks-selection.svg16
-rw-r--r--layout/reftests/svg/text/multiple-chunks.svg9
-rw-r--r--layout/reftests/svg/text/multiple-text-selection-ref.html23
-rw-r--r--layout/reftests/svg/text/multiple-text-selection.svg17
-rw-r--r--layout/reftests/svg/text/multiple-x-anchor-end-bidi-ref.svg10
-rw-r--r--layout/reftests/svg/text/multiple-x-anchor-end-bidi.svg9
-rw-r--r--layout/reftests/svg/text/multiple-x-anchor-end-ref.svg10
-rw-r--r--layout/reftests/svg/text/multiple-x-anchor-end-rtl-ref.svg10
-rw-r--r--layout/reftests/svg/text/multiple-x-anchor-end-rtl.svg9
-rw-r--r--layout/reftests/svg/text/multiple-x-anchor-end.svg9
-rw-r--r--layout/reftests/svg/text/multiple-x-bidi-ref.svg10
-rw-r--r--layout/reftests/svg/text/multiple-x-bidi.svg9
-rw-r--r--layout/reftests/svg/text/multiple-x-dx-anchor-end-bidi.svg9
-rw-r--r--layout/reftests/svg/text/multiple-x-dx-anchor-end-rtl.svg9
-rw-r--r--layout/reftests/svg/text/multiple-x-dx-anchor-end.svg9
-rw-r--r--layout/reftests/svg/text/multiple-x-dx-bidi-ref.svg9
-rw-r--r--layout/reftests/svg/text/multiple-x-dx-bidi.svg9
-rw-r--r--layout/reftests/svg/text/multiple-x-dx-ref.svg9
-rw-r--r--layout/reftests/svg/text/multiple-x-dx-rtl-ref.svg9
-rw-r--r--layout/reftests/svg/text/multiple-x-dx-rtl.svg9
-rw-r--r--layout/reftests/svg/text/multiple-x-dx.svg9
-rw-r--r--layout/reftests/svg/text/multiple-x-holes-bidi-ref.svg11
-rw-r--r--layout/reftests/svg/text/multiple-x-holes-bidi.svg9
-rw-r--r--layout/reftests/svg/text/multiple-x-holes-dx-bidi-ref.svg9
-rw-r--r--layout/reftests/svg/text/multiple-x-holes-dx-bidi.svg9
-rw-r--r--layout/reftests/svg/text/multiple-x-holes-dx-ref.svg9
-rw-r--r--layout/reftests/svg/text/multiple-x-holes-dx-rtl.svg9
-rw-r--r--layout/reftests/svg/text/multiple-x-holes-dx.svg9
-rw-r--r--layout/reftests/svg/text/multiple-x-holes-multiple-dx-bidi-ref.svg9
-rw-r--r--layout/reftests/svg/text/multiple-x-holes-multiple-dx-bidi.svg9
-rw-r--r--layout/reftests/svg/text/multiple-x-holes-multiple-dx-ref.svg9
-rw-r--r--layout/reftests/svg/text/multiple-x-holes-multiple-dx-rtl-ref.svg9
-rw-r--r--layout/reftests/svg/text/multiple-x-holes-multiple-dx-rtl.svg9
-rw-r--r--layout/reftests/svg/text/multiple-x-holes-multiple-dx.svg9
-rw-r--r--layout/reftests/svg/text/multiple-x-holes-ref.svg11
-rw-r--r--layout/reftests/svg/text/multiple-x-holes-rtl-ref.svg11
-rw-r--r--layout/reftests/svg/text/multiple-x-holes-rtl.svg9
-rw-r--r--layout/reftests/svg/text/multiple-x-holes.svg9
-rw-r--r--layout/reftests/svg/text/multiple-x-multiple-dx-anchor-end-bidi-ref.svg11
-rw-r--r--layout/reftests/svg/text/multiple-x-multiple-dx-anchor-end-bidi.svg9
-rw-r--r--layout/reftests/svg/text/multiple-x-multiple-dx-anchor-end-ref.svg11
-rw-r--r--layout/reftests/svg/text/multiple-x-multiple-dx-anchor-end-rtl-ref.svg11
-rw-r--r--layout/reftests/svg/text/multiple-x-multiple-dx-anchor-end-rtl.svg9
-rw-r--r--layout/reftests/svg/text/multiple-x-multiple-dx-anchor-end.svg9
-rw-r--r--layout/reftests/svg/text/multiple-x-multiple-dx-bidi-ref.svg12
-rw-r--r--layout/reftests/svg/text/multiple-x-multiple-dx-bidi.svg9
-rw-r--r--layout/reftests/svg/text/multiple-x-multiple-dx-ref.svg9
-rw-r--r--layout/reftests/svg/text/multiple-x-multiple-dx-rtl-ref.svg11
-rw-r--r--layout/reftests/svg/text/multiple-x-multiple-dx-rtl.svg9
-rw-r--r--layout/reftests/svg/text/multiple-x-multiple-dx.svg9
-rw-r--r--layout/reftests/svg/text/multiple-x-percentages-2-iframe-ref.svg8
-rw-r--r--layout/reftests/svg/text/multiple-x-percentages-2-iframe.svg8
-rw-r--r--layout/reftests/svg/text/multiple-x-percentages-2-ref.html6
-rw-r--r--layout/reftests/svg/text/multiple-x-percentages-2.html18
-rw-r--r--layout/reftests/svg/text/multiple-x-percentages-3-iframe-ref.svg8
-rw-r--r--layout/reftests/svg/text/multiple-x-percentages-3-iframe.svg8
-rw-r--r--layout/reftests/svg/text/multiple-x-percentages-3-ref.html6
-rw-r--r--layout/reftests/svg/text/multiple-x-percentages-3.html25
-rw-r--r--layout/reftests/svg/text/multiple-x-percentages-ref.svg8
-rw-r--r--layout/reftests/svg/text/multiple-x-percentages.svg15
-rw-r--r--layout/reftests/svg/text/multiple-x-ref.svg10
-rw-r--r--layout/reftests/svg/text/multiple-x-rtl-ref.svg10
-rw-r--r--layout/reftests/svg/text/multiple-x-rtl.svg9
-rw-r--r--layout/reftests/svg/text/multiple-x-white-space-ref.svg11
-rw-r--r--layout/reftests/svg/text/multiple-x-white-space.svg15
-rw-r--r--layout/reftests/svg/text/multiple-x.svg9
-rw-r--r--layout/reftests/svg/text/pattern-content-ref.svg16
-rw-r--r--layout/reftests/svg/text/pattern-content.svg22
-rw-r--r--layout/reftests/svg/text/pseudo-first-letter-2-ref.svg7
-rw-r--r--layout/reftests/svg/text/pseudo-first-letter-2.svg10
-rw-r--r--layout/reftests/svg/text/pseudo-first-letter-ref.svg8
-rw-r--r--layout/reftests/svg/text/pseudo-first-letter.svg11
-rw-r--r--layout/reftests/svg/text/pseudo-first-line-2-ref.svg10
-rw-r--r--layout/reftests/svg/text/pseudo-first-line-2.svg14
-rw-r--r--layout/reftests/svg/text/pseudo-first-line-ref.svg8
-rw-r--r--layout/reftests/svg/text/pseudo-first-line.svg11
-rw-r--r--layout/reftests/svg/text/reftest.list216
-rw-r--r--layout/reftests/svg/text/selectSubString-2-ref.svg21
-rw-r--r--layout/reftests/svg/text/selectSubString-2.svg18
-rw-r--r--layout/reftests/svg/text/selectSubString-3-ref.svg21
-rw-r--r--layout/reftests/svg/text/selectSubString-3.svg20
-rw-r--r--layout/reftests/svg/text/selectSubString-ref.svg21
-rw-r--r--layout/reftests/svg/text/selectSubString.svg18
-rw-r--r--layout/reftests/svg/text/simple-2.svg9
-rw-r--r--layout/reftests/svg/text/simple-anchor-end-bidi-ref.html15
-rw-r--r--layout/reftests/svg/text/simple-anchor-end-bidi.svg9
-rw-r--r--layout/reftests/svg/text/simple-anchor-end-ref.html15
-rw-r--r--layout/reftests/svg/text/simple-anchor-end-rtl-ref.html15
-rw-r--r--layout/reftests/svg/text/simple-anchor-end-rtl.svg9
-rw-r--r--layout/reftests/svg/text/simple-anchor-end.svg9
-rw-r--r--layout/reftests/svg/text/simple-anchor-middle-bidi-ref.html15
-rw-r--r--layout/reftests/svg/text/simple-anchor-middle-bidi.svg9
-rw-r--r--layout/reftests/svg/text/simple-anchor-middle-ref.html15
-rw-r--r--layout/reftests/svg/text/simple-anchor-middle-rtl-ref.html15
-rw-r--r--layout/reftests/svg/text/simple-anchor-middle-rtl.svg9
-rw-r--r--layout/reftests/svg/text/simple-anchor-middle.svg9
-rw-r--r--layout/reftests/svg/text/simple-bidi-2.svg9
-rw-r--r--layout/reftests/svg/text/simple-bidi-ref.html15
-rw-r--r--layout/reftests/svg/text/simple-bidi-selection-ref.html22
-rw-r--r--layout/reftests/svg/text/simple-bidi-selection.svg16
-rw-r--r--layout/reftests/svg/text/simple-bidi.svg9
-rw-r--r--layout/reftests/svg/text/simple-dx-2-ref.svg9
-rw-r--r--layout/reftests/svg/text/simple-dx-2.svg9
-rw-r--r--layout/reftests/svg/text/simple-dx-anchor-end-bidi-ref.svg9
-rw-r--r--layout/reftests/svg/text/simple-dx-anchor-end-bidi.svg9
-rw-r--r--layout/reftests/svg/text/simple-dx-anchor-end-ref.svg9
-rw-r--r--layout/reftests/svg/text/simple-dx-anchor-end-rtl-ref.svg9
-rw-r--r--layout/reftests/svg/text/simple-dx-anchor-end-rtl.svg9
-rw-r--r--layout/reftests/svg/text/simple-dx-anchor-end.svg9
-rw-r--r--layout/reftests/svg/text/simple-dx-anchor-middle-bidi-ref.svg9
-rw-r--r--layout/reftests/svg/text/simple-dx-anchor-middle-bidi.svg9
-rw-r--r--layout/reftests/svg/text/simple-dx-anchor-middle-ref.svg9
-rw-r--r--layout/reftests/svg/text/simple-dx-anchor-middle-rtl-ref.svg9
-rw-r--r--layout/reftests/svg/text/simple-dx-anchor-middle-rtl.svg9
-rw-r--r--layout/reftests/svg/text/simple-dx-anchor-middle.svg9
-rw-r--r--layout/reftests/svg/text/simple-dx-bidi-2-ref.svg9
-rw-r--r--layout/reftests/svg/text/simple-dx-bidi-2.svg9
-rw-r--r--layout/reftests/svg/text/simple-dx-bidi-ref.svg9
-rw-r--r--layout/reftests/svg/text/simple-dx-bidi.svg9
-rw-r--r--layout/reftests/svg/text/simple-dx-rtl-2-ref.svg9
-rw-r--r--layout/reftests/svg/text/simple-dx-rtl-2.svg9
-rw-r--r--layout/reftests/svg/text/simple-dx-rtl-ref.svg9
-rw-r--r--layout/reftests/svg/text/simple-dx-rtl.svg9
-rw-r--r--layout/reftests/svg/text/simple-dx.svg9
-rw-r--r--layout/reftests/svg/text/simple-fill-color-dynamic-ref.svg9
-rw-r--r--layout/reftests/svg/text/simple-fill-color-dynamic.svg25
-rw-r--r--layout/reftests/svg/text/simple-fill-color-ref.html14
-rw-r--r--layout/reftests/svg/text/simple-fill-color-selection-ref.html21
-rw-r--r--layout/reftests/svg/text/simple-fill-color-selection.svg16
-rw-r--r--layout/reftests/svg/text/simple-fill-color.svg9
-rw-r--r--layout/reftests/svg/text/simple-fill-gradient-ref.svg14
-rw-r--r--layout/reftests/svg/text/simple-fill-gradient.svg20
-rw-r--r--layout/reftests/svg/text/simple-fill-none.svg9
-rw-r--r--layout/reftests/svg/text/simple-letter-spacing-ref.svg9
-rw-r--r--layout/reftests/svg/text/simple-letter-spacing.svg9
-rw-r--r--layout/reftests/svg/text/simple-multiline-anchor-end-ref.svg12
-rw-r--r--layout/reftests/svg/text/simple-multiline-anchor-end.svg10
-rw-r--r--layout/reftests/svg/text/simple-multiline-number-ref.svg10
-rw-r--r--layout/reftests/svg/text/simple-multiline-number.svg10
-rw-r--r--layout/reftests/svg/text/simple-multiline-pc-ref.svg10
-rw-r--r--layout/reftests/svg/text/simple-multiline-pc.svg10
-rw-r--r--layout/reftests/svg/text/simple-multiline-ref.svg10
-rw-r--r--layout/reftests/svg/text/simple-multiline.svg10
-rw-r--r--layout/reftests/svg/text/simple-multiple-dx-2.svg9
-rw-r--r--layout/reftests/svg/text/simple-multiple-dx-anchor-end-bidi-ref.svg11
-rw-r--r--layout/reftests/svg/text/simple-multiple-dx-anchor-end-bidi.svg9
-rw-r--r--layout/reftests/svg/text/simple-multiple-dx-anchor-end-ref.svg11
-rw-r--r--layout/reftests/svg/text/simple-multiple-dx-anchor-end-rtl-ref.svg11
-rw-r--r--layout/reftests/svg/text/simple-multiple-dx-anchor-end-rtl.svg9
-rw-r--r--layout/reftests/svg/text/simple-multiple-dx-anchor-end.svg9
-rw-r--r--layout/reftests/svg/text/simple-multiple-dx-anchor-middle-bidi-ref.svg15
-rw-r--r--layout/reftests/svg/text/simple-multiple-dx-anchor-middle-bidi.svg15
-rw-r--r--layout/reftests/svg/text/simple-multiple-dx-anchor-middle-ref.svg15
-rw-r--r--layout/reftests/svg/text/simple-multiple-dx-anchor-middle-rtl-ref.svg15
-rw-r--r--layout/reftests/svg/text/simple-multiple-dx-anchor-middle-rtl.svg15
-rw-r--r--layout/reftests/svg/text/simple-multiple-dx-anchor-middle.svg15
-rw-r--r--layout/reftests/svg/text/simple-multiple-dx-bidi-2.svg9
-rw-r--r--layout/reftests/svg/text/simple-multiple-dx-bidi-ref.svg11
-rw-r--r--layout/reftests/svg/text/simple-multiple-dx-bidi.svg9
-rw-r--r--layout/reftests/svg/text/simple-multiple-dx-ref.html14
-rw-r--r--layout/reftests/svg/text/simple-multiple-dx-rtl-2.svg9
-rw-r--r--layout/reftests/svg/text/simple-multiple-dx-rtl-ref.svg11
-rw-r--r--layout/reftests/svg/text/simple-multiple-dx-rtl.svg9
-rw-r--r--layout/reftests/svg/text/simple-multiple-dx.svg9
-rw-r--r--layout/reftests/svg/text/simple-pointer-events.svg7
-rw-r--r--layout/reftests/svg/text/simple-ref.html14
-rw-r--r--layout/reftests/svg/text/simple-rtl-2.svg9
-rw-r--r--layout/reftests/svg/text/simple-rtl-ref.html15
-rw-r--r--layout/reftests/svg/text/simple-rtl.svg9
-rw-r--r--layout/reftests/svg/text/simple-selection-ref.html21
-rw-r--r--layout/reftests/svg/text/simple-selection.svg16
-rw-r--r--layout/reftests/svg/text/simple-transform-rotate-ref.svg13
-rw-r--r--layout/reftests/svg/text/simple-transform-rotate.svg13
-rw-r--r--layout/reftests/svg/text/simple-underline-ref.html14
-rw-r--r--layout/reftests/svg/text/simple-underline-scaled-ref.svg3
-rw-r--r--layout/reftests/svg/text/simple-underline-scaled.svg3
-rw-r--r--layout/reftests/svg/text/simple-underline-selection-ref.html21
-rw-r--r--layout/reftests/svg/text/simple-underline-selection.svg16
-rw-r--r--layout/reftests/svg/text/simple-underline.svg9
-rw-r--r--layout/reftests/svg/text/simple-word-spacing-ref.svg9
-rw-r--r--layout/reftests/svg/text/simple-word-spacing.svg9
-rw-r--r--layout/reftests/svg/text/simple.svg9
-rw-r--r--layout/reftests/svg/text/text-shadow-ref.svg8
-rw-r--r--layout/reftests/svg/text/text-shadow.svg7
-rw-r--r--layout/reftests/svg/text/textLength-2-ref.svg40
-rw-r--r--layout/reftests/svg/text/textLength-2.svg36
-rw-r--r--layout/reftests/svg/text/textLength-3-ref.svg43
-rw-r--r--layout/reftests/svg/text/textLength-3.svg40
-rw-r--r--layout/reftests/svg/text/textLength-4-ref.svg28
-rw-r--r--layout/reftests/svg/text/textLength-4.svg20
-rw-r--r--layout/reftests/svg/text/textLength-5-ref.svg4
-rw-r--r--layout/reftests/svg/text/textLength-5.svg3
-rw-r--r--layout/reftests/svg/text/textLength-6-ref.svg4
-rw-r--r--layout/reftests/svg/text/textLength-6.svg5
-rw-r--r--layout/reftests/svg/text/textLength-ref.svg40
-rw-r--r--layout/reftests/svg/text/textLength.svg36
-rw-r--r--layout/reftests/svg/text/textpath-a-ref.svg8
-rw-r--r--layout/reftests/svg/text/textpath-a.svg8
-rw-r--r--layout/reftests/svg/text/textpath-after-anchor-end-ref.svg10
-rw-r--r--layout/reftests/svg/text/textpath-after-anchor-end.svg10
-rw-r--r--layout/reftests/svg/text/textpath-after-ref.svg11
-rw-r--r--layout/reftests/svg/text/textpath-after.svg10
-rw-r--r--layout/reftests/svg/text/textpath-anchor-end-ref.svg8
-rw-r--r--layout/reftests/svg/text/textpath-anchor-end.svg8
-rw-r--r--layout/reftests/svg/text/textpath-anchor-middle-ref.svg7
-rw-r--r--layout/reftests/svg/text/textpath-anchor-middle.svg8
-rw-r--r--layout/reftests/svg/text/textpath-cluster-2-ref.svg8
-rw-r--r--layout/reftests/svg/text/textpath-cluster-2.svg9
-rw-r--r--layout/reftests/svg/text/textpath-cluster-ref.svg12
-rw-r--r--layout/reftests/svg/text/textpath-cluster.svg12
-rw-r--r--layout/reftests/svg/text/textpath-inherit-position-ref.svg10
-rw-r--r--layout/reftests/svg/text/textpath-inherit-position.svg10
-rw-r--r--layout/reftests/svg/text/textpath-invalid-parent-ref.svg8
-rw-r--r--layout/reftests/svg/text/textpath-invalid-parent.svg8
-rw-r--r--layout/reftests/svg/text/textpath-multiline-2-ref.svg12
-rw-r--r--layout/reftests/svg/text/textpath-multiline-2.svg12
-rw-r--r--layout/reftests/svg/text/textpath-multiline-ref.svg9
-rw-r--r--layout/reftests/svg/text/textpath-multiline.svg12
-rw-r--r--layout/reftests/svg/text/textpath-multiple.svg13
-rw-r--r--layout/reftests/svg/text/textpath-ref.svg33
-rw-r--r--layout/reftests/svg/text/textpath-reset-position-ref.svg10
-rw-r--r--layout/reftests/svg/text/textpath-reset-position.svg10
-rw-r--r--layout/reftests/svg/text/textpath-selection-ref.svg39
-rw-r--r--layout/reftests/svg/text/textpath-selection.svg15
-rw-r--r--layout/reftests/svg/text/textpath-vertical-dx-ref.svg8
-rw-r--r--layout/reftests/svg/text/textpath-vertical-dx.svg8
-rw-r--r--layout/reftests/svg/text/textpath-vertical-x-ref.svg8
-rw-r--r--layout/reftests/svg/text/textpath-vertical-x.svg8
-rw-r--r--layout/reftests/svg/text/textpath.svg8
-rw-r--r--layout/reftests/svg/text/tspan-shaping-ref.svg7
-rw-r--r--layout/reftests/svg/text/tspan-shaping.svg6
-rw-r--r--layout/reftests/svg/text/vertical-01-ref.svg12
-rw-r--r--layout/reftests/svg/text/vertical-01.svg10
-rw-r--r--layout/reftests/svg/textPath-01-ref.svg16
-rw-r--r--layout/reftests/svg/textPath-01.svg16
-rw-r--r--layout/reftests/svg/textPath-02.svg15
-rw-r--r--layout/reftests/svg/textPath-03.svg18
-rw-r--r--layout/reftests/svg/textPath-04.svg28
-rw-r--r--layout/reftests/svg/textPath-05.html21
-rw-r--r--layout/reftests/svg/textPath-06.svg19
-rw-r--r--layout/reftests/svg/textPath-line-01-ref.svg16
-rw-r--r--layout/reftests/svg/textPath-line-01.svg16
-rw-r--r--layout/reftests/svg/textPath-path-attribute-01-ref.svg24
-rw-r--r--layout/reftests/svg/textPath-path-attribute-01.svg28
-rw-r--r--layout/reftests/svg/textPath-side-attribute-01.svg45
-rw-r--r--layout/reftests/svg/thin-stroke-01.svg10
-rw-r--r--layout/reftests/svg/transform-animation-on-path-ref.html6
-rw-r--r--layout/reftests/svg/transform-animation-on-path.html20
-rw-r--r--layout/reftests/svg/transform-origin-presentation-01.svg4
-rw-r--r--layout/reftests/svg/transform-outer-svg-01-ref.svg9
-rw-r--r--layout/reftests/svg/transform-outer-svg-01.svg10
-rw-r--r--layout/reftests/svg/tspan-dxdy-01.svg10
-rw-r--r--layout/reftests/svg/tspan-dxdy-02.svg10
-rw-r--r--layout/reftests/svg/tspan-dxdy-03.svg10
-rw-r--r--layout/reftests/svg/tspan-dxdy-04.svg10
-rw-r--r--layout/reftests/svg/tspan-dxdy-05.svg10
-rw-r--r--layout/reftests/svg/tspan-dxdy-06.svg10
-rw-r--r--layout/reftests/svg/tspan-dxdy-ref.svg10
-rw-r--r--layout/reftests/svg/tspan-dxdy-textPath-01-ref.svg20
-rw-r--r--layout/reftests/svg/tspan-dxdy-textPath-01.svg20
-rw-r--r--layout/reftests/svg/tspan-rotate-01.svg11
-rw-r--r--layout/reftests/svg/tspan-rotate-02-ref.svg11
-rw-r--r--layout/reftests/svg/tspan-rotate-02.svg11
-rw-r--r--layout/reftests/svg/tspan-rotate-03.svg11
-rw-r--r--layout/reftests/svg/tspan-rotate-04-ref.svg11
-rw-r--r--layout/reftests/svg/tspan-rotate-04.svg11
-rw-r--r--layout/reftests/svg/tspan-rotate-05.svg11
-rw-r--r--layout/reftests/svg/tspan-rotate-06.svg11
-rw-r--r--layout/reftests/svg/tspan-rotate-07-ref.svg8
-rw-r--r--layout/reftests/svg/tspan-rotate-07.svg8
-rw-r--r--layout/reftests/svg/tspan-rotate-ref.svg11
-rw-r--r--layout/reftests/svg/tspan-rotate-textPath-01-ref.svg20
-rw-r--r--layout/reftests/svg/tspan-rotate-textPath-01.svg20
-rw-r--r--layout/reftests/svg/tspan-xy-01.svg11
-rw-r--r--layout/reftests/svg/tspan-xy-02.svg11
-rw-r--r--layout/reftests/svg/tspan-xy-03.svg11
-rw-r--r--layout/reftests/svg/tspan-xy-04.svg11
-rw-r--r--layout/reftests/svg/tspan-xy-05.svg11
-rw-r--r--layout/reftests/svg/tspan-xy-06.svg11
-rw-r--r--layout/reftests/svg/tspan-xy-anchor-end-01.svg11
-rw-r--r--layout/reftests/svg/tspan-xy-anchor-end-ref.svg11
-rw-r--r--layout/reftests/svg/tspan-xy-anchor-middle-01.svg11
-rw-r--r--layout/reftests/svg/tspan-xy-anchor-middle-ref.svg11
-rw-r--r--layout/reftests/svg/tspan-xy-ref.svg23
-rw-r--r--layout/reftests/svg/use-01-extref-resource.svg27
-rw-r--r--layout/reftests/svg/use-01-extref.svg24
-rw-r--r--layout/reftests/svg/use-01.svg25
-rw-r--r--layout/reftests/svg/use-02-extref-ref.svg30
-rw-r--r--layout/reftests/svg/use-02-extref-resource.svg34
-rw-r--r--layout/reftests/svg/use-02-extref.svg28
-rw-r--r--layout/reftests/svg/use-02.svg17
-rw-r--r--layout/reftests/svg/use-children.svg13
-rw-r--r--layout/reftests/svg/use-element-shadow-tree-rule-matching.html79
-rw-r--r--layout/reftests/svg/use-extref-dataURI-01.svg12
-rw-r--r--layout/reftests/svg/use-image-01.svg10
-rw-r--r--layout/reftests/svg/use-localRef-clipPath-01-ref.svg17
-rw-r--r--layout/reftests/svg/use-localRef-clipPath-01.svg23
-rw-r--r--layout/reftests/svg/use-localRef-clipPath-resource.svg16
-rw-r--r--layout/reftests/svg/use-localRef-fill-01-ref.svg12
-rw-r--r--layout/reftests/svg/use-localRef-fill-01.svg25
-rw-r--r--layout/reftests/svg/use-localRef-fill-resource.svg19
-rw-r--r--layout/reftests/svg/use-localRef-filter-01-ref.svg11
-rw-r--r--layout/reftests/svg/use-localRef-filter-01.svg22
-rw-r--r--layout/reftests/svg/use-localRef-filter-resource.svg16
-rw-r--r--layout/reftests/svg/use-localRef-link.html15
-rw-r--r--layout/reftests/svg/use-localRef-marker-01-ref.svg29
-rw-r--r--layout/reftests/svg/use-localRef-marker-01.svg30
-rw-r--r--layout/reftests/svg/use-localRef-marker-resource.svg18
-rw-r--r--layout/reftests/svg/use-localRef-mask-01-ref.svg17
-rw-r--r--layout/reftests/svg/use-localRef-mask-01.svg22
-rw-r--r--layout/reftests/svg/use-localRef-mask-resource.svg16
-rw-r--r--layout/reftests/svg/use-localRef-stroke-01-ref.svg12
-rw-r--r--layout/reftests/svg/use-localRef-stroke-01.svg26
-rw-r--r--layout/reftests/svg/use-localRef-stroke-resource.svg19
-rw-r--r--layout/reftests/svg/use-restrictions-not-restricted-ref.svg11
-rw-r--r--layout/reftests/svg/use-restrictions.svg14
-rw-r--r--layout/reftests/svg/userSpaceOnUse-and-pattern-01-ref.svg17
-rw-r--r--layout/reftests/svg/userSpaceOnUse-and-pattern-01.svg18
-rw-r--r--layout/reftests/svg/viewBox-and-pattern-01.svg19
-rw-r--r--layout/reftests/svg/viewBox-and-pattern-02.svg20
-rw-r--r--layout/reftests/svg/viewBox-and-pattern-03.svg19
-rw-r--r--layout/reftests/svg/viewBox-and-pattern-04.svg17
-rw-r--r--layout/reftests/svg/viewBox-and-symbol-01.svg14
-rw-r--r--layout/reftests/svg/viewBox-invalid-01.svg127
-rw-r--r--layout/reftests/svg/viewBox-invalid-02.svg38
-rw-r--r--layout/reftests/svg/viewBox-valid-01.svg96
-rw-r--r--layout/reftests/svg/viewBox-valid-02.xhtml27
-rw-r--r--layout/reftests/svg/viewport-percent-graphic-user-01.svg15
-rw-r--r--layout/reftests/svg/winding-01.svg11
-rw-r--r--layout/reftests/svg/zero-stroke-01.svg12
2671 files changed, 59062 insertions, 0 deletions
diff --git a/layout/reftests/svg/1570363-1-ref.html b/layout/reftests/svg/1570363-1-ref.html
new file mode 100644
index 0000000000..a22b19e038
--- /dev/null
+++ b/layout/reftests/svg/1570363-1-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE HTML>
+<html><head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<style>
+path {
+ stroke: black;
+ stroke-width: 8;
+}
+
+.small {
+ transform: scale(0.25, 0.25);
+ transform-origin: 50% 50%;
+ /*transform-box: fill-box;*/
+}
+</style>
+</head>
+<body>
+
+<svg width="500" height="500">
+ <g class="small">
+ <path d="M 20,250 L 480,250" style="stroke: green"/>
+ </g>
+ <g class="small">
+ <path d="M 250,20 L 250,480" style="stroke: green"/>
+ </g>
+</svg>
+</body>
+
+</html>
diff --git a/layout/reftests/svg/1570363-1.html b/layout/reftests/svg/1570363-1.html
new file mode 100644
index 0000000000..6f754a9634
--- /dev/null
+++ b/layout/reftests/svg/1570363-1.html
@@ -0,0 +1,29 @@
+<!DOCTYPE HTML>
+<html><head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<style>
+path {
+ stroke: black;
+ stroke-width: 8;
+}
+
+.small {
+ transform: scale(0.25, 0.25);
+ transform-origin: 50% 50%;
+ transform-box: fill-box;
+}
+</style>
+</head>
+<body>
+
+<svg width="500" height="500">
+ <g class="small">
+ <path d="M 20,250 L 480,250" style="stroke: green"/>
+ </g>
+ <g class="small">
+ <path d="M 250,20 L 250,480" style="stroke: green"/>
+ </g>
+</svg>
+</body>
+
+</html>
diff --git a/layout/reftests/svg/1792313-ref.svg b/layout/reftests/svg/1792313-ref.svg
new file mode 100644
index 0000000000..086367c12d
--- /dev/null
+++ b/layout/reftests/svg/1792313-ref.svg
@@ -0,0 +1,4 @@
+<svg width="500" height="500" viewBox="0 0 500 500" version="2.0" xmlns="http://www.w3.org/2000/svg">
+ <rect fill="red" x="-5" y="-5" width="510" height="510"/>
+ <rect fill="blue" x="50" y="50" width="400" height="400"/>
+</svg>
diff --git a/layout/reftests/svg/1792313.svg b/layout/reftests/svg/1792313.svg
new file mode 100644
index 0000000000..639bcec48b
--- /dev/null
+++ b/layout/reftests/svg/1792313.svg
@@ -0,0 +1,4 @@
+<svg width="500" height="500" viewBox="0 0 0.1 0.1" version="2.0" xmlns="http://www.w3.org/2000/svg">
+ <rect fill="red" x="-1" y="-1" width="3" height="3"/>
+ <rect fill="blue" x="0.01" y="0.01" width="0.08" height="0.08"/>
+</svg>
diff --git a/layout/reftests/svg/active-clip-and-mask-ref.html b/layout/reftests/svg/active-clip-and-mask-ref.html
new file mode 100644
index 0000000000..2f26fb66fd
--- /dev/null
+++ b/layout/reftests/svg/active-clip-and-mask-ref.html
@@ -0,0 +1,12 @@
+<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
+ <rect width="100%" height="100%" fill="grey"/>
+ <g transform="translate(80 30)">
+ <rect x="-80" y="100" width="100" height="100" fill="blue"/>
+ <rect x="-60" y="120" width="40" height="40" fill="grey"/>
+
+ <rect x="60" y="100" width="100" height="100" fill="blue"/>
+ <rect x="80" y="120" width="40" height="40" fill="grey"/>
+
+ <rect x="180" y="100" width="100" height="100" fill="blue"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/active-clip-and-mask.html b/layout/reftests/svg/active-clip-and-mask.html
new file mode 100644
index 0000000000..64cc269592
--- /dev/null
+++ b/layout/reftests/svg/active-clip-and-mask.html
@@ -0,0 +1,41 @@
+<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
+ <rect width="100%" height="100%" fill="grey"/>
+ <g transform="translate(80 30)">
+
+ <!-- active blob group with clip path and mask -->
+ <clipPath id="c4" clipPathUnits="userSpaceOnUse">
+ <rect x="-80" y="100" width="100" height="100"/>
+ </clipPath>
+ <mask id="m4">
+ <rect x="-80" y="100" width="100" height="100" fill="white"/>
+ <rect x="-60" y="120" width="40" height="40" fill="black"/>
+ </mask>
+ <g mask="url(#m4)" clip-path="url(#c4)">
+ <g style = "will-change: opacity;">
+ <rect x="-80" y="100" width="100" height="100" fill="blue"/>
+ </g>
+ </g>
+
+ <!-- active blob group with mask only -->
+ <mask id="m5">
+ <rect x="60" y="100" width="100" height="100" fill="white"/>
+ <rect x="80" y="120" width="40" height="40" fill="black"/>
+ </mask>
+ <g mask="url(#m5)">
+ <g style = "will-change: opacity;">
+ <rect x="60" y="100" width="100" height="100" fill="blue"/>
+ </g>
+ </g>
+
+ <!-- active item with clip path only -->
+ <clipPath id="c6" clipPathUnits="userSpaceOnUse">
+ <rect x="180" y="100" width="100" height="100"/>
+ </clipPath>
+ <g clip-path="url(#c6)">
+ <g style = "will-change: opacity;">
+ <rect x="180" y="100" width="100" height="100" fill="blue"/>
+ </g>
+ </g>
+
+ </g>
+</svg>
diff --git a/layout/reftests/svg/active-transform-blend-mode-ref.html b/layout/reftests/svg/active-transform-blend-mode-ref.html
new file mode 100644
index 0000000000..6bb1bee6e4
--- /dev/null
+++ b/layout/reftests/svg/active-transform-blend-mode-ref.html
@@ -0,0 +1,8 @@
+<svg width=1000 height=1000>
+ <g style="transform: translateY(-2px) translateX(0px) translateZ(0px);">
+ <rect fill="#0000ff" height="93" width="32" x="100" y="163"></rect>
+ </g>
+ <g style="mix-blend-mode: multiply;">
+ <rect fill="#ff0000" height="93" width="32" x="100" y="161"></rect>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/active-transform-blend-mode.html b/layout/reftests/svg/active-transform-blend-mode.html
new file mode 100644
index 0000000000..2ed8dc4646
--- /dev/null
+++ b/layout/reftests/svg/active-transform-blend-mode.html
@@ -0,0 +1,8 @@
+<svg width=1000 height=1000>
+ <g style="transform: translateY(-2px) translateX(0px) translateZ(0px); will-change: transform;">
+ <rect fill="#0000ff" height="93" width="32" x="100" y="163"></rect>
+ </g>
+ <g style="mix-blend-mode: multiply;">
+ <rect fill="#ff0000" height="93" width="32" x="100" y="161"></rect>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/as-image/background-display-none-1.html b/layout/reftests/svg/as-image/background-display-none-1.html
new file mode 100644
index 0000000000..9c638134e2
--- /dev/null
+++ b/layout/reftests/svg/as-image/background-display-none-1.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Test for a CSS background pointing to an SVG image that has "display:none"
+ on the root node. -->
+<html>
+<body>
+ <div style="width: 100px; height: 100px;
+ background-image: url('display-none.svg')">
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/background-image-rect-1png.html b/layout/reftests/svg/as-image/background-image-rect-1png.html
new file mode 100644
index 0000000000..42813d6694
--- /dev/null
+++ b/layout/reftests/svg/as-image/background-image-rect-1png.html
@@ -0,0 +1,8 @@
+<html>
+<body>
+ <div style="height: 100px; width: 100px;
+ background-image: -moz-image-rect(url('limeInRed100x100.png'),
+ 25,75,75,25)">
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/background-image-rect-1svg.html b/layout/reftests/svg/as-image/background-image-rect-1svg.html
new file mode 100644
index 0000000000..728c780acc
--- /dev/null
+++ b/layout/reftests/svg/as-image/background-image-rect-1svg.html
@@ -0,0 +1,8 @@
+<html>
+<body>
+ <div style="height: 100px; width: 100px;
+ background-image: -moz-image-rect(url('limeInRed100x100.svg'),
+ 25,75,75,25)">
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/background-image-rect-2.html b/layout/reftests/svg/as-image/background-image-rect-2.html
new file mode 100644
index 0000000000..15f861d40f
--- /dev/null
+++ b/layout/reftests/svg/as-image/background-image-rect-2.html
@@ -0,0 +1,8 @@
+<html>
+<body>
+ <div style="height: 100px; width: 100px;
+ background-image: -moz-image-rect(url('lime100x100.svg'),
+ 0,100,100,0)">
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/background-resize-1.html b/layout/reftests/svg/as-image/background-resize-1.html
new file mode 100644
index 0000000000..72111ceaf3
--- /dev/null
+++ b/layout/reftests/svg/as-image/background-resize-1.html
@@ -0,0 +1,18 @@
+<html class="reftest-wait">
+<head>
+<script>
+ function doTest() {
+ document.getElementById("myDiv").style.width = "100px";
+ document.documentElement.removeAttribute("class");
+ }
+ window.addEventListener("MozReftestInvalidate", doTest);
+</script>
+</head>
+<body>
+ <div id="myDiv"
+ style="width: 10px;
+ height: 100px;
+ background-image: url('lime100x100.svg')">
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/background-resize-2.html b/layout/reftests/svg/as-image/background-resize-2.html
new file mode 100644
index 0000000000..86df50c02b
--- /dev/null
+++ b/layout/reftests/svg/as-image/background-resize-2.html
@@ -0,0 +1,18 @@
+<html class="reftest-wait">
+<head>
+<script>
+ function doTest() {
+ document.getElementById("myDiv").style.width = "100px";
+ document.documentElement.removeAttribute("class");
+ }
+ window.addEventListener("MozReftestInvalidate", doTest);
+</script>
+</head>
+<body>
+ <div id="myDiv"
+ style="width: 10px;
+ height: 100px;
+ background-image: url('lime100x100-noSVGDimensions.svg')">
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/background-resize-3.html b/layout/reftests/svg/as-image/background-resize-3.html
new file mode 100644
index 0000000000..e87c148e74
--- /dev/null
+++ b/layout/reftests/svg/as-image/background-resize-3.html
@@ -0,0 +1,19 @@
+<!-- Test for bug 600574 -->
+<html class="reftest-wait">
+<head>
+<script>
+ function doTest() {
+ document.getElementById("myDiv").style.width = "100px";
+ document.documentElement.removeAttribute("class");
+ }
+ window.addEventListener("MozReftestInvalidate", doTest);
+</script>
+</head>
+<body>
+ <div id="myDiv"
+ style="width: 10px;
+ height: 100px;
+ background-image: url('limeInRed-noSVGDimensions-viewBox.svg')">
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/background-resize-4.html b/layout/reftests/svg/as-image/background-resize-4.html
new file mode 100644
index 0000000000..ed4ea4f085
--- /dev/null
+++ b/layout/reftests/svg/as-image/background-resize-4.html
@@ -0,0 +1,20 @@
+<!-- Test for bug 600574 -->
+<html class="reftest-wait">
+<head>
+<script>
+ function doTest() {
+ document.getElementById("myDiv").style.width = "100px";
+ document.documentElement.removeAttribute("class");
+ }
+ window.addEventListener("MozReftestInvalidate", doTest);
+</script>
+</head>
+<body>
+ <div id="myDiv"
+ style="width: 10px;
+ height: 100px;
+ background-image:
+ url('limeInRed-noSVGDimensions-animViewBox.svg')">
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/background-scale-no-viewbox-1-ref.html b/layout/reftests/svg/as-image/background-scale-no-viewbox-1-ref.html
new file mode 100644
index 0000000000..e9ee74d29b
--- /dev/null
+++ b/layout/reftests/svg/as-image/background-scale-no-viewbox-1-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <style>
+ div {
+ background-color: white;
+ width: 12px;
+ height: 60px;
+ }
+ body {
+ background-color: black;
+ margin: 0px;
+ padding: 0px;
+ border: 0px;
+ }
+ </style>
+</head>
+<body>
+ <div></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/background-scale-no-viewbox-1.html b/layout/reftests/svg/as-image/background-scale-no-viewbox-1.html
new file mode 100644
index 0000000000..e8ea278bb6
--- /dev/null
+++ b/layout/reftests/svg/as-image/background-scale-no-viewbox-1.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html reftest-zoom="2.0">
+<head>
+ <style>
+ div {
+ background-color: yellow;
+ background-image: url("white-rect-no-viewbox.svg");
+ width: 6px;
+ height: 30px;
+ }
+ body {
+ background-color: black;
+ margin: 0px;
+ padding: 0px;
+ border: 0px;
+ }
+ </style>
+</head>
+<body>
+ <div></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/background-scale-with-viewbox-1-ref.html b/layout/reftests/svg/as-image/background-scale-with-viewbox-1-ref.html
new file mode 100644
index 0000000000..e9ee74d29b
--- /dev/null
+++ b/layout/reftests/svg/as-image/background-scale-with-viewbox-1-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <style>
+ div {
+ background-color: white;
+ width: 12px;
+ height: 60px;
+ }
+ body {
+ background-color: black;
+ margin: 0px;
+ padding: 0px;
+ border: 0px;
+ }
+ </style>
+</head>
+<body>
+ <div></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/background-scale-with-viewbox-1.html b/layout/reftests/svg/as-image/background-scale-with-viewbox-1.html
new file mode 100644
index 0000000000..295aedf520
--- /dev/null
+++ b/layout/reftests/svg/as-image/background-scale-with-viewbox-1.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html reftest-zoom="2.0">
+<head>
+ <style>
+ div {
+ background-color: yellow;
+ background-image: url("white-rect-with-viewbox.svg");
+ width: 6px;
+ height: 30px;
+ }
+ body {
+ background-color: black;
+ margin: 0px;
+ padding: 0px;
+ border: 0px;
+ }
+ </style>
+</head>
+<body>
+ <div></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/background-simple-1.html b/layout/reftests/svg/as-image/background-simple-1.html
new file mode 100644
index 0000000000..d368b58318
--- /dev/null
+++ b/layout/reftests/svg/as-image/background-simple-1.html
@@ -0,0 +1,6 @@
+<html>
+<body>
+ <div style="height: 100px; width: 100px;
+ background-image: url('lime100x100.svg')">
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/background-simple-2.html b/layout/reftests/svg/as-image/background-simple-2.html
new file mode 100644
index 0000000000..1b4cbba245
--- /dev/null
+++ b/layout/reftests/svg/as-image/background-simple-2.html
@@ -0,0 +1,6 @@
+<html>
+<body>
+ <div style="height: 100px; width: 100px;
+ background-image: url('limeInRed100x100-viewBox.svg')">
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/background-stretch-1-ref.html b/layout/reftests/svg/as-image/background-stretch-1-ref.html
new file mode 100644
index 0000000000..3b017fbdf7
--- /dev/null
+++ b/layout/reftests/svg/as-image/background-stretch-1-ref.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <style>
+ div {
+ background-color: yellow;
+ height: 30px;
+ }
+ .container {
+ width: 100px;
+ }
+ .should-not-stretch {
+ width: 6px;
+ background-color: white;
+ display: inline-block;
+ }
+ .left-spacer {
+ width: 47px;
+ float: left;
+ }
+ .right-spacer {
+ width: 47px;
+ float: right;
+ }
+ body {
+ background-color: black;
+ }
+ </style>
+</head>
+<body>
+ <div class="container">
+ <div class="left-spacer"></div>
+ <div class="should-not-stretch"></div>
+ <div class="right-spacer"></div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/background-stretch-1.html b/layout/reftests/svg/as-image/background-stretch-1.html
new file mode 100644
index 0000000000..0931cf3ccc
--- /dev/null
+++ b/layout/reftests/svg/as-image/background-stretch-1.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <style>
+ div {
+ height: 30px;
+ width: 100px;
+ background-image: url("white-rect-with-viewbox.svg");
+ background-repeat: no-repeat;
+ background-position: 30px;
+ background-size: 40px 30px;
+ background-color: yellow;
+ }
+ body {
+ background-color: black;
+ }
+ </style>
+</head>
+<body>
+ <div></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/background-viewBox-1.html b/layout/reftests/svg/as-image/background-viewBox-1.html
new file mode 100644
index 0000000000..077dedfeb7
--- /dev/null
+++ b/layout/reftests/svg/as-image/background-viewBox-1.html
@@ -0,0 +1,7 @@
+<html>
+<body>
+ <div style="height: 100px; width: 100px;
+ background-image: url('limeInRed100x100-viewBox.svg')">
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/black100x100-ref.html b/layout/reftests/svg/as-image/black100x100-ref.html
new file mode 100644
index 0000000000..0d0121ccb8
--- /dev/null
+++ b/layout/reftests/svg/as-image/black100x100-ref.html
@@ -0,0 +1,5 @@
+<html>
+<body>
+ <div style="width: 100px; height: 100px; background: black"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/blue-square-in-square-par-none.svg b/layout/reftests/svg/as-image/blue-square-in-square-par-none.svg
new file mode 100644
index 0000000000..33a08a0bca
--- /dev/null
+++ b/layout/reftests/svg/as-image/blue-square-in-square-par-none.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0"?>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<svg preserveAspectRatio="none" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+<rect x="0" y="0" width="100" height="100" stroke-width="0" fill="blue"/>
+<rect x="10" y="10" width="80" height="80" stroke-width="0" fill="lightblue"/>
+</svg>
diff --git a/layout/reftests/svg/as-image/blue-square-in-square.svg b/layout/reftests/svg/as-image/blue-square-in-square.svg
new file mode 100644
index 0000000000..d43a27951d
--- /dev/null
+++ b/layout/reftests/svg/as-image/blue-square-in-square.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0"?>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+<rect x="0" y="0" width="100" height="100" stroke-width="0" fill="blue"/>
+<rect x="10" y="10" width="80" height="80" stroke-width="0" fill="lightblue"/>
+</svg>
diff --git a/layout/reftests/svg/as-image/blue100x100-border-ref.html b/layout/reftests/svg/as-image/blue100x100-border-ref.html
new file mode 100644
index 0000000000..1bd865856c
--- /dev/null
+++ b/layout/reftests/svg/as-image/blue100x100-border-ref.html
@@ -0,0 +1,5 @@
+<html>
+<body>
+ <div style="width: 100px; height: 100px; border: 10px solid blue; box-sizing: border-box;"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/blue100x100-ref.html b/layout/reftests/svg/as-image/blue100x100-ref.html
new file mode 100644
index 0000000000..307fbd6bd3
--- /dev/null
+++ b/layout/reftests/svg/as-image/blue100x100-ref.html
@@ -0,0 +1,5 @@
+<html>
+<body>
+ <div style="width: 100px; height: 100px; background: blue"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/blue100x100.svg b/layout/reftests/svg/as-image/blue100x100.svg
new file mode 100644
index 0000000000..a9c8eba794
--- /dev/null
+++ b/layout/reftests/svg/as-image/blue100x100.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+ width="100" height="100">
+ <rect width="100%" height="100%" fill="blue"/>
+</svg>
diff --git a/layout/reftests/svg/as-image/border-image-simple-1.html b/layout/reftests/svg/as-image/border-image-simple-1.html
new file mode 100644
index 0000000000..e6b696e1d2
--- /dev/null
+++ b/layout/reftests/svg/as-image/border-image-simple-1.html
@@ -0,0 +1,6 @@
+<html>
+<body>
+ <div style="height: 100px; width: 100px;
+ border-image: url('lime100x100.png') 0 fill;"/>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/border-image-simple-2.html b/layout/reftests/svg/as-image/border-image-simple-2.html
new file mode 100644
index 0000000000..4eba8cee53
--- /dev/null
+++ b/layout/reftests/svg/as-image/border-image-simple-2.html
@@ -0,0 +1,6 @@
+<html>
+<body>
+ <div style="height: 100px; width: 100px;
+ border-image: url('lime100x100-noSVGDimensions.svg') 0 fill;"/>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/canvas-drawImage-alpha-1-ref.html b/layout/reftests/svg/as-image/canvas-drawImage-alpha-1-ref.html
new file mode 100644
index 0000000000..b2be295acb
--- /dev/null
+++ b/layout/reftests/svg/as-image/canvas-drawImage-alpha-1-ref.html
@@ -0,0 +1,6 @@
+<html>
+<body>
+ <div style="width: 100px; height: 100px; background: orange; position:absolute"></div>
+ <div style="width: 100px; height: 100px; background: lime; opacity: .25; position:absolute"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/canvas-drawImage-alpha-1.html b/layout/reftests/svg/as-image/canvas-drawImage-alpha-1.html
new file mode 100644
index 0000000000..ca6a362c34
--- /dev/null
+++ b/layout/reftests/svg/as-image/canvas-drawImage-alpha-1.html
@@ -0,0 +1,22 @@
+<html>
+ <head>
+ <script type="text/javascript">
+ function go() {
+ var canvas = document.getElementById("canvas");
+ var ctx = canvas.getContext("2d");
+ var image = document.getElementById("image");
+
+ // Draw some orange
+ ctx.fillStyle = "orange";
+ ctx.fillRect(0, 0, 100, 100);
+
+ ctx.globalAlpha = 0.25;
+ ctx.drawImage(image, 0, 0);
+ }
+ </script>
+ </head>
+ <body onload="go()">
+ <canvas id="canvas" width="200" height="200"></canvas>
+ <img id="image" src="lime100x100.svg" style="display: none">
+ </body>
+</html>
diff --git a/layout/reftests/svg/as-image/canvas-drawImage-alpha-2-ref.html b/layout/reftests/svg/as-image/canvas-drawImage-alpha-2-ref.html
new file mode 100644
index 0000000000..563e60bb91
--- /dev/null
+++ b/layout/reftests/svg/as-image/canvas-drawImage-alpha-2-ref.html
@@ -0,0 +1,6 @@
+<html>
+<body>
+ <embed style="width: 200px; height: 200px;"
+ src="squaredCircle-transparent.svg"/>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/canvas-drawImage-alpha-2.html b/layout/reftests/svg/as-image/canvas-drawImage-alpha-2.html
new file mode 100644
index 0000000000..ca56934f6b
--- /dev/null
+++ b/layout/reftests/svg/as-image/canvas-drawImage-alpha-2.html
@@ -0,0 +1,22 @@
+<html>
+ <head>
+ <script type="text/javascript">
+ function go() {
+ var canvas = document.getElementById("canvas");
+ var ctx = canvas.getContext("2d");
+ var image = document.getElementById("image");
+
+ // Draw some orange
+ ctx.fillStyle = "orange";
+ ctx.fillRect(0, 0, 200, 200);
+
+ ctx.globalAlpha = 0.75;
+ ctx.drawImage(image, 0, 0, 200, 200);
+ }
+ </script>
+ </head>
+ <body onload="go()">
+ <canvas id="canvas" width="200" height="200"></canvas>
+ <img id="image" src="squaredCircle-viewBox-100x100.svg" style="display: none">
+ </body>
+</html>
diff --git a/layout/reftests/svg/as-image/canvas-drawImage-origin-clean-1.html b/layout/reftests/svg/as-image/canvas-drawImage-origin-clean-1.html
new file mode 100644
index 0000000000..c363bad581
--- /dev/null
+++ b/layout/reftests/svg/as-image/canvas-drawImage-origin-clean-1.html
@@ -0,0 +1,24 @@
+<html>
+ <head>
+ <script type="text/javascript">
+ function go() {
+ var canvas = document.getElementById("canvas");
+ var ctx = canvas.getContext("2d");
+ var image = document.getElementById("image");
+
+ // Draw the SVG image
+ ctx.drawImage(image, 0, 0);
+
+ try {
+ canvas.toDataURL();
+ } catch (ex) {
+ document.body.textContent = ex;
+ }
+ }
+ </script>
+ </head>
+ <body onload="go()">
+ <canvas id="canvas" width="200" height="200"></canvas>
+ <img id="image" src="lime100x100.svg" style="display: none">
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/canvas-drawImage-scale-1a.html b/layout/reftests/svg/as-image/canvas-drawImage-scale-1a.html
new file mode 100644
index 0000000000..da382386f4
--- /dev/null
+++ b/layout/reftests/svg/as-image/canvas-drawImage-scale-1a.html
@@ -0,0 +1,27 @@
+<html class="reftest-wait">
+ <head>
+ <script type="text/javascript">
+ function go() {
+ var canvas = document.getElementById("canvas");
+ var ctx = canvas.getContext("2d");
+
+ // Draw some orange
+ ctx.fillStyle = "orange";
+ ctx.fillRect(0, 0, 100, 100);
+
+ // Instantiate an image. Once it has loaded, draw it & take snapshot.
+ var image = new Image();
+ image.onload = function() {
+ // Note that our canvas is 100x100, so our scaled 200x200 image will
+ // get cropped to 100x100.
+ ctx.drawImage(image, 0, 0, 200, 200);
+ document.documentElement.removeAttribute("class");
+ }
+ image.src ="lime100x100.svg";
+ }
+ </script>
+ </head>
+ <body onload="go()">
+ <canvas id="canvas" width="100" height="100"></canvas>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/canvas-drawImage-scale-1b.html b/layout/reftests/svg/as-image/canvas-drawImage-scale-1b.html
new file mode 100644
index 0000000000..94154d480e
--- /dev/null
+++ b/layout/reftests/svg/as-image/canvas-drawImage-scale-1b.html
@@ -0,0 +1,28 @@
+<html class="reftest-wait">
+ <head>
+ <script type="text/javascript">
+ function go() {
+ var canvas = document.getElementById("canvas");
+ var ctx = canvas.getContext("2d");
+
+ // Draw some orange
+ ctx.fillStyle = "orange";
+ ctx.fillRect(0, 0, 100, 100);
+
+ // Instantiate an image. Once it has loaded, draw it & take snapshot.
+ var image = new Image();
+ image.onload = function() {
+ // Note that our canvas is 100x100, so our scaled 200x200 image will
+ // get cropped to 100x100.
+ ctx.scale(2, 2); // Scale our image-drawing by 2
+ ctx.drawImage(image, 0, 0);
+ document.documentElement.removeAttribute("class");
+ }
+ image.src ="lime100x100.svg";
+ }
+ </script>
+ </head>
+ <body onload="go()">
+ <canvas id="canvas" width="100" height="100"></canvas>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/canvas-drawImage-scale-1c.html b/layout/reftests/svg/as-image/canvas-drawImage-scale-1c.html
new file mode 100644
index 0000000000..92eed4e101
--- /dev/null
+++ b/layout/reftests/svg/as-image/canvas-drawImage-scale-1c.html
@@ -0,0 +1,26 @@
+<html class="reftest-wait">
+ <head>
+ <script type="text/javascript">
+ function go() {
+ var canvas = document.getElementById("canvas");
+ var ctx = canvas.getContext("2d");
+
+ // Draw some orange
+ ctx.fillStyle = "orange";
+ ctx.fillRect(0, 0, 100, 100);
+
+ // Instantiate an image. Once it has loaded, draw it & take snapshot.
+ var image = new Image();
+ image.onload = function() {
+ ctx.scale(2, 2); // Scale our image-drawing by 2
+ ctx.drawImage(image, 0, 0);
+ document.documentElement.removeAttribute("class");
+ }
+ image.src ="lime50x50.svg";
+ }
+ </script>
+ </head>
+ <body onload="go()">
+ <canvas id="canvas" width="200" height="200"></canvas>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/canvas-drawImage-scale-2-ref.html b/layout/reftests/svg/as-image/canvas-drawImage-scale-2-ref.html
new file mode 100644
index 0000000000..bd4585eaa9
--- /dev/null
+++ b/layout/reftests/svg/as-image/canvas-drawImage-scale-2-ref.html
@@ -0,0 +1,6 @@
+<html>
+<body>
+ <embed style="width: 200px; height: 200px"
+ src="squaredCircle-viewBox-noSize.svg">
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/canvas-drawImage-scale-2a.html b/layout/reftests/svg/as-image/canvas-drawImage-scale-2a.html
new file mode 100644
index 0000000000..0e8cf233ff
--- /dev/null
+++ b/layout/reftests/svg/as-image/canvas-drawImage-scale-2a.html
@@ -0,0 +1,26 @@
+<html class="reftest-wait">
+ <head>
+ <script type="text/javascript">
+ function go() {
+ var canvas = document.getElementById("canvas");
+ var ctx = canvas.getContext("2d");
+
+ // Draw some orange
+ ctx.fillStyle = "orange";
+ ctx.fillRect(0, 0, 200, 200);
+
+ // Instantiate an image. Draw it at a larger size, & take snapshot
+ // once it has loaded.
+ var image = new Image();
+ image.onload = function() {
+ ctx.drawImage(image, 0, 0, 200, 200);
+ document.documentElement.removeAttribute("class");
+ }
+ image.src ="squaredCircle-viewBox-100x100.svg";
+ }
+ </script>
+ </head>
+ <body onload="go()">
+ <canvas id="canvas" width="200" height="200"></canvas>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/canvas-drawImage-scale-2b.html b/layout/reftests/svg/as-image/canvas-drawImage-scale-2b.html
new file mode 100644
index 0000000000..f3ca821230
--- /dev/null
+++ b/layout/reftests/svg/as-image/canvas-drawImage-scale-2b.html
@@ -0,0 +1,26 @@
+<html class="reftest-wait">
+ <head>
+ <script type="text/javascript">
+ function go() {
+ var canvas = document.getElementById("canvas");
+ var ctx = canvas.getContext("2d");
+
+ // Draw some orange
+ ctx.fillStyle = "orange";
+ ctx.fillRect(0, 0, 200, 200);
+
+ // Instantiate an image. Once it has loaded, draw it & take snapshot.
+ var image = new Image();
+ image.onload = function() {
+ ctx.scale(2, 2);
+ ctx.drawImage(image, 0, 0);
+ document.documentElement.removeAttribute("class");
+ }
+ image.src ="squaredCircle-viewBox-100x100.svg";
+ }
+ </script>
+ </head>
+ <body onload="go()">
+ <canvas id="canvas" width="200" height="200"></canvas>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/canvas-drawImage-simple-1a.html b/layout/reftests/svg/as-image/canvas-drawImage-simple-1a.html
new file mode 100644
index 0000000000..b40d5fc39a
--- /dev/null
+++ b/layout/reftests/svg/as-image/canvas-drawImage-simple-1a.html
@@ -0,0 +1,22 @@
+<html>
+ <head>
+ <script type="text/javascript">
+ function go() {
+ var canvas = document.getElementById("canvas");
+ var ctx = canvas.getContext("2d");
+ var image = document.getElementById("image");
+
+ // Draw some orange
+ ctx.fillStyle = "orange";
+ ctx.fillRect(0, 0, 100, 100);
+
+ // Draw the SVG image on top of our red
+ ctx.drawImage(image, 0, 0);
+ }
+ </script>
+ </head>
+ <body onload="go()">
+ <canvas id="canvas" width="200" height="200"></canvas>
+ <img id="image" src="lime100x100.svg" style="display: none">
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/canvas-drawImage-simple-1b.html b/layout/reftests/svg/as-image/canvas-drawImage-simple-1b.html
new file mode 100644
index 0000000000..f3348b1e16
--- /dev/null
+++ b/layout/reftests/svg/as-image/canvas-drawImage-simple-1b.html
@@ -0,0 +1,25 @@
+<html class="reftest-wait">
+ <head>
+ <script type="text/javascript">
+ function go() {
+ var canvas = document.getElementById("canvas");
+ var ctx = canvas.getContext("2d");
+
+ // Draw some orange
+ ctx.fillStyle = "orange";
+ ctx.fillRect(0, 0, 100, 100);
+
+ // Instantiate an image. Once it has loaded, draw it & take snapshot.
+ var image = new Image();
+ image.onload = function() {
+ ctx.drawImage(image, 0, 0);
+ document.documentElement.removeAttribute("class");
+ }
+ image.src ="lime100x100.svg";
+ }
+ </script>
+ </head>
+ <body onload="go()">
+ <canvas id="canvas" width="200" height="200"></canvas>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/canvas-drawImage-slice-1a.html b/layout/reftests/svg/as-image/canvas-drawImage-slice-1a.html
new file mode 100644
index 0000000000..6f173b7d6b
--- /dev/null
+++ b/layout/reftests/svg/as-image/canvas-drawImage-slice-1a.html
@@ -0,0 +1,28 @@
+<html class="reftest-wait">
+ <head>
+ <script type="text/javascript">
+ function go() {
+ var canvas = document.getElementById("canvas");
+ var ctx = canvas.getContext("2d");
+
+ // Draw some orange
+ ctx.fillStyle = "orange";
+ ctx.fillRect(0, 0, 100, 100);
+
+ // Instantiate an image. Once it has loaded, draw it & take snapshot.
+ var image = new Image();
+ image.onload = function() {
+ // This version of the test is "easier", in that the sampled region
+ // is offset from the red by 1px on all sides. This lets us avoid
+ // any pixel-rounding errors.
+ ctx.drawImage(image, 26, 26, 48, 48, 0, 0, 100, 100);
+ document.documentElement.removeAttribute("class");
+ }
+ image.src ="limeInRed100x100.svg";
+ }
+ </script>
+ </head>
+ <body onload="go()">
+ <canvas id="canvas" width="100" height="100"></canvas>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/canvas-drawImage-slice-1b.html b/layout/reftests/svg/as-image/canvas-drawImage-slice-1b.html
new file mode 100644
index 0000000000..6b56ce1e60
--- /dev/null
+++ b/layout/reftests/svg/as-image/canvas-drawImage-slice-1b.html
@@ -0,0 +1,25 @@
+<html class="reftest-wait">
+ <head>
+ <script type="text/javascript">
+ function go() {
+ var canvas = document.getElementById("canvas");
+ var ctx = canvas.getContext("2d");
+
+ // Draw some orange
+ ctx.fillStyle = "orange";
+ ctx.fillRect(0, 0, 100, 100);
+
+ // Instantiate an image. Once it has loaded, draw it & take snapshot.
+ var image = new Image();
+ image.onload = function() {
+ ctx.drawImage(image, 25, 25, 50, 50, 0, 0, 100, 100);
+ document.documentElement.removeAttribute("class");
+ }
+ image.src ="limeInRed100x100.svg";
+ }
+ </script>
+ </head>
+ <body onload="go()">
+ <canvas id="canvas" width="100" height="100"></canvas>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/canvas-drawImage-transform-restored-ref.html b/layout/reftests/svg/as-image/canvas-drawImage-transform-restored-ref.html
new file mode 100644
index 0000000000..5105f71921
--- /dev/null
+++ b/layout/reftests/svg/as-image/canvas-drawImage-transform-restored-ref.html
@@ -0,0 +1,18 @@
+<html>
+ <head>
+ <script type="text/javascript">
+ function go() {
+ var canvas = document.getElementById("canvas");
+ var ctx = canvas.getContext("2d");
+
+ ctx.setTransform(2, 0, 0, 2, 0, 0);
+
+ ctx.fillStyle = "blue";
+ ctx.fillRect(20, 20, 50, 50);
+ }
+ </script>
+ </head>
+ <body onload="go()">
+ <canvas id="canvas" width="200" height="200"></canvas>
+ </body>
+</html>
diff --git a/layout/reftests/svg/as-image/canvas-drawImage-transform-restored.html b/layout/reftests/svg/as-image/canvas-drawImage-transform-restored.html
new file mode 100644
index 0000000000..2d7ec38588
--- /dev/null
+++ b/layout/reftests/svg/as-image/canvas-drawImage-transform-restored.html
@@ -0,0 +1,24 @@
+<html>
+ <head>
+ <title>Test that drawImage() calls don't reset the canvas' transform</title>
+ <script type="text/javascript">
+ function go() {
+ var canvas = document.getElementById("canvas");
+ var ctx = canvas.getContext("2d");
+
+ ctx.setTransform(2, 0, 0, 2, 0, 0);
+
+ // SVG image that draws nothing
+ ctx.drawImage(document.getElementById("image"), 0, 0);
+
+ // Check that ctx's transform wasn't reset by the drawImage call
+ ctx.fillStyle = "blue";
+ ctx.fillRect(20, 20, 50, 50);
+ }
+ </script>
+ </head>
+ <body onload="go()">
+ <canvas id="canvas" width="200" height="200"></canvas>
+ <img id="image" src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='1' height='1'></svg>" style="display: none">
+ </body>
+</html>
diff --git a/layout/reftests/svg/as-image/content-outside-viewBox-1-helper.svg b/layout/reftests/svg/as-image/content-outside-viewBox-1-helper.svg
new file mode 100644
index 0000000000..ff5ff17fb9
--- /dev/null
+++ b/layout/reftests/svg/as-image/content-outside-viewBox-1-helper.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+ viewBox="0 0 100 100"
+ preserveAspectRatio="xMinYMin meet">
+ <rect width="100" height="100" fill="lime"/>
+
+ <!-- Rect to the right of viewBox -->
+ <rect x="300" width="100" height="100" fill="blue"/>
+
+ <!-- Rect below viewBox -->
+ <rect y="300" width="100" height="100" fill="purple"/>
+</svg>
diff --git a/layout/reftests/svg/as-image/context-fill-01.html b/layout/reftests/svg/as-image/context-fill-01.html
new file mode 100644
index 0000000000..b25eac4c45
--- /dev/null
+++ b/layout/reftests/svg/as-image/context-fill-01.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Basic context-fill test</title>
+ <style>
+
+img {
+ width: 100px;
+ height: 100px;
+ -moz-context-properties: fill;
+ fill: lime;
+}
+
+ </style>
+ </head>
+ <body>
+ <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='context-fill blue'/></svg>">
+ </body>
+</html>
diff --git a/layout/reftests/svg/as-image/context-fill-02.html b/layout/reftests/svg/as-image/context-fill-02.html
new file mode 100644
index 0000000000..e476d1e04a
--- /dev/null
+++ b/layout/reftests/svg/as-image/context-fill-02.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Basic context-fill test (without a fallback color)</title>
+ <style>
+
+img {
+ width: 100px;
+ height: 100px;
+ -moz-context-properties: fill;
+ fill: lime;
+ border: 1px solid black;
+}
+
+ </style>
+ </head>
+ <body>
+ <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='context-fill none'/></svg>">
+ </body>
+</html>
diff --git a/layout/reftests/svg/as-image/context-fill-03.html b/layout/reftests/svg/as-image/context-fill-03.html
new file mode 100644
index 0000000000..066d5a7925
--- /dev/null
+++ b/layout/reftests/svg/as-image/context-fill-03.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Test context-fill where fill is semi-transparent</title>
+ <style>
+
+img {
+ width: 100px;
+ height: 100px;
+ -moz-context-properties: fill;
+ fill: rgb(0% 100% 0% / 50%);
+}
+
+ </style>
+ </head>
+ <body>
+ <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='context-fill red'/></svg>">
+ </body>
+</html>
diff --git a/layout/reftests/svg/as-image/context-fill-04.html b/layout/reftests/svg/as-image/context-fill-04.html
new file mode 100644
index 0000000000..4b8b9d84c1
--- /dev/null
+++ b/layout/reftests/svg/as-image/context-fill-04.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Test context-fill with fill-opacity</title>
+ <style>
+
+img {
+ width: 100px;
+ height: 100px;
+ -moz-context-properties: fill;
+ fill: lime;
+}
+
+ </style>
+ </head>
+ <body>
+ <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='context-fill red' fill-opacity='0.5'/></svg>">
+ </body>
+</html>
diff --git a/layout/reftests/svg/as-image/context-fill-05.html b/layout/reftests/svg/as-image/context-fill-05.html
new file mode 100644
index 0000000000..14c169642f
--- /dev/null
+++ b/layout/reftests/svg/as-image/context-fill-05.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Test context-fill with different fill values (test image caching correctness)</title>
+ <style>
+
+img {
+ width: 100px;
+ height: 100px;
+ -moz-context-properties: fill;
+}
+
+#img1 {
+ fill: blue;
+}
+
+#img2 {
+ fill: yellow;
+}
+
+ </style>
+ </head>
+ <body>
+ <img id="img1" src="context-fill-05.svg">
+ <img id="img2" src="context-fill-05.svg">
+ </body>
+</html>
diff --git a/layout/reftests/svg/as-image/context-fill-05.svg b/layout/reftests/svg/as-image/context-fill-05.svg
new file mode 100644
index 0000000000..c2865ca10e
--- /dev/null
+++ b/layout/reftests/svg/as-image/context-fill-05.svg
@@ -0,0 +1,3 @@
+<svg xmlns='http://www.w3.org/2000/svg'>
+ <rect width='100%' height='100%' fill='context-fill red'/>
+</svg>
diff --git a/layout/reftests/svg/as-image/context-fill-06.html b/layout/reftests/svg/as-image/context-fill-06.html
new file mode 100644
index 0000000000..7ea9c6bf95
--- /dev/null
+++ b/layout/reftests/svg/as-image/context-fill-06.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Test context-fill works as a stroke value</title>
+ <style>
+
+img {
+ width: 100px;
+ height: 100px;
+ -moz-context-properties: fill;
+ fill: lime;
+}
+
+ </style>
+ </head>
+ <body>
+ <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><line x1='0' y1='50%' x2='100%' y2='50%' stroke-width='120%' stroke='context-fill red'/></svg>">
+ </body>
+</html>
diff --git a/layout/reftests/svg/as-image/context-fill-07-ref.html b/layout/reftests/svg/as-image/context-fill-07-ref.html
new file mode 100644
index 0000000000..9e52bb402e
--- /dev/null
+++ b/layout/reftests/svg/as-image/context-fill-07-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <style>
+
+div {
+ width: 100px;
+ height: 100px;
+ background-color: black;
+ display: inline-block;
+}
+
+ </style>
+ </head>
+ <body>
+ <div></div>
+ <div></div>
+ </body>
+</html>
diff --git a/layout/reftests/svg/as-image/context-fill-07.html b/layout/reftests/svg/as-image/context-fill-07.html
new file mode 100644
index 0000000000..c4e9ab3305
--- /dev/null
+++ b/layout/reftests/svg/as-image/context-fill-07.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Test context-fill when no context fill value is provided</title>
+ <style>
+
+img {
+ -moz-context-properties: fill;
+ width: 100px;
+ height: 100px;
+}
+
+ </style>
+ </head>
+ <body>
+ <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='context-fill'/></svg>">
+ <!-- The initial value for 'fill' is black, so we expect that to be the
+ context-fill that the following rect uses (the fallback color should
+ not be used). -->
+ <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='context-fill red'/></svg>">
+ </body>
+</html>
diff --git a/layout/reftests/svg/as-image/context-fill-08.html b/layout/reftests/svg/as-image/context-fill-08.html
new file mode 100644
index 0000000000..77f7aca144
--- /dev/null
+++ b/layout/reftests/svg/as-image/context-fill-08.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Test context-fill when only "-moz-context-properties: stroke" is specified</title>
+ <style>
+
+img {
+ width: 100px;
+ height: 100px;
+ -moz-context-properties: stroke;
+ fill: red;
+ stroke: red;
+}
+
+ </style>
+ </head>
+ <body>
+ <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='context-fill blue'/></svg>">
+ </body>
+</html>
diff --git a/layout/reftests/svg/as-image/context-fill-bg-image-01.html b/layout/reftests/svg/as-image/context-fill-bg-image-01.html
new file mode 100644
index 0000000000..2c5d0ff362
--- /dev/null
+++ b/layout/reftests/svg/as-image/context-fill-bg-image-01.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Basic context-fill in background-image test</title>
+ <style>
+
+div {
+ width: 100px;
+ height: 100px;
+ background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='context-fill red'/></svg>");
+ -moz-context-properties: fill;
+ fill: blue;
+}
+
+ </style>
+ </head>
+ <body>
+ <div></div>
+ </body>
+</html>
+
diff --git a/layout/reftests/svg/as-image/context-fill-opacity-01.html b/layout/reftests/svg/as-image/context-fill-opacity-01.html
new file mode 100644
index 0000000000..1ba306a054
--- /dev/null
+++ b/layout/reftests/svg/as-image/context-fill-opacity-01.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Basic context-fill-opacity test</title>
+ <style>
+
+img {
+ width: 100px;
+ height: 100px;
+ -moz-context-properties: fill-opacity;
+ fill-opacity: 0.5;
+}
+
+ </style>
+ </head>
+ <body>
+ <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='blue' fill-opacity='context-fill-opacity'/></svg>">
+ </body>
+</html>
diff --git a/layout/reftests/svg/as-image/context-fill-opacity-02.html b/layout/reftests/svg/as-image/context-fill-opacity-02.html
new file mode 100644
index 0000000000..8420d0105d
--- /dev/null
+++ b/layout/reftests/svg/as-image/context-fill-opacity-02.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Test context-fill-opacity with different fill-opacity values (test image caching correctness)</title>
+ <style>
+
+img {
+ width: 100px;
+ height: 100px;
+ -moz-context-properties: fill-opacity;
+}
+
+#img1 {
+ fill-opacity: 0.3;
+}
+
+#img2 {
+ fill-opacity: 0.7;
+}
+
+ </style>
+ </head>
+ <body>
+ <img id="img1" src="context-fill-opacity-02.svg">
+ <img id="img2" src="context-fill-opacity-02.svg">
+ </body>
+</html>
diff --git a/layout/reftests/svg/as-image/context-fill-opacity-02.svg b/layout/reftests/svg/as-image/context-fill-opacity-02.svg
new file mode 100644
index 0000000000..bbc1270271
--- /dev/null
+++ b/layout/reftests/svg/as-image/context-fill-opacity-02.svg
@@ -0,0 +1,3 @@
+<svg xmlns='http://www.w3.org/2000/svg'>
+ <rect width='100%' height='100%' fill='blue' fill-opacity='context-fill-opacity'/>
+</svg>
diff --git a/layout/reftests/svg/as-image/context-fill-opacity-03.html b/layout/reftests/svg/as-image/context-fill-opacity-03.html
new file mode 100644
index 0000000000..33d4684c2b
--- /dev/null
+++ b/layout/reftests/svg/as-image/context-fill-opacity-03.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Test context-fill-opacity works with context-fill</title>
+ <style>
+
+img {
+ width: 100px;
+ height: 100px;
+ -moz-context-properties: fill, fill-opacity;
+ fill: blue;
+ fill-opacity: 0.5;
+}
+
+ </style>
+ </head>
+ <body>
+ <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='context-fill' fill-opacity='context-fill-opacity'/></svg>">
+ </body>
+</html>
diff --git a/layout/reftests/svg/as-image/context-fill-opacity-04.html b/layout/reftests/svg/as-image/context-fill-opacity-04.html
new file mode 100644
index 0000000000..e8b1b343cd
--- /dev/null
+++ b/layout/reftests/svg/as-image/context-fill-opacity-04.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>No context-fill-opacity value is provided</title>
+ <style>
+
+img {
+ width: 100px;
+ height: 100px;
+ -moz-context-properties: fill-opacity;
+}
+
+ </style>
+ </head>
+ <body>
+ <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='blue' fill-opacity='context-fill-opacity'/></svg>">
+ </body>
+</html>
diff --git a/layout/reftests/svg/as-image/context-fill-opacity-05.html b/layout/reftests/svg/as-image/context-fill-opacity-05.html
new file mode 100644
index 0000000000..ca34db6d51
--- /dev/null
+++ b/layout/reftests/svg/as-image/context-fill-opacity-05.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Test context-fill-opacity when only '-moz-context-properties: stroke-opacity' is specified</title>
+ <style>
+
+img {
+ width: 100px;
+ height: 100px;
+ -moz-context-properties: stroke-opacity;
+ fill: 0.5;
+ stroke: 0.5;
+}
+
+ </style>
+ </head>
+ <body>
+ <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='blue' fill-opacity='context-fill-opacity'/></svg>">
+ </body>
+</html>
diff --git a/layout/reftests/svg/as-image/context-fill-or-stroke-05-ref.html b/layout/reftests/svg/as-image/context-fill-or-stroke-05-ref.html
new file mode 100644
index 0000000000..369d36bb93
--- /dev/null
+++ b/layout/reftests/svg/as-image/context-fill-or-stroke-05-ref.html
@@ -0,0 +1,17 @@
+<html>
+<head>
+ <style>
+
+div {
+ width: 100px;
+ height: 100px;
+ display: inline-block;
+}
+
+ </style>
+</head>
+<body>
+ <div style="background: blue"></div>
+ <div style="background: yellow"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/context-fill-or-stroke-opacity-01-ref.html b/layout/reftests/svg/as-image/context-fill-or-stroke-opacity-01-ref.html
new file mode 100644
index 0000000000..87b98a894d
--- /dev/null
+++ b/layout/reftests/svg/as-image/context-fill-or-stroke-opacity-01-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+<body>
+ <div style="width: 100px; height: 100px; background: rgba(0, 0, 255, 0.5)"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/context-fill-or-stroke-opacity-02-ref.html b/layout/reftests/svg/as-image/context-fill-or-stroke-opacity-02-ref.html
new file mode 100644
index 0000000000..f16b49ff40
--- /dev/null
+++ b/layout/reftests/svg/as-image/context-fill-or-stroke-opacity-02-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <style>
+
+div {
+ width: 100px;
+ height: 100px;
+ display: inline-block;
+}
+
+ </style>
+</head>
+<body>
+ <div style="background: rgba(0, 0, 255, 0.3); "></div>
+ <div style="background: rgba(0, 0, 255, 0.7); "></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/context-fill-or-stroke-opacity-03-ref.html b/layout/reftests/svg/as-image/context-fill-or-stroke-opacity-03-ref.html
new file mode 100644
index 0000000000..87b98a894d
--- /dev/null
+++ b/layout/reftests/svg/as-image/context-fill-or-stroke-opacity-03-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+<body>
+ <div style="width: 100px; height: 100px; background: rgba(0, 0, 255, 0.5)"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/context-stroke-01.html b/layout/reftests/svg/as-image/context-stroke-01.html
new file mode 100644
index 0000000000..853f72ac5a
--- /dev/null
+++ b/layout/reftests/svg/as-image/context-stroke-01.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Basic context-stroke test</title>
+ <style>
+
+img {
+ width: 100px;
+ height: 100px;
+ -moz-context-properties: stroke;
+ stroke: lime;
+}
+
+ </style>
+ </head>
+ <body>
+ <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><line x1='0' y1='50%' x2='100%' y2='50%' stroke-width='120%' stroke='context-stroke blue'/></svg>">
+ </body>
+</html>
diff --git a/layout/reftests/svg/as-image/context-stroke-02.html b/layout/reftests/svg/as-image/context-stroke-02.html
new file mode 100644
index 0000000000..00d39aff4e
--- /dev/null
+++ b/layout/reftests/svg/as-image/context-stroke-02.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Basic context-stroke test (without a fallback color)</title>
+ <style>
+
+img {
+ width: 100px;
+ height: 100px;
+ -moz-context-properties: stroke;
+ stroke: lime;
+ border: 1px solid black;
+}
+
+ </style>
+ </head>
+ <body>
+ <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><line x1='0' y1='50%' x2='100%' y2='50%' stroke-width='120%' stroke='context-stroke'/></svg>">
+ </body>
+</html>
diff --git a/layout/reftests/svg/as-image/context-stroke-03.html b/layout/reftests/svg/as-image/context-stroke-03.html
new file mode 100644
index 0000000000..2bb341f6d4
--- /dev/null
+++ b/layout/reftests/svg/as-image/context-stroke-03.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Test context-stroke where stroke is semi-transparent</title>
+ <style>
+
+img {
+ width: 100px;
+ height: 100px;
+ -moz-context-properties: stroke;
+ stroke: rgb(0% 100% 0% / 50%);
+}
+
+ </style>
+ </head>
+ <body>
+ <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><line x1='0' y1='50%' x2='100%' y2='50%' stroke-width='120%' stroke='context-stroke red'/></svg>">
+ </body>
+</html>
diff --git a/layout/reftests/svg/as-image/context-stroke-04.html b/layout/reftests/svg/as-image/context-stroke-04.html
new file mode 100644
index 0000000000..170f8c4970
--- /dev/null
+++ b/layout/reftests/svg/as-image/context-stroke-04.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Test context-stroke with stroke-opacity</title>
+ <style>
+
+img {
+ width: 100px;
+ height: 100px;
+ -moz-context-properties: stroke;
+ stroke: lime;
+}
+
+ </style>
+ </head>
+ <body>
+ <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><line x1='0' y1='50%' x2='100%' y2='50%' stroke-width='120%' stroke='context-stroke red' stroke-opacity='0.5'/></svg>">
+ </body>
+</html>
diff --git a/layout/reftests/svg/as-image/context-stroke-05.html b/layout/reftests/svg/as-image/context-stroke-05.html
new file mode 100644
index 0000000000..ebd3f6b8e9
--- /dev/null
+++ b/layout/reftests/svg/as-image/context-stroke-05.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Test context-stroke with different stroke values (test image caching correctness)</title>
+ <style>
+
+img {
+ width: 100px;
+ height: 100px;
+ -moz-context-properties: stroke;
+}
+
+#img1 {
+ stroke: blue;
+}
+
+#img2 {
+ stroke: yellow;
+}
+
+ </style>
+ </head>
+ <body>
+ <img id="img1" src="context-stroke-05.svg">
+ <img id="img2" src="context-stroke-05.svg">
+ </body>
+</html>
diff --git a/layout/reftests/svg/as-image/context-stroke-05.svg b/layout/reftests/svg/as-image/context-stroke-05.svg
new file mode 100644
index 0000000000..01e25682b9
--- /dev/null
+++ b/layout/reftests/svg/as-image/context-stroke-05.svg
@@ -0,0 +1,3 @@
+<svg xmlns='http://www.w3.org/2000/svg'>
+ <line x1='0' y1='50%' x2='100%' y2='50%' stroke-width='120%' stroke='context-stroke red'/>
+</svg>
diff --git a/layout/reftests/svg/as-image/context-stroke-06.html b/layout/reftests/svg/as-image/context-stroke-06.html
new file mode 100644
index 0000000000..fb84671d67
--- /dev/null
+++ b/layout/reftests/svg/as-image/context-stroke-06.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Test context-stroke works as a fill value</title>
+ <style>
+
+img {
+ width: 100px;
+ height: 100px;
+ -moz-context-properties: stroke;
+ stroke: lime;
+}
+
+ </style>
+ </head>
+ <body>
+ <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='context-stroke red'/></svg>">
+ </body>
+</html>
diff --git a/layout/reftests/svg/as-image/context-stroke-07-ref.html b/layout/reftests/svg/as-image/context-stroke-07-ref.html
new file mode 100644
index 0000000000..503e1bfba5
--- /dev/null
+++ b/layout/reftests/svg/as-image/context-stroke-07-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <style>
+
+div {
+ width: 100px;
+ height: 100px;
+ display: inline-block;
+ border: 1px solid black;
+}
+
+ </style>
+ </head>
+ <body>
+ <div></div>
+ <div style="background-color: lime;"></div>
+ </body>
+</html>
diff --git a/layout/reftests/svg/as-image/context-stroke-07.html b/layout/reftests/svg/as-image/context-stroke-07.html
new file mode 100644
index 0000000000..885ee221dd
--- /dev/null
+++ b/layout/reftests/svg/as-image/context-stroke-07.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Test context-stroke when no context stroke value is provided</title>
+ <style>
+
+img {
+ -moz-context-properties: fill;
+ width: 100px;
+ height: 100px;
+ border: 1px solid black;
+}
+
+ </style>
+ </head>
+ <body>
+ <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><line x1='0' y1='50%' x2='100%' y2='50%' stroke-width='120%' stroke='context-stroke'/></svg>">
+ <!-- The following image currently results in the 'lime' fallback color
+ being used, but it probably shouldn't. See bug 1351243. -->
+ <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><line x1='0' y1='50%' x2='100%' y2='50%' stroke-width='120%' stroke='context-stroke lime'/></svg>">
+ </body>
+</html>
diff --git a/layout/reftests/svg/as-image/context-stroke-08.html b/layout/reftests/svg/as-image/context-stroke-08.html
new file mode 100644
index 0000000000..8420fba152
--- /dev/null
+++ b/layout/reftests/svg/as-image/context-stroke-08.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Test context-stroke when only "-moz-context-properties: fill" is specified</title>
+ <style>
+
+img {
+ width: 100px;
+ height: 100px;
+ -moz-context-properties: fill;
+ fill: red;
+ stroke: red;
+}
+
+ </style>
+ </head>
+ <body>
+ <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><rect x='5' y='5' width='90' height='90' fill='none' stroke='context-stroke blue' stroke-width='10'/></svg>">
+ </body>
+</html>
diff --git a/layout/reftests/svg/as-image/context-stroke-bg-image-01.html b/layout/reftests/svg/as-image/context-stroke-bg-image-01.html
new file mode 100644
index 0000000000..57897c93e5
--- /dev/null
+++ b/layout/reftests/svg/as-image/context-stroke-bg-image-01.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Basic context-stroke in background-image test</title>
+ <style>
+
+div {
+ width: 100px;
+ height: 100px;
+ background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><rect x='5' y='5' width='90' height='90' fill='none' stroke='context-stroke red' stroke-width='10'/></svg>");
+ -moz-context-properties: stroke;
+ stroke: blue;
+}
+
+ </style>
+ </head>
+ <body>
+ <div></div>
+ </body>
+</html>
+
diff --git a/layout/reftests/svg/as-image/context-stroke-opacity-01.html b/layout/reftests/svg/as-image/context-stroke-opacity-01.html
new file mode 100644
index 0000000000..6c3e9b386b
--- /dev/null
+++ b/layout/reftests/svg/as-image/context-stroke-opacity-01.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Basic context-stroke-opacity test</title>
+ <style>
+
+img {
+ width: 100px;
+ height: 100px;
+ -moz-context-properties: stroke-opacity;
+ stroke-opacity: 0.5;
+}
+
+ </style>
+ </head>
+ <body>
+ <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><line x1='0' y1='50%' x2='100%' y2='50%' stroke-width='120%' stroke='blue' stroke-opacity='context-stroke-opacity'/></svg>">
+ </body>
+</html>
diff --git a/layout/reftests/svg/as-image/context-stroke-opacity-02.html b/layout/reftests/svg/as-image/context-stroke-opacity-02.html
new file mode 100644
index 0000000000..4445cc7b93
--- /dev/null
+++ b/layout/reftests/svg/as-image/context-stroke-opacity-02.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Test context-stroke-opacity with different stroke-opacity values (test image caching correctness)</title>
+ <style>
+
+img {
+ width: 100px;
+ height: 100px;
+ -moz-context-properties: stroke-opacity;
+}
+
+#img1 {
+ stroke-opacity: 0.3;
+}
+
+#img2 {
+ stroke-opacity: 0.7;
+}
+
+ </style>
+ </head>
+ <body>
+ <img id="img1" src="context-stroke-opacity-02.svg">
+ <img id="img2" src="context-stroke-opacity-02.svg">
+ </body>
+</html>
diff --git a/layout/reftests/svg/as-image/context-stroke-opacity-02.svg b/layout/reftests/svg/as-image/context-stroke-opacity-02.svg
new file mode 100644
index 0000000000..d00c3a0e59
--- /dev/null
+++ b/layout/reftests/svg/as-image/context-stroke-opacity-02.svg
@@ -0,0 +1,3 @@
+<svg xmlns='http://www.w3.org/2000/svg'>
+ <line x1='0' y1='50%' x2='100%' y2='50%' stroke-width='120%' stroke='blue' stroke-opacity='context-stroke-opacity'/>
+</svg>
diff --git a/layout/reftests/svg/as-image/context-stroke-opacity-03.html b/layout/reftests/svg/as-image/context-stroke-opacity-03.html
new file mode 100644
index 0000000000..cc0f5685a7
--- /dev/null
+++ b/layout/reftests/svg/as-image/context-stroke-opacity-03.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Test context-stroke-opacity works with context-stroke</title>
+ <style>
+
+img {
+ width: 100px;
+ height: 100px;
+ -moz-context-properties: stroke, stroke-opacity;
+ stroke: blue;
+ stroke-opacity: 0.5;
+}
+
+ </style>
+ </head>
+ <body>
+ <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><line x1='0' y1='50%' x2='100%' y2='50%' stroke-width='120%' stroke='context-stroke' stroke-opacity='context-stroke-opacity'/></svg>">
+ </body>
+</html>
diff --git a/layout/reftests/svg/as-image/context-stroke-opacity-04.html b/layout/reftests/svg/as-image/context-stroke-opacity-04.html
new file mode 100644
index 0000000000..cc329b463a
--- /dev/null
+++ b/layout/reftests/svg/as-image/context-stroke-opacity-04.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>No context-stroke-opacity value is provided</title>
+ <style>
+
+img {
+ width: 100px;
+ height: 100px;
+ -moz-context-properties: stroke-opacity;
+}
+
+ </style>
+ </head>
+ <body>
+ <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><line x1='0' y1='50%' x2='100%' y2='50%' stroke-width='120%' stroke='blue' stroke-opacity='context-stroke-opacity'/></svg>">
+ </body>
+</html>
diff --git a/layout/reftests/svg/as-image/context-stroke-opacity-05.html b/layout/reftests/svg/as-image/context-stroke-opacity-05.html
new file mode 100644
index 0000000000..f31b42d062
--- /dev/null
+++ b/layout/reftests/svg/as-image/context-stroke-opacity-05.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Test context-stroke-opacity when only '-moz-context-properties: fill-opacity' is specified</title>
+ <style>
+
+img {
+ width: 100px;
+ height: 100px;
+ -moz-context-properties: fill-opacity;
+ stroke-opacity: 0.5;
+}
+
+ </style>
+ </head>
+ <body>
+ <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><line x1='0' y1='50%' x2='100%' y2='50%' stroke-width='120%' stroke='blue' stroke-opacity='context-stroke-opacity'/></svg>">
+ </body>
+</html>
diff --git a/layout/reftests/svg/as-image/defer-unsupported-1-helper.svg b/layout/reftests/svg/as-image/defer-unsupported-1-helper.svg
new file mode 100644
index 0000000000..a2c4c7a558
--- /dev/null
+++ b/layout/reftests/svg/as-image/defer-unsupported-1-helper.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"
+ viewBox="0 0 50 50" preserveAspectRatio="xMaxYMax">
+
+ <rect width="100" height="100" fill="lime"/>
+</svg>
diff --git a/layout/reftests/svg/as-image/defer-unsupported-1-ref.svg b/layout/reftests/svg/as-image/defer-unsupported-1-ref.svg
new file mode 100644
index 0000000000..2b49baf71e
--- /dev/null
+++ b/layout/reftests/svg/as-image/defer-unsupported-1-ref.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+
+ <rect width="100" height="100" fill="blue"/>
+ <image xlink:href="defer-unsupported-1-helper.svg" width="200" height="100"/>
+</svg>
diff --git a/layout/reftests/svg/as-image/defer-unsupported-1.svg b/layout/reftests/svg/as-image/defer-unsupported-1.svg
new file mode 100644
index 0000000000..4a9d84955e
--- /dev/null
+++ b/layout/reftests/svg/as-image/defer-unsupported-1.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+
+ <rect width="100" height="100" fill="blue"/>
+ <image xlink:href="defer-unsupported-1-helper.svg" width="200" height="100"
+ preserveAspectRatio="defer xMinYMin"/>
+</svg>
diff --git a/layout/reftests/svg/as-image/display-none.svg b/layout/reftests/svg/as-image/display-none.svg
new file mode 100644
index 0000000000..402d37b491
--- /dev/null
+++ b/layout/reftests/svg/as-image/display-none.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"
+ width="100" height="100" style="display: none">
+ <rect width="100%" height="100%" fill="red"/>
+</svg>
diff --git a/layout/reftests/svg/as-image/image-orientation-ref.html b/layout/reftests/svg/as-image/image-orientation-ref.html
new file mode 100644
index 0000000000..518f899fda
--- /dev/null
+++ b/layout/reftests/svg/as-image/image-orientation-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE>
+<head>
+ <style>
+ body {
+ border: 0px;
+ margin: 0px;
+ padding: 0px;
+ }
+ table {
+ border-spacing: 0px;
+ }
+ div {
+ width: 100px; height: 200px;
+ }
+ td {
+ width: 50px; height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <div>
+ <table>
+ <tr>
+ <td style="background-color: rgb(0, 191, 0)"></td>
+ <td style="background-color: rgb(0, 255, 1)"></td>
+ </tr>
+ <tr>
+ <td style="background-color: rgb(254, 0, 122)"></td>
+ <td style="background-color: rgb(254, 0, 122)"></td>
+ </tr>
+ </table>
+ </div>
+</body>
diff --git a/layout/reftests/svg/as-image/image-orientation-viewbox-and-size.html b/layout/reftests/svg/as-image/image-orientation-viewbox-and-size.html
new file mode 100644
index 0000000000..e531d70cf3
--- /dev/null
+++ b/layout/reftests/svg/as-image/image-orientation-viewbox-and-size.html
@@ -0,0 +1,19 @@
+<!DOCTYPE>
+<head>
+ <style>
+ body {
+ border: 0px;
+ margin: 0px;
+ padding: 0px;
+ }
+ </style>
+</head>
+<body>
+ <img src="image-orientation-viewbox-and-size.svg">
+ <script>
+ let fromImage = location.search == "from-image";
+ if (fromImage) {
+ document.querySelector("img").style.imageOrientation = "from-image";
+ }
+ </script>
+</body>
diff --git a/layout/reftests/svg/as-image/image-orientation-viewbox-and-size.svg b/layout/reftests/svg/as-image/image-orientation-viewbox-and-size.svg
new file mode 100644
index 0000000000..148b021e5c
--- /dev/null
+++ b/layout/reftests/svg/as-image/image-orientation-viewbox-and-size.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+ width="100" height="200"
+ viewBox="25 25 100 200">
+ <rect x="25" y="25" width="50" height="100" fill="rgb(0, 191, 0)"/>
+ <rect x="75" y="25" width="50" height="100" fill="rgb(0, 255, 1)"/>
+ <rect x="75" y="125" width="50" height="100" fill="rgb(254, 0, 122)"/>
+ <rect x="25" y="125" width="50" height="100" fill="rgb(191, 0, 93)"/>
+</svg>
diff --git a/layout/reftests/svg/as-image/image-orientation-viewbox-no-size.html b/layout/reftests/svg/as-image/image-orientation-viewbox-no-size.html
new file mode 100644
index 0000000000..7875aeea22
--- /dev/null
+++ b/layout/reftests/svg/as-image/image-orientation-viewbox-no-size.html
@@ -0,0 +1,22 @@
+<!DOCTYPE>
+<head>
+ <style>
+ body {
+ border: 0px;
+ margin: 0px;
+ padding: 0px;
+ }
+ img {
+ image-orientation: from-image;
+ }
+ </style>
+</head>
+<body>
+ <img src="image-orientation-viewbox-no-size.svg">
+ <script>
+ let fromImage = location.search == "from-image";
+ if (fromImage) {
+ document.querySelector("img").style.imageOrientation = "from-image";
+ }
+ </script>
+</body>
diff --git a/layout/reftests/svg/as-image/image-orientation-viewbox-no-size.svg b/layout/reftests/svg/as-image/image-orientation-viewbox-no-size.svg
new file mode 100644
index 0000000000..5733488010
--- /dev/null
+++ b/layout/reftests/svg/as-image/image-orientation-viewbox-no-size.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+ viewBox="25 25 100 200">
+ <rect x="25" y="25" width="50" height="100" fill="rgb(0, 191, 0)"/>
+ <rect x="75" y="25" width="50" height="100" fill="rgb(0, 255, 1)"/>
+ <rect x="75" y="125" width="50" height="100" fill="rgb(254, 0, 122)"/>
+ <rect x="25" y="125" width="50" height="100" fill="rgb(191, 0, 93)"/>
+</svg>
diff --git a/layout/reftests/svg/as-image/img-and-image-1-helper-a.svg b/layout/reftests/svg/as-image/img-and-image-1-helper-a.svg
new file mode 100644
index 0000000000..254a873933
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-and-image-1-helper-a.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+ width="100" height="20"
+ viewBox="0 0 100 20">
+ <!-- animated value for preserveAspectRatio: -->
+ <set attributeName="preserveAspectRatio" to="xMaxYMax slice"/>
+ <rect x="2" y="2" width="96" height="16"
+ style="stroke-width: 4; fill:lime; stroke: teal"/>
+</svg>
diff --git a/layout/reftests/svg/as-image/img-and-image-1-helper-b.svg b/layout/reftests/svg/as-image/img-and-image-1-helper-b.svg
new file mode 100644
index 0000000000..6aada7f0f7
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-and-image-1-helper-b.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+ width="100" height="20"
+ viewBox="0 0 100 20"
+ preserveAspectRatio="xMaxYMax slice"> <!-- static pAR value -->
+ <rect x="2" y="2" width="96" height="16"
+ style="stroke-width: 4; fill:lime; stroke: teal"/>
+</svg>
diff --git a/layout/reftests/svg/as-image/img-and-image-1-helper-c.svg b/layout/reftests/svg/as-image/img-and-image-1-helper-c.svg
new file mode 100644
index 0000000000..73fe0cb119
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-and-image-1-helper-c.svg
@@ -0,0 +1,42 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="300" height="200">
+ <!-- FIRST COLUMN: image "a" (has animated preserveAspectRatio val) -->
+ <g>
+ <g>
+ <image xlink:href="img-and-image-1-helper-a.svg" width="100" height="40"
+ preserveAspectRatio="xMinYMin slice"/>
+ </g>
+ <g transform="translate(0,50)">
+ <image xlink:href="img-and-image-1-helper-a.svg" width="100" height="40"
+ preserveAspectRatio="none"/>
+ </g>
+ <g transform="translate(0,100)">
+ <image xlink:href="img-and-image-1-helper-a.svg" width="80" height="40"
+ preserveAspectRatio="xMaxYMax meet"/>
+ </g>
+ <g transform="translate(0,150)">
+ <image xlink:href="img-and-image-1-helper-a.svg" width="80" height="40"
+ preserveAspectRatio="defer xMinYMin meet"/>
+ </g>
+ </g>
+ <!-- SECOND COLUMN: image "b" (has static preserveAspectRatio val) -->
+ <g transform="translate(150,0)">
+ <g>
+ <image xlink:href="img-and-image-1-helper-b.svg" width="100" height="40"
+ preserveAspectRatio="xMinYMin slice"/>
+ </g>
+ <g transform="translate(0,50)">
+ <image xlink:href="img-and-image-1-helper-b.svg" width="100" height="40"
+ preserveAspectRatio="none"/>
+ </g>
+ <g transform="translate(0,100)">
+ <image xlink:href="img-and-image-1-helper-b.svg" width="80" height="40"
+ preserveAspectRatio="xMaxYMax meet"/>
+ </g>
+ <g transform="translate(0,150)">
+ <image xlink:href="img-and-image-1-helper-b.svg" width="80" height="40"
+ preserveAspectRatio="defer xMinYMin meet"/>
+ </g>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/as-image/img-and-image-1-ref.svg b/layout/reftests/svg/as-image/img-and-image-1-ref.svg
new file mode 100644
index 0000000000..07e977f0e5
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-and-image-1-ref.svg
@@ -0,0 +1,43 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+ <!-- The rect that's used everywhere -->
+ <rect id="rect" x="2" y="2" width="96" height="16"
+ style="stroke-width: 4; fill:lime; stroke: teal"/>
+
+ <!-- Symbols with the testcases' preserveAspectRatio values applied -->
+ <symbol id="pAR_xMinYMin_slice"
+ viewBox="0 0 100 20" preserveAspectRatio="xMinYMin slice">
+ <use xlink:href="#rect"/>
+ </symbol>
+ <symbol id="pAR_none"
+ viewBox="0 0 100 20" preserveAspectRatio="none">
+ <use xlink:href="#rect"/>
+ </symbol>
+ <symbol id="pAR_xMaxYMax_meet"
+ viewBox="0 0 100 20" preserveAspectRatio="xMaxYMax meet">
+ <use xlink:href="#rect"/>
+ </symbol>
+ <symbol id="pAR_xMaxYMax_slice"
+ viewBox="0 0 100 20" preserveAspectRatio="xMaxYMax slice">
+ <!-- this one corresponds to 'defer' in the image used in the testcase,
+ as well as to the HTML <img> elements (which don't bring their own
+ preserveAspectRatio value) -->
+ <use xlink:href="#rect"/>
+ </symbol>
+
+ <!-- Single column from the testcase -->
+ <g id="column">
+ <use y="0" xlink:href="#pAR_xMaxYMax_slice" width="60" height="20"/>
+ <use y="50" xlink:href="#pAR_xMinYMin_slice" width="100" height="40"/>
+ <use y="100" xlink:href="#pAR_none" width="100" height="40"/>
+ <use y="150" xlink:href="#pAR_xMaxYMax_meet" width="80" height="40"/>
+ <use y="200" xlink:href="#pAR_xMaxYMax_slice" width="80" height="40"/>
+ <use y="250" xlink:href="#pAR_xMaxYMax_slice" width="30" height="50"/>
+ </g>
+ </defs>
+
+ <!-- Rendered output: 2 instances of our column (defined above) -->
+ <use xlink:href="#column"/>
+ <use x="150" xlink:href="#column"/>
+</svg>
diff --git a/layout/reftests/svg/as-image/img-and-image-1.html b/layout/reftests/svg/as-image/img-and-image-1.html
new file mode 100644
index 0000000000..f60e4e2a62
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-and-image-1.html
@@ -0,0 +1,24 @@
+<html>
+<head>
+ <style>
+ img { position: absolute; }
+ </style>
+</head>
+<body style="margin: 0">
+ <!-- Use the base images "a" and "b" first -->
+ <img src="img-and-image-1-helper-a.svg"
+ style="left: 0; top: 0; width: 60px; height: 20px">
+ <img src="img-and-image-1-helper-b.svg"
+ style="left: 150px; top: 0; width: 60px; height: 20px">
+
+ <!-- Now, use an SVG image "c", which itself uses both base images. -->
+ <img src="img-and-image-1-helper-c.svg"
+ style="left: 0; top: 50px; width: 300px; height: 200px">
+
+ <!-- And finally, use "a" and "b" again, but now with a different size. -->
+ <img src="img-and-image-1-helper-a.svg"
+ style="left: 0; top: 250px; width: 30px; height: 50px">
+ <img src="img-and-image-1-helper-b.svg"
+ style="left: 150px; top: 250px; width: 30px; height: 50px">
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-blobURI-1.html b/layout/reftests/svg/as-image/img-blobURI-1.html
new file mode 100644
index 0000000000..127689e78d
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-blobURI-1.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<!-- This test checks to be sure we can render SVG-as-an-image
+ from a 'blob' URI. -->
+<html class="reftest-wait">
+<head>
+ <script>
+ function go() {
+ // Generate a blob URL encoding of an SVG document
+ var blobURL = generateBlobURL();
+
+ // Tell our img element to render the URL
+ var img = document.getElementsByTagName("img")[0]
+ img.src = blobURL;
+
+ // Once our img loads, take reftest snapshot.
+ img.addEventListener("load", function() {
+ document.documentElement.removeAttribute("class");
+ });
+ }
+
+ // Helper function -- returns a blob URL representing a
+ // 100x100 fully-lime SVG document.
+ function generateBlobURL() {
+ var svg =
+ '<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">' +
+ '<rect height="100%" width="100%" fill="lime"/>' +
+ '</svg>';
+ return self.URL.createObjectURL(new Blob([svg], {type: "image/svg+xml"}));
+ }
+ </script>
+</head>
+<body onload="go()">
+ <img src="">
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-blobURI-2.html b/layout/reftests/svg/as-image/img-blobURI-2.html
new file mode 100644
index 0000000000..073ec80620
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-blobURI-2.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<!-- This test checks to be sure we allow
+ 'blob' URIs *inside of* SVG-as-an-image. -->
+<html class="reftest-wait">
+<head>
+ <script>
+ function go() {
+ // Generate a blob URL encoding of an SVG document
+ var blobURL = generateBlobURL();
+
+ // Now generate a data URI, containing our blob URI
+ var outerSVG =
+ '<svg xmlns="http://www.w3.org/2000/svg" ' +
+ 'xmlns:xlink="http://www.w3.org/1999/xlink" ' +
+ 'width="100" height="100">' +
+ '<image height="100" width="100" ' +
+ 'xlink:href="' + blobURL + '"/>' +
+ '</svg>';
+
+ // Tell our img element to render the URL
+ var img = document.getElementsByTagName("img")[0]
+ img.src = "data:image/svg+xml," + outerSVG;
+
+ // Once our img loads, take reftest snapshot.
+ img.addEventListener("load", function() {
+ document.documentElement.removeAttribute("class");
+ });
+ }
+
+ // Helper function -- returns a blob URL representing a
+ // 100x100 fully-lime SVG document.
+ function generateBlobURL() {
+ var svg =
+ '<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">' +
+ '<rect height="100%" width="100%" fill="lime"/>' +
+ '</svg>';
+ return self.URL.createObjectURL(new Blob([svg], {type: "image/svg+xml"}));
+ }
+ </script>
+</head>
+<body onload="go()">
+ <img src="">
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-content-outside-viewBox-1-ref.html b/layout/reftests/svg/as-image/img-content-outside-viewBox-1-ref.html
new file mode 100644
index 0000000000..abee91c514
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-content-outside-viewBox-1-ref.html
@@ -0,0 +1,15 @@
+<html>
+ <style>
+ div.rect { width: 10px; height: 10px; display: inline-block }
+ </style>
+<body>
+ <div style="width: 100px; border: 1px solid blue">
+ <div class="rect" style="background: lime"></div
+ ><div class="rect" style="background: blue; margin-left: 20px"></div>
+ </div>
+ <div style="width: 10px; height: 100px; border: 1px solid purple">
+ <div class="rect" style="background: lime"></div>
+ <div class="rect" style="background: purple; margin-top: 20px"></div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-content-outside-viewBox-1.html b/layout/reftests/svg/as-image/img-content-outside-viewBox-1.html
new file mode 100644
index 0000000000..3aad7adfa3
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-content-outside-viewBox-1.html
@@ -0,0 +1,14 @@
+<html>
+<!-- Simple test to make sure we can display content outside of an SVG viewbox,
+ if appropriate given the SVG image & our <img> dimensions. In this case,
+ we have a perfect-square viewBox, but our img elements are long
+ rectangles, so they should end up sampling some content off of one side or
+ the other of the viewBox. -->
+<body>
+ <img src="content-outside-viewBox-1-helper.svg" height="10" width="100"
+ style="border: 1px solid blue">
+ <br/>
+ <img src="content-outside-viewBox-1-helper.svg" height="100" width="10"
+ style="border: 1px solid purple ">
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-display-none-1.html b/layout/reftests/svg/as-image/img-display-none-1.html
new file mode 100644
index 0000000000..2ce155c9bf
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-display-none-1.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Test for an <img> tag pointing to an SVG image that has "display:none"
+ on the root node. -->
+<html>
+<body>
+ <img src="display-none.svg">
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-dyn-1-ref.html b/layout/reftests/svg/as-image/img-dyn-1-ref.html
new file mode 100644
index 0000000000..cb9f2635bd
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-dyn-1-ref.html
@@ -0,0 +1,7 @@
+<html>
+<body>
+ <div style="width: 200px; height: 200px; border: 2px dashed green">
+ <img src="squaredCircle-viewBox-noSize.svg">
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-dyn-1.html b/layout/reftests/svg/as-image/img-dyn-1.html
new file mode 100644
index 0000000000..9be86ff57b
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-dyn-1.html
@@ -0,0 +1,18 @@
+<!-- This test makes sure that we resize SVG content correctly after the
+ container width is dynamically modified. -->
+<html class="reftest-wait">
+<head>
+ <script>
+ function go() {
+ document.getElementById("wrapper").style.width = "200px";
+ document.documentElement.removeAttribute("class");
+ }
+ </script>
+</head>
+<body onload="go()">
+ <div id="wrapper"
+ style="width: 100px; height: 200px; border: 2px dashed green">
+ <img src="squaredCircle-viewBox-noSize.svg">
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-foreignObject-1-helper.svg b/layout/reftests/svg/as-image/img-foreignObject-1-helper.svg
new file mode 100644
index 0000000000..3b1b6a67b9
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-foreignObject-1-helper.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <foreignObject width="100%" height="100%">
+ <div xmlns="http://www.w3.org/1999/xhtml"
+ style="background:lime; width:100%; height:100%;"/>
+ </foreignObject>
+</svg>
diff --git a/layout/reftests/svg/as-image/img-foreignObject-1.html b/layout/reftests/svg/as-image/img-foreignObject-1.html
new file mode 100644
index 0000000000..de4671ad7e
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-foreignObject-1.html
@@ -0,0 +1,5 @@
+<html>
+<body>
+ <img src="img-foreignObject-1-helper.svg" height="100px" width="100px">
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-foreignObject-embed-1-helper.svg b/layout/reftests/svg/as-image/img-foreignObject-embed-1-helper.svg
new file mode 100644
index 0000000000..e7f93d241c
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-foreignObject-embed-1-helper.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <foreignObject x="0" y="0" width="100px" height="100px">
+
+ <!-- lime background -->
+ <div xmlns="http://www.w3.org/1999/xhtml"
+ style="background:lime; width:100%; height:100%;">
+ <!-- Use an unrecognized media type, so that if we're honoring plugins,
+ the "download plugin" placeholder will be shown. -->
+ <embed xmlns="http://www.w3.org/1999/xhtml"
+ src="data:audio/hahaThisIsntReallyAFormat,"
+ width="100px" height="50px"/>
+ <!-- Also try a possibly-recognized media format, for completeness. -->
+ <embed xmlns="http://www.w3.org/1999/xhtml"
+ src="data:audio/wav,"
+ width="100px" height="50px"/>
+ </div>
+ </foreignObject>
+</svg>
diff --git a/layout/reftests/svg/as-image/img-foreignObject-embed-1.html b/layout/reftests/svg/as-image/img-foreignObject-embed-1.html
new file mode 100644
index 0000000000..25d5e3eeec
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-foreignObject-embed-1.html
@@ -0,0 +1,5 @@
+<html>
+<body>
+ <img src="img-foreignObject-embed-1-helper.svg" height="100px" width="100px">
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-foreignObject-iframe-1a-helper.svg b/layout/reftests/svg/as-image/img-foreignObject-iframe-1a-helper.svg
new file mode 100644
index 0000000000..e60fa172ae
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-foreignObject-iframe-1a-helper.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <foreignObject x="0" y="0" width="100px" height="100px">
+ <!-- lime background -->
+ <div xmlns="http://www.w3.org/1999/xhtml"
+ style="background:lime; width:100%; height:100%;">
+
+ <!-- embedded iframe, whose contents shouldn't be shown and whose
+ scripts shouldn't be run, when we're being viewed as an image -->
+ <iframe xmlns="http://www.w3.org/1999/xhtml"
+ style="width:80px; height:80px; border: 0"
+ src="data:text/html,%3Chtml%3E%3Cbody%20style%3D%22background-color%3A%20red%22%3Eiframe%20contents%3Cscript%3Ealert(%22script%20shouldn't%20be%20running!!%22)%3C%2Fscript%3E%3C%2Fbody%3E%3C%2Fhtml%3E"/>
+ </div>
+ </foreignObject>
+</svg>
diff --git a/layout/reftests/svg/as-image/img-foreignObject-iframe-1a.html b/layout/reftests/svg/as-image/img-foreignObject-iframe-1a.html
new file mode 100644
index 0000000000..2840a1b227
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-foreignObject-iframe-1a.html
@@ -0,0 +1,5 @@
+<html>
+<body>
+ <img src="img-foreignObject-iframe-1a-helper.svg" height="100px" width="100px">
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-foreignObject-iframe-1b-helper.svg b/layout/reftests/svg/as-image/img-foreignObject-iframe-1b-helper.svg
new file mode 100644
index 0000000000..5bc57390d7
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-foreignObject-iframe-1b-helper.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <foreignObject x="0" y="0" width="100px" height="100px">
+ <!-- lime background -->
+ <div xmlns="http://www.w3.org/1999/xhtml"
+ style="background:lime; width:100%; height:100%;">
+
+ <!-- embedded iframe, whose contents shouldn't be shown, when we're
+ being viewed as an image -->
+ <iframe xmlns="http://www.w3.org/1999/xhtml"
+ style="width:80px; height:80px; border: 0"
+ src="data:text/html,%3Chtml%3E%3Cbody%20style%3D%22background-color%3A%20red%22%3Eiframe%20contents%3C%2Fbody%3E%3C%2Fhtml%3E"/>
+ </div>
+ </foreignObject>
+</svg>
diff --git a/layout/reftests/svg/as-image/img-foreignObject-iframe-1b.html b/layout/reftests/svg/as-image/img-foreignObject-iframe-1b.html
new file mode 100644
index 0000000000..3ee04d4a72
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-foreignObject-iframe-1b.html
@@ -0,0 +1,5 @@
+<html>
+<body>
+ <img src="img-foreignObject-iframe-1b-helper.svg" height="100px" width="100px">
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-fragment-1-ref.html b/layout/reftests/svg/as-image/img-fragment-1-ref.html
new file mode 100644
index 0000000000..babf7b38a6
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-fragment-1-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+ <script src="svg-image-util.js"></script>
+</head>
+<body>
+ <script>
+ var svgParams = {
+ viewBox: [0, 0, 20, 20],
+ meetOrSlice: "meet"
+ };
+
+ appendSVGArrayWithParams(svgParams, "img");
+ </script>
+ <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-fragment-1a.html b/layout/reftests/svg/as-image/img-fragment-1a.html
new file mode 100644
index 0000000000..31ac73d18b
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-fragment-1a.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+ <script src="svg-image-util.js"></script>
+</head>
+<body>
+ <script>
+ var svgParams = {
+ view: {
+ viewBox: [0, 0, 20, 20],
+ meetOrSlice: "meet"
+ },
+ fragmentIdentifier: "view"
+ };
+
+ appendSVGArrayWithParams(svgParams, "img");
+ </script>
+ <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-fragment-1b.html b/layout/reftests/svg/as-image/img-fragment-1b.html
new file mode 100644
index 0000000000..0835a9d9cd
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-fragment-1b.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+ <script src="svg-image-util.js"></script>
+</head>
+<body>
+ <script>
+ var svgParams = {
+ viewBox: [0, 0, 20, 20],
+ meetOrSlice: "meet",
+ fragmentIdentifier: "view"
+ };
+
+ appendSVGArrayWithParams(svgParams, "img");
+ </script>
+ <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-fragment-1c.html b/layout/reftests/svg/as-image/img-fragment-1c.html
new file mode 100644
index 0000000000..717a64fdf4
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-fragment-1c.html
@@ -0,0 +1,23 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+ <script src="svg-image-util.js"></script>
+</head>
+<body>
+ <script>
+ var svgParams = {
+ view: {
+ viewBox: [0, 0, 20, 20],
+ meetOrSlice: "meet"
+ },
+ viewBox: [0, 0, 40, 40],
+ meetOrSlice: "slice",
+ fragmentIdentifier: "view"
+ };
+
+ appendSVGArrayWithParams(svgParams, "img");
+ </script>
+ <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-fragment-2-ref.html b/layout/reftests/svg/as-image/img-fragment-2-ref.html
new file mode 100644
index 0000000000..c05d94372b
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-fragment-2-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+ <script src="svg-image-util.js"></script>
+</head>
+<body>
+ <script>
+ var svgParams = {
+ viewBox: [0, 0, 20, 20],
+ meetOrSlice: "slice"
+ };
+
+ appendSVGArrayWithParams(svgParams, "img");
+ </script>
+ <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-fragment-2a.html b/layout/reftests/svg/as-image/img-fragment-2a.html
new file mode 100644
index 0000000000..953906c004
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-fragment-2a.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+ <script src="svg-image-util.js"></script>
+</head>
+<body>
+ <script>
+ var svgParams = {
+ view: {
+ viewBox: [0, 0, 20, 20],
+ meetOrSlice: "slice"
+ },
+ fragmentIdentifier: "view"
+ };
+
+ appendSVGArrayWithParams(svgParams, "img");
+ </script>
+ <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-fragment-2b.html b/layout/reftests/svg/as-image/img-fragment-2b.html
new file mode 100644
index 0000000000..681867e479
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-fragment-2b.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+ <script src="svg-image-util.js"></script>
+</head>
+<body>
+ <script>
+ var svgParams = {
+ viewBox: [0, 0, 20, 20],
+ meetOrSlice: "slice",
+ fragmentIdentifier: "view"
+ };
+
+ appendSVGArrayWithParams(svgParams, "img");
+ </script>
+ <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-fragment-2c.html b/layout/reftests/svg/as-image/img-fragment-2c.html
new file mode 100644
index 0000000000..02cd1abf8c
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-fragment-2c.html
@@ -0,0 +1,23 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+ <script src="svg-image-util.js"></script>
+</head>
+<body>
+ <script>
+ var svgParams = {
+ view: {
+ viewBox: [0, 0, 20, 20],
+ meetOrSlice: "slice"
+ },
+ viewBox: [0, 0, 40, 40],
+ meetOrSlice: "meet",
+ fragmentIdentifier: "view"
+ };
+
+ appendSVGArrayWithParams(svgParams, "img");
+ </script>
+ <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-height-meet-1-ref.html b/layout/reftests/svg/as-image/img-height-meet-1-ref.html
new file mode 100644
index 0000000000..2a12d87f2b
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-height-meet-1-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+ <script src="svg-image-util.js"></script>
+</head>
+<body>
+ <script>
+ var svgParams = {
+ viewBox: [0, 0, 20, 40],
+ height : "20px",
+ meetOrSlice: "meet"
+ };
+
+ appendSVGArrayWithParams(svgParams, "embed");
+ </script>
+ <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-height-meet-1.html b/layout/reftests/svg/as-image/img-height-meet-1.html
new file mode 100644
index 0000000000..c1cf238540
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-height-meet-1.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+ <script src="svg-image-util.js"></script>
+</head>
+<body>
+ <script>
+ var svgParams = {
+ viewBox: [0, 0, 20, 40],
+ height : "20px",
+ meetOrSlice: "meet"
+ };
+
+ appendSVGArrayWithParams(svgParams, "img");
+ </script>
+ <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-height-meet-2-ref.html b/layout/reftests/svg/as-image/img-height-meet-2-ref.html
new file mode 100644
index 0000000000..efaee25c74
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-height-meet-2-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+ <script src="svg-image-util.js"></script>
+</head>
+<body>
+ <script>
+ var svgParams = {
+ viewBox: [0, 0, 40, 20],
+ height : "2em",
+ meetOrSlice: "meet"
+ };
+
+ appendSVGArrayWithParams(svgParams, "embed");
+ </script>
+ <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-height-meet-2.html b/layout/reftests/svg/as-image/img-height-meet-2.html
new file mode 100644
index 0000000000..98fca1d366
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-height-meet-2.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+ <script src="svg-image-util.js"></script>
+</head>
+<body>
+ <script>
+ var svgParams = {
+ viewBox: [0, 0, 40, 20],
+ height : "2em",
+ meetOrSlice: "meet"
+ };
+
+ appendSVGArrayWithParams(svgParams, "img");
+ </script>
+ <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-height-slice-1-ref.html b/layout/reftests/svg/as-image/img-height-slice-1-ref.html
new file mode 100644
index 0000000000..5724f8e0cb
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-height-slice-1-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+ <script src="svg-image-util.js"></script>
+</head>
+<body>
+ <script>
+ var svgParams = {
+ viewBox: [0, 0, 20, 40],
+ height : "20px",
+ meetOrSlice: "slice"
+ };
+
+ appendSVGArrayWithParams(svgParams, "embed");
+ </script>
+ <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-height-slice-1.html b/layout/reftests/svg/as-image/img-height-slice-1.html
new file mode 100644
index 0000000000..1997f37c5b
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-height-slice-1.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+ <script src="svg-image-util.js"></script>
+</head>
+<body>
+ <script>
+ var svgParams = {
+ viewBox: [0, 0, 20, 40],
+ height : "20px",
+ meetOrSlice: "slice"
+ };
+
+ appendSVGArrayWithParams(svgParams, "img");
+ </script>
+ <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-height-slice-2-ref.html b/layout/reftests/svg/as-image/img-height-slice-2-ref.html
new file mode 100644
index 0000000000..e9b809e6cd
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-height-slice-2-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+ <script src="svg-image-util.js"></script>
+</head>
+<body>
+ <script>
+ var svgParams = {
+ viewBox: [0, 0, 40, 20],
+ height : "2em",
+ meetOrSlice: "slice"
+ };
+
+ appendSVGArrayWithParams(svgParams, "embed");
+ </script>
+ <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-height-slice-2.html b/layout/reftests/svg/as-image/img-height-slice-2.html
new file mode 100644
index 0000000000..faab57f736
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-height-slice-2.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+ <script src="svg-image-util.js"></script>
+</head>
+<body>
+ <script>
+ var svgParams = {
+ viewBox: [0, 0, 40, 20],
+ height : "2em",
+ meetOrSlice: "slice"
+ };
+
+ appendSVGArrayWithParams(svgParams, "img");
+ </script>
+ <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-novb-height-all-1-ref.html b/layout/reftests/svg/as-image/img-novb-height-all-1-ref.html
new file mode 100644
index 0000000000..999ce5aa63
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-novb-height-all-1-ref.html
@@ -0,0 +1,45 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+ <script src="svg-image-util.js"></script>
+</head>
+<body style="width: 600px"><!-- width for pct vals to resolve against -->
+ <script>
+ var svgParams = {
+ viewBox: null, // This gets set on a case-by-case basis below.
+ width : "10%",
+ height : "30px",
+ meetOrSlice: null // This means "use pAR=none"
+ };
+
+ // Descriptions below describe the behavior of the rows of <img> elements
+ // in the corresponding test cases, which we mimic with specially-crafted
+ // <embed> elements.
+
+ // * FIRST TWO ROWS: <img> has width=auto height=auto
+ // - Each <img> renders w/ width = 300px (default)
+ // - Synthesized viewBox has width = 10% * viewport_width = .1*300 = 30
+ // - <img> & viewBox both get height=30px, from <svg> height attr
+ svgParams.viewBox = [0, 0, 30, 30],
+ appendSVGSubArrayWithParams(svgParams, "embed", "300px", "30px");
+
+ // * SECOND TWO ROWS: <img> has width=auto, height=20px
+ // Calculations are as above, except <img> now imposes height="20px".
+ appendSVGSubArrayWithParams(svgParams, "embed", "300px", "20px");
+
+ // * THIRD TWO ROWS: <img> has width=30px height=auto
+ // - <img> now renders w/ width = 30px (imposed by <img> width attr)
+ // - Synthesized viewBox has width = 10% * viewport_width = .1*30 = 3
+ // - <img> & viewBox both get height=30px, from <svg> height attr
+ svgParams.viewBox = [0, 0, 3, 30];
+ appendSVGSubArrayWithParams(svgParams, "embed", "30px", "30px");
+
+ // * FOURTH TWO ROWS: <img> has width=30px height=20px
+ // Calculations are as above, except <img> now imposes height="20px".
+ appendSVGSubArrayWithParams(svgParams, "embed", "30px", "20px");
+
+ </script>
+ <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-novb-height-meet-1.html b/layout/reftests/svg/as-image/img-novb-height-meet-1.html
new file mode 100644
index 0000000000..ab19b2948f
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-novb-height-meet-1.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+ <script src="svg-image-util.js"></script>
+</head>
+<body style="width: 600px"><!-- width for pct vals to resolve against -->
+ <script>
+ var svgParams = {
+ viewBox: null,
+ width : "10%",
+ height : "30px",
+ meetOrSlice: "meet"
+ };
+
+ appendSVGArrayWithParams(svgParams, "img");
+ </script>
+ <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-novb-height-slice-1.html b/layout/reftests/svg/as-image/img-novb-height-slice-1.html
new file mode 100644
index 0000000000..725277a680
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-novb-height-slice-1.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+ <script src="svg-image-util.js"></script>
+</head>
+<body style="width: 600px"><!-- width for pct vals to resolve against -->
+ <script>
+ var svgParams = {
+ viewBox: null,
+ width : "10%",
+ height : "30px",
+ meetOrSlice: "slice"
+ };
+
+ appendSVGArrayWithParams(svgParams, "img");
+ </script>
+ <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-novb-width-all-1-ref.html b/layout/reftests/svg/as-image/img-novb-width-all-1-ref.html
new file mode 100644
index 0000000000..9d99b4da67
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-novb-width-all-1-ref.html
@@ -0,0 +1,49 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+ <script src="svg-image-util.js"></script>
+</head>
+<body style="height: 600px"><!-- height for pct vals to resolve against -->
+ <script>
+ var svgParams = {
+ viewBox: null, // This gets set on a case-by-case basis below.
+ width : "20px",
+ height : "20%",
+ meetOrSlice: null // This means "use pAR=none"
+ };
+
+ // Descriptions below describe the behavior of the rows of <img> elements
+ // in the corresponding test cases, which we mimic with specially-crafted
+ // <embed> elements.
+
+ // * FIRST TWO ROWS: <img> has width=auto height=auto
+ // - Each <img> renders w/ height = 150px (default)
+ // - Synthesized viewBox has height = 20% * viewport_height = .2*150 = 30
+ // - <img> & viewBox both get width=20px, from <svg> width attr
+ svgParams.viewBox = [0, 0, 20, 30],
+ appendSVGSubArrayWithParams(svgParams, "embed", "20px", "150px");
+
+ // * SECOND TWO ROWS: <img> has width=auto, height=20px
+ // - <img> now renders w/ height = 20px (imposed by <img> height attr)
+ // - Synthesized viewBox has height = 20% * viewport_width = .2*20 = 4
+ // - <img> & viewBox both get width=20px, from <svg> width attr
+ svgParams.viewBox = [0, 0, 20, 4],
+ appendSVGSubArrayWithParams(svgParams, "embed", "20px", "20px");
+
+ // * THIRD TWO ROWS: <img> has width=30px height=auto
+ // Calculations are as with "FIRST TWO ROWS", except <img> now imposes
+ // width="30px".
+ svgParams.viewBox = [0, 0, 20, 30],
+ appendSVGSubArrayWithParams(svgParams, "embed", "30px", "150px");
+
+ // * FOURTH TWO ROWS: <img> has width=30px height=20px
+ // Calculations are as with "SECOND TWO ROWS", except <img> now imposes
+ // width="30px".
+ svgParams.viewBox = [0, 0, 20, 4],
+ appendSVGSubArrayWithParams(svgParams, "embed", "30px", "20px");
+
+ </script>
+ <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-novb-width-meet-1.html b/layout/reftests/svg/as-image/img-novb-width-meet-1.html
new file mode 100644
index 0000000000..86ff8afe23
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-novb-width-meet-1.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+ <script src="svg-image-util.js"></script>
+</head>
+<body style="height: 600px"><!-- height for pct vals to resolve against -->
+ <script>
+ var svgParams = {
+ viewBox: null,
+ width : "20px",
+ height : "20%",
+ meetOrSlice: "meet"
+ };
+
+ appendSVGArrayWithParams(svgParams, "img");
+ </script>
+ <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-novb-width-slice-1.html b/layout/reftests/svg/as-image/img-novb-width-slice-1.html
new file mode 100644
index 0000000000..abbc21e729
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-novb-width-slice-1.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+ <script src="svg-image-util.js"></script>
+</head>
+<body style="height: 600px"><!-- height for pct vals to resolve against -->
+ <script>
+ var svgParams = {
+ viewBox: null,
+ width : "20px",
+ height : "20%",
+ meetOrSlice: "slice"
+ };
+
+ appendSVGArrayWithParams(svgParams, "img");
+ </script>
+ <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-novb-widthAndHeight-all-1-ref.html b/layout/reftests/svg/as-image/img-novb-widthAndHeight-all-1-ref.html
new file mode 100644
index 0000000000..8839c0fa5c
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-novb-widthAndHeight-all-1-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+ <script src="svg-image-util.js"></script>
+</head>
+<body>
+ <script>
+ var svgParams = {
+ viewBox: [0, 0, 20, 20],
+ height : "20px",
+ width : "20px",
+ meetOrSlice: null // this means "always just use pAR='none'"
+ };
+
+ appendSVGArrayWithParams(svgParams, "embed");
+ </script>
+ <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-novb-widthAndHeight-meet-1-em.html b/layout/reftests/svg/as-image/img-novb-widthAndHeight-meet-1-em.html
new file mode 100644
index 0000000000..eccc7c5e17
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-novb-widthAndHeight-meet-1-em.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+ <script src="svg-image-util.js"></script>
+</head>
+<body>
+ <script>
+ var svgParams = {
+ viewBox: null,
+ height : "2em", // 20px
+ width : "2em", // 20px
+ meetOrSlice: "meet"
+ };
+
+ appendSVGArrayWithParams(svgParams, "img");
+ </script>
+ <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-novb-widthAndHeight-meet-1-px.html b/layout/reftests/svg/as-image/img-novb-widthAndHeight-meet-1-px.html
new file mode 100644
index 0000000000..ed58e83193
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-novb-widthAndHeight-meet-1-px.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+ <script src="svg-image-util.js"></script>
+</head>
+<body>
+ <script>
+ var svgParams = {
+ viewBox: null,
+ height : "20px",
+ width : "20px",
+ meetOrSlice: "meet"
+ };
+
+ appendSVGArrayWithParams(svgParams, "img");
+ </script>
+ <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-novb-widthAndHeight-slice-1-em.html b/layout/reftests/svg/as-image/img-novb-widthAndHeight-slice-1-em.html
new file mode 100644
index 0000000000..7986e3ec2e
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-novb-widthAndHeight-slice-1-em.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+ <script src="svg-image-util.js"></script>
+</head>
+<body>
+ <script>
+ var svgParams = {
+ viewBox: null,
+ height : "2em", // 20px
+ width : "2em", // 20px
+ meetOrSlice: "slice"
+ };
+
+ appendSVGArrayWithParams(svgParams, "img");
+ </script>
+ <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-novb-widthAndHeight-slice-1-px.html b/layout/reftests/svg/as-image/img-novb-widthAndHeight-slice-1-px.html
new file mode 100644
index 0000000000..a50f10e659
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-novb-widthAndHeight-slice-1-px.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+ <script src="svg-image-util.js"></script>
+</head>
+<body>
+ <script>
+ var svgParams = {
+ viewBox: null,
+ height : "20px",
+ width : "20px",
+ meetOrSlice: "slice"
+ };
+
+ appendSVGArrayWithParams(svgParams, "img");
+ </script>
+ <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-simple-1.html b/layout/reftests/svg/as-image/img-simple-1.html
new file mode 100644
index 0000000000..1592cbc069
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-simple-1.html
@@ -0,0 +1,5 @@
+<html>
+<body>
+ <img src="lime100x100.svg">
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-simple-2.html b/layout/reftests/svg/as-image/img-simple-2.html
new file mode 100644
index 0000000000..049b2a3e45
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-simple-2.html
@@ -0,0 +1,5 @@
+<html>
+<body>
+ <img src="limeInRed100x100-viewBox.svg">
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-simple-3-ref.html b/layout/reftests/svg/as-image/img-simple-3-ref.html
new file mode 100644
index 0000000000..f77ea89e11
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-simple-3-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+ <svg style="width: 600px; height: 600px"
+ viewBox="0 0 100 100" shape-rendering="crispEdges">
+ <rect x="2" y="2" height="96" width="96"
+ stroke-width="4" stroke="black" fill="yellow"/>
+ <circle cx="50" cy="50" r="46" style="fill: blue"/>
+ </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-simple-3.html b/layout/reftests/svg/as-image/img-simple-3.html
new file mode 100644
index 0000000000..f20c2877ea
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-simple-3.html
@@ -0,0 +1,9 @@
+<html>
+<body>
+ <!-- This image scales uniformly, preserving its aspect ratio, to be
+ 600x600. Though the SVG content doesn't have a viewBox, we behave as if
+ it did when it's used as an image, since it has non-percent-valued
+ height and width attributes on the root svg node. -->
+ <img src="squaredCircle-100x100.svg" width="600px">
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-simple-4.html b/layout/reftests/svg/as-image/img-simple-4.html
new file mode 100644
index 0000000000..af0f40e31b
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-simple-4.html
@@ -0,0 +1,5 @@
+<html>
+<body>
+ <img src="lime100x100.svg" height="100px" width="100px">
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-simple-5-ref.html b/layout/reftests/svg/as-image/img-simple-5-ref.html
new file mode 100644
index 0000000000..f08c94488a
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-simple-5-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+ <svg style="width: 200px; height: 600px"
+ viewBox="0 0 100 100" preserveAspectRatio="none"
+ shape-rendering="crispEdges">
+ <rect x="2" y="2" height="96" width="96"
+ stroke-width="4" stroke="black" fill="yellow"/>
+ <circle cx="50" cy="50" r="46" style="fill: blue"/>
+ </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-simple-5.html b/layout/reftests/svg/as-image/img-simple-5.html
new file mode 100644
index 0000000000..a686a0a1cf
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-simple-5.html
@@ -0,0 +1,6 @@
+<html>
+<body>
+ <!-- Like img-simple-3, but with height != width on the img element. -->
+ <img src="squaredCircle-100x100.svg" width="200px" height="600px">
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-simple-6.html b/layout/reftests/svg/as-image/img-simple-6.html
new file mode 100644
index 0000000000..69ab8ebf03
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-simple-6.html
@@ -0,0 +1,5 @@
+<html>
+<body>
+ <img src="lime200x200.svg" width="100px">
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-simple-7-ref.html b/layout/reftests/svg/as-image/img-simple-7-ref.html
new file mode 100644
index 0000000000..76f575b447
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-simple-7-ref.html
@@ -0,0 +1,11 @@
+<html>
+<body>
+ <svg style="width: 200px; height: 200px"
+ viewBox="0 0 100 50" preserveAspectRatio="none"
+ shape-rendering="crispEdges">
+ <rect x="2" y="2" height="96" width="96"
+ stroke-width="4" stroke="black" fill="yellow"/>
+ <circle cx="50" cy="50" r="46" style="fill: blue"/>
+ </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-simple-7.html b/layout/reftests/svg/as-image/img-simple-7.html
new file mode 100644
index 0000000000..3e0138f202
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-simple-7.html
@@ -0,0 +1,6 @@
+<html>
+<body>
+ <!-- Like img-simple-3, but with height != width on the root SVG node. -->
+ <img src="squaredCircle-100x50.svg" width="200px" height="200px">
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-width-meet-1-ref.html b/layout/reftests/svg/as-image/img-width-meet-1-ref.html
new file mode 100644
index 0000000000..0793368963
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-width-meet-1-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+ <script src="svg-image-util.js"></script>
+</head>
+<body>
+ <script>
+ var svgParams = {
+ viewBox: [0, 0, 20, 40],
+ width : "20px",
+ meetOrSlice: "meet"
+ };
+
+ appendSVGArrayWithParams(svgParams, "embed");
+ </script>
+ <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-width-meet-1.html b/layout/reftests/svg/as-image/img-width-meet-1.html
new file mode 100644
index 0000000000..489b4f7ccc
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-width-meet-1.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+ <script src="svg-image-util.js"></script>
+</head>
+<body>
+ <script>
+ var svgParams = {
+ viewBox: [0, 0, 20, 40],
+ width : "20px",
+ meetOrSlice: "meet"
+ };
+
+ appendSVGArrayWithParams(svgParams, "img");
+ </script>
+ <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-width-meet-2-ref.html b/layout/reftests/svg/as-image/img-width-meet-2-ref.html
new file mode 100644
index 0000000000..ecf8776e47
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-width-meet-2-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+ <script src="svg-image-util.js"></script>
+</head>
+<body>
+ <script>
+ var svgParams = {
+ viewBox: [0, 0, 40, 20],
+ width : "2em",
+ meetOrSlice: "meet"
+ };
+
+ appendSVGArrayWithParams(svgParams, "embed");
+ </script>
+ <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-width-meet-2.html b/layout/reftests/svg/as-image/img-width-meet-2.html
new file mode 100644
index 0000000000..039aaf1f1b
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-width-meet-2.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+ <script src="svg-image-util.js"></script>
+</head>
+<body>
+ <script>
+ var svgParams = {
+ viewBox: [0, 0, 40, 20],
+ width : "2em",
+ meetOrSlice: "meet"
+ };
+
+ appendSVGArrayWithParams(svgParams, "img");
+ </script>
+ <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-width-slice-1-ref.html b/layout/reftests/svg/as-image/img-width-slice-1-ref.html
new file mode 100644
index 0000000000..e306d673c7
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-width-slice-1-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+ <script src="svg-image-util.js"></script>
+</head>
+<body>
+ <script>
+ var svgParams = {
+ viewBox: [0, 0, 20, 40],
+ width : "20px",
+ meetOrSlice: "slice"
+ };
+
+ appendSVGArrayWithParams(svgParams, "embed");
+ </script>
+ <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-width-slice-1.html b/layout/reftests/svg/as-image/img-width-slice-1.html
new file mode 100644
index 0000000000..78af6f8b1a
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-width-slice-1.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+ <script src="svg-image-util.js"></script>
+</head>
+<body>
+ <script>
+ var svgParams = {
+ viewBox: [0, 0, 20, 40],
+ width : "20px",
+ meetOrSlice: "slice"
+ };
+
+ appendSVGArrayWithParams(svgParams, "img");
+ </script>
+ <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-width-slice-2-ref.html b/layout/reftests/svg/as-image/img-width-slice-2-ref.html
new file mode 100644
index 0000000000..66161ec71d
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-width-slice-2-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+ <script src="svg-image-util.js"></script>
+</head>
+<body>
+ <script>
+ var svgParams = {
+ viewBox: [0, 0, 40, 20],
+ width : "2em",
+ meetOrSlice: "slice"
+ };
+
+ appendSVGArrayWithParams(svgParams, "embed");
+ </script>
+ <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-width-slice-2.html b/layout/reftests/svg/as-image/img-width-slice-2.html
new file mode 100644
index 0000000000..21740cf708
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-width-slice-2.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+ <script src="svg-image-util.js"></script>
+</head>
+<body>
+ <script>
+ var svgParams = {
+ viewBox: [0, 0, 40, 20],
+ width : "2em",
+ meetOrSlice: "slice"
+ };
+
+ appendSVGArrayWithParams(svgParams, "img");
+ </script>
+ <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-widthAndHeight-meet-1-ref.html b/layout/reftests/svg/as-image/img-widthAndHeight-meet-1-ref.html
new file mode 100644
index 0000000000..0c9c44ba15
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-widthAndHeight-meet-1-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+ <script src="svg-image-util.js"></script>
+</head>
+<body>
+ <script>
+ var svgParams = {
+ viewBox: [0, 0, 20, 40],
+ height : "20px",
+ width : "20px",
+ meetOrSlice: "meet"
+ };
+
+ appendSVGArrayWithParams(svgParams, "embed");
+ </script>
+ <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-widthAndHeight-meet-1.html b/layout/reftests/svg/as-image/img-widthAndHeight-meet-1.html
new file mode 100644
index 0000000000..f5453f91d0
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-widthAndHeight-meet-1.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+ <script src="svg-image-util.js"></script>
+</head>
+<body>
+ <script>
+ var svgParams = {
+ viewBox: [0, 0, 20, 40],
+ height : "20px",
+ width : "20px",
+ meetOrSlice: "meet"
+ };
+
+ appendSVGArrayWithParams(svgParams, "img");
+ </script>
+ <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-widthAndHeight-meet-2-ref.html b/layout/reftests/svg/as-image/img-widthAndHeight-meet-2-ref.html
new file mode 100644
index 0000000000..93dfa47b6e
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-widthAndHeight-meet-2-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+ <script src="svg-image-util.js"></script>
+</head>
+<body>
+ <script>
+ var svgParams = {
+ viewBox: [0, 0, 40, 20],
+ height : "2em",
+ width : "2em",
+ meetOrSlice: "meet"
+ };
+
+ appendSVGArrayWithParams(svgParams, "embed");
+ </script>
+ <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-widthAndHeight-meet-2.html b/layout/reftests/svg/as-image/img-widthAndHeight-meet-2.html
new file mode 100644
index 0000000000..367f52b28d
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-widthAndHeight-meet-2.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+ <script src="svg-image-util.js"></script>
+</head>
+<body>
+ <script>
+ var svgParams = {
+ viewBox: [0, 0, 40, 20],
+ height : "2em",
+ width : "2em",
+ meetOrSlice: "meet"
+ };
+
+ appendSVGArrayWithParams(svgParams, "img");
+ </script>
+ <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-widthAndHeight-slice-1-ref.html b/layout/reftests/svg/as-image/img-widthAndHeight-slice-1-ref.html
new file mode 100644
index 0000000000..671aa1ecd8
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-widthAndHeight-slice-1-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+ <script src="svg-image-util.js"></script>
+</head>
+<body>
+ <script>
+ var svgParams = {
+ viewBox: [0, 0, 20, 40],
+ height : "20px",
+ width : "20px",
+ meetOrSlice: "slice"
+ };
+
+ appendSVGArrayWithParams(svgParams, "embed");
+ </script>
+ <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-widthAndHeight-slice-1.html b/layout/reftests/svg/as-image/img-widthAndHeight-slice-1.html
new file mode 100644
index 0000000000..b95b7d4ff6
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-widthAndHeight-slice-1.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+ <script src="svg-image-util.js"></script>
+</head>
+<body>
+ <script>
+ var svgParams = {
+ viewBox: [0, 0, 20, 40],
+ height : "20px",
+ width : "20px",
+ meetOrSlice: "slice"
+ };
+
+ appendSVGArrayWithParams(svgParams, "img");
+ </script>
+ <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-widthAndHeight-slice-2-ref.html b/layout/reftests/svg/as-image/img-widthAndHeight-slice-2-ref.html
new file mode 100644
index 0000000000..ed94f8811b
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-widthAndHeight-slice-2-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+ <script src="svg-image-util.js"></script>
+</head>
+<body>
+ <script>
+ var svgParams = {
+ viewBox: [0, 0, 40, 20],
+ height : "2em",
+ width : "2em",
+ meetOrSlice: "slice"
+ };
+
+ appendSVGArrayWithParams(svgParams, "embed");
+ </script>
+ <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/img-widthAndHeight-slice-2.html b/layout/reftests/svg/as-image/img-widthAndHeight-slice-2.html
new file mode 100644
index 0000000000..2f89c8b4d8
--- /dev/null
+++ b/layout/reftests/svg/as-image/img-widthAndHeight-slice-2.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <link rel="stylesheet" type="text/css" href="svg-image-util.css" />
+ <script src="svg-image-util.js"></script>
+</head>
+<body>
+ <script>
+ var svgParams = {
+ viewBox: [0, 0, 40, 20],
+ height : "2em",
+ width : "2em",
+ meetOrSlice: "slice"
+ };
+
+ appendSVGArrayWithParams(svgParams, "img");
+ </script>
+ <!-- Body gets populated by script -->
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/lime100x100-50pct-ref.html b/layout/reftests/svg/as-image/lime100x100-50pct-ref.html
new file mode 100644
index 0000000000..46dde81ae6
--- /dev/null
+++ b/layout/reftests/svg/as-image/lime100x100-50pct-ref.html
@@ -0,0 +1,5 @@
+<html>
+<body>
+ <div style="width: 100px; height: 100px; background: rgb(0% 100% 0% / 50%)"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/lime100x100-noSVGDimensions.svg b/layout/reftests/svg/as-image/lime100x100-noSVGDimensions.svg
new file mode 100644
index 0000000000..74e4df78aa
--- /dev/null
+++ b/layout/reftests/svg/as-image/lime100x100-noSVGDimensions.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
+ <rect width="100" height="100" fill="lime"/>
+</svg>
diff --git a/layout/reftests/svg/as-image/lime100x100-ref.html b/layout/reftests/svg/as-image/lime100x100-ref.html
new file mode 100644
index 0000000000..daedf45c8d
--- /dev/null
+++ b/layout/reftests/svg/as-image/lime100x100-ref.html
@@ -0,0 +1,5 @@
+<html>
+<body>
+ <div style="width: 100px; height: 100px; background: lime"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/lime100x100-w-border-ref.html b/layout/reftests/svg/as-image/lime100x100-w-border-ref.html
new file mode 100644
index 0000000000..42f4d03368
--- /dev/null
+++ b/layout/reftests/svg/as-image/lime100x100-w-border-ref.html
@@ -0,0 +1,5 @@
+<html>
+<body>
+ <div style="width: 100px; height: 100px; background: lime; border: 1px solid black"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/lime100x100.png b/layout/reftests/svg/as-image/lime100x100.png
new file mode 100644
index 0000000000..c9bb375943
--- /dev/null
+++ b/layout/reftests/svg/as-image/lime100x100.png
Binary files differ
diff --git a/layout/reftests/svg/as-image/lime100x100.svg b/layout/reftests/svg/as-image/lime100x100.svg
new file mode 100644
index 0000000000..8bdec62c1f
--- /dev/null
+++ b/layout/reftests/svg/as-image/lime100x100.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+ width="100" height="100">
+ <rect width="100%" height="100%" fill="lime"/>
+</svg>
diff --git a/layout/reftests/svg/as-image/lime200x100.svg b/layout/reftests/svg/as-image/lime200x100.svg
new file mode 100644
index 0000000000..75aadf6402
--- /dev/null
+++ b/layout/reftests/svg/as-image/lime200x100.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+ width="200" height="100">
+ <rect width="200px" height="100px" fill="lime"/>
+</svg>
diff --git a/layout/reftests/svg/as-image/lime200x200.svg b/layout/reftests/svg/as-image/lime200x200.svg
new file mode 100644
index 0000000000..d746c2848c
--- /dev/null
+++ b/layout/reftests/svg/as-image/lime200x200.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+ width="200" height="200">
+ <rect width="200px" height="200px" fill="lime"/>
+</svg>
diff --git a/layout/reftests/svg/as-image/lime50x25.svg b/layout/reftests/svg/as-image/lime50x25.svg
new file mode 100644
index 0000000000..9afc0af362
--- /dev/null
+++ b/layout/reftests/svg/as-image/lime50x25.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+ width="50" height="25">
+ <rect width="100%" height="100%" fill="lime"/>
+</svg>
diff --git a/layout/reftests/svg/as-image/lime50x50.svg b/layout/reftests/svg/as-image/lime50x50.svg
new file mode 100644
index 0000000000..7f9d530380
--- /dev/null
+++ b/layout/reftests/svg/as-image/lime50x50.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+ width="50" height="50">
+ <rect width="100%" height="100%" fill="lime"/>
+</svg>
diff --git a/layout/reftests/svg/as-image/limeInRed-noSVGDimensions-animViewBox.svg b/layout/reftests/svg/as-image/limeInRed-noSVGDimensions-animViewBox.svg
new file mode 100644
index 0000000000..151ec3077f
--- /dev/null
+++ b/layout/reftests/svg/as-image/limeInRed-noSVGDimensions-animViewBox.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
+ <set attributeName="viewBox" to="25 25 50 50" begin="0" dur="indefinite"/>
+ <rect width="100" height="100" fill="red"/>
+ <rect x="25" y="25" width="50" height="50" fill="lime"/>
+</svg>
diff --git a/layout/reftests/svg/as-image/limeInRed-noSVGDimensions-viewBox.svg b/layout/reftests/svg/as-image/limeInRed-noSVGDimensions-viewBox.svg
new file mode 100644
index 0000000000..baa944a81d
--- /dev/null
+++ b/layout/reftests/svg/as-image/limeInRed-noSVGDimensions-viewBox.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+ viewBox="25 25 50 50">
+ <rect width="100" height="100" fill="red"/>
+ <rect x="25" y="25" width="50" height="50" fill="lime"/>
+</svg>
diff --git a/layout/reftests/svg/as-image/limeInRed100x100-viewBox.svg b/layout/reftests/svg/as-image/limeInRed100x100-viewBox.svg
new file mode 100644
index 0000000000..b97337d0c3
--- /dev/null
+++ b/layout/reftests/svg/as-image/limeInRed100x100-viewBox.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+ width="100" height="100" viewBox="25 25 50 50">
+ <rect width="100" height="100" fill="red"/>
+ <rect x="25" y="25" width="50" height="50" fill="lime"/>
+</svg>
diff --git a/layout/reftests/svg/as-image/limeInRed100x100.png b/layout/reftests/svg/as-image/limeInRed100x100.png
new file mode 100644
index 0000000000..d65c62635c
--- /dev/null
+++ b/layout/reftests/svg/as-image/limeInRed100x100.png
Binary files differ
diff --git a/layout/reftests/svg/as-image/limeInRed100x100.svg b/layout/reftests/svg/as-image/limeInRed100x100.svg
new file mode 100644
index 0000000000..45d9396b98
--- /dev/null
+++ b/layout/reftests/svg/as-image/limeInRed100x100.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+ width="100" height="100">
+ <rect width="100%" height="100%" fill="red"/>
+ <rect x="25" y="25" width="50" height="50" fill="lime"/>
+</svg>
diff --git a/layout/reftests/svg/as-image/list-simple-1-ref.html b/layout/reftests/svg/as-image/list-simple-1-ref.html
new file mode 100644
index 0000000000..b603886ba5
--- /dev/null
+++ b/layout/reftests/svg/as-image/list-simple-1-ref.html
@@ -0,0 +1,8 @@
+<html>
+<body style="margin-left: 100px">
+ <ul style="list-style-image: url('lime100x100.png')">
+ <li>abc
+ <li>def
+ </ul>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/list-simple-1.html b/layout/reftests/svg/as-image/list-simple-1.html
new file mode 100644
index 0000000000..2e638943fb
--- /dev/null
+++ b/layout/reftests/svg/as-image/list-simple-1.html
@@ -0,0 +1,8 @@
+<html>
+<body style="margin-left: 100px">
+ <ul style="list-style-image: url('lime100x100.svg')">
+ <li>abc
+ <li>def
+ </ul>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/nonuniform-scale-2d.html b/layout/reftests/svg/as-image/nonuniform-scale-2d.html
new file mode 100644
index 0000000000..b14ff82efa
--- /dev/null
+++ b/layout/reftests/svg/as-image/nonuniform-scale-2d.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<head>
+ <style>
+ body {
+ border: 0px;
+ margin: 0px;
+ padding: 0px;
+ }
+ img {
+ width: 100px;
+ height: 100px;
+ transform-origin: 0 0 0;
+ }
+ </style>
+</head>
+<body>
+ <img src="blue-square-in-square.svg">
+
+ <script>
+ var scales = location.search.substring(1).split("&");
+ var xScale = scales[0];
+ var yScale = scales[1];
+
+ // Create a style representing a 2d transform.
+ var style = 'transform: matrix(' + xScale + ', 0,' +
+ '0, ' + yScale + ',' +
+ '0, 0);';
+
+ // Apply the style to the image.
+ var img = document.getElementsByTagName("img")[0];
+ img.style = style;
+ </script>
+</body>
diff --git a/layout/reftests/svg/as-image/nonuniform-scale-3d.html b/layout/reftests/svg/as-image/nonuniform-scale-3d.html
new file mode 100644
index 0000000000..8da4672989
--- /dev/null
+++ b/layout/reftests/svg/as-image/nonuniform-scale-3d.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<head>
+ <style>
+ body {
+ border: 0px;
+ margin: 0px;
+ padding: 0px;
+ }
+ img {
+ width: 100px;
+ height: 100px;
+ transform-origin: 0 0 0;
+ }
+ </style>
+</head>
+<body>
+ <img src="blue-square-in-square.svg">
+
+ <script>
+ var scales = location.search.substring(1).split("&");
+ var xScale = scales[0];
+ var yScale = scales[1];
+ var zScale = scales[2];
+
+ // Create a style representing a 3d transform.
+ var style = 'transform: matrix3d(' + xScale + ', 0, 0, 0,' +
+ '0, ' + yScale + ', 0, 0,' +
+ '0, 0, ' + zScale + ', 0,' +
+ '0, 0, 0, 1);';
+
+ // Apply the style to the image.
+ var img = document.getElementsByTagName("img")[0];
+ img.style = style;
+ </script>
+</body>
diff --git a/layout/reftests/svg/as-image/nonuniform-scale-ref.html b/layout/reftests/svg/as-image/nonuniform-scale-ref.html
new file mode 100644
index 0000000000..9644d44e54
--- /dev/null
+++ b/layout/reftests/svg/as-image/nonuniform-scale-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<head>
+ <style>
+ body {
+ border: 0px;
+ margin: 0px;
+ padding: 0px;
+ }
+ </style>
+</head>
+<body>
+ <img src="blue-square-in-square-par-none.svg">
+
+ <script>
+ var sizes = location.search.substring(1).split("&");
+
+ // Apply the size to the image.
+ var img = document.getElementsByTagName("img")[0];
+ img.width = sizes[0];
+ img.height = sizes[1];
+ </script>
+</body>
diff --git a/layout/reftests/svg/as-image/reftest.list b/layout/reftests/svg/as-image/reftest.list
new file mode 100644
index 0000000000..bf06b4c948
--- /dev/null
+++ b/layout/reftests/svg/as-image/reftest.list
@@ -0,0 +1,222 @@
+# Tests related to SVG being used as an image
+
+# zoom/
+include zoom/reftest.list
+
+# Background-image tests
+== background-display-none-1.html about:blank
+== background-simple-1.html lime100x100-ref.html
+== background-simple-2.html lime100x100-ref.html
+
+# Sightly trickier background-image test
+== background-viewBox-1.html lime100x100-ref.html
+
+# background tests with the background area getting resized
+== background-resize-1.html lime100x100-ref.html
+== background-resize-2.html lime100x100-ref.html
+== background-resize-3.html lime100x100-ref.html
+== background-resize-4.html lime100x100-ref.html
+
+# Test for stretching background images by different amounts in each dimension
+== background-stretch-1.html background-stretch-1-ref.html
+
+# Tests for scaling background images
+fails-if(useDrawSnapshot) == background-scale-no-viewbox-1.html background-scale-no-viewbox-1-ref.html
+fails-if(useDrawSnapshot) == background-scale-with-viewbox-1.html background-scale-with-viewbox-1-ref.html
+
+# Tests with -moz-image-rect()
+== background-image-rect-1svg.html lime100x100-ref.html
+== background-image-rect-1png.html lime100x100-ref.html
+== background-image-rect-2.html lime100x100-ref.html
+
+# Test for border-image
+== border-image-simple-1.html lime100x100-ref.html
+== border-image-simple-2.html lime100x100-ref.html
+
+# Test for canvas "drawImage" method
+== canvas-drawImage-simple-1a.html lime100x100-ref.html
+== canvas-drawImage-simple-1b.html lime100x100-ref.html
+
+== canvas-drawImage-scale-1a.html lime100x100-ref.html
+== canvas-drawImage-scale-1b.html lime100x100-ref.html
+== canvas-drawImage-scale-1c.html lime100x100-ref.html
+
+fuzzy(0-1,0-2) fuzzy-if(!remoteCanvas,0-1,0-529) fuzzy-if(remoteCanvas,0-97,0-745) fuzzy-if(Android&&device,0-64,0-1212) == canvas-drawImage-scale-2a.html canvas-drawImage-scale-2-ref.html
+fuzzy(0-1,0-2) fuzzy-if(!remoteCanvas,0-1,0-529) fuzzy-if(remoteCanvas,0-97,0-745) fuzzy-if(Android&&device,0-64,0-1212) == canvas-drawImage-scale-2b.html canvas-drawImage-scale-2-ref.html
+
+fuzzy-if(winWidget,0-1,0-10000) fuzzy-if(azureSkia,0-1,0-10000) fuzzy-if(Android,0-1,0-10000) == canvas-drawImage-alpha-1.html canvas-drawImage-alpha-1-ref.html
+#Same as scale-2a but with globalAlpha:
+fuzzy(0-1,0-2) fuzzy-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu),0-1,0-40000) fuzzy-if(azureSkia,0-1,0-40000) fuzzy-if(winWidget&&!remoteCanvas,0-1,0-39900) fuzzy-if(remoteCanvas&&!swgl,1-73,600-40000) fuzzy-if(Android&&device,0-48,0-39989) == canvas-drawImage-alpha-2.html canvas-drawImage-alpha-2-ref.html
+
+== canvas-drawImage-slice-1a.html lime100x100-ref.html
+== canvas-drawImage-slice-1b.html lime100x100-ref.html
+
+== canvas-drawImage-origin-clean-1.html lime100x100-ref.html
+== canvas-drawImage-transform-restored.html canvas-drawImage-transform-restored-ref.html
+
+# Context paint tests (this feature is currently not part of any spec.)
+# context-fill:
+== context-fill-01.html blue100x100-ref.html
+test-pref(svg.context-properties.content.enabled,true) == context-fill-01.html lime100x100-ref.html
+== context-fill-02.html transparent100x100-w-border-ref.html
+test-pref(svg.context-properties.content.enabled,true) == context-fill-02.html lime100x100-w-border-ref.html
+test-pref(svg.context-properties.content.enabled,true) == context-fill-03.html lime100x100-50pct-ref.html
+# fuzz because on win8 the r & b components are off by one
+fuzzy-if(winWidget,0-1,0-10000) test-pref(svg.context-properties.content.enabled,true) == context-fill-04.html lime100x100-50pct-ref.html
+test-pref(svg.context-properties.content.enabled,true) == context-fill-05.html context-fill-or-stroke-05-ref.html
+test-pref(svg.context-properties.content.enabled,true) == context-fill-06.html lime100x100-ref.html
+test-pref(svg.context-properties.content.enabled,true) == context-fill-07.html context-fill-07-ref.html
+test-pref(svg.context-properties.content.enabled,true) == context-fill-08.html blue100x100-ref.html
+test-pref(svg.context-properties.content.enabled,true) == context-fill-bg-image-01.html blue100x100-ref.html
+# context-stroke:
+== context-stroke-01.html blue100x100-ref.html
+test-pref(svg.context-properties.content.enabled,true) == context-stroke-01.html lime100x100-ref.html
+== context-stroke-02.html transparent100x100-w-border-ref.html
+test-pref(svg.context-properties.content.enabled,true) == context-stroke-02.html lime100x100-w-border-ref.html
+test-pref(svg.context-properties.content.enabled,true) == context-stroke-03.html lime100x100-50pct-ref.html
+# fuzz because on win8 the r & b components are off by one
+fuzzy-if(winWidget,0-1,0-10000) test-pref(svg.context-properties.content.enabled,true) == context-stroke-04.html lime100x100-50pct-ref.html
+test-pref(svg.context-properties.content.enabled,true) == context-stroke-05.html context-fill-or-stroke-05-ref.html
+test-pref(svg.context-properties.content.enabled,true) == context-stroke-06.html lime100x100-ref.html
+test-pref(svg.context-properties.content.enabled,true) == context-stroke-07.html context-stroke-07-ref.html
+test-pref(svg.context-properties.content.enabled,true) == context-stroke-08.html blue100x100-border-ref.html
+test-pref(svg.context-properties.content.enabled,true) == context-stroke-bg-image-01.html blue100x100-border-ref.html
+# context-fill-opacity:
+== context-fill-opacity-01.html blue100x100-ref.html
+fuzzy-if(winWidget,0-1,0-10000) test-pref(svg.context-properties.content.enabled,true) == context-fill-opacity-01.html context-fill-or-stroke-opacity-01-ref.html # Bug 1377327
+fuzzy-if(winWidget,0-1,0-20000) test-pref(svg.context-properties.content.enabled,true) == context-fill-opacity-02.html context-fill-or-stroke-opacity-02-ref.html # Bug 1377327
+fuzzy-if(winWidget,0-1,0-10000) test-pref(svg.context-properties.content.enabled,true) == context-fill-opacity-03.html context-fill-or-stroke-opacity-03-ref.html # Bug 1377327
+fuzzy-if(winWidget,0-1,0-10000) test-pref(svg.context-properties.content.enabled,true) == context-fill-opacity-04.html blue100x100-ref.html # Bug 1377327
+fuzzy-if(winWidget,0-1,0-10000) test-pref(svg.context-properties.content.enabled,true) == context-fill-opacity-05.html blue100x100-ref.html # Bug 1377327
+# context-stroke-opacity:
+== context-stroke-opacity-01.html blue100x100-ref.html
+fuzzy-if(winWidget,0-1,0-10000) test-pref(svg.context-properties.content.enabled,true) == context-stroke-opacity-01.html context-fill-or-stroke-opacity-01-ref.html # Bug 1377327
+fuzzy-if(winWidget,0-1,0-20000) test-pref(svg.context-properties.content.enabled,true) == context-stroke-opacity-02.html context-fill-or-stroke-opacity-02-ref.html # Bug 1377327
+fuzzy-if(winWidget,0-1,0-10000) test-pref(svg.context-properties.content.enabled,true) == context-stroke-opacity-03.html context-fill-or-stroke-opacity-03-ref.html # Bug 1377327
+fuzzy-if(winWidget,0-1,0-10000) test-pref(svg.context-properties.content.enabled,true) == context-stroke-opacity-04.html blue100x100-ref.html # Bug 1377327
+fuzzy-if(winWidget,0-1,0-10000) test-pref(svg.context-properties.content.enabled,true) == context-stroke-opacity-05.html blue100x100-ref.html # Bug 1377327
+
+# Simple <img> tests
+== img-simple-1.html lime100x100-ref.html
+== img-simple-2.html lime100x100-ref.html
+fuzzy(0-255,0-350) fuzzy-if(geckoview,0-255,0-4063) == img-simple-3.html img-simple-3-ref.html #Bug 1564891, bug 1574154
+== img-simple-4.html lime100x100-ref.html
+fuzzy(0-255,0-90) fuzzy-if(geckoview,0-255,0-1268) == img-simple-5.html img-simple-5-ref.html
+== img-simple-6.html lime100x100-ref.html
+fuzzy(0-255,0-27) == img-simple-7.html img-simple-7-ref.html
+
+# Test with mix of <html:img> and <svg:image> referring to the same images,
+# with a variety of preserveAspectRatio values in play.
+random == img-and-image-1.html img-and-image-1-ref.svg # bug 645267
+
+# More complex <img> tests
+== img-blobURI-1.html lime100x100-ref.html
+skip == img-blobURI-2.html lime100x100-ref.html
+fuzzy-if(d2d,0-16,0-10) == img-content-outside-viewBox-1.html img-content-outside-viewBox-1-ref.html # d2d is bug 1074161
+== img-display-none-1.html about:blank
+== img-dyn-1.html img-dyn-1-ref.html
+== img-foreignObject-1.html lime100x100-ref.html
+
+# The following tests check that content embedded via <iframe> and <embed>
+# doesn't load (or execute scripts) in SVG-as-an-image.
+# The "!=" lines are to test that the SVG content, when viewed directly (not as
+# an image), does actually render its external content (making it look
+# different from the reference case). We don't do that check for
+# img-foreignObject-iframe-1a.html, though, because its SVG image tries to
+# alert(), and that'd trigger a reftest timeout if we loaded that file directly.
+== img-foreignObject-embed-1.html lime100x100-ref.html
+skip != img-foreignObject-embed-1-helper.svg lime100x100.svg # Bug 1708599
+== img-foreignObject-iframe-1a.html lime100x100-ref.html
+== img-foreignObject-iframe-1b.html lime100x100-ref.html
+!= img-foreignObject-iframe-1b-helper.svg lime100x100.svg
+
+== img-widthAndHeight-meet-1.html img-widthAndHeight-meet-1-ref.html
+== img-widthAndHeight-meet-2.html img-widthAndHeight-meet-2-ref.html
+fuzzy-if(!useDrawSnapshot,255-255,9-9) random-if(geckoview) == img-widthAndHeight-slice-1.html img-widthAndHeight-slice-1-ref.html
+== img-widthAndHeight-slice-2.html img-widthAndHeight-slice-2-ref.html
+
+== img-height-meet-1.html img-height-meet-1-ref.html
+== img-height-meet-2.html img-height-meet-2-ref.html
+fuzzy-if(!useDrawSnapshot,255-255,9-9) random-if(geckoview) == img-height-slice-1.html img-height-slice-1-ref.html
+== img-height-slice-2.html img-height-slice-2-ref.html
+
+== img-width-meet-1.html img-width-meet-1-ref.html
+== img-width-meet-2.html img-width-meet-2-ref.html
+fuzzy-if(!useDrawSnapshot,255-255,3-9) random-if(geckoview) == img-width-slice-1.html img-width-slice-1-ref.html
+== img-width-slice-2.html img-width-slice-2-ref.html
+
+# Alternate version of "width & height both non-%-valued" tests, but now
+# with no explicit viewBox, to trigger "synthesize-viewBox" behavior
+== img-novb-widthAndHeight-meet-1-em.html img-novb-widthAndHeight-all-1-ref.html
+== img-novb-widthAndHeight-meet-1-px.html img-novb-widthAndHeight-all-1-ref.html
+== img-novb-widthAndHeight-slice-1-em.html img-novb-widthAndHeight-all-1-ref.html
+== img-novb-widthAndHeight-slice-1-px.html img-novb-widthAndHeight-all-1-ref.html
+
+# Alternate versions of "only one dimension is non-%-valued" tests, but now
+# with no explicit viewBox, to trigger "synthesize-viewBox" behavior
+== img-novb-height-meet-1.html img-novb-height-all-1-ref.html
+== img-novb-height-slice-1.html img-novb-height-all-1-ref.html
+fuzzy(0-255,0-10) == img-novb-width-meet-1.html img-novb-width-all-1-ref.html
+fuzzy(0-255,0-10) == img-novb-width-slice-1.html img-novb-width-all-1-ref.html
+
+# with with a fragmentIdentifier viewBox
+== img-fragment-1a.html img-fragment-1-ref.html
+== img-fragment-1b.html img-fragment-1-ref.html
+== img-fragment-1c.html img-fragment-1-ref.html
+== img-fragment-2a.html img-fragment-2-ref.html
+== img-fragment-2b.html img-fragment-2-ref.html
+== img-fragment-2c.html img-fragment-2-ref.html
+
+fuzzy-if(/^Windows\x20NT\x206\.1/.test(http.oscpu),0-8,0-1) == list-simple-1.html list-simple-1-ref.html
+
+== svg-image-simple-1.svg lime100x100.svg
+== svg-image-simple-2.svg lime100x100.svg
+== svg-image-simple-3.svg lime100x100.svg
+
+# tests for <svg> files that include themselves as an <image>
+fuzzy-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu),0-1,0-1) == svg-image-recursive-1a.svg svg-image-recursive-1-ref.svg
+fuzzy-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu),0-1,0-1) == svg-image-recursive-1b.svg svg-image-recursive-1-ref.svg
+fuzzy-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu),0-1,0-1) == svg-image-recursive-2a.svg svg-image-recursive-2-ref.svg
+fuzzy-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu),0-1,0-1) == svg-image-recursive-2b.html svg-image-recursive-2-ref.svg
+
+# tests for external resources vs. data URIs in SVG as an image
+== svg-image-datauri-1.html lime100x100.svg
+HTTP == svg-image-datauri-1.html lime100x100.svg
+== svg-image-external-1.html blue100x100.svg
+HTTP == svg-image-external-1.html blue100x100.svg
+== svg-stylesheet-datauri-1.html lime100x100.svg
+HTTP == svg-stylesheet-datauri-1.html lime100x100.svg
+== svg-stylesheet-external-1.html blue100x100.svg
+HTTP == svg-stylesheet-external-1.html blue100x100.svg
+
+# tests for SVG <image> that should have a synthetic viewBox
+== svg-image-synthetic-viewBox-01.svg svg-image-synthetic-viewBox-01-ref.svg
+
+# Test for painting problems with SVGs used in border images.
+# XXXseth: The underlying problems also apply to media fragments,
+# but the test case would be much simpler. This should be switched
+# over to use media fragments once bug 790640 lands.
+fuzzy(0-2,0-1) == svg-border-image-repaint-1.html svg-border-image-repaint-1-ref.html
+
+# Test that 'image-orientation: from-image' has no effect, since SVGs don't have EXIF data.
+== image-orientation-viewbox-and-size.html?from-image image-orientation-viewbox-and-size.html?none
+== image-orientation-viewbox-no-size.html?from-image image-orientation-viewbox-no-size.html?none
+
+# Tests that nonuniform scales work with SVG-as-image.
+== nonuniform-scale-2d.html?0.5&1.0 nonuniform-scale-ref.html?50&100
+== nonuniform-scale-2d.html?1.0&0.5 nonuniform-scale-ref.html?100&50
+== nonuniform-scale-3d.html?0.5&1.0&0.5 nonuniform-scale-ref.html?50&100
+== nonuniform-scale-3d.html?1.0&0.5&0.5 nonuniform-scale-ref.html?100&50
+
+# Sanity checks that nonuniform scales don't devolve to uniform scales.
+!= nonuniform-scale-2d.html?0.3&1.0 nonuniform-scale-2d.html?0.3&0.3
+!= nonuniform-scale-2d.html?0.3&1.0 nonuniform-scale-2d.html?1.0&1.0
+!= nonuniform-scale-2d.html?1.0&0.3 nonuniform-scale-2d.html?0.3&0.3
+!= nonuniform-scale-2d.html?1.0&0.3 nonuniform-scale-2d.html?1.0&1.0
+!= nonuniform-scale-3d.html?0.3&1.0&0.3 nonuniform-scale-3d.html?0.3&0.3&0.3
+!= nonuniform-scale-3d.html?0.3&1.0&0.3 nonuniform-scale-3d.html?1.0&1.0&1.0
+!= nonuniform-scale-3d.html?1.0&0.3&0.3 nonuniform-scale-3d.html?0.3&0.3&0.3
+!= nonuniform-scale-3d.html?1.0&0.3&0.3 nonuniform-scale-3d.html?1.0&1.0&1.0
+
+# Test for preserveAspectRatio with no-longer-supported "defer" keyword
+== defer-unsupported-1.svg defer-unsupported-1-ref.svg
diff --git a/layout/reftests/svg/as-image/squaredCircle-100x100.svg b/layout/reftests/svg/as-image/squaredCircle-100x100.svg
new file mode 100644
index 0000000000..892cc0e8c6
--- /dev/null
+++ b/layout/reftests/svg/as-image/squaredCircle-100x100.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+ width="100" height="100"
+ shape-rendering="crispEdges">
+ <rect x="2" y="2" height="96" width="96"
+ stroke-width="4" stroke="black" fill="yellow"/>
+ <circle cx="50" cy="50" r="46" style="fill: blue"/>
+</svg>
diff --git a/layout/reftests/svg/as-image/squaredCircle-100x50.svg b/layout/reftests/svg/as-image/squaredCircle-100x50.svg
new file mode 100644
index 0000000000..57b5169581
--- /dev/null
+++ b/layout/reftests/svg/as-image/squaredCircle-100x50.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+ width="100" height="50"
+ shape-rendering="crispEdges">
+ <rect x="2" y="2" height="96" width="96"
+ stroke-width="4" stroke="black" fill="yellow"/>
+ <circle cx="50" cy="50" r="46" style="fill: blue"/>
+</svg>
diff --git a/layout/reftests/svg/as-image/squaredCircle-transparent.svg b/layout/reftests/svg/as-image/squaredCircle-transparent.svg
new file mode 100644
index 0000000000..32bd67b634
--- /dev/null
+++ b/layout/reftests/svg/as-image/squaredCircle-transparent.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" >
+ <rect x="0" y="0" height="100" width="100" fill="orange"/>
+ <g style="opacity:.75">
+ <rect x="2" y="2" height="96" width="96"
+ stroke-width="4" stroke="black" fill="yellow"/>
+ <circle cx="50" cy="50" r="46" style="fill: blue"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/as-image/squaredCircle-viewBox-100x100.svg b/layout/reftests/svg/as-image/squaredCircle-viewBox-100x100.svg
new file mode 100644
index 0000000000..4912c656d0
--- /dev/null
+++ b/layout/reftests/svg/as-image/squaredCircle-viewBox-100x100.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100"
+ height="100" width="100" >
+ <rect x="2" y="2" height="96" width="96"
+ stroke-width="4" stroke="black" fill="yellow"/>
+ <circle cx="50" cy="50" r="46" style="fill: blue"/>
+</svg>
diff --git a/layout/reftests/svg/as-image/squaredCircle-viewBox-noSize.svg b/layout/reftests/svg/as-image/squaredCircle-viewBox-noSize.svg
new file mode 100644
index 0000000000..c0665d15d6
--- /dev/null
+++ b/layout/reftests/svg/as-image/squaredCircle-viewBox-noSize.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+ <rect x="2" y="2" height="96" width="96"
+ stroke-width="4" stroke="black" fill="yellow"/>
+ <circle cx="50" cy="50" r="46" style="fill: blue"/>
+</svg>
diff --git a/layout/reftests/svg/as-image/svg-border-image-repaint-1-ref.html b/layout/reftests/svg/as-image/svg-border-image-repaint-1-ref.html
new file mode 100644
index 0000000000..bb11b225b6
--- /dev/null
+++ b/layout/reftests/svg/as-image/svg-border-image-repaint-1-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<!-- 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/. -->
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=809181
+-->
+<html>
+ <head></head>
+ <body>
+ <iframe src="svg-border-image-repaint-iframe.html"></iframe>
+ </body>
+</html>
+
diff --git a/layout/reftests/svg/as-image/svg-border-image-repaint-1.html b/layout/reftests/svg/as-image/svg-border-image-repaint-1.html
new file mode 100644
index 0000000000..2f33345873
--- /dev/null
+++ b/layout/reftests/svg/as-image/svg-border-image-repaint-1.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<!-- 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/. -->
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=809181
+-->
+<html class="reftest-wait">
+ <head>
+ <script>
+ document.addEventListener('MozReftestInvalidate', function() {
+ document.getElementById('test').style.opacity = '1.0';
+ document.documentElement.removeAttribute('class');
+ });
+ </script>
+ </head>
+ <body>
+ <iframe id="test" src="svg-border-image-repaint-iframe.html" style="opacity: 0.5"></iframe>
+ </body>
+</html>
diff --git a/layout/reftests/svg/as-image/svg-border-image-repaint-helper.svg b/layout/reftests/svg/as-image/svg-border-image-repaint-helper.svg
new file mode 100644
index 0000000000..ccc7824465
--- /dev/null
+++ b/layout/reftests/svg/as-image/svg-border-image-repaint-helper.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- 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/. -->
+<svg viewBox="0 0 40 20" version="1.1" xmlns="http://www.w3.org/2000/svg">
+<path fill="#000000" d=" M 0.00 0.00 L 20.00 0.00 C 20.00 6.67 20.00 13.33 20.00 20.00 C 13.33 20.00 6.67 20.00 0.00 20.00 L 0.00 0.00 Z" />
+<path fill="#ff0000" d=" M 20.00 0.00 L 40.00 0.00 C 40.00 6.67 40.00 13.33 40.00 20.00 C 33.33 20.00 26.67 20.00 20.00 20.00 C 20.00 13.33 20.00 6.67 20.00 0.00 Z" />
+</svg>
diff --git a/layout/reftests/svg/as-image/svg-border-image-repaint-iframe.html b/layout/reftests/svg/as-image/svg-border-image-repaint-iframe.html
new file mode 100644
index 0000000000..f0281228ed
--- /dev/null
+++ b/layout/reftests/svg/as-image/svg-border-image-repaint-iframe.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<!-- 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/. -->
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=809181
+-->
+<html>
+ <head>
+ <style>
+ div {
+ background-color: green;
+ border-image: url("svg-border-image-repaint-helper.svg") 20 repeat;
+ border-image-width: 20px 20px 20px 20px;
+ width: 200px;
+ height: 200px;
+ }
+ </style>
+ </head>
+ <body>
+ <div></div>
+ </body>
+</html>
diff --git a/layout/reftests/svg/as-image/svg-image-datauri-1.html b/layout/reftests/svg/as-image/svg-image-datauri-1.html
new file mode 100644
index 0000000000..3d7d171b55
--- /dev/null
+++ b/layout/reftests/svg/as-image/svg-image-datauri-1.html
@@ -0,0 +1,5 @@
+<html>
+<body style="margin: 0">
+ <img src="svg-image-datauri.svg">
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/svg-image-datauri.svg b/layout/reftests/svg/as-image/svg-image-datauri.svg
new file mode 100644
index 0000000000..114a772325
--- /dev/null
+++ b/layout/reftests/svg/as-image/svg-image-datauri.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="100" height="100">
+ <!-- This blue rect should always be covered up by the <image>: -->
+ <circle cx="50" cy="50" r="50" fill="blue"/>
+ <image width="100" height="100"
+ xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAAXNSR0IArs4c6QAAAKJJREFUeNrt0QENAAAIw7CDf89gg5BOwlqZTHSmtgCIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAgIEAERECACAkRAvrfrTQLGaH3qbAAAAABJRU5ErkJggg%3D%3D"/>
+</svg>
diff --git a/layout/reftests/svg/as-image/svg-image-external-1.html b/layout/reftests/svg/as-image/svg-image-external-1.html
new file mode 100644
index 0000000000..3a13e55164
--- /dev/null
+++ b/layout/reftests/svg/as-image/svg-image-external-1.html
@@ -0,0 +1,5 @@
+<html>
+<body style="margin: 0">
+ <img src="svg-image-external.svg">
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/svg-image-external.svg b/layout/reftests/svg/as-image/svg-image-external.svg
new file mode 100644
index 0000000000..721d4fe13c
--- /dev/null
+++ b/layout/reftests/svg/as-image/svg-image-external.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="100" height="100">
+ <!-- This blue rect should be covered up by the <image> when this SVG is
+ loaded as an image by a local document, but not when the document is
+ served over HTTP: -->
+ <rect width="100" height="100" fill="blue"/>
+ <image width="100" height="100"
+ xlink:href="lime100x100.png"/>
+</svg>
diff --git a/layout/reftests/svg/as-image/svg-image-recursive-1-ref.svg b/layout/reftests/svg/as-image/svg-image-recursive-1-ref.svg
new file mode 100644
index 0000000000..b884f4e5bb
--- /dev/null
+++ b/layout/reftests/svg/as-image/svg-image-recursive-1-ref.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="100" height="100">
+ <circle cx="10" cy="10" r="10" fill="blue"/>
+ <circle cx="30" cy="30" r="10" fill="blue"/>
+</svg>
diff --git a/layout/reftests/svg/as-image/svg-image-recursive-1a.svg b/layout/reftests/svg/as-image/svg-image-recursive-1a.svg
new file mode 100644
index 0000000000..2587877c6a
--- /dev/null
+++ b/layout/reftests/svg/as-image/svg-image-recursive-1a.svg
@@ -0,0 +1,13 @@
+<!-- This SVG file uses itself as an image. Currently, we don't paint
+ recursively-referenced images beyond the first level. When this testcase
+ is viewed directly, it gets treated as a document (not an image), so its
+ <image> element is painted. However, the <image>'s own *internal* <image>
+ element does *not* get painted. So we end up painting two blue circles:
+ one for the <circle> and one for the <image>'s <circle> (and no more). -->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="100" height="100">
+ <circle cx="10" cy="10" r="10" fill="blue"/>
+ <image x="20" y="20" width="100" height="100"
+ xlink:href="svg-image-recursive-1a.svg"/> <!-- my own filename -->
+</svg>
diff --git a/layout/reftests/svg/as-image/svg-image-recursive-1b.svg b/layout/reftests/svg/as-image/svg-image-recursive-1b.svg
new file mode 100644
index 0000000000..3e5c9befe9
--- /dev/null
+++ b/layout/reftests/svg/as-image/svg-image-recursive-1b.svg
@@ -0,0 +1,15 @@
+<!-- This SVG file uses itself as an image. Currently, we don't paint
+ recursively-referenced images beyond the first level. When this testcase
+ is viewed directly, it gets treated as a document (not an image), so its
+ <image> element is painted. However, the <image>'s own *internal* <image>
+ element does *not* get painted. So we end up painting two blue circles:
+ one for the <circle> and one for the <image>'s <circle> (and no more). -->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="100" height="100">
+ <circle cx="10" cy="10" r="10" fill="blue"/>
+ <image x="20" y="20" width="100" height="100"
+ xlink:href="#foo"/>
+ <!-- When used as a URL, #foo evaluates to ${my_url}#foo, which (when treated
+ as an image URL) just turns into ${my_url}. -->
+</svg>
diff --git a/layout/reftests/svg/as-image/svg-image-recursive-2-ref.svg b/layout/reftests/svg/as-image/svg-image-recursive-2-ref.svg
new file mode 100644
index 0000000000..e548c53f47
--- /dev/null
+++ b/layout/reftests/svg/as-image/svg-image-recursive-2-ref.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="100" height="100">
+ <circle cx="10" cy="10" r="10" fill="blue"/>
+</svg>
diff --git a/layout/reftests/svg/as-image/svg-image-recursive-2a.svg b/layout/reftests/svg/as-image/svg-image-recursive-2a.svg
new file mode 100644
index 0000000000..651c29e85e
--- /dev/null
+++ b/layout/reftests/svg/as-image/svg-image-recursive-2a.svg
@@ -0,0 +1,10 @@
+<!-- The SVG file referenced in our <image> tag uses itself as an <image>.
+ Currently, we don't paint recursively-referenced images beyond the first
+ level. So, the <image> element inside our helper document doesn't get
+ painted, and we end up only showing one blue circle. -->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="100" height="100">
+ <image width="100" height="100"
+ xlink:href="svg-image-recursive-1a.svg"/>
+</svg>
diff --git a/layout/reftests/svg/as-image/svg-image-recursive-2b.html b/layout/reftests/svg/as-image/svg-image-recursive-2b.html
new file mode 100644
index 0000000000..2e0708c1d9
--- /dev/null
+++ b/layout/reftests/svg/as-image/svg-image-recursive-2b.html
@@ -0,0 +1,9 @@
+<!-- The SVG file referenced in our <img> tag uses itself as an <image>.
+ Currently, we don't paint recursively-referenced images beyond the first
+ level. So, the <image> element inside our helper document doesn't get
+ painted, and we end up only showing one blue circle. -->
+<html>
+<body style="margin: 0">
+ <img src="svg-image-recursive-1a.svg">
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/svg-image-simple-1.svg b/layout/reftests/svg/as-image/svg-image-simple-1.svg
new file mode 100644
index 0000000000..ad657ce2ab
--- /dev/null
+++ b/layout/reftests/svg/as-image/svg-image-simple-1.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="100" height="100">
+ <rect width="100%" height="100%" fill="red"/>
+ <image width="100%" height="100%" xlink:href="lime100x100.svg"/>
+</svg>
diff --git a/layout/reftests/svg/as-image/svg-image-simple-2.svg b/layout/reftests/svg/as-image/svg-image-simple-2.svg
new file mode 100644
index 0000000000..34cc2277d5
--- /dev/null
+++ b/layout/reftests/svg/as-image/svg-image-simple-2.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="100" height="100">
+ <rect width="100%" height="100%" fill="red"/>
+ <image width="100%" height="100%"
+ xlink:href="lime100x100-noSVGDimensions.svg"/>
+</svg>
diff --git a/layout/reftests/svg/as-image/svg-image-simple-3.svg b/layout/reftests/svg/as-image/svg-image-simple-3.svg
new file mode 100644
index 0000000000..31d064a0a8
--- /dev/null
+++ b/layout/reftests/svg/as-image/svg-image-simple-3.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="100" height="100">
+ <rect width="100%" height="100%" fill="red"/>
+ <image width="100%" height="100%"
+ xlink:href="limeInRed-noSVGDimensions-viewBox.svg"/>
+</svg>
diff --git a/layout/reftests/svg/as-image/svg-image-synthetic-viewBox-01-helper-1.svg b/layout/reftests/svg/as-image/svg-image-synthetic-viewBox-01-helper-1.svg
new file mode 100644
index 0000000000..9a185877a6
--- /dev/null
+++ b/layout/reftests/svg/as-image/svg-image-synthetic-viewBox-01-helper-1.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
+ <circle cx="100" cy="100" r="100" fill="blue"/>
+</svg>
+
diff --git a/layout/reftests/svg/as-image/svg-image-synthetic-viewBox-01-helper-2.svg b/layout/reftests/svg/as-image/svg-image-synthetic-viewBox-01-helper-2.svg
new file mode 100644
index 0000000000..83f49b787f
--- /dev/null
+++ b/layout/reftests/svg/as-image/svg-image-synthetic-viewBox-01-helper-2.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
+ <circle cx="50" cy="50" r="50" fill="blue"/>
+</svg>
+
diff --git a/layout/reftests/svg/as-image/svg-image-synthetic-viewBox-01-ref.svg b/layout/reftests/svg/as-image/svg-image-synthetic-viewBox-01-ref.svg
new file mode 100644
index 0000000000..c93d68fc30
--- /dev/null
+++ b/layout/reftests/svg/as-image/svg-image-synthetic-viewBox-01-ref.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <image width="100" height="100" href="svg-image-synthetic-viewBox-01-helper-2.svg"/>
+</svg>
+
diff --git a/layout/reftests/svg/as-image/svg-image-synthetic-viewBox-01.svg b/layout/reftests/svg/as-image/svg-image-synthetic-viewBox-01.svg
new file mode 100644
index 0000000000..449c61862e
--- /dev/null
+++ b/layout/reftests/svg/as-image/svg-image-synthetic-viewBox-01.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <image width="100" height="100" href="svg-image-synthetic-viewBox-01-helper-1.svg"/>
+</svg>
+
diff --git a/layout/reftests/svg/as-image/svg-image-util.css b/layout/reftests/svg/as-image/svg-image-util.css
new file mode 100644
index 0000000000..3d5a9338f6
--- /dev/null
+++ b/layout/reftests/svg/as-image/svg-image-util.css
@@ -0,0 +1,3 @@
+body { margin: 0px; line-height: 10px; }
+img { background: purple; vertical-align: top; }
+embed { background: purple; vertical-align: top; }
diff --git a/layout/reftests/svg/as-image/svg-image-util.js b/layout/reftests/svg/as-image/svg-image-util.js
new file mode 100644
index 0000000000..ea84259238
--- /dev/null
+++ b/layout/reftests/svg/as-image/svg-image-util.js
@@ -0,0 +1,173 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* 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/. */
+
+// Standard values to use for <img>/<embed> height & width, if requested.
+var HOST_NODE_HEIGHT = "20";
+var HOST_NODE_WIDTH = "30";
+
+// All the possible values of "align"
+const ALIGN_VALS = ["none",
+ "xMinYMin", "xMinYMid", "xMinYMax",
+ "xMidYMin", "xMidYMid", "xMidYMax",
+ "xMaxYMin", "xMaxYMid", "xMaxYMax"];
+
+// All the possible values of "meetOrSlice"
+const MEETORSLICE_VALS = [ "meet", "slice" ];
+
+/**
+ * Generates full data URI for an SVG document, with the given parameters
+ * on the SVG element.
+ *
+ * @param aViewboxArr An array of four numbers, representing the
+ * viewBox attribute, or null for no viewBox.
+ * @param aWidth The width attribute, or null for no width.
+ * @param aHeight The height attribute, or null for no height.
+ * @param aAlign The 'align' component of the
+ * preserveAspectRatio attribute, or null for none.
+ * @param aMeetOrSlice The 'meetOrSlice' component of the
+ * preserveAspectRatio attribute, or null for
+ * none. (If non-null, implies non-null value for
+ * aAlign.)
+ * @param aViewParams Parameters to use for the view element.
+ * @param aFragmentIdentifier The SVG fragment identifier.
+ */
+function generateSVGDataURI(aViewboxArr, aWidth, aHeight,
+ aAlign, aMeetOrSlice,
+ aViewParams, aFragmentIdentifier) {
+ // prefix
+ var datauri = "data:image/svg+xml,"
+ // Begin the SVG tag
+ datauri += "%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20shape-rendering%3D%22crispEdges%22";
+
+ // Append the custom chunk from our params
+ // If we're working with views, the align customisation is applied there instead
+ datauri += generateSVGAttrsForParams(aViewboxArr, aWidth, aHeight,
+ aViewParams ? null : aAlign,
+ aMeetOrSlice);
+
+ // Add 'font-size' just in case the client wants to use ems
+ datauri += "%20font-size%3D%22" + "10px" + "%22";
+
+ // Put closing right bracket on SVG tag
+ datauri += "%3E";
+
+ if (aViewParams) {
+ // Give the view the id of the fragment identifier
+ datauri += "%3Cview%20id%3D%22" + aFragmentIdentifier + "%22";
+
+ // Append the custom chunk from our view params
+ datauri += generateSVGAttrsForParams(aViewParams.viewBox, null, null,
+ aAlign, aViewParams.meetOrSlice);
+
+ datauri += "%2F%3E";
+ }
+
+ // Add the rest of the SVG document
+ datauri += "%3Crect%20x%3D%221%22%20y%3D%221%22%20height%3D%2218%22%20width%3D%2218%22%20stroke-width%3D%222%22%20stroke%3D%22black%22%20fill%3D%22yellow%22%2F%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%228%22%20style%3D%22fill%3A%20blue%22%2F%3E%3C%2Fsvg%3E";
+
+ return datauri;
+}
+
+// Generates just the chunk of a data URI that's relevant to
+// the given params.
+function generateSVGAttrsForParams(aViewboxArr, aWidth, aHeight,
+ aAlign, aMeetOrSlice) {
+ var str = "";
+ if (aViewboxArr) {
+ str += "%20viewBox%3D%22";
+ for (var i in aViewboxArr) {
+ str += aViewboxArr[i];
+ if (i != aViewboxArr.length - 1) {
+ str += "%20";
+ }
+ }
+ str += "%22";
+ }
+ if (aWidth) {
+ str += "%20width%3D%22" + aWidth + "%22";
+ }
+ if (aHeight) {
+ str += "%20height%3D%22" + aHeight + "%22";
+ }
+ if (aAlign) {
+ str += "%20preserveAspectRatio%3D%22" + aAlign;
+ if (aMeetOrSlice) {
+ str += "%20" + aMeetOrSlice;
+ }
+ str += "%22";
+ }
+
+ return str;
+}
+
+// Returns a newly-generated element with the given tagname, the given URI
+// for its |src| attribute, and the given width & height values.
+function generateHostNode(aHostNodeTagName, aUri,
+ aHostNodeWidth, aHostNodeHeight) {
+ var elem = document.createElement(aHostNodeTagName);
+ elem.setAttribute("src", aUri);
+
+ if (aHostNodeWidth) {
+ elem.setAttribute("width", aHostNodeWidth);
+ }
+ if (aHostNodeHeight) {
+ elem.setAttribute("height", aHostNodeHeight);
+ }
+
+ return elem;
+}
+
+// THIS IS THE CHIEF HELPER FUNCTION TO BE CALLED BY CLIENTS
+function appendSVGArrayWithParams(aSVGParams, aHostNodeTagName) {
+ // These are width & height vals that will be used for the *host node*.
+ // (i.e. the <img> or <embed> node -- not the <svg> node)
+ var hostNodeWidthVals = [ null, HOST_NODE_WIDTH ];
+ var hostNodeHeightVals = [ null, HOST_NODE_HEIGHT ];
+
+ for (var i = 0; i < hostNodeWidthVals.length; i++) {
+ var hostNodeWidth = hostNodeWidthVals[i];
+ for (var j = 0; j < hostNodeHeightVals.length; j++) {
+ var hostNodeHeight = hostNodeHeightVals[j];
+ appendSVGSubArrayWithParams(aSVGParams, aHostNodeTagName,
+ hostNodeWidth, hostNodeHeight);
+ }
+ }
+}
+
+// Helper function for above, for a fixed [host-node-width][host-node-height]
+function appendSVGSubArrayWithParams(aSVGParams, aHostNodeTagName,
+ aHostNodeWidth, aHostNodeHeight) {
+ var rootNode = document.getElementsByTagName("body")[0];
+ for (var k = 0; k < ALIGN_VALS.length; k++) {
+ var alignVal = ALIGN_VALS[k];
+ if (!aSVGParams.meetOrSlice) {
+ alignVal = "none";
+ }
+
+ // Generate the Data URI
+ var uri = generateSVGDataURI(aSVGParams.viewBox,
+ aSVGParams.width, aSVGParams.height,
+ alignVal,
+ aSVGParams.meetOrSlice,
+ aSVGParams.view,
+ aSVGParams.fragmentIdentifier);
+
+ if (aSVGParams.fragmentIdentifier) {
+ uri += "#" + aSVGParams.fragmentIdentifier;
+ }
+
+ // Generate & append the host node element
+ var hostNode = generateHostNode(aHostNodeTagName, uri,
+ aHostNodeWidth, aHostNodeHeight);
+ rootNode.appendChild(hostNode);
+
+ // Cosmetic: Add a newline when we get halfway through the ALIGN_VALS
+ // and then again when we reach the end
+ if (k + 1 == ALIGN_VALS.length / 2 ||
+ k + 1 == ALIGN_VALS.length) {
+ rootNode.appendChild(document.createElement("br"));
+ }
+ }
+}
diff --git a/layout/reftests/svg/as-image/svg-image-visited-1-ref.html b/layout/reftests/svg/as-image/svg-image-visited-1-ref.html
new file mode 100644
index 0000000000..7539a7ec98
--- /dev/null
+++ b/layout/reftests/svg/as-image/svg-image-visited-1-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+ <head>
+ <title>Reference for bug 641731</title>
+ <style>
+ .imgRef, .embedRef {
+ height: 100px;
+ width: 100px;
+ border: 1px solid black;
+ display: inline-block;
+ }
+ .imgRef { background: lime }
+ .embedRef { background: purple }
+ </style>
+ </head>
+ <body>
+ <div class="imgRef"></div>
+ <div class="embedRef"></div>
+ </body>
+</html>
diff --git a/layout/reftests/svg/as-image/svg-image-visited-1a-helper.svg b/layout/reftests/svg/as-image/svg-image-visited-1a-helper.svg
new file mode 100644
index 0000000000..9843e85f59
--- /dev/null
+++ b/layout/reftests/svg/as-image/svg-image-visited-1a-helper.svg
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ height="100" width="100">
+ <style>
+ <![CDATA[
+ a:link {/* Note: an a:link block was needed to trigger bug 641731. */ }
+ a:link > rect { fill: lime; }
+ a:visited > rect { fill: purple; }
+ ]]>
+ </style>
+
+ <!-- Note: the <a> element below links to a visited page, so it'll
+ normally be treated as visited. However, in an image context, we want to
+ ignore visitedness. -->
+ <a xlink:href="visited-page.html" id="foo">
+ <rect x="0" y="0" width="100" height="100" fill="orange"/>
+ </a>
+
+ <!-- This trivial SMIL animation ensures that we *won't* get repainted via
+ imagelib's SurfaceCache optimization. Specifically, we want to bypass
+ the SurfaceCache so that we can ensure that repaints of this file (as an
+ image) will *actually repaint the SVG content*, rather than painting a
+ previously-rasterized snapshot (which may've been rasterized before we
+ had any chance to consider :visited styles). -->
+ <rect x="0" y="0" width="100" height="100" fill="teal">
+ <set attributeName="fill" to="transparent"
+ begin="0s" duration="indefinite"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/as-image/svg-image-visited-1a.html b/layout/reftests/svg/as-image/svg-image-visited-1a.html
new file mode 100644
index 0000000000..53aff74c9b
--- /dev/null
+++ b/layout/reftests/svg/as-image/svg-image-visited-1a.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+ <head>
+ <title>Test for bug 641731</title>
+ <style>
+ img, embed {
+ height: 100px;
+ width: 100px;
+ border: 1px solid black;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- This shouldn't show visited link coloring: -->
+ <img src="svg-image-visited-1a-helper.svg">
+ <!-- This should show visited link coloring: -->
+ <embed src="svg-image-visited-1a-helper.svg">
+ </body>
+</html>
diff --git a/layout/reftests/svg/as-image/svg-image-visited-1b-helper.svg b/layout/reftests/svg/as-image/svg-image-visited-1b-helper.svg
new file mode 100644
index 0000000000..2a47f02d58
--- /dev/null
+++ b/layout/reftests/svg/as-image/svg-image-visited-1b-helper.svg
@@ -0,0 +1,33 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ height="100" width="100">
+ <style>
+ <![CDATA[
+ a:link > rect { fill: lime; }
+ a:visited > rect { fill: purple; }
+ ]]>
+ </style>
+
+ <!-- Note: the <a> element below links to a visited page, so it'll
+ normally be treated as visited. However, in an image context, we want to
+ ignore visitedness. -->
+ <a xlink:href="visited-page.html" id="foo">
+ <rect x="0" y="0" width="100" height="100" fill="orange"/>
+ </a>
+
+ <!-- This trivial SMIL animation ensures that we *won't* get repainted via
+ imagelib's SurfaceCache optimization. Specifically, we want to bypass
+ the SurfaceCache so that we can ensure that repaints of this file (as an
+ image) will *actually repaint the SVG content*, rather than painting a
+ previously-rasterized snapshot (which may've been rasterized before we
+ had any chance to consider :visited styles). -->
+ <rect x="0" y="0" width="100" height="100" fill="teal">
+ <set attributeName="fill" to="transparent"
+ begin="0s" duration="indefinite"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/as-image/svg-image-visited-1b.html b/layout/reftests/svg/as-image/svg-image-visited-1b.html
new file mode 100644
index 0000000000..05227cc85d
--- /dev/null
+++ b/layout/reftests/svg/as-image/svg-image-visited-1b.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+ <head>
+ <title>Test for bug 641731</title>
+ <style>
+ img, embed {
+ height: 100px;
+ width: 100px;
+ border: 1px solid black;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- This shouldn't show visited link coloring: -->
+ <img src="svg-image-visited-1b-helper.svg">
+ <!-- This should show visited link coloring: -->
+ <embed src="svg-image-visited-1b-helper.svg">
+ </body>
+</html>
diff --git a/layout/reftests/svg/as-image/svg-image-visited-1c-helper.svg b/layout/reftests/svg/as-image/svg-image-visited-1c-helper.svg
new file mode 100644
index 0000000000..ca688a2b55
--- /dev/null
+++ b/layout/reftests/svg/as-image/svg-image-visited-1c-helper.svg
@@ -0,0 +1,33 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ height="100" width="100">
+ <style>
+ <![CDATA[
+ a:link {/* Note: an a:link block was needed to trigger bug 641731. */ }
+ a:link > rect { fill: lime; }
+ a:visited > rect { fill: purple; }
+ ]]>
+ </style>
+
+ <!-- Note: our mochitest runner visits "visited-page.html" early on.
+ Nonetheless, as an image, we should ignore visitedness. -->
+ <a xlink:href="visited-page.html" id="foo">
+ <rect x="0" y="0" width="100" height="100" fill="orange"/>
+ </a>
+
+ <!-- This trivial SMIL animation ensures that we *won't* get repainted via
+ imagelib's SurfaceCache optimization. Specifically, we want to bypass
+ the SurfaceCache so that we can ensure that repaints of this file (as an
+ image) will *actually repaint the SVG content*, rather than painting a
+ previously-rasterized snapshot (which may've been rasterized before we
+ had any chance to consider :visited styles). -->
+ <rect x="0" y="0" width="100" height="100" fill="teal">
+ <set attributeName="fill" to="transparent"
+ begin="0s" duration="indefinite"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/as-image/svg-image-visited-1c.html b/layout/reftests/svg/as-image/svg-image-visited-1c.html
new file mode 100644
index 0000000000..f016d5cebe
--- /dev/null
+++ b/layout/reftests/svg/as-image/svg-image-visited-1c.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+ <head>
+ <title>Test for bug 641731</title>
+ <style>
+ img, embed {
+ height: 100px;
+ width: 100px;
+ border: 1px solid black;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- This shouldn't show visited link coloring: -->
+ <img src="svg-image-visited-1c-helper.svg">
+ <!-- This should show visited link coloring: -->
+ <embed src="svg-image-visited-1c-helper.svg">
+ </body>
+</html>
diff --git a/layout/reftests/svg/as-image/svg-image-visited-1d-helper.svg b/layout/reftests/svg/as-image/svg-image-visited-1d-helper.svg
new file mode 100644
index 0000000000..cc62c3a27c
--- /dev/null
+++ b/layout/reftests/svg/as-image/svg-image-visited-1d-helper.svg
@@ -0,0 +1,32 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ height="100" width="100">
+ <style>
+ <![CDATA[
+ a:link > rect { fill: lime; }
+ a:visited > rect { fill: purple; }
+ ]]>
+ </style>
+
+ <!-- Note: our mochitest runner visits "visited-page.html" early on.
+ Nonetheless, as an image, we should ignore visitedness. -->
+ <a xlink:href="visited-page.html" id="foo">
+ <rect x="0" y="0" width="100" height="100" fill="orange"/>
+ </a>
+
+ <!-- This trivial SMIL animation ensures that we *won't* get repainted via
+ imagelib's SurfaceCache optimization. Specifically, we want to bypass
+ the SurfaceCache so that we can ensure that repaints of this file (as an
+ image) will *actually repaint the SVG content*, rather than painting a
+ previously-rasterized snapshot (which may've been rasterized before we
+ had any chance to consider :visited styles). -->
+ <rect x="0" y="0" width="100" height="100" fill="teal">
+ <set attributeName="fill" to="transparent"
+ begin="0s" duration="indefinite"/>
+ </rect>
+</svg>
diff --git a/layout/reftests/svg/as-image/svg-image-visited-1d.html b/layout/reftests/svg/as-image/svg-image-visited-1d.html
new file mode 100644
index 0000000000..39005b39d3
--- /dev/null
+++ b/layout/reftests/svg/as-image/svg-image-visited-1d.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+ <head>
+ <title>Test for bug 641731</title>
+ <style>
+ img, embed {
+ height: 100px;
+ width: 100px;
+ border: 1px solid black;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- This shouldn't show visited link coloring: -->
+ <img src="svg-image-visited-1d-helper.svg">
+ <!-- This should show visited link coloring: -->
+ <embed src="svg-image-visited-1d-helper.svg">
+ </body>
+</html>
diff --git a/layout/reftests/svg/as-image/svg-stylesheet-datauri-1.html b/layout/reftests/svg/as-image/svg-stylesheet-datauri-1.html
new file mode 100644
index 0000000000..9b99258f00
--- /dev/null
+++ b/layout/reftests/svg/as-image/svg-stylesheet-datauri-1.html
@@ -0,0 +1,5 @@
+<html>
+<body style="margin: 0">
+ <img src="svg-stylesheet-datauri.svg">
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/svg-stylesheet-datauri.svg b/layout/reftests/svg/as-image/svg-stylesheet-datauri.svg
new file mode 100644
index 0000000000..003e150179
--- /dev/null
+++ b/layout/reftests/svg/as-image/svg-stylesheet-datauri.svg
@@ -0,0 +1,8 @@
+<?xml-stylesheet href="data:text/css,rect%20%7B%20fill%3A%20lime%20%7D%0A"
+ type="text/css"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="100" height="100">
+ <!-- This blue rect should always be styled as lime by the stylesheet: -->
+ <rect width="100" height="100" fill="blue"/>
+</svg>
diff --git a/layout/reftests/svg/as-image/svg-stylesheet-external-1.html b/layout/reftests/svg/as-image/svg-stylesheet-external-1.html
new file mode 100644
index 0000000000..c6815579b9
--- /dev/null
+++ b/layout/reftests/svg/as-image/svg-stylesheet-external-1.html
@@ -0,0 +1,5 @@
+<html>
+<body style="margin: 0">
+ <img src="svg-stylesheet-external.svg">
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/svg-stylesheet-external.css b/layout/reftests/svg/as-image/svg-stylesheet-external.css
new file mode 100644
index 0000000000..70025dd20a
--- /dev/null
+++ b/layout/reftests/svg/as-image/svg-stylesheet-external.css
@@ -0,0 +1 @@
+rect { fill: lime }
diff --git a/layout/reftests/svg/as-image/svg-stylesheet-external.svg b/layout/reftests/svg/as-image/svg-stylesheet-external.svg
new file mode 100644
index 0000000000..2b288e4268
--- /dev/null
+++ b/layout/reftests/svg/as-image/svg-stylesheet-external.svg
@@ -0,0 +1,9 @@
+<?xml-stylesheet href="svg-stylesheet-external.css" type="text/css"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="100" height="100">
+ <!-- This blue rect should be styled as lime by the stylesheet when this SVG
+ is loaded as an image by a local document, but not when the document is
+ served over HTTP: -->
+ <rect width="100" height="100" fill="blue"/>
+</svg>
diff --git a/layout/reftests/svg/as-image/transparent100x100-w-border-ref.html b/layout/reftests/svg/as-image/transparent100x100-w-border-ref.html
new file mode 100644
index 0000000000..f0727820c9
--- /dev/null
+++ b/layout/reftests/svg/as-image/transparent100x100-w-border-ref.html
@@ -0,0 +1,5 @@
+<html>
+<body>
+ <div style="width: 100px; height: 100px; border: 1px solid black"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/white-rect-no-viewbox.svg b/layout/reftests/svg/as-image/white-rect-no-viewbox.svg
new file mode 100644
index 0000000000..76a7efd3dc
--- /dev/null
+++ b/layout/reftests/svg/as-image/white-rect-no-viewbox.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<svg version="1.1"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+
+ <rect width="6" height="30" style="fill:white;" />
+</svg>
diff --git a/layout/reftests/svg/as-image/white-rect-with-viewbox.svg b/layout/reftests/svg/as-image/white-rect-with-viewbox.svg
new file mode 100644
index 0000000000..6bb59d19a4
--- /dev/null
+++ b/layout/reftests/svg/as-image/white-rect-with-viewbox.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<svg version="1.1"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="6px"
+ height="30px"
+ viewBox="0 0 6 30">
+
+ <rect width="6" height="30" style="fill:white;" />
+</svg>
diff --git a/layout/reftests/svg/as-image/zoom/circle-large.svg b/layout/reftests/svg/as-image/zoom/circle-large.svg
new file mode 100644
index 0000000000..a097f3c666
--- /dev/null
+++ b/layout/reftests/svg/as-image/zoom/circle-large.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="80" height="80">
+ <circle cx="40" cy="40" r="40" style="fill: green"/>
+</svg>
diff --git a/layout/reftests/svg/as-image/zoom/circle-small.svg b/layout/reftests/svg/as-image/zoom/circle-small.svg
new file mode 100644
index 0000000000..b0cba24a65
--- /dev/null
+++ b/layout/reftests/svg/as-image/zoom/circle-small.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="20" height="20">
+ <circle cx="10" cy="10" r="10" style="fill: green"/>
+</svg>
diff --git a/layout/reftests/svg/as-image/zoom/img-fuzzy-transform-zoomIn-1.html b/layout/reftests/svg/as-image/zoom/img-fuzzy-transform-zoomIn-1.html
new file mode 100644
index 0000000000..b4eadba92e
--- /dev/null
+++ b/layout/reftests/svg/as-image/zoom/img-fuzzy-transform-zoomIn-1.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+<head>
+ <style>
+ body {
+ margin: 0px;
+ padding: 0px;
+ border: 0px;
+ }
+ div {
+ background: url('circle-small.svg');
+ background-size: 40px 40px;
+ background-repeat: repeat;
+ margin: 0px;
+ padding: 0px;
+ border: 0px;
+ width: 80px;
+ height: 80px;
+ transform: scale(2.0);
+ transform-origin: 0 0;
+ }
+ </style>
+</head>
+<body>
+ <div></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/zoom/img-fuzzy-transform-zoomOut-1.html b/layout/reftests/svg/as-image/zoom/img-fuzzy-transform-zoomOut-1.html
new file mode 100644
index 0000000000..db0e6c06b9
--- /dev/null
+++ b/layout/reftests/svg/as-image/zoom/img-fuzzy-transform-zoomOut-1.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+<head>
+ <style>
+ body {
+ margin: 0px;
+ padding: 0px;
+ border: 0px;
+ }
+ div {
+ background: url('circle-large.svg');
+ background-size: 40px 40px;
+ background-repeat: repeat;
+ margin: 0px;
+ padding: 0px;
+ border: 0px;
+ width: 80px;
+ height: 80px;
+ transform: scale(0.5);
+ transform-origin: 0 0;
+ }
+ </style>
+</head>
+<body>
+ <div></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/zoom/img-fuzzy-zoomIn-1-ref.html b/layout/reftests/svg/as-image/zoom/img-fuzzy-zoomIn-1-ref.html
new file mode 100644
index 0000000000..81e6011e62
--- /dev/null
+++ b/layout/reftests/svg/as-image/zoom/img-fuzzy-zoomIn-1-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+<head>
+ <style>
+ body {
+ margin: 0px;
+ padding: 0px;
+ border: 0px;
+ }
+ div {
+ background: url('circle-large.svg');
+ background-size: 80px 80px;
+ background-repeat: repeat;
+ margin: 0px;
+ padding: 0px;
+ border: 0px;
+ width: 160px;
+ height: 160px;
+ }
+ </style>
+</head>
+<body>
+ <div></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/zoom/img-fuzzy-zoomIn-1.html b/layout/reftests/svg/as-image/zoom/img-fuzzy-zoomIn-1.html
new file mode 100644
index 0000000000..de39990b95
--- /dev/null
+++ b/layout/reftests/svg/as-image/zoom/img-fuzzy-zoomIn-1.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html reftest-zoom="2.0">
+<head>
+ <style>
+ body {
+ margin: 0px;
+ padding: 0px;
+ border: 0px;
+ }
+ div {
+ background: url('circle-small.svg');
+ background-size: 40px 40px;
+ background-repeat: repeat;
+ margin: 0px;
+ padding: 0px;
+ border: 0px;
+ width: 80px;
+ height: 80px;
+ }
+ </style>
+</head>
+<body>
+ <div></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/zoom/img-fuzzy-zoomOut-1-ref.html b/layout/reftests/svg/as-image/zoom/img-fuzzy-zoomOut-1-ref.html
new file mode 100644
index 0000000000..48f2d05ff7
--- /dev/null
+++ b/layout/reftests/svg/as-image/zoom/img-fuzzy-zoomOut-1-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+<head>
+ <style>
+ body {
+ margin: 0px;
+ padding: 0px;
+ border: 0px;
+ }
+ div {
+ background: url('circle-small.svg');
+ background-size: 20px 20px;
+ background-repeat: repeat;
+ margin: 0px;
+ padding: 0px;
+ border: 0px;
+ width: 40px;
+ height: 40px;
+ }
+ </style>
+</head>
+<body>
+ <div></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/zoom/img-fuzzy-zoomOut-1.html b/layout/reftests/svg/as-image/zoom/img-fuzzy-zoomOut-1.html
new file mode 100644
index 0000000000..75cd1d61af
--- /dev/null
+++ b/layout/reftests/svg/as-image/zoom/img-fuzzy-zoomOut-1.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html reftest-zoom="0.5">
+<head>
+ <style>
+ body {
+ margin: 0px;
+ padding: 0px;
+ border: 0px;
+ }
+ div {
+ background: url('circle-large.svg');
+ background-size: 40px 40px;
+ background-repeat: repeat;
+ margin: 0px;
+ padding: 0px;
+ border: 0px;
+ width: 80px;
+ height: 80px;
+ }
+ </style>
+</head>
+<body>
+ <div></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/zoom/img-zoomIn-1.html b/layout/reftests/svg/as-image/zoom/img-zoomIn-1.html
new file mode 100644
index 0000000000..cc31a933ed
--- /dev/null
+++ b/layout/reftests/svg/as-image/zoom/img-zoomIn-1.html
@@ -0,0 +1,5 @@
+<html reftest-zoom="1.5">
+<body>
+ <img src="squaredCircle.svg">
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/zoom/img-zoomOut-1.html b/layout/reftests/svg/as-image/zoom/img-zoomOut-1.html
new file mode 100644
index 0000000000..5133acb8b4
--- /dev/null
+++ b/layout/reftests/svg/as-image/zoom/img-zoomOut-1.html
@@ -0,0 +1,5 @@
+<html reftest-zoom="0.5">
+<body>
+ <img src="squaredCircle.svg">
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/zoom/reftest.list b/layout/reftests/svg/as-image/zoom/reftest.list
new file mode 100644
index 0000000000..13df22ead6
--- /dev/null
+++ b/layout/reftests/svg/as-image/zoom/reftest.list
@@ -0,0 +1,11 @@
+# Tests related to SVG being used as an image, with zooming
+
+# Simple <img> tests
+fuzzy(0-1,0-408) == img-zoomIn-1.html squaredCircle-150x150-ref.html
+fuzzy(0-1,0-74) == img-zoomOut-1.html squaredCircle-50x50-ref.html
+
+# Ensure that scaled SVG images aren't fuzzy when tiled.
+fails-if(useDrawSnapshot) == img-fuzzy-zoomOut-1.html img-fuzzy-zoomOut-1-ref.html
+fails-if(useDrawSnapshot) == img-fuzzy-zoomIn-1.html img-fuzzy-zoomIn-1-ref.html
+== img-fuzzy-transform-zoomOut-1.html img-fuzzy-zoomOut-1-ref.html
+== img-fuzzy-transform-zoomIn-1.html img-fuzzy-zoomIn-1-ref.html
diff --git a/layout/reftests/svg/as-image/zoom/squaredCircle-150x150-ref.html b/layout/reftests/svg/as-image/zoom/squaredCircle-150x150-ref.html
new file mode 100644
index 0000000000..7f3b524e8e
--- /dev/null
+++ b/layout/reftests/svg/as-image/zoom/squaredCircle-150x150-ref.html
@@ -0,0 +1,5 @@
+<html reftest-zoom="1.5">
+<body>
+ <embed src="squaredCircle.svg">
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/zoom/squaredCircle-50x50-ref.html b/layout/reftests/svg/as-image/zoom/squaredCircle-50x50-ref.html
new file mode 100644
index 0000000000..41686f5bc1
--- /dev/null
+++ b/layout/reftests/svg/as-image/zoom/squaredCircle-50x50-ref.html
@@ -0,0 +1,5 @@
+<html reftest-zoom="0.5">
+<body>
+ <embed src="squaredCircle.svg">
+</body>
+</html>
diff --git a/layout/reftests/svg/as-image/zoom/squaredCircle.svg b/layout/reftests/svg/as-image/zoom/squaredCircle.svg
new file mode 100644
index 0000000000..266c9e776c
--- /dev/null
+++ b/layout/reftests/svg/as-image/zoom/squaredCircle.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ width="100px" height="100px">
+ <rect x="2" y="2" height="96" width="96"
+ stroke-width="4" stroke="black" fill="yellow"/>
+ <circle cx="50" cy="50" r="46" style="fill: blue"/>
+</svg>
diff --git a/layout/reftests/svg/autofocus-01-ref.svg b/layout/reftests/svg/autofocus-01-ref.svg
new file mode 100644
index 0000000000..fb9c7bc16b
--- /dev/null
+++ b/layout/reftests/svg/autofocus-01-ref.svg
@@ -0,0 +1,8 @@
+<svg width="400" height="110" xmlns="http://www.w3.org/2000/svg" onload="document.querySelector('a').focus();">
+ <a href="#">
+ <rect x="10" y="10" width="300" height="90" fill="lime"/>
+ </a>
+ <style>
+ a:focus { outline: 2px solid blue; }
+ </style>
+</svg>
diff --git a/layout/reftests/svg/autofocus-01a.svg b/layout/reftests/svg/autofocus-01a.svg
new file mode 100644
index 0000000000..89be07acad
--- /dev/null
+++ b/layout/reftests/svg/autofocus-01a.svg
@@ -0,0 +1,6 @@
+<svg width="400" height="110" xmlns="http://www.w3.org/2000/svg">
+ <rect x="10" y="10" width="300" height="90" fill="lime" tabindex="0" autofocus="true"/>
+ <style>
+ rect:focus { outline: 2px solid blue; }
+ </style>
+</svg>
diff --git a/layout/reftests/svg/autofocus-01b.svg b/layout/reftests/svg/autofocus-01b.svg
new file mode 100644
index 0000000000..94bf93b78c
--- /dev/null
+++ b/layout/reftests/svg/autofocus-01b.svg
@@ -0,0 +1,8 @@
+<svg width="400" height="110" xmlns="http://www.w3.org/2000/svg">
+ <a href="#" autofocus="true">
+ <rect x="10" y="10" width="300" height="90" fill="lime"/>
+ </a>
+ <style>
+ a:focus { outline: 2px solid blue; }
+ </style>
+</svg>
diff --git a/layout/reftests/svg/autofocus-02a.svg b/layout/reftests/svg/autofocus-02a.svg
new file mode 100644
index 0000000000..7e026a3216
--- /dev/null
+++ b/layout/reftests/svg/autofocus-02a.svg
@@ -0,0 +1,8 @@
+<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
+ <rect width="100%" height="100%" fill="lime"/>
+ <!-- need tabindex for autofocus to work -->
+ <rect x="10" y="10" width="300" height="90" fill="lime" autofocus="true"/>
+ <style>
+ rect:focus { outline: 2px solid blue; }
+ </style>
+</svg>
diff --git a/layout/reftests/svg/autofocus-02b.svg b/layout/reftests/svg/autofocus-02b.svg
new file mode 100644
index 0000000000..5c429900df
--- /dev/null
+++ b/layout/reftests/svg/autofocus-02b.svg
@@ -0,0 +1,10 @@
+<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
+ <rect width="100%" height="100%" fill="lime"/>
+ <!-- need href for autofocus to work -->
+ <a autofocus="true">
+ <rect x="10" y="10" width="300" height="90" fill="lime"/>
+ </a>
+ <style>
+ a:focus { outline: 2px solid blue; }
+ </style>
+</svg>
diff --git a/layout/reftests/svg/background-ref.html b/layout/reftests/svg/background-ref.html
new file mode 100644
index 0000000000..c4fd9d9bfd
--- /dev/null
+++ b/layout/reftests/svg/background-ref.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<meta charset=utf-8>
+<style>
+ div {
+ position: relative;
+ }
+ svg {
+ display: block;
+ margin: auto;
+ }
+</style>
+<body>
+ <div>
+ <svg xmlns='http://www.w3.org/2000/svg' width='100px' height='200px'
+ viewport='0 0 100 200'>
+ <rect x='0' y='100' width='100' height='100' fill='purple'>
+ </rect>
+ </svg>
+ </div>
+</body>
diff --git a/layout/reftests/svg/background-svg-without-height-width.html b/layout/reftests/svg/background-svg-without-height-width.html
new file mode 100644
index 0000000000..2c2d652d4b
--- /dev/null
+++ b/layout/reftests/svg/background-svg-without-height-width.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset=utf-8>
+<style>
+.bgsvg {
+ background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 32'%3E%3Crect x='0' y='16' width='16' height='16' fill='purple'/%3E%3C/svg%3E") no-repeat;
+ background-size: contain;
+ width: 100px;
+ height: auto;
+ margin: auto;
+ position: relative;
+}
+.bgsvg::after {
+ content: ' ';
+ display: block;
+ padding-bottom: 200%;
+}
+</style>
+<div class="bgsvg"></div>
diff --git a/layout/reftests/svg/background-svg-without-height.html b/layout/reftests/svg/background-svg-without-height.html
new file mode 100644
index 0000000000..6f4d2fae7d
--- /dev/null
+++ b/layout/reftests/svg/background-svg-without-height.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset=utf-8>
+<style>
+.bgsvg {
+ background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' viewBox='0 0 16 32'%3E%3Crect x='0' y='16' width='16' height='16' fill='purple'/%3E%3C/svg%3E") no-repeat;
+ background-size: contain;
+ width: 100px;
+ height: auto;
+ margin: auto;
+ position: relative;
+}
+.bgsvg::after {
+ content: ' ';
+ display: block;
+ padding-bottom: 200%;
+}
+</style>
+<div class="bgsvg"></div>
diff --git a/layout/reftests/svg/background-svg-without-width.html b/layout/reftests/svg/background-svg-without-width.html
new file mode 100644
index 0000000000..87a127c505
--- /dev/null
+++ b/layout/reftests/svg/background-svg-without-width.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset=utf-8>
+<style>
+.bgsvg {
+ background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='32' viewBox='0 0 16 32'%3E%3Crect x='0' y='16' width='16' height='16' fill='purple'/%3E%3C/svg%3E") no-repeat;
+ background-size: contain;
+ width: 100px;
+ height: auto;
+ margin: auto;
+ position: relative;
+}
+.bgsvg::after {
+ content: ' ';
+ display: block;
+ padding-bottom: 200%;
+}
+</style>
+<div class="bgsvg"></div>
diff --git a/layout/reftests/svg/baseline-middle-01.svg b/layout/reftests/svg/baseline-middle-01.svg
new file mode 100644
index 0000000000..7120c4fa89
--- /dev/null
+++ b/layout/reftests/svg/baseline-middle-01.svg
@@ -0,0 +1,10 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -10 20 20" preserveAspectRatio="none"
+ font-family="sans-serif">
+ <rect y="-10" width="20" height="20" fill="lime"/>
+ <text dominant-baseline="middle" fill="red">x</text>
+ <text y="0.5ex" fill="lime" stroke-width="1" stroke="lime">x</text>
+</svg>
diff --git a/layout/reftests/svg/big-image.jpeg b/layout/reftests/svg/big-image.jpeg
new file mode 100644
index 0000000000..6a891dcb41
--- /dev/null
+++ b/layout/reftests/svg/big-image.jpeg
Binary files differ
diff --git a/layout/reftests/svg/blend-color-burn-ref.svg b/layout/reftests/svg/blend-color-burn-ref.svg
new file mode 100644
index 0000000000..48191f349e
--- /dev/null
+++ b/layout/reftests/svg/blend-color-burn-ref.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" width="400" height="400">
+<rect x="0" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
+<rect x="40" y="0" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
+<rect x="80" y="0" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
+<rect x="120" y="0" width="40" height="40" fill="rgba(127,0,0,1)"></rect>
+<rect x="0" y="40" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
+<rect x="40" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
+<rect x="80" y="40" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
+<rect x="120" y="40" width="40" height="40" fill="rgba(0,127,0,1)"></rect>
+<rect x="0" y="80" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
+<rect x="40" y="80" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
+<rect x="80" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
+<rect x="120" y="80" width="40" height="40" fill="rgba(0,0,0,1)"></rect>
+<rect x="0" y="120" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
+<rect x="40" y="120" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
+<rect x="80" y="120" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
+<rect x="120" y="120" width="40" height="40" fill="rgba(0,0,0,1)"></rect>
+</svg> \ No newline at end of file
diff --git a/layout/reftests/svg/blend-color-burn.svg b/layout/reftests/svg/blend-color-burn.svg
new file mode 100644
index 0000000000..fef6365b99
--- /dev/null
+++ b/layout/reftests/svg/blend-color-burn.svg
@@ -0,0 +1,16 @@
+<!--
+ 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" width="400" height="400" >
+<defs>
+ <g id="patch">
+ <rect x="0" y="0" width="40" height="160" fill="rgb(255,0,0)"/>
+ <rect x="40" y="0" width="40" height="160" fill="rgb(0,255,0)"/>
+ <rect x="80" y="0" width="40" height="160" fill="rgb(0,0,255)"/>
+ <rect x="120" y="0" width="40" height="160" fill="rgb(127,127,0)"/>
+ </g>
+</defs>
+<use xlink:href="#patch" x="0" y="0" width="160" height="160"></use>
+<use xlink:href="#patch" x="0" y="0" width="160" height="160" transform="rotate(90 80 80)" style="mix-blend-mode: color-burn;"></use>
+</svg> \ No newline at end of file
diff --git a/layout/reftests/svg/blend-color-dodge-ref.svg b/layout/reftests/svg/blend-color-dodge-ref.svg
new file mode 100644
index 0000000000..724a4e184b
--- /dev/null
+++ b/layout/reftests/svg/blend-color-dodge-ref.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" width="400" height="400">
+<rect x="0" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
+<rect x="40" y="0" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
+<rect x="80" y="0" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
+<rect x="120" y="0" width="40" height="40" fill="rgba(255,127,0,1)"></rect>
+<rect x="0" y="40" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
+<rect x="40" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
+<rect x="80" y="40" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
+<rect x="120" y="40" width="40" height="40" fill="rgba(127,255,0,1)"></rect>
+<rect x="0" y="80" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
+<rect x="40" y="80" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
+<rect x="80" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
+<rect x="120" y="80" width="40" height="40" fill="rgba(127,127,0,1)"></rect>
+<rect x="0" y="120" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
+<rect x="40" y="120" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
+<rect x="80" y="120" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
+<rect x="120" y="120" width="40" height="40" fill="rgba(253,253,0,1)"></rect>
+</svg> \ No newline at end of file
diff --git a/layout/reftests/svg/blend-color-dodge.svg b/layout/reftests/svg/blend-color-dodge.svg
new file mode 100644
index 0000000000..e2bc7471f8
--- /dev/null
+++ b/layout/reftests/svg/blend-color-dodge.svg
@@ -0,0 +1,16 @@
+<!--
+ 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" width="400" height="400" >
+<defs>
+ <g id="patch">
+ <rect x="0" y="0" width="40" height="160" fill="rgb(255,0,0)"/>
+ <rect x="40" y="0" width="40" height="160" fill="rgb(0,255,0)"/>
+ <rect x="80" y="0" width="40" height="160" fill="rgb(0,0,255)"/>
+ <rect x="120" y="0" width="40" height="160" fill="rgb(127,127,0)"/>
+ </g>
+</defs>
+<use xlink:href="#patch" x="0" y="0" width="160" height="160"></use>
+<use xlink:href="#patch" x="0" y="0" width="160" height="160" transform="rotate(90 80 80)" style="mix-blend-mode: color-dodge"></use>
+</svg> \ No newline at end of file
diff --git a/layout/reftests/svg/blend-color-ref.svg b/layout/reftests/svg/blend-color-ref.svg
new file mode 100644
index 0000000000..2936015617
--- /dev/null
+++ b/layout/reftests/svg/blend-color-ref.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" width="400" height="400">
+<rect x="0" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
+<rect x="40" y="0" width="40" height="40" fill="rgba(255,105,105,1)"></rect>
+<rect x="80" y="0" width="40" height="40" fill="rgba(93,0,0,1)"></rect>
+<rect x="120" y="0" width="40" height="40" fill="rgba(255,52,52,1)"></rect>
+<rect x="0" y="40" width="40" height="40" fill="rgba(0,131,0,1)"></rect>
+<rect x="40" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
+<rect x="80" y="40" width="40" height="40" fill="rgba(0,48,0,1)"></rect>
+<rect x="120" y="40" width="40" height="40" fill="rgba(0,192,0,1)"></rect>
+<rect x="0" y="80" width="40" height="40" fill="rgba(55,55,255,1)"></rect>
+<rect x="40" y="80" width="40" height="40" fill="rgba(137,137,255,1)"></rect>
+<rect x="80" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
+<rect x="120" y="80" width="40" height="40" fill="rgba(95,95,255,1)"></rect>
+<rect x="0" y="120" width="40" height="40" fill="rgba(86,86,0,1)"></rect>
+<rect x="40" y="120" width="40" height="40" fill="rgba(164,164,37,1)"></rect>
+<rect x="80" y="120" width="40" height="40" fill="rgba(31,31,0,1)"></rect>
+<rect x="120" y="120" width="40" height="40" fill="rgba(127,127,0,1)"></rect>
+</svg> \ No newline at end of file
diff --git a/layout/reftests/svg/blend-color.svg b/layout/reftests/svg/blend-color.svg
new file mode 100644
index 0000000000..e9efe3d3b9
--- /dev/null
+++ b/layout/reftests/svg/blend-color.svg
@@ -0,0 +1,16 @@
+<!--
+ 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" width="400" height="400" >
+<defs>
+ <g id="patch">
+ <rect x="0" y="0" width="40" height="160" fill="rgb(255,0,0)"/>
+ <rect x="40" y="0" width="40" height="160" fill="rgb(0,255,0)"/>
+ <rect x="80" y="0" width="40" height="160" fill="rgb(0,0,255)"/>
+ <rect x="120" y="0" width="40" height="160" fill="rgb(127,127,0)"/>
+ </g>
+</defs>
+<use xlink:href="#patch" x="0" y="0" width="160" height="160"></use>
+<use xlink:href="#patch" x="0" y="0" width="160" height="160" transform="rotate(90 80 80)" style="mix-blend-mode: color"></use>
+</svg> \ No newline at end of file
diff --git a/layout/reftests/svg/blend-darken-ref.svg b/layout/reftests/svg/blend-darken-ref.svg
new file mode 100644
index 0000000000..d4d16a54be
--- /dev/null
+++ b/layout/reftests/svg/blend-darken-ref.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" width="400" height="400">
+<rect x="0" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
+<rect x="40" y="0" width="40" height="40" fill="rgba(0,0,0,1)"></rect>
+<rect x="80" y="0" width="40" height="40" fill="rgba(0,0,0,1)"></rect>
+<rect x="120" y="0" width="40" height="40" fill="rgba(127,0,0,1)"></rect>
+<rect x="0" y="40" width="40" height="40" fill="rgba(0,0,0,1)"></rect>
+<rect x="40" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
+<rect x="80" y="40" width="40" height="40" fill="rgba(0,0,0,1)"></rect>
+<rect x="120" y="40" width="40" height="40" fill="rgba(0,127,0,1)"></rect>
+<rect x="0" y="80" width="40" height="40" fill="rgba(0,0,0,1)"></rect>
+<rect x="40" y="80" width="40" height="40" fill="rgba(0,0,0,1)"></rect>
+<rect x="80" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
+<rect x="120" y="80" width="40" height="40" fill="rgba(0,0,0,1)"></rect>
+<rect x="0" y="120" width="40" height="40" fill="rgba(127,0,0,1)"></rect>
+<rect x="40" y="120" width="40" height="40" fill="rgba(0,127,0,1)"></rect>
+<rect x="80" y="120" width="40" height="40" fill="rgba(0,0,0,1)"></rect>
+<rect x="120" y="120" width="40" height="40" fill="rgba(127,127,0,1)"></rect>
+</svg> \ No newline at end of file
diff --git a/layout/reftests/svg/blend-darken.svg b/layout/reftests/svg/blend-darken.svg
new file mode 100644
index 0000000000..472366aede
--- /dev/null
+++ b/layout/reftests/svg/blend-darken.svg
@@ -0,0 +1,16 @@
+<!--
+ 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" width="400" height="400" >
+<defs>
+ <g id="patch">
+ <rect x="0" y="0" width="40" height="160" fill="rgb(255,0,0)"/>
+ <rect x="40" y="0" width="40" height="160" fill="rgb(0,255,0)"/>
+ <rect x="80" y="0" width="40" height="160" fill="rgb(0,0,255)"/>
+ <rect x="120" y="0" width="40" height="160" fill="rgb(127,127,0)"/>
+ </g>
+</defs>
+<use xlink:href="#patch" x="0" y="0" width="160" height="160"></use>
+<use xlink:href="#patch" x="0" y="0" width="160" height="160" transform="rotate(90 80 80)" style="mix-blend-mode: darken"></use>
+</svg> \ No newline at end of file
diff --git a/layout/reftests/svg/blend-difference-ref.svg b/layout/reftests/svg/blend-difference-ref.svg
new file mode 100644
index 0000000000..c04c51e0ab
--- /dev/null
+++ b/layout/reftests/svg/blend-difference-ref.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" width="400" height="400">
+<rect x="0" y="0" width="40" height="40" fill="rgba(0,0,0,1)"></rect>
+<rect x="40" y="0" width="40" height="40" fill="rgba(255,255,0,1)"></rect>
+<rect x="80" y="0" width="40" height="40" fill="rgba(255,0,255,1)"></rect>
+<rect x="120" y="0" width="40" height="40" fill="rgba(128,127,0,1)"></rect>
+<rect x="0" y="40" width="40" height="40" fill="rgba(255,255,0,1)"></rect>
+<rect x="40" y="40" width="40" height="40" fill="rgba(0,0,0,1)"></rect>
+<rect x="80" y="40" width="40" height="40" fill="rgba(0,255,255,1)"></rect>
+<rect x="120" y="40" width="40" height="40" fill="rgba(127,128,0,1)"></rect>
+<rect x="0" y="80" width="40" height="40" fill="rgba(255,0,255,1)"></rect>
+<rect x="40" y="80" width="40" height="40" fill="rgba(0,255,255,1)"></rect>
+<rect x="80" y="80" width="40" height="40" fill="rgba(0,0,0,1)"></rect>
+<rect x="120" y="80" width="40" height="40" fill="rgba(127,127,255,1)"></rect>
+<rect x="0" y="120" width="40" height="40" fill="rgba(128,127,0,1)"></rect>
+<rect x="40" y="120" width="40" height="40" fill="rgba(127,128,0,1)"></rect>
+<rect x="80" y="120" width="40" height="40" fill="rgba(127,127,255,1)"></rect>
+<rect x="120" y="120" width="40" height="40" fill="rgba(0,0,0,1)"></rect>
+</svg> \ No newline at end of file
diff --git a/layout/reftests/svg/blend-difference-stacking-ref.html b/layout/reftests/svg/blend-difference-stacking-ref.html
new file mode 100644
index 0000000000..5e8b326f75
--- /dev/null
+++ b/layout/reftests/svg/blend-difference-stacking-ref.html
@@ -0,0 +1,28 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<style>
+#b {
+ width: 200px;
+ height: 200px;
+ background-color: rgb(0,255,0);
+}
+#c {
+ z-index: 1;
+ position: absolute;
+ top:100px;
+}
+</style>
+<div id="b">
+<svg width="100" height="100" viewBox="0 0 100 100" >
+ <rect style="fill:#000000;" width="100" height="100"/>
+</svg>
+<div id="c">
+<svg width="100" height="100" viewBox="0 0 100 100" >
+ <rect style="fill:#00FF00;" width="100" height="100"/>
+</svg>
+</div>
+</div>
+</html>
diff --git a/layout/reftests/svg/blend-difference-stacking.html b/layout/reftests/svg/blend-difference-stacking.html
new file mode 100644
index 0000000000..cca18f8ce8
--- /dev/null
+++ b/layout/reftests/svg/blend-difference-stacking.html
@@ -0,0 +1,28 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<style>
+#b {
+ width: 200px;
+ height: 200px;
+ background-color: rgb(0,255,0);
+}
+#c {
+ z-index: 1;
+ position: absolute;
+ top:100px;
+}
+</style>
+<div id="b">
+<svg width="100" height="100" viewBox="0 0 100 100" >
+ <rect style="fill:#00FF00;mix-blend-mode:difference;" width="100" height="100"/>
+</svg>
+<div id="c">
+<svg width="100" height="100" viewBox="0 0 100 100" >
+ <rect style="fill:#00FF00;mix-blend-mode:difference;" width="100" height="100"/>
+</svg>
+</div>
+</div>
+</html>
diff --git a/layout/reftests/svg/blend-difference.svg b/layout/reftests/svg/blend-difference.svg
new file mode 100644
index 0000000000..9343ab6e1f
--- /dev/null
+++ b/layout/reftests/svg/blend-difference.svg
@@ -0,0 +1,16 @@
+<!--
+ 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" width="400" height="400" >
+<defs>
+ <g id="patch">
+ <rect x="0" y="0" width="40" height="160" fill="rgb(255,0,0)"/>
+ <rect x="40" y="0" width="40" height="160" fill="rgb(0,255,0)"/>
+ <rect x="80" y="0" width="40" height="160" fill="rgb(0,0,255)"/>
+ <rect x="120" y="0" width="40" height="160" fill="rgb(127,127,0)"/>
+ </g>
+</defs>
+<use xlink:href="#patch" x="0" y="0" width="160" height="160"></use>
+<use xlink:href="#patch" x="0" y="0" width="160" height="160" transform="rotate(90 80 80)" style="mix-blend-mode: difference"></use>
+</svg> \ No newline at end of file
diff --git a/layout/reftests/svg/blend-exclusion-ref.svg b/layout/reftests/svg/blend-exclusion-ref.svg
new file mode 100644
index 0000000000..b4edd89076
--- /dev/null
+++ b/layout/reftests/svg/blend-exclusion-ref.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" width="400" height="400">
+<rect x="0" y="0" width="40" height="40" fill="rgba(0,0,0,1)"></rect>
+<rect x="40" y="0" width="40" height="40" fill="rgba(255,255,0,1)"></rect>
+<rect x="80" y="0" width="40" height="40" fill="rgba(255,0,255,1)"></rect>
+<rect x="120" y="0" width="40" height="40" fill="rgba(128,127,0,1)"></rect>
+<rect x="0" y="40" width="40" height="40" fill="rgba(255,255,0,1)"></rect>
+<rect x="40" y="40" width="40" height="40" fill="rgba(0,0,0,1)"></rect>
+<rect x="80" y="40" width="40" height="40" fill="rgba(0,255,255,1)"></rect>
+<rect x="120" y="40" width="40" height="40" fill="rgba(127,128,0,1)"></rect>
+<rect x="0" y="80" width="40" height="40" fill="rgba(255,0,255,1)"></rect>
+<rect x="40" y="80" width="40" height="40" fill="rgba(0,255,255,1)"></rect>
+<rect x="80" y="80" width="40" height="40" fill="rgba(0,0,0,1)"></rect>
+<rect x="120" y="80" width="40" height="40" fill="rgba(127,127,255,1)"></rect>
+<rect x="0" y="120" width="40" height="40" fill="rgba(128,127,0,1)"></rect>
+<rect x="40" y="120" width="40" height="40" fill="rgba(127,128,0,1)"></rect>
+<rect x="80" y="120" width="40" height="40" fill="rgba(127,127,255,1)"></rect>
+<rect x="120" y="120" width="40" height="40" fill="rgba(127,127,0,1)"></rect>
+</svg> \ No newline at end of file
diff --git a/layout/reftests/svg/blend-exclusion.svg b/layout/reftests/svg/blend-exclusion.svg
new file mode 100644
index 0000000000..0c3dbe6b49
--- /dev/null
+++ b/layout/reftests/svg/blend-exclusion.svg
@@ -0,0 +1,16 @@
+<!--
+ 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" width="400" height="400" >
+<defs>
+ <g id="patch">
+ <rect x="0" y="0" width="40" height="160" fill="rgb(255,0,0)"/>
+ <rect x="40" y="0" width="40" height="160" fill="rgb(0,255,0)"/>
+ <rect x="80" y="0" width="40" height="160" fill="rgb(0,0,255)"/>
+ <rect x="120" y="0" width="40" height="160" fill="rgb(127,127,0)"/>
+ </g>
+</defs>
+<use xlink:href="#patch" x="0" y="0" width="160" height="160"></use>
+<use xlink:href="#patch" x="0" y="0" width="160" height="160" transform="rotate(90 80 80)" style="mix-blend-mode: exclusion"></use>
+</svg> \ No newline at end of file
diff --git a/layout/reftests/svg/blend-hard-light-ref.svg b/layout/reftests/svg/blend-hard-light-ref.svg
new file mode 100644
index 0000000000..21afb50c38
--- /dev/null
+++ b/layout/reftests/svg/blend-hard-light-ref.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" width="400" height="400">
+<rect x="0" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
+<rect x="40" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
+<rect x="80" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
+<rect x="120" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
+<rect x="0" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
+<rect x="40" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
+<rect x="80" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
+<rect x="120" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
+<rect x="0" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
+<rect x="40" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
+<rect x="80" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
+<rect x="120" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
+<rect x="0" y="120" width="40" height="40" fill="rgba(254,0,0,1)"></rect>
+<rect x="40" y="120" width="40" height="40" fill="rgba(0,254,0,1)"></rect>
+<rect x="80" y="120" width="40" height="40" fill="rgba(0,0,0,1)"></rect>
+<rect x="120" y="120" width="40" height="40" fill="rgba(127,127,0,1)"></rect>
+</svg> \ No newline at end of file
diff --git a/layout/reftests/svg/blend-hard-light.svg b/layout/reftests/svg/blend-hard-light.svg
new file mode 100644
index 0000000000..2cb11ef64b
--- /dev/null
+++ b/layout/reftests/svg/blend-hard-light.svg
@@ -0,0 +1,16 @@
+<!--
+ 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" width="400" height="400" >
+<defs>
+ <g id="patch">
+ <rect x="0" y="0" width="40" height="160" fill="rgb(255,0,0)"/>
+ <rect x="40" y="0" width="40" height="160" fill="rgb(0,255,0)"/>
+ <rect x="80" y="0" width="40" height="160" fill="rgb(0,0,255)"/>
+ <rect x="120" y="0" width="40" height="160" fill="rgb(127,127,0)"/>
+ </g>
+</defs>
+<use xlink:href="#patch" x="0" y="0" width="160" height="160"></use>
+<use xlink:href="#patch" x="0" y="0" width="160" height="160" transform="rotate(90 80 80)" style="mix-blend-mode: hard-light"></use>
+</svg> \ No newline at end of file
diff --git a/layout/reftests/svg/blend-hue-ref.svg b/layout/reftests/svg/blend-hue-ref.svg
new file mode 100644
index 0000000000..907064b543
--- /dev/null
+++ b/layout/reftests/svg/blend-hue-ref.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" width="400" height="400">
+<rect x="0" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
+<rect x="40" y="0" width="40" height="40" fill="rgba(255,105,105,1)"></rect>
+<rect x="80" y="0" width="40" height="40" fill="rgba(93,0,0,1)"></rect>
+<rect x="120" y="0" width="40" height="40" fill="rgba(202,75,75,1)"></rect>
+<rect x="0" y="40" width="40" height="40" fill="rgba(0,131,0,1)"></rect>
+<rect x="40" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
+<rect x="80" y="40" width="40" height="40" fill="rgba(0,48,0,1)"></rect>
+<rect x="120" y="40" width="40" height="40" fill="rgba(38,165,38,1)"></rect>
+<rect x="0" y="80" width="40" height="40" fill="rgba(55,55,255,1)"></rect>
+<rect x="40" y="80" width="40" height="40" fill="rgba(137,137,255,1)"></rect>
+<rect x="80" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
+<rect x="120" y="80" width="40" height="40" fill="rgba(99,99,226,1)"></rect>
+<rect x="0" y="120" width="40" height="40" fill="rgba(87,87,0,1)"></rect>
+<rect x="40" y="120" width="40" height="40" fill="rgba(169,169,0,1)"></rect>
+<rect x="80" y="120" width="40" height="40" fill="rgba(31,31,0,1)"></rect>
+<rect x="120" y="120" width="40" height="40" fill="rgba(127,127,0,1)"></rect>
+</svg> \ No newline at end of file
diff --git a/layout/reftests/svg/blend-hue.svg b/layout/reftests/svg/blend-hue.svg
new file mode 100644
index 0000000000..79dd51e735
--- /dev/null
+++ b/layout/reftests/svg/blend-hue.svg
@@ -0,0 +1,16 @@
+<!--
+ 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" width="400" height="400" >
+<defs>
+ <g id="patch">
+ <rect x="0" y="0" width="40" height="160" fill="rgb(255,0,0)"/>
+ <rect x="40" y="0" width="40" height="160" fill="rgb(0,255,0)"/>
+ <rect x="80" y="0" width="40" height="160" fill="rgb(0,0,255)"/>
+ <rect x="120" y="0" width="40" height="160" fill="rgb(127,127,0)"/>
+ </g>
+</defs>
+<use xlink:href="#patch" x="0" y="0" width="160" height="160"></use>
+<use xlink:href="#patch" x="0" y="0" width="160" height="160" transform="rotate(90 80 80)" style="mix-blend-mode: hue"></use>
+</svg> \ No newline at end of file
diff --git a/layout/reftests/svg/blend-layer-blend-ref.svg b/layout/reftests/svg/blend-layer-blend-ref.svg
new file mode 100644
index 0000000000..19ec46bc61
--- /dev/null
+++ b/layout/reftests/svg/blend-layer-blend-ref.svg
@@ -0,0 +1,7 @@
+<!--
+ 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" width="400" height="400" >
+ <rect x="0" y="0" width="160" height="160" fill="rgb(0,255,0)"/>
+</svg> \ No newline at end of file
diff --git a/layout/reftests/svg/blend-layer-blend.svg b/layout/reftests/svg/blend-layer-blend.svg
new file mode 100644
index 0000000000..cf86914842
--- /dev/null
+++ b/layout/reftests/svg/blend-layer-blend.svg
@@ -0,0 +1,10 @@
+<!--
+ 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" width="400" height="400" >
+ <rect x="0" y="0" width="160" height="160" fill="rgb(0,255,0)"/>
+ <g style="mix-blend-mode: multiply">
+ <rect x="40" y="40" width="80" height="80" fill="rgb(0,255,0)" style="mix-blend-mode: difference"/>
+ </g>
+</svg> \ No newline at end of file
diff --git a/layout/reftests/svg/blend-layer-filter-ref.svg b/layout/reftests/svg/blend-layer-filter-ref.svg
new file mode 100644
index 0000000000..76e1798549
--- /dev/null
+++ b/layout/reftests/svg/blend-layer-filter-ref.svg
@@ -0,0 +1,7 @@
+<!--
+ 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" width="400" height="400" >
+ <rect x="0" y="0" width="160" height="160" fill="rgb(0,255,0)"/>
+</svg>
diff --git a/layout/reftests/svg/blend-layer-filter.svg b/layout/reftests/svg/blend-layer-filter.svg
new file mode 100644
index 0000000000..b74b0f1c9d
--- /dev/null
+++ b/layout/reftests/svg/blend-layer-filter.svg
@@ -0,0 +1,15 @@
+<!--
+ 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" width="400" height="400" >
+<defs>
+ <filter id="f1" x="0" y="0">
+ <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
+ </filter>
+</defs>
+<rect x="0" y="0" width="160" height="160" fill="rgb(0,255,0)"/>
+<g filter="url(#f1)">
+ <rect x="40" y="40" width="80" height="80" fill="rgb(0,255,0)" style="mix-blend-mode: difference"/>
+</g>
+</svg> \ No newline at end of file
diff --git a/layout/reftests/svg/blend-layer-mask-ref.svg b/layout/reftests/svg/blend-layer-mask-ref.svg
new file mode 100644
index 0000000000..19ec46bc61
--- /dev/null
+++ b/layout/reftests/svg/blend-layer-mask-ref.svg
@@ -0,0 +1,7 @@
+<!--
+ 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" width="400" height="400" >
+ <rect x="0" y="0" width="160" height="160" fill="rgb(0,255,0)"/>
+</svg> \ No newline at end of file
diff --git a/layout/reftests/svg/blend-layer-mask.svg b/layout/reftests/svg/blend-layer-mask.svg
new file mode 100644
index 0000000000..8978b7fdc7
--- /dev/null
+++ b/layout/reftests/svg/blend-layer-mask.svg
@@ -0,0 +1,15 @@
+<!--
+ 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" width="400" height="400" >
+<defs>
+ <mask id="msk">
+ <rect x="10" y="10" width="20" height="20" />
+ </mask>
+</defs>
+<rect x="0" y="0" width="160" height="160" fill="rgb(0,255,0)"/>
+<g mask="url(#msk)">
+ <rect x="40" y="40" width="80" height="80" fill="rgb(0,255,0)" style="mix-blend-mode: difference"/>
+</g>
+</svg> \ No newline at end of file
diff --git a/layout/reftests/svg/blend-layer-opacity-ref.svg b/layout/reftests/svg/blend-layer-opacity-ref.svg
new file mode 100644
index 0000000000..0b5c8be597
--- /dev/null
+++ b/layout/reftests/svg/blend-layer-opacity-ref.svg
@@ -0,0 +1,7 @@
+<!--
+ 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" width="400" height="400" >
+<rect x="0" y="0" width="160" height="160" fill="rgb(0,255,0)"/>
+</svg> \ No newline at end of file
diff --git a/layout/reftests/svg/blend-layer-opacity.svg b/layout/reftests/svg/blend-layer-opacity.svg
new file mode 100644
index 0000000000..a472ef991c
--- /dev/null
+++ b/layout/reftests/svg/blend-layer-opacity.svg
@@ -0,0 +1,10 @@
+<!--
+ 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" width="400" height="400" >
+ <rect x="0" y="0" width="160" height="160" fill="rgb(0,255,0)"/>
+ <g opacity=".5">
+ <rect x="40" y="40" width="80" height="80" fill="rgb(0,255,0)" style="mix-blend-mode: difference"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/blend-lighten-ref.svg b/layout/reftests/svg/blend-lighten-ref.svg
new file mode 100644
index 0000000000..4ec1bf08a0
--- /dev/null
+++ b/layout/reftests/svg/blend-lighten-ref.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" width="400" height="400">
+<rect x="0" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
+<rect x="40" y="0" width="40" height="40" fill="rgba(255,255,0,1)"></rect>
+<rect x="80" y="0" width="40" height="40" fill="rgba(255,0,255,1)"></rect>
+<rect x="120" y="0" width="40" height="40" fill="rgba(255,127,0,1)"></rect>
+<rect x="0" y="40" width="40" height="40" fill="rgba(255,255,0,1)"></rect>
+<rect x="40" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
+<rect x="80" y="40" width="40" height="40" fill="rgba(0,255,255,1)"></rect>
+<rect x="120" y="40" width="40" height="40" fill="rgba(127,255,0,1)"></rect>
+<rect x="0" y="80" width="40" height="40" fill="rgba(255,0,255,1)"></rect>
+<rect x="40" y="80" width="40" height="40" fill="rgba(0,255,255,1)"></rect>
+<rect x="80" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
+<rect x="120" y="80" width="40" height="40" fill="rgba(127,127,255,1)"></rect>
+<rect x="0" y="120" width="40" height="40" fill="rgba(255,127,0,1)"></rect>
+<rect x="40" y="120" width="40" height="40" fill="rgba(127,255,0,1)"></rect>
+<rect x="80" y="120" width="40" height="40" fill="rgba(127,127,255,1)"></rect>
+<rect x="120" y="120" width="40" height="40" fill="rgba(127,127,0,1)"></rect>
+</svg> \ No newline at end of file
diff --git a/layout/reftests/svg/blend-lighten.svg b/layout/reftests/svg/blend-lighten.svg
new file mode 100644
index 0000000000..f288d9f32a
--- /dev/null
+++ b/layout/reftests/svg/blend-lighten.svg
@@ -0,0 +1,16 @@
+<!--
+ 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" width="400" height="400" >
+<defs>
+ <g id="patch">
+ <rect x="0" y="0" width="40" height="160" fill="rgb(255,0,0)"/>
+ <rect x="40" y="0" width="40" height="160" fill="rgb(0,255,0)"/>
+ <rect x="80" y="0" width="40" height="160" fill="rgb(0,0,255)"/>
+ <rect x="120" y="0" width="40" height="160" fill="rgb(127,127,0)"/>
+ </g>
+</defs>
+<use xlink:href="#patch" x="0" y="0" width="160" height="160"></use>
+<use xlink:href="#patch" x="0" y="0" width="160" height="160" transform="rotate(90 80 80)" style="mix-blend-mode: lighten"></use>
+</svg> \ No newline at end of file
diff --git a/layout/reftests/svg/blend-luminosity-ref.svg b/layout/reftests/svg/blend-luminosity-ref.svg
new file mode 100644
index 0000000000..8dc3c2247f
--- /dev/null
+++ b/layout/reftests/svg/blend-luminosity-ref.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" width="400" height="400">
+<rect x="0" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
+<rect x="40" y="0" width="40" height="40" fill="rgba(0,131,0,1)"></rect>
+<rect x="80" y="0" width="40" height="40" fill="rgba(55,55,255,1)"></rect>
+<rect x="120" y="0" width="40" height="40" fill="rgba(86,86,0,1)"></rect>
+<rect x="0" y="40" width="40" height="40" fill="rgba(255,105,105,1)"></rect>
+<rect x="40" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
+<rect x="80" y="40" width="40" height="40" fill="rgba(137,137,255,1)"></rect>
+<rect x="120" y="40" width="40" height="40" fill="rgba(164,164,37,1)"></rect>
+<rect x="0" y="80" width="40" height="40" fill="rgba(93,0,0,1)"></rect>
+<rect x="40" y="80" width="40" height="40" fill="rgba(0,48,0,1)"></rect>
+<rect x="80" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
+<rect x="120" y="80" width="40" height="40" fill="rgba(31,31,0,1)"></rect>
+<rect x="0" y="120" width="40" height="40" fill="rgba(255,52,52,1)"></rect>
+<rect x="40" y="120" width="40" height="40" fill="rgba(0,192,0,1)"></rect>
+<rect x="80" y="120" width="40" height="40" fill="rgba(95,95,255,1)"></rect>
+<rect x="120" y="120" width="40" height="40" fill="rgba(127,127,0,1)"></rect>
+</svg> \ No newline at end of file
diff --git a/layout/reftests/svg/blend-luminosity.svg b/layout/reftests/svg/blend-luminosity.svg
new file mode 100644
index 0000000000..7d9f1a55c4
--- /dev/null
+++ b/layout/reftests/svg/blend-luminosity.svg
@@ -0,0 +1,16 @@
+<!--
+ 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" width="400" height="400" >
+<defs>
+ <g id="patch">
+ <rect x="0" y="0" width="40" height="160" fill="rgb(255,0,0)"/>
+ <rect x="40" y="0" width="40" height="160" fill="rgb(0,255,0)"/>
+ <rect x="80" y="0" width="40" height="160" fill="rgb(0,0,255)"/>
+ <rect x="120" y="0" width="40" height="160" fill="rgb(127,127,0)"/>
+ </g>
+</defs>
+<use xlink:href="#patch" x="0" y="0" width="160" height="160"></use>
+<use xlink:href="#patch" x="0" y="0" width="160" height="160" transform="rotate(90 80 80)" style="mix-blend-mode: luminosity"></use>
+</svg> \ No newline at end of file
diff --git a/layout/reftests/svg/blend-multiply-alpha-ref.svg b/layout/reftests/svg/blend-multiply-alpha-ref.svg
new file mode 100644
index 0000000000..468fd9d91e
--- /dev/null
+++ b/layout/reftests/svg/blend-multiply-alpha-ref.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" width="400" height="400">
+<rect x="0" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
+<rect x="40" y="0" width="40" height="40" fill="rgba(0,127,0,1)"></rect>
+<rect x="80" y="0" width="40" height="40" fill="rgba(0,0,127,1)"></rect>
+<rect x="120" y="0" width="40" height="40" fill="rgba(127,63,0,1)"></rect>
+<rect x="0" y="40" width="40" height="40" fill="rgba(127,0,0,1)"></rect>
+<rect x="40" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
+<rect x="80" y="40" width="40" height="40" fill="rgba(0,0,127,1)"></rect>
+<rect x="120" y="40" width="40" height="40" fill="rgba(64,127,0,1)"></rect>
+<rect x="0" y="80" width="40" height="40" fill="rgba(127,0,0,1)"></rect>
+<rect x="40" y="80" width="40" height="40" fill="rgba(0,127,0,1)"></rect>
+<rect x="80" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
+<rect x="120" y="80" width="40" height="40" fill="rgba(63,63,0,1)"></rect>
+<rect x="0" y="120" width="40" height="40" fill="rgba(191,0,0,1)"></rect>
+<rect x="40" y="120" width="40" height="40" fill="rgba(0,191,0,1)"></rect>
+<rect x="80" y="120" width="40" height="40" fill="rgba(0,0,127,1)"></rect>
+<rect x="120" y="120" width="40" height="40" fill="rgba(95,95,0,1)"></rect>
+</svg> \ No newline at end of file
diff --git a/layout/reftests/svg/blend-multiply-alpha.svg b/layout/reftests/svg/blend-multiply-alpha.svg
new file mode 100644
index 0000000000..fd707e2236
--- /dev/null
+++ b/layout/reftests/svg/blend-multiply-alpha.svg
@@ -0,0 +1,16 @@
+<!--
+ 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" width="400" height="400" >
+<defs>
+ <g id="patch">
+ <rect x="0" y="0" width="40" height="160" fill="rgb(255,0,0)"/>
+ <rect x="40" y="0" width="40" height="160" fill="rgb(0,255,0)"/>
+ <rect x="80" y="0" width="40" height="160" fill="rgb(0,0,255)"/>
+ <rect x="120" y="0" width="40" height="160" fill="rgb(127,127,0)"/>
+ </g>
+</defs>
+<use xlink:href="#patch" x="0" y="0" width="160" height="160"></use>
+<use xlink:href="#patch" x="0" y="0" width="160" height="160" transform="rotate(90 80 80)" style="opacity: .5; mix-blend-mode: multiply"></use>
+</svg> \ No newline at end of file
diff --git a/layout/reftests/svg/blend-multiply-ref.svg b/layout/reftests/svg/blend-multiply-ref.svg
new file mode 100644
index 0000000000..0addf25093
--- /dev/null
+++ b/layout/reftests/svg/blend-multiply-ref.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" width="400" height="400">
+<rect x="0" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
+<rect x="40" y="0" width="40" height="40" fill="rgba(0,0,0,1)"></rect>
+<rect x="80" y="0" width="40" height="40" fill="rgba(0,0,0,1)"></rect>
+<rect x="120" y="0" width="40" height="40" fill="rgba(127,0,0,1)"></rect>
+<rect x="0" y="40" width="40" height="40" fill="rgba(0,0,0,1)"></rect>
+<rect x="40" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
+<rect x="80" y="40" width="40" height="40" fill="rgba(0,0,0,1)"></rect>
+<rect x="120" y="40" width="40" height="40" fill="rgba(0,127,0,1)"></rect>
+<rect x="0" y="80" width="40" height="40" fill="rgba(0,0,0,1)"></rect>
+<rect x="40" y="80" width="40" height="40" fill="rgba(0,0,0,1)"></rect>
+<rect x="80" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
+<rect x="120" y="80" width="40" height="40" fill="rgba(0,0,0,1)"></rect>
+<rect x="0" y="120" width="40" height="40" fill="rgba(127,0,0,1)"></rect>
+<rect x="40" y="120" width="40" height="40" fill="rgba(0,127,0,1)"></rect>
+<rect x="80" y="120" width="40" height="40" fill="rgba(0,0,0,1)"></rect>
+<rect x="120" y="120" width="40" height="40" fill="rgba(63,63,0,1)"></rect>
+</svg> \ No newline at end of file
diff --git a/layout/reftests/svg/blend-multiply.svg b/layout/reftests/svg/blend-multiply.svg
new file mode 100644
index 0000000000..2724f94ee0
--- /dev/null
+++ b/layout/reftests/svg/blend-multiply.svg
@@ -0,0 +1,16 @@
+<!--
+ 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" width="400" height="400" >
+<defs>
+ <g id="patch">
+ <rect x="0" y="0" width="40" height="160" fill="rgb(255,0,0)"/>
+ <rect x="40" y="0" width="40" height="160" fill="rgb(0,255,0)"/>
+ <rect x="80" y="0" width="40" height="160" fill="rgb(0,0,255)"/>
+ <rect x="120" y="0" width="40" height="160" fill="rgb(127,127,0)"/>
+ </g>
+</defs>
+<use xlink:href="#patch" x="0" y="0" width="160" height="160"></use>
+<use xlink:href="#patch" x="0" y="0" width="160" height="160" transform="rotate(90 80 80)" style="mix-blend-mode: multiply"></use>
+</svg> \ No newline at end of file
diff --git a/layout/reftests/svg/blend-normal-ref.svg b/layout/reftests/svg/blend-normal-ref.svg
new file mode 100644
index 0000000000..8b86b74487
--- /dev/null
+++ b/layout/reftests/svg/blend-normal-ref.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" width="400" height="400">
+<rect x="0" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
+<rect x="40" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
+<rect x="80" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
+<rect x="120" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
+<rect x="0" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
+<rect x="40" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
+<rect x="80" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
+<rect x="120" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
+<rect x="0" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
+<rect x="40" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
+<rect x="80" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
+<rect x="120" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
+<rect x="0" y="120" width="40" height="40" fill="rgba(127,127,0,1)"></rect>
+<rect x="40" y="120" width="40" height="40" fill="rgba(127,127,0,1)"></rect>
+<rect x="80" y="120" width="40" height="40" fill="rgba(127,127,0,1)"></rect>
+<rect x="120" y="120" width="40" height="40" fill="rgba(127,127,0,1)"></rect>
+</svg> \ No newline at end of file
diff --git a/layout/reftests/svg/blend-normal.svg b/layout/reftests/svg/blend-normal.svg
new file mode 100644
index 0000000000..3878c6c4c4
--- /dev/null
+++ b/layout/reftests/svg/blend-normal.svg
@@ -0,0 +1,16 @@
+<!--
+ 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" width="400" height="400" >
+<defs>
+ <g id="patch">
+ <rect x="0" y="0" width="40" height="160" fill="rgb(255,0,0)"/>
+ <rect x="40" y="0" width="40" height="160" fill="rgb(0,255,0)"/>
+ <rect x="80" y="0" width="40" height="160" fill="rgb(0,0,255)"/>
+ <rect x="120" y="0" width="40" height="160" fill="rgb(127,127,0)"/>
+ </g>
+</defs>
+<use xlink:href="#patch" x="0" y="0" width="160" height="160"></use>
+<use xlink:href="#patch" x="0" y="0" width="160" height="160" transform="rotate(90 80 80)" style="mix-blend-mode: normal"></use>
+</svg>
diff --git a/layout/reftests/svg/blend-overlay-ref.svg b/layout/reftests/svg/blend-overlay-ref.svg
new file mode 100644
index 0000000000..320697f710
--- /dev/null
+++ b/layout/reftests/svg/blend-overlay-ref.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" width="400" height="400">
+<rect x="0" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
+<rect x="40" y="0" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
+<rect x="80" y="0" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
+<rect x="120" y="0" width="40" height="40" fill="rgba(254,0,0,1)"></rect>
+<rect x="0" y="40" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
+<rect x="40" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
+<rect x="80" y="40" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
+<rect x="120" y="40" width="40" height="40" fill="rgba(0,254,0,1)"></rect>
+<rect x="0" y="80" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
+<rect x="40" y="80" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
+<rect x="80" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
+<rect x="120" y="80" width="40" height="40" fill="rgba(0,0,0,1)"></rect>
+<rect x="0" y="120" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
+<rect x="40" y="120" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
+<rect x="80" y="120" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
+<rect x="120" y="120" width="40" height="40" fill="rgba(126,126,0,1)"></rect>
+</svg> \ No newline at end of file
diff --git a/layout/reftests/svg/blend-overlay.svg b/layout/reftests/svg/blend-overlay.svg
new file mode 100644
index 0000000000..114d6e3da0
--- /dev/null
+++ b/layout/reftests/svg/blend-overlay.svg
@@ -0,0 +1,16 @@
+<!--
+ 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" width="400" height="400" >
+<defs>
+ <g id="patch">
+ <rect x="0" y="0" width="40" height="160" fill="rgb(255,0,0)"/>
+ <rect x="40" y="0" width="40" height="160" fill="rgb(0,255,0)"/>
+ <rect x="80" y="0" width="40" height="160" fill="rgb(0,0,255)"/>
+ <rect x="120" y="0" width="40" height="160" fill="rgb(127,127,0)"/>
+ </g>
+</defs>
+<use xlink:href="#patch" x="0" y="0" width="160" height="160"></use>
+<use xlink:href="#patch" x="0" y="0" width="160" height="160" transform="rotate(90 80 80)" style="mix-blend-mode: overlay"></use>
+</svg>
diff --git a/layout/reftests/svg/blend-saturation-ref.svg b/layout/reftests/svg/blend-saturation-ref.svg
new file mode 100644
index 0000000000..a8fb06a5a8
--- /dev/null
+++ b/layout/reftests/svg/blend-saturation-ref.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" width="400" height="400">
+<rect x="0" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
+<rect x="40" y="0" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
+<rect x="80" y="0" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
+<rect x="120" y="0" width="40" height="40" fill="rgba(127,127,0,1)"></rect>
+<rect x="0" y="40" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
+<rect x="40" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
+<rect x="80" y="40" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
+<rect x="120" y="40" width="40" height="40" fill="rgba(127,127,0,1)"></rect>
+<rect x="0" y="80" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
+<rect x="40" y="80" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
+<rect x="80" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
+<rect x="120" y="80" width="40" height="40" fill="rgba(127,127,0,1)"></rect>
+<rect x="0" y="120" width="40" height="40" fill="rgba(166,39,39,1)"></rect>
+<rect x="40" y="120" width="40" height="40" fill="rgba(76,203,76,1)"></rect>
+<rect x="80" y="120" width="40" height="40" fill="rgba(14,14,141,1)"></rect>
+<rect x="120" y="120" width="40" height="40" fill="rgba(127,127,0,1)"></rect>
+</svg> \ No newline at end of file
diff --git a/layout/reftests/svg/blend-saturation.svg b/layout/reftests/svg/blend-saturation.svg
new file mode 100644
index 0000000000..88bd526480
--- /dev/null
+++ b/layout/reftests/svg/blend-saturation.svg
@@ -0,0 +1,16 @@
+<!--
+ 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" width="400" height="400" >
+<defs>
+ <g id="patch">
+ <rect x="0" y="0" width="40" height="160" fill="rgb(255,0,0)"/>
+ <rect x="40" y="0" width="40" height="160" fill="rgb(0,255,0)"/>
+ <rect x="80" y="0" width="40" height="160" fill="rgb(0,0,255)"/>
+ <rect x="120" y="0" width="40" height="160" fill="rgb(127,127,0)"/>
+ </g>
+</defs>
+<use xlink:href="#patch" x="0" y="0" width="160" height="160"></use>
+<use xlink:href="#patch" x="0" y="0" width="160" height="160" transform="rotate(90 80 80)" style="mix-blend-mode: saturation"></use>
+</svg>
diff --git a/layout/reftests/svg/blend-screen-ref.svg b/layout/reftests/svg/blend-screen-ref.svg
new file mode 100644
index 0000000000..d99af71dc9
--- /dev/null
+++ b/layout/reftests/svg/blend-screen-ref.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" width="400" height="400">
+<rect x="0" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
+<rect x="40" y="0" width="40" height="40" fill="rgba(255,255,0,1)"></rect>
+<rect x="80" y="0" width="40" height="40" fill="rgba(255,0,255,1)"></rect>
+<rect x="120" y="0" width="40" height="40" fill="rgba(255,127,0,1)"></rect>
+<rect x="0" y="40" width="40" height="40" fill="rgba(255,255,0,1)"></rect>
+<rect x="40" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
+<rect x="80" y="40" width="40" height="40" fill="rgba(0,255,255,1)"></rect>
+<rect x="120" y="40" width="40" height="40" fill="rgba(127,255,0,1)"></rect>
+<rect x="0" y="80" width="40" height="40" fill="rgba(255,0,255,1)"></rect>
+<rect x="40" y="80" width="40" height="40" fill="rgba(0,255,255,1)"></rect>
+<rect x="80" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
+<rect x="120" y="80" width="40" height="40" fill="rgba(127,127,255,1)"></rect>
+<rect x="0" y="120" width="40" height="40" fill="rgba(255,127,0,1)"></rect>
+<rect x="40" y="120" width="40" height="40" fill="rgba(127,255,0,1)"></rect>
+<rect x="80" y="120" width="40" height="40" fill="rgba(127,127,255,1)"></rect>
+<rect x="120" y="120" width="40" height="40" fill="rgba(190,190,0,1)"></rect>
+</svg> \ No newline at end of file
diff --git a/layout/reftests/svg/blend-screen.svg b/layout/reftests/svg/blend-screen.svg
new file mode 100644
index 0000000000..79ce563a5a
--- /dev/null
+++ b/layout/reftests/svg/blend-screen.svg
@@ -0,0 +1,16 @@
+<!--
+ 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" width="400" height="400" >
+<defs>
+ <g id="patch">
+ <rect x="0" y="0" width="40" height="160" fill="rgb(255,0,0)"/>
+ <rect x="40" y="0" width="40" height="160" fill="rgb(0,255,0)"/>
+ <rect x="80" y="0" width="40" height="160" fill="rgb(0,0,255)"/>
+ <rect x="120" y="0" width="40" height="160" fill="rgb(127,127,0)"/>
+ </g>
+</defs>
+<use xlink:href="#patch" x="0" y="0" width="160" height="160"></use>
+<use xlink:href="#patch" x="0" y="0" width="160" height="160" transform="rotate(90 80 80)" style="mix-blend-mode: screen"></use>
+</svg>
diff --git a/layout/reftests/svg/blend-soft-light-ref.svg b/layout/reftests/svg/blend-soft-light-ref.svg
new file mode 100644
index 0000000000..485314e389
--- /dev/null
+++ b/layout/reftests/svg/blend-soft-light-ref.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" width="400" height="400">
+ <rect x="0" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
+ <rect x="40" y="0" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
+ <rect x="80" y="0" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
+ <rect x="120" y="0" width="40" height="40" fill="rgba(190,63,0,1)"></rect>
+ <rect x="0" y="40" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
+ <rect x="40" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
+ <rect x="80" y="40" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
+ <rect x="120" y="40" width="40" height="40" fill="rgba(64,190,0,1)"></rect>
+ <rect x="0" y="80" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
+ <rect x="40" y="80" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
+ <rect x="80" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
+ <rect x="120" y="80" width="40" height="40" fill="rgba(63,63,0,1)"></rect>
+ <rect x="0" y="120" width="40" height="40" fill="rgba(255,0,0,1)"></rect>
+ <rect x="40" y="120" width="40" height="40" fill="rgba(0,255,0,1)"></rect>
+ <rect x="80" y="120" width="40" height="40" fill="rgba(0,0,255,1)"></rect>
+ <rect x="120" y="120" width="40" height="40" fill="rgba(126,126,0,1)"></rect>
+</svg>
diff --git a/layout/reftests/svg/blend-soft-light.svg b/layout/reftests/svg/blend-soft-light.svg
new file mode 100644
index 0000000000..a0f42a4f4f
--- /dev/null
+++ b/layout/reftests/svg/blend-soft-light.svg
@@ -0,0 +1,16 @@
+<!--
+ 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" width="400" height="400" >
+<defs>
+ <g id="patch">
+ <rect x="0" y="0" width="40" height="160" fill="rgb(255,0,0)"/>
+ <rect x="40" y="0" width="40" height="160" fill="rgb(0,255,0)"/>
+ <rect x="80" y="0" width="40" height="160" fill="rgb(0,0,255)"/>
+ <rect x="120" y="0" width="40" height="160" fill="rgb(127,127,0)"/>
+ </g>
+</defs>
+<use xlink:href="#patch" x="0" y="0" width="160" height="160"></use>
+<use xlink:href="#patch" x="0" y="0" width="160" height="160" transform="rotate(90 80 80)" style="mix-blend-mode: soft-light"></use>
+</svg>
diff --git a/layout/reftests/svg/blur-inside-clipPath-ref.svg b/layout/reftests/svg/blur-inside-clipPath-ref.svg
new file mode 100644
index 0000000000..0b679f7409
--- /dev/null
+++ b/layout/reftests/svg/blur-inside-clipPath-ref.svg
@@ -0,0 +1,12 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="512" height="786" viewBox="0,0,512,512">
+ <defs>
+ <filter id="filter-wVmTgUOU" filterUnits="objectBoundingBox" x="-30%" y="-30%" width="160%" height="170%" color-interpolation-filters="sRGB">
+ <feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0" in="SourceGraphic"/>
+ <feOffset dy="28"/>
+ <feGaussianBlur stdDeviation="18.67" result="blur1"/>
+ </filter>
+ </defs>
+ <g filter="url(#filter-wVmTgUOU)">
+ <rect x="58.88" y="58.88" width="394.24" height="394.24" color="#07773e" fill="red"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/blur-inside-clipPath.svg b/layout/reftests/svg/blur-inside-clipPath.svg
new file mode 100644
index 0000000000..0b31241c48
--- /dev/null
+++ b/layout/reftests/svg/blur-inside-clipPath.svg
@@ -0,0 +1,17 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="512" height="786" viewBox="0,0,512,512">
+ <defs>
+ <clipPath id="clip-vXP8Ybe5">
+ <path d="M0,512v-512h512v512z"/>
+ </clipPath>
+ <filter id="filter-wVmTgUOU" filterUnits="objectBoundingBox" x="-30%" y="-30%" width="160%" height="170%" color-interpolation-filters="sRGB">
+ <feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0" in="SourceGraphic"/>
+ <feOffset dy="28"/>
+ <feGaussianBlur stdDeviation="18.67" result="blur1"/>
+ </filter>
+ </defs>
+ <g clip-path="url(#clip-vXP8Ybe5)">
+ <g filter="url(#filter-wVmTgUOU)">
+ <rect x="58.88" y="58.88" width="394.24" height="394.24" color="#07773e" fill="red"/>
+ </g>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/border-radius-01.html b/layout/reftests/svg/border-radius-01.html
new file mode 100644
index 0000000000..2ea2a0d200
--- /dev/null
+++ b/layout/reftests/svg/border-radius-01.html
@@ -0,0 +1,13 @@
+<html>
+<head>
+</head>
+<body style="background-color: lime;">
+ <svg width="300" height="300"
+ style="border-radius: 200px; overflow: hidden; background-color: red; position: absolute;">
+ <rect width="300" height="300" fill="red"/>
+ </svg>
+ <svg width="300" height="300" style="position: absolute;">
+ <circle cx="150" cy="150" r="155" fill="lime"/>
+ </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/bug-1562091-icon.svg b/layout/reftests/svg/bug-1562091-icon.svg
new file mode 100644
index 0000000000..c7839998c0
--- /dev/null
+++ b/layout/reftests/svg/bug-1562091-icon.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+ xmlns="http://www.w3.org/2000/svg"
+ version="1.1"
+ x="0"
+ y="0"
+ width="24px"
+ height="7992px"
+ viewBox="0 0 24 7992"
+ preserveAspectRatio="none">
+ <path
+ style="opacity:1;fill:#338000;fill-opacity:1;stroke:#333333;stroke-width:0.00377953;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
+ d="m 12.254729,7226.1639 a 10.219037,9.9150381 0 0 0 -10.2187504,9.914 10.219037,9.9150381 0 0 0 10.2187504,9.916 10.219037,9.9150381 0 0 0 10.21875,-9.916 10.219037,9.9150381 0 0 0 -10.21875,-9.914 z m -4.8632817,5.4238 a 1.8472255,1.8472254 0 0 1 1.8476563,1.8476 1.8472255,1.8472254 0 0 1 -1.8476563,1.8477 1.8472255,1.8472254 0 0 1 -1.8476563,-1.8477 1.8472255,1.8472254 0 0 1 1.8476563,-1.8476 z m 7.9511717,0.1894 a 2.8750086,2.8750083 0 0 1 2.875,2.875 2.8750086,2.8750083 0 0 1 -2.875,2.875 2.8750086,2.8750083 0 0 1 -2.875,-2.875 2.8750086,2.8750083 0 0 1 2.875,-2.875 z m -9.4726561,5.9942 c 2.3418683,-0.014 5.6283111,3.4184 11.8808601,3.3125 l 0.560546,0.8418 c -2.199521,1.9496 -11.6343041,3.7181 -13.9374997,-3.5078 0.4646917,-0.456 0.9556625,-0.6433 1.4960936,-0.6465 z"/>
+</svg>
diff --git a/layout/reftests/svg/bug-1562091-ref.html b/layout/reftests/svg/bug-1562091-ref.html
new file mode 100644
index 0000000000..78c5f8622f
--- /dev/null
+++ b/layout/reftests/svg/bug-1562091-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+ <meta charset="UTF-8">
+</head>
+
+<body>
+ There should be a visible icon after this text:
+ <!-- No icon in the reference, we test that the original is different from the reference-->
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/svg/bug-1562091.html b/layout/reftests/svg/bug-1562091.html
new file mode 100644
index 0000000000..ee192a88dd
--- /dev/null
+++ b/layout/reftests/svg/bug-1562091.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+ <meta charset="UTF-8">
+ <style>
+ .IconElement { direction: ltr; text-align: left; height: 24px; overflow: hidden; width: 24px; display: inline-block; position: relative; }
+ .IconImage::before { content: url("./bug-1562091-icon.svg"); }
+ .IconImage { position: absolute; left: 0px; top: -7224px; }
+ </style>
+</head>
+
+<body>
+ There should be a visible icon after this text:
+ <div class="IconElement"> <div class="IconImage">&nbsp;</div> </div>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/svg/clip-01.svg b/layout/reftests/svg/clip-01.svg
new file mode 100644
index 0000000000..e15923b4e6
--- /dev/null
+++ b/layout/reftests/svg/clip-01.svg
@@ -0,0 +1,24 @@
+<!--
+ 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 for clip property</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=481614 -->
+
+ <rect width="100%" height="100%" fill="lime"/>
+
+ <rect x="10" y="10" width="100" height="100" fill="red"/>
+
+ <svg clip="rect(10, 110, 110, 10)">
+ <rect width="100%" height="100%" fill="red" />
+ <rect x="10" y="10" width="100" height="100" fill="lime"/>
+ </svg>
+
+ <svg clip="rect(0, 0, 0, 0)">
+ <rect width="100%" height="100%" fill="red" />
+ </svg>
+
+</svg>
diff --git a/layout/reftests/svg/clip-02-ref.svg b/layout/reftests/svg/clip-02-ref.svg
new file mode 100644
index 0000000000..8148dda729
--- /dev/null
+++ b/layout/reftests/svg/clip-02-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" version="1.1">
+
+ <title>Reference for clip property</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=481614 -->
+
+ <rect x="10" y="10" width="100" height="100" fill="lime"/>
+
+ <rect x="10" y="210" width="100" height="100" fill="lime"/>
+
+ <rect x="210" y="210" width="100" height="100" fill="lime"/>
+
+ <rect x="10" y="410" width="100" height="100" fill="lime"/>
+
+ <rect x="210" y="410" width="100" height="100" fill="lime"/>
+</svg>
diff --git a/layout/reftests/svg/clip-02a.svg b/layout/reftests/svg/clip-02a.svg
new file mode 100644
index 0000000000..233712bdd9
--- /dev/null
+++ b/layout/reftests/svg/clip-02a.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" version="1.1">
+
+ <title>Testcase for clip property</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=481614 -->
+
+ <svg clip="auto">
+ <rect x="10" y="10" width="100" height="100" fill="lime"/>
+ </svg>
+
+ <svg clip="rect(auto, 110, 310, 10)">
+ <rect y="210" width="120" height="110" fill="red" />
+ <rect x="10" y="210" width="100" height="100" fill="lime"/>
+ </svg>
+
+ <svg clip="rect(210, auto, 310, 210)">
+ <rect x="200" y="200" width="110" height="120" fill="red" />
+ <rect x="210" y="210" width="100" height="100" fill="lime"/>
+ </svg>
+
+ <svg clip="rect(410, 110, auto, 10)">
+ <rect y="400" width="120" height="110" fill="red" />
+ <rect x="10" y="410" width="100" height="100" fill="lime"/>
+ </svg>
+
+ <svg clip="rect(410, 310, 510, auto)">
+ <rect x="210" y="400" width="110" height="120" fill="red" />
+ <rect x="210" y="410" width="100" height="100" fill="lime"/>
+ </svg>
+</svg>
diff --git a/layout/reftests/svg/clip-02b.svg b/layout/reftests/svg/clip-02b.svg
new file mode 100644
index 0000000000..dd77c9aed3
--- /dev/null
+++ b/layout/reftests/svg/clip-02b.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" version="1.1" direction="rtl">
+
+ <title>Testcase for clip property</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=481614 -->
+
+ <svg clip="auto">
+ <rect x="10" y="10" width="100" height="100" fill="lime"/>
+ </svg>
+
+ <svg clip="rect(auto, 110, 310, 10)">
+ <rect y="210" width="120" height="110" fill="red" />
+ <rect x="10" y="210" width="100" height="100" fill="lime"/>
+ </svg>
+
+ <svg clip="rect(210, auto, 310, 210)">
+ <rect x="200" y="200" width="110" height="120" fill="red" />
+ <rect x="210" y="210" width="100" height="100" fill="lime"/>
+ </svg>
+
+ <svg clip="rect(410, 110, auto, 10)">
+ <rect y="400" width="120" height="110" fill="red" />
+ <rect x="10" y="410" width="100" height="100" fill="lime"/>
+ </svg>
+
+ <svg clip="rect(410, 310, 510, auto)">
+ <rect x="210" y="400" width="110" height="120" fill="red" />
+ <rect x="210" y="410" width="100" height="100" fill="lime"/>
+ </svg>
+</svg>
diff --git a/layout/reftests/svg/clip-surface-clone-01-ref.svg b/layout/reftests/svg/clip-surface-clone-01-ref.svg
new file mode 100644
index 0000000000..71790e6ba0
--- /dev/null
+++ b/layout/reftests/svg/clip-surface-clone-01-ref.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <image xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAAXNSR0IArs4c6QAAAAxJREFUCNdj+M/AAAADAQEAGN2NsAAAAABJRU5ErkJggg"
+ x="200" y="200" opacity="0.5" width="100" height="100"/>
+</svg>
diff --git a/layout/reftests/svg/clip-surface-clone-01.svg b/layout/reftests/svg/clip-surface-clone-01.svg
new file mode 100644
index 0000000000..7854b756b2
--- /dev/null
+++ b/layout/reftests/svg/clip-surface-clone-01.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <svg x="200" y="200" width="200.5" height="200.5">
+ <g opacity="0.5">
+ <image xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAAXNSR0IArs4c6QAAAAxJREFUCNdj+M/AAAADAQEAGN2NsAAAAABJRU5ErkJggg"
+ width="100" height="100"/>
+ </g>
+ </svg>
+</svg>
diff --git a/layout/reftests/svg/clip-use-element-01.svg b/layout/reftests/svg/clip-use-element-01.svg
new file mode 100644
index 0000000000..a01f4b9afe
--- /dev/null
+++ b/layout/reftests/svg/clip-use-element-01.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+ <clipPath id="myClipPath">
+ <rect x="100" y="100" width="100" height="100"/>
+ </clipPath>
+ <rect x="0" y="0" width="100" height="100" fill="red" id="abc"/>
+ </defs>
+ <rect x="0" y="0" width="100%" height="100%" fill="lime"/>
+ <use xlink:href="#abc"
+ x="100" y="100" clip-path="url(#myClipPath)"/>
+</svg> \ No newline at end of file
diff --git a/layout/reftests/svg/clip-use-element-02.svg b/layout/reftests/svg/clip-use-element-02.svg
new file mode 100644
index 0000000000..493edf24b5
--- /dev/null
+++ b/layout/reftests/svg/clip-use-element-02.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+ <rect x="100" y="100" width="100" height="100" fill="red" id="def"/>
+ <clipPath id="myClipPath">
+ <use xlink:href="#def"/>
+ </clipPath>
+ <rect x="0" y="0" width="100" height="100" fill="red" id="abc"/>
+ </defs>
+ <rect x="0" y="0" width="100%" height="100%" fill="lime"/>
+ <use xlink:href="#abc"
+ x="100" y="100" clip-path="url(#myClipPath)"/>
+</svg> \ No newline at end of file
diff --git a/layout/reftests/svg/clipPath-advanced-01.svg b/layout/reftests/svg/clipPath-advanced-01.svg
new file mode 100644
index 0000000000..7690f8bb11
--- /dev/null
+++ b/layout/reftests/svg/clipPath-advanced-01.svg
@@ -0,0 +1,84 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
+
+ <title>Testcase for clipPath referencing other clipPaths</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=534612 -->
+
+ <defs>
+ <clipPath id="clip1">
+ <rect id="r1" x="20" y="-40" width="100" height="40" />
+ </clipPath>
+ <clipPath id="clip2">
+ <rect x="20" y="20" width="100" height="100" clip-path="url(#clip1)" />
+ </clipPath>
+ <clipPath id="clip3">
+ <rect x="140" y="-40" width="100" height="40" />
+ </clipPath>
+ <clipPath id="clip4" clip-path="url(#clip3)">
+ <rect x="140" y="20" width="100" height="100" />
+ </clipPath>
+ <clipPath id="clip1">
+ <rect x="20" y="-40" width="100" height="40" />
+ </clipPath>
+ <clipPath id="clip5">
+ <rect id="r5" x="20" y="140" width="100" height="100" />
+ </clipPath>
+ <clipPath id="clip6">
+ <use xlink:href="#r5" clip-path="url(#clip5)" />
+ </clipPath>
+ <clipPath id="clip7">
+ <rect id="r7" x="140" y="140" width="100" height="100" />
+ </clipPath>
+ <clipPath id="clip8">
+ <use xlink:href="#r7" fill="red" clip-path="url(#clip1)"/>
+ </clipPath>
+ <clipPath id="clip9">
+ <rect x="20" y="260" width="100" height="100" />
+ </clipPath>
+ <clipPath id="clip10">
+ <use xlink:href="#r1" fill="red" clip-path="url(#clip9)"/>
+ </clipPath>
+ <clipPath id="clip11">
+ <rect id="r11" x="140" y="260" width="100" height="100" clip-path="url(#clip1)"/>
+ </clipPath>
+ <clipPath id="clip12">
+ <use xlink:href="#r11" fill="red" clip-path="url(#clip11)"/>
+ </clipPath>
+ <clipPath id="clip12" clipPathUnits="objectBoundingBox">
+ <rect width=".5" height=".5"/>
+ </clipPath>
+ <clipPath id="clip13" clip-path="url(#clip12)">
+ <circle cx="100" cy="470" r="150"/>
+ </clipPath>
+ <clipPath id="clip14">
+ <use xlink:href="#clip1"/>
+ </clipPath>
+ <clipPath id="clip15" clip-path="url(#clip14)">
+ <text x="140" y="500" font-size="100px">CLIP</text>
+ </clipPath>
+ </defs>
+
+ <rect width="100%" height="100%" fill="lime" />
+ <!-- clip path where an object is itself clipped -->
+ <rect x="20" y="20" width="100" height="100" fill="red" clip-path="url(#clip2)" />
+
+ <!-- clip path referencing another clip-path -->
+ <rect x="140" y="20" width="100" height="100" fill="red" clip-path="url(#clip4)" />
+
+ <!-- clip paths where object has complex clipping -->
+ <rect x="20" y="140" width="100" height="100" fill="red" />
+ <rect x="20" y="140" width="100" height="100" fill="lime" clip-path="url(#clip6)" />
+
+ <rect x="140" y="140" width="100" height="100" fill="red" clip-path="url(#clip8)" />
+
+ <rect x="20" y="260" width="100" height="100" fill="red" clip-path="url(#clip10)" />
+
+ <rect x="140" y="260" width="100" height="100" fill="red" clip-path="url(#clip12)" />
+
+ <!-- clip paths with different clipPathUnits -->
+ <rect x="20" y="400" height="300" width="300" fill="red" clip-path="url(#clip13)" />
+ <rect x="20" y="400" width="100" height="100" fill="lime" />
+
+ <!-- text clipping -->
+ <rect x="140" y="400" height="300" width="300" fill="red" clip-path="url(#clip15)" />
+</svg>
diff --git a/layout/reftests/svg/clipPath-and-mask-on-outflowElement-01a.html b/layout/reftests/svg/clipPath-and-mask-on-outflowElement-01a.html
new file mode 100644
index 0000000000..a2cf78f305
--- /dev/null
+++ b/layout/reftests/svg/clipPath-and-mask-on-outflowElement-01a.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+<style type="text/css">
+ #outer {
+ width: 100px;
+ height: 100px;
+ overflow: hidden;
+ }
+
+ #clipped {
+ mask: url(#myMask);
+ clip-path: url(#myClip);
+ width: 300px;
+ height: 300px;
+ }
+
+ #absolutePosition {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 400px;
+ height: 400px;
+ background-color: blue;
+ }
+</style>
+
+<body style="margin: 0px;">
+ <div id="outer">
+ <div id="clipped">
+ <div id="absolutePosition">
+ <!-- This should only be clipped by the mask, not by the 100x100
+ overflow:hidden clip. -->
+ </div>
+ </div>
+ </div>
+ <svg height="0">
+ <defs>
+ <mask id="myMask" x="0" y="0" width="400" height="400" maskUnits="userSpaceOnUse">
+ <rect x="0" y="0" width="100" height="100" style="stroke:none; fill: #ffffff"/>
+ <rect x="100" y="100" width="100" height="100" style="stroke:none; fill: #ffffff"/>
+ <rect x="200" y="200" width="100" height="100" style="stroke:none; fill: #ffffff"/>
+ </mask>
+ <clipPath id="myClip">
+ <rect x="0" y="0" width="100" height="100"/>
+ <rect x="100" y="100" width="100" height="100"/>
+ <rect x="200" y="200" width="100" height="100"/>
+ </clipPath>
+ </defs>
+ </svg>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/svg/clipPath-and-mask-on-outflowElement-01b.html b/layout/reftests/svg/clipPath-and-mask-on-outflowElement-01b.html
new file mode 100644
index 0000000000..c3a71e7f7c
--- /dev/null
+++ b/layout/reftests/svg/clipPath-and-mask-on-outflowElement-01b.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+<style type="text/css">
+ #outer {
+ width: 100px;
+ height: 100px;
+ overflow: hidden;
+ }
+
+ #clipped {
+ mask: url(#myMask);
+ clip-path: url(#myClip);
+ }
+
+ #absolutePosition {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 400px;
+ height: 400px;
+ background-color: blue;
+ }
+</style>
+
+<body style="margin: 0px;">
+ <div id="outer">
+ <div id="clipped">
+ <div id="absolutePosition">
+ <!-- This should only be clipped by the mask, not by the 100x100
+ overflow:hidden clip. -->
+ </div>
+ </div>
+ </div>
+ <svg height="0">
+ <defs>
+ <mask id="myMask" x="0" y="0" width="400" height="400" maskUnits="userSpaceOnUse">
+ <rect x="0" y="0" width="100" height="100" style="stroke:none; fill: #ffffff"/>
+ <rect x="100" y="100" width="100" height="100" style="stroke:none; fill: #ffffff"/>
+ <rect x="200" y="200" width="100" height="100" style="stroke:none; fill: #ffffff"/>
+ </mask>
+ <clipPath id="myClip">
+ <rect x="0" y="0" width="100" height="100"/>
+ <rect x="100" y="100" width="100" height="100"/>
+ <rect x="200" y="200" width="100" height="100"/>
+ <!-- The forth rect should be clipped out -->
+ <rect x="300" y="300" width="100" height="100"/>
+ </clipPath>
+ </defs>
+ </svg>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/svg/clipPath-and-shape-rendering-01-ref.svg b/layout/reftests/svg/clipPath-and-shape-rendering-01-ref.svg
new file mode 100644
index 0000000000..93e57bb385
--- /dev/null
+++ b/layout/reftests/svg/clipPath-and-shape-rendering-01-ref.svg
@@ -0,0 +1,22 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=489718 -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Test that shape-rendering hint affects clipping</title>
+ <desc>
+ By not setting explict shape-rendering attribute, this test tells browsers to
+ apply anti-aliasing to all shape's rendering. And this test checks the hint
+ correctly affects clip-path, too.
+ </desc>
+ <defs>
+ <g id="circles">
+ <circle cx="50" cy="50" r="50" fill="lime"/>
+ <circle cx="150" cy="50" r="50" fill="lime"/>
+ </g>
+ </defs>
+
+ <use xlink:href="#circles"/>
+</svg>
+
diff --git a/layout/reftests/svg/clipPath-and-shape-rendering-01.svg b/layout/reftests/svg/clipPath-and-shape-rendering-01.svg
new file mode 100644
index 0000000000..61ef52cce3
--- /dev/null
+++ b/layout/reftests/svg/clipPath-and-shape-rendering-01.svg
@@ -0,0 +1,24 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=489718 -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Test that shape-rendering hint affects clipping</title>
+ <desc>
+ By not setting explict shape-rendering attribute, this test tells browsers to
+ apply anti-aliasing to all shape's rendering. And this test checks the hint
+ correctly affects clip-path, too.
+ </desc>
+ <defs>
+ <circle id="circle1" cx="50" cy="50" r="50" fill="lime"/>
+ <circle id="circle2" cx="150" cy="50" r="50" fill="lime"/>
+ <clipPath id="clip">
+ <use xlink:href="#circle1"/>
+ <use xlink:href="#circle2"/>
+ </clipPath>
+ </defs>
+
+ <rect width="200" height="100" fill="lime" clip-path="url(#clip)"/>
+</svg>
+
diff --git a/layout/reftests/svg/clipPath-and-transform-01.svg b/layout/reftests/svg/clipPath-and-transform-01.svg
new file mode 100644
index 0000000000..6d128a01f5
--- /dev/null
+++ b/layout/reftests/svg/clipPath-and-transform-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">
+
+ <title>Testcase for clip-path on elements that are transformed</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=806432 -->
+
+ <clipPath id="cp" clipPathUnits="userSpaceOnUse">
+ <!-- Two duplicate rects are used to make us take the non-trivial-clipPath
+ code path when painting this SVG file.
+ -->
+ <rect x="0" y="0" width="100" height="100"/>
+ <rect x="0" y="0" width="100" height="100"/>
+ </clipPath>
+
+ <rect width="100%" height="100%" fill="lime"/>
+ <rect x="10" y="10" width="100" height="100" fill="red"/>
+ <rect width="100" height="100" transform="translate(10,10)" fill="lime" clip-path="url(#cp)"/>
+
+</svg>
diff --git a/layout/reftests/svg/clipPath-and-transform-02.svg b/layout/reftests/svg/clipPath-and-transform-02.svg
new file mode 100644
index 0000000000..c69a013b25
--- /dev/null
+++ b/layout/reftests/svg/clipPath-and-transform-02.svg
@@ -0,0 +1,13 @@
+<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
+ <defs>
+ <clipPath clipPathUnits="objectBoundingBox" id="clipPathMask" transform="scale(0.01 0.005)">
+ <rect width="100" height="100"/>
+ <rect id="r" width="100" height="100" display="none"/>
+ </clipPath>
+ </defs>
+ <rect fill="lime" height="100%" width="100%"/>
+
+ <rect fill="red" x="102" y="102" height="96" width="96"/>
+ <rect transform="translate(100, 100)" clip-path="url(#clipPathMask)" fill="lime" y="-100" height="200" width="100"/>
+</svg>
+
diff --git a/layout/reftests/svg/clipPath-basic-01.svg b/layout/reftests/svg/clipPath-basic-01.svg
new file mode 100644
index 0000000000..5821d1520f
--- /dev/null
+++ b/layout/reftests/svg/clipPath-basic-01.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
+
+ <title>Testcase for basic clipPath</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=377892 -->
+
+ <defs>
+ <clipPath id="clip">
+ <rect width="0%" height="0%"/>
+ </clipPath>
+ </defs>
+
+ <rect width="100%" height="100%" fill="lime"/>
+
+ <rect width="100%" height="100%" fill="red" clip-path="url(#clip)"/>
+
+</svg>
diff --git a/layout/reftests/svg/clipPath-basic-02.svg b/layout/reftests/svg/clipPath-basic-02.svg
new file mode 100644
index 0000000000..401251b410
--- /dev/null
+++ b/layout/reftests/svg/clipPath-basic-02.svg
@@ -0,0 +1,24 @@
+<!--
+ 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 for invalid clipPath</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=547062 -->
+
+ <defs>
+ <clipPath id="clip">
+ <!-- containers are not allowed in clipPath -->
+ <g>
+ <rect width="100%" height="100%" fill="red"/>
+ </g>
+ </clipPath>
+ </defs>
+
+ <rect width="100%" height="100%" fill="lime"/>
+
+ <rect width="100%" height="100%" fill="red" clip-path="url(#clip)"/>
+
+</svg>
diff --git a/layout/reftests/svg/clipPath-basic-03.svg b/layout/reftests/svg/clipPath-basic-03.svg
new file mode 100644
index 0000000000..ab5c9a265e
--- /dev/null
+++ b/layout/reftests/svg/clipPath-basic-03.svg
@@ -0,0 +1,24 @@
+<!--
+ 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" version="1.1">
+
+ <title>Testcase for invalid clipPath</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=547062 -->
+
+ <defs>
+ <rect id="r1" width="100%" height="100%" fill="red"/>
+ <use id="use2" xlink:href="#r1"/>
+ <clipPath id="clip">
+ <!-- use must point directly to text, path or a basic shape -->
+ <use xlink:href="#use2" fill="red" />
+ </clipPath>
+ </defs>
+
+ <rect width="100%" height="100%" fill="lime"/>
+
+ <rect width="100%" height="100%" fill="red" clip-path="url(#clip)"/>
+
+</svg>
diff --git a/layout/reftests/svg/clipPath-basic-04.svg b/layout/reftests/svg/clipPath-basic-04.svg
new file mode 100644
index 0000000000..5353a1081e
--- /dev/null
+++ b/layout/reftests/svg/clipPath-basic-04.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" version="1.1">
+
+ <title>Testcase for clipPath with animateTransform</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=553053 -->
+
+ <defs>
+ <clipPath id="clip">
+ <rect width="100%" height="100%" fill="lime"/>
+ <animateTransform attributeName="transform" type="scale" values="1"/>
+ </clipPath>
+ </defs>
+
+ <rect width="100%" height="100%" fill="red"/>
+
+ <rect width="100%" height="100%" fill="lime" clip-path="url(#clip)"/>
+
+</svg>
diff --git a/layout/reftests/svg/clipPath-basic-05.svg b/layout/reftests/svg/clipPath-basic-05.svg
new file mode 100644
index 0000000000..eb80296440
--- /dev/null
+++ b/layout/reftests/svg/clipPath-basic-05.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" >
+
+ <title>Testcase for clip-path that can't be resolved</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=620144 -->
+
+ <rect width="100%" height="100%" fill="red"/>
+ <rect width="100%" height="100%" fill="lime" clip-path="url(#null)"/>
+</svg>
diff --git a/layout/reftests/svg/clipPath-basic-06.svg b/layout/reftests/svg/clipPath-basic-06.svg
new file mode 100644
index 0000000000..46e268e7da
--- /dev/null
+++ b/layout/reftests/svg/clipPath-basic-06.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">
+
+ <title>Testcase for non-rectilinear clipPath</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=797231 -->
+
+ <clipPath id="cp">
+ <ellipse cx="60" cy="60" rx="60" ry="60"/>
+ </clipPath>
+
+ <rect width="100%" height="100%" fill="lime"/>
+ <circle cx="60" cy="60" r="58" fill="red"/>
+ <rect width="200" height="200" fill="lime" clip-path="url(#cp)"/>
+
+</svg>
+
diff --git a/layout/reftests/svg/clipPath-basic-07.svg b/layout/reftests/svg/clipPath-basic-07.svg
new file mode 100644
index 0000000000..a4d3e4177c
--- /dev/null
+++ b/layout/reftests/svg/clipPath-basic-07.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <defs>
+ <clipPath id="clip">
+ <metadata/>
+ <rect width="100%" height="100%"/>
+ </clipPath>
+ </defs>
+ <rect fill="red" width="100%" height="100%" />
+ <rect fill="lime" clip-path="url(#clip)" width="100%" height="100%" />
+</svg>
diff --git a/layout/reftests/svg/clipPath-basic-08.svg b/layout/reftests/svg/clipPath-basic-08.svg
new file mode 100644
index 0000000000..6b455d68eb
--- /dev/null
+++ b/layout/reftests/svg/clipPath-basic-08.svg
@@ -0,0 +1,22 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
+
+ <title>Testcase for basic clipPath</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=1501057 -->
+
+ <defs>
+ <clipPath id="clip1">
+ <rect width="100%" height="100%" visibility="hidden"/>
+ </clipPath>
+ <clipPath id="clip2">
+ <rect width="100%" height="100%" visibility="hidden"/>
+ <rect width="100%" height="100%" visibility="hidden"/>
+ </clipPath>
+ </defs>
+
+ <rect width="100%" height="100%" fill="lime"/>
+
+ <rect width="100%" height="50%" fill="red" clip-path="url(#clip1)"/>
+ <rect width="100%" y="50%" height="50%" fill="red" clip-path="url(#clip2)"/>
+
+</svg>
diff --git a/layout/reftests/svg/clipPath-basic-shape-transform-ref.html b/layout/reftests/svg/clipPath-basic-shape-transform-ref.html
new file mode 100644
index 0000000000..23ab7faba0
--- /dev/null
+++ b/layout/reftests/svg/clipPath-basic-shape-transform-ref.html
@@ -0,0 +1,6 @@
+<svg style="width: 400px; height: 400px">
+ <mask id="m1">
+ <rect x="100" y="90" width="200" height="200" fill="blue" style="clip-path: inset(50px 50px)"></rect>
+ </mask>
+ <rect width="400" height="400" mask="url(#m1)"></rect>
+</svg>
diff --git a/layout/reftests/svg/clipPath-basic-shape-transform.html b/layout/reftests/svg/clipPath-basic-shape-transform.html
new file mode 100644
index 0000000000..1ee187fef1
--- /dev/null
+++ b/layout/reftests/svg/clipPath-basic-shape-transform.html
@@ -0,0 +1,8 @@
+<svg style="width: 400px; height: 400px">
+ <mask id="m1">
+ <g transform="translate(100,90)">
+ <rect width="200" height="200" fill="blue" style="clip-path: inset(50px 50px)"></rect>
+ </g>
+ </mask>
+ <rect width="400" height="400" mask="url(#m1)"></rect>
+</svg>
diff --git a/layout/reftests/svg/clipPath-css-transform-ref.html b/layout/reftests/svg/clipPath-css-transform-ref.html
new file mode 100644
index 0000000000..d4038e92ca
--- /dev/null
+++ b/layout/reftests/svg/clipPath-css-transform-ref.html
@@ -0,0 +1,18 @@
+<svg style="width: 400px; height: 400px; border: 1px solid red">
+ <defs>
+ <clipPath id="clipPath1">
+ <rect id="rec1" x="15px" y="15px" width="40px" height="40px" />
+ <rect id="rec2" width="20px" height="10px" />
+ </clipPath>
+ <clipPath id="clipPath2">
+ <rect id="rec3" x="100px" y="100px" width="40px" height="40px" />
+ </clipPath>
+ <clipPath id="clipPath3" transform="translate(100,100)">
+ <rect id="rec4" x="200px" y="200px" width="40px" height="40px" />
+ </clipPath>
+ </defs>
+
+ <circle cx="25px" cy="25px" r="20px" fill="skyblue" clip-path="url(#clipPath1)" />
+ <circle cx="125px" cy="125px" r="20px" fill="skyblue" clip-path="url(#clipPath2)" />
+ <circle cx="225px" cy="225px" r="20px" fill="skyblue" clip-path="url(#clipPath3)" />
+</svg>
diff --git a/layout/reftests/svg/clipPath-css-transform.html b/layout/reftests/svg/clipPath-css-transform.html
new file mode 100644
index 0000000000..19c5cd1711
--- /dev/null
+++ b/layout/reftests/svg/clipPath-css-transform.html
@@ -0,0 +1,29 @@
+<style>
+#rec1 {
+ transform: translate(15px,15px) scale(2,4);
+}
+#rec3 {
+ transform: translate(100px,100px) scale(2,4);
+}
+#clipPath3 {
+ transform: translate(100px,100px);
+}
+</style>
+<svg style="width: 400px; height: 400px; border: 1px solid red">
+ <defs>
+ <clipPath id="clipPath1">
+ <rect id="rec1" width="20px" height="10px" />
+ <rect id="rec2" width="20px" height="10px" />
+ </clipPath>
+ <clipPath id="clipPath2">
+ <rect id="rec3" width="20px" height="10px" />
+ </clipPath>
+ <clipPath id="clipPath3">
+ <rect id="rec4" x="200px" y="200px" width="40px" height="40px" />
+ </clipPath>
+ </defs>
+
+ <circle cx="25px" cy="25px" r="20px" fill="skyblue" clip-path="url(#clipPath1)" />
+ <circle cx="125px" cy="125px" r="20px" fill="skyblue" clip-path="url(#clipPath2)" />
+ <circle cx="225px" cy="225px" r="20px" fill="skyblue" clip-path="url(#clipPath3)" />
+</svg>
diff --git a/layout/reftests/svg/clipPath-fill-box-ref.html b/layout/reftests/svg/clipPath-fill-box-ref.html
new file mode 100644
index 0000000000..0e6e5ee23f
--- /dev/null
+++ b/layout/reftests/svg/clipPath-fill-box-ref.html
@@ -0,0 +1,3 @@
+<svg style="width: 400px; height: 400px">
+ <rect width="200" height="200" fill="purple"></rect>
+</svg>
diff --git a/layout/reftests/svg/clipPath-fill-box.html b/layout/reftests/svg/clipPath-fill-box.html
new file mode 100644
index 0000000000..1e4fdfa4a4
--- /dev/null
+++ b/layout/reftests/svg/clipPath-fill-box.html
@@ -0,0 +1,3 @@
+<svg style="width: 400px; height: 400px">
+ <rect width="200" height="200" fill="purple" style="clip-path: fill-box"></rect>
+</svg>
diff --git a/layout/reftests/svg/clipPath-on-outflowElement-01-ref.html b/layout/reftests/svg/clipPath-on-outflowElement-01-ref.html
new file mode 100644
index 0000000000..8a94dc64c3
--- /dev/null
+++ b/layout/reftests/svg/clipPath-on-outflowElement-01-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+<body style="margin: 0px;">
+ <svg x="0" y="0" height="300" width="300">
+ <rect x="0" y="0" width="100" height="100" style="stroke:none; fill: blue"/>
+ <rect x="100" y="100" width="100" height="100" style="stroke:none; fill: blue"/>
+ <rect x="200" y="200" width="100" height="100" style="stroke:none; fill: blue"/>
+ </svg>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/svg/clipPath-on-outflowElement-01a.html b/layout/reftests/svg/clipPath-on-outflowElement-01a.html
new file mode 100644
index 0000000000..bd69f85045
--- /dev/null
+++ b/layout/reftests/svg/clipPath-on-outflowElement-01a.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+<style type="text/css">
+ #outer {
+ width: 100px;
+ height: 100px;
+ overflow: hidden;
+ }
+
+ #clipped {
+ clip-path: url(#myClip);
+ width: 200px;
+ height: 200px;
+ }
+
+ #absolutePosition {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 400px;
+ height: 400px;
+ background-color: blue;
+ }
+</style>
+
+<body style="margin: 0px;">
+ <div id="outer">
+ <div id="clipped">
+ <div id="absolutePosition">
+ <!-- This should only be clipped by the clip-path, not by the 100x100
+ overflow:hidden clip. -->
+ </div>
+ </div>
+ </div>
+ <svg height="0">
+ <defs>
+ <clipPath id="myClip">
+ <rect x="0" y="0" width="100" height="100"/>
+ <rect x="100" y="100" width="100" height="100"/>
+ <rect x="200" y="200" width="100" height="100"/>
+ </clipPath>
+ </defs>
+ </svg>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/svg/clipPath-on-outflowElement-01b.html b/layout/reftests/svg/clipPath-on-outflowElement-01b.html
new file mode 100644
index 0000000000..16a78d61ba
--- /dev/null
+++ b/layout/reftests/svg/clipPath-on-outflowElement-01b.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<style type="text/css">
+ #outer {
+ width: 100px;
+ height: 100px;
+ overflow: hidden;
+ }
+
+ #clipped {
+ clip-path: url(#myClip);
+ }
+
+ #absolutePosition {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 400px;
+ height: 400px;
+ background-color: blue;
+ }
+</style>
+
+<body style="margin: 0px;">
+ <div id="outer">
+ <div id="clipped">
+ <div id="absolutePosition">
+ <!-- This should only be clipped by the clip-path, not by the 100x100
+ overflow:hidden clip. -->
+ </div>
+ </div>
+ </div>
+ <svg height="0">
+ <defs>
+ <clipPath id="myClip">
+ <rect x="0" y="0" width="100" height="100"/>
+ <rect x="100" y="100" width="100" height="100"/>
+ <rect x="200" y="200" width="100" height="100"/>
+ </clipPath>
+ </defs>
+ </svg>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/svg/clipPath-on-outflowElement-02-ref.html b/layout/reftests/svg/clipPath-on-outflowElement-02-ref.html
new file mode 100644
index 0000000000..6029426ee7
--- /dev/null
+++ b/layout/reftests/svg/clipPath-on-outflowElement-02-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+<body style="margin: 0px;">
+ <svg width="200" height="200">
+ <rect x="10" y="10" width="180" height="180" fill="blue" opacity="0.5"/>
+ </svg>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/svg/clipPath-on-outflowElement-02a.html b/layout/reftests/svg/clipPath-on-outflowElement-02a.html
new file mode 100644
index 0000000000..9004e34204
--- /dev/null
+++ b/layout/reftests/svg/clipPath-on-outflowElement-02a.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<style type="text/css">
+ #outer {
+ width: 100px;
+ height: 100px;
+ overflow: hidden;
+ }
+
+ #clipped {
+ clip-path: inset(10px 10px 10px 10px);
+ opacity: 0.5;
+ width: 200px;
+ height: 200px;
+ }
+
+ #absolutePosition {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 400px;
+ height: 400px;
+ background-color: blue;
+ }
+</style>
+
+<body style="margin: 0px;">
+ <div id="outer">
+ <div id="clipped">
+ <div id="absolutePosition">
+ <!-- This should only be clipped by the clip-path, not by the 100x100
+ overflow:hidden clip. -->
+ </div>
+ </div>
+ </div>
+ <svg height="0">
+ <defs>
+ <clipPath id="myClip">
+ <rect x="0" y="0" width="100" height="100"/>
+ <rect x="100" y="100" width="100" height="100"/>
+ <rect x="200" y="200" width="100" height="100"/>
+ </clipPath>
+ </defs>
+ </svg>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/svg/clipPath-on-outflowElement-02b.html b/layout/reftests/svg/clipPath-on-outflowElement-02b.html
new file mode 100644
index 0000000000..ecf303a89a
--- /dev/null
+++ b/layout/reftests/svg/clipPath-on-outflowElement-02b.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+<style type="text/css">
+ #outer {
+ width: 100px;
+ height: 100px;
+ overflow: hidden;
+ }
+
+ #clipped {
+ clip-path: inset(10px 10px 10px 10px);
+ width: 200px;
+ height: 200px;
+ }
+
+ #absolutePosition {
+ position:absolute;
+ top: 0;
+ left: 0;
+ width: 400px;
+ height: 400px;
+ background-color: rgba(0,0,255,0.5);
+ }
+</style>
+
+<body style="margin: 0px;">
+ <div id="outer">
+ <div id="clipped">
+ <div id="absolutePosition">
+ <!-- This should only be clipped by the clip-path, not by the 100x100
+ overflow:hidden clip. -->
+ </div>
+ </div>
+ </div>
+ <svg height="0">
+ <defs>
+ <clipPath id="myClip">
+ <rect x="0" y="0" width="100" height="100"/>
+ <rect x="100" y="100" width="100" height="100"/>
+ <rect x="200" y="200" width="100" height="100"/>
+ </clipPath>
+ </defs>
+ </svg>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/svg/clipPath-on-thin-object.svg b/layout/reftests/svg/clipPath-on-thin-object.svg
new file mode 100644
index 0000000000..93598f0abb
--- /dev/null
+++ b/layout/reftests/svg/clipPath-on-thin-object.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
+ <defs>
+ <clipPath clipPathUnits="objectBoundingBox" id="myPath">
+ <rect x="0" y="0" height="1" width="1"/>
+ </clipPath>
+ </defs>
+
+ <!-- You should see a thin horizontal light lime line. -->
+ <path d="M0 99.6 L500 99.6 L500 100.3 L0 100.3 Z" fill="lime" clip-path="url(#myPath)"/>
+ <!-- You should see a vertical light lime line. -->
+ <path d="M199.9 0 L199.9 500 L200.4 500 L200.4 0 Z" fill="lime" clip-path="url(#myPath)"/>
+</svg>
diff --git a/layout/reftests/svg/clipPath-polygon-01.svg b/layout/reftests/svg/clipPath-polygon-01.svg
new file mode 100644
index 0000000000..ef97ea7d09
--- /dev/null
+++ b/layout/reftests/svg/clipPath-polygon-01.svg
@@ -0,0 +1,51 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+
+ <title>Testcase for CSS polygon clipPath</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=1246741 -->
+
+ <rect width="100%" height="100%" fill="lime"/>
+
+ <!-- test the clip is not too big (or ignored altogether) -->
+ <rect width="100%" height="100%" fill="red"
+ clip-path="polygon(100px 100px, 200px 100px, 200px 200px, 100px 200px)"/>
+ <rect x="98" y="98" width="105" height="105" fill="lime"/>
+
+ <!-- test the clip does not simply make the element not render -->
+ <rect x="300" y="100" width="100" height="100" fill="red"/>
+ <rect x="280" y="80" width="150" height="150" fill="lime"
+ clip-path="polygon(20px 20px, 120px 20px, 120px 120px, 20px 120px)"/>
+
+ <!-- percentage values -->
+ <svg x="100" y="300" width="100" height="100">
+ <rect width="100%" height="100%" fill="red"
+ clip-path="polygon(0 0, 50% 0, 50% 50%, 0 50%)"/>
+ <rect width="55" height="55" fill="lime"/>
+ </svg>
+
+ <!-- mixed absolute and percentage values -->
+ <svg x="300" y="300" width="100" height="100">
+ <rect width="100%" height="100%" fill="red"
+ clip-path="polygon(0 0, 50% 0, 50px 50%, 0 50px)"/>
+ <rect width="55" height="55" fill="lime"/>
+ </svg>
+
+ <!-- mixed other units -->
+ <svg x="500" y="300" width="100" height="100">
+ <rect width="100%" height="100%" fill="red"
+ clip-path="polygon(0 0, 5em 0, 5em 10%, 0 10px)"/>
+ <rect width="5em" height="10%" fill="lime"/>
+ </svg>
+
+ <!-- check fill-rule and clip-rule are ignored for polygon clip-path -->
+ <svg x="500" y="100" width="100" height="100" fill-rule="evenodd" clip-rule="evenodd">
+ <rect width="100%" height="100%" fill="red"
+ clip-path="polygon(0 0, 50px 0, 50px 50px, 0 50px, 0 0, 50px 0, 50px 50px, 0 50px, 0 0)"/>
+ <rect width="55" height="55" fill="lime"/>
+ </svg>
+
+</svg>
diff --git a/layout/reftests/svg/clipPath-polygon-elementFromPoint-01.svg b/layout/reftests/svg/clipPath-polygon-elementFromPoint-01.svg
new file mode 100644
index 0000000000..fb2ebf37ce
--- /dev/null
+++ b/layout/reftests/svg/clipPath-polygon-elementFromPoint-01.svg
@@ -0,0 +1,43 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg onload="testElementFromPoint();" xmlns="http://www.w3.org/2000/svg">
+
+ <title>Testcase for CSS polygon clipPath</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=1246741 -->
+
+ <rect id="out" width="100%" height="100%"/>
+
+ <!-- test elementFromPoint can get the element using clip-path -->
+ <rect id="in" x="100" y="100" width="100" height="100"
+ clip-path="polygon(0 0, 50px 0, 50px 50px, 0 50px)"/>
+ <script>
+ function testElementFromPoint() {
+ let inCount = 0, outCount = 0, inElem, outElem;
+ document.getElementById("in").style.fill = "red";
+ document.getElementById("out").style.fill = "blue";
+
+ inElem = document.elementFromPoint(100, 100);
+ if (inElem.style.fill == "red") { ++inCount; }
+ inElem = document.elementFromPoint(149, 100);
+ if (inElem.style.fill == "red") { ++inCount; }
+ inElem = document.elementFromPoint(149, 149);
+ if (inElem.style.fill == "red") { ++inCount; }
+ inElem = document.elementFromPoint(100, 149);
+ if (inElem.style.fill == "red") { ++inCount; }
+ if (inCount == 4) { document.getElementById("in").style.fill = "lime"; }
+
+ outElem = document.elementFromPoint(99, 100);
+ if (outElem.style.fill == "blue") { ++outCount; }
+ outElem = document.elementFromPoint(150, 99);
+ if (outElem.style.fill == "blue") { ++outCount; }
+ outElem = document.elementFromPoint(151, 150);
+ if (outElem.style.fill == "blue") { ++outCount; }
+ outElem = document.elementFromPoint(100, 151);
+ if (outElem.style.fill == "blue") { ++outCount; }
+ if (outCount == 4) { document.getElementById("out").style.fill = "lime"; }
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/clipPath-winding-01.svg b/layout/reftests/svg/clipPath-winding-01.svg
new file mode 100644
index 0000000000..6b7b3d29df
--- /dev/null
+++ b/layout/reftests/svg/clipPath-winding-01.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
+
+ <title>Testcase for clipPath with evenodd winding</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=525363 -->
+
+ <defs>
+ <clipPath id="clip">
+ <path clip-rule="evenodd" d="M100,100 l 50,0 0,50 -50,0 0,-50 50,0 0,50 -50,0 0,-50z"/>
+ </clipPath>
+ </defs>
+
+ <rect width="100%" height="100%" fill="lime"/>
+
+ <rect width="100%" height="100%" fill="red" clip-path="url(#clip)"/>
+
+</svg>
diff --git a/layout/reftests/svg/comments-in-pres-attrs.svg b/layout/reftests/svg/comments-in-pres-attrs.svg
new file mode 100644
index 0000000000..fbb88a2bdd
--- /dev/null
+++ b/layout/reftests/svg/comments-in-pres-attrs.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>Test for whether comments are allowed in SVG presentation attributes</title>
+ <rect width="100%" height="100%" fill="/* comment */lime/* also comment */"/>
+</svg>
diff --git a/layout/reftests/svg/conditions-01.svg b/layout/reftests/svg/conditions-01.svg
new file mode 100644
index 0000000000..87bed97fe2
--- /dev/null
+++ b/layout/reftests/svg/conditions-01.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
+ <title>Testcase for conditions</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=409383 -->
+
+ <rect width="100%" height="100%" fill="lime"/>
+
+ <rect systemLanguage="foo" x="50" y="100" width="50" height="50" fill="red"/>
+
+ <rect x="200" y="100" width="50" height="50" fill="red"/>
+ <rect requiredFeatures="http://www.w3.org/TR/SVG11/feature#Gradient" x="200" y="100" width="50" height="50" fill="lime"/>
+
+ <rect requiredExtensions="foo" x="200" y="200" width="50" height="50" fill="red"/>
+</svg>
diff --git a/layout/reftests/svg/conditions-02.svg b/layout/reftests/svg/conditions-02.svg
new file mode 100644
index 0000000000..f5ba400829
--- /dev/null
+++ b/layout/reftests/svg/conditions-02.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+ <title>Test that paint servers inside a failing conditional attribute subtree work</title>
+ <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=614265 -->
+
+ <g requiredExtensions="http://example.org/hypothetical">
+ <linearGradient id="g">
+ <stop stop-color="lime" offset="0"/>
+ <stop stop-color="lime" offset="1"/>
+ </linearGradient>
+ </g>
+ <rect width="100%" height="100%" fill="url(#g) red"/>
+</svg>
diff --git a/layout/reftests/svg/conditions-03.svg b/layout/reftests/svg/conditions-03.svg
new file mode 100644
index 0000000000..9abb90cf5a
--- /dev/null
+++ b/layout/reftests/svg/conditions-03.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0"?>
+<!--
+ 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>Test that 'use'ing elements inside a failing conditional attribute subtree works</title>
+ <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=614265 -->
+
+ <g requiredExtensions="http://example.org/hypothetical">
+ <rect id="r" width="100%" height="100%" fill="lime"/>
+ </g>
+ <rect width="100%" height="100%" fill="red"/>
+ <use xlink:href="#r"/>
+</svg>
diff --git a/layout/reftests/svg/conditions-04.svg b/layout/reftests/svg/conditions-04.svg
new file mode 100644
index 0000000000..31d963b45f
--- /dev/null
+++ b/layout/reftests/svg/conditions-04.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0"?>
+<!--
+ 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>Test that 'use'ing an element with a failing conditional fails</title>
+ <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=614265 -->
+
+ <rect id="r1" width="100%" height="100%" fill="lime"/>
+ <rect systemLanguage="x" id="r2" width="100%" height="100%" fill="red"/>
+ <use xlink:href="#r1"/>
+ <use xlink:href="#r2"/>
+</svg>
diff --git a/layout/reftests/svg/conditions-05.svg b/layout/reftests/svg/conditions-05.svg
new file mode 100644
index 0000000000..3a235a85e7
--- /dev/null
+++ b/layout/reftests/svg/conditions-05.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" systemLanguage="x">
+ <title>Test that conditional processing attributes on outer 'svg' elements are honored</title>
+ <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=615146 -->
+
+ <rect width="100%" height="100%" fill="red"/>
+</svg>
diff --git a/layout/reftests/svg/conditions-07.svg b/layout/reftests/svg/conditions-07.svg
new file mode 100644
index 0000000000..15b5ff0dbd
--- /dev/null
+++ b/layout/reftests/svg/conditions-07.svg
@@ -0,0 +1,40 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg id="svg-root" width="100%" height="100%"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink" onload="runtest()">
+ <title>Test conditional processing DOM interface for foreignObject</title>
+ <defs>
+ <script>
+ function runtest() {
+ try {
+ var f1 = document.getElementById("f1");
+ var i0 = f1.systemLanguage.getItem(0);
+
+ if(i0 != "x") {
+ return;
+ }
+ f1.removeAttribute("systemLanguage");
+
+ } catch(e) {
+ var f = document.getElementById("fail");
+ f.setAttribute("fill", "red");
+ }
+ }
+ </script>
+ </defs>
+
+ <rect width="100%" height="100%" fill="lime"/>
+ <!-- background images -->
+ <rect x="100" y="100" width="100" height="100" fill="red"/>
+
+ <!-- tests -->
+ <foreignObject id="f1" x="100" y="100" width="100" height="100" systemLanguage="x">
+ <svg>
+ <rect width="100%" height="100%" fill="lime"/>
+ </svg>
+ </foreignObject>
+ <rect id="fail" width="100%" height="100%" fill="none"/>
+</svg>
diff --git a/layout/reftests/svg/conditions-08-ref.svg b/layout/reftests/svg/conditions-08-ref.svg
new file mode 100644
index 0000000000..50406bddb9
--- /dev/null
+++ b/layout/reftests/svg/conditions-08-ref.svg
@@ -0,0 +1,41 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+ <defs>
+ <clipPath id="c1">
+ <circle cx="50" cy="50" r="50"/>
+ </clipPath>
+ <mask id="m1">
+ <circle cx="50" cy="50" r="50" fill="#888"/>
+ </mask>
+ <filter id="f1">
+ <feColorMatrix type="hueRotate" values="60"/>
+ </filter>
+ <linearGradient id="l1">
+ <stop stop-color="red"/>
+ <stop offset="1" stop-color="yellow"/>
+ </linearGradient>
+ <pattern id="p1" viewBox="0 0 10 10" width="25%" height="25%">
+ <circle cx="5" cy="5" r="5" fill="red"/>
+ </pattern>
+ </defs>
+ <g fill="blue">
+ <g transform="translate(200,50)">
+ <rect width="100" height="100" clip-path="url(#c1)"/>
+ </g>
+ <g transform="translate(200,160)">
+ <rect width="100" height="100" mask="url(#m1)"/>
+ </g>
+ <g transform="translate(200,270)">
+ <rect width="100" height="100" filter="url(#f1)"/>
+ </g>
+ <g transform="translate(200,380)">
+ <rect width="100" height="100" fill="url(#l1)"/>
+ </g>
+ <g transform="translate(200,490)">
+ <rect width="100" height="100" fill="url(#p1)"/>
+ </g>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/conditions-08.svg b/layout/reftests/svg/conditions-08.svg
new file mode 100644
index 0000000000..573533d00f
--- /dev/null
+++ b/layout/reftests/svg/conditions-08.svg
@@ -0,0 +1,42 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+ <title>Test that clipPath, mask, filter, gradients and patterns ignore failing conditionals</title>
+ <defs>
+ <clipPath id="c1" systemLanguage="xx">
+ <circle cx="50" cy="50" r="50"/>
+ </clipPath>
+ <mask id="m1" systemLanguage="xx">
+ <circle cx="50" cy="50" r="50" fill="#888"/>
+ </mask>
+ <filter id="f1" systemLanguage="xx">
+ <feColorMatrix type="hueRotate" values="60"/>
+ </filter>
+ <linearGradient id="l1" systemLanguage="xx">
+ <stop stop-color="red"/>
+ <stop offset="1" stop-color="yellow"/>
+ </linearGradient>
+ <pattern id="p1" viewBox="0 0 10 10" width="25%" height="25%" systemLanguage="xx">
+ <circle cx="5" cy="5" r="5" fill="red"/>
+ </pattern>
+ </defs>
+ <g fill="blue">
+ <g transform="translate(200,50)">
+ <rect width="100" height="100" clip-path="url(#c1)"/>
+ </g>
+ <g transform="translate(200,160)">
+ <rect width="100" height="100" mask="url(#m1)"/>
+ </g>
+ <g transform="translate(200,270)">
+ <rect width="100" height="100" filter="url(#f1)"/>
+ </g>
+ <g transform="translate(200,380)">
+ <rect width="100" height="100" fill="url(#l1)"/>
+ </g>
+ <g transform="translate(200,490)">
+ <rect width="100" height="100" fill="url(#p1)"/>
+ </g>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/conditions-09-ref.svg b/layout/reftests/svg/conditions-09-ref.svg
new file mode 100644
index 0000000000..a6995f19c2
--- /dev/null
+++ b/layout/reftests/svg/conditions-09-ref.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="100">
+ <text x="10" y="20">
+ <tspan fill="green">This text should display.</tspan>
+ </text>
+</svg>
diff --git a/layout/reftests/svg/conditions-09.svg b/layout/reftests/svg/conditions-09.svg
new file mode 100644
index 0000000000..a5959b808b
--- /dev/null
+++ b/layout/reftests/svg/conditions-09.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="100">
+ <text x="10" y="20">
+ <tspan systemLanguage="xx" fill="red">This text shouldn't display.</tspan>
+ <tspan fill="green">This text should display.</tspan>
+ </text>
+</svg>
diff --git a/layout/reftests/svg/css-transform-svg-ref.html b/layout/reftests/svg/css-transform-svg-ref.html
new file mode 100644
index 0000000000..6167442e74
--- /dev/null
+++ b/layout/reftests/svg/css-transform-svg-ref.html
@@ -0,0 +1,10 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<style>
+</style>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+ <rect id="a" x="0.49" y="0.51" width="2.5" height="2.5"/>
+ <rect id="b" x="3.5" y="3.5" width="2.5" height="2.5"/>
+</svg>
diff --git a/layout/reftests/svg/css-transform-svg.html b/layout/reftests/svg/css-transform-svg.html
new file mode 100644
index 0000000000..c1c63a8397
--- /dev/null
+++ b/layout/reftests/svg/css-transform-svg.html
@@ -0,0 +1,13 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<style>
+#a {
+ transform: scaleY(1);
+}
+</style>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+ <rect id="a" x="0.49" y="0.51" width="2.5" height="2.5"/>
+ <rect id="b" x="3.5" y="3.5" width="2.5" height="2.5"/>
+</svg>
diff --git a/layout/reftests/svg/current-translate-01.svg b/layout/reftests/svg/current-translate-01.svg
new file mode 100644
index 0000000000..27e7752624
--- /dev/null
+++ b/layout/reftests/svg/current-translate-01.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <script>
+ SVGPoint.prototype.setXY = function(c,d){this.x=c;this.y=d}
+ document.documentElement.currentTranslate.setXY(200, 200);
+ </script>
+ <rect width="100%" height="100%" fill="red"/>
+ <rect x="-200" y="-200" width="100%" height="100%" fill="lime"/>
+</svg>
diff --git a/layout/reftests/svg/current-translate-02.svg b/layout/reftests/svg/current-translate-02.svg
new file mode 100644
index 0000000000..8e272138e0
--- /dev/null
+++ b/layout/reftests/svg/current-translate-02.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <script>
+ onload = function() {
+ document.documentElement.currentTranslate.x = 200;
+ document.documentElement.currentTranslate.y = 200;
+ };
+ </script>
+ <rect width="100%" height="100%" fill="red"/>
+ <rect x="-200" y="-200" width="100%" height="100%" fill="lime"/>
+</svg>
diff --git a/layout/reftests/svg/currentColor-01.svg b/layout/reftests/svg/currentColor-01.svg
new file mode 100644
index 0000000000..503f79ebfa
--- /dev/null
+++ b/layout/reftests/svg/currentColor-01.svg
@@ -0,0 +1,14 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" >
+
+ <title>Testcase for currentColor</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=414550 -->
+
+ <g style="color:lime">
+ <rect x="0%" y="0%" width="100%" height="100%" fill="currentColor"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/currentColor-02.svg b/layout/reftests/svg/currentColor-02.svg
new file mode 100644
index 0000000000..23d387343b
--- /dev/null
+++ b/layout/reftests/svg/currentColor-02.svg
@@ -0,0 +1,14 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" >
+
+ <title>Testcase for currentColor</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=414550 -->
+
+ <g style="color:lime">
+ <rect x="0%" y="0%" width="100%" height="100%" style="fill:currentColor"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/currentColor-03.svg b/layout/reftests/svg/currentColor-03.svg
new file mode 100644
index 0000000000..ea3a93aee7
--- /dev/null
+++ b/layout/reftests/svg/currentColor-03.svg
@@ -0,0 +1,16 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" >
+
+ <title>Testcase for currentColor</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=414550 -->
+
+ <style type="text/css"> rect { fill: currentColor; } </style>
+
+ <g style="color:lime">
+ <rect x="0%" y="0%" width="100%" height="100%"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/currentColor-override-flood.svg b/layout/reftests/svg/currentColor-override-flood.svg
new file mode 100644
index 0000000000..2c6d9788f8
--- /dev/null
+++ b/layout/reftests/svg/currentColor-override-flood.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <defs>
+ <filter id="floodFilter" filterUnits="userSpaceOnUse" style="color:red; flood-color:currentColor">
+ <feFlood x="0" y="0" width="100%" height="100%" style="color:lime;"
+ flood-color="inherit" flood-opacity="1"
+ />
+ </filter>
+ </defs>
+ <use style="filter: url(#floodFilter);"/>
+</svg>
diff --git a/layout/reftests/svg/currentColor-override-lighting-ref.svg b/layout/reftests/svg/currentColor-override-lighting-ref.svg
new file mode 100644
index 0000000000..a9fdd2d4eb
--- /dev/null
+++ b/layout/reftests/svg/currentColor-override-lighting-ref.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <!-- the light source is a fePointLight element -->
+ <filter id="lightMe1">
+ <feDiffuseLighting
+ in="SourceGraphic"
+ result="light"
+ lighting-color="lime">
+ <fePointLight x="0" y="0" z="100" />
+ </feDiffuseLighting>
+
+ <feComposite in="SourceGraphic" in2="light" operator="arithmetic" k1="1" k2="0" k3="0" k4="0"/>
+ </filter>
+ <rect width="100%" height="100%" fill="white" filter="url(#lightMe1)" />
+</svg>
diff --git a/layout/reftests/svg/currentColor-override-lighting.svg b/layout/reftests/svg/currentColor-override-lighting.svg
new file mode 100644
index 0000000000..bf91e809f0
--- /dev/null
+++ b/layout/reftests/svg/currentColor-override-lighting.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <!-- the light source is a fePointLight element -->
+ <filter id="lightMe1" style="color: red" lighting-color="currentColor">
+ <feDiffuseLighting
+ in="SourceGraphic"
+ result="light"
+ style="color: lime;"
+ lighting-color="inherit">
+ <fePointLight x="0" y="0" z="100" />
+ </feDiffuseLighting>
+
+ <feComposite in="SourceGraphic" in2="light" operator="arithmetic" k1="1" k2="0" k3="0" k4="0"/>
+ </filter>
+ <rect width="100%" height="100%" fill="white" filter="url(#lightMe1)" />
+</svg>
diff --git a/layout/reftests/svg/currentColor-override-stop.svg b/layout/reftests/svg/currentColor-override-stop.svg
new file mode 100644
index 0000000000..964dabe2c9
--- /dev/null
+++ b/layout/reftests/svg/currentColor-override-stop.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <defs>
+ <linearGradient id="gradient" color="red" stop-color="currentColor">
+ <stop offset="0" style="color:lime;" stop-color="inherit" />
+ <stop offset="1" stop-color="lime" />
+ </linearGradient>
+ </defs>
+ <rect width="100%" height="100%" fill="url(#gradient)" />
+</svg>
diff --git a/layout/reftests/svg/data-uri-with-filter-01-ref.svg b/layout/reftests/svg/data-uri-with-filter-01-ref.svg
new file mode 100644
index 0000000000..d808930c34
--- /dev/null
+++ b/layout/reftests/svg/data-uri-with-filter-01-ref.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <defs>
+ <filter id="f1" filterUnits="objectBoundingBox"
+ primitiveUnits="objectBoundingBox"
+ x="0" y="0" width="1" height="1">
+ <feFlood x="10%" y="10%" width="80%" height="80%"
+ flood-color="#00ff00" flood-opacity="0.5"/>
+ </filter>
+ </defs>
+ <g filter="url(#f1)">
+ <rect x="0" y="0" width="100" height="100" fill="#00ff00" opacity="0"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/data-uri-with-filter-01.xhtml b/layout/reftests/svg/data-uri-with-filter-01.xhtml
new file mode 100644
index 0000000000..78ba90e196
--- /dev/null
+++ b/layout/reftests/svg/data-uri-with-filter-01.xhtml
@@ -0,0 +1,16 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+ <style>
+ body { overflow: hidden; margin: 0px }
+ </style>
+ <title>Testcase for referencing a filter within a data URI</title>
+</head>
+<body>
+ <embed src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3Cfilter%20id%3D%22f1%22%20filterUnits%3D%22objectBoundingBox%22%0A%20%20%20%20%20%20%20%20%20%20%20%20primitiveUnits%3D%22objectBoundingBox%22%0A%20%20%20%20%20%20%20%20%20%20%20%20x%3D%220%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%3E%0A%20%20%20%20%20%20%3CfeFlood%20x%3D%2210%25%22%20y%3D%2210%25%22%20width%3D%2280%25%22%20height%3D%2280%25%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20flood-color%3D%22%2300ff00%22%20flood-opacity%3D%220.5%22%2F%3E%0A%20%20%20%20%3C%2Ffilter%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Cg%20filter%3D%22url(%23f1)%22%3E%0A%20%20%20%20%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%22%20height%3D%22100%22%20fill%3D%22%2300ff00%22%20opacity%3D%220%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A"/>
+</body>
+</html>
diff --git a/layout/reftests/svg/data-uri-with-gradient-01-ref.svg b/layout/reftests/svg/data-uri-with-gradient-01-ref.svg
new file mode 100644
index 0000000000..3f842c69f6
--- /dev/null
+++ b/layout/reftests/svg/data-uri-with-gradient-01-ref.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <defs>
+ <linearGradient id="grad1" x1="0" y1="0" x2="1" y2="0">
+ <stop stop-color="yellow" offset="0"/>
+ <stop stop-color="blue" offset="1"/>
+ </linearGradient>
+ </defs>
+ <rect x="10" y="10" width="200" height="80" fill="url(#grad1)"/>
+</svg>
diff --git a/layout/reftests/svg/data-uri-with-gradient-01.xhtml b/layout/reftests/svg/data-uri-with-gradient-01.xhtml
new file mode 100644
index 0000000000..490a73c38d
--- /dev/null
+++ b/layout/reftests/svg/data-uri-with-gradient-01.xhtml
@@ -0,0 +1,16 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+ <style>
+ body { overflow: hidden; margin: 0px }
+ </style>
+ <title>Testcase for referencing a gradient within a data URI</title>
+</head>
+<body>
+ <embed src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3ClinearGradient%20id%3D%22grad1%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%220%22%3E%0A%20%20%20%20%20%20%3Cstop%20stop-color%3D%22yellow%22%20offset%3D%220%22%2F%3E%0A%20%20%20%20%20%20%3Cstop%20stop-color%3D%22blue%22%20%20%20offset%3D%221%22%2F%3E%0A%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Crect%20x%3D%2210%22%20y%3D%2210%22%20width%3D%22200%22%20height%3D%2280%22%20fill%3D%22url(%23grad1)%22%2F%3E%0A%3C%2Fsvg%3E%0A"/>
+</body>
+</html>
diff --git a/layout/reftests/svg/data-uri-with-pattern-01.xhtml b/layout/reftests/svg/data-uri-with-pattern-01.xhtml
new file mode 100644
index 0000000000..2b608a7b04
--- /dev/null
+++ b/layout/reftests/svg/data-uri-with-pattern-01.xhtml
@@ -0,0 +1,17 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+ <style>
+ body { overflow: hidden; margin: 0px }
+ html, body, embed { height: 100%; width: 100% }
+ </style>
+ <title>Testcase for referencing a pattern within a data URI</title>
+</head>
+<body>
+ <embed src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%0A%20%20%20%20%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3Cpattern%20width%3D%221%22%20height%3D%221%22%20id%3D%22pat%22%20patternUnits%3D%22userSpaceOnUse%22%3E%0A%20%20%20%20%20%20%3Crect%20width%3D%221%22%20height%3D%221%22%20fill%3D%22lime%22%2F%3E%0A%20%20%20%20%3C%2Fpattern%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20%20fill%3D%22url(%23pat)%22%20%2F%3E%0A%3C%2Fsvg%3E%0A%0A"/>
+</body>
+</html>
diff --git a/layout/reftests/svg/dynamic-attr-change-1.svg b/layout/reftests/svg/dynamic-attr-change-1.svg
new file mode 100644
index 0000000000..1e50563a7c
--- /dev/null
+++ b/layout/reftests/svg/dynamic-attr-change-1.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" version="1.1">
+
+ <defs>
+ <style type="text/css">
+ rect[transform="scale(2)"] { fill: red }
+ rect { fill: lime; }
+ </style>
+ </defs>
+
+ <g fill="lime">
+ <rect id="rect" transform="scale(2)" width="100%" height="100%" />
+ </g>
+
+ <script>
+ window.addEventListener(
+ "load",
+ function() { document.getElementById("rect").setAttributeNS(null, "transform", "scale(1)"); },
+ false
+ );
+ </script>
+
+</svg>
diff --git a/layout/reftests/svg/dynamic-attr-change-2.svg b/layout/reftests/svg/dynamic-attr-change-2.svg
new file mode 100644
index 0000000000..fe655c5548
--- /dev/null
+++ b/layout/reftests/svg/dynamic-attr-change-2.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" version="1.1" class="reftest-wait">
+ <script>
+ function doTest() {
+ var target = document.querySelector(".target");
+ target.setAttribute("transform", "translate(20,20)");
+ document.documentElement.removeAttribute("class");
+ }
+
+ document.addEventListener("MozReftestInvalidate", doTest, false);
+ </script>
+
+ <!-- Lime background to match pass.svg -->
+ <rect height="100%" width="100%" fill="lime"/>
+
+ <!-- Red rect, which we'll have to cover up to pass the test: -->
+ <rect x="20" y="20" width="100" height="100" fill="red"/>
+
+ <!-- Lime rect, which we'll try to transform to cover up the red rect: -->
+ <g class="target" transform="">
+ <rect width="100" height="100" fill="lime"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/dynamic-attr-removal-1.svg b/layout/reftests/svg/dynamic-attr-removal-1.svg
new file mode 100644
index 0000000000..6cc20c5355
--- /dev/null
+++ b/layout/reftests/svg/dynamic-attr-removal-1.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" version="1.1">
+
+ <defs>
+ <style type="text/css">
+ rect { fill: lime; }
+ rect[transform="scale(2)"] { fill: red }
+ </style>
+ </defs>
+
+ <g fill="lime">
+ <rect id="rect" transform="scale(2)" width="100%" height="100%" />
+ </g>
+
+ <script>
+ window.addEventListener(
+ "load",
+ function() { document.getElementById("rect").removeAttributeNS(null, "transform"); },
+ false
+ );
+ </script>
+
+</svg>
diff --git a/layout/reftests/svg/dynamic-attr-removal-2.svg b/layout/reftests/svg/dynamic-attr-removal-2.svg
new file mode 100644
index 0000000000..46f0d38f8b
--- /dev/null
+++ b/layout/reftests/svg/dynamic-attr-removal-2.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" version="1.1">
+
+ <defs>
+ <style type="text/css">
+ rect { fill: red; }
+ rect:not([transform="scale(2)"]) { fill: lime }
+ </style>
+ </defs>
+
+ <g fill="lime">
+ <rect id="rect" transform="scale(2)" width="100%" height="100%" />
+ </g>
+
+ <script>
+ window.addEventListener(
+ "load",
+ function() { document.getElementById("rect").removeAttributeNS(null, "transform"); },
+ false
+ );
+ </script>
+
+</svg>
diff --git a/layout/reftests/svg/dynamic-class-01.svg b/layout/reftests/svg/dynamic-class-01.svg
new file mode 100644
index 0000000000..9ef8fd1ca6
--- /dev/null
+++ b/layout/reftests/svg/dynamic-class-01.svg
@@ -0,0 +1,24 @@
+<!--
+ 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="set_lime_class();">
+ <title>Test invalidation on setting .className.baseVal</title>
+ <style type="text/css">
+
+ .lime { fill: lime; }
+
+ </style>
+ <script>
+
+function set_lime_class()
+{
+ document.getElementById('rect').className.baseVal = 'lime';
+ document.documentElement.removeAttribute('class');
+}
+
+ </script>
+ <rect id="rect" width="100%" height="100%" fill="red"/>
+</svg>
diff --git a/layout/reftests/svg/dynamic-clipPath-01.svg b/layout/reftests/svg/dynamic-clipPath-01.svg
new file mode 100644
index 0000000000..1d1e86ebb8
--- /dev/null
+++ b/layout/reftests/svg/dynamic-clipPath-01.svg
@@ -0,0 +1,125 @@
+<!--
+ 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"
+ onload="startTest()"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Testing that dynamic changes to the element for a given ID are reflected in clip-path</title>
+ <defs>
+ <svg id="d">
+ <rect width="100%" height="50%" fill="lime"/>
+ <rect y="50%" width="100%" height="50%" fill="red"/>
+ </svg>
+ </defs>
+
+ <rect y="30%" width="100%" height="70%" fill="lime"/>
+
+ <use xlink:href="#d" id="u1" x="10%" width="11%" height="100%" clip-path="url(#r1)"/>
+ <script>
+ // force frame construction; test that parsing "r1" after frame construction
+ // is still bound to "u1" eventually
+ var rect = document.getElementById("u1").getBoundingClientRect();
+ </script>
+ <clipPath id="r1">
+ <rect width="100%" height="40%"/>
+ </clipPath>
+
+ <clipPath id="x">
+ <rect width="100%" height="40%"/>
+ </clipPath>
+ <use xlink:href="#d" id="u2" x="20%" width="11%" height="100%" clip-path="url(#r2)"/>
+
+ <clipPath id="r3">
+ <rect width="100%" height="100%"/>
+ </clipPath>
+ <clipPath id="r3">
+ <rect width="100%" height="40%"/>
+ </clipPath>
+ <use xlink:href="#d" id="u3" x="30%" width="11%" height="100%" clip-path="url(#r3)"/>
+
+ <clipPath id="r4">
+ <rect width="100%" height="100%"/>
+ </clipPath>
+ <clipPath id="r4">
+ <rect width="100%" height="40%"/>
+ </clipPath>
+ <use xlink:href="#d" id="u4" x="40%" width="11%" height="100%" clip-path="url(#r4)"/>
+
+ <clipPath id="r5">
+ <rect width="100%" height="100%"/>
+ </clipPath>
+ <use xlink:href="#d" id="u5" x="50%" width="11%" height="100%" clip-path="url(#r5)"/>
+
+ <clipPath id="r6">
+ <rect width="100%" height="100%"/>
+ </clipPath>
+ <clipPath id="r6-2">
+ <rect width="100%" height="40%"/>
+ </clipPath>
+ <use xlink:href="#d" id="u6" x="60%" width="11%" height="100%" clip-path="url(#r6)"/>
+
+ <clipPath id="r7">
+ <rect width="100%" height="40%"/>
+ </clipPath>
+ <clipPath id="r7-2">
+ <rect width="100%" height="100%"/>
+ </clipPath>
+ <use xlink:href="#d" id="u7" x="70%" width="11%" height="100%" clip-path="url(#r7)"/>
+
+ <clipPath id="r8-2">
+ <rect width="100%" height="40%"/>
+ </clipPath>
+ <clipPath id="r8">
+ <rect width="100%" height="100%"/>
+ </clipPath>
+ <use xlink:href="#d" id="u8" x="80%" width="11%" height="100%" clip-path="url(#r8)"/>
+
+ <rect width="11%" height="100%" fill="lime"/>
+ <rect x="90%" width="11%" height="100%" fill="lime"/>
+
+ <script>
+ function startTest() {
+ document.addEventListener("MozReftestInvalidate", doTest, false);
+ setTimeout(doTest, 4000); // fallback for running outside reftest
+ }
+
+ function doTest() {
+ // check that changing an id to "r2" lets u2 find it
+ var r2 = document.getElementById("x");
+ r2.setAttribute("id", "r2");
+
+ var rect = document.getElementById("u3").getBoundingClientRect();
+ // check that removing the bad r3 lets u3 find the good one
+ var r3 = document.getElementById("r3");
+ r3.parentNode.removeChild(r3);
+
+ // check that renaming the bad r4 lets u4 find the good one
+ var r4 = document.getElementById("r4");
+ r4.removeAttribute("id");
+
+ // check that changing u5's reference works
+ var u5 = document.getElementById("u5");
+ u5.setAttribute("clip-path", "url(#r1)");
+
+ // check that inserting a good element before the bad r6 works
+ var r6 = document.getElementById("r6-2");
+ r6.parentNode.removeChild(r6);
+ r6.setAttribute("id", "r6");
+ document.documentElement.insertBefore(r6, document.documentElement.firstChild);
+
+ // check that inserting a bad element after a good one doesn't break anything
+ var r7 = document.getElementById("r7-2");
+ r7.parentNode.removeChild(r7);
+ r7.setAttribute("id", "r7");
+ document.documentElement.appendChild(r7);
+
+ // check that renaming a good element to r8 works
+ var r8 = document.getElementById("r8-2");
+ r8.setAttribute("id", "r8");
+
+ document.documentElement.removeAttribute("class");
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/dynamic-clipPath-02.svg b/layout/reftests/svg/dynamic-clipPath-02.svg
new file mode 100644
index 0000000000..81459e2359
--- /dev/null
+++ b/layout/reftests/svg/dynamic-clipPath-02.svg
@@ -0,0 +1,36 @@
+<!--
+ 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"
+ onload="startTest()"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Testing that dynamic changes to the clipPathUnits are reflected in the clipPath</title>
+
+ <defs>
+ <clipPath id="clip1" clipPathUnits="objectBoundingBox">
+ <rect width=".1" height=".1"/>
+ </clipPath>
+ </defs>
+
+ <rect width="100%" height="100%" fill="lime"/>
+
+ <g transform="scale(1000)">
+ <rect x=".2" y=".2" width=".6" height=".6" fill="red" clip-path="url(#clip1)"/>
+ </g>
+
+ <script>
+ function startTest() {
+ document.addEventListener("MozReftestInvalidate", doTest, false);
+ setTimeout(doTest, 4000); // fallback for running outside reftest
+ }
+
+ function doTest() {
+ var clip1 = document.getElementById("clip1");
+ clip1.clipPathUnits.baseVal = SVGUnitTypes.SVG_UNIT_TYPE_USERSPACEONUSE;
+
+ document.documentElement.removeAttribute("class");
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/dynamic-clipPath-clip-rule-01.svg b/layout/reftests/svg/dynamic-clipPath-clip-rule-01.svg
new file mode 100644
index 0000000000..f6b19bad84
--- /dev/null
+++ b/layout/reftests/svg/dynamic-clipPath-clip-rule-01.svg
@@ -0,0 +1,32 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink" class="reftest-wait">
+ <title>Testcase for dynamic changes to clip-rule</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=1077993 -->
+ <script>
+
+function doTest() {
+ document.getElementById("p2").setAttribute("style", "clip-rule: winding;");
+ document.documentElement.removeAttribute("class");
+}
+
+window.addEventListener("MozReftestInvalidate", doTest, false);
+window.setTimeout(doTest, 4000); // fallback for running outside reftest
+
+ </script>
+ <defs>
+ <clipPath id="p2" style="clip-rule:evenodd">
+ <path
+ d="M100,50 l0,150 50,0 0,-100 -100,0 0,50 150,0 0,-50 -50,0 0,-50 z"/>
+ </clipPath>
+ </defs>
+ <rect width="100%" height="100%" fill="lime"/>
+ <path fill-rule="winding" fill="red"
+ d="M100,50 l0,150 50,0 0,-100 -100,0 0,50 150,0 0,-50 -50,0 0,-50 z"/>
+
+ <rect width="100%" height="100%" fill="lime" clip-path="url(#p2)"/>
+</svg>
+
diff --git a/layout/reftests/svg/dynamic-conditions-01.svg b/layout/reftests/svg/dynamic-conditions-01.svg
new file mode 100644
index 0000000000..3c548099f1
--- /dev/null
+++ b/layout/reftests/svg/dynamic-conditions-01.svg
@@ -0,0 +1,33 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" onload="m();">
+ <title>Testcase for dynamic conditions</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=409383 -->
+
+ <script>
+ function m() {
+ var svgns = "http://www.w3.org/2000/svg";
+
+ var rect1 = document.getElementById("rect1");
+ rect1.setAttribute("systemLanguage", "foo");
+
+ var rect2 = document.getElementById("rect2");
+ rect2.setAttribute("requiredFeatures", "http://www.w3.org/TR/SVG11/feature#Gradient");
+
+ var rect3 = document.getElementById("rect3");
+ rect3.setAttribute("requiredExtensions", "foo");
+ }
+ </script>
+
+ <rect width="100%" height="100%" fill="lime"/>
+
+ <rect id="rect1" x="50" y="100" width="50" height="50" fill="red"/>
+
+ <rect x="200" y="100" width="50" height="50" fill="red"/>
+ <rect id="rect2" x="200" y="100" width="50" height="50" fill="lime"/>
+
+ <rect id="rect3" x="50" y="200" width="50" height="50" fill="red"/>
+</svg>
diff --git a/layout/reftests/svg/dynamic-conditions-02.svg b/layout/reftests/svg/dynamic-conditions-02.svg
new file mode 100644
index 0000000000..af36ed72ef
--- /dev/null
+++ b/layout/reftests/svg/dynamic-conditions-02.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" onload="this.setAttribute('systemLanguage', 'x')">
+ <title>Test that dynamically changed conditional processing attributes on outer 'svg' elements are honored</title>
+ <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=615146 -->
+
+ <rect width="100%" height="100%" fill="red"/>
+</svg>
diff --git a/layout/reftests/svg/dynamic-conditions-03.svg b/layout/reftests/svg/dynamic-conditions-03.svg
new file mode 100644
index 0000000000..e9e174ac99
--- /dev/null
+++ b/layout/reftests/svg/dynamic-conditions-03.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" requiredExtensions="x" onload="this.removeAttribute('requiredExtensions')">
+ <title>Test that dynamically changed conditional processing attributes on outer 'svg' elements are honored</title>
+ <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=615146 -->
+
+ <rect width="100%" height="100%" fill="lime"/>
+</svg>
diff --git a/layout/reftests/svg/dynamic-conditions-04.svg b/layout/reftests/svg/dynamic-conditions-04.svg
new file mode 100644
index 0000000000..ffbefec43c
--- /dev/null
+++ b/layout/reftests/svg/dynamic-conditions-04.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Gradient"
+onload="this.setAttribute('systemLanguage', 'x')">
+ <title>Test that dynamically changed conditional processing attributes on outer 'svg' elements are honored</title>
+ <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=615146 -->
+
+ <rect width="100%" height="100%" fill="red"/>
+</svg>
diff --git a/layout/reftests/svg/dynamic-conditions-05.svg b/layout/reftests/svg/dynamic-conditions-05.svg
new file mode 100644
index 0000000000..d22456ce66
--- /dev/null
+++ b/layout/reftests/svg/dynamic-conditions-05.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" requiredFeatures="x" onload="this.setAttribute('requiredFeatures', 'http://www.w3.org/TR/SVG11/feature#Gradient')">
+ <title>Test that dynamically changed conditional processing attributes on outer 'svg' elements are honored</title>
+ <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=615146 -->
+
+ <rect width="100%" height="100%" fill="lime"/>
+</svg>
diff --git a/layout/reftests/svg/dynamic-conditions-06.svg b/layout/reftests/svg/dynamic-conditions-06.svg
new file mode 100644
index 0000000000..9fafa4cd48
--- /dev/null
+++ b/layout/reftests/svg/dynamic-conditions-06.svg
@@ -0,0 +1,24 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait" onload="f()">
+ <title>Test that changing conditional processing attributes dynamically on outer 'svg' elements while redraw is suspended is honored</title>
+ <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=615146 -->
+
+ <script>
+ function f() {
+ var svg = document.documentElement;
+ svg.suspendRedraw(10000);
+ setTimeout(function() {
+ svg.setAttribute("systemLanguage", "x");
+ svg.unsuspendRedrawAll();
+ setTimeout(function() {
+ svg.removeAttribute("class");
+ }, 1);
+ }, 1);
+ }
+ </script>
+ <rect width="100%" height="100%" fill="red"/>
+</svg>
diff --git a/layout/reftests/svg/dynamic-conditions-07.svg b/layout/reftests/svg/dynamic-conditions-07.svg
new file mode 100644
index 0000000000..8132b7ddb7
--- /dev/null
+++ b/layout/reftests/svg/dynamic-conditions-07.svg
@@ -0,0 +1,24 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait" onload="f()" requiredFeatures="x">
+ <title>Test that changing conditional processing attributes dynamically on outer 'svg' elements while redraw is suspended is honored</title>
+ <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=615146 -->
+
+ <script>
+ function f() {
+ var svg = document.documentElement;
+ svg.suspendRedraw(10000);
+ setTimeout(function() {
+ svg.removeAttribute("requiredFeatures");
+ svg.unsuspendRedrawAll();
+ setTimeout(function() {
+ svg.removeAttribute("class");
+ }, 1);
+ }, 1);
+ }
+ </script>
+ <rect width="100%" height="100%" fill="lime"/>
+</svg>
diff --git a/layout/reftests/svg/dynamic-conditions-08.svg b/layout/reftests/svg/dynamic-conditions-08.svg
new file mode 100644
index 0000000000..7b82d35bfa
--- /dev/null
+++ b/layout/reftests/svg/dynamic-conditions-08.svg
@@ -0,0 +1,24 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait" onload="f()" requiredFeatures="x">
+ <title>Test that changing conditional processing attributes dynamically on outer 'svg' elements while redraw is suspended is honored</title>
+ <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=615146 -->
+
+ <script>
+ function f() {
+ var svg = document.documentElement;
+ svg.suspendRedraw(10000);
+ setTimeout(function() {
+ svg.setAttribute("requiredFeatures", "http://www.w3.org/TR/SVG11/feature#Gradient");
+ svg.unsuspendRedrawAll();
+ setTimeout(function() {
+ svg.removeAttribute("class");
+ }, 1);
+ }, 1);
+ }
+ </script>
+ <rect width="100%" height="100%" fill="lime"/>
+</svg>
diff --git a/layout/reftests/svg/dynamic-conditions-09.svg b/layout/reftests/svg/dynamic-conditions-09.svg
new file mode 100644
index 0000000000..3c9b264b56
--- /dev/null
+++ b/layout/reftests/svg/dynamic-conditions-09.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait" onload="f()"
+systemLanguage="en">
+ <title>Test that changing conditional processing attributes dynamically on outer 'svg' elements while redraw is suspended is honored</title>
+ <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=615146 -->
+
+ <script>
+ function f() {
+ var svg = document.documentElement;
+ svg.suspendRedraw(10000);
+ setTimeout(function() {
+ svg.setAttribute("systemLanguage", "x");
+ svg.unsuspendRedrawAll();
+ setTimeout(function() {
+ svg.removeAttribute("class");
+ }, 1);
+ }, 1);
+ }
+ </script>
+ <rect width="100%" height="100%" fill="red"/>
+</svg>
diff --git a/layout/reftests/svg/dynamic-conditions-10.svg b/layout/reftests/svg/dynamic-conditions-10.svg
new file mode 100644
index 0000000000..0188818829
--- /dev/null
+++ b/layout/reftests/svg/dynamic-conditions-10.svg
@@ -0,0 +1,24 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait" onload="f()">
+ <title>Test that changing conditional processing attributes dynamically while redraw is suspended is honored</title>
+ <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=615146 -->
+
+ <script>
+ function f() {
+ var svg = document.documentElement;
+ svg.suspendRedraw(10000);
+ setTimeout(function() {
+ document.getElementById("r").setAttribute("systemLanguage", "x");
+ svg.unsuspendRedrawAll();
+ setTimeout(function() {
+ svg.removeAttribute("class");
+ }, 1);
+ }, 1);
+ }
+ </script>
+ <rect id="r" width="100%" height="100%" fill="red"/>
+</svg>
diff --git a/layout/reftests/svg/dynamic-conditions-11.svg b/layout/reftests/svg/dynamic-conditions-11.svg
new file mode 100644
index 0000000000..2f908938a6
--- /dev/null
+++ b/layout/reftests/svg/dynamic-conditions-11.svg
@@ -0,0 +1,24 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait" onload="f()">
+ <title>Test that changing conditional processing attributes dynamically elements while redraw is suspended is honored</title>
+ <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=615146 -->
+
+ <script>
+ function f() {
+ var svg = document.documentElement;
+ svg.suspendRedraw(10000);
+ setTimeout(function() {
+ document.getElementById("r").removeAttribute("requiredFeatures");
+ svg.unsuspendRedrawAll();
+ setTimeout(function() {
+ svg.removeAttribute("class");
+ }, 1);
+ }, 1);
+ }
+ </script>
+ <rect id="r" width="100%" height="100%" fill="lime" requiredFeatures="x"/>
+</svg>
diff --git a/layout/reftests/svg/dynamic-conditions-12.svg b/layout/reftests/svg/dynamic-conditions-12.svg
new file mode 100644
index 0000000000..284f823044
--- /dev/null
+++ b/layout/reftests/svg/dynamic-conditions-12.svg
@@ -0,0 +1,24 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait" onload="f()">
+ <title>Test that changing conditional processing attributes dynamically elements while redraw is suspended is honored</title>
+ <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=615146 -->
+
+ <script>
+ function f() {
+ var svg = document.documentElement;
+ svg.suspendRedraw(10000);
+ setTimeout(function() {
+ document.getElementById("r").setAttribute("requiredFeatures", "http://www.w3.org/TR/SVG11/feature#Gradient");
+ svg.unsuspendRedrawAll();
+ setTimeout(function() {
+ svg.removeAttribute("class");
+ }, 1);
+ }, 1);
+ }
+ </script>
+ <rect id="r" width="100%" height="100%" fill="lime" requiredFeatures="x"/>
+</svg>
diff --git a/layout/reftests/svg/dynamic-conditions-13.svg b/layout/reftests/svg/dynamic-conditions-13.svg
new file mode 100644
index 0000000000..ba3cf38bce
--- /dev/null
+++ b/layout/reftests/svg/dynamic-conditions-13.svg
@@ -0,0 +1,24 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait" onload="f()">
+ <title>Test that changing conditional processing attributes dynamically elements while redraw is suspended is honored</title>
+ <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=615146 -->
+
+ <script>
+ function f() {
+ var svg = document.documentElement;
+ svg.suspendRedraw(10000);
+ setTimeout(function() {
+ document.getElementById("r").setAttribute("systemLanguage", "x");
+ svg.unsuspendRedrawAll();
+ setTimeout(function() {
+ svg.removeAttribute("class");
+ }, 1);
+ }, 1);
+ }
+ </script>
+ <rect id="r" width="100%" height="100%" fill="red" systemLanguage="en"/>
+</svg>
diff --git a/layout/reftests/svg/dynamic-feFlood-01.svg b/layout/reftests/svg/dynamic-feFlood-01.svg
new file mode 100644
index 0000000000..283c3550b4
--- /dev/null
+++ b/layout/reftests/svg/dynamic-feFlood-01.svg
@@ -0,0 +1,24 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" onload="m();">
+ <title>Testcase for dynamic feFlood changes</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=448831 -->
+ <script>
+ function m() {
+ document.getElementById("feFlood").setAttribute("flood-color", "lime");
+ }
+ </script>
+
+ <defs>
+ <filter id="f1" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox"
+ x="0" y="0" width="1" height="1">
+ <feFlood id="feFlood" x="0" y="0" width="100%" height="100%" flood-color="red"/>
+ </filter>
+ </defs>
+ <g filter="url(#f1)">
+ <rect x="0" y="0" width="100%" height="100%" fill="red" opacity="0"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/dynamic-feImage-01.svg b/layout/reftests/svg/dynamic-feImage-01.svg
new file mode 100644
index 0000000000..920927790b
--- /dev/null
+++ b/layout/reftests/svg/dynamic-feImage-01.svg
@@ -0,0 +1,28 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onload="m();">
+ <title>Testcase for dynamic feImage changes</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=455226 -->
+ <script>
+ function m() {
+ var xlinkNS = "http://www.w3.org/1999/xlink";
+ document.getElementById("feImage").removeAttributeNS(xlinkNS, "href");
+ }
+ </script>
+
+ <defs>
+ <filter id="f1" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox"
+ x="0" y="0" width="1" height="1">
+
+ <feImage id="feImage"
+ xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAAXNSR0IArs4c6QAAAAxJREFUCNdj+M/AAAADAQEAGN2NsAAAAABJRU5ErkJggg"
+ x="0" y="0" width="100%" height="100%"
+ style="color-interpolation-filters:sRGB"/>
+ </filter>
+ </defs>
+ <rect width="100%" height="100%" fill="lime"/>
+ <rect width="100%" height="100%" filter="url(#f1)"/>
+</svg>
diff --git a/layout/reftests/svg/dynamic-fill-01-ref.svg b/layout/reftests/svg/dynamic-fill-01-ref.svg
new file mode 100644
index 0000000000..e20c21a3ad
--- /dev/null
+++ b/layout/reftests/svg/dynamic-fill-01-ref.svg
@@ -0,0 +1,12 @@
+<!--
+ 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 changing fill from url() value to a solid color value not asserting</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=782888 -->
+
+ <text style="font: 16px sans-serif; fill: green" x="100" y="100">Hello</text>
+</svg>
diff --git a/layout/reftests/svg/dynamic-fill-01.svg b/layout/reftests/svg/dynamic-fill-01.svg
new file mode 100644
index 0000000000..d127a2c747
--- /dev/null
+++ b/layout/reftests/svg/dynamic-fill-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" class="reftest-wait">
+
+ <title>Test for changing fill from url() value to a solid color value not asserting</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=782888 -->
+
+ <linearGradient id="g">
+ <stop stop-color="red"/>
+ </linearGradient>
+
+ <text style="font: 16px sans-serif; fill: url(#g)" x="100" y="100">Hello</text>
+
+ <script>
+ window.addEventListener("MozReftestInvalidate", function() {
+ document.getElementsByTagName("text")[0].style.fill = "green";
+ document.documentElement.removeAttribute("class");
+ }, false);
+ </script>
+</svg>
diff --git a/layout/reftests/svg/dynamic-fill-rule-01-ref.svg b/layout/reftests/svg/dynamic-fill-rule-01-ref.svg
new file mode 100644
index 0000000000..a31a09a7cb
--- /dev/null
+++ b/layout/reftests/svg/dynamic-fill-rule-01-ref.svg
@@ -0,0 +1,20 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
+ <title>Reference for dynamic changes to fill-rule</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=932762 -->
+
+ <!-- for p1 -->
+ <rect x="50" y="100" width="150" height="50"/>
+ <rect x="100" y="50" width="50" height="150"/>
+
+ <!-- for p2 -->
+ <rect x="250" y="100" width="50" height="50"/>
+ <rect x="350" y="100" width="50" height="50"/>
+ <rect x="300" y="50" width="50" height="50"/>
+ <rect x="300" y="150" width="50" height="50"/>
+
+</svg>
+
diff --git a/layout/reftests/svg/dynamic-fill-rule-01.svg b/layout/reftests/svg/dynamic-fill-rule-01.svg
new file mode 100644
index 0000000000..9fb12f4ae0
--- /dev/null
+++ b/layout/reftests/svg/dynamic-fill-rule-01.svg
@@ -0,0 +1,25 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" class="reftest-wait">
+ <title>Testcase for dynamic changes to fill-rule</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=932762 -->
+ <script>
+
+function doTest() {
+ document.getElementById("p1").removeAttribute("style");
+ document.getElementById("p2").setAttribute("style", "fill-rule: evenodd;");
+ document.documentElement.removeAttribute("class");
+}
+
+window.addEventListener("MozReftestInvalidate", doTest, false);
+window.setTimeout(doTest, 4000); // fallback for running outside reftest
+
+ </script>
+ <path id="p1" style="fill-rule: evenodd;"
+ d="M100,50 l0,150 50,0 0,-100 -100,0 0,50 150,0 0,-50 -50,0 0,-50 z"/>
+ <path id="p2"
+ d="M300,50 l0,150 50,0 0,-100 -100,0 0,50 150,0 0,-50 -50,0 0,-50 z"/>
+</svg>
+
diff --git a/layout/reftests/svg/dynamic-filter-contents-01-ref.svg b/layout/reftests/svg/dynamic-filter-contents-01-ref.svg
new file mode 100644
index 0000000000..a81725da4e
--- /dev/null
+++ b/layout/reftests/svg/dynamic-filter-contents-01-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">
+ <rect width="100" height="100" fill="lime"/>
+ <rect width="100" height="100" fill="red" opacity="0.5"/>
+</svg>
diff --git a/layout/reftests/svg/dynamic-filter-contents-01a.svg b/layout/reftests/svg/dynamic-filter-contents-01a.svg
new file mode 100644
index 0000000000..4c5fe6a48c
--- /dev/null
+++ b/layout/reftests/svg/dynamic-filter-contents-01a.svg
@@ -0,0 +1,31 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg class="reftest-wait" xmlns="http://www.w3.org/2000/svg" onload="startTest()">
+ <style>
+ .foo feComposite { color-interpolation-filters:sRGB; }
+ </style>
+
+ <defs id="d">
+ <filter id="f" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox"
+ x="0" y="0" width="1" height="1">
+ <feFlood flood-color="#ff0000" flood-opacity="0.5" result="flood"/>
+ <feComposite width="1" height="1" in="flood" operator="over" in2="SourceGraphic"/>
+ </filter>
+ </defs>
+
+ <rect width="100" height="100" fill="lime" filter="url(#f)"/>
+
+ <script>
+ function startTest() {
+ document.addEventListener("MozReftestInvalidate", doTest, false);
+ setTimeout(doTest, 4000); // fallback for running outside reftest
+ }
+
+ function doTest() {
+ document.getElementById("d").setAttribute("class", "foo");
+ document.documentElement.removeAttribute('class');
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/dynamic-filter-contents-01b.svg b/layout/reftests/svg/dynamic-filter-contents-01b.svg
new file mode 100644
index 0000000000..c85bf7b606
--- /dev/null
+++ b/layout/reftests/svg/dynamic-filter-contents-01b.svg
@@ -0,0 +1,27 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg class="reftest-wait" xmlns="http://www.w3.org/2000/svg" onload="startTest()">
+ <defs>
+ <filter id="f" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox"
+ x="0" y="0" width="1" height="1">
+ <feFlood flood-color="#ff0000" flood-opacity="0.5" result="flood"/>
+ <feComposite id="comp" width="1" height="1" in="flood" operator="over" in2="SourceGraphic"/>
+ </filter>
+ </defs>
+
+ <rect width="100" height="100" fill="lime" filter="url(#f)"/>
+
+ <script>
+ function startTest() {
+ document.addEventListener("MozReftestInvalidate", doTest, false);
+ setTimeout(doTest, 4000); // fallback for running outside reftest
+ }
+
+ function doTest() {
+ document.getElementById("comp").setAttribute("color-interpolation-filters", "sRGB");
+ document.documentElement.removeAttribute('class');
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/dynamic-gradient-contents-01.svg b/layout/reftests/svg/dynamic-gradient-contents-01.svg
new file mode 100644
index 0000000000..d437b7e023
--- /dev/null
+++ b/layout/reftests/svg/dynamic-gradient-contents-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" version="1.1" class="reftest-wait"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ onload="startTest()">
+ <title>Testing that dynamic changes to the element for a given ID are reflected in gradients</title>
+ <style>
+ .foo stop { stop-color:lime; }
+ </style>
+ <defs id="d">
+ <linearGradient id="g" gradientUnits="objectBoundingBox" x2="0" y2="1">
+ <stop stop-color="red" offset="0"/>
+ <stop stop-color="red" offset="1"/>
+ </linearGradient>
+ </defs>
+
+ <rect id="u1" width="100%" height="100%" fill="url(#g)"/>
+
+ <script>
+ function startTest() {
+ document.addEventListener("MozReftestInvalidate", doTest, false);
+ setTimeout(doTest, 4000); // fallback for running outside reftest
+ }
+
+ function doTest() {
+ document.getElementById("g").setAttribute("class", "foo");
+ document.documentElement.removeAttribute("class");
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/dynamic-gradient-contents-02.svg b/layout/reftests/svg/dynamic-gradient-contents-02.svg
new file mode 100644
index 0000000000..8d620816d3
--- /dev/null
+++ b/layout/reftests/svg/dynamic-gradient-contents-02.svg
@@ -0,0 +1,35 @@
+<!--
+ 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="startTest()">
+ <title>Testing that dynamic changes to the parent element are reflected in gradients</title>
+ <defs id="d">
+ <linearGradient id="g1" gradientUnits="objectBoundingBox" x2="0" y2="1">
+ <stop stop-color="red" offset="0"/>
+ <stop stop-color="red" offset="1"/>
+ </linearGradient>
+ <linearGradient id="g2" gradientUnits="objectBoundingBox" x2="0" y2="1">
+ <stop stop-color="lime" offset="0"/>
+ <stop stop-color="lime" offset="1"/>
+ </linearGradient>
+ </defs>
+
+ <g id="g" fill="url(#g1)">
+ <rect id="u1" width="100%" height="100%" />
+ </g>
+
+ <script>
+ function startTest() {
+ document.addEventListener("MozReftestInvalidate", doTest, false);
+ setTimeout(doTest, 4000); // fallback for running outside reftest
+ }
+
+ function doTest() {
+ document.getElementById("g").setAttribute("fill", "url(#g2)");
+ document.documentElement.removeAttribute("class");
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/dynamic-inner-svg-01.svg b/layout/reftests/svg/dynamic-inner-svg-01.svg
new file mode 100644
index 0000000000..8709a574a6
--- /dev/null
+++ b/layout/reftests/svg/dynamic-inner-svg-01.svg
@@ -0,0 +1,39 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait"
+ onload="startTest()">
+
+<script>
+<![CDATA[
+
+function startTest() {
+ document.addEventListener("MozReftestInvalidate", boom, false);
+ setTimeout(boom, 4000); // fallback for running outside reftest
+}
+
+function boom() {
+ document.getElementById('inner1').setAttribute('x', 20);
+ document.getElementById('inner2').setAttribute('width', 100);
+ document.documentElement.removeAttribute("class");
+}
+
+]]>
+</script>
+
+ <rect width="100%" height="100%" fill="lime"/>
+
+ <rect x="20" y="20" width="100" height="100" fill="red"/>
+
+ <svg id="inner1" x="260" y="20" width="100" height="100">
+ <rect x="0" y="0" width="100" height="100" fill="lime"/>
+ </svg>
+
+ <rect x="20" y="140" width="100" height="100" fill="red"/>
+
+ <svg id="inner2" x="20" y="140" width="1" height="100">
+ <rect x="0" y="0" width="100" height="100" fill="lime"/>
+ </svg>
+
+</svg>
diff --git a/layout/reftests/svg/dynamic-link-style-01.svg b/layout/reftests/svg/dynamic-link-style-01.svg
new file mode 100644
index 0000000000..65eb5c54c2
--- /dev/null
+++ b/layout/reftests/svg/dynamic-link-style-01.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ onload="setTimeout(function() { document.getElementById('r').removeAttribute('xlink:href'); }, 0);">
+
+ <title>Testcase for dynamic changes to link styles</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=398105 -->
+
+ <style type="text/css">
+ a:link rect { fill: red; }
+ </style>
+
+ <a xlink:href="do-not-visit-me.xxx" id="r">
+ <rect width="100%" height="100%" fill="lime" />
+ </a>
+</svg>
diff --git a/layout/reftests/svg/dynamic-marker-01.svg b/layout/reftests/svg/dynamic-marker-01.svg
new file mode 100644
index 0000000000..7bd0e60723
--- /dev/null
+++ b/layout/reftests/svg/dynamic-marker-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" version="1.1" class="reftest-wait" onload="startTest()" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Testing that dynamic changes to the element for a given ID are reflected in marker</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=309220 -->
+ <defs>
+ <marker id="x" style="overflow: visible;" orient="auto" markerUnits="strokeWidth">
+ <rect width="100%" height="100%" fill="lime"/>
+ </marker>
+ </defs>
+
+ <rect width="100%" height="100%" fill="red"/>
+
+ <line id="l1" x1="0" x2="0" y1="0" y2="0" fill="none" stroke="black" stroke-width="1" marker-end="url(#m1)"/>
+
+ <script>
+ function startTest() {
+ document.addEventListener("MozReftestInvalidate", doTest, false);
+ setTimeout(doTest, 4000); // fallback for running outside reftest
+ }
+
+ function doTest() {
+ // check that changing an id to "m1" lets l1 find it
+ var x = document.getElementById("x");
+ x.setAttribute("id", "m1");
+
+ document.documentElement.removeAttribute('class');
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/dynamic-marker-02-ref.svg b/layout/reftests/svg/dynamic-marker-02-ref.svg
new file mode 100644
index 0000000000..3d0e9b6b21
--- /dev/null
+++ b/layout/reftests/svg/dynamic-marker-02-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">
+
+ <defs>
+ <marker style="overflow: visible" id="m1" orient="auto" markerUnits="strokeWidth">
+ <rect width="100%" height="100%" fill="blue"/>
+ </marker>
+ </defs>
+
+
+ <rect width="100%" height="100%" fill="yellow"/>
+
+ <line x1="30" x2="30" y1="10" y2="10" stroke="red" stroke-width="3" marker-end="url(#m1)"/>
+
+</svg>
diff --git a/layout/reftests/svg/dynamic-marker-02.svg b/layout/reftests/svg/dynamic-marker-02.svg
new file mode 100644
index 0000000000..88e427bc85
--- /dev/null
+++ b/layout/reftests/svg/dynamic-marker-02.svg
@@ -0,0 +1,36 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait"
+ onload="startTest()">
+
+<script>
+<![CDATA[
+
+function startTest() {
+ document.addEventListener("MozReftestInvalidate", boom, false);
+ setTimeout(boom, 4000); // fallback for running outside reftest
+}
+
+function boom() {
+ n = document.getElementById("m1");
+ n.style.overflow = "visible";
+ document.documentElement.removeAttribute("class");
+}
+
+]]>
+</script>
+
+ <defs>
+ <marker id="m1" orient="auto" markerUnits="strokeWidth">
+ <rect width="100%" height="100%" fill="blue"/>
+ </marker>
+ </defs>
+
+
+ <rect width="100%" height="100%" fill="yellow"/>
+
+ <line x1="30" x2="30" y1="10" y2="10" stroke="red" stroke-width="3" marker-end="url(#m1)"/>
+
+</svg>
diff --git a/layout/reftests/svg/dynamic-marker-03.svg b/layout/reftests/svg/dynamic-marker-03.svg
new file mode 100644
index 0000000000..a4944bd906
--- /dev/null
+++ b/layout/reftests/svg/dynamic-marker-03.svg
@@ -0,0 +1,36 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait">
+
+ <title>Testing that dynamic changes to preserveAspectRatio are reflected in the marker</title>
+ <script>
+<![CDATA[
+
+function doTest() {
+ m = document.getElementById("m1");
+ m.preserveAspectRatio.baseVal.align =
+ SVGPreserveAspectRatio.SVG_PRESERVEASPECTRATIO_NONE;
+ document.documentElement.removeAttribute("class");
+}
+
+document.addEventListener("MozReftestInvalidate", doTest, false);
+setTimeout(doTest, 4000); // fallback for running outside reftest
+
+]]>
+ </script>
+
+ <defs>
+ <marker id="m1" orient="auto" markerUnits="userSpaceOnUse"
+ preserveAspectRatio="xMidYMid slice" viewBox="0 0 30 40" markerWidth="60" markerHeight="30">
+ <rect width="30" height="40" fill="red"/>
+ </marker>
+ </defs>
+
+ <rect width="100%" height="100%" fill="lime"/>
+
+ <line x1="30" x2="30" y1="10" y2="10" stroke="red" stroke-width="3" marker-end="url(#m1)"/>
+
+ <rect x="30" y="10" width="60" height="30" fill="lime"/>
+</svg>
diff --git a/layout/reftests/svg/dynamic-mask-01.svg b/layout/reftests/svg/dynamic-mask-01.svg
new file mode 100644
index 0000000000..7a0e428ee7
--- /dev/null
+++ b/layout/reftests/svg/dynamic-mask-01.svg
@@ -0,0 +1,48 @@
+<!--
+ 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"
+ onload="startTest()"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Testing that dynamic changes to mask attributes are reflected in the mask</title>
+
+ <defs>
+ <mask id="mask1" width="1" height="1">
+ <rect width="1" height="1" fill="white"/>
+ </mask>
+ <mask id="mask2" width="1" height="1">
+ <rect width="1" height="1" fill="white"/>
+ </mask>
+ <mask id="mask3" width="1" height="1">
+ <rect width="1" height="1" fill="white"/>
+ </mask>
+ </defs>
+
+ <rect width="100%" height="100%" fill="lime"/>
+
+ <g transform="scale(500)">
+ <rect x=".2" y=".2" width=".2" height=".2" fill="red" mask="url(#mask1)"/>
+ <rect x=".4" y=".2" width=".2" height=".2" fill="red" mask="url(#mask2)"/>
+ <rect x=".2" y=".4" width=".2" height=".2" fill="red" mask="url(#mask3)" />
+ </g>
+
+ <script>
+ function startTest() {
+ document.addEventListener("MozReftestInvalidate", doTest, false);
+ setTimeout(doTest, 4000); // fallback for running outside reftest
+ }
+
+ function doTest() {
+ var mask1 = document.getElementById("mask1");
+ mask1.width.baseVal.value = 0;
+ var mask2 = document.getElementById("mask2");
+ mask2.height.baseVal.value = 0;
+ var mask3 = document.getElementById("mask3");
+ mask3.maskUnits.baseVal = SVGUnitTypes.SVG_UNIT_TYPE_USERSPACEONUSE;
+
+ document.documentElement.removeAttribute("class");
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/dynamic-mask-contents-01.svg b/layout/reftests/svg/dynamic-mask-contents-01.svg
new file mode 100644
index 0000000000..10d6222e25
--- /dev/null
+++ b/layout/reftests/svg/dynamic-mask-contents-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" onload="startTest()" class="reftest-wait">
+ <style>
+ .foo .maskrect { fill:white; }
+ </style>
+
+ <defs id="d">
+ <mask id="m1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
+ <rect class="maskrect" width="1" height="1"/>
+ </mask>
+ </defs>
+
+ <rect id="rect" width="100%" height="100%" fill="lime" mask="url(#m1)"/>
+
+ <script>
+ function startTest() {
+ document.addEventListener("MozReftestInvalidate", doTest, false);
+ setTimeout(doTest, 4000); // fallback for running outside reftest
+ }
+
+ function doTest() {
+ document.getElementById("d").setAttribute("class", "foo");
+ document.documentElement.removeAttribute("class");
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/dynamic-mask-pre-effects-bbox-ref.html b/layout/reftests/svg/dynamic-mask-pre-effects-bbox-ref.html
new file mode 100644
index 0000000000..4def173a0b
--- /dev/null
+++ b/layout/reftests/svg/dynamic-mask-pre-effects-bbox-ref.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <style>
+ #container {
+ border: 3px dotted black;
+ background: yellow;
+ overflow: hidden;
+ width: 400px;
+ max-height: 25px;
+ }
+
+ #container.masked {
+ mask: url('#fade_mask_bottom');
+ }
+ .item {
+ font-size: 30px;
+ }
+ </style>
+ </head>
+ <body>
+ <div id='container' class="masked"><div class="item">PASS</div></div>
+
+ <!-- BEGIN SVG MASK: -->
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
+ <mask id="fade_mask_bottom"
+ maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
+ <linearGradient id="fade_gradient_bottom"
+ gradientUnits="objectBoundingBox" x2="0" y2="1">
+ <stop stop-color="white" stop-opacity="1" offset="0.7"></stop>
+ <stop stop-color="white" stop-opacity="0" offset="1"></stop>
+ </linearGradient>
+ <rect x="0" y="0" width="1" height="1"
+ fill="url(#fade_gradient_bottom)"></rect>
+ </mask>
+ </svg>
+ <!-- END SVG MASK -->
+
+ </body>
+</html>
diff --git a/layout/reftests/svg/dynamic-mask-pre-effects-bbox.html b/layout/reftests/svg/dynamic-mask-pre-effects-bbox.html
new file mode 100644
index 0000000000..4ed6f1a372
--- /dev/null
+++ b/layout/reftests/svg/dynamic-mask-pre-effects-bbox.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <head>
+ <style>
+ #container {
+ border: 3px dotted black;
+ background: yellow;
+ overflow: hidden;
+ width: 400px;
+ max-height: 25px;
+ }
+
+ #container.masked {
+ mask: url('#fade_mask_bottom');
+ }
+ .item {
+ font-size: 30px;
+ }
+ </style>
+ <script>
+ function go() {
+ clear();
+ insert();
+ }
+
+ function clear() {
+ // Force reflow:
+ container.offsetHeight;
+
+ // Remove mask:
+ container.classList.remove('masked');
+ }
+
+ function insert() {
+ // Add new child:
+ var notificationNode = document.createElement('div');
+ notificationNode.classList.add('item');
+ notificationNode.appendChild(document.createTextNode("PASS"));
+ var container = document.getElementById('container');
+ container.appendChild(notificationNode);
+
+ // Force reflow:
+ container.offsetHeight;
+
+ // Add back mask:
+ container.classList.add('masked');
+
+ document.documentElement.classList.remove('reftest-wait');
+ }
+ </script>
+ </head>
+ <body onload="go();">
+ <div id='container' class="masked"></div>
+
+ <!-- BEGIN SVG MASK: -->
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
+ <mask id="fade_mask_bottom"
+ maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
+ <linearGradient id="fade_gradient_bottom"
+ gradientUnits="objectBoundingBox" x2="0" y2="1">
+ <stop stop-color="white" stop-opacity="1" offset="0.7"></stop>
+ <stop stop-color="white" stop-opacity="0" offset="1"></stop>
+ </linearGradient>
+ <rect x="0" y="0" width="1" height="1"
+ fill="url(#fade_gradient_bottom)"></rect>
+ </mask>
+ </svg>
+ <!-- END SVG MASK -->
+
+ </body>
+</html>
diff --git a/layout/reftests/svg/dynamic-opacity-property-01.svg b/layout/reftests/svg/dynamic-opacity-property-01.svg
new file mode 100644
index 0000000000..d35f8c82e6
--- /dev/null
+++ b/layout/reftests/svg/dynamic-opacity-property-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" class="reftest-wait">
+
+ <title>Test repainting for opacity property changes</title>
+
+ <script>
+
+function doTest() {
+ document.getElementById("r").style.opacity = 1;
+ document.documentElement.removeAttribute("class");
+}
+
+document.addEventListener("MozReftestInvalidate", doTest, false);
+setTimeout(doTest, 4000); // fallback for running outside reftest
+
+ </script>
+
+ <rect width="100%" height="100%" fill="lime"/>
+ <rect width="100" height="100" fill="red"/>
+ <rect id="r" width="100" height="100" fill="lime" style="opacity:0.5"/>
+
+</svg>
diff --git a/layout/reftests/svg/dynamic-pattern-01.svg b/layout/reftests/svg/dynamic-pattern-01.svg
new file mode 100644
index 0000000000..e129d24493
--- /dev/null
+++ b/layout/reftests/svg/dynamic-pattern-01.svg
@@ -0,0 +1,115 @@
+<!--
+ 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="startTest()">
+ <title>Testing that dynamic changes to the element for a given ID are reflected in patterns</title>
+
+ <rect id="u1" x="10%" width="11%" height="100%" fill="url(#r1)"/>
+ <script>
+ // force frame construction; test that parsing "r1" after frame construction
+ // is still bound to "u1" eventually
+ var rect = document.getElementById("u1").getBoundingClientRect();
+ </script>
+ <pattern id="r1" width="100%" height="100%" patternUnits="userSpaceOnUse">
+ <rect width="100%" height="100%" fill="lime"/>
+ </pattern>
+
+ <pattern id="x" width="100%" height="100%" patternUnits="userSpaceOnUse">
+ <rect width="100%" height="100%" fill="lime"/>
+ </pattern>
+ <rect id="u2" x="20%" width="11%" height="100%" fill="url(#r2)"/>
+
+ <pattern id="r3" width="100%" height="100%" patternUnits="userSpaceOnUse">
+ <rect width="100%" height="100%" fill="red"/>
+ </pattern>
+ <pattern id="r3" width="100%" height="100%" patternUnits="userSpaceOnUse">
+ <rect width="100%" height="100%" fill="lime"/>
+ </pattern>
+ <rect id="u3" x="30%" width="11%" height="100%" fill="url(#r3)"/>
+
+ <pattern id="r4" width="100%" height="100%" patternUnits="userSpaceOnUse">
+ <rect width="100%" height="100%" fill="red"/>
+ </pattern>
+ <pattern id="r4" width="100%" height="100%" patternUnits="userSpaceOnUse">
+ <rect width="100%" height="100%" fill="lime"/>
+ </pattern>
+ <rect id="u4" x="40%" width="11%" height="100%" fill="url(#r4)"/>
+
+ <pattern id="r5" width="100%" height="100%" patternUnits="userSpaceOnUse">
+ <rect width="100%" height="100%" fill="red"/>
+ </pattern>
+ <rect id="u5" x="50%" width="11%" height="100%" fill="url(#r5)"/>
+
+ <pattern id="r6" width="100%" height="100%" patternUnits="userSpaceOnUse">
+ <rect width="100%" height="100%" fill="red"/>
+ </pattern>
+ <pattern id="r6-2" width="100%" height="100%" patternUnits="userSpaceOnUse">
+ <rect width="100%" height="100%" fill="lime"/>
+ </pattern>
+ <rect id="u6" x="60%" width="11%" height="100%" fill="url(#r6)"/>
+
+ <pattern id="r7" width="100%" height="100%" patternUnits="userSpaceOnUse">
+ <rect width="100%" height="100%" fill="lime"/>
+ </pattern>
+ <pattern id="r7-2" width="100%" height="100%" patternUnits="userSpaceOnUse">
+ <rect width="100%" height="100%" fill="red"/>
+ </pattern>
+ <rect id="u7" x="70%" width="11%" height="100%" fill="url(#r7)"/>
+
+ <pattern id="r8-2" width="100%" height="100%" patternUnits="userSpaceOnUse">
+ <rect width="100%" height="100%" fill="lime"/>
+ </pattern>
+ <pattern id="r8" width="100%" height="100%" patternUnits="userSpaceOnUse">
+ <rect width="100%" height="100%" fill="red"/>
+ </pattern>
+ <rect id="u8" x="80%" width="11%" height="100%" fill="url(#r8)"/>
+
+ <rect width="11%" height="100%" fill="lime"/>
+ <rect x="90%" width="11%" height="100%" fill="lime"/>
+
+ <script>
+ function startTest() {
+ document.addEventListener("MozReftestInvalidate", doTest, false);
+ setTimeout(doTest, 4000); // fallback for running outside reftest
+ }
+
+ function doTest() {
+ // check that changing an id to "r2" lets u2 find it
+ var r2 = document.getElementById("x");
+ r2.setAttribute("id", "r2");
+
+ var rect = document.getElementById("u3").getBoundingClientRect();
+ // check that removing the bad r3 lets u3 find the good one
+ var r3 = document.getElementById("r3");
+ r3.parentNode.removeChild(r3);
+
+ // check that renaming the bad r4 lets u4 find the good one
+ var r4 = document.getElementById("r4");
+ r4.removeAttribute("id");
+
+ // check that changing u5's reference works
+ var u5 = document.getElementById("u5");
+ u5.setAttribute("fill", "url(#r1)");
+
+ // check that inserting a good element before the bad r6 works
+ var r6 = document.getElementById("r6-2");
+ r6.parentNode.removeChild(r6);
+ r6.setAttribute("id", "r6");
+ document.documentElement.insertBefore(r6, document.documentElement.firstChild);
+
+ // check that inserting a bad element after a good one doesn't break anything
+ var r7 = document.getElementById("r7-2");
+ r7.parentNode.removeChild(r7);
+ r7.setAttribute("id", "r7");
+ document.documentElement.appendChild(r7);
+
+ // check that renaming a good element to r8 works
+ var r8 = document.getElementById("r8-2");
+ r8.setAttribute("id", "r8");
+
+ document.documentElement.removeAttribute("class");
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/dynamic-pattern-02.svg b/layout/reftests/svg/dynamic-pattern-02.svg
new file mode 100644
index 0000000000..f63492f696
--- /dev/null
+++ b/layout/reftests/svg/dynamic-pattern-02.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" version="1.1" class="reftest-wait"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Testing that href changes are live</title>
+ <defs>
+ <pattern id="r1" width="100%" height="100%" patternUnits="userSpaceOnUse">
+ </pattern>
+ </defs>
+ <defs>
+ <pattern id="r2">
+ <rect width="100%" height="100%" fill="lime"/>
+ </pattern>
+ </defs>
+
+ <rect id="u1" width="100%" height="100%" fill="url(#r1)"/>
+
+ <script>
+ document.addEventListener("MozReftestInvalidate", doTest, false);
+ setTimeout(doTest, 4000); // fallback for running outside reftest
+
+ function doTest() {
+ document.getElementById("r1").setAttributeNS("http://www.w3.org/1999/xlink", "href", "#r2");
+ document.documentElement.removeAttribute("class");
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/dynamic-pattern-contents-01.svg b/layout/reftests/svg/dynamic-pattern-contents-01.svg
new file mode 100644
index 0000000000..b692de10c0
--- /dev/null
+++ b/layout/reftests/svg/dynamic-pattern-contents-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" version="1.1" class="reftest-wait"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Testing that style changes are reflected in patterns</title>
+ <style>
+ .foo { fill:lime; }
+ </style>
+ <defs>
+ <pattern id="r1" width="100%" height="100%" patternUnits="userSpaceOnUse" xlink:href="#r2">
+ </pattern>
+ </defs>
+ <defs id="d">
+ <pattern id="r2">
+ <rect width="100%" height="100%"/>
+ </pattern>
+ </defs>
+
+ <rect id="u1" width="100%" height="100%" fill="url(#r1)"/>
+
+ <script>
+ document.addEventListener("MozReftestInvalidate", doTest, false);
+ setTimeout(doTest, 4000); // fallback for running outside reftest
+
+ function doTest() {
+ document.getElementById("d").setAttribute("class", "foo");
+ document.documentElement.removeAttribute("class");
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/dynamic-pattern-contents-02.svg b/layout/reftests/svg/dynamic-pattern-contents-02.svg
new file mode 100644
index 0000000000..d3da2e19f0
--- /dev/null
+++ b/layout/reftests/svg/dynamic-pattern-contents-02.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" version="1.1" class="reftest-wait"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Testing that ID-map changes are tracked by pattern inheritance</title>
+ <defs>
+ <pattern id="r1" width="100%" height="100%" patternUnits="userSpaceOnUse" xlink:href="#r2">
+ </pattern>
+ </defs>
+ <defs>
+ <pattern id="r0">
+ <rect width="100%" height="100%" fill="lime"/>
+ </pattern>
+ </defs>
+
+ <rect id="u1" width="100%" height="100%" fill="url(#r1)"/>
+
+ <script>
+ document.addEventListener("MozReftestInvalidate", doTest, false);
+ setTimeout(doTest, 4000); // fallback for running outside reftest
+
+ function doTest() {
+ document.getElementById("r0").setAttribute("id", "r2");
+ document.documentElement.removeAttribute("class");
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/dynamic-rect-01-ref.svg b/layout/reftests/svg/dynamic-rect-01-ref.svg
new file mode 100644
index 0000000000..3f3e96e665
--- /dev/null
+++ b/layout/reftests/svg/dynamic-rect-01-ref.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
+ <title>Reference for dynamic rect changes</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=423998 -->
+ <rect x="50" y="100" width="50" height="50" fill="lime"/>
+ <rect x="200" y="100" width="50" height="50" fill="lime"/>
+ <rect x="50" y="200" width="50" height="50" fill="lime"/>
+ <rect x="200" y="200" width="50" height="50" fill="lime"/>
+</svg>
diff --git a/layout/reftests/svg/dynamic-rect-01.svg b/layout/reftests/svg/dynamic-rect-01.svg
new file mode 100644
index 0000000000..0ff73a4dd5
--- /dev/null
+++ b/layout/reftests/svg/dynamic-rect-01.svg
@@ -0,0 +1,24 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" onload="m();">
+ <title>Testcase for dynamic rect changes</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=423998 -->
+ <script>
+ function m() {
+ document.getElementById("rect1").setAttribute("fill", "lime");
+ document.getElementById("rect2").setAttribute("x", "50");
+ document.getElementById("rect3").setAttribute("transform", "translate(200,0)");
+ document.getElementById("rect4").removeAttribute("filter");
+ }
+ </script>
+ <filter id="shadow" filterUnits="objectBoundingBox">
+ <feGaussianBlur in="SourceAlpha" stdDeviation="5"/>
+ </filter>
+ <rect id="rect1" x="50" y="100" width="50" height="50" fill="red"/>
+ <rect id="rect2" x="0" y="200" width="50" height="50" fill="lime"/>
+ <rect id="rect3" x="0" y="100" width="50" height="50" fill="lime"/>
+ <rect id="rect4" x="200" y="200" width="50" height="50" filter="url(#shadow)" fill="lime"/>
+</svg>
diff --git a/layout/reftests/svg/dynamic-rect-02-ref.svg b/layout/reftests/svg/dynamic-rect-02-ref.svg
new file mode 100644
index 0000000000..002627412d
--- /dev/null
+++ b/layout/reftests/svg/dynamic-rect-02-ref.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
+ <title>Reference for dynamic rect changes with filters</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=423998 -->
+ <filter id="shadow" filterUnits="objectBoundingBox">
+ <feGaussianBlur in="SourceAlpha" stdDeviation="5"/>
+ </filter>
+ <rect x="50" y="100" width="50" height="50" filter="url(#shadow)"/>
+ <rect x="200" y="100" width="50" height="50" filter="url(#shadow)"/>
+ <rect x="50" y="200" width="50" height="50" filter="url(#shadow)"/>
+</svg>
diff --git a/layout/reftests/svg/dynamic-rect-02.svg b/layout/reftests/svg/dynamic-rect-02.svg
new file mode 100644
index 0000000000..94f0e6444a
--- /dev/null
+++ b/layout/reftests/svg/dynamic-rect-02.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" onload="m();">
+ <title>Testcase for dynamic rect changes with filters</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=423998 -->
+ <script>
+ function m() {
+ document.getElementById("rect1").setAttribute("x", "50");
+ document.getElementById("rect2").setAttribute("transform", "translate(200,0)");
+ document.getElementById("rect3").setAttribute("filter", "url(#shadow)");
+ }
+ </script>
+ <filter id="shadow" filterUnits="objectBoundingBox">
+ <feGaussianBlur in="SourceAlpha" stdDeviation="5"/>
+ </filter>
+ <rect id="rect1" x="0" y="100" width="50" height="50" filter="url(#shadow)" />
+ <rect id="rect2" x="0" y="100" width="50" height="50" filter="url(#shadow)" />
+ <rect id="rect3" x="50" y="200" width="50" height="50"/>
+</svg>
diff --git a/layout/reftests/svg/dynamic-rect-03-ref.svg b/layout/reftests/svg/dynamic-rect-03-ref.svg
new file mode 100644
index 0000000000..4ecdb81075
--- /dev/null
+++ b/layout/reftests/svg/dynamic-rect-03-ref.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
+ <title>Reference for dynamic rect changes with filters</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=423998 -->
+ <filter id="shadow" filterUnits="objectBoundingBox">
+ <feGaussianBlur in="SourceAlpha" stdDeviation="5"/>
+ </filter>
+ <g filter="url(#shadow)">
+ <rect x="50" y="100" width="50" height="50"/>
+ <rect x="200" y="100" width="50" height="50"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/dynamic-rect-03.svg b/layout/reftests/svg/dynamic-rect-03.svg
new file mode 100644
index 0000000000..4b2fde7b2c
--- /dev/null
+++ b/layout/reftests/svg/dynamic-rect-03.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" onload="m();">
+ <title>Testcase for dynamic rect changes with filters</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=423998 -->
+ <script>
+ function m() {
+ document.getElementById("rect1").setAttribute("x", "50");
+ document.getElementById("rect2").setAttribute("transform", "translate(200,0)");
+ }
+ </script>
+ <filter id="shadow" filterUnits="objectBoundingBox">
+ <feGaussianBlur in="SourceAlpha" stdDeviation="5"/>
+ </filter>
+ <g filter="url(#shadow)">
+ <rect id="rect1" x="0" y="100" width="50" height="50" />
+ <rect id="rect2" x="0" y="100" width="50" height="50" />
+ </g>
+</svg>
diff --git a/layout/reftests/svg/dynamic-rect-04.xhtml b/layout/reftests/svg/dynamic-rect-04.xhtml
new file mode 100644
index 0000000000..479406edb7
--- /dev/null
+++ b/layout/reftests/svg/dynamic-rect-04.xhtml
@@ -0,0 +1,32 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>Testcase reference file dynamic svg creation</title>
+<!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=438867 -->
+<script>
+function m() {
+ var SVG_NS = "http://www.w3.org/2000/svg";
+ var svg = document.createElementNS(SVG_NS, 'svg');
+ svg.style.position = 'absolute';
+ svg.style.left = '0px';
+ svg.style.top = '0px';
+ svg.style.width = '100%';
+ svg.style.height = '100%';
+ document.body.appendChild(svg);
+
+ var rect = document.createElementNS(SVG_NS, "rect");
+ rect.setAttribute('width', '100%');
+ rect.setAttribute('height', '100%');
+ rect.setAttribute('fill', 'lime');
+ svg.appendChild(rect);
+}
+</script>
+</head>
+<body onload="m();">
+<hr style="clear: both;"/>
+</body>
+</html>
diff --git a/layout/reftests/svg/dynamic-rect-05.svg b/layout/reftests/svg/dynamic-rect-05.svg
new file mode 100644
index 0000000000..c3b2f08a52
--- /dev/null
+++ b/layout/reftests/svg/dynamic-rect-05.svg
@@ -0,0 +1,19 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+
+ <title>Testcase ensuring fill works if applied before onload</title>
+
+ <!-- For https://bugzilla.mozilla.org/show_bug.cgi?id=515080 -->
+
+ <rect id="rect" width="100%" height="100%" fill="red"/>
+
+ <script id="script" type="application/javascript">
+
+ document.documentElement.childNodes[5].setAttribute('fill', 'lime');
+
+ </script>
+
+</svg>
diff --git a/layout/reftests/svg/dynamic-reflow-01-ref.svg b/layout/reftests/svg/dynamic-reflow-01-ref.svg
new file mode 100644
index 0000000000..bd7f1977eb
--- /dev/null
+++ b/layout/reftests/svg/dynamic-reflow-01-ref.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
+ <rect id="test" x="100" y="100" width="100" height="100"
+ style="width: 200px"/>
+</svg>
diff --git a/layout/reftests/svg/dynamic-reflow-01.svg b/layout/reftests/svg/dynamic-reflow-01.svg
new file mode 100644
index 0000000000..a882ac8c7b
--- /dev/null
+++ b/layout/reftests/svg/dynamic-reflow-01.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
+ <rect id="test" x="100" y="100" width="100" height="100"/>
+ <script>
+ window.onload = function() {
+ var node = document.getElementById("test");
+ node.style.width = "200px";
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/dynamic-small-object-scaled-up-01.svg b/layout/reftests/svg/dynamic-small-object-scaled-up-01.svg
new file mode 100644
index 0000000000..5cc3214c7b
--- /dev/null
+++ b/layout/reftests/svg/dynamic-small-object-scaled-up-01.svg
@@ -0,0 +1,30 @@
+<!--
+ 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">
+ <title>Test invalidation of very small objects that have been scaled up</title>
+ <!--
+ From https://bugzilla.mozilla.org/show_bug.cgi?id=465996
+
+ The very small graphic that has been scaled up to be visible should
+ invalidate correctly when moved.
+ -->
+ <script type="text/javascript">//<![CDATA[
+
+function move_small_object()
+{
+ document.getElementById('circle').setAttribute("transform", "translate(-.2, -.2)");
+ document.documentElement.removeAttribute('class');
+}
+
+document.addEventListener("MozReftestInvalidate", move_small_object, false);
+setTimeout(move_small_object, 4000); // fallback for running outside reftest
+
+ //]]></script>
+ <rect width="100%" height="100%" fill="lime"/>
+ <g transform="scale(300, 300)">
+ <circle id="circle" cx=".05" cy=".05" r=".05"
+ fill="red" stroke="black" stroke-width="0.005" />
+ </g>
+</svg>
diff --git a/layout/reftests/svg/dynamic-small-object-scaled-up-02.svg b/layout/reftests/svg/dynamic-small-object-scaled-up-02.svg
new file mode 100644
index 0000000000..5b747b387a
--- /dev/null
+++ b/layout/reftests/svg/dynamic-small-object-scaled-up-02.svg
@@ -0,0 +1,30 @@
+<!--
+ 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">
+ <title>Test invalidation of very small objects that have been scaled up</title>
+ <!--
+ From https://bugzilla.mozilla.org/show_bug.cgi?id=465996
+
+ The very small graphic that has been scaled up to be visible should
+ invalidate correctly when moved.
+ -->
+ <script type="text/javascript">//<![CDATA[
+
+function move_small_object()
+{
+ document.getElementById('path').setAttribute("transform", "translate(-.2, -.2)");
+ document.documentElement.removeAttribute('class');
+}
+
+document.addEventListener("MozReftestInvalidate", move_small_object, false);
+setTimeout(move_small_object, 4000); // fallback for running outside reftest
+
+ //]]></script>
+ <rect width="100%" height="100%" fill="lime"/>
+ <g transform="scale(300, 300)">
+ <path id="path" transform="translate(.2, .2)" fill="red" stroke="black" stroke-width="0.005"
+ d="M 0.05 0 C 0.05 0.06666666 -0.05 0.06666666 -0.05 0 C -0.05 -0.0666666666 0.05 -0.06666666 0.05 0"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/dynamic-stroke-01.svg b/layout/reftests/svg/dynamic-stroke-01.svg
new file mode 100644
index 0000000000..a23375bdd5
--- /dev/null
+++ b/layout/reftests/svg/dynamic-stroke-01.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" class="reftest-wait">
+
+ <title>Test for changing stroke from none to a solid color value</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=939942 -->
+
+ <rect width="100%" height="100%" fill="red"/>
+
+ <rect id="r" width="100%" height="50%" y="25%" stroke="none" stroke-width="75%" fill="lime"/>
+
+ <script>
+ window.addEventListener("MozReftestInvalidate", function() {
+ document.getElementById("r").style.stroke = "lime";
+ document.documentElement.removeAttribute("class");
+ }, false);
+ </script>
+</svg>
diff --git a/layout/reftests/svg/dynamic-stroke-opacity-01.svg b/layout/reftests/svg/dynamic-stroke-opacity-01.svg
new file mode 100644
index 0000000000..4b80491988
--- /dev/null
+++ b/layout/reftests/svg/dynamic-stroke-opacity-01.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" class="reftest-wait">
+
+ <title>Test for changing stroke-opacity from 0 to non-zero</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=939942 -->
+
+ <rect width="100%" height="100%" fill="red"/>
+
+ <rect id="r" width="100%" height="50%" y="25%" stroke-opacity="0" stroke="lime" stroke-width="75%" fill="lime"/>
+
+ <script>
+ window.addEventListener("MozReftestInvalidate", function() {
+ document.getElementById("r").style.strokeOpacity = "1";
+ document.documentElement.removeAttribute("class");
+ }, false);
+ </script>
+</svg>
diff --git a/layout/reftests/svg/dynamic-stroke-width-01.svg b/layout/reftests/svg/dynamic-stroke-width-01.svg
new file mode 100644
index 0000000000..63090d1f6f
--- /dev/null
+++ b/layout/reftests/svg/dynamic-stroke-width-01.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" class="reftest-wait">
+
+ <title>Test for changing stroke-width from zero to non-zero</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=939942 -->
+
+ <rect width="100%" height="100%" fill="red"/>
+
+ <rect id="r" width="100%" height="50%" y="25%" stroke="lime" stroke-width="0" fill="lime"/>
+
+ <script>
+ window.addEventListener("MozReftestInvalidate", function() {
+ document.getElementById("r").style.strokeWidth = "75%";
+ document.documentElement.removeAttribute("class");
+ }, false);
+ </script>
+</svg>
diff --git a/layout/reftests/svg/dynamic-switch-01.svg b/layout/reftests/svg/dynamic-switch-01.svg
new file mode 100644
index 0000000000..cb9fcc599b
--- /dev/null
+++ b/layout/reftests/svg/dynamic-switch-01.svg
@@ -0,0 +1,56 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" onload="m();">
+ <title>Testcase for dynamic switch changes</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=409383 -->
+ <script>
+ function m() {
+ var svgns = "http://www.w3.org/2000/svg";
+
+ var rect1 = document.getElementById("rect1");
+ rect1.parentNode.removeChild(rect1);
+
+ var rect2a = document.createElementNS(svgns, "rect");
+ rect2a.setAttribute("x", "200");
+ rect2a.setAttribute("y", "100");
+ rect2a.setAttribute("width", "50");
+ rect2a.setAttribute("height", "50")
+ rect2a.setAttribute("fill", "lime");
+ var rect2b = document.getElementById("rect2b");
+ rect2b.parentNode.insertBefore(rect2a, rect2b);
+
+ var rect3a = document.getElementById("rect3a");
+ var rect3b = document.getElementById("rect3b");
+ rect3a.parentNode.insertBefore(rect3a, rect3b);
+
+ var rect4a = document.getElementById("rect4a");
+ rect4a.setAttribute("systemLanguage", "foo");
+ }
+ </script>
+
+ <rect width="100%" height="100%" fill="lime"/>
+
+ <switch>
+ <!-- test removing first child -->
+ <rect id="rect1" x="50" y="100" width="50" height="50" fill="red"/>
+ <rect x="50" y="100" width="50" height="50" fill="lime"/>
+ <rect x="50" y="100" width="50" height="50" fill="red"/>
+ </switch>
+ <switch>
+ <!-- test adding first child -->
+ <rect id="rect2b" x="200" y="100" width="50" height="50" fill="red"/>
+ </switch>
+ <switch>
+ <!-- test change child order -->
+ <rect id="rect3b" x="50" y="200" width="50" height="50" fill="red"/>
+ <rect id="rect3a" x="50" y="200" width="50" height="50" fill="lime"/>
+ </switch>
+ <switch>
+ <!-- test change child attribute -->
+ <rect id="rect4a" x="200" y="200" width="50" height="50" fill="red"/>
+ <rect x="200" y="200" width="50" height="50" fill="lime"/>
+ </switch>
+</svg>
diff --git a/layout/reftests/svg/dynamic-text-01-ref.svg b/layout/reftests/svg/dynamic-text-01-ref.svg
new file mode 100644
index 0000000000..6d1ab0307e
--- /dev/null
+++ b/layout/reftests/svg/dynamic-text-01-ref.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
+ <title>Reference for dynamic text changes</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=423998 -->
+ <text id="text1" x="50" y="100" font-size="50">Test1</text>
+ <text id="text2" x="200" y="100" font-size="50">Test2</text>
+ <text id="text3" x="50" y="200" font-size="50">Test3</text>
+ <text id="text4" x="200" y="200" font-size="50">Test4</text>
+ <text id="text5" x="50" y="300" font-size="50">Test5</text>
+ <text id="text6" x="200" y="300" font-size="50">Test6</text>
+</svg>
diff --git a/layout/reftests/svg/dynamic-text-01.svg b/layout/reftests/svg/dynamic-text-01.svg
new file mode 100644
index 0000000000..5134aa24ac
--- /dev/null
+++ b/layout/reftests/svg/dynamic-text-01.svg
@@ -0,0 +1,28 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" onload="m();">
+ <title>Testcase for dynamic text changes</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=423998 -->
+ <script>
+ function m() {
+ document.getElementById("text1").firstChild.nodeValue = "Test1";
+ document.getElementById("text2").setAttribute("x", "200");
+ document.getElementById("text3").setAttribute("font-size", "50");
+ document.getElementById("text4").setAttribute("font-size", "50");
+ document.getElementById("text5").setAttribute("transform", "translate(50,0)");
+ document.getElementById("text6").removeAttribute("filter");
+ }
+ </script>
+ <filter id="shadow" filterUnits="objectBoundingBox">
+ <feGaussianBlur in="SourceAlpha" stdDeviation="5"/>
+ </filter>
+ <text id="text1" x="50" y="100" font-size="50"> </text>
+ <text id="text2" x="0" y="100" font-size="50">Test2</text>
+ <text id="text3" x="50" y="200" font-size="5">Test3</text>
+ <text id="text4" x="200" y="200" font-size="100">Test4</text>
+ <text id="text5" x="0" y="300" font-size="50">Test5</text>
+ <text id="text6" x="200" y="300" filter="url(#shadow)" font-size="50">Test6</text>
+</svg>
diff --git a/layout/reftests/svg/dynamic-text-02-ref.svg b/layout/reftests/svg/dynamic-text-02-ref.svg
new file mode 100644
index 0000000000..64cc1e37e0
--- /dev/null
+++ b/layout/reftests/svg/dynamic-text-02-ref.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
+ <title>Reference for dynamic text changes with filters</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=423998 -->
+ <filter id="shadow" filterUnits="objectBoundingBox">
+ <feGaussianBlur in="SourceAlpha" stdDeviation="5"/>
+ </filter>
+ <text x="50" y="100" font-size="50" filter="url(#shadow)">Test1</text>
+ <text x="200" y="100" font-size="50" filter="url(#shadow)">Test2</text>
+ <text x="50" y="200" font-size="50" filter="url(#shadow)">Test3</text>
+ <text x="200" y="200" font-size="50" filter="url(#shadow)">Test4</text>
+ <text x="50" y="300" font-size="50" filter="url(#shadow)">Test5</text>
+ <text x="200" y="300" font-size="50" filter="url(#shadow)">Test6</text>
+</svg>
diff --git a/layout/reftests/svg/dynamic-text-02.svg b/layout/reftests/svg/dynamic-text-02.svg
new file mode 100644
index 0000000000..5df7e61c73
--- /dev/null
+++ b/layout/reftests/svg/dynamic-text-02.svg
@@ -0,0 +1,28 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" onload="m();">
+ <title>Testcase for dynamic text changes with filters</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=423998 -->
+ <script>
+ function m() {
+ document.getElementById("text1").firstChild.nodeValue = "Test1";
+ document.getElementById("text2").setAttribute("x", "200");
+ document.getElementById("text3").setAttribute("font-size", "50");
+ document.getElementById("text4").setAttribute("font-size", "50");
+ document.getElementById("text5").setAttribute("transform", "translate(50,0)");
+ document.getElementById("text6").setAttribute("filter", "url(#shadow)");
+ }
+ </script>
+ <filter id="shadow" filterUnits="objectBoundingBox">
+ <feGaussianBlur in="SourceAlpha" stdDeviation="5"/>
+ </filter>
+ <text id="text1" x="50" y="100" filter="url(#shadow)" font-size="50"> </text>
+ <text id="text2" x="0" y="100" filter="url(#shadow)" font-size="50">Test2</text>
+ <text id="text3" x="50" y="200" filter="url(#shadow)" font-size="5">Test3</text>
+ <text id="text4" x="200" y="200" filter="url(#shadow)" font-size="100">Test4</text>
+ <text id="text5" x="0" y="300" filter="url(#shadow)" font-size="50">Test5</text>
+ <text id="text6" x="200" y="300" font-size="50">Test6</text>
+</svg>
diff --git a/layout/reftests/svg/dynamic-text-03-ref.svg b/layout/reftests/svg/dynamic-text-03-ref.svg
new file mode 100644
index 0000000000..d50459fd0a
--- /dev/null
+++ b/layout/reftests/svg/dynamic-text-03-ref.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
+ <title>Reference for dynamic text changes with filters</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=423998 -->
+ <filter id="shadow" filterUnits="objectBoundingBox">
+ <feGaussianBlur in="SourceAlpha" stdDeviation="5"/>
+ </filter>
+ <g filter="url(#shadow)">
+ <text x="50" y="100" font-size="50">Test1</text>
+ <text x="200" y="100" font-size="50">Test2</text>
+ <text x="50" y="200" font-size="50">Test3</text>
+ <text x="200" y="200" font-size="50">Test4</text>
+ <text x="50" y="300" font-size="50">Test5</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/dynamic-text-03.svg b/layout/reftests/svg/dynamic-text-03.svg
new file mode 100644
index 0000000000..ecb0ba0f42
--- /dev/null
+++ b/layout/reftests/svg/dynamic-text-03.svg
@@ -0,0 +1,28 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" onload="m();">
+ <title>Testcase for dynamic text changes</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=423998 -->
+ <script>
+ function m() {
+ document.getElementById("text1").firstChild.nodeValue = "Test1";
+ document.getElementById("text2").setAttribute("x", "200");
+ document.getElementById("text3").setAttribute("font-size", "50");
+ document.getElementById("text4").setAttribute("font-size", "50");
+ document.getElementById("text5").setAttribute("transform", "translate(50,0)");
+ }
+ </script>
+ <filter id="shadow" filterUnits="objectBoundingBox">
+ <feGaussianBlur in="SourceAlpha" stdDeviation="5"/>
+ </filter>
+ <g filter="url(#shadow)" >
+ <text id="text1" x="50" y="100" font-size="50"> </text>
+ <text id="text2" x="0" y="100" font-size="50">Test2</text>
+ <text id="text3" x="50" y="200" font-size="5">Test3</text>
+ <text id="text4" x="200" y="200" font-size="100">Test4</text>
+ <text id="text5" x="0" y="300" font-size="50">Test5</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/dynamic-text-04-ref.svg b/layout/reftests/svg/dynamic-text-04-ref.svg
new file mode 100644
index 0000000000..fb81b2fbfc
--- /dev/null
+++ b/layout/reftests/svg/dynamic-text-04-ref.svg
@@ -0,0 +1,34 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
+
+ <title>Reference for dynamic changes of rotate attributes</title>
+
+ <!-- based on http://www.w3.org/TR/SVG/images/text/tspan05.svg -->
+
+ <text id="parent" font-size="32" x="40" y="40" rotate="5,15,25,35,45,55">
+ Not
+
+ <tspan id="child1" rotate="-10,-20,-30,-40">
+ all characters
+
+ <tspan id="child2" rotate="70,60,50,40,30,20,10">
+ in
+
+ <tspan id="child3">
+ the
+ </tspan>
+ </tspan>
+
+ <tspan x="40" y="90" id="child4">
+ text
+ </tspan>
+
+ have a
+ </tspan>
+
+ <tspan id="child5" rotate="-10">
+ specified
+ </tspan>
+
+ rotation
+ </text>
+</svg>
diff --git a/layout/reftests/svg/dynamic-text-04.svg b/layout/reftests/svg/dynamic-text-04.svg
new file mode 100644
index 0000000000..b2fab69ac5
--- /dev/null
+++ b/layout/reftests/svg/dynamic-text-04.svg
@@ -0,0 +1,49 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+ class="reftest-wait">
+
+ <title>Testcase for dynamic changes of rotate attributes</title>
+
+ <!-- based on http://www.w3.org/TR/SVG/images/text/tspan05.svg -->
+
+ <script type="text/javascript">
+
+document.addEventListener("MozReftestInvalidate", go, false);
+setTimeout(go, 4000); // fallback for running outside reftest
+
+function go() {
+ document.getElementById("parent").setAttribute("rotate", "5,15,25,35,45,55");
+ document.getElementById("child1").setAttribute("rotate", "-10,-20,-30,-40");
+ document.getElementById("child2").setAttribute("rotate", "70,60,50,40,30,20,10");
+ document.getElementById("child5").setAttribute("rotate", "-10");
+ document.documentElement.removeAttribute("class");
+}
+
+ </script>
+ <text id="parent" font-size="32" x="40" y="40">
+ Not
+
+ <tspan id="child1">
+ all characters
+
+ <tspan id="child2">
+ in
+
+ <tspan id="child3">
+ the
+ </tspan>
+ </tspan>
+
+ <tspan x="40" y="90" id="child4">
+ text
+ </tspan>
+
+ have a
+ </tspan>
+
+ <tspan id="child5" rotate="90">
+ specified
+ </tspan>
+
+ rotation
+ </text>
+</svg>
diff --git a/layout/reftests/svg/dynamic-text-05.svg b/layout/reftests/svg/dynamic-text-05.svg
new file mode 100644
index 0000000000..f1e8ddf625
--- /dev/null
+++ b/layout/reftests/svg/dynamic-text-05.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" class="reftest-wait">
+
+ <title>Testcase for text removal</title>
+
+ <script>
+ document.addEventListener("MozReftestInvalidate", doTest, false);
+ setTimeout(doTest, 4000); // fallback for running outside reftest
+
+ function doTest() {
+ document.getElementById("text").firstChild.nodeValue='';
+ document.documentElement.removeAttribute("class");
+ }
+ </script>
+ <rect width="100%" height="100%" fill="lime"/>
+ <text id="text" font-size="32" x="40" y="40">SHOULD NOT SEE ME</text>
+</svg>
diff --git a/layout/reftests/svg/dynamic-text-06.svg b/layout/reftests/svg/dynamic-text-06.svg
new file mode 100644
index 0000000000..8c4d0f851e
--- /dev/null
+++ b/layout/reftests/svg/dynamic-text-06.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" class="reftest-wait">
+ <script>
+ var curXScale = 3;
+ function sample() {
+ var g = document.getElementById("g");
+ g.setAttribute("transform", "scale(" + curXScale + " 1)");
+
+ if (curXScale > 1) {
+ curXScale -= 0.1;
+ setTimeout("sample()", 1);
+ } else {
+ document.documentElement.removeAttribute('class');
+ }
+ }
+ document.addEventListener("MozReftestInvalidate", sample, false);
+ setTimeout(sample, 4000); // fallback for running outside reftest
+ </script>
+
+ <rect width="100%" height="100%" fill="lime"/>
+ <g font-family="sans-serif" font-weight="bold" font-size="120px" id="g">
+ <text y="100">A</text>
+ <text y="250">V</text>
+ </g>
+ <rect width="100" height="100%" fill="lime"/>
+</svg>
diff --git a/layout/reftests/svg/dynamic-text-07-ref.svg b/layout/reftests/svg/dynamic-text-07-ref.svg
new file mode 100644
index 0000000000..cafd26bacc
--- /dev/null
+++ b/layout/reftests/svg/dynamic-text-07-ref.svg
@@ -0,0 +1,11 @@
+<!--
+ 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 to check whitespace handling</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=717870 -->
+
+ <text x="10" y="50" font-size="50">A B</text>
+</svg>
diff --git a/layout/reftests/svg/dynamic-text-07.svg b/layout/reftests/svg/dynamic-text-07.svg
new file mode 100644
index 0000000000..b2163094ab
--- /dev/null
+++ b/layout/reftests/svg/dynamic-text-07.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" class="reftest-wait" onload="m();">
+ <title>Testcase to check whitespace handling</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=717870 -->
+
+ <text id="t" x="10" y="50" font-size="50">A </text>
+ <script>
+ function m()
+ {
+ // Force frame construction
+ document.documentElement.getBoundingClientRect();
+
+ // A dynamic change
+ document.getElementById("t").appendChild(document.createTextNode("B"));
+
+ document.documentElement.removeAttribute("class");
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/dynamic-text-08-ref.svg b/layout/reftests/svg/dynamic-text-08-ref.svg
new file mode 100644
index 0000000000..cb443bc66c
--- /dev/null
+++ b/layout/reftests/svg/dynamic-text-08-ref.svg
@@ -0,0 +1,10 @@
+<!--
+ 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 scaling from zero</title>
+
+ <text x="100" y="50" font-size="50" text-anchor="middle">ABC</text>
+</svg>
diff --git a/layout/reftests/svg/dynamic-text-08.svg b/layout/reftests/svg/dynamic-text-08.svg
new file mode 100644
index 0000000000..ff55f28198
--- /dev/null
+++ b/layout/reftests/svg/dynamic-text-08.svg
@@ -0,0 +1,24 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait" onload="m();">
+
+ <title>Testcase to scaling from zero</title>
+
+ <g id="g" transform="scale(0)">
+ <text x="100" y="50" font-size="50" text-anchor="middle">ABC</text>
+ </g>
+ <script>
+ function m()
+ {
+ // Force frame construction
+ document.documentElement.getBoundingClientRect();
+
+ // A dynamic change
+ document.getElementById("g").removeAttribute("transform");
+
+ document.documentElement.removeAttribute("class");
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/dynamic-text-attr-01-ref.svg b/layout/reftests/svg/dynamic-text-attr-01-ref.svg
new file mode 100644
index 0000000000..9f47f153d8
--- /dev/null
+++ b/layout/reftests/svg/dynamic-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 modifying 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/dynamic-text-attr-01.svg b/layout/reftests/svg/dynamic-text-attr-01.svg
new file mode 100644
index 0000000000..3a58b46671
--- /dev/null
+++ b/layout/reftests/svg/dynamic-text-attr-01.svg
@@ -0,0 +1,46 @@
+<!--
+ 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 modifying attributes on child text content elements</title>
+
+ <text x="20" y="20" data-test="x=200">Test 1</text>
+ <text x="20" y="40" data-test="y=60">Test 2</text>
+ <text x="20" y="80" data-test="rotate=10">Test 3</text>
+ <text>
+ <tspan x="20" y="100" data-test="x=200">Test 4</tspan>
+ </text>
+ <text>
+ <tspan x="20" y="120" data-test="y=140">Test 5</tspan>
+ </text>
+ <text>
+ <tspan x="20" y="160" data-test="rotate=30">Test 6</tspan>
+ </text>
+ <path id="p" d="M 20,180 h 400"/>
+ <text>
+ <textPath xlink:href="#p" data-test="startOffset=180">Test 7</textPath>
+ </text>
+ <text x="20" y="200" textLength="100" lengthAdjust="spacing" data-test="lengthAdjust=spacingAndGlyphs">Test 8</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" data-test="lengthAdjust=spacingAndGlyphs">Test 9</tspan>
+ </text>
+
+ <script>
+ window.addEventListener("MozReftestInvalidate", function() {
+ [...document.querySelectorAll("[data-test]")].forEach(function(e) {
+ var [name, value] = e.getAttribute("data-test").split("=");
+ e.setAttribute(name, value);
+ });
+ document.documentElement.removeAttribute("class");
+ }, false);
+ </script>
+</svg>
diff --git a/layout/reftests/svg/dynamic-textPath-01-ref.svg b/layout/reftests/svg/dynamic-textPath-01-ref.svg
new file mode 100644
index 0000000000..b26811006a
--- /dev/null
+++ b/layout/reftests/svg/dynamic-textPath-01-ref.svg
@@ -0,0 +1,15 @@
+<!--
+ 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" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Referemce for dynamic changes to textPath</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=458010 -->
+ <defs>
+ <path id="m1" d="M 75.5 100 h 251"/>
+ </defs>
+
+ <text>
+ <textPath xlink:href="#m1" font-size="20" fill="black">Should see this</textPath>
+ </text>
+</svg>
diff --git a/layout/reftests/svg/dynamic-textPath-01.svg b/layout/reftests/svg/dynamic-textPath-01.svg
new file mode 100644
index 0000000000..01df1b70c5
--- /dev/null
+++ b/layout/reftests/svg/dynamic-textPath-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" version="1.1" class="reftest-wait" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Testing that dynamic changes to the element for a given ID are reflected in textPath</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=458010 -->
+ <defs>
+ <path id="x" d="M 75.5 100 h 251"/>
+ </defs>
+
+ <text>
+ <textPath xlink:href="#m1" font-size="20" fill="black">Should see this</textPath>
+ </text>
+
+ <script>
+ document.addEventListener("MozReftestInvalidate", doTest, false);
+ setTimeout(doTest, 4000); // fallback for running outside reftest
+
+ function doTest() {
+ // check that changing an id to "m1" lets l1 find it
+ var x = document.getElementById("x");
+ x.setAttribute("id", "m1");
+
+ document.documentElement.removeAttribute("class");
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/dynamic-textPath-02-ref.svg b/layout/reftests/svg/dynamic-textPath-02-ref.svg
new file mode 100644
index 0000000000..f4c1f6c02d
--- /dev/null
+++ b/layout/reftests/svg/dynamic-textPath-02-ref.svg
@@ -0,0 +1,14 @@
+<!--
+ 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 changes to the IDs in the document causing textPath references to update</title>
+
+ <defs>
+ <path id="p1" d="M 100,200 h 200"/>
+ </defs>
+
+ <text style="16px sans-serif"><textPath xlink:href="#p1">Hello</textPath></text>
+</svg>
diff --git a/layout/reftests/svg/dynamic-textPath-02.svg b/layout/reftests/svg/dynamic-textPath-02.svg
new file mode 100644
index 0000000000..6775258618
--- /dev/null
+++ b/layout/reftests/svg/dynamic-textPath-02.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">
+ <title>Test for changes to the IDs in the document causing textPath references to update</title>
+
+ <defs>
+ <path id="p1" d="M 100,100 h 200"/>
+ <path id="p1" d="M 100,200 h 200"/>
+ </defs>
+
+ <text style="16px sans-serif"><textPath xlink:href="#p1">Hello</textPath></text>
+
+ <script>
+ document.addEventListener("MozReftestInvalidate", doTest, false);
+ setTimeout(doTest, 4000); // fallback for running outside reftest
+
+ function doTest() {
+ document.getElementsByTagName("path")[0].removeAttribute("id");
+ document.documentElement.removeAttribute("class");
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/dynamic-textPath-03-ref.svg b/layout/reftests/svg/dynamic-textPath-03-ref.svg
new file mode 100644
index 0000000000..420bd5da97
--- /dev/null
+++ b/layout/reftests/svg/dynamic-textPath-03-ref.svg
@@ -0,0 +1,14 @@
+<!--
+ 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 changes to the IDs in the document causing textPath references to update</title>
+
+ <defs>
+ <path id="p1" d="M 100,100 h 200"/>
+ </defs>
+
+ <text style="16px sans-serif"><textPath xlink:href="#p1">Hello</textPath></text>
+</svg>
diff --git a/layout/reftests/svg/dynamic-textPath-03.svg b/layout/reftests/svg/dynamic-textPath-03.svg
new file mode 100644
index 0000000000..6c604daf0b
--- /dev/null
+++ b/layout/reftests/svg/dynamic-textPath-03.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" id="p1">
+ <title>Test for changes to the IDs in the document causing textPath references to update</title>
+
+ <defs>
+ <path id="p1" d="M 100,100 h 200"/>
+ </defs>
+
+ <text style="16px sans-serif"><textPath xlink:href="#p1">Hello</textPath></text>
+
+ <script>
+ document.addEventListener("MozReftestInvalidate", doTest, false);
+ setTimeout(doTest, 4000); // fallback for running outside reftest
+
+ function doTest() {
+ document.documentElement.removeAttribute("id");
+ document.documentElement.removeAttribute("class");
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/dynamic-textPath-04.html b/layout/reftests/svg/dynamic-textPath-04.html
new file mode 100644
index 0000000000..870f61fd19
--- /dev/null
+++ b/layout/reftests/svg/dynamic-textPath-04.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<html class="reftest-wait">
+<div id="frame" style="background-color:lime;">
+<svg style="width: 437px; height: 45px; overflow:visible;" viewBox="0 0 437 45">
+ <g font-size="40">
+ <text x="40" y="40" fill="red">BAD</text>
+ <text fill="lime" stroke="lime" stroke-width="4"><textPath href="#path">BAD</textPath></text>
+ </g>
+ <path id="path" d="M40 40 h 100" fill="transparent"></path>
+</svg>
+<style>
+html, body, div {
+ width: 100%;
+ height: 100%;
+ padding: none;
+ margin: 0;
+}
+</style>
+<script>
+ let container = document.getElementById('frame');
+ container.getBoundingClientRect();
+ setTimeout(function() {
+ container.style.pointerEvents = 'all';
+ document.documentElement.removeAttribute("class");
+ })
+</script>
+</div>
+</html>
diff --git a/layout/reftests/svg/dynamic-use-01.svg b/layout/reftests/svg/dynamic-use-01.svg
new file mode 100644
index 0000000000..75de1e8072
--- /dev/null
+++ b/layout/reftests/svg/dynamic-use-01.svg
@@ -0,0 +1,91 @@
+<!--
+ 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"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Testing that dynamic changes to the element for a given ID are reflected in 'use'</title>
+
+ <use id="u1" x="10%" xlink:href="#r1"/>
+ <script>
+ // force frame construction; test that parsing "r1" after frame construction
+ // is still bound to "u1" eventually
+ var rect = document.getElementById("u1").getBoundingClientRect();
+ </script>
+ <rect width="11%" height="100%" fill="lime" id="r1"/>
+
+ <rect width="11%" height="100%" fill="lime" id="x"/>
+ <use id="u2" x="20%" xlink:href="#r2"/>
+ <script>
+ var rect = document.getElementById("u2").getBoundingClientRect();
+ // check that changing an id to "r2" lets u2 find it
+ var r2 = document.getElementById("x");
+ r2.setAttribute("id", "r2");
+ </script>
+
+ <rect width="10%" height="100%" fill="red" id="r3"/>
+ <rect width="11%" height="100%" fill="lime" id="r3"/>
+ <use id="u3" x="30%" xlink:href="#r3"/>
+ <script>
+ var rect = document.getElementById("u3").getBoundingClientRect();
+ // check that removing the bad r3 lets u3 find the good one
+ var r3 = document.getElementById("r3");
+ r3.parentNode.removeChild(r3);
+ </script>
+
+ <rect width="10%" height="100%" fill="red" id="r4"/>
+ <rect width="11%" height="100%" fill="lime" id="r4"/>
+ <use id="u4" x="40%" xlink:href="#r4"/>
+ <script>
+ var rect = document.getElementById("u4").getBoundingClientRect();
+ // check that renaming the bad r4 lets u4 find the good one
+ var r4 = document.getElementById("r4");
+ r4.removeAttribute("id");
+ </script>
+
+ <rect width="10%" height="100%" fill="red" id="r5"/>
+ <use id="u5" x="50%" xlink:href="#r5"/>
+ <script>
+ var rect = document.getElementById("u5").getBoundingClientRect();
+ // check that changing u5's reference works
+ var u5 = document.getElementById("u5");
+ u5.setAttributeNS("http://www.w3.org/1999/xlink", "href", "#r1");
+ </script>
+
+ <rect width="10%" height="100%" fill="red" id="r6"/>
+ <rect width="11%" height="100%" fill="lime" id="r6-2"/>
+ <use id="u6" x="60%" xlink:href="#r6"/>
+ <script>
+ var rect = document.getElementById("u6").getBoundingClientRect();
+ // check that inserting a good element before the bad r6 works
+ var r6 = document.getElementById("r6-2");
+ r6.parentNode.removeChild(r6);
+ r6.setAttribute("id", "r6");
+ document.documentElement.insertBefore(r6, document.documentElement.firstChild);
+ </script>
+
+ <rect width="11%" height="100%" fill="lime" id="r7"/>
+ <rect width="10%" height="100%" fill="red" id="r7-2"/>
+ <use id="u7" x="70%" xlink:href="#r7"/>
+ <script>
+ var rect = document.getElementById("u7").getBoundingClientRect();
+ // check that inserting a bad element after a good one doesn't break anything
+ var r7 = document.getElementById("r7-2");
+ r7.parentNode.removeChild(r7);
+ r7.setAttribute("id", "r7");
+ document.documentElement.appendChild(r7);
+ </script>
+
+ <rect width="11%" height="100%" fill="lime" id="r8-2"/>
+ <rect width="10%" height="100%" fill="red" id="r8"/>
+ <use id="u8" x="80%" xlink:href="#r8"/>
+ <script>
+ var rect = document.getElementById("u8").getBoundingClientRect();
+ // check that renaming a good element to r8 works
+ var r8 = document.getElementById("r8-2");
+ r8.setAttribute("id", "r8");
+ </script>
+
+ <rect width="11%" height="100%" fill="lime"/>
+ <rect x="90%" width="11%" height="100%" fill="lime"/>
+</svg>
diff --git a/layout/reftests/svg/dynamic-use-02.svg b/layout/reftests/svg/dynamic-use-02.svg
new file mode 100644
index 0000000000..7a63eb14ee
--- /dev/null
+++ b/layout/reftests/svg/dynamic-use-02.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"
+ style="background: lime;">
+ <defs>
+ <rect width="100%" height="100%" id="r"/>
+ </defs>
+ <use id="u" xlink:href="#r" fill="red"/>
+ <script type="text/javascript">
+ var u = document.getElementById("u");
+ u.getBoundingClientRect();
+ u.removeAttributeNS("http://www.w3.org/1999/xlink", "href");
+ </script>
+</svg>
diff --git a/layout/reftests/svg/dynamic-use-03.svg b/layout/reftests/svg/dynamic-use-03.svg
new file mode 100644
index 0000000000..542b7e9355
--- /dev/null
+++ b/layout/reftests/svg/dynamic-use-03.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"
+ style="background: lime;" class="reftest-wait">
+ <defs>
+ <symbol id="r">
+ <rect fill="red" width="100%" height="100%"/>
+ </symbol>
+ </defs>
+ <use id="u" xlink:href="#r" />
+ <script type="text/javascript">
+
+ document.addEventListener("MozReftestInvalidate", doTest, false);
+ setTimeout(doTest, 4000); // fallback for running outside reftest
+
+ function doTest() {
+ var u = document.getElementById("u");
+ u.setAttribute("width", "0");
+ document.documentElement.removeAttribute('class');
+ }
+
+ </script>
+</svg>
diff --git a/layout/reftests/svg/dynamic-use-04.svg b/layout/reftests/svg/dynamic-use-04.svg
new file mode 100644
index 0000000000..9fa4632209
--- /dev/null
+++ b/layout/reftests/svg/dynamic-use-04.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="background: red;" class="reftest-wait">
+ <defs>
+ <symbol id="r">
+ <rect fill="lime" width="100%" height="100%"/>
+ </symbol>
+ </defs>
+ <use id="u" xlink:href="#r" width="0" />
+ <script type="text/javascript">
+ <![CDATA[
+
+ document.addEventListener("MozReftestInvalidate", doTest, false);
+ setTimeout(doTest, 4000); // fallback for running outside reftest
+
+ function doTest() {
+ // Setting a non-zero value for width here should show the entire
+ // referenced <rect>. See
+ // https://www.w3.org/TR/SVG2/struct.html#UseElement
+ var u = document.getElementById("u");
+ u.setAttribute("width", "100%");
+ document.documentElement.removeAttribute('class');
+ }
+
+ ]]>
+</script>
+</svg>
diff --git a/layout/reftests/svg/dynamic-use-05.svg b/layout/reftests/svg/dynamic-use-05.svg
new file mode 100644
index 0000000000..056c89c062
--- /dev/null
+++ b/layout/reftests/svg/dynamic-use-05.svg
@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="Windows-1252"?>
+<!--
+ 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="background: red;" class="reftest-wait">
+ <defs>
+ <symbol id="sym1">
+ <rect width="100" height="100" fill="lime" />
+ </symbol>
+ </defs>
+ <rect width="100%" height="100%" fill="lime"/>
+ <rect width="100" height="100" fill="red" />
+ <use id="u" xlink:href="#sym1" width="1" />
+ <script type="text/javascript">
+ <![CDATA[
+
+ document.addEventListener("MozReftestInvalidate", doTest, false);
+ setTimeout(doTest, 4000); // fallback for running outside reftest
+
+ function doTest() {
+ var u = document.getElementById("u");
+ u.setAttribute("width", "100");
+ document.documentElement.removeAttribute('class');
+ }
+
+ ]]>
+</script>
+</svg>
diff --git a/layout/reftests/svg/dynamic-use-06.svg b/layout/reftests/svg/dynamic-use-06.svg
new file mode 100644
index 0000000000..41974db946
--- /dev/null
+++ b/layout/reftests/svg/dynamic-use-06.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">
+ <defs>
+ <symbol id="sym1">
+ <rect width="100" height="100" fill="lime" />
+ </symbol>
+ </defs>
+ <rect width="100%" height="100%" fill="lime"/>
+ <rect x="50%" width="100" height="100" fill="red" />
+ <svg id="svg" width="50%">
+ <use x="50%" xlink:href="#sym1"/>
+ </svg>
+ <script type="text/javascript">
+ <![CDATA[
+
+ document.addEventListener("MozReftestInvalidate", doTest, false);
+ setTimeout(doTest, 4000); // fallback for running outside reftest
+
+ function doTest() {
+ var svg = document.getElementById("svg");
+ svg.setAttribute("width", "100%");
+ document.documentElement.removeAttribute('class');
+ }
+
+ ]]>
+ </script>
+</svg>
diff --git a/layout/reftests/svg/dynamic-use-07.svg b/layout/reftests/svg/dynamic-use-07.svg
new file mode 100644
index 0000000000..8591e7ac4a
--- /dev/null
+++ b/layout/reftests/svg/dynamic-use-07.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">
+
+ <title>Testing that dynamic changes to the text element for a given ID are reflected in 'use'</title>
+
+ <rect width="100%" height="100%" fill="lime"/>
+ <text id="t1" x="100" y="100" fill="lime" style="font: 16px sans-serif">hello <tspan fill="red">there</tspan></text>
+ <use y="100" xlink:href="#t1"/>
+
+ <script>
+ function test() {
+ document.getElementsByTagName("tspan")[0].style.fill = "lime";
+ document.documentElement.removeAttribute("class");
+ }
+ window.addEventListener("MozReftestInvalidate", test, false);
+ </script>
+</svg>
diff --git a/layout/reftests/svg/dynamic-use-08.svg b/layout/reftests/svg/dynamic-use-08.svg
new file mode 100644
index 0000000000..f6262654e2
--- /dev/null
+++ b/layout/reftests/svg/dynamic-use-08.svg
@@ -0,0 +1,30 @@
+<!--
+ 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>Testing dynamic changes to use positioning</title>
+
+ <style>
+ .use {
+ x: 100%;
+ }
+ </style>
+ <defs>
+ <rect id="r" width="100%" height="100%" fill="red"/>
+ </defs>
+ <rect width="100%" height="100%" fill="lime"/>
+ <use id="u" xlink:href="#r"/>
+
+ <script>
+ function test() {
+ document.getElementById("u").setAttribute("class", "use");
+ document.documentElement.removeAttribute("class");
+ }
+ window.addEventListener("MozReftestInvalidate", test, false);
+ setTimeout(test, 4000); // fallback for running outside reftest
+ </script>
+</svg>
diff --git a/layout/reftests/svg/dynamic-use-nested-01-ref.svg b/layout/reftests/svg/dynamic-use-nested-01-ref.svg
new file mode 100644
index 0000000000..8bdd26e902
--- /dev/null
+++ b/layout/reftests/svg/dynamic-use-nested-01-ref.svg
@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+ xmlns:xlink="http://www.w3.org/1999/xlink" >
+
+ <g style="fill: blue;">
+ <g id="g1">
+ <rect id="rect" x="20%" width="4%" height="100%"/>
+ </g>
+ </g>
+
+ <g style="fill: green;">
+ <g id="g2">
+ <use x="20%" xlink:href="#g1"/>
+ </g>
+ </g>
+
+ <g style="fill: red;">
+ <use x="20%" xlink:href="#g2"/>
+ </g>
+
+</svg>
diff --git a/layout/reftests/svg/dynamic-use-nested-01a.svg b/layout/reftests/svg/dynamic-use-nested-01a.svg
new file mode 100644
index 0000000000..2e14508664
--- /dev/null
+++ b/layout/reftests/svg/dynamic-use-nested-01a.svg
@@ -0,0 +1,33 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ onload="boom();">
+
+<script><![CDATA[
+
+// reftest for bug 467498
+
+function boom()
+{
+ var rect = document.getElementById("rect");
+ rect.setAttribute("height", "100%");
+}
+
+]]></script>
+
+ <g style="fill: blue;">
+ <g id="g1">
+ <rect id="rect" x="20%" width="4%" height="20%"/>
+ </g>
+ </g>
+
+ <g style="fill: green;">
+ <g id="g2">
+ <use x="20%" xlink:href="#g1"/>
+ </g>
+ </g>
+
+ <g style="fill: red;">
+ <use x="20%" xlink:href="#g2"/>
+ </g>
+
+</svg>
diff --git a/layout/reftests/svg/dynamic-use-nested-01b.svg b/layout/reftests/svg/dynamic-use-nested-01b.svg
new file mode 100644
index 0000000000..47b04ec1c6
--- /dev/null
+++ b/layout/reftests/svg/dynamic-use-nested-01b.svg
@@ -0,0 +1,34 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ onload="setTimeout(boom, 50);" class="reftest-wait">
+
+<script><![CDATA[
+
+// reftest for bug 467498
+
+function boom()
+{
+ var rect = document.getElementById("rect");
+ rect.setAttribute("height", "100%");
+ document.documentElement.removeAttribute('class');
+}
+
+]]></script>
+
+ <g style="fill: blue;">
+ <g id="g1">
+ <rect id="rect" x="20%" width="4%" height="20%"/>
+ </g>
+ </g>
+
+ <g style="fill: green;">
+ <g id="g2">
+ <use x="20%" xlink:href="#g1"/>
+ </g>
+ </g>
+
+ <g style="fill: red;">
+ <use x="20%" xlink:href="#g2"/>
+ </g>
+
+</svg>
diff --git a/layout/reftests/svg/dynamic-use-remove-width-ref.svg b/layout/reftests/svg/dynamic-use-remove-width-ref.svg
new file mode 100644
index 0000000000..bc4909e0c6
--- /dev/null
+++ b/layout/reftests/svg/dynamic-use-remove-width-ref.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<!-- this is a test for https://bugzilla.mozilla.org/show_bug.cgi?id=521682 -->
+
+ <defs>
+ <svg id="d">
+ <rect height="50%" width="100%" fill="blue" />
+ </svg>
+ </defs>
+
+ <use id="u" xlink:href="#d" height="100%" />
+
+</svg>
diff --git a/layout/reftests/svg/dynamic-use-remove-width.svg b/layout/reftests/svg/dynamic-use-remove-width.svg
new file mode 100644
index 0000000000..ca30f2cad1
--- /dev/null
+++ b/layout/reftests/svg/dynamic-use-remove-width.svg
@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<!-- this is a test for https://bugzilla.mozilla.org/show_bug.cgi?id=521682 -->
+
+ <defs>
+ <svg id="d">
+ <rect height="50%" width="100%" fill="blue" />
+ </svg>
+ </defs>
+
+ <use id="u" xlink:href="#d" height="100%" width="11%" />
+
+ <script>
+ function boom()
+ {
+ document.getElementById("u").removeAttribute("width");
+ }
+ window.addEventListener("load", boom, false);
+ </script>
+
+</svg>
diff --git a/layout/reftests/svg/dynamic-viewBox-change-01.svg b/layout/reftests/svg/dynamic-viewBox-change-01.svg
new file mode 100644
index 0000000000..8f6766dbe3
--- /dev/null
+++ b/layout/reftests/svg/dynamic-viewBox-change-01.svg
@@ -0,0 +1,24 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait"
+ id="target" viewBox="-50 -50 20 20"
+ preserveAspectRatio="none">
+ <script>
+ function doTest() {
+ var target = document.getElementById("target");
+ target.removeAttribute("viewBox");
+ document.documentElement.removeAttribute("class");
+ }
+
+ document.addEventListener("MozReftestInvalidate", doTest, false);
+ </script>
+
+ <!-- Lime background to match pass.svg -->
+ <rect height="100%" width="100%" fill="lime"/>
+
+ <!-- Offscreen red rect - the initial |viewBox| makes this visible,
+ but it shouldn't be visible after we remove that attribute: -->
+ <rect x="-50" y="-50" width="20" height="20" fill="red"/>
+</svg>
diff --git a/layout/reftests/svg/dynamic-viewBox-change-02.svg b/layout/reftests/svg/dynamic-viewBox-change-02.svg
new file mode 100644
index 0000000000..477341d0b2
--- /dev/null
+++ b/layout/reftests/svg/dynamic-viewBox-change-02.svg
@@ -0,0 +1,24 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait"
+ id="target" viewBox="-50 -50 20 20"
+ preserveAspectRatio="none">
+ <script>
+ function doTest() {
+ var target = document.getElementById("target");
+ target.setAttribute("viewBox", "");
+ document.documentElement.removeAttribute("class");
+ }
+
+ document.addEventListener("MozReftestInvalidate", doTest, false);
+ </script>
+
+ <!-- Lime background to match pass.svg -->
+ <rect height="100%" width="100%" fill="lime"/>
+
+ <!-- Offscreen red rect - the initial |viewBox| makes this visible,
+ but it shouldn't be visible after we clear that attribute: -->
+ <rect x="-50" y="-50" width="20" height="20" fill="red"/>
+</svg>
diff --git a/layout/reftests/svg/dynamic-viewBox-change-03.svg b/layout/reftests/svg/dynamic-viewBox-change-03.svg
new file mode 100644
index 0000000000..cb7f1d7a88
--- /dev/null
+++ b/layout/reftests/svg/dynamic-viewBox-change-03.svg
@@ -0,0 +1,24 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait"
+ id="target" viewBox="-50 -50 20 20"
+ preserveAspectRatio="none">
+ <script>
+ function doTest() {
+ var target = document.getElementById("target");
+ target.setAttribute("viewBox", "bogus value");
+ document.documentElement.removeAttribute("class");
+ }
+
+ document.addEventListener("MozReftestInvalidate", doTest, false);
+ </script>
+
+ <!-- Lime background to match pass.svg -->
+ <rect height="100%" width="100%" fill="lime"/>
+
+ <!-- Offscreen red rect - the initial |viewBox| makes this visible,
+ but it shouldn't be visible after we tweak that attribute: -->
+ <rect x="-50" y="-50" width="20" height="20" fill="red"/>
+</svg>
diff --git a/layout/reftests/svg/explosive-use.svg b/layout/reftests/svg/explosive-use.svg
new file mode 100644
index 0000000000..1985540df0
--- /dev/null
+++ b/layout/reftests/svg/explosive-use.svg
@@ -0,0 +1,413 @@
+<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+ <g id="thing">
+ <g id="t0a">
+ <use href="#t1a"/>
+ <use href="#t1b"/>
+ </g>
+ <g id="t0b">
+ <use href="#t1a"/>
+ <use href="#t1b"/>
+ </g>
+ <g id="t1a">
+ <use href="#t2a"/>
+ <use href="#t2b"/>
+ </g>
+ <g id="t1b">
+ <use href="#t2a"/>
+ <use href="#t2b"/>
+ </g>
+ <g id="t2a">
+ <use href="#t3a"/>
+ <use href="#t3b"/>
+ </g>
+ <g id="t2b">
+ <use href="#t3a"/>
+ <use href="#t3b"/>
+ </g>
+ <g id="t3a">
+ <use href="#t4a"/>
+ <use href="#t4b"/>
+ </g>
+ <g id="t3b">
+ <use href="#t4a"/>
+ <use href="#t4b"/>
+ </g>
+ <g id="t4a">
+ <use href="#t5a"/>
+ <use href="#t5b"/>
+ </g>
+ <g id="t4b">
+ <use href="#t5a"/>
+ <use href="#t5b"/>
+ </g>
+ <g id="t5a">
+ <use href="#t6a"/>
+ <use href="#t6b"/>
+ </g>
+ <g id="t5b">
+ <use href="#t6a"/>
+ <use href="#t6b"/>
+ </g>
+ <g id="t6a">
+ <use href="#t7a"/>
+ <use href="#t7b"/>
+ </g>
+ <g id="t6b">
+ <use href="#t7a"/>
+ <use href="#t7b"/>
+ </g>
+ <g id="t7a">
+ <use href="#t8a"/>
+ <use href="#t8b"/>
+ </g>
+ <g id="t7b">
+ <use href="#t8a"/>
+ <use href="#t8b"/>
+ </g>
+ <g id="t8a">
+ <use href="#t9a"/>
+ <use href="#t9b"/>
+ </g>
+ <g id="t8b">
+ <use href="#t9a"/>
+ <use href="#t9b"/>
+ </g>
+ <g id="t9a">
+ <use href="#t10a"/>
+ <use href="#t10b"/>
+ </g>
+ <g id="t9b">
+ <use href="#t10a"/>
+ <use href="#t10b"/>
+ </g>
+ <g id="t10a">
+ <use href="#t11a"/>
+ <use href="#t11b"/>
+ </g>
+ <g id="t10b">
+ <use href="#t11a"/>
+ <use href="#t11b"/>
+ </g>
+ <g id="t11a">
+ <use href="#t12a"/>
+ <use href="#t12b"/>
+ </g>
+ <g id="t11b">
+ <use href="#t12a"/>
+ <use href="#t12b"/>
+ </g>
+ <g id="t12a">
+ <use href="#t13a"/>
+ <use href="#t13b"/>
+ </g>
+ <g id="t12b">
+ <use href="#t13a"/>
+ <use href="#t13b"/>
+ </g>
+ <g id="t13a">
+ <use href="#t14a"/>
+ <use href="#t14b"/>
+ </g>
+ <g id="t13b">
+ <use href="#t14a"/>
+ <use href="#t14b"/>
+ </g>
+ <g id="t14a">
+ <use href="#t15a"/>
+ <use href="#t15b"/>
+ </g>
+ <g id="t14b">
+ <use href="#t15a"/>
+ <use href="#t15b"/>
+ </g>
+ <g id="t15a">
+ <use href="#t16a"/>
+ <use href="#t16b"/>
+ </g>
+ <g id="t15b">
+ <use href="#t16a"/>
+ <use href="#t16b"/>
+ </g>
+ <g id="t16a">
+ <use href="#t17a"/>
+ <use href="#t17b"/>
+ </g>
+ <g id="t16b">
+ <use href="#t17a"/>
+ <use href="#t17b"/>
+ </g>
+ <g id="t17a">
+ <use href="#t18a"/>
+ <use href="#t18b"/>
+ </g>
+ <g id="t17b">
+ <use href="#t18a"/>
+ <use href="#t18b"/>
+ </g>
+ <g id="t18a">
+ <use href="#t19a"/>
+ <use href="#t19b"/>
+ </g>
+ <g id="t18b">
+ <use href="#t19a"/>
+ <use href="#t19b"/>
+ </g>
+ <g id="t19a">
+ <use href="#t20a"/>
+ <use href="#t20b"/>
+ </g>
+ <g id="t19b">
+ <use href="#t20a"/>
+ <use href="#t20b"/>
+ </g>
+ <g id="t20a">
+ <use href="#t21a"/>
+ <use href="#t21b"/>
+ </g>
+ <g id="t20b">
+ <use href="#t21a"/>
+ <use href="#t21b"/>
+ </g>
+ <g id="t21a">
+ <use href="#t22a"/>
+ <use href="#t22b"/>
+ </g>
+ <g id="t21b">
+ <use href="#t22a"/>
+ <use href="#t22b"/>
+ </g>
+ <g id="t22a">
+ <use href="#t23a"/>
+ <use href="#t23b"/>
+ </g>
+ <g id="t22b">
+ <use href="#t23a"/>
+ <use href="#t23b"/>
+ </g>
+ <g id="t23a">
+ <use href="#t24a"/>
+ <use href="#t24b"/>
+ </g>
+ <g id="t23b">
+ <use href="#t24a"/>
+ <use href="#t24b"/>
+ </g>
+ <g id="t24a">
+ <use href="#t25a"/>
+ <use href="#t25b"/>
+ </g>
+ <g id="t24b">
+ <use href="#t25a"/>
+ <use href="#t25b"/>
+ </g>
+ <g id="t25a">
+ <use href="#t26a"/>
+ <use href="#t26b"/>
+ </g>
+ <g id="t25b">
+ <use href="#t26a"/>
+ <use href="#t26b"/>
+ </g>
+ <g id="t26a">
+ <use href="#t27a"/>
+ <use href="#t27b"/>
+ </g>
+ <g id="t26b">
+ <use href="#t27a"/>
+ <use href="#t27b"/>
+ </g>
+ <g id="t27a">
+ <use href="#t28a"/>
+ <use href="#t28b"/>
+ </g>
+ <g id="t27b">
+ <use href="#t28a"/>
+ <use href="#t28b"/>
+ </g>
+ <g id="t28a">
+ <use href="#t29a"/>
+ <use href="#t29b"/>
+ </g>
+ <g id="t28b">
+ <use href="#t29a"/>
+ <use href="#t29b"/>
+ </g>
+ <g id="t29a">
+ <use href="#t30a"/>
+ <use href="#t30b"/>
+ </g>
+ <g id="t29b">
+ <use href="#t30a"/>
+ <use href="#t30b"/>
+ </g>
+ <g id="t30a">
+ <use href="#t31a"/>
+ <use href="#t31b"/>
+ </g>
+ <g id="t30b">
+ <use href="#t31a"/>
+ <use href="#t31b"/>
+ </g>
+ <g id="t31a">
+ <use href="#t32a"/>
+ <use href="#t32b"/>
+ </g>
+ <g id="t31b">
+ <use href="#t32a"/>
+ <use href="#t32b"/>
+ </g>
+ <g id="t32a">
+ <use href="#t33a"/>
+ <use href="#t33b"/>
+ </g>
+ <g id="t32b">
+ <use href="#t33a"/>
+ <use href="#t33b"/>
+ </g>
+ <g id="t33a">
+ <use href="#t34a"/>
+ <use href="#t34b"/>
+ </g>
+ <g id="t33b">
+ <use href="#t34a"/>
+ <use href="#t34b"/>
+ </g>
+ <g id="t34a">
+ <use href="#t35a"/>
+ <use href="#t35b"/>
+ </g>
+ <g id="t34b">
+ <use href="#t35a"/>
+ <use href="#t35b"/>
+ </g>
+ <g id="t35a">
+ <use href="#t36a"/>
+ <use href="#t36b"/>
+ </g>
+ <g id="t35b">
+ <use href="#t36a"/>
+ <use href="#t36b"/>
+ </g>
+ <g id="t36a">
+ <use href="#t37a"/>
+ <use href="#t37b"/>
+ </g>
+ <g id="t36b">
+ <use href="#t37a"/>
+ <use href="#t37b"/>
+ </g>
+ <g id="t37a">
+ <use href="#t38a"/>
+ <use href="#t38b"/>
+ </g>
+ <g id="t37b">
+ <use href="#t38a"/>
+ <use href="#t38b"/>
+ </g>
+ <g id="t38a">
+ <use href="#t39a"/>
+ <use href="#t39b"/>
+ </g>
+ <g id="t38b">
+ <use href="#t39a"/>
+ <use href="#t39b"/>
+ </g>
+ <g id="t39a">
+ <use href="#t40a"/>
+ <use href="#t40b"/>
+ </g>
+ <g id="t39b">
+ <use href="#t40a"/>
+ <use href="#t40b"/>
+ </g>
+ <g id="t40a">
+ <use href="#t41a"/>
+ <use href="#t41b"/>
+ </g>
+ <g id="t40b">
+ <use href="#t41a"/>
+ <use href="#t41b"/>
+ </g>
+ <g id="t41a">
+ <use href="#t42a"/>
+ <use href="#t42b"/>
+ </g>
+ <g id="t41b">
+ <use href="#t42a"/>
+ <use href="#t42b"/>
+ </g>
+ <g id="t42a">
+ <use href="#t43a"/>
+ <use href="#t43b"/>
+ </g>
+ <g id="t42b">
+ <use href="#t43a"/>
+ <use href="#t43b"/>
+ </g>
+ <g id="t43a">
+ <use href="#t44a"/>
+ <use href="#t44b"/>
+ </g>
+ <g id="t43b">
+ <use href="#t44a"/>
+ <use href="#t44b"/>
+ </g>
+ <g id="t44a">
+ <use href="#t45a"/>
+ <use href="#t45b"/>
+ </g>
+ <g id="t44b">
+ <use href="#t45a"/>
+ <use href="#t45b"/>
+ </g>
+ <g id="t45a">
+ <use href="#t46a"/>
+ <use href="#t46b"/>
+ </g>
+ <g id="t45b">
+ <use href="#t46a"/>
+ <use href="#t46b"/>
+ </g>
+ <g id="t46a">
+ <use href="#t47a"/>
+ <use href="#t47b"/>
+ </g>
+ <g id="t46b">
+ <use href="#t47a"/>
+ <use href="#t47b"/>
+ </g>
+ <g id="t47a">
+ <use href="#t48a"/>
+ <use href="#t48b"/>
+ </g>
+ <g id="t47b">
+ <use href="#t48a"/>
+ <use href="#t48b"/>
+ </g>
+ <g id="t48a">
+ <use href="#t49a"/>
+ <use href="#t49b"/>
+ </g>
+ <g id="t48b">
+ <use href="#t49a"/>
+ <use href="#t49b"/>
+ </g>
+ <g id="t49a">
+ <use href="#t50a"/>
+ <use href="#t50b"/>
+ </g>
+ <g id="t49b">
+ <use href="#t50a"/>
+ <use href="#t50b"/>
+ </g>
+ <g id="t50a">
+ <circle cx="0" cy="0" r="5" />
+ </g>
+ <g id="t50b">
+ <circle cx="0" cy="0" r="5" />
+ </g>
+ </g>
+ </defs>
+ <use x="5" y="5" href="#thing"/>
+</svg>
diff --git a/layout/reftests/svg/fallback-color-01a.svg b/layout/reftests/svg/fallback-color-01a.svg
new file mode 100644
index 0000000000..3fedc0aa82
--- /dev/null
+++ b/layout/reftests/svg/fallback-color-01a.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" >
+
+<title>Testcase for fallback colours</title>
+
+<!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=368840 -->
+
+ <rect x="0%" y="0%" width="100%" height="100%" fill="red"/>
+ <line x1="0%" y1="50%" x2="100%" y2="50%" stroke="url(#null) lime" stroke-width="200%"/>
+</svg>
diff --git a/layout/reftests/svg/fallback-color-01b.svg b/layout/reftests/svg/fallback-color-01b.svg
new file mode 100644
index 0000000000..abc8206c68
--- /dev/null
+++ b/layout/reftests/svg/fallback-color-01b.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" >
+
+<title>Testcase for fallback colours</title>
+
+<!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=368840 -->
+
+ <rect x="0%" y="0%" width="100%" height="100%" fill="red"/>
+ <rect x="0%" y="0%" width="100%" height="100%" fill="url(#null) lime"/>
+</svg>
diff --git a/layout/reftests/svg/fallback-color-02-ref.svg b/layout/reftests/svg/fallback-color-02-ref.svg
new file mode 100644
index 0000000000..c9b9e32dfc
--- /dev/null
+++ b/layout/reftests/svg/fallback-color-02-ref.svg
@@ -0,0 +1,12 @@
+<!--
+ 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 stroke fallback colours</title>
+
+<!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=368840 -->
+
+ <rect x="0%" y="0%" width="100%" height="100%" fill="white"/>
+</svg>
diff --git a/layout/reftests/svg/fallback-color-02.svg b/layout/reftests/svg/fallback-color-02.svg
new file mode 100644
index 0000000000..e97da0ca66
--- /dev/null
+++ b/layout/reftests/svg/fallback-color-02.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" >
+
+<title>Testcase for fallback colours</title>
+
+<!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=368840 -->
+<!-- See also http://www.w3.org/Graphics/SVG/Test/20061213/htmlObjectHarness/full-pservers-grad-17-b.html -->
+
+ <line x1="0%" y1="50%" x2="100%" y2="50%" stroke="url(#null)" stroke-width="200%"/>
+</svg>
diff --git a/layout/reftests/svg/fallback-color-03.svg b/layout/reftests/svg/fallback-color-03.svg
new file mode 100644
index 0000000000..0beab9dc0a
--- /dev/null
+++ b/layout/reftests/svg/fallback-color-03.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" >
+
+<title>Testcase for fallback colours</title>
+
+<!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=368840 -->
+
+ <defs>
+ <linearGradient id="grad">
+ <stop offset="0" stop-color="black"/>
+ <stop offset="1" stop-color="white"/>
+ </linearGradient>
+ </defs>
+
+ <rect x="0%" y="0%" width="100%" height="100%" fill="red"/>
+ <line x1="0%" y1="50%" x2="100%" y2="50%" stroke="url(#grad) lime" stroke-width="200%"/>
+</svg>
diff --git a/layout/reftests/svg/fallback-color-04.svg b/layout/reftests/svg/fallback-color-04.svg
new file mode 100644
index 0000000000..556718140b
--- /dev/null
+++ b/layout/reftests/svg/fallback-color-04.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" >
+
+ <title>Testcase for fallback colours</title>
+
+ <defs>
+ <filter id="dilate">
+ <feMorphology operator="dilate" radius="6"/>
+ </filter>
+ </defs>
+
+ <rect x="0%" y="0%" width="100%" height="100%" fill="lime"/>
+ <text x="10" y="50" font-size="50"
+ stroke-width="8" stroke="red" fill="none">
+ A B
+ </text>
+ <text x="10" y="50" font-size="50"
+ stroke-width="8" stroke="url(#null) lime" fill="none" filter="url(#dilate)">
+ A B
+ </text>
+ <text x="200" y="50" font-size="50" fill="red">
+ A B
+ </text>
+ <text x="200" y="50" font-size="50" fill="url(#null) lime" filter="url(#dilate)">
+ A B
+ </text>
+ <text x="10" y="200" font-size="50" fill="red"
+ stroke-width="1" stroke="red">
+ A B
+ </text>
+ <text x="10" y="200" font-size="50" fill="url(#null) lime"
+ stroke-width="1" stroke="url(#null) lime" filter="url(#dilate)">
+ A B
+ </text>
+</svg>
diff --git a/layout/reftests/svg/fallback-color-05-ref.svg b/layout/reftests/svg/fallback-color-05-ref.svg
new file mode 100644
index 0000000000..a7031be7da
--- /dev/null
+++ b/layout/reftests/svg/fallback-color-05-ref.svg
@@ -0,0 +1,12 @@
+<!--
+ 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 context-fill fallback colour</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=1352258 -->
+
+ <rect width="100%" height="100%" fill="black"/>
+</svg>
diff --git a/layout/reftests/svg/fallback-color-05a.svg b/layout/reftests/svg/fallback-color-05a.svg
new file mode 100644
index 0000000000..537a15955c
--- /dev/null
+++ b/layout/reftests/svg/fallback-color-05a.svg
@@ -0,0 +1,12 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+
+ <title>Testcase for context-fill fallback colour</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=1352258 -->
+
+ <rect width="100%" height="100%" fill="context-fill"/>
+</svg>
diff --git a/layout/reftests/svg/fallback-color-05b.svg b/layout/reftests/svg/fallback-color-05b.svg
new file mode 100644
index 0000000000..a281172fd0
--- /dev/null
+++ b/layout/reftests/svg/fallback-color-05b.svg
@@ -0,0 +1,12 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+
+ <title>Testcase for context-stroke fallback colour</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=1807479 -->
+
+ <rect width="100%" height="100%" fill="context-stroke"/>
+</svg>
diff --git a/layout/reftests/svg/fallback-color-06.svg b/layout/reftests/svg/fallback-color-06.svg
new file mode 100644
index 0000000000..8fde9b1c5e
--- /dev/null
+++ b/layout/reftests/svg/fallback-color-06.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" >
+
+<title>Testcase for fallback colours</title>
+
+<!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=368840 -->
+
+ <rect x="0%" y="0%" width="100%" height="100%" fill="lime"/>
+ <rect x="0%" y="0%" width="100%" height="100%" fill="url(#null)"/>
+</svg>
diff --git a/layout/reftests/svg/filter-and-clip-ref.svg b/layout/reftests/svg/filter-and-clip-ref.svg
new file mode 100644
index 0000000000..e8c18009f7
--- /dev/null
+++ b/layout/reftests/svg/filter-and-clip-ref.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300">
+ <rect x="100" y="50" width="100" height="100" fill="green" />
+</svg>
diff --git a/layout/reftests/svg/filter-and-clip.svg b/layout/reftests/svg/filter-and-clip.svg
new file mode 100644
index 0000000000..be056a47f2
--- /dev/null
+++ b/layout/reftests/svg/filter-and-clip.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300">
+ <defs>
+ <filter id="shift">
+ <feOffset dx="50"/>
+ </filter>
+ <clipPath id="clip">
+ <rect x="100" y="50" width="100" height="100"/>
+ </clipPath>
+ </defs>
+ <rect x="100" y="50" width="100" height="100" fill="red"/>
+ <rect x="50" y="50" width="200" height="100" fill="green" filter="url(#shift)" clip-path="url(#clip)"/>
+</svg> \ No newline at end of file
diff --git a/layout/reftests/svg/filter-basic-01.svg b/layout/reftests/svg/filter-basic-01.svg
new file mode 100644
index 0000000000..23d3519f7c
--- /dev/null
+++ b/layout/reftests/svg/filter-basic-01.svg
@@ -0,0 +1,12 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" >
+
+ <title>Testcase for invalid filter</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=407463 -->
+
+ <rect x="0%" y="0%" width="100%" height="100%" fill="lime" filter="url(#null)"/>
+</svg>
diff --git a/layout/reftests/svg/filter-basic-02.svg b/layout/reftests/svg/filter-basic-02.svg
new file mode 100644
index 0000000000..02e1d35967
--- /dev/null
+++ b/layout/reftests/svg/filter-basic-02.svg
@@ -0,0 +1,16 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" >
+
+ <title>Testcase for invalid filter</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=407463 -->
+
+ <defs>
+ <filter id="null"/>
+ </defs>
+ <rect x="0%" y="0%" width="100%" height="100%" fill="lime"/>
+ <rect x="0%" y="0%" width="100%" height="100%" fill="red" filter="url(#null)"/>
+</svg>
diff --git a/layout/reftests/svg/filter-basic-03.svg b/layout/reftests/svg/filter-basic-03.svg
new file mode 100644
index 0000000000..e2f1db1adf
--- /dev/null
+++ b/layout/reftests/svg/filter-basic-03.svg
@@ -0,0 +1,16 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" >
+
+ <title>Testcase for invalid filter</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=407463 -->
+
+ <defs>
+ <filter id="nullreg" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%"/>
+ </defs>
+ <rect x="0%" y="0%" width="100%" height="100%" fill="lime"/>
+ <rect x="0%" y="0%" width="100%" height="100%" fill="red" filter="url(#nullreg)"/>
+</svg>
diff --git a/layout/reftests/svg/filter-bounds-01.svg b/layout/reftests/svg/filter-bounds-01.svg
new file mode 100644
index 0000000000..17bfeb60c1
--- /dev/null
+++ b/layout/reftests/svg/filter-bounds-01.svg
@@ -0,0 +1,24 @@
+<!--
+ 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"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+
+ <title>Testcase for checking that filter bounds include stroke width</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=647687 -->
+
+ <defs>
+ <filter id="f1" filterUnits="userSpaceOnUse" x="150" y="150" width="200" height="200">
+ <feOffset in="SourceGraphic"/>
+ </filter>
+ </defs>
+
+ <rect height="100%" width="100%" fill="lime"/>
+
+ <rect x="150" y="150" height="200" width="200" fill="red"/>
+
+ <rect x="200" y="200" height="100" width="100" stroke-width="100"
+ fill="none" stroke="lime" filter="url(#f1)"/>
+</svg>
diff --git a/layout/reftests/svg/filter-bounds-02.svg b/layout/reftests/svg/filter-bounds-02.svg
new file mode 100644
index 0000000000..d9c0d474c9
--- /dev/null
+++ b/layout/reftests/svg/filter-bounds-02.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" version="1.1"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+
+ <title>Testcase for checking that filter bounds include stroke width</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=647687 -->
+
+ <defs>
+ <filter id="f1" filterUnits="objectBoundingBox">
+ <feFlood flood-color="red"/>
+ </filter>
+ </defs>
+
+ <rect height="100%" width="100%" fill="lime"/>
+
+ <polygon points="200,200 300,200 300,300 200,300" stroke-width="100"
+ fill="none" stroke="lime" filter="url(#f1)"/>
+
+ <rect x="150" y="150" height="200" width="200" fill="lime"/>
+
+</svg>
diff --git a/layout/reftests/svg/filter-extref-differentOrigin-01.svg b/layout/reftests/svg/filter-extref-differentOrigin-01.svg
new file mode 100644
index 0000000000..ce5d632546
--- /dev/null
+++ b/layout/reftests/svg/filter-extref-differentOrigin-01.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" version="1.1"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+
+ <!-- In case we actually _can_ access the external resource (e.g. on Android
+ where reftests are served as http:// instead of file://), we include
+ this <use> element to be sure the resource loads before onload so that
+ we'll fail reliably. -->
+ <use xlink:href="../filters.svg#empty" />
+
+ <!-- giant lime rect, to match pass.svg -->
+ <rect height="100%" width="100%" fill="lime" />
+
+ <!-- The filter shouldn't resolve, so this should be transparent: -->
+ <rect height="100%" width="100%" fill="red"
+ filter="url(../filters.svg#NonWhiteToBlack)"/>
+</svg>
diff --git a/layout/reftests/svg/filter-foreignObject-01.svg b/layout/reftests/svg/filter-foreignObject-01.svg
new file mode 100644
index 0000000000..0fc9708ee5
--- /dev/null
+++ b/layout/reftests/svg/filter-foreignObject-01.svg
@@ -0,0 +1,16 @@
+<!--
+ 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"
+ xmlns:html="http://www.w3.org/1999/xhtml"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Testing that foreignobject works in filters</title>
+ <foreignObject width="100%" height="100%" filter="url(#f1)">
+ <html:div style="width:100%; height:100%; background:lime;">
+ </html:div>
+ </foreignObject>
+ <filter id="f1" x="0" y="0" width="100%" height="100%">
+ <feOffset/>
+ </filter>
+</svg>
diff --git a/layout/reftests/svg/filter-in-mask-01.svg b/layout/reftests/svg/filter-in-mask-01.svg
new file mode 100644
index 0000000000..06c987f241
--- /dev/null
+++ b/layout/reftests/svg/filter-in-mask-01.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" >
+ <defs>
+ <filter x="0" y="0" width="1" height="1" id="filter">
+ <feOffset/>
+ </filter>
+ <mask id="mask" x="0" y="0" width="1" height="1">
+ <g filter="url(#filter)">
+ <rect width="100%" height="100%" fill="white"/>
+ </g>
+ </mask>
+ </defs>
+ <rect width="100%" height="100%" fill="red"/>
+ <g mask="url(#mask)">
+ <rect width="100%" height="100%" fill="lime"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/filter-in-mask-ref.html b/layout/reftests/svg/filter-in-mask-ref.html
new file mode 100644
index 0000000000..be07a24d8c
--- /dev/null
+++ b/layout/reftests/svg/filter-in-mask-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html style lang=en>
+<meta charset=utf-8>
+</head>
+<body>
+ <svg viewBox="0 0 225 23" xmlns=http://www.w3.org/2000/svg>
+ <style>.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#fff}</style>
+ <defs>
+ <filter filterUnits=userSpaceOnUse height=22.9 id=Adobe_OpacityMaskFilter_3_ width=27 x=14 y=0>
+ <fecolormatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></fecolormatrix>
+ </filter>
+ </defs>
+ <mask height=22.9 id=mask-2_4_ maskUnits=userSpaceOnUse width=27 x=14 y=0>
+ <g>
+ <path class=st1 d="M0 0h170V23H0z" id=path-1_4_></path>
+ </g>
+ </mask>
+ <rect x=10 y=0 width=1000 height=100 fill=green></rect>
+ <rect x=10 y=0 width=1000 height=100 mask=url(#mask-2_4_) fill=red></rect>
+ <rect x=10 y=0 width=1000 height=6 fill=blue></rect>
+ </svg>
diff --git a/layout/reftests/svg/filter-in-mask.html b/layout/reftests/svg/filter-in-mask.html
new file mode 100644
index 0000000000..7bb8ddf28f
--- /dev/null
+++ b/layout/reftests/svg/filter-in-mask.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html style lang=en>
+<meta charset=utf-8>
+</head>
+<body>
+ <svg viewBox="0 0 225 23" xmlns=http://www.w3.org/2000/svg>
+ <style>.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#fff}</style>
+ <defs>
+ <filter filterUnits=userSpaceOnUse height=22.9 id=Adobe_OpacityMaskFilter_3_ width=27 x=14 y=0>
+ <fecolormatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></fecolormatrix>
+ </filter>
+ </defs>
+ <mask height=22.9 id=mask-2_4_ maskUnits=userSpaceOnUse width=27 x=14 y=0>
+ <g filter=url(#Adobe_OpacityMaskFilter_3_)>
+ <path class=st1 d="M0 0h170V23H0z" id=path-1_4_></path>
+ </g>
+ </mask>
+ <rect x=10 y=0 width=1000 height=100 fill=green></rect>
+ <rect x=10 y=0 width=1000 height=100 mask=url(#mask-2_4_) fill=red></rect>
+ <rect x=10 y=0 width=1000 height=6 fill=blue></rect>
+ </svg>
diff --git a/layout/reftests/svg/filter-invalidation-01.svg b/layout/reftests/svg/filter-invalidation-01.svg
new file mode 100644
index 0000000000..442b3a7312
--- /dev/null
+++ b/layout/reftests/svg/filter-invalidation-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" version="1.1" class="reftest-wait">
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=463939 -->
+ <title>Test that the area that's covered by a filtered element is invalidated when it moves</title>
+ <filter id="filter">
+ <feGaussianBlur stdDeviation="0.1"/>
+ </filter>
+ <script type="text/javascript">//<![CDATA[
+
+function hide_red_rect()
+{
+ document.getElementById("r").setAttribute("y", "-200%");
+ document.documentElement.removeAttribute('class');
+}
+
+document.addEventListener("MozReftestInvalidate", hide_red_rect, false);
+setTimeout(hide_red_rect, 4000); // fallback for running outside reftest
+
+ //]]></script>
+ <rect width="100%" height="100%" fill="lime"/>
+ <rect width="100%" height="100%" fill="red" id="r" filter="url(#filter)"/>
+</svg>
diff --git a/layout/reftests/svg/filter-on-continuation-box-01.html b/layout/reftests/svg/filter-on-continuation-box-01.html
new file mode 100644
index 0000000000..cc614f1e48
--- /dev/null
+++ b/layout/reftests/svg/filter-on-continuation-box-01.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<style type="text/css">
+ div {
+ border: 1px solid grey;
+ width: 100px;
+ color: black;
+ }
+</style>
+
+<div>
+ <span id="myspan">Wrapped sentence</span>
+</div>
+
+<script>
+ window.addEventListener("MozReftestInvalidate",
+ function() {
+ document.getElementById("myspan").style.filter = "opacity(50%)";
+ document.documentElement.classList.remove("reftest-wait");
+ });
+</script>
+
+</html> \ No newline at end of file
diff --git a/layout/reftests/svg/filter-on-continuation-box-ref.html b/layout/reftests/svg/filter-on-continuation-box-ref.html
new file mode 100644
index 0000000000..85dcc383a4
--- /dev/null
+++ b/layout/reftests/svg/filter-on-continuation-box-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<style type="text/css">
+ div {
+ border: 1px solid grey;
+ width: 100px;
+ color: rgba(0,0,0,0.5);
+ }
+</style>
+
+<div>
+ <span id="myspan">Wrapped sentence</span>
+</div>
+
+</html> \ No newline at end of file
diff --git a/layout/reftests/svg/filter-result-01-ref.svg b/layout/reftests/svg/filter-result-01-ref.svg
new file mode 100644
index 0000000000..cb84d3058a
--- /dev/null
+++ b/layout/reftests/svg/filter-result-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">
+
+ <title>Reference for filter result property</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=935902 -->
+
+ <defs>
+ <filter id="f1">
+ <feGaussianBlur id="gb" in="SourceGraphic" stdDeviation="4" result="blur"/>
+ <feColorMatrix values="1 0 0 0 0 0 0.333 0 0 0 0 0 1 0 0 0 0 0 1 0" in="blur"/>
+ </filter>
+ </defs>
+ <circle cx="100" cy="50" r="50" fill="yellow" filter="url('#f1')"/>
+</svg>
diff --git a/layout/reftests/svg/filter-result-01.svg b/layout/reftests/svg/filter-result-01.svg
new file mode 100644
index 0000000000..2a2a4cea2b
--- /dev/null
+++ b/layout/reftests/svg/filter-result-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" onload="createFilter();">
+
+ <title>Testcase for filter result property</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=935902 -->
+
+ <defs>
+ <filter id="f1">
+ <feGaussianBlur id="gb" in="SourceGraphic" stdDeviation="4"/>
+ <feColorMatrix values="1 0 0 0 0 0 0.333 0 0 0 0 0 1 0 0 0 0 0 1 0" in="blur"/>
+ </filter>
+ </defs>
+ <circle cx="100" cy="50" r="50" fill="yellow" filter="url('#f1')"/>
+ <script type="text/javascript">
+ function createFilter() {
+ document.getElementById('gb').result.baseVal = 'blur';
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/filter-scaled-01.svg b/layout/reftests/svg/filter-scaled-01.svg
new file mode 100644
index 0000000000..c85eb3bb84
--- /dev/null
+++ b/layout/reftests/svg/filter-scaled-01.svg
@@ -0,0 +1,18 @@
+<svg width="100%" height="100%" preserveAspectRatio="none"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+
+ <title>Testcase for scaled filter with non-integer x and y and objectBoundingBox</title>
+ <defs>
+ <filter id="filter" filterUnits="objectBoundingBox" x="0.5" y="0.5" width="0.25" height="0.25">
+ <feFlood flood-color="red" width="1" height="1" />
+ </filter>
+ </defs>
+
+ <rect width="100%" height="100%" fill="lime"/>
+ <g transform="scale(400)">
+ <rect width="1" height="1" filter="url(#filter)" />
+ </g>
+ <rect x="200" y="200" width="100" height="100" fill="lime" />
+
+</svg>
diff --git a/layout/reftests/svg/filter-scaled-02-ref.html b/layout/reftests/svg/filter-scaled-02-ref.html
new file mode 100644
index 0000000000..e0e4fa34a0
--- /dev/null
+++ b/layout/reftests/svg/filter-scaled-02-ref.html
@@ -0,0 +1,15 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+ <body style="-moz-transform: scale(1.4)">
+ <div style="position: absolute; top: 20px; left: 200px">
+ <svg width="200" viewBox="0 0 222 222">
+ <rect fill="green" x="120" y="100" width="100" height="120"/>
+ <rect fill="none" stroke="black" stroke-width="4"
+ x="120" y="100" width="100" height="120"/>
+ </svg>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/svg/filter-scaled-02.html b/layout/reftests/svg/filter-scaled-02.html
new file mode 100644
index 0000000000..a358f7e541
--- /dev/null
+++ b/layout/reftests/svg/filter-scaled-02.html
@@ -0,0 +1,25 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+ <head>
+ <title>Test case for scaled SVG with filter region</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=765107 -->
+ </head>
+ <body style="-moz-transform: scale(1.4)">
+ <div style="position: absolute; top: 20px; left: 200px">
+ <svg width="200" viewBox="0 0 222 222">
+ <filter id="filter" x="-20%" width="140%">
+ <feMerge>
+ <feMergeNode/>
+ </feMerge>
+ </filter>
+ <rect fill="green" x="120" y="100" width="100" height="120"
+ filter="url(#filter)"/>
+ <rect fill="none" stroke="black" stroke-width="4"
+ x="120" y="100" width="100" height="120"/>
+ </svg>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/svg/filter-translated-01-ref.svg b/layout/reftests/svg/filter-translated-01-ref.svg
new file mode 100644
index 0000000000..3a77724572
--- /dev/null
+++ b/layout/reftests/svg/filter-translated-01-ref.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+ <g transform="translate(100)">
+ <rect fill="lime" width="50" height="50"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/filter-translated-01.svg b/layout/reftests/svg/filter-translated-01.svg
new file mode 100644
index 0000000000..aeb1747524
--- /dev/null
+++ b/layout/reftests/svg/filter-translated-01.svg
@@ -0,0 +1,12 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+ <filter id="f" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
+ <feOffset/>
+ </filter>
+ <g transform="translate(100)" filter="url(#f)">
+ <rect fill="lime" width="50" height="50"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/filter-use-element-01.svg b/layout/reftests/svg/filter-use-element-01.svg
new file mode 100644
index 0000000000..48ff4f915e
--- /dev/null
+++ b/layout/reftests/svg/filter-use-element-01.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+ <filter id="myFilter" filterUnits="userSpaceOnUse" x="100" y="100" width="100" height="100">
+ <feGaussianBlur stdDeviation="20 10"/>
+ </filter>
+ <rect x="0" y="0" width="100" height="100" fill="red" id="abc"/>
+ </defs>
+ <rect x="0" y="0" width="100%" height="100%" fill="lime"/>
+ <use xlink:href="#abc" x="100" y="100" filter="url(#myFilter)"/>
+</svg> \ No newline at end of file
diff --git a/layout/reftests/svg/filtered-image-in-pattern-01.svg b/layout/reftests/svg/filtered-image-in-pattern-01.svg
new file mode 100644
index 0000000000..d24786d619
--- /dev/null
+++ b/layout/reftests/svg/filtered-image-in-pattern-01.svg
@@ -0,0 +1,14 @@
+<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
+ <defs>
+ <filter id="no-op">
+ <feColorMatrix type="saturate" values="1" />
+ </filter>
+ <pattern id="pattern" height="50%" width="50%">
+ <rect width="24" height="24" fill="red"/>
+ <!-- 100 x 100 lime image, bigger than the width/height of the element -->
+ <image href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAABh0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjA4ZXKc4QAAAeNJREFUeF7t0sERgDAQw0DSf9FAqvA+lBRwGsnnef/fgwzcIH3HQDEwAxiOs9QVSUEwAxjOapfO3YJgBjAcZ6krkoJgBjCc1S6duwXBDGA4zlJXJAXBDGA4q106dwuCGcBwnKWuSAqCGcBwVrt07hYEM4DhOEtdkRQEM4DhrHbp3C0IZgDDcZa6IikIZgDDWe3SuVsQzACG4yx1RVIQzACGs9qlc7cgmAEMx1nqiqQgmAEMZ7VL525BMAMYjrPUFUlBMAMYzmqXzt2CYAYwHGepK5KCYAYwnNUunbsFwQxgOM5SVyQFwQxgOKtdOncLghnAcJylrkgKghnAcFa7dO4WBDOA4ThLXZEUBDOA4ax26dwtCGYAw3GWuiIpCGYAw1nt0rlbEMwAhuMsdUVSEMwAhrPapXO3IJgBDMdZ6oqkIJgBDGe1S+duQTADGI6z1BVJQTADGM5ql87dgmAGMBxnqSuSgmAGMJzVLp27BcEMYDjOUlckBcEMYDirXTp3C4IZwHCcpa5ICoIZwHBWu3TuFgQzgOE4S12RFAQzgOGsduncLQhmAMNxlroiKQhmAMNZ7dK5WxDMAIbjLHVFUhDMAIaz2qVztyCYAQzHWeqKpCCYAQxntUvnbkEwAxiOs9QRyQemSBErQhZ+LAAAAABJRU5ErkJggg==" height="24" width="24" filter="url(#no-op)"/>
+ </pattern>
+ </defs>
+ <rect width="100%" height="100%" fill="lime"/>
+ <rect x="100" y="100" width="48" height="48" fill="url(#pattern)" />
+</svg>
diff --git a/layout/reftests/svg/filters-and-group-opacity-01-ref.svg b/layout/reftests/svg/filters-and-group-opacity-01-ref.svg
new file mode 100644
index 0000000000..14299cf9ec
--- /dev/null
+++ b/layout/reftests/svg/filters-and-group-opacity-01-ref.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <rect width="100%" height="200%" fill="white"/>
+ <rect width="100%" height="200%" fill="blue" fill-opacity=".5"/>
+</svg>
diff --git a/layout/reftests/svg/filters-and-group-opacity-01.svg b/layout/reftests/svg/filters-and-group-opacity-01.svg
new file mode 100644
index 0000000000..0c597809af
--- /dev/null
+++ b/layout/reftests/svg/filters-and-group-opacity-01.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">
+
+ <title>Test that filters and group opacity are applied in the correct order on an element</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=524104 -->
+
+ <filter id="filter" filterUnits="userSpaceOnUse" x="0" y="0" width="100%" height="100%">
+ <feFlood in="SourceGraphic" flood-color="blue"/>
+ </filter>
+
+ <rect width="1" height="1" filter="url(#filter)" opacity=".5"/>
+
+</svg>
diff --git a/layout/reftests/svg/filters/css-filter-chains/long-chain-ref.html b/layout/reftests/svg/filters/css-filter-chains/long-chain-ref.html
new file mode 100644
index 0000000000..573c6e419d
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filter-chains/long-chain-ref.html
@@ -0,0 +1,31 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filter Chains: Long Filter Chain</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <style type="text/css">
+ #target {
+ /* The first 8 CSS filter functions result in this color. */
+ background-color: rgba(118, 153, 44, 0.8);
+ /* Use an equivalent SVG filter for the last 2 CSS filter functions. */
+ filter: url(#blur-and-drop-shadow);
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a blurred green square with a green drop shadow.</p>
+ <div id="target"></div>
+ <svg width="0" height="0">
+ <filter id="blur-and-drop-shadow" x="-50" y="-50" width="200" height="200" filterUnits="userSpaceOnUse">
+ <feGaussianBlur stdDeviation="3" color-interpolation-filters="sRGB"/>
+ <feDropShadow dx="10" dy="10" stdDeviation="10" flood-color="#0f0" color-interpolation-filters="sRGB"/>
+ </filter>
+ </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filter-chains/long-chain.html b/layout/reftests/svg/filters/css-filter-chains/long-chain.html
new file mode 100644
index 0000000000..b99468eee2
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filter-chains/long-chain.html
@@ -0,0 +1,41 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filter Chains: Long Filter Chain</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#FilterProperty">
+ <link rel="match" href="long-chain-ref.html">
+ <meta name="assert"
+ content="Multiple chained CSS filter functions of different types should
+ render correctly.">
+ <style type="text/css">
+ #target {
+ /*
+ Chain together all 10 CSS filter functions defined in the Filter Effects
+ Level 1 specification.
+ */
+ filter: brightness(2)
+ contrast(0.4)
+ grayscale(0.2)
+ hue-rotate(270deg)
+ invert(0.6)
+ opacity(0.8)
+ saturate(10)
+ sepia(0.4)
+ blur(3px)
+ drop-shadow(10px 10px 10px #0f0);
+ background-color: red;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a blurred green square with a green drop shadow.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filter-chains/moz-element-ref.html b/layout/reftests/svg/filters/css-filter-chains/moz-element-ref.html
new file mode 100644
index 0000000000..a769783b2b
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filter-chains/moz-element-ref.html
@@ -0,0 +1,28 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters Chains: Use a Filtered Element as the Background of Another Element</title>
+ <style type="text/css">
+ #src {
+ background-color: #0f0;
+ width: 100px;
+ height: 100px;
+ }
+ #dest {
+ margin-top: 10px;
+ background: #0f0;
+ width: 200px;
+ height: 200px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a small green square followed by a large green square.</p>
+ <div id="src"></div>
+ <div id="dest"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filter-chains/moz-element.html b/layout/reftests/svg/filters/css-filter-chains/moz-element.html
new file mode 100644
index 0000000000..245f6a6464
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filter-chains/moz-element.html
@@ -0,0 +1,29 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters Chains: Use a Filtered Element as the Background of Another Element</title>
+ <style type="text/css">
+ #src {
+ filter: hue-rotate(90deg) saturate(10);
+ background-color: #f00;
+ width: 100px;
+ height: 100px;
+ }
+ #dest {
+ margin-top: 10px;
+ background: -moz-element(#src);
+ width: 200px;
+ height: 200px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a small green square followed by a large green square.</p>
+ <div id="src"></div>
+ <div id="dest"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filter-chains/reftest.list b/layout/reftests/svg/filters/css-filter-chains/reftest.list
new file mode 100644
index 0000000000..bb66b5041c
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filter-chains/reftest.list
@@ -0,0 +1,7 @@
+# These tests verify that CSS filter chains behave properly.
+# e.g. filter: blur(3px) grayscale(0.5) invert(0.2);
+
+# Some platforms render this complex filter chain a little differently, and that's ok.
+fuzzy(4-6,12000-19950) fuzzy-if(swgl,5-10,13600-20260) fuzzy-if(Android&&device&&!swgl,6-6,19986-19986) == long-chain.html long-chain-ref.html # Win10: Bug 1258241
+== moz-element.html moz-element-ref.html
+fuzzy-if(!useDrawSnapshot,13-15,7670-7982) fuzzy-if(!useDrawSnapshot&&swgl,11-12,14052-14056) fuzzy-if(Android&&device&&!swgl,13-13,13505-13505) == same-filter.html same-filter-ref.html
diff --git a/layout/reftests/svg/filters/css-filter-chains/same-filter-ref.html b/layout/reftests/svg/filters/css-filter-chains/same-filter-ref.html
new file mode 100644
index 0000000000..ff5de04da9
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filter-chains/same-filter-ref.html
@@ -0,0 +1,30 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filter Chains: Filters of the Same Type</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <style type="text/css">
+ #target {
+ filter: url(#blur);
+ background-color: #0f0;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a blurred green square.</p>
+ <div id="target"></div>
+ <svg width="0" height="0">
+ <filter id="blur" x="-50" y="-50" width="200" height="200" filterUnits="userSpaceOnUse">
+ <feGaussianBlur stdDeviation="1" color-interpolation-filters="sRGB"/>
+ <feGaussianBlur stdDeviation="2" color-interpolation-filters="sRGB"/>
+ <feGaussianBlur stdDeviation="3" color-interpolation-filters="sRGB"/>
+ </filter>
+ </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filter-chains/same-filter.html b/layout/reftests/svg/filters/css-filter-chains/same-filter.html
new file mode 100644
index 0000000000..9dd79d4db4
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filter-chains/same-filter.html
@@ -0,0 +1,28 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filter Chains: Filters of the Same Type</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#FilterProperty">
+ <link rel="match" href="same-filter-ref.html">
+ <meta name="assert"
+ content="Multiple chained CSS filter functions of the same type should
+ render correctly.">
+ <style type="text/css">
+ #target {
+ filter: blur(1px) blur(2px) blur(3px);
+ background-color: #0f0;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a blurred green square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/blur-calc-negative-ref.html b/layout/reftests/svg/filters/css-filters/blur-calc-negative-ref.html
new file mode 100644
index 0000000000..fc260c2e22
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/blur-calc-negative-ref.html
@@ -0,0 +1,27 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Blur an HTML Element Using a Negative Calc Function Value</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-blur">
+ <link rel="match" href="blur-calc-negative-ref.html">
+ <meta name="assert"
+ content="Given a calc() value that evaluates to a negative result, the
+ CSS blur filter function should not blur an HTML element.">
+ <style type="text/css">
+ #target {
+ background-color: #0f0;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a green square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/blur-calc-negative.html b/layout/reftests/svg/filters/css-filters/blur-calc-negative.html
new file mode 100644
index 0000000000..694c6cfc97
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/blur-calc-negative.html
@@ -0,0 +1,28 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Blur an HTML Element Using a Negative Calc Function Value</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-blur">
+ <link rel="match" href="blur-calc-negative-ref.html">
+ <meta name="assert"
+ content="Given a calc() value that evaluates to a negative result, the
+ CSS blur filter function should not blur an HTML element.">
+ <style type="text/css">
+ #target {
+ filter: blur(calc(-10px));
+ background-color: #0f0;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a green square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/blur-calc-ref.html b/layout/reftests/svg/filters/css-filters/blur-calc-ref.html
new file mode 100644
index 0000000000..8f35672749
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/blur-calc-ref.html
@@ -0,0 +1,23 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Blur an HTML Element Using a Calc Function Value</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <style type="text/css">
+ #target {
+ filter: blur(10px);
+ background-color: #0f0;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a blurred green square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/blur-calc.html b/layout/reftests/svg/filters/css-filters/blur-calc.html
new file mode 100644
index 0000000000..e4dc87e7d7
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/blur-calc.html
@@ -0,0 +1,28 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Blur an HTML Element Using a Calc Function Value</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-blur">
+ <link rel="match" href="blur-calc-ref.html">
+ <meta name="assert"
+ content="Given a calc() value that evaluates to a positive result, the
+ CSS blur filter function should blur an HTML element.">
+ <style type="text/css">
+ #target {
+ filter: blur(calc(2 * 5px));
+ background-color: #0f0;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a blurred green square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/blur-cap-large-radius-on-software-ref.html b/layout/reftests/svg/filters/css-filters/blur-cap-large-radius-on-software-ref.html
new file mode 100644
index 0000000000..4ad810f944
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/blur-cap-large-radius-on-software-ref.html
@@ -0,0 +1,22 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Cap Blur Radius When Rendering in Software</title>
+ <style type="text/css">
+ #target {
+ filter: blur(100px);
+ background-color: #0f0;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a blurred green square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/blur-cap-large-radius-on-software.html b/layout/reftests/svg/filters/css-filters/blur-cap-large-radius-on-software.html
new file mode 100644
index 0000000000..81da59e6cb
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/blur-cap-large-radius-on-software.html
@@ -0,0 +1,26 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Cap Blur Radius When Rendering in Software</title>
+ <!--
+ When rendering in software, Firefox should cap large blur radii to a smaller
+ value in order to keep performance acceptable.
+ -->
+ <style type="text/css">
+ #target {
+ filter: blur(1000000px);
+ background-color: #0f0;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a blurred green square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/blur-clip-rect.html b/layout/reftests/svg/filters/css-filters/blur-clip-rect.html
new file mode 100644
index 0000000000..5bb25b91b8
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/blur-clip-rect.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+ <title>CSS Filters: Blur an HTML Element and clip to the blur rect</title>
+ <style type="text/css">
+ #target {
+ filter: url(#blur);
+ width: 400px;
+ height: 400px;
+ }
+ #inner {
+ position: relative;
+ left: 100px;
+ top: 100px;
+ width: 100px;
+ height: 100px;
+ background-color: #00ff00;
+ }
+ body {
+ margin: 0px;
+ }
+ </style>
+</head>
+<body>
+ <div id="target">
+ <div id="inner"></div>
+ </div>
+ <svg width="0" height="0">
+ <filter id="blur" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse">
+ <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" x="100" y="100" width="100" height="100"/>
+ </filter>
+ </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/blur-em-radius-ref.html b/layout/reftests/svg/filters/css-filters/blur-em-radius-ref.html
new file mode 100644
index 0000000000..929fbb5ab5
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/blur-em-radius-ref.html
@@ -0,0 +1,28 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Blur an HTML Element Using a Radius in Ems</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <style type="text/css">
+ #target {
+ filter: url(#blur);
+ background-color: #0f0;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a blurred green square.</p>
+ <div id="target"></div>
+ <svg width="0" height="0">
+ <filter id="blur">
+ <feGaussianBlur stdDeviation="3" color-interpolation-filters="sRGB"/>
+ </filter>
+ </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/blur-em-radius.html b/layout/reftests/svg/filters/css-filters/blur-em-radius.html
new file mode 100644
index 0000000000..7ba53e0a2f
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/blur-em-radius.html
@@ -0,0 +1,29 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Blur an HTML Element Using a Radius in Ems</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-blur">
+ <link rel="match" href="blur-em-radius-ref.html">
+ <meta name="assert"
+ content="Given a valid blur radius in ems, the CSS blur filter function
+ should blur an HTML element.">
+ <style type="text/css">
+ #target {
+ filter: blur(0.3em);
+ font-size: 10px;
+ background-color: #0f0;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a blurred green square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/blur-invalid-radius-ref.html b/layout/reftests/svg/filters/css-filters/blur-invalid-radius-ref.html
new file mode 100644
index 0000000000..83f74e2b53
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/blur-invalid-radius-ref.html
@@ -0,0 +1,22 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Don't Change Element Rendering with Invalid Blur Radius</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <style type="text/css">
+ #target {
+ background-color: #0f0;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a green square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/blur-invalid-radius.html b/layout/reftests/svg/filters/css-filters/blur-invalid-radius.html
new file mode 100644
index 0000000000..aada289dd0
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/blur-invalid-radius.html
@@ -0,0 +1,28 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Don't Change Element Rendering with Invalid Blur Radius</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-blur">
+ <link rel="match" href="blur-invalid-radius-ref.html">
+ <meta name="assert"
+ content="Given an invalid blur radius, the CSS blur filter function
+ should not change the rendering of an HTML element.">
+ <style type="text/css">
+ #target {
+ filter: blur(3);
+ background-color: #0f0;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a green square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/blur-ref.html b/layout/reftests/svg/filters/css-filters/blur-ref.html
new file mode 100644
index 0000000000..62c4c8b9f4
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/blur-ref.html
@@ -0,0 +1,28 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Blur an HTML Element</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <style type="text/css">
+ #target {
+ filter: url(#blur);
+ background-color: #0f0;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a blurred green square.</p>
+ <div id="target"></div>
+ <svg width="0" height="0">
+ <filter id="blur">
+ <feGaussianBlur stdDeviation="3" color-interpolation-filters="sRGB"/>
+ </filter>
+ </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/blur-ref.svg b/layout/reftests/svg/filters/css-filters/blur-ref.svg
new file mode 100644
index 0000000000..5e7800a9e7
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/blur-ref.svg
@@ -0,0 +1,29 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg id="svg-root"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+
+ <g id="testmeta">
+ <title>CSS Filters: Blur an SVG Element</title>
+ <link rel="copyright"
+ href="http://www.w3.org/Graphics/SVG/Test/Copyright"/>
+ <link rel="license"
+ href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/>
+ <link rel="author"
+ title="Max Vujovic"
+ href="mailto:mvujovic@adobe.com"/>
+ <link rel="help"
+ href="http://www.w3.org/TR/filter-effects-1/#funcdef-blur"/>
+ <metadata class="flags">namespace svg</metadata>
+ </g>
+
+ <g id="test-body-content">
+ <filter id="blur" x="-50" y="-50" width="200" height="200" filterUnits="userSpaceOnUse">
+ <feGaussianBlur stdDeviation="3" color-interpolation-filters="sRGB"/>
+ </filter>
+ <rect x="20" y="20" width="100" height="100" fill="#0f0" filter="url(#blur)"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/filters/css-filters/blur-rem-radius-ref.html b/layout/reftests/svg/filters/css-filters/blur-rem-radius-ref.html
new file mode 100644
index 0000000000..1b4b104d8d
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/blur-rem-radius-ref.html
@@ -0,0 +1,31 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Blur an HTML Element Using a Radius in Rems</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <style type="text/css">
+ html {
+ font-size: 30px;
+ }
+ #target {
+ filter: url(#blur);
+ background-color: #0f0;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a blurred green square.</p>
+ <div id="target"></div>
+ <svg width="0" height="0">
+ <filter id="blur">
+ <feGaussianBlur stdDeviation="3" color-interpolation-filters="sRGB"/>
+ </filter>
+ </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/blur-rem-radius.html b/layout/reftests/svg/filters/css-filters/blur-rem-radius.html
new file mode 100644
index 0000000000..69fac9a2b3
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/blur-rem-radius.html
@@ -0,0 +1,32 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Blur an HTML Element Using a Radius in Rems</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-blur">
+ <link rel="match" href="blur-rem-radius-ref.html">
+ <meta name="assert"
+ content="Given a valid blur radius in rems, the CSS blur filter function
+ should blur an HTML element.">
+ <style type="text/css">
+ html {
+ font-size: 30px;
+ }
+ #target {
+ filter: blur(0.1rem);
+ font-size: 16px;
+ background-color: #0f0;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a blurred green square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/blur-zero-radius-ref.html b/layout/reftests/svg/filters/css-filters/blur-zero-radius-ref.html
new file mode 100644
index 0000000000..7af2485f53
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/blur-zero-radius-ref.html
@@ -0,0 +1,22 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Blur with Zero Radius</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <style type="text/css">
+ #target {
+ background-color: #0f0;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a green square. It should not be blurred.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/blur-zero-radius.html b/layout/reftests/svg/filters/css-filters/blur-zero-radius.html
new file mode 100644
index 0000000000..1bd099d898
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/blur-zero-radius.html
@@ -0,0 +1,27 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Blur with Zero Radius</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-blur">
+ <link rel="match" href="blur-zero-radius-ref.html">
+ <meta name="assert" content="Given a zero blur radius, the CSS blur filter
+ function will not blur an HTML element.">
+ <style type="text/css">
+ #target {
+ filter: blur(0);
+ background-color: #0f0;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a green square. It should not be blurred.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/blur-zoomed-page-ref.html b/layout/reftests/svg/filters/css-filters/blur-zoomed-page-ref.html
new file mode 100644
index 0000000000..f68659241c
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/blur-zoomed-page-ref.html
@@ -0,0 +1,30 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Blur on a 2x Zoomed Page</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <style type="text/css">
+ body {
+ margin: 2rem;
+ }
+ #target {
+ filter: url(#blur);
+ background-color: #0f0;
+ width: 200px;
+ height: 200px;
+ }
+ </style>
+</head>
+<body>
+ <div id="target"></div>
+ <svg width="0" height="0">
+ <filter id="blur" x="-100" y="-100" width="400" height="400" filterUnits="userSpaceOnUse">
+ <feGaussianBlur stdDeviation="6" color-interpolation-filters="sRGB"/>
+ </filter>
+ </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/blur-zoomed-page.html b/layout/reftests/svg/filters/css-filters/blur-zoomed-page.html
new file mode 100644
index 0000000000..98d7ad6610
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/blur-zoomed-page.html
@@ -0,0 +1,33 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html reftest-zoom="2.0">
+<head>
+ <title>CSS Filters: Blur on a 2x Zoomed Page</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-blur">
+ <link rel="match" href="blur-zoomed-page-ref.html">
+ <meta name="assert"
+ content="The results of the CSS blur filter function should scale up
+ proportionally when the page is zoomed. At 1x zoom, you should
+ see a blurred green square. At 2x zoom, you should see a
+ blurred green square with a blur radius that's twice as
+ large.">
+ <style type="text/css">
+ body {
+ margin: 1rem;
+ }
+ #target {
+ filter: blur(3px);
+ background-color: #0f0;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/blur.html b/layout/reftests/svg/filters/css-filters/blur.html
new file mode 100644
index 0000000000..3510824a0d
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/blur.html
@@ -0,0 +1,28 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Blur an HTML Element</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-blur">
+ <link rel="match" href="blur-ref.html">
+ <meta name="assert"
+ content="Given a valid blur radius, the CSS blur filter function should
+ blur an HTML element.">
+ <style type="text/css">
+ #target {
+ filter: blur(3px);
+ background-color: #0f0;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a blurred green square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/blur.svg b/layout/reftests/svg/filters/css-filters/blur.svg
new file mode 100644
index 0000000000..8c6cf9536d
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/blur.svg
@@ -0,0 +1,32 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg id="svg-root"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+
+ <g id="testmeta">
+ <title>CSS Filters: Blur an SVG Element</title>
+ <link rel="copyright"
+ href="http://www.w3.org/Graphics/SVG/Test/Copyright"/>
+ <link rel="license"
+ href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/>
+ <link rel="author"
+ title="Max Vujovic"
+ href="mailto:mvujovic@adobe.com"/>
+ <link rel="help"
+ href="http://www.w3.org/TR/filter-effects-1/#funcdef-blur"/>
+ <link rel="match"
+ href="blur-ref.svg"/>
+ <metadata class="flags">namespace svg</metadata>
+ <desc class="assert">
+ This test verifies that the CSS blur filter function can filter SVG
+ elements. If the test passes, you should see a green square.
+ </desc>
+ </g>
+
+ <g id="test-body-content">
+ <rect x="20" y="20" width="100" height="100" fill="#0f0" filter="blur(3px)"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/filters/css-filters/brightness-darken-ref.html b/layout/reftests/svg/filters/css-filters/brightness-darken-ref.html
new file mode 100644
index 0000000000..466164dd1d
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/brightness-darken-ref.html
@@ -0,0 +1,22 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Darken an HTML Element Using the Brightness Function</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <style type="text/css">
+ #target {
+ background-color: rgb(0, 64, 0);
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a dark green square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/brightness-darken.html b/layout/reftests/svg/filters/css-filters/brightness-darken.html
new file mode 100644
index 0000000000..544498e6b5
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/brightness-darken.html
@@ -0,0 +1,28 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Darken an HTML Element Using the Brightness Function</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-brightness">
+ <link rel="match" href="brightness-darken-ref.html">
+ <meta name="assert"
+ content="Given a factor less than one, the CSS brightness filter
+ function should darken the color of an HTML element.">
+ <style type="text/css">
+ #target {
+ filter: brightness(0.25);
+ background-color: #0f0;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a dark green square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/brightness-extreme-ref.html b/layout/reftests/svg/filters/css-filters/brightness-extreme-ref.html
new file mode 100644
index 0000000000..c38cd9a5bd
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/brightness-extreme-ref.html
@@ -0,0 +1,22 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Brighten an HTML Element Using a Large Factor</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <style type="text/css">
+ #target {
+ background-color: #0f0;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a bright green square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/brightness-extreme.html b/layout/reftests/svg/filters/css-filters/brightness-extreme.html
new file mode 100644
index 0000000000..11a7a68949
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/brightness-extreme.html
@@ -0,0 +1,28 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Brighten an HTML Element Using a Large Factor</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-brightness">
+ <link rel="match" href="brightness-extreme-ref.html">
+ <meta name="assert"
+ content="Given a large factor, the CSS brightness filter function should
+ completely change the color of an HTML element.">
+ <style type="text/css">
+ #target {
+ filter: brightness(1000);
+ background-color: rgb(0, 1, 0);
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a bright green square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/brightness-one-ref.html b/layout/reftests/svg/filters/css-filters/brightness-one-ref.html
new file mode 100644
index 0000000000..79e59d3403
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/brightness-one-ref.html
@@ -0,0 +1,22 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Brighten an HTML Element Using a Factor of One</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <style type="text/css">
+ #target {
+ background-color: rgb(0, 128, 0);
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a green square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/brightness-one.html b/layout/reftests/svg/filters/css-filters/brightness-one.html
new file mode 100644
index 0000000000..9e061eab6c
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/brightness-one.html
@@ -0,0 +1,28 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Brighten an HTML Element Using a Factor of One</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-brightness">
+ <link rel="match" href="brightness-one-ref.html">
+ <meta name="assert"
+ content="Given a factor of one, the CSS brightness filter function
+ should not change the color of an HTML element.">
+ <style type="text/css">
+ #target {
+ filter: brightness(1);
+ background-color: rgb(0, 128, 0);
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a green square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/brightness-percent-ref.html b/layout/reftests/svg/filters/css-filters/brightness-percent-ref.html
new file mode 100644
index 0000000000..bd62450884
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/brightness-percent-ref.html
@@ -0,0 +1,22 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Brighten an HTML Element Using a Percentage</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <style type="text/css">
+ #target {
+ background-color: rgb(0, 128, 0);
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a green square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/brightness-percent.html b/layout/reftests/svg/filters/css-filters/brightness-percent.html
new file mode 100644
index 0000000000..cbe1477728
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/brightness-percent.html
@@ -0,0 +1,28 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Brighten an HTML Element Using a Percentage</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-brightness">
+ <link rel="match" href="brightness-percent-ref.html">
+ <meta name="assert"
+ content="Given a percentage, the CSS brightness filter function should
+ change the color of an HTML element.">
+ <style type="text/css">
+ #target {
+ filter: brightness(400%);
+ background-color: rgb(0, 32, 0);
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a green square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/brightness-ref.html b/layout/reftests/svg/filters/css-filters/brightness-ref.html
new file mode 100644
index 0000000000..31ca2a729a
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/brightness-ref.html
@@ -0,0 +1,22 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Brighten an HTML Element</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <style type="text/css">
+ #target {
+ background-color: rgb(0, 128, 0);
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a green square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/brightness-zero-ref.html b/layout/reftests/svg/filters/css-filters/brightness-zero-ref.html
new file mode 100644
index 0000000000..f49520c258
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/brightness-zero-ref.html
@@ -0,0 +1,22 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Darken an HTML Element Using the Brightness Function and a Factor of Zero</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <style type="text/css">
+ #target {
+ background-color: black;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a black square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/brightness-zero.html b/layout/reftests/svg/filters/css-filters/brightness-zero.html
new file mode 100644
index 0000000000..71670a7fe2
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/brightness-zero.html
@@ -0,0 +1,28 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Darken an HTML Element Using the Brightness Function and a Factor of Zero</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-brightness">
+ <link rel="match" href="brightness-zero-ref.html">
+ <meta name="assert"
+ content="Given a factor of zero, the CSS brightness filter function
+ should change the color of an HTML element to black.">
+ <style type="text/css">
+ #target {
+ filter: brightness(0);
+ background-color: #f00;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a black square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/brightness.html b/layout/reftests/svg/filters/css-filters/brightness.html
new file mode 100644
index 0000000000..92e7f0ec00
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/brightness.html
@@ -0,0 +1,28 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Brighten an HTML Element</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-brightness">
+ <link rel="match" href="brightness-ref.html">
+ <meta name="assert"
+ content="The CSS brightness filter function should change the color of
+ an HTML element.">
+ <style type="text/css">
+ #target {
+ filter: brightness(4);
+ background-color: rgb(0, 32, 0);
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a green square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/containing-block-1-ref.html b/layout/reftests/svg/filters/css-filters/containing-block-1-ref.html
new file mode 100644
index 0000000000..696893b47f
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/containing-block-1-ref.html
@@ -0,0 +1,5 @@
+<!DOCTYPE HTML>
+<body>
+<div style="position:absolute; left:150px; top:150px; width:200px; height:200px; background:lime;"></div>
+<div style="position:absolute; left:180px; top:180px; width:200px; height:200px; background:yellow;"></div>
+
diff --git a/layout/reftests/svg/filters/css-filters/containing-block-1.html b/layout/reftests/svg/filters/css-filters/containing-block-1.html
new file mode 100644
index 0000000000..503f6ee35a
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/containing-block-1.html
@@ -0,0 +1,6 @@
+<!DOCTYPE HTML>
+<body style="margin:0">
+<div style="margin:100px; width:100px; height:100px; filter:opacity(1);">
+ <div style="position:absolute; left:50px; top:50px; width:200px; height:200px; background:lime;"></div>
+ <div style="position:fixed; left:80px; top:80px; width:200px; height:200px; background:yellow;"></div>
+</div>
diff --git a/layout/reftests/svg/filters/css-filters/contrast-extreme-ref.html b/layout/reftests/svg/filters/css-filters/contrast-extreme-ref.html
new file mode 100644
index 0000000000..c276e8bca7
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/contrast-extreme-ref.html
@@ -0,0 +1,22 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Increase the Contrast of an HTML Element Using a Large Factor</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <style type="text/css">
+ #target {
+ background-color: #0f0;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a bright green square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/contrast-extreme.html b/layout/reftests/svg/filters/css-filters/contrast-extreme.html
new file mode 100644
index 0000000000..e5b80f8ed6
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/contrast-extreme.html
@@ -0,0 +1,29 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Increase the Contrast of an HTML Element Using a Large Factor</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-contrast">
+ <link rel="match" href="contrast-extreme-ref.html">
+ <meta name="assert"
+ content="Given a large factor, the CSS contrast filter function should
+ should change color channel values to be much farther from
+ their middle value.">
+ <style type="text/css">
+ #target {
+ filter: contrast(1000);
+ background-color: rgb(127, 129, 127); /* 127 should change to 0, and 129 should change to 255. */
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a bright green square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/contrast-one-ref.html b/layout/reftests/svg/filters/css-filters/contrast-one-ref.html
new file mode 100644
index 0000000000..90df359cc1
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/contrast-one-ref.html
@@ -0,0 +1,22 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Set the Contrast of HTML Element Using a Factor of One</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <style type="text/css">
+ #target {
+ background-color: rgb(0, 128, 0);
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a green square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/contrast-one.html b/layout/reftests/svg/filters/css-filters/contrast-one.html
new file mode 100644
index 0000000000..c7c4cca19a
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/contrast-one.html
@@ -0,0 +1,28 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Set the Contrast of HTML Element Using a Factor of One</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-contrast">
+ <link rel="match" href="contrast-one-ref.html">
+ <meta name="assert"
+ content="Given a factor of one, the CSS contrast filter function
+ should not change the color of an HTML element.">
+ <style type="text/css">
+ #target {
+ filter: contrast(1);
+ background-color: rgb(0, 128, 0);
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a green square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/contrast-percent-ref.html b/layout/reftests/svg/filters/css-filters/contrast-percent-ref.html
new file mode 100644
index 0000000000..84f5eb0410
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/contrast-percent-ref.html
@@ -0,0 +1,22 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Increase the Contrast of an HTML Element</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <style type="text/css">
+ #target {
+ background-color: #0f0;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a bright green square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/contrast-percent.html b/layout/reftests/svg/filters/css-filters/contrast-percent.html
new file mode 100644
index 0000000000..7d0337f642
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/contrast-percent.html
@@ -0,0 +1,28 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Increase the Contrast of an HTML Element</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-contrast">
+ <link rel="match" href="contrast-percent-ref.html">
+ <meta name="assert"
+ content="Given a percentage, the CSS contrast filter function should
+ change the color of an HTML element.">
+ <style type="text/css">
+ #target {
+ filter: contrast(200%);
+ background-color: rgb(0, 196, 0);
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a bright green square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/contrast-reduce-ref.html b/layout/reftests/svg/filters/css-filters/contrast-reduce-ref.html
new file mode 100644
index 0000000000..ef169da13b
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/contrast-reduce-ref.html
@@ -0,0 +1,22 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Reduce the Contrast of an HTML Element</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <style type="text/css">
+ #target {
+ background-color: rgb(64, 191, 64);
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a green square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/contrast-reduce.html b/layout/reftests/svg/filters/css-filters/contrast-reduce.html
new file mode 100644
index 0000000000..f4482d4937
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/contrast-reduce.html
@@ -0,0 +1,29 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Reduce the Contrast of an HTML Element</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-contrast">
+ <link rel="match" href="contrast-reduce-ref.html">
+ <meta name="assert"
+ content="Given a factor of less than one, the CSS contrast filter
+ function should change color channel values to be closer to
+ their middle value.">
+ <style type="text/css">
+ #target {
+ filter: contrast(0.5);
+ background-color: #0f0;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a green square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/contrast-ref.html b/layout/reftests/svg/filters/css-filters/contrast-ref.html
new file mode 100644
index 0000000000..84f5eb0410
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/contrast-ref.html
@@ -0,0 +1,22 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Increase the Contrast of an HTML Element</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <style type="text/css">
+ #target {
+ background-color: #0f0;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a bright green square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/contrast-zero-ref.html b/layout/reftests/svg/filters/css-filters/contrast-zero-ref.html
new file mode 100644
index 0000000000..5f1a1f6ea6
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/contrast-zero-ref.html
@@ -0,0 +1,23 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Reduce the Contrast of an HTML Element Using a Factor of Zero</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <style type="text/css">
+ #target {
+ filter: contrast(0);
+ background-color: rgb(128, 128, 128);
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a gray square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/contrast-zero.html b/layout/reftests/svg/filters/css-filters/contrast-zero.html
new file mode 100644
index 0000000000..59db11b60c
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/contrast-zero.html
@@ -0,0 +1,28 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Reduce the Contrast of an HTML Element Using a Factor of Zero</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-contrast">
+ <link rel="match" href="contrast-zero-ref.html">
+ <meta name="assert"
+ content="Given a factor of zero, the CSS contrast filter function
+ should change the color of an HTML element to gray.">
+ <style type="text/css">
+ #target {
+ filter: contrast(0);
+ background-color: rgb(0, 128, 0);
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a gray square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/contrast.html b/layout/reftests/svg/filters/css-filters/contrast.html
new file mode 100644
index 0000000000..e12b6ebbc9
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/contrast.html
@@ -0,0 +1,28 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Increase the Contrast of an HTML Element</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-contrast">
+ <link rel="match" href="contrast-ref.html">
+ <meta name="assert"
+ content="The CSS contrast filter function should change the color of
+ an HTML element.">
+ <style type="text/css">
+ #target {
+ filter: contrast(2);
+ background-color: rgb(0, 196, 0);
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a bright green square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/drop-shadow-default-color-ref.html b/layout/reftests/svg/filters/css-filters/drop-shadow-default-color-ref.html
new file mode 100644
index 0000000000..2fe89507c5
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/drop-shadow-default-color-ref.html
@@ -0,0 +1,28 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Drop Shadow Default Color</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <style type="text/css">
+ #target {
+ filter: url(#drop-shadow);
+ background-color: #00f;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a blue square with a green drop shadow.</p>
+ <div id="target"></div>
+ <svg width="0" height="0">
+ <filter id="drop-shadow" x="-50" y="-50" width="200" height="200" filterUnits="userSpaceOnUse">
+ <feDropShadow dx="10" dy="10" stdDeviation="3" flood-color="#0f0" color-interpolation-filters="sRGB"/>
+ </filter>
+ </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/drop-shadow-default-color.html b/layout/reftests/svg/filters/css-filters/drop-shadow-default-color.html
new file mode 100644
index 0000000000..ac9f8ecb12
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/drop-shadow-default-color.html
@@ -0,0 +1,31 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Drop Shadow Default Color</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-drop-shadow">
+ <link rel="help" href="http://www.w3.org/TR/css3-background/#the-box-shadow">
+ <link rel="match" href="drop-shadow-default-color-ref.html">
+ <meta name="assert"
+ content="If the color is unspecified in a CSS drop-shadow filter
+ function, it should default to the value of the CSS color
+ property.">
+ <style type="text/css">
+ #target {
+ filter: drop-shadow(10px 10px 3px);
+ color: #0f0;
+ background-color: #00f;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a blue square with a green drop shadow.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/drop-shadow-negative-offset-ref.html b/layout/reftests/svg/filters/css-filters/drop-shadow-negative-offset-ref.html
new file mode 100644
index 0000000000..bf04c1d511
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/drop-shadow-negative-offset-ref.html
@@ -0,0 +1,31 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+<title>CSS Filters: Negative Drop Shadow Offset</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <style type="text/css">
+ #target {
+ filter: url(#drop-shadow);
+ background-color: #00f;
+ position: relative;
+ top: 20px;
+ left: 20px;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a blue square with a green drop shadow in its top left corner.</p>
+ <div id="target"></div>
+ <svg width="0" height="0">
+ <filter id="drop-shadow" x="-50" y="-50" width="200" height="200" filterUnits="userSpaceOnUse">
+ <feDropShadow dx="-10" dy="-10" stdDeviation="3" flood-color="#0f0" color-interpolation-filters="sRGB"/>
+ </filter>
+ </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/drop-shadow-negative-offset.html b/layout/reftests/svg/filters/css-filters/drop-shadow-negative-offset.html
new file mode 100644
index 0000000000..79b301daba
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/drop-shadow-negative-offset.html
@@ -0,0 +1,32 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Negative Drop Shadow Offset</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-drop-shadow">
+ <link rel="match" href="drop-shadow-negative-offset-ref.html">
+ <meta name="assert"
+ content="Given negative shadow offsets, the CSS drop-shadow filter
+ function should add a drop shadow extending from the top left
+ corner of an HTML element.">
+ <style type="text/css">
+ #target {
+ filter: drop-shadow(-10px -10px 3px #0f0);
+ background-color: #00f;
+ position: relative;
+ top: 20px;
+ left: 20px;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a blue square with a green drop shadow in its top left corner.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/drop-shadow-ref.html b/layout/reftests/svg/filters/css-filters/drop-shadow-ref.html
new file mode 100644
index 0000000000..211fbfbc43
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/drop-shadow-ref.html
@@ -0,0 +1,28 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Drop Shadow on HTML Element</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <style type="text/css">
+ #target {
+ filter: url(#drop-shadow);
+ background-color: #00f;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a blue square with a green drop shadow.</p>
+ <div id="target"></div>
+ <svg width="0" height="0">
+ <filter id="drop-shadow" x="-50" y="-50" width="200" height="200" filterUnits="userSpaceOnUse">
+ <feDropShadow dx="10" dy="10" stdDeviation="3" flood-color="#0f0" color-interpolation-filters="sRGB"/>
+ </filter>
+ </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/drop-shadow.html b/layout/reftests/svg/filters/css-filters/drop-shadow.html
new file mode 100644
index 0000000000..1e46734651
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/drop-shadow.html
@@ -0,0 +1,28 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Drop Shadow on HTML Element</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-drop-shadow">
+ <link rel="match" href="drop-shadow-ref.html">
+ <meta name="assert"
+ content="The CSS drop-shadow filter function should add a drop shadow to
+ an HTML element.">
+ <style type="text/css">
+ #target {
+ filter: drop-shadow(10px 10px 3px #0f0);
+ background-color: #00f;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a blue square with a green drop shadow.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/filter-on-huge-bbox.html b/layout/reftests/svg/filters/css-filters/filter-on-huge-bbox.html
new file mode 100644
index 0000000000..6a75f19b27
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/filter-on-huge-bbox.html
@@ -0,0 +1,26 @@
+<head>
+<style>
+body {
+ filter: blur(0px);
+ background-color: red;
+ margin:0px;
+}
+
+a {
+ text-indent: -9999em;
+ top: -9999em;
+ position: absolute;
+}
+
+div {
+ width: 100%;
+ height: 100%;
+ background-color: lime;
+ margin: 0px;
+}
+</style>
+</head>
+<body>
+ <div></div>
+ <a href="http://example.com">http://example.com</a>
+</body> \ No newline at end of file
diff --git a/layout/reftests/svg/filters/css-filters/filter-on-outer-svg.html b/layout/reftests/svg/filters/css-filters/filter-on-outer-svg.html
new file mode 100644
index 0000000000..72e533a4ed
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/filter-on-outer-svg.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+</head>
+<body style="background-color: lime;">
+ <div style="width: 100px; height: 100px; background-color: red;">
+ <svg width="100" height="100" style="filter: opacity(100%);">
+ <g transform="matrix(200,0,0,200,-20000,-20000)">
+ <rect width="200" height="200" style="fill:lime">
+ </g>
+ </svg>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/grayscale-one-ref.html b/layout/reftests/svg/filters/css-filters/grayscale-one-ref.html
new file mode 100644
index 0000000000..1a71de85ec
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/grayscale-one-ref.html
@@ -0,0 +1,22 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Grayscale an HTML Element Using a Factor of One</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <style type="text/css">
+ #target {
+ background-color: rgb(53, 53, 53);
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a gray square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/grayscale-one.html b/layout/reftests/svg/filters/css-filters/grayscale-one.html
new file mode 100644
index 0000000000..a13aaec7ff
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/grayscale-one.html
@@ -0,0 +1,28 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Grayscale an HTML Element Using a Factor of One</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-grayscale">
+ <link rel="match" href="grayscale-one-ref.html">
+ <meta name="assert"
+ content="Given a factor of one, the CSS grayscale filter function should
+ completely desaturate an HTML element.">
+ <style type="text/css">
+ #target {
+ filter: grayscale(1);
+ background-color: #f00;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a gray square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/grayscale-over-one-ref.html b/layout/reftests/svg/filters/css-filters/grayscale-over-one-ref.html
new file mode 100644
index 0000000000..16bac92715
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/grayscale-over-one-ref.html
@@ -0,0 +1,22 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Grayscale an HTML Element Using a Factor Over One</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <style type="text/css">
+ #target {
+ background-color: rgb(53, 53, 53);
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a gray square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/grayscale-over-one.html b/layout/reftests/svg/filters/css-filters/grayscale-over-one.html
new file mode 100644
index 0000000000..ac3f0496da
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/grayscale-over-one.html
@@ -0,0 +1,28 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Grayscale an HTML Element Using a Factor Over One</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-grayscale">
+ <link rel="match" href="grayscale-over-one-ref.html">
+ <meta name="assert"
+ content="Given a factor over one, the CSS grayscale filter function
+ should completely desaturate an HTML element.">
+ <style type="text/css">
+ #target {
+ filter: grayscale(1000);
+ background-color: #f00;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a gray square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/grayscale-percent-ref.html b/layout/reftests/svg/filters/css-filters/grayscale-percent-ref.html
new file mode 100644
index 0000000000..90e4b69f52
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/grayscale-percent-ref.html
@@ -0,0 +1,22 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Grayscale an HTML Element Using a Percentage</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <style type="text/css">
+ #target {
+ background-color: rgb(145, 197, 145);
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a dull green square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/grayscale-percent.html b/layout/reftests/svg/filters/css-filters/grayscale-percent.html
new file mode 100644
index 0000000000..5500e7ce8d
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/grayscale-percent.html
@@ -0,0 +1,28 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Grayscale an HTML Element Using a Percentage</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-grayscale">
+ <link rel="match" href="grayscale-percent-ref.html">
+ <meta name="assert"
+ content="Given a percentage, the CSS grayscale filter function should
+ desaturate an HTML element.">
+ <style type="text/css">
+ #target {
+ filter: grayscale(80%);
+ background-color: #0f0;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a dull green square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/grayscale-ref.html b/layout/reftests/svg/filters/css-filters/grayscale-ref.html
new file mode 100644
index 0000000000..06da896192
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/grayscale-ref.html
@@ -0,0 +1,22 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Grayscale an HTML Element</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <style type="text/css">
+ #target {
+ background-color: rgb(145, 197, 145);
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a dull green square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/grayscale-zero-ref.html b/layout/reftests/svg/filters/css-filters/grayscale-zero-ref.html
new file mode 100644
index 0000000000..1c023606fd
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/grayscale-zero-ref.html
@@ -0,0 +1,22 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Grayscale an HTML Element Using a Factor of Zero</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <style type="text/css">
+ #target {
+ background-color: #0f0;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a green square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/grayscale-zero.html b/layout/reftests/svg/filters/css-filters/grayscale-zero.html
new file mode 100644
index 0000000000..5cf259540c
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/grayscale-zero.html
@@ -0,0 +1,28 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Grayscale an HTML Element Using a Factor of Zero</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-grayscale">
+ <link rel="match" href="grayscale-zero-ref.html">
+ <meta name="assert"
+ content="Given a factor of zero, the CSS grayscale filter function
+ should not change the color of an HTML element.">
+ <style type="text/css">
+ #target {
+ filter: grayscale(0);
+ background-color: #0f0;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a green square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/grayscale.html b/layout/reftests/svg/filters/css-filters/grayscale.html
new file mode 100644
index 0000000000..ac15725ab0
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/grayscale.html
@@ -0,0 +1,28 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Grayscale an HTML Element</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-grayscale">
+ <link rel="match" href="grayscale-ref.html">
+ <meta name="assert"
+ content="The CSS grayscale filter function should desaturate an HTML
+ element.">
+ <style type="text/css">
+ #target {
+ filter: grayscale(0.8);
+ background-color: #0f0;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a dull green square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/hue-rotate-360-ref.html b/layout/reftests/svg/filters/css-filters/hue-rotate-360-ref.html
new file mode 100644
index 0000000000..39583b518b
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/hue-rotate-360-ref.html
@@ -0,0 +1,22 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Hue Rotate an HTML Element Using a 360 Degree Angle</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <style type="text/css">
+ #target {
+ background-color: #0f0;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a green square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/hue-rotate-360.html b/layout/reftests/svg/filters/css-filters/hue-rotate-360.html
new file mode 100644
index 0000000000..de8791e03d
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/hue-rotate-360.html
@@ -0,0 +1,28 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Hue Rotate an HTML Element Using a 360 Degree Angle</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-hue-rotate">
+ <link rel="match" href="hue-rotate-360-ref.html">
+ <meta name="assert"
+ content="Given a 360 degree angle, the CSS hue-rotate filter function
+ should not change the color of an HTML element.">
+ <style type="text/css">
+ #target {
+ filter: hue-rotate(360deg);
+ background-color: #0f0;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a green square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/hue-rotate-grad-ref.html b/layout/reftests/svg/filters/css-filters/hue-rotate-grad-ref.html
new file mode 100644
index 0000000000..855749647f
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/hue-rotate-grad-ref.html
@@ -0,0 +1,32 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Hue Rotate an HTML Element Using Gradians</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <style type="text/css">
+ #target {
+ filter: url(#hue-rotate);
+ background-color: #f00;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a green square.</p>
+ <div id="target"></div>
+ <!--
+ This equivalent SVG filter is defined in:
+ http://www.w3.org/TR/filter-effects-1/#huerotateEquivalent
+ -->
+ <svg width="0" height="0">
+ <filter id="hue-rotate">
+ <feColorMatrix type="hueRotate" values="90" color-interpolation-filters="sRGB"/>
+ </filter>
+ </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/hue-rotate-grad.html b/layout/reftests/svg/filters/css-filters/hue-rotate-grad.html
new file mode 100644
index 0000000000..13ff77499a
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/hue-rotate-grad.html
@@ -0,0 +1,29 @@
+
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Hue Rotate an HTML Element Using Gradians</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-hue-rotate">
+ <link rel="match" href="hue-rotate-turns-ref.html">
+ <meta name="assert"
+ content="Given an angle in gradians, the CSS hue-rotate filter function
+ should change the color of an HTML element.">
+ <style type="text/css">
+ #target {
+ filter: hue-rotate(100grad); /* Equivalent to 90deg. */
+ background-color: #f00;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a green square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/hue-rotate-multichannel-ref.html b/layout/reftests/svg/filters/css-filters/hue-rotate-multichannel-ref.html
new file mode 100644
index 0000000000..7fa26b5036
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/hue-rotate-multichannel-ref.html
@@ -0,0 +1,37 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Hue Rotate an HTML Element Containing Colors with Multiple RGB Channels</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <style type="text/css">
+ #target {
+ width: 150px;
+ height: 150px;
+ }
+ .color-strip {
+ height: 50px;
+ }
+ #color-strip-1 {
+ background-color: rgb(64, 187, 46);
+ }
+ #color-strip-2 {
+ background-color: rgb(64, 250, 255);
+ }
+ #color-strip-3 {
+ background-color: rgb(255, 14, 109);
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a horizontal green strip, followed by a cyan strip, followed by a magenta strip.</p>
+ <div id="target">
+ <div id="color-strip-1" class="color-strip"></div>
+ <div id="color-strip-2" class="color-strip"></div>
+ <div id="color-strip-3" class="color-strip"></div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/hue-rotate-multichannel.html b/layout/reftests/svg/filters/css-filters/hue-rotate-multichannel.html
new file mode 100644
index 0000000000..d6e9650c7a
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/hue-rotate-multichannel.html
@@ -0,0 +1,38 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Hue Rotate an HTML Element Containing Colors with Multiple RGB Channels</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <style type="text/css">
+ #target {
+ filter: hue-rotate(90deg);
+ width: 150px;
+ height: 150px;
+ }
+ .color-strip {
+ height: 50px;
+ }
+ #color-strip-1 {
+ background-color: rgb(255, 128, 64);
+ }
+ #color-strip-2 {
+ background-color: rgb(128, 255, 64);
+ }
+ #color-strip-3 {
+ background-color: rgb(32, 64, 255);
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a horizontal green strip, followed by a cyan strip, followed by a magenta strip.</p>
+ <div id="target">
+ <div id="color-strip-1" class="color-strip"></div>
+ <div id="color-strip-2" class="color-strip"></div>
+ <div id="color-strip-3" class="color-strip"></div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/hue-rotate-negative-ref.html b/layout/reftests/svg/filters/css-filters/hue-rotate-negative-ref.html
new file mode 100644
index 0000000000..19c843d0f0
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/hue-rotate-negative-ref.html
@@ -0,0 +1,32 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Hue Rotate an HTML Element Using a Negative Angle</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <style type="text/css">
+ #target {
+ filter: url(#hue-rotate);
+ background-color: #f00;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a green square.</p>
+ <div id="target"></div>
+ <!--
+ This equivalent SVG filter is defined in:
+ http://www.w3.org/TR/filter-effects-1/#huerotateEquivalent
+ -->
+ <svg width="0" height="0">
+ <filter id="hue-rotate">
+ <feColorMatrix type="hueRotate" values="90" color-interpolation-filters="sRGB"/>
+ </filter>
+ </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/hue-rotate-negative.html b/layout/reftests/svg/filters/css-filters/hue-rotate-negative.html
new file mode 100644
index 0000000000..97b84be5be
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/hue-rotate-negative.html
@@ -0,0 +1,28 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Hue Rotate an HTML Element Using a Negative Angle</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-hue-rotate">
+ <link rel="match" href="hue-rotate-negative-ref.html">
+ <meta name="assert"
+ content="Given a negative angle, the CSS hue-rotate filter function
+ should change the color of an HTML element.">
+ <style type="text/css">
+ #target {
+ filter: hue-rotate(-270deg); /* Equivalent to 90deg. */
+ background-color: #f00;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a green square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/hue-rotate-over-360-ref.html b/layout/reftests/svg/filters/css-filters/hue-rotate-over-360-ref.html
new file mode 100644
index 0000000000..c1744b9601
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/hue-rotate-over-360-ref.html
@@ -0,0 +1,32 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Hue Rotate an HTML Element Using an Angle Over 360 Degrees</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <style type="text/css">
+ #target {
+ filter: url(#hue-rotate);
+ background-color: #f00;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a green square.</p>
+ <div id="target"></div>
+ <!--
+ This equivalent SVG filter is defined in:
+ http://www.w3.org/TR/filter-effects-1/#huerotateEquivalent
+ -->
+ <svg width="0" height="0">
+ <filter id="hue-rotate">
+ <feColorMatrix type="hueRotate" values="90" color-interpolation-filters="sRGB"/>
+ </filter>
+ </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/hue-rotate-over-360.html b/layout/reftests/svg/filters/css-filters/hue-rotate-over-360.html
new file mode 100644
index 0000000000..dfc067ee2e
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/hue-rotate-over-360.html
@@ -0,0 +1,28 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Hue Rotate an HTML Element Using an Angle Over 360 Degrees</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-hue-rotate">
+ <link rel="match" href="hue-rotate-over-360-ref.html">
+ <meta name="assert"
+ content="Given an angle over 360 degress, the CSS hue-rotate filter
+ function should change the color of an HTML element.">
+ <style type="text/css">
+ #target {
+ filter: hue-rotate(450deg); /* Equivalent to 90deg. */
+ background-color: #f00;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a green square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/hue-rotate-rad-ref.html b/layout/reftests/svg/filters/css-filters/hue-rotate-rad-ref.html
new file mode 100644
index 0000000000..82ae7b28cb
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/hue-rotate-rad-ref.html
@@ -0,0 +1,32 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Hue Rotate an HTML Element Using Radians</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <style type="text/css">
+ #target {
+ filter: url(#hue-rotate);
+ background-color: #f00;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a green square.</p>
+ <div id="target"></div>
+ <!--
+ This equivalent SVG filter is defined in:
+ http://www.w3.org/TR/filter-effects-1/#huerotateEquivalent
+ -->
+ <svg width="0" height="0">
+ <filter id="hue-rotate">
+ <feColorMatrix type="hueRotate" values="90" color-interpolation-filters="sRGB"/>
+ </filter>
+ </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/hue-rotate-rad.html b/layout/reftests/svg/filters/css-filters/hue-rotate-rad.html
new file mode 100644
index 0000000000..5622f441d1
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/hue-rotate-rad.html
@@ -0,0 +1,28 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Hue Rotate an HTML Element Using Radians</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-hue-rotate">
+ <link rel="match" href="hue-rotate-turns-ref.html">
+ <meta name="assert"
+ content="Given an angle in radians, the CSS hue-rotate filter function
+ should change the color of an HTML element.">
+ <style type="text/css">
+ #target {
+ filter: hue-rotate(1.57079632679rad); /* Equivalent to 90deg. */
+ background-color: #f00;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a green square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/hue-rotate-ref.html b/layout/reftests/svg/filters/css-filters/hue-rotate-ref.html
new file mode 100644
index 0000000000..aec99216a9
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/hue-rotate-ref.html
@@ -0,0 +1,32 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Hue Rotate an HTML Element</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <style type="text/css">
+ #target {
+ filter: url(#hue-rotate);
+ background-color: #f00;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a green square.</p>
+ <div id="target"></div>
+ <!--
+ This equivalent SVG filter is defined in:
+ http://www.w3.org/TR/filter-effects-1/#huerotateEquivalent
+ -->
+ <svg width="0" height="0">
+ <filter id="hue-rotate">
+ <feColorMatrix type="hueRotate" values="90" color-interpolation-filters="sRGB"/>
+ </filter>
+ </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/hue-rotate-turn-ref.html b/layout/reftests/svg/filters/css-filters/hue-rotate-turn-ref.html
new file mode 100644
index 0000000000..c3a76ea4b5
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/hue-rotate-turn-ref.html
@@ -0,0 +1,32 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Hue Rotate an HTML Element Using Turns</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <style type="text/css">
+ #target {
+ filter: url(#hue-rotate);
+ background-color: #f00;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a green square.</p>
+ <div id="target"></div>
+ <!--
+ This equivalent SVG filter is defined in:
+ http://www.w3.org/TR/filter-effects-1/#huerotateEquivalent
+ -->
+ <svg width="0" height="0">
+ <filter id="hue-rotate">
+ <feColorMatrix type="hueRotate" values="90" color-interpolation-filters="sRGB"/>
+ </filter>
+ </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/hue-rotate-turn.html b/layout/reftests/svg/filters/css-filters/hue-rotate-turn.html
new file mode 100644
index 0000000000..d6d8a17f63
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/hue-rotate-turn.html
@@ -0,0 +1,28 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Hue Rotate an HTML Element Using Turns</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-hue-rotate">
+ <link rel="match" href="hue-rotate-turn-ref.html">
+ <meta name="assert"
+ content="Given an angle in turns, the CSS hue-rotate filter function
+ should change the color of an HTML element.">
+ <style type="text/css">
+ #target {
+ filter: hue-rotate(0.25turn);
+ background-color: #f00;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a green square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/hue-rotate-zero-ref.html b/layout/reftests/svg/filters/css-filters/hue-rotate-zero-ref.html
new file mode 100644
index 0000000000..996b22e0fd
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/hue-rotate-zero-ref.html
@@ -0,0 +1,22 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Hue Rotate an HTML Element Using a Zero Angle</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <style type="text/css">
+ #target {
+ background-color: #0f0;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a green square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/hue-rotate-zero.html b/layout/reftests/svg/filters/css-filters/hue-rotate-zero.html
new file mode 100644
index 0000000000..c79f23e5c0
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/hue-rotate-zero.html
@@ -0,0 +1,28 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Hue Rotate an HTML Element Using a Zero Angle</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-hue-rotate">
+ <link rel="match" href="hue-rotate-zero-ref.html">
+ <meta name="assert"
+ content="Given a zero angle, the CSS hue-rotate filter function should
+ not change the color of an HTML element.">
+ <style type="text/css">
+ #target {
+ filter: hue-rotate(0);
+ background-color: #0f0;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a green square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/hue-rotate.html b/layout/reftests/svg/filters/css-filters/hue-rotate.html
new file mode 100644
index 0000000000..a4536eea7a
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/hue-rotate.html
@@ -0,0 +1,28 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Hue Rotate an HTML Element</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-hue-rotate">
+ <link rel="match" href="hue-rotate-ref.html">
+ <meta name="assert"
+ content="The CSS hue-rotate filter function should change the color of
+ an HTML element.">
+ <style type="text/css">
+ #target {
+ filter: hue-rotate(90deg);
+ background-color: #f00;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a green square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/invert-half-ref.html b/layout/reftests/svg/filters/css-filters/invert-half-ref.html
new file mode 100644
index 0000000000..bd0d67d66b
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/invert-half-ref.html
@@ -0,0 +1,22 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Invert an HTML Element Using a Factor of One Half</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <style type="text/css">
+ #target {
+ background-color: rgb(127, 127, 127);
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a gray square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/invert-half.html b/layout/reftests/svg/filters/css-filters/invert-half.html
new file mode 100644
index 0000000000..818d751169
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/invert-half.html
@@ -0,0 +1,28 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Invert an HTML Element Using a Factor of One Half</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-invert">
+ <link rel="match" href="invert-half-ref.html">
+ <meta name="assert"
+ content="Given a factor of one half, the CSS invert filter function
+ should change the color of an HTML element to gray.">
+ <style type="text/css">
+ #target {
+ filter: invert(0.5);
+ background-color: #f00;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a gray square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/invert-one-ref.html b/layout/reftests/svg/filters/css-filters/invert-one-ref.html
new file mode 100644
index 0000000000..6882b501c9
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/invert-one-ref.html
@@ -0,0 +1,22 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Invert an HTML Element Using a Factor of One</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <style type="text/css">
+ #target {
+ background-color: #0f0;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a green square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/invert-one.html b/layout/reftests/svg/filters/css-filters/invert-one.html
new file mode 100644
index 0000000000..f9e8eaa98a
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/invert-one.html
@@ -0,0 +1,28 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Invert an HTML Element Using a Factor of One</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-invert">
+ <link rel="match" href="invert-one-ref.html">
+ <meta name="assert"
+ content="Given a factor of one, the CSS invert filter function should
+ completely change the color of an HTML element.">
+ <style type="text/css">
+ #target {
+ filter: invert(1);
+ background-color: #f0f;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a green square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/invert-over-one-ref.html b/layout/reftests/svg/filters/css-filters/invert-over-one-ref.html
new file mode 100644
index 0000000000..4452898e3b
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/invert-over-one-ref.html
@@ -0,0 +1,22 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Invert an HTML Element Using a Factor Over One</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <style type="text/css">
+ #target {
+ background-color: #0f0;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a green square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/invert-over-one.html b/layout/reftests/svg/filters/css-filters/invert-over-one.html
new file mode 100644
index 0000000000..374fe6dfde
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/invert-over-one.html
@@ -0,0 +1,28 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Invert an HTML Element Using a Factor Over One</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-invert">
+ <link rel="match" href="invert-over-one-ref.html">
+ <meta name="assert"
+ content="Given a factor over one, the CSS invert filter function
+ should completely change the color of an HTML element.">
+ <style type="text/css">
+ #target {
+ filter: invert(1000);
+ background-color: #f0f;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a green square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/invert-percent-ref.html b/layout/reftests/svg/filters/css-filters/invert-percent-ref.html
new file mode 100644
index 0000000000..fd197f038c
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/invert-percent-ref.html
@@ -0,0 +1,22 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Invert an HTML Element Using a Percentage</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <style type="text/css">
+ #target {
+ background-color: rgb(63, 191, 63);
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a green square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/invert-percent.html b/layout/reftests/svg/filters/css-filters/invert-percent.html
new file mode 100644
index 0000000000..d56dc17418
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/invert-percent.html
@@ -0,0 +1,28 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Invert an HTML Element Using a Percentage</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-invert">
+ <link rel="match" href="invert-percent-ref.html">
+ <meta name="assert"
+ content="Given a percentage, the CSS invert filter function should
+ change the color of an HTML element.">
+ <style type="text/css">
+ #target {
+ filter: invert(75%);
+ background-color: #f0f;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a green square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/invert-ref.html b/layout/reftests/svg/filters/css-filters/invert-ref.html
new file mode 100644
index 0000000000..c5af4b6116
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/invert-ref.html
@@ -0,0 +1,22 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Invert an HTML Element</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <style type="text/css">
+ #target {
+ background-color: rgb(63, 191, 63);
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a green square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/invert-zero-ref.html b/layout/reftests/svg/filters/css-filters/invert-zero-ref.html
new file mode 100644
index 0000000000..3f000a71dd
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/invert-zero-ref.html
@@ -0,0 +1,22 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Invert an HTML Element Using a Factor of Zero</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <style type="text/css">
+ #target {
+ background-color: #0f0;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a green square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/invert-zero.html b/layout/reftests/svg/filters/css-filters/invert-zero.html
new file mode 100644
index 0000000000..9adb505dd4
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/invert-zero.html
@@ -0,0 +1,28 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Invert an HTML Element Using a Factor of Zero</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-invert">
+ <link rel="match" href="invert-zero-ref.html">
+ <meta name="assert"
+ content="Given a factor of zero, the CSS invert filter function should
+ not change the color of an HTML element.">
+ <style type="text/css">
+ #target {
+ filter: invert(0);
+ background-color: #0f0;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a green square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/invert.html b/layout/reftests/svg/filters/css-filters/invert.html
new file mode 100644
index 0000000000..8ba201e227
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/invert.html
@@ -0,0 +1,28 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Invert an HTML Element</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-invert">
+ <link rel="match" href="invert-ref.html">
+ <meta name="assert"
+ content="The CSS invert filter function should change the color of an
+ HTML element.">
+ <style type="text/css">
+ #target {
+ filter: invert(0.75);
+ background-color: #f0f;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a green square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/opacity-one-ref.html b/layout/reftests/svg/filters/css-filters/opacity-one-ref.html
new file mode 100644
index 0000000000..b75678edbb
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/opacity-one-ref.html
@@ -0,0 +1,22 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Apply Opacity to an HTML Element Using a Factor of One</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <style type="text/css">
+ #target {
+ background-color: #0f0;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a green square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/opacity-one.html b/layout/reftests/svg/filters/css-filters/opacity-one.html
new file mode 100644
index 0000000000..8e0f26ba01
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/opacity-one.html
@@ -0,0 +1,36 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Apply Opacity to an HTML Element Using a Factor of One</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-opacity">
+ <link rel="match" href="opacity-one-ref.html">
+ <meta name="assert"
+ content="Given a factor of one, the CSS opacity filter function should
+ not change the opaqueness of an HTML element.">
+ <style type="text/css">
+ #below-target {
+ background-color: #f00;
+ width: 100px;
+ height: 100px;
+ }
+ #target {
+ filter: opacity(1000);
+ background-color: #0f0;
+ position: relative;
+ top: -100px;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a green square.</p>
+ <div id="below-target"></div>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/opacity-over-one-ref.html b/layout/reftests/svg/filters/css-filters/opacity-over-one-ref.html
new file mode 100644
index 0000000000..d674607041
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/opacity-over-one-ref.html
@@ -0,0 +1,22 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Apply Opacity to an HTML Element Using a Factor Over One</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <style type="text/css">
+ #target {
+ background-color: #0f0;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a green square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/opacity-over-one-translucent-source-ref.html b/layout/reftests/svg/filters/css-filters/opacity-over-one-translucent-source-ref.html
new file mode 100644
index 0000000000..dea9f84a5a
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/opacity-over-one-translucent-source-ref.html
@@ -0,0 +1,21 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Apply Opacity to a Translucent HTML Element Using a Factor Over One</title>
+ <style type="text/css">
+ #target {
+ background-color: rgba(0, 255, 0, 0.25);
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a faded green square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/opacity-over-one-translucent-source.html b/layout/reftests/svg/filters/css-filters/opacity-over-one-translucent-source.html
new file mode 100644
index 0000000000..07ff65ed7b
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/opacity-over-one-translucent-source.html
@@ -0,0 +1,28 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Apply Opacity to a Translucent HTML Element Using a Factor Over One</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-opacity">
+ <link rel="match" href="opacity-over-one-translucent-source-ref.html">
+ <meta name="assert"
+ content="Given a factor over one, the CSS opacity filter function should
+ not change the translucency of an HTML element.">
+ <style type="text/css">
+ #target {
+ filter: opacity(1000);
+ background-color: rgba(0, 255, 0, 0.25);
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a faded green square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/opacity-over-one.html b/layout/reftests/svg/filters/css-filters/opacity-over-one.html
new file mode 100644
index 0000000000..2716d39bf1
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/opacity-over-one.html
@@ -0,0 +1,36 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Apply Opacity to an HTML Element Using a Factor Over One</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-opacity">
+ <link rel="match" href="opacity-over-one-ref.html">
+ <meta name="assert"
+ content="Given a factor over one, the CSS opacity filter function should
+ not change the opaqueness of an HTML element.">
+ <style type="text/css">
+ #below-target {
+ background-color: #f00;
+ width: 100px;
+ height: 100px;
+ }
+ #target {
+ filter: opacity(1000);
+ background-color: #0f0;
+ position: relative;
+ top: -100px;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a green square.</p>
+ <div id="below-target"></div>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/opacity-percent-ref.html b/layout/reftests/svg/filters/css-filters/opacity-percent-ref.html
new file mode 100644
index 0000000000..f673701fe8
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/opacity-percent-ref.html
@@ -0,0 +1,22 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Apply Opacity to an HTML Element Using a Percentage</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <style type="text/css">
+ #target {
+ background-color: rgb(192, 255, 192);
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a faded green square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/opacity-percent.html b/layout/reftests/svg/filters/css-filters/opacity-percent.html
new file mode 100644
index 0000000000..5cc4ab5d23
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/opacity-percent.html
@@ -0,0 +1,28 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Apply Opacity to an HTML Element Using a Percentage</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-opacity">
+ <link rel="match" href="opacity-percent-ref.html">
+ <meta name="assert"
+ content="Given a percentage, the CSS opacity filter function should make
+ an HTML element translucent.">
+ <style type="text/css">
+ #target {
+ filter: opacity(25%);
+ background-color: #0f0;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a faded green square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/opacity-ref.html b/layout/reftests/svg/filters/css-filters/opacity-ref.html
new file mode 100644
index 0000000000..adbfcf2bb7
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/opacity-ref.html
@@ -0,0 +1,22 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Apply Opacity to an HTML Element</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <style type="text/css">
+ #target {
+ background-color: rgb(192, 255, 192);
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a faded green square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/opacity-zero-ref.html b/layout/reftests/svg/filters/css-filters/opacity-zero-ref.html
new file mode 100644
index 0000000000..69821d5ac4
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/opacity-zero-ref.html
@@ -0,0 +1,22 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Apply Opacity to an HTML Element Using a Factor of Zero</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <style type="text/css">
+ #below-target {
+ background-color: #0f0;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a green square.</p>
+ <div id="below-target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/opacity-zero.html b/layout/reftests/svg/filters/css-filters/opacity-zero.html
new file mode 100644
index 0000000000..da5e6899ff
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/opacity-zero.html
@@ -0,0 +1,36 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Apply Opacity to an HTML Element Using a Factor of Zero</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-opacity">
+ <link rel="match" href="opacity-zero-ref.html">
+ <meta name="assert"
+ content="Given a factor of zero, the CSS opacity filter function should
+ make an HTML element completely transparent.">
+ <style type="text/css">
+ #below-target {
+ background-color: #0f0;
+ width: 100px;
+ height: 100px;
+ }
+ #target {
+ filter: opacity(0);
+ background-color: #f00;
+ position: relative;
+ top: -100px;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a green square.</p>
+ <div id="below-target"></div>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/opacity.html b/layout/reftests/svg/filters/css-filters/opacity.html
new file mode 100644
index 0000000000..3ea8f1589c
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/opacity.html
@@ -0,0 +1,28 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Apply Opacity to an HTML Element</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-opacity">
+ <link rel="match" href="opacity-ref.html">
+ <meta name="assert"
+ content="The CSS opacity filter function should make an HTML element
+ translucent.">
+ <style type="text/css">
+ #target {
+ filter: opacity(0.25);
+ background-color: #0f0;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a faded green square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/pass.svg b/layout/reftests/svg/filters/css-filters/pass.svg
new file mode 100644
index 0000000000..e76380c89a
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/pass.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> \ No newline at end of file
diff --git a/layout/reftests/svg/filters/css-filters/reftest.list b/layout/reftests/svg/filters/css-filters/reftest.list
new file mode 100644
index 0000000000..f204de98cd
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/reftest.list
@@ -0,0 +1,71 @@
+# These tests verify that CSS filters behave properly.
+# e.g. filter: blur(3px)
+
+== blur.html blur-ref.html
+== blur.svg blur-ref.svg
+== blur-calc.html blur-calc-ref.html
+== blur-calc-negative.html blur-calc-negative-ref.html
+fuzzy-if(cocoaWidget,0-1,0-2) skip-if(d2d) == blur-cap-large-radius-on-software.html blur-cap-large-radius-on-software-ref.html
+fuzzy-if(!useDrawSnapshot,2-5,4764-8168) fuzzy-if(Android&&device&&!swgl,5-5,8574-8574) == blur-clip-rect.html ../feGaussianBlur-4-ref.svg
+== blur-em-radius.html blur-em-radius-ref.html
+== blur-invalid-radius.html blur-invalid-radius-ref.html
+== blur-rem-radius.html blur-rem-radius-ref.html
+== blur-zero-radius.html blur-zero-radius-ref.html
+fails-if(useDrawSnapshot) == blur-zoomed-page.html blur-zoomed-page-ref.html
+== brightness.html brightness-ref.html
+== brightness-darken.html brightness-darken-ref.html
+== brightness-extreme.html brightness-extreme-ref.html
+== brightness-one.html brightness-one-ref.html
+== brightness-percent.html brightness-percent-ref.html
+== brightness-zero.html brightness-zero-ref.html
+== containing-block-1.html containing-block-1-ref.html
+== contrast.html contrast-ref.html
+== contrast-extreme.html contrast-extreme-ref.html
+== contrast-one.html contrast-one-ref.html
+== contrast-percent.html contrast-percent-ref.html
+== contrast-reduce.html contrast-reduce-ref.html
+== contrast-zero.html contrast-zero-ref.html
+== drop-shadow.html drop-shadow-ref.html
+== drop-shadow-default-color.html drop-shadow-default-color-ref.html
+== drop-shadow-negative-offset.html drop-shadow-negative-offset-ref.html
+== filter-on-huge-bbox.html pass.svg
+fuzzy(0-1,0-44) fuzzy-if(winWidget,0-1,0-198) == filter-on-outer-svg.html pass.svg
+fuzzy(0-1,0-10000) fuzzy-if(d2d,0-1,0-10000) == grayscale.html grayscale-ref.html
+fuzzy(0-1,0-10000) fuzzy-if(d2d,0-1,0-10000) == grayscale-one.html grayscale-one-ref.html
+fuzzy(0-1,0-10000) fuzzy-if(d2d,0-1,0-10000) == grayscale-over-one.html grayscale-over-one-ref.html
+fuzzy(0-1,0-10000) fuzzy-if(d2d,0-1,0-10000) == grayscale-percent.html grayscale-percent-ref.html
+fuzzy(0-1,0-10000) == grayscale-zero.html grayscale-zero-ref.html
+== hue-rotate.html hue-rotate-ref.html
+== hue-rotate-360.html hue-rotate-360-ref.html
+== hue-rotate-grad.html hue-rotate-grad-ref.html
+fuzzy-if(!useDrawSnapshot&&!geckoview,2-2,7500-7500) fuzzy-if(d2d,0-2,0-7500) == hue-rotate-multichannel.html hue-rotate-multichannel-ref.html
+== hue-rotate-negative.html hue-rotate-negative-ref.html
+== hue-rotate-over-360.html hue-rotate-over-360-ref.html
+== hue-rotate-rad.html hue-rotate-rad-ref.html
+== hue-rotate-turn.html hue-rotate-turn-ref.html
+== hue-rotate-zero.html hue-rotate-zero-ref.html
+fuzzy(0-1,0-10000) fuzzy-if(d2d,0-1,0-10000) == invert.html invert-ref.html
+fuzzy(0-1,0-10000) == invert-half.html invert-half-ref.html
+== invert-one.html invert-one-ref.html
+== invert-over-one.html invert-over-one-ref.html
+fuzzy(0-1,0-10000) fuzzy-if(d2d,0-1,0-10000) == invert-percent.html invert-percent-ref.html
+== invert-zero.html invert-zero-ref.html
+fuzzy-if(!useDrawSnapshot&&!geckoview,1-1,10000-10000) fuzzy-if(d2d,0-1,0-10000) == opacity.html opacity-ref.html
+== opacity-one.html opacity-one-ref.html
+== opacity-over-one.html opacity-over-one-ref.html
+fuzzy(0-1,0-10000) == opacity-over-one-translucent-source.html opacity-over-one-translucent-source-ref.html
+fuzzy-if(!useDrawSnapshot&&!geckoview,1-1,10000-10000) fuzzy-if(d2d,0-1,0-10000) == opacity-percent.html opacity-percent-ref.html
+== opacity-zero.html opacity-zero-ref.html
+== saturate.html saturate-ref.html
+fuzzy-if(!useDrawSnapshot&&!geckoview,1-1,10000-10000) fuzzy-if(d2d,0-1,0-10000) == saturate-desaturate.html saturate-desaturate-ref.html
+== saturate-extreme.html saturate-extreme-ref.html
+== saturate-one.html saturate-one-ref.html
+== saturate-percent.html saturate-percent-ref.html
+fuzzy-if(!useDrawSnapshot&&!geckoview,1-1,10000-10000) fuzzy-if(d2d,0-1,0-10000) == saturate-zero.html saturate-zero-ref.html
+fuzzy(0-1,0-10000) fuzzy-if(d2d,0-1,0-10000) == sepia.html sepia-ref.html
+fuzzy(0-1,0-10000) fuzzy-if(d2d,0-1,0-10000) == sepia-one.html sepia-one-ref.html
+fuzzy(0-1,0-10000) fuzzy-if(d2d,0-1,0-10000) == sepia-over-one.html sepia-over-one-ref.html
+fuzzy(0-1,0-10000) fuzzy-if(d2d,0-1,0-10000) == sepia-percent.html sepia-percent-ref.html
+== sepia-zero.html sepia-zero-ref.html
+
+fuzzy(0-2,0-125000) == scale-filtered-content-01.html scale-filtered-content-01-ref.html
diff --git a/layout/reftests/svg/filters/css-filters/saturate-desaturate-ref.html b/layout/reftests/svg/filters/css-filters/saturate-desaturate-ref.html
new file mode 100644
index 0000000000..61cd7036b2
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/saturate-desaturate-ref.html
@@ -0,0 +1,22 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Desaturate an HTML Element</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <style type="text/css">
+ #target {
+ background-color: rgb(145, 197, 145);
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a dull green square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/saturate-desaturate.html b/layout/reftests/svg/filters/css-filters/saturate-desaturate.html
new file mode 100644
index 0000000000..fdd080361f
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/saturate-desaturate.html
@@ -0,0 +1,28 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Desaturate an HTML Element</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-saturate">
+ <link rel="match" href="saturate-desaturate-ref.html">
+ <meta name="assert"
+ content="Given a factor of less than one, the CSS saturate filter
+ function should dull the color of an HTML element.">
+ <style type="text/css">
+ #target {
+ filter: saturate(0.2);
+ background-color: rgb(0, 255, 0);
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a dull green square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/saturate-extreme-ref.html b/layout/reftests/svg/filters/css-filters/saturate-extreme-ref.html
new file mode 100644
index 0000000000..fd7f3711c1
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/saturate-extreme-ref.html
@@ -0,0 +1,22 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Saturate an HTML Element Using a Large Factor</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <style type="text/css">
+ #target {
+ background-color: #0f0;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a bright green square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/saturate-extreme.html b/layout/reftests/svg/filters/css-filters/saturate-extreme.html
new file mode 100644
index 0000000000..d533074f00
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/saturate-extreme.html
@@ -0,0 +1,29 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Saturate an HTML Element Using a Large Factor</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-saturate">
+ <link rel="match" href="saturate-extreme-ref.html">
+ <meta name="assert"
+ content="Given a large factor, the CSS saturate filter function should
+ significantly increase any non-zero color channels in an HTML
+ element.">
+ <style type="text/css">
+ #target {
+ filter: saturate(1000);
+ background-color: rgb(0, 1, 0);
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a bright green square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/saturate-one-ref.html b/layout/reftests/svg/filters/css-filters/saturate-one-ref.html
new file mode 100644
index 0000000000..09c46b9f98
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/saturate-one-ref.html
@@ -0,0 +1,22 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Saturate an HTML Element Using a Factor of One</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <style type="text/css">
+ #target {
+ background-color: rgb(0, 128, 0);
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a green square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/saturate-one.html b/layout/reftests/svg/filters/css-filters/saturate-one.html
new file mode 100644
index 0000000000..7633f568fa
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/saturate-one.html
@@ -0,0 +1,28 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Saturate an HTML Element Using a Factor of One</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-saturate">
+ <link rel="match" href="saturate-one-ref.html">
+ <meta name="assert"
+ content="Given a factor of one, the CSS saturate filter function should
+ not change the color of an HTML element.">
+ <style type="text/css">
+ #target {
+ filter: saturate(1);
+ background-color: rgb(0, 128, 0);
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a green square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/saturate-percent-ref.html b/layout/reftests/svg/filters/css-filters/saturate-percent-ref.html
new file mode 100644
index 0000000000..9ffb3a5ae1
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/saturate-percent-ref.html
@@ -0,0 +1,22 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Saturate an HTML Element Using a Percentage</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <style type="text/css">
+ #target {
+ background-color: #0f0;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a bright green square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/saturate-percent.html b/layout/reftests/svg/filters/css-filters/saturate-percent.html
new file mode 100644
index 0000000000..17b6ea791c
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/saturate-percent.html
@@ -0,0 +1,28 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Saturate an HTML Element Using a Percentage</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-saturate">
+ <link rel="match" href="saturate-percent-ref.html">
+ <meta name="assert"
+ content="Given a percentage, the CSS saturate filter function should
+ change the color of an HTML element.">
+ <style type="text/css">
+ #target {
+ filter: saturate(500%);
+ background-color: rgb(0, 128, 0);
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a bright green square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/saturate-ref.html b/layout/reftests/svg/filters/css-filters/saturate-ref.html
new file mode 100644
index 0000000000..9f142cd743
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/saturate-ref.html
@@ -0,0 +1,22 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Saturate an HTML Element</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <style type="text/css">
+ #target {
+ background-color: #0f0;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a bright green square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/saturate-zero-ref.html b/layout/reftests/svg/filters/css-filters/saturate-zero-ref.html
new file mode 100644
index 0000000000..fd439a899c
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/saturate-zero-ref.html
@@ -0,0 +1,22 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Desaturate an HTML Element Using a Factor of Zero</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <style type="text/css">
+ #target {
+ background-color: rgb(53, 53, 53);
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a gray square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/saturate-zero.html b/layout/reftests/svg/filters/css-filters/saturate-zero.html
new file mode 100644
index 0000000000..0b281e017d
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/saturate-zero.html
@@ -0,0 +1,28 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Desaturate an HTML Element Using a Factor of Zero</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-saturate">
+ <link rel="match" href="saturate-zero-ref.html">
+ <meta name="assert"
+ content="Given a factor of zero, the CSS saturate filter function should
+ completely desaturate an HTML element.">
+ <style type="text/css">
+ #target {
+ filter: saturate(0);
+ background-color: rgb(255, 0, 0);
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a gray square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/saturate.html b/layout/reftests/svg/filters/css-filters/saturate.html
new file mode 100644
index 0000000000..330464a643
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/saturate.html
@@ -0,0 +1,28 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Saturate an HTML Element</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-saturate">
+ <link rel="match" href="saturate-ref.html">
+ <meta name="assert"
+ content="The CSS saturate filter function should change the color of an
+ HTML element.">
+ <style type="text/css">
+ #target {
+ filter: saturate(5);
+ background-color: rgb(0, 128, 0);
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a bright green square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/scale-filtered-content-01-ref.html b/layout/reftests/svg/filters/css-filters/scale-filtered-content-01-ref.html
new file mode 100644
index 0000000000..a212778d0d
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/scale-filtered-content-01-ref.html
@@ -0,0 +1,33 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Filtered content should be rendered in device space</title>
+ <style type="text/css">
+ #filtered {
+ width: 100px;
+ height: 50px;
+ background-color: lime;
+ opacity: 0.5;
+ transform: translate(10px) scale(5);
+ transform-origin: 0 0;
+ }
+ .inner {
+ position: absolute;
+ background-color: blue;
+ width: 10px;
+ height:10px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see clear blue rects.</p>
+ <div id="filtered">
+ <div class="inner" style="left:10px; top:10px;"></div>
+ <div class="inner" style="left:50px; top:20px;"></div>
+ <div class="inner" style="left:80px; top:30px;"></div>
+ </div>
+</body>
diff --git a/layout/reftests/svg/filters/css-filters/scale-filtered-content-01.html b/layout/reftests/svg/filters/css-filters/scale-filtered-content-01.html
new file mode 100644
index 0000000000..4546980179
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/scale-filtered-content-01.html
@@ -0,0 +1,33 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Filtered content should be rendered in device space</title>
+ <style type="text/css">
+ #filtered {
+ width: 100px;
+ height: 50px;
+ background-color: lime;
+ filter: opacity(50%);
+ transform: translate(10px) scale(5);
+ transform-origin: 0 0;
+ }
+ .inner {
+ position: absolute;
+ background-color: blue;
+ width: 10px;
+ height:10px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see clear blue rects.</p>
+ <div id="filtered">
+ <div class="inner" style="left:10px; top:10px;"></div>
+ <div class="inner" style="left:50px; top:20px;"></div>
+ <div class="inner" style="left:80px; top:30px;"></div>
+ </div>
+</body>
diff --git a/layout/reftests/svg/filters/css-filters/sepia-one-ref.html b/layout/reftests/svg/filters/css-filters/sepia-one-ref.html
new file mode 100644
index 0000000000..c0f77edcbc
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/sepia-one-ref.html
@@ -0,0 +1,22 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Apply Sepia to an HTML Element Using a Factor of One</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <style type="text/css">
+ #target {
+ background-color: rgb(99, 89, 69);
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a brown square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/sepia-one.html b/layout/reftests/svg/filters/css-filters/sepia-one.html
new file mode 100644
index 0000000000..cad7d6fc93
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/sepia-one.html
@@ -0,0 +1,28 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Apply Sepia to an HTML Element Using a Factor of One</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-sepia">
+ <link rel="match" href="sepia-one-ref.html">
+ <meta name="assert"
+ content="Given a factor of one, the CSS sepia filter function should
+ change the color of an HTML element to a brown hue.">
+ <style type="text/css">
+ #target {
+ filter: sepia(1);
+ background-color: #f00;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a brown square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/sepia-over-one-ref.html b/layout/reftests/svg/filters/css-filters/sepia-over-one-ref.html
new file mode 100644
index 0000000000..9863aa6466
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/sepia-over-one-ref.html
@@ -0,0 +1,22 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Apply Sepia to an HTML Element Using a Factor Over One</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <style type="text/css">
+ #target {
+ background-color: rgb(99, 89, 69);
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a brown square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/sepia-over-one.html b/layout/reftests/svg/filters/css-filters/sepia-over-one.html
new file mode 100644
index 0000000000..6836fbbd5d
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/sepia-over-one.html
@@ -0,0 +1,28 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Apply Sepia to an HTML Element Using a Factor Over One</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-sepia">
+ <link rel="match" href="sepia-over-one-ref.html">
+ <meta name="assert"
+ content="Given a factor over one, the CSS sepia filter function should
+ change the color of an HTML element to a brown hue.">
+ <style type="text/css">
+ #target {
+ filter: sepia(1000);
+ background-color: #f00;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a brown square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/sepia-percent-ref.html b/layout/reftests/svg/filters/css-filters/sepia-percent-ref.html
new file mode 100644
index 0000000000..47dea90f0c
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/sepia-percent-ref.html
@@ -0,0 +1,22 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Apply Sepia to an HTML Element Using a Percentage</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <style type="text/css">
+ #target {
+ background-color: rgb(167, 187, 115);
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a brownish green square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/sepia-percent.html b/layout/reftests/svg/filters/css-filters/sepia-percent.html
new file mode 100644
index 0000000000..f044a7771e
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/sepia-percent.html
@@ -0,0 +1,28 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Apply Sepia to an HTML Element Using a Percentage</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-sepia">
+ <link rel="match" href="sepia-percent-ref.html">
+ <meta name="assert"
+ content="Given a percentage, the CSS sepia filter function should
+ change the color of an HTML element to a more brownish hue.">
+ <style type="text/css">
+ #target {
+ filter: sepia(85%);
+ background-color: #0f0;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a brownish green square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/sepia-ref.html b/layout/reftests/svg/filters/css-filters/sepia-ref.html
new file mode 100644
index 0000000000..e30ae8a859
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/sepia-ref.html
@@ -0,0 +1,22 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Apply sepia to an HTML Element</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <style type="text/css">
+ #target {
+ background-color: rgb(167, 187, 115);
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a brownish green square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/sepia-zero-ref.html b/layout/reftests/svg/filters/css-filters/sepia-zero-ref.html
new file mode 100644
index 0000000000..4a358c45d5
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/sepia-zero-ref.html
@@ -0,0 +1,22 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Apply Sepia to an HTML Element Using a Factor of Zero</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <style type="text/css">
+ #target {
+ background-color: #0f0;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a green square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/sepia-zero.html b/layout/reftests/svg/filters/css-filters/sepia-zero.html
new file mode 100644
index 0000000000..720e22e15b
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/sepia-zero.html
@@ -0,0 +1,28 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Apply Sepia to an HTML Element Using a Factor of Zero</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-sepia">
+ <link rel="match" href="sepia-zero-ref.html">
+ <meta name="assert"
+ content="Given a factor of zero, the CSS sepia filter function should
+ not change the color of an HTML element.">
+ <style type="text/css">
+ #target {
+ filter: sepia(0);
+ background-color: #0f0;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a green square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/sepia.html b/layout/reftests/svg/filters/css-filters/sepia.html
new file mode 100644
index 0000000000..4af24919fa
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filters/sepia.html
@@ -0,0 +1,28 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Apply sepia to an HTML Element</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-sepia">
+ <link rel="match" href="sepia-ref.html">
+ <meta name="assert"
+ content="The CSS sepia filter function should change the color of an
+ HTML element to a more brownish hue.">
+ <style type="text/css">
+ #target {
+ filter: sepia(0.85);
+ background-color: #0f0;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a brownish green square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-svg-filter-chains/clip-input-css-filter-ref.html b/layout/reftests/svg/filters/css-svg-filter-chains/clip-input-css-filter-ref.html
new file mode 100644
index 0000000000..8c2a796d3c
--- /dev/null
+++ b/layout/reftests/svg/filters/css-svg-filter-chains/clip-input-css-filter-ref.html
@@ -0,0 +1,32 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS and SVG Filter Chains: Clip Input CSS Filter with Following SVG Filter's Filter Region</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <style type="text/css">
+ #target {
+ filter: url(#blur) url(#clip-and-red-to-green);
+ background-color: #f00;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a blurred green square.</p>
+ <div id="target"></div>
+ <svg width="0" height="0">
+ <filter id="blur" x="-50" y="-50" width="200" height="200">
+ <feGaussianBlur stdDeviation="3" color-interpolation-filters="sRGB"/>
+ </filter>
+ <!-- Use a small filter region that clips the blur extents. -->
+ <filter id="clip-and-red-to-green" x="0" y="0" width="100" height="100" filterUnits="userSpaceOnUse">
+ <feColorMatrix type="hueRotate" values="90" color-interpolation-filters="sRGB"/>
+ </filter>
+ </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-svg-filter-chains/clip-input-css-filter.html b/layout/reftests/svg/filters/css-svg-filter-chains/clip-input-css-filter.html
new file mode 100644
index 0000000000..2fcb027818
--- /dev/null
+++ b/layout/reftests/svg/filters/css-svg-filter-chains/clip-input-css-filter.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS and SVG Filter Chains: Clip Input CSS Filter with Following SVG Filter's Filter Region</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#FilterEffectsRegion">
+ <link rel="match" href="css-filter-first-ref.html">
+ <meta name="assert"
+ content="An SVG filter's filter region should clip the input from a CSS
+ filter function.">
+ <style type="text/css">
+ #target {
+ filter: blur(3px) url(#clip-and-red-to-green);
+ background-color: #f00;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a blurred green square.</p>
+ <div id="target"></div>
+ <svg width="0" height="0">
+ <!-- Use a small filter region that clips the blur extents. -->
+ <filter id="clip-and-red-to-green" x="0" y="0" width="100" height="100" filterUnits="userSpaceOnUse">
+ <feColorMatrix type="hueRotate" values="90" color-interpolation-filters="sRGB"/>
+ </filter>
+ </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-svg-filter-chains/css-filter-first-ref.html b/layout/reftests/svg/filters/css-svg-filter-chains/css-filter-first-ref.html
new file mode 100644
index 0000000000..838eeaf4b9
--- /dev/null
+++ b/layout/reftests/svg/filters/css-svg-filter-chains/css-filter-first-ref.html
@@ -0,0 +1,31 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS and SVG Filter Chains: CSS Filter as First Filter</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <style type="text/css">
+ #target {
+ filter: url(#blur-and-red-to-green);
+ background-color: #f00;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a blurred green square.</p>
+ <div id="target"></div>
+ <svg width="0" height="0">
+ <filter id="blur-and-red-to-green" x="-50" y="-50" width="200" height="200" filterUnits="userSpaceOnUse">
+ <!-- Blur the red square. -->
+ <feGaussianBlur stdDeviation="3" color-interpolation-filters="sRGB"/>
+ <!-- Turn the red square into a green square. -->
+ <feColorMatrix type="hueRotate" values="90" color-interpolation-filters="sRGB"/>
+ </filter>
+ </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-svg-filter-chains/css-filter-first.html b/layout/reftests/svg/filters/css-svg-filter-chains/css-filter-first.html
new file mode 100644
index 0000000000..d2e208dd6c
--- /dev/null
+++ b/layout/reftests/svg/filters/css-svg-filter-chains/css-filter-first.html
@@ -0,0 +1,33 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS and SVG Filter Chains: CSS Filter as First Filter</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#FilterProperty">
+ <link rel="match" href="css-filter-first-ref.html">
+ <meta name="assert"
+ content="A filter chain starting with a CSS filter function followed by
+ an SVG reference filter should render correctly.">
+ <style type="text/css">
+ #target {
+ filter: blur(3px) url(#red-to-green);
+ background-color: #f00;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a blurred green square.</p>
+ <div id="target"></div>
+ <svg width="0" height="0">
+ <filter id="red-to-green" x="-50" y="-50" width="200" height="200" filterUnits="userSpaceOnUse">
+ <feColorMatrix type="hueRotate" values="90" color-interpolation-filters="sRGB"/>
+ </filter>
+ </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-svg-filter-chains/css-filter-last-ref.html b/layout/reftests/svg/filters/css-svg-filter-chains/css-filter-last-ref.html
new file mode 100644
index 0000000000..c335d1683e
--- /dev/null
+++ b/layout/reftests/svg/filters/css-svg-filter-chains/css-filter-last-ref.html
@@ -0,0 +1,31 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS and SVG Filter Chains: CSS Filter as Last Filter</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <style type="text/css">
+ #target {
+ filter: url(#red-to-green-and-blur);
+ background-color: #f00;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a blurred green square.</p>
+ <div id="target"></div>
+ <svg width="0" height="0">
+ <filter id="red-to-green-and-blur" x="-50" y="-50" width="200" height="200" filterUnits="userSpaceOnUse">
+ <!-- Turn the red square into a green square. -->
+ <feColorMatrix type="hueRotate" values="90" color-interpolation-filters="sRGB"/>
+ <!-- Blur the red square. -->
+ <feGaussianBlur stdDeviation="3" color-interpolation-filters="sRGB"/>
+ </filter>
+ </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-svg-filter-chains/css-filter-last.html b/layout/reftests/svg/filters/css-svg-filter-chains/css-filter-last.html
new file mode 100644
index 0000000000..d4e00fb30e
--- /dev/null
+++ b/layout/reftests/svg/filters/css-svg-filter-chains/css-filter-last.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS and SVG Filter Chains: CSS Filter as Last Filter</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#FilterProperty">
+ <link rel="match" href="css-filter-last-ref.html">
+ <meta name="assert"
+ content="A filter chain starting with an SVG reference filter followed
+ by a CSS filter function should render correctly.">
+ <style type="text/css">
+ #target {
+ filter: url(#red-to-green) blur(3px);
+ background-color: #f00;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a blurred green square.</p>
+ <div id="target"></div>
+ <svg width="0" height="0">
+ <filter id="red-to-green" x="-50" y="-50" width="200" height="200" filterUnits="userSpaceOnUse">
+ <!-- Turn the red square into a green square. -->
+ <feColorMatrix type="hueRotate" values="90" color-interpolation-filters="sRGB"/>
+ </filter>
+ </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-svg-filter-chains/css-filter-middle-ref.html b/layout/reftests/svg/filters/css-svg-filter-chains/css-filter-middle-ref.html
new file mode 100644
index 0000000000..9340231a24
--- /dev/null
+++ b/layout/reftests/svg/filters/css-svg-filter-chains/css-filter-middle-ref.html
@@ -0,0 +1,38 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS and SVG Filter Chains: CSS Filter as Last Filter</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <style type="text/css">
+ #target {
+ filter: url(#magenta-to-green-and-blur);
+ background-color: #f0f;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a blurred green square.</p>
+ <div id="target"></div>
+ <svg width="0" height="0">
+ <filter id="magenta-to-green-and-blur" x="-50" y="-50" width="200" height="200" filterUnits="userSpaceOnUse">
+ <!-- Turn the magenta square into a red square. -->
+ <feComponentTransfer color-interpolation-filters="sRGB">
+ <feFuncR type="identity"/>
+ <feFuncG type="table" tableValues="0 0"/>
+ <feFuncB type="table" tableValues="0 0"/>
+ <feFuncA type="identity"/>
+ </feComponentTransfer>
+ <!-- Blur the red square. -->
+ <feGaussianBlur stdDeviation="3" color-interpolation-filters="sRGB"/>
+ <!-- Turn the blurred red square into a blurred green square. -->
+ <feColorMatrix type="hueRotate" values="90" color-interpolation-filters="sRGB"/>
+ </filter>
+ </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-svg-filter-chains/css-filter-middle.html b/layout/reftests/svg/filters/css-svg-filter-chains/css-filter-middle.html
new file mode 100644
index 0000000000..89020a641c
--- /dev/null
+++ b/layout/reftests/svg/filters/css-svg-filter-chains/css-filter-middle.html
@@ -0,0 +1,42 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS and SVG Filter Chains: CSS Filter as Middle Filter</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#FilterProperty">
+ <link rel="match" href="css-filter-middle-ref.html">
+ <meta name="assert"
+ content="A filter chain starting with an SVG reference filter, followed
+ by a CSS filter function, and followed by an SVG reference
+ filter should render correctly.">
+ <style type="text/css">
+ #target {
+ filter: url(#magenta-to-red) blur(3px) url(#red-to-green);
+ background-color: #f0f;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a blurred green square.</p>
+ <div id="target"></div>
+ <svg width="0" height="0">
+ <filter id="magenta-to-red" color-interpolation-filters="sRGB">
+ <feComponentTransfer>
+ <feFuncR type="identity"/>
+ <feFuncG type="table" tableValues="0 0"/>
+ <feFuncB type="table" tableValues="0 0"/>
+ <feFuncA type="identity"/>
+ </feComponentTransfer>
+ </filter>
+ <filter id="red-to-green" x="-50" y="-50" width="200" height="200" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+ <feColorMatrix type="hueRotate" values="90"/>
+ </filter>
+ </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-svg-filter-chains/reftest.list b/layout/reftests/svg/filters/css-svg-filter-chains/reftest.list
new file mode 100644
index 0000000000..ac3ee0dc0b
--- /dev/null
+++ b/layout/reftests/svg/filters/css-svg-filter-chains/reftest.list
@@ -0,0 +1,8 @@
+# These tests verify that filter chains of combined CSS and SVG filters behave
+# properly.
+# e.g. filter: url(#f1) blur(3px) url(#2) grayscale(0.5);
+
+== clip-input-css-filter.html clip-input-css-filter-ref.html
+fuzzy(0-1,0-288) == css-filter-first.html css-filter-first-ref.html
+== css-filter-last.html css-filter-last-ref.html
+== css-filter-middle.html css-filter-middle-ref.html
diff --git a/layout/reftests/svg/filters/dynamic-filter-invalidation-01.svg b/layout/reftests/svg/filters/dynamic-filter-invalidation-01.svg
new file mode 100644
index 0000000000..ba8e5bb421
--- /dev/null
+++ b/layout/reftests/svg/filters/dynamic-filter-invalidation-01.svg
@@ -0,0 +1,36 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait">
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=879682 -->
+ <script>
+
+var NS_SVG = 'http://www.w3.org/2000/svg';
+
+function run_test() {
+ var gNode = document.createElementNS(NS_SVG, "g");
+ gNode.setAttribute('filter', 'url(#filter)');
+
+ var rect = document.createElementNS(NS_SVG, 'rect');
+ rect.setAttribute('width', '100');
+ rect.setAttribute('height', '100');
+ rect.setAttribute('fill', 'white');
+ gNode.appendChild(rect);
+
+ document.documentElement.appendChild(gNode);
+ document.documentElement.removeAttribute("class");
+}
+
+document.addEventListener("MozReftestInvalidate", run_test);
+setTimeout(run_test, 4000); // fallback for running outside reftest
+
+ </script>
+ <filter id="filter" x="20" y="20" width="100" height="100"
+ filterUnits="userSpaceOnUse"
+ primitiveUnits="userSpaceOnUse">
+ <feFlood flood-color="lime"/>
+ </filter>
+ <rect width="100%" height="100%" fill="lime"/>
+ <rect x="20" y="20" width="100" height="100" fill="red"/>
+</svg>
diff --git a/layout/reftests/svg/filters/dynamic-filter-invalidation-02.svg b/layout/reftests/svg/filters/dynamic-filter-invalidation-02.svg
new file mode 100644
index 0000000000..b424e0734e
--- /dev/null
+++ b/layout/reftests/svg/filters/dynamic-filter-invalidation-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" class="reftest-wait" onload="run_test();">
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=769942 -->
+ <script>
+
+function run_test() {
+ document.documentElement.getBoundingClientRect();
+ document.getElementById("setFilterOnThis").setAttribute('filter', 'url(#filter)');
+ document.documentElement.removeAttribute("class");
+}
+
+ </script>
+ <filter id="filter" x="20%" y="20%" width="100%" height="100%">
+ <feFlood flood-color="lime"/>
+ </filter>
+ <rect width="100%" height="100%" fill="lime"/>
+ <rect x="20" y="20" width="100" height="100" fill="red"/>
+ <rect width="100" height="100" fill="white" id="setFilterOnThis"/>
+</svg>
diff --git a/layout/reftests/svg/filters/dynamic-filter-invalidation-03.svg b/layout/reftests/svg/filters/dynamic-filter-invalidation-03.svg
new file mode 100644
index 0000000000..4fc7dc8857
--- /dev/null
+++ b/layout/reftests/svg/filters/dynamic-filter-invalidation-03.svg
@@ -0,0 +1,30 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait">
+ <!--
+ From https://bugzilla.mozilla.org/show_bug.cgi?id=488702
+ -->
+ <title>Test that invalidation takes filters into account</title>
+ <desc>
+ This test checks that when a container element changes, the area of
+ the screen that is invalidated and repainted takes account of any
+ filter effects on the changed element.
+ </desc>
+ <script type="text/javascript">//<![CDATA[
+
+function show_lime_rect()
+{
+ document.getElementById("g").setAttribute("opacity", "1");
+ document.documentElement.removeAttribute("class");
+}
+
+document.addEventListener("MozReftestInvalidate", show_lime_rect, false);
+setTimeout(show_lime_rect, 1000);
+
+ //]]></script>
+ <filter id="filter" filterUnits="userSpaceOnUse" x="0" y="0" width="200%" height="100%">
+ <feOffset dx="-20"/>
+ </filter>
+ <rect width="100%" height="100%" fill="red"/>
+ <g id="g" opacity="0" filter="url(#filter)">
+ <rect x="20" width="100%" height="100%" fill="lime"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/filters/dynamic-filter-invalidation-04.svg b/layout/reftests/svg/filters/dynamic-filter-invalidation-04.svg
new file mode 100644
index 0000000000..0e12e8d826
--- /dev/null
+++ b/layout/reftests/svg/filters/dynamic-filter-invalidation-04.svg
@@ -0,0 +1,32 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait">
+ <!--
+ From https://bugzilla.mozilla.org/show_bug.cgi?id=488702
+ -->
+ <title>Test that invalidation takes filters on ancestors into account</title>
+ <desc>
+ This test checks that when a container element changes, the area of
+ the screen that is invalidated and repainted takes account of any
+ filter effects on the ancestors of the changed element.
+ </desc>
+ <script type="text/javascript">//<![CDATA[
+
+function show_lime_rect()
+{
+ document.getElementById("g").setAttribute("opacity", "1");
+ document.documentElement.removeAttribute("class");
+}
+
+document.addEventListener("MozReftestInvalidate", show_lime_rect, false);
+setTimeout(show_lime_rect, 1000);
+
+ //]]></script>
+ <filter id="filter" filterUnits="userSpaceOnUse" x="0" y="0" width="200%" height="100%">
+ <feOffset dx="-20"/>
+ </filter>
+ <rect width="100%" height="100%" fill="red"/>
+ <g filter="url(#filter)">
+ <g id="g" opacity="0">
+ <rect x="20" width="100%" height="100%" fill="lime"/>
+ </g>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/filters/dynamic-filtered-foreignObject-01.svg b/layout/reftests/svg/filters/dynamic-filtered-foreignObject-01.svg
new file mode 100644
index 0000000000..2320f21cf6
--- /dev/null
+++ b/layout/reftests/svg/filters/dynamic-filtered-foreignObject-01.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" class="reftest-wait">
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=769942 -->
+ <script>
+
+function run_test() {
+ var fO = document.getElementById("fO");
+ fO.parentNode.removeChild(fO);
+ document.documentElement.removeAttribute("class");
+}
+
+document.addEventListener("MozReftestInvalidate", run_test);
+setTimeout(run_test, 4000); // fallback for running outside reftest
+
+ </script>
+ <filter id="filter" x="0" y="0" width="150" height="150"
+ filterUnits="userSpaceOnUse"
+ primitiveUnits="userSpaceOnUse">
+ <feOffset dx="-50" dy="-50"/>
+ </filter>
+ <rect width="100%" height="100%" fill="lime"/>
+ <g filter="url(#filter)">
+ <foreignObject id="fO" x="50" y="50" width="100" height="100">
+ <div xmlns="http://www.w3.org/1999/xhtml"
+ style="display:block; width:100%; height:100%; background:red;"/>
+ </foreignObject>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/filters/feBlend-1-ref.svg b/layout/reftests/svg/filters/feBlend-1-ref.svg
new file mode 100644
index 0000000000..24a6fdfd6a
--- /dev/null
+++ b/layout/reftests/svg/filters/feBlend-1-ref.svg
@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+
+<rect x="0" y="0" width="50" height="50" fill="#DFB53F"/>
+<rect x="50" y="0" width="50" height="50" fill="#B5B53F"/>
+<rect x="100" y="0" width="50" height="50" fill="#DFDF3F"/>
+<rect x="150" y="0" width="50" height="50" fill="#B5B53F"/>
+<rect x="200" y="0" width="50" height="50" fill="#DFDF3F"/>
+<rect x="250" y="0" width="50" height="50" fill="#B5DF3F"/>
+<rect x="300" y="0" width="50" height="50" fill="#B5DF3F"/>
+<rect x="350" y="0" width="50" height="50" fill="#B5DF3F"/>
+<rect x="0" y="50" width="50" height="50" fill="#DFB53F"/>
+<rect x="50" y="50" width="50" height="50" fill="#B5DF3F"/>
+<rect x="100" y="50" width="50" height="50" fill="#DFDF3F"/>
+<rect x="150" y="50" width="50" height="50" fill="#DFDF3F"/>
+<rect x="200" y="50" width="50" height="50" fill="#DFC88E"/>
+<rect x="250" y="50" width="50" height="50" fill="#B5DF3F"/>
+<rect x="300" y="50" width="50" height="50" fill="#DFC88E"/>
+<rect x="350" y="50" width="50" height="50" fill="#B5CC3F"/>
+<rect x="0" y="100" width="50" height="50" fill="#DFB53F"/>
+</svg>
diff --git a/layout/reftests/svg/filters/feBlend-1.svg b/layout/reftests/svg/filters/feBlend-1.svg
new file mode 100644
index 0000000000..6a94853f5b
--- /dev/null
+++ b/layout/reftests/svg/filters/feBlend-1.svg
@@ -0,0 +1,104 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
+<filter id="f0" x="0%" y="0%" width="100%" height="100%">
+ <feFlood result="a" flood-color="rgb(255,0,0)" flood-opacity="0.5"/>
+ <feFlood result="b" flood-color="rgb(0,255,0)" flood-opacity="0.5"/>
+ <feBlend in="a" in2="b" mode="normal"/>
+</filter>
+<rect x="0" y="0" width="50" height="50" filter="url(#f0)"/>
+<filter id="f1" x="0%" y="0%" width="100%" height="100%">
+ <feFlood result="a" flood-color="rgb(255,0,0)" flood-opacity="0.5"/>
+ <feFlood result="b" flood-color="rgb(0,255,0)" flood-opacity="0.5"/>
+ <feBlend in="a" in2="b" mode="multiply"/>
+</filter>
+<rect x="50" y="0" width="50" height="50" filter="url(#f1)"/>
+<filter id="f2" x="0%" y="0%" width="100%" height="100%">
+ <feFlood result="a" flood-color="rgb(255,0,0)" flood-opacity="0.5"/>
+ <feFlood result="b" flood-color="rgb(0,255,0)" flood-opacity="0.5"/>
+ <feBlend in="a" in2="b" mode="screen"/>
+</filter>
+<rect x="100" y="0" width="50" height="50" filter="url(#f2)"/>
+<filter id="f3" x="0%" y="0%" width="100%" height="100%">
+ <feFlood result="a" flood-color="rgb(255,0,0)" flood-opacity="0.5"/>
+ <feFlood result="b" flood-color="rgb(0,255,0)" flood-opacity="0.5"/>
+ <feBlend in="a" in2="b" mode="darken"/>
+</filter>
+<rect x="150" y="0" width="50" height="50" filter="url(#f3)"/>
+<filter id="f4" x="0%" y="0%" width="100%" height="100%">
+ <feFlood result="a" flood-color="rgb(255,0,0)" flood-opacity="0.5"/>
+ <feFlood result="b" flood-color="rgb(0,255,0)" flood-opacity="0.5"/>
+ <feBlend in="a" in2="b" mode="lighten"/>
+</filter>
+<rect x="200" y="0" width="50" height="50" filter="url(#f4)"/>
+<filter id="f5" x="0%" y="0%" width="100%" height="100%">
+ <feFlood result="a" flood-color="rgb(255,0,0)" flood-opacity="0.5"/>
+ <feFlood result="b" flood-color="rgb(0,255,0)" flood-opacity="0.5"/>
+ <feBlend in="a" in2="b" mode="overlay"/>
+</filter>
+<rect x="250" y="0" width="50" height="50" filter="url(#f5)"/>
+<filter id="f6" x="0%" y="0%" width="100%" height="100%">
+ <feFlood result="a" flood-color="rgb(255,0,0)" flood-opacity="0.5"/>
+ <feFlood result="b" flood-color="rgb(0,255,0)" flood-opacity="0.5"/>
+ <feBlend in="a" in2="b" mode="color-dodge"/>
+</filter>
+<rect x="300" y="0" width="50" height="50" filter="url(#f6)"/>
+<filter id="f7" x="0%" y="0%" width="100%" height="100%">
+ <feFlood result="a" flood-color="rgb(255,0,0)" flood-opacity="0.5"/>
+ <feFlood result="b" flood-color="rgb(0,255,0)" flood-opacity="0.5"/>
+ <feBlend in="a" in2="b" mode="color-burn"/>
+</filter>
+<rect x="350" y="0" width="50" height="50" filter="url(#f7)"/>
+<filter id="f8" x="0%" y="0%" width="100%" height="100%">
+ <feFlood result="a" flood-color="rgb(255,0,0)" flood-opacity="0.5"/>
+ <feFlood result="b" flood-color="rgb(0,255,0)" flood-opacity="0.5"/>
+ <feBlend in="a" in2="b" mode="hard-light"/>
+</filter>
+<rect x="0" y="50" width="50" height="50" filter="url(#f8)"/>
+<filter id="f9" x="0%" y="0%" width="100%" height="100%">
+ <feFlood result="a" flood-color="rgb(255,0,0)" flood-opacity="0.5"/>
+ <feFlood result="b" flood-color="rgb(0,255,0)" flood-opacity="0.5"/>
+ <feBlend in="a" in2="b" mode="soft-light"/>
+</filter>
+<rect x="50" y="50" width="50" height="50" filter="url(#f9)"/>
+<filter id="f10" x="0%" y="0%" width="100%" height="100%">
+ <feFlood result="a" flood-color="rgb(255,0,0)" flood-opacity="0.5"/>
+ <feFlood result="b" flood-color="rgb(0,255,0)" flood-opacity="0.5"/>
+ <feBlend in="a" in2="b" mode="difference"/>
+</filter>
+<rect x="100" y="50" width="50" height="50" filter="url(#f10)"/>
+<filter id="f11" x="0%" y="0%" width="100%" height="100%">
+ <feFlood result="a" flood-color="rgb(255,0,0)" flood-opacity="0.5"/>
+ <feFlood result="b" flood-color="rgb(0,255,0)" flood-opacity="0.5"/>
+ <feBlend in="a" in2="b" mode="exclusion"/>
+</filter>
+<rect x="150" y="50" width="50" height="50" filter="url(#f11)"/>
+<filter id="f12" x="0%" y="0%" width="100%" height="100%">
+ <feFlood result="a" flood-color="rgb(255,0,0)" flood-opacity="0.5"/>
+ <feFlood result="b" flood-color="rgb(0,255,0)" flood-opacity="0.5"/>
+ <feBlend in="a" in2="b" mode="hue"/>
+</filter>
+<rect x="200" y="50" width="50" height="50" filter="url(#f12)"/>
+<filter id="f13" x="0%" y="0%" width="100%" height="100%">
+ <feFlood result="a" flood-color="rgb(255,0,0)" flood-opacity="0.5"/>
+ <feFlood result="b" flood-color="rgb(0,255,0)" flood-opacity="0.5"/>
+ <feBlend in="a" in2="b" mode="saturation"/>
+</filter>
+<rect x="250" y="50" width="50" height="50" filter="url(#f13)"/>
+<filter id="f14" x="0%" y="0%" width="100%" height="100%">
+ <feFlood result="a" flood-color="rgb(255,0,0)" flood-opacity="0.5"/>
+ <feFlood result="b" flood-color="rgb(0,255,0)" flood-opacity="0.5"/>
+ <feBlend in="a" in2="b" mode="color"/>
+</filter>
+<rect x="300" y="50" width="50" height="50" filter="url(#f14)"/>
+<filter id="f15" x="0%" y="0%" width="100%" height="100%">
+ <feFlood result="a" flood-color="rgb(255,0,0)" flood-opacity="0.5"/>
+ <feFlood result="b" flood-color="rgb(0,255,0)" flood-opacity="0.5"/>
+ <feBlend in="a" in2="b" mode="luminosity"/>
+</filter>
+<rect x="350" y="50" width="50" height="50" filter="url(#f15)"/>
+<filter id="f16" x="0%" y="0%" width="100%" height="100%">
+ <feFlood result="a" flood-color="rgb(255,0,0)" flood-opacity="0.5"/>
+ <feFlood result="b" flood-color="rgb(0,255,0)" flood-opacity="0.5"/>
+ <feBlend in="a" in2="b" mode="undefined"/>
+</filter>
+<rect x="0" y="100" width="50" height="50" filter="url(#f16)"/>
+</svg>
diff --git a/layout/reftests/svg/filters/feBlend-2-ref.svg b/layout/reftests/svg/filters/feBlend-2-ref.svg
new file mode 100644
index 0000000000..6b62e6a270
--- /dev/null
+++ b/layout/reftests/svg/filters/feBlend-2-ref.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+
+<rect x="0" y="0" width="100" height="100" fill="#00ff00"/>
+<rect x="150" y="0" width="100" height="100" fill="#00ff00"/>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feBlend-2.svg b/layout/reftests/svg/filters/feBlend-2.svg
new file mode 100644
index 0000000000..c03e665d20
--- /dev/null
+++ b/layout/reftests/svg/filters/feBlend-2.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
+
+<filter id="f1" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse">
+ <feFlood flood-color="#ff0000" result="flood" x="0" y="0" width="100" height="100"/>
+ <feBlend mode="normal" in="SourceGraphic" in2="flood"/>
+</filter>
+<rect x="0" y="0" width="100" height="100" fill="#00ff00" filter="url(#f1)"/>
+
+<!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=1181317 -->
+<filter id="f2" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse">
+ <feFlood flood-color="#ff0000" result="red" x="150" y="0"
+ width="100" height="100"/>
+ <feBlend mode="hard-light" in="SourceGraphic" in2="red"/>
+</filter>
+<rect x="150" y="0" width="100" height="100" fill="#00ff00" filter="url(#f2)"/>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feColorMatrix-1-ref.svg b/layout/reftests/svg/filters/feColorMatrix-1-ref.svg
new file mode 100644
index 0000000000..f7328b21ef
--- /dev/null
+++ b/layout/reftests/svg/filters/feColorMatrix-1-ref.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+
+<rect x="10" y="10" width="80" height="80" fill="#345612" fill-opacity="0.5"/>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feColorMatrix-1.svg b/layout/reftests/svg/filters/feColorMatrix-1.svg
new file mode 100644
index 0000000000..4cfd34cc4c
--- /dev/null
+++ b/layout/reftests/svg/filters/feColorMatrix-1.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+
+<filter id="f1" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox"
+ x="0%" y="0%" width="100%" height="100%">
+ <feColorMatrix type="matrix" values="0 1 0 0 0 0 0 1 0 0 1 0 0 0 0 0 0 0 0.5 0"
+ x="10%" y="10%" width="80%" height="80%" style="color-interpolation-filters:sRGB"/>
+</filter>
+<rect x="0" y="0" width="100" height="100" fill="#123456" filter="url(#f1)"/>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feColorMatrix-2-ref.svg b/layout/reftests/svg/filters/feColorMatrix-2-ref.svg
new file mode 100644
index 0000000000..f155cd01f4
--- /dev/null
+++ b/layout/reftests/svg/filters/feColorMatrix-2-ref.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+
+<rect x="0" y="0" width="100" height="100" fill="#345612" fill-opacity="0.5"/>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feColorMatrix-2.svg b/layout/reftests/svg/filters/feColorMatrix-2.svg
new file mode 100644
index 0000000000..08c7b04122
--- /dev/null
+++ b/layout/reftests/svg/filters/feColorMatrix-2.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
+
+<filter id="f1" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse">
+ <feColorMatrix type="matrix" values="0 1 0 0 0 0 0 1 0 0 1 0 0 0 0 0 0 0 0.5 0"
+ style="color-interpolation-filters:sRGB"/>
+</filter>
+<rect x="0" y="0" width="100" height="100" fill="#123456" filter="url(#f1)"/>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feColorMatrix-saturate-01.svg b/layout/reftests/svg/filters/feColorMatrix-saturate-01.svg
new file mode 100644
index 0000000000..7961889798
--- /dev/null
+++ b/layout/reftests/svg/filters/feColorMatrix-saturate-01.svg
@@ -0,0 +1,16 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+
+ <title>Testcase for Filter Effects Module Level 1 over-saturation</title>
+
+ <defs>
+ <filter id="SaturateHigh">
+ <feColorMatrix in="SourceGraphic" type="saturate" values="11"/>
+ </filter>
+ </defs>
+
+ <rect width="100%" height="100%" fill="#00A654" filter="url(#SaturateHigh)"/>
+</svg>
diff --git a/layout/reftests/svg/filters/feComponentTransfer-03.svg b/layout/reftests/svg/filters/feComponentTransfer-03.svg
new file mode 100644
index 0000000000..d4ee019848
--- /dev/null
+++ b/layout/reftests/svg/filters/feComponentTransfer-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">
+ <title>Testcase for feComponentTransfer with default arguments for gamma and linear</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=534841 -->
+ <defs>
+ <filter id="f1" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox"
+ x="0" y="0" width="100%" height="100%">
+ <feComponentTransfer x="0" y="0" width="100%" height="100%"
+ style="color-interpolation-filters:sRGB">
+ <feFuncR type="identity"/>
+ <feFuncG type="gamma"/>
+ <feFuncB type="identity"/>
+ <feFuncA type="linear"/>
+ </feComponentTransfer>
+ </filter>
+ </defs>
+ <rect x="0" y="0" width="100%" height="100%" fill="lime" filter="url(#f1)"/>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feComponentTransfer-04.svg b/layout/reftests/svg/filters/feComponentTransfer-04.svg
new file mode 100644
index 0000000000..bc470d5f30
--- /dev/null
+++ b/layout/reftests/svg/filters/feComponentTransfer-04.svg
@@ -0,0 +1,19 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+ <title>Testcase for feComponentTransfer with single discrete value</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=845985 -->
+ <defs>
+ <filter id="f1" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox"
+ x="0" y="0" width="100%" height="100%">
+ <feComponentTransfer x="0" y="0" width="100%" height="100%"
+ in="SourceAlpha" style="color-interpolation-filters:sRGB">
+ <feFuncG type="discrete" tableValues="1" />
+ </feComponentTransfer>
+ </filter>
+ </defs>
+ <rect x="0" y="0" width="100%" height="100%" fill="red" filter="url(#f1)"/>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feComponentTransfer-1-ref.svg b/layout/reftests/svg/filters/feComponentTransfer-1-ref.svg
new file mode 100644
index 0000000000..cb579e5fd1
--- /dev/null
+++ b/layout/reftests/svg/filters/feComponentTransfer-1-ref.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+
+<rect x="10" y="10" width="80" height="80" fill="#00ffff"/>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feComponentTransfer-1.svg b/layout/reftests/svg/filters/feComponentTransfer-1.svg
new file mode 100644
index 0000000000..6acdb7b567
--- /dev/null
+++ b/layout/reftests/svg/filters/feComponentTransfer-1.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+
+<filter id="f1" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox"
+ x="0%" y="0%" width="100%" height="100%">
+ <feComponentTransfer x="10%" y="10%" width="80%" height="80%"
+ style="color-interpolation-filters:sRGB">
+ <feFuncR type="table" tableValues="1 0 0 1"/>
+ <feFuncG type="discrete" tableValues="0 1 0"/>
+ <feFuncB type="linear" slope="0.5" intercept="0.75"/>
+ <feFuncA type="identity"/>
+ </feComponentTransfer>
+</filter>
+<rect x="0" y="0" width="100" height="100" fill="#808080" filter="url(#f1)"/>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feComponentTransfer-2-ref.svg b/layout/reftests/svg/filters/feComponentTransfer-2-ref.svg
new file mode 100644
index 0000000000..bf9d547d17
--- /dev/null
+++ b/layout/reftests/svg/filters/feComponentTransfer-2-ref.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+
+<rect x="0" y="0" width="100" height="100" fill="#00ffff"/>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feComponentTransfer-2.svg b/layout/reftests/svg/filters/feComponentTransfer-2.svg
new file mode 100644
index 0000000000..3514ec92f4
--- /dev/null
+++ b/layout/reftests/svg/filters/feComponentTransfer-2.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
+
+<filter id="f1" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse">
+ <feComponentTransfer
+ style="color-interpolation-filters:sRGB">
+ <feFuncR type="table" tableValues="1 0 0 1"/>
+ <feFuncG type="discrete" tableValues="0 1 0"/>
+ <feFuncB type="linear" slope="0.5" intercept="0.75"/>
+ <feFuncA type="identity"/>
+ </feComponentTransfer>
+</filter>
+<rect x="0" y="0" width="100" height="100" fill="#808080" filter="url(#f1)"/>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feComposite-1-ref.svg b/layout/reftests/svg/filters/feComposite-1-ref.svg
new file mode 100644
index 0000000000..97b56241b3
--- /dev/null
+++ b/layout/reftests/svg/filters/feComposite-1-ref.svg
@@ -0,0 +1,22 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+
+<rect x="10" y="10" width="40" height="80" fill="#00ff00"/>
+<rect x="10" y="10" width="40" height="80" fill="#ff0000" opacity="0.5"/>
+<rect x="50" y="10" width="40" height="80" fill="#ff0000" opacity="0.5"/>
+
+<rect x="110" y="10" width="40" height="80" fill="#ff0000"/>
+
+<rect x="250" y="10" width="40" height="80" fill="#ff0000"/>
+
+<rect x="310" y="10" width="40" height="80" fill="#00ff00"/>
+<rect x="310" y="10" width="40" height="80" fill="#ff0000" opacity="0.5"/>
+
+<rect x="450" y="10" width="40" height="80" fill="#ff0000"/>
+
+<rect x="510" y="10" width="40" height="80" fill="#ffff00"/>
+<rect x="550" y="10" width="40" height="80" fill="#ff0000"/>
+
+<rect x="0" y="100" width="100" height="100" fill="#000000"/>
+<rect x="10" y="110" width="80" height="80" fill="#ffffff"/>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feComposite-1.svg b/layout/reftests/svg/filters/feComposite-1.svg
new file mode 100644
index 0000000000..a1dfacc774
--- /dev/null
+++ b/layout/reftests/svg/filters/feComposite-1.svg
@@ -0,0 +1,82 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+
+<filter id="f1" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox"
+ x="0" y="0" width="1" height="1">
+ <feFlood flood-color="#ff0000" flood-opacity="0.5" result="flood"/>
+ <feComposite x="10%" y="10%" width="80%" height="80%" style="color-interpolation-filters:sRGB"
+ in="flood" operator="over" in2="SourceGraphic"/>
+</filter>
+<g filter="url(#f1)">
+ <rect x="0" y="0" width="50" height="100" fill="#00ff00"/>
+ <rect x="50" y="0" width="50" height="100" fill="#00ff00" opacity="0"/>
+</g>
+
+<filter id="f2" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox"
+ x="0" y="0" width="1" height="1">
+ <feFlood flood-color="#ff0000" result="flood"/>
+ <feComposite x="10%" y="10%" width="80%" height="80%" style="color-interpolation-filters:sRGB"
+ in="flood" operator="in" in2="SourceGraphic"/>
+</filter>
+<g filter="url(#f2)">
+ <rect x="100" y="0" width="50" height="100" fill="#00ff00"/>
+ <rect x="150" y="0" width="50" height="100" fill="#00ff00" opacity="0"/>
+</g>
+
+<filter id="f3" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox"
+ x="0" y="0" width="1" height="1">
+ <feFlood flood-color="#ff0000" result="flood"/>
+ <feComposite x="10%" y="10%" width="80%" height="80%" style="color-interpolation-filters:sRGB"
+ in="flood" operator="out" in2="SourceGraphic"/>
+</filter>
+<g filter="url(#f3)">
+ <rect x="200" y="0" width="50" height="100" fill="#00ff00"/>
+ <rect x="250" y="0" width="50" height="100" fill="#00ff00" opacity="0"/>
+</g>
+
+<filter id="f4" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox"
+ x="0" y="0" width="1" height="1">
+ <feFlood flood-color="#ff0000" flood-opacity="0.5" result="flood"/>
+ <feComposite x="10%" y="10%" width="80%" height="80%" style="color-interpolation-filters:sRGB"
+ in="flood" operator="atop" in2="SourceGraphic"/>
+</filter>
+<g filter="url(#f4)">
+ <rect x="300" y="0" width="50" height="100" fill="#00ff00"/>
+ <rect x="350" y="0" width="50" height="100" fill="#00ff00" opacity="0"/>
+</g>
+
+<filter id="f5" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox"
+ x="0" y="0" width="1" height="1">
+ <feFlood flood-color="#ff0000" result="flood"/>
+ <feComposite x="10%" y="10%" width="80%" height="80%" style="color-interpolation-filters:sRGB"
+ in="flood" operator="xor" in2="SourceGraphic"/>
+</filter>
+<g filter="url(#f5)">
+ <rect x="400" y="0" width="50" height="100" fill="#00ff00"/>
+ <rect x="450" y="0" width="50" height="100" fill="#00ff00" opacity="0"/>
+</g>
+
+<filter id="f6" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox"
+ x="0" y="0" width="1" height="1">
+ <feFlood flood-color="#ff0000" result="flood"/>
+ <feComposite x="10%" y="10%" width="80%" height="80%" style="color-interpolation-filters:sRGB"
+ in="flood" operator="arithmetic" in2="SourceGraphic"
+ k2="1" k3="1"/>
+</filter>
+<g filter="url(#f6)">
+ <rect x="500" y="0" width="50" height="100" fill="#00ff00"/>
+ <rect x="550" y="0" width="50" height="100" fill="#00ff00" opacity="0"/>
+</g>
+
+<!-- Test the tricky case where the arithmetic operator leads to drawing outside
+ the bounding box of the source images -->
+<filter id="f7" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse"
+ x="0" y="100" width="100" height="100">
+ <feComposite x="10" y="110" width="80" height="80" style="color-interpolation-filters:sRGB"
+ in="SourceGraphic" operator="arithmetic" in2="SourceGraphic"
+ k4="1"/>
+</filter>
+<rect x="0" y="100" width="100" height="100" fill="#000000"/>
+<g filter="url(#f7)">
+</g>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feComposite-2-ref.svg b/layout/reftests/svg/filters/feComposite-2-ref.svg
new file mode 100644
index 0000000000..464b6de23b
--- /dev/null
+++ b/layout/reftests/svg/filters/feComposite-2-ref.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+
+<rect x="0" y="0" width="50" height="100" fill="#00ff00"/>
+<rect x="0" y="0" width="50" height="100" fill="#ff0000" opacity="0.5"/>
+<rect x="50" y="0" width="50" height="100" fill="#ff0000" opacity="0.5"/>
+
+<rect x="100" y="0" width="50" height="100" fill="#808080"/>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feComposite-2.svg b/layout/reftests/svg/filters/feComposite-2.svg
new file mode 100644
index 0000000000..e43088ea84
--- /dev/null
+++ b/layout/reftests/svg/filters/feComposite-2.svg
@@ -0,0 +1,27 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
+
+<filter id="f1" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse">
+ <feFlood flood-color="#ff0000" flood-opacity="0.5" result="flood" x="0" y="0" width="100" height="100"/>
+ <feComposite style="color-interpolation-filters:sRGB"
+ in="flood" operator="over" in2="SourceGraphic"/>
+</filter>
+<g filter="url(#f1)">
+ <rect x="0" y="0" width="50" height="100" fill="#00ff00"/>
+ <rect x="50" y="0" width="50" height="100" fill="#00ff00" opacity="0"/>
+</g>
+
+<!-- Test that the arithmetic operator actually clamp the result -->
+<filter id="f2" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse" style="color-interpolation-filters:sRGB">
+ <feFlood flood-color="#ffffff" result="flood" x="100" y="0" width="50" height="100"/>
+ <feComposite result="c" in="SourceGraphic" in2="flood" operator="arithmetic" k2="1" k3="1"/>
+ <feComponentTransfer in="c">
+ <feFuncR type="linear" slope="0.5"/>
+ <feFuncG type="linear" slope="0.5"/>
+ <feFuncB type="linear" slope="0.5"/>
+ </feComponentTransfer>
+</filter>
+<g filter="url(#f2)">
+ <rect x="100" y="0" width="50" height="100" fill="#ff0000"/>
+</g>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feComposite-arguments-01.svg b/layout/reftests/svg/filters/feComposite-arguments-01.svg
new file mode 100644
index 0000000000..acec685ffc
--- /dev/null
+++ b/layout/reftests/svg/filters/feComposite-arguments-01.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <defs>
+ <filter id="filter">
+ <feFlood flood-color="lime" result="flood1"/>
+ <feFlood flood-color="red" result="flood2"/>
+ <feComposite in="flood1" in2="flood2"
+ operator="arithmetic" k1="0" k2="1" k3="0" k4="0" />
+ </filter>
+ </defs>
+ <rect width="100%" height="100%" fill="yellow" filter="url(#filter)"/>
+</svg>
+
diff --git a/layout/reftests/svg/filters/feComposite-operator-lighter-ref.html b/layout/reftests/svg/filters/feComposite-operator-lighter-ref.html
new file mode 100644
index 0000000000..561ade1582
--- /dev/null
+++ b/layout/reftests/svg/filters/feComposite-operator-lighter-ref.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<style>* { margin: 0; padding: 0; }</style>
+<canvas id="canvas" width="200" height="200"></canvas>
+<script>
+var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var width = canvas.width;
+var height = canvas.height;
+
+ctx.globalCompositeOperation = 'lighter';
+ctx.fillStyle = '#f00';
+ctx.fillRect(0,0,width,height);
+
+gradient = ctx.createLinearGradient(0, 0, 0, height);
+gradient.addColorStop(0, "#0f0");
+gradient.addColorStop(1, "#00f");
+ctx.fillStyle = gradient;
+ctx.fillRect(0, 0, width, height);
+</script>
diff --git a/layout/reftests/svg/filters/feComposite-operator-lighter.svg b/layout/reftests/svg/filters/feComposite-operator-lighter.svg
new file mode 100644
index 0000000000..74a969d1ba
--- /dev/null
+++ b/layout/reftests/svg/filters/feComposite-operator-lighter.svg
@@ -0,0 +1,11 @@
+<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
+ <filter id="f" x="0" y="0" width="1" height="1" color-interpolation-filters="sRGB">
+ <feFlood flood-color="red"/>
+ <feComposite operator="lighter" in2="SourceGraphic"/>
+ </filter>
+ <linearGradient id="g2b" x1="0" x2="0" y1="0" y2="1">
+ <stop offset="0" stop-color="#0f0"/>
+ <stop offset="1" stop-color="#00f"/>
+ </linearGradient>
+ <rect width="200" height="200" fill="url(#g2b)" filter="url(#f)"/>
+</svg>
diff --git a/layout/reftests/svg/filters/feComposite-paint-01-ref.svg b/layout/reftests/svg/filters/feComposite-paint-01-ref.svg
new file mode 100644
index 0000000000..eb0e773d3a
--- /dev/null
+++ b/layout/reftests/svg/filters/feComposite-paint-01-ref.svg
@@ -0,0 +1,9 @@
+<svg id="svg-root" width="100%" height="100%"
+ viewBox="0 0 480 360" xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink" shape-rendering="crispEdges">
+
+ <rect transform="translate(100 30)" fill="lime" width="120" height="120"/>
+ <rect transform="translate(249 29)" width="122" height="122" fill="#80FF80"/>
+ <rect transform="translate(99 179)" width="122" height="122" fill="#666"/>
+ <rect transform="translate(249 179)" width="122" height="122" fill="rgb(0,255,255)"/>
+</svg>
diff --git a/layout/reftests/svg/filters/feComposite-paint-01.svg b/layout/reftests/svg/filters/feComposite-paint-01.svg
new file mode 100644
index 0000000000..c6c2aac2e8
--- /dev/null
+++ b/layout/reftests/svg/filters/feComposite-paint-01.svg
@@ -0,0 +1,35 @@
+<svg id="svg-root" width="100%" height="100%"
+ viewBox="0 0 480 360" xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink" shape-rendering="crispEdges">
+ <defs>
+ <filter id="composite-ident" x="0" y="0" width="1" height="1">
+ <feComposite operator="arithmetic" in="FillPaint" in2="StrokePaint" k1="0" k2="1" k3="-1" k4="0"/>
+ </filter>
+ <filter id="composite-negative" x="0" y="0" width="1" height="1">
+ <feComposite operator="arithmetic" in="FillPaint" in2="FillPaint" k1="0" k2="2" k3="-1.5" k4="0"/>
+ </filter>
+ <filter id="composite-mixed" x="0" y="0" width="1" height="1">
+ <feComposite operator="arithmetic" in="FillPaint" in2="StrokePaint" k1="1" k2="-0.5" k3="0.2" k4="-0.1"/>
+ </filter>
+ <filter id="composite-clamped" x="0" y="0" width="1" height="1">
+ <feComposite operator="arithmetic" in="FillPaint" in2="StrokePaint" k1="0" k2="10" k3="20" k4="0"/>
+ </filter>
+ </defs>
+
+ <g transform="translate(100 30)">
+ <rect fill="lime" width="120" height="120"/>
+ <rect fill="red" stroke="red" filter="url(#composite-ident)" x="10" y="10" width="100" height="100"/>
+ </g>
+ <g transform="translate(250 30)">
+ <rect fill="#0F0" filter="url(#composite-negative)" x="10" y="10" width="100" height="100"/>
+ <rect stroke="#80FF80" x="5" y="5" width="110" height="110" stroke-width="12" fill="none"/>
+ </g>
+ <g transform="translate(100 180)">
+ <rect fill="rgb(43,17,12)" stroke="rgb(32,42,37)" filter="url(#composite-mixed)" x="10" y="10" width="100" height="100"/>
+ <rect stroke="#666" x="5" y="5" width="110" height="110" stroke-width="12" fill="none"/>
+ </g>
+ <g transform="translate(250 180)">
+ <rect fill="rgb(0,127,0)" stroke="rgb(0,0,127)" filter="url(#composite-clamped)" x="10" y="10" width="100" height="100"/>
+ <rect stroke="rgb(0,255,255)" x="5" y="5" width="110" height="110" stroke-width="12" fill="none"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/filters/feConvolveMatrix-1-ref.svg b/layout/reftests/svg/filters/feConvolveMatrix-1-ref.svg
new file mode 100644
index 0000000000..60474fb6b2
--- /dev/null
+++ b/layout/reftests/svg/filters/feConvolveMatrix-1-ref.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+
+<rect x="48" y="10" width="1" height="80" fill="#00ff00"/>
+<rect x="51" y="10" width="1" height="80" fill="#00ff00"/>
+
+<rect x="249" y="10" width="2" height="80" fill="#000000"/>
+
+<rect x="349" y="10" width="2" height="80" fill="#000000"/>
+
+<rect x="1" y="100" width="1" height="100" fill="#00ff00"/>
+<rect x="99" y="100" width="1" height="100" fill="#00ff00"/>
+
+<rect x="101" y="100" width="1" height="100" fill="#ff0000"/>
+
+<rect x="201" y="100" width="1" height="100" fill="#0000ff"/>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feConvolveMatrix-1.svg b/layout/reftests/svg/filters/feConvolveMatrix-1.svg
new file mode 100644
index 0000000000..8bdc267d71
--- /dev/null
+++ b/layout/reftests/svg/filters/feConvolveMatrix-1.svg
@@ -0,0 +1,75 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+
+<filter id="f1" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox"
+ x="0" y="0" width="1" height="1">
+ <feConvolveMatrix x="10%" y="10%" width="80%" height="80%" style="color-interpolation-filters:sRGB"
+ order="3" kernelMatrix="0 1 0 1 -4 1 0 1 0" in="SourceGraphic"/>
+</filter>
+<g filter="url(#f1)">
+ <rect x="0" y="0" width="100" height="100" fill="#00ff00" opacity="0"/>
+ <rect x="49" y="0" width="2" height="100" fill="#00ff00"/>
+</g>
+
+<!-- can't figure out a good way to test kernelUnitLength
+<filter id="f2" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox"
+ x="0" y="0" width="1" height="1">
+ <feConvolveMatrix x="10%" y="10%" width="80%" height="80%" style="color-interpolation-filters:sRGB"
+ order="3" kernelUnitLength="0.1" kernelMatrix="0 1 0 1 -4 1 0 1 0" in="SourceGraphic"/>
+</filter>
+<g filter="url(#f2)">
+ <rect x="100" y="0" width="100" height="100" fill="#00ff00" opacity="0"/>
+ <rect x="140" y="0" width="20" height="100" fill="#00ff00"/>
+</g>
+-->
+
+<filter id="f3" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox"
+ x="0" y="0" width="1" height="1">
+ <feConvolveMatrix x="10%" y="10%" width="80%" height="80%" style="color-interpolation-filters:sRGB"
+ order="3" kernelMatrix="0 1 0 1 -4 1 0 1 0" bias="-1" preserveAlpha="true" in="SourceGraphic"/>
+</filter>
+<g filter="url(#f3)">
+ <rect x="200" y="0" width="100" height="100" fill="#00ff00" opacity="0"/>
+ <rect x="249" y="0" width="2" height="100" fill="#00ff00"/>
+</g>
+
+<filter id="f4" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox"
+ x="0" y="0" width="1" height="1">
+ <feConvolveMatrix x="10%" y="10%" width="80%" height="80%" style="color-interpolation-filters:sRGB"
+ order="3" kernelMatrix="0 1 0 1 -4 1 0 1 0" divisor="100000" preserveAlpha="true" in="SourceGraphic"/>
+</filter>
+<g filter="url(#f4)">
+ <rect x="300" y="0" width="100" height="100" fill="#00ff00" opacity="0"/>
+ <rect x="349" y="0" width="2" height="100" fill="#00ff00"/>
+</g>
+
+<filter id="f5" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox"
+ x="0" y="0" width="1" height="1">
+ <feConvolveMatrix style="color-interpolation-filters:sRGB"
+ order="3" kernelMatrix="0 1 0 1 -4 1 0 1 0" edgeMode="wrap" in="SourceGraphic"/>
+</filter>
+<g filter="url(#f5)">
+ <rect x="0" y="100" width="100" height="100" fill="#00ff00" opacity="0"/>
+ <rect x="0" y="100" width="1" height="100" fill="#00ff00"/>
+</g>
+
+<filter id="f6" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox"
+ x="0" y="0" width="1" height="1">
+ <feConvolveMatrix style="color-interpolation-filters:sRGB"
+ order="3" kernelMatrix="0 1 0 1 -4 1 0 1 0" edgeMode="duplicate" in="SourceGraphic"/>
+</filter>
+<g filter="url(#f6)">
+ <rect x="100" y="100" width="100" height="100" fill="#00ff00" opacity="0"/>
+ <rect x="100" y="100" width="1" height="100" fill="#ff0000"/>
+</g>
+
+<filter id="f7" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox"
+ x="0" y="0" width="1" height="1">
+ <feConvolveMatrix style="color-interpolation-filters:sRGB"
+ order="3" kernelMatrix="0 1 0 1 -4 1 0 1 0" edgeMode="none" in="SourceGraphic"/>
+</filter>
+<g filter="url(#f7)">
+ <rect x="200" y="100" width="100" height="100" fill="#00ff00" opacity="0"/>
+ <rect x="200" y="100" width="1" height="100" fill="#0000ff"/>
+</g>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feConvolveMatrix-2-ref.svg b/layout/reftests/svg/filters/feConvolveMatrix-2-ref.svg
new file mode 100644
index 0000000000..5b4ba420a1
--- /dev/null
+++ b/layout/reftests/svg/filters/feConvolveMatrix-2-ref.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+
+<rect x="48" y="0" width="1" height="500" fill="#00ff00"/>
+<rect x="51" y="0" width="1" height="500" fill="#00ff00"/>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feConvolveMatrix-2.svg b/layout/reftests/svg/filters/feConvolveMatrix-2.svg
new file mode 100644
index 0000000000..a804320863
--- /dev/null
+++ b/layout/reftests/svg/filters/feConvolveMatrix-2.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
+
+<filter id="f1" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse">
+ <feConvolveMatrix style="color-interpolation-filters:sRGB"
+ order="3" kernelMatrix="0 1 0 1 -4 1 0 1 0" in="SourceGraphic"/>
+</filter>
+<g filter="url(#f1)">
+ <rect x="49" y="0" width="2" height="10000" fill="#00ff00"/>
+</g>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feConvolveMatrix-bias-01-ref.svg b/layout/reftests/svg/filters/feConvolveMatrix-bias-01-ref.svg
new file mode 100644
index 0000000000..c3c0805595
--- /dev/null
+++ b/layout/reftests/svg/filters/feConvolveMatrix-bias-01-ref.svg
@@ -0,0 +1,9 @@
+<!--
+ 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 feConvolveMatrix with bias</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=527325 -->
+ <rect x="0" y="0" width="100" height="100" fill="rgb(128,255,128)"/>
+</svg>
diff --git a/layout/reftests/svg/filters/feConvolveMatrix-bias-01.svg b/layout/reftests/svg/filters/feConvolveMatrix-bias-01.svg
new file mode 100644
index 0000000000..fe96b0b348
--- /dev/null
+++ b/layout/reftests/svg/filters/feConvolveMatrix-bias-01.svg
@@ -0,0 +1,14 @@
+<!--
+ 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>Testcase for feConvolveMatrix with bias</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=527325 -->
+ <defs>
+ <filter id="filter" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%" style="color-interpolation-filters: sRGB">
+ <feConvolveMatrix kernelMatrix="1 1 1 1 1 1 1 1 1" bias="0.5"/>
+ </filter>
+ </defs>
+ <rect x="0" y="0" width="100" height="100" fill="rgb(0,255,0)" filter="url(#filter)"/>
+</svg>
diff --git a/layout/reftests/svg/filters/feConvolveMatrix-order-01-ref.svg b/layout/reftests/svg/filters/feConvolveMatrix-order-01-ref.svg
new file mode 100644
index 0000000000..957c65e577
--- /dev/null
+++ b/layout/reftests/svg/filters/feConvolveMatrix-order-01-ref.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <defs>
+ <filter id="convoluted_lime" x="0%" y="0%" width="100%" height="100%">
+ <feFlood flood-color="lime"/>
+ <feConvolveMatrix order="3" kernelMatrix="
+ 0 0 0
+ 0 1 0
+ 0 0 0"/>
+ </filter>
+ </defs>
+ <rect x="30" y="30" width="97" height="60" filter="url(#convoluted_lime)"/>
+</svg>
diff --git a/layout/reftests/svg/filters/feConvolveMatrix-order-01.svg b/layout/reftests/svg/filters/feConvolveMatrix-order-01.svg
new file mode 100644
index 0000000000..6d0d116e77
--- /dev/null
+++ b/layout/reftests/svg/filters/feConvolveMatrix-order-01.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+ <desc>
+ <html:p>When the 'order' attribute of feConvolveMatrix is
+ omitted the effect is the same as if the value "3" were given.
+ Per <html:a href="https://bugzilla.mozilla.org/show_bug.cgi?id=478570">Bug 478570</html:a>
+ discussion and linked spec errata.</html:p>
+ </desc>
+ <defs>
+ <filter id="convoluted_lime" x="0%" y="0%" width="100%" height="100%">
+ <feFlood flood-color="lime"/>
+ <feConvolveMatrix kernelMatrix="
+ 0 0 0
+ 0 1 0
+ 0 0 0"/>
+ </filter>
+ </defs>
+ <rect x="30" y="30" width="97" height="60" fill="red" filter="url(#convoluted_lime)"/>
+</svg>
diff --git a/layout/reftests/svg/filters/feDiffuseLighting-1-ref.svg b/layout/reftests/svg/filters/feDiffuseLighting-1-ref.svg
new file mode 100644
index 0000000000..efdf453903
--- /dev/null
+++ b/layout/reftests/svg/filters/feDiffuseLighting-1-ref.svg
@@ -0,0 +1,16 @@
+<!--
+ 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'>
+ <image width='100' height='100'
+ xlink:href="data:image/png;base64,
+iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAABmJLR0QA/wD/AP+gvaeTAAAACXBI
+WXMAAA7EAAAOxAGVKw4bAAAAB3RJTUUH3wkbDDIilL5aRAAAAB1pVFh0Q29tbWVudAAAAAAAQ3Jl
+YXRlZCB3aXRoIEdJTVBkLmUHAAAA9UlEQVR42u3csRHDIBBFwbPHddADiqmEduhFlSiWelBOSirX
+YFsB49lXAMHf4DIeEXGFpqi1Fk8zzFPOGchsAQEiIEAEBIiAABEQIAIiIEAEBIiAAPmgUkosy2LV
+H3rd+VitNXrvse+7ZWcASSlFSsmqbggQAQEiIAICRECACAgQAQEiIEAERECACAgQAQEiIEAERECA
+CAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAfnHbv3Z+jzP6L1bdRaQdV1j
+jGHVWUC2bbOoGwJEQIAIiIAAERAgAgJEQIAIiIAAERAg+qrjOOINBcEbJFN4kugAAAAASUVORK5C
+YII="/>
+</svg>
diff --git a/layout/reftests/svg/filters/feDiffuseLighting-1.svg b/layout/reftests/svg/filters/feDiffuseLighting-1.svg
new file mode 100644
index 0000000000..8c5f49b101
--- /dev/null
+++ b/layout/reftests/svg/filters/feDiffuseLighting-1.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' width='100px' height='100px'>
+ <!--
+ A basic test for the <feDiffuseLighting> filter primitive.
+ Setting kernelUnitLength on the <feDiffuseLighting> should allow us to
+ assume pixel perfection.
+ -->
+ <filter id='f' x='0' y='0' width='1' height='1'>
+ <feDiffuseLighting kernelUnitLength='1'>
+ <feDistantLight/>
+ </feDiffuseLighting>
+ </filter>
+ <path d='M0,0 h100 v100 h-100 z M20,20 v60 h60 v-60 z' filter='url(#f)'/>
+</svg>
diff --git a/layout/reftests/svg/filters/feDisplacementMap-1-ref.svg b/layout/reftests/svg/filters/feDisplacementMap-1-ref.svg
new file mode 100644
index 0000000000..8ac9dff0be
--- /dev/null
+++ b/layout/reftests/svg/filters/feDisplacementMap-1-ref.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+
+<rect x="10" y="50" width="40" height="40" fill="#00ff00"/>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feDisplacementMap-1.svg b/layout/reftests/svg/filters/feDisplacementMap-1.svg
new file mode 100644
index 0000000000..5061bbe053
--- /dev/null
+++ b/layout/reftests/svg/filters/feDisplacementMap-1.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+
+<filter id="f1" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox"
+ x="0" y="0" width="1" height="1">
+ <feFlood flood-color="#ff0000" result="flood"/>
+ <feDisplacementMap x="10%" y="10%" width="80%" height="80%" style="color-interpolation-filters:sRGB"
+ in="SourceGraphic" in2="flood" scale="1" xChannelSelector="R" yChannelSelector="G"/>
+</filter>
+<g filter="url(#f1)">
+ <rect x="0" y="0" width="100" height="100" fill="#00ff00"/>
+</g>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feDisplacementMap-2-ref.svg b/layout/reftests/svg/filters/feDisplacementMap-2-ref.svg
new file mode 100644
index 0000000000..3665d027bc
--- /dev/null
+++ b/layout/reftests/svg/filters/feDisplacementMap-2-ref.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+
+<rect x="0" y="50" width="50" height="50" fill="#00ff00"/>
+<rect x="100" y="50" width="50" height="50" fill="#00ff00"/>
+<rect x="50" y="100" width="100" height="50" fill="#00ff00"/>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feDisplacementMap-2.svg b/layout/reftests/svg/filters/feDisplacementMap-2.svg
new file mode 100644
index 0000000000..29a7224b86
--- /dev/null
+++ b/layout/reftests/svg/filters/feDisplacementMap-2.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
+
+<filter id="f1" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse">
+ <feFlood flood-color="#ff0000" result="flood" x="0" y="0" width="100" height="100"/>
+ <feDisplacementMap style="color-interpolation-filters:sRGB"
+ in="SourceGraphic" in2="flood" scale="100" xChannelSelector="R" yChannelSelector="G"/>
+</filter>
+<g filter="url(#f1)">
+ <rect x="0" y="0" width="100" height="100" fill="#00ff00"/>
+</g>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feDisplacementMap-alpha-01.svg b/layout/reftests/svg/filters/feDisplacementMap-alpha-01.svg
new file mode 100644
index 0000000000..6933b78f2b
--- /dev/null
+++ b/layout/reftests/svg/filters/feDisplacementMap-alpha-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">
+ <title>Testcase for feDisplacementMap processing in2 with premultiplied colour values</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=584322 -->
+ <defs>
+ <filter id="f1">
+ <feTurbulence baseFrequency="0.1" type="fractalNoise" result="result1"/>
+ <feDisplacementMap id="feDisplacementMap" in2="result1"
+ xChannelSelector="G" yChannelSelector="G"
+ scale="50" in="SourceGraphic"/>
+ </filter>
+ </defs>
+ <rect width="100%" height="100%" fill="lime"/>
+ <g transform="translate(100,100)">
+ <circle cx="0" cy="0" r="60" fill="red" filter="url('#f1')"/>
+ <circle cx="0" cy="0" r="80" fill="lime"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/filters/feDisplacementMap-colour-01-ref.svg b/layout/reftests/svg/filters/feDisplacementMap-colour-01-ref.svg
new file mode 100644
index 0000000000..2edd897b72
--- /dev/null
+++ b/layout/reftests/svg/filters/feDisplacementMap-colour-01-ref.svg
@@ -0,0 +1,11 @@
+<!--
+ 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 feDisplacementMap processing in1 with linearRGB colours</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=603584 -->
+
+ <rect width="100%" height="100%" fill="#ea2"/>
+</svg>
diff --git a/layout/reftests/svg/filters/feDisplacementMap-colour-01.svg b/layout/reftests/svg/filters/feDisplacementMap-colour-01.svg
new file mode 100644
index 0000000000..6c8b1cb34e
--- /dev/null
+++ b/layout/reftests/svg/filters/feDisplacementMap-colour-01.svg
@@ -0,0 +1,19 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+ <title>Testcase for feDisplacementMap processing in1 with linearRGB colours</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=603584 -->
+ <defs>
+ <filter id="sponge">
+ <feTurbulence baseFrequency="0.1" type="fractalNoise" result="result1"/>
+ <feDisplacementMap id="feDisplacementMap" in2="result1" xChannelSelector="G" yChannelSelector="G" scale="50" in="SourceGraphic"/>
+ </filter>
+ </defs>
+
+ <!-- we can't use our usual lime here as that's the same colour in both colour spaces -->
+ <rect width="100%" height="100%" fill="#ea2"/>
+ <rect stroke="none" style="filter:url(#sponge)" x="50" y="50" width="100" height="100" fill="#ea2" />
+</svg>
diff --git a/layout/reftests/svg/filters/feDisplacementMap-scale-01.svg b/layout/reftests/svg/filters/feDisplacementMap-scale-01.svg
new file mode 100644
index 0000000000..0b2231e974
--- /dev/null
+++ b/layout/reftests/svg/filters/feDisplacementMap-scale-01.svg
@@ -0,0 +1,15 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+ <title>Test that directionless filter primitive attributes are resolved to user units correctly</title>
+ <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=619967 -->
+ <filter id="f" filterUnits="userSpaceOnUse" x="0" y="0" width="400" height="200" color-interpolation-filters="sRGB">
+ <feFlood flood-color="#800" result="map"/>
+ <feDisplacementMap in="SourceGraphic" in2="map" xChannelSelector="R" yChannelSelector="G" scale="100"/>
+ </filter>
+ <rect width="100%" height="100%" fill="lime"/>
+ <rect y="82" width="300" height="8" fill="red"/>
+ <rect width="400" height="200" fill="lime" filter="url(#f)"/>
+</svg>
diff --git a/layout/reftests/svg/filters/feDropShadow-01-ref.svg b/layout/reftests/svg/filters/feDropShadow-01-ref.svg
new file mode 100644
index 0000000000..47058f256f
--- /dev/null
+++ b/layout/reftests/svg/filters/feDropShadow-01-ref.svg
@@ -0,0 +1,68 @@
+<!--
+ 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 Filter Effects Module Level 1 feDropShadow</title>
+
+ <defs>
+ <filter id="dropShadow1">
+ <feGaussianBlur in="SourceAlpha" stdDeviation="2"/>
+ <feOffset dx="2" dy="2" result="offsetblur"/>
+ <feFlood flood-color="green"/>
+ <feComposite in2="offsetblur" operator="in"/>
+ <feMerge>
+ <feMergeNode/>
+ <feMergeNode in="SourceGraphic"/>
+ </feMerge>
+ </filter>
+ <filter id="dropShadow2">
+ <feGaussianBlur in="SourceAlpha" stdDeviation="5"/>
+ <feOffset dx="-2" dy="-5" result="offsetblur"/>
+ <feFlood flood-color="green"/>
+ <feComposite in2="offsetblur" operator="in"/>
+ <feMerge>
+ <feMergeNode/>
+ <feMergeNode in="SourceGraphic"/>
+ </feMerge>
+ </filter>
+ <filter id="dropShadow3">
+ <feGaussianBlur in="SourceAlpha" stdDeviation="2 5"/>
+ <feOffset dx="5" dy="5" result="offsetblur"/>
+ <feFlood flood-color="green" flood-opacity="0.2"/>
+ <feComposite in2="offsetblur" operator="in"/>
+ <feMerge>
+ <feMergeNode/>
+ <feMergeNode in="SourceGraphic"/>
+ </feMerge>
+ </filter>
+ <filter id="dropShadow4" color-interpolation-filters="sRGB">
+ <feGaussianBlur in="SourceAlpha" stdDeviation="5"/>
+ <feOffset dx="5" dy="5" result="offsetblur"/>
+ <feFlood flood-color="green"/>
+ <feComposite in2="offsetblur" operator="in"/>
+ <feMerge>
+ <feMergeNode/>
+ <feMergeNode in="SourceGraphic"/>
+ </feMerge>
+ </filter>
+ <filter id="dropShadow5">
+ <feGaussianBlur in="SourceAlpha" stdDeviation="2"/>
+ <feOffset dx="2" dy="2" result="offsetblur"/>
+ <feFlood flood-color="green"/>
+ <feComposite in2="offsetblur" operator="in"/>
+ <feMerge>
+ <feMergeNode/>
+ <feMergeNode in="SourceAlpha"/>
+ </feMerge>
+ </filter>
+ </defs>
+ <g fill="yellow" transform="translate(10,10)">
+ <circle cx="75" cy="75" r="70" filter="url(#dropShadow1)" />
+ <circle cx="250" cy="75" r="70" filter="url(#dropShadow2)" />
+ <circle cx="425" cy="75" r="70" filter="url(#dropShadow3)" />
+ <circle cx="600" cy="75" r="70" filter="url(#dropShadow4)" />
+ <circle cx="75" cy="250" r="70" filter="url(#dropShadow5)" />
+ </g>
+</svg>
diff --git a/layout/reftests/svg/filters/feDropShadow-01.svg b/layout/reftests/svg/filters/feDropShadow-01.svg
new file mode 100644
index 0000000000..847b878fbc
--- /dev/null
+++ b/layout/reftests/svg/filters/feDropShadow-01.svg
@@ -0,0 +1,43 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+
+ <title>Testcase for Filter Effects Module Level 1 feDropShadow</title>
+
+ <defs>
+ <!-- check default values -->
+ <filter id="dropShadow1">
+ <feDropShadow flood-color="green"/>
+ </filter>
+ <!-- check negative dx, dy -->
+ <filter id="dropShadow2">
+ <feDropShadow stdDeviation="5" dx="-2" dy="-5" flood-color="green"/>
+ </filter>
+ <!-- check flood-opacity and non-default values -->
+ <filter id="dropShadow3">
+ <feDropShadow stdDeviation="2 5" dx="5" dy="5" flood-color="green" flood-opacity="0.2"/>
+ </filter>
+ <!-- check sRGB -->
+ <filter id="dropShadow4" color-interpolation-filters="sRGB">
+ <feDropShadow stdDeviation="5" dx="5" dy="5" flood-color="green"/>
+ </filter>
+ <!-- check sourceAlpha input -->
+ <filter id="dropShadow5">
+ <feDropShadow in="SourceAlpha" flood-color="green"/>
+ </filter>
+ <!-- check negative stdDeviation (should not display anything) -->
+ <filter id="dropShadow6">
+ <feDropShadow stdDeviation="-2" flood-color="green"/>
+ </filter>
+ </defs>
+ <g fill="yellow" transform="translate(10,10)">
+ <circle cx="75" cy="75" r="70" filter="url(#dropShadow1)" />
+ <circle cx="250" cy="75" r="70" filter="url(#dropShadow2)" />
+ <circle cx="425" cy="75" r="70" filter="url(#dropShadow3)" />
+ <circle cx="600" cy="75" r="70" filter="url(#dropShadow4)" />
+ <circle cx="75" cy="250" r="70" filter="url(#dropShadow5)" />
+ <circle cx="250" cy="250" r="70" filter="url(#dropShadow6)" />
+ </g>
+</svg>
diff --git a/layout/reftests/svg/filters/feFlood-1-ref.svg b/layout/reftests/svg/filters/feFlood-1-ref.svg
new file mode 100644
index 0000000000..3cc5e99005
--- /dev/null
+++ b/layout/reftests/svg/filters/feFlood-1-ref.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+
+<rect x="10" y="10" width="80" height="80" fill="#00ff00" opacity="0.5"/>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feFlood-1.svg b/layout/reftests/svg/filters/feFlood-1.svg
new file mode 100644
index 0000000000..1a11222682
--- /dev/null
+++ b/layout/reftests/svg/filters/feFlood-1.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+
+<filter id="f1" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox"
+ x="0" y="0" width="1" height="1">
+ <feFlood x="10%" y="10%" width="80%" height="80%" flood-color="#00ff00" flood-opacity="0.5"/>
+</filter>
+<g filter="url(#f1)">
+ <rect x="0" y="0" width="100" height="100" fill="#00ff00" opacity="0"/>
+</g>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feFlood-2-ref.svg b/layout/reftests/svg/filters/feFlood-2-ref.svg
new file mode 100644
index 0000000000..cb122fd129
--- /dev/null
+++ b/layout/reftests/svg/filters/feFlood-2-ref.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
+
+<rect x="0" y="0" width="100%" height="100%" fill="#00ff00" opacity="0.5"/>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feFlood-2.svg b/layout/reftests/svg/filters/feFlood-2.svg
new file mode 100644
index 0000000000..8902a5a263
--- /dev/null
+++ b/layout/reftests/svg/filters/feFlood-2.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
+
+<filter id="f1" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse">
+ <feFlood flood-color="#00ff00" flood-opacity="0.5"/>
+</filter>
+<g filter="url(#f1)">
+ <rect x="0" y="0" width="100" height="100" fill="#0000ff"/>
+</g>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feFlood-color-01.svg b/layout/reftests/svg/filters/feFlood-color-01.svg
new file mode 100644
index 0000000000..779fa5e4b0
--- /dev/null
+++ b/layout/reftests/svg/filters/feFlood-color-01.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <defs>
+ <filter id="floodFilter" filterUnits="userSpaceOnUse">
+ <feFlood x="0" y="0" width="100" height="100" color="lime"
+ flood-color="currentColor" flood-opacity="1"
+ />
+ </filter>
+ </defs>
+ <rect width="100%" height="100%" fill="lime"/>
+ <use style="filter: url(#floodFilter);"/>
+</svg>
diff --git a/layout/reftests/svg/filters/feGaussianBlur-1-ref.svg b/layout/reftests/svg/filters/feGaussianBlur-1-ref.svg
new file mode 100644
index 0000000000..8728e9adff
--- /dev/null
+++ b/layout/reftests/svg/filters/feGaussianBlur-1-ref.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+
+<rect x="10" y="10" width="80" height="80" fill="#00ff00"/>
+
+<rect x="110" y="10" width="80" height="80" fill="#00ff00" fill-opacity="0.5"/>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feGaussianBlur-1.svg b/layout/reftests/svg/filters/feGaussianBlur-1.svg
new file mode 100644
index 0000000000..ef628ba047
--- /dev/null
+++ b/layout/reftests/svg/filters/feGaussianBlur-1.svg
@@ -0,0 +1,22 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+
+<filter id="f1" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox"
+ x="0" y="0" width="1" height="1">
+ <feGaussianBlur x="10%" y="10%" width="80%" height="80%" in="SourceGraphic" stdDeviation="0.04"/>
+</filter>
+<g filter="url(#f1)">
+ <rect x="0" y="0" width="100" height="100" fill="#00ff00"/>
+</g>
+
+<filter id="f2" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox"
+ x="0" y="0" width="1" height="1">
+ <feGaussianBlur x="10%" y="10%" width="80%" height="80%" in="SourceAlpha" stdDeviation="0.04"
+ result="blur" style="color-interpolation-filters:sRGB"/>
+ <feFlood flood-color="#00ff00" result="flood"/>
+ <feComposite in="flood" operator="in" in2="blur"/>
+</filter>
+<g filter="url(#f2)">
+ <rect x="100" y="0" width="100" height="100" fill="#00ff00" fill-opacity="0.5"/>
+</g>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feGaussianBlur-2-ref.svg b/layout/reftests/svg/filters/feGaussianBlur-2-ref.svg
new file mode 100644
index 0000000000..8d12555188
--- /dev/null
+++ b/layout/reftests/svg/filters/feGaussianBlur-2-ref.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
+
+<rect x="130" y="130" width="40" height="40" fill="#00ff00"/>
+
+<rect x="90" y="390" width="120" height="120" fill="#00ff00"/>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feGaussianBlur-2.svg b/layout/reftests/svg/filters/feGaussianBlur-2.svg
new file mode 100644
index 0000000000..7af12c6102
--- /dev/null
+++ b/layout/reftests/svg/filters/feGaussianBlur-2.svg
@@ -0,0 +1,40 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
+
+<!-- It's unfortunately hard to reftest the extent of the blur. We can at
+ least make sure it paints *something* -->
+
+<filter id="f1" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse">
+ <feGaussianBlur in="SourceGraphic" stdDeviation="10"/>
+</filter>
+<g filter="url(#f1)">
+ <rect x="100" y="100" width="100" height="100" fill="#00ff00"/>
+</g>
+
+<!-- the radius affected by the box-blur is bounded by 3 times the standard
+ deviation -->
+<rect x="0" y="0" width="300" height="130" fill="#ffffff"/>
+<rect x="0" y="130" width="130" height="40" fill="#ffffff"/>
+<rect x="170" y="130" width="130" height="40" fill="#ffffff"/>
+<rect x="0" y="170" width="300" height="130" fill="#ffffff"/>
+
+<!-- we can test whether the blur is a reasonable size by bumping up
+ non-zero alpha values a lot -->
+
+<filter id="f2" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse">
+ <feGaussianBlur in="SourceGraphic" stdDeviation="10"/>
+ <feComponentTransfer>
+ <feFuncA type="linear" slope="1000"/>
+ </feComponentTransfer>
+</filter>
+<g filter="url(#f2)">
+ <rect x="100" y="400" width="100" height="100" fill="#00ff00"/>
+</g>
+
+<!-- there should be nonzero alpha values everywhere within 1 standard
+ deviation of the original image -->
+<rect x="0" y="300" width="300" height="90" fill="#ffffff"/>
+<rect x="0" y="390" width="90" height="120" fill="#ffffff"/>
+<rect x="210" y="390" width="90" height="120" fill="#ffffff"/>
+<rect x="0" y="510" width="300" height="90" fill="#ffffff"/>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feGaussianBlur-3-ref.svg b/layout/reftests/svg/filters/feGaussianBlur-3-ref.svg
new file mode 100644
index 0000000000..542e8a6d55
--- /dev/null
+++ b/layout/reftests/svg/filters/feGaussianBlur-3-ref.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
+
+<rect x="100" y="100" width="100" height="100" fill="#00ff00"/>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feGaussianBlur-3.svg b/layout/reftests/svg/filters/feGaussianBlur-3.svg
new file mode 100644
index 0000000000..4d3e640c54
--- /dev/null
+++ b/layout/reftests/svg/filters/feGaussianBlur-3.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
+
+<filter id="f1" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse">
+ <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"/>
+ <feFlood flood-opacity="0" flood-color="black"/>
+ <feComposite in="blur" operator="over" x="100" y="100" width="100" height="100"/>
+</filter>
+<g filter="url(#f1)">
+ <rect x="100" y="100" width="100" height="100" fill="#00ff00"/>
+</g>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feGaussianBlur-4-ref.svg b/layout/reftests/svg/filters/feGaussianBlur-4-ref.svg
new file mode 100644
index 0000000000..1b729e3177
--- /dev/null
+++ b/layout/reftests/svg/filters/feGaussianBlur-4-ref.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
+<filter id="f1" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse">
+ <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"/>
+ <feFlood flood-opacity="0" flood-color="black"/>
+ <feComposite in="blur" operator="over" x="100" y="100" width="100" height="100"/>
+</filter>
+<g filter="url(#f1)">
+ <rect x="100" y="100" width="100" height="100" fill="#00ff00"/>
+</g>
+</svg>
diff --git a/layout/reftests/svg/filters/feGaussianBlur-4.svg b/layout/reftests/svg/filters/feGaussianBlur-4.svg
new file mode 100644
index 0000000000..c5fc07d42a
--- /dev/null
+++ b/layout/reftests/svg/filters/feGaussianBlur-4.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
+<filter id="f1" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse">
+ <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" x="100" y="100" width="100" height="100"/>
+</filter>
+<g filter="url(#f1)">
+ <rect x="100" y="100" width="100" height="100" fill="#00ff00"/>
+</g>
+</svg>
diff --git a/layout/reftests/svg/filters/feGaussianBlur-5-ref.svg b/layout/reftests/svg/filters/feGaussianBlur-5-ref.svg
new file mode 100644
index 0000000000..1ed5b8b47c
--- /dev/null
+++ b/layout/reftests/svg/filters/feGaussianBlur-5-ref.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
+<g>
+ <rect x="100" y="100" width="100" height="100" fill="#00ff00"/>
+</g>
+</svg>
diff --git a/layout/reftests/svg/filters/feGaussianBlur-5.svg b/layout/reftests/svg/filters/feGaussianBlur-5.svg
new file mode 100644
index 0000000000..ef910f498b
--- /dev/null
+++ b/layout/reftests/svg/filters/feGaussianBlur-5.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
+<filter id="f1" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse">
+ <feGaussianBlur stdDeviation="0.0001"/>
+</filter>
+<g filter="url(#f1)">
+ <rect x="100" y="100" width="100" height="100" fill="#00ff00"/>
+</g>
+</svg>
diff --git a/layout/reftests/svg/filters/feGaussianBlur-6-ref.svg b/layout/reftests/svg/filters/feGaussianBlur-6-ref.svg
new file mode 100644
index 0000000000..1ed5b8b47c
--- /dev/null
+++ b/layout/reftests/svg/filters/feGaussianBlur-6-ref.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
+<g>
+ <rect x="100" y="100" width="100" height="100" fill="#00ff00"/>
+</g>
+</svg>
diff --git a/layout/reftests/svg/filters/feGaussianBlur-6.svg b/layout/reftests/svg/filters/feGaussianBlur-6.svg
new file mode 100644
index 0000000000..275027ba1c
--- /dev/null
+++ b/layout/reftests/svg/filters/feGaussianBlur-6.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
+<filter id="f1" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse">
+ <feGaussianBlur stdDeviation="0"/>
+</filter>
+<g filter="url(#f1)">
+ <rect x="100" y="100" width="100" height="100" fill="#00ff00"/>
+</g>
+</svg>
diff --git a/layout/reftests/svg/filters/feGaussianBlur-alpha-01-ref.svg b/layout/reftests/svg/filters/feGaussianBlur-alpha-01-ref.svg
new file mode 100644
index 0000000000..6dd3b1466b
--- /dev/null
+++ b/layout/reftests/svg/filters/feGaussianBlur-alpha-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">
+
+ <title>SourceAlpha pseudo input reference</title>
+
+ <defs>
+ <filter id="blur">
+ <feGaussianBlur in="SourceGraphic" stdDeviation="2"/>
+ </filter>
+ </defs>
+
+ <g fill-opacity="0.6" stroke="black" fill="black" stroke-width="3" filter="url(#blur)">
+ <circle cx="98" cy="85" r="25"/>
+ <circle cx="80" cy="110" r="25"/>
+ <circle cx="116" cy="110" r="25"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/filters/feGaussianBlur-alpha-01.svg b/layout/reftests/svg/filters/feGaussianBlur-alpha-01.svg
new file mode 100644
index 0000000000..8e74d9ca01
--- /dev/null
+++ b/layout/reftests/svg/filters/feGaussianBlur-alpha-01.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">
+
+ <title>SourceAlpha pseudo input test</title>
+
+ <defs>
+ <filter id="alphaBlur">
+ <feGaussianBlur in="SourceAlpha" stdDeviation="2"/>
+ </filter>
+ </defs>
+
+ <g fill-opacity="0.6" stroke="black" stroke-width="3" filter="url(#alphaBlur)">
+ <circle cx="98" cy="85" r="25" fill="red"/>
+ <circle cx="80" cy="110" r="25" fill="blue"/>
+ <circle cx="116" cy="110" r="25" fill="green"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/filters/feGaussianBlur-cap-large-directional-radius-on-software-ref.html b/layout/reftests/svg/filters/feGaussianBlur-cap-large-directional-radius-on-software-ref.html
new file mode 100644
index 0000000000..4797720d2e
--- /dev/null
+++ b/layout/reftests/svg/filters/feGaussianBlur-cap-large-directional-radius-on-software-ref.html
@@ -0,0 +1,12 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+ <filter id="blur">
+ <feGaussianBlur stdDeviation="100 0"/>
+ </filter>
+ <g filter="url(#blur)">
+ <rect x="0" y="0" width="100" height="100" fill="#0f0"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/filters/feGaussianBlur-cap-large-directional-radius-on-software.html b/layout/reftests/svg/filters/feGaussianBlur-cap-large-directional-radius-on-software.html
new file mode 100644
index 0000000000..f8d7566ed4
--- /dev/null
+++ b/layout/reftests/svg/filters/feGaussianBlur-cap-large-directional-radius-on-software.html
@@ -0,0 +1,16 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+ <filter id="blur">
+ <!--
+ When rendering in software, Firefox should cap large blur radii to a
+ smaller value in order to keep performance acceptable.
+ -->
+ <feGaussianBlur stdDeviation="1000000 0"/>
+ </filter>
+ <g filter="url(#blur)">
+ <rect x="0" y="0" width="100" height="100" fill="#0f0"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/filters/feImage-1-ref.svg b/layout/reftests/svg/filters/feImage-1-ref.svg
new file mode 100644
index 0000000000..3122ae49d2
--- /dev/null
+++ b/layout/reftests/svg/filters/feImage-1-ref.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+
+<image xlink:href="mozilla-banner.gif" x="10" y="10" width="600" height="58"/>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feImage-1.svg b/layout/reftests/svg/filters/feImage-1.svg
new file mode 100644
index 0000000000..73fff9ee55
--- /dev/null
+++ b/layout/reftests/svg/filters/feImage-1.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+
+<filter id="f1" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse"
+ x="10" y="10" width="700" height="700">
+ <feImage xlink:href="mozilla-banner.gif" x="10" y="10" width="600" height="58"
+ style="color-interpolation-filters:sRGB"/>
+</filter>
+<g filter="url(#f1)">
+</g>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feImage-scale-to-primitive-subregion-ref.html b/layout/reftests/svg/filters/feImage-scale-to-primitive-subregion-ref.html
new file mode 100644
index 0000000000..dc7d3d8dca
--- /dev/null
+++ b/layout/reftests/svg/filters/feImage-scale-to-primitive-subregion-ref.html
@@ -0,0 +1,21 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE HTML>
+<html>
+<title>feImage Rendering Should Scale To Its Primitive Subregion</title>
+<head>
+ <style>
+ .filtered {
+ height: 30px;
+ width: 600px;
+ background: #0f0;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a long horizontal green rectangle.</p>
+ <div class="filtered"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/feImage-scale-to-primitive-subregion.html b/layout/reftests/svg/filters/feImage-scale-to-primitive-subregion.html
new file mode 100644
index 0000000000..c66db69110
--- /dev/null
+++ b/layout/reftests/svg/filters/feImage-scale-to-primitive-subregion.html
@@ -0,0 +1,44 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE HTML>
+<html>
+<title>feImage Rendering Should Scale To Its Primitive Subregion</title>
+<!--
+ Test for https://bugzilla.mozilla.org/show_bug.cgi?id=1065606
+
+ This test verifies that an feImage renders as large as its primitive subregion
+ before being clipped by its filter region.
+
+ In this case, the primitive subregion is 600x600. The filter region is equal
+ to the bounding box of the filtered element (100% x 30px).
+
+ Thus, the 1x1 green pixel feImage rendering should scale up to the 600x600
+ primitive subregion and then be clipped by the 100% x 30px filter region.
+ Assuming the browser window is more than 600px wide, the final rendering
+ should be a 600x30 green rectangle.
+-->
+<head>
+ <style>
+ .filtered {
+ filter: url(#f);
+ height: 30px;
+ background: red;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a long horizontal green rectangle.</p>
+ <div class="filtered"></div>
+ <svg>
+ <defs>
+ <filter id="f" x="0" y="0" width="1" height="1">
+ <!-- Data URI represents a 1x1 green pixel. -->
+ <feImage width="600" height="600"
+ xlink:href="data:image/gif;base64,R0lGODlhAQABAIAAAAD/AAAAACwAAAAAAQABAAACAkQBADs="/>
+ </filter>
+ </defs>
+ </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/feMerge-1-ref.svg b/layout/reftests/svg/filters/feMerge-1-ref.svg
new file mode 100644
index 0000000000..080cb98645
--- /dev/null
+++ b/layout/reftests/svg/filters/feMerge-1-ref.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+
+<rect x="10" y="10" width="30" height="80" fill="#00ff00"/>
+<rect x="40" y="10" width="50" height="80" fill="#0000ff"/>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feMerge-1.svg b/layout/reftests/svg/filters/feMerge-1.svg
new file mode 100644
index 0000000000..b4c05d2ba2
--- /dev/null
+++ b/layout/reftests/svg/filters/feMerge-1.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+
+<filter id="f1" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox"
+ x="0" y="0" width="1" height="1">
+ <feFlood x="0" y="0" width="50%" height="100%" flood-color="#00ff00" result="left"/>
+ <feFlood x="40%" y="0" width="60%" height="100%" flood-color="#0000ff" result="right"/>
+ <feMerge x="10%" y="10%" width="80%" height="80%">
+ <feMergeNode in="left"/>
+ <feMergeNode in="right"/>
+ </feMerge>
+</filter>
+<g filter="url(#f1)">
+ <rect x="0" y="0" width="100" height="100" fill="#000000"/>
+</g>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feMerge-2-ref.svg b/layout/reftests/svg/filters/feMerge-2-ref.svg
new file mode 100644
index 0000000000..a42ad06263
--- /dev/null
+++ b/layout/reftests/svg/filters/feMerge-2-ref.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
+
+<rect x="0" y="0" width="40%" height="100%" fill="#00ff00"/>
+<rect x="40%" y="0" width="60%" height="100%" fill="#0000ff"/>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feMerge-2.svg b/layout/reftests/svg/filters/feMerge-2.svg
new file mode 100644
index 0000000000..278b52f39e
--- /dev/null
+++ b/layout/reftests/svg/filters/feMerge-2.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
+
+<filter id="f1" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse">
+ <feFlood x="0" y="0" width="50%" height="100%" flood-color="#00ff00" result="left"/>
+ <feFlood x="40%" y="0" width="60%" height="100%" flood-color="#0000ff" result="right"/>
+ <feMerge>
+ <feMergeNode in="left"/>
+ <feMergeNode in="right"/>
+ </feMerge>
+</filter>
+<g filter="url(#f1)">
+</g>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feMorphology-1-ref.svg b/layout/reftests/svg/filters/feMorphology-1-ref.svg
new file mode 100644
index 0000000000..ac4fd4ed72
--- /dev/null
+++ b/layout/reftests/svg/filters/feMorphology-1-ref.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+
+<rect x="20" y="20" width="60" height="60" fill="#00ff00"/>
+
+<rect x="135" y="45" width="30" height="10" fill="#00ff00"/>
+
+<rect x="10" y="110" width="80" height="80" fill="#00ff00"/>
+<rect x="30" y="130" width="40" height="40" fill="#000000"/>
+
+<rect x="125" y="115" width="50" height="70" fill="#00ff00"/>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feMorphology-1.svg b/layout/reftests/svg/filters/feMorphology-1.svg
new file mode 100644
index 0000000000..cdf91fc01b
--- /dev/null
+++ b/layout/reftests/svg/filters/feMorphology-1.svg
@@ -0,0 +1,38 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+
+<filter id="f1" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox"
+ x="0" y="0" width="1" height="1">
+ <feMorphology operator="erode" radius="0.2 0.2" x="10%" y="10%" width="80%" height="80%"/>
+</filter>
+<g filter="url(#f1)">
+ <rect x="0" y="0" width="100" height="100" fill="#00ff00"/>
+</g>
+
+<filter id="f2" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox"
+ x="0" y="0" width="1" height="1">
+ <feMorphology operator="erode" radius="0.3 0.4" x="10%" y="10%" width="80%" height="80%"/>
+</filter>
+<g filter="url(#f2)">
+ <rect x="100" y="0" width="100" height="100" fill="#00ff00" fill-opacity="0"/>
+ <rect x="105" y="5" width="90" height="90" fill="#00ff00"/>
+</g>
+
+<filter id="f3" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox"
+ x="0" y="0" width="1" height="1">
+ <feMorphology operator="dilate" radius="0.2 0.2" x="10%" y="10%" width="80%" height="80%"/>
+</filter>
+<g filter="url(#f3)">
+ <rect x="0" y="100" width="100" height="100" fill="#00ff00"/>
+ <rect x="10" y="110" width="80" height="80" fill="#000000"/>
+</g>
+
+<filter id="f4" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox"
+ x="0" y="0" width="1" height="1">
+ <feMorphology operator="dilate" radius="0.2 0.3" x="10%" y="10%" width="80%" height="80%"/>
+</filter>
+<g filter="url(#f4)">
+ <rect x="100" y="100" width="100" height="100" fill="#00ff00" fill-opacity="0"/>
+ <rect x="145" y="145" width="10" height="10" fill="#00ff00"/>
+</g>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feMorphology-2-ref.svg b/layout/reftests/svg/filters/feMorphology-2-ref.svg
new file mode 100644
index 0000000000..27b0336e94
--- /dev/null
+++ b/layout/reftests/svg/filters/feMorphology-2-ref.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+
+<rect x="20" y="20" width="60" height="60" fill="#00ff00"/>
+
+<rect x="135" y="45" width="30" height="10" fill="#00ff00"/>
+
+<rect x="-20" y="80" width="140" height="140" fill="#00ff00"/>
+<rect x="30" y="130" width="40" height="40" fill="#000000"/>
+
+<rect x="125" y="115" width="50" height="70" fill="#00ff00"/>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feMorphology-2.svg b/layout/reftests/svg/filters/feMorphology-2.svg
new file mode 100644
index 0000000000..7b19aa2458
--- /dev/null
+++ b/layout/reftests/svg/filters/feMorphology-2.svg
@@ -0,0 +1,32 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
+
+<filter id="f1" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse">
+ <feMorphology operator="erode" radius="20 20"/>
+</filter>
+<g filter="url(#f1)">
+ <rect x="0" y="0" width="100" height="100" fill="#00ff00"/>
+</g>
+
+<filter id="f2" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse">
+ <feMorphology operator="erode" radius="30 40"/>
+</filter>
+<g filter="url(#f2)">
+ <rect x="105" y="5" width="90" height="90" fill="#00ff00"/>
+</g>
+
+<filter id="f3" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse">
+ <feMorphology operator="dilate" radius="20 20"/>
+</filter>
+<g filter="url(#f3)">
+ <rect x="0" y="100" width="100" height="100" fill="#00ff00"/>
+ <rect x="10" y="110" width="80" height="80" fill="#000000"/>
+</g>
+
+<filter id="f4" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse">
+ <feMorphology operator="dilate" radius="20 30"/>
+</filter>
+<g filter="url(#f4)">
+ <rect x="145" y="145" width="10" height="10" fill="#00ff00"/>
+</g>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feMorphology-radius-negative-01.svg b/layout/reftests/svg/filters/feMorphology-radius-negative-01.svg
new file mode 100644
index 0000000000..40a6b7d283
--- /dev/null
+++ b/layout/reftests/svg/filters/feMorphology-radius-negative-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">
+ <title>Test 'feMorphology' with a negative value for its 'radius'</title>
+ <!--
+ From https://bugzilla.mozilla.org/show_bug.cgi?id=485786 and
+ https://bugzilla.mozilla.org/show_bug.cgi?id=1432250
+
+ The negative value should disable the primitive effect and output
+ the input image.
+ -->
+ <filter id="f1">
+ <feMorphology operator="erode" radius="-1"/>
+ </filter>
+ <filter id="f2">
+ <feMorphology operator="erode" radius="-1 50"/>
+ </filter>
+ <rect width="100%" height="100%" fill="red"/>
+ <rect width="50%" height="100%" fill="lime" filter="url(#f1)"/>
+ <rect x="50%" width="50%" height="100%" fill="lime" filter="url(#f2)"/>
+</svg>
diff --git a/layout/reftests/svg/filters/feMorphology-radius-negative-02.svg b/layout/reftests/svg/filters/feMorphology-radius-negative-02.svg
new file mode 100644
index 0000000000..ccf44aa844
--- /dev/null
+++ b/layout/reftests/svg/filters/feMorphology-radius-negative-02.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">
+ <title>Test 'feMorphology' with a negative value for its 'radius'</title>
+ <!--
+ From https://bugzilla.mozilla.org/show_bug.cgi?id=485786 and
+ https://bugzilla.mozilla.org/show_bug.cgi?id=1432250
+
+ The negative value should disable the primitive effect and output
+ the input image.
+ -->
+ <filter id="f1">
+ <feMorphology operator="dilate" radius="-1"/>
+ </filter>
+ <filter id="f2">
+ <feMorphology operator="dilate" radius="-1 50"/>
+ </filter>
+ <rect width="100%" height="100%" fill="red"/>
+ <rect width="50%" height="100%" fill="lime" filter="url(#f1)"/>
+ <rect x="50%" width="50%" height="100%" fill="lime" filter="url(#f2)"/>
+</svg>
diff --git a/layout/reftests/svg/filters/feMorphology-radius-zero-01.svg b/layout/reftests/svg/filters/feMorphology-radius-zero-01.svg
new file mode 100644
index 0000000000..a6646b16f6
--- /dev/null
+++ b/layout/reftests/svg/filters/feMorphology-radius-zero-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">
+ <title>Test 'feMorphology' with a zero value for its 'radius'</title>
+ <!--
+ From https://bugzilla.mozilla.org/show_bug.cgi?id=485786 and
+ https://bugzilla.mozilla.org/show_bug.cgi?id=1432250
+
+ The zero value should disable the primitive effect and output
+ the input image.
+ -->
+ <filter id="f1">
+ <feMorphology operator="erode" radius="0"/>
+ </filter>
+ <filter id="f2">
+ <feMorphology operator="erode" radius="0 50"/>
+ </filter>
+ <rect width="100%" height="100%" fill="red"/>
+ <rect width="50%" height="100%" fill="lime" filter="url(#f1)"/>
+ <rect x="50%" width="50%" height="100%" fill="lime" filter="url(#f2)"/>
+</svg>
diff --git a/layout/reftests/svg/filters/feMorphology-radius-zero-02.svg b/layout/reftests/svg/filters/feMorphology-radius-zero-02.svg
new file mode 100644
index 0000000000..a819e3b358
--- /dev/null
+++ b/layout/reftests/svg/filters/feMorphology-radius-zero-02.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">
+ <title>Test 'feMorphology' with a zero value for its 'radius'</title>
+ <!--
+ From https://bugzilla.mozilla.org/show_bug.cgi?id=485786 and
+ https://bugzilla.mozilla.org/show_bug.cgi?id=1432250
+
+ The zero value should disable the primitive effect and output
+ the input image.
+ -->
+ <filter id="f1">
+ <feMorphology operator="dilate" radius="0"/>
+ </filter>
+ <filter id="f2">
+ <feMorphology operator="dilate" radius="0 50"/>
+ </filter>
+ <rect width="100%" height="100%" fill="red"/>
+ <rect width="50%" height="100%" fill="lime" filter="url(#f1)"/>
+ <rect x="50%" width="50%" height="100%" fill="lime" filter="url(#f2)"/>
+</svg>
diff --git a/layout/reftests/svg/filters/feOffset-1-ref.svg b/layout/reftests/svg/filters/feOffset-1-ref.svg
new file mode 100644
index 0000000000..ab54616e89
--- /dev/null
+++ b/layout/reftests/svg/filters/feOffset-1-ref.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+
+<rect x="15" y="25" width="75" height="65" fill="#00ff00"/>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feOffset-1.svg b/layout/reftests/svg/filters/feOffset-1.svg
new file mode 100644
index 0000000000..c94b2ba8eb
--- /dev/null
+++ b/layout/reftests/svg/filters/feOffset-1.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+
+<filter id="f1" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox"
+ x="0" y="0" width="1" height="1">
+ <feOffset x="10%" y="10%" width="80%" height="80%" dx="0.15" dy="0.25"/>
+</filter>
+<g filter="url(#f1)">
+ <rect x="0" y="0" width="100" height="100" fill="#00ff00"/>
+</g>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feOffset-2-ref.svg b/layout/reftests/svg/filters/feOffset-2-ref.svg
new file mode 100644
index 0000000000..e54bb9be8d
--- /dev/null
+++ b/layout/reftests/svg/filters/feOffset-2-ref.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+
+<rect x="15" y="25" width="100" height="100" fill="#00ff00"/>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feOffset-2.svg b/layout/reftests/svg/filters/feOffset-2.svg
new file mode 100644
index 0000000000..dc22641c97
--- /dev/null
+++ b/layout/reftests/svg/filters/feOffset-2.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
+
+<filter id="f1" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse">
+ <feOffset dx="15" dy="25"/>
+</filter>
+<g filter="url(#f1)">
+ <rect x="0" y="0" width="100" height="100" fill="#00ff00"/>
+</g>
+
+</svg>
diff --git a/layout/reftests/svg/filters/fePointLight-zoomed-page-ref.svg b/layout/reftests/svg/filters/fePointLight-zoomed-page-ref.svg
new file mode 100644
index 0000000000..d201169a9a
--- /dev/null
+++ b/layout/reftests/svg/filters/fePointLight-zoomed-page-ref.svg
@@ -0,0 +1,15 @@
+<!--
+ 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">
+ <defs>
+ <filter id="illuminate-center">
+ <feDiffuseLighting in="SourceGraphic" result="light" lighting-color="white">
+ <fePointLight x="100" y="100" z="100"/>
+ </feDiffuseLighting>
+ <feComposite in="SourceGraphic" in2="light" operator="arithmetic" k1="1" k2="0" k3="0" k4="0"/>
+ </filter>
+ </defs>
+ <rect width="200" height="200" fill="green" filter="url(#illuminate-center)"/>
+</svg>
diff --git a/layout/reftests/svg/filters/fePointLight-zoomed-page.svg b/layout/reftests/svg/filters/fePointLight-zoomed-page.svg
new file mode 100644
index 0000000000..9bd24878cd
--- /dev/null
+++ b/layout/reftests/svg/filters/fePointLight-zoomed-page.svg
@@ -0,0 +1,29 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This test verifies that fePointLight stays in the right place when the user
+ zooms the page.
+
+ If the test passes, you should see a green box with its center illuminated
+ by a point light. If the test fails, the illumination will be off-center.
+
+ This test checks that SVG filters transform points in user space to points
+ in filter space correctly.
+
+ The root SVG element specifies a width and height to prevent scrollbars
+ from appearing when the page is zoomed.
+-->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+ reftest-zoom="2.0" width="100" height="100">
+ <defs>
+ <filter id="illuminate-center">
+ <feDiffuseLighting in="SourceGraphic" result="light" lighting-color="white">
+ <fePointLight x="50" y="50" z="50"/>
+ </feDiffuseLighting>
+ <feComposite in="SourceGraphic" in2="light" operator="arithmetic" k1="1" k2="0" k3="0" k4="0"/>
+ </filter>
+ </defs>
+ <rect width="100" height="100" fill="green" filter="url(#illuminate-center)"/>
+</svg>
diff --git a/layout/reftests/svg/filters/feSpecularLighting-1-ref.svg b/layout/reftests/svg/filters/feSpecularLighting-1-ref.svg
new file mode 100644
index 0000000000..c57f91f06d
--- /dev/null
+++ b/layout/reftests/svg/filters/feSpecularLighting-1-ref.svg
@@ -0,0 +1,7 @@
+<!--
+ 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'>
+ <image width='100' height='100' xlink:href="data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00d%00%00%00d%08%06%00%00%00p%E2%95T%00%00%17DiCCPICC%20Profile%00%00x%DA%D5yWTUK%B0m%AD%B5%D7N%C0%26%E7%9Cs%CE9%07I%92%B3%92s%DCl2(%02%02%12%14%04%14%11P%14TDT%10%25%8A%80%A8(%E2ADAET%82H%10%15%03%8A%8Ar%3F%F4%9Cs%C3%BB%1Fo%8C%F7%F3%E6G%8F9fU%CF%AA%FA%EA%D1%DD%00%3C%AB%01Tj4%CA%0C%10%13%9BHs%B62%15%F6%F4%F2%16%26N%01%3D%E0%80%0C8%40%02%82%12%A8%26%8E%8Ev%F0%BF%E2%CB%24%20%00%00%0F%15%02%A8%D4h%F8%BF%03KpHB%10%00%E2%08%00%81%C1%09A1%00%C8%15%00%D44%88JK%04%C0m%00%C0XJ%225%11%00%BB%03%00%EC4O%2Fo%00l%1A%00%D8%C3~%F35%00%60%0F%F4%F4%F2%06%C0c%00%C0Nsu6%03%C0s%03%90%18%02%02ha%00%14q%00%10N%0E%0AK%04%A0%98%03%10Xc%83%23b%01%D8%3C%01%08%86A%E1%01%C1%00%3CU%00%20%1F%13%13%17%0C%C0s%13%00%A4%03%FF%93O%D8%7F%F1%0C%FC%C73%20%20%EC%1F%FE%7B%16%00%00%20%99G%24P%A3%03%D2%E0%FF5b%A2%93%FE%AE%C1%0A%00%0C%B1%D1%DB%ED%00%80%13%00%96%82%03%CCm%01%80%1F%00~Q%A3%1D%ED~%E7%20%BC!%B1n.%7F%B8%7Cl%E0v%87%3F%DC0%94f%E9%FC%7B%2F%E2HM4u%06%00n%00%24%94%9A%E8%E8%FAG%CFL%0F7%DB%0E%00%0C%00%C8%A1%90%04%8B%BF%7DND%06%D88%02%00%23%00%D2FKrv%03%00q%00d%20!%D9%C5%02%00%98%01%90W%E9%E1%AE%1E%7Fr%3E%07%87%98%FF%D1Q44%C2%D2%FA%0Fg%8DH%B4v%05%00v%00T4*%CE%D6%F9w-T%13l!%1AB%20%09h%10%02%B1%A0%00v%60%06%E6%7FV%05%08%85%00%A0A2%84%40%02D%C1k%A0A%0C%D8B%1CDC%1C%D0%40%F8O%9E%D9%FFP%2C!%00h%10%06!%FF%CDQ%18%82%20%0E%92%FE%A9%F9%B7%FA%AFC%04%04C%DC%3Fz%C0%9F%18%0DB%20%C1%2F%22%E7%DF%0A%FF%D9%2F%1A%E2%80%A6%DC%AC%BC%AC%BC%F9w%1C%93%C4T1%0D%CC%143%C0%0C1%1D%10%C681%5EP%C0%D41m%CC%043%C2%F40%0DL%07%2C%E1%15%D0%20%EC%EF%1E%FD%22rh1m%A1%C9Uqi%BA%EE%E1%7Ff%08%FCg%02wx%054%88%F8%3FN%F4%A7%F7%D1%D5%CE%D5%7F%3A%84%C4%90%D4D%00%00%B38j%1A-%22%2C%3CQ%D8%84J%8D%0E%91%17%B6%8E%0DR%94%17VUVQ%86%FF%9F%E0%E9%E5-%FC%9B%7Dr%06%04%00%10%CE%FB%FFjq*%00%3AA%00%C8%DE%7F5%FFw%00%9D%91%00%24%D6%7F5%C9N%00%26U%80%E1%23AI%B4%E4%DF%1A%06%00%80%07%3A%60%02v%E0%01A%10%03iP%00U%D0%04%3D0%06%0B%B0%01%07p%05%2F%F0%85%20%08%87%18%A0A%0A%EC%82l%C8%87b8%08%87%A1%1A%EA%A0%01%CE%C2%05h%83N%E8%85%EB0%04%230%06%13%F0%0Cf%60%01%DE%C0%1A%7C%81%1F%08%82%10%11%0A%C2%86%F0%20B%88%04%22%87%A8%22%DA%88!b%81%D8!%CE%88%17%E2%8F%84!%B1H%12%B2%0B%D9%8B%14%23%E5H5r%12iB.!%DD%C8ud%18y%80%3CEf%91e%E4%23%F2%1D%C5%A1%0C(%3B*%80J%A2J%A86j%82%DA%A2%AE%E8N4%0C%8DG%D3%D1%5C%B4%04%ADB%EB%D1%F3h%07z%1D%1DA'%D0%19%F4%0D%BA%8E%03%1C%3D%8E%13'%82S%C0i%E3%CCp%0E8o%5C(%8E%86%CB%C4%15%E1*q%F5%B8%8B%B8%1E%DCm%DCC%DC%0Cn%15%F7%0D%23%60l%980%A6%80%E9a%DB07%2C%08%8B%C72%B1%FDX5v%16%EB%C0nb%0F%B1Yl%0D%FB%85%A7%E0%F9%F1rx%5D%BC5%DE%13%1F%86O%C1%E7%E3%2B%F1g%F0%ED%F8%5B%F8%09%FC%02%FE%0B%81%40%E0%24H%11%B4%08%DB%08%5E%84HB%06a%3F%E1%18%A1%850%40x%40%98'%AC%13%89D%1E%A2%1C%D1%80%E8%40%0C%20%26%12%F3%89G%89%E7%89%FD%C4q%E2%02q%83DO%12%22%A9%92%2CI%DE%A4XR%0E%A9%92t%8E%D4G%1A'-%92~%90%99%C9%12d%5D%B2%039%98%9CF.%25%9F%22%F7%90%EF%93%17%C8%3F%E8X%E8%A4%E8%0C%E8%5C%E9%22%E9%B2%E9%AA%E8.%D2%DD%A2%9B%A6%FBDOO%2FJ%AFC%EFD%1FA%9FE_E%DFJ%7F%87~%96%FE%1B%03%2B%83%2C%83%19%C3%0E%86%24%86%12%86F%86%01%86%A7%0C%9F(%14%8A%24%C5%98%E2MI%A4%94P%9A(7(%2F(%1B%8Cl%8C%8A%8C%D6%8C%C1%8C%7B%18k%18%3B%18%C7%19%DF1%91%99%24%98L%98%7C%99%D2%99*%99.3%DDgZe%263K2%9B1%070g2%D70w3%3Ff%5EgacQaq%60%89a%D9%CFr%8Ee%98e%89%95%C8*%C9j%C1%1A%CC%9A%CB%DA%C0z%83u%9E%0D%C7%26%C6f%C6%16%C4%B6%97%ED%14%DB-%B6%05v%02%BB%14%BB5%7B%24%7B1%FB%05%F6Q%F65%0EV%0Eu%0Ew%8ET%8E%1A%8Ek%1C3%9C8NINk%CEh%CER%CE6%CEI%CE%EF%5C%02%5C%26%5C!%5C%85%5C%17%B9%C6%B9%BEr%F3q%1Bs%87p%17q%B7pOp%7F%E7%11%E6%B1%E0%89%E2)%E3%E9%E4y%CE%8B%F1%CA%F2%3A%F1%A6%F0%1E%E7%BD%C5%BB%CA%C7%CE%A7%C7%17%C4W%C4%D7%C67%C5%8F%F2%CB%F2%3B%F3g%F07%F0%DF%E3_%17%10%14%B0%12%A0%0A%1C%15%B8!%B0*%C8)h%2C%18)xH%B0OpY%88M%C8P(B%E8%90P%BF%D0%8A0%87%B0%89p%B4p%95%F0M%E15%11~%91m%22I%22'EFE~%88J%89%BA%89%E6%88%B6%88%3E%17%A3%13%D3%16%0B%15%3B%246(%B6%26.%24n%2F%BEK%BCY%7CJ%82%2C%A1-%11.qD%E2%B6%C4WI)I%0F%C9%7D%92%9D%92KR%DCR%D6R%E9R%CDR%D3%D2%14i%23%E9x%E9z%E9G2%04%19m%99(%99c2c%B2%A8%AC%86l%B8l%8D%EC%7D9TNS.B%EE%98%DC%03y%BC%BC%8E%7C%AC%7C%BD%FCc%05%06%05%13%85d%85f%85YENE%3B%C5%1C%C5N%C5wJ%E2J%DEJeJ%B7%95~)k(G%2B%9FR~%A6%C2%AAb%A3%92%A3%D2%A3%F2QUV5H%B5F%F5%91%1AE%CDRm%8FZ%97%DA%07u9%F5%10%F5%E3%EAO4%D84%EC5%F6i%0Cj%FC%D4%D4%D2%A4i%5E%D4%5C%D6%12%D7%F2%D7%AA%D5z%AC%CD%AE%ED%A8%BD_%FB%8E%0E%5E%C7Tg%8FN%AF%CE7%5DM%DDD%DD6%DD%F7z%0AzQz%E7%F4%96%F4%A5%F4C%F4O%E9%CF%1B%88%1A%04%18%9C4%981%146%F47%3Ca8c%24b%14%60To4g%2Cf%1Cl%7C%C6x%D1D%C6%24%D2%E4%BC%C9%3BSeS%9Ai%BB%E9W3%5D%B3%DDf%03%E68s%2B%F3%22%F3Q%0BV%0B7%8Bj%8B%17%96%A2%96a%96%CD%96kV%1AV%19V%03%DB%F0%DBl%B7%95m%7Bl-%60%1Dd%DDd%BDf%A3e%B3%DB%E6%A6-%83%AD%8Bm%B5%ED%9C%9D%AC%1D%CD%AE%C7%1E%B5%B7%B1%AF%B0%9F%DE.%B1%3Dv%7B%A7%038X%3BT8%3Cw%94r%8Cw%BC%EADprt%AAqz%ED%AC%E2%BC%CB%F9%B6%0B%9B%8B%9F%CB9%97%2F%AE%A6%AE%A5%AE%CF%DC%A4%DD%92%DC%06%DD%99%DCw%B87%B9%7F%F50%F7(%F7%98%F1T%F2%DC%ED9%E2%C5%EB%15%E1%D5%E5M%F4v%F7%3E%E3%BD%EEc%E1s%D8ga%87%C6%8E%FC%1D%93%3B%A5v%A6%EE%1C%F6%E5%F5%8D%F6%BD%E6%C7%E4%17%E0w%D9%1F%EF%EF%E1%7F%CE%7F3%C0!%A0%3E%60%3D%D0%3A%B06p-%C8%2C%E8H%D0%9B%60%E3%E0C%C1%CB!%06!%E5!%8B%A1%06%A1%E5%A1Ka%06a%15a%CB%E1F%E1%95%E1%AB%11f%11%D5%11%1F%22%B7E%D6E~%8Dr%88j%8C%DA%8A%F6%88n%89!%C5%F8%C7t%C7%B2%C6F%C5%DE%8C%13%8CK%8D%7B%40%95%A3%E6Sg%E2u%E3%0F%C7%AF%D1lig%12%90%84%9D%09%5D%89%EC%89%D4%C4%7BI%D2IyI%B3%C9%86%C95%C9%1B)%EE)%97SYRcS%EF%A5%C9%A6%15%A6-%A6%5B%A6%9F%CE%C02%822%06w%89%EC%CA%DE5%BB%DBd%F7%C9L%2430sp%8F%D8%9E%DC%3D%0BYVYg%B3%E9%B2%A3%B2%FF%CAQ%CE)%CF%F9%BC%D7coO%AE%40nV%EE%7C%9EU%5Es%3Ec%3E-%FF%F1%3E%BD%7Du%05XAD%C1h%A1Z%E1%D1%C2_E%C1Ew%8B%95%8B%2B%8B7%F7%07%ED%BF%7B%40%E5%40%D5%81%AD%92%D0%92%D1R%CD%D2%E3%07%09%07c%0FN%96%19%95%9D-g)O%2F%9F%AF%B0%AF%E88%24%7C%A8%E8%D0%E7%C3~%87%87%2B%D5%2B%EB%8E%D0%1DI%3A2SeW%D5uT%FC%E8%C1%A3%9B%D5%E1%D5%135%A65-%B5%FC%B5%85%B5_%8F%05%1F%1B%3Fn%7C%FCb%9D%40%5Dq%DD%F7%13%11'%9E%9C%B4%3A%D9Q%2FY_%D9%40hHnx%7D%CA%FD%D4%ED%D3%DA%A7%9B%CE%F0%9E)%3E%F3%B31%B6q%E6%AC%F3%D9%9BMZMM%E7%F8%CF%956%A3%CDI%CD%CB%E7w%9C%1F%BB%60~%A1%EB%A2%C2%C5%93-%9C-%C5%AD%D0%9A%D4%BAr%C9%FF%D2d%9Bm%DB%E0e%ED%CB%17%AFH%5C%A9mgk%2F%EA%40%3A%D2%3A%D6%3A%C3%3Bg%BA%BC%BA%1Et%DBt%0F%F6%E8%F5%B4_U%BC%DA%D8%2B%D2%5Bs%8D%E3Zi%1F%5D_n%DFV%7Fz%FF%FA%00u%60%F5z%D8%F5%F9A%BF%C1g7%3Co%3C%BA%E9ts%F4%96%ED%AD%3BC%96C7n%9B%DC%EE%BFcp%A7wXw%B8%FB%AE%F6%DD%CE%11%CD%91%8E%7B%1A%F7%DA%FF%D2%F8%AB%7DTs%B4%E3%BE%D6%FD%AE1%9D%B1%9E%07%FA%0F%FA%C6%8D%C6%AF%3F4%7F8%F4%C8%FA%D1%C8%C4%F6%89%07%93n%93O%1E%EFx%3C%F3%24%F8%C9%D2%D3%E8%A7%1F%A6%92%A7~%3C%CB%9A%C6O%17%3Dg~%5E%F9%82%FFE%FDK%99%97-3%9A3%D7f%CDg%EF%CD%B9%CC%3D%9B%0F%9A%7F%F3*%E1%D5%E6B%EEk%CA%EB%CAE%A1%C5%A6%25%D5%A5%DEe%CB%E5%B1%15%9F%95%857%D47%3FV%F3%DF%B2%BC%AD%7D'%FD%EE%CA%7B%E3%F7%F7%D6%3C%D7%16%3E%D0%3El%7D%DC%FF%89%E7S%E3g%F5%CF%83%EB%8E%EB%2F%BE%C4%7C%F9%F1%B5h%83g%E3%EC7%EDo%B7%BF%7B%7C_%FC%91%B2I%DC%AC%FA)%F3%B3%E7%97%ED%AF%E9%AD%98%AD-j%00-%00%00%00p%00%80%86%86%02%7Cl%04%A0x%01%B0%8D%01%D0%0D%FC%BES%FC%01%0E%01%40%01%80%08%82%60%03%C50%8F%C8%22%B1%C8%00%CA%83%26%A2S8k%DC%0D%CC%0A%7B%84%8F!%B0%10%06%89%BBH%86d%22%F99%5D7%7D-C)%A5%91q%9A%99%99%C5%96%B5%90m%98%83%85s%07%D7y%1E%8C7%80%EF%9A%80%B0%E0~%A1%0D%91%60%D1)%F1%ED%12%C3RJ%D2%252o%E4%AC%E5%EB%14%BE(%99)%1FP%19S%A3%A8%9Bj%24h%D6j%0Dh%CF%E8%FC%D4%E3%D2%973%D01%B40r6%0E2I0%CD5%3Bb%DEl%D1o%F9%D0jy%DB%96%0D%87%AD%BC%9D%99%BD%CF%F6%08%87d%C7%3C%A7r%E7%3A%97f%D7N%B7A%F7%11%8Fq%CF%A7%5E%2F%BD%E7%7D%96v%BC%DD%B9%E4%3B%ED7%EA%DF%1F%D0%12x%3C%E8%40pzHh%A8S%98%5E%B8x%04c%C4%97%C8%97QC%D1M1%07b%A9q.T%ADx%DE%F8M%DA%8B%84%81%C4%86%A4%BC%E4%D0%14%EBT%B94%BA%B4%95%F4%7B%19%AD%BB%AAv%E7f%A6%EC%89%CF%A2e%A7%E7%14%ED%3D%99%7B-%EF%E5%3Er%81~!%B5%A8%A1x%F2%00%5D%89~i%CC%C1%E3e%A3%E5%3F%0F%C9%1F%F6%A9%2C%3A%D2Q5SM_%A3Q%EBw%AC%F0x%5B%DD%B3%93X%BDB%83%FB%A9%3D%A7%CF%9Ey%D0%B8%D1%24%7C%CE%AEy%D7%F9%B6%0B%1FZt%5BK%2F%BD%BF%ECs%E5~%87C%E7%A3n%FD%9E%C4%ABM%BD%D3%7D%F4%FDj%03%EE%D7%E3%07%F3n%94%DD%AC%BCU9Tv%BB%E0%CE%DE%E1%7Dw%0F%8C%1C%B8%97%F7W%E2%A8%C7%7D%C5%FB%3F%C6%06%1Ed%8Ck%8E%7Fy%F8%F8Q%F7D%F5%E4%EE%C7~OL%9FJL%91%A7%DE%3E%7B0%DD%FE%BC%FA%C5%EE%97%FE3%E6%B32s%CCs%DF%E6_%BF%9A%5C%18~%7D%7D%F1%EAR%F7r%F7%CA%E97%25%AB%C9o%7D%DFY%BC%97%5Bc%5E%5B%FF0%F5%B1%EF%D3%C9%CFy%EB%E1_l%BF*m%B0m%7C%FD6%FD%7D%E0G%FDf%EE%CF%90_%E6%5B%A2%5B%5B%00%40%00%5E0%86T%B8%85%B0!v%C8A%E4%25%AA%86%96%A0%9Fp~%B8I%CC%0D%7B%8E%A7%12%18%09%9D%C4%10%12%2Fi%8A%5CK%17Fo%CA%60%40qe%0Cg%CAb%3E%C1r%9Du%99%9D%83%C3%9C3%8D%AB%85%FB%3D%AF%22%1F%8D%BFW%90%5E%C8%5D%F8%9C%C8%96%98%89x%B6D%BF%E4%A6%B4%96L%A4%EC1%B9%11%F9%8F%8A%1CJj%CA%DBT%7CT%C3%D4%E2%D5%D34vk%A6kEj%FB%E8%D8%E9%1A%E8)%EB%8B%1Ap%18%92%0C%BF%1B%BD5%9E5%990%BDk%D6g~%D9%A2%D1%B2%CA%AA%60%5B%8Au%B8%8D%97%ED6%3Bm%7B%A9%ED%1C%0E%98%C3g%C79%A7%07%CE%03.%AD%AE%C7%DD%0A%DC%13%3C%7C%3D%AD%BD%D4%BC%05%7C%08%3E%EFvL%EE%BC%E6%DB%E0W%E4%1F%17%E0%1A%A8%1E%C4%104%17%DC%1DR%1A%1A%1A%A6%1F%CE%12%FE%3A%E2jdYTH%B4n%0CS%CC%7Clg%5C%01%D5%2B%5E.~%936%9Ap%22%91%96d%96%CC%91%BC%98%D2%9D%BA%3F%CD7%5D9%03%CDx%BC%ABewqf%CC%1E%B7%2C%F3l%DD%1C%9D%BD%06%B9%DB%F2%3C%F3c%F7%ED%2B8%5Dx%A3h%B6%F8%D7%01%FE%12%9DR%F7%83%09e%07%CB%CFW%0C%1Fz%5D%89%1E%E1%AF%D2%3C%EAT%1DSS%5C%7B%FE%D8%D8%F1%2F'DO%3A%D6%EFm%E8%3E%F5%E1%8Cbc%FC%D9%2BM_%9Bu%CE%EF%BA%D0%D7%02%AD%26%97%F6%B6%DD%BA%82o%B7%EA(%E8%BC%DDM%EC%B1%B8%9A%D3%7B%ED%DA%E7~%C9%01%97%EB%19%83%C7o%5C%BD9qky%E8%EB%1Dl%98%ED%AE%C8%88%D2%3D%83%BF%ECF%BD%EF%87%8F%A5%3C%C8%1F%3F%FC%B0%FEQ%CBD%EF%E4%F0%E3%C9'%0BO%3F%3F%C3M%B3%3F%97x%A1%FD%D2n%26l%B6an%F9%95%D4%82%F7%EB%FC%C5sK%B7%97gW6V%19%DFJ%BC3z%EF%B3%96%F5a%EC%93%DA%E7%8A%F5O_%9D7%AE%7C%E7%FE%91%B7%B9%F1%2Bek%0B%000%60%01Y%D8%0EY0%80%10%11%5D%24%11%E9DQ%D4%1E%3D%81%FE%C0%F9%E2%EEb%FAX%07%5E%1B%3FHp%24%CC%133H%7C%A4%DB%E4%03tA%F4%FA%0C%7C%0C%BF(s%8C%23L%ED%CC%A7Y%AAXK%D8%0A%D8%F38%F29%8B%B9*%B8%EBx%9Ay%BB%F8%AE%F1_%13%E8%13%EC%17%EA%13%BE*%D2.%DA%2CvL%BCX%22Ir%87%94%B1%B4%A8%0C%C8%3C%93%ED%94%2B%96wW%10VXQlW%CAR%B6U%E1T%99UmVKR7%D2%20k%3C%D4%3C%A6%15%AE%AD%AE%BD%A1%D3%A7%9B%A7g%AB%CF%AA%3FePo%18i%A4j%B4i%3CdRf%BA%D3L%D6%EC%AB%F9%0D%8BRK%1F%2B)%AB%8F%DB%FA%AC%8Bl%DCmEl%DF%D8u%D8gm%B7s%E0t%98ulvJp%D6sA%5D%EE%BA%96%BBy%BB%0B%BB%2Fz%5C%F4L%F2%D2%F3F%BD%87%7DJw%B8%EC%E4%DC%F9%D4%B7%C6o%A7%BF%80%FF%F3%80c%81%3B%83%F8%83%A6%82%ABB%DCC%D9B%EF%87%15%87%5BD%40%C4%D5%C8%E4(%95%A8%D5%E8%C6%98%C0X%FE%D8%C7q%15%D4%ED%F1%A4%F8%EB%B4%F4%04%B5%84%D5%C4%D3I%BE%C9%5C%C9%F7S%F6%A5%1A%A5n%A4%B5%A6Gd%08g%3C%DDuh%B7k%26O%E6%C2%9E%AE%ACC%D9i9%A1%7Bw%E4z%E5%F9%E4%87%ECK*%C8%2B%AC%2C%3AS%DC%B1%7F%E8%C0D%C9B%E9%E72%5C9%5B%85%E8!%E5%C3%BA%95fGl%AA%9C%8EzU%07%D6%C4%D5%EE9Vq%FC%7C%DD%C8%89%F7%F5%12%0Di%A7%C6%CEH5f%9E%9D%3C%A7%D0%9C%7B%FE%D9E%95%96%82%D6%17m%9A%97%8B%AF%BC%ECP%EB%DC%D75%DD%A3v%B5%A8w%AEO%BF%BFj%E0%CB%A0%EB%8D%F6%5BRC%A7%EE(%0C%DF%1A%89%FAK%7Ctu%EC%F6%F8%A5GM%93%ADO%AEO%3D%7F%0E%2F%95g%1B_%E5%2F%16%ADt%BEc%FAP%B0%CE%BD%D1%BE%E9%B1%B5%05%F0%FBm%09%00%80%A0%09pz%1E%C0%FD%24%80%93%0F%40%A3%1C%80D%0D%00%23%3B%80%23%05%C0U%07P%D3R%40%9E%1E%05%C4%EA%E2%3F%E7%07%05%A4%C0%12Ba%1F%9C%85ax%830%22*%88%1B%92%8E%1CCz%91g%C8%26*%80%1A%A1%81h%3Ez%0E%BD%8F~%C6%F1%E1Lp%E1%B8%83%B8n%DC%1CF%8Fi%60%FE%D8~%AC%0B%7B%85g%C5%1B%E1c%F1'%F1%13%04%3A%82%09!%95%D0FX%25J%13%C3%88%8D%C4e%92%22)%89%D4O%A6'%7B%93%CF%D3!t%9Etm%F4%8C%F4%B1%F4%E3%0C%DA%0C'(%24%0A%8D%F2%82%D1%86%B1%9BI%9A%A9%9A%99%C2%9C%CD%FC%95%25%8Ee%895%88%F5%25%5B%20%DB%22%7B%0C%FB%17%8ElNF%CEc%5CJ%5C7%B8%7D%B8%D7y%CAxUx%1F%F2%A5%F0%0B%F0%8F%09%EC%134%15%02%A1%EB%C2y%22%F6%A2%3C%A2KbW%C5%CB%24%22%25-%A5%24%A4%19%A4%D7e%E6d%C7%E5n%CA%F7(%5CVlUjQnS%E9R%1DP%1BQ%7F%A1%F1A%0B%D3%E6%D0%11%D3U%D0S%D1W6%905%146b5F%8D%DF%9B%3C3%ED7%AB7%2F%B0%88%B3%F4%B42%DD%A6d-h%C3d%8B%B3%DD%B0%5B%B3_%D9%BE%E00%E78%EB%F4%CA%F9%8D%CB'%D7%9F%EEd%0F.O)%2F%1Do%7B%9F%A0%1D%19%3B%0F%FB%B6%FA%8D%FA%BF%0Dd%0CR%0B%F6%0A%D9%13%DA%10v%2B%7C%3E%E2g%14k%B4H%8Cl%ACb%9C%02U%26%5E%94%C6%99%40N%F8%9E%B8%9C%CC%9Bb%9F%9A%9B%D6%9F%FEk%97%C5%EE%8A%CC7Y%F6%D9W%F7%AA%E7v%E7%5B%EF%9B%2F%DCW%2C%B2%FFb%89q%E9LYY%85%E7a%83%23%D6GSjn%1D%E7%3B%C1X%8F6%7C%3B%FD%B1%F1%5D%D3j%F3%EA%85%F7-%EB%97~%5E!u%F0u)%F5%98%F7z%F5E%0C%24%0Ff%DE%CC%1A%DA%7D'%F9n%F4%3D%FF%D1%E2%B1%AE%F1%95%09%91%C7%3B%9F%D6%3D%7B%FDBe%26%7BnbAn%B1%60yq%D5%EA%DD%B9%0F%CC%9F2%D6%DFn%84~_%FCI%DD%DA%02%00%26P%04'H%82j%E8%87W%08%3D%A2%8A%F8%20%B9H%132%82%BCG%D9Q%5D%D4%1F-%40%5B%D1%A78%1CN%01%E7%85%CB%C3%5D%C2%BD%C4(%98%3E%16%85%D5%60%7Fa%BF%F0*%F8%60%7C-~%82%C0D%B0%23%14%12%EE%10%E9%88%F6%C4r%E2%14I%82D%23%0D%929%C9%D1%E4!%3A1%BA%1C%BA%05z%1B%FA%1E%069%86%3A%0A%07e%3F%23%811%87%09%98%B2%99q%CC%05%2C%8C%2CGXEY%5B%D8%8C%D9%26%D8c8%08%1C%F5%9C%26%9Cs%5C%F9%DC%0A%DC%93%3C%D9%BC%CA%BC3%7C%15%FC%DB%040%81A%C1%BDB%96%C2%0C%C2%93%22%F5%A2%09b%96%E2%82%E2%1B%12%93%92%9DR'%A4%8F%C8%94%C9%96%C8%95%C8%97%2BT%2B%9EQjW%BE%A3%F2B%F5%AB%3A%87%86%AEf%90V%89%F65%9D%F7z%12%FA~%065%86%CF%8C%05M%82M%5B%CC~XXX%16%5B%8DX%E3m%B4l%03%ED%F2%ED%CFl%BF%EE0%E5%B8%E6%8C%B9p%BA%CA%BA%19%BB%7By%24x%96z%5D%F4%1E%F5%F9%B0%93%D3%D7%C0%2F%D4%BF%2C%A0%2F%F0%5D%B0X%88ghi%D8P%F8%CFH%F5%A8%88%E8%E31%0F%E2P%AAj%BC%3F%AD%24%E1j%E2R2S%8AV%AA%7FZqzW%C6%E2n%AEL%EB%3D%BB%B3%DA%B2W%F6%8A%E5%EE%CC%AB%CE%7FR%C0U%E8Ut%BC%F8%D5%01%85%92%D4%D2%A12%EE%F2%B8%8A%7B%87%95%2Bk%AA%18%8F%16%D60%D4%1E%3E.Uw%FBdD%03%C3%A9%B63%DEg%B1%A6%D6f%BF%0B%CC%17o%B4%A6%B6)%5D%5Ejo%EC%8C%E8V%E8%F9%D8%DB%D3%973%607%C8uc%FEV%EB%ED%5D%C36%23%3C%F7%C6F%DD%EE%CF%3FH%7F(%F8ht%B2%F8%89%CB%94%E44%F2%7C%EE%E5%D0l%F3%7C%E9%02m%D1e%99o%A5nU%EA%ED%A5%F7%86k%A3%1F%FD%3E%BD_%CF%FA%CA%B4q%F4%BB%E0%8F%BA%9F%BC%BFJ%B7%B6%00%80%0BL%80%0Aup%1F%B6%10U%24%149%8A%DCB%3E%A1%A2%A83%9A%8Bv%A2%AB8%11%9C'%EE%20n%18%C3a%86X%3A%D6%89%AD%E35%F0%C9%F8k%04%3C%C1%81PCX!%EA%11%0F%12%97H%E6%A4Sd%12%99J%9E%A6%B3%A3%1B%A0%D7%A2%EFa0e%B8G%F1%A2%AC0f2q0%B52%3B0%7F%60%A9d5d%5Df%3B%C6%EE%C2A%E1%B8%CBY%C8e%C7%CD%CA%3D%C5s%9A%97%C6g%C2%CF%C6%FFF%60H%F0%94P%BEp%94%88%AB%A8%89%98%AA%B8%94%84%90%24%9F%14%AF%B4%B0%8C%9C%AC%8E%9C%AD%7C%80%C2.%C5j%A5k%CA%AFT%19%D5%F4%D5i%1A%175%DFkk%E8d%EB%8E%EBK%1B%E4%1A%BE6%B63%E94%933%3Fe)b%D5%60-c%D3ngn%FF%C4%81%EA%C4%E0%DC%EA%EA%E3N%F6%B8%E6%95%EC%A3%BEc%C3w%C0%FF%40%A0o%B0f(C%D8%D3%88%EA(%EB%E8%E5%D8%B4%B8%CD%F8D%DAB%A2c%D2%E5%14%96TZ%DA%A3%0C%DD%5D'3%E9%F7%A4f-%E6x%EE%BD%97g%9A%DFS%A0%5E%D8Ql%B0%7F%B8%C4%AB%F4MYf%05%CB%A1%FAJ%A5%23%DDG%0D%AB%FBk%F5%8Fu%D4%E1O%D8%9D%3C%5C%FF%F2%94%EC%E9%943%B7%CEr4%85%9E%EB9%CFx!%F8bo%2B%C7%25j%DB%C8%15%E9%F6%A2%8E%B7%5DN%DD%9DW%05%7B%F3%AF%BD%EB%F7%18%B8%3E(w%E3%F0%CD%AD%A1%C8%DB%8F%86%8D%EF6%DF%E3%FC%2Ba%F4%EE%18%DF%83%F0%F1%F3%0FW%26%C4%26%3D%1E%E7%3C9%FB%F4%EE%D4%C2%B3%CD%E7%CC%2F%84%5E%CA%CDh%CC%EA%CE%19%CE%1B%BF2%5E0%7C%AD%BB%A8%B5%A4%B2%2C%BB%22%FA%86%F1%CD%F2j%F7%DB%94w%1A%EFV%DF%9F%5E%F3%FA%40%F7%A1%F7c%E8'%E6O%5D%9Fw%AC%C3z%FD%17%D3%2Fs_%F7l%F0ot%7Fs%FB%B6%F6%7D%FF%0F%A9%1F%83%9B%BE%9B%1B%3F%2B~)%FD%1A%DE%0A%DE%DA%02H%08US%05%00%00%84%C1%14%00%FFbk%EB%93%24%00%B1%1C%E0g%D9%D6%D6%8F%FA%AD%AD%9F%0D%00%B8i%80%81%E8%DF%FF%15%00%00%04f%80%DA%86%FF%ED%8D%F4%3F%00%BD%06~%C6%80N%5E%00%00%00%00%06bKGD%00%FF%00%FF%00%FF%A0%BD%A7%93%00%00%00%09pHYs%00%00%0B%13%00%00%0B%13%01%00%9A%9C%18%00%00%00%07tIME%07%DA%0B%0F%12%004n%D47%05%00%00%01%1BIDATx%DA%ED%DC%B1%11%820%14%80%E1%87G%97%3B%98%22%0E%C0%0Ct%B2%1B%CB%E0Nl%11%0B%3B*%3D9%89%F2%FD5U%3E%1E%B9P%A4%89(%25TM%17K%00D%40%80%08%08%10%01%01%22%20%E7%AE%7D%F5%C1e%B9%5B%AD%0F%9A%A6%9B%09%F1%C9%12%10%20%02%02D%40%F4%E69D%DBs%C5%B49%A7-%F5%81%0C%C3%10)%A5X%D7%95X%0D%20)%A5%E8%FB.%22%3A%2B%5B%C3%1Eb2l%EA%07V%22%A2D%CEy%B7%FD%03%88%09%11%10%20%02%02D%40%80%08%88%80%00%11%10%20%02%02D%40%80%08%08%10%01%11%10%20%02%02D%40%80%08%08%10%01%11%10%20%02%02D%40%80%08%08%10%01%11%10%20%02%02D%40%80%08%08%10%01%11%10%20%02%02D%40%80%08%08%10%1D%DEn7%5Bo%EFB%7F%DEk%2B%13%F2%ED7%BAm%EB%9C%90m9_O%811%8E%E3o%80%CC%F3l%7C%8E%04%D9%F3%FEs%7B%88%80%08%08%10%01%01%22%20%7F%5D%13Q%FCt2!%02%02D%40%80%08%08%10%01%01%A2Zz%00g%F8%1C%DE%87%AF%C0%09%00%00%00%00IEND%AEB%60%82"/>
+</svg>
diff --git a/layout/reftests/svg/filters/feSpecularLighting-1.svg b/layout/reftests/svg/filters/feSpecularLighting-1.svg
new file mode 100644
index 0000000000..838a60b7e0
--- /dev/null
+++ b/layout/reftests/svg/filters/feSpecularLighting-1.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'>
+ <!--
+ A basic test for the <feSpecularLighting> filter primitive.
+ Setting kernelUnitLength on the <feSpecularLighting> should allow us to
+ assume pixel perfection.
+ -->
+ <filter id='f' x='0' y='0' width='1' height='1' color-interpolation-filters='sRGB'>
+ <feSpecularLighting kernelUnitLength='1' result='a'>
+ <feDistantLight azimuth='45'/>
+ </feSpecularLighting>
+ <feComposite in='a' in2='SourceAlpha' operator='in' result='b'/>
+ <feComposite in='SourceGraphic' in2='b' operator='arithmetic' k1='0' k2='1' k3='1' k4='0' x='10' y='10' width='80' height='80'/>
+ </filter>
+ <rect width='100' height='100' fill='blue'/>
+ <path d='M0,0 h100 v100 h-100 z M20,20 v60 h60 v-60 z' filter='url(#f)'/>
+
+ <!-- Cover two spots in the test whose rendering differs in opt builds
+ vs. debug builds (see Bug 610945). -->
+ <rect x='78' y='18' width='4' height='4'/>
+ <rect x='18' y='78' width='4' height='4'/>
+</svg>
diff --git a/layout/reftests/svg/filters/feTile-1-ref.svg b/layout/reftests/svg/filters/feTile-1-ref.svg
new file mode 100644
index 0000000000..c0135fca35
--- /dev/null
+++ b/layout/reftests/svg/filters/feTile-1-ref.svg
@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+
+<rect x="10" y="10" width="10" height="10" fill="#00ff00"/>
+<rect x="40" y="10" width="20" height="10" fill="#00ff00"/>
+<rect x="80" y="10" width="10" height="10" fill="#00ff00"/>
+
+<rect x="20" y="20" width="20" height="20" fill="#0000ff"/>
+<rect x="60" y="20" width="20" height="20" fill="#0000ff"/>
+
+<rect x="10" y="40" width="10" height="20" fill="#00ff00"/>
+<rect x="40" y="40" width="20" height="20" fill="#00ff00"/>
+<rect x="80" y="40" width="10" height="20" fill="#00ff00"/>
+
+<rect x="20" y="60" width="20" height="20" fill="#0000ff"/>
+<rect x="60" y="60" width="20" height="20" fill="#0000ff"/>
+
+<rect x="10" y="80" width="10" height="10" fill="#00ff00"/>
+<rect x="40" y="80" width="20" height="10" fill="#00ff00"/>
+<rect x="80" y="80" width="10" height="10" fill="#00ff00"/>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feTile-1.svg b/layout/reftests/svg/filters/feTile-1.svg
new file mode 100644
index 0000000000..c64ab37491
--- /dev/null
+++ b/layout/reftests/svg/filters/feTile-1.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+
+<filter id="f1" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox"
+ x="0" y="0" width="1" height="1">
+ <feFlood flood-color="#00ff00" x="0%" y="0%" width="20%" height="20%" result="flood1"/>
+ <feFlood flood-color="#0000ff" x="20%" y="20%" width="20%" height="20%" result="flood2"/>
+ <feComposite in="flood1" in2="flood2" x="0%" y="0%" width="40%" height="40%" result="pair"/>
+ <feTile x="10%" y="10%" width="80%" height="80%" in="pair"/>
+</filter>
+<g filter="url(#f1)">
+ <rect x="0" y="0" width="100" height="100" fill="#00ff00"/>
+</g>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feTile-2-ref.svg b/layout/reftests/svg/filters/feTile-2-ref.svg
new file mode 100644
index 0000000000..186d21cbcf
--- /dev/null
+++ b/layout/reftests/svg/filters/feTile-2-ref.svg
@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+
+<rect x="0" y="0" width="100" height="100" fill="#00ff00"/>
+<rect x="200" y="0" width="100" height="100" fill="#00ff00"/>
+<rect x="400" y="0" width="100" height="100" fill="#00ff00"/>
+
+<rect x="100" y="100" width="100" height="100" fill="#0000ff"/>
+<rect x="300" y="100" width="100" height="100" fill="#0000ff"/>
+
+<rect x="0" y="200" width="100" height="100" fill="#00ff00"/>
+<rect x="200" y="200" width="100" height="100" fill="#00ff00"/>
+<rect x="400" y="200" width="100" height="100" fill="#00ff00"/>
+
+<rect x="100" y="300" width="100" height="100" fill="#0000ff"/>
+<rect x="300" y="300" width="100" height="100" fill="#0000ff"/>
+
+<rect x="0" y="400" width="100" height="100" fill="#00ff00"/>
+<rect x="200" y="400" width="100" height="100" fill="#00ff00"/>
+<rect x="400" y="400" width="100" height="100" fill="#00ff00"/>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feTile-2.svg b/layout/reftests/svg/filters/feTile-2.svg
new file mode 100644
index 0000000000..7f137b8d4c
--- /dev/null
+++ b/layout/reftests/svg/filters/feTile-2.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
+
+<filter id="f1" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse">
+ <feFlood flood-color="#00ff00" x="0%" y="0%" width="20%" height="20%" result="flood1"/>
+ <feFlood flood-color="#0000ff" x="20%" y="20%" width="20%" height="20%" result="flood2"/>
+ <feComposite in="flood1" in2="flood2" x="0%" y="0%" width="40%" height="40%" result="pair"/>
+ <feTile in="pair"/>
+</filter>
+<g filter="url(#f1)">
+</g>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feTile-large-01.svg b/layout/reftests/svg/filters/feTile-large-01.svg
new file mode 100644
index 0000000000..c04c145295
--- /dev/null
+++ b/layout/reftests/svg/filters/feTile-large-01.svg
@@ -0,0 +1,19 @@
+<!--
+ 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>Testcase for tile larger than surface</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=521207 -->
+ <defs>
+ <filter primitiveUnits="objectBoundingBox" filterUnits="objectBoundingBox"
+ id="filter_1" x="-50%" y="-50%" width="200%" height="200%">
+ <feTile />
+ </filter>
+ </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" style="filter:url(#filter_1);"/>
+</svg>
diff --git a/layout/reftests/svg/filters/feTile-large-02-ref.svg b/layout/reftests/svg/filters/feTile-large-02-ref.svg
new file mode 100644
index 0000000000..cb6ed6047c
--- /dev/null
+++ b/layout/reftests/svg/filters/feTile-large-02-ref.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">
+<title>Reference for feTile filter with tile exceeding the bounds of the target area on all sides</title>
+
+<rect width="20" height="20" fill="#00ff00"/>
+<rect x="40" width="20" height="20" fill="#00ff00"/>
+<rect x="80" width="20" height="20" fill="#00ff00"/>
+
+<rect x="20" y="20" width="20" height="20" fill="#0000ff"/>
+<rect x="60" y="20" width="20" height="20" fill="#0000ff"/>
+
+<rect y="40" width="20" height="20" fill="#00ff00"/>
+<rect x="40" y="40" width="20" height="20" fill="#00ff00"/>
+<rect x="80" y="40" width="20" height="20" fill="#00ff00"/>
+
+<rect x="20" y="60" width="20" height="20" fill="#0000ff"/>
+<rect x="60" y="60" width="20" height="20" fill="#0000ff"/>
+
+<rect y="80" width="20" height="20" fill="#00ff00"/>
+<rect x="40" y="80" width="20" height="20" fill="#00ff00"/>
+<rect x="80" y="80" width="20" height="20" fill="#00ff00"/>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feTile-large-02.svg b/layout/reftests/svg/filters/feTile-large-02.svg
new file mode 100644
index 0000000000..aa41cf34f5
--- /dev/null
+++ b/layout/reftests/svg/filters/feTile-large-02.svg
@@ -0,0 +1,19 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+<title>Test case for feTile filter with tile exceeding the bounds of the target area on all sides</title>
+
+<filter id="f1" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox"
+ x="0" y="0" width="1" height="1">
+ <feFlood flood-color="#00ff00" x="0%" y="0%" width="20%" height="20%" result="flood1"/>
+ <feFlood flood-color="#0000ff" x="20%" y="20%" width="20%" height="20%" result="flood2"/>
+ <feComposite in="flood1" in2="flood2" x="0%" y="0%" width="40%" height="40%" result="pair"/>
+ <feTile x="-10%" y="-10%" width="120%" height="120%" in="pair"/>
+</filter>
+<g filter="url(#f1)">
+ <rect width="100" height="100" fill="#00ff00"/>
+</g>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feTile-outside-01-ref.svg b/layout/reftests/svg/filters/feTile-outside-01-ref.svg
new file mode 100644
index 0000000000..f84634f7c0
--- /dev/null
+++ b/layout/reftests/svg/filters/feTile-outside-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">
+<title>Reference for feTile filter with x and y for feTile set to values outside the target area.</title>
+
+<rect width="20" height="20" fill="#00ff00"/>
+<rect x="40" width="20" height="20" fill="#00ff00"/>
+
+<rect x="20" y="20" width="20" height="20" fill="#0000ff"/>
+<rect x="60" y="20" width="10" height="20" fill="#0000ff"/>
+
+<rect x="00" y="40" width="20" height="20" fill="#00ff00"/>
+<rect x="40" y="40" width="20" height="20" fill="#00ff00"/>
+
+<rect x="20" y="60" width="20" height="10" fill="#0000ff"/>
+<rect x="60" y="60" width="10" height="10" fill="#0000ff"/>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feTile-outside-01.svg b/layout/reftests/svg/filters/feTile-outside-01.svg
new file mode 100644
index 0000000000..4f1f0b5c8a
--- /dev/null
+++ b/layout/reftests/svg/filters/feTile-outside-01.svg
@@ -0,0 +1,19 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+<title>Test case for feTile filter with x and y for feTile set to values outside the target area.</title>
+
+<filter id="f1" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox"
+ x="0" y="0" width="1" height="1">
+ <feFlood flood-color="#00ff00" x="0%" y="0%" width="20%" height="20%" result="flood1"/>
+ <feFlood flood-color="#0000ff" x="20%" y="20%" width="20%" height="20%" result="flood2"/>
+ <feComposite in="flood1" in2="flood2" x="0%" y="0%" width="40%" height="40%" result="pair"/>
+ <feTile x="-10%" y="-10%" width="80%" height="80%" in="pair"/>
+</filter>
+<g filter="url(#f1)">
+ <rect width="100" height="100" fill="#00ff00"/>
+</g>
+
+</svg>
diff --git a/layout/reftests/svg/filters/feTurbulence-offset-ref.svg b/layout/reftests/svg/filters/feTurbulence-offset-ref.svg
new file mode 100644
index 0000000000..fbfaf840af
--- /dev/null
+++ b/layout/reftests/svg/filters/feTurbulence-offset-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">
+ <!--
+ Place the filtered rect and the filter region at (0, 0) in user space.
+ Remove the filter output before (50, 50) using a clipPath.
+ -->
+ <filter id="f" x="0%" y="0%" width="100%" height="100%">
+ <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="1"></feTurbulence>
+ </filter>
+ <clipPath id="clip-top-left">
+ <rect x="50" y="50" width="100" height="100"/>
+ </clipPath>
+ <rect x="0" y="0" width="150" height="150" filter="url(#f)" clip-path="url(#clip-top-left)"/>
+</svg>
diff --git a/layout/reftests/svg/filters/feTurbulence-offset.svg b/layout/reftests/svg/filters/feTurbulence-offset.svg
new file mode 100644
index 0000000000..c48db258b3
--- /dev/null
+++ b/layout/reftests/svg/filters/feTurbulence-offset.svg
@@ -0,0 +1,20 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This test verifies that feTurbulence creates a noise image that remains
+ anchored at the user space origin, not the filter region origin. The filter
+ region should act as a viewport into the anchored noise image.
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+ <!--
+ Place the filtered rect at (75, 75) in user space.
+ Make the filter region start at (-25, -25) from the top left corner of the rect.
+ Thus, the filter output should start at (50, 50).
+ -->
+ <filter id="f" x="-25%" y="-25%" width="100%" height="100%">
+ <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="1"></feTurbulence>
+ </filter>
+ <rect x="75" y="75" width="100" height="100" filter="url(#f)"/>
+</svg>
diff --git a/layout/reftests/svg/filters/feTurbulence-zero-baseFreq-01-ref.svg b/layout/reftests/svg/filters/feTurbulence-zero-baseFreq-01-ref.svg
new file mode 100644
index 0000000000..ec92fc28e1
--- /dev/null
+++ b/layout/reftests/svg/filters/feTurbulence-zero-baseFreq-01-ref.svg
@@ -0,0 +1,13 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This is the reference image for feTurbulence-zero-baseFreq.svg.
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+ <rect x="0" y="0" width="400" height="100" fill="blue"/>
+ <rect x="0" y="100" width="400" height="100" fill="lime"/>
+ <!-- nothing in place of the type="turbulence" filter -->
+ <rect x="200" y="50" width="100" height="100" fill="rgba(128, 128, 128, 0.5)"/>
+</svg>
diff --git a/layout/reftests/svg/filters/feTurbulence-zero-baseFreq-01.svg b/layout/reftests/svg/filters/feTurbulence-zero-baseFreq-01.svg
new file mode 100644
index 0000000000..c55cbf07a8
--- /dev/null
+++ b/layout/reftests/svg/filters/feTurbulence-zero-baseFreq-01.svg
@@ -0,0 +1,23 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+ This test verifies that feTurbulence with baseFrequency="0" creates
+ a transparent black result for type="turbulence" and a 50% alpha
+ 50% gray result for type="fractalNoise".
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+ <filter id="filterTurbulence" primitiveUnits="objectBoundingBox" color-interpolation-filters="sRGB">
+ <feTurbulence type="turbulence" baseFrequency="0" numOctaves="1"
+ x="0%" y="0%" width="100%" height="100%"/>
+ </filter>
+ <filter id="filterFractalNoise" primitiveUnits="objectBoundingBox" color-interpolation-filters="sRGB">
+ <feTurbulence type="fractalNoise" baseFrequency="0" numOctaves="1"
+ x="0%" y="0%" width="100%" height="100%"/>
+ </filter>
+ <rect x="0" y="0" width="400" height="100" fill="blue"/>
+ <rect x="0" y="100" width="400" height="100" fill="lime"/>
+ <rect x="50" y="50" width="100" height="100" filter="url(#filterTurbulence)"/>
+ <rect x="200" y="50" width="100" height="100" filter="url(#filterFractalNoise)"/>
+</svg>
diff --git a/layout/reftests/svg/filters/feTurbulence-zero-baseFreq-02.svg b/layout/reftests/svg/filters/feTurbulence-zero-baseFreq-02.svg
new file mode 100644
index 0000000000..2992737d16
--- /dev/null
+++ b/layout/reftests/svg/filters/feTurbulence-zero-baseFreq-02.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <defs>
+ <filter id="a">
+ <feTurbulence baseFrequency="0 0.1"/>
+ </filter>
+ </defs>
+ <rect fill="#7989a6" height="400px" width="400px" filter="url(#a)"/>
+</svg>
+
diff --git a/layout/reftests/svg/filters/filter-clipped-rect-01.svg b/layout/reftests/svg/filters/filter-clipped-rect-01.svg
new file mode 100644
index 0000000000..0e339cf42a
--- /dev/null
+++ b/layout/reftests/svg/filters/filter-clipped-rect-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" version="1.0">
+ <desc>
+ This test checks that the filtering with a clipPath doesn't interact
+ badly with transforms.
+ </desc>
+ <defs>
+ <clipPath id="clipPath">
+ <rect x="100" width="100" height="100"/>
+ </clipPath>
+ <filter id="filter"><feGaussianBlur stdDeviation="0.001"/></filter>
+ </defs>
+ <rect width="100%" height="100%" fill="lime"/>
+ <g transform="translate(50, 0)">
+ <!-- This 3-rect setup is to show red *both* if too much or if too little is clipped. -->
+ <rect x="150" width="100" height="100" fill="red"/>
+ <g clip-path="url(#clipPath)" filter="url(#filter)" transform="translate(50, 0)">
+ <rect x="-20" y="-20" width="140" height="140" fill="red"/>
+ <rect x="100" width="100" height="100" fill="lime"/>
+ </g>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/filters/filter-giant.svg b/layout/reftests/svg/filters/filter-giant.svg
new file mode 100644
index 0000000000..e0a373a892
--- /dev/null
+++ b/layout/reftests/svg/filters/filter-giant.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
+<defs>
+<filter id="dropShadow" x="0" y="0" width="200%" height="200%">
+ <feOffset result="offOut" in="SourceAlpha" dx="1.5" dy="1.5"/>
+ <feGaussianBlur result="blurOut" in="offOut" stdDeviation="2"/>
+ <feBlend in="SourceGraphic" in2="blurOut" mode="normal"/>
+</filter>
+</defs>
+<g filter="url(#dropShadow)">
+ <rect x="-20000" y="-20000" width="40000" height="40000" fill="lime" />
+</g>
+</svg>
diff --git a/layout/reftests/svg/filters/filter-in-mask-01.svg b/layout/reftests/svg/filters/filter-in-mask-01.svg
new file mode 100644
index 0000000000..e73efd3796
--- /dev/null
+++ b/layout/reftests/svg/filters/filter-in-mask-01.svg
@@ -0,0 +1,12 @@
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 1 1" preserveAspectRatio="xMidYMid slice">
+ <!-- filter effects region covers whole viewbox -->
+ <filter id="myFilter" filterUnits="userSpaceOnUse" x="-1" y="-1" width="1" height="1">
+ <feGaussianBlur stdDeviation="0"/>
+ </filter>
+ <!-- mask effects region covers whole viewbox, opaque white mask -->
+ <mask id="myMask" maskUnits="userSpaceOnUse" x="-1" y="-1" width="1" height="1">
+ <rect filter="url(#myFilter)" x="-1" y="-1" width="1" height="1" fill="#FFFFFF"/>
+ </mask>
+ <rect x="-1" y="-1" width="1" height="1" fill="red"/>
+ <rect mask="url(#myMask)" x="-1" y="-1" width="1" height="1" fill="lime"/>
+</svg> \ No newline at end of file
diff --git a/layout/reftests/svg/filters/filter-in-mask-02.svg b/layout/reftests/svg/filters/filter-in-mask-02.svg
new file mode 100644
index 0000000000..7c7fd86f1f
--- /dev/null
+++ b/layout/reftests/svg/filters/filter-in-mask-02.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <defs>
+ <filter x="0" y="0" width="1" height="1" id="solid">
+ <feFlood flood-color="black"/>
+ </filter>
+ <mask id="myMask">
+ <rect fill="white" width="100%" height="100%"/>
+ <g transform="translate(10000, 0)">
+ <rect fill="blue" width="100%" height="100%" filter="url(#solid)"/>
+ </g>
+ </mask>
+ </defs>
+ <!-- You should see pure lime color as background color of a whole page. -->
+ <rect fill="red" width="100%" height="100%"/>
+ <g mask="url(#myMask)">
+ <rect x="0" y="0" width="100%" height="100%" fill="lime"></rect>
+ </g>
+</svg> \ No newline at end of file
diff --git a/layout/reftests/svg/filters/filter-in-pattern-01.svg b/layout/reftests/svg/filters/filter-in-pattern-01.svg
new file mode 100644
index 0000000000..e6df8d7627
--- /dev/null
+++ b/layout/reftests/svg/filters/filter-in-pattern-01.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="xMidYMid slice">
+ <defs>
+ <filter id="blur">
+ <feGaussianBlur stdDeviation="0" />
+ </filter>
+ <pattern id="pattern1" patternUnits="userSpaceOnUse" width="10" height="10">
+ <rect width="10" height="10" fill="lime" filter="url(#blur)" />
+ </pattern>
+ </defs>
+ <rect width="100%" height="100%" fill="red"/>
+ <rect width="100%" height="100%" fill="url(#pattern1)"/>
+</svg>
diff --git a/layout/reftests/svg/filters/filter-in-pattern-02-ref.svg b/layout/reftests/svg/filters/filter-in-pattern-02-ref.svg
new file mode 100644
index 0000000000..a712134d6b
--- /dev/null
+++ b/layout/reftests/svg/filters/filter-in-pattern-02-ref.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-50 -50 100 100">
+ <defs>
+ <filter id="blur-filter">
+ <feGaussianBlur stdDeviation="0.5"/>
+ </filter>
+ <pattern id="pattern1" width="8" height="8" patternUnits="userSpaceOnUse">
+ <path d="M-1,1 l2,-2" stroke="blue" filter="url(#blur-filter)" />
+ </pattern>
+ </defs>
+
+ <rect x="-20%" y="-20%" width="10%" height="10%" fill="url(#pattern1)"/>
+</svg>
+
diff --git a/layout/reftests/svg/filters/filter-in-pattern-02.svg b/layout/reftests/svg/filters/filter-in-pattern-02.svg
new file mode 100644
index 0000000000..ed4bae1020
--- /dev/null
+++ b/layout/reftests/svg/filters/filter-in-pattern-02.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-50 -50 100 100">
+ <defs>
+ <filter id="blur-filter" filterUnits="userSpaceOnUse" x="0" y="0">
+ <feGaussianBlur stdDeviation="0.5"/>
+ </filter>
+ <pattern id="pattern1" width="8" height="8" patternUnits="userSpaceOnUse">
+ <path d="M-1,1 l2,-2" stroke="blue" filter="url(#blur-filter)" />
+ </pattern>
+ </defs>
+
+ <rect x="-20%" y="-20%" width="10%" height="10%" fill="url(#pattern1)"/>
+</svg>
+
diff --git a/layout/reftests/svg/filters/filter-inner-svg-01.svg b/layout/reftests/svg/filters/filter-inner-svg-01.svg
new file mode 100644
index 0000000000..e00bde4636
--- /dev/null
+++ b/layout/reftests/svg/filters/filter-inner-svg-01.svg
@@ -0,0 +1,16 @@
+<!--
+ 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.0">
+ <desc>
+ The 'x' attribute on the inner 'svg' should not result in any of the lime 'circle'
+ it contains from being clipped when the inner 'svg' is filtered.
+ </desc>
+ <filter id="filter"><feGaussianBlur stdDeviation="0.001"/></filter>
+ <rect width="100%" height="100%" fill="lime"/>
+ <circle fill="red" cx="200" cy="100" r="98"/>
+ <svg x="100" width="200" height="200" filter="url(#filter)">
+ <circle fill="lime" r="100" cx="100" cy="100"/>
+ </svg>
+</svg>
diff --git a/layout/reftests/svg/filters/filter-inner-svg-02.svg b/layout/reftests/svg/filters/filter-inner-svg-02.svg
new file mode 100644
index 0000000000..82809d9301
--- /dev/null
+++ b/layout/reftests/svg/filters/filter-inner-svg-02.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" version="1.0">
+ <desc>
+ The 'viewBox' attribute on the inner 'svg' should push the red 'rect' it
+ contains outside the viewport, so if transforms and clipping are working
+ correctly when the inner 'svg' is being filtered, then none of the red
+ 'rect' should be visible.
+ </desc>
+ <filter id="filter"><feGaussianBlur stdDeviation="0.001"/></filter>
+ <!--circle fill="lime" r="100" cx="300" cy="100"/-->
+ <rect width="100%" height="100%" fill="lime"/>
+ <svg width="200" height="200" viewBox="-200 0 200 200" filter="url(#filter)">
+ <circle fill="red" r="98" cx="100" cy="100"/>
+ </svg>
+</svg>
diff --git a/layout/reftests/svg/filters/filter-inner-svg-03.svg b/layout/reftests/svg/filters/filter-inner-svg-03.svg
new file mode 100644
index 0000000000..0ce543e157
--- /dev/null
+++ b/layout/reftests/svg/filters/filter-inner-svg-03.svg
@@ -0,0 +1,19 @@
+<!--
+ 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.0">
+ <desc>
+ The 'transform' attribute on the 'g' parent of the inner 'svg' should
+ not cause the lime 'circle' inside the inner 'svg' to be clipped when
+ the inner 'svg' is filtered.
+ </desc>
+ <filter id="filter"><feGaussianBlur stdDeviation="0.001"/></filter>
+ <rect width="100%" height="100%" fill="lime"/>
+ <circle fill="red" r="98" cx="200" cy="100"/>
+ <g transform="translate(100, 0)">
+ <svg width="200" height="200" filter="url(#filter)">
+ <circle fill="lime" r="100" cx="100" cy="100"/>
+ </svg>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/filters/filter-kernelUnitLength-01-ref.svg b/layout/reftests/svg/filters/filter-kernelUnitLength-01-ref.svg
new file mode 100644
index 0000000000..e19dfe1f82
--- /dev/null
+++ b/layout/reftests/svg/filters/filter-kernelUnitLength-01-ref.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+ <filter id="emboss">
+ <feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur"/>
+ <!-- without kernelUnitLength attribute -->
+ <feSpecularLighting in="blur" result="spec" surfaceScale="-3"
+ specularConstant="2" specularExponent="16"
+ lighting-color="#ffb155">
+ <feDistantLight azimuth="45" elevation="45"/>
+ </feSpecularLighting>
+ <feComposite in="spec" in2="SourceGraphic" operator="in" result="specOut"/>
+ </filter>
+ </defs>
+ <path filter="url(#emboss)" d="M 44.408917,5.7095287 C 535.13945,101.91182 534.01725,101.52506 532.53904,101.52499 C 531.36871,101.52506 530.17420,101.85117 528.96683,102.49024 z "/>
+</svg>
diff --git a/layout/reftests/svg/filters/filter-kernelUnitLength-01.svg b/layout/reftests/svg/filters/filter-kernelUnitLength-01.svg
new file mode 100644
index 0000000000..9b192214f0
--- /dev/null
+++ b/layout/reftests/svg/filters/filter-kernelUnitLength-01.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+ <filter id="emboss">
+ <feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur"/>
+ <!-- with kernelUnitLength attribute -->
+ <feSpecularLighting in="blur" result="spec" surfaceScale="-3"
+ specularConstant="2" specularExponent="16"
+ lighting-color="#ffb155" kernelUnitLength="1">
+ <feDistantLight azimuth="45" elevation="45"/>
+ </feSpecularLighting>
+ <feComposite in="spec" in2="SourceGraphic" operator="in" result="specOut"/>
+ </filter>
+ </defs>
+ <path filter="url(#emboss)" d="M 44.408917,5.7095287 C 535.13945,101.91182 534.01725,101.52506 532.53904,101.52499 C 531.36871,101.52506 530.17420,101.85117 528.96683,102.49024 z "/>
+</svg>
diff --git a/layout/reftests/svg/filters/filter-lighting-region-ref.svg b/layout/reftests/svg/filters/filter-lighting-region-ref.svg
new file mode 100644
index 0000000000..d7337102b7
--- /dev/null
+++ b/layout/reftests/svg/filters/filter-lighting-region-ref.svg
@@ -0,0 +1,11 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="600px" height="300px">
+
+ <rect x="50" y="50" width="200" height="200" fill="black" />
+
+ <rect x="340" y="40" width="220" height="220" fill="grey" />
+ <rect x="350" y="50" width="200" height="200" fill="white" />
+</svg>
diff --git a/layout/reftests/svg/filters/filter-lighting-region.svg b/layout/reftests/svg/filters/filter-lighting-region.svg
new file mode 100644
index 0000000000..883b6d805d
--- /dev/null
+++ b/layout/reftests/svg/filters/filter-lighting-region.svg
@@ -0,0 +1,30 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="600px" height="300px">
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=1203376 -->
+ <defs>
+ <!-- the filter lights are intentionally chosen to fill the entire area with
+ a solid color since we're only testing the extents of the filter region
+ -->
+ <filter id="diffuse" x="-50%" y="-50%" width="200%" height="200%">
+ <!-- gives a black filter region -->
+ <feDiffuseLighting lighting-color="black">
+ <feDistantLight />
+ </feDiffuseLighting>
+ </filter>
+
+ <filter id="specular" x="-50%" y="-50%" width="200%" height="200%">
+ <!-- gives a white filter region -->
+ <feSpecularLighting lighting-color="white" specularConstant="100">
+ <feDistantLight elevation="90"/>
+ </feSpecularLighting>
+ </filter>
+ </defs>
+
+ <rect x="100" y="100" width="100" height="100" filter="url(#diffuse)" />
+
+ <rect x="340" y="40" width="220" height="220" fill="grey" />
+ <rect x="400" y="100" width="100" height="100" filter="url(#specular)" />
+</svg>
diff --git a/layout/reftests/svg/filters/filter-marked-line-01.svg b/layout/reftests/svg/filters/filter-marked-line-01.svg
new file mode 100644
index 0000000000..406615443c
--- /dev/null
+++ b/layout/reftests/svg/filters/filter-marked-line-01.svg
@@ -0,0 +1,19 @@
+<!--
+ 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.0">
+ <desc>
+ Filtering the 'line' should not cause the mark (lime 'circle') to be clipped.
+ </desc>
+ <defs>
+ <marker id="marker" markerWidth="200" markerHeight="200" refX="100" refY="100"
+ markerUnits="userSpaceOnUse">
+ <circle fill="lime" r="100" cx="100" cy="100"/>
+ </marker>
+ <filter id="filter"><feGaussianBlur stdDeviation="0.001"/></filter>
+ </defs>
+ <rect width="100%" height="100%" fill="lime"/>
+ <circle fill="red" r="98" cx="100" cy="100"/>
+ <line x2="100" y2="100" marker-end="url(#marker)" filter="url(#filter)"/>
+</svg>
diff --git a/layout/reftests/svg/filters/filter-marked-line-02.svg b/layout/reftests/svg/filters/filter-marked-line-02.svg
new file mode 100644
index 0000000000..76dea08b9c
--- /dev/null
+++ b/layout/reftests/svg/filters/filter-marked-line-02.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" version="1.0">
+ <desc>
+ The 'transform' attribute on the 'path' should not cause the mark
+ (lime 'circle') to be clipped when the 'path' is filtered.
+ </desc>
+ <defs>
+ <marker id="marker" markerWidth="200" markerHeight="200" refX="100" refY="100"
+ markerUnits="userSpaceOnUse">
+ <circle fill="lime" r="100" cx="100" cy="100"/>
+ </marker>
+ <filter id="filter"><feGaussianBlur stdDeviation="0.001"/></filter>
+ </defs>
+ <rect width="100%" height="100%" fill="lime"/>
+ <circle fill="red" r="98" cx="200" cy="100"/>
+ <path d="M0,0 L100,100 200,200" marker-mid="url(#marker)" filter="url(#filter)" transform="translate(100, 0)"/>
+</svg>
diff --git a/layout/reftests/svg/filters/filter-marked-line-03.svg b/layout/reftests/svg/filters/filter-marked-line-03.svg
new file mode 100644
index 0000000000..d59c71f49e
--- /dev/null
+++ b/layout/reftests/svg/filters/filter-marked-line-03.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" version="1.0">
+ <desc>
+ The 'viewBox' attribute on the 'marker' should not cause the mark
+ (lime 'circle') to be clipped when the 'path' is filtered.
+ </desc>
+ <defs>
+ <marker id="marker" markerWidth="200" markerHeight="200" refX="0" refY="100"
+ markerUnits="userSpaceOnUse" viewBox="-100 0 200 200">
+ <circle fill="lime" r="100" cx="0" cy="100"/>
+ </marker>
+ <filter id="filter"><feGaussianBlur stdDeviation="0.001"/></filter>
+ </defs>
+ <rect width="100%" height="100%" fill="lime"/>
+ <circle fill="red" r="98" cx="200" cy="100"/>
+ <path d="M100,0 l100,100 200,200" marker-mid="url(#marker)" filter="url(#filter)"/>
+</svg>
diff --git a/layout/reftests/svg/filters/filter-marked-line-04.svg b/layout/reftests/svg/filters/filter-marked-line-04.svg
new file mode 100644
index 0000000000..0b90aaf557
--- /dev/null
+++ b/layout/reftests/svg/filters/filter-marked-line-04.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" version="1.0">
+ <desc>
+ The 'transform' attribute on the 'circle' should not cause the mark
+ (lime 'circle') to be clipped when the 'path' is filtered.
+ </desc>
+ <defs>
+ <marker id="marker" markerWidth="200" markerHeight="200" refX="100" refY="100"
+ markerUnits="userSpaceOnUse">
+ <circle fill="lime" r="100" cx="0" cy="100" transform="translate(100, 0)"/>
+ </marker>
+ <filter id="filter"><feGaussianBlur stdDeviation="0.001"/></filter>
+ </defs>
+ <rect width="100%" height="100%" fill="lime"/>
+ <circle fill="red" r="98" cx="200" cy="100"/>
+ <path d="M100,0 l100,100 200,200" marker-mid="url(#marker)" filter="url(#filter)"/>
+</svg>
diff --git a/layout/reftests/svg/filters/filter-marked-line-05.svg b/layout/reftests/svg/filters/filter-marked-line-05.svg
new file mode 100644
index 0000000000..6f3fc0938f
--- /dev/null
+++ b/layout/reftests/svg/filters/filter-marked-line-05.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" version="1.0">
+ <desc>
+ The combination of the 'viewBox' attribute on the 'marker' and the 'transform'
+ attribute on the 'circle' element should not cause the mark (lime 'circle') to
+ be clipped when the 'path' is filtered.
+ </desc>
+ <defs>
+ <marker id="marker" markerWidth="200" markerHeight="200" refX="0" refY="100"
+ markerUnits="userSpaceOnUse" viewBox="-100 0 200 200">
+ <circle fill="lime" r="100" cx="-100" cy="100" transform="translate(100, 0)"/>
+ </marker>
+ <filter id="filter"><feGaussianBlur stdDeviation="0.001"/></filter>
+ </defs>
+ <rect width="100%" height="100%" fill="lime"/>
+ <circle fill="red" r="98" cx="200" cy="100"/>
+ <path d="M100,0 l100,100 200,200" marker-mid="url(#marker)" filter="url(#filter)"/>
+</svg>
diff --git a/layout/reftests/svg/filters/filter-marked-line-06.svg b/layout/reftests/svg/filters/filter-marked-line-06.svg
new file mode 100644
index 0000000000..147d3a2aa0
--- /dev/null
+++ b/layout/reftests/svg/filters/filter-marked-line-06.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.0">
+ <desc>
+ The combination of the 'viewBox' attribute on the 'marker' and the 'transform'
+ attribute on the 'g' element should not cause the mark (lime 'circle') to be
+ clipped when the 'path' is filtered.
+ </desc>
+ <defs>
+ <marker id="marker" markerWidth="200" markerHeight="200" refX="0" refY="100"
+ markerUnits="userSpaceOnUse" viewBox="-100 0 200 200">
+ <g transform="translate(100, 0)">
+ <circle fill="lime" r="100" cx="-100" cy="100"/>
+ </g>
+ </marker>
+ <filter id="filter"><feGaussianBlur stdDeviation="0.001"/></filter>
+ </defs>
+ <rect width="100%" height="100%" fill="lime"/>
+ <circle fill="red" r="98" cx="200" cy="100"/>
+ <path d="M100,0 l100,100 200,200" marker-mid="url(#marker)" filter="url(#filter)"/>
+</svg>
diff --git a/layout/reftests/svg/filters/filter-marked-line-07.svg b/layout/reftests/svg/filters/filter-marked-line-07.svg
new file mode 100644
index 0000000000..94d1deca8e
--- /dev/null
+++ b/layout/reftests/svg/filters/filter-marked-line-07.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" version="1.0">
+ <desc>
+ The combination of the 'viewBox' attribute on the 'marker' and the 'transform'
+ attributes on the 'g' and 'path' elements should not cause the mark (lime
+ 'circle') to be clipped when the 'path' is filtered.
+ </desc>
+ <defs>
+ <marker id="marker" markerWidth="200" markerHeight="200" refX="0" refY="100"
+ markerUnits="userSpaceOnUse" viewBox="-100 0 200 200">
+ <g transform="translate(100, 0)">
+ <circle fill="lime" r="100" cx="-100" cy="100"/>
+ </g>
+ </marker>
+ <filter id="filter"><feGaussianBlur stdDeviation="0.001"/></filter>
+ </defs>
+ <rect width="100%" height="100%" fill="lime"/>
+ <circle fill="red" r="98" cx="200" cy="100"/>
+ <g transform="translate(100, 0)">
+ <path d="M-100,0 l100,100 200,200" marker-mid="url(#marker)" filter="url(#filter)" transform="translate(100, 0)"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/filters/filter-marked-line-08.svg b/layout/reftests/svg/filters/filter-marked-line-08.svg
new file mode 100644
index 0000000000..58d4f9e983
--- /dev/null
+++ b/layout/reftests/svg/filters/filter-marked-line-08.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" version="1.0">
+ <desc>
+ The combination of the 'viewBox' attribute on the 'marker' and the 'transform'
+ attributes on the 'g', 'path' and 'circle' elements should not cause the mark
+ (lime 'circle') to be clipped when the 'path' is filtered.
+ </desc>
+ <defs>
+ <marker id="marker" markerWidth="200" markerHeight="200" refX="0" refY="100"
+ markerUnits="userSpaceOnUse" viewBox="-100 0 200 200">
+ <g transform="translate(100, 0)">
+ <circle fill="lime" r="100" cx="-200" cy="100" transform="translate(100, 0)"/>
+ </g>
+ </marker>
+ <filter id="filter"><feGaussianBlur stdDeviation="0.001"/></filter>
+ </defs>
+ <rect width="100%" height="100%" fill="lime"/>
+ <circle fill="red" r="98" cx="200" cy="100"/>
+ <g transform="translate(100, 0)">
+ <path d="M-100,0 l100,100 200,200" marker-mid="url(#marker)" filter="url(#filter)" transform="translate(100, 0)"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/filters/filter-marked-line-09.svg b/layout/reftests/svg/filters/filter-marked-line-09.svg
new file mode 100644
index 0000000000..55ff716067
--- /dev/null
+++ b/layout/reftests/svg/filters/filter-marked-line-09.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" version="1.0">
+ <desc>
+ The combination of the 'viewBox' attribute on the 'marker' and the 'transform'
+ attributes on the 'g', 'path' and 'circle' elements should not cause the mark
+ (lime 'circle') to be clipped when the 'path' is filtered.
+ </desc>
+ <defs>
+ <marker id="marker" markerWidth="200" markerHeight="200" refX="0" refY="100"
+ markerUnits="userSpaceOnUse" viewBox="-100 0 200 200">
+ <g transform="translate(100, 0)">
+ <circle fill="lime" r="100" cx="-200" cy="100" transform="translate(100, 0)"/>
+ </g>
+ </marker>
+ <filter id="filter"><feGaussianBlur stdDeviation="0.001"/></filter>
+ </defs>
+ <rect width="100%" height="100%" fill="lime"/>
+ <circle fill="red" r="98" cx="200" cy="100"/>
+ <g transform="translate(100, 0)">
+ <g filter="url(#filter)">
+ <path d="M-100,0 l100,100 200,200" marker-mid="url(#marker)" transform="translate(100, 0)"/>
+ </g>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/filters/filter-nested-filtering-01.svg b/layout/reftests/svg/filters/filter-nested-filtering-01.svg
new file mode 100644
index 0000000000..57e1d1a65b
--- /dev/null
+++ b/layout/reftests/svg/filters/filter-nested-filtering-01.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" version="1.0">
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=461863 -->
+ <desc>
+ This test checks that transforms and filtering a descendant of a
+ filtered element interact correctly.
+ </desc>
+ <filter id="a"><feGaussianBlur stdDeviation="0.001"/></filter>
+ <filter id="b"><feGaussianBlur stdDeviation="0.001"/></filter>
+ <rect width="100%" height="100%" fill="lime"/>
+ <circle fill="red" cx="200" cy="200" r="98"/>
+ <g id="g" filter="url(#a)" transform="translate(100, 0)">
+ <circle fill="lime" filter="url(#b)" cx="100" cy="200" r="100"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/filters/filter-nested-filtering-02.svg b/layout/reftests/svg/filters/filter-nested-filtering-02.svg
new file mode 100644
index 0000000000..77de499799
--- /dev/null
+++ b/layout/reftests/svg/filters/filter-nested-filtering-02.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" version="1.0">
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=461863 -->
+ <desc>
+ This test checks that transforms and filtering a decedent of a
+ filtered element interact correctly.
+ </desc>
+ <filter id="a"><feGaussianBlur stdDeviation="0.001"/></filter>
+ <filter id="b"><feGaussianBlur stdDeviation="0.001"/></filter>
+ <rect width="100%" height="100%" fill="lime"/>
+ <circle fill="red" cx="200" cy="200" r="98" transform="scale(1.2)"/>
+ <g id="g" filter="url(#a)" transform="scale(1.2) translate(100, 0)">
+ <circle fill="lime" filter="url(#b)" cx="100" cy="200" r="100"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/filters/filter-patterned-rect-01.svg b/layout/reftests/svg/filters/filter-patterned-rect-01.svg
new file mode 100644
index 0000000000..436d3648cf
--- /dev/null
+++ b/layout/reftests/svg/filters/filter-patterned-rect-01.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" version="1.0">
+ <desc>
+ Filtering the patterned 'rect' should not cause the pattern (lime
+ 'circle') to be clipped or misplaced due to bad interaction with
+ the transforms.
+ </desc>
+ <defs>
+ <pattern id="pattern" patternUnits="userSpaceOnUse"
+ x="0" y="0" width="200" height="200">
+ <circle fill="lime" r="100" cx="100" cy="100"/>
+ </pattern>
+ <filter id="filter"><feGaussianBlur stdDeviation="0.001"/></filter>
+ </defs>
+ <rect width="100%" height="100%" fill="lime"/>
+ <circle fill="red" r="98" cx="200" cy="100"/>
+ <rect width="200" height="200" fill="url(#pattern)" filter="url(#filter)" transform="translate(100, 0)"/>
+</svg>
diff --git a/layout/reftests/svg/filters/filter-patterned-rect-02.svg b/layout/reftests/svg/filters/filter-patterned-rect-02.svg
new file mode 100644
index 0000000000..f15baa4afc
--- /dev/null
+++ b/layout/reftests/svg/filters/filter-patterned-rect-02.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.0">
+ <desc>
+ Filtering the patterned 'rect' should not cause the pattern (lime
+ 'circle') to be clipped or misplaced due to bad interaction with
+ the transforms.
+ </desc>
+ <defs>
+ <pattern id="pattern" patternUnits="userSpaceOnUse"
+ x="0" y="0" width="200" height="200">
+ <circle fill="lime" r="100" cx="100" cy="100"/>
+ </pattern>
+ <filter id="filter"><feGaussianBlur stdDeviation="0.001"/></filter>
+ </defs>
+ <rect width="100%" height="100%" fill="lime"/>
+ <circle fill="red" r="98" cx="300" cy="100"/>
+ <g transform="translate(100, 0)">
+ <rect width="200" height="200" fill="url(#pattern)" filter="url(#filter)" transform="translate(100, 0)"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/filters/filter-region-01a.html b/layout/reftests/svg/filters/filter-region-01a.html
new file mode 100644
index 0000000000..f66e9bd34d
--- /dev/null
+++ b/layout/reftests/svg/filters/filter-region-01a.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<body style="background-color: lime;">
+<svg width="0" height="0">
+ <filter id="myFilter" filterUnits="objectBoundingBox" x="0" y="0" width="50%" height="50%">
+ <feMerge>
+ <feMergeNode/>
+ </feMerge>
+ </filter>
+</svg>
+
+<!-- This outer svg element should be totally covered by the next filtered outer svg element. -->
+<svg style="position: fixed;" x="0" y ="0" width="120" height="120">
+ <rect x="10" y="10" width="100" height="100" fill="red"/>
+</svg>
+
+<svg filter="url(#myFilter)" style="position: fixed;" x="0" y ="0" width="240" height="240">
+ <rect x="10" y="10" width="100" height="100" fill="lime"/>
+</svg>
+
+</body> \ No newline at end of file
diff --git a/layout/reftests/svg/filters/filter-region-01b.html b/layout/reftests/svg/filters/filter-region-01b.html
new file mode 100644
index 0000000000..21d5add6e3
--- /dev/null
+++ b/layout/reftests/svg/filters/filter-region-01b.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<body style="background-color: lime;">
+<svg width="0" height="0">
+ <filter id="myFilter" filterUnits="objectBoundingBox" x="0" y="0" width="50%" height="50%">
+ <feMerge>
+ <feMergeNode/>
+ </feMerge>
+ </filter>
+</svg>
+
+<svg style="position: fixed;" x="0" y ="0" width="400" height="400">
+ <!-- This filtered inner element should be covered by the next outer svg element. -->
+ <svg filter="url(#myFilter)" style="position: fixed;" x="0" y ="0" width="200" height="200">
+ <rect x="10" y="10" width="120" height="120" fill="red"/>
+ </svg>
+</svg>
+
+<svg style="position: fixed;" x="0" y ="0" width="120" height="120">
+ <rect x="10" y="10" width="100" height="100" fill="lime"/>
+</svg>
+
+</body> \ No newline at end of file
diff --git a/layout/reftests/svg/filters/filter-transform-01.svg b/layout/reftests/svg/filters/filter-transform-01.svg
new file mode 100644
index 0000000000..5536a14020
--- /dev/null
+++ b/layout/reftests/svg/filters/filter-transform-01.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" style="background-color:lime" viewBox="-50 -50 100 100">
+ <defs>
+ <filter id="blur">
+ <feGaussianBlur stdDeviation="1"/>
+ </filter>
+ </defs>
+
+ <circle r="15" fill="red" filter="url(#blur)" transform="rotate(45)"/>
+ <circle r="15" fill="red" filter="url(#blur)" transform="rotate(90)"/>
+ <circle r="15" fill="red" filter="url(#blur)" transform="skewX(0) skewY(0)"/>
+ <circle cx="-10" cy="-10" r="15" fill="red" filter="url(#blur)" transform="translate(10, 10)"/>
+ <circle cx="-10000" cy="-10000" r="15" fill="red" filter="url(#blur)" transform="translate(10000, 10000)"/>
+ <circle r="10" fill="red" filter="url(#blur)" transform="scale(1.5, 1.5)"/>
+
+ <!-- The circles above should be completely covered by the next one. -->
+ <circle r="20" fill="lime"/>
+</svg>
diff --git a/layout/reftests/svg/filters/mozilla-banner.gif b/layout/reftests/svg/filters/mozilla-banner.gif
new file mode 100644
index 0000000000..dd0f077753
--- /dev/null
+++ b/layout/reftests/svg/filters/mozilla-banner.gif
Binary files differ
diff --git a/layout/reftests/svg/filters/nested-filter-ref.html b/layout/reftests/svg/filters/nested-filter-ref.html
new file mode 100644
index 0000000000..70ee403d7f
--- /dev/null
+++ b/layout/reftests/svg/filters/nested-filter-ref.html
@@ -0,0 +1,14 @@
+<html style="background: red">
+<body>
+ <svg height="100px" width="100px">
+ <g transform="translate(0, 25)">>
+ <defs>
+ <mask id="m" maskUnits="userSpaceOnUse">
+ <rect x=10 y=10 width=51 height=45 fill="white"></rect>
+ </mask>
+ </defs>
+ <rect fill="yellow" x=0 y=0 width=100 height=100 mask="url(#m)"></rect>
+ </g>
+ </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/nested-filter.html b/layout/reftests/svg/filters/nested-filter.html
new file mode 100644
index 0000000000..86407bc5c0
--- /dev/null
+++ b/layout/reftests/svg/filters/nested-filter.html
@@ -0,0 +1,23 @@
+<html style="background: red">
+<body>
+ <svg height="100px" width="100px">
+ <defs>
+ <filter filterUnits="userSpaceOnUse" id="merge" color-interpolation-filters="sRGB">
+ <feMerge>
+ <feMergeNode in="SourceGraphic"></feMergeNode>
+ </feMerge>
+ </filter>
+ </defs>
+ <g filter="url(#merge)">
+ <g transform="translate(0, 25)">>
+ <defs>
+ <mask id="m" maskUnits="userSpaceOnUse">
+ <rect x=10 y=10 width=51 height=45 fill="white"></rect>
+ </mask>
+ </defs>
+ <rect fill="yellow" x=0 y=0 width=100 height=100 mask="url(#m)"></rect>
+ </g>
+ </g>
+ </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/outside-sourcegraphic-1.svg b/layout/reftests/svg/filters/outside-sourcegraphic-1.svg
new file mode 100644
index 0000000000..f360aa12fd
--- /dev/null
+++ b/layout/reftests/svg/filters/outside-sourcegraphic-1.svg
@@ -0,0 +1,10 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+ <filter id="f" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="200">
+ <feFlood flood-color="lime"/>
+ </filter>
+ <rect width="100" height="100" filter="url(#f)"/>
+</svg>
diff --git a/layout/reftests/svg/filters/outside-sourcegraphic-2.svg b/layout/reftests/svg/filters/outside-sourcegraphic-2.svg
new file mode 100644
index 0000000000..6699d620b9
--- /dev/null
+++ b/layout/reftests/svg/filters/outside-sourcegraphic-2.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">
+ <filter id="f" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="200">
+ <feColorMatrix type="matrix" values="0 0 0 0 0
+ 0 0 0 0 1
+ 0 0 0 0 0
+ 0 0 0 0 1"/>
+ </filter>
+ <rect width="100" height="100" filter="url(#f)"/>
+</svg>
diff --git a/layout/reftests/svg/filters/outside-sourcegraphic-3.svg b/layout/reftests/svg/filters/outside-sourcegraphic-3.svg
new file mode 100644
index 0000000000..f8f6b36387
--- /dev/null
+++ b/layout/reftests/svg/filters/outside-sourcegraphic-3.svg
@@ -0,0 +1,15 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+ <filter id="f" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="200">
+ <feComponentTransfer>
+ <feFuncR type="table" tableValues="0 0" />
+ <feFuncG type="table" tableValues="1 1" />
+ <feFuncB type="table" tableValues="0 0" />
+ <feFuncA type="table" tableValues="1 1" />
+ </feComponentTransfer>
+ </filter>
+ <rect width="100" height="100" filter="url(#f)"/>
+</svg>
diff --git a/layout/reftests/svg/filters/outside-sourcegraphic-ref.svg b/layout/reftests/svg/filters/outside-sourcegraphic-ref.svg
new file mode 100644
index 0000000000..a336d22158
--- /dev/null
+++ b/layout/reftests/svg/filters/outside-sourcegraphic-ref.svg
@@ -0,0 +1,7 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+ <rect width="200" height="200" fill="lime"/>
+</svg>
diff --git a/layout/reftests/svg/filters/pass.svg b/layout/reftests/svg/filters/pass.svg
new file mode 100644
index 0000000000..c09c6601e8
--- /dev/null
+++ b/layout/reftests/svg/filters/pass.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/filters/reftest.list b/layout/reftests/svg/filters/reftest.list
new file mode 100644
index 0000000000..9975eb190d
--- /dev/null
+++ b/layout/reftests/svg/filters/reftest.list
@@ -0,0 +1,142 @@
+# In general, the fe*-1 tests test basic functionality clipped to a filter primitive
+# subregion. The fe*-2 tests test with no clipping (which stresses
+# the automatic optimal surface-size computation a bit more).
+
+# CSS filter tests
+include css-filters/reftest.list
+
+# CSS filter chain tests
+include css-filter-chains/reftest.list
+
+# Combined CSS and SVG filter chain tests
+include css-svg-filter-chains/reftest.list
+
+# SVG filter chain tests
+include svg-filter-chains/reftest.list
+
+== dynamic-filtered-foreignObject-01.svg pass.svg
+== dynamic-filter-invalidation-01.svg pass.svg
+== dynamic-filter-invalidation-02.svg pass.svg
+== dynamic-filter-invalidation-03.svg pass.svg
+== dynamic-filter-invalidation-04.svg pass.svg
+
+fuzzy(0-1,0-42500) == feBlend-1.svg feBlend-1-ref.svg
+== feBlend-2.svg feBlend-2-ref.svg
+
+fuzzy(0-1,0-6400) == feColorMatrix-1.svg feColorMatrix-1-ref.svg
+fuzzy(0-1,0-10000) == feColorMatrix-2.svg feColorMatrix-2-ref.svg
+
+== feComponentTransfer-1.svg feComponentTransfer-1-ref.svg
+== feComponentTransfer-2.svg feComponentTransfer-2-ref.svg
+
+fuzzy(0-1,0-9600) == feComposite-1.svg feComposite-1-ref.svg
+fuzzy(0-1,0-10000) == feComposite-2.svg feComposite-2-ref.svg
+
+== feConvolveMatrix-1.svg feConvolveMatrix-1-ref.svg
+== feConvolveMatrix-2.svg feConvolveMatrix-2-ref.svg
+
+== feDisplacementMap-1.svg feDisplacementMap-1-ref.svg
+== feDisplacementMap-2.svg feDisplacementMap-2-ref.svg
+
+fuzzy(0-1,0-1600) == feFlood-1.svg feFlood-1-ref.svg
+skip-if(d2d) fuzzy(0-1,0-6400) == feFlood-2.svg feFlood-2-ref.svg
+
+fuzzy(0-2,0-6404) fuzzy-if(Android&&device&&!swgl,6-6,6400-6400) == feGaussianBlur-1.svg feGaussianBlur-1-ref.svg
+fuzzy(0-2,0-304) == feGaussianBlur-2.svg feGaussianBlur-2-ref.svg
+# != feGaussianBlur-3.svg feGaussianBlur-3-ref.svg
+fuzzy-if(!useDrawSnapshot,2-5,4764-8168) fuzzy-if(Android&&device&&!swgl,5-5,8574-8574) == feGaussianBlur-4.svg feGaussianBlur-4-ref.svg
+fuzzy-if(geckoview,0-4,0-200) == feGaussianBlur-5.svg feGaussianBlur-5-ref.svg
+== feGaussianBlur-6.svg feGaussianBlur-6-ref.svg
+skip-if(d2d) == feGaussianBlur-cap-large-directional-radius-on-software.html feGaussianBlur-cap-large-directional-radius-on-software-ref.html
+
+!= feImage-1.svg about:blank # (Make sure our image renders at all)
+== feImage-1.svg feImage-1-ref.svg
+== feImage-scale-to-primitive-subregion.html feImage-scale-to-primitive-subregion-ref.html
+
+== feMerge-1.svg feMerge-1-ref.svg
+== feMerge-2.svg feMerge-2-ref.svg
+
+== feMorphology-1.svg feMorphology-1-ref.svg
+== feMorphology-2.svg feMorphology-2-ref.svg
+
+== feOffset-1.svg feOffset-1-ref.svg
+== feOffset-2.svg feOffset-2-ref.svg
+
+== feTile-1.svg feTile-1-ref.svg
+== feTile-2.svg feTile-2-ref.svg
+
+# no tests for feTurbulence
+
+fuzzy-if(geckoview,0-36,0-220) == filter-clipped-rect-01.svg pass.svg
+== filter-in-pattern-01.svg pass.svg
+fuzzy(0-5,0-67) != filter-in-pattern-02.svg filter-in-pattern-02-ref.svg
+random-if(winWidget) == filter-in-mask-01.svg pass.svg # bug 1356139
+== filter-in-mask-02.svg pass.svg
+== filter-inner-svg-01.svg pass.svg
+== filter-inner-svg-02.svg pass.svg
+== filter-inner-svg-03.svg pass.svg
+fails == filter-marked-line-01.svg pass.svg # bug 477704
+== filter-kernelUnitLength-01.svg filter-kernelUnitLength-01-ref.svg
+== filter-marked-line-02.svg pass.svg
+== filter-marked-line-03.svg pass.svg
+== filter-marked-line-04.svg pass.svg
+== filter-marked-line-05.svg pass.svg
+== filter-marked-line-06.svg pass.svg
+== filter-marked-line-07.svg pass.svg
+== filter-marked-line-08.svg pass.svg
+== filter-marked-line-09.svg pass.svg
+== filter-nested-filtering-01.svg pass.svg
+fuzzy(0-10,0-1200) == filter-nested-filtering-02.svg pass.svg
+== filter-patterned-rect-01.svg pass.svg
+== filter-patterned-rect-02.svg pass.svg
+== filter-region-01a.html pass.svg
+== filter-region-01b.html pass.svg
+== filter-transform-01.svg pass.svg
+
+== feColorMatrix-saturate-01.svg pass.svg
+
+== feComponentTransfer-03.svg pass.svg
+== feComponentTransfer-04.svg pass.svg
+== feComposite-arguments-01.svg pass.svg
+fuzzy-if(winWidget,0-1,0-39600) == feComposite-operator-lighter.svg feComposite-operator-lighter-ref.html
+fuzzy(0-85,0-28600) == feComposite-paint-01.svg feComposite-paint-01-ref.svg
+fuzzy(0-1,0-10000) == feConvolveMatrix-bias-01.svg feConvolveMatrix-bias-01-ref.svg
+== feConvolveMatrix-order-01.svg feConvolveMatrix-order-01-ref.svg
+
+fuzzy(0-1,0-400) == feDisplacementMap-alpha-01.svg pass.svg
+fuzzy(0-2,0-500) == feDisplacementMap-colour-01.svg feDisplacementMap-colour-01-ref.svg
+== feDisplacementMap-scale-01.svg pass.svg
+
+fuzzy-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu),0-2,0-25) fuzzy-if(!useDrawSnapshot,55-98,14033-16467) == feDropShadow-01.svg feDropShadow-01-ref.svg
+
+== feFlood-color-01.svg pass.svg
+
+fuzzy-if(!useDrawSnapshot||(winWidget&&isCoverageBuild),20-21,5540-5647) == feGaussianBlur-alpha-01.svg feGaussianBlur-alpha-01-ref.svg
+
+== feMorphology-radius-negative-01.svg pass.svg
+== feMorphology-radius-negative-02.svg pass.svg
+== feMorphology-radius-zero-01.svg pass.svg
+== feMorphology-radius-zero-02.svg pass.svg
+
+== feTile-large-01.svg pass.svg
+== feTile-large-02.svg feTile-large-02-ref.svg
+== feTile-outside-01.svg feTile-outside-01-ref.svg
+
+fuzzy(0-1,0-219) == feDiffuseLighting-1.svg feDiffuseLighting-1-ref.svg
+
+fuzzy(0-2,0-2659) skip-if(d2d) == feSpecularLighting-1.svg feSpecularLighting-1-ref.svg
+
+== filter-lighting-region.svg filter-lighting-region-ref.svg
+
+fails-if(useDrawSnapshot) == fePointLight-zoomed-page.svg fePointLight-zoomed-page-ref.svg
+
+== feTurbulence-offset.svg feTurbulence-offset-ref.svg
+fuzzy(0-1,0-10000) == feTurbulence-zero-baseFreq-01.svg feTurbulence-zero-baseFreq-01-ref.svg
+!= feTurbulence-zero-baseFreq-02.svg about:blank
+
+== outside-sourcegraphic-1.svg outside-sourcegraphic-ref.svg
+# These failures are caused by bug 1586055
+fails-if(!useDrawSnapshot) == outside-sourcegraphic-2.svg outside-sourcegraphic-ref.svg
+fails-if(!useDrawSnapshot) == outside-sourcegraphic-3.svg outside-sourcegraphic-ref.svg
+== nested-filter.html nested-filter-ref.html
+== filter-giant.svg pass.svg
diff --git a/layout/reftests/svg/filters/svg-filter-chains/clip-input-ref.svg b/layout/reftests/svg/filters/svg-filter-chains/clip-input-ref.svg
new file mode 100644
index 0000000000..4939ce12ae
--- /dev/null
+++ b/layout/reftests/svg/filters/svg-filter-chains/clip-input-ref.svg
@@ -0,0 +1,26 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg id="svg-root"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+
+ <g id="testmeta">
+ <title>SVG Filter Chains: Clip Input Filter</title>
+ <link rel="copyright"
+ href="http://www.w3.org/Graphics/SVG/Test/Copyright"/>
+ <link rel="license"
+ href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/>
+ <link rel="author"
+ title="Max Vujovic"
+ href="mailto:mvujovic@adobe.com"/>
+ <link rel="help"
+ href="http://dev.w3.org/fxtf/filters/#FilterPrimitiveSubRegion"/>
+ <metadata class="flags">namespace svg</metadata>
+ </g>
+
+ <g id="test-body-content">
+ <rect x="0" y="0" width="100" height="100" fill="green"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/filters/svg-filter-chains/clip-input.svg b/layout/reftests/svg/filters/svg-filter-chains/clip-input.svg
new file mode 100644
index 0000000000..8dd2841add
--- /dev/null
+++ b/layout/reftests/svg/filters/svg-filter-chains/clip-input.svg
@@ -0,0 +1,52 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg id="svg-root"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+
+ <g id="testmeta">
+ <title>SVG Filter Chains: Clip Input Filter</title>
+ <link rel="copyright"
+ href="http://www.w3.org/Graphics/SVG/Test/Copyright"/>
+ <link rel="license"
+ href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/>
+ <link rel="author"
+ title="Max Vujovic"
+ href="mailto:mvujovic@adobe.com"/>
+ <link rel="help"
+ href="http://dev.w3.org/fxtf/filters/#FilterPrimitiveSubRegion"/>
+ <link rel="match"
+ href="clip-input-ref.svg" />
+ <metadata class="flags">namespace svg</metadata>
+ <desc class="assert">
+ In an SVG filter chain, this test verifies that a filter region clips a
+ SourceGraphic input filter. If the test passes, you should see a green
+ square.
+ </desc>
+ </g>
+
+ <g id="test-body-content">
+ <filter id="f1" x="100" y="0" width="100" height="100" filterUnits="userSpaceOnUse">
+ <!-- Create a red square at x=100. -->
+ <feFlood flood-color="red"/>
+ </filter>
+ <filter id="f2" x="0" y="0" width="100" height="100" filterUnits="userSpaceOnUse">
+ <!-- Create a green square at x=0. -->
+ <feFlood result="green" flood-color="green"/>
+ <!--
+ Attempt to offset the red square left to cover up the green square.
+ However, this filter's filter region should clip away the red square,
+ and only transparent pixels should be offset left, leaving the green
+ square intact.
+ -->
+ <feOffset result="red" in="SourceGraphic" dx="-100" x="0" y="0" width="200" height="100"/>
+ <feMerge>
+ <feMergeNode in="green"/>
+ <feMergeNode in="red"/>
+ </feMerge>
+ </filter>
+ <rect x="0" y="0" width="100" height="100" filter="url(#f1) url(#f2)"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/filters/svg-filter-chains/clip-original-SourceGraphic-ref.svg b/layout/reftests/svg/filters/svg-filter-chains/clip-original-SourceGraphic-ref.svg
new file mode 100644
index 0000000000..048dc64687
--- /dev/null
+++ b/layout/reftests/svg/filters/svg-filter-chains/clip-original-SourceGraphic-ref.svg
@@ -0,0 +1,26 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg id="svg-root"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+
+ <g id="testmeta">
+ <title>SVG Filter Chains: Clip Original SourceGraphic</title>
+ <link rel="copyright"
+ href="http://www.w3.org/Graphics/SVG/Test/Copyright"/>
+ <link rel="license"
+ href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/>
+ <link rel="author"
+ title="Max Vujovic"
+ href="mailto:mvujovic@adobe.com"/>
+ <link rel="help"
+ href="http://dev.w3.org/fxtf/filters/#FilterPrimitiveSubRegion"/>
+ <metadata class="flags">namespace svg</metadata>
+ </g>
+
+ <g id="test-body-content">
+ <rect x="0" y="0" width="100" height="100" fill="green"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/filters/svg-filter-chains/clip-original-SourceGraphic.svg b/layout/reftests/svg/filters/svg-filter-chains/clip-original-SourceGraphic.svg
new file mode 100644
index 0000000000..f6349768ed
--- /dev/null
+++ b/layout/reftests/svg/filters/svg-filter-chains/clip-original-SourceGraphic.svg
@@ -0,0 +1,50 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg id="svg-root"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+
+ <g id="testmeta">
+ <title>SVG Filter Chains: Clip Original SourceGraphic</title>
+ <link rel="copyright"
+ href="http://www.w3.org/Graphics/SVG/Test/Copyright"/>
+ <link rel="license"
+ href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/>
+ <link rel="author"
+ title="Max Vujovic"
+ href="mailto:mvujovic@adobe.com"/>
+ <link rel="help"
+ href="http://dev.w3.org/fxtf/filters/#FilterPrimitiveSubRegion"/>
+ <link rel="match"
+ href="clip-original-SourceGraphic-ref.svg" />
+ <metadata class="flags">namespace svg</metadata>
+ <desc class="assert">
+ In an SVG filter chain, this test verifies that the filter region of the
+ first filter clips the original SourceGraphic. If the test passes, you
+ should see a green square.
+ </desc>
+ </g>
+
+ <g id="test-body-content">
+ <!--
+ Use a filter region less wide than the red rectangle SourceGraphic. This
+ should clip the red rectangle, resulting in a red square.
+ -->
+ <filter id="f1" x="0" y="0" width="100" height="100" filterUnits="userSpaceOnUse">
+ <!-- Create a green square at x=0. -->
+ <feFlood result="green" flood-color="green" x="0" y="0" width="100" height="100"/>
+ <!--
+ Offset the red SourceGraphic left. If it wasn't clipped properly, it
+ will cover up the green square. If it was clipped properly, it won't.
+ -->
+ <feOffset result="offset-red" in="SourceGraphic" dx="-100" x="0" y="0" width="200" height="100"/>
+ <feMerge>
+ <feMergeNode in="green"/>
+ <feMergeNode in="offset-red"/>
+ </feMerge>
+ </filter>
+ <rect x="0" y="0" width="200" height="100" filter="url(#f1)" fill="red"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/filters/svg-filter-chains/clip-output-ref.svg b/layout/reftests/svg/filters/svg-filter-chains/clip-output-ref.svg
new file mode 100644
index 0000000000..26b6cc7f03
--- /dev/null
+++ b/layout/reftests/svg/filters/svg-filter-chains/clip-output-ref.svg
@@ -0,0 +1,30 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg id="svg-root"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+
+ <g id="testmeta">
+ <title>SVG Filter Chains: Clip Filter Output</title>
+ <link rel="copyright"
+ href="http://www.w3.org/Graphics/SVG/Test/Copyright"/>
+ <link rel="license"
+ href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/>
+ <link rel="author"
+ title="Max Vujovic"
+ href="mailto:mvujovic@adobe.com"/>
+ <link rel="help"
+ href="http://dev.w3.org/fxtf/filters/#FilterPrimitiveSubRegion"/>
+ <metadata class="flags">namespace svg</metadata>
+ </g>
+
+ <g id="test-body-content">
+ <filter id="hue-rotate">
+ <!-- Turn the red square green. -->
+ <feColorMatrix type="hueRotate" values="90" style="color-interpolation-filters:sRGB"/>
+ </filter>
+ <rect x="0" y="0" width="100" height="100" filter="url(#hue-rotate)" fill="red"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/filters/svg-filter-chains/clip-output.svg b/layout/reftests/svg/filters/svg-filter-chains/clip-output.svg
new file mode 100644
index 0000000000..94d3a953ab
--- /dev/null
+++ b/layout/reftests/svg/filters/svg-filter-chains/clip-output.svg
@@ -0,0 +1,52 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg id="svg-root"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+
+ <g id="testmeta">
+ <title>SVG Filter Chains: Clip Filter Output</title>
+ <link rel="copyright"
+ href="http://www.w3.org/Graphics/SVG/Test/Copyright"/>
+ <link rel="license"
+ href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/>
+ <link rel="author"
+ title="Max Vujovic"
+ href="mailto:mvujovic@adobe.com"/>
+ <link rel="help"
+ href="http://dev.w3.org/fxtf/filters/#FilterPrimitiveSubRegion"/>
+ <link rel="match"
+ href="clip-output-ref.svg" />
+ <metadata class="flags">namespace svg</metadata>
+ <desc class="assert">
+ In an SVG filter chain, this test verifies a filter region clips its
+ filter's output into the next filter. If the test passes, you should see a
+ green square.
+ </desc>
+ </g>
+
+ <g id="test-body-content">
+ <filter id="flood" x="0" y="0" width="100" height="100" filterUnits="userSpaceOnUse">
+ <!--
+ Create a red square followed by a blue square. The blue square should be
+ clipped away due to this filter's filter region.
+ -->
+ <feFlood result="red" flood-color="red" x="0" y="0" width="100" height="100"/>
+ <feFlood result="blue" flood-color="blue" x="100" y="0" width="100" height="100"/>
+ <feMerge>
+ <feMergeNode in="red"/>
+ <feMergeNode in="blue"/>
+ </feMerge>
+ </filter>
+ <filter id="hue-rotate" x="0" y="0" width="200" height="100" filterUnits="userSpaceOnUse">
+ <!--
+ Turn the red square green. If the blue square wasn't clipped by the
+ previous filter's filter region, it will turn red.
+ -->
+ <feColorMatrix type="hueRotate" values="90" style="color-interpolation-filters:sRGB"/>
+ </filter>
+ <rect x="0" y="0" width="100" height="100" filter="url(#flood) url(#hue-rotate)"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/filters/svg-filter-chains/default-subregion-ref.svg b/layout/reftests/svg/filters/svg-filter-chains/default-subregion-ref.svg
new file mode 100644
index 0000000000..86d77e2008
--- /dev/null
+++ b/layout/reftests/svg/filters/svg-filter-chains/default-subregion-ref.svg
@@ -0,0 +1,29 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg id="svg-root"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+
+ <g id="testmeta">
+ <title>SVG Filter Chains: Default Filter Primitive Subregion</title>
+ <link rel="copyright"
+ href="http://www.w3.org/Graphics/SVG/Test/Copyright"/>
+ <link rel="license"
+ href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/>
+ <link rel="author"
+ title="Max Vujovic"
+ href="mailto:mvujovic@adobe.com"/>
+ <link rel="help"
+ href="http://dev.w3.org/fxtf/filters/#FilterPrimitiveSubRegion"/>
+ <metadata class="flags">namespace svg</metadata>
+ </g>
+
+ <g id="test-body-content">
+ <filter id="f1" x="50" y="50" width="200" height="200" filterUnits="userSpaceOnUse">
+ <feGaussianBlur stdDeviation="10"/>
+ </filter>
+ <rect x="100" y="100" width="100" height="100" filter="url(#f1)" fill="green"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/filters/svg-filter-chains/default-subregion.svg b/layout/reftests/svg/filters/svg-filter-chains/default-subregion.svg
new file mode 100644
index 0000000000..b175fe0a31
--- /dev/null
+++ b/layout/reftests/svg/filters/svg-filter-chains/default-subregion.svg
@@ -0,0 +1,48 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg id="svg-root"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+
+ <g id="testmeta">
+ <title>SVG Filter Chains: Default Filter Primitive Subregion</title>
+ <link rel="copyright"
+ href="http://www.w3.org/Graphics/SVG/Test/Copyright"/>
+ <link rel="license"
+ href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/>
+ <link rel="author"
+ title="Max Vujovic"
+ href="mailto:mvujovic@adobe.com"/>
+ <link rel="help"
+ href="http://dev.w3.org/fxtf/filters/#FilterPrimitiveSubRegion"/>
+ <link rel="match"
+ href="default-subregion-ref.svg" />
+ <metadata class="flags">namespace svg</metadata>
+ <desc class="assert">
+ In an SVG filter chain, this test verifies that the default filter
+ primitive subregion is equal to the filter region. If the test passes,
+ you should see a blurred green square.
+ </desc>
+ </g>
+
+ <g id="test-body-content">
+ <filter id="f1" x="100" y="100" width="100" height="100" filterUnits="userSpaceOnUse">
+ <!-- Fill a 100x100 square with green. -->
+ <feFlood flood-color="green"/>
+ </filter>
+ <filter id="f2" x="50" y="50" width="200" height="200" filterUnits="userSpaceOnUse">
+ <!--
+ This feGaussianBlur primitive blurs the 100x100 green square from the
+ previous filter. It does not explicitly define a filter primitive
+ subregion, so its subregion should equal the filter region. The filter
+ region has plenty of space for the blur outsets, so the blur should not
+ appear clipped. If the blur incorrectly uses a primitive subregion or
+ filter region from a previous filter, the blur may appear clipped.
+ -->
+ <feGaussianBlur stdDeviation="10"/>
+ </filter>
+ <rect x="100" y="100" width="100" height="100" filter="url(#f1) url(#f2)" fill="red"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/filters/svg-filter-chains/different-FillPaint-filter-regions-ref.svg b/layout/reftests/svg/filters/svg-filter-chains/different-FillPaint-filter-regions-ref.svg
new file mode 100644
index 0000000000..fb405de255
--- /dev/null
+++ b/layout/reftests/svg/filters/svg-filter-chains/different-FillPaint-filter-regions-ref.svg
@@ -0,0 +1,30 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg id="svg-root"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+
+ <g id="testmeta">
+ <title>SVG Filter Chains: Use Same FillPaint Input with Different Filter Regions</title>
+ <link rel="copyright"
+ href="http://www.w3.org/Graphics/SVG/Test/Copyright"/>
+ <link rel="license"
+ href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/>
+ <link rel="author"
+ title="Max Vujovic"
+ href="mailto:mvujovic@adobe.com"/>
+ <link rel="help"
+ href="http://dev.w3.org/fxtf/filters/#FilterPrimitiveSubRegion"/>
+ <metadata class="flags">namespace svg</metadata>
+ </g>
+
+ <g id="test-body-content">
+ <filter id="f1">
+ <!-- Turn the red square into a green square. -->
+ <feColorMatrix type="hueRotate" values="90"/>
+ </filter>
+ <rect x="0" y="0" width="200" height="200" filter="url(#f1)" fill="red"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/filters/svg-filter-chains/different-FillPaint-filter-regions.svg b/layout/reftests/svg/filters/svg-filter-chains/different-FillPaint-filter-regions.svg
new file mode 100644
index 0000000000..57277b62d6
--- /dev/null
+++ b/layout/reftests/svg/filters/svg-filter-chains/different-FillPaint-filter-regions.svg
@@ -0,0 +1,43 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg id="svg-root"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+
+ <g id="testmeta">
+ <title>SVG Filter Chains: Use Same FillPaint Input with Different Filter Regions</title>
+ <link rel="copyright"
+ href="http://www.w3.org/Graphics/SVG/Test/Copyright"/>
+ <link rel="license"
+ href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/>
+ <link rel="author"
+ title="Max Vujovic"
+ href="mailto:mvujovic@adobe.com"/>
+ <link rel="help"
+ href="http://dev.w3.org/fxtf/filters/#FilterPrimitiveSubRegion"/>
+ <link rel="match"
+ href="different-FillPaint-filter-regions-ref.svg" />
+ <metadata class="flags">namespace svg</metadata>
+ <desc class="assert">
+ In an SVG filter chain, this test verifies that a FillPaint input is large
+ enough to cover the largest filter region in the chain. If the test
+ passes, you should see a green square.
+ </desc>
+ </g>
+
+ <g id="test-body-content">
+ <!-- Use a small filter region. -->
+ <filter id="f1" x="0" y="0" width="100" height="100" filterUnits="userSpaceOnUse">
+ <!-- Turn the red square into a blue square. -->
+ <feColorMatrix in="FillPaint" type="hueRotate" values="180"/>
+ </filter>
+ <!-- Use a large filter region. -->
+ <filter id="f2" x="0" y="0" width="200" height="200" filterUnits="userSpaceOnUse">
+ <!-- Turn the red square into a green square. -->
+ <feColorMatrix in="FillPaint" type="hueRotate" values="90"/>
+ </filter>
+ <rect x="0" y="0" width="100" height="100" filter="url(#f1) url(#f2)" fill="red"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/filters/svg-filter-chains/different-StrokePaint-filter-regions-ref.svg b/layout/reftests/svg/filters/svg-filter-chains/different-StrokePaint-filter-regions-ref.svg
new file mode 100644
index 0000000000..ecdff269c0
--- /dev/null
+++ b/layout/reftests/svg/filters/svg-filter-chains/different-StrokePaint-filter-regions-ref.svg
@@ -0,0 +1,30 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg id="svg-root"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+
+ <g id="testmeta">
+ <title>SVG Filter Chains: Use Same StrokePaint Input with Different Filter Regions</title>
+ <link rel="copyright"
+ href="http://www.w3.org/Graphics/SVG/Test/Copyright"/>
+ <link rel="license"
+ href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/>
+ <link rel="author"
+ title="Max Vujovic"
+ href="mailto:mvujovic@adobe.com"/>
+ <link rel="help"
+ href="http://dev.w3.org/fxtf/filters/#FilterPrimitiveSubRegion"/>
+ <metadata class="flags">namespace svg</metadata>
+ </g>
+
+ <g id="test-body-content">
+ <filter id="f1">
+ <!-- Turn the red square into a green square. -->
+ <feColorMatrix type="hueRotate" values="90"/>
+ </filter>
+ <rect x="0" y="0" width="200" height="200" filter="url(#f1)" fill="red"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/filters/svg-filter-chains/different-StrokePaint-filter-regions.svg b/layout/reftests/svg/filters/svg-filter-chains/different-StrokePaint-filter-regions.svg
new file mode 100644
index 0000000000..2e0d1adb2b
--- /dev/null
+++ b/layout/reftests/svg/filters/svg-filter-chains/different-StrokePaint-filter-regions.svg
@@ -0,0 +1,43 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg id="svg-root"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+
+ <g id="testmeta">
+ <title>SVG Filter Chains: Use Same StrokePaint Input with Different Filter Regions</title>
+ <link rel="copyright"
+ href="http://www.w3.org/Graphics/SVG/Test/Copyright"/>
+ <link rel="license"
+ href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/>
+ <link rel="author"
+ title="Max Vujovic"
+ href="mailto:mvujovic@adobe.com"/>
+ <link rel="help"
+ href="http://dev.w3.org/fxtf/filters/#FilterPrimitiveSubRegion"/>
+ <link rel="match"
+ href="different-StrokePaint-filter-regions-ref.svg" />
+ <metadata class="flags">namespace svg</metadata>
+ <desc class="assert">
+ In an SVG filter chain, this test verifies that a StrokePaint input is large
+ enough to cover the largest filter region in the chain. If the test
+ passes, you should see a green square.
+ </desc>
+ </g>
+
+ <g id="test-body-content">
+ <!-- Use a small filter region. -->
+ <filter id="f1" x="0" y="0" width="100" height="100" filterUnits="userSpaceOnUse">
+ <!-- Turn the red square into a blue square. -->
+ <feColorMatrix in="StrokePaint" type="hueRotate" values="180"/>
+ </filter>
+ <!-- Use a large filter region. -->
+ <filter id="f2" x="0" y="0" width="200" height="200" filterUnits="userSpaceOnUse">
+ <!-- Turn the red square into a green square. -->
+ <feColorMatrix in="StrokePaint" type="hueRotate" values="90"/>
+ </filter>
+ <rect x="0" y="0" width="100" height="100" filter="url(#f1) url(#f2)" stroke="red"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/filters/svg-filter-chains/dont-clip-previous-primitives-ref.svg b/layout/reftests/svg/filters/svg-filter-chains/dont-clip-previous-primitives-ref.svg
new file mode 100644
index 0000000000..214be69ea2
--- /dev/null
+++ b/layout/reftests/svg/filters/svg-filter-chains/dont-clip-previous-primitives-ref.svg
@@ -0,0 +1,30 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg id="svg-root"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+
+ <g id="testmeta">
+ <title>SVG Filter Chains: Don't Clip Primitives in Previous Filters to Subsequent Filter Regions</title>
+ <link rel="copyright"
+ href="http://www.w3.org/Graphics/SVG/Test/Copyright"/>
+ <link rel="license"
+ href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/>
+ <link rel="author"
+ title="Max Vujovic"
+ href="mailto:mvujovic@adobe.com"/>
+ <link rel="help"
+ href="http://dev.w3.org/fxtf/filters/#FilterPrimitiveSubRegion"/>
+ <metadata class="flags">namespace svg</metadata>
+ </g>
+
+ <g id="test-body-content">
+ <filter id="f1" x="0" y="0" width="100" height="100" filterUnits="userSpaceOnUse">
+ <!-- Turn the red square into a green square. -->
+ <feColorMatrix type="hueRotate" values="90"/>
+ </filter>
+ <rect x="0" y="0" width="100" height="100" filter="url(#f1)" fill="red"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/filters/svg-filter-chains/dont-clip-previous-primitives.svg b/layout/reftests/svg/filters/svg-filter-chains/dont-clip-previous-primitives.svg
new file mode 100644
index 0000000000..50b2be3a62
--- /dev/null
+++ b/layout/reftests/svg/filters/svg-filter-chains/dont-clip-previous-primitives.svg
@@ -0,0 +1,51 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg id="svg-root"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+
+ <g id="testmeta">
+ <title>SVG Filter Chains: Don't Clip Primitives in Previous Filters to Subsequent Filter Regions</title>
+ <link rel="copyright"
+ href="http://www.w3.org/Graphics/SVG/Test/Copyright"/>
+ <link rel="license"
+ href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/>
+ <link rel="author"
+ title="Max Vujovic"
+ href="mailto:mvujovic@adobe.com"/>
+ <link rel="help"
+ href="http://dev.w3.org/fxtf/filters/#FilterPrimitiveSubRegion"/>
+ <link rel="match"
+ href="dont-clip-previous-primitives.svg" />
+ <metadata class="flags">namespace svg</metadata>
+ <desc class="assert">
+ In an SVG filter chain, this test verifies that a second filter's filter
+ region does not clip the primitives inside a first filter. If the test
+ passes, you should see a green square.
+ </desc>
+ </g>
+
+ <g id="test-body-content">
+ <!-- Use a wide filter region. -->
+ <filter id="f1" x="0" y="0" width="200" height="100" filterUnits="userSpaceOnUse">
+ <!-- Create a red square at x=100. -->
+ <feFlood flood-color="red" x="100" y="0" width="100" height="100"/>
+ <!-- Offset the red square left to x=0. -->
+ <feOffset dx="-100" x="0" y="0" width="200" height="100"/>
+ </filter>
+ <!--
+ Use a less wide filter region. The intermediate results of the previous
+ filter do not fit in this filter region, but that shouldn't matter. The
+ previous filter's intermediate results should not be affected by this
+ filter region. The final result of the previous filter should fit in this
+ filter region.
+ -->
+ <filter id="f2" x="0" y="0" width="100" height="100" filterUnits="userSpaceOnUse">
+ <!-- Turn the red square into a green square. -->
+ <feColorMatrix type="hueRotate" values="90"/>
+ </filter>
+ <rect x="0" y="0" width="100" height="100" filter="url(#f1) url(#f2)" fill="blue"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/filters/svg-filter-chains/intersecting-filter-regions-ref.svg b/layout/reftests/svg/filters/svg-filter-chains/intersecting-filter-regions-ref.svg
new file mode 100644
index 0000000000..2f97ca88ad
--- /dev/null
+++ b/layout/reftests/svg/filters/svg-filter-chains/intersecting-filter-regions-ref.svg
@@ -0,0 +1,29 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg id="svg-root"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+
+ <g id="testmeta">
+ <title>SVG Filter Chains: Intersecting Filter Regions</title>
+ <link rel="copyright"
+ href="http://www.w3.org/Graphics/SVG/Test/Copyright"/>
+ <link rel="license"
+ href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/>
+ <link rel="author"
+ title="Max Vujovic"
+ href="mailto:mvujovic@adobe.com"/>
+ <link rel="help"
+ href="http://dev.w3.org/fxtf/filters/#FilterPrimitiveSubRegion"/>
+ <metadata class="flags">namespace svg</metadata>
+ </g>
+
+ <g id="test-body-content">
+ <filter id="hue-rotate">
+ <feColorMatrix type="hueRotate" values="90" style="color-interpolation-filters:sRGB"/>
+ </filter>
+ <rect x="100" y="100" width="100" height="100" filter="url(#hue-rotate)" fill="red"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/filters/svg-filter-chains/intersecting-filter-regions.svg b/layout/reftests/svg/filters/svg-filter-chains/intersecting-filter-regions.svg
new file mode 100644
index 0000000000..f9ff60aa2f
--- /dev/null
+++ b/layout/reftests/svg/filters/svg-filter-chains/intersecting-filter-regions.svg
@@ -0,0 +1,45 @@
+<svg id="svg-root"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+
+ <g id="testmeta">
+ <title>SVG Filter Chains: Intersecting Filter Regions</title>
+ <link rel="copyright"
+ href="http://www.w3.org/Graphics/SVG/Test/Copyright"/>
+ <link rel="license"
+ href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/>
+ <link rel="author"
+ title="Max Vujovic"
+ href="mailto:mvujovic@adobe.com"/>
+ <link rel="help"
+ href="http://dev.w3.org/fxtf/filters/#FilterPrimitiveSubRegion"/>
+ <link rel="match"
+ href="intersecting-filter-regions-ref.svg" />
+ <metadata class="flags">namespace svg</metadata>
+ <desc class="assert">
+ In an SVG filter chain, this test verifies that filters with intersecting
+ filter regions render properly. If the test passes, you should see a green
+ square.
+ </desc>
+ </g>
+
+ <g id="test-body-content">
+ <filter id="flood" x="0" y="0" width="200" height="200" filterUnits="userSpaceOnUse">
+ <!--
+ This filter clips the SourceGraphic to its top left corner and fills it
+ with red.
+ -->
+ <feFlood flood-color="red"/>
+ </filter>
+ <filter id="hue-rotate" x="100" y="100" width="200" height="200" filterUnits="userSpaceOnUse">
+ <!--
+ This filter clips the output of the previous filter to the bottom right
+ corner, and it changes red into green. If the previous filter didn't run
+ or it didn't clip the SourceGraphic, this filter will change the
+ SourceGraphic's blue fill into red.
+ -->
+ <feColorMatrix type="hueRotate" values="90" style="color-interpolation-filters:sRGB"/>
+ </filter>
+ <rect x="0" y="0" width="300" height="300" filter="url(#flood) url(#hue-rotate)" fill="blue"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/filters/svg-filter-chains/long-chain.svg b/layout/reftests/svg/filters/svg-filter-chains/long-chain.svg
new file mode 100644
index 0000000000..00f0c9dc62
--- /dev/null
+++ b/layout/reftests/svg/filters/svg-filter-chains/long-chain.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">
+ <filter id="flood-with-yellow">
+ <!-- Turn the black rect into a yellow rect. -->
+ <feFlood x="20" y="20" width="100" height="100" flood-color="#ffff00"/>
+ </filter>
+ <filter id="extract-red-channel">
+ <!-- Turn the yellow rect into a red rect. -->
+ <feComponentTransfer x="0" y="0" width="120" height="120">
+ <feFuncR type="identity"/>
+ <feFuncG type="table" tableValues="0 0"/>
+ <feFuncB type="table" tableValues="0 0"/>
+ <feFuncA type="identity"/>
+ </feComponentTransfer>
+ </filter>
+ <filter id="blur">
+ <!-- Blur the red rect. -->
+ <feGaussianBlur stdDeviation="3" x="10" y="10" width="120" height="120"/>
+ </filter>
+ <filter id="hue-rotate">
+ <!-- Turn the red rect into a green rect. -->
+ <feColorMatrix type="hueRotate" values="90"/>
+ </filter>
+ <rect x="20" y="20" width="100" height="100" filter="url(#flood-with-yellow) url(#extract-red-channel) url(#blur) url(#hue-rotate)"/>
+</svg>
diff --git a/layout/reftests/svg/filters/svg-filter-chains/multiple-primitives-per-filter.svg b/layout/reftests/svg/filters/svg-filter-chains/multiple-primitives-per-filter.svg
new file mode 100644
index 0000000000..9bdf8fe2c0
--- /dev/null
+++ b/layout/reftests/svg/filters/svg-filter-chains/multiple-primitives-per-filter.svg
@@ -0,0 +1,24 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+ <filter id="flood-with-red">
+ <!-- Turn the black rect into a yellow rect. -->
+ <feFlood x="20" y="20" width="100" height="100" flood-color="#ffff00"/>
+ <!-- Turn the yellow rect into a red rect. -->
+ <feComponentTransfer x="0" y="0" width="120" height="120">
+ <feFuncR type="identity"/>
+ <feFuncG type="table" tableValues="0 0"/>
+ <feFuncB type="table" tableValues="0 0"/>
+ <feFuncA type="identity"/>
+ </feComponentTransfer>
+ </filter>
+ <filter id="blur-and-hue-rotate">
+ <!-- Blur the red rect. -->
+ <feGaussianBlur stdDeviation="3" x="10" y="10" width="120" height="120"/>
+ <!-- Turn the red rect into a green rect. -->
+ <feColorMatrix type="hueRotate" values="90"/>
+ </filter>
+ <rect x="20" y="20" width="100" height="100" filter="url(#flood-with-red) url(#blur-and-hue-rotate)"/>
+</svg>
diff --git a/layout/reftests/svg/filters/svg-filter-chains/reftest.list b/layout/reftests/svg/filters/svg-filter-chains/reftest.list
new file mode 100644
index 0000000000..12ddf9d8bb
--- /dev/null
+++ b/layout/reftests/svg/filters/svg-filter-chains/reftest.list
@@ -0,0 +1,16 @@
+# These tests verify that SVG filter chains behave properly.
+# e.g. filter: url(#f1) url(#f2) url(#f3)
+
+== clip-input.svg clip-input-ref.svg
+== clip-original-SourceGraphic.svg clip-original-SourceGraphic-ref.svg
+== clip-output.svg clip-output-ref.svg
+fuzzy(0-5,0-20300) fuzzy-if(Android&&device&&!swgl,5-5,21751-21751) == default-subregion.svg default-subregion-ref.svg
+== different-FillPaint-filter-regions.svg different-FillPaint-filter-regions-ref.svg
+== different-StrokePaint-filter-regions.svg different-StrokePaint-filter-regions-ref.svg
+== dont-clip-previous-primitives.svg dont-clip-previous-primitives-ref.svg
+== intersecting-filter-regions.svg intersecting-filter-regions-ref.svg
+fuzzy-if(!useDrawSnapshot,9-9,5168-5536) fuzzy-if(!useDrawSnapshot&&swgl,7-7,13170-13184) fuzzy-if(Android&&device&&!swgl,8-8,12391-12391) == long-chain.svg simple-chain-ref.svg
+fuzzy-if(!useDrawSnapshot,9-9,5168-5536) fuzzy-if(!useDrawSnapshot&&swgl,7-7,13170-13184) fuzzy-if(Android&&device&&!swgl,8-8,12391-12391) == multiple-primitives-per-filter.svg simple-chain-ref.svg
+fuzzy-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu),0-1,0-173) fuzzy-if(!useDrawSnapshot||(winWidget&&isCoverageBuild),9-9,5128-5496) fuzzy-if(!useDrawSnapshot&&swgl,7-7,12820-12830) fuzzy-if(Android&&device&&!swgl,8-8,12355-12355) == second-filter-uses-SourceAlpha.svg second-filter-uses-SourceAlpha-ref.svg
+fuzzy-if(!useDrawSnapshot,9-9,5168-5536) fuzzy-if(!useDrawSnapshot&&swgl,7-7,13170-13180) fuzzy-if(Android&&device&&!swgl,8-8,12391-12391) == second-filter-uses-SourceGraphic.svg simple-chain-ref.svg
+== simple-chain.svg simple-chain-ref.svg
diff --git a/layout/reftests/svg/filters/svg-filter-chains/second-filter-uses-SourceAlpha-ref.svg b/layout/reftests/svg/filters/svg-filter-chains/second-filter-uses-SourceAlpha-ref.svg
new file mode 100644
index 0000000000..e809e55bb3
--- /dev/null
+++ b/layout/reftests/svg/filters/svg-filter-chains/second-filter-uses-SourceAlpha-ref.svg
@@ -0,0 +1,29 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg id="svg-root"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+
+ <g id="testmeta">
+ <title>SVG Filter Chains: Second Filter Uses SourceAlpha</title>
+ <link rel="copyright"
+ href="http://www.w3.org/Graphics/SVG/Test/Copyright"/>
+ <link rel="license"
+ href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/>
+ <link rel="author"
+ title="Max Vujovic"
+ href="mailto:mvujovic@adobe.com"/>
+ <link rel="help"
+ href="http://dev.w3.org/fxtf/filters/#FilterPrimitiveSubRegion"/>
+ <metadata class="flags">namespace svg</metadata>
+ </g>
+
+ <g id="test-body-content">
+ <filter id="blur">
+ <feGaussianBlur stdDeviation="3"/>
+ </filter>
+ <rect x="100" y="100" width="100" height="100" filter="url(#blur)" fill="#00ff00"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/filters/svg-filter-chains/second-filter-uses-SourceAlpha.svg b/layout/reftests/svg/filters/svg-filter-chains/second-filter-uses-SourceAlpha.svg
new file mode 100644
index 0000000000..474c9da14c
--- /dev/null
+++ b/layout/reftests/svg/filters/svg-filter-chains/second-filter-uses-SourceAlpha.svg
@@ -0,0 +1,49 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg id="svg-root"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+
+ <g id="testmeta">
+ <title>SVG Filter Chains: Second Filter Uses SourceAlpha</title>
+ <link rel="copyright"
+ href="http://www.w3.org/Graphics/SVG/Test/Copyright"/>
+ <link rel="license"
+ href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/>
+ <link rel="author"
+ title="Max Vujovic"
+ href="mailto:mvujovic@adobe.com"/>
+ <link rel="help"
+ href="http://dev.w3.org/fxtf/filters/#FilterPrimitiveSubRegion"/>
+ <link rel="match"
+ href="second-filter-uses-SourceAlpha.svg" />
+ <metadata class="flags">namespace svg</metadata>
+ <desc class="assert">
+ In an SVG filter chain, this test verifies that a filter receives the
+ correct SourceAlpha input from the previous filter in the chain. If the
+ test passes, you should see a blurred green square.
+ </desc>
+ </g>
+
+ <g id="test-body-content">
+ <filter id="blur">
+ <feGaussianBlur stdDeviation="3"/>
+ </filter>
+ <filter id="add-green">
+ <!--
+ This filter receives transparent black and the alpha channel of the
+ previous blur filter. Then, it adds to the green channel where the alpha
+ channel is set, resulting in a blurred green square.
+ -->
+ <feComponentTransfer in="SourceAlpha">
+ <feFuncR type="identity"/>
+ <feFuncG type="table" tableValues="1 1"/>
+ <feFuncB type="identity"/>
+ <feFuncA type="identity"/>
+ </feComponentTransfer>
+ </filter>
+ <rect x="100" y="100" width="100" height="100" filter="url(#blur) url(#add-green)" fill="red"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/filters/svg-filter-chains/second-filter-uses-SourceGraphic.svg b/layout/reftests/svg/filters/svg-filter-chains/second-filter-uses-SourceGraphic.svg
new file mode 100644
index 0000000000..f8dc040b83
--- /dev/null
+++ b/layout/reftests/svg/filters/svg-filter-chains/second-filter-uses-SourceGraphic.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">
+ <filter id="blur">
+ <!-- Blur the red rect. -->
+ <feGaussianBlur stdDeviation="3"/>
+ </filter>
+ <filter id="hue-rotate">
+ <feFlood flood-color="#0000ff"/>
+ <!-- Turn the red rect into a green rect. feColorMatrix should use the
+ result of the #blur filter, not feFlood, as its SourceGraphic. -->
+ <feColorMatrix in="SourceGraphic" type="hueRotate" values="90"/>
+ </filter>
+ <rect x="20" y="20" width="100" height="100" fill="#ff0000" filter="url(#blur) url(#hue-rotate)"/>
+</svg>
diff --git a/layout/reftests/svg/filters/svg-filter-chains/simple-chain-ref.svg b/layout/reftests/svg/filters/svg-filter-chains/simple-chain-ref.svg
new file mode 100644
index 0000000000..4194849054
--- /dev/null
+++ b/layout/reftests/svg/filters/svg-filter-chains/simple-chain-ref.svg
@@ -0,0 +1,14 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+ <!-- Test multiple SVG filters chained together against a single SVG filter. -->
+ <filter id="blur-and-hue-rotate">
+ <!-- Blur the red rect. -->
+ <feGaussianBlur stdDeviation="3"/>
+ <!-- Turn the red rect into a green rect. -->
+ <feColorMatrix type="hueRotate" values="90"/>
+ </filter>
+ <rect x="20" y="20" width="100" height="100" fill="#ff0000" filter="url(#blur-and-hue-rotate)"/>
+</svg>
diff --git a/layout/reftests/svg/filters/svg-filter-chains/simple-chain.svg b/layout/reftests/svg/filters/svg-filter-chains/simple-chain.svg
new file mode 100644
index 0000000000..e391bf8e03
--- /dev/null
+++ b/layout/reftests/svg/filters/svg-filter-chains/simple-chain.svg
@@ -0,0 +1,15 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+ <filter id="blur">
+ <!-- Blur the red rect. -->
+ <feGaussianBlur stdDeviation="3"/>
+ </filter>
+ <filter id="hue-rotate">
+ <!-- Turn the red rect into a green rect. -->
+ <feColorMatrix type="hueRotate" values="90"/>
+ </filter>
+ <rect x="20" y="20" width="100" height="100" fill="#ff0000" filter="url(#blur) url(#hue-rotate)"/>
+</svg>
diff --git a/layout/reftests/svg/foreignObject-01.svg b/layout/reftests/svg/foreignObject-01.svg
new file mode 100644
index 0000000000..68d4072f4a
--- /dev/null
+++ b/layout/reftests/svg/foreignObject-01.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" version="1.1">
+
+ <title>Testcase for foreignObject</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=367366 -->
+
+ <rect width="100%" height="100%" fill="red"/>
+ <foreignObject width="100%" height="100%">
+ <div xmlns="http://www.w3.org/1999/xhtml"
+ style="background:lime; display:block; width:100%; height:100%;"/>
+ </foreignObject>
+
+</svg>
diff --git a/layout/reftests/svg/foreignObject-02-ref.svg b/layout/reftests/svg/foreignObject-02-ref.svg
new file mode 100644
index 0000000000..999e278074
--- /dev/null
+++ b/layout/reftests/svg/foreignObject-02-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" version="1.1"
+ xmlns:html="http://www.w3.org/1999/xhtml"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Testing that foreignobject works in filters</title>
+ <foreignObject id="fo1" x="150" y="50" width="50" height="50">
+ <html:div style="width:100%; height:100%; background:lime;">
+ </html:div>
+ </foreignObject>
+ <foreignObject id="fo2" x="150" y="150" width="50" height="50" filter="url(#f1)">
+ <html:div style="width:100%; height:100%; background:lime;">
+ </html:div>
+ </foreignObject>
+ <filter id="f1" x="0" y="0" width="100%" height="100%">
+ <feOffset/>
+ </filter>
+</svg>
diff --git a/layout/reftests/svg/foreignObject-02.svg b/layout/reftests/svg/foreignObject-02.svg
new file mode 100644
index 0000000000..fb02d375bf
--- /dev/null
+++ b/layout/reftests/svg/foreignObject-02.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" version="1.1"
+ xmlns:html="http://www.w3.org/1999/xhtml"
+ xmlns:xlink="http://www.w3.org/1999/xlink" onload="m();">
+ <title>Testing that foreignobject works in filters</title>
+ <foreignObject id="fo1" x="50" y="50" width="50" height="50">
+ <html:div style="width:100%; height:100%; background:lime;">
+ </html:div>
+ </foreignObject>
+ <foreignObject id="fo2" x="50" y="150" width="50" height="50" filter="url(#f1)">
+ <html:div style="width:100%; height:100%; background:lime;">
+ </html:div>
+ </foreignObject>
+ <filter id="f1" x="0" y="0" width="100%" height="100%">
+ <feOffset/>
+ </filter>
+ <script>
+ function m() {
+ var svgns = "http://www.w3.org/2000/svg";
+
+ var fo1 = document.getElementById("fo1");
+ fo1.setAttribute("x", "150");
+
+ var fo2 = document.getElementById("fo2");
+ fo2.setAttribute("x", "150");
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/foreignObject-ancestor-style-change-01-ref.svg b/layout/reftests/svg/foreignObject-ancestor-style-change-01-ref.svg
new file mode 100644
index 0000000000..0896a08062
--- /dev/null
+++ b/layout/reftests/svg/foreignObject-ancestor-style-change-01-ref.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" version="1.1">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=381285 -->
+
+ <title>Reference for foreignObject-ancestor-style-change-01.svg</title>
+
+ <foreignObject width="100%" height="100%">
+ <div xmlns="http://www.w3.org/1999/xhtml"
+ style="width: 100%; height: 100%; font-size: 16px;">
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ </div>
+ </foreignObject>
+
+</svg>
diff --git a/layout/reftests/svg/foreignObject-ancestor-style-change-01.svg b/layout/reftests/svg/foreignObject-ancestor-style-change-01.svg
new file mode 100644
index 0000000000..be4e9749eb
--- /dev/null
+++ b/layout/reftests/svg/foreignObject-ancestor-style-change-01.svg
@@ -0,0 +1,45 @@
+<!--
+ 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">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=381285 -->
+
+ <title>Testcase for style change on foreignObject ancestor</title>
+
+ <!--
+ This testcase checks that foreignObject content is correctly updated when
+ a style change that requires layout changes occurs on an ancestor.
+ -->
+
+ <script>
+
+ document.addEventListener("MozReftestInvalidate", doTest, false);
+ setTimeout(doTest, 4000); // fallback for running outside reftest
+
+ function doTest() {
+ document.getElementById('g').style.fontSize = '16px';
+
+ document.documentElement.removeAttribute('class');
+ }
+ </script>
+
+ <g id="g" style="font-size: 26px;">
+ <foreignObject width="100%" height="100%">
+ <div xmlns="http://www.w3.org/1999/xhtml" style="width: 100%; height: 100%;">
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ </div>
+ </foreignObject>
+ </g>
+
+</svg>
diff --git a/layout/reftests/svg/foreignObject-change-transform-01.svg b/layout/reftests/svg/foreignObject-change-transform-01.svg
new file mode 100644
index 0000000000..6f165dc254
--- /dev/null
+++ b/layout/reftests/svg/foreignObject-change-transform-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:html="http://www.w3.org/1999/xhtml"
+ class="reftest-wait">
+
+ <title>Testcase for changing the 'transform' on foreignObject</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=369911 -->
+
+ <script type="application/javascript">
+
+// The foreignObject is inverted so that it is outside the viewport.
+// After the rect has rendered the transform on the
+// foreignObject is removed and the green div should fill the viewport.
+
+ document.addEventListener("MozReftestInvalidate", doTest, false);
+ setTimeout(doTest, 4000); // fallback for running outside reftest
+
+ function doTest() {
+ document.getElementById('fo').setAttribute('transform', '');
+
+ document.documentElement.removeAttribute('class');
+ }
+ </script>
+ <rect width="100%" height="100%" fill="red"/>
+ <foreignObject id="fo" width="100%" height="100%" transform="scale(-1)">
+ <html:div style="display:block;width:100%;height:100%;background:lime;"/>
+ </foreignObject>
+</svg>
diff --git a/layout/reftests/svg/foreignObject-display-01.svg b/layout/reftests/svg/foreignObject-display-01.svg
new file mode 100644
index 0000000000..dfdbc0eca2
--- /dev/null
+++ b/layout/reftests/svg/foreignObject-display-01.svg
@@ -0,0 +1,30 @@
+<!--
+ 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">
+
+ <title>Testcase for removing display:none from foreignObject child</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=281260 -->
+
+ <script type="application/ecmascript">
+ <![CDATA[
+
+function doTest(event)
+{
+ document.getElementById('div').style.display = 'block';
+ document.documentElement.removeAttribute('class');
+}
+
+document.addEventListener("MozReftestInvalidate", doTest, false);
+setTimeout(doTest, 4000); // fallback for running outside reftest
+
+ ]]>
+ </script>
+ <rect width="100%" height="100%" fill="red"/>
+ <foreignObject width="100%" height="100%">
+ <div xmlns="http://www.w3.org/1999/xhtml" id="div"
+ style="display:none; background:lime; width:100%; height:100%;"/>
+ </foreignObject>
+</svg>
diff --git a/layout/reftests/svg/foreignObject-dynamic-abspos-01-ref.html b/layout/reftests/svg/foreignObject-dynamic-abspos-01-ref.html
new file mode 100644
index 0000000000..37bd9b6f14
--- /dev/null
+++ b/layout/reftests/svg/foreignObject-dynamic-abspos-01-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<div style="height: 100px">
+</div>
+<svg width="200" height="200" style="overflow: visible">
+ <foreignObject width="200" height="200">
+ <div id="x" style="position:absolute; top: 0; left: 0">
+ This is a test
+ </div>
+ </foreignObject>
+</svg>
diff --git a/layout/reftests/svg/foreignObject-dynamic-abspos-01.html b/layout/reftests/svg/foreignObject-dynamic-abspos-01.html
new file mode 100644
index 0000000000..583ba42031
--- /dev/null
+++ b/layout/reftests/svg/foreignObject-dynamic-abspos-01.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<div style="height: 100px">
+</div>
+<svg width="200" height="200" style="overflow: visible">
+ <foreignObject width="200" height="200">
+ <div id="x" style="position:absolute; top: 0; left: 0">
+ This is a test
+ </div>
+ </foreignObject>
+ <script>
+ document.body.offsetWidth;
+ var kid = document.getElementById("x");
+ var parent = kid.parentNode;
+ var nextSibling = kid.nextSibling;
+ parent.removeChild(kid);
+ parent.insertBefore(kid, nextSibling);
+ </script>
+</svg>
diff --git a/layout/reftests/svg/foreignObject-dynamic-fixedpos-01.html b/layout/reftests/svg/foreignObject-dynamic-fixedpos-01.html
new file mode 100644
index 0000000000..fd560c2263
--- /dev/null
+++ b/layout/reftests/svg/foreignObject-dynamic-fixedpos-01.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<div style="height: 100px">
+</div>
+<svg width="200" height="200" style="overflow: visible">
+ <foreignObject width="200" height="200">
+ <div id="x" style="position:fixed; top: 0; left: 0">
+ This is a test
+ </div>
+ </foreignObject>
+ <script>
+ document.body.offsetWidth;
+ var kid = document.getElementById("x");
+ var parent = kid.parentNode;
+ var nextSibling = kid.nextSibling;
+ parent.removeChild(kid);
+ parent.insertBefore(kid, nextSibling);
+ </script>
+</svg>
diff --git a/layout/reftests/svg/foreignObject-dynamic-line-height-01-ref.html b/layout/reftests/svg/foreignObject-dynamic-line-height-01-ref.html
new file mode 100644
index 0000000000..c69fbd2361
--- /dev/null
+++ b/layout/reftests/svg/foreignObject-dynamic-line-height-01-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+ <svg>
+ <foreignObject width="100" height="100" style="line-height: 3">
+ This is long text that wraps.
+ </foreignObject>
+ </svg>
+</htmml>
diff --git a/layout/reftests/svg/foreignObject-dynamic-line-height-01.html b/layout/reftests/svg/foreignObject-dynamic-line-height-01.html
new file mode 100644
index 0000000000..6eed65e7a3
--- /dev/null
+++ b/layout/reftests/svg/foreignObject-dynamic-line-height-01.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <svg>
+ <foreignObject width="100" height="100">
+ This is long text that wraps.
+ </foreignObject>
+ </svg>
+ <script>
+ onload = function() {
+ var obj = document.querySelector("foreignObject");
+ window.w = obj.getBoundingClientRect().width;
+ obj.style.lineHeight = 3;
+ document.documentElement.className = "";
+ }
+ </script>
+</htmml>
diff --git a/layout/reftests/svg/foreignObject-fixedpos-01.html b/layout/reftests/svg/foreignObject-fixedpos-01.html
new file mode 100644
index 0000000000..eee77e4da5
--- /dev/null
+++ b/layout/reftests/svg/foreignObject-fixedpos-01.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<div style="height: 100px">
+</div>
+<svg width="200" height="200" style="overflow: visible">
+ <foreignObject width="200" height="200">
+ <div id="x" style="position:fixed; top: 0; left: 0">
+ This is a test
+ </div>
+ </foreignObject>
+</svg>
diff --git a/layout/reftests/svg/foreignObject-fixedpos-02.html b/layout/reftests/svg/foreignObject-fixedpos-02.html
new file mode 100644
index 0000000000..c4047625c0
--- /dev/null
+++ b/layout/reftests/svg/foreignObject-fixedpos-02.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<div style="height: 100px">
+</div>
+<svg width="200" height="200" style="overflow: visible">
+ <foreignObject width="200" height="200">
+ <div id="x" style="position:fixed; top: 0; left: 0; width: 100px; height: 100px; background-color: red">
+ </div>
+ </foreignObject>
+</svg>
diff --git a/layout/reftests/svg/foreignObject-fixedpos-ref.html b/layout/reftests/svg/foreignObject-fixedpos-ref.html
new file mode 100644
index 0000000000..da29d249b4
--- /dev/null
+++ b/layout/reftests/svg/foreignObject-fixedpos-ref.html
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<div style="height: 100px">
+</div>
+<div style="top: 100px; width: 100px; height: 100px; background-color:red"></div>
diff --git a/layout/reftests/svg/foreignObject-form-no-theme.svg b/layout/reftests/svg/foreignObject-form-no-theme.svg
new file mode 100644
index 0000000000..8ee6bb71d3
--- /dev/null
+++ b/layout/reftests/svg/foreignObject-form-no-theme.svg
@@ -0,0 +1,14 @@
+<svg xmlns='http://www.w3.org/2000/svg' width='500' height='200'>
+ <foreignObject width='500' height='500'>
+ <div xmlns='http://www.w3.org/1999/xhtml'>
+ <button style='-moz-appearance:none'>this is a button inside of SVG</button>
+ <br/>
+ <select style='-moz-appearance:none'>
+ <option>This is a menu inside of SVG</option>
+ <option>a second menu option</option>
+ </select>
+ </div>
+ </foreignObject>
+</svg>
+
+<!-- Bug 686581 -->
diff --git a/layout/reftests/svg/foreignObject-form-theme-ref.html b/layout/reftests/svg/foreignObject-form-theme-ref.html
new file mode 100644
index 0000000000..6ef303e005
--- /dev/null
+++ b/layout/reftests/svg/foreignObject-form-theme-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE HTML>
+<html><head>
+ <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
+ <title>Testcase #2 for bug 686581</title>
+ <style type="text/css">
+
+ html,body {
+ color:black; background-color:white; font-size:16px; padding:0; margin:0;
+ }
+
+ </style>
+</head>
+<body>
+ <button>this is a button inside of SVG</button>
+ <br/>
+ <select>
+ <option>This is a menu inside of SVG</option>
+ <option>a second menu option</option>
+ </select>
+
+</body>
+</html>
diff --git a/layout/reftests/svg/foreignObject-form-theme.svg b/layout/reftests/svg/foreignObject-form-theme.svg
new file mode 100644
index 0000000000..d6e7190dd3
--- /dev/null
+++ b/layout/reftests/svg/foreignObject-form-theme.svg
@@ -0,0 +1,14 @@
+<svg xmlns='http://www.w3.org/2000/svg' width='500' height='200'>
+ <foreignObject width='500' height='500'>
+ <div xmlns='http://www.w3.org/1999/xhtml'>
+ <button style="-moz-appearance: button !important">this is a button inside of SVG</button>
+ <br/>
+ <select style="-moz-appearance: menulist !important">
+ <option>This is a menu inside of SVG</option>
+ <option>a second menu option</option>
+ </select>
+ </div>
+ </foreignObject>
+</svg>
+
+<!-- Bug 686581 -->
diff --git a/layout/reftests/svg/foreignObject-img-form-theme-ref.html b/layout/reftests/svg/foreignObject-img-form-theme-ref.html
new file mode 100644
index 0000000000..c78c1e0162
--- /dev/null
+++ b/layout/reftests/svg/foreignObject-img-form-theme-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE HTML>
+<html><head>
+ <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
+ <title>Testcase for bug 686581</title>
+ <style type="text/css">
+ html,body {
+ color:black; background-color:white; font-size:16px; padding:0; margin:0;
+ }
+ </style>
+</head>
+<body>
+
+<img src="foreignObject-form-no-theme.svg">
+
+</body>
+</html>
diff --git a/layout/reftests/svg/foreignObject-img-form-theme.html b/layout/reftests/svg/foreignObject-img-form-theme.html
new file mode 100644
index 0000000000..e7dac89993
--- /dev/null
+++ b/layout/reftests/svg/foreignObject-img-form-theme.html
@@ -0,0 +1,16 @@
+<!DOCTYPE HTML>
+<html><head>
+ <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
+ <title>Testcase for bug 686581</title>
+ <style type="text/css">
+ html,body {
+ color:black; background-color:white; font-size:16px; padding:0; margin:0;
+ }
+ </style>
+</head>
+<body>
+
+<img src="foreignObject-form-theme.svg">
+
+</body>
+</html>
diff --git a/layout/reftests/svg/foreignObject-img-helper.svg b/layout/reftests/svg/foreignObject-img-helper.svg
new file mode 100644
index 0000000000..dde74111ae
--- /dev/null
+++ b/layout/reftests/svg/foreignObject-img-helper.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
+ <foreignObject width="100" height="100">
+ <img xmlns="http://www.w3.org/1999/xhtml" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1%2B%2FAAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAAWdEVYdENyZWF0aW9uIFRpbWUAMTAvMjEvMTOQGbMAAAAC8HByVld4nO2a3UtUQRjGXz%2F6voluDDL73EAJQQIt9iKSlYqoDIpYWSUvbIOsVjOtVCzrRjEy0LUINy1zV9ouAisQyQsxRAu8iK4WCjZ2z8a6%2FQPR05xJ4Sx1UWzMHJh54GHPx3B%2B87wzZzgMO%2FfjzTfykQ8AgbwwQq0Y9beCiPChoxz%2BOy38%2BGV9Kab8PlBRObqLiLVr4m0zcTx4DbHRFkSHGhB70oTbFS4YhvFPvulyITbcgOjgBcQeX0Z8hPUr2Jyxn%2FVeYln38OwHmSM9J9Lufx5pxnyAtSnYj4maAn5tuL%2BJt19oLePnzhoPLrJzI%2BhlxzX8OfO9pzHf74XnnBtO817Ak3Ffzcxmdl4DVguzJn9bP9bfyqFPrxfazTr2uRG9dxKx%2FirE%2FVUwBjz%2Fzd2NxxkrDx4zc99RTPV4UFhawutVuIn478SpfN42wkzF%2B%2BAvJswOuNm9nZiu3bZ0vZS3XXYhM3%2Fm3cMZ9Y8EKzF4BlaL5jvdR1BNOXR2SURZAvWnHmm%2BJH7lL4vn59ojv8L8LFo4MLmWDjEL5qct4hLy24FPCue3x%2FxXnZ%2Bt7PyzA1%2B%2F%2F7Lnv%2BaTpO%2B%2FVZLzb5bMX2Gf8ZfCX22D%2FCsVrr%2FmE6Xvg4nl%2F74PJ4O%2FRunx13wuafs%2Fyb0zYRvk13zN13zN13zN13zN13wB%2FO%2FZb8My%2Bfk5cvn1ZTNS%2BbLHv01y%2FU0Nrbu1RdX6az5RItyJZYvm1%2B1yROIjV%2FBluBHx4FXh%2FMRYGxJjGwhmLXLF19%2FkG6HrPLtZA%2BH8UAusVo0v%2B%2F1L3K%2BG1arxvwZqYbVqfNnzb%2FHpeVitGj8VbobVqvFlz7%2FUeAeslslX8fsvNdkFq0Xzk686YbxoR3L8Bo45HBHh%2Baf7YLVq%2FGXt3pjX5fe5U8Lzv38Eq8XzA0i9G8Ti3EMkZx%2BI5398DqtV48te%2Fyp2bI9YrRqfaX26leNLnX%2Babxv%2B0v8%2FtLS0tLQUk17%2FtZRXJdWSl%2BpoK5XI7oqWBP0EUXzHivRvgJoAAABIbWtCRvreyv4AAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACmkM6EAADkmbWtUU3ic7X1Zd9tIki6muly2LHmr6tPzMC86Z%2B4992mqsXF7FElRUpcWNkHZcr34kCBR5pS8jCyrysOD%2F34jIjOxJBIgAHFzG1YVk8Sa%2BUXkF5GRkcDZL%2B27%2BcuBM5uP%2FJeDs9nc8HuDTqQY%2FPN8Np80GmajZfpXpx1vrvuvWfHqpOvNDV33j0%2BG7Mvg0PHmDdMfOJczOKB9BJfwPF3H%2F%2F3%2B6endvN2Hj87B8NNc29HGmqu90fraVHsP32batX9yfgZ7HsOe97DH0P4L9s60P%2BGIa3%2FQvRjjRQ%2FO6doHUGdr2vTb3ROsZ%2FsMKu9BQU1pO4d0kNOjfc4xFe1T2tj%2BhYrOOb%2FAYY9%2BD4Z0UK9Nv3oDKs7ZRqc%2Fm7fqfnvIdg7Z1YcOu8kZux4rTg6wludYK93vXhizeRMKEy%2FTvbCo6MFGEwqTFRYWfi5k%2Fl2FjLavHcDWW%2Fj9X%2FDtGsqR9gn2TNaJmXFPzIxVYbbLMTvSbgCXj9pb2HerTTOxsRk20wxsdCU2rhvDRs%2FAxm0ybCyzMDqGzeAZMXhGDJ4mg6fJ4Gn6Tv9XuMvYdxxe9i8AtdoINvAv%2BQB8wQHsaB9AuT4AjKBaoHTRI6NgwoUJTbOWheYoB5qSpmWhKWnaaLm9kyCs1xUQOv022%2BOwMgrpIw5pm%2FrjTHM5oM84oA6A6YEu7msD%2BPYZtk0W9lolloZnL7ffWm7Jfjsq2m%2FTMNrjGB3D9htSt1PY%2B35V%2FbaAHSiAjb4abJ4lsLmn%2FizZUm4eob1EDyutPXLfKqI%2FG%2B5bgtK7hM5b0o24BkX2kD5N4fed9uWrZCAjbhtrDKYag2nEYBoxmNSWLy9MobJlwWRuN0xLVKadAKUP0NVu12jCMh0C1y7Zz3QGjc6g0Rk0OoNGZ9DoOaF5mtLPiLeLq8%2FGLVmW8tQYQjWGUC0nQs%2BVCA0Bnxn46tcLGHtbO5m19E6mxqlLdn%2F81eJklsRpj%2BN0AFpyA9a9DZ%2BfERdpzDcEnP4ESvrMBi2ZGFlKkGh3KkhGi8NkjrMGfjTEKzv0U7pIJoPKZFDZDCqbQWWzkZ9htuJDP2wKjVtgQxEwH3Ew89k9VIIIjHU7D45C2Zp2ARQn93Qz82AIXSQXhk85hh3A6JpCML8F4YYvkp1EHN%2FB9w%2Fah%2BwADTeUhpXbWTd0u7ilrOkMR%2BIDRNLLGj3HbaXZzI2l1eTjaMuYFMYuWwcbEwZd02XITZdkPPUs42mWdC%2FyQVYWoH9C153hUTGA7BoDyBhLuiWifzrDyM3qpKgWi3WL%2BnAEpzp3w0ipVgBUUreCjlq2gw5g75g66PtMNTNay9Wz5Q4XV6NnP3CMXoE9vVWi05BUTHI6skbTeGoMH3Pj%2BFB8j4Ko7QTp7wZ4vSWP3gWNGSXizkV8EDVmFEhN53zXLK5VgQdSMxluhunmtp%2FGNDdyzF7CF9MrAJ3oiB2CDK1ldkhCgo3aolA2CbeGWxw3m4eZR1zdrImdG7byfNYWQWdupfMj%2BTAeCCuCItmChcMEwppQRO8sJ4r1Kfc4SOkOefR%2BqSgOADxzOoUv7aQxyKd9ffI1bhdPPkra59k5HDXPLgGbMKVc%2BagTL1%2F3UOUcMYBAW8pGEuJLrFvTl4FCLXcCiNGCfCFbGvdUhjQT52q%2FFwGXxlmLwM3nqKixJUyxY4%2BXrpIELgGHujn2mJIGKDPc2dDCGRwnKDMd0YeB3zLSfl8QCWgyOFsMTnLWInDq9w2%2B2QxN1rGRtprc7aORMuKJs4MIqJkBaI2H4MDBYhGBFoO0zjGtc1DrHFVGjgLV2BydANNTx3zT1TPfaNctrp0lfEChnEk0c2inZaq0s86R5ECm4Rh0%2FRSlFEzao0QEnGgZYuBOip%2Bfkiv5lvafEeOCmmo3me6jq4zGmBneY2iKShj0JbmP9cQcfFQZQ2uO%2BJI1b04L4PkwRp3vlzvRlzOWpS8nwSMvfFGw5JSFbLCisXdUuHTVS%2BHIIp3aqE3zhLDWrHttEcFKH7tkY3fMO%2B510IFl7ESyB41CyGDrMQvDxi4JC6OrKJGcorxBq9FKsYtC9QOH6kKRouYAJGhBcOr9Ux6lEsE8ERc1RtP7xkU5MDXJ9MaRwY7qUH5fuqWo86lTmkK1WIngwBCb0KHSopJcF0x7GQxQboFtcDCVULIRKvx2A%2FxwkmfE5w2zu%2BVIOTzJY2on06yAlTtSDo2DwUlmODTFccmJILmDyZyiwQXvuP1BiLI3YujKg5ks9WzTPBoOYhbNEI2KmguBLfrJi1TTklRTONliAENmPeETGjmCDriVZol4zzWbDFhyVw4YaIgvgXhMlEsgGotV9EUEQxweYp7NWtQVh6051NXkoLqmpK8THslhA9EFGgu8wGBtclybDFiXZxO6HFi3KbuIpKjii1qH2RcxTERlJn8StZkNHHOq80%2FqUBqfq8qn4I2SCp7LG%2BLDHm8kzaRw8rXHMf22VfotyFcWRI1nHtR46gGU8ek9NoAcMPp1Blz3%2BW%2FUecNT6vwTDvQr0ucpD4NQgqc0FMqXFyTNnwaGP980M8YhC%2FqcgcITv98rdqlMnQ0CIeFoiJwp8WVwETGBOsNaygBdjHERl97jLoQXdyG80ZJo%2Br6ulRpbUxUHYT59lD2C8Ic8PZhfT%2FNFlMymigmYl79ELRVjdksE2Gv5lVTto1oqICn1OC05WRXxGHBv9YP2TvLFML%2F7vebhxA4uJlCBaNRsBmI9roqjAppYV2KoqzBkYY4yU%2FwCwXiGvMkhpNKikvXeOu%2B%2Bsu6lgxYOAP4HzNGIDFL2AKBWdrKwgNIxwxPxsAoE1sFIKYNuuL3Ht%2FfYdnKtREqE0eCc2GBmSJgf8lePmX3Kh6ngwteEZzYXxjtxrpi7wDPPGg1u0MfKHELJnCu5MG0slRbCjM%2F4IG6Eo5MYuC%2BGj%2BVhZiujpVJGafZfrY16fvTIBUjCN7YXR4AD%2BCRlRJvPtNHkQyn8whyi5pQ7RPilL7q1I1RxIMw2Gwbkw1RMd%2FfQ51QhOrZj3r4gxCKj00x9JAxVkXX18J5jaqkwdZtqD7PFgx8tHgxu1cMOPhCh33bYsUUoOCWN7BIAe0%2B2%2BjOFRoQT%2FzcO5Uty2F3KXPxEa9cwuoRLifZpyg3z9LMnKpWhYTbpmzfobi0erbpx5SU7nhyr2oXCANwXsnhSI5SkunxOiI9dmf5y4GPeJlFuxNNvxh39ggIRJswCxtjXjsil%2BiN7Mk5JG%2FlS%2BwTyxmLecJW0YUxVKm7kAt5sKsIEx8wNLQLZk8DT%2FEAk%2B1b7KCaJs4FbXgJulso2lTlp6PBGgDOLhP7SgGNWykl6THmV7gK231LPX7QqZxlKV8s%2FdpeUrrXY1IsJNsnXXJLK7QXe%2BVvKhMFw%2FTSRmiaDVi8bzjPyh%2BCDcbhVLz4rKcaKi5awHoshzXFySLMIuheB8b6mrMiiETz1FOT92Y6ShiIhvJFa9ab5I%2FaySVcqnzAtgyAOl%2FSEFkH6ILQZJRLZGkWgy8F3daV7DgOR0hZ6Wb32acRQ%2FElBiX0KYBQ2FZQfVGAhQgCfvXh4XfqJBjh%2BztF5Kb7jNhSZBDQzSRvEF%2BHH9PnIB5vIYsSRoZAcK85LAIFbuXoCSOQeKT1Nq9WMB%2FE9pSar50Wk9A5Xrckqr15%2BIEAYvudufTR8zLgCGtioMfQxtun3Trt38150Ba5HInAoJjeLLAr0CPpzemDAOxLKZeoeLoQeg6DHun%2BPNb13SBrbG3TpkMGA7TtmxRUWfi86lmMV4gt%2BMZQgVSm65zJ1T7kqmaxKUBwFNXoB9XGDB1BM%2BGDnNvI8hU%2BBe%2BnyKSfUUFf7HThDPK6id%2FQSgD%2FvsIufwPejPj6FpScesoL%2F%2FMguQ%2Bxi%2F1B2R69xn37%2F6xglLyF2wW%2BCzo%2BJbpeLrkMLkVzozNcK8Q04iEmNiu4pJz6Lic%2BqxFdCfE%2B5%2BAYAkAuNxljKb5IQnwaiUh1zmeOYcoIdMcGOKsGWEOzjoF%2FiBAE6M9HxnBeZPBD7LjP2lROgzQRoVwK8R89kgril0NuNgE3qmepjLnMccy%2FKNYxKsiUkG7pfI3oAWJjF7PHpKbH9MmV7OanVmNRqldDuIbQ%2BuZtuZKG1x4crYvtlyvZyQmswoTUqod1DaD0CZhLAIoQTbr9M2V5OaE0mtGYltBJCe8KFdsjXs34k0ov6L0%2B4mFRHXC48opxIW0ykrUqkJUT6kIu0TUkCn4K5by9YtXMT9EF5azlxuUxcbiWuEuLaCQaF2HPYE33k8Xy4Rx7Ph3vKiW7CRDepRHcPi%2FeKkj%2BnCYsXbr9M2V5OaFMmtGkltHuM1fthiDsYFDwO%2FMjovsuMfeUE6DEBerGK7QXaNNXGWpck8pYi8GKeU2iPvP9ywf5ylTR49BjLrhEBttc1Y7%2Bs2C879mvIBHBEQfEy2rrDtdWhh7bcUXtCLa2rVKNltfRWTDX0n82m2Gub%2BBffa9fE3nFtbI2N%2BN662Fmnf%2FGdjeDUyRT%2FlBrZ1PEv2Tm%2Bvuovr0%2Fei7sCxgpZbBF3CWLJrtxi7sp3nS3B6Rvi%2BFI4PeY4RZ5kAfsW8AvrSWkdFLtKXD%2BiHbRel7Un0kHxxIaX1kHZjVMAbcB%2FOfllq6u%2FYX14xvUBUzA%2FUB7RrXbB16%2F%2BtrjvmC19VGultdHNzTH5rrMlfWdAK83alEK0ECF2d3W1Wro%2BNnOzcJ7rbIk2MYSOaAkEHpvEysrXRv3nWlhFemdIWu1VNL2qm2wYZeEh4h4cDMc9RFtVqVbDrhujeKOtAJHxpOnW4jubwd66a04NNY1NvcnYnSRx30wVNiyVpxGpjDEUSLlFSc1Xmihdt5qymQlNlK6brVEjzURB56%2BnmijVqY2MUw25Rrks7FZXf8N68ZzrxSFl6lIuGqWdBuy4SDdM3XJlwgrBNcathjFOA9eY2p5dSwG3Ppq6upEGbvLChlyjXLqx1dXfEt3gLMHt5mvyytnaiwUWU5h%2BpTHLcBngn1KCq7rJhnHeDWIqH3kGET7P%2Bt2inqdyFczozsS4IcJbowxSk50MMHYR0NI8EFGdXN1ue%2Bu%2BYV14IfW5SG9b5Kf%2BHNZlDCCN0rrExIPd8Z0t%2BczMnrfkGy0xrnzY697ND3uR6dQp4X5C%2BdZo39rweUdPyGR4%2F0iSwL73LlgixY6n2CZ%2FO8hh37mbdzuH%2BPELjSQONY9WnmNvPdE%2B8UWCM%2F5qg27nJRz1Pe%2FJU9%2BPnLsbO%2FeMHtVyonX5Of9Xm2sN2lvXDPjTNVP7L%2Fjuwhb8htsm9Dq9JmxrwB6d%2Fmp0ZAM%2BDdiDv%2FzYXXfClmtD7QsyDb%2Fjv2l67MjHkSNf0SIUwIQf%2Bx3WKHb0k8jRIsvqhkVvgnMaWk065xCuCuN3egACLUSHkrIOUur0hF4Y%2BBtFAMQrkt7TeZ%2BCM6zYGXv08LRP2u%2Bpx8t3CJ%2F51%2BVPaBlR8orA6S8kDRmr8KyghpHjLanlO1CbaxoXTRNSMGNHPosceUa5pLf8BSMzGlGJswzpLLZMLabpIcvwsx5q%2Fwn4e1xz4i16Squx%2F%2BCjYuwbk8T5O3C%2BHvmzNE%2FC8phim9lX8CJ%2F8hV26QrXPKasqn%2FkbOlMh9adTagVqjMjNZewO%2BRvOQAt0XoUp03eW257UiMc0uU%2FQBJj7b9ZL%2BfnPoDaon%2F9KcEIbZLaLfUfhzTvNrV%2FvhArX%2FmRN6kaK5%2B5E5wp92v5yP8HSPwO9e%2BRFKYU4b%2Fh0riAe1yD7rKnG70DnfxAPf4GtkWZ7RKOP2crAPlddiM8vB9hYiLuApy9wzn7V%2Bp7v8I9fqsYumLolTO0VTF0xdAVQxdg6IhXXTF0xdArZ2iZayuGrhi6YmgVQz9O%2BtAwAq04uuLoVXO0XXF0xdEVR%2Bfg6Iecowe0jK6KcVTsvHp2rlXsXLFzxc4FYhwDQA3vh32uYuiKoVfN0PWKoSuGrhi6gP%2BMj9MEpCp2rth55ewsc0XFzhU7f8vsrNDkKvMupd9XnF1l3lWcXXH2Kjg71M77cPa3l3lXMfQ2MHSVeVcxdMXQRRj628m8qxh6Gxi6yryrGLpi6DwM%2FS1m3lUcvQ0cXWXeVRxdcXQejv62Mu8qdt4Gdq4y7yp2rti5SIzj28m8qxh6Gxi6yryrGLpi6CL%2B87eReVex8zawc5V5V7Fzxc4hO3fhKNT%2FiDyD52Azdg7fRvAmdtR62XoE%2FNbSbPibwPWaS2HrbC2WdXAkZYA9jp29KM86eix7QmPILrbEDdFj03SukdGSJEdagEBtLbon9Gk%2FpitFdU94BtyqfHO6VpdGEcvTtWZhXUNvxPyKte0p17ao3ZE90Udc3zCvGOzGv7wvakkak%2B6LynmvX68nKrej8kQrT7S4J2pIfbvyRNP5eS%2FkU2DoCNr3YOgB3GFGiP5rM7Tsa1YMXTF0xdBVrGC5DP0k5FNtksnRz2JS3Kd2sTfAXEfGbXuxVX%2BbixbUOAd7xL7I0Q34s%2BF4wdYWfMM3HGH9hN40id89GvchZ98vWlBTaGEVLUj6ByptKaN7z8iuXFM%2Fil1N%2Bxn%2FEhq4WIvGWgsk6cIn2u4p2XybeFpoEcYGUIc80DEhdzy6Cb9R9yZwvL8GJBe1PVqD%2F4C2tuEeHtWAWaY3cK8bsk5oy%2F6A37dB%2FbBP%2Fm9wpwfU9n38jF31gTaS9Og7aHtcix5pk5wRhgewN9s%2BEcuX0JLHMZ0T%2B9bLTiYxTxP0A9pNTIT6ghpUnp3yeH11SR6LPTI5FzSvL5Nmi1djKe019DC13sQ1cA%2B4dAIexmdqz34EGaZ7P0TXrZfgownoSA3kj1rTovEGWrcJyFUegzQDNkLrh3ZvAv%2BjX9haCx%2FFW7oi9imE%2Fd%2FgrjfByIDrufZ3ua%2BUthUWoIzojqmnMj%2BjBdgbsT6N%2BydwFZ3sic7liDKskczWIZtiSMR771hx5hu6%2BgdA%2Fn3ANcmxkytdPc9Zm9KVHRhDCnb7VFojkKVt2O%2BRPjAf1AAEa4ream60t6raG%2FcxP5Gkbmj89Ybz8Bv4%2FZs2TpV4%2FJy3XG%2FiZ%2F2FGE22ShPSrNucd3oSOT7%2FXXZgP2LwDj7l6xs5Wz9NjY5ktT48K3%2Fr0%2B%2BU1vrsu8itj14%2F3vrnKa3%2FTRNv%2FkwbE6chIJ%2Bpqt9TBQqL7vhMiUSeu%2B3G0EjeR47oqBEZa%2By9e%2BrayTiGNYyfp6rfEwUa2Xd7qsRi8Z0ex5CQ72FsBTu%2F0I7pnYd%2FBx8SozKfieXwPmhhlmO%2FJ4H9NrfOfudpf1ymb%2Bn4PBYXe23ymnnOfE6jz%2BKewR6ccU3HBiM%2BSU%2FUEbrN%2BQYdQueO2rgcbZsG2mZtnbap2hvXLrKdhP0HbUY%2B3if%2FqA%2BAHvWHd%2FOr0w6%2Bp%2FM1K%2Fxwm1mrsa34xU9cE%2BORy7zmXsjrS73urmDJpV51U9q9C%2Fs%2FU9R7P%2BoT3tv7NQLv19467zetzZUHXHnAlQdcecDb5wE%2FDrfAXsaG12uOYU%2FIC7EpQu1S5HpEuQ4tKYaNXs0olg9Bc8uUWTldC7%2Br0Yre90HqfLYqhv0Q6vKR5qKxZl8CXUrmIuxE5tvRD57EtTUm8wdwVXy26TQi5R55E2xelmVnlLHEHuWk6CAJxB2trkdzVOFcqE6WGOWxWUusbvE6elwS%2Fec8HiqeMrvPPYQDuPJHnGcqIQmTZGBSzxnRyNKF0qZZxKhPVKOZnnw5RKuRxOLWr0Mq3wdz30wm4e8yvcCAfR7ZHjvwR8XYa5v80bCVm8B4R%2FyGo8%2BozslMu6Jom1uMtqq9m8D9uXYE9fpMcZMZzYXuBzVbzgyEHozBrK2TwuLWR%2BvwV%2FLRokcLT%2B2GfPkR5Rl8Duaxf4QW%2FUwWMP2vvhGpPyW5iTjb%2FSVeA4k1yVbUAZE62XqPzxDb1AM98tQMymupUX4LZrWit9%2BkI0Zr8sqyW74iWcRGZ%2B8i94%2FqTzKPpSX5dX9NPTc9v0X295KaMOB6i9HOZfR9ZGCLcrkYA5t0%2FSZpAs5L10gTsId7pAsT8k5sYgOPer%2B7Jk3IavnqNeHHgDHw%2FnFNkKPX3wFCcV34KfXs%2F4FypF3HRgnfIc8u0IQ97VcNn8n6bgla0OJr2JAB6kFM2SQ7jOvbxsQHyBh1GsuNiQs8Gt2ZNIZD33MdWpDe6tVrwHM4ht27qPRfKM%2FMK%2FmHPGPthnLK3wdrH%2BNbi0vdJWuOYzzMNGMjPrYuITnia2zU7sttXYcNVqO%2BF996L%2B%2FXoHxQj6JLLE%2BrRb2wkfC7RH7fpvBPb%2FXmJPEM6vme1p%2BwPftBlmJZFoyPRuwtHo0savvqufAnYrywBm8oEvqJVv8vw7POur6KcWsS4%2F4t4%2FzbrLVLUrznnObqcFZZ9P8Dsnr74Z7S%2BjYlzdEpV3dMcTaXdMoiq%2BvyERh%2B1mhFksj%2BRVs7JYuNPtl6%2Bn9aq%2BP2cURHvYH7iKPySesn5ZmfeSnneK97rv%2BhxtYdxjPExXPjzglF1K51x9bXvdYwnj%2B9%2FCcTyXnneVYbGtIZi1Ybon9VLLs9ueqgWnEo5s6qFYff4orDdaz5%2Bj5l7YSai8VzYI4Jsw8VD9%2BTh%2BVztoGHZb2rWLhi4X89Fm7mZuF1rGZLY%2BEfAOVr8uon0D9FvjW2iV3thrQIpbEfO1Lm5R3q718UPj7KvUXjG8xCaBXOOjEpZoV826KRVZ1i1mHWSZNGVjir0dKiK3Lxf4%2BOXc%2F8Rh7UVj%2Ba34W7ivuly6JFkX8rhy78sBGpezSDafNYmctj161ILilbh62DXmx2HfYPX5F8f6Qsmy9cK9lq6S%2Fw3eYIYjbsYTAmPqP2k1d1jzmpJlnuKcmFxaWbNFMZjUvXKf%2FFotlI%2FGS%2FsZzQtvVkBSTbu46IRBGZRD0%2BnDNh1nJTsmmtjVmz2r1tMnomzXIPqY14x831odrankmR3fZ1yOonylibaWxuw4FWzvg39N%2FRt4tK61GYdbhi%2BTRAKg2amW%2FQDD1%2B1smrqZFtW4d8kq1dh0R2CfspZc%2BiBy7yccUq%2FT757LfUq99q7NmeOLK7o%2F4WbVHS%2F8gXDUj3%2FRfJFmeMpjSi8Whkj%2FN6UzpDyHZEfkiDeprOn8Jgcq%2BlBXtwFn49a%2FyL4Bitz%2Ffkt7qRqAHPXfHPHBCi%2Fyt99g%2BGd%2FN253Q29zyd%2Fvk99ov99tv9QOI7NAfyBmrEvOBZIO1%2Fhz0Y3cFe0oftf3JOP6DoxQy2st47ovmCiT%2FoXozncO2D8xkVzmxuTZt%2Bu3symxt%2B%2B%2BwMKgAFbB75beeQDnJ6tM85pqJ9Shvbv1DROecXOOzR78GQDuq1WTGgjedso9OfzVt1vz1s09Yhu%2FrQYTc5Y9djxcnBGM44x1rpfvfCmM2bUJh4me6FRUUPNppQmKywsPB7IWaPaLbyTfhUn8AP8xJzE5epezhePVbnHmtlDytrwi9qV2%2FQpUMGA7bvmBVXWPjDq%2FbdnN34AQwYGX2%2FB0X45W7%2Bqg%2FHNHX%2FmJdD51e4Hkh%2BeAKtGJ50Z%2FOGN7E90p3hVW85F%2FIPr%2Fp3897ZEJvQOR1g0T%2BllvQPSDFPSTf6uAsv0h%2Fy3xcok4P%2BKSscbPTBQYd%2BHXSpcOAyUziyiycc4UV1%2Fx%2F9f87mNSwd9vOCFX08%2F6h3gsU%2FHDxmBOUh%2BznEy%2F3DaROwp31C9Bwrd%2BSc4rZT5xKLLitOHZJAxznD0w47Djbm%2FLWDv04d%2BnU8JMU6HjIC7RIJY3f%2Fg0pK0vavenTs1RnVfzigy8GZWFx1SSUPe1dwAc0%2FP7Pv5vAxm9d9KjxWGKzQpQLKHh4P6lPzqQBSP3d0di3H4KXJS4vKw%2FMOHjc8oB437L%2FC4gobYvid9iUd02mT1nXaB7S1e0C%2Fumd389Pe0JvrP9f84UWffRmc8C3tC%2F7F71wRxP7ZOVTv7LxL1%2FT7R%2Bc0EOtrIzJu%2B2CCTs5IYP2TU1bgof8HKNckx1Wn8EAP6MailI0DGmB2KcyAFNSD77itS0TegX1tOPKAvuOw6tSBGvsnp0y4r0HSpwevgR5%2FOcINlwPSuVPeS19BlcbExSPyIW%2F801OC6Myh4846dJnuCSlA5xQp4RAv2fkFtx%2Be4r18%2F%2BUJtPklO8j3E%2FfT%2Bf0ehvchIKL30tm9jIL38o8G3bv50cUVrmY9unhNhQO%2FrDqUr1kpLAPaAzijC3b6qEv3POr%2BEtl11D3GftF9iTe6cIinLhzSA7%2Ff7cBtB8TmLwdnjK06kWLwT%2Bjbk0bDbLRMP77K9tVJ16P%2Bf4xqg18Gh443b5j%2BwLkkkj7qiGogS2DTc5msxyqTtU7DpN%2FTMOklDFNlzFeE2S7HjJnEj7RQEcPNWdjYDJtpBja6EhvXjWGjZ2DjNhk2llkYHcNm8IwYPCMGT5PB02TwNH2nD0beHfuOw0s0rCYYUcfhX%2FIB%2BIIDGK7wY88xjR4ZBRMuTGiatSw0RznQlDQtC01J00bL7Z0EYb2ugNDpt9keh5VRSB9xSNvUH8HhDwIWDFAxVbevDXiSz2Rhr1ViaXj2cvut5Zbst6Oi%2FTYNoz2O0TENxSZ8YPV%2BVf22gB0ogI2%2BGmyeJbC5p%2F4s2VJuHqG9RA8rrT1y3yqiPxvuW4LSu4TOW9KNuAZF9pA%2BsZHOl6%2BSgYy4bawxmGoMphGDacRgUlu%2BvDCFypYFk7ndMC1RmXYClD7QrP76TFimQ%2BDaJfuZzqDRGTQ6g0Zn0OgMGj0nNE9T%2BhnxdnH12bgly1KeGkOoxhCq5UTouRKhIYVnP1JA%2BWvsZNbSO5kapy7Z%2FfFXi5NZEqc9jtMBaAl7AeMNJby%2FlcZ8GNL%2FU2OP2ltES5YSJNqdCpLR4jCZ46yBHw3xyg79lC6SyaAyGVQ2g8pmUNls5GeYrfjQD5tC4xbYUATMRxzMfHYPlSACY93Og6NQtqZdAMXJPd3MPBhCF8mF4VOOYYdmvdhTGkW44YtkJ9sUVsbMuw%2FZARpuKA0rt7Nu6HZxS1nTGY7EB4iklzV6jttKs5kbS6vJx9GWMSmMXbYONiYMuqbLkJsuyXjqWcbTLOle5IOsLED%2FhK7LJnujANk1BpAxlnRLRP90hpGb1UlRLRbrFvXhCE517oaRUq0AqKRuBR21bAcd0GQ2dtD3mWpmtJarZ8sdLq5Gz37gGOEUy60SnYakYpLTkTWaxlNj%2BJgbx4fiexREbSdIfzfAiy2UdCmdQY47F%2FFB1JhRIDWd812zuFYFHkjNZLgZppvbfhrT3MgxewlfTK8AdKIjdoJJ2OyQhAQbtUWhbBJuDbc4bjYPM4%2B4ulkTOzds5fmsLYLO3ErnR%2FJhPBBWBEWyBQuHCYQ1oYjeWU4U61PucZDSHfLo%2FVJRHAB45nQKX9pJY5BP%2B%2FpsZc%2FiyUdJ%2Bzw7h6Pm2SVgE6aUKx914uXrHqqcIwYQaEvZSEJ8iXVr%2BjJQqOVOAPENTY5%2FCB498CjgxbeUBPV7EXBpnLUI3HyOihpbwhQ79njpKkngEnCom2OPKWmAMsOdDS2cwXGCMtMRfRj4LSPt9wWRgCaDs8XgJGctAqd%2B3%2BCbzdBkHRtpq8ndPhopI544O8iyo9IBrfEQHDhYLCLQYpDWOaZ1Dmqdo8rIUaAam6MTYHrqmG%2B6euYb7brFtbOEDyiUM4lmDu20TJV21jmSHMg0HIOun6KUgkl7lIhwSxnIM%2B2jFD8PVw3u85z%2F3ykrJ8t9dJXRGDPDewxNUQmDviT3sZ6Yg48qY2jNEV%2By5s1pATwfxqjz%2FXIn%2BnLGsvTlJHjkhS8KlpyykA1WNPaOCpeueikcWaRTG7VpnhDWmnWvLSJY6WOXbOyOeccNXzsiYyeSPWgUQgZbj1kYNnZJWBhdRYnkFOUNWo1Wil0Uqh84VBeKFDWHrwB%2FT2vRciiVCOaJuKgxmt43LsqBqUmmN44MdlSH8vvSLUWdT53SFKrFSgQHhtiEDpUWleS6YNoL5jQbXmAbHEwllGyECr%2FdAD%2BxRiSpWjKCI%2BXwJI%2BpnUyzAlbuSDk0DgYnmeHQFMclJ4LkDiZzigYXvOP2ByHK3oihKw9mstSTvYQQBzGLZohGRc2FwBb95EWqaUmqKZxsMYAhs57wCY0cQQfcSrNEvOeaTQYsuSsHDDTEl0A8JsolEI3FKvoiguEHWpCyvx51xWFrDnU1OaiuKenrhEdy2EB0gcYCLzBYmxzXJgPW5dmELgfWbcouIimq%2BKLWYfZFDBNRmcmfRG1mA8ec6vyTOpTG56ryKXijpILn8ob4sMcbSTMpnHztcUy%2FbZV%2BC%2FKVBVHjmQc1nnoAZXx6jw0gB4x%2BnQHXff4bdd7wlDr%2FhAP9ij1%2BgYdBoq%2FAeBR4AXnygqT508Dw55tmxjhkQZ8zUHji93vFLpWps0EgJBwNkTMlvgwuIiZQZ1hLGaCLMS7i0nvchfDiLoQ3WhJN39e1UmNrquIgzKePskcQ%2FpCnB%2FPrab6IktlUMQHz8peopWLMbokAey2%2Fkqp9VEsFJKUepyUnqyIeA%2B6tftDeSb4Ye6IRrlhE8zZTgWjUbAZiPa6KowKaWFdiqKswZGGOMlP8AsF4hrzJIaTSopL13jrvvrLupYMWDgDYg4jpwU6ZelcrO1lYQOmY4Yl4WAUC62CklEE33N7j23tsO7lWIiXCaHBObDAzJMwP%2BavHzD7lw1Rw4WvCM5sL4504V8xd4JlnjQY36GNlDqFkzpVcmDaWSgthxmd8EDfC0UkM3BfDx%2FIws5XRUimjNPuv1kY9P3rkAiThG9uLI8ABfJIyos1n2mjyoRR%2BYQ5Rc8odIvzSF93aEao4EGabDQPyYSqmu3v07HgFomM75u0LQiwyOs3UR8JQFVlXD%2B85ppYKU7ep9jBbPPjR4sHgVj3s4AMR%2Bm2HHVuEglPSyPDhyu%2B18AW34WMHGJTscQEuZS5%2B4q87Eg%2BP6LNFywsmKpWhYTbpmzfobi0erbpx5SU7nhyr2oXCANwXsnhSI5SkunxOiI9dmf5y4GPeJlFuxNNvxh39ggIRJswCxtgPnlWWORmnpI18qX0CeWMxb7hK2jCmKhU3cgFvNhVhgmPmhhaB7EngaX4gkn1LL6n7tHA9obG8BNwslW0qc9LQ4Y0AZxYJ%2FaUBx6yUk%2FSY8iode3DjdY5VOctQulr%2BsbukdK3Fpl5MsEm%2B5pJUbi%2Fwzt%2Byp4%2FQE0zk1DQZtHrZcJ6RPwQfjMOtevFZSTFWXLSE9VgMaY6TQ5pF0L0IjPc1ZUUWjeCppyDvz3aUNBQJ4Y3UqjfNH7GXTbpS%2BYRpGQRxuKQntAjSB6HNKJHI1igCXQ6%2BqyvdcxiIlLbQy%2Bq1TyOG4k8KSuxTAKOwqaD8oAILEQL47MXD69JPNMDxc47OS%2FEdt6HIJKCZSdogvgg%2Fps9HPthEFiOODIXkWHFeAgjcytUTQCL3SOlpWq1mPIjvKTVZPS8ipXe4ak1WefXyAwHC8D1366PhY8YV0MBGjaGPsU2%2Fd9q9m2%2FdQ5R60bEcqxBf8IuhBKlK0T2XqXvKVclkVYLiKKjRC6iPGzyAYsIHO7eR5yl8CtxLl085oYa62u%2FAGeJxFb2jlwA8PvAHL34C34%2FwqT3wvRN5QFhklyF2sX8ou6PXuE%2B%2F%2F3WMkpcQu%2BA3QefHRLfLRdehhUguPQY8Kb7Ii%2Bwk8UX3lBOfxcRnVeIrIb6nXHwD%2Fsw79o7HuBCfBqJSHXOZ45hygh0xwY4qwZYQ7OOgX%2BIEAToz0fGcF5k8EPsuM%2FaVE6DNBGhXArxHzxTvrPhAfhKHTeqZ6mMucxxzL8o1jEqyJSQbul8jegBYmMXs8ekpsf0yZXs5qdWY1GqV0O4htD65m25kobXHhyti%2B2XK9nJCazChNSqh3UNoPQImfFuDEE64%2FTJlezmhNZnQmpXQSgjtCRfaIV%2FP%2BpFIL%2Bq%2FPOFiUh1xufCIciJtMZG2KpGWEOlDLtI2JQl8Cua%2BvWDVzk3QB%2BWt5cTlMnG5lbhKiGsnGBRiz2FP9JHH8%2BEeeTwf7iknugkT3aQS3T0s3iuNPf5atnjh9suU7eWENmVCm1ZCu8dYvR%2BGuINBwePAj4zuu8zYV06AHhOgF6vYXqBN%2BGzuLknkLUXgxTyn0B55%2F%2BWC%2FeUqafDoMZZdI%2FqOha4Z%2B2XFftmxX0MmgCMKipfR1h2urQ49tIU9ZD7U0rpKNVpWS2%2FFVEP%2F2WyKvbaJf%2FG9dk3sHdfG1tiI762LnXX6F9%2FZCE6dTPFPqZFNHf%2BSnePrq%2F7y%2BuS9uCtgrJDFFnGXIJbsyi3mrnzX2RKcviGOL4XTY45T5EkWsG8Bv7CelNZBsavE9SPaQet1WXsiHRRPbHhpHZTdOAXQBvyXk1%2B2uvob1odnXB8wBfMD5RHdahd8%2Fepvi%2FuO2dJHtVZaG93cHJPvOlvSdwa00qxNKUQLEeIvZlJWq6XrYzM3C%2Be5zpZoE0PoiJZA4LFJrKx8bcQXzgRVpHeGpNVeRdOrusmGURYeYofeL%2FZR8hBtVaVaDbtujOKNtgJExpOmW4vvbAZ76645NdQ0NvUmY3eSxH0zVdiwVJ5GpDLGUCDlFiU1X2midN1qymYmNFG6brZGjTQTBZ2%2FnmqiVKc2Mk415BrlsrBbXf0N68VzrheHlKlLuWiUdhqw4yLdMHXLlQkrBNcYtxrGOA1cY2p7di0F3Ppo6upGGrjJCxtyjXLpxlZXf0t0g7MEt5uvyStnay8WWExh%2BpXGLMNlgH9KCa7qJhvGeTeIqXzkGUT4POt3i3qeylUwozsT44YIb40ySE12MsDYRUBL80BEdXJ1u%2B2t%2B4Z14YXU5yK9bZGf%2BnNYlzGANErrEhMPdsd3tuQzM3vekm%2B0xLjyYa97N4%2B8V%2FgJ9ac32gnlW6N9C94SzvH%2BkSSBfe9dsESKHU%2BxTf52kHLvFP6e9%2BSibxRu0N46vT0Y3xSMb%2B52YYsZvFEYX6fXhG0NeqOwTi%2BrxCMb8GnAHvzlx%2B66E3k%2F%2BlD7gkzD7%2Fhv%2BCbfyJGPI0e%2BokUogEn8vb%2BRo6PvXRdZVjcsehOc09Bq0jniHdP4AARaiE5vIwbPI6VOT%2BiFgb9RBEC8Iuk9nfcpOMOKnbFHD0%2F7pP2eerx8h%2FCZf13%2BhJYRJa8InP5C0pCxCs8Kahg53pJavgO1uaZx0TQhBTN25LPIkWeUS3rLXzAyoxGVOMuQzmLL1GKaHrIMP%2Buh9p%2F0tmqmOfEWPaXV2H%2FwUTH2jUni%2FB04X4%2F8WZonYXlMsc3sK3iRP%2FkKu3SFax5TVtU%2FcrZ0pkPrzibUCtWZkZpL2B3ytxyAlmg9itMm7y23PakRDunyHyCJsfbfrJcvfMd4m6R2S%2F3HIc27Te2fL8TKV37kTarGymfuBGfK%2FVo%2BcjXvH9%2BN8PB%2BhIn92LvgF3P2DufsX6nv%2FQr3%2BK1i6IqhV87QVsXQFUNXDF2AoSNedcXQFUOvnKFlrq0YumLoiqFVDP046UPDCLTi6IqjV83RdsXRFUdXHJ2Dox9yjh7QMroqxlGx8%2BrZuVaxc8XOFTsXiHEMADW8H%2Fa5iqErhl41Q9crhq4YumLoAv4zPk4TkKrYuWLnlbOzzBUVO1fs%2FC2zs0KTq8y7lH5fcXaVeVdxdsXZq%2BDsUDvvw9nfXuZdxdDbwNBV5l3F0BVDF2HobyfzrmLobWDoKvOuYuiKofMw9LeYeVdx9DZwdJV5V3F0xdF5OPrbyryr2Hkb2LnKvKvYuWLnIjGObyfzrmLobWDoKvOuYuiKoYv4z99G5l3FztvAzlXmXcXOFTuH7NyFo1D%2FI%2FIMnoPN2Dl8G8Gb2FHrZesR8FtLs%2BFvAtdrLoWts7VY1sGRlAH2OHb2ojzr6LHsCY0hu9gSN0SPTdO5RkZLkhxpAQK1teie0Kf9mK4U1T3hGXCr8s3pWl0aRSxP15qFdQ29EfMr1ranXNuidkf2RB9xfcO8YrAb%2F%2FK%2BqCVpTLovKue9fr2eqNyOyhOtPNHinqgh9e3KE03n572QT4GhI2jfg6EHcIcZIfqvzdCyr1kxdMXQFUNXsYLlMvSTkE%2B1SSZHP4tJcZ%2Faxd4Acx0Zt%2B3FVv1tLlpQ4xzsEfsiRzfgz4bjBVtb8A3fcIT1E3rTJH73aNyHnH2%2FaEFNoYVVtCDpH6i0pYzuPSO7ck39KHY17Wf8S2jgYi0aay2QpAufaLunZPNt4mmhRRgbQB3yQMeE3PHoJvxG3ZvA8f4akFzU9mgN%2FgPa2oZ7eFQDZpnewL1uyDqhLfsDft8G9cM%2B%2Bb%2FBnR5Q2%2FfxM3bVB9pI0qPvoO1xLXqkTXJGGB7A3mz7RCxfQksex3RO7FsvO5nEPE3QD2g3MRHqC2pQeXbK4%2FXVJXks9sjkXNC8vkyaLV6NpbTX0MPUehPXwD3g0gl4GJ%2BpPfsRZJju%2FRBdt16CjyagIzWQP2pNi8YbaN0mIFd5DNIM2AitH9q9CfyPfmFrLXwUb%2BmK2KcQ9n%2BDu94EIwOu59rf5b5S2lZYgDKiO6aeyvyMFmBvxPo07p%2FAVXSyJzqXI8qwRjJbh2yKIRHvvWPFmW%2Fo6h8A%2BfcB1yTHTq509TxnbUpXdmAMKdjtU2mNQJa2Yb9H%2BsB8UAMQrCl6q7nR3qpqb9zH%2FESSuqHx1xvOw2%2Fg92%2FaOFXi8XPecr2Jn%2FUXYjTZKk1Is25z3ulJ5Pj8d9mB%2FYjBO%2FiUr2%2FkbP00NTqS1frwrPytT79TWuuz7yK3Pnr9eOufp7T%2BN028%2BTNtTJyGgHymqn5PFSgsuuMzJRJ57rYbQyN5Hzmio0ZkrLH37qlrJ%2BMY1jB%2Bnqp%2BTxRoZN%2FtqRKLxXd6HENCvoexFez8Qjumdx7%2BHXxIjMp8JpbD%2B6CFWY79ngT229w6%2B52n%2FXGZvqXj81hc7LXJa%2BY58zmNPot7BntwxjUdG4z4JD1RR%2Bg25xt0CJ07auNytG0aaJu1ddqmam9cu8h2EvYftBn5eJ%2F8oz4AetQf3s2vTjv4ns7XrPDDbWatxrbiFz9xTYxHLvOaeyGvL%2FW6u4Ill3rVTWn3Luz%2FTFHv%2FahPeG%2Fv1wi8X3vrvN%2B0NlcecOUBVx5w5QFvnwf8ONwCexkbXq85hj0hL8SmCLVLkesR5Tq0pBg2ejWjWD4EzS1TZuV0LfyuRit63wep89mqGPZDqMtHmovGmn0JdCmZi7ATmW9HP3gS19aYzB%2FAVfHZptOIlHvkTbB5WZadUcYSe5STooMkEHe0uh7NUYVzoTpZYpTHZi2xusXr6HFJ9J%2FzeKh4yuw%2B9xAO4MofcZ6phCRMkoFJPWdEI0sXSptmEaM%2BUY1mevLlEK1GEotbvw6pfB%2FMfTOZhL%2FL9AID9nlke%2BzAHxVjr23yR8NWbgLjHfEbjj6jOicz7YqibW4x2qr2bgL359oR1OszxU1mNBe6H9RsOTMQejAGs7ZOCotbH63DX8lHix4tPLUb8uVHlGfwOZjH%2FhFa9DNZwPS%2F%2Bkak%2FpTkJuJs95d4DSTWJFtRB0TqZOs9PkNsUw%2F0yFMzKK%2BlRvktmNWK3n6TjhitySvLbvmKZBEbnb2L3D%2BqP8k8lpbk1%2F019dz0%2FBbZ30tqwoDrLUY7l9H3kYEtyuViDGzS9ZukCTgvXSNNwB7ukS5MyDuxiQ086v3umjQhq%2BWr14QfA8bA%2B8c1QY5efwcIxXXhp9Sz%2FwfKkXYdGyV8hzy7QBP2tF81fCbruyVoQYuvYUMGqAcxZZPsMK5vGxMfIGPUaSw3Ji7waHRn0hgOfc91aEF6q1evAc%2FhGHbvotJ%2FoTwzr%2BQf8oy1G8opfx%2BsfYxvLS51l6w5jvEw04yN%2BNi6hOSIr7FRuy%2B3dR02WI36Xnzrvbxfg%2FJBPYousTytFvXCRsLvEvl9m8I%2FvdWbk8QzqOd7Wn%2FC9uwHWYplWTA%2BGrG3eDSyqO2r58KfiPHCGryhSOgnWv2%2FDM866%2Foqxq1JjPu3jPNvs9YuSfGec5qrw1ll0f8PyOrth3tK69uUNEenXN0xxdlc0imLrK7LR2D4WaMVSSL7F23tlCw2%2BmTr6f9prY7bxxEd9QbuI47KJ62flGd%2B5qWc473uuf6HGlt3GM8QF8%2BNOycUUbvWHVtf91rDeP708p9MJOed51ltaEhnLFptiP5Vsez25KqDasWhmDurVhx%2BiysO17Hm6%2FuUtRNqLhbPgTkmzD5UPHxPHpbP2QYelvWuYuGKhf%2F1WLiZm4XXsZotjYV%2FAJSvyaufQP8U%2BdbYJna1G9IilMZ%2B7EiZl3eov39R%2BPgo9xaNbzALoVU468SkmBXybYtGVnWKWYdZJ00aWeGsRkuLrsjF%2Fz06dj3zG3lQW%2F1ofhfuKu6XLosWRf6tHLrww0ak7tEMps1jZS6PXbciuaRsHbYOerHZddg%2FfEXy%2FZGybL5wrWSrpb%2FAd5sjiNmwh8GY%2BIzaT17VPeakmmS5pyQXFpdu0kxlNC5dp%2FwXi2Yj8ZP9xnJC29aTFZBs7zoiEkVkEvX4cM6EWctNyaa1NmbNave2yeiZNMs9pDbiHTfXh2preyZFdtvXIaufKGNtprG5DQdaOePf0H9H3y4qrUdh1uGK5dMAqTRoZr5BM%2FT4WSevpka2bR3ySbZ2HRLZJeynlD2LHrjIxxWr9Pvks99Sr36rsWd74sjujvpbtEVJ%2FyNfNCDd918kW5wxmtKIxqORPc7rTekMIdsR%2BSEN6mk6fwqDyb2WFuzBWfj1rPEvgmO0Pt%2BT3%2BpGogY8d8XvHwzv5u3O6WzueTr983vsF%2Fvtt%2FuBlHdo3uMN1IJ5vrNAwv8OezCigz2jD9v%2F5Dx%2BQBGLGWxlPXZEcwQTf9C9GM%2Fh2gfnMyqc2dyaNv1292Q2N%2Fz22RlUAArYPPLbziEd5PRon3NMRfuUNrZ%2FoaJzzi9w2KPfgyEd1GuzYkAbz9lGpz%2Bbt%2Bp%2Be9imrUN29aHDbnLGrseKk4MxnHGOtdL97oUxmzehMPEy3QuLih5sNKEwWWFh4fdCzB7RDOWb8Ek%2Bge%2FlJeYjLlP3cLx6rM491soeVtaEX9Su3qBLhwwGbN8xK66w8IdX7bs5u%2FEDGCQyyn7vnzm%2F3M1f9eGYpu4f83Lo%2FArXA8kPT6AVw5PubN7wJrZH%2BjK86i3nQv7hVf9u3jsbYhM6pwMs%2BqfUkv4BHA4%2FSDf6uAsv0h%2Fy3xcok4P%2BKSscbPTBQYd%2BHXSpcOAyUziyiycc4UV1%2Fx%2F9f87mNSwd9vOCFX08%2F6h3gsU%2FHDxmBOUh%2BznEy%2F3DaROwp31C9Bwrd%2BSc4rZT5xKLLitOHZJAxznD0w47Djbm%2FLWDv04d%2BnU8JMU6HjLS7BLxYhf%2Fg0pKzPavenTs1RnVfzigy8GZWFx1SSUPe1dwAc0%2FP7Pv5vAxm9d9KjxWGKzQpQLKHh4P6lPzqQAiP3d0di3H4KXJS4vKw%2FMOHjc8oB437L%2FC4gobYvid9iUd02mT1nXaB7S1e0C%2Fumd389Pe0JvrP9f84UWffRmc8C3tC%2F7F71wRxP7ZOVTv7LxL1%2FT7R%2Bc0%2BOprIzJo%2B2B2Ts5IYP2TU1bgof%2BHyLhGZG3TtDWa4g4%2BDpMGlVh2KaRr8bR8nY7DY3AAWgNyqgNVN0FKUGP%2F9DWI%2BPTgNfDiL0d4m8sBkzYPXp9Cfb5o7JFBINlTwuWMacRZh%2FSye0JS75wiDxzi5Tq%2F4O7DU7yB7788gYa%2BZAf5fuJeBr%2FXDpiNKVDrfnjP2P0Mdj%2B94P38oy6Y2KPuMWpy9yUeceEQs1w4JDn%2F%2FwPpjvxPed4eZQAAAL5ta0JTeJxdTssOgjAQ7M3f8BMAg8BRyqthqwZqBG9obMJVkyZms%2F9uy8ODc5nJzM5mZJ0aLBo%2Bok8dcI0e9TNdRaYxCPdUCaXRjwJq8laj4%2FYy2oO0tC29gKAHg3DoDaZ1ebfxpQFHcJRvZBsGbGAf9mQvtmU%2ByXYKOdgSz12T187IQRoUsvwZ3amYNs30t%2FDc2dmeR5UTw4NUexsx9kgJ%2B1GJbMRIJzqKadGDjp6r3sWPcNVhGCdEmToYpAVfuh5fpkOx3EUAAAR5bWtCVPrOyv4AfzjFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB4nO2aiW3rMBAFXUgaSSEpJI2kkBSSRlKIPzb4YzxsSNmxZPiaBwx0kOKxy0Mitd8rpZRSSimllFJK%2Fdf39%2Ff%2B6%2BtrSoXfg7Iel0z7EulfU1Wf3W435fPzc%2F%2F6%2Bvpzfst1px5V1i1Vvn95eTnYY%2Bv0r630%2F%2Fv7%2By9Kdax6P6P%2FafvP4P%2BZPj4%2BftoAcwFto64rjHbBdYXVkfgVzr1ZmnXMOLO0%2BrN1ThnSP6RXUD7KMUpzpIpXaVb%2F5%2FyR%2FV91S%2FBFH%2F%2BJz7iIL3KczPmjwohf4ppnS5VXXdexnpnNRVke8mNsyvMsW6afVJxZG0i7VL7P4P8Otpv5%2F%2B3t7fCOiH14pvfHTCN9QZsgvNLinPZH%2FJ5WHcs3vJeRXvd9PpNp0p66si3nHPjo%2Fp9p5v%2FsO32eTEr4sOxY7SbHVMpQ9zP9VN4jr%2FTfqB1n%2F67wSh8f1vlsDiAeZeT9J%2B89itb4P4XNmG%2Fp5%2FlugO2xYfbr7Jv0vXw3GI0V%2BT6a%2FT%2FHkPRVliXLO6vvEo%2BirfyPL%2FFt9rWeTn8v6ONJjrXZ92bzUdaD%2FHp7yPE802TM6TbpZJlu%2BTvor9rK%2F6WyUb4Dlm37e3v3Ne0k%2FcD7BGnRpnjmFP9nPMYk8iLNXr4lPer8r5RSSimlnlOX2ufNdO9lL%2FnWlOsgl7BhfRvNvmv699RftfZ5tT%2BsOdSayWzNeo3S%2F31tI7%2FzR9%2F8S2shrJv082soyznqR%2FzjMbu%2FlN7oepbXLK1RvybubM1pVua%2Fiv2y3PsjX9Y88pz2wjO5zp5tJPdeOWcNl3s5JrB3sya82zrLmeuJdY%2F1Ztaa%2BrpShfc61r1MK21Xx%2FQZkFdeox6nxHol90mXve6lMp%2Bj7pdsb6P%2Bz1obtmY%2Fvms09le83Mct6COs860JP1Yv7JdjXv%2B3IfchEHsZdcy1yrRVptnzGtm3%2FxNBnNH9kf9HZT5Hff4%2Fxf8Zf%2Fb%2BkHbinL0Zjvgz%2F8lYE35qvfqcl3sC%2BHpUp%2FRBt09ez%2FLKsNE%2BE%2FezP3OdeY%2FKfK628H%2FfRymfUKY8LzHWMX4yltGe14afUi%2FCGDf4jwAb074Qc233fx9zco%2FymP%2F5fyLzKPX73f%2BzMp%2BrY%2F7PuR079H6SdS318Sl9g7%2BIyzy2Vfgxu2cYtuT9OudhxnDiYue0NXud%2BDP3KI%2BVg39r8SFtJ23KntnI%2F6Myn%2FMuyH5b1il9R9%2FOumKP0VhF3Eyv59f92fvBmnDCluqVYdSDuaT7N%2Bfy0TcYz%2FfnRnn1MNpA34tMGxM%2F856Vufe1S2hpvUA9vvS%2FUkoppZRSSimllFJKXU07EREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREZE75B%2BHl45qN6ZdJgAAAVNta0JU%2Bs7K%2FgB%2FVYkAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHic7dbhaYNgFIZRB3ERB3EQF3EQB3ERB7G8gQu3piH%2FignngUObT%2FvrTWzOU5IkSZIkSZIkSZIkSZIkSZIkSR%2FRcRznvu9P5znLtXf3v7pP929d13Mcx3OapsfP7Bj9LPfUvXUWy7I8XscwDH%2B%2Bh3TvsmOVfbNhdq3N%2Bz21f9U3v%2F6N7l%2B263tWOeuf5XqdffvG2b%2B6XtP9y3O%2B71%2F%2F1%2Bd5fto%2F1%2Bz%2FfWXbeu7X79u2%2FfrM9%2Be%2F%2Fb%2Bv%2Bh7X96v3QK7Vd%2FucRdWfHddrkiRJkiRJkiRJ%2BvcGAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD4QD8K%2Bay4PVSpiAAADtdta0JU%2Bs7K%2FgB%2Fn3gAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHic7Z2NkRwpDIUdiBNxIA7EiTgQB%2BJEHMhe6eo%2B17tnSUDPz%2F5Yr2pqZ7tpEBII0IOel5fBYDAYDAaDwWAwGAwGg8HgP%2Fz69evl58%2Bff3ziOveq5%2BJzpawAZfj3wf9R6fmK%2FjN8%2F%2F795dOnT3984jr3Mnz58uXfzy6%2Bffv2O%2B%2BwN2UE9PtHRtT7tJ6Vnk%2F1vwI20f6u9l%2F1Ufp2laaT1%2B3f%2BZ1dVPKs5ARdGr1epcuuZ%2B28ez5wauereuvsH%2BVr33W5tG97HpoPeQWq%2Fq95ZfWO%2B58%2Ff%2F73e%2Bgt0v348eP3vXiGuqgvC0Q6vR7pM0T%2BnibyiLy5F2WrXkgX1%2FV56qBpIy9PRx30evyNz6r%2Fx9%2BvX7%2F%2Bfu4KOvtzTWXR8iNNlM8zWZ8jPfcy%2B7sMUZ7bCJvH39CZponvjFtccz1FGp3zOLR9RT6kRxfIqelU7vigC9qyyh3XVB%2BqZy2f8X3X%2FvrMFaz8f1Zm1v%2Fpf528gcz%2B6m%2BoU1Z37Bx6Vn3RLuKDL9A%2BqH6BPFZydrpAPsohP%2FcVVZ39%2BZDPy98Z%2F%2B8xF7jF%2Fug8%2BiP17uSl%2FpX9fR3iwLbYPf5GWyB%2F%2Fvd%2Bhqz0UdqLQvOhTpku8LcuK%2B2RuV5lf2TU5738TG8rW1zFLfanHWu77%2BQNZPZXf4fvzfoofd39j%2Bo27nHd%2FSS%2BI7M%2FetA2lulC06nNaRfI7%2FbHP%2FJM%2FOUZzTeuIeMz7E9fUX3QnwF19e%2FqbxnfHJoemelb%2Bj2epQ90a6XIi%2Fv4TcD%2FkcbvISd9LwP1xodkutByMvnJX8dD%2Bof%2F77Ko%2FDqXqfTpuh0MBoPBYDAYDDo495fdf83yb8E9uIQrOC3zNH3F257CY%2BXEpVjPZHGBe2JV%2FurZFZ%2FWcZiPwqnOrui44m3vIavGtqtnKs6q8h9VXHq3%2FFv5tEdB5dY9E16nK3J18fx7tetMVuXV%2FP4J51WlPyn%2FVj6t0pPzhs4p%2Bh4F53iQhXycA1nprNKBxhW7Zx5pf%2FTjnFzFeWncXmPmVfrT8m%2Fh0yo9EaMLwLPC8yHzyv7E7VQWlbPTWaUDtT9yZvJn%2Fv%2FKHpoT%2B1ecl3PWyr1WHNlu%2BdT1Kp9W2R%2FuWPkj5RQ9%2F8xGyNz9f6oDz6uSf5crW6Eaq%2BBG9H7FeQVIq1xMl363%2FFv5tM5P0oejjGgP9DWe3bW%2Fjhme9lQHp%2Fa%2FFepv4BqUd698U2YXrvvcwdOflH8rn9bpKbO3zjsZF7TszEYB5RaztDs6eA3769jJx%2FfiKS%2BIT1POC3my61X6k%2FJv4dMy3s5lA8opVmUzJ3eulOeRZ0dnmY4970r%2Brl6DwWAwGAwGg8EKxL6I%2BZyCdSBrmFUsqksTc9sd%2Fuce2JE1gG4eWeauLPcG52JYd3sMfwXiH6y%2Fd9Ym3fr1mfsZM65R15SB%2BE6s8FFldtcfCY9dB6ivxre69q9nY0iv%2Bsue5xnuab2d94p77pf0zEGmM57p9El%2F8ziGx2iz8nfyymTM0nXXd8vI9LiDVRxJ9%2BRX53GUg%2FA4re7V1%2BdJoz4HnSuXo%2FFA5eyUD3CZ9BxRxZ%2Fh88hHY%2F5al6r8nfJcxqrM6vqOvMQbVcYTrOzfnbcEXczS%2BS%2F4Ou3%2F6MrPM2TnO8mrOmdCOchSnY3I9O98R1d%2BlZfu13cZqzKr6zvyZno8QcePkd%2BKZ%2BzsX%2Bl%2F52wR%2Bfqnyxd50P2Oz9L%2BnsXis%2FI9r52zhFWZ1fUdeTM9niAb%2F5Vb9DZf7fu52v8zXVX9X8vu7O8c9Kr%2Fa95d%2F6%2Fmf13%2F17KrMqvrO%2FLeav%2BAji0%2BhuGfdHzp%2BCuXaTX%2Bq9xu%2F4Ce4avOn2e6Ws1ZfDz1MU55xax8RTf%2Ba%2FqqzOr6jrz3sD%2F1rtb%2Fei9rm9zXPuQ8ms%2F%2FPY3OkX1On83luxiBzoX5ngEZ%2FD7ldeVXea1krMqsrq%2FSZHocDAaDwWAwGAwq6NxcP1c4wEejksvXHx8Bz%2BICWbv7HszVOoL90s9EFWer9mO%2BZzyLC8z2MiuyuIDu2dX9%2FyfrV7UVsTa9nnFu2J97ngdy6HXnIne4PNJUa%2FTOLpke9FygcqSVvm7lG0%2Fg%2B%2B%2FVPlXsj5gTfmOHI1Q%2Fo%2FErruueefbve7xR%2BcIsjyxenXFGHS9Yxft2OLou1qlnE%2BHXM33tyLjiAk9Q%2BX%2Fsjwx%2BbiXjaFUH3kc0Dqfn%2BChf%2B4VzbnxXfVRnJnheY%2Bv0kyxG7f2Ftsf5FbDD0a24DvKr9LUr44oLPMHK%2FyMrfS%2FjVXc4Qs5SaF%2FPyu%2Fk0Xy7MzMhD22Wclw3VTmMberfKHvF0Z1wnZm%2BdmXc5QJ30Olb%2B6z6eK%2FrDkeo77XM%2Br%2BO313%2F37E%2FZzv1LOdu39K9A9pvdzi6Xa6z0teV%2Fq%2FP32J%2F9%2F%2FI7uM%2F%2BsdPVum8Pfm4Wtlf887G%2Fx37oyO%2FdmX8P%2BHodrnOTl9Xxv%2Bds44VqvW%2Fct5ZTIDr2m87jhD5sJ%2FOMbNnsjlwVl6VR7V%2BPplbX%2BHodrhOT7dT9x0ZnxUzGAwGg8FgMBi8f8Dn6NrvUbiSt75b4x7vvtfYwAl2ZX9PXBRrXjgA1pSPqAN2PAHrWmJ6uq%2By2wdcAY7hFBpP7HCljq8FYha%2BbiR%2BFvB9rL4Ox2%2FoepUzGPHRmA1tS%2BML6KvjdlXGzv5dXrtptE66D97luFcdQfa7I7T3eI7rlKvpApHmat%2FKdMT17BwLcQuNszoHo7%2FPRT3QDXol1oXfcfkpQ2Px1VkBtUXF0e2kcZm0rsp5Ukf9LaErdQwoD0tcD%2FtorFDTESel3Cpe2KGyv16v7K%2Fxcdo9bRI9eXxL8%2FL4dsWrZfyJ21z9mHLIip00AbWfxx89jpvxe1fquPrdMdL7%2BwSdOz3dt%2BXyeBza6xNw%2BztvQD76m5TImOkGVFzUjv0rHkOxkwY9Ku%2BZyat8mL9H8EodT7hDyuUDV135lhV4jjEus5nvtaAPOV9Fn9CxqeINvf1W%2FXHH%2FgH1f8rjKXbSKOeo46DKkX3P7L9bR%2BUE8fkdd6icn%2B7HugId2%2FTjey3ig2%2F0vRzcUx1k15Vfy57vzteDyv74MuXUHTtpVCafdyrfznf6h7eZkzoG1Aa6p8fHZ9ettpNT%2Fk%2Bh4wdzzOzeao%2Fd6rrvJVqNW35fy69k6daut6TxsiudnNbx9LnMd13Z%2FzcYDAaDwWAw%2BLug6xhdz9xrHtntSYx1kL4rZadMXasS787Wgu8Bb0Fej%2Bew7js9R1Khsz%2BcAOl27K%2BxFtY7PPcW9HmCtyBvFo8kTu4xG%2Be0iD0636VQ7lbjFQGedZ%2BjPLTHIDwmq%2Fy%2F6jNLq3kTQ6m4GC8X%2BTSWoxxyxylpPbX%2BKi98zo5ekF3LUblO0J0xcY5HuQiNpXc%2Bw7l75ZXhCzxGqvXz843OwVb%2Bn3KyMr1u2d5sb%2F%2FYjdinx3yxbbZvm7YCJ%2BJxYuyt7aLTi8vucp1gZX%2Fs6mVmsf8Vj%2Bg2CjAHqGx6kp9zQd5fsryrGLDuD9J4N7HW7LejKu5VfY3urVKuJfMZK724v0OuE6z8v9tf5wm32p9%2BSVz9UfbXfrFrf%2FwGeanPI1%2B3%2F2pvB35EeVXlD8CuXqr6nmA1%2F6OecIy6B%2BUW%2B2u57odvtT86pBzVy679yUPHDrW57nfZyQd%2Frvyfy%2Bs%2BP9NLds%2FlOkG2%2FvN9RTq3yM5fq24cK3vR%2FnX%2Fwz3sr%2FO%2F6txyoLOb93HNk77Ms10%2BPv%2FLZNF9GCu9%2BPzP5Rp8TLyF9eLg9TD2%2F7sx%2FP5gMBgM7oVs%2FbeKZYC39K75jmc6ha7XuvG2ip2eYFfX9ywzy0%2FjP6u9kQFdl74FXDn7UIH41%2B5%2BzVuwo2tP%2Fwj7V%2Flp7EdjFX7GKeMIHcQtPJ4Od6a8Lv2PM3HMfZUP455%2FJ3aqdfB3JFaxkqxuGpPRduHyKLJysrrC%2F7iuNY7vMqm9iFM7V7iLyv9rjF%2FPS9HPlPOtOEIvB93BnWj56EXP1aAflyeLOep3P39LO9J4OvJ4G%2FC6BTyW7HxAtg%2FbY7PEz72uFYen%2BVb64HnixhUHu2N%2F9%2F9A25aOUx53zThCBxyV8nGuw%2B7%2FXfujFz2P6TIH9GyPQtNlNlZ9Zfb3uYieravyUv0ot9jpw8vh3glW%2Ft9lyvZaVByh64Q03fsf72F%2FZKKtZTIH3pL9K27xWfbP5n%2F4QvWXuo8Cn1RxhK5T%2FH%2FX%2FwO7%2Fg7flOk8m8Pv%2BH%2BtWybPPfx%2FZv%2BOW3yG%2F%2FcP9fdzsHruUOcpGUfo5ejZwap9e1rXhc4zq7OZbjfFav4XcPtX87%2FOd2bldPbvuEW%2Fd8%2F531vHvdc7g%2FeFsf9gbD8YDAaDwWAwGAwGg8FgMBgMBoPBYPD34RF70dn79JHBfhP%2FrPa9s8fS32kRYG9M9nmEPnVvqcPfaVxxiexL83x9%2FwjvANIP%2BzeeyVN2dTnNR%2Fft8ansr79jwr4j9tnpPrcsz2pv8K3yd3v11Yb6HhCH1hvdsodM%2BwT5PattV%2Bjq8sgydV%2Bk9o2s%2FzjYr5bl6Z9qb54%2Fu9obsmt%2F3stE%2Bvjf37Gh9n9tvIb9%2FXcH1D70ww7sI66gfanbyxbX9bdFOqzsT9uhTzs8%2F6z%2Fc538eZeb7qHUfZsB2pu%2Ba4l9fvqM7rHVfLVNkobvJzgZQ1QX%2Fq6hrG8rqFtXnvqCzPaMvfiGVZnkqe%2FvUZn1%2FXIn9ve97lznf60n55J0nFRZuM939IrMei5E86U9qNxXfNPJfnE9X6G%2BAHmqvk273PHn2dkBzcf3lq%2Fkx49r%2FgF0p%2B9iUz0y5vt8pdKxz3m0TtpffU%2Bv7mXX%2BZTmkb3bj%2Fbg%2FfB0TOCcUzafcWBD%2F%2B3Mahxm%2FbQzliPL6dywsz961TEL%2F%2BntSO2v%2Fl33mpPnif31XCLtV8vM3l3l86zK%2FvxPO74yJ0C%2B7ONAfnRHG878Orqr%2FKrne%2BXddYHK%2Fuo3AW0xixXomVFd31BXnR9W5xsy%2B1OujuV6Xc%2Blep%2FScx%2Bd%2FZHJ29cz0MVdducWke6q3N14d9Ke9N062pc%2B2nmKwWDwofEPiCRqoj90VfkAAAq1bWtCVPrOyv4Af69%2BAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB4nO2djZHbOAxGU0gaSSEpJI2kkBSSRlJIbpCbd%2FPuC0jJWa8d23gzntXqh6QIEqIAkPr5cxiGYRiGYRiGYRiGYXhJvn%2F%2F%2Ftvvx48f%2Fx27J1WOe5fh2fnw4cNvv69fv%2F6q99q%2BZ%2F1XOaoMw%2FuBvM%2Fi9vCW%2Frm7to7Vbyd%2FrkdXDXs%2BfvzY1tVK%2Fu7%2FbH%2F69OnX32%2Ffvv388uXLf%2Fqi9he1r%2FIpKi%2FO5RjnkU79XK7az7Hab%2FmTdp1baVpf1bFhz0rOnf4vOvl%2F%2Fvz51zb1T%2F8tuZQMkDkyYj%2FnVP7IFJnX%2FmwX9GvOJT%2B3E9oC5Rv27ORfMvL4r%2BjkzzHkQn%2B1DJFztRX3WeTHNeA%2BvjqGPgDKYz0x7NnJ%2F6z%2BT%2Fl37wzoeeRef6stINfatiz9zFjJ33oA6PuVnnXD0HNN%2BSPXklVd6z5IX%2FeYwHn4WZLHdroh24n1jOVfbcRpDP9SdeL%2Bc7QfXc1YnG0fp19n%2BylZWd4pD%2Fpt5l3XeSyXsqxt2iB6hjHJ6pphGIZhGIZheEUYx9%2BTR7DXp%2F%2Fzby%2FvWfLd%2Bh5c6mu6NvWueITL6O1qB8%2FmZ0id8Jb2vruW9%2FOd%2FM%2FY8Y98hnme93W%2BxC69lfz%2Fhv7zFlz%2B9LNhz8Omjk0m%2FXfp28MX5GvpI53PkPokP85d%2BQNN52%2BkjFyP%2Fci%2BLNsv7d%2FapZfytx%2FiUdtAyt9%2BNh9zPyl9ic4suSAbbL7s55z0C9hnWCAj7HYF51HntA%2BT9me3HdoM90KemRby7uzZmV7K33X0qOOBrv8DdWi94L5tP459e12M0C5%2ByH3Qdl%2F3%2F0o763jnb8xnSvbr9Fldkt6z639AtukDLuyrKZnhb3F%2FQ5b8v5M%2Ffd8%2BQMf7WJ%2FAzt%2BY8ict%2FADk08n%2FKL1XkT%2FP9vqbsrG8i%2FTF2xfn%2Bt7pBvSJ2wm6xboYdv7GlL%2FP6%2BRPnMqZ9FL%2BnNf5w%2F527FtLP1tBfaU%2FLf139u3ltdRt0dWR%2FX08R8hj5UuElb8xfYi8p3Xl8XjmTHreph4eVf7DMAzDMAzDUGNb7Jv8PD6%2FZ1w99oAZY78ftn3xs02%2Biwu9FX%2FD%2FMNnZ2fT6vzg1gnoDseE59zA9C1CXuvza19nP8zyoK9GP5yjs6sg%2F5Xd13YwfHzYjtAb2H89x6dIv1DG7ttn53Pst%2BMvx2gf2JHxSQ3HdP3cfhfXe5Hy5%2FpuXqd9gbbvWub4D7p5RJ7rl%2FPP7LfzNeiI6f%2FnWMl%2Fpf9XdvD0padPHRsp7SL7sWMwzhzLdlngk9jFCwz%2F51ry73x%2B4LlfJS%2FPBSzO9H9wXIDLybl5zrDnWvIv0MnpOy94hhfW4c5z9fxf6Qa3OT%2F%2FHatQzNyvNd27XO1bveN5fN7ZAhjD5%2FXEjTid1M%2Fd%2BJ9nAOT7v8vKsUx75D8MwzAMwzAM5xhf4GszvsDnhj60kuP4Ap8b29zGF%2Fh65BqryfgCX4Od%2FMcX%2BPxcU%2F7jC3w8rin%2FYnyBj8XK5ze%2BwGEYhmEYhmF4bi61lXTrhhxhfxI%2FbMT3XkPjld8RdmutrNi9I67g%2Fdx%2BZfuQ7in%2FtDM8M17XB9sbtrnCa%2FCsZGz5Y3%2FBJrdqSyubnOVvfyJl8vo8LuPKnmCbwepeKDN6zPLP9uh1Cp%2FBpmzbKza7%2Bt92tO6bPJmG1xDDr4cNvms3Xf8vbNNjG1tg%2FU%2Fa9vnQbn291%2BfymoSr7wuRR8rf646xBprXxHp0kBG4Xnbf5DIpfz87V23GcvU1nfwdb%2BRj9h%2Bzn%2F5Jeuw%2F%2Br6Yj5FP7vd6ePeMe7km2Mch%2B4VluXou%2Fqn8u%2F2d%2FNMX1MUi0a%2FR7aR%2F9A253TH8FNbz5MHxR2fX%2F%2B17K9KPA7eSf9cebPt3PAH9PX1H3b3s2kbGqJBe%2Bikf9Z2Btux6SR1w5Ee%2FlfwLr%2BNL7ACs1pzOe8172cnfZcjvC%2FuaR5V%2FkTEy6cfbra%2FPca%2BnmWl1bWYXl5M%2Bvy6%2F1f7dfayuzevynK5%2BnmHsPwzDMAzDMAywmlt1tL%2BbK%2FA3%2BFN2cazD7%2Bzm1q32ec6F5wodvT%2FegpF%2Fj30YtqHlnBpY%2Bed37cW2kdp2zD%2Ff5bDfqfD3RPD%2FgY%2F5WtuT8C1xL5Y%2F37PxPb%2FqPBHLzH62jJuHI%2F3f2eat%2F9nmuz6209lGa%2F%2BM2yJx%2Fvh6sAFyrb9R6G8JOcbEcqYs%2BIjuraduzVlbOxztp2%2FmOgEpf0APuC1g16ct2DeL%2FCh7zhux36%2BbU9Ltp936u0CvwrXl3%2FWfS%2BTvOR%2Fo7vzWoL%2FJuJN%2FPg86n27BM%2BkV5wpfW%2F9fKn%2FrbXSwY23sw0M%2B5HGk%2F1P%2BtI1Mk%2FgQxwg8sj%2FnEjxuoo%2FRr24h%2F8I%2BPffn3TzyvDbHfzv548er9HP89%2Bj%2B3GEYhmEYhmEYhnvgeMuMmVzFf96K3fvqcB1457Y%2FMNeLvBcj%2FzWe3%2BD4eubH0Y%2BZg2O%2FXaazsqF4Dl766myH8ryglQ%2FQxygT12b5sf86fh%2BfpsvT2aNeAWygaQ%2FFbuc1Gjmvs6kXnlfHz363XDsU2z92%2Fm6Ol%2B279ueSNmXMcqXf0f2%2F81ViU352%2Baf%2Bo16591UMTzdPKOl8Oyv5U8%2FpR%2FT8NHw%2F2GbtH7T%2F0Pe2Kj%2FHco6X91d%2BzzLPb8VO%2FpbZn8p%2Fpf9T%2Fjn%2F135kjmGr55jn8u7Wh9zJ320USIs29uxtwFj%2FW%2F%2FdSv6F%2FZB%2BznMu4xLaA3mc0f%2BQbYM02bZP3O3vFXxCHv%2BtZPye8vf4L%2Bf42QeY%2FsFiNf7byb%2FIef7d%2BO9V5D8MwzAMwzAMwzAMwzAMwzAMwzAMwzC8LsRQFpd%2BDwQf%2FirWzjFAR1zin7%2Fk3EvK8N4Q33JLWP%2BYtXMyf%2BKxKN%2Bl8ue6jkrr7LcWujiUjownPuKSWEDilrwOzlGs%2B1H9GmKj4Npx9I6d8nd4iQvsYvcpk7%2Fr7rhfykt8lY%2BRds4XIN7cMeeO1U28NhBrCGWfZS0yx5vv%2BjX5nzmX8x0%2FS16ORbqkfok58s%2BxUe%2Bxrlmu10a5OJbrfxEPTj%2Flfjs6PUo8l%2B%2Fb3%2F6hLex0APG6xJJ5TkHeG8fpZ7v%2BQ%2F6OCVzh%2B0794ljKS%2BqXcykn6V5L%2F2dcfuLnMn2bNu191LO%2Ft%2BHvKbke3G5dT7v7ct4dXhvM97Nqh36GIrfuex9w5rni%2BTI5d4A2lBzVL9AuHJ96LXbtOvsr%2Fcf%2Fo%2FOyTXveV5ce%2FY%2F7Slm5r1r3rcrqtaJgJbeMDe3SpGw5j4W8EueV7Z62mRzVr88jT89VeivowVX%2FPzvu%2FRP5c47n3GSafh528eBOt5uHRJ3nNyouWeerGyt2OtN5ZTv0%2BDjLfaZ%2B6f%2FdfIW3sivDkd6FTv45f6Pg3cB9lXtCxp4jdAav6ZjXeO6Q49Wtc49Yyb9rr4xTrB9W7Zv8L9Xnu3VKPW%2FqDEf9v%2FA8i9W7TCf%2Fo7LzTKzyOg%2FkRF2yNtxqrGadmfJnTJjrBHqdL68r2L1be46Z3x26cvDdQ%2FRNrlnXcaZ%2B4ehbuxx7j3mLvKOu8s15GgljBch6Qb%2Bn3vS79JHeO9Pud%2B%2BEq7GAxzmXrBN6yXN6V7%2BU%2B0iunPPs81aHYXgz%2FwCggvogrdejwgAAKhdta0JU%2Bs7K%2FgB%2F1PAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHic7X0ruOwo1vaSSCwSicQikUgkFhmJxCIjkVgkEhmJjYyMjI0smX9R%2B5zunp7p%2BdT%2F1Ihac%2Bk%2BVXvXCbAu77suVObnfTaeANqzkS3G10Zgh6PDAnBdxQVrAN%2BFfsPzYh3ggQoQAbYKG9CeJMF33ZPZsYTB8c18c%2FzxQ28AlZvdQSvVcTO2vmxPFRTgeJ1A4SjpMPBhua8rP%2FcJEqDcVCykX40DrzeBuHNcndvez5heQmwxKfxDEfOV0g8PK9Rr2yjuRnlOIjj1lmRQQ8xfORbI0j5PBjAmbKs0uI9JbSv%2B7utukHfu20cXj3LFsPiNmeABPFGqg3EJD9EUCSuvl7KFSJN9DPqhrsFlobcdf3GPua5%2BfoJbKS6jNWODiTYs1vq4xcDBgm0Onh0EdU%2Bg%2BO%2BoOXBc%2BNP9PC8bDy8%2FvPy3uE7EOhKek03CmwVwKbYVIBX2xJwtHNUeMnDAJw%2BHdUtxYAK%2BtM1ft%2BDa5sAf1S%2B4mfs2%2FDQdPH4AhQu0Hjc3U%2BobgcfhTt3VQlHX4dbt8%2BunqJR1TeD3e4%2BO%2BzXIJS5Cpk7JigsYazoYCWubTsC8bYE52A%2F85wIqp3WBVcV8MqiG2SU70e8RgZurHbhdRuFh15IpzwuqUkUlSFdjME1nA8Y%2Bu%2FgpL3RpaJNmmPXVCdG4WIY%2BysocqBLLRcvF8uMpFZbUPA8s6Tb2czTF4cB%2F1jWbeuBi8D%2Bkokof8OD2XBs8GU8cTSVPIyg35DbgOqcWPQmdqur904sHWUGj98KDSA22qwiQTKBzNpvOA02DWOrI%2BUJjWJ0mx5hKvRN0BGW7Lsr2EvyozwkzLhhqZSiUzz%2FUPD%2BdLTHpJHCdTwE9AP1%2FeBQaEowL%2F9r9CR9dPEp0wqG3VmebmmB8SSw85LiVfeBG8w5Ral3QbyVbUGHR%2FQGINv0YWBJZv8084ReqPxCoWW9oAIBGnhf8MDY34YGtHzZKRvGXR1vwhQV3dimazzc%2FLBzkQHeOCo0Gbk3gx6bdE23MBcprPj%2F16MlM2mrvD7MVPYDdD9old4NaiGl6RlR4BoEQ9IQkEYGva1D2OJtFt5Bt8vgJakFPmfHU1%2FregKueHD5%2B%2FpKG5dzg2IaRugbpQjn6teIJhgvWpAI4Va2rSxwOQ8N2tGpi6w9MC%2Bjl50O8Au%2BAea8FoQvnHo07pG0XagtQLtQFIJf44%2B9Ea%2FEVwup3%2FqFV%2F0XCwoAz9NyowZSRlZI4eOtVwIVKyvy5cxKPoxKJnlyEswgO6Mmfjis7Bn0HBHOtGEYQ4x1RKB5LSa3u96ZY3ZuExqgKuTELy%2Fr%2BK0uP%2BqjoZFiMH107SsSjju9jCIh4JJ2nRNHXt94PEJ6iE1hgadceIOyo69EQQGzMj%2FtybrBtJIGoxl7XOc6E73pCR8%2BeoFE9FcZuZhDka4RE6vasZTsKPKj9%2BBZh0%2Fw%2BLLXiop6basbva4cwQp9bcCj14iS%2FHQC6h8egkdv2zHD9NAxuyxnLcWCUWMaT%2BQn6ds%2B19ugY2S549UhujPuNb3KfSr6AzzWs8cHg%2F0jgHHWpifHq64eXjwtm4KcWDO3X12HsGJWGiVtaFxk6PjzHTUBKoznzAv0CrOIk03FdFQGhAH09SIUWDGsE0P4zxsoYuuOv%2BemyunS%2FUZM9f4IBLAk3xscGtd%2B7%2Fezq53MNxD6Q46Iz%2BLbv3tw2W6bRZ5WolwxSTI3Yjaqo%2BRGtPxe3KAyNJnfdLjdDI35CewiCXa%2FTCtfil1XUVwKyDDeZ0jF%2Famt%2BgmWUY0e7v3IWy8f5H9DjRNguGxI99MtLtNzu6wjFQN1X3cexTRID%2BzDlgJAD4%2Fvt6OS8MM5cBtryeH%2BQ8652z3HfTlqiCz4jBMYNg4SM4EJFlwmZpSmVgromedhBfXTlP0L76gtZ7G0owldJcOGBybHygPELuHy9Mpcr6P3gXDK39iDt3imQbNw4t9Z0bBgFHMFAWi5CvYCj7xgElWXxhYuNg1JT3%2FSBxoNtPmSYSYHp%2Fmz%2B9PInTg1hhmTEokczuSWNhrwjqyk%2F6LzPJAUBcx8c3wkDXzU9E7LtWRzHQlIjLWsicUdQLdBlEv4i52atwQjC4SXWqS3PkzMeN%2BrQ5MzIONRNOZkZgc%2BKGYosG6zo5F8qbjtIgsH6xkUWQsaxhh3WY2y%2FfvjO7rHnDcudW4OOL3Nhn2e4SRUXRQgy5Sx6A9Ix2hd0gRs6kmtMxtPnzsEGoc3tHMiZCA%2Flo4tHKeYc1HsSN8pv8MvFbmSo%2BKTot%2FDhlXtAcvVQmD4QxmvCd4xr172%2BoQsjuA9rWBdmeZES1kXH95rIQanNQsI5wnVNELDb3jRQPblfBNNskpDGZ1ePrtiH3U6VFNUjll9umYdH76RwA3ALLFqFHhL%2FVXWbNsiT98NWppvTsLjlMEVLkTcqfLf9GF2ve538NzVGXOnUtrv6elHYFaB6IeGCxwcJdRVIgD7u%2F%2FOmdXCastr29VTZo7tvM1ApiPi0W%2BBe1Tbj1trz42AgLZpkJhLhKj22JcTAymZZkjy%2FXpKD2LdgXzadqN%2FIfGgduMzrBTPYoT6AhDIgGVC6EPpx%2F9c3BxXPjrML%2FdUO%2FCxOc75qu0aZPUK1ivxgC6jtgbOVQ6fy9gRpjlWSKQFS6ZCPQEzF3wbSroSL%2F4kdArfHp21iPDITRkiTUnGwshzDuUa9HuXj%2BPdYHLppjeSOsvVPbaxHQf3dELf00n06tioavssTdQzEZgXYOh1AyqtSSJkuA%2FLZ74qwNsLxvLHDNo5qkOUBp2PmR09wTy0NEPqtNh1IF9L9%2BtzKf0udyUrm21XAzuwWOrpKx4O%2BnYr9yXY8Z3qO44zoBPEg8f8IMUYqcW2ZLTuTDUnyjRQANw0%2FA94e4k%2FsKFlyDdlkZccKz8lGBsoXDeWZCdL60aX%2FlnLF2EiWEB%2FLwWHsx8fboeilPhjGEAAsoZW4rzP%2FixtE7FoIi7lF8crGrgHScXHw7Ng3cBuBP7iDyIzeS6wGkPfFJQ7IpySBOw%2FivD8e%2FVGschiNNrNwUAM3YLxhmYa46V49hAeE%2FclS57ZfF4b1mbMpbaOExz7ARDMjHsKjDLxfJw3nSf7CHcmtdQ%2FNi0PByi1SjW4QZeOvhLOyz%2FMfc3OVwO5Mz8w8yK0vE7XgG1IpfEx0XzG76fLBPHX1fUUKRMh6bMLxJBRI0xEOK%2B9OCB1fFTLsv3MHYwHbry3yckiRVi6gGbOliPQa%2F87U1o8ngJHvjJmFKH0L4G8Jsu06Xeisp9s2p0ZobHexhrxAjNJ6xns2ulBfmT8MAbYNResb0t0Y0GizovbfuaODw3ai5kurDC%2F7QukiTdL%2Bsmg7wNfx8foX5wTQsaFvv%2BspZ1ICbSDDJKw1vywglEWDePwoP6o6E7ZnwFXrtYUXRrw0npnqwCAJ6OAWCPO137nDRTSMgQYhlrNxPxBs5JgHkPVBrvUOiJ8WWXa07nM6bVIeqihHB%2F%2BwWt952kdxhCt3MBEpTnr79ufhdYhZ9C3FJpWnj%2BjAIqJZEAk9J0mG%2Fc4dgzjwt%2BgYe7uZbYgbTC9%2BhLmPGYPCIf6Px%2Fv%2FLuNC767g2NHMQT2onvjnvLFZmcsMfHoE9PA6ZokbI8Ksf29ouTJYaoH4x7xJfDHW2GkzE0EofPmndhBmMcUDE6XWDU5LgIiaTMDNqxraLp%2Fr0%2Bs%2F0nLZXcNxQlOgXiNvFvL%2BLmyAJQR6AuLigYsNr8T3WdLjfmmI5JSDUK4AiHEQHut1JjcohAUc%2BVU7QgKhkmwgekbreNeOBrOBootNm%2FfL8gssfFBmDFb11qD2a4KRJ5tOuvRizJQvoSRFTpW5qgpIA0HXad77UQs9gnUtHy9U5lFBRDmTo6jSZ9XsV%2B3w4CVZWu%2BuXICf2mHUpaTjNZBPrWpyqA%2FL0fGp%2BHUiOePWQth6cIPMrNZ2bKWtbD0LgxCPHhXJuFns6Md5nxXcvjV0A%2F2FptIRC9dtRYOBep4r%2FKod700bsb6LPqhMv2vHPYtycgw0jQP57Oqn%2FBQvZ%2F0PmkXAchL%2BwH5QhhimbkLfW6CuXGdbFXuhq4eSZxqj41nbA3ZSn1cnG4aHCntGZbBtMe%2FeAYx7CwLdd74HA0z%2F1TuQHTeoJiSR5%2F54%2BmPa%2BMPQMJ8LgY6ebt32ifPtJhH62nXFQDVzQ%2BgUQ9WxbZzxHzhIGIPjZWbx77nGdAySzjxQSlr%2F9I6wQIOP75D5yNz%2F6B2huxY0nUt8ro8jYA4XfRdhn2sRUk7i%2F6Anl35JVSHCa%2FJXAYCBTIybWtf1RJgETkuVwaUF98yhVeMGDKOcz8T3%2Fd07tJpnzBLvTH5hKF3lr94hQmp26CjRZvLH9R%2Bjv7n0XLfzQuUFfZJBdUj3UqGkoBEGzgIA1Wfr95juGk0f7guoPDeHDE%2BLtzrI7cpb9202de129o7dxzszjua1Pcj87ncd6ad3jG4e6Puv%2F%2Fj6j5cEpKQzcEv%2Bzk2ipLalg6ire%2FMuAHQLriKhA%2FNudJoaPxPg641kafGwYsxDNrPzPbDKRQmzGaAerR7VDoUsgKUb0a5PyAqynPUwuWj%2BdofLRxePkjsePbrv9U1WJaUT9vebyqqIcvynAMDkwjSdSBgNHThy5NnUBkvsjYDJeLrtQRz0OsoyDdoRZcAuqawB192fME48Z53r5IP4mSeIpsruzTaj6YclwcNHzDHW1rdtfe6hXmqubu3SvdNT%2FTAMQ3oBi8ftTFiGM%2F2cyFWD9oRNO14F4v5eFX5YY7C9joABYQEa6HYDR0gFdSLh5w0xivNrTtdL%2FVSCPyyI2edygz3u3I6GWH02Q0IQVzbbuwCQRt8XqFzuM5ZtezQhXTn%2F4but19xKNG7pFNgTNUrTc4R3gtxeDKpEn%2FdoqA%2BCjfSMevaCu7aj3%2F04%2F5XgHFDrlF2Xep0X8PO6MbYbeKXifhcA%2FLVKOCNjviWBz74TrrdjRntk85cb3d8DHbq9bx33iEB3xTCJUXNQr%2BO5EppfFcyBziA%2FCDN5QjLEkHt8vv8FNbOnuId9yz54e3EoYb%2By29GCYaE%2FBYCO0P5RkyXyp8xswaz2NPSCpM%2BCeG1XSdeGgEftr6ZD6BrS9OwxEuoSkgjbEmvXUdb9jDNpSmgb3CzH%2F4D64%2FqJGku6mlKI98XE8KIVxMLI9shPAWD6yOeFyrK7ho88IfONWxCeuE532fS2YcTc%2BLaiWoCOwHiJXFJ0dpoB0l5aSu3dYVwoAcoeyFqZUEWWj%2Bv%2F7iAxipreowWhaI7g953seQYw91MAkEwhyHkOzVEDUA%2FMnhDtI1JA07EmNK9hnzkQAicyyQGexIvgtkkVrEXHOFjJ%2BEly1cQKNKgTlip5nv1iH89%2Fi8u80xovI4kNeLDd0dw7xjJSfhcAqosB9eIZ1uFPN8%2Ftomjvk9WYVY7zXginawT0DbuapeOnKOS%2BoCyliJ8yGIf81ynPQwf3OijZkDuXHFEzPr3%2BNOEp%2BiWI%2BdRiNu4XQjgB%2FVygFB%2BzAHC19ZrJ7KtlPOq67VPpuRCQgtjs2ivTanPwxHCMhLgI3yU8Jhl0ezM%2FjKMIrHxOBilwNxFimdQCf%2B7j6T%2FUYaRp5EQTtVdsCH%2BSFgGhvfCIWJefAsBa2j47dfidKaRrbwMpI1fhyM1Tmm6uY1K9ePSUe1vAc1h2MaSsOTWJEV%2BsGqwwS%2BkY9cEYihG21Zk32j6eAFRwoTWHi7jZtKRsGjOlU%2Fwi2J3qTO69iFiQ6oXnnatb4TVt9qH4Dgy6v1EAPSJ1ffaRxnDPmCp4jWL21Ym67uOX4yNpTSuz%2BUC7WiGQCf63z65%2BauDSWZTdrBUYkaG00iQePzWKlaBtBnTqdYhdIIcljkCO992FOg40aDjbg7iYobt0dewXM8A7%2BgrOkU%2BkMUEvcou%2FBL6ZBQobxhHPUio1wMf7%2F8vsadwmaiMEWR4yOrokWggoYa1k5kDfPid6Cp4UBoTXTBCsr7Os2wIX64e2qb02WpDRwDh8YBvGNt0iAuWMWAEx31%2BAD3oFJxAN7kYtqfe70Y%2F7P7D6WF4C8gtBOj8xCKIHO9jMaC9LGJ5WQif1Bwz8dk9uEh8ZzwRGU%2FKCvMkM9QbGpOqw78zeUXs9a2g3mcAXTeWvwHdYUflw%2FFx2782Tzk8v%2F7Yuxfba8bkK9I1OM7fNSEtS8MlsikuWIptxHQ%2FylB6JXlfcBLNogbwxd3T5HuOgC2hABwKnrNEz8GUSHzb%2BTnyWkhe2wamLSTt57o%2FzPx8DOHRbBoNb6SGRC%2FqltSQsH86uTK23ZZYijwV6puUlSd6GQepr3MwXEVLkbCEzdfo44NqBeRPf6z8TX55Xxem9KYNBYkPS9en1T%2Fkhcnq%2FhGGipDVTsc1u1pejs4gRI8IUPP00M3mP3DYiqhWg0lL96tH034NDgYJRBOW%2FJj64W4%2B8IwpCAEjNx73fe3ahZeAF12tPw9dUyWxxKI9VSAPwzbVojw8Mu92UOBC6LEB0sLX2yMPVgkzbe3AItBmV%2FB%2BJL9gqy0wijRRkX3kMH%2B9%2Fn2ssNO4LR8yW%2FdFiRD4swc8ub2sSIv1EO4Z8N5ZbLhUctUTWQ%2B0XQZyfEeQjiWnH5uls%2F%2Fyvic%2BfoUnWrNAW8gji894fRL9xvV0r3hhlRQmV8pZfqy0toJmDpgvasGOpHJuz6OeAXvi%2FpUz0EphxsTF%2BEesQQ5DfQ5P%2FlPieQ5M5oY4IZ06NEeTz%2Ff%2F7GpP1SMgEOEIWa2jq56tKwY4jWqQtYPpWgW%2BnmU3LYSA5chgRFyQAE%2B7VuhQDWi28aPNraPIfCh8%2FQ5Mktwn7XpbxdMSP9785ZCiROBZQ3YVd2raao9d3WxKiAXdsGOnPO7WMZJXUbpfXhvRvzkur6I1k%2BQxIGqbehChE%2Bq%2BFr5%2BhSW78ScwgTe%2Fj%2FF8oAPmBvA4Z8Bqckhju8DUpNhJIL%2Fb1zFnNMYe4ILFRUuaMax8sbsvW%2B1hIva0GyonwDpGDyss%2FFD7%2FGJpkZpMEAecmNrN%2F%2FPy9XkV%2FFUqWbYsSFKrpdN7Ie6VDl7WbvcxDrAJjYL3u2TDKhXYeNR3Dwng85IPzXDlZArfd%2F2Ph%2B9fQ5H0x2jA2Ite0IdaP85%2FrOepkbDonlgz7MUgiwTxITrYCJl0LxDXP9o82tjnHIRZJ7TE7IpDJHvjuWXhBz9dLLZd59X9tfGh%2FH5oMZBwNoiJd8M%2FX%2F9vruQhVuS5ha6tnYmJ3MjSsjab9mIPAai25IFEOqszCAE9kli3WBNbBOk6KFAlkR6eXy6VN2f6l8eX496FJCVb4Rz2zV%2Fh%2FIQFyNumbd9FIM%2FOxGLsW%2B9JwIvEd19uLFwwBuaGCoyNnNip4pTkf8K6E72t7SJCuPFeQqPYI7dxCFlHfjU%2Fnvw9NVgQR%2BYV7S2j1n148zEZ%2FFYlXDR085LVMwIbH%2FTp3JHywb1mAnC1RXTwTyqvN2iHhIeWeufvwRs8ecUAQfTNmoVL4JR27mI1vFcS%2FD02Oo9AGcq9E9fLx%2Fg8ry0587FnNWfyZjjb9ahuXcgMx0TEVazT4%2BmknWMkZ%2FGaDXDrcZa7evPcg3H65UDma5dIx7d%2BNj7MK9h%2BGJjeOOFGhYXBl9cfx74bo9og1IDlvc6ZN2nmXCfVLBC3R23WKpHUWOebcB0JkeDdIh1aZvtbYJqZfD6ivnSFD8qNsARhnTA4g%2FzA0ibF%2Ft3lT9wKlfXz%2Bcdmz3mvQ8OwB2frMYq5zOgFmuicv0PyCwA4d47yzQCH%2BXSW5g9x6I9c9xEqkc8dgM5d%2FVyBlejyNUElH8g9Dk4Ku%2BzCoQOg07cf7vwsD1d4e%2BzW4AjVntZV4%2F2OO7VS%2FR%2FTc%2B1UZ9COvUtQbQ0PGP3RkeMcc9Ib4TGCMxoE4p%2FXr6WRnc1TiPw9NNn0sDAJfnZqTIB%2BWXIJr2awE3viebHTOhGyvc6CLOm0iMtfjNbdiAWVcXQhc8gzLm9zke3hh30xvuYtR039sUHdLN43s6T8PTe6liQBeYSzVH1%2F%2BbGIo1MAxhz%2Fxv%2BuDBu3zDs8zkx2E3YxeN6Lb9jrwEIXL3oPDw166dXOsz5pxQrk4KsGN6GiAR3iMH7BZ%2Fg9Dk201AoNNfu17Ux9nwDlu6JFSWJYdQ31b%2BauLF59oB0%2FOdEOblzEjVzPoByqa%2Bzo7vSZfGIdHFNvbgrQmnEh8id3Q4MHoNYJMkYn%2FPDTJg%2B%2FyXGIFpvvH%2B7%2BGEZdEP11mTXtWNiqCU%2BQ8h5vZ22WZjTAsoCGr2A1BtMvYvrzn9oXkofaMS7gIn22knG2dwcbfjcNyi529T%2FdvQ5OtpJr8vDKJCggf93%2FW4SODw3AnJLRGkMu%2FQCHSezCeF1aEEaZZV6nYwm9lrSypiieqi0gnur%2F3YOdy%2FTHO4troFYMjms2%2FD01SU5Ya3RATWbqP33%2BSWkId0GjEfJZ4srdI80ANNttZemlXH2yEd1ETwQwRHOF9gnlxDxdz4K3ssyFgq7Mffnkjoi1PGN0L1ZGq9rehSaJYlfeQbdbLERR%2FvP4H8ajMec%2FxgdH1n3zv%2FCowb0CigRtd25OJXihgUA8RynHtq8KDdratZWa3AenPdu4nmk9BPUKA%2Bx6Mg92CcOTvQ5NKIwq8qBAM1p6ej6f%2FcZXmNbENUtHD7he6gOuBd1Ym7YUpDNSpg9luQHBv743nsl3dzHszrHa2Ogv6DhjH%2BrWG3sNZkejNZiphV%2B%2FSX4cmJwpKazBupYmir0S4eOiP%2B38LlFwvSJPczMlEDOF1A85xD1qWXNqMRyvllbVYC3%2FsWqVUPnonETf5UYeBcRGbhLmOvrnJjO0CI0viUi7yL0OTuwdW1txnx1HXyKyo5enj8x9cC%2BIQ7GC4tz9k3NsXMXmzlOV1Tds2xrU4WlhdOMP4XnCFqndR6xZFvucNJgjvjIetMRZmchNSmgPBS2n78efQJBBHpBbOE9Pw1N2cnY%2FbxwHQlRgejK%2FwaDMngcCuwviUt5MGx3u8HBQBsZoeHjs71n5GoPZL7jM30GuaFJbMdTwIcPa1ZMqO5eiIK0OofxmapAiZDI1S4Q%2BR9016ucaP5783GyluANKACKnmBPbUIGxFAw5HHRt5zWy9hzoSzJH%2FSY3e7ZJvH7FC7DxBXI6Mmlw2j2Tw6P1GpuBxH%2BDPocmFUYlb4rUxPGuo7t1Owz7e%2F5dTJXzrgs7Qle9zAVR1xmxlwfWSYppBfUG46%2BbtFp7NtP4x4%2F0bMMBBex%2FJS%2FmTypgbFNO6vHRq0Qfyx9BkFkxJPXKeCREPolBSZ%2FP7x%2FNfTGK4UrOj6Q3FnusQbD%2Br4pCUnikhsNZbq4lGwuYIb9bnC3dpJgJrXpRDVih0QHD8VzLT97IO83to0niBSJdHUm6yBM2JjGURBENi%2BngF1ImwgarpNkfBs6n3HZGsjVGF1mQyN1zM2KtknFORG8k9XLtGAqdmKrww6ZEdA9ujANwOT1ADkPrHNShyhFrfmRN4UZEQWhY%2BCKV%2BR6BBZR5OLfXj%2Bf9qWfTcN5fSvm47%2Bm4%2F07kiULeveNJ9Foe3lRoWEB0v4E7k9hgA3lc63YomtJfXvobZOngiDOqtpdGDEDuGxFLnFO2OlLkXDIGuY%2BSbhdGZ9bHx3BX9%2FP0XRWxtR8KnYT2PCxdoCPIWwqhCR1%2FmdYWz11luWuyrrUZZcyD0Vem1IhV6TRsmyzrL3UduuAHPde0u9URYiRqDyTVYbhQcmsGh9gKbO959ttSrJVhPP71%2BMib53dgc7rgHRnJqaqIRGKIdhTiImwt5QcrG5BcqsVcQCRGhsxOJgKnSEEmQ0hGY9wSTOS%2B5p3WCYin1gVqzbBg66wxz4bwOuSA4sgg1wMBK9Zo%2Bfv9ptIGcgZDQ85hJPJBrne0OwrYNiNmk416iU9d4mluL6Aey1nMOgK1HRBe44RbA4yiGACuJlyJFo7mzSG7WhkFfm%2BFcRrALWvm92Rkl0swbi5LE0j%2Fe%2FzRgtQSsrHed1x5fe9k3oRwcErkQIvTdMKtZ7QbxrkCTZn2YpbbJ%2F%2BfFUEVqr23I2nY671HIHh2IvwTv0t5yTr6vW3fM9J164Cr2sYo1HAiLYz%2Biah%2Bf%2F%2BUYlKyUZp03tbWXP0tf0RpQndEnLCBzWihvVA18kerDk1wtJerolJL7aISS7HmDwfjF88pcCWNLLxcJy6dZR9S72pD%2Bho0S0XomYyIMKscoLN%2FRf9z%2Ft3ntRZ9xKJp5B5hb9byyHHFg5WGgN1jEvN3gfhD%2Fwf6kvlKupdAv5sl7aJJohfHMIqZn%2BMMaET13CJiO992g%2B9WXiIqEP%2FrT6f%2FMtpF1Ek4daHvcZxcP8%2Fo%2FdHGqnoht7SzlonWiW%2FdZwvPab3T%2FBqEr9IAUIatoZtrnLjJd7N25P4cmlZx3QeFSiLS%2BRsPEvuu2vhFVZa2Cqwcl%2FZ1kz8tsAhuzafiBi9r%2Bcf6XTXMm5zaZWJt3Fi0mzh4WWe2%2BhTMopa2ZRzmRrHtj14HM1qzHvw9N5t07o6Kt6Rx23vD6gG6BIpfOCAHtYrUduSkEvTyD177N3PGHZV%2FwMbYVHfyccOjo9%2Bd996sxMfTdRiOR31lYg4FwFaRxFBpdl9xzjn8fmixbwiUqJhyhBrFAgx1EvGbzw9K5QYfZmWZzlAy9yyyog94%2Bv%2F4zWc8c1JUXCDvnOiNoRUys151bAVJPZIvKEV5H6ZpBjcupZt9%2BWSH9y9DkReXqGPEIbhe3DvT8MK9%2BxeAvq0EO3fKBCpZL5W33ggGxED5e%2F91XWaJxhiK1ARITpeI8GAjRhkaKss7rKmMHub06Gnjbd4R8pM2ed62XJf1laFJnsOXY%2BgHm3OZkvznntPzMlarLw3aeM8B2DURnmY1o5z4%2BP%2F%2FyM%2BmJaJ9ZRGuQZ0PjKAPKuRDCg6rUlY3011PJAbeGrNScfOgNETJRwfw5NKko8b0%2FT0cUlVEzNIUNZutjY7O2UG9wA1SAWWGDllcooz4fx%2F9ArXTjWDSIYPBMR6bZnnCVCIvJhONh7%2BOaxbBsHlykWzmCY%2FsyNvPiVQ5%2FDE02Ziy6ivK8ywAnmxekEYUGnkPQ1vE0%2BGk8RPduBLLvoSP4ePyX0LMNSHo1574PW6oKsl%2Bpz8G36Bu0UXScwW2Jdk7LQ1%2FM8WCgh3jo0fzifg1NYggNcwAW1xRQRXi7hsfYhzviwPdjV8EXjCpuXAKY1j%2BZ%2F4%2FXv3aDOk8I9bEzQGa%2BH4PC0lLPJsZl2%2FL18x0V78dtBZZbbdmcQweEh%2Bo1Zhco%2FAxN1uTW2U5pA7%2BOWVjQeNCoE6Xm1T2nNAp5xEgYT5E85J4wfJqP538cEzP0pcwQCMxb%2F%2FZCCTp%2FZDGRIlrZTyQrS3j3acySPe9zmOVKuP6A1GemiMgMBX7faVtSeieGGLyaB8ZHFZ4jr3aRl33aPqU%2FV35wH69zz6A%2Fnv9rs95B99dLw3LFtcTFzmtAlknwfD5eePBzuD%2F9XNXwYCxEG%2Bjk9cySAamMsI77Na8H6Z1XAxeP2%2FzJXqMT6PjndwuARNMZtU0HiOEW%2BFhmXzg8JXweABM4X%2ByZiXASUPMxhoXj7oRX%2FsBsbd%2BDmJOKZj80nv28uzq98syBD5Nfo9SUdiD7jx37TeA7a546cM3Wf7IfDuIcjV%2FW%2BeFzatiOcXddJEaHo30c%2F6IVu3mrDdfX%2ByxiGCfV6LBOh87%2BPdRvufbW9NQwLAr1qMf%2FurvifpbGTYseg8T7ClmVUrSJpTTiNishj5R9QH51h2qwY3SdQ9T64PVQLsVZKP14%2F9eOj6C913q1PzcSMMZXWEbco75vGwOMG723r4szeg6LgYqAMAh%2FsBauEMFjOKhSo%2BpHsaJnH5sw4PYTDAKmVJdV6xr48oS9uwSLnXetIi80s97Wj4%2F3v77uQ75RYFsFe0%2BzkwS6Y8hur12VA7YrlXvbe63nvN7VzgtOESGBM5WBPK7ex1btgux5eOksIUMK5plisi6g6ghsZtbX5cH4Jw6E0sFcINefzs%2Ft4%2BtndSwQzry3uJp3LS8W9N8z26X5uvHtTrDt4lgom2MNg47T4m%2F1TRFE8JFzyhmiYbcj%2FCMwe2MNwcjA8CW1dURXQ0IBE6VagEHpzVo2uyzYj%2Bf7eP0LKFolh7G12Od3gNHA4YpIYgZoVGIy%2Bf48JPfGKmPAvOYIbmv3s5Rf99eQlfCr0Pe%2FI3tEK0IQPJkh4sf8Uy%2B8Z%2F8Dw49g%2BDmUrS5eB12fj8OfmcZD7cwrPpnsM%2B%2BDK5UF%2FTXG612kBnGdh4TEcKZqJwpyrzm1vEZEyKwpfjoM4%2BgTup%2BXOUdt3OyTeDKSpfktP3MGlnJhRyJ5dlWzgXBhO1IPDwKr5%2BP498SDnBcgzEGfXCYX%2BrmTCv8%2FjSPEB%2BxuCdvtMNplZY29tJNkfm%2BSceW2ra8hACHHslBeSCk%2Bvm%2B168iRLq7EvAiR1LY9SHm7GTe0U7QtTQK9CuE%2F3v%2F0OHmjY7bOEZnfp3EThHzcIwjeNSL5MtCRC4dstW0jl%2F1VidHKDrvs%2FWX8zqTOVobOyGIXTZAUg6TNmAX3akHMYzcGvlofCuRdPgs0vWdi9grEFf3x9XMJMldScxVLZwPtNt4I5ucNJ3M4cR8bevFUVFuUUptbd8QAzSlJi5c5%2BDV4pY7cV2r92g0jlCFuTit6UJLE2pQT4gnBSxBn4rLB3lRFjCwHwgHB%2BcfrP7Ole%2BleUn%2BoRN2lPbQEUqV1XnrDrmOvkqezzAelJkQOvASJJ2k3NPhTFctKvRzflI%2FtJkil5lWpG0fguxxbEfuC4WNyCMPNpoGKPPqSi6Ee179%2BHv6JNH3ahRie7WiisM47r%2FzybHBBWvC0JZJY1FoWO3SuUT%2BEE7H39x0OnvN5me9rMSvGs3U2wh1bq6nM1uiGDOFE9ZljNL%2FGnNrz0N0qZISVQiMhfd7%2FZT7Hc2FtaKG5%2F%2BpHM2Ne5x7mlzh1OfO8tZUb4riI34LPVel5h4dCO2YLIlmQaT3WRKcLPcriHILBNJHtiiahjpLe13y%2BQ%2F2T0jO7xPeaZ13Yfvz%2Bm1dnagZoU0lYVQ6TkSIxQTVGHn9yNAbXEnv84dzrQeSX6Wxqn3e4VPDO4ZbddDY8He8vTsGgII1c%2B6T186tSpXTH%2Bw6YYXwMxmmozM0%2BiVQumldvPj7%2FeIyVz6%2B8WbzmyHvnt7cAbSwHSrJ7Z2d9yXZ%2BKepdDxfR5nMhP3f46PdYm4mB5uiYHkeXRrClbCE3joZVnNZ8Q27hFmbvs4U6LkBtcSWuweiHlLF%2F3P%2FTUgYXdT8HLpaPOq%2FoYULrvNa6zMwPRSNHHINnJ3lYq0Tl%2F3WHU1e65JnHikQpjJgyMdfRtRmJVrWIYWdXrOBQjrOycY2956vPyJLPCwPNFnOUHz9%2FwraVQOVnIimq7arnqXNc1lTy4vR73gHqq2YzZ%2FeJbwLR%2Fs8dXhB3Ol7rvCIAld17uRiqZCOzFRghz4Z04H2pLG7GeVdGS3YIj8KEWJQSNJaDfDz7jUIrBKDorsI4iGk9jy07tAizWAk1HGw9L3hs6vOOd5WW5fcdbrNd7CAKGeArU9vTvCx71Z4Ary%2FQlOJWAKH7uys8PA3YzAikrsBvIB6f4t7n6NSHZU5w%2BV5P%2F%2F4WvNn5jk92C3FStiCjE3dIAUYz%2B92B3z1v%2FY87%2FGB%2Ba5JSzwN3Q9%2FP7bKUdcKm4xlroWpFmBN8%2B4lxz6mO1BQEgktWLM8L4M8qP97%2F%2Fnhr4dx9UZB4wVW56RMGnC9N2%2FzeA8TC4YE9nQuk1bBw%2Fb7K5j3nipAIHs5eePpCFsuP9xfe2kt4q6fTQPBbkPLOSZm%2B1FlCXRZUqqbinpAHmY%2Fn%2F%2FrRS3EFyS4C4b2AUNbbdxv%2FvMPTQUdc9JpXws%2BLgdjiOfnjDs8yUx6zl%2BVBXOiTWVyc33k9x6jwR2r3vszpx%2FXVosJN7kAa4ox01IK2hHYDRH%2B%2B%2FIMOes4rstnMQg7Euly3n6z8vMPVrIX32es2y9trmTZM%2FrjKptpS319y%2FW6dbHxVQc%2BvEDwRCqK5y3ymsiGCuDu6EsE4mV8x3Gfpc96N%2BcZDn4f%2Fv%2BQgCz7qVkKJfuYstrmuGaDLmF%2F%2FJmaZ5NVqcPEvV9nUjcp3YQD5TyC8mrBIDBIzydv7%2Fr4BSWCYyPJ12PkVu%2FW4MerNpMn7twjIz%2Ff%2Ff%2BUrX%2FnKV77yla985Stf%2BcpXvvKVr3zlK1%2F5yle%2B8pWvfOUrX%2FnKV77yla985Stf%2BcpXvvKVr3zlK1%2F5yle%2B8pWvfOUrX%2FnKV77yla985Stf%2BcpXvvKVr3zlK1%2F5yle%2B8pWvfOUrX%2FnKV77yla985Stf%2BcpXvvKVr3zlK1%2F5yle%2B8pWvfOUrX%2FnKV77yla985Stf%2BcpXvvKVr3zlK1%2F5yle%2B8pWvfOUrX%2FnKV77yFYD%2FB92aGZl3Kab3AAAyGmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4zLWMwMTEgNjYuMTQ1NjYxLCAyMDEyLzAyLzA2LTE0OjU2OjI3ICAgICAgICAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iPgogICAgICAgICA8eG1wOkNyZWF0b3JUb29sPkFkb2JlIEZpcmV3b3JrcyBDUzYgKE1hY2ludG9zaCk8L3htcDpDcmVhdG9yVG9vbD4KICAgICAgICAgPHhtcDpDcmVhdGVEYXRlPjIwMTMtMTAtMjFUMTQ6NDU6NTZaPC94bXA6Q3JlYXRlRGF0ZT4KICAgICAgICAgPHhtcDpNb2RpZnlEYXRlPjIwMTMtMTAtMjFUMTQ6NTU6MjBaPC94bXA6TW9kaWZ5RGF0ZT4KICAgICAgPC9yZGY6RGVzY3JpcHRpb24%2BCiAgICAgIDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiCiAgICAgICAgICAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyI%2BCiAgICAgICAgIDxkYzpmb3JtYXQ%2BaW1hZ2UvcG5nPC9kYzpmb3JtYXQ%2BCiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICA8L3JkZjpSREY%2BCjwveDp4bXBtZXRhPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgIAo8P3hwYWNrZXQgZW5kPSJ3Ij8%2Be2F%2F5wAAAQBJREFUeJzt0UENACAQwLAD%2F57hjQL2aBUs2ZozZ8jYvwN4GRJjSIwhMYbEGBJjSIwhMYbEGBJjSIwhMYbEGBJjSIwhMYbEGBJjSIwhMYbEGBJjSIwhMYbEGBJjSIwhMYbEGBJjSIwhMYbEGBJjSIwhMYbEGBJjSIwhMYbEGBJjSIwhMYbEGBJjSIwhMYbEGBJjSIwhMYbEGBJjSIwhMYbEGBJjSIwhMYbEGBJjSIwhMYbEGBJjSIwhMYbEGBJjSIwhMYbEGBJjSIwhMYbEGBJjSIwhMYbEGBJjSIwhMYbEGBJjSIwhMYbEGBJjSIwhMYbEGBJjSIwhMYbEGBJjSMwF600CxovzoBMAAAAASUVORK5CYII%3D"/>
+ </foreignObject>
+</svg>
diff --git a/layout/reftests/svg/foreignObject-img-ref.html b/layout/reftests/svg/foreignObject-img-ref.html
new file mode 100644
index 0000000000..1829e76cbb
--- /dev/null
+++ b/layout/reftests/svg/foreignObject-img-ref.html
@@ -0,0 +1,5 @@
+<!DOCTYPE html>
+<style>
+div { position: absolute; top: 0; left: 0; width: 100px; height: 100px; background-color: lime; }
+</style>
+<div></div>
diff --git a/layout/reftests/svg/foreignObject-img.html b/layout/reftests/svg/foreignObject-img.html
new file mode 100644
index 0000000000..7245267a2a
--- /dev/null
+++ b/layout/reftests/svg/foreignObject-img.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<style>
+img { position: absolute; top: 0; left: 0; }
+</style>
+<img src="foreignObject-img-helper.svg">
+<script>
+
+// The load of the data: URL inside foreignObject-img-helper.svg does not block
+// the load event of the <img> in this document, so we loop, painting the image
+// to a canvas, to tell when it's ready. (So if this test fails, it will fail
+// by timing out.)
+
+var img = document.querySelector("img");
+var canvas = document.createElement("canvas");
+var ctx = canvas.getContext("2d");
+
+function paint() {
+ ctx.drawImage(img, 0, 0);
+ if (ctx.getImageData(0, 0, 1, 1).data[1] == 255) {
+ document.documentElement.className = "";
+ } else {
+ requestAnimationFrame(paint);
+ }
+}
+
+paint();
+
+</script>
diff --git a/layout/reftests/svg/foreignObject-move-repaint-01.svg b/layout/reftests/svg/foreignObject-move-repaint-01.svg
new file mode 100644
index 0000000000..43dd296286
--- /dev/null
+++ b/layout/reftests/svg/foreignObject-move-repaint-01.svg
@@ -0,0 +1,41 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:html="http://www.w3.org/1999/xhtml"
+ class="reftest-wait">
+
+ <title>Testcase for repaint of the area previously covered by a foreignObject</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=369992 -->
+
+ <script type="application/javascript">
+
+// The green rect is initially covered by the red div. After the div
+// has rendered the foreignObject (and thus div) is moved out
+// of the viewport which should then be filled by the green rect as a result.
+
+ document.addEventListener("MozReftestInvalidate", doTest, false);
+ setTimeout(doTest, 4000); // fallback for running outside reftest
+
+ function doTest() {
+ document.getElementById('fo').setAttribute('y', '100%');
+
+ document.documentElement.removeAttribute('class');
+ }
+ </script>
+
+ <rect width="100%" height="100%" fill="red"/>
+
+ <!-- Create the "pass" rect using a foreignObject so the testcase doesn't
+ seem to pass if foreignObject is not supported -->
+ <foreignObject width="100%" height="100%">
+ <html:div style="display:block;width:100%;height:100%;background:lime;"/>
+ </foreignObject>
+
+ <foreignObject id="fo" width="100%" height="100%">
+ <html:div style="display:block;width:100%;height:100%;background:red;"/>
+ </foreignObject>
+
+</svg>
diff --git a/layout/reftests/svg/foreignObject-overflow-01.svg b/layout/reftests/svg/foreignObject-overflow-01.svg
new file mode 100644
index 0000000000..e75c1b1389
--- /dev/null
+++ b/layout/reftests/svg/foreignObject-overflow-01.svg
@@ -0,0 +1,24 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
+
+ <title>Testcase: foreignObject should clip its content</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=378897 -->
+
+ <rect width="100%" height="100%" fill="red"/>
+
+ <!-- Create the "pass" rect using a foreignObject so the testcase doesn't
+ seem to pass if foreignObject is not supported -->
+ <foreignObject width="100%" height="100%">
+ <html:div style="display:block; height:100%; width:100%; background: lime;"/>
+ </foreignObject>
+
+ <!-- test 'overflow' -->
+ <foreignObject x="-10" y="-10" width="10" height="10">
+ <html:div style="display:block; height:10000px; width:10000px; background:red;"/>
+ </foreignObject>
+
+</svg>
diff --git a/layout/reftests/svg/foreignObject-start-hidden-01.svg b/layout/reftests/svg/foreignObject-start-hidden-01.svg
new file mode 100644
index 0000000000..d6464b7f00
--- /dev/null
+++ b/layout/reftests/svg/foreignObject-start-hidden-01.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="reftest-wait"
+ height="0" width="0">
+ <script>
+ document.addEventListener("MozReftestInvalidate", doTest, false);
+ setTimeout(doTest, 4000); // fallback for running outside reftest
+
+ function doTest() {
+ document.documentElement.removeAttribute("width");
+ document.documentElement.removeAttribute("height");
+ document.documentElement.removeAttribute("class");
+ }
+ </script>
+ <rect width="100%" height="100%" fill="red"/>
+ <foreignObject width="100%" height="100%">
+ <div xmlns="http://www.w3.org/1999/xhtml"
+ style="background:lime; width:100%; height:100%;"/>
+ </foreignObject>
+</svg>
diff --git a/layout/reftests/svg/foreignObject-start-hidden-02.svg b/layout/reftests/svg/foreignObject-start-hidden-02.svg
new file mode 100644
index 0000000000..fc95ef5acf
--- /dev/null
+++ b/layout/reftests/svg/foreignObject-start-hidden-02.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="reftest-wait"
+ height="0" width="0" viewBox="0 0 50 50" preserveAspectRatio="none">
+ <script>
+ document.addEventListener("MozReftestInvalidate", doTest, false);
+ setTimeout(doTest, 4000); // fallback for running outside reftest
+
+ function doTest() {
+ document.documentElement.removeAttribute("width");
+ document.documentElement.removeAttribute("height");
+ document.documentElement.removeAttribute("class");
+ }
+ </script>
+ <rect width="100%" height="100%" fill="red"/>
+ <foreignObject width="100%" height="100%">
+ <div xmlns="http://www.w3.org/1999/xhtml"
+ style="background:lime; width:100%; height:100%;"/>
+ </foreignObject>
+</svg>
diff --git a/layout/reftests/svg/foreignObject-style-change-01.svg b/layout/reftests/svg/foreignObject-style-change-01.svg
new file mode 100644
index 0000000000..eaf52c6b31
--- /dev/null
+++ b/layout/reftests/svg/foreignObject-style-change-01.svg
@@ -0,0 +1,30 @@
+<!--
+ 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">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=708155 -->
+
+ <title>Testcase for style change on foreignObject</title>
+
+ <script>
+
+ document.addEventListener("MozReftestInvalidate", doTest, false);
+ setTimeout(doTest, 4000); // fallback for running outside reftest
+
+ function doTest() {
+ document.getElementById('fo').style.opacity = '1';
+
+ document.documentElement.removeAttribute('class');
+ }
+ </script>
+
+ <rect width="100%" height="100%" fill="red"/>
+ <foreignObject id="fo" width="100%" height="100%" opacity="0">
+ <div xmlns="http://www.w3.org/1999/xhtml" style="width: 100%; height: 100%;background-color: lime;">
+ </div>
+ </foreignObject>
+
+</svg>
diff --git a/layout/reftests/svg/foreignObject-vertical-01-ref.svg b/layout/reftests/svg/foreignObject-vertical-01-ref.svg
new file mode 100644
index 0000000000..2f468e7647
--- /dev/null
+++ b/layout/reftests/svg/foreignObject-vertical-01-ref.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+
+ <rect width="100" height="200" fill="lime"/>
+
+</svg>
diff --git a/layout/reftests/svg/foreignObject-vertical-01.svg b/layout/reftests/svg/foreignObject-vertical-01.svg
new file mode 100644
index 0000000000..ea6d80b6f8
--- /dev/null
+++ b/layout/reftests/svg/foreignObject-vertical-01.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+
+ <rect width="100" height="200" fill="red"/>
+ <foreignObject width="100" height="200" style="writing-mode: vertical-lr;">
+ <div xmlns="http://www.w3.org/1999/xhtml"
+ style="background:lime; display:block; width:100%; height:100%;"/>
+ </foreignObject>
+
+</svg>
diff --git a/layout/reftests/svg/fragid-shadow-1.html b/layout/reftests/svg/fragid-shadow-1.html
new file mode 100644
index 0000000000..80ec6eb5bc
--- /dev/null
+++ b/layout/reftests/svg/fragid-shadow-1.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<svg style="position: absolute; width: 0; height: 0">
+ <defs>
+ <pattern id="rect" width="100" height="100">
+ <rect fill="red" width="100" height="100" />
+ </pattern>
+ </defs>
+</svg>
+<div id="host"></div>
+<script>
+ // Should peek the pattern from the shadow root (green), not from the document (red).
+ host.attachShadow({ mode: "open" }).innerHTML = `
+ <svg width="100" height="100">
+ <defs>
+ <pattern id="rect" width="100" height="100">
+ <rect fill="lime" width="100" height="100" />
+ </pattern>
+ </defs>
+ <rect fill="url(#rect)" width="100" height="100" />
+ </svg>
+ `;
+</script>
diff --git a/layout/reftests/svg/fragid-shadow-10.html b/layout/reftests/svg/fragid-shadow-10.html
new file mode 100644
index 0000000000..a334a86aee
--- /dev/null
+++ b/layout/reftests/svg/fragid-shadow-10.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<style>
+ #shadow rect {
+ fill: red !important;
+ }
+</style>
+<div id="host"></div>
+<svg height="0">
+ <!-- use an empty g to force fragid-shadow-resource.svg to load before onload -->
+ <use href="fragid-shadow-resource.svg#empty" />
+</svg>
+<script>
+ host.attachShadow({ mode: "open" }).innerHTML = `
+ <svg width="100" height="100">
+ <use href="fragid-shadow-resource.svg#shadow" />
+ </svg>
+ `;
+</script>
diff --git a/layout/reftests/svg/fragid-shadow-2.html b/layout/reftests/svg/fragid-shadow-2.html
new file mode 100644
index 0000000000..55bd9edc10
--- /dev/null
+++ b/layout/reftests/svg/fragid-shadow-2.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<div id="host"></div>
+<script>
+ // Test dynamic id changes inside the shadow root.
+ host.attachShadow({ mode: "open" }).innerHTML = `
+ <svg width="100" height="100">
+ <defs>
+ <pattern id="rect1" width="100" height="100">
+ <rect fill="lime" width="100" height="100" />
+ </pattern>
+ </defs>
+ <rect fill="url(#rect)" width="100" height="100" />
+ </svg>
+ `;
+ document.body.offsetTop;
+ host.shadowRoot.getElementById("rect1").id = "rect";
+</script>
diff --git a/layout/reftests/svg/fragid-shadow-3.html b/layout/reftests/svg/fragid-shadow-3.html
new file mode 100644
index 0000000000..6ad2a491d0
--- /dev/null
+++ b/layout/reftests/svg/fragid-shadow-3.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<div id="host"></div>
+<svg height="0">
+ <!-- use an empty g to force fragid-shadow-resource.svg to load before onload -->
+ <use href="fragid-shadow-resource.svg#empty">
+</svg>
+<script>
+ // Test that external resource URIs resolve properly inside shadow trees.
+ host.attachShadow({ mode: "open" }).innerHTML = `
+ <svg width="100" height="100">
+ <rect fill="url(fragid-shadow-resource.svg#rect)" width="100" height="100" />
+ </svg>
+ `;
+</script>
diff --git a/layout/reftests/svg/fragid-shadow-4.html b/layout/reftests/svg/fragid-shadow-4.html
new file mode 100644
index 0000000000..ade93f70a6
--- /dev/null
+++ b/layout/reftests/svg/fragid-shadow-4.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<div id="host"></div>
+<script>
+ // Test references in <svg:use> work properly.
+ host.attachShadow({ mode: "open" }).innerHTML = `
+ <svg width="100" height="100">
+ <defs>
+ <rect fill="lime" id="rect-4" width="100" height="100">
+ </defs>
+ <use href="#rect-4" />
+ </svg>
+ `;
+</script>
diff --git a/layout/reftests/svg/fragid-shadow-5.html b/layout/reftests/svg/fragid-shadow-5.html
new file mode 100644
index 0000000000..02d0d6941c
--- /dev/null
+++ b/layout/reftests/svg/fragid-shadow-5.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<div id="host"></div>
+<script>
+ // Test absolute URIs inside shadow trees, which behave the same way as just the fragment id.
+ host.attachShadow({ mode: "open" }).innerHTML = `
+ <svg width="100" height="100">
+ <defs>
+ <rect fill="lime" id="rect-5" width="100" height="100">
+ </defs>
+ <use href="${location.href}#rect-5" />
+ </svg>
+ `;
+</script>
diff --git a/layout/reftests/svg/fragid-shadow-6.html b/layout/reftests/svg/fragid-shadow-6.html
new file mode 100644
index 0000000000..684f4fe71d
--- /dev/null
+++ b/layout/reftests/svg/fragid-shadow-6.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<svg style="position: absolute; width: 0; height: 0">
+ <defs>
+ <pattern id="rect" width="100" height="100">
+ <rect fill="red" width="100" height="100" />
+ </pattern>
+ </defs>
+</svg>
+<div id="host"></div>
+<script>
+ // Should peek the pattern from the shadow root (green), not from the document (red),
+ // even though the uri is absolute.
+ host.attachShadow({ mode: "open" }).innerHTML = `
+ <svg width="100" height="100">
+ <defs>
+ <pattern id="rect" width="100" height="100">
+ <rect fill="lime" width="100" height="100" />
+ </pattern>
+ </defs>
+ <rect fill="url(${location.href}#rect)" width="100" height="100" />
+ </svg>
+ `;
+</script>
diff --git a/layout/reftests/svg/fragid-shadow-7.html b/layout/reftests/svg/fragid-shadow-7.html
new file mode 100644
index 0000000000..2f4702d9a1
--- /dev/null
+++ b/layout/reftests/svg/fragid-shadow-7.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<svg style="position: absolute; width: 0; height: 0">
+ <defs>
+ <pattern id="rect" width="100" height="100">
+ <rect fill="red" width="100" height="100" />
+ </pattern>
+ </defs>
+</svg>
+<div id="host"></div>
+<script>
+ // Test references from a <svg:use> subtree.
+ host.attachShadow({ mode: "open" }).innerHTML = `
+ <svg width="100" height="100">
+ <defs>
+ <pattern id="rect" width="100" height="100">
+ <rect fill="red" width="100" height="100" />
+ </pattern>
+ <symbol id="useme">
+ <pattern id="rect" width="100" height="100">
+ <rect fill="lime" width="100" height="100" />
+ </pattern>
+ <rect fill="url(#rect)" width="100" height="100" />
+ </symbol>
+ </defs>
+ <use href="#useme" />
+ </svg>
+ `;
+</script>
diff --git a/layout/reftests/svg/fragid-shadow-8.html b/layout/reftests/svg/fragid-shadow-8.html
new file mode 100644
index 0000000000..169fdd6ecc
--- /dev/null
+++ b/layout/reftests/svg/fragid-shadow-8.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<svg width="100" height="100">
+ <defs>
+ <pattern id="rect" width="100" height="100">
+ <rect fill="red" width="100" height="100" />
+ </pattern>
+ <symbol id="useme">
+ <pattern id="rect" width="100" height="100">
+ <rect fill="lime" width="100" height="100" />
+ </pattern>
+ <rect fill="url(#rect)" width="100" height="100" />
+ </symbol>
+ </defs>
+ <use href="#useme" />
+</svg>
diff --git a/layout/reftests/svg/fragid-shadow-9.html b/layout/reftests/svg/fragid-shadow-9.html
new file mode 100644
index 0000000000..c689d76590
--- /dev/null
+++ b/layout/reftests/svg/fragid-shadow-9.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<style>
+ #shadow {
+ fill: red;
+ }
+</style>
+<div id="host"></div>
+<script>
+ host.attachShadow({ mode: "open" }).innerHTML = `
+ <style>
+ #shadow {
+ fill: lime;
+ }
+ </style>
+ <svg width="100" height="100">
+ <defs>
+ <g id="shadow" width="100" height="100">
+ <rect width="100" height="100" />
+ </g>
+ </defs>
+ <use href="#shadow" />
+ </svg>
+ `;
+</script>
diff --git a/layout/reftests/svg/fragid-shadow-ref.html b/layout/reftests/svg/fragid-shadow-ref.html
new file mode 100644
index 0000000000..e943ddf7fd
--- /dev/null
+++ b/layout/reftests/svg/fragid-shadow-ref.html
@@ -0,0 +1,4 @@
+<!doctype html>
+<svg width="100" height="100">
+ <rect fill="lime" width="100" height="100" />
+</svg>
diff --git a/layout/reftests/svg/fragid-shadow-resource.svg b/layout/reftests/svg/fragid-shadow-resource.svg
new file mode 100644
index 0000000000..0a2f2359b8
--- /dev/null
+++ b/layout/reftests/svg/fragid-shadow-resource.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <defs>
+ <g id="empty" />
+ <pattern id="rect" width="100" height="100">
+ <rect fill="lime" width="100" height="100" />
+ </pattern>
+ <g id="shadow" width="100" height="100">
+ <rect fill="lime" width="100" height="100" />
+ </g>
+ </defs>
+</svg>
diff --git a/layout/reftests/svg/fragmentIdentifier-01.xhtml b/layout/reftests/svg/fragmentIdentifier-01.xhtml
new file mode 100644
index 0000000000..5a2682825e
--- /dev/null
+++ b/layout/reftests/svg/fragmentIdentifier-01.xhtml
@@ -0,0 +1,31 @@
+<html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait">
+ <head>
+ <title>Testcases for SVG fragment identifiers</title>
+ <style>
+
+iframe {
+ border: none;
+}
+
+ </style>
+ </head>
+ <body style="background-color: lime;">
+ <div>
+ <iframe scrolling="no" type="image/svg+xml" width="100" height="100" src="fragmentIdentifier-rect-01.svg#limeView" />
+ <iframe scrolling="no" type="image/svg+xml" width="100" height="100" src="fragmentIdentifier-rect-01.svg#svgView(viewBox(0,200,100,100))" />
+ <iframe scrolling="no" type="image/svg+xml" width="100" height="100" src="fragmentIdentifier-rect-01.svg#view" />
+ </div>
+ <div>
+ <iframe scrolling="no" type="image/svg+xml" width="100" height="100" src="fragmentIdentifier-rect-01.svg#svgView(viewBox(0,0,100,100);transform(translate(0,200)))" />
+ <iframe scrolling="no" id="replace" type="image/svg+xml" width="100" height="100" src="fragmentIdentifier-rect-01.svg#svgView(viewBox(0,0,100,100);transform(translate(0,0))" />
+ <iframe scrolling="no" id="remove" type="image/svg+xml" width="100" height="100" src="fragmentIdentifier-rect-01.svg#svgView(viewBox(0,200,100,100);transform(translate(0,200)))" />
+ </div>
+ <script type="text/javascript">
+ window.onload = function() {
+ document.getElementById("replace").setAttribute("src","fragmentIdentifier-rect-01.svg#svgView(viewBox(0,0,100,100);transform(translate(0,200)))");
+ document.getElementById("remove").setAttribute("src","fragmentIdentifier-rect-01.svg#svgView(viewBox(0,200,100,100))");
+ document.documentElement.removeAttribute("class");
+ }
+ </script>
+ </body>
+</html>
diff --git a/layout/reftests/svg/fragmentIdentifier-rect-01.svg b/layout/reftests/svg/fragmentIdentifier-rect-01.svg
new file mode 100644
index 0000000000..29edaa4917
--- /dev/null
+++ b/layout/reftests/svg/fragmentIdentifier-rect-01.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+
+ <style>
+ view:target + a rect {
+ fill: lime;
+ }
+ </style>
+
+ <view id="limeView" viewBox="0 200 100 100"/>
+
+ <rect fill="red" height="100%" width="100%"/>
+ <rect fill="lime" x="0" y="200" height="100" width="100"/>
+
+ <view id="view" viewBox="200 200 100 100"/>
+ <a xlink:href="#view">
+ <rect fill="red" x="200" y="200" height="100" width="100"/>
+ </a>
+</svg>
diff --git a/layout/reftests/svg/g-transform-01.svg b/layout/reftests/svg/g-transform-01.svg
new file mode 100644
index 0000000000..bd4071abb5
--- /dev/null
+++ b/layout/reftests/svg/g-transform-01.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" class="reftest-wait">
+ <script>
+ document.addEventListener("MozReftestInvalidate", doTest, false);
+ setTimeout(doTest, 4000); // fallback for running outside reftest
+
+ function doTest() {
+ document.getElementById("g").transform.baseVal.getItem(0).setTranslate(20, 20);
+ document.getElementById("r2").transform.baseVal.getItem(0).setTranslate(70, 70);
+ document.getElementById("r1").transform.baseVal.getItem(0).setTranslate(180, 180);
+
+ document.documentElement.removeAttribute("class");
+ }
+ </script>
+ <rect width="100%" height="100%" fill="lime"/>
+ <g transform="translate(20 20)">
+ <rect transform="translate(70 70)" width="40" height="40" fill="red"/>
+ <rect transform="translate(180 180)" width="40" height="40" fill="red"/>
+ </g>
+ <g transform="translate(0 1)" id="g">
+ <rect transform="translate(49 49)" width="42" height="42" id="r2" fill="lime"/>
+ <rect transform="translate(89 89)" width="42" height="42" id="r1" fill="lime"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/geometry-properties-in-css-ref.html b/layout/reftests/svg/geometry-properties-in-css-ref.html
new file mode 100644
index 0000000000..8fb46ac7dd
--- /dev/null
+++ b/layout/reftests/svg/geometry-properties-in-css-ref.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<svg width="800" height="600">
+ <g>
+ <rect x="40" y="40" width="100" height="100" rx="30" ry="30" fill="purple" />
+ <rect x="40" y="150" width="30" height="200" rx="20" ry="20" fill="magenta" />
+ </g>
+ <circle cx="170" cy="340" r="70px" fill="pink" />
+ <g>
+ <circle cx="230" cy="130" r="70px" fill="skyblue" />
+ </g>
+ <svg x="300" width="200" height="200" viewBox="0 0 100 100">
+ <ellipse cx="30" cy="100" rx="20" ry="40" fill="cyan" />
+ <ellipse cx="80" cy="50" rx="20" ry="40" fill="navy" />
+ </svg>
+ <foreignObject x="450" y="200" width="80" height="130">
+ <svg>
+ <rect width="50" height="50" rx="4" ry="4" fill="brown" />
+ </svg>
+ </foreignObject>
+ <rect x="300" y="260" width="50" height="50" fill="red" />
+ <defs>
+ <rect id="r3" width="80" height="80" fill="skyblue" />
+ </defs>
+ <use x="400" y="310" href="#r3"/>
+</svg>
diff --git a/layout/reftests/svg/geometry-properties-in-css.html b/layout/reftests/svg/geometry-properties-in-css.html
new file mode 100644
index 0000000000..a17795f3f3
--- /dev/null
+++ b/layout/reftests/svg/geometry-properties-in-css.html
@@ -0,0 +1,92 @@
+<!doctype html>
+<style>
+ svg {
+ width: 800px;
+ height: 600px;
+ font-size: 10px;
+ }
+ svg svg {
+ width: 80px;
+ height: 80px;
+ }
+ rect:first-child {
+ x: 40px;
+ y: calc(5% + 10px);
+ width: calc(80px + 2em);
+ height: 10em;
+ rx: auto;
+ ry: 5%;
+ cx: 100px;
+ cy: 200px;
+ }
+ circle {
+ r: calc(70px);
+ }
+ g > #c2 {
+ cx: 80px;
+ cy: calc(20% + 10px);
+ x: 40px;
+ y: calc(5% + 10px);
+ }
+ svg > svg > ellipse {
+ cx: 30%;
+ cy: 100px;
+ rx: 20px;
+ ry: 40px;
+ }
+ svg > svg > ellipse:nth-child(2) {
+ transform: translate(50px, -50px);
+ }
+ svg ellipse {
+ cx: 10px;
+ cy: 10px;
+ rx: 10px;
+ ry: 10px;
+ }
+ foreignObject {
+ transform: translate(450px,0);
+ y: 200px;
+ width: 80px;
+ height: 130px;
+ }
+ #r2 {
+ width: 50px;
+ height:50px;
+ }
+ svg image {
+ x: 300px;
+ y: 260px;
+ height: 50px;
+ }
+ use {
+ x:400px;
+ y:310px;
+ }
+</style>
+<svg>
+ <g>
+ <rect x="0" y="-10" width="30px" height="10px" rx="-5px" ry="auto" fill="purple" />
+ <rect x=" 40px /* some nonsense */ " y="150" width="30" height="20em" rx="20px" ry="20px" fill="magenta" />
+ </g>
+ <circle cx="/* more nonsense */ 170" cy="340" r="-5px" fill="pink" />
+ <g transform="translate(150,0)">
+ <circle id="c2" cx="20" cy="40" fill="skyblue" />
+ </g>
+ <svg x="300" width="200px" height="200px" viewBox="0 0 100 100">
+ <ellipse fill="cyan" />
+ <ellipse fill="navy" />
+ </svg>
+ <foreignObject>
+ <svg>
+ <rect id="r2" style="x:0;y:0" fill="brown" />
+ </svg>
+ </foreignObject>
+ <image href="data:image/svg+xml,<svg width='10' height='10' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='red' /></svg>" />
+ <defs>
+ <g id="g">
+ <rect display="none"/>
+ <rect width="80" height="80" fill="skyblue" />
+ </g>
+ </defs>
+ <use href="#g"/>
+</svg>
diff --git a/layout/reftests/svg/getElementById-a-element-01.svg b/layout/reftests/svg/getElementById-a-element-01.svg
new file mode 100644
index 0000000000..272e312913
--- /dev/null
+++ b/layout/reftests/svg/getElementById-a-element-01.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" version="1.1"
+ onload="handleLoad(evt);">
+
+ <title>Testcase for getElementById finding &lt;a&gt; element</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=320724 -->
+
+ <script type="application/ecmascript">
+ <![CDATA[
+
+function handleLoad(event)
+{
+ document.getElementById('a').setAttribute('fill', 'lime');
+}
+
+ ]]>
+ </script>
+
+ <a id="a" fill="red">
+ <rect width="100%" height="100%" fill="inherit"/>
+ </a>
+
+</svg>
diff --git a/layout/reftests/svg/gradient-href-01.html b/layout/reftests/svg/gradient-href-01.html
new file mode 100644
index 0000000000..32a5fb35b8
--- /dev/null
+++ b/layout/reftests/svg/gradient-href-01.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <base href="/"/>
+ </head>
+ <body bgcolor="lime">
+ <svg width="100%" height="100%">
+ <defs>
+ <linearGradient id="b">
+ <stop offset="0" stop-color="lime"/>
+ <stop offset="1" stop-color="lime"/>
+ </linearGradient>
+ <linearGradient id="a" xlink:href="#b"/>
+ </defs>
+ <rect width="100%" height="100%" fill="red"/>
+ <rect width="100%" height="100%" fill="url(#a)"/>
+ </svg>
+ </body>
+</html>
diff --git a/layout/reftests/svg/gradient-live-01-ref.svg b/layout/reftests/svg/gradient-live-01-ref.svg
new file mode 100644
index 0000000000..2b02d6926c
--- /dev/null
+++ b/layout/reftests/svg/gradient-live-01-ref.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink" font-size="80">
+
+<linearGradient id="grad1" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="0">
+ <stop id="green" stop-color="#00dd00" offset="0"/>
+ <stop id="blue" stop-color="#0000dd" offset="0.5"/>
+ <stop id="magenta" stop-color="magenta" offset="1"/>
+</linearGradient>
+<rect x="20" y="20" width="440" height="80" fill="url(#grad1)" />
+
+<linearGradient id="grad2" xlink:href="#grad1"/>
+<rect x="20" y="150" width="440" height="80" fill="url(#grad2)" />
+<text x="20" y="300" width="440" height="80" fill="url(#grad1)">gradiation</text>
+<text x="20" y="400" width="440" height="80" fill="url(#grad2)">gradiation</text>
+
+</svg>
diff --git a/layout/reftests/svg/gradient-live-01a.svg b/layout/reftests/svg/gradient-live-01a.svg
new file mode 100644
index 0000000000..4c3c1633fe
--- /dev/null
+++ b/layout/reftests/svg/gradient-live-01a.svg
@@ -0,0 +1,30 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait" font-size="80">
+
+<script type="application/javascript">
+ document.addEventListener("MozReftestInvalidate", doTest, false);
+
+ function doTest() {
+ document.getElementById('grad1').removeChild(document.getElementById('red'));
+ document.documentElement.removeAttribute('class');
+ }
+
+</script>
+
+<!-- Tests that gradients are live to stop removal. -->
+
+<linearGradient id="grad1" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="0">
+ <stop id="green" stop-color="#00dd00" offset="0"/>
+ <stop id="blue" stop-color="#0000dd" offset="0.5"/>
+ <stop id="red" stop-color="red" offset="0.6"/>
+ <stop id="magenta" stop-color="magenta" offset="1"/>
+</linearGradient>
+<rect x="20" y="20" width="440" height="80" fill="url(#grad1)" />
+
+<linearGradient id="grad2" xlink:href="#grad1"/>
+<rect x="20" y="150" width="440" height="80" fill="url(#grad2)" />
+<text x="20" y="300" width="440" height="80" fill="url(#grad1)">gradiation</text>
+<text x="20" y="400" width="440" height="80" fill="url(#grad2)">gradiation</text>
+
+</svg>
diff --git a/layout/reftests/svg/gradient-live-01b.svg b/layout/reftests/svg/gradient-live-01b.svg
new file mode 100644
index 0000000000..d5f134b915
--- /dev/null
+++ b/layout/reftests/svg/gradient-live-01b.svg
@@ -0,0 +1,28 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait" font-size="80">
+
+<script type="application/javascript">
+ document.addEventListener("MozReftestInvalidate", doTest, false);
+
+ function doTest() {
+ document.getElementById('blue').setAttribute('offset', '0.5');
+ document.documentElement.removeAttribute('class');
+ }
+</script>
+
+<!-- Tests that gradients are live to stop offset changes. -->
+
+<linearGradient id="grad1" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="0">
+ <stop id="green" stop-color="#00dd00" offset="0"/>
+ <stop id="blue" stop-color="#0000dd" offset="0.9"/>
+ <stop id="magenta" stop-color="magenta" offset="1"/>
+</linearGradient>
+<rect x="20" y="20" width="440" height="80" fill="url(#grad1)" />
+
+<linearGradient id="grad2" xlink:href="#grad1"/>
+<rect x="20" y="150" width="440" height="80" fill="url(#grad2)" />
+<text x="20" y="300" width="440" height="80" fill="url(#grad1)">gradiation</text>
+<text x="20" y="400" width="440" height="80" fill="url(#grad2)">gradiation</text>
+
+</svg>
diff --git a/layout/reftests/svg/gradient-live-01c.svg b/layout/reftests/svg/gradient-live-01c.svg
new file mode 100644
index 0000000000..5cf26a20ed
--- /dev/null
+++ b/layout/reftests/svg/gradient-live-01c.svg
@@ -0,0 +1,29 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait" font-size="80">
+
+ <script type="application/javascript">
+ document.addEventListener("MozReftestInvalidate", doTest, false);
+
+ function doTest() {
+ document.getElementById('blue').setAttribute('stop-color', '#0000dd');
+ document.documentElement.removeAttribute('class');
+ }
+
+ </script>
+
+<!-- Tests that gradients are live to stop color changes. -->
+
+<linearGradient id="grad1" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="0">
+ <stop id="green" stop-color="#00dd00" offset="0"/>
+ <stop id="blue" stop-color="red" offset="0.5"/>
+ <stop id="magenta" stop-color="magenta" offset="1"/>
+</linearGradient>
+<rect x="20" y="20" width="440" height="80" fill="url(#grad1)" />
+
+<linearGradient id="grad2" xlink:href="#grad1"/>
+<rect x="20" y="150" width="440" height="80" fill="url(#grad2)" />
+<text x="20" y="300" width="440" height="80" fill="url(#grad1)">gradiation</text>
+<text x="20" y="400" width="440" height="80" fill="url(#grad2)">gradiation</text>
+
+</svg>
diff --git a/layout/reftests/svg/gradient-live-01d.svg b/layout/reftests/svg/gradient-live-01d.svg
new file mode 100644
index 0000000000..bbfe3098ee
--- /dev/null
+++ b/layout/reftests/svg/gradient-live-01d.svg
@@ -0,0 +1,32 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait" font-size="80">
+
+<!-- Tests that gradients are live to stop addition. -->
+
+<script>
+document.addEventListener("MozReftestInvalidate", addBlueStop, false);
+
+function addBlueStop()
+{
+ var stop = document.createElementNS("http://www.w3.org/2000/svg", "stop");
+ stop.setAttribute("stop-color", "#0000dd");
+ stop.setAttribute("offset", "0.5");
+ document.getElementById("grad1").insertBefore(stop, document.getElementById("magenta"));
+ document.documentElement.removeAttribute('class');
+}
+
+</script>
+
+<linearGradient id="grad1" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="0">
+ <stop id="green" stop-color="#00dd00" offset="0"/>
+ <stop id="magenta" stop-color="magenta" offset="1"/>
+</linearGradient>
+<rect x="20" y="20" width="440" height="80" fill="url(#grad1)" />
+
+<linearGradient id="grad2" xlink:href="#grad1"/>
+<rect x="20" y="150" width="440" height="80" fill="url(#grad2)" />
+<text x="20" y="300" width="440" height="80" fill="url(#grad1)">gradiation</text>
+<text x="20" y="400" width="440" height="80" fill="url(#grad2)">gradiation</text>
+
+</svg>
diff --git a/layout/reftests/svg/gradient-transform-01.svg b/layout/reftests/svg/gradient-transform-01.svg
new file mode 100644
index 0000000000..5b06d7ef7f
--- /dev/null
+++ b/layout/reftests/svg/gradient-transform-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" version="1.1"
+ viewBox="0 0 100 100" preserveAspectRatio="none">
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=946529 -->
+ <title>Test for gradientTransform with scientific notation</title>
+ <desc>
+ Creates a horizontal linear gradient when the left half is red and the right
+ half is green and with a width just over twice the width of the rectangle.
+
+ Then a gradientTransform using exponential notation shifts the gradient to
+ the left so that only the red part shows.
+ </desc>
+ <defs>
+ <linearGradient id="grad"
+ gradientUnits="userSpaceOnUse"
+ gradientTransform="translate(-1.1e2 0)"
+ x1="0" y1="0" x2="210" y2="0">
+ <stop stop-color="red" offset="0"/>
+ <stop stop-color="red" offset="0.5"/>
+ <stop stop-color="lime" offset="0.5"/>
+ <stop stop-color="lime" offset="1"/>
+ </linearGradient>
+ </defs>
+ <rect width="100" height="100" fill="url(#grad) orange"/>
+</svg>
diff --git a/layout/reftests/svg/href-attr-change-restyles-ref.svg b/layout/reftests/svg/href-attr-change-restyles-ref.svg
new file mode 100644
index 0000000000..3294f4e4b5
--- /dev/null
+++ b/layout/reftests/svg/href-attr-change-restyles-ref.svg
@@ -0,0 +1,29 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+
+ <title>Test for bug 549797 - Removing href attribute doesn't remove link styling</title>
+
+ <style type="text/css">
+ <![CDATA[
+a {
+ fill: blue;
+}
+a:link, a:visited {
+ fill: red;
+}
+ ]]>
+ </style>
+
+ <a>
+ <text x="10" y="100">Test anchor 1</text>
+ </a>
+
+ <a xlink:href="http://example.com/1">
+ <text x="10" y="200">Test anchor 2</text>
+ </a>
+
+ <a xlink:href="">
+ <text x="10" y="300">Test anchor 3</text>
+ </a>
+
+</svg>
diff --git a/layout/reftests/svg/href-attr-change-restyles.svg b/layout/reftests/svg/href-attr-change-restyles.svg
new file mode 100644
index 0000000000..d418f45620
--- /dev/null
+++ b/layout/reftests/svg/href-attr-change-restyles.svg
@@ -0,0 +1,32 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ onload="document.getElementById('link1').removeAttribute('xlink:href');
+ document.getElementById('link2').setAttributeNS('http://www.w3.org/1999/xlink', 'href', 'http://example.com/1');
+ document.getElementById('link3').setAttributeNS('http://www.w3.org/1999/xlink', 'href', '');">
+
+ <title>Test for bug 549797 - Removing href attribute doesn't remove link styling</title>
+
+ <style type="text/css">
+ <![CDATA[
+a {
+ fill: blue;
+}
+a:link, a:visited {
+ fill: red;
+}
+ ]]>
+ </style>
+
+ <a id="link1" xlink:href="http://example.com/1">
+ <text x="10" y="100">Test anchor 1</text>
+ </a>
+
+ <a id="link2">
+ <text x="10" y="200">Test anchor 2</text>
+ </a>
+
+ <a id="link3">
+ <text x="10" y="300">Test anchor 3</text>
+ </a>
+
+</svg>
diff --git a/layout/reftests/svg/image/blueRect10x10-viewBox-animPAR.svg b/layout/reftests/svg/image/blueRect10x10-viewBox-animPAR.svg
new file mode 100644
index 0000000000..9168e86355
--- /dev/null
+++ b/layout/reftests/svg/image/blueRect10x10-viewBox-animPAR.svg
@@ -0,0 +1,12 @@
+<!-- Helper SVG file used by some reftests -->
+<!-- This file has an animated preserveAspectRatio value on the root node, so
+ any uses of this file via <image preserveAspectRatio="defer..."> should
+ end up using our *animated* preserveAspectRatio value. -->
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="root"
+ viewBox="0 0 10 10" preserveAspectRatio="xMaxYMax">
+ <set attributeName="preserveAspectRatio" to="none"/>
+
+ <rect x="0" y="0" width="10" height="10" fill="blue"/>
+ <rect x="1" y="1" width="8" height="8" fill="lightblue"/>
+ <rect x="1" y="1" width="8" height="4" fill="teal"/>
+</svg>
diff --git a/layout/reftests/svg/image/blueRect10x10-viewBox.svg b/layout/reftests/svg/image/blueRect10x10-viewBox.svg
new file mode 100644
index 0000000000..d5bb444a94
--- /dev/null
+++ b/layout/reftests/svg/image/blueRect10x10-viewBox.svg
@@ -0,0 +1,7 @@
+<!-- Helper SVG file used by some reftests -->
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="root"
+ viewBox="0 0 10 10">
+ <rect x="0" y="0" width="10" height="10" fill="blue"/>
+ <rect x="1" y="1" width="8" height="8" fill="lightblue"/>
+ <rect x="1" y="1" width="8" height="4" fill="teal"/>
+</svg>
diff --git a/layout/reftests/svg/image/blueRect10x10.png b/layout/reftests/svg/image/blueRect10x10.png
new file mode 100644
index 0000000000..722e97c1eb
--- /dev/null
+++ b/layout/reftests/svg/image/blueRect10x10.png
Binary files differ
diff --git a/layout/reftests/svg/image/blueRect10x10.svg b/layout/reftests/svg/image/blueRect10x10.svg
new file mode 100644
index 0000000000..65e4014467
--- /dev/null
+++ b/layout/reftests/svg/image/blueRect10x10.svg
@@ -0,0 +1,6 @@
+<!-- Helper SVG file used by some reftests -->
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="root">
+ <rect x="0" y="0" width="10" height="10" fill="blue"/>
+ <rect x="1" y="1" width="8" height="8" fill="lightblue"/>
+ <rect x="1" y="1" width="8" height="4" fill="teal"/>
+</svg>
diff --git a/layout/reftests/svg/image/image-fill-01.svg b/layout/reftests/svg/image/image-fill-01.svg
new file mode 100644
index 0000000000..832be6c048
--- /dev/null
+++ b/layout/reftests/svg/image/image-fill-01.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">
+
+ <title>Testcase to ensure that fill is ignored for images</title>
+
+ <rect width="100%" height="100%" fill="lime"/>
+ <rect width="64" height="64" fill="red"/>
+ <image fill="none" width="64" height="64" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAIAAAAlC+aJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAJFJREFUaEPt1UEOg0AMBEHz/0ez8IY5zFqqKFdLkGrHz7yz/PO9wOrv7qf/81n983uBCwAl1EYgQCD8H5eQhCTUboAAgbCBcNwdaBdIgIAlbjdAgEDYQDjuDrQLJEDAErcbIEAgbCAcdwfaBRIgYInbDRAgEDYQjrsD7QIJELDE7QYIEAgbCMfdgXaBBAhkS3wAXsqyIo0zj4gAAAAASUVORK5CYII="/>
+
+</svg>
diff --git a/layout/reftests/svg/image/image-fill-opacity-ref.html b/layout/reftests/svg/image/image-fill-opacity-ref.html
new file mode 100644
index 0000000000..92b1508cac
--- /dev/null
+++ b/layout/reftests/svg/image/image-fill-opacity-ref.html
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<svg height=400 width=400>
+ <rect height=20 width=20 x=152 y=138 fill=lime></rect>
+</svg> \ No newline at end of file
diff --git a/layout/reftests/svg/image/image-fill-opacity.html b/layout/reftests/svg/image/image-fill-opacity.html
new file mode 100644
index 0000000000..e0b5f31e0f
--- /dev/null
+++ b/layout/reftests/svg/image/image-fill-opacity.html
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<svg height=400 width=400>
+ <image fill-opacity=0 height=20 width=20 x=152 y=138 href=lime100x100.png></image>
+</svg> \ No newline at end of file
diff --git a/layout/reftests/svg/image/image-filter-01-ref.svg b/layout/reftests/svg/image/image-filter-01-ref.svg
new file mode 100644
index 0000000000..66ad638ebf
--- /dev/null
+++ b/layout/reftests/svg/image/image-filter-01-ref.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <g transform="translate(2, 2)">
+ <image x="0" y="0" width="10" height="10" xlink:href="blueRect10x10.png"/>
+ <image x="20" y="0" width="10" height="10" xlink:href="blueRect10x10.png"/>
+ <image x="0" y="20" width="10" height="10" xlink:href="blueRect10x10.png"/>
+ <image x="20" y="20" width="10" height="10" xlink:href="blueRect10x10.png"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/image/image-filter-01.svg b/layout/reftests/svg/image/image-filter-01.svg
new file mode 100644
index 0000000000..6ec5a576dc
--- /dev/null
+++ b/layout/reftests/svg/image/image-filter-01.svg
@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <!-- This test confirms that images with filters get drawn.
+ (This test uses a no-op filter, for simplicity).
+ -->
+ <style>
+ image { filter: url(#noop); }
+ </style>
+ <defs>
+ <filter id="noop" x="0%" y="0%" width="100%" height="100%">
+ <feConvolveMatrix order="1" kernelMatrix="1"/>
+ </filter>
+ </defs>
+
+ <g transform="translate(2, 2)">
+ <image x="0" y="0" width="10" height="10" xlink:href="blueRect10x10.png"/>
+ <image x="20" y="0" width="10" height="10" xlink:href="blueRect10x10.png"/>
+ <image x="0" y="20" width="10" height="10" xlink:href="blueRect10x10.png"/>
+ <image x="20" y="20" width="10" height="10" xlink:href="blueRect10x10.png"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/image/image-load-01.svg b/layout/reftests/svg/image/image-load-01.svg
new file mode 100644
index 0000000000..1b8d4264fc
--- /dev/null
+++ b/layout/reftests/svg/image/image-load-01.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">
+
+ <title>Testcase to ensure that images load when they don't have frames</title>
+
+ <rect width="100%" height="100%" fill="lime"/>
+ <rect width="64" height="64" fill="red"/>
+
+ <script>
+ var img = document.createElementNS("http://www.w3.org/2000/svg", "image");
+ img.setAttribute("width", "64");
+ img.setAttribute("height", "64");
+ document.querySelector("svg").appendChild(img);
+ img.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAIAAAAlC+aJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAJFJREFUaEPt1UEOg0AMBEHz/0ez8IY5zFqqKFdLkGrHz7yz/PO9wOrv7qf/81n983uBCwAl1EYgQCD8H5eQhCTUboAAgbCBcNwdaBdIgIAlbjdAgEDYQDjuDrQLJEDAErcbIEAgbCAcdwfaBRIgYInbDRAgEDYQjrsD7QIJELDE7QYIEAgbCMfdgXaBBAhkS3wAXsqyIo0zj4gAAAAASUVORK5CYII=");
+ </script>
+
+</svg>
diff --git a/layout/reftests/svg/image/image-opacity-01-ref.svg b/layout/reftests/svg/image/image-opacity-01-ref.svg
new file mode 100644
index 0000000000..63a3f60546
--- /dev/null
+++ b/layout/reftests/svg/image/image-opacity-01-ref.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <use xlink:href="blueRect10x10.svg#root"
+ style="opacity: 0.3"/>
+</svg>
diff --git a/layout/reftests/svg/image/image-opacity-01.svg b/layout/reftests/svg/image/image-opacity-01.svg
new file mode 100644
index 0000000000..9c589d4bfa
--- /dev/null
+++ b/layout/reftests/svg/image/image-opacity-01.svg
@@ -0,0 +1,6 @@
+<!-- Test to make sure "opacity" value is applied correctly on svg:image -->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <image xlink:href="blueRect10x10.png" width="10" height="10"
+ style="opacity: 0.3"/>
+</svg>
diff --git a/layout/reftests/svg/image/image-opacity-02-ref.svg b/layout/reftests/svg/image/image-opacity-02-ref.svg
new file mode 100644
index 0000000000..548d1d54f1
--- /dev/null
+++ b/layout/reftests/svg/image/image-opacity-02-ref.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <g style="opacity: 0.3">
+ <use xlink:href="blueRect10x10.svg#root"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/image/image-opacity-02.svg b/layout/reftests/svg/image/image-opacity-02.svg
new file mode 100644
index 0000000000..5fd8598d0f
--- /dev/null
+++ b/layout/reftests/svg/image/image-opacity-02.svg
@@ -0,0 +1,7 @@
+<!-- Test to make sure "opacity" value is applied correctly on svg:image -->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <g style="opacity: 0.3">
+ <image xlink:href="blueRect10x10.png" width="10" height="10"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/image/image-preserveAspectRatio-01-raster.svg b/layout/reftests/svg/image/image-preserveAspectRatio-01-raster.svg
new file mode 100644
index 0000000000..d702a798c8
--- /dev/null
+++ b/layout/reftests/svg/image/image-preserveAspectRatio-01-raster.svg
@@ -0,0 +1,13 @@
+<!-- Test to make sure "preserveAspectRatio" value is applied correctly on
+ <image> tag, when the width:height ratio is less than the image's
+ nativeWidth:nativeHeight -->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ style="image-rendering: -moz-crisp-edges">
+ <script xlink:href="util.js" type="text/javascript"/>
+ <script>
+ var grid = generateImageGrid("blueRect10x10.png", 20, 40);
+ grid.setAttribute("transform", "translate(10, 10)");
+ document.documentElement.appendChild(grid);
+ </script>
+</svg>
diff --git a/layout/reftests/svg/image/image-preserveAspectRatio-01-ref.svg b/layout/reftests/svg/image/image-preserveAspectRatio-01-ref.svg
new file mode 100644
index 0000000000..a0405b3ea9
--- /dev/null
+++ b/layout/reftests/svg/image/image-preserveAspectRatio-01-ref.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <script xlink:href="util.js" type="text/javascript"/>
+ <script>
+ var grid = generateSymbolGrid("blueRect10x10.svg#root", 20, 40);
+ grid.setAttribute("transform", "translate(10, 10)");
+ document.documentElement.appendChild(grid);
+ </script>
+</svg>
diff --git a/layout/reftests/svg/image/image-preserveAspectRatio-01-svg.svg b/layout/reftests/svg/image/image-preserveAspectRatio-01-svg.svg
new file mode 100644
index 0000000000..8022671653
--- /dev/null
+++ b/layout/reftests/svg/image/image-preserveAspectRatio-01-svg.svg
@@ -0,0 +1,12 @@
+<!-- Test to make sure "preserveAspectRatio" value is applied correctly on
+ <image> tag, when the width:height ratio is less than the image's
+ nativeWidth:nativeHeight -->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <script xlink:href="util.js" type="text/javascript"/>
+ <script>
+ var grid = generateImageGrid("blueRect10x10-viewBox.svg", 20, 40);
+ grid.setAttribute("transform", "translate(10, 10)");
+ document.documentElement.appendChild(grid);
+ </script>
+</svg>
diff --git a/layout/reftests/svg/image/image-preserveAspectRatio-02-raster.svg b/layout/reftests/svg/image/image-preserveAspectRatio-02-raster.svg
new file mode 100644
index 0000000000..14b9ff8fae
--- /dev/null
+++ b/layout/reftests/svg/image/image-preserveAspectRatio-02-raster.svg
@@ -0,0 +1,13 @@
+<!-- Test to make sure "preserveAspectRatio" value is applied correctly on
+ <image> tag, when the width:height ratio is greater than the image's
+ nativeWidth:nativeHeight -->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ style="image-rendering: -moz-crisp-edges">
+ <script xlink:href="util.js" type="text/javascript"/>
+ <script>
+ var grid = generateImageGrid("blueRect10x10.png", 40, 20);
+ grid.setAttribute("transform", "translate(10, 10)");
+ document.documentElement.appendChild(grid);
+ </script>
+</svg>
diff --git a/layout/reftests/svg/image/image-preserveAspectRatio-02-ref.svg b/layout/reftests/svg/image/image-preserveAspectRatio-02-ref.svg
new file mode 100644
index 0000000000..5ebaa19b03
--- /dev/null
+++ b/layout/reftests/svg/image/image-preserveAspectRatio-02-ref.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <script xlink:href="util.js" type="text/javascript"/>
+ <script>
+ var grid = generateSymbolGrid("blueRect10x10.svg#root", 40, 20);
+ grid.setAttribute("transform", "translate(10, 10)");
+ document.documentElement.appendChild(grid);
+ </script>
+</svg>
diff --git a/layout/reftests/svg/image/image-preserveAspectRatio-02-svg.svg b/layout/reftests/svg/image/image-preserveAspectRatio-02-svg.svg
new file mode 100644
index 0000000000..cbe5bc0bcb
--- /dev/null
+++ b/layout/reftests/svg/image/image-preserveAspectRatio-02-svg.svg
@@ -0,0 +1,12 @@
+<!-- Test to make sure "preserveAspectRatio" value is applied correctly on
+ <image> tag, when the width:height ratio is greater than the image's
+ nativeWidth:nativeHeight -->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <script xlink:href="util.js" type="text/javascript"/>
+ <script>
+ var grid = generateImageGrid("blueRect10x10-viewBox.svg", 40, 20);
+ grid.setAttribute("transform", "translate(10, 10)");
+ document.documentElement.appendChild(grid);
+ </script>
+</svg>
diff --git a/layout/reftests/svg/image/image-preserveAspectRatio-03-ref.svg b/layout/reftests/svg/image/image-preserveAspectRatio-03-ref.svg
new file mode 100644
index 0000000000..101ad403b0
--- /dev/null
+++ b/layout/reftests/svg/image/image-preserveAspectRatio-03-ref.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <script xlink:href="util.js" type="text/javascript"/>
+ <script>
+ // My corresponding testcase uses an image with preserveAspectRatio
+ // set to "none" via SMIL animation. So the testcase's final bonus
+ // "defer" grid-entry will end up rendering with that "none" value.
+ var grid = generateSymbolGrid("blueRect10x10.svg#root", 40, 20,
+ "none");
+ grid.setAttribute("transform", "translate(10, 10)");
+ document.documentElement.appendChild(grid);
+ </script>
+</svg>
diff --git a/layout/reftests/svg/image/image-preserveAspectRatio-03.svg b/layout/reftests/svg/image/image-preserveAspectRatio-03.svg
new file mode 100644
index 0000000000..7bcd0d35bf
--- /dev/null
+++ b/layout/reftests/svg/image/image-preserveAspectRatio-03.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <script xlink:href="util.js" type="text/javascript"/>
+ <script>
+ // This image has a preserveAspectRatio attribute (animated into
+ // existence), so the bonus image element will use that value
+ // because of the "defer" in its preserveAspectRatio.
+ var grid = generateImageGrid("blueRect10x10-viewBox-animPAR.svg", 40, 20,
+ "defer xMinYMin");
+ grid.setAttribute("transform", "translate(10, 10)");
+ document.documentElement.appendChild(grid);
+ </script>
+</svg>
diff --git a/layout/reftests/svg/image/image-preserveAspectRatio-04-ref.svg b/layout/reftests/svg/image/image-preserveAspectRatio-04-ref.svg
new file mode 100644
index 0000000000..66e8dcf292
--- /dev/null
+++ b/layout/reftests/svg/image/image-preserveAspectRatio-04-ref.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <script xlink:href="util.js" type="text/javascript"/>
+ <script>
+ // My corresponding testcase uses an image with no preserveAspectRatio on
+ // its root node. So, the testcase's final bonus "defer" grid-entry will
+ // fall back on the preserveAspectRatio value that comes along with
+ // "defer" (which is "xMinYMin slice" in this case).
+ var grid = generateSymbolGrid("blueRect10x10.svg#root", 40, 20,
+ "xMinYMin slice");
+ grid.setAttribute("transform", "translate(10, 10)");
+ document.documentElement.appendChild(grid);
+ </script>
+</svg>
diff --git a/layout/reftests/svg/image/image-preserveAspectRatio-04.svg b/layout/reftests/svg/image/image-preserveAspectRatio-04.svg
new file mode 100644
index 0000000000..58c8f2b305
--- /dev/null
+++ b/layout/reftests/svg/image/image-preserveAspectRatio-04.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <script xlink:href="util.js" type="text/javascript"/>
+ <script>
+ // This image has no preserveAspectRatio attribute, so in the bonus
+ // image element, we'll actually apply the value that comes along with
+ // "defer" ("xMinYMin slice").
+ var grid = generateImageGrid("blueRect10x10-viewBox.svg", 40, 20,
+ "defer xMinYMin slice");
+ grid.setAttribute("transform", "translate(10, 10)");
+ document.documentElement.appendChild(grid);
+ </script>
+</svg>
diff --git a/layout/reftests/svg/image/image-preserveAspectRatio-05.svg b/layout/reftests/svg/image/image-preserveAspectRatio-05.svg
new file mode 100644
index 0000000000..11fadbcb86
--- /dev/null
+++ b/layout/reftests/svg/image/image-preserveAspectRatio-05.svg
@@ -0,0 +1,41 @@
+<!--
+ 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>Testing that dynamic changes to preserveAspectRatio cause a reflow</title>
+ <script>
+<![CDATA[
+
+function doTest() {
+ var i1 = document.getElementById("i1");
+ i1.preserveAspectRatio.baseVal.align =
+ SVGPreserveAspectRatio.SVG_PRESERVEASPECTRATIO_XMIDYMID;
+ var i2 = document.getElementById("i2");
+ i2.preserveAspectRatio.baseVal.align =
+ SVGPreserveAspectRatio.SVG_PRESERVEASPECTRATIO_NONE;
+ document.documentElement.removeAttribute("class");
+}
+
+document.addEventListener("MozReftestInvalidate", doTest, false);
+setTimeout(doTest, 4000); // fallback for running outside reftest
+
+]]>
+ </script>
+
+ <rect width="100%" height="100%" fill="lime"/>
+
+ <!-- this image is a 1x1 red gif -->
+ <image id="i1" preserveAspectRatio="none" x="50" y="50" width="200" height="300"
+ style="image-rendering: optimizeSpeed;"
+ xlink:href="data:image/gif,GIF87a%01%00%01%00%80%01%00%FF%00%00%FF%FF%FF%2C%00%00%00%00%01%00%01%00%00%02%02D%01%00%3B"/>
+ <!-- exactly cover the image if it had preserveAspectRatio="xMidYMid" -->
+ <rect x="50" y="100" width="200" height="200" fill="lime"/>
+
+ <rect x="300" y="100" width="200" height="300" fill="red"/>
+ <!-- and this one is a 1x1 lime PNG -->
+ <!-- which would cover the red rect if it had preserveAspectRatio="none" -->
+ <image id="i2" x="300" y="100" width="200" height="300" preserveAspectRatio="xMidYMid" xlink:href="data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00%01%00%00%00%01%08%02%00%00%00%90wS%DE%00%00%00%01sRGB%00%AE%CE%1C%E9%00%00%00%0CIDAT%08%D7c%60%F8%CF%00%00%02%02%01%00%AA*%9E'%00%00%00%00IEND%AEB%60%82" />
+
+</svg>
diff --git a/layout/reftests/svg/image/image-rotate-01-ref.svg b/layout/reftests/svg/image/image-rotate-01-ref.svg
new file mode 100644
index 0000000000..bcda450606
--- /dev/null
+++ b/layout/reftests/svg/image/image-rotate-01-ref.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <use xlink:href="blueRect10x10.svg#root"
+ transform="rotate(90 50 50)"/>
+</svg>
diff --git a/layout/reftests/svg/image/image-rotate-01.svg b/layout/reftests/svg/image/image-rotate-01.svg
new file mode 100644
index 0000000000..9a1600f9c2
--- /dev/null
+++ b/layout/reftests/svg/image/image-rotate-01.svg
@@ -0,0 +1,6 @@
+<!-- Test to make sure "rotate" value is applied correctly on svg:image -->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <image xlink:href="blueRect10x10.png" width="10" height="10"
+ transform="rotate(90 50 50)"/>
+</svg>
diff --git a/layout/reftests/svg/image/image-rotate-02-ref.svg b/layout/reftests/svg/image/image-rotate-02-ref.svg
new file mode 100644
index 0000000000..e807ff2f49
--- /dev/null
+++ b/layout/reftests/svg/image/image-rotate-02-ref.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <use xlink:href="blueRect10x10.svg#root"
+ transform="translate(60, 80) rotate(180 40 40)"/>
+</svg>
diff --git a/layout/reftests/svg/image/image-rotate-02a.svg b/layout/reftests/svg/image/image-rotate-02a.svg
new file mode 100644
index 0000000000..b04035037f
--- /dev/null
+++ b/layout/reftests/svg/image/image-rotate-02a.svg
@@ -0,0 +1,6 @@
+<!-- Test to make sure "rotate" value is applied correctly on svg:image -->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <image xlink:href="blueRect10x10.png" width="10" height="10"
+ transform="translate(60, 80) rotate(180 40 40)"/>
+</svg>
diff --git a/layout/reftests/svg/image/image-rotate-02b.svg b/layout/reftests/svg/image/image-rotate-02b.svg
new file mode 100644
index 0000000000..69bef2794c
--- /dev/null
+++ b/layout/reftests/svg/image/image-rotate-02b.svg
@@ -0,0 +1,7 @@
+<!-- Test to make sure parent's "rotate" value is applied on svg:image -->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <g transform="translate(60, 80) rotate(180 40 40)">
+ <image xlink:href="blueRect10x10.png" width="10" height="10"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/image/image-scaling-01.svg b/layout/reftests/svg/image/image-scaling-01.svg
new file mode 100644
index 0000000000..449101a4d6
--- /dev/null
+++ b/layout/reftests/svg/image/image-scaling-01.svg
@@ -0,0 +1,26 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- https://bugzilla.mozilla.org/show_bug.cgi?id=421780
+
+ Test related to bug 421780; make sure that 1-pixel, single-colour images
+ are correctly scaled to the right size.
+
+ This test makes sure that images aren't sized too big; it takes a 100%
+ width lime rect, overlaid with a 183x183 width stretched red image,
+ overlaid with a 183x183 lime rect.
+
+ 183 in particular is used because 183*183 > 2^16, and we can easily run
+ into double-scaling bugs that will overflow in pixman.
+-->
+
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+
+ <title> Ensure images aren't scaled too big </title>
+
+ <rect width="100%" height="100%" fill="lime"/>
+ <image width="183" height="183" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAAXNSR0IArs4c6QAAAAxJREFUCNdj+M/AAAADAQEAGN2NsAAAAABJRU5ErkJggg"/>
+ <rect width="183" height="183" fill="lime"/>
+
+</svg>
diff --git a/layout/reftests/svg/image/image-scaling-02.svg b/layout/reftests/svg/image/image-scaling-02.svg
new file mode 100644
index 0000000000..302e46c96f
--- /dev/null
+++ b/layout/reftests/svg/image/image-scaling-02.svg
@@ -0,0 +1,26 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- https://bugzilla.mozilla.org/show_bug.cgi?id=421780
+
+ Test related to bug 421780; make sure that 1-pixel, single-colour images
+ are correctly scaled to the right size.
+
+ This test makes sure that images aren't sized too small; it takes a 100%
+ width lime rect, overlaid with a 183x183 width red rect, overlaid with a
+ 183x183 stretched lime image.
+
+ 183 in particular is used because 183*183 > 2^16, and we can easily run
+ into double-scaling bugs that will overflow in pixman.
+-->
+
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+
+ <title> Ensure images aren't scaled too small </title>
+
+ <rect width="100%" height="100%" fill="lime"/>
+ <rect width="183" height="183" fill="red"/>
+ <image style="image-rendering: -moz-crisp-edges" width="183" height="183" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAABGdBTUEAALGPC%2FxhBQAAAAxJREFUGFdjYPjPAAACAgEA0dNGRAAAAABJRU5ErkJggg%3D%3D"/>
+
+</svg>
diff --git a/layout/reftests/svg/image/image-scaling-03.svg b/layout/reftests/svg/image/image-scaling-03.svg
new file mode 100644
index 0000000000..5a5ca8c930
--- /dev/null
+++ b/layout/reftests/svg/image/image-scaling-03.svg
@@ -0,0 +1,19 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- https://bugzilla.mozilla.org/show_bug.cgi?id=1776098
+
+ Make sure small scaled vector images display.
+-->
+
+<svg xmlns="http://www.w3.org/2000/svg">
+
+ <title> Ensure small vector images display</title>
+
+ <rect width="100%" height="100%" fill="lime"/>
+ <rect width="98" height="98" fill="red"/>
+ <image transform="scale(200)" width="0.5" height="0.5" href="lime100x100.svg"/>
+
+</svg>
+
diff --git a/layout/reftests/svg/image/image-svg-inline-01.html b/layout/reftests/svg/image/image-svg-inline-01.html
new file mode 100644
index 0000000000..8fe8aac39f
--- /dev/null
+++ b/layout/reftests/svg/image/image-svg-inline-01.html
@@ -0,0 +1,16 @@
+<html>
+ <!-- Test to make sure svg:image is painted at correct position when its
+ containing SVG is included inline in HTML at some non-(0,0) position. -->
+ <body style="background: lime">
+ <!-- 100x100 red div -->
+ <div style="background: red;
+ margin-left: 60px; margin-top: 80px;
+ width: 100px; height: 100px;">
+ <svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <!-- 1x1 lime PNG, scaled to 100x100 -->
+ <image xlink:href="data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00%01%00%00%00%01%08%02%00%00%00%90wS%DE%00%00%00%01sRGB%00%AE%CE%1C%E9%00%00%00%0CIDAT%08%D7c%60%F8%CF%00%00%02%02%01%00%AA*%9E'%00%00%00%00IEND%AEB%60%82" width="100" height="100"/>
+ </svg>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/svg/image/image-svg-inline-sprite-zoom-in-01-ref.html b/layout/reftests/svg/image/image-svg-inline-sprite-zoom-in-01-ref.html
new file mode 100644
index 0000000000..669241ab73
--- /dev/null
+++ b/layout/reftests/svg/image/image-svg-inline-sprite-zoom-in-01-ref.html
@@ -0,0 +1,8 @@
+<html>
+<body style="margin: 0">
+ <svg xmlns="http://www.w3.org/2000/svg">
+ <rect x="0" y="0" width="15" height="30" fill="lime"/>
+ <rect x="15" y="0" width="15" height="30" fill="blue"/>
+ </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/image/image-svg-inline-sprite-zoom-in-01a.html b/layout/reftests/svg/image/image-svg-inline-sprite-zoom-in-01a.html
new file mode 100644
index 0000000000..821147f9af
--- /dev/null
+++ b/layout/reftests/svg/image/image-svg-inline-sprite-zoom-in-01a.html
@@ -0,0 +1,16 @@
+<html reftest-zoom="1.5">
+ <!-- Test to make sure svg:image is painted correctly when its containing SVG
+ is included inline in a zoomed webpage and it has a transformation
+ applied, as is often used for SVG sprites. -->
+<body style="margin: 0">
+ <svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ style="shape-rendering: crispEdges">
+ <clipPath id="clip"><rect x="0" y="0" width="20" height="20"/></clipPath>
+ <!-- Translate and clip-path are used to pull a sprite out of the otherwise red image. -->
+ <g clip-path="url(#clip)">
+ <image xlink:href="sprite.svg" width="200" height="200" transform="translate(0, -100)"/>
+ </g>
+ </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/image/image-svg-inline-sprite-zoom-in-01b.html b/layout/reftests/svg/image/image-svg-inline-sprite-zoom-in-01b.html
new file mode 100644
index 0000000000..0b68b7d888
--- /dev/null
+++ b/layout/reftests/svg/image/image-svg-inline-sprite-zoom-in-01b.html
@@ -0,0 +1,15 @@
+<html reftest-zoom="1.5">
+ <!-- Test to make sure svg:image is painted correctly when its containing SVG
+ is included inline in a zoomed webpage and it has a transformation
+ applied, as is often used for SVG sprites. -->
+<body style="margin: 0; image-rendering: -moz-crisp-edges">
+ <svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <clipPath id="clip"><rect x="0" y="0" width="20" height="20"/></clipPath>
+ <!-- Translate and clip-path are used to pull a sprite out of the otherwise red image. -->
+ <g clip-path="url(#clip)">
+ <image xlink:href="sprite.png" width="200" height="200" transform="translate(0, -100)"/>
+ </g>
+ </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/image/image-svg-inline-sprite-zoom-out-01-ref.html b/layout/reftests/svg/image/image-svg-inline-sprite-zoom-out-01-ref.html
new file mode 100644
index 0000000000..1fe71d0904
--- /dev/null
+++ b/layout/reftests/svg/image/image-svg-inline-sprite-zoom-out-01-ref.html
@@ -0,0 +1,8 @@
+<html>
+<body style="margin: 0">
+ <svg xmlns="http://www.w3.org/2000/svg">
+ <rect x="0" y="0" width="5" height="10" fill="lime"/>
+ <rect x="5" y="0" width="5" height="10" fill="blue"/>
+ </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/image/image-svg-inline-sprite-zoom-out-01a.html b/layout/reftests/svg/image/image-svg-inline-sprite-zoom-out-01a.html
new file mode 100644
index 0000000000..d1f7bc35a4
--- /dev/null
+++ b/layout/reftests/svg/image/image-svg-inline-sprite-zoom-out-01a.html
@@ -0,0 +1,16 @@
+<html reftest-zoom="0.5">
+ <!-- Test to make sure svg:image is painted correctly when its containing SVG
+ is included inline in a zoomed webpage and it has a transformation
+ applied, as is often used for SVG sprites. -->
+<body style="margin: 0">
+ <svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ style="shape-rendering: crispEdges">
+ <clipPath id="clip"><rect x="0" y="0" width="20" height="20"/></clipPath>
+ <!-- Translate and clip-path are used to pull a sprite out of the otherwise red image. -->
+ <g clip-path="url(#clip)">
+ <image xlink:href="sprite.svg" width="200" height="200" transform="translate(0, -100)"/>
+ </g>
+ </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/image/image-svg-inline-sprite-zoom-out-01b.html b/layout/reftests/svg/image/image-svg-inline-sprite-zoom-out-01b.html
new file mode 100644
index 0000000000..dcb118a7df
--- /dev/null
+++ b/layout/reftests/svg/image/image-svg-inline-sprite-zoom-out-01b.html
@@ -0,0 +1,15 @@
+<html reftest-zoom="0.5">
+ <!-- Test to make sure svg:image is painted correctly when its containing SVG
+ is included inline in a zoomed webpage and it has a transformation
+ applied, as is often used for SVG sprites. -->
+<body style="margin: 0; image-rendering: -moz-crisp-edges">
+ <svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <clipPath id="clip"><rect x="0" y="0" width="20" height="20"/></clipPath>
+ <!-- Translate and clip-path are used to pull a sprite out of the otherwise red image. -->
+ <g clip-path="url(#clip)">
+ <image xlink:href="sprite.png" width="200" height="200" transform="translate(0, -100)"/>
+ </g>
+ </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/image/image-svg-inline-zoom-in-01a.html b/layout/reftests/svg/image/image-svg-inline-zoom-in-01a.html
new file mode 100644
index 0000000000..ef187a5a57
--- /dev/null
+++ b/layout/reftests/svg/image/image-svg-inline-zoom-in-01a.html
@@ -0,0 +1,17 @@
+<html reftest-zoom="1.5">
+ <!-- Test to make sure svg:image is painted correctly when its containing SVG
+ is included inline in a zoomed webpage. -->
+ <body style="background: lime">
+ <!-- 100x100 red div -->
+ <div style="background: red;
+ margin-left: 30px; margin-top: 30px;
+ width: 100px; height: 100px;">
+ <svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ style="shape-rendering: crispEdges">
+ <!-- SVG with no intrinsic dimensions -->
+ <image xlink:href="lime-no-dimensions.svg" width="100%" height="100%"/>
+ </svg>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/svg/image/image-svg-inline-zoom-in-01b.html b/layout/reftests/svg/image/image-svg-inline-zoom-in-01b.html
new file mode 100644
index 0000000000..419f3168ca
--- /dev/null
+++ b/layout/reftests/svg/image/image-svg-inline-zoom-in-01b.html
@@ -0,0 +1,16 @@
+<html reftest-zoom="1.5">
+ <!-- Test to make sure svg:image is painted correctly when its containing SVG
+ is included inline in a zoomed webpage. -->
+ <body style="background: lime">
+ <!-- 100x100 red div -->
+ <div style="background: red;
+ margin-left: 30px; margin-top: 30px;
+ width: 100px; height: 100px;">
+ <svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <!-- 1x1 lime PNG, scaled to 100x100 -->
+ <image xlink:href="data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00%01%00%00%00%01%08%02%00%00%00%90wS%DE%00%00%00%01sRGB%00%AE%CE%1C%E9%00%00%00%0CIDAT%08%D7c%60%F8%CF%00%00%02%02%01%00%AA*%9E'%00%00%00%00IEND%AEB%60%82" width="100" height="100"/>
+ </svg>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/svg/image/image-svg-inline-zoom-in-01c.html b/layout/reftests/svg/image/image-svg-inline-zoom-in-01c.html
new file mode 100644
index 0000000000..9d273c91ec
--- /dev/null
+++ b/layout/reftests/svg/image/image-svg-inline-zoom-in-01c.html
@@ -0,0 +1,18 @@
+<html reftest-zoom="1.5">
+ <!-- Test to make sure svg:image is painted correctly when its containing SVG
+ is included inline in a zoomed webpage. -->
+ <body style="background: lime">
+ <!-- 100x100 red div -->
+ <div style="background: red;
+ margin-left: 30px; margin-top: 30px;
+ width: 100px; height: 100px;">
+ <svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ style="shape-rendering: crispEdges">
+ <!-- SVG with an intrinsic size of 100px x 100px; percentage size on
+ image element. -->
+ <image xlink:href="lime100x100.svg" width="100%" height="100%"/>
+ </svg>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/svg/image/image-svg-inline-zoom-in-01d.html b/layout/reftests/svg/image/image-svg-inline-zoom-in-01d.html
new file mode 100644
index 0000000000..921fa4ec2f
--- /dev/null
+++ b/layout/reftests/svg/image/image-svg-inline-zoom-in-01d.html
@@ -0,0 +1,18 @@
+<html reftest-zoom="1.5">
+ <!-- Test to make sure svg:image is painted correctly when its containing SVG
+ is included inline in a zoomed webpage. -->
+ <body style="background: lime">
+ <!-- 100x100 red div -->
+ <div style="background: red;
+ margin-left: 30px; margin-top: 30px;
+ width: 100px; height: 100px;">
+ <svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ style="shape-rendering: crispEdges">
+ <!-- SVG with an intrinsic size of 100px x 100px; explicit size on
+ image element. -->
+ <image xlink:href="lime100x100.svg" width="100px" height="100px"/>
+ </svg>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/svg/image/image-svg-inline-zoom-out-01a.html b/layout/reftests/svg/image/image-svg-inline-zoom-out-01a.html
new file mode 100644
index 0000000000..6532c1576a
--- /dev/null
+++ b/layout/reftests/svg/image/image-svg-inline-zoom-out-01a.html
@@ -0,0 +1,16 @@
+<html reftest-zoom="0.5">
+ <!-- Test to make sure svg:image is painted correctly when its containing SVG
+ is included inline in a zoomed webpage. -->
+ <body style="background: lime">
+ <!-- 100x100 red div -->
+ <div style="background: red;
+ margin-left: 30px; margin-top: 30px;
+ width: 100px; height: 100px;">
+ <svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <!-- SVG with no intrinsic dimensions -->
+ <image xlink:href="lime-no-dimensions.svg" width="100%" height="100%"/>
+ </svg>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/svg/image/image-svg-inline-zoom-out-01b.html b/layout/reftests/svg/image/image-svg-inline-zoom-out-01b.html
new file mode 100644
index 0000000000..c45f016015
--- /dev/null
+++ b/layout/reftests/svg/image/image-svg-inline-zoom-out-01b.html
@@ -0,0 +1,16 @@
+<html reftest-zoom="0.5">
+ <!-- Test to make sure svg:image is painted correctly when its containing SVG
+ is included inline in a zoomed webpage. -->
+ <body style="background: lime">
+ <!-- 100x100 red div -->
+ <div style="background: red;
+ margin-left: 30px; margin-top: 30px;
+ width: 100px; height: 100px;">
+ <svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <!-- 1x1 lime PNG, scaled to 100x100 -->
+ <image xlink:href="data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00%01%00%00%00%01%08%02%00%00%00%90wS%DE%00%00%00%01sRGB%00%AE%CE%1C%E9%00%00%00%0CIDAT%08%D7c%60%F8%CF%00%00%02%02%01%00%AA*%9E'%00%00%00%00IEND%AEB%60%82" width="100" height="100"/>
+ </svg>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/svg/image/image-svg-inline-zoom-out-01c.html b/layout/reftests/svg/image/image-svg-inline-zoom-out-01c.html
new file mode 100644
index 0000000000..5c88134c03
--- /dev/null
+++ b/layout/reftests/svg/image/image-svg-inline-zoom-out-01c.html
@@ -0,0 +1,17 @@
+<html reftest-zoom="0.5">
+ <!-- Test to make sure svg:image is painted correctly when its containing SVG
+ is included inline in a zoomed webpage. -->
+ <body style="background: lime">
+ <!-- 100x100 red div -->
+ <div style="background: red;
+ margin-left: 30px; margin-top: 30px;
+ width: 100px; height: 100px;">
+ <svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <!-- SVG with an intrinsic size of 100px x 100px; percentage size on
+ image element. -->
+ <image xlink:href="lime100x100.svg" width="100%" height="100%"/>
+ </svg>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/svg/image/image-svg-inline-zoom-out-01d.html b/layout/reftests/svg/image/image-svg-inline-zoom-out-01d.html
new file mode 100644
index 0000000000..ad24ce81e5
--- /dev/null
+++ b/layout/reftests/svg/image/image-svg-inline-zoom-out-01d.html
@@ -0,0 +1,17 @@
+<html reftest-zoom="0.5">
+ <!-- Test to make sure svg:image is painted correctly when its containing SVG
+ is included inline in a zoomed webpage. -->
+ <body style="background: lime">
+ <!-- 100x100 red div -->
+ <div style="background: red;
+ margin-left: 30px; margin-top: 30px;
+ width: 100px; height: 100px;">
+ <svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <!-- SVG with an intrinsic size of 100px x 100px; explicit size on
+ image element. -->
+ <image xlink:href="lime100x100.svg" width="100px" height="100px"/>
+ </svg>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/svg/image/image-translate-01-ref.svg b/layout/reftests/svg/image/image-translate-01-ref.svg
new file mode 100644
index 0000000000..161aaa3f2e
--- /dev/null
+++ b/layout/reftests/svg/image/image-translate-01-ref.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <use xlink:href="blueRect10x10.svg#root"
+ transform="translate(60, 80)"/>
+</svg>
diff --git a/layout/reftests/svg/image/image-translate-01.svg b/layout/reftests/svg/image/image-translate-01.svg
new file mode 100644
index 0000000000..29311478bf
--- /dev/null
+++ b/layout/reftests/svg/image/image-translate-01.svg
@@ -0,0 +1,6 @@
+<!-- Test to make sure transform value is applied correctly on svg:image -->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <image xlink:href="blueRect10x10.png" width="10" height="10"
+ transform="translate(60, 80)"/>
+</svg>
diff --git a/layout/reftests/svg/image/image-with-following-content.svg b/layout/reftests/svg/image/image-with-following-content.svg
new file mode 100644
index 0000000000..b3f6d98a79
--- /dev/null
+++ b/layout/reftests/svg/image/image-with-following-content.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
+
+ <rect width="100%" height="100%" fill="lime" />
+
+ <rect width="220" height="220" fill="red" />
+
+ <svg x="10" y="10" width="200" height="200">
+ <image width="200" height="200" href="blueRect10x10.png"/>
+ </svg>
+
+ <rect width="220" height="220" fill="lime" />
+</svg>
diff --git a/layout/reftests/svg/image/image-with-mask-and-clipPath.svg b/layout/reftests/svg/image/image-with-mask-and-clipPath.svg
new file mode 100644
index 0000000000..d010eca527
--- /dev/null
+++ b/layout/reftests/svg/image/image-with-mask-and-clipPath.svg
@@ -0,0 +1,13 @@
+<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
+ <rect width="100%" height="100%" fill="lime"/>
+ <rect width="100" height="100" fill="red"/>
+ <g transform="translate(80 30)">
+ <clipPath id="c" clipPathUnits="userSpaceOnUse">
+ <rect x="-80" y="-30" width="100" height="100"/>
+ </clipPath>
+ <mask id="m" x="-80" y="-30" width="100" height="100">
+ <rect x="-80" y="-30" width="100" height="100" fill="white"/>
+ </mask>
+ <image x="-80" y="-30" width="100" height="100" href="lime100x100.png" mask="url(#m)" clip-path="url(#c)"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/image/image-x-01-ref.svg b/layout/reftests/svg/image/image-x-01-ref.svg
new file mode 100644
index 0000000000..4c69676845
--- /dev/null
+++ b/layout/reftests/svg/image/image-x-01-ref.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <use xlink:href="blueRect10x10.svg#root"
+ x="123"/>
+</svg>
diff --git a/layout/reftests/svg/image/image-x-01.svg b/layout/reftests/svg/image/image-x-01.svg
new file mode 100644
index 0000000000..db3be2af38
--- /dev/null
+++ b/layout/reftests/svg/image/image-x-01.svg
@@ -0,0 +1,6 @@
+<!-- Test to make sure "x" value is applied correctly on svg:image -->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <image xlink:href="blueRect10x10.png" width="10" height="10"
+ x="123"/>
+</svg>
diff --git a/layout/reftests/svg/image/image-xy-01-ref.svg b/layout/reftests/svg/image/image-xy-01-ref.svg
new file mode 100644
index 0000000000..2821f93246
--- /dev/null
+++ b/layout/reftests/svg/image/image-xy-01-ref.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <use xlink:href="blueRect10x10.svg#root"
+ x="123" y="234"/>
+</svg>
diff --git a/layout/reftests/svg/image/image-xy-01.svg b/layout/reftests/svg/image/image-xy-01.svg
new file mode 100644
index 0000000000..1afa32a60d
--- /dev/null
+++ b/layout/reftests/svg/image/image-xy-01.svg
@@ -0,0 +1,7 @@
+<!-- Test to make sure "x" and "y" value are simultaneously applied correctly
+ on svg:image -->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <image xlink:href="blueRect10x10.png" width="10" height="10"
+ x="123" y="234"/>
+</svg>
diff --git a/layout/reftests/svg/image/image-y-01-ref.svg b/layout/reftests/svg/image/image-y-01-ref.svg
new file mode 100644
index 0000000000..9a608e8dbd
--- /dev/null
+++ b/layout/reftests/svg/image/image-y-01-ref.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <use xlink:href="blueRect10x10.svg#root"
+ y="123"/>
+</svg>
diff --git a/layout/reftests/svg/image/image-y-01.svg b/layout/reftests/svg/image/image-y-01.svg
new file mode 100644
index 0000000000..2c8d04fd88
--- /dev/null
+++ b/layout/reftests/svg/image/image-y-01.svg
@@ -0,0 +1,6 @@
+<!-- Test to make sure "y" value is applied correctly on svg:image -->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <image xlink:href="blueRect10x10.png" width="10" height="10"
+ y="123"/>
+</svg>
diff --git a/layout/reftests/svg/image/image-zoom-02-ref.svg b/layout/reftests/svg/image/image-zoom-02-ref.svg
new file mode 100644
index 0000000000..fca1d5703e
--- /dev/null
+++ b/layout/reftests/svg/image/image-zoom-02-ref.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <image width="15" height="15" xlink:href="blueRect10x10.png"/>
+</svg>
diff --git a/layout/reftests/svg/image/image-zoom-02.svg b/layout/reftests/svg/image/image-zoom-02.svg
new file mode 100644
index 0000000000..f426dfca2a
--- /dev/null
+++ b/layout/reftests/svg/image/image-zoom-02.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ reftest-zoom="1.5" width="10" height="10">
+ <title>Testcase to ensure that full-page-zoom will zoom raster
+ images the right amount.</title>
+ <image width="10" height="10" xlink:href="blueRect10x10.png"/>
+</svg>
diff --git a/layout/reftests/svg/image/imported-image-01.svg b/layout/reftests/svg/image/imported-image-01.svg
new file mode 100644
index 0000000000..b7ef5d5acf
--- /dev/null
+++ b/layout/reftests/svg/image/imported-image-01.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" standalone="yes"?>
+<svg version="1.1"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <script>
+ <![CDATA[
+ var doc = new DOMParser().parseFromString('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><image width="10" height="10" xlink:href="blueRect10x10.png"/></svg>', 'text/xml');
+ document.documentElement.appendChild(doc.documentElement.firstChild);
+ ]]>
+ </script>
+
+</svg>
diff --git a/layout/reftests/svg/image/imported-image-02.svg b/layout/reftests/svg/image/imported-image-02.svg
new file mode 100644
index 0000000000..7e51025795
--- /dev/null
+++ b/layout/reftests/svg/image/imported-image-02.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" standalone="yes"?>
+<svg version="1.1"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <script>
+ <![CDATA[
+ var doc = document.implementation.createDocument("", "", null);
+ var img = doc.createElementNS("http://www.w3.org/2000/svg", "image");
+ img.setAttribute("width", "10");
+ img.setAttribute("height", "10");
+ img.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href",
+ "blueRect10x10.png");
+ document.documentElement.appendChild(img);
+ ]]>
+ </script>
+
+</svg>
diff --git a/layout/reftests/svg/image/imported-image-ref.svg b/layout/reftests/svg/image/imported-image-ref.svg
new file mode 100644
index 0000000000..4b0d1accc9
--- /dev/null
+++ b/layout/reftests/svg/image/imported-image-ref.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" standalone="yes"?>
+<svg version="1.1"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <image width="10" height="10" xlink:href="blueRect10x10.png"/>
+</svg>
diff --git a/layout/reftests/svg/image/lime-no-dimensions.svg b/layout/reftests/svg/image/lime-no-dimensions.svg
new file mode 100644
index 0000000000..1723cb66c0
--- /dev/null
+++ b/layout/reftests/svg/image/lime-no-dimensions.svg
@@ -0,0 +1,7 @@
+<!--
+ 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" style="shape-rendering: crispEdges">
+ <rect width="100%" height="100%" fill="lime"/>
+</svg>
diff --git a/layout/reftests/svg/image/lime100x100.png b/layout/reftests/svg/image/lime100x100.png
new file mode 100644
index 0000000000..c9bb375943
--- /dev/null
+++ b/layout/reftests/svg/image/lime100x100.png
Binary files differ
diff --git a/layout/reftests/svg/image/lime100x100.svg b/layout/reftests/svg/image/lime100x100.svg
new file mode 100644
index 0000000000..bba9d34236
--- /dev/null
+++ b/layout/reftests/svg/image/lime100x100.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px">
+ <rect width="100px" height="100px" style="fill: lime"/>
+</svg>
diff --git a/layout/reftests/svg/image/reftest.list b/layout/reftests/svg/image/reftest.list
new file mode 100644
index 0000000000..408fa954e2
--- /dev/null
+++ b/layout/reftests/svg/image/reftest.list
@@ -0,0 +1,45 @@
+# Tests of the SVG <image> element
+
+== image-fill-01.svg ../pass.svg
+== image-filter-01.svg image-filter-01-ref.svg
+== image-load-01.svg ../pass.svg
+fuzzy(0-4,0-110) == image-opacity-01.svg image-opacity-01-ref.svg # Bug 779514 for Android
+fuzzy(0-1,0-100) == image-opacity-02.svg image-opacity-02-ref.svg # Bug 776039 for Android
+== image-rotate-01.svg image-rotate-01-ref.svg
+== image-rotate-02a.svg image-rotate-02-ref.svg
+== image-rotate-02b.svg image-rotate-02-ref.svg
+== image-scaling-01.svg ../pass.svg
+== image-scaling-02.svg ../pass.svg
+== image-scaling-03.svg ../pass.svg
+== image-svg-inline-01.html ../pass.svg
+== image-svg-inline-zoom-in-01a.html ../pass.svg
+== image-svg-inline-zoom-in-01b.html ../pass.svg
+== image-svg-inline-zoom-in-01c.html ../pass.svg
+== image-svg-inline-zoom-in-01d.html ../pass.svg
+== image-svg-inline-zoom-out-01a.html ../pass.svg
+== image-svg-inline-zoom-out-01b.html ../pass.svg
+== image-svg-inline-zoom-out-01c.html ../pass.svg
+== image-svg-inline-zoom-out-01d.html ../pass.svg
+fails-if(useDrawSnapshot) == image-svg-inline-sprite-zoom-in-01a.html image-svg-inline-sprite-zoom-in-01-ref.html
+fails-if(useDrawSnapshot) == image-svg-inline-sprite-zoom-in-01b.html image-svg-inline-sprite-zoom-in-01-ref.html
+fails-if(useDrawSnapshot) == image-svg-inline-sprite-zoom-out-01a.html image-svg-inline-sprite-zoom-out-01-ref.html
+fails-if(useDrawSnapshot) == image-svg-inline-sprite-zoom-out-01b.html image-svg-inline-sprite-zoom-out-01-ref.html
+== image-translate-01.svg image-translate-01-ref.svg
+== image-with-following-content.svg ../pass.svg
+== image-with-mask-and-clipPath.svg ../pass.svg
+== image-x-01.svg image-x-01-ref.svg
+== image-xy-01.svg image-xy-01-ref.svg
+== image-y-01.svg image-y-01-ref.svg
+fails-if(useDrawSnapshot) == image-zoom-02.svg image-zoom-02-ref.svg
+== imported-image-01.svg imported-image-ref.svg
+== imported-image-02.svg imported-image-ref.svg
+== image-fill-opacity.html image-fill-opacity-ref.html
+
+# Tests for <image> with preserveAspectRatio
+fuzzy(0-57,0-352) == image-preserveAspectRatio-01-raster.svg image-preserveAspectRatio-01-ref.svg
+fuzzy(0-57,0-352) == image-preserveAspectRatio-01-svg.svg image-preserveAspectRatio-01-ref.svg
+fuzzy(0-57,0-288) == image-preserveAspectRatio-02-raster.svg image-preserveAspectRatio-02-ref.svg
+fuzzy(0-57,0-288) == image-preserveAspectRatio-02-svg.svg image-preserveAspectRatio-02-ref.svg
+fuzzy(0-57,0-288) == image-preserveAspectRatio-03.svg image-preserveAspectRatio-03-ref.svg
+fuzzy(0-57,0-288) == image-preserveAspectRatio-04.svg image-preserveAspectRatio-04-ref.svg
+== image-preserveAspectRatio-05.svg ../pass.svg
diff --git a/layout/reftests/svg/image/sprite.png b/layout/reftests/svg/image/sprite.png
new file mode 100644
index 0000000000..830eb77731
--- /dev/null
+++ b/layout/reftests/svg/image/sprite.png
Binary files differ
diff --git a/layout/reftests/svg/image/sprite.svg b/layout/reftests/svg/image/sprite.svg
new file mode 100644
index 0000000000..2ec702dfb2
--- /dev/null
+++ b/layout/reftests/svg/image/sprite.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200" style="shape-rendering: crispEdges">
+<rect x="0" y="0" width="200" height="200" fill="red"/>
+<rect x="-1" y="99" width="11" height="22" fill="lime"/>
+<rect x="10" y="99" width="11" height="22" fill="blue"/>
+</svg>
diff --git a/layout/reftests/svg/image/util.js b/layout/reftests/svg/image/util.js
new file mode 100644
index 0000000000..144edd356a
--- /dev/null
+++ b/layout/reftests/svg/image/util.js
@@ -0,0 +1,173 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* 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/. */
+
+// The possible values of the "align" component of preserveAspectRatio.
+const ALIGN_VALS = ["none",
+ "xMinYMin", "xMinYMid", "xMinYMax",
+ "xMidYMin", "xMidYMid", "xMidYMax",
+ "xMaxYMin", "xMaxYMid", "xMaxYMax"];
+
+// The possible values of the "meetOrSlice" component of preserveAspectRatio.
+const MEETORSLICE_VALS = [ "meet", "slice" ];
+
+const SVGNS = "http://www.w3.org/2000/svg";
+const XLINKNS = "http://www.w3.org/1999/xlink";
+
+// This is the separation between the x & y values of each <image> in a
+// generated grid.
+const IMAGE_OFFSET = 50;
+
+function generateBorderRect(aX, aY, aWidth, aHeight) {
+ var rect = document.createElementNS(SVGNS, "rect");
+ rect.setAttribute("x", aX);
+ rect.setAttribute("y", aY);
+ rect.setAttribute("width", aWidth);
+ rect.setAttribute("height", aHeight);
+ rect.setAttribute("fill", "none");
+ rect.setAttribute("stroke", "black");
+ rect.setAttribute("stroke-width", "2");
+ rect.setAttribute("stroke-dasharray", "3 2");
+ return rect;
+}
+
+// Returns an SVG <image> element with the given xlink:href, width, height,
+// and preserveAspectRatio=[aAlign aMeetOrSlice] attributes
+function generateImageElementForParams(aX, aY, aWidth, aHeight,
+ aHref, aAlign, aMeetOrSlice) {
+ var image = document.createElementNS(SVGNS, "image");
+ image.setAttribute("x", aX);
+ image.setAttribute("y", aY);
+ image.setAttribute("width", aWidth);
+ image.setAttribute("height", aHeight);
+ image.setAttributeNS(XLINKNS, "href", aHref);
+ image.setAttribute("preserveAspectRatio", aAlign + " " + aMeetOrSlice);
+ return image;
+}
+
+// Returns a <g> element filled with a grid of <image> elements which each
+// have the specified aWidth & aHeight and which use all possible values of
+// preserveAspectRatio.
+//
+// The final "aBonusPARVal" argument (if specified) is used as the
+// preserveAspectRatio value on a bonus <image> element, added at the end.
+function generateImageGrid(aHref, aWidth, aHeight, aBonusPARVal) {
+ var grid = document.createElementNS(SVGNS, "g");
+ var y = 0;
+ var x = 0;
+ for (var i = 0; i < ALIGN_VALS.length; i++) {
+ // Jump to next line of grid, for every other "i" value.
+ // (every fourth entry)
+ if (i && i % 2 == 0) {
+ y += IMAGE_OFFSET;
+ x = 0;
+ }
+ var alignVal = ALIGN_VALS[i];
+ for (var j = 0; j < MEETORSLICE_VALS.length; j++) {
+ var meetorsliceVal = MEETORSLICE_VALS[j];
+ var border = generateBorderRect(x, y, aWidth, aHeight);
+ var image = generateImageElementForParams(x, y, aWidth, aHeight,
+ aHref, alignVal,
+ meetorsliceVal);
+ grid.appendChild(border);
+ grid.appendChild(image);
+ x += IMAGE_OFFSET;
+ }
+ }
+
+ if (aBonusPARVal) {
+ // Add one final entry with "bonus" pAR value.
+ y += IMAGE_OFFSET;
+ x = 0;
+ var border = generateBorderRect(x, y, aWidth, aHeight);
+ var image = generateImageElementForParams(x, y, aWidth, aHeight,
+ aHref, aBonusPARVal, "");
+ grid.appendChild(border);
+ grid.appendChild(image);
+ }
+
+ return grid;
+}
+
+// Returns an SVG <symbol> element that...
+// (a) has the given ID
+// (b) contains only a <use> element to the given URI
+// (c) has a hardcoded viewBox="0 0 10 10" attribute
+// (d) has the given preserveAspectRatio=[aAlign aMeetOrSlice] attribute
+function generateSymbolElementForParams(aSymbolID, aHref,
+ aAlign, aMeetOrSlice) {
+ var use = document.createElementNS(SVGNS, "use");
+ use.setAttributeNS(XLINKNS, "href", aHref);
+
+ var symbol = document.createElementNS(SVGNS, "symbol");
+ symbol.setAttribute("id", aSymbolID);
+ symbol.setAttribute("viewBox", "0 0 10 10");
+ symbol.setAttribute("preserveAspectRatio", aAlign + " " + aMeetOrSlice);
+
+ symbol.appendChild(use);
+ return symbol;
+}
+
+function generateUseElementForParams(aTargetURI, aX, aY, aWidth, aHeight) {
+ var use = document.createElementNS(SVGNS, "use");
+ use.setAttributeNS(XLINKNS, "href", aTargetURI);
+ use.setAttribute("x", aX);
+ use.setAttribute("y", aY);
+ use.setAttribute("width", aWidth);
+ use.setAttribute("height", aHeight);
+ return use;
+}
+
+// Returns a <g> element filled with a grid of <use> elements which each
+// have the specified aWidth & aHeight and which reference <symbol> elements
+// with all possible values of preserveAspectRatio. Each <symbol> contains
+// a <use> that links to the given URI, aHref.
+//
+// The final "aBonusPARVal" argument (if specified) is used as the
+// preserveAspectRatio value on a bonus <symbol> element, added at the end.
+function generateSymbolGrid(aHref, aWidth, aHeight, aBonusPARVal) {
+ var grid = document.createElementNS(SVGNS, "g");
+ var y = 0;
+ var x = 0;
+ for (var i = 0; i < ALIGN_VALS.length; i++) {
+ // Jump to next line of grid, for every other "i" value.
+ // (every fourth entry)
+ if (i && i % 2 == 0) {
+ y += IMAGE_OFFSET;
+ x = 0;
+ }
+ var alignVal = ALIGN_VALS[i];
+ for (var j = 0; j < MEETORSLICE_VALS.length; j++) {
+ var meetorsliceVal = MEETORSLICE_VALS[j];
+ var border = generateBorderRect(x, y, aWidth, aHeight);
+
+ var symbolID = "symbol_" + alignVal + "_" + meetorsliceVal;
+ var symbol = generateSymbolElementForParams(symbolID, aHref,
+ alignVal, meetorsliceVal);
+ var use = generateUseElementForParams("#" + symbolID,
+ x, y, aWidth, aHeight);
+ grid.appendChild(symbol); // This isn't painted
+ grid.appendChild(border);
+ grid.appendChild(use);
+ x += IMAGE_OFFSET;
+ }
+ }
+
+ if (aBonusPARVal) {
+ // Add one final entry with "bonus" pAR value.
+ y += IMAGE_OFFSET;
+ x = 0;
+ var border = generateBorderRect(x, y, aWidth, aHeight);
+ var symbolID = "symbol_Bonus";
+ var symbol = generateSymbolElementForParams(symbolID, aHref,
+ aBonusPARVal, "");
+ var use = generateUseElementForParams("#" + symbolID,
+ x, y, aWidth, aHeight);
+ grid.appendChild(symbol); // This isn't painted
+ grid.appendChild(border);
+ grid.appendChild(use);
+ }
+
+ return grid;
+}
diff --git a/layout/reftests/svg/import-svg-01.html b/layout/reftests/svg/import-svg-01.html
new file mode 100644
index 0000000000..2ea66f4666
--- /dev/null
+++ b/layout/reftests/svg/import-svg-01.html
@@ -0,0 +1,22 @@
+<html class="reftest-wait">
+<head>
+<script>
+function setup() {
+ var data =
+ '<svg xmlns="http://www.w3.org/2000/svg" viewBox="-50 -100 50 100" width="100%" height="100%">' +
+ ' <rect transform="rotate(180,0,0)" fill="red" x="-50" y="-50" width="100" height="100" />'+
+ ' <rect fill="lime" x="-55" y="-55" width="110" height="110" />'+
+ '</svg>';
+ var drawing = document.getElementById("drawing");
+ var parser = new DOMParser();
+ var svg1 = document.importNode(parser.parseFromString(data, "text/xml").documentElement, true);
+ drawing.appendChild(svg1);
+ document.documentElement.className = "";
+}
+</script>
+</head>
+<body style="background-color: lime;" onload="setup()">
+<div id="drawing">
+</div>
+</body>
+</html>
diff --git a/layout/reftests/svg/invalid-text-01.svg b/layout/reftests/svg/invalid-text-01.svg
new file mode 100644
index 0000000000..fd8b12f48b
--- /dev/null
+++ b/layout/reftests/svg/invalid-text-01.svg
@@ -0,0 +1,15 @@
+<!--
+ 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 for invalid text</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=445687 -->
+
+ <rect width="100%" height="100%" fill="lime"/>
+
+ <text x="50" y="50" font-size="30"><tspan><text x="50" y="50" font-size="30">Should not see this</text></tspan></text>
+
+</svg>
diff --git a/layout/reftests/svg/lang-attribute-01.svg b/layout/reftests/svg/lang-attribute-01.svg
new file mode 100644
index 0000000000..ee66b8be4f
--- /dev/null
+++ b/layout/reftests/svg/lang-attribute-01.svg
@@ -0,0 +1,16 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" lang="foo">
+ <title>Test the 'lang' attribute in SVG</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=368840 -->
+ <style type="text/css">
+
+rect:lang(foo) {
+ fill: lime;
+}
+
+ </style>
+ <rect width="100%" height="100%" fill="red"/>
+</svg>
diff --git a/layout/reftests/svg/lang-attribute-02.svg b/layout/reftests/svg/lang-attribute-02.svg
new file mode 100644
index 0000000000..d63468cc0b
--- /dev/null
+++ b/layout/reftests/svg/lang-attribute-02.svg
@@ -0,0 +1,16 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" xml:lang="foo">
+ <title>Test the 'xml:lang' attribute in SVG</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=368840 -->
+ <style type="text/css">
+
+rect:lang(foo) {
+ fill: lime;
+}
+
+ </style>
+ <rect width="100%" height="100%" fill="red"/>
+</svg>
diff --git a/layout/reftests/svg/lang-attribute-03.svg b/layout/reftests/svg/lang-attribute-03.svg
new file mode 100644
index 0000000000..62ce918d12
--- /dev/null
+++ b/layout/reftests/svg/lang-attribute-03.svg
@@ -0,0 +1,16 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" xml:lang="foo" lang="bar">
+ <title>Test the 'xml:lang' attribute in SVG</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=368840 -->
+ <style type="text/css">
+
+rect:lang(foo) {
+ fill: lime;
+}
+
+ </style>
+ <rect width="100%" height="100%" fill="red"/>
+</svg>
diff --git a/layout/reftests/svg/linearGradient-basic-01.svg b/layout/reftests/svg/linearGradient-basic-01.svg
new file mode 100644
index 0000000000..63486368d8
--- /dev/null
+++ b/layout/reftests/svg/linearGradient-basic-01.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" >
+
+<title>Testcase for gradient</title>
+
+<!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=368840 -->
+
+ <defs>
+ <!-- No stops, like fill = none -->
+ <linearGradient id="nostops" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="0"/>
+ </defs>
+
+ <rect x="0%" y="0%" width="100%" height="100%" fill="lime"/>
+ <rect x="0%" y="0%" width="100%" height="100%" fill="url(#nostops)"/>
+</svg>
diff --git a/layout/reftests/svg/linearGradient-basic-02.svg b/layout/reftests/svg/linearGradient-basic-02.svg
new file mode 100644
index 0000000000..368363c711
--- /dev/null
+++ b/layout/reftests/svg/linearGradient-basic-02.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" >
+
+<title>Testcase for gradient</title>
+
+<!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=368840 -->
+
+ <defs>
+ <!-- One stop, like fill = stop-color -->
+ <linearGradient id="onestop" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="0">
+ <stop stop-color="lime" offset="1"/>
+ </linearGradient>
+ </defs>
+
+ <rect x="0%" y="0%" width="100%" height="100%" fill="red"/>
+ <rect x="0%" y="0%" width="100%" height="100%" fill="url(#onestop)"/>
+</svg>
diff --git a/layout/reftests/svg/linearGradient-basic-03-ref.svg b/layout/reftests/svg/linearGradient-basic-03-ref.svg
new file mode 100644
index 0000000000..2820cdd649
--- /dev/null
+++ b/layout/reftests/svg/linearGradient-basic-03-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" version="1.1"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Testing that spreadMethod="reflect" works</title>
+ <linearGradient id="g1" gradientUnits="objectBoundingBox" x1="0" x2="1">
+ <stop stop-color="blue" offset="0"/>
+ <stop stop-color="yellow" offset="1"/>
+ </linearGradient>
+ <linearGradient id="g2" gradientUnits="objectBoundingBox" x1="0" x2="1">
+ <stop stop-color="yellow" offset="0"/>
+ <stop stop-color="blue" offset="1"/>
+ </linearGradient>
+ <rect width="100" height="100" fill="url(#g1)"/>
+ <rect x="100" width="100" height="100" fill="url(#g2)"/>
+</svg>
diff --git a/layout/reftests/svg/linearGradient-basic-03.svg b/layout/reftests/svg/linearGradient-basic-03.svg
new file mode 100644
index 0000000000..3a5e3b5f1d
--- /dev/null
+++ b/layout/reftests/svg/linearGradient-basic-03.svg
@@ -0,0 +1,14 @@
+<!--
+ 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"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Testing that spreadMethod="reflect" works</title>
+ <linearGradient id="g" gradientUnits="objectBoundingBox"
+ x1="0" x2="0.5" spreadMethod="reflect">
+ <stop stop-color="blue" offset="0"/>
+ <stop stop-color="yellow" offset="1"/>
+ </linearGradient>
+ <rect width="200" height="100" fill="url(#g)"/>
+</svg>
diff --git a/layout/reftests/svg/linked-filter-01.svg b/layout/reftests/svg/linked-filter-01.svg
new file mode 100644
index 0000000000..226e792ef9
--- /dev/null
+++ b/layout/reftests/svg/linked-filter-01.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>Test for linked filter</title>
+ <defs>
+ <filter id="filter01" filterUnits="objectBoundingBox" x="0" y="0" width="1" height="1">
+ <feFlood flood-color="lime" />
+ </filter>
+ <filter id="filter02" xlink:href="#filter01"/>
+ </defs>
+
+ <rect width="100%" height="100%" fill="red"/>
+ <rect width="100%" height="100%" filter="url(#filter02)"/>
+</svg>
+
diff --git a/layout/reftests/svg/linked-pattern-01.svg b/layout/reftests/svg/linked-pattern-01.svg
new file mode 100644
index 0000000000..aef9df1258
--- /dev/null
+++ b/layout/reftests/svg/linked-pattern-01.svg
@@ -0,0 +1,19 @@
+<!--
+ 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>Test for linked pattern scaling</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=448906 -->
+ <defs>
+ <pattern id="pattern01" height="20" width="20"
+ patternTransform="scale(0.5)"
+ patternUnits="userSpaceOnUse">
+ <rect height="20" width="20" fill="lime" />
+ </pattern>
+ <pattern id="pattern02" xlink:href="#pattern01"/>
+ </defs>
+ <rect width="100%" height="100%" style="fill:url(#pattern02)" transform="scale(2)"/>
+</svg>
+
diff --git a/layout/reftests/svg/load-only/filter-primitives-01.svg b/layout/reftests/svg/load-only/filter-primitives-01.svg
new file mode 100644
index 0000000000..fa4ea14c54
--- /dev/null
+++ b/layout/reftests/svg/load-only/filter-primitives-01.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ class="reftest-wait">
+ <script>
+
+function test(e) {
+ var root = document.documentElement;
+ var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+ document.getElementById("feMerge").appendChild(rect);
+ root.removeAttribute("class")
+}
+
+window.addEventListener("MozReftestInvalidate", test, false);
+
+ </script>
+ <filter id="filter">
+ <feMerge id="feMerge"></feMerge>
+ </filter>
+</svg>
+
diff --git a/layout/reftests/svg/load-only/reftest.list b/layout/reftests/svg/load-only/reftest.list
new file mode 100644
index 0000000000..f98db03a32
--- /dev/null
+++ b/layout/reftests/svg/load-only/reftest.list
@@ -0,0 +1,3 @@
+
+load filter-primitives-01.svg
+
diff --git a/layout/reftests/svg/marker-attribute-01.svg b/layout/reftests/svg/marker-attribute-01.svg
new file mode 100644
index 0000000000..9ba365b75e
--- /dev/null
+++ b/layout/reftests/svg/marker-attribute-01.svg
@@ -0,0 +1,19 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+ <title>Test there is no 'marker' presentation attribute</title>
+ <!--
+ From https://bugzilla.mozilla.org/show_bug.cgi?id=350100
+
+ This test checks that the 'marker' presentation attribute is ignored.
+ -->
+ <defs>
+ <marker id="marker" markerWidth="40" markerHeight="40" refX="20" refY="20">
+ <circle cx="20" cy="20" r="20" fill="red"/>
+ </marker>
+ </defs>
+ <rect width="100%" height="100%" fill="lime"/>
+ <path d="M20,20 L60,20 L100,20" fill="none" stroke="none" marker="url(#marker)"/>
+</svg>
diff --git a/layout/reftests/svg/marker-css-transform-ref.html b/layout/reftests/svg/marker-css-transform-ref.html
new file mode 100644
index 0000000000..2a1a23c0be
--- /dev/null
+++ b/layout/reftests/svg/marker-css-transform-ref.html
@@ -0,0 +1,12 @@
+<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+ <defs>
+ <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5"
+ markerWidth="6" markerHeight="6"
+ orient="auto-start-reverse">
+ <path id="ap" transform="scale(2,2)" d="M 0 0 L 5 2.5 L 0 5 z" />
+ </marker>
+ </defs>
+
+ <polyline points="10,30 90,30" fill="none" stroke="black"
+ marker-start="url(#arrow)" marker-end="url(#arrow)" />
+</svg>
diff --git a/layout/reftests/svg/marker-css-transform.html b/layout/reftests/svg/marker-css-transform.html
new file mode 100644
index 0000000000..5903008f67
--- /dev/null
+++ b/layout/reftests/svg/marker-css-transform.html
@@ -0,0 +1,17 @@
+<style>
+#ap {
+ transform: scale(2,2);
+}
+</style>
+<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+ <defs>
+ <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5"
+ markerWidth="6" markerHeight="6"
+ orient="auto-start-reverse">
+ <path id="ap" d="M 0 0 L 5 2.5 L 0 5 z" />
+ </marker>
+ </defs>
+
+ <polyline points="10,30 90,30" fill="none" stroke="black"
+ marker-start="url(#arrow)" marker-end="url(#arrow)" />
+</svg>
diff --git a/layout/reftests/svg/marker-dynamic-opacity-ref.html b/layout/reftests/svg/marker-dynamic-opacity-ref.html
new file mode 100644
index 0000000000..605b74d3d8
--- /dev/null
+++ b/layout/reftests/svg/marker-dynamic-opacity-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<svg>
+ <defs>
+ <marker id="Triangle" viewBox="0 0 10 10" refX="1" refY="5"
+ markerWidth="6" markerHeight="6" orient="auto"
+ style="opacity: 0.2">
+ <path d="M 0 0 L 10 5 L 0 10 z" />
+ </marker>
+ </defs>
+ <polyline points="10,90 50,80 90,20" fill="none" stroke="black"
+ stroke-width="2" marker-end="url(#Triangle)" />
+</svg>
diff --git a/layout/reftests/svg/marker-dynamic-opacity.html b/layout/reftests/svg/marker-dynamic-opacity.html
new file mode 100644
index 0000000000..d4887fe808
--- /dev/null
+++ b/layout/reftests/svg/marker-dynamic-opacity.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <svg>
+ <defs>
+ <marker id="Triangle" viewBox="0 0 10 10" refX="1" refY="5"
+ markerWidth="6" markerHeight="6" orient="auto">
+ <path d="M 0 0 L 10 5 L 0 10 z" />
+ </marker>
+ </defs>
+ <polyline points="10,90 50,80 90,20" fill="none" stroke="black"
+ stroke-width="2" marker-end="url(#Triangle)" />
+ </svg>
+ <script>
+ onload = function() {
+ var m = document.querySelector("marker");
+ m.style.opacity = 0.2;
+ document.documentElement.className = "";
+ }
+ </script>
+</html>
diff --git a/layout/reftests/svg/marker-effects-01-ref.svg b/layout/reftests/svg/marker-effects-01-ref.svg
new file mode 100644
index 0000000000..116d2dda3f
--- /dev/null
+++ b/layout/reftests/svg/marker-effects-01-ref.svg
@@ -0,0 +1,44 @@
+<!--
+ 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 clip-path, filter, mask and opacity applying to marker elements</title>
+ <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=874507 -->
+ <defs>
+ <clipPath id="c">
+ <circle cx="50" cy="50" r="50"/>
+ </clipPath>
+ <filter id="f">
+ <feColorMatrix type="saturate" values="0"/>
+ </filter>
+ <mask id="m">
+ <circle cx="50" cy="50" r="50" fill="white"/>
+ </mask>
+ <marker id="m-clip-path" markerWidth="100" markerHeight="100" fill="green">
+ <g clip-path="url(#c)">
+ <rect width="100" height="100"/>
+ </g>
+ </marker>
+ <marker id="m-filter" markerWidth="100" markerHeight="100" fill="green">
+ <g filter="url(#f)">
+ <rect width="100" height="100"/>
+ </g>
+ </marker>
+ <marker id="m-mask" markerWidth="100" markerHeight="100" fill="green">
+ <g mask="url(#m)">
+ <rect width="100" height="100"/>
+ </g>
+ </marker>
+ <marker id="m-opacity" markerWidth="100" markerHeight="100" fill="green">
+ <g opacity="0.5">
+ <rect width="100" height="100"/>
+ </g>
+ </marker>
+ </defs>
+
+ <line x1="10" y1="10" x2="11" y2="10" marker-start="url(#m-clip-path)"/>
+ <line x1="120" y1="10" x2="121" y2="10" marker-start="url(#m-filter)"/>
+ <line x1="230" y1="10" x2="231" y2="10" marker-start="url(#m-mask)"/>
+ <line x1="340" y1="10" x2="341" y2="10" marker-start="url(#m-opacity)"/>
+</svg>
diff --git a/layout/reftests/svg/marker-effects-01.svg b/layout/reftests/svg/marker-effects-01.svg
new file mode 100644
index 0000000000..b438b0725a
--- /dev/null
+++ b/layout/reftests/svg/marker-effects-01.svg
@@ -0,0 +1,36 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+ <title>Test that clip-path, filter, mask and opacity apply to marker elements</title>
+ <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=874507 -->
+ <defs>
+ <clipPath id="c">
+ <circle cx="50" cy="50" r="50"/>
+ </clipPath>
+ <filter id="f">
+ <feColorMatrix type="saturate" values="0"/>
+ </filter>
+ <mask id="m">
+ <circle cx="50" cy="50" r="50" fill="white"/>
+ </mask>
+ <marker id="m-clip-path" markerWidth="100" markerHeight="100" fill="green" clip-path="url(#c)">
+ <rect width="100" height="100"/>
+ </marker>
+ <marker id="m-filter" markerWidth="100" markerHeight="100" fill="green" filter="url(#f)">
+ <rect width="100" height="100"/>
+ </marker>
+ <marker id="m-mask" markerWidth="100" markerHeight="100" fill="green" mask="url(#m)">
+ <rect width="100" height="100"/>
+ </marker>
+ <marker id="m-opacity" markerWidth="100" markerHeight="100" fill="green" opacity="0.5">
+ <rect width="100" height="100"/>
+ </marker>
+ </defs>
+
+ <line x1="10" y1="10" x2="11" y2="10" marker-start="url(#m-clip-path)"/>
+ <line x1="120" y1="10" x2="121" y2="10" marker-start="url(#m-filter)"/>
+ <line x1="230" y1="10" x2="231" y2="10" marker-start="url(#m-mask)"/>
+ <line x1="340" y1="10" x2="341" y2="10" marker-start="url(#m-opacity)"/>
+</svg>
diff --git a/layout/reftests/svg/marker-orientation-01-ref.svg b/layout/reftests/svg/marker-orientation-01-ref.svg
new file mode 100644
index 0000000000..00cc9a3a4a
--- /dev/null
+++ b/layout/reftests/svg/marker-orientation-01-ref.svg
@@ -0,0 +1,68 @@
+<!--
+ 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 test that marker orientation is correct at the end of arcs</title>
+ <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=769115 -->
+
+ <defs>
+ <g id="m1" transform="translate(-20,-20)" fill="blue">
+ <rect x="5" y="15" width="22" height="10"/>
+ <path d="M 25,10 35,20 25,30 z"/>
+ </g>
+
+ <g id="m2" transform="translate(-20,-20)" fill="red">
+ <rect x="5" y="15" width="22" height="10"/>
+ <path d="M 25,10 35,20 25,30 z"/>
+ </g>
+ </defs>
+
+ <g fill="none">
+ <!-- arcs that go from the left of the circle to... -->
+ <g>
+ <!-- ...90 degrees anti-clockwise -->
+ <use xlink:href="#m1" transform="translate(100,100)rotate(90)"/>
+ <use xlink:href="#m2" transform="rotate(-90,150,100)translate(100,100)rotate(90)"/>
+ <!-- ...180 degrees anti-clockwise -->
+ <use xlink:href="#m2" transform="rotate(-180,150,100)translate(100,100)rotate(90)"/>
+ <!-- ...270 degrees anti-clockwise -->
+ <use xlink:href="#m2" transform="rotate(-270,150,100)translate(100,100)rotate(90)"/>
+ </g>
+
+ <!-- arcs that go from the left of the circle to... -->
+ <g transform="translate(250,0)">
+ <!-- ...90 degrees anti-clockwise -->
+ <use xlink:href="#m1" transform="translate(100,100)rotate(-90)"/>
+ <use xlink:href="#m2" transform="rotate(90,150,100)translate(100,100)rotate(-90)"/>
+ <!-- ...180 degrees anti-clockwise -->
+ <use xlink:href="#m2" transform="rotate(180,150,100)translate(100,100)rotate(-90)"/>
+ <!-- ...270 degrees anti-clockwise -->
+ <use xlink:href="#m2" transform="rotate(270,150,100)translate(100,100)rotate(-90)"/>
+ </g>
+
+ <!-- arcs that go from the right of the circle to... -->
+ <g transform="translate(0,250)">
+ <!-- ...90 degrees anti-clockwise -->
+ <use xlink:href="#m1" transform="translate(200,100)rotate(90)"/>
+ <use xlink:href="#m2" transform="rotate(90,150,100)translate(200,100)rotate(90)"/>
+ <!-- ...180 degrees anti-clockwise -->
+ <use xlink:href="#m2" transform="rotate(180,150,100)translate(200,100)rotate(90)"/>
+ <!-- ...270 degrees anti-clockwise -->
+ <use xlink:href="#m2" transform="rotate(270,150,100)translate(200,100)rotate(90)"/>
+ </g>
+
+ <!-- arcs that go from the right of the circle to... -->
+ <g transform="translate(250,250)">
+ <!-- ...90 degrees clockwise -->
+ <use xlink:href="#m1" transform="translate(200,100)rotate(-90)"/>
+ <use xlink:href="#m2" transform="rotate(-90,150,100)translate(200,100)rotate(-90)"/>
+ <!-- ...180 degrees clockwise -->
+ <use xlink:href="#m2" transform="rotate(-180,150,100)translate(200,100)rotate(-90)"/>
+ <!-- ...270 degrees clockwise -->
+ <use xlink:href="#m2" transform="rotate(-270,150,100)translate(200,100)rotate(-90)"/>
+ </g>
+ </g>
+
+</svg>
diff --git a/layout/reftests/svg/marker-orientation-01.svg b/layout/reftests/svg/marker-orientation-01.svg
new file mode 100644
index 0000000000..350c43d7b4
--- /dev/null
+++ b/layout/reftests/svg/marker-orientation-01.svg
@@ -0,0 +1,63 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+ <title>Test that marker orientation is correct at the end of arcs</title>
+ <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=769115 -->
+
+ <marker id="m1" markerWidth="40" markerHeight="40" refX="20" refY="20"
+ markerUnits="userSpaceOnUse" orient="auto" fill="blue">
+ <rect x="5" y="15" width="22" height="10"/>
+ <path d="M 25,10 35,20 25,30 z"/>
+ </marker>
+
+ <marker id="m2" markerWidth="40" markerHeight="40" refX="20" refY="20"
+ markerUnits="userSpaceOnUse" orient="auto" fill="red">
+ <rect x="5" y="15" width="22" height="10"/>
+ <path d="M 25,10 35,20 25,30 z"/>
+ </marker>
+
+ <g fill="none">
+ <!-- arcs that go from the left of the circle to... -->
+ <g marker-end="url(#m2)">
+ <!-- ...90 degrees anti-clockwise -->
+ <path d="M100,100 A 50,50 0 1 0 150,50" marker-start="url(#m1)"/>
+ <!-- ...180 degrees anti-clockwise -->
+ <path d="M100,100 A 50,50 0 0 0 200,100"/>
+ <!-- ...270 degrees anti-clockwise -->
+ <path d="M100,100 A 50,50 0 0 0 150,150"/>
+ </g>
+
+ <!-- arcs that go from the left of the circle to... -->
+ <g marker-end="url(#m2)" transform="translate(250,0)">
+ <!-- ...90 degrees clockwise -->
+ <path d="M100,100 A 50,50 0 0 1 150,50" marker-start="url(#m1)"/>
+ <!-- ...180 degrees clockwise -->
+ <path d="M100,100 A 50,50 0 1 1 200,100"/>
+ <!-- ...270 degrees clockwise -->
+ <path d="M100,100 A 50,50 0 1 1 150,150"/>
+ </g>
+
+ <!-- arcs that go from the right of the circle to... -->
+ <g marker-end="url(#m2)" transform="translate(0,250)">
+ <!-- ...90 degrees anti-clockwise -->
+ <path d="M200,100 A 50,50 0 0 1 150,150" marker-start="url(#m1)"/>
+ <!-- ...180 degrees anti-clockwise -->
+ <path d="M200,100 A 50,50 0 0 1 100,100"/>
+ <!-- ...270 degrees anti-clockwise -->
+ <path d="M200,100 A 50,50 0 1 1 150,50"/>
+ </g>
+
+ <!-- arcs that go from the right of the circle to... -->
+ <g marker-end="url(#m2)" transform="translate(250,250)">
+ <!-- ...90 degrees anti-clockwise -->
+ <path d="M200,100 A 50,50 0 0 0 150,50" marker-start="url(#m1)"/>
+ <!-- ...180 degrees anti-clockwise -->
+ <path d="M200,100 A 50,50 0 1 0 100,100"/>
+ <!-- ...270 degrees anti-clockwise -->
+ <path d="M200,100 A 50,50 0 1 0 150,150"/>
+ </g>
+ </g>
+
+</svg>
diff --git a/layout/reftests/svg/marker-orientation-02-ref.svg b/layout/reftests/svg/marker-orientation-02-ref.svg
new file mode 100644
index 0000000000..0dc75c1f2c
--- /dev/null
+++ b/layout/reftests/svg/marker-orientation-02-ref.svg
@@ -0,0 +1,69 @@
+<!--
+ 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 test that marker orientation is correct at the end of
+ arcs when orient="auto-start-reverse" is used</title>
+ <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=769115 -->
+
+ <defs>
+ <g id="m1" transform="translate(-20,-20)" fill="blue">
+ <rect x="5" y="15" width="22" height="10"/>
+ <path d="M 25,10 35,20 25,30 z"/>
+ </g>
+
+ <g id="m2" transform="translate(-20,-20)" fill="red">
+ <rect x="5" y="15" width="22" height="10"/>
+ <path d="M 25,10 35,20 25,30 z"/>
+ </g>
+ </defs>
+
+ <g fill="none">
+ <!-- arcs that go from the left of the circle to... -->
+ <g>
+ <!-- ...90 degrees anti-clockwise -->
+ <use xlink:href="#m1" transform="translate(100,100)rotate(270)"/>
+ <use xlink:href="#m2" transform="rotate(-90,150,100)translate(100,100)rotate(90)"/>
+ <!-- ...180 degrees anti-clockwise -->
+ <use xlink:href="#m2" transform="rotate(-180,150,100)translate(100,100)rotate(90)"/>
+ <!-- ...270 degrees anti-clockwise -->
+ <use xlink:href="#m2" transform="rotate(-270,150,100)translate(100,100)rotate(90)"/>
+ </g>
+
+ <!-- arcs that go from the left of the circle to... -->
+ <g transform="translate(250,0)">
+ <!-- ...90 degrees anti-clockwise -->
+ <use xlink:href="#m1" transform="translate(100,100)rotate(90)"/>
+ <use xlink:href="#m2" transform="rotate(90,150,100)translate(100,100)rotate(-90)"/>
+ <!-- ...180 degrees anti-clockwise -->
+ <use xlink:href="#m2" transform="rotate(180,150,100)translate(100,100)rotate(-90)"/>
+ <!-- ...270 degrees anti-clockwise -->
+ <use xlink:href="#m2" transform="rotate(270,150,100)translate(100,100)rotate(-90)"/>
+ </g>
+
+ <!-- arcs that go from the right of the circle to... -->
+ <g transform="translate(0,250)">
+ <!-- ...90 degrees anti-clockwise -->
+ <use xlink:href="#m1" transform="translate(200,100)rotate(270)"/>
+ <use xlink:href="#m2" transform="rotate(90,150,100)translate(200,100)rotate(90)"/>
+ <!-- ...180 degrees anti-clockwise -->
+ <use xlink:href="#m2" transform="rotate(180,150,100)translate(200,100)rotate(90)"/>
+ <!-- ...270 degrees anti-clockwise -->
+ <use xlink:href="#m2" transform="rotate(270,150,100)translate(200,100)rotate(90)"/>
+ </g>
+
+ <!-- arcs that go from the right of the circle to... -->
+ <g transform="translate(250,250)">
+ <!-- ...90 degrees clockwise -->
+ <use xlink:href="#m1" transform="translate(200,100)rotate(90)"/>
+ <use xlink:href="#m2" transform="rotate(-90,150,100)translate(200,100)rotate(-90)"/>
+ <!-- ...180 degrees clockwise -->
+ <use xlink:href="#m2" transform="rotate(-180,150,100)translate(200,100)rotate(-90)"/>
+ <!-- ...270 degrees clockwise -->
+ <use xlink:href="#m2" transform="rotate(-270,150,100)translate(200,100)rotate(-90)"/>
+ </g>
+ </g>
+
+</svg>
diff --git a/layout/reftests/svg/marker-orientation-02.svg b/layout/reftests/svg/marker-orientation-02.svg
new file mode 100644
index 0000000000..ec9d845aad
--- /dev/null
+++ b/layout/reftests/svg/marker-orientation-02.svg
@@ -0,0 +1,64 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+ <title>Test that marker orientation is correct at the end of arcs when
+ orient="auto-start-reverse" is used</title>
+ <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=769115 -->
+
+ <marker id="m1" markerWidth="40" markerHeight="40" refX="20" refY="20"
+ markerUnits="userSpaceOnUse" orient="auto-start-reverse" fill="blue">
+ <rect x="5" y="15" width="22" height="10"/>
+ <path d="M 25,10 35,20 25,30 z"/>
+ </marker>
+
+ <marker id="m2" markerWidth="40" markerHeight="40" refX="20" refY="20"
+ markerUnits="userSpaceOnUse" orient="auto-start-reverse" fill="red">
+ <rect x="5" y="15" width="22" height="10"/>
+ <path d="M 25,10 35,20 25,30 z"/>
+ </marker>
+
+ <g fill="none">
+ <!-- arcs that go from the left of the circle to... -->
+ <g marker-end="url(#m2)">
+ <!-- ...90 degrees anti-clockwise -->
+ <path d="M100,100 A 50,50 0 1 0 150,50" marker-start="url(#m1)"/>
+ <!-- ...180 degrees anti-clockwise -->
+ <path d="M100,100 A 50,50 0 0 0 200,100"/>
+ <!-- ...270 degrees anti-clockwise -->
+ <path d="M100,100 A 50,50 0 0 0 150,150"/>
+ </g>
+
+ <!-- arcs that go from the left of the circle to... -->
+ <g marker-end="url(#m2)" transform="translate(250,0)">
+ <!-- ...90 degrees clockwise -->
+ <path d="M100,100 A 50,50 0 0 1 150,50" marker-start="url(#m1)"/>
+ <!-- ...180 degrees clockwise -->
+ <path d="M100,100 A 50,50 0 1 1 200,100"/>
+ <!-- ...270 degrees clockwise -->
+ <path d="M100,100 A 50,50 0 1 1 150,150"/>
+ </g>
+
+ <!-- arcs that go from the right of the circle to... -->
+ <g marker-end="url(#m2)" transform="translate(0,250)">
+ <!-- ...90 degrees anti-clockwise -->
+ <path d="M200,100 A 50,50 0 0 1 150,150" marker-start="url(#m1)"/>
+ <!-- ...180 degrees anti-clockwise -->
+ <path d="M200,100 A 50,50 0 0 1 100,100"/>
+ <!-- ...270 degrees anti-clockwise -->
+ <path d="M200,100 A 50,50 0 1 1 150,50"/>
+ </g>
+
+ <!-- arcs that go from the right of the circle to... -->
+ <g marker-end="url(#m2)" transform="translate(250,250)">
+ <!-- ...90 degrees anti-clockwise -->
+ <path d="M200,100 A 50,50 0 0 0 150,50" marker-start="url(#m1)"/>
+ <!-- ...180 degrees anti-clockwise -->
+ <path d="M200,100 A 50,50 0 1 0 100,100"/>
+ <!-- ...270 degrees anti-clockwise -->
+ <path d="M200,100 A 50,50 0 1 0 150,150"/>
+ </g>
+ </g>
+
+</svg>
diff --git a/layout/reftests/svg/marker-orientation-03.svg b/layout/reftests/svg/marker-orientation-03.svg
new file mode 100644
index 0000000000..1bd365df9b
--- /dev/null
+++ b/layout/reftests/svg/marker-orientation-03.svg
@@ -0,0 +1,15 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+ <defs>
+ <marker id="startMarker" markerUnits="userSpaceOnUse" orient="auto" markerWidth="30" markerHeight="45" refX="15" refY="22.5">
+ <rect fill="red" x="0.5" y="0.5" width="29" height="44"/>
+ </marker>
+ </defs>
+ <rect width="100%" height="100%" fill="lime"/>
+ <polyline fill="none" marker-start="url(#startMarker)" points="190 40 220 40 310 190 340 190"/>
+ <rect x="175" y="18" width="30" height="45" fill="lime" />
+
+</svg>
diff --git a/layout/reftests/svg/marker-orientation-04.svg b/layout/reftests/svg/marker-orientation-04.svg
new file mode 100644
index 0000000000..3fb2fdd0b9
--- /dev/null
+++ b/layout/reftests/svg/marker-orientation-04.svg
@@ -0,0 +1,39 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+ <defs>
+ <marker id="redTriangle"
+ refX="0" refY="12" markerUnits="userSpaceOnUse"
+ markerWidth="24" markerHeight="24" orient="auto">
+ <path fill="red" d="M 0 0 L 24 12 L 0 24 z" />
+ </marker>
+ <marker id="limeTriangle"
+ refX="0" refY="12" markerUnits="userSpaceOnUse"
+ markerWidth="24" markerHeight="24" orient="auto" overflow="visible">
+ <path fill="lime" stroke-width="3" stroke="lime" d="M 0 0 L 24 12 L 0 24 z" />
+ </marker>
+ <marker id="reverseLimeTriangle"
+ refX="0" refY="12" markerUnits="userSpaceOnUse"
+ markerWidth="24" markerHeight="24" orient="auto" overflow="visible">
+ <path transform="rotate(180, 0, 12)" fill="lime" stroke-width="3" stroke="lime" d="M 0 0 L 24 12 L 0 24 z" />
+ </marker>
+ </defs>
+
+ <rect width="100%" height="100%" fill="lime"/>
+
+ <!-- Control point vectors are zero -->
+ <path d="M 50,125 C 50,125, 100,25, 100,25" stroke-width="10" stroke="red"
+ marker-end="url(#redTriangle)" />
+
+ <path d="M 150,125 C 200,25, 200,25, 200,25" stroke-width="10" stroke="red"
+ marker-end="url(#redTriangle)" />
+
+ <!-- Non-degenerate covering -->
+ <path d="M 50,125 L 100,25" stroke-width="13" stroke="lime"
+ marker-end="url(#limeTriangle)" marker-start="url(#reverseLimeTriangle)" />
+
+ <path d="M 150,125 L 200,25" stroke-width="13" stroke="lime"
+ marker-end="url(#limeTriangle)" marker-start="url(#reverseLimeTriangle)" />
+</svg>
diff --git a/layout/reftests/svg/marker-orientation-05.svg b/layout/reftests/svg/marker-orientation-05.svg
new file mode 100644
index 0000000000..129e14cf20
--- /dev/null
+++ b/layout/reftests/svg/marker-orientation-05.svg
@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
+ <defs>
+ <marker id="arrowAutoStartRev" orient="auto-start-reverse" markerUnits="userSpaceOnUse" overflow="visible">
+ <path d="M25,25 L0,0 L0,50 z" fill="lime" stroke="lime" stroke-width="2" />
+ </marker>
+ <marker id="arrowSW" orient="135" markerUnits="userSpaceOnUse" overflow="visible">
+ <path d="M25,25 L0,0 L0,50 z" fill="red"/>
+ </marker>
+ <marker id="arrowAuto" orient="auto" markerUnits="userSpaceOnUse" overflow="visible">
+ <path d="M25,25 L0,0 L0,50 z" fill="red"/>
+ </marker>
+ </defs>
+ <rect width="100%" height="100%" fill="lime" />
+ <path d="M 340,100 h50 v50 h-50 z" marker-start="url(#arrowSW)" fill="none"/>
+ <path d="M 340,100 h50 v50 h-50 z" marker-start="url(#arrowAutoStartRev)" fill="none"/>
+ <g transform="translate(0, 50)">
+ <path d="M 340,100 h50 v50 h-50 z" marker-start="url(#arrowAuto)" fill="none"/>
+ <path d="M 340,100 h50 v50 h-50 z" marker-end="url(#arrowAutoStartRev)" fill="none"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/marker-viewBox-01-ref.svg b/layout/reftests/svg/marker-viewBox-01-ref.svg
new file mode 100644
index 0000000000..9a57366631
--- /dev/null
+++ b/layout/reftests/svg/marker-viewBox-01-ref.svg
@@ -0,0 +1,15 @@
+<!--
+ 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 the 'marker' element with viewBox and preserveAspectRatio</title>
+ <!--
+ From https://bugzilla.mozilla.org/show_bug.cgi?id=487649
+
+ This test checks that when the 'marker' support for viewBox
+ and preserveAspectRatio. You should see what appears to be
+ a blue circle right in the top left of the window.
+ -->
+ <ellipse cx="20" cy="20" rx="20" ry="20" fill="blue"/>
+</svg>
diff --git a/layout/reftests/svg/marker-viewBox-01.svg b/layout/reftests/svg/marker-viewBox-01.svg
new file mode 100644
index 0000000000..84afb97ee8
--- /dev/null
+++ b/layout/reftests/svg/marker-viewBox-01.svg
@@ -0,0 +1,19 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+ <title>Test the 'marker' element with viewBox and preserveAspectRatio</title>
+ <!--
+ From https://bugzilla.mozilla.org/show_bug.cgi?id=487649
+
+ This test checks that when the 'marker' support for viewBox
+ and preserveAspectRatio. You should see what appears to be
+ a blue circle right in the top left of the window.
+ -->
+ <marker id="marker" markerUnits="userSpaceOnUse" markerWidth="40" markerHeight="40"
+ viewBox="10 0 20 40" preserveAspectRatio="none" refX="20" refY="20">
+ <ellipse cx="20" cy="20" rx="10" ry="20" fill="blue"/>
+ </marker>
+ <path d="M20,20 L20,21" fill="none" stroke="none" marker-start="url(#marker)"/>
+</svg>
diff --git a/layout/reftests/svg/markers-and-group-opacity-01-ref.svg b/layout/reftests/svg/markers-and-group-opacity-01-ref.svg
new file mode 100644
index 0000000000..14299cf9ec
--- /dev/null
+++ b/layout/reftests/svg/markers-and-group-opacity-01-ref.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <rect width="100%" height="200%" fill="white"/>
+ <rect width="100%" height="200%" fill="blue" fill-opacity=".5"/>
+</svg>
diff --git a/layout/reftests/svg/markers-and-group-opacity-01.svg b/layout/reftests/svg/markers-and-group-opacity-01.svg
new file mode 100644
index 0000000000..18b7d807c0
--- /dev/null
+++ b/layout/reftests/svg/markers-and-group-opacity-01.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">
+
+ <title>Test that markers are affected by group opacity on the marked element</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=524104 -->
+
+ <marker id="mark" markerUnits="userSpaceOnUse" markerContentUnits="userSpaceOnUse" markerWidth="100%" markerHeight="200%" refX="0" refY="0">
+ <rect width="100%" height="200%" fill="blue"/>
+ </marker>
+
+ <line x1="0" y1="-1" x2="1" y2="-1" fill="none" stroke="black" opacity=".5" marker-start="url(#mark)"/>
+
+</svg>
diff --git a/layout/reftests/svg/mask-and-clipPath-2.svg b/layout/reftests/svg/mask-and-clipPath-2.svg
new file mode 100644
index 0000000000..2069bae7f2
--- /dev/null
+++ b/layout/reftests/svg/mask-and-clipPath-2.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">
+ <defs>
+ <polygon id="p" points="0.25,0 0.75,0 0.75,1 0.25,1"/>
+ <clipPath id="cp" clipPathUnits="objectBoundingBox">
+ <use xlink:href="#p"/>
+ </clipPath>
+ <mask id="m" maskContentUnits="objectBoundingBox">
+ <rect x="0" y="0.25" width="1" height="0.5" fill="white"/>
+ </mask>
+ </defs>
+ <rect width="100%" height="100%" fill="lime"/>
+ <rect x="101" y="101" width="198" height="198" fill="red"/>
+ <rect width="400" height="400" fill="lime" mask="url(#m)" clip-path="url(#cp)"
+ x="-400" y="-400" transform="translate(400,400)"/>
+</svg>
+
diff --git a/layout/reftests/svg/mask-and-clipPath-ref.html b/layout/reftests/svg/mask-and-clipPath-ref.html
new file mode 100644
index 0000000000..86098fa835
--- /dev/null
+++ b/layout/reftests/svg/mask-and-clipPath-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
+ </head>
+ <body>
+ <svg height="100%" preserveAspectRatio="none meet" viewBox="0 0 1070 462" width="100%">
+ <g height="462" width="1070">
+ <g mask="url(#mask-1)" transform="translate(0,10)">
+ <g>
+ <path class="data-line" d="M30,260L61,266.5L900,266.5" fill="none" stroke="#cc0000" stroke-width="20" visibility="visible">
+ </path>
+ </g>
+ </g>
+ </g>
+ <g>
+ <g>
+ <mask id="mask-1">
+ <rect fill="#000" height="100%" width="100%" x="0" y="0">
+ </rect>
+ <rect fill="#fff" height="462" width="400" x="40" y="-10">
+ </rect>
+ <rect fill="#fff" height="460" width="100" x="800" y="-10">
+ </rect>
+ <rect fill="#000" height="447" offset="164" width="60" x="164" y="0">
+ </rect>
+ <rect fill="#000" height="447" offset="376" width="56" x="376" y="0">
+ </rect>
+ </mask>
+ </g>
+ </g>
+ </svg>
+ </body>
+</html>
diff --git a/layout/reftests/svg/mask-and-clipPath.html b/layout/reftests/svg/mask-and-clipPath.html
new file mode 100644
index 0000000000..19759a6a31
--- /dev/null
+++ b/layout/reftests/svg/mask-and-clipPath.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
+ </head>
+ <body>
+ <svg height="100%" preserveAspectRatio="none meet" viewBox="0 0 1070 462" width="100%">
+ <g height="462" width="1070">
+ <g clip-path="url(#clip-1)" mask="url(#mask-1)" transform="translate(0,10)">
+ <g>
+ <path class="data-line" d="M30,260L61,266.5L900,266.5" fill="none" stroke="#cc0000" stroke-width="20" visibility="visible">
+ </path>
+ </g>
+ </g>
+ </g>
+ <g>
+ <clipPath id="clip-1">
+ <rect height="462" width="400" x="40" y="-10">
+ </rect>
+ <rect height="460" width="100" x="800" y="-10">
+ </rect>
+ </clipPath>
+ <g>
+ <mask id="mask-1">
+ <rect fill="#fff" height="100%" width="100%" x="0" y="0">
+ </rect>
+ <rect fill="#000" height="447" offset="164" width="60" x="164" y="0">
+ </rect>
+ <rect fill="#000" height="447" offset="376" width="56" x="376" y="0">
+ </rect>
+ </mask>
+ </g>
+ </g>
+ </svg>
+ </body>
+</html>
diff --git a/layout/reftests/svg/mask-basic-01.svg b/layout/reftests/svg/mask-basic-01.svg
new file mode 100644
index 0000000000..99764efa05
--- /dev/null
+++ b/layout/reftests/svg/mask-basic-01.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" >
+
+ <title>Testcase for mask that can't be resolved</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=620144 -->
+
+ <rect width="100%" height="100%" fill="red"/>
+ <rect width="100%" height="100%" fill="lime" mask="url(#null)"/>
+</svg>
diff --git a/layout/reftests/svg/mask-basic-02-ref.svg b/layout/reftests/svg/mask-basic-02-ref.svg
new file mode 100644
index 0000000000..ac4e7f3f32
--- /dev/null
+++ b/layout/reftests/svg/mask-basic-02-ref.svg
@@ -0,0 +1,11 @@
+<!--
+ 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 that mask defaults to sRGB</title>
+
+ <rect width="100" height="100" x="100" y="100" fill="#FFC0C0"/>
+
+</svg>
diff --git a/layout/reftests/svg/mask-basic-02.svg b/layout/reftests/svg/mask-basic-02.svg
new file mode 100644
index 0000000000..71204df0e7
--- /dev/null
+++ b/layout/reftests/svg/mask-basic-02.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>Testcase that mask defaults to sRGB</title>
+
+ <defs>
+ <mask id="mask" maskContentUnits="objectBoundingBox">
+ <rect width="1" height="1" fill="#3f3f3f" />
+ </mask>
+ </defs>
+
+ <rect width="100" height="100" x="100" y="100" mask="url(#mask)" fill="#FF0000"/>
+
+</svg>
diff --git a/layout/reftests/svg/mask-basic-03.svg b/layout/reftests/svg/mask-basic-03.svg
new file mode 100644
index 0000000000..6358507883
--- /dev/null
+++ b/layout/reftests/svg/mask-basic-03.svg
@@ -0,0 +1,19 @@
+<!--
+ 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">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=779029 -->
+
+ <title>Test that the x/y/width/height attributes work on the mask element</title>
+
+ <mask id="mask" x="20%" y="20%" width="60%" height="60%">
+ <rect width="1000" height="1000" fill="white"/>
+ </mask>
+
+ <rect width="100%" height="100%" fill="lime"/>
+ <rect x="50" y="50" width="100" height="100" fill="red" mask="url(#mask)"/>
+ <rect x="70" y="70" width="60" height="60" fill="lime"/>
+
+</svg>
diff --git a/layout/reftests/svg/mask-basic-04.svg b/layout/reftests/svg/mask-basic-04.svg
new file mode 100644
index 0000000000..db90104bf9
--- /dev/null
+++ b/layout/reftests/svg/mask-basic-04.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">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=995813 -->
+
+ <title>Test mapped attributes work on the mask element</title>
+
+ <mask id="mask" fill="white" maskContentUnits="objectBoundingBox">
+ <rect width="100%" height="100%"/>
+ </mask>
+
+ <rect width="100%" height="100%" fill="red"/>
+ <rect width="100%" height="100%" fill="lime" mask="url(#mask)"/>
+
+</svg>
diff --git a/layout/reftests/svg/mask-basic-05.svg b/layout/reftests/svg/mask-basic-05.svg
new file mode 100644
index 0000000000..c98e81b1f1
--- /dev/null
+++ b/layout/reftests/svg/mask-basic-05.svg
@@ -0,0 +1,12 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
+ <title>Testcase for mask that can't be resolved</title>
+ <rect width="100%" height="100%" fill="red"/>
+ <g mask="url(#foo)">
+ <!-- Draw a line path with zero area -->
+ <path stroke="lime" stroke-width="200%" d="M0,50L100,50"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/mask-containing-masked-content-01.svg b/layout/reftests/svg/mask-containing-masked-content-01.svg
new file mode 100644
index 0000000000..eb672a9771
--- /dev/null
+++ b/layout/reftests/svg/mask-containing-masked-content-01.svg
@@ -0,0 +1,19 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+ <title>Test 'mask' containing masked content</title>
+ <mask id="m1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
+ <rect width="0.5" height="1" fill="white"/>
+ </mask>
+ <mask id="m2" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
+ <rect width="1" height="1" fill="white" mask="url(#m1)"/>
+ </mask>
+ <rect width="100%" height="100%" fill="lime"/>
+ <rect width="50" height="100%" fill="red"/>
+ <g mask="url(#m2)">
+ <rect width="50" height="100%" fill="lime"/>
+ <rect x="50" width="50" height="100%" fill="red"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/mask-contains-inner-svg-01.svg b/layout/reftests/svg/mask-contains-inner-svg-01.svg
new file mode 100644
index 0000000000..619fe66ea9
--- /dev/null
+++ b/layout/reftests/svg/mask-contains-inner-svg-01.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg">
+ <defs>
+ <mask id="myMask">
+ <svg x="50%" overflow="visible">
+ <polygon fill="white" points="-50 0 50 0 50 100 -50 100"/>
+ </svg>
+ </mask>
+ </defs>
+ <rect width="100%" height="100%" fill="lime"/>
+ <circle cx="50%" cy="50" r="40" fill="red"/>
+ <rect mask="url(#myMask)" width="100%" height="100%" fill="lime"/>
+</svg>
diff --git a/layout/reftests/svg/mask-contains-inner-svg-02.svg b/layout/reftests/svg/mask-contains-inner-svg-02.svg
new file mode 100644
index 0000000000..78a5ce004e
--- /dev/null
+++ b/layout/reftests/svg/mask-contains-inner-svg-02.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg">
+ <defs>
+ <mask id="myMask">
+ <svg x="25%" overflow="visible">
+ <svg x="25%" overflow="visible">
+ <polygon fill="white" points="-50 0 50 0 50 100 -50 100"/>
+ </svg>
+ </svg>
+ </mask>
+ </defs>
+ <rect width="100%" height="100%" fill="lime"/>
+ <circle cx="50%" cy="50" r="40" fill="red"/>
+ <rect mask="url(#myMask)" width="100%" height="100%" fill="lime"/>
+</svg>
diff --git a/layout/reftests/svg/mask-css-transform-ref.html b/layout/reftests/svg/mask-css-transform-ref.html
new file mode 100644
index 0000000000..3a27179a21
--- /dev/null
+++ b/layout/reftests/svg/mask-css-transform-ref.html
@@ -0,0 +1,9 @@
+<svg style="width: 500px; height: 500px; border: 1px solid green;">
+ <defs>
+ <mask id="mask">
+ <rect x="200px" y="250px" width="100px" height="150px" fill="#ffffff" />
+ <rect x="50px" y="105px" width="110px" height="195px" fill="blue" />
+ </mask>
+ </defs>
+ <rect mask="url(#mask)" width="500px" height="500px" fill="red" />
+</svg>
diff --git a/layout/reftests/svg/mask-css-transform.html b/layout/reftests/svg/mask-css-transform.html
new file mode 100644
index 0000000000..e6bc8f69ed
--- /dev/null
+++ b/layout/reftests/svg/mask-css-transform.html
@@ -0,0 +1,19 @@
+<style>
+ #square1 {
+ transform: translate(100px, 100px) scale(2,3);
+ }
+ #square2 {
+ transform: scale(2,3);
+ }
+</style>
+<svg style="width: 500px; height: 500px; border: 1px solid green;">
+ <defs>
+ <mask id="mask">
+ <rect id="square1" x="50px" y="50px" width="50px" height="50px" fill="#ffffff" />
+ <svg viewBox="0 0 100 100">
+ <rect id="square2" x="5" y="7" width="11" height="13" fill="blue" />
+ </svg>
+ </mask>
+ </defs>
+ <rect mask="url(#mask)" width="500px" height="500px" fill="red" />
+</svg>
diff --git a/layout/reftests/svg/mask-empty-size.svg b/layout/reftests/svg/mask-empty-size.svg
new file mode 100644
index 0000000000..161c8b36b2
--- /dev/null
+++ b/layout/reftests/svg/mask-empty-size.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
+ <title>Testcase for mask with empty size</title>
+ <mask id="m1" width="1" height="0">
+ <rect x="0" y="0" width="100" height="100" style="stroke:none; fill: #ffffff"/>
+ </mask>
+ <!-- Since the size of m1 is empty, the following rect should be invisible. -->
+ <rect width="100" height="100" fill="blue" mask="url(#m1)"/>
+</svg>
diff --git a/layout/reftests/svg/mask-extref-dataURI-01.svg b/layout/reftests/svg/mask-extref-dataURI-01.svg
new file mode 100644
index 0000000000..b79258fb17
--- /dev/null
+++ b/layout/reftests/svg/mask-extref-dataURI-01.svg
@@ -0,0 +1,38 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE svg [
+ <!-- entities etc. here -->
+ <!ENTITY dataURI
+ "data:image/svg+xml,&lt;svg xmlns='http://www.w3.org/2000/svg'&gt;&lt;g id='empty'/&gt;&lt;mask id='mask' maskContentUnits='userSpaceOnUse'&gt;&lt;rect width='50' height='50' fill='white'/&gt;&lt;/mask&gt;&lt;/svg&gt;">
+]>
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>
+ Testcase for bug 686013: CSS mask targeting a fragment in a data URI
+ </title>
+ <style type="text/css">
+ .masked {
+ mask: url("&dataURI;#mask");
+ }
+ </style>
+
+ <!-- use an empty g to force resource document to load before onload -->
+ <use xlink:href="&dataURI;#empty"/>
+
+ <!-- giant lime background -->
+ <rect width="100%" height="100%" fill="lime"/>
+
+ <!-- Masked red rect, covered by lime rect
+ (to make sure mask doesn't let too much through) -->
+ <rect width="75" height="75" fill="red" class="masked"/>
+ <rect width="50" height="50" fill="lime"/>
+
+ <!-- Masked lime rect, covering red rect
+ (to make sure mask lets enough through) -->
+ <g transform="translate(0, 100)">
+ <rect width="50" height="50" fill="red"/>
+ <rect width="75" height="75" fill="lime" class="masked"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/mask-image-filter-transform-ref.html b/layout/reftests/svg/mask-image-filter-transform-ref.html
new file mode 100644
index 0000000000..d040e160a9
--- /dev/null
+++ b/layout/reftests/svg/mask-image-filter-transform-ref.html
@@ -0,0 +1,7 @@
+<svg width="400" height="400">
+ <mask id="m">
+ <image x="20" y="20" width="100" height="100"
+ href="data:image/svg+xml,<svg width='100' height='100' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='red' /></svg>" />
+ </mask>
+ <rect mask="url(#m)" x="50" y="50" width="50%" height="50%" fill="black"></rect>
+</svg>
diff --git a/layout/reftests/svg/mask-image-filter-transform.html b/layout/reftests/svg/mask-image-filter-transform.html
new file mode 100644
index 0000000000..d5196e8327
--- /dev/null
+++ b/layout/reftests/svg/mask-image-filter-transform.html
@@ -0,0 +1,9 @@
+<svg width="400" height="400" viewBox="0 0 800 800">
+ <mask id="m">
+ <g transform="scale(.5,.5)">
+ <image filter="blur(0)" x="80" y="80" width="400" height="400"
+ href="data:image/svg+xml,<svg width='100' height='100' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='red' /></svg>" />
+ </g>
+ </mask>
+ <rect mask="url(#m)" x="100" y="100" width="50%" height="50%" fill="black"></rect>
+</svg>
diff --git a/layout/reftests/svg/mask-img-ref.html b/layout/reftests/svg/mask-img-ref.html
new file mode 100644
index 0000000000..a9505112c2
--- /dev/null
+++ b/layout/reftests/svg/mask-img-ref.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+ <body style="margin:0">
+ <img src='data:image/svg+xml,
+<!-- vim: set expandtab ts=2 sw=2 tw=80: -->
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ viewBox="0 0 700 130">
+ <defs>
+ <style type="text/css">
+ .fillSpan {
+ fill: lightgrey;
+ stroke: black;
+ }
+ </style>
+ <!-- Fade out effect -->
+ <mask id="fadeout" maskContentUnits="objectBoundingBox">
+ <rect x="-0.05" y="-0.05" width="1.1" height="1.1"
+ fill="url(%23fadeoutGrad)"/>
+ </mask>
+ <linearGradient id="fadeoutGrad">
+ <stop offset="0" stop-color="white" stop-opacity="1"/>
+ <stop offset="0.35" stop-color="white" stop-opacity="1"/>
+ <stop offset="0.9" stop-color="white" stop-opacity="0"/>
+ </linearGradient>
+ </defs>
+ <rect y="50" width="150" height="80" class="fillSpan" mask="url(%23fadeout)"/>
+</svg>
+ ' border=0 width="700">
+ </body>
+</html>
diff --git a/layout/reftests/svg/mask-img.html b/layout/reftests/svg/mask-img.html
new file mode 100644
index 0000000000..e080a1b088
--- /dev/null
+++ b/layout/reftests/svg/mask-img.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+ <body style="margin:0">
+ <div style="height:50px"></div>
+ <img border=0 src='data:image/svg+xml,
+<!-- vim: set expandtab ts=2 sw=2 tw=80: -->
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ viewBox="0 0 700 80">
+ <defs>
+ <style type="text/css">
+ .fillSpan {
+ fill: lightgrey;
+ stroke: black;
+ }
+ </style>
+ <!-- Fade out effect -->
+ <mask id="fadeout" maskContentUnits="objectBoundingBox">
+ <rect x="-0.05" y="-0.05" width="1.1" height="1.1"
+ fill="url(%23fadeoutGrad)"/>
+ </mask>
+ <linearGradient id="fadeoutGrad">
+ <stop offset="0" stop-color="white" stop-opacity="1"/>
+ <stop offset="0.35" stop-color="white" stop-opacity="1"/>
+ <stop offset="0.9" stop-color="white" stop-opacity="0"/>
+ </linearGradient>
+ </defs>
+ <rect width="150" height="80" class="fillSpan" mask="url(%23fadeout)"/>
+</svg>
+ ' width="700">
+ </body>
+</html>
diff --git a/layout/reftests/svg/mask-invalidation-ref.html b/layout/reftests/svg/mask-invalidation-ref.html
new file mode 100644
index 0000000000..43a8baa51a
--- /dev/null
+++ b/layout/reftests/svg/mask-invalidation-ref.html
@@ -0,0 +1,5 @@
+<html>
+<svg>
+ <rect width=110 height=50 x=0 y=50 fill=green />
+</svg>
+
diff --git a/layout/reftests/svg/mask-invalidation.html b/layout/reftests/svg/mask-invalidation.html
new file mode 100644
index 0000000000..2866c1f692
--- /dev/null
+++ b/layout/reftests/svg/mask-invalidation.html
@@ -0,0 +1,24 @@
+<html class="reftest-wait">
+<svg>
+ <clipPath id=myClip>
+ <circle cx=100 cy=100 r=100 />
+ </clipPath>
+ <g style="transform: translate(0px, 0)" clip-path="url(#myClip)">
+ <!-- for some reason this first rect is needed to trigger the bug -->
+ <rect width=100 height=50 x=10 y=50 fill=green />
+ <rect id=gr width=100 height=50 x=0 y=50 fill=red />
+ </g>
+ <rect width=50 height=50 x=0 y=50 fill=green />
+</svg>
+<script>
+ function blam() {
+ let gr = document.getElementById("gr");
+ gr.setAttribute('fill', 'green');
+ document.documentElement.removeAttribute("class");
+ }
+document.addEventListener("MozReftestInvalidate", function() {
+ requestAnimationFrame(function() {
+ blam();
+ });
+});
+</script>
diff --git a/layout/reftests/svg/mask-on-outflowElement-01a.html b/layout/reftests/svg/mask-on-outflowElement-01a.html
new file mode 100644
index 0000000000..09bd71aba6
--- /dev/null
+++ b/layout/reftests/svg/mask-on-outflowElement-01a.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+<style type="text/css">
+ #outer {
+ width: 100px;
+ height: 100px;
+ overflow: hidden;
+ }
+
+ #clipped {
+ mask: url(#myMask);
+ width: 300px;
+ height: 300px;
+ }
+
+ #absolutePosition {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 400px;
+ height: 400px;
+ background-color: blue;
+ }
+</style>
+
+<body style="margin: 0px;">
+ <div id="outer">
+ <div id="clipped">
+ <div id="absolutePosition">
+ <!-- This should only be clipped by the mask, not by the 100x100
+ overflow:hidden clip. -->
+ </div>
+ </div>
+ </div>
+ <svg height="0">
+ <defs>
+ <mask id="myMask" x="0" y="0" width="1" height="1" maskUnits="objectBoundingBox">
+ <rect x="0" y="0" width="100" height="100" style="stroke:none; fill: #ffffff"/>
+ <rect x="100" y="100" width="100" height="100" style="stroke:none; fill: #ffffff"/>
+ <rect x="200" y="200" width="100" height="100" style="stroke:none; fill: #ffffff"/>
+ <!-- The forth rect should be clipped out -->
+ <rect x="300" y="300" width="100" height="100" style="stroke:none; fill: #ffffff"/>
+ </mask>
+ </defs>
+ </svg>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/svg/mask-on-outflowElement-01b.html b/layout/reftests/svg/mask-on-outflowElement-01b.html
new file mode 100644
index 0000000000..dae39f06e9
--- /dev/null
+++ b/layout/reftests/svg/mask-on-outflowElement-01b.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+<style type="text/css">
+ #outer {
+ width: 100px;
+ height: 100px;
+ overflow: hidden;
+ }
+
+ #clipped {
+ mask: url(mask-on-outflowElement.svg);
+ width: 300px;
+ height: 300px;
+ }
+
+ #absolutePosition {
+ position:absolute;
+ top: 0;
+ left: 0;
+ width: 400px;
+ height: 400px;
+ background-color: blue;
+ }
+</style>
+
+<body style="margin: 0px;">
+ <div id="outer">
+ <div id="clipped">
+ <div id="absolutePosition">
+ <!-- This should only be clipped by the mask, not by the 100x100
+ overflow:hidden clip.
+ image mask is always clipped by the rect of associated element. The
+ forth rectangle in mask-on-outflowElement.svg is clipped out since
+ the size of #clipped is (w=300, height=300)
+ -->
+ </div>
+ </div>
+ </div>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/svg/mask-on-outflowElement.svg b/layout/reftests/svg/mask-on-outflowElement.svg
new file mode 100644
index 0000000000..17b86769ff
--- /dev/null
+++ b/layout/reftests/svg/mask-on-outflowElement.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <rect x="0" y="0" width="100" height="100" style="stroke:none; fill: #ffffff"/>
+ <rect x="100" y="100" width="100" height="100" style="stroke:none; fill: #ffffff"/>
+ <rect x="200" y="200" width="100" height="100" style="stroke:none; fill: #ffffff"/>
+ <rect x="300" y="300" width="100" height="100" style="stroke:none; fill: #ffffff"/>
+</svg> \ No newline at end of file
diff --git a/layout/reftests/svg/mask-opacity-01-ref.svg b/layout/reftests/svg/mask-opacity-01-ref.svg
new file mode 100644
index 0000000000..72de542d1d
--- /dev/null
+++ b/layout/reftests/svg/mask-opacity-01-ref.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
+ <rect width="50" height="100" fill="blue" fill-opacity="0.5"/>
+</svg>
diff --git a/layout/reftests/svg/mask-opacity-01.svg b/layout/reftests/svg/mask-opacity-01.svg
new file mode 100644
index 0000000000..edf9f6f911
--- /dev/null
+++ b/layout/reftests/svg/mask-opacity-01.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
+ <title>Testcase for the combination of mask, clipPath and opacity</title>
+ <defs>
+ <mask id="m1" maskContentUnits="objectBoundingBox" style="mask-type: alpha;">
+ <rect width="1" height="1" style="stroke:#ffffff; fill: #ffffff; opacity: 0.5;" mask="url(#m2)"/>
+ </mask>
+ <mask id="m2" maskContentUnits="objectBoundingBox" style="mask-type: alpha;">
+ <rect width="0.5" height="1" style="stroke:none; fill: #ffffff"/>
+ </mask>
+ </defs>
+ <rect width="100" height="100" fill="blue" mask="url(#m1)"/>
+</svg>
diff --git a/layout/reftests/svg/mask-opacity-02-ref.svg b/layout/reftests/svg/mask-opacity-02-ref.svg
new file mode 100644
index 0000000000..8b5d3d0ccf
--- /dev/null
+++ b/layout/reftests/svg/mask-opacity-02-ref.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="256" height="256">
+ <circle id="outter" cx="128" cy="128" r="128" fill-opacity="0.33"></circle>
+</svg>
diff --git a/layout/reftests/svg/mask-opacity-02.svg b/layout/reftests/svg/mask-opacity-02.svg
new file mode 100644
index 0000000000..c9a7b90181
--- /dev/null
+++ b/layout/reftests/svg/mask-opacity-02.svg
@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Testcase for the combination of use, mask, opacity</title>
+ <!-- Shapes -->
+ <defs>
+ <rect id="frame" x="0" y="0" width="256" height="256"></rect>
+ <circle id="outter" cx="128" cy="128" r="128"></circle>
+ </defs>
+
+ <!-- Masks -->
+ <defs>
+ <mask id="donut">
+ <use xlink:href="#outter" fill="white"></use>
+ </mask>
+ </defs>
+
+ <g transform="translate(0,0)">
+ <use xlink:href="#frame" class="shape" opacity="0.33" mask="url(#donut)"></use>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/mask-opacity-03.svg b/layout/reftests/svg/mask-opacity-03.svg
new file mode 100644
index 0000000000..62aad437c2
--- /dev/null
+++ b/layout/reftests/svg/mask-opacity-03.svg
@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Testcase for the combination of shape, mask, opacity</title>
+ <!-- Shapes -->
+ <defs>
+ <rect id="frame" x="0" y="0" width="256" height="256"></rect>
+ <circle id="outter" cx="128" cy="128" r="128"></circle>
+ </defs>
+
+ <!-- Masks -->
+ <defs>
+ <mask id="donut">
+ <use xlink:href="#outter" fill="white"></use>
+ </mask>
+ </defs>
+
+ <g transform="translate(0,0)">
+ <rect x="0" y="0" width="512" height="256" class="shape" opacity="0.33" mask="url(#donut)"></rect>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/mask-opacity-04.svg b/layout/reftests/svg/mask-opacity-04.svg
new file mode 100644
index 0000000000..d4046e2b43
--- /dev/null
+++ b/layout/reftests/svg/mask-opacity-04.svg
@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Testcase for the combination of use, mask, fill-opacity</title>
+ <!-- Shapes -->
+ <defs>
+ <rect id="frame" x="0" y="0" width="256" height="256"></rect>
+ <circle id="outter" cx="128" cy="128" r="128"></circle>
+ </defs>
+
+ <!-- Masks -->
+ <defs>
+ <mask id="donut">
+ <use xlink:href="#outter" fill="white"></use>
+ </mask>
+ </defs>
+
+ <g transform="translate(0,0)">
+ <use xlink:href="#frame" class="shape" fill-opacity="0.33" mask="url(#donut)"></use>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/mask-opacity-05.svg b/layout/reftests/svg/mask-opacity-05.svg
new file mode 100644
index 0000000000..c832577438
--- /dev/null
+++ b/layout/reftests/svg/mask-opacity-05.svg
@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Testcase for the combination of rect, mask, fill-opacity</title>
+ <!-- Shapes -->
+ <defs>
+ <rect id="frame" x="0" y="0" width="256" height="256"></rect>
+ <circle id="outter" cx="128" cy="128" r="128"></circle>
+ </defs>
+
+ <!-- Masks -->
+ <defs>
+ <mask id="donut">
+ <use xlink:href="#outter" fill="white"></use>
+ </mask>
+ </defs>
+
+ <g transform="translate(0,0)">
+ <rect x="0" y="0" width="512" height="256" class="shape" fill-opacity="0.33" mask="url(#donut)"></rect>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/mask-opacity-invalidation-1-ref.html b/layout/reftests/svg/mask-opacity-invalidation-1-ref.html
new file mode 100644
index 0000000000..b60ccca0a8
--- /dev/null
+++ b/layout/reftests/svg/mask-opacity-invalidation-1-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+ <title></title>
+ <style>
+ #mask {
+ clip-path: circle(50%);
+ width: 100px;
+ height: 100px;
+ opacity: 0.5;
+ }
+
+ #content {
+ width: 100px;
+ height: 100px;
+ background-color: green;
+ }
+ </style>
+</head>
+
+<body>
+ <div id="mask">
+ <div id="content"></div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/svg/mask-opacity-invalidation-1.html b/layout/reftests/svg/mask-opacity-invalidation-1.html
new file mode 100644
index 0000000000..d7b8de5fd4
--- /dev/null
+++ b/layout/reftests/svg/mask-opacity-invalidation-1.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en" class="reftest-wait">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+ <title></title>
+ <style>
+ #mask {
+ clip-path: circle(50%);
+ width: 100px;
+ height: 100px;
+ opacity: 0.9;
+ }
+
+ #content {
+ width: 100px;
+ height: 100px;
+ background-color: green;
+ }
+ </style>
+</head>
+
+<body>
+ <div id="mask">
+ <div id="content"></div>
+ </div>
+
+ <script type="text/javascript">
+ function step1() {
+ document.querySelector("#mask").style.opacity = 0.1;
+ window.requestAnimationFrame(() => window.requestAnimationFrame(step2));
+ };
+
+ function step2() {
+ document.querySelector("#mask").style.opacity = 0.5;
+ document.documentElement.removeAttribute("class");
+ }
+
+ window.addEventListener("MozReftestInvalidate", step1);
+ </script>
+</body>
+</html>
diff --git a/layout/reftests/svg/mask-ref-loop-01.svg b/layout/reftests/svg/mask-ref-loop-01.svg
new file mode 100644
index 0000000000..e4be5acd5d
--- /dev/null
+++ b/layout/reftests/svg/mask-ref-loop-01.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">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=1392235 -->
+
+ <title>Test handling of simple mask reference loop</title>
+
+ <mask id="mask" x="20" y="20" width="100" height="100"
+ maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse">
+ <rect x="20" y="20" width="100" height="100" fill="white" mask="url(#mask)"/>
+ </mask>
+
+ <rect width="100%" height="100%" fill="lime"/>
+ <rect width="140" height="140" fill="red" mask="url(#mask)"/>
+ <rect x="20" y="20" width="100" height="100" fill="lime"/>
+
+</svg>
diff --git a/layout/reftests/svg/mask-resource-ref.html b/layout/reftests/svg/mask-resource-ref.html
new file mode 100644
index 0000000000..ebcf3bc9da
--- /dev/null
+++ b/layout/reftests/svg/mask-resource-ref.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<style>
+ div {
+ width: 100px;
+ height: 100px;
+ background-image: url(resource://usercontext-content/fingerprint.svg);
+ background-size: 100px 100px;
+ background-color: white;
+ }
+</style>
+<div></div>
diff --git a/layout/reftests/svg/mask-resource.html b/layout/reftests/svg/mask-resource.html
new file mode 100644
index 0000000000..f11e7685ad
--- /dev/null
+++ b/layout/reftests/svg/mask-resource.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<style>
+ div {
+ width: 100px;
+ height: 100px;
+ mask-image: url(resource://usercontext-content/fingerprint.svg);
+ mask-size: 100px 100px;
+ background-color: black;
+ }
+</style>
+<div></div>
diff --git a/layout/reftests/svg/mask-root-svg.svg b/layout/reftests/svg/mask-root-svg.svg
new file mode 100644
index 0000000000..e5a2ed582b
--- /dev/null
+++ b/layout/reftests/svg/mask-root-svg.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.0" mask="url(#mask1)">
+ <defs>
+ <mask id="mask1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox" x="0" y="0" width="0.5" height="0.5">
+ <rect x="0" y="0" width="1" height="1" style="stroke:none; fill: #ffffff"/>
+ </mask>
+ </defs>
+ <rect width="50%" height="50%" fill="white"/>
+ <rect x="30%" y="30%" width="20%" height="20%" fill="lime"/>
+</svg>
diff --git a/layout/reftests/svg/mask-transformed-01-ref.svg b/layout/reftests/svg/mask-transformed-01-ref.svg
new file mode 100644
index 0000000000..28ae8e2828
--- /dev/null
+++ b/layout/reftests/svg/mask-transformed-01-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" width="400" height="400">
+ <rect width="50%" height="50%" fill="lime"/>
+</svg>
+
diff --git a/layout/reftests/svg/mask-transformed-01.svg b/layout/reftests/svg/mask-transformed-01.svg
new file mode 100644
index 0000000000..254c3e9666
--- /dev/null
+++ b/layout/reftests/svg/mask-transformed-01.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" width="400" height="400">
+ <defs>
+ <mask id="m1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
+ <rect x="0" y="0" width="1" height="1" fill="white"/>
+ </mask>
+ </defs>
+ <foreignObject width="100%" height="100%" transform="scale(0.5)">
+ <svg style="width:100%; height:100%;">
+ <rect width="100%" height="100%" fill="lime" mask="url(#m1)"/>
+ </svg>
+ </foreignObject>
+</svg>
+
diff --git a/layout/reftests/svg/mask-transformed-02.svg b/layout/reftests/svg/mask-transformed-02.svg
new file mode 100644
index 0000000000..4361895d86
--- /dev/null
+++ b/layout/reftests/svg/mask-transformed-02.svg
@@ -0,0 +1,19 @@
+<!--
+ 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 for mask on elements that are transformed</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=806432 -->
+
+ <mask id="m" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse">
+ <rect x="0" y="0" width="100" height="100" fill="white"/>
+ </mask>
+
+ <rect width="100%" height="100%" fill="lime"/>
+ <rect x="10" y="10" width="100" height="100" fill="red"/>
+ <rect width="100" height="100" transform="translate(10,10)" fill="lime" mask="url(#m)"/>
+
+</svg>
diff --git a/layout/reftests/svg/mask-transformed-child-01-ref.svg b/layout/reftests/svg/mask-transformed-child-01-ref.svg
new file mode 100644
index 0000000000..19c7f22e6b
--- /dev/null
+++ b/layout/reftests/svg/mask-transformed-child-01-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">
+ <rect x="50" y="75" width="100" height="50" fill="blue"/>
+</svg>
+
diff --git a/layout/reftests/svg/mask-transformed-child-01.svg b/layout/reftests/svg/mask-transformed-child-01.svg
new file mode 100644
index 0000000000..e619d64d48
--- /dev/null
+++ b/layout/reftests/svg/mask-transformed-child-01.svg
@@ -0,0 +1,11 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+ <mask id="mask" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
+ <rect x="0.25" y="0" width="0.5" height="1" fill="white" transform="rotate(90,0.5,0.5)"/>
+ </mask>
+ <rect x="50" y="50" width="100" height="100" fill="blue" mask="url(#mask)"/>
+</svg>
+
diff --git a/layout/reftests/svg/mask-type-01-ref.svg b/layout/reftests/svg/mask-type-01-ref.svg
new file mode 100644
index 0000000000..3885c41219
--- /dev/null
+++ b/layout/reftests/svg/mask-type-01-ref.svg
@@ -0,0 +1,12 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
+
+ <title>Reference for alpha mask</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=793617 -->
+
+ <rect x="10" y="10" width="80" height="80" fill="blue" fill-opacity="0.5"/>
+</svg>
diff --git a/layout/reftests/svg/mask-type-01.svg b/layout/reftests/svg/mask-type-01.svg
new file mode 100644
index 0000000000..1e83b457b7
--- /dev/null
+++ b/layout/reftests/svg/mask-type-01.svg
@@ -0,0 +1,15 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
+
+ <title>Testcase for alpha mask</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=793617 -->
+
+ <mask id="m" maskContentUnits="objectBoundingBox" style="mask-type: alpha">
+ <rect x=".1" y=".1" width=".8" height=".8" fill="black" fill-opacity="0.5"/>
+ </mask>
+ <rect width="100" height="100" fill="blue" mask="url(#m)"/>
+</svg>
diff --git a/layout/reftests/svg/mask-type-02.svg b/layout/reftests/svg/mask-type-02.svg
new file mode 100644
index 0000000000..f3679b3c8a
--- /dev/null
+++ b/layout/reftests/svg/mask-type-02.svg
@@ -0,0 +1,15 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
+
+ <title>Testcase for alpha mask using the presentation attribute</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=793617 -->
+
+ <mask id="m" maskContentUnits="objectBoundingBox" mask-type="alpha">
+ <rect x=".1" y=".1" width=".8" height=".8" fill="black" fill-opacity="0.5"/>
+ </mask>
+ <rect width="100" height="100" fill="blue" mask="url(#m)"/>
+</svg>
diff --git a/layout/reftests/svg/mask-type-03.svg b/layout/reftests/svg/mask-type-03.svg
new file mode 100644
index 0000000000..b333b6bf08
--- /dev/null
+++ b/layout/reftests/svg/mask-type-03.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" width="200" height="200"
+ class="reftest-wait" onload="run()">
+
+ <title>Testcase for alpha mask, dynamically setting mask-type</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=793617 -->
+
+ <mask id="m" maskContentUnits="objectBoundingBox">
+ <rect x=".1" y=".1" width=".8" height=".8" fill="black" fill-opacity="0.5"/>
+ </mask>
+ <rect width="100" height="100" fill="blue" mask="url(#m)"/>
+
+ <script>
+ function run() {
+ document.getElementById("m").style.maskType = "alpha";
+ document.documentElement.removeAttribute("class");
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/mask-type-04.svg b/layout/reftests/svg/mask-type-04.svg
new file mode 100644
index 0000000000..ee46b5d57c
--- /dev/null
+++ b/layout/reftests/svg/mask-type-04.svg
@@ -0,0 +1,16 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
+
+ <title>Testcase for alpha mask, dynamically setting mask-type</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=793617 -->
+
+ <mask id="m" maskContentUnits="objectBoundingBox">
+ <rect x=".1" y=".1" width=".8" height=".8" fill="black" fill-opacity="0.5"/>
+ <set attributeName="mask-type" to="alpha"/>
+ </mask>
+ <rect width="100" height="100" fill="blue" mask="url(#m)"/>
+</svg>
diff --git a/layout/reftests/svg/mask-use-element-01.svg b/layout/reftests/svg/mask-use-element-01.svg
new file mode 100644
index 0000000000..c2490ad0a1
--- /dev/null
+++ b/layout/reftests/svg/mask-use-element-01.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+ <mask id="myMask">
+ <rect x="100" y="100" width="100" height="100" fill="white"/>
+ </mask>
+ <rect x="0" y="0" width="100" height="100" fill="red" id="abc"/>
+ </defs>
+ <rect x="0" y="0" width="100%" height="100%" fill="lime"/>
+ <use xlink:href="#abc"
+ x="100" y="100" mask="url(#myMask)"/>
+</svg> \ No newline at end of file
diff --git a/layout/reftests/svg/moz-only/big.png b/layout/reftests/svg/moz-only/big.png
new file mode 100644
index 0000000000..76a32497c7
--- /dev/null
+++ b/layout/reftests/svg/moz-only/big.png
Binary files differ
diff --git a/layout/reftests/svg/moz-only/feImage-zoom-01-ref.svg b/layout/reftests/svg/moz-only/feImage-zoom-01-ref.svg
new file mode 100644
index 0000000000..92046f8d2c
--- /dev/null
+++ b/layout/reftests/svg/moz-only/feImage-zoom-01-ref.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">
+<title>test image-rendering: -moz-crisp-edges</title>
+<defs>
+ <filter id="i" x="0%" y="0%" width="100%" height="100%">
+ <feImage xlink:href="big.png"/>
+ </filter>
+</defs>
+<rect x="0" y="0" width="10" height="10" filter="url(#i)"/>
+</svg>
diff --git a/layout/reftests/svg/moz-only/feImage-zoom-01a.svg b/layout/reftests/svg/moz-only/feImage-zoom-01a.svg
new file mode 100644
index 0000000000..3b2ea655ff
--- /dev/null
+++ b/layout/reftests/svg/moz-only/feImage-zoom-01a.svg
@@ -0,0 +1,16 @@
+<!--
+ 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"
+ reftest-zoom="5"
+ width="20%" height="20%">
+<title>test image-rendering: -moz-crisp-edges</title>
+<defs>
+ <filter id="i" x="0%" y="0%" width="100%" height="100%">
+ <feImage image-rendering="-moz-crisp-edges" xlink:href="small.png"/>
+ </filter>
+</defs>
+<rect x="0" y="0" width="10" height="10" filter="url(#i)"/>
+</svg>
diff --git a/layout/reftests/svg/moz-only/feImage-zoom-01b.svg b/layout/reftests/svg/moz-only/feImage-zoom-01b.svg
new file mode 100644
index 0000000000..c8be9ea6b5
--- /dev/null
+++ b/layout/reftests/svg/moz-only/feImage-zoom-01b.svg
@@ -0,0 +1,16 @@
+<!--
+ 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"
+ reftest-zoom="5"
+ width="20%" height="20%">
+<title>test image-rendering: -moz-crisp-edges</title>
+<defs>
+ <filter id="i" x="0%" y="0%" width="100%" height="100%">
+ <feImage style="image-rendering:-moz-crisp-edges" xlink:href="small.png"/>
+ </filter>
+</defs>
+<rect x="0" y="0" width="10" height="10" filter="url(#i)"/>
+</svg>
diff --git a/layout/reftests/svg/moz-only/foreignObject-zoom-01.svg b/layout/reftests/svg/moz-only/foreignObject-zoom-01.svg
new file mode 100644
index 0000000000..42250464a9
--- /dev/null
+++ b/layout/reftests/svg/moz-only/foreignObject-zoom-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"
+ onload="startTest()" reftest-zoom="2" class="reftest-wait"
+ style="width:50%; height:50%;">
+
+ <title>Testcase for zoomed foreignObject</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=484677 -->
+
+ <style type="text/css">
+ * { margin:0;height:100%;width:100% }
+ </style>
+ <foreignObject width="100%" height="100%">
+ <html xmlns="http://www.w3.org/1999/xhtml">
+ <body>
+ <div id="div" style="width:20px;height:20px;background:yellow;"/>
+ </body>
+ </html>
+ </foreignObject>
+ <script type="text/javascript">
+ function startTest() {
+ document.addEventListener("MozReftestInvalidate", doTest, false);
+ }
+ function doTest() {
+ var elem = document.elementFromPoint(25, 25);
+ var div = document.getElementById("div");
+ div.setAttribute("style", "background:" + ((elem == div) ? "red" : "lime") + ";");
+ document.documentElement.removeAttribute("class");
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/moz-only/pass-black.svg b/layout/reftests/svg/moz-only/pass-black.svg
new file mode 100644
index 0000000000..d80f66d63e
--- /dev/null
+++ b/layout/reftests/svg/moz-only/pass-black.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 black pass condition</title>
+ <rect width="100%" height="100%" fill="black"/>
+</svg>
diff --git a/layout/reftests/svg/moz-only/pass.svg b/layout/reftests/svg/moz-only/pass.svg
new file mode 100644
index 0000000000..c09c6601e8
--- /dev/null
+++ b/layout/reftests/svg/moz-only/pass.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/moz-only/reftest.list b/layout/reftests/svg/moz-only/reftest.list
new file mode 100644
index 0000000000..ce73d4119c
--- /dev/null
+++ b/layout/reftests/svg/moz-only/reftest.list
@@ -0,0 +1,7 @@
+# Tests for zooming with the full page zoom UI
+random-if(d2d) == feImage-zoom-01a.svg feImage-zoom-01-ref.svg
+random-if(d2d) == feImage-zoom-01b.svg feImage-zoom-01-ref.svg
+== foreignObject-zoom-01.svg pass.svg
+== zoom-invalidation-01.svg pass.svg
+== replaced-element-zoom-01.html pass.svg
+fuzzy-if(winWidget,0-12,0-7) == zoomed-svg-with-viewBox-01.svg zoomed-svg-with-viewBox-01-ref.svg
diff --git a/layout/reftests/svg/moz-only/replaced-element-zoom-01.html b/layout/reftests/svg/moz-only/replaced-element-zoom-01.html
new file mode 100644
index 0000000000..724bb304eb
--- /dev/null
+++ b/layout/reftests/svg/moz-only/replaced-element-zoom-01.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<html reftest-zoom="2" class="reftest-wait">
+ <head>
+ <title>SVG page zoom test</title>
+ <style>
+ iframe, object, img {
+ width: 150px;
+ height: 100px;
+ border: none;
+ }
+ body {
+ background-color: lime;
+ }
+ </style>
+ <script>
+
+var expected = 3;
+var actual = 0;
+
+function process_load() {
+ ++actual;
+ if (actual == expected)
+ document.documentElement.removeAttribute("class");
+}
+
+ </script>
+ </head>
+ <body>
+ <div>
+ <iframe onload="process_load()" src="pass.svg"></iframe>
+ </div>
+ <div>
+ <object onload="process_load()" data="pass.svg"></object>
+ </div>
+ <div>
+ <img onload="process_load()" src="pass.svg">
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/svg/moz-only/small.png b/layout/reftests/svg/moz-only/small.png
new file mode 100644
index 0000000000..9ff11a9932
--- /dev/null
+++ b/layout/reftests/svg/moz-only/small.png
Binary files differ
diff --git a/layout/reftests/svg/moz-only/zoom-invalidation-01.svg b/layout/reftests/svg/moz-only/zoom-invalidation-01.svg
new file mode 100644
index 0000000000..e8270968b1
--- /dev/null
+++ b/layout/reftests/svg/moz-only/zoom-invalidation-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"
+ reftest-zoom="2" class="reftest-wait"
+ width="50%" height="50%">
+
+ <title>Test invalidation of zoomed SVG</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=726928 -->
+
+ <script type="text/javascript">
+
+document.addEventListener("MozReftestInvalidate", doTest, false);
+
+function doTest() {
+ var redRect = document.getElementById('red-rect');
+ redRect.parentNode.removeChild(redRect);
+ document.documentElement.removeAttribute("class");
+}
+
+ </script>
+ <rect width="100%" height="100%" fill="lime"/>
+ <rect id="red-rect" x="10" y="10" width="100" height="100" fill="red"/>
+</svg>
diff --git a/layout/reftests/svg/moz-only/zoomed-svg-with-viewBox-01-ref.svg b/layout/reftests/svg/moz-only/zoomed-svg-with-viewBox-01-ref.svg
new file mode 100644
index 0000000000..99a3d36b52
--- /dev/null
+++ b/layout/reftests/svg/moz-only/zoomed-svg-with-viewBox-01-ref.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" width="40" height="30">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=407959 -->
+
+ <title>Reference for zoomed-svg-with-viewBox-01.svg</title>
+
+ <ellipse cx="20" cy="15" rx="20" ry="15" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/moz-only/zoomed-svg-with-viewBox-01.svg b/layout/reftests/svg/moz-only/zoomed-svg-with-viewBox-01.svg
new file mode 100644
index 0000000000..530f892f4d
--- /dev/null
+++ b/layout/reftests/svg/moz-only/zoomed-svg-with-viewBox-01.svg
@@ -0,0 +1,14 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" reftest-zoom="3"
+ width="40" height="30" viewBox="20 20 120 90">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=407959 -->
+
+ <title>Test that zooming isn't broken when we have a viewBox</title>
+
+ <ellipse cx="40" cy="35" rx="20" ry="15" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/nested-mask-mode.svg b/layout/reftests/svg/nested-mask-mode.svg
new file mode 100644
index 0000000000..2d87eab674
--- /dev/null
+++ b/layout/reftests/svg/nested-mask-mode.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
+ <title>Testcase for mask-mode in a nested mask.</title>
+ <mask id="m1" width="1" height="1">
+ <!-- Set mask-mode as alpha. The fill color of the rect in m2 should
+ not effect mask result. -->
+ <rect x="0" y="0" width="100" height="100" mask="url(#m2)" style="fill: #ffffff; mask-mode:alpha;"/>
+ </mask>
+ <mask id="m2" width="1" height="1">
+ <rect x="0" y="0" width="100" height="50" style="fill:#000000"/>
+ </mask>
+
+ <rect width="100" height="100" fill="blue" mask="url(#m1)" />
+</svg>
diff --git a/layout/reftests/svg/nested-viewBox-01.svg b/layout/reftests/svg/nested-viewBox-01.svg
new file mode 100644
index 0000000000..d78ca4c4c5
--- /dev/null
+++ b/layout/reftests/svg/nested-viewBox-01.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" version="1.1">
+
+ <title>Testcase for child &lt;svg&gt; with viewBox</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=369402
+
+ The presense of the viewBox attribute below should not be stopping the
+ lime rect from rendering. (The preserveAspectRatio is only there to make
+ the lime rect fully cover the red rect on success. It is not the problem.)
+ -->
+
+ <rect width="100%" height="100%" fill="red"/>
+ <svg viewBox="0 0 100 100" preserveAspectRatio="none">
+ <rect width="100%" height="100%" fill="lime"/>
+ </svg>
+
+</svg>
diff --git a/layout/reftests/svg/nesting-invalid-01-ref.svg b/layout/reftests/svg/nesting-invalid-01-ref.svg
new file mode 100644
index 0000000000..8b61e19756
--- /dev/null
+++ b/layout/reftests/svg/nesting-invalid-01-ref.svg
@@ -0,0 +1,12 @@
+<!--
+ 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' font-size='16px'>
+ <script xlink:href='nesting-invalid-01.js'/>
+ <script><![CDATA[
+ for (var i = 0; i < es.length; i++) {
+ document.documentElement.appendChild(makeGroup(i, false, es[i]));
+ }
+ ]]></script>
+</svg>
diff --git a/layout/reftests/svg/nesting-invalid-01.svg b/layout/reftests/svg/nesting-invalid-01.svg
new file mode 100644
index 0000000000..aa9e6f1444
--- /dev/null
+++ b/layout/reftests/svg/nesting-invalid-01.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' font-size='16px'>
+ <!--
+ This tests that elements that are not container elements do not render their
+ children.
+ -->
+ <rect id='r' width='100%' height='100%' fill='red'/>
+ <script xlink:href='nesting-invalid-01.js'/>
+ <script><![CDATA[
+ for (var i = 0; i < es.length; i++) {
+ document.documentElement.appendChild(makeGroup(i, false, es[i]));
+ document.documentElement.appendChild(makeElement(es[i], { }, [makeGroup(i, true, es[i])]));
+ }
+
+ document.documentElement.removeChild(document.getElementById('r'));
+ ]]></script>
+</svg>
diff --git a/layout/reftests/svg/non-scaling-stroke-01-ref.svg b/layout/reftests/svg/non-scaling-stroke-01-ref.svg
new file mode 100644
index 0000000000..0bd75876f6
--- /dev/null
+++ b/layout/reftests/svg/non-scaling-stroke-01-ref.svg
@@ -0,0 +1,33 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<style type="text/css" >
+rect {
+ stroke-width: 15px;
+}
+</style>
+<defs>
+ <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
+ <stop offset="0" stop-color="blue"/>
+ <stop offset="1" stop-color="yellow"/>
+ </linearGradient>
+ <linearGradient id="grad2" x1="180" y1="250" x2="280" y2="300" gradientUnits="userSpaceOnUse" gradientTransform="scale(0.25,1)">
+ <stop offset="0" stop-color="blue"/>
+ <stop offset="1" stop-color="yellow"/>
+ </linearGradient>
+ <pattern id="pattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse" patternTransform="scale(1,0.5), skewX(45)">
+ <rect x="0" y="0" width="10" height="10" fill="red"/>
+ <rect x="10" y="0" width="10" height="10" fill="green"/>
+ <rect x="0" y="10" width="10" height="10" fill="blue"/>
+ <rect x="10" y="10" width="10" height="10" fill="yellow"/>
+ </pattern>
+ <rect id="rect" width="100" height="50" fill="none"/>
+</defs>
+
+<rect x="20" y="20" width="100" height="50" fill="none" stroke="url(#grad1)"/>
+
+<rect x="20" y="100" width="100" height="50" fill="none" stroke="url(#grad2)" />
+
+<use xlink:href="#rect" transform="translate(20, 180)" stroke="url(#pattern)"/>
+
+<use xlink:href="#rect" x="20" y="260" stroke="green"/>
+
+</svg>
diff --git a/layout/reftests/svg/non-scaling-stroke-01.svg b/layout/reftests/svg/non-scaling-stroke-01.svg
new file mode 100644
index 0000000000..db2954b685
--- /dev/null
+++ b/layout/reftests/svg/non-scaling-stroke-01.svg
@@ -0,0 +1,36 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<style type="text/css" >
+rect {
+ stroke-width: 15px;
+ vector-effect: non-scaling-stroke;
+}
+</style>
+<defs>
+ <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
+ <stop offset="0" stop-color="blue"/>
+ <stop offset="1" stop-color="yellow"/>
+ </linearGradient>
+ <linearGradient id="grad2" x1="100" y1="150" x2="200" y2="200" gradientUnits="userSpaceOnUse">
+ <stop offset="0" stop-color="blue"/>
+ <stop offset="1" stop-color="yellow"/>
+ </linearGradient>
+ <pattern id="pattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse" patternTransform="scale(4,0.5), skewX(45)">
+ <rect x="0" y="0" width="10" height="10" fill="red"/>
+ <rect x="10" y="0" width="10" height="10" fill="green"/>
+ <rect x="0" y="10" width="10" height="10" fill="blue"/>
+ <rect x="10" y="10" width="10" height="10" fill="yellow"/>
+ </pattern>
+ <rect id="rect" width="400" height="50" fill="none"/>
+</defs>
+
+<g transform="translate(20,20)">
+ <rect width="400" height="50" fill="none" stroke="url(#grad1)" transform="scale(0.25,1)"/>
+</g>
+
+<rect width="400" height="50" fill="none" stroke="url(#grad2)" transform="translate(20,100) scale(0.25,1)"/>
+
+<use xlink:href="#rect" transform="translate(20, 180) scale(0.25,1)" stroke="url(#pattern)"/>
+
+<use xlink:href="#rect" x="40" y="80" transform="translate(10, 180) scale(0.25,1)" stroke="green"/>
+
+</svg>
diff --git a/layout/reftests/svg/non-scaling-stroke-02-ref.svg b/layout/reftests/svg/non-scaling-stroke-02-ref.svg
new file mode 100644
index 0000000000..2264924193
--- /dev/null
+++ b/layout/reftests/svg/non-scaling-stroke-02-ref.svg
@@ -0,0 +1,33 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" overflow="hidden">
+<style type="text/css" >
+rect {
+ stroke-width: 30px;
+}
+</style>
+<defs>
+ <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
+ <stop offset="0" stop-color="blue"/>
+ <stop offset="1" stop-color="yellow"/>
+ </linearGradient>
+ <linearGradient id="grad2" x1="360" y1="500" x2="560" y2="600" gradientUnits="userSpaceOnUse" gradientTransform="scale(0.25,1)">
+ <stop offset="0" stop-color="blue"/>
+ <stop offset="1" stop-color="yellow"/>
+ </linearGradient>
+ <pattern id="pattern" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse" patternTransform="scale(1,0.5), skewX(45)">
+ <rect x="0" y="0" width="20" height="20" fill="red"/>
+ <rect x="20" y="0" width="20" height="20" fill="green"/>
+ <rect x="0" y="20" width="20" height="20" fill="blue"/>
+ <rect x="20" y="20" width="20" height="20" fill="yellow"/>
+ </pattern>
+ <rect id="rect" width="200" height="100" fill="none"/>
+</defs>
+
+<rect x="40" y="40" width="200" height="100" fill="none" stroke="url(#grad1)"/>
+
+<rect x="40" y="200" width="200" height="100" fill="none" stroke="url(#grad2)" />
+
+<use xlink:href="#rect" transform="translate(40, 360)" stroke="url(#pattern)"/>
+
+<use xlink:href="#rect" x="40" y="520" stroke="green"/>
+
+</svg>
diff --git a/layout/reftests/svg/non-scaling-stroke-02.svg b/layout/reftests/svg/non-scaling-stroke-02.svg
new file mode 100644
index 0000000000..b098bb5688
--- /dev/null
+++ b/layout/reftests/svg/non-scaling-stroke-02.svg
@@ -0,0 +1,36 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" reftest-zoom="2" overflow="hidden">
+<style type="text/css" >
+rect {
+ stroke-width: 15px;
+ vector-effect: non-scaling-stroke;
+}
+</style>
+<defs>
+ <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
+ <stop offset="0" stop-color="blue"/>
+ <stop offset="1" stop-color="yellow"/>
+ </linearGradient>
+ <linearGradient id="grad2" x1="100" y1="150" x2="200" y2="200" gradientUnits="userSpaceOnUse">
+ <stop offset="0" stop-color="blue"/>
+ <stop offset="1" stop-color="yellow"/>
+ </linearGradient>
+ <pattern id="pattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse" patternTransform="scale(4,0.5), skewX(45)">
+ <rect x="0" y="0" width="10" height="10" fill="red"/>
+ <rect x="10" y="0" width="10" height="10" fill="green"/>
+ <rect x="0" y="10" width="10" height="10" fill="blue"/>
+ <rect x="10" y="10" width="10" height="10" fill="yellow"/>
+ </pattern>
+ <rect id="rect" width="400" height="50" fill="none"/>
+</defs>
+
+<g transform="translate(20,20)">
+ <rect width="400" height="50" fill="none" stroke="url(#grad1)" transform="scale(0.25,1)"/>
+</g>
+
+<rect width="400" height="50" fill="none" stroke="url(#grad2)" transform="translate(20,100) scale(0.25,1)"/>
+
+<use xlink:href="#rect" transform="translate(20, 180) scale(0.25,1)" stroke="url(#pattern)"/>
+
+<use xlink:href="#rect" x="40" y="80" transform="translate(10, 180) scale(0.25,1)" stroke="green"/>
+
+</svg>
diff --git a/layout/reftests/svg/non-scaling-stroke-03-ref.svg b/layout/reftests/svg/non-scaling-stroke-03-ref.svg
new file mode 100644
index 0000000000..895836568a
--- /dev/null
+++ b/layout/reftests/svg/non-scaling-stroke-03-ref.svg
@@ -0,0 +1,7 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+ <line x1="100" y1="100" x2="100" y2="200" stroke="blue" stroke-width="10"/>
+</svg>
diff --git a/layout/reftests/svg/non-scaling-stroke-03.svg b/layout/reftests/svg/non-scaling-stroke-03.svg
new file mode 100644
index 0000000000..9b62d1cafe
--- /dev/null
+++ b/layout/reftests/svg/non-scaling-stroke-03.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" class="reftest-wait">
+ <title>Test non-scaling-stroke repainting when ancestor transforms change</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=875069 -->
+ <script>
+
+function doTest() {
+ document.getElementById("g").setAttribute("transform", "scale(2)");
+ document.documentElement.removeAttribute('class');
+}
+
+document.addEventListener("MozReftestInvalidate", doTest, false);
+setTimeout(doTest, 4000); // fallback for running outside reftest
+
+ </script>
+ <g id="g">
+ <line x1="50" y1="50" x2="50" y2="100" stroke="blue" stroke-width="10"
+ style="vector-effect:non-scaling-stroke;"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/non-scaling-stroke-css-transform-ref.html b/layout/reftests/svg/non-scaling-stroke-css-transform-ref.html
new file mode 100644
index 0000000000..651b50102e
--- /dev/null
+++ b/layout/reftests/svg/non-scaling-stroke-css-transform-ref.html
@@ -0,0 +1,3 @@
+<svg style="width: 500px; height: 500px; border: 1px solid green;">
+ <rect id="square" transform="translate(100,200) scale(1,2.5)" stroke="blue" vector-effect="non-scaling-stroke" stroke-width="6" x="50px" y="50px" width="50px" height="50px" fill="pink" />
+</svg>
diff --git a/layout/reftests/svg/non-scaling-stroke-css-transform.html b/layout/reftests/svg/non-scaling-stroke-css-transform.html
new file mode 100644
index 0000000000..e7db2ac145
--- /dev/null
+++ b/layout/reftests/svg/non-scaling-stroke-css-transform.html
@@ -0,0 +1,8 @@
+<style>
+ #square{
+ transform: translate(100px,200px) scale(1,2.5);
+ }
+</style>
+<svg style="width: 500px; height: 500px; border: 1px solid green;">
+ <rect id="square" stroke="blue" vector-effect="non-scaling-stroke" stroke-width="6" x="50px" y="50px" width="50px" height="50px" fill="pink" />
+</svg>
diff --git a/layout/reftests/svg/objectBoundingBox-and-clipPath.svg b/layout/reftests/svg/objectBoundingBox-and-clipPath.svg
new file mode 100644
index 0000000000..40968d9ee9
--- /dev/null
+++ b/layout/reftests/svg/objectBoundingBox-and-clipPath.svg
@@ -0,0 +1,25 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=489151 -->
+
+<svg xmlns="http://www.w3.org/2000/svg">
+ <title>Test objectBoundingBox clip-path on element with ancestor transform</title>
+ <desc>
+ This test checks that the bbox calculation for an objectBoundingBox
+ clip-path is correctly getting the bbox in the userspace of the
+ clipped element, and not it's bbox in an ancestor userspace or rootspace.
+ </desc>
+ <clipPath id="clip" clipPathUnits="objectBoundingBox">
+ <rect x="0.5" width="0.5" height="1"/>
+ </clipPath>
+ <rect width="100%" height="100%" fill="lime"/>
+ <rect x="100" width="100" height="100" fill="red"/>
+ <g transform="translate(-100,0)">
+ <g clip-path="url(#clip)">
+ <rect x="100" width="100" height="100" fill="red"/>
+ <rect x="200" width="100" height="100" fill="lime"/>
+ </g>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/objectBoundingBox-and-fePointLight-01-ref.svg b/layout/reftests/svg/objectBoundingBox-and-fePointLight-01-ref.svg
new file mode 100644
index 0000000000..67532ffb68
--- /dev/null
+++ b/layout/reftests/svg/objectBoundingBox-and-fePointLight-01-ref.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">
+ <title>Reference for objectBoundingBox with fePointLight</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=544742 -->
+
+ <defs>
+ <filter id="light" primitiveUnits="userSpaceOnUse">
+ <feSpecularLighting lighting-color="blue" surfaceScale="5" specularConstant="10" specularExponent="6">
+ <fePointLight x="30" y="30" z="-5"/>
+ </feSpecularLighting>
+ <feComposite operator="in" in2="SourceGraphic"/>
+ </filter>
+ </defs>
+
+ <g transform="translate(20 20)">
+ <rect width="40" height="20" filter="url(#light)" fill="black" stroke="none"/>
+ </g>
+
+</svg>
+
diff --git a/layout/reftests/svg/objectBoundingBox-and-fePointLight-01.svg b/layout/reftests/svg/objectBoundingBox-and-fePointLight-01.svg
new file mode 100644
index 0000000000..c77200c847
--- /dev/null
+++ b/layout/reftests/svg/objectBoundingBox-and-fePointLight-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">
+ <title>Testcase for objectBoundingBox with fePointLight</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=544742 -->
+
+ <defs>
+ <filter id="light" primitiveUnits="objectBoundingBox">
+ <feSpecularLighting lighting-color="blue" surfaceScale="5" specularConstant="10" specularExponent="6">
+ <!-- Note: for z the scalefactor is 31,622776601683793319988935444327
+ sqrt(bbox.width*bbox.width + bbox.height*bbox.height)/sqrt(2) -->
+ <fePointLight x="0.75" y="1.5" z="-0.15811388300841896659994467722167"/>
+ </feSpecularLighting>
+ <feComposite operator="in" in2="SourceGraphic"/>
+ </filter>
+ </defs>
+
+ <rect x="20" y="20" width="40" height="20" filter="url(#light)" fill="black" stroke="none" />
+
+</svg>
+
diff --git a/layout/reftests/svg/objectBoundingBox-and-fePointLight-02-ref.svg b/layout/reftests/svg/objectBoundingBox-and-fePointLight-02-ref.svg
new file mode 100644
index 0000000000..0e27de608f
--- /dev/null
+++ b/layout/reftests/svg/objectBoundingBox-and-fePointLight-02-ref.svg
@@ -0,0 +1,22 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg width="100%" height="100%"
+ viewBox="0 0 480 360" xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Reference for objectBoundingBox with fePointLight</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=619992 -->
+
+ <defs>
+ <filter id="f" primitiveUnits="objectBoundingBox">
+ <feSpecularLighting lighting-color="blue" surfaceScale="5" specularConstant="10" specularExponent="6">
+ <fePointLight x="0.875" y="0.875" z="-0.0625"/>
+ </feSpecularLighting>
+ </filter>
+ </defs>
+
+ <g transform="translate(50 50)">
+ <rect x="-40" y="-40" width="80" height="80" filter="url(#f)" fill="none"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/objectBoundingBox-and-fePointLight-02.svg b/layout/reftests/svg/objectBoundingBox-and-fePointLight-02.svg
new file mode 100644
index 0000000000..00f549add4
--- /dev/null
+++ b/layout/reftests/svg/objectBoundingBox-and-fePointLight-02.svg
@@ -0,0 +1,22 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg width="100%" height="100%"
+ viewBox="0 0 480 360" xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Testcase for objectBoundingBox with fePointLight</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=619992 -->
+
+ <defs>
+ <filter id="f" primitiveUnits="userSpaceOnUse">
+ <feSpecularLighting lighting-color="blue" surfaceScale="5" specularConstant="10" specularExponent="6">
+ <fePointLight x="30" y="30" z="-5"/>
+ </feSpecularLighting>
+ </filter>
+ </defs>
+
+ <g transform="translate(50 50)">
+ <rect x="-40" y="-40" width="80" height="80" filter="url(#f)" fill="none"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/objectBoundingBox-and-mask-02.svg b/layout/reftests/svg/objectBoundingBox-and-mask-02.svg
new file mode 100644
index 0000000000..8cab2d32ac
--- /dev/null
+++ b/layout/reftests/svg/objectBoundingBox-and-mask-02.svg
@@ -0,0 +1,17 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=621210 -->
+
+<svg xmlns="http://www.w3.org/2000/svg">
+ <title>Testcase for re-using an objectBoundingBox mask with a &lt;g&gt; child</title>
+ <mask id="mask" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
+ <g>
+ <rect width="1" height="1" fill="white"/>
+ </g>
+ </mask>
+ <rect width="100%" height="100%" fill="red"/>
+ <rect mask="url(#mask)" width="1" height="1" fill="red"/>
+ <rect mask="url(#mask)" width="100%" height="100%" fill="lime"/>
+</svg>
diff --git a/layout/reftests/svg/objectBoundingBox-and-mask.svg b/layout/reftests/svg/objectBoundingBox-and-mask.svg
new file mode 100644
index 0000000000..e247913aed
--- /dev/null
+++ b/layout/reftests/svg/objectBoundingBox-and-mask.svg
@@ -0,0 +1,25 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=489151 -->
+
+<svg xmlns="http://www.w3.org/2000/svg">
+ <title>Test objectBoundingBox mask on element with ancestor transform</title>
+ <desc>
+ This test checks that the bbox calculation for an objectBoundingBox
+ mask is correctly getting the bbox in the userspace of the masked
+ element, and not it's bbox in an ancestor userspace or rootspace.
+ </desc>
+ <mask id="mask" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
+ <rect x="0.5" width="0.5" height="1" fill="white"/>
+ </mask>
+ <rect width="100%" height="100%" fill="lime"/>
+ <rect x="100" width="100" height="100" fill="red"/>
+ <g transform="translate(-100,0)">
+ <g mask="url(#mask)">
+ <rect x="100" width="100" height="100" fill="red"/>
+ <rect x="200" width="100" height="100" fill="lime"/>
+ </g>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/objectBoundingBox-and-pattern-01-ref.svg b/layout/reftests/svg/objectBoundingBox-and-pattern-01-ref.svg
new file mode 100644
index 0000000000..fcf4e8d164
--- /dev/null
+++ b/layout/reftests/svg/objectBoundingBox-and-pattern-01-ref.svg
@@ -0,0 +1,12 @@
+<!--
+ 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 elements referencing an objectBoundingBox pattern</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=338596 -->
+
+ <rect x="20" y="20" width="200" height="200" fill="lime"/>
+</svg>
diff --git a/layout/reftests/svg/objectBoundingBox-and-pattern-01a.svg b/layout/reftests/svg/objectBoundingBox-and-pattern-01a.svg
new file mode 100644
index 0000000000..10623a95bf
--- /dev/null
+++ b/layout/reftests/svg/objectBoundingBox-and-pattern-01a.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">
+
+ <title>Testcase for elements referencing an objectBoundingBox pattern</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=338596 -->
+
+ <defs>
+ <pattern id="test" width="100%" height="100%" patternUnits="objectBoundingBox" patternContentUnits="objectBoundingBox">
+ <rect x="0" y="0" width="1" height="1" fill="lime"/>
+ </pattern>
+ </defs>
+
+ <rect x="20" y="20" width="200" height="200" fill="url(#test)"/>
+</svg>
diff --git a/layout/reftests/svg/objectBoundingBox-and-pattern-01b.svg b/layout/reftests/svg/objectBoundingBox-and-pattern-01b.svg
new file mode 100644
index 0000000000..e932cf91b5
--- /dev/null
+++ b/layout/reftests/svg/objectBoundingBox-and-pattern-01b.svg
@@ -0,0 +1,19 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+
+ <title>Testcase for elements referencing an objectBoundingBox pattern</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=377399 -->
+
+ <defs>
+ <pattern id="test" width="100%" height="100%" viewBox="0 0 40 40" patternContentUnits="objectBoundingBox">
+ <rect x="0" y="0" width="40" height="40" fill="lime" />
+ </pattern>
+ </defs>
+ <g transform="translate(20 20)">
+ <rect x="0" y="0" width="200" height="200" fill="url(#test)" />
+ </g>
+</svg>
diff --git a/layout/reftests/svg/objectBoundingBox-and-pattern-01c.svg b/layout/reftests/svg/objectBoundingBox-and-pattern-01c.svg
new file mode 100644
index 0000000000..ef63c994c3
--- /dev/null
+++ b/layout/reftests/svg/objectBoundingBox-and-pattern-01c.svg
@@ -0,0 +1,19 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+
+ <title>Testcase for elements referencing an objectBoundingBox pattern</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=377399 -->
+
+ <defs>
+ <pattern id="test" width="100%" height="100%" viewBox="0 0 40 40" patternContentUnits="objectBoundingBox">
+ <rect x="0" y="0" width="40" height="40" fill="lime" />
+ </pattern>
+ </defs>
+ <g transform="translate(20 20) scale(2)">
+ <rect x="0" y="0" width="100" height="100" fill="url(#test)" />
+ </g>
+</svg>
diff --git a/layout/reftests/svg/objectBoundingBox-and-pattern-02.svg b/layout/reftests/svg/objectBoundingBox-and-pattern-02.svg
new file mode 100644
index 0000000000..ca77584198
--- /dev/null
+++ b/layout/reftests/svg/objectBoundingBox-and-pattern-02.svg
@@ -0,0 +1,24 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+
+ <title>Testcase for elements referencing an objectBoundingBox pattern with a viewBox</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=605022 -->
+
+ <defs>
+ <pattern id="test" x="0" y="0" width="20%" height="20%" patternContentUnits="objectBoundingBox" viewBox="0 0 20 20">
+ <rect width="20" height="20" stroke="none" fill="lime"/>
+ <rect width="1" height="1" stroke="none" fill="red"/>
+ </pattern>
+ <pattern id="cover" x="0" y="0" width="20%" height="20%" patternContentUnits="objectBoundingBox">
+ <rect width="0.01" height="0.01" stroke="none" fill="lime"/>
+ </pattern>
+ </defs>
+
+ <rect width="100%" height="100%" fill="lime"/>
+ <rect x="20" y="20" width="200" height="200" fill="url(#test)"/>
+ <rect x="20" y="20" width="200" height="200" fill="url(#cover)"/>
+</svg>
diff --git a/layout/reftests/svg/objectBoundingBox-and-pattern-03-ref.svg b/layout/reftests/svg/objectBoundingBox-and-pattern-03-ref.svg
new file mode 100644
index 0000000000..1530ce82c5
--- /dev/null
+++ b/layout/reftests/svg/objectBoundingBox-and-pattern-03-ref.svg
@@ -0,0 +1,9 @@
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+ <title>Reference for re-using an objectBoundingBox pattern with a &lt;g&gt;
+ child</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=615788-->
+ <rect fill="blue" stroke="red" stroke-width="3"
+ width="100" height="100"/>
+ <rect fill="blue" stroke="red" stroke-width="3"
+ y="100" width="200" height="100"/>
+</svg>
diff --git a/layout/reftests/svg/objectBoundingBox-and-pattern-03.svg b/layout/reftests/svg/objectBoundingBox-and-pattern-03.svg
new file mode 100644
index 0000000000..1af490f66a
--- /dev/null
+++ b/layout/reftests/svg/objectBoundingBox-and-pattern-03.svg
@@ -0,0 +1,17 @@
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+ <title>Testcase for re-using an objectBoundingBox pattern with a &lt;g&gt;
+ child</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=615788-->
+ <defs>
+ <pattern id="blue" patternContentUnits="objectBoundingBox"
+ width="100%" height="100%">
+ <g>
+ <rect fill="blue" stroke="none" x="0" y="0" width="1" height="1"/>
+ </g>
+ </pattern>
+ </defs>
+ <rect fill="url(#blue)" stroke="red" stroke-width="3"
+ width="100" height="100"/>
+ <rect fill="url(#blue)" stroke="red" stroke-width="3"
+ y="100" width="200" height="100"/>
+</svg>
diff --git a/layout/reftests/svg/opacity-and-gradient-01.svg b/layout/reftests/svg/opacity-and-gradient-01.svg
new file mode 100644
index 0000000000..178525b0ae
--- /dev/null
+++ b/layout/reftests/svg/opacity-and-gradient-01.svg
@@ -0,0 +1,35 @@
+<!--
+ 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 for opacity on elements referencing a gradient</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=357163 -->
+
+ <defs>
+ <linearGradient id="lime" gradientUnits="userSpaceOnUse">
+ <stop stop-color="lime"/>
+ </linearGradient>
+ <linearGradient id="red" gradientUnits="userSpaceOnUse">
+ <stop stop-color="red"/>
+ </linearGradient>
+ </defs>
+
+ <rect width="100%" height="100%" fill="red"/>
+
+ <!-- Create the "pass" rect using a gradient so the testcase doesn't seem to
+ pass if gradients are not supported -->
+ <rect width="100%" height="100%" fill="url(#lime)"/>
+
+ <!-- test 'opacity' -->
+ <rect width="25%" height="100%" fill="url(#red)" opacity="0"/>
+
+ <!-- test 'fill-opacity' -->
+ <rect x="25%" width="25%" height="100%" fill="url(#red)" fill-opacity="0"/>
+
+ <!-- test 'stroke-opacity' -->
+ <line x1="75%" x2="75%" y2="100%" stroke="url(#red)" stroke-width="50%" stroke-opacity="0"/>
+
+</svg>
diff --git a/layout/reftests/svg/opacity-and-gradient-02-ref.svg b/layout/reftests/svg/opacity-and-gradient-02-ref.svg
new file mode 100644
index 0000000000..085d8b6f1a
--- /dev/null
+++ b/layout/reftests/svg/opacity-and-gradient-02-ref.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" version="1.1">
+
+ <title>Testcase for opacity on elements referencing a gradient</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=539165 -->
+
+ <defs>
+ <linearGradient id="lime" gradientUnits="userSpaceOnUse">
+ <stop stop-color="lime"/>
+ </linearGradient>
+ <!-- OS X doesn't draw solid gradients as a solid color so we need to use
+ a gradient fill below
+ -->
+ <linearGradient id="red" gradientUnits="userSpaceOnUse">
+ <stop stop-color="red"/>
+ </linearGradient>
+ </defs>
+
+ <rect width="100%" height="100%" fill="url(#lime)"/>
+
+ <!-- test 'opacity' -->
+ <rect width="25%" height="100%" fill="url(#red)" opacity="1"/>
+
+ <!-- test 'fill-opacity' -->
+ <rect x="25%" width="25%" height="100%" fill="url(#red)" opacity="0.5"/>
+
+ <!-- test 'fill-opacity' -->
+ <rect x="50%" width="25%" height="100%" fill="url(#red)" opacity="0.5"/>
+
+</svg>
diff --git a/layout/reftests/svg/opacity-and-gradient-02.svg b/layout/reftests/svg/opacity-and-gradient-02.svg
new file mode 100644
index 0000000000..d4f34f0cc9
--- /dev/null
+++ b/layout/reftests/svg/opacity-and-gradient-02.svg
@@ -0,0 +1,42 @@
+<!--
+ 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 for opacity on elements referencing a gradient</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=539165 -->
+
+ <defs>
+ <linearGradient id="lime" gradientUnits="userSpaceOnUse">
+ <stop stop-color="lime"/>
+ </linearGradient>
+ <linearGradient id="red" gradientUnits="userSpaceOnUse">
+ <stop stop-color="red"/>
+ </linearGradient>
+ <linearGradient id="red2" gradientUnits="userSpaceOnUse">
+ <stop stop-color="red" offset="0%"/>
+ <stop stop-color="red" offset="100%"/>
+ </linearGradient>
+ <linearGradient id="redgreen" gradientUnits="userSpaceOnUse">
+ <stop stop-color="red" offset="0%"/>
+ <stop stop-color="lime" offset="100%"/>
+ </linearGradient>
+ </defs>
+
+ <rect width="100%" height="100%" fill="url(#lime)"/>
+
+ <!-- test 'opacity' -->
+ <rect width="25%" height="100%" fill="red" opacity="1"/>
+
+ <!-- test 'fill-opacity' -->
+ <rect x="25%" width="25%" height="100%" fill="url(#red)" fill-opacity="0.5"/>
+
+ <!-- test 'fill-opacity' -->
+ <rect x="50%" width="25%" height="100%" fill="url(#red2)" fill-opacity="0.5"/>
+
+ <!-- test 'fill-opacity' -->
+ <rect x="75%" width="25%" height="100%" fill="url(#redgreen)" fill-opacity="0"/>
+
+</svg>
diff --git a/layout/reftests/svg/opacity-and-pattern-01.svg b/layout/reftests/svg/opacity-and-pattern-01.svg
new file mode 100644
index 0000000000..665c9064a4
--- /dev/null
+++ b/layout/reftests/svg/opacity-and-pattern-01.svg
@@ -0,0 +1,36 @@
+<!--
+ 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 for opacity on elements referencing a pattern</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=374280 -->
+
+ <defs>
+ <pattern id="lime" width="100%" height="100%" patternUnits="userSpaceOnUse">
+ <rect width="100%" height="100%" fill="lime"/>
+ </pattern>
+
+ <pattern id="red" width="100%" height="100%" patternUnits="userSpaceOnUse">
+ <rect width="100%" height="100%" fill="red"/>
+ </pattern>
+ </defs>
+
+ <rect width="100%" height="100%" fill="red"/>
+
+ <!-- Create the "pass" rect using a pattern so the testcase doesn't seem to
+ pass if patterns are not supported -->
+ <rect width="100%" height="100%" fill="url(#lime)"/>
+
+ <!-- test 'opacity' -->
+ <rect width="25%" height="100%" fill="url(#red)" opacity="0"/>
+
+ <!-- test 'fill-opacity' -->
+ <rect x="25%" width="25%" height="100%" fill="url(#red)" fill-opacity="0"/>
+
+ <!-- test 'stroke-opacity' -->
+ <line x1="75%" x2="75%" y2="100%" stroke="url(#red)" stroke-width="50%" stroke-opacity="0"/>
+
+</svg>
diff --git a/layout/reftests/svg/opacity-and-transform-01-ref.svg b/layout/reftests/svg/opacity-and-transform-01-ref.svg
new file mode 100644
index 0000000000..9123b3255f
--- /dev/null
+++ b/layout/reftests/svg/opacity-and-transform-01-ref.svg
@@ -0,0 +1,7 @@
+<!--
+ 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">
+ <rect x="10" y="10" width="100" height="100" fill="blue" opacity="0.5"/>
+</svg>
diff --git a/layout/reftests/svg/opacity-and-transform-01.svg b/layout/reftests/svg/opacity-and-transform-01.svg
new file mode 100644
index 0000000000..74cd984e00
--- /dev/null
+++ b/layout/reftests/svg/opacity-and-transform-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" version="1.1">
+
+ <title>Testcase for opacity on elements that are transformed</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=806432 -->
+
+ <filter id="f">
+ <feOffset dx="0.0001"/>
+ </filter>
+
+ <!-- The filter is purely to force the element to be rendered via the
+ nsSVGIntegrationUtils code path. (A mask or non-trivial clipPath that
+ have no effect would do just as well.)
+ -->
+
+ <rect width="100" height="100" transform="translate(10,10)" fill="blue" opacity="0.5" filter="url(#f)"/>
+
+</svg>
diff --git a/layout/reftests/svg/outer-svg-border-and-padding-01-ref.svg b/layout/reftests/svg/outer-svg-border-and-padding-01-ref.svg
new file mode 100644
index 0000000000..688c760d42
--- /dev/null
+++ b/layout/reftests/svg/outer-svg-border-and-padding-01-ref.svg
@@ -0,0 +1,9 @@
+<!--
+ 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"
+ style="border: 10px solid lime; padding: 10px; background: lime;">
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=490003 -->
+ <title>Reference that invalidation takes account of outer-&lt;svg&gt; border/padding</title>
+</svg>
diff --git a/layout/reftests/svg/outer-svg-border-and-padding-01.svg b/layout/reftests/svg/outer-svg-border-and-padding-01.svg
new file mode 100644
index 0000000000..f9f7b20685
--- /dev/null
+++ b/layout/reftests/svg/outer-svg-border-and-padding-01.svg
@@ -0,0 +1,58 @@
+<!--
+ 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"
+ style="border: 10px solid lime; padding: 10px; background: lime;">
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=490003 -->
+ <title>Test that invalidation takes account of outer-&lt;svg&gt; border/padding</title>
+ <desc>
+ This test checks that SVG implementations take account of border and
+ padding on outer &lt;svg&gt; when doing invalidation.
+ </desc>
+
+ <filter id="identity">
+ <feColorMatrix type="saturate" in="SourceGraphic"/>
+ </filter>
+
+ <script type="text/javascript">//<![CDATA[
+
+function hide_red_rects()
+{
+ var background = document.getElementById("background");
+
+ document.getElementById('r').setAttribute('opacity','0');
+ document.getElementById('f').setAttribute('opacity','0');
+
+ <!-- top left -->
+ document.elementFromPoint(121, 121).setAttribute('opacity','0');
+ <!-- bottom right -->
+ document.elementFromPoint(269, 169).setAttribute('opacity','0');
+
+ <!-- outside top left -->
+ if (document.elementFromPoint(119, 119) != background) {
+ background.setAttribute("fill", "red");
+ }
+ <!-- outside bottom right -->
+ if (document.elementFromPoint(271, 171) != background) {
+ background.setAttribute("fill", "purple");
+ }
+
+ document.documentElement.removeAttribute('class');
+}
+
+document.addEventListener("MozReftestInvalidate", hide_red_rects, false);
+setTimeout(hide_red_rects, 4000); // fallback for running outside reftest
+
+ //]]>
+ </script>
+
+ <!-- to catch misses-->
+ <rect id="background" width="100%" height="100%" fill="lime"/>
+
+ <rect id="r" width="50" height="50" fill="red"/>
+ <rect id="f" y="100" width="50" height="50" fill="red"/>
+
+ <rect x="100" y="100" width="50" height="50" fill="red"/>
+ <rect x="200" y="100" width="50" height="50" fill="red"/>
+</svg>
diff --git a/layout/reftests/svg/outline-ref.html b/layout/reftests/svg/outline-ref.html
new file mode 100644
index 0000000000..871446d41b
--- /dev/null
+++ b/layout/reftests/svg/outline-ref.html
@@ -0,0 +1,93 @@
+<!DOCTYPE HTML>
+<html lang="en">
+<body>
+<svg xmlns="http://www.w3.org/2000/svg" overflow="visible">
+ <g>
+ <rect id="rect" width="100" height="100" style="fill: yellow"/>
+ <text id="text" x="0" y="140" font-family="Verdana" font-size="20">
+ Hello world
+ </text>
+ <foreignObject id="foreignObject" x="0" y="160" width="200" height="60">
+ <div xmlns="http://www.w3.org/1999/xhtml">
+ Here is a paragraph that requires word wrap
+ </div>
+ </foreignObject>
+ <circle id="circle" cx="40" cy="275" r="40" style="fill: green"/>
+ <ellipse id="ellipse" cx="70" cy="380" rx="70" ry="50" style="fill: yellow"/>
+ <image id="image" x="0" y="450" height="100" width="100"/>
+ <line id="line" x1="0" y1="580" x2="100" y2="580" style="stroke: red; stroke-width: 2"/>
+ <path id="path" d="M50 600 L10 650 L90 650 Z"/>
+ <polygon id="polygon" points="300,50 350,0 400,50" style="fill: lime"/>
+ <polyline id="polyline" points="300,80 350,70 400,80" style="fill: none;stroke: black; stroke-width: 3"/>
+ <g transform="translate(300, 70)">
+ <circle id="gCircle" cx="50" cy="50" r="20" style="fill: blue"/>
+ </g>
+ <g transform="translate(300, 150)">
+ <circle id="ggCircle" cx="50" cy="50" r="20" style="fill: green"/>
+ <g>
+ <rect id="ggRect" x="15" y ="15" width="30" height="10" style="fill: blue"/>
+ </g>
+ </g>
+ <svg x="300" y="250">
+ <rect id="innerRect" x="30" y="10" height="50" width="50" style="fill: red"/>
+ </svg>
+ <a xlink:href="#" id="link">
+ <text x="300" y="350" font-family="Verdana" font-size="20">
+ link
+ </text>
+ </a>
+ </g>
+</svg>
+<script>
+
+function createOutline(boundingRect) {
+ // Outline starts from a top-left shift pixel of the bounding rect
+ var left = boundingRect.left - 1;
+ var top = boundingRect.top - 1;
+ var right = boundingRect.right;
+ var bottom = boundingRect.bottom;
+ var width = boundingRect.width;
+ var height = boundingRect.height;
+
+ var lines = document.createElement("div");
+ var styles = 'border: 1px solid black;'
+ + 'width: ' + width + 'px;'
+ + 'height: ' + height + 'px;'
+ + 'position: absolute;'
+ + 'top: ' + top + 'px;'
+ + 'left: ' + left + 'px;';
+
+ lines.setAttribute('style', styles);
+ document.body.appendChild(lines);
+}
+
+window.onload = function drawOutline() {
+ var elements = ['rect', 'foreignObject', 'circle',
+ 'ellipse', 'image', 'line', 'path',
+ 'polygon', 'polyline', 'text','gCircle',
+ 'innerRect', 'link'];
+ elements.forEach(id => {
+ var element = document.getElementById(id);
+ createOutline(element.getBoundingClientRect());
+ });
+
+ var ggRect = document.getElementById('ggRect');
+ var ggRectbbox = ggRect.getBoundingClientRect();
+ createOutline(ggRectbbox);
+
+ var ggCircle = document.getElementById('ggCircle');
+ var ggCirclebbox = ggCircle.getBoundingClientRect();
+
+ var ggbbox = {
+ left: ggRectbbox.left,
+ top: ggRectbbox.top,
+ right: ggCirclebbox.right,
+ bottom: ggCirclebbox.bottom
+ };
+ ggbbox.width = ggbbox.right - ggbbox.left;
+ ggbbox.height = ggbbox.bottom - ggbbox.top;
+ createOutline(ggbbox);
+}
+</script>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/svg/outline.html b/layout/reftests/svg/outline.html
new file mode 100644
index 0000000000..11b6dced5d
--- /dev/null
+++ b/layout/reftests/svg/outline.html
@@ -0,0 +1,57 @@
+<!DOCTYPE HTML>
+<html lang="en">
+<style>
+rect,
+text,
+foreignObject,
+circle,
+ellipse,
+image,
+line,
+path,
+polygon,
+polyline {
+ outline: 1px solid black;
+}
+
+</style>
+<body>
+<svg xmlns="http://www.w3.org/2000/svg" overflow="visible">
+ <g>
+ <rect width="100" height="100" style="fill: yellow"/>
+ <text x="0" y="140" font-family="Verdana" font-size="20">
+ Hello world
+ </text>
+ <foreignObject x="0" y="160" width="200" height="60">
+ <div xmlns="http://www.w3.org/1999/xhtml">
+ Here is a paragraph that requires word wrap
+ </div>
+ </foreignObject>
+ <circle cx="40" cy="275" r="40" style="fill: green"/>
+ <ellipse cx="70" cy="380" rx="70" ry="50" style="fill: yellow"/>
+ <image x="0" y="450" height="100" width="100"/>
+ <line x1="0" y1="580" x2="100" y2="580" style="stroke: red; stroke-width: 2"/>
+ <path d="M50 600 L10 650 L90 650 Z"/>
+ <polygon points="300,50 350,0 400,50" style="fill: lime"/>
+ <polyline points="300,80 350,70 400,80" style="fill: none; stroke: black;stroke-width: 3"/>
+ <g transform="translate(300, 70)" style="outline: 1px solid">
+ <circle cx="50" cy="50" r="20" style="fill: blue; outline: 0px"/>
+ </g>
+ <g transform="translate(300, 150)" style="outline: 1px solid">
+ <circle cx="50" cy="50" r="20" style="fill: green; outline: 0px"/>
+ <g>
+ <rect x="15" y="15" width="30" height="10" style="fill: blue"/>
+ </g>
+ </g>
+ <svg x="300" y="250">
+ <rect x="30" y="10" height="50" width="50" style="fill: red"/>
+ </svg>
+ <a xlink:href="#" id="link">
+ <text x="300" y="350" font-family="Verdana" font-size="20">
+ link
+ </text>
+ </a>
+ </g>
+</svg>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/svg/overflow-on-outer-svg-01-ref.svg b/layout/reftests/svg/overflow-on-outer-svg-01-ref.svg
new file mode 100644
index 0000000000..a3908ab112
--- /dev/null
+++ b/layout/reftests/svg/overflow-on-outer-svg-01-ref.svg
@@ -0,0 +1,7 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+ <rect width="100" height="100" fill="blue"/>
+</svg>
diff --git a/layout/reftests/svg/overflow-on-outer-svg-01.svg b/layout/reftests/svg/overflow-on-outer-svg-01.svg
new file mode 100644
index 0000000000..f18b8595b0
--- /dev/null
+++ b/layout/reftests/svg/overflow-on-outer-svg-01.svg
@@ -0,0 +1,11 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+ style="overflow:visible;"
+ width="100" height="100">
+ <title>Test that we always clip root-&lt;svg&gt; regardless of 'overflow'</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=378923 -->
+ <rect width="100%" height="100%" fill="blue"/>
+</svg>
diff --git a/layout/reftests/svg/overflow-on-outer-svg-02-ref.xhtml b/layout/reftests/svg/overflow-on-outer-svg-02-ref.xhtml
new file mode 100644
index 0000000000..96f8aa1250
--- /dev/null
+++ b/layout/reftests/svg/overflow-on-outer-svg-02-ref.xhtml
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <body>
+ <div style="background-color: blue; width: 100px; height: 100px;"></div>
+ </body>
+</html>
diff --git a/layout/reftests/svg/overflow-on-outer-svg-02a.xhtml b/layout/reftests/svg/overflow-on-outer-svg-02a.xhtml
new file mode 100644
index 0000000000..aadf9b5430
--- /dev/null
+++ b/layout/reftests/svg/overflow-on-outer-svg-02a.xhtml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>Test that non-root outer-&lt;svg&gt; clips for overflow="auto"</title>
+ </head>
+ <body>
+ <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"
+ overflow="auto">
+ <rect x="-50" y="-50" width="200" height="200" fill="blue"/>
+ </svg>
+ </body>
+</html>
diff --git a/layout/reftests/svg/overflow-on-outer-svg-02b.xhtml b/layout/reftests/svg/overflow-on-outer-svg-02b.xhtml
new file mode 100644
index 0000000000..48ae9dd571
--- /dev/null
+++ b/layout/reftests/svg/overflow-on-outer-svg-02b.xhtml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>Test that non-root outer-&lt;svg&gt; clips for overflow="scroll"</title>
+ </head>
+ <body>
+ <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"
+ overflow="scroll">
+ <rect x="-50" y="-50" width="200" height="200" fill="blue"/>
+ </svg>
+ </body>
+</html>
diff --git a/layout/reftests/svg/overflow-on-outer-svg-02c.xhtml b/layout/reftests/svg/overflow-on-outer-svg-02c.xhtml
new file mode 100644
index 0000000000..151f04c304
--- /dev/null
+++ b/layout/reftests/svg/overflow-on-outer-svg-02c.xhtml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>Test that non-root outer-&lt;svg&gt; clips for overflow="hidden"</title>
+ </head>
+ <body>
+ <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"
+ overflow="hidden">
+ <rect x="-50" y="-50" width="200" height="200" fill="blue"/>
+ </svg>
+ </body>
+</html>
diff --git a/layout/reftests/svg/overflow-on-outer-svg-02d.xhtml b/layout/reftests/svg/overflow-on-outer-svg-02d.xhtml
new file mode 100644
index 0000000000..02788d1e00
--- /dev/null
+++ b/layout/reftests/svg/overflow-on-outer-svg-02d.xhtml
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+ class="reftest-wait">
+ <head>
+ <title>Test that non-root outer-&lt;svg&gt; repaints correctly changing to overflow="hidden"</title>
+ <script>
+
+function doTest() {
+ document.getElementById("svg").setAttribute("overflow", "hidden");
+ document.documentElement.removeAttribute("class");
+}
+
+window.addEventListener("MozReftestInvalidate", doTest, false);
+setTimeout(doTest, 4000); // fallback for running outside reftest
+
+ </script>
+ </head>
+ <body>
+ <svg id="svg" xmlns="http://www.w3.org/2000/svg" width="100" height="100"
+ overflow="visible">
+ <rect x="-50" y="-50" width="200" height="200" fill="blue"/>
+ </svg>
+ </body>
+</html>
diff --git a/layout/reftests/svg/overflow-on-outer-svg-03-ref.xhtml b/layout/reftests/svg/overflow-on-outer-svg-03-ref.xhtml
new file mode 100644
index 0000000000..9b9a433d23
--- /dev/null
+++ b/layout/reftests/svg/overflow-on-outer-svg-03-ref.xhtml
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <body>
+ <div style="background-color: blue; transform: translate(-50px, -50px); width: 200px; height: 200px;"></div>
+ </body>
+</html>
diff --git a/layout/reftests/svg/overflow-on-outer-svg-03a.xhtml b/layout/reftests/svg/overflow-on-outer-svg-03a.xhtml
new file mode 100644
index 0000000000..4eb948f1a6
--- /dev/null
+++ b/layout/reftests/svg/overflow-on-outer-svg-03a.xhtml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>Test that non-root outer-&lt;svg&gt; clips for overflow="auto"</title>
+ </head>
+ <body>
+ <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"
+ overflow="visible">
+ <rect x="-50" y="-50" width="200" height="200" fill="blue"/>
+ </svg>
+ </body>
+</html>
diff --git a/layout/reftests/svg/overflow-on-outer-svg-03b.xhtml b/layout/reftests/svg/overflow-on-outer-svg-03b.xhtml
new file mode 100644
index 0000000000..3c41dd97a2
--- /dev/null
+++ b/layout/reftests/svg/overflow-on-outer-svg-03b.xhtml
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+ class="reftest-wait">
+ <head>
+ <title>Test that non-root outer-&lt;svg&gt; repaints correctly changing to overflow="visible"</title>
+ <script>
+
+function doTest() {
+ document.getElementById("svg").setAttribute("overflow", "visible");
+ document.documentElement.removeAttribute("class");
+}
+
+window.addEventListener("MozReftestInvalidate", doTest, false);
+setTimeout(doTest, 4000); // fallback for running outside reftest
+
+ </script>
+ </head>
+ <body>
+ <svg id="svg" xmlns="http://www.w3.org/2000/svg" width="100" height="100"
+ overflow="hidden">
+ <rect x="-50" y="-50" width="200" height="200" fill="blue"/>
+ </svg>
+ </body>
+</html>
diff --git a/layout/reftests/svg/overflow-visible-image-ref.html b/layout/reftests/svg/overflow-visible-image-ref.html
new file mode 100644
index 0000000000..ca4cdd7db8
--- /dev/null
+++ b/layout/reftests/svg/overflow-visible-image-ref.html
@@ -0,0 +1,10 @@
+<html>
+ <svg style="position: absolute; top: 0px; overflow: visible">
+ <rect width=100 height=100 x=100 y=200 fill=black />
+ <image width=100 height=100 x=0 y=0
+ xlink:href='data:image/svg+xml,
+ <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 200 200">
+ <rect width="100" height="100" x="0" y="0" fill="green"/>
+ </svg>'
+ />
+ </svg>
diff --git a/layout/reftests/svg/overflow-visible-image.html b/layout/reftests/svg/overflow-visible-image.html
new file mode 100644
index 0000000000..f2652bfa08
--- /dev/null
+++ b/layout/reftests/svg/overflow-visible-image.html
@@ -0,0 +1,10 @@
+<html>
+ <svg style="position: absolute; top: 100px; overflow: visible">
+ <rect width=100 height=100 x=100 y=100 fill=black />
+ <image width=100 height=100 x=0 y=-100
+ xlink:href='data:image/svg+xml,
+ <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 200 200">
+ <rect width="100" height="100" x="0" y="0" fill="green"/>
+ </svg>'
+ />
+ </svg>
diff --git a/layout/reftests/svg/paint-on-maskLayer-1-ref.html b/layout/reftests/svg/paint-on-maskLayer-1-ref.html
new file mode 100644
index 0000000000..5667f47bb6
--- /dev/null
+++ b/layout/reftests/svg/paint-on-maskLayer-1-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<style type="text/css">
+ div {
+ background: blue;
+ width: 100px;
+ height: 100px;
+ }
+</style>
+<div></div>
+</html> \ No newline at end of file
diff --git a/layout/reftests/svg/paint-on-maskLayer-1a.html b/layout/reftests/svg/paint-on-maskLayer-1a.html
new file mode 100644
index 0000000000..88c39177cb
--- /dev/null
+++ b/layout/reftests/svg/paint-on-maskLayer-1a.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<title>Paint clip-path onto mask layer</title>
+<style type="text/css">
+ #inner {
+ width: 200px;
+ height: 200px;
+ box-sizing:border-box;
+ background: blue;
+ /* make clip-path pained on mask layer */
+ border: 1px solid transparent;
+ will-change: transform;
+ }
+
+ #outer {
+ width: 200px;
+ height: 200px;
+ clip-path: url(#path);
+ /* make it fixed so that inner div has different AGR with outter div */
+ position: fixed;
+ }
+</style>
+<div id="outer">
+ <div id="inner"></div>
+</div>
+
+<svg height="0">
+ <defs>
+ <clipPath id="path">
+ <rect x="0" y="0" width="100" height="100"/>
+ </clipPath>
+ </defs>
+</svg>
+</html> \ No newline at end of file
diff --git a/layout/reftests/svg/paint-on-maskLayer-1b.html b/layout/reftests/svg/paint-on-maskLayer-1b.html
new file mode 100644
index 0000000000..6c6a433d0b
--- /dev/null
+++ b/layout/reftests/svg/paint-on-maskLayer-1b.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<title>Paint positioned mask onto mask layer</title>
+<style type="text/css">
+ #inner {
+ width: 200px;
+ height: 200px;
+ box-sizing:border-box;
+ background: blue;
+ /* make mask pained on mask layer */
+ border: 1px solid transparent;
+ will-change: transform;
+ }
+
+ #outer {
+ width: 200px;
+ height: 200px;
+ mask-image: url(#mymask);
+ /* make it fixed so that inner div has different AGR with outter div */
+ position: fixed;
+ }
+</style>
+<div id="outer">
+ <div id="inner"></div>
+</div>
+
+<svg height="0">
+ <defs>
+ <mask id="mymask" x="0" y="0" width="1" height="1">
+ <rect x="0" y="0" width="100" height="100" fill="white"/>
+ </mask>
+ </defs>
+</svg>
+</html> \ No newline at end of file
diff --git a/layout/reftests/svg/paint-on-maskLayer-1c.html b/layout/reftests/svg/paint-on-maskLayer-1c.html
new file mode 100644
index 0000000000..9389cf5b92
--- /dev/null
+++ b/layout/reftests/svg/paint-on-maskLayer-1c.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<title>Paint clip-path onto mask layer</title>
+<style type="text/css">
+ #inner {
+ width: 200px;
+ height: 200px;
+ box-sizing: border-box;
+ background: blue;
+ /* make clip-path pained on mask layer */
+ border: 1px solid transparent;
+ will-change: transform;
+ }
+
+ #outer {
+ width: 200px;
+ height: 200px;
+ clip-path: inset(0px 100px 100px 0px);
+ /* make it fixed so that inner div has different AGR with outter div */
+ position: fixed;
+ }
+</style>
+<div id="outer">
+ <div id="inner"></div>
+</div>
+
+</html> \ No newline at end of file
diff --git a/layout/reftests/svg/paint-order-01-ref.svg b/layout/reftests/svg/paint-order-01-ref.svg
new file mode 100644
index 0000000000..e73a988b0e
--- /dev/null
+++ b/layout/reftests/svg/paint-order-01-ref.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">
+ <title>Reference for paint-order-01.svg</title>
+ <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=828805 -->
+
+ <g fill="gold" stroke="black" stroke-width="8">
+
+ <circle cx="50" cy="50" r="20" fill-opacity="1" stroke-opacity="0"/>
+ <circle cx="50" cy="50" r="20" fill-opacity="0" stroke-opacity="1"/>
+
+ <circle cx="50" cy="100" r="20" fill-opacity="0" stroke-opacity="1"/>
+ <circle cx="50" cy="100" r="20" fill-opacity="1" stroke-opacity="0"/>
+
+ <circle cx="50" cy="150" r="20" fill-opacity="0" stroke-opacity="1"/>
+ <circle cx="50" cy="150" r="20" fill-opacity="1" stroke-opacity="0"/>
+
+ <circle cx="50" cy="200" r="20" fill-opacity="0" stroke-opacity="1"/>
+ <circle cx="50" cy="200" r="20" fill-opacity="1" stroke-opacity="0"/>
+
+ <circle cx="50" cy="250" r="20" fill-opacity="0" stroke-opacity="1"/>
+ <circle cx="50" cy="250" r="20" fill-opacity="1" stroke-opacity="0"/>
+
+ <circle cx="50" cy="300" r="20" fill-opacity="0" stroke-opacity="1"/>
+ <circle cx="50" cy="300" r="20" fill-opacity="1" stroke-opacity="0"/>
+
+ <circle cx="50" cy="350" r="20" fill-opacity="1" stroke-opacity="0"/>
+ <circle cx="50" cy="350" r="20" fill-opacity="0" stroke-opacity="1"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/paint-order-01.svg b/layout/reftests/svg/paint-order-01.svg
new file mode 100644
index 0000000000..6229b28bf2
--- /dev/null
+++ b/layout/reftests/svg/paint-order-01.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">
+ <title>Test that the paint-order property works</title>
+ <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=828805 -->
+
+ <g fill="gold" stroke="black" stroke-width="8">
+ <circle cx="50" cy="50" r="20"/>
+ <circle cx="50" cy="100" r="20" style="paint-order: stroke fill markers"/>
+ <circle cx="50" cy="150" r="20" paint-order="stroke fill markers"/>
+ <circle cx="50" cy="200" r="20" paint-order="stroke markers fill"/>
+ <circle cx="50" cy="250" r="20" paint-order="stroke fill"/>
+ <circle cx="50" cy="300" r="20" paint-order="stroke"/>
+ <circle cx="50" cy="350" r="20" paint-order="normal"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/paint-order-02-ref.svg b/layout/reftests/svg/paint-order-02-ref.svg
new file mode 100644
index 0000000000..46731a5bff
--- /dev/null
+++ b/layout/reftests/svg/paint-order-02-ref.svg
@@ -0,0 +1,36 @@
+<!--
+ 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 paint-order-02.svg</title>
+ <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=828805 -->
+
+ <linearGradient id="gold">
+ <stop stop-color="gold"/>
+ </linearGradient>
+
+ <linearGradient id="black">
+ <stop stop-color="black"/>
+ </linearGradient>
+
+ <g fill="url(#gold)" stroke="url(#black)" stroke-width="8" paint-order="stroke">
+ <ellipse cx="50" cy="50" rx="40" ry="20" fill="none"/>
+ <ellipse cx="50" cy="50" rx="40" ry="20" stroke="none"/>
+
+ <path d="M 50,100 h 40 v 30 z" fill="none"/>
+ <path d="M 50,100 h 40 v 30 z" stroke="none"/>
+
+ <polygon points="50,150 90,150 90,180" fill="none"/>
+ <polygon points="50,150 90,150 90,180" stroke="none"/>
+
+ <polyline points="50,200 90,200 90,230" fill="none"/>
+ <polyline points="50,200 90,200 90,230" stroke="none"/>
+
+ <rect x="50" y="250" width="80" height="30" r="16" fill="none"/>
+ <rect x="50" y="250" width="80" height="30" r="16" stroke="none"/>
+
+ <text x="50" y="350" font-size="80" stroke-width="4"><tspan fill="none">hello</tspan> <tspan stroke="none">there</tspan></text>
+ <text x="50" y="350" font-size="80" stroke-width="4"><tspan stroke="none">hello</tspan> <tspan fill="none">there</tspan></text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/paint-order-02.svg b/layout/reftests/svg/paint-order-02.svg
new file mode 100644
index 0000000000..52e7ac2dd9
--- /dev/null
+++ b/layout/reftests/svg/paint-order-02.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">
+ <title>Test that the paint-order property works</title>
+ <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=828805 -->
+
+ <linearGradient id="gold">
+ <stop stop-color="gold"/>
+ </linearGradient>
+
+ <linearGradient id="black">
+ <stop stop-color="black"/>
+ </linearGradient>
+
+ <g fill="url(#gold)" stroke="url(#black)" stroke-width="8" paint-order="stroke">
+ <ellipse cx="50" cy="50" rx="40" ry="20"/>
+ <path d="M 50,100 h 40 v 30 z"/>
+ <polygon points="50,150 90,150 90,180"/>
+ <polyline points="50,200 90,200 90,230"/>
+ <rect x="50" y="250" width="80" height="30" r="16"/>
+ <text x="50" y="350" font-size="80" stroke-width="4">hello <tspan paint-order="normal">there</tspan></text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/paint-order-03-ref.svg b/layout/reftests/svg/paint-order-03-ref.svg
new file mode 100644
index 0000000000..1adf907031
--- /dev/null
+++ b/layout/reftests/svg/paint-order-03-ref.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">
+ <title>Reference for paint-order-03.svg</title>
+ <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=828805 -->
+
+ <defs>
+ <marker id="m" markerWidth="40" markerHeight="40" refX="20" refY="20" markerUnits="userSpaceOnUse">
+ <circle cx="20" cy="20" r="16" fill="fuchsia"/>
+ </marker>
+ </defs>
+
+ <g stroke-width="8">
+ <g fill="none" stroke="none" style="marker: url(#m)">
+ <path d="M 50,50 h 100 v 100 h -50 z"/>
+ <line x1="200" y1="50" x2="300" y2="150"/>
+ <polygon points="50,200 50,300 200,200 200,300"/>
+ </g>
+ <g fill="none" stroke="black">
+ <path d="M 50,50 h 100 v 100 h -50 z"/>
+ <line x1="200" y1="50" x2="300" y2="150"/>
+ <polygon points="50,200 50,300 200,200 200,300"/>
+ </g>
+ <g fill="gold" stroke="none">
+ <path d="M 50,50 h 100 v 100 h -50 z"/>
+ <line x1="200" y1="50" x2="300" y2="150"/>
+ <polygon points="50,200 50,300 200,200 200,300"/>
+ </g>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/paint-order-03.svg b/layout/reftests/svg/paint-order-03.svg
new file mode 100644
index 0000000000..8b2c02d777
--- /dev/null
+++ b/layout/reftests/svg/paint-order-03.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">
+ <title>Test that the paint-order property works</title>
+ <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=828805 -->
+
+ <defs>
+ <marker id="m" markerWidth="40" markerHeight="40" refX="20" refY="20" markerUnits="userSpaceOnUse">
+ <circle cx="20" cy="20" r="16" fill="fuchsia"/>
+ </marker>
+ </defs>
+
+ <g fill="gold" stroke="black" stroke-width="8" style="marker: url(#m)" paint-order="markers stroke fill">
+ <path d="M 50,50 h 100 v 100 h -50 z"/>
+ <line x1="200" y1="50" x2="300" y2="150"/>
+ <polygon points="50,200 50,300 200,200 200,300"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/pass.svg b/layout/reftests/svg/pass.svg
new file mode 100644
index 0000000000..c09c6601e8
--- /dev/null
+++ b/layout/reftests/svg/pass.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/path-01-ref.svg b/layout/reftests/svg/path-01-ref.svg
new file mode 100644
index 0000000000..09ba749aa9
--- /dev/null
+++ b/layout/reftests/svg/path-01-ref.svg
@@ -0,0 +1,11 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
+ <title>Reference for path consisting of a single point</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=510177 -->
+
+ <circle cx="100" cy="100" r="10" fill="black"/>
+</svg>
diff --git a/layout/reftests/svg/path-01.svg b/layout/reftests/svg/path-01.svg
new file mode 100644
index 0000000000..7085d8701d
--- /dev/null
+++ b/layout/reftests/svg/path-01.svg
@@ -0,0 +1,11 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
+ <title>Testcase for path consisting of a single point</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=510177 -->
+
+ <path stroke="black" stroke-width="20" stroke-linecap="round" d="M100 100 Z" />
+</svg>
diff --git a/layout/reftests/svg/path-02.svg b/layout/reftests/svg/path-02.svg
new file mode 100644
index 0000000000..c863c08338
--- /dev/null
+++ b/layout/reftests/svg/path-02.svg
@@ -0,0 +1,15 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
+ <title>Testcase for path with errors</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=553905 -->
+
+ <rect width="100%" height="100%" fill="lime"/>
+ <g shape-rendering="crispEdges">
+ <path d="M 20 200 H 80" stroke-width="20%" stroke="red"/>
+ <path d="M 20 200 H 80#90" stroke-width="20%" stroke="lime"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/path-04.svg b/layout/reftests/svg/path-04.svg
new file mode 100644
index 0000000000..e58254da15
--- /dev/null
+++ b/layout/reftests/svg/path-04.svg
@@ -0,0 +1,33 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait">
+
+ <title>Test that selectors detect changes to the 'd' attribute</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=610990 -->
+
+ <style>
+
+path[d="M0,0 V100 H100 V0 Z"] {
+ fill: lime;
+}
+
+ </style>
+ <script><![CDATA[
+
+function run()
+{
+ document.getElementById('path').setAttribute('d', 'M0,0 V100 H100 V0 Z');
+ document.documentElement.removeAttribute('class');
+}
+
+window.addEventListener('MozReftestInvalidate', run, false);
+
+ ]]></script>
+
+ <rect width="100%" height="100%" fill="lime"/>
+ <path id="path" fill="red" d="M0,0 H100 V100 H0 Z"/>
+
+</svg>
diff --git a/layout/reftests/svg/path-05.svg b/layout/reftests/svg/path-05.svg
new file mode 100644
index 0000000000..28a7305b29
--- /dev/null
+++ b/layout/reftests/svg/path-05.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"
+ shape-rendering="crispEdges">
+
+ <title>Testcase for path arc handling</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=657862 -->
+
+ <rect width="100%" height="100%" fill="lime"/>
+
+ <!-- Check that arc paints over entire circle: -->
+
+ <circle cx="100" cy="100" r="79" fill="red"/>
+ <path d="M20,100 A80,80 0,0,1 180,100 A80,80 0,0,1 20,100" fill="lime"/>
+
+ <!-- Check that arc does not paint outside circle: -->
+
+ <g transform="translate(200,0)">
+ <path d="M20,100 A80,80 0,0,1 180,100 A80,80 0,0,1 20,100" fill="red"/>
+ <circle cx="100" cy="100" r="81" fill="lime"/>
+ </g>
+
+</svg>
diff --git a/layout/reftests/svg/path-06-ref.svg b/layout/reftests/svg/path-06-ref.svg
new file mode 100644
index 0000000000..5e7a726fd8
--- /dev/null
+++ b/layout/reftests/svg/path-06-ref.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">
+
+ <title>Reference for zero-sized path arc handling</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=793612 -->
+
+ <!-- Check that a zero-sized arc segment is ignored. -->
+ <path d="M 100,100 H 200 H 300" stroke="red" stroke-width="3px"/>
+</svg>
diff --git a/layout/reftests/svg/path-06.svg b/layout/reftests/svg/path-06.svg
new file mode 100644
index 0000000000..a206e0f38c
--- /dev/null
+++ b/layout/reftests/svg/path-06.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">
+
+ <title>Testcase for zero-sized path arc handling</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=793612 -->
+
+ <!-- Check that a zero-sized arc segment is ignored. -->
+ <path d="M 100,100 H 200 A 200,100 0 0 0 200,100 H 300" stroke="red" stroke-width="3px"/>
+</svg>
diff --git a/layout/reftests/svg/path-07-ref.svg b/layout/reftests/svg/path-07-ref.svg
new file mode 100644
index 0000000000..91192b3a6e
--- /dev/null
+++ b/layout/reftests/svg/path-07-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">
+
+ <title>Reference for negative radius path arc handling</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=729139 -->
+
+ <!-- Check that a negative arc radius is treated as positive. -->
+ <path d="M 150,0
+ a 150,150 0 0,1 106.066,256.066
+ l -35.355,-35.355
+ a 100,100 0 0,0 -70.711,-170.711
+ z" fill="#3d7fe6" shape-rendering="crispEdges"/>
+</svg>
diff --git a/layout/reftests/svg/path-07.svg b/layout/reftests/svg/path-07.svg
new file mode 100644
index 0000000000..221e70d46c
--- /dev/null
+++ b/layout/reftests/svg/path-07.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">
+
+ <title>Testcase for negative radius path arc handling</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=729139 -->
+
+ <!-- Check that a negative arc radius is treated as positive. -->
+ <path d="M 150,0
+ a 150,150 0 0,1 106.066,256.066
+ l -35.355,-35.355
+ a -100,-100 0 0,0 -70.711,-170.711
+ z" fill="#3d7fe6" shape-rendering="crispEdges"/>
+</svg>
diff --git a/layout/reftests/svg/path-08.svg b/layout/reftests/svg/path-08.svg
new file mode 100644
index 0000000000..e18a36d224
--- /dev/null
+++ b/layout/reftests/svg/path-08.svg
@@ -0,0 +1,14 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none">
+
+ <title>Testcase move followed by comma and line co-ordinates</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=938569 -->
+
+ <rect width="100%" height="100%" fill="red"/>
+
+ <path d="M0,0,100,0,100,100,0,100z" fill="lime" shape-rendering="crispEdges"/>
+</svg>
diff --git a/layout/reftests/svg/path-transform-box.svg b/layout/reftests/svg/path-transform-box.svg
new file mode 100644
index 0000000000..955c4a8cc7
--- /dev/null
+++ b/layout/reftests/svg/path-transform-box.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none">
+ <title>Testcase transform-box on a path with fill=none</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=1474834 -->
+
+ <style>
+ path {
+ stroke-width: 12;
+ transform-origin: 50% 50%;
+ transform-box: fill-box;
+ transform: rotate(180deg);
+ }
+ </style>
+ <rect fill="lime" width="100" height="100" stroke="red" stroke-width="10"/>
+ <path fill="none" stroke="lime" d="M0 0 0 100 100 100 100 0z"/>
+</svg>
diff --git a/layout/reftests/svg/pathLength-01.svg b/layout/reftests/svg/pathLength-01.svg
new file mode 100644
index 0000000000..c9261fd46b
--- /dev/null
+++ b/layout/reftests/svg/pathLength-01.svg
@@ -0,0 +1,12 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg viewBox="0 0 100 2" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
+ <rect width="100%" height="100%" fill="red"/>
+ <!-- This path is really 400 units long (and its halfway point is at the
+ right edge of our viewBox). We use pathLength to normalize its length
+ to 20, though, so the first 10-unit-long dash in stroke-dasharray ends
+ up covering 10/20 = 1/2 of the path. This covers the whole viewBox. -->
+ <path d="M-100,1 h400" pathLength="20" stroke-dasharray="10" fill="none" stroke="lime" stroke-width="2"/>
+</svg>
diff --git a/layout/reftests/svg/pathLength-02.svg b/layout/reftests/svg/pathLength-02.svg
new file mode 100644
index 0000000000..8e939bd0fd
--- /dev/null
+++ b/layout/reftests/svg/pathLength-02.svg
@@ -0,0 +1,13 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg viewBox="0 0 100 2" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
+ <rect width="100%" height="100%" fill="lime"/>
+ <!-- This path is really 400 units long (and its halfway point is at the
+ right edge of our viewBox). We use pathLength to normalize its length
+ to 20, though, so the first 5-unit-long dash in stroke-dasharray ends
+ up covering 5/20 = 1/4 of the path. The hole in the dasharray spans
+ the viewBox -->
+ <path d="M-100,1 h400" pathLength="20" stroke-dasharray="5" fill="none" stroke="red" stroke-width="2"/>
+</svg>
diff --git a/layout/reftests/svg/pattern-basic-01.svg b/layout/reftests/svg/pattern-basic-01.svg
new file mode 100644
index 0000000000..b643a8943e
--- /dev/null
+++ b/layout/reftests/svg/pattern-basic-01.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">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=995813 -->
+
+ <title>Test mapped attributes work on the pattern element</title>
+
+ <pattern id="pattern" width="100%" height="100%" fill="lime" patternContentUnits="objectBoundingBox">
+ <rect width="100%" height="100%"/>
+ </pattern>
+
+ <rect width="100%" height="100%" fill="red"/>
+ <rect width="100%" height="100%" fill="url(#pattern)"/>
+
+</svg>
diff --git a/layout/reftests/svg/pattern-big-image-ref.html b/layout/reftests/svg/pattern-big-image-ref.html
new file mode 100644
index 0000000000..0f3eeb5a4d
--- /dev/null
+++ b/layout/reftests/svg/pattern-big-image-ref.html
@@ -0,0 +1,5 @@
+<div style="left: 0px; top: 0px; width: 10px; height: 10px;">
+ <svg x="0" y="0" height="100%" width="100%" preserveAspectRatio="xMidYMid slice" viewBox="0 0 4000 3000">
+ <image xlink:href="big-image.jpeg" width="4000" height="3000"/>
+ </svg>
+</div> \ No newline at end of file
diff --git a/layout/reftests/svg/pattern-big-image.html b/layout/reftests/svg/pattern-big-image.html
new file mode 100644
index 0000000000..caa30a9b7b
--- /dev/null
+++ b/layout/reftests/svg/pattern-big-image.html
@@ -0,0 +1,10 @@
+<div style="left: 0px; top: 0px; width: 10px; height: 10px;">
+ <svg x="0" y="0" height="100%" width="100%">
+ <defs>
+ <pattern id="pattern-big-image" patternUnits="objectBoundingBox" preserveAspectRatio="xMidYMid slice" width="1" height="1" x="0" y="0" viewBox="0 0 4000 3000">
+ <image xlink:href="big-image.jpeg" width="4000" height="3000"/>
+ </pattern>
+ </defs>
+ <rect fill="url(#pattern-big-image)" x="0" y="0" width="100%" height="100%"/>
+ </svg>
+</div> \ No newline at end of file
diff --git a/layout/reftests/svg/pattern-css-transform-ref.html b/layout/reftests/svg/pattern-css-transform-ref.html
new file mode 100644
index 0000000000..532166fe76
--- /dev/null
+++ b/layout/reftests/svg/pattern-css-transform-ref.html
@@ -0,0 +1,10 @@
+<svg width="200" height="200">
+ <defs>
+ <pattern id="Pattern" x="0" y="0" width=".25" height=".25">
+ <rect x="0" y="0" width="30" height="30" fill="skyblue"/>
+ <rect x="40" y="40" width="10" height="10" fill="skyblue" />
+ </pattern>
+ </defs>
+
+ <rect fill="url(#Pattern)" stroke="black" width="200" height="200"/>
+</svg>
diff --git a/layout/reftests/svg/pattern-css-transform.html b/layout/reftests/svg/pattern-css-transform.html
new file mode 100644
index 0000000000..fa6cf5e955
--- /dev/null
+++ b/layout/reftests/svg/pattern-css-transform.html
@@ -0,0 +1,20 @@
+<style>
+#rec1 {
+ transform: scale(.6,.6);
+}
+#rec2 {
+ transform: translate(40px,40px) scale(.2,.2);
+}
+</style>
+<svg width="200" height="200">
+ <defs>
+ <pattern id="Pattern" x="0" y="0" width=".25" height=".25">
+ <rect id="rec1" x="0" y="0" width="50" height="50" fill="skyblue"/>
+ <g>
+ <rect id="rec2" x="0" y="0" width="50" height="50" fill="skyblue"/>
+ </g>
+ </pattern>
+ </defs>
+
+ <rect fill="url(#Pattern)" stroke="black" width="200" height="200"/>
+</svg>
diff --git a/layout/reftests/svg/pattern-invalid-01-ref.svg b/layout/reftests/svg/pattern-invalid-01-ref.svg
new file mode 100644
index 0000000000..289335a173
--- /dev/null
+++ b/layout/reftests/svg/pattern-invalid-01-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 that pattern without width/height does not display</title>
+ <rect width="100%" height="100%" fill="black"/>
+</svg>
diff --git a/layout/reftests/svg/pattern-invalid-01.svg b/layout/reftests/svg/pattern-invalid-01.svg
new file mode 100644
index 0000000000..bbcdda85c1
--- /dev/null
+++ b/layout/reftests/svg/pattern-invalid-01.svg
@@ -0,0 +1,14 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+ <title>Testcase for pattern with no width/height is not displayed</title>
+ <defs>
+ <pattern id="p">
+ <rect width="100%" height="100%" fill="red"/>
+ </pattern>
+ </defs>
+ <rect width="100%" height="100%" fill="black"/>
+ <rect width="100%" height="100%" fill="url(#p)"/>
+</svg>
diff --git a/layout/reftests/svg/pattern-live-01-ref.svg b/layout/reftests/svg/pattern-live-01-ref.svg
new file mode 100644
index 0000000000..374c84d343
--- /dev/null
+++ b/layout/reftests/svg/pattern-live-01-ref.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+
+<pattern patternUnits="userSpaceOnUse" id="pat1" width="20" height="20">
+ <rect x="10" y="10" width="10" height="10" fill="green" id="green" />
+</pattern>
+
+<rect x="25" y="25" width="430" height="60" stroke="black" fill="url(#pat1)" />
+
+</svg>
diff --git a/layout/reftests/svg/pattern-live-01a.svg b/layout/reftests/svg/pattern-live-01a.svg
new file mode 100644
index 0000000000..1409495e46
--- /dev/null
+++ b/layout/reftests/svg/pattern-live-01a.svg
@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait">
+
+ <script type="application/javascript">
+ document.addEventListener("MozReftestInvalidate", doTest, false);
+
+ function doTest() {
+ document.getElementById('pat1').removeChild(document.getElementById('red'));
+ document.documentElement.removeAttribute('class');
+ }
+
+ </script>
+
+<!-- Tests that patterns are live to element removal. -->
+
+<pattern patternUnits="userSpaceOnUse" id="pat1" width="20" height="20">
+ <rect x="10" y="10" width="10" height="10" fill="green" id="green" />
+ <rect x="5" y="5" width="10" height="10" fill="red" id="red" />
+</pattern>
+
+<rect x="25" y="25" width="430" height="60" stroke="black" fill="url(#pat1)" />
+
+</svg>
diff --git a/layout/reftests/svg/pattern-live-01b.svg b/layout/reftests/svg/pattern-live-01b.svg
new file mode 100644
index 0000000000..60011c4efa
--- /dev/null
+++ b/layout/reftests/svg/pattern-live-01b.svg
@@ -0,0 +1,23 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait">
+
+ <script type="application/javascript">
+ document.addEventListener("MozReftestInvalidate", doTest, false);
+
+ function doTest() {
+ document.getElementById('red').setAttribute('fill', 'green');
+ document.documentElement.removeAttribute('class');
+ }
+
+ </script>
+
+<!-- Tests that patterns are live to fill attribute changes. -->
+
+<pattern patternUnits="userSpaceOnUse" id="pat1" width="20" height="20">
+ <rect x="10" y="10" width="10" height="10" fill="red" id="red" />
+</pattern>
+
+<rect x="25" y="25" width="430" height="60" stroke="black" fill="url(#pat1)" />
+
+</svg>
diff --git a/layout/reftests/svg/pattern-live-01c.svg b/layout/reftests/svg/pattern-live-01c.svg
new file mode 100644
index 0000000000..46c421b929
--- /dev/null
+++ b/layout/reftests/svg/pattern-live-01c.svg
@@ -0,0 +1,27 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait">
+
+ <script type="application/javascript">
+ document.addEventListener("MozReftestInvalidate", doTest, false);
+
+ function doTest() {
+ document.getElementById('redsquare').setAttribute('fill', 'green');
+ document.documentElement.removeAttribute('class');
+ }
+
+ </script>
+
+<!-- Tests that patterns are live to fill attribute changes in elements referenced through the |use| element. -->
+
+<defs>
+ <rect id="redsquare" x="10" y="10" width="10" height="10" fill="red" />
+</defs>
+
+<pattern patternUnits="userSpaceOnUse" id="pat1" width="20" height="20">
+ <use xlink:href="#redsquare" />
+</pattern>
+
+<rect x="25" y="25" width="430" height="60" stroke="black" fill="url(#pat1)" />
+
+</svg>
diff --git a/layout/reftests/svg/pattern-scale-01-ref.svg b/layout/reftests/svg/pattern-scale-01-ref.svg
new file mode 100644
index 0000000000..2a1f9805aa
--- /dev/null
+++ b/layout/reftests/svg/pattern-scale-01-ref.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">
+ <defs>
+ <pattern id="pattern" width="200" height="200" patternUnits="userSpaceOnUse">
+ <circle cx="100" cy="100" r="100" fill="lime" />
+ </pattern>
+ </defs>
+ <rect width="200" height="200" fill="url(#pattern)" />
+ <circle cx="100" cy="100" r="100" fill="none" stroke="lime" stroke-width="3.5" shape-rendering="crispEdges" />
+</svg>
diff --git a/layout/reftests/svg/pattern-scale-01a.svg b/layout/reftests/svg/pattern-scale-01a.svg
new file mode 100644
index 0000000000..bc3e79a38b
--- /dev/null
+++ b/layout/reftests/svg/pattern-scale-01a.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">
+ <defs>
+ <pattern id="pattern" width="5" height="5" patternUnits="userSpaceOnUse" patternTransform="scale(-40)">
+ <circle cx="2.5" cy="2.5" r="2.5" fill="lime" />
+ </pattern>
+ </defs>
+ <rect width="200" height="200" fill="url(#pattern)" />
+ <circle cx="100" cy="100" r="100" fill="none" stroke="lime" stroke-width="3.5" shape-rendering="crispEdges" />
+</svg>
diff --git a/layout/reftests/svg/pattern-scale-01b.svg b/layout/reftests/svg/pattern-scale-01b.svg
new file mode 100644
index 0000000000..4ce61a1042
--- /dev/null
+++ b/layout/reftests/svg/pattern-scale-01b.svg
@@ -0,0 +1,15 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+ <defs>
+ <pattern id="pattern" width="1" height="1" patternUnits="userSpaceOnUse">
+ <circle cx="0.5" cy="0.5" r="0.5" fill="lime" />
+ </pattern>
+ </defs>
+ <g transform="scale(200)">
+ <rect width="1" height="1" fill="url(#pattern)" />
+ </g>
+ <circle cx="100" cy="100" r="100" fill="none" stroke="lime" stroke-width="3.5" shape-rendering="crispEdges" />
+</svg>
diff --git a/layout/reftests/svg/pattern-scale-01c.svg b/layout/reftests/svg/pattern-scale-01c.svg
new file mode 100644
index 0000000000..6b18698120
--- /dev/null
+++ b/layout/reftests/svg/pattern-scale-01c.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">
+ <defs>
+ <pattern id="pattern" width="5" height="5" patternUnits="userSpaceOnUse" patternTransform="rotate(90) scale(-40)">
+ <circle cx="2.5" cy="2.5" r="2.5" fill="lime" />
+ </pattern>
+ </defs>
+ <rect width="200" height="200" fill="url(#pattern)" />
+ <circle cx="100" cy="100" r="100" fill="none" stroke="lime" stroke-width="3.5" shape-rendering="crispEdges" />
+</svg>
diff --git a/layout/reftests/svg/pattern-transform-presence-01-ref.svg b/layout/reftests/svg/pattern-transform-presence-01-ref.svg
new file mode 100644
index 0000000000..f57dcf0ddf
--- /dev/null
+++ b/layout/reftests/svg/pattern-transform-presence-01-ref.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 100">
+<defs>
+ <pattern id="patternRotated" 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>
+ <pattern id="patternNotRotated" 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>
+<rect width="100" height="100" stroke="black" fill="url(#patternRotated)"/>
+<g transform="translate(100)">
+ <rect width="100" height="100" stroke="black" fill="url(#patternRotated)"/>
+</g>
+<g transform="translate(200)">
+ <rect width="100" height="100" stroke="black" fill="url(#patternNotRotated)"/>
+</g>
+</svg>
diff --git a/layout/reftests/svg/pattern-transform-presence-01.svg b/layout/reftests/svg/pattern-transform-presence-01.svg
new file mode 100644
index 0000000000..f5e59e3bfc
--- /dev/null
+++ b/layout/reftests/svg/pattern-transform-presence-01.svg
@@ -0,0 +1,58 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ onload="addTransform()" viewBox="0 0 300 100" class="reftest-wait">
+<!-- Test that the presence/absence of a patternTransform is correctly detected.
+
+ Details are below but, in summary, the first two squares should contain the
+ same pattern (a diagonal checkerbox) whilst the third square should contain
+ a different pattern (actually the same pattern but WITHOUT the rotation).
+ -->
+<script>
+function addTransform()
+{
+ var g = document.getElementById("patternBase");
+ var list = g.patternTransform.baseVal;
+ var t = document.documentElement.createSVGTransform();
+ t.setRotate(45,50,50);
+ list.appendItem(t);
+ document.documentElement.removeAttribute("class");
+}
+</script>
+<defs>
+ <!-- 1. The base pattern that will be referenced by others.
+ When the document loads, script will add a patternTransform to this
+ pattern. It does this using *only SVG DOM APIs* (i.e. not setAttribute)
+ so that we can test that when a transform is not specified by markup but
+ is added via the DOM we still correctly detect its presence. -->
+ <pattern id="patternBase" 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>
+ <!-- 2. References the base pattern and should detect the base pattern's
+ patternTransform (added by script) and inherit it. (SVG 1.1 F2 13.3,
+ xlink:href 'Any attributes which are defined on the referenced element
+ which are not defined on this element are inherited by this element.').
+ Hence this pattern should look IDENTICAL to patternBase. -->
+ <pattern xlink:href="#patternBase" id="patternRefWithoutTransform"/>
+ <!-- 3. References the base pattern but patternTransform is defined (although
+ empty) and hence the patternTransform should NOT be inherited and this
+ pattern should look DIFFERENT to patternBase. -->
+ <pattern xlink:href="#patternBase" id="patternRefWithTransform"
+ patternTransform=""/>
+ <!-- The case of a patternTransform being supplied by animation is covered by
+ SMIL reftest anim-pattern-attr-presence-01.svg -->
+</defs>
+<rect width="100" height="100" stroke="black"
+ fill="url(#patternBase)"/>
+<g transform="translate(100)">
+ <rect width="100" height="100" stroke="black"
+ fill="url(#patternRefWithoutTransform)"/>
+</g>
+<g transform="translate(200)">
+ <rect width="100" height="100" stroke="black"
+ fill="url(#patternRefWithTransform)"/>
+</g>
+</svg>
diff --git a/layout/reftests/svg/pattern-transformed-01-ref.svg b/layout/reftests/svg/pattern-transformed-01-ref.svg
new file mode 100644
index 0000000000..eba434a14a
--- /dev/null
+++ b/layout/reftests/svg/pattern-transformed-01-ref.svg
@@ -0,0 +1,21 @@
+<svg width="800" height="600" xmlns="http://www.w3.org/2000/svg">
+
+ <pattern x="0" y="0" width="1" height="1" id="pattern" patternContentUnits="objectBoundingBox">
+ <rect width="1" height="1" fill="red"/>
+ <rect width="1" height="1" fill="url(#gradient)"/>
+ </pattern>
+
+ <linearGradient id="gradient" x1="0" y1="1" x2="0" y2="0">
+ <stop offset="0%" stop-color="black" stop-opacity="1"/>
+ <stop offset="100%" stop-color="black" stop-opacity="0"/>
+ </linearGradient>
+
+ <circle r="120" cx="120" cy="120" fill="url(#pattern)"/>
+
+ <path
+ transform="matrix(1,0,0,1,360,120)"
+ d="M0 0M 120 0 A 120 120 0 0 0 -120 0 A 120 120 0 0 0 120 0"
+ fill="url(#pattern)"/>
+
+</svg>
+
diff --git a/layout/reftests/svg/pattern-transformed-01.svg b/layout/reftests/svg/pattern-transformed-01.svg
new file mode 100644
index 0000000000..3391ace8ec
--- /dev/null
+++ b/layout/reftests/svg/pattern-transformed-01.svg
@@ -0,0 +1,28 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg width="800" height="600" xmlns="http://www.w3.org/2000/svg">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=773595 -->
+
+ <pattern x="0" y="0" width="1" height="1" id="pattern">
+ <rect width="240" height="240" fill="red"/>
+ <rect width="240" height="240" fill="url(#gradient)"/>
+ </pattern>
+
+ <linearGradient id="gradient" x1="0" y1="1" x2="0" y2="0">
+ <stop offset="0%" stop-color="black" stop-opacity="1"/>
+ <stop offset="100%" stop-color="black" stop-opacity="0"/>
+ </linearGradient>
+
+ <circle r="120" cx="120" cy="0" fill="url(#pattern)"
+ transform="translate(0,120)"/>
+
+ <path
+ transform="translate(0,120)"
+ d="M 480 0 A 120 120 0 0 0 240 0 A 120 120 0 0 0 480 0"
+ fill="url(#pattern)"/>
+
+</svg>
+
diff --git a/layout/reftests/svg/pattern-transformed-02-ref.svg b/layout/reftests/svg/pattern-transformed-02-ref.svg
new file mode 100644
index 0000000000..b099042810
--- /dev/null
+++ b/layout/reftests/svg/pattern-transformed-02-ref.svg
@@ -0,0 +1,20 @@
+<svg width="800" height="500" xmlns="http://www.w3.org/2000/svg">
+
+ <text x="25" y="25">Both patterns should render without blurriness</text>
+
+ <pattern id="pattern1" viewBox="0 0 100 20" width="100" height="20"
+ patternUnits="userSpaceOnUse">
+ <circle r="2" cx="10" cy="10" fill="green"/>
+ <circle r="4" cx="30" cy="10" fill="green"/>
+ <circle r="6" cx="50" cy="10" fill="green"/>
+ <circle r="8" cx="70" cy="10" fill="green"/>
+ <circle r="10" cx="90" cy="10" fill="green"/>
+ </pattern>
+
+ <circle r="150" cx="200" cy="200" stroke="gray" fill="none"/>
+ <circle r="150" cx="200" cy="200" fill="url(#pattern1)"/>
+
+ <circle r="150" cx="600" cy="200" stroke="gray" fill="none"/>
+ <circle r="150" cx="600" cy="200" fill="url(#pattern1)"/>
+
+</svg>
diff --git a/layout/reftests/svg/pattern-transformed-02.svg b/layout/reftests/svg/pattern-transformed-02.svg
new file mode 100644
index 0000000000..078f3c66dd
--- /dev/null
+++ b/layout/reftests/svg/pattern-transformed-02.svg
@@ -0,0 +1,29 @@
+<svg width="800" height="500" xmlns="http://www.w3.org/2000/svg">
+
+ <text x="25" y="25">Both patterns should render without blurriness</text>
+
+ <pattern id="pattern1" viewBox="0 0 100 20" width="100" height="20"
+ patternUnits="userSpaceOnUse">
+ <circle r="2" cx="10" cy="10" fill="green"/>
+ <circle r="4" cx="30" cy="10" fill="green"/>
+ <circle r="6" cx="50" cy="10" fill="green"/>
+ <circle r="8" cx="70" cy="10" fill="green"/>
+ <circle r="10" cx="90" cy="10" fill="green"/>
+ </pattern>
+
+ <circle r="150" cx="200" cy="200" stroke="gray" fill="none"/>
+ <circle r="150" cx="200" cy="200" fill="url(#pattern1)"/>
+
+ <pattern id="pattern2" viewBox="0 0 20 100" width="20" height="100"
+ patternUnits="userSpaceOnUse" patternTransform="rotate(270)">
+ <circle r="2" cx="10" cy="10" fill="green"/>
+ <circle r="4" cx="10" cy="30" fill="green"/>
+ <circle r="6" cx="10" cy="50" fill="green"/>
+ <circle r="8" cx="10" cy="70" fill="green"/>
+ <circle r="10" cx="10" cy="90" fill="green"/>
+ </pattern>
+
+ <circle r="150" cx="600" cy="200" stroke="gray" fill="none"/>
+ <circle r="150" cx="600" cy="200" fill="url(#pattern2)"/>
+
+</svg>
diff --git a/layout/reftests/svg/polygon-01-ref.svg b/layout/reftests/svg/polygon-01-ref.svg
new file mode 100644
index 0000000000..abcff19dd4
--- /dev/null
+++ b/layout/reftests/svg/polygon-01-ref.svg
@@ -0,0 +1,12 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+ <title>Reference for stroking of close section of polygon</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=1085092 -->
+
+ <rect fill="none" stroke="blue" stroke-width="10"
+ x="100" y="100" width="100" height="100"/>
+</svg>
diff --git a/layout/reftests/svg/polygon-01.svg b/layout/reftests/svg/polygon-01.svg
new file mode 100644
index 0000000000..7c26555fab
--- /dev/null
+++ b/layout/reftests/svg/polygon-01.svg
@@ -0,0 +1,13 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+ <title>Test stroking of close section of polygon</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=1085092 -->
+
+ <polygon fill="none" stroke="blue" stroke-width="10"
+ transform="translate(50,50)"
+ points="50,50 150,50 150,150 50,150"/>
+</svg>
diff --git a/layout/reftests/svg/polygon-marker-01.svg b/layout/reftests/svg/polygon-marker-01.svg
new file mode 100644
index 0000000000..a6092ceb6a
--- /dev/null
+++ b/layout/reftests/svg/polygon-marker-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">
+ <title>Test that marker-start and marker-end are co-located for polygon elements</title>
+ <!--
+ From https://bugzilla.mozilla.org/show_bug.cgi?id=577475
+
+ This test checks that marker-start and marker-end are co-located for polygon elements.
+ -->
+ <defs>
+ <marker id="markerStart" markerWidth="40" markerHeight="40" refX="20" refY="20">
+ <rect width="50" height="55" fill="red"/>
+ </marker>
+ <marker id="markerEnd" markerWidth="40" markerHeight="40" refX="20" refY="20">
+ <rect width="50" height="55" fill="lime"/>
+ </marker>
+ </defs>
+ <rect width="100%" height="100%" fill="lime"/>
+ <polygon marker-start="url(#markerStart)" marker-end="url(#markerEnd)" points="250,150 200,150" />
+</svg>
diff --git a/layout/reftests/svg/polygon-points-negative-01.svg b/layout/reftests/svg/polygon-points-negative-01.svg
new file mode 100644
index 0000000000..a228605589
--- /dev/null
+++ b/layout/reftests/svg/polygon-points-negative-01.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" version="1.1">
+ <title>Testing for x-y |points| attribute</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=619630 -->
+
+ <rect fill="lime" height="100%" width="100%"/>
+ <rect width="100" height="100" fill="red"/>
+
+ <!-- this should render -->
+ <polygon points="-10-110 -10-10 -110-10 -110-110" fill="lime"
+ transform="translate(110,110)"/>
+
+ <!-- this should not -->
+ <polygon fill="red" transform="translate(110,110)"
+ points="-110-10-110-110-10-110-10-10"/>
+</svg>
diff --git a/layout/reftests/svg/polyline-points-invalid-01.svg b/layout/reftests/svg/polyline-points-invalid-01.svg
new file mode 100644
index 0000000000..bfb6010042
--- /dev/null
+++ b/layout/reftests/svg/polyline-points-invalid-01.svg
@@ -0,0 +1,50 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
+ <title>Testing invalid values for |points| attribute</title>
+ <style>
+ polyline {
+ fill: red;
+ stroke: lime;
+ stroke-width: 4;
+ }
+ </style>
+ <rect fill="lime" height="100%" width="100%"/>
+
+ <!-- First row: Initial comma(s) -->
+ <g transform="translate(0, 0)">
+ <polyline points=",0,0 10,20 20,0" />
+ <polyline points=",,0,0 10,20 20,0" transform="translate( 40, 0)"/>
+ <polyline points=", ,0,0 10,20 20,0" transform="translate( 80, 0)"/>
+ <polyline points=", 0,0 10,20 20,0" transform="translate(120, 0)"/>
+ <polyline points=",,, 0,0 10,20 20,0" transform="translate(160, 0)"/>
+ </g>
+ <!-- Second row: Trailing comma(s) -->
+ <g transform="translate(0, 40)">
+ <polyline points="0,0 10,20 20,0" />
+ <polyline points="0,0 10,20 20,0," style="fill: lime;" />
+ <polyline points="0,0 10,20 20,0" transform="translate( 40, 0)"/>
+ <polyline points="0,0 10,20 20,0 ," transform="translate( 40, 0)" style="fill: lime;" />
+ <polyline points="0,0 10,20 20,0" transform="translate( 80, 0)"/>
+ <polyline points="0,0 10,20 20,0,," transform="translate( 80, 0)" style="fill: lime;" />
+ <polyline points="0,0 10,20 20,0" transform="translate(120, 0)"/>
+ <polyline points="0,0 10,20 20,0, ," transform="translate(120, 0)" style="fill: lime;" />
+ <polyline points="0,0 10,20 20,0" transform="translate(160, 0)"/>
+ <polyline points="0,0 10,20 20,0 ,,," transform="translate(160, 0)" style="fill: lime;" />
+ </g>
+ <!-- Third row: Repeated commas in the middle -->
+ <g transform="translate(0, 80)">
+ <polyline points="0,,0 10,20 20,0" />
+ <polyline points="0,,,0,10,20 20,0" transform="translate( 40, 0)"/>
+ <polyline points="0, ,0 10,20 20,0" transform="translate( 80, 0)"/>
+ <polyline points="0 0,, 10,20 20,0" transform="translate(120, 0)"/>
+ <polyline points="0,0,,10,20 20,0" transform="translate(160, 0)"/>
+ </g>
+ <!-- Fourth row: wrong number of values (at least 3, to get anything drawn) -->
+ <g transform="translate(0, 120)">
+ <polyline points="" />
+ <polyline points="0,0" transform="translate( 40, 0)"/>
+ <polyline points="0,0 10" transform="translate( 80, 0)"/>
+ <polyline points="0,0 10,20 20" transform="translate(120, 0)"/>
+ <polyline points="0,0 10,20 20,0" transform="translate(160, 0)"/>
+ <polyline points="0,0 10,20 20,0 0" transform="translate(160, 0)" style="fill: lime;"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/pseudo-classes-01.svg b/layout/reftests/svg/pseudo-classes-01.svg
new file mode 100644
index 0000000000..74ffaf9aa3
--- /dev/null
+++ b/layout/reftests/svg/pseudo-classes-01.svg
@@ -0,0 +1,43 @@
+<!--
+ 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"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+
+ <title>Testcase for the :first-child, :link, :visited and :lang pseudo-classes</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=268135 -->
+
+ <style type="text/css">
+ <![CDATA[
+
+rect:first-child { fill: lime; }
+a:link > rect { fill: lime; }
+a:visited > rect { fill: lime; }
+rect:lang(it) { fill: lime; }
+
+ ]]>
+ </style>
+
+ <!-- test :first-child -->
+ <g>
+ <rect x="0" width="25%" height="100%" fill="red"/>
+ </g>
+
+ <!-- test :link -->
+ <a xlink:href="do-not-visit-me.xxx" onclick="evt.preventDefault()">
+ <first-child xmlns=""/>
+ <rect x="25%" width="25%" height="100%" fill="red"/>
+ </a>
+
+ <!-- test :visited -->
+ <a xlink:href="">
+ <first-child xmlns=""/>
+ <rect x="50%" width="25%" height="100%" fill="red"/>
+ </a>
+
+ <!-- test :lang -->
+ <rect xml:lang="it" x="75%" width="25%" height="100%" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/pseudo-classes-02-ref.svg b/layout/reftests/svg/pseudo-classes-02-ref.svg
new file mode 100644
index 0000000000..a76db85a41
--- /dev/null
+++ b/layout/reftests/svg/pseudo-classes-02-ref.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" version="1.1"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+
+ <title>Reference for pseudo-classes and text/links</title>
+
+ <!-- link in text -->
+ <text x="10" y="25" fill="lime" font-size="1em">This should be green</text>
+
+ <!-- text in link -->
+ <text x="10" y="50" fill="lime" font-size="1em">This should be green</text>
+
+ <!-- link in tspan -->
+ <text x="10" y="75" fill="lime" font-size="1em">This should be green</text>
+
+ <!-- tspan in link -->
+ <text x="10" y="100" fill="lime" font-size="1em">This should be green</text>
+
+</svg>
diff --git a/layout/reftests/svg/pseudo-classes-02.svg b/layout/reftests/svg/pseudo-classes-02.svg
new file mode 100644
index 0000000000..03c79660b9
--- /dev/null
+++ b/layout/reftests/svg/pseudo-classes-02.svg
@@ -0,0 +1,48 @@
+<!--
+ 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"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+
+ <title>Testcase for pseudo-classes and text/links</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=268135 -->
+
+ <style type="text/css">
+ <![CDATA[
+
+:root { font-size: 1em; }
+text > a:link { fill: lime; }
+a:visited > text { fill: lime; }
+tspan > a:link { fill: lime; }
+a:visited > tspan { fill: lime; }
+
+ ]]>
+ </style>
+
+ <!-- link in text -->
+ <text x="10" y="25">
+ <a xlink:href="do-not-visit-me.xxx" fill="red">This should be green</a>
+ </text>
+
+ <!-- text in link -->
+ <a xlink:href="visited-page.html">
+ <text x="10" y="50" fill="red">This should be green</text>
+ </a>
+
+ <!-- link in tspan -->
+ <text>
+ <tspan x="10" y="75">
+ <a xlink:href="do-not-visit-me.xxx" fill="red">This should be green</a>
+ </tspan>
+ </text>
+
+ <!-- tspan in link -->
+ <text>
+ <a xlink:href="visited-page.html">
+ <tspan x="10" y="100" fill="red">This should be green</tspan>
+ </a>
+ </text>
+
+</svg>
diff --git a/layout/reftests/svg/radialGradient-basic-01.svg b/layout/reftests/svg/radialGradient-basic-01.svg
new file mode 100644
index 0000000000..c875b2dc3b
--- /dev/null
+++ b/layout/reftests/svg/radialGradient-basic-01.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" >
+
+<title>Testcase for gradient</title>
+
+<!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=368840 -->
+
+ <defs>
+ <!-- No stops, like fill = none -->
+ <radialGradient id="nostops" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="0"/>
+ </defs>
+
+ <rect x="0%" y="0%" width="100%" height="100%" fill="lime"/>
+ <rect x="0%" y="0%" width="100%" height="100%" fill="url(#nostops)"/>
+</svg>
diff --git a/layout/reftests/svg/radialGradient-basic-02.svg b/layout/reftests/svg/radialGradient-basic-02.svg
new file mode 100644
index 0000000000..dda5a7a1d1
--- /dev/null
+++ b/layout/reftests/svg/radialGradient-basic-02.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" >
+
+<title>Testcase for gradient</title>
+
+<!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=368840 -->
+
+ <defs>
+ <!-- One stop, like fill = stop-color -->
+ <radialGradient id="onestop" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="0">
+ <stop stop-color="lime" offset="1"/>
+ </radialGradient>
+ </defs>
+
+ <rect x="0%" y="0%" width="100%" height="100%" fill="red"/>
+ <rect x="0%" y="0%" width="100%" height="100%" fill="url(#onestop)"/>
+</svg>
diff --git a/layout/reftests/svg/radialGradient-basic-03-ref.html b/layout/reftests/svg/radialGradient-basic-03-ref.html
new file mode 100644
index 0000000000..cbc45573c0
--- /dev/null
+++ b/layout/reftests/svg/radialGradient-basic-03-ref.html
@@ -0,0 +1,37 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<head>
+ <title>Reference for gradient</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=441780 -->
+</head>
+<body onload="go()">
+<canvas width="400" height="400"></canvas>
+<style>
+* { margin: 0; }
+</style>
+<script>
+function go() {
+ let canvas = document.querySelector('canvas');
+ let ctx = canvas.getContext('2d');
+
+ function createCircleWithGradient(x, y, r, fx, fy) {
+ let gradient = ctx.createRadialGradient(fx, y, 0, x, y, r);
+ gradient.addColorStop(0, 'lime');
+ gradient.addColorStop(1, 'red');
+
+ ctx.beginPath();
+ ctx.arc(x, y, 50, 0, 2 * Math.PI);
+
+ ctx.fillStyle = gradient;
+ ctx.fill();
+ }
+
+ createCircleWithGradient(100, 100, 50, 50);
+ createCircleWithGradient(100, 200, 40, 60);
+ createCircleWithGradient(200, 100, 50, 250);
+ createCircleWithGradient(200, 200, 70, 280);
+}
+</script>
+</body>
diff --git a/layout/reftests/svg/radialGradient-basic-03.svg b/layout/reftests/svg/radialGradient-basic-03.svg
new file mode 100644
index 0000000000..622d8e38eb
--- /dev/null
+++ b/layout/reftests/svg/radialGradient-basic-03.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" >
+
+ <title>Testcase for gradient</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=441780 -->
+
+ <defs>
+ <radialGradient id="gradient1" fx="0">
+ <stop offset="0" stop-color="lime" />
+ <stop offset="1" stop-color="red"/>
+ </radialGradient>
+ <radialGradient id="gradient2" r="0.4" fx="0.1">
+ <stop offset="0" stop-color="lime" />
+ <stop offset="1" stop-color="red"/>
+ </radialGradient>
+ <radialGradient id="gradient3" fx="1">
+ <stop offset="0" stop-color="lime" />
+ <stop offset="1" stop-color="red"/>
+ </radialGradient>
+ <radialGradient id="gradient4" r="0.7" fx="1.3">
+ <stop offset="0" stop-color="lime" />
+ <stop offset="1" stop-color="red"/>
+ </radialGradient>
+ </defs>
+
+ <circle cx="100" cy="100" r="50" fill="url(#gradient1)"/>
+ <circle cx="100" cy="200" r="50" fill="url(#gradient2)"/>
+ <circle cx="200" cy="100" r="50" fill="url(#gradient3)"/>
+ <circle cx="200" cy="200" r="50" fill="url(#gradient4)"/>
+</svg>
diff --git a/layout/reftests/svg/radialGradient-basic-04.svg b/layout/reftests/svg/radialGradient-basic-04.svg
new file mode 100644
index 0000000000..e2e262d6ee
--- /dev/null
+++ b/layout/reftests/svg/radialGradient-basic-04.svg
@@ -0,0 +1,24 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+
+ <title>Testcase for gradient with offset focal point</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=828157 -->
+
+ <rect width="100%" height="100%" fill="lime"/>
+
+ <radialGradient id="g" r="50%" fy="0%">
+ <stop stop-color="lime" offset="0%"/>
+ <stop stop-color="lime" offset="100%"/>
+ <stop stop-opacity="0" offset="100%"/>
+ </radialGradient>"
+
+ <circle cx="50" cy="50" r="48" fill="red"/>
+
+ <rect width="100" height="100" fill="url(#g)"/>
+
+</svg>
+
diff --git a/layout/reftests/svg/radialGradient-fr-01.svg b/layout/reftests/svg/radialGradient-fr-01.svg
new file mode 100644
index 0000000000..2f28d3aba2
--- /dev/null
+++ b/layout/reftests/svg/radialGradient-fr-01.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">
+ <title>Test gradient fr attribute</title>
+ <defs>
+ <radialGradient id="grad1" fr="100%">
+ <stop offset="0%" stop-color="red" />
+ <stop offset="100%" stop-color="lime" />
+ </radialGradient>
+ <radialGradient id="grad2" xlink:href="#grad1"/>
+ <style>
+ circle {
+ stroke-width: 3px;
+ stroke: lime;
+ }
+ </style>
+ </defs>
+ <rect width="100%" height="100%" fill="lime"/>
+
+ <circle cx="100" cy="100" r="50" fill="url(#grad1)" />
+
+ <circle cx="300" cy="100" r="50" fill="url(#grad2)" />
+</svg>
+
diff --git a/layout/reftests/svg/radialGradient-fr-02-ref.svg b/layout/reftests/svg/radialGradient-fr-02-ref.svg
new file mode 100644
index 0000000000..c256f72a24
--- /dev/null
+++ b/layout/reftests/svg/radialGradient-fr-02-ref.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">
+ <title>Test gradient fr attribute</title>
+ <defs>
+ <radialGradient id="grad1">
+ <stop offset="0%" stop-color="red" />
+ <stop offset="20%" stop-color="red" />
+ <stop offset="100%" stop-color="lime" />
+ </radialGradient>
+ <style>
+ .cover {
+ stroke-width: 3px;
+ stroke: lime;
+ fill: none;
+ image-rendering: optimizeSpeed;
+ }
+ </style>
+ </defs>
+ <rect width="100%" height="100%" fill="lime"/>
+
+ <circle cx="100" cy="100" r="50" fill="url(#grad1)" />
+ <circle class="cover" cx="100" cy="100" r="50" fill="none"/>
+</svg>
+
diff --git a/layout/reftests/svg/radialGradient-fr-02.svg b/layout/reftests/svg/radialGradient-fr-02.svg
new file mode 100644
index 0000000000..1933203be0
--- /dev/null
+++ b/layout/reftests/svg/radialGradient-fr-02.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">
+ <title>Test gradient fr attribute</title>
+ <defs>
+ <radialGradient id="grad1" fr="10%">
+ <stop offset="0%" stop-color="red" />
+ <stop offset="100%" stop-color="lime" />
+ </radialGradient>
+ <style>
+ .cover {
+ stroke-width: 3px;
+ stroke: lime;
+ fill: none;
+ image-rendering: optimizeSpeed;
+ }
+ </style>
+ </defs>
+ <rect width="100%" height="100%" fill="lime"/>
+
+ <circle cx="100" cy="100" r="50" fill="url(#grad1)" />
+ <circle class="cover" cx="100" cy="100" r="50" />
+</svg>
+
diff --git a/layout/reftests/svg/rect-01.svg b/layout/reftests/svg/rect-01.svg
new file mode 100644
index 0000000000..c1157e65ff
--- /dev/null
+++ b/layout/reftests/svg/rect-01.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" >
+
+<title>Testcase for rect with fill=none</title>
+
+<!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=458068 -->
+
+ <rect x1="0" y1="0" width="100%" height="100%" fill="lime"/>
+ <rect x1="0" y1="0" width="100%" height="100%" fill="none" stroke="lime"/>
+</svg>
diff --git a/layout/reftests/svg/rect-02.svg b/layout/reftests/svg/rect-02.svg
new file mode 100644
index 0000000000..69aac4e8ef
--- /dev/null
+++ b/layout/reftests/svg/rect-02.svg
@@ -0,0 +1,16 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" >
+
+<title>Testcase for rect with missing and clamped ry</title>
+
+<!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=552830s -->
+
+ <rect x1="0" y1="0" width="100%" height="100%" fill="lime"/>
+ <g shape-rendering="crispEdges">
+ <rect x="20" y="50" width="200" height="100" rx="100" fill="red" />
+ <rect x="20" y="50" width="200" height="100" rx="100" ry="50" fill="lime" />
+ </g>
+</svg>
diff --git a/layout/reftests/svg/rect-03.svg b/layout/reftests/svg/rect-03.svg
new file mode 100644
index 0000000000..3b16bbabcf
--- /dev/null
+++ b/layout/reftests/svg/rect-03.svg
@@ -0,0 +1,14 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" >
+
+<title>Testcase for rect with unsupported rx and ry</title>
+
+<!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=554091 -->
+
+ <rect x="0" y="0" width="100%" height="100%" fill="red"/>
+ <rect x="0" y="0" width="50%" height="100%" rx="-1" fill="lime" />
+ <rect x="50%" y="0" width="50%" height="100%" ry="-1" fill="lime" />
+</svg>
diff --git a/layout/reftests/svg/rect-04.svg b/layout/reftests/svg/rect-04.svg
new file mode 100644
index 0000000000..bac509417b
--- /dev/null
+++ b/layout/reftests/svg/rect-04.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Test that a rect with no width/height does not display even with a filter</title>
+
+ <rect width="100%" height="100%" fill="lime"/>
+
+ <filter id="filter" filterUnits="userSpaceOnUse"
+ x="0" y="0" width="100%" height="100%">
+ <!-- data: URI is a 1x1 red GIF -->
+ <feImage preserveAspectRatio="xMidYMid slice"
+ style="image-rendering: optimizeSpeed;"
+ xlink:href="data:image/gif,GIF87a%01%00%01%00%80%01%00%FF%00%00%FF%FF%FF%2C%00%00%00%00%01%00%01%00%00%02%02D%01%00%3B">
+ </feImage>
+ </filter>
+
+ <rect filter="url(#filter)"/>
+
+</svg>
diff --git a/layout/reftests/svg/rect-with-rx-and-ry-01.svg b/layout/reftests/svg/rect-with-rx-and-ry-01.svg
new file mode 100644
index 0000000000..081314b5ac
--- /dev/null
+++ b/layout/reftests/svg/rect-with-rx-and-ry-01.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" version="1.1">
+
+ <title>Testcase for rect with both rx and ry set</title>
+
+ <!-- This is an additional test (i.e. not from a Mozilla bug) -->
+
+ <rect width="100%" height="100%" fill="lime"/>
+
+ <!-- check that rect with rx and ry is drawn -->
+ <circle cx="50" cy="50" r="48" fill="red"/>
+ <rect width="100" height="100" rx="50" ry="50" fill="lime"/>
+
+ <!-- check rx and ry aren't ignored -->
+ <rect x="110" width="100" height="100" rx="50" ry="50" fill="red"/>
+ <circle cx="160" cy="50" r="52" fill="lime"/>
+
+</svg>
diff --git a/layout/reftests/svg/rect-with-rx-or-ry-01-ref.svg b/layout/reftests/svg/rect-with-rx-or-ry-01-ref.svg
new file mode 100644
index 0000000000..63f7d5d04f
--- /dev/null
+++ b/layout/reftests/svg/rect-with-rx-or-ry-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" version="1.1">
+
+ <title>Reference for rect with one of rx or ry</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=111993 -->
+
+ <rect x="10" y="10" width="100" height="100"/>
+ <rect x="10" y="120" width="100" height="100"/>
+
+ <rect x="120" y="10" width="100" height="100" rx="30" ry="30"/>
+ <rect x="120" y="120" width="100" height="100" rx="30" ry="30"/>
+
+ <rect x="230" y="10" width="100" height="100" rx="50" ry="50"/>
+ <rect x="230" y="120" width="100" height="100" rx="50" ry="50"/>
+
+</svg>
diff --git a/layout/reftests/svg/rect-with-rx-or-ry-01.svg b/layout/reftests/svg/rect-with-rx-or-ry-01.svg
new file mode 100644
index 0000000000..7050ed9617
--- /dev/null
+++ b/layout/reftests/svg/rect-with-rx-or-ry-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">
+
+ <title>Testcase for rect with one of rx or ry</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=111993 -->
+
+ <!-- test one of rx/ry being non-zero, the other zero -->
+ <rect x="10" y="10" width="100" height="100" rx="30" ry="0"/>
+ <rect x="10" y="120" width="100" height="100" rx="0" ry="30"/>
+
+ <!-- test one of rx/ry being non-zero, the other not set -->
+ <rect x="120" y="10" width="100" height="100" rx="30"/>
+ <rect x="120" y="120" width="100" height="100" ry="30"/>
+
+ <!-- test one of rx/ry being set to a value greater than width/2 -->
+ <rect x="230" y="10" width="100" height="100" rx="70"/>
+ <rect x="230" y="120" width="100" height="100" ry="70"/>
+
+</svg>
diff --git a/layout/reftests/svg/reftest.list b/layout/reftests/svg/reftest.list
new file mode 100644
index 0000000000..d32dc0d4d0
--- /dev/null
+++ b/layout/reftests/svg/reftest.list
@@ -0,0 +1,636 @@
+# svg-as-an-image tests
+include as-image/reftest.list
+
+# <image> tests
+include image/reftest.list
+
+# sizing tests
+include sizing/reftest.list
+
+# filter tests
+include filters/reftest.list
+
+# smil / animation tests
+include smil/reftest.list
+
+# text tests
+include text/reftest.list
+
+# load only tests
+include load-only/reftest.list
+
+# Mozilla only tests (i.e. those containing XUL/XBL/etc.)
+skip-if(useDrawSnapshot) include moz-only/reftest.list
+
+# svg-integration tests (using svg effects in e.g. HTML)
+include svg-integration/reftest.list
+
+needs-focus == autofocus-01a.svg autofocus-01-ref.svg
+needs-focus == autofocus-01b.svg autofocus-01-ref.svg
+needs-focus == autofocus-02a.svg pass.svg
+needs-focus == autofocus-02b.svg pass.svg
+
+== background-svg-without-height.html background-ref.html
+== background-svg-without-height-width.html background-ref.html
+== background-svg-without-width.html background-ref.html
+
+== baseline-middle-01.svg pass.svg
+
+== blend-color-burn.svg blend-color-burn-ref.svg
+fuzzy-if(winWidget&&gpuProcess&&!d2d,0-1,0-1600) == blend-color-dodge.svg blend-color-dodge-ref.svg
+# == blend-color.svg blend-color-ref.svg
+== blend-darken.svg blend-darken-ref.svg
+== blend-difference.svg blend-difference-ref.svg
+fuzzy(0-1,0-1600) fuzzy-if(geckoview,0-5,0-254) == blend-exclusion.svg blend-exclusion-ref.svg
+# == blend-hard-light.svg blend-hard-light-ref.svg
+# == blend-hue.svg blend-hue-ref.svg
+== blend-layer-blend.svg blend-layer-blend-ref.svg
+== blend-layer-filter.svg blend-layer-filter-ref.svg
+== blend-layer-mask.svg blend-layer-mask-ref.svg
+== blend-layer-opacity.svg blend-layer-opacity-ref.svg
+random-if(Android) == blend-lighten.svg blend-lighten-ref.svg
+# == blend-luminosity.svg blend-luminosity-ref.svg
+#skip-if(Android) == blend-multiply-alpha.svg blend-multiply-alpha-ref.svg
+fuzzy(0-1,0-1600) random-if(Android) == blend-multiply.svg blend-multiply-ref.svg
+== blend-normal.svg blend-normal-ref.svg
+#skip-if(Android) == blend-overlay.svg blend-overlay-ref.svg
+#skip-if(Android) == blend-saturation.svg blend-saturation-ref.svg
+#skip-if(Android) == blend-screen.svg blend-screen-ref.svg
+#skip-if(Android) == blend-soft-light.svg blend-soft-light-ref.svg
+skip == blend-difference-stacking.html blend-difference-stacking-ref.html # bug 1458353
+== active-transform-blend-mode.html active-transform-blend-mode-ref.html
+== active-clip-and-mask.html active-clip-and-mask-ref.html
+
+fuzzy(0-11,0-7155) == blur-inside-clipPath.svg blur-inside-clipPath-ref.svg
+
+== border-radius-01.html pass.svg
+== mask-image-filter-transform.html mask-image-filter-transform-ref.html
+
+== current-translate-01.svg pass.svg
+== current-translate-02.svg pass.svg
+
+== clip-01.svg pass.svg
+== clip-02a.svg clip-02-ref.svg
+== clip-02b.svg clip-02-ref.svg
+fuzzy(0-1,0-10000) == clip-surface-clone-01.svg clip-surface-clone-01-ref.svg
+== clip-use-element-01.svg pass.svg
+== clip-use-element-02.svg pass.svg
+
+== clipPath-advanced-01.svg pass.svg
+== clipPath-and-mask-on-outflowElement-01a.html clipPath-on-outflowElement-01-ref.html
+== clipPath-and-mask-on-outflowElement-01b.html clipPath-on-outflowElement-01-ref.html
+fuzzy(0-1,0-630) == clipPath-and-shape-rendering-01.svg clipPath-and-shape-rendering-01-ref.svg # bug 614840
+== clipPath-and-transform-01.svg pass.svg
+== clipPath-and-transform-02.svg pass.svg
+== clipPath-basic-01.svg pass.svg
+== clipPath-basic-02.svg pass.svg
+== clipPath-basic-03.svg pass.svg
+== clipPath-basic-04.svg pass.svg
+== clipPath-basic-05.svg pass.svg
+== clipPath-basic-06.svg pass.svg
+== clipPath-basic-07.svg pass.svg
+== clipPath-basic-08.svg pass.svg
+== clipPath-basic-shape-transform.html clipPath-basic-shape-transform-ref.html
+== clipPath-css-transform.html clipPath-css-transform-ref.html
+== clipPath-fill-box.html clipPath-fill-box-ref.html
+== clipPath-on-outflowElement-01a.html clipPath-on-outflowElement-01-ref.html
+== clipPath-on-outflowElement-01b.html clipPath-on-outflowElement-01-ref.html
+fuzzy(0-1,0-32400) == clipPath-on-outflowElement-02a.html clipPath-on-outflowElement-02-ref.html
+fuzzy(0-1,0-32400) == clipPath-on-outflowElement-02b.html clipPath-on-outflowElement-02-ref.html
+== clipPath-polygon-01.svg pass.svg
+== clipPath-polygon-elementFromPoint-01.svg pass.svg
+!= clipPath-on-thin-object.svg about:blank
+== clipPath-winding-01.svg pass.svg
+
+== comments-in-pres-attrs.svg pass.svg
+
+== conditions-01.svg pass.svg
+== conditions-02.svg pass.svg
+== conditions-03.svg pass.svg
+== conditions-04.svg pass.svg
+== conditions-05.svg about:blank
+== conditions-07.svg pass.svg
+fuzzy(0-1,0-320) == conditions-08.svg conditions-08-ref.svg
+== conditions-09.svg conditions-09-ref.svg
+
+== currentColor-01.svg pass.svg
+== currentColor-02.svg pass.svg
+== currentColor-03.svg pass.svg
+
+skip-if(fission) == data-uri-with-filter-01.xhtml data-uri-with-filter-01-ref.svg # Bug 1669323
+== data-uri-with-gradient-01.xhtml data-uri-with-gradient-01-ref.svg
+== data-uri-with-pattern-01.xhtml pass.svg
+
+== dynamic-attr-removal-1.svg pass.svg
+== dynamic-attr-removal-2.svg pass.svg
+== dynamic-attr-change-1.svg pass.svg
+== dynamic-attr-change-2.svg pass.svg
+== dynamic-class-01.svg pass.svg
+fuzzy-if(Android,0-4,0-87) == dynamic-clipPath-01.svg pass.svg
+== dynamic-clipPath-02.svg pass.svg
+== dynamic-clipPath-clip-rule-01.svg pass.svg
+== dynamic-conditions-01.svg pass.svg
+== dynamic-conditions-02.svg about:blank
+== dynamic-conditions-03.svg pass.svg
+== dynamic-conditions-04.svg about:blank
+== dynamic-conditions-05.svg pass.svg
+== dynamic-conditions-06.svg about:blank
+== dynamic-conditions-07.svg pass.svg
+== dynamic-conditions-08.svg pass.svg
+== dynamic-conditions-09.svg about:blank
+== dynamic-conditions-10.svg about:blank
+== dynamic-conditions-11.svg pass.svg
+== dynamic-conditions-12.svg pass.svg
+== dynamic-conditions-13.svg about:blank
+== dynamic-feFlood-01.svg pass.svg
+asserts(0-1) == dynamic-feImage-01.svg pass.svg # intermittent assertions (bug 886080)
+== dynamic-fill-01.svg dynamic-fill-01-ref.svg
+== dynamic-fill-rule-01.svg dynamic-fill-rule-01-ref.svg
+fuzzy(0-1,0-10000) == dynamic-filter-contents-01a.svg dynamic-filter-contents-01-ref.svg
+fuzzy(0-1,0-10000) == dynamic-filter-contents-01b.svg dynamic-filter-contents-01-ref.svg
+== dynamic-gradient-contents-01.svg pass.svg
+== dynamic-gradient-contents-02.svg pass.svg
+== dynamic-inner-svg-01.svg pass.svg
+== dynamic-link-style-01.svg pass.svg
+== dynamic-marker-01.svg pass.svg
+== dynamic-marker-02.svg dynamic-marker-02-ref.svg
+== dynamic-marker-03.svg pass.svg
+== dynamic-mask-01.svg pass.svg
+== dynamic-mask-contents-01.svg pass.svg
+== dynamic-mask-pre-effects-bbox.html dynamic-mask-pre-effects-bbox-ref.html
+== dynamic-opacity-property-01.svg pass.svg
+== dynamic-pattern-01.svg pass.svg
+== dynamic-pattern-02.svg pass.svg
+== dynamic-pattern-contents-01.svg pass.svg
+== dynamic-pattern-contents-02.svg pass.svg
+== dynamic-rect-01.svg dynamic-rect-01-ref.svg
+fuzzy-if(d2d&&layersGPUAccelerated,0-3,0-1200) == dynamic-rect-02.svg dynamic-rect-02-ref.svg # bug 776038 for Win7, Win8
+== dynamic-rect-03.svg dynamic-rect-03-ref.svg
+== dynamic-rect-04.xhtml pass.svg
+== dynamic-rect-05.svg pass.svg
+== dynamic-reflow-01.svg dynamic-reflow-01-ref.svg
+== dynamic-small-object-scaled-up-01.svg pass.svg
+== dynamic-small-object-scaled-up-02.svg pass.svg
+== dynamic-stroke-01.svg pass.svg
+== dynamic-stroke-opacity-01.svg pass.svg
+== dynamic-stroke-width-01.svg pass.svg
+== dynamic-switch-01.svg pass.svg
+== dynamic-text-01.svg dynamic-text-01-ref.svg
+fuzzy-if(d2d&&layersGPUAccelerated,0-3,0-12739) == dynamic-text-02.svg dynamic-text-02-ref.svg # bug 776038 for Win7, Win8
+fuzzy-if(d2d&&layersGPUAccelerated,0-2,0-10539) == dynamic-text-03.svg dynamic-text-03-ref.svg # bug 776038 for Win7
+== dynamic-text-04.svg dynamic-text-04-ref.svg
+== dynamic-text-05.svg pass.svg
+== dynamic-text-06.svg pass.svg
+== dynamic-text-07.svg dynamic-text-07-ref.svg
+== dynamic-text-08.svg dynamic-text-08-ref.svg
+== dynamic-text-attr-01.svg dynamic-text-attr-01-ref.svg
+== dynamic-textPath-01.svg dynamic-textPath-01-ref.svg
+== dynamic-textPath-02.svg dynamic-textPath-02-ref.svg
+== dynamic-textPath-03.svg dynamic-textPath-03-ref.svg
+== dynamic-textPath-04.html pass.svg
+== dynamic-use-01.svg pass.svg
+== dynamic-use-02.svg pass.svg
+== dynamic-use-03.svg pass.svg
+== dynamic-use-04.svg pass.svg
+== dynamic-use-05.svg pass.svg
+== dynamic-use-06.svg pass.svg
+== dynamic-use-07.svg pass.svg
+== dynamic-use-08.svg pass.svg
+random == dynamic-use-nested-01a.svg dynamic-use-nested-01-ref.svg
+random == dynamic-use-nested-01b.svg dynamic-use-nested-01-ref.svg
+== dynamic-use-remove-width.svg dynamic-use-remove-width-ref.svg
+== dynamic-viewBox-change-01.svg pass.svg
+== dynamic-viewBox-change-02.svg pass.svg
+== dynamic-viewBox-change-03.svg pass.svg
+
+== fallback-color-01a.svg pass.svg
+== fallback-color-01b.svg pass.svg
+== fallback-color-02.svg fallback-color-02-ref.svg
+== fallback-color-03.svg pass.svg
+fuzzy(0-1,0-2) == fallback-color-04.svg pass.svg
+== fallback-color-05a.svg fallback-color-05-ref.svg
+== fallback-color-05b.svg fallback-color-05-ref.svg
+== fallback-color-06.svg pass.svg
+
+== filter-and-clip.svg filter-and-clip-ref.svg
+== filter-basic-01.svg pass.svg
+== filter-basic-02.svg pass.svg
+== filter-basic-03.svg pass.svg
+== filter-bounds-01.svg pass.svg
+== filter-bounds-02.svg pass.svg
+# Disabled for now, see bug 1286798 comment 180, 187, 190 and 196.
+# This pref is normally on by default, but we turn it off in reftest runs to
+# disable an unnecessary security-check. This reftest is actually testing that
+# the security check works, though, so it needs the pref to be turned on:
+skip pref(security.fileuri.strict_origin_policy,true) == filter-extref-differentOrigin-01.svg pass.svg # Bug 695385
+== filter-foreignObject-01.svg pass.svg
+== filter-in-mask-01.svg pass.svg
+== filter-invalidation-01.svg pass.svg
+fuzzy(0-71,0-821) fails-if(winWidget) fuzzy-if(OSX&&!swgl,1-1,216-458) == filter-on-continuation-box-01.html filter-on-continuation-box-ref.html
+== filter-result-01.svg filter-result-01-ref.svg
+== filter-scaled-01.svg pass.svg
+fuzzy(0-1,0-500) == filter-scaled-02.html filter-scaled-02-ref.html
+== filter-translated-01.svg filter-translated-01-ref.svg
+== filter-use-element-01.svg pass.svg
+== filtered-image-in-pattern-01.svg pass.svg
+fuzzy(0-1,0-800000) == filters-and-group-opacity-01.svg filters-and-group-opacity-01-ref.svg
+
+== foreignObject-01.svg pass.svg
+== foreignObject-02.svg foreignObject-02-ref.svg
+== foreignObject-ancestor-style-change-01.svg foreignObject-ancestor-style-change-01-ref.svg
+== foreignObject-change-transform-01.svg pass.svg
+== foreignObject-display-01.svg pass.svg
+fuzzy-if(cocoaWidget,0-1,0-1) fuzzy-if(gtkWidget,0-2,0-2) fuzzy-if(geckoview,0-4,0-9) == foreignObject-form-theme.svg foreignObject-form-theme-ref.html # Bug 1727811
+== foreignObject-img.html foreignObject-img-ref.html
+== foreignObject-img-form-theme.html foreignObject-img-form-theme-ref.html
+== foreignObject-move-repaint-01.svg pass.svg
+== foreignObject-overflow-01.svg pass.svg
+== foreignObject-start-hidden-01.svg pass.svg # followup from Bug 596765
+== foreignObject-start-hidden-02.svg pass.svg
+== foreignObject-style-change-01.svg pass.svg
+== foreignObject-dynamic-abspos-01.html foreignObject-dynamic-abspos-01-ref.html
+fuzzy-if(Android,0-18,0-600) == foreignObject-fixedpos-01.html foreignObject-dynamic-abspos-01-ref.html
+== foreignObject-fixedpos-02.html foreignObject-fixedpos-ref.html
+== foreignObject-dynamic-fixedpos-01.html foreignObject-dynamic-abspos-01-ref.html
+== foreignObject-dynamic-line-height-01.html foreignObject-dynamic-line-height-01-ref.html
+== foreignObject-vertical-01.svg foreignObject-vertical-01-ref.svg
+
+== fragmentIdentifier-01.xhtml pass.svg
+
+== g-transform-01.svg pass.svg
+
+== getElementById-a-element-01.svg pass.svg
+== geometry-properties-in-css.html geometry-properties-in-css-ref.html
+
+== gradient-href-01.html pass.svg
+fuzzy(0-3,0-32000) == gradient-live-01a.svg gradient-live-01-ref.svg
+fuzzy(0-3,0-32000) == gradient-live-01b.svg gradient-live-01-ref.svg
+fuzzy(0-3,0-32000) == gradient-live-01c.svg gradient-live-01-ref.svg
+fuzzy(0-3,0-32000) == gradient-live-01d.svg gradient-live-01-ref.svg
+== gradient-transform-01.svg pass.svg
+== href-attr-change-restyles.svg href-attr-change-restyles-ref.svg
+fuzzy(0-1,0-550) == import-svg-01.html pass.svg
+== invalid-text-01.svg pass.svg
+== lang-attribute-01.svg pass.svg
+== lang-attribute-02.svg pass.svg
+== lang-attribute-03.svg pass.svg
+== linearGradient-basic-01.svg pass.svg
+== linearGradient-basic-02.svg pass.svg
+# off-by-one fuzziness expected. OS X is broken with bad aliasing though (bug 1023640).
+fuzzy(0-1,0-5000) == linearGradient-basic-03.svg linearGradient-basic-03-ref.svg
+
+== linked-filter-01.svg pass.svg
+== linked-pattern-01.svg pass.svg
+
+fuzzy(0-1,0-800000) == markers-and-group-opacity-01.svg markers-and-group-opacity-01-ref.svg
+== marker-attribute-01.svg pass.svg
+fuzzy(0-1,0-1) == marker-dynamic-opacity.html marker-dynamic-opacity-ref.html
+== marker-css-transform.html marker-css-transform-ref.html
+== marker-effects-01.svg marker-effects-01-ref.svg
+fuzzy(0-1,0-100) == marker-viewBox-01.svg marker-viewBox-01-ref.svg
+fuzzy(0-65,0-570) == marker-orientation-01.svg marker-orientation-01-ref.svg
+fuzzy(0-65,0-570) == marker-orientation-02.svg marker-orientation-02-ref.svg
+== marker-orientation-03.svg pass.svg
+== marker-orientation-04.svg pass.svg
+== marker-orientation-05.svg pass.svg
+
+fuzzy(0-28,0-28) == mask-and-clipPath.html mask-and-clipPath-ref.html
+== mask-and-clipPath-2.svg pass.svg
+== mask-ref-loop-01.svg pass.svg
+== mask-basic-01.svg pass.svg
+fuzzy(0-1,0-10000) == mask-basic-02.svg mask-basic-02-ref.svg
+== mask-basic-03.svg pass.svg
+== mask-basic-04.svg pass.svg
+== mask-basic-05.svg pass.svg
+== mask-containing-masked-content-01.svg pass.svg
+== mask-contains-inner-svg-01.svg pass.svg
+== mask-contains-inner-svg-02.svg pass.svg
+== mask-css-transform.html mask-css-transform-ref.html
+== mask-empty-size.svg about:blank
+== mask-extref-dataURI-01.svg pass.svg
+fuzzy(0-128,0-142) == mask-img.html mask-img-ref.html
+== mask-on-outflowElement-01a.html clipPath-on-outflowElement-01-ref.html
+== mask-on-outflowElement-01b.html clipPath-on-outflowElement-01-ref.html
+fuzzy(0-1,0-5000) == mask-opacity-01.svg mask-opacity-01-ref.svg
+fuzzy(0-2,0-65536) == mask-opacity-02.svg mask-opacity-02-ref.svg
+fuzzy(0-1,0-5000) == mask-opacity-03.svg mask-opacity-02-ref.svg
+fuzzy(0-1,0-5000) == mask-opacity-04.svg mask-opacity-02-ref.svg
+fuzzy(0-1,0-5000) == mask-opacity-05.svg mask-opacity-02-ref.svg
+!= mask-root-svg.svg about:blank
+== mask-transformed-01.svg mask-transformed-01-ref.svg
+== mask-transformed-02.svg pass.svg
+== mask-transformed-child-01.svg mask-transformed-child-01-ref.svg
+# fuzzy because of the differences between clipPath and mask clipping
+fuzzy(0-1,0-6400) == mask-type-01.svg mask-type-01-ref.svg
+fuzzy(0-1,0-6400) == mask-type-02.svg mask-type-01-ref.svg
+fuzzy(0-1,0-6400) == mask-type-03.svg mask-type-01-ref.svg
+fuzzy(0-1,0-6400) == mask-type-04.svg mask-type-01-ref.svg
+== mask-use-element-01.svg pass.svg
+
+!= nested-mask-mode.svg about:blank
+== nested-viewBox-01.svg pass.svg
+== non-scaling-stroke-css-transform.html non-scaling-stroke-css-transform-ref.html
+
+fuzzy(0-3,0-448000) == nesting-invalid-01.svg nesting-invalid-01-ref.svg
+
+fuzzy(0-2,0-1000) == non-scaling-stroke-01.svg non-scaling-stroke-01-ref.svg # bug 1074161 for Win7 and OSX 10.8
+fuzzy(0-51,0-900) fuzzy-if(Android,0-51,0-4090) fails-if(useDrawSnapshot) == non-scaling-stroke-02.svg non-scaling-stroke-02-ref.svg
+== non-scaling-stroke-03.svg non-scaling-stroke-03-ref.svg
+
+== objectBoundingBox-and-clipPath.svg pass.svg
+# Bug 588684
+== objectBoundingBox-and-fePointLight-01.svg objectBoundingBox-and-fePointLight-01-ref.svg
+== objectBoundingBox-and-fePointLight-02.svg objectBoundingBox-and-fePointLight-02-ref.svg
+== objectBoundingBox-and-mask.svg pass.svg
+== objectBoundingBox-and-mask-02.svg pass.svg
+== objectBoundingBox-and-pattern-01a.svg objectBoundingBox-and-pattern-01-ref.svg
+== objectBoundingBox-and-pattern-01b.svg objectBoundingBox-and-pattern-01-ref.svg
+== objectBoundingBox-and-pattern-01c.svg objectBoundingBox-and-pattern-01-ref.svg
+== objectBoundingBox-and-pattern-02.svg pass.svg
+== objectBoundingBox-and-pattern-03.svg objectBoundingBox-and-pattern-03-ref.svg
+
+== opacity-and-gradient-01.svg pass.svg
+skip-if(d2d) fuzzy(0-1,0-200000) == opacity-and-gradient-02.svg opacity-and-gradient-02-ref.svg
+== opacity-and-pattern-01.svg pass.svg
+fuzzy(0-1,0-10000) == opacity-and-transform-01.svg opacity-and-transform-01-ref.svg
+
+fuzzy-if(Android,0-8,0-200) == outer-svg-border-and-padding-01.svg outer-svg-border-and-padding-01-ref.svg
+
+fuzzy(0-7,0-214) == outline.html outline-ref.html # Bug 1503525
+
+== overflow-on-outer-svg-01.svg overflow-on-outer-svg-01-ref.svg
+== overflow-on-outer-svg-02a.xhtml overflow-on-outer-svg-02-ref.xhtml
+== overflow-on-outer-svg-02b.xhtml overflow-on-outer-svg-02-ref.xhtml
+== overflow-on-outer-svg-02c.xhtml overflow-on-outer-svg-02-ref.xhtml
+== overflow-on-outer-svg-02d.xhtml overflow-on-outer-svg-02-ref.xhtml
+== overflow-on-outer-svg-03a.xhtml overflow-on-outer-svg-03-ref.xhtml
+== overflow-on-outer-svg-03b.xhtml overflow-on-outer-svg-03-ref.xhtml
+
+== paint-on-maskLayer-1a.html paint-on-maskLayer-1-ref.html
+== paint-on-maskLayer-1b.html paint-on-maskLayer-1-ref.html
+== paint-on-maskLayer-1c.html paint-on-maskLayer-1-ref.html
+fuzzy-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu),0-16,0-5) == paint-order-01.svg paint-order-01-ref.svg
+== paint-order-02.svg paint-order-02-ref.svg
+== paint-order-03.svg paint-order-03-ref.svg
+
+#fuzzy(0-23,0-60) fails-if(d2d) == path-01.svg path-01-ref.svg
+== path-02.svg pass.svg
+== path-04.svg pass.svg
+== path-05.svg pass.svg
+fuzzy(0-1,0-400) == path-06.svg path-06-ref.svg
+== path-07.svg path-07-ref.svg
+== path-08.svg pass.svg
+== path-transform-box.svg pass.svg
+
+== pathLength-01.svg pass.svg
+== pathLength-02.svg pass.svg
+
+== pattern-basic-01.svg pass.svg
+# Massively downsampling an image plays out differently when using WR instead of blob images.
+# In practive the two *look* identical, unfortunately the fuzziness is so high that the test is
+# barely meaningful.
+fuzzy(0-128,0-100) == pattern-big-image.html pattern-big-image-ref.html
+== pattern-css-transform.html pattern-css-transform-ref.html
+== pattern-invalid-01.svg pattern-invalid-01-ref.svg
+== pattern-live-01a.svg pattern-live-01-ref.svg
+== pattern-live-01b.svg pattern-live-01-ref.svg
+== pattern-live-01c.svg pattern-live-01-ref.svg
+== pattern-scale-01a.svg pattern-scale-01-ref.svg
+== pattern-scale-01b.svg pattern-scale-01-ref.svg
+== pattern-scale-01c.svg pattern-scale-01-ref.svg
+== pattern-transform-presence-01.svg pattern-transform-presence-01-ref.svg
+== pattern-transformed-01.svg pattern-transformed-01-ref.svg
+fuzzy(0-27,0-9058) fuzzy-if(Android,0-28,0-11159) == pattern-transformed-02.svg pattern-transformed-02-ref.svg
+
+== polygon-01.svg polygon-01-ref.svg
+== polygon-marker-01.svg pass.svg
+== polygon-points-negative-01.svg pass.svg
+== polyline-points-invalid-01.svg pass.svg
+
+== pseudo-classes-01.svg pass.svg
+# This test depends on :visited styles (which are asynchronous), so we run
+# it in layout/style/test/test_visited_reftests.html instead of using the
+# reftest harness.
+# == pseudo-classes-02.svg pseudo-classes-02-ref.svg
+
+== radialGradient-basic-01.svg pass.svg
+== radialGradient-basic-02.svg pass.svg
+fuzzy(0-1,0-5) fuzzy-if(winWidget,0-32,0-223) fuzzy-if(winWidget&&!swgl&&!/^Windows\x20NT\x206\.1/.test(http.oscpu),78-96,21684-21713) skip-if(winWidget&&isCoverageBuild) fuzzy-if(Android&&device,0-4,0-946) == radialGradient-basic-03.svg radialGradient-basic-03-ref.html # Bug 1718175 (Win CCov: Bug 1740155)
+== radialGradient-basic-04.svg pass.svg
+== radialGradient-fr-01.svg pass.svg
+fuzzy(0-1,0-3235) fuzzy-if(winWidget,0-1,0-7030) == radialGradient-fr-02.svg radialGradient-fr-02-ref.svg
+
+fuzzy(0-1,0-3600) == rect-01.svg pass.svg
+== rect-02.svg pass.svg
+== rect-03.svg pass.svg
+== rect-04.svg pass.svg
+== rect-with-rx-and-ry-01.svg pass.svg
+== rect-with-rx-or-ry-01.svg rect-with-rx-or-ry-01-ref.svg
+
+== rootElement-null-01.svg pass.svg
+
+== script-empty-01.svg pass.svg
+
+== selector-01.svg pass.svg
+
+== stroke-dasharray-01.svg stroke-dasharray-01-ref.svg
+fuzzy(0-1,0-340) == stroke-dasharray-02.svg pass.svg
+fuzzy(0-1,0-340) == stroke-dasharray-03.svg pass.svg
+== stroke-dasharray-and-pathLength-01.svg pass.svg
+fails-if(useDrawSnapshot) == stroke-dasharray-and-text-01.svg stroke-dasharray-and-text-01-ref.svg
+== stroke-dashoffset-01.svg pass.svg
+== stroke-dashoffset-and-pathLength-01.svg pass.svg
+== stroke-linecap-circle-ellipse-01.svg stroke-linecap-circle-ellipse-01-ref.svg
+== stroke-linecap-circle-ellipse-dashed-01.svg pass.svg
+== stroke-linecap-round-w-zero-length-segs-01.svg pass.svg
+== stroke-linecap-round-w-zero-length-segs-02.svg pass.svg
+== stroke-linecap-round-w-zero-length-segs-03.svg pass.svg
+== stroke-linecap-square-w-zero-length-segs-01.svg pass.svg
+== stroke-linecap-square-w-zero-length-segs-02.svg pass.svg
+== stroke-width-percentage-01.svg pass.svg
+== stroke-width-percentage-02a.svg stroke-width-percentage-02-ref.svg
+== stroke-width-percentage-02b.svg stroke-width-percentage-02-ref.svg
+== stroke-width-percentage-03.xhtml stroke-width-percentage-03-ref.xhtml
+
+== style-property-on-script-element-01.svg pass.svg
+== style-without-type-attribute.svg pass.svg
+
+== svg-in-foreignObject-01.xhtml svg-in-foreignObject-01-ref.xhtml
+fuzzy(0-1,0-2600) == svg-in-foreignObject-02.xhtml svg-in-foreignObject-01-ref.xhtml # reuse -01-ref.xhtml
+== svg-in-inner-svg-dimensions.svg pass.svg
+== switch-01.svg pass.svg
+
+== suspend-01.svg pass.svg
+== suspend-02.svg pass.svg
+== suspend-03.svg pass.svg
+== suspend-04.svg pass.svg
+== suspend-05.svg pass.svg
+== suspend-06.svg pass.svg
+== suspend-07.svg pass.svg
+== suspend-08.svg pass.svg
+
+== svg-effects-area-unzoomed.xhtml svg-effects-area-unzoomed-ref.xhtml
+== svg-effects-area-zoomed-in.xhtml svg-effects-area-zoomed-in-ref.xhtml
+== svg-effects-area-zoomed-out.xhtml svg-effects-area-zoomed-out-ref.xhtml
+== svg-transform-01.svg pass.svg
+== svg-transform-02.svg pass.svg
+
+fuzzy(0-39,0-269) == symbol-01.svg symbol-01-ref.svg
+
+== text-font-size-01.svg pass.svg
+== text-font-weight-01.svg text-font-weight-01-ref.svg
+== text-gradient-01.svg text-gradient-01-ref.svg
+random-if(winWidget) fuzzy-if(Android,0-10,0-2) == text-gradient-02.svg text-gradient-02-ref.svg # see bug 590101
+fuzzy(0-1,0-5500) == text-gradient-03.svg pass.svg
+== text-gradient-04.svg text-gradient-04-ref.svg
+== text-in-link-01.svg text-in-link-01-ref.svg
+== text-in-link-02.svg text-in-link-02-ref.svg
+== text-in-link-03.svg text-in-link-03-ref.svg
+# Tests for bug 546813: sanity-check using HTML text, then test SVG behavior.
+!= text-language-00.xhtml text-language-00-ref.xhtml
+random-if(gtkWidget) != text-language-01.xhtml text-language-01-ref.xhtml # Fails on Linux tryserver due to lack of CJK fonts.
+== text-layout-01.svg text-layout-01-ref.svg
+== text-layout-02.svg text-layout-02-ref.svg
+== text-layout-03.svg text-layout-03-ref.svg
+== text-layout-04.svg text-layout-04-ref.svg
+== text-layout-05.svg text-layout-05-ref.svg
+fuzzy-if(cocoaWidget&&layersGPUAccelerated,0-1,0-3) == text-layout-06.svg text-layout-06-ref.svg
+== text-layout-07.svg text-layout-07-ref.svg
+== text-layout-08.svg text-layout-08-ref.svg
+== text-layout-09.svg pass.svg
+fuzzy-if(/^Windows\x20NT\x206\.1/.test(http.oscpu),0-3,0-4) == text-layout-10.svg pass.svg # Bug 1392106
+== text-scale-01.svg text-scale-01-ref.svg
+fuzzy(0-2,0-1000) == text-scale-02.svg text-scale-02-ref.svg
+== text-scale-03.svg text-scale-03-ref.svg
+
+== text-style-01a.svg text-style-01-ref.svg
+== text-style-01b.svg text-style-01-ref.svg
+== text-style-01c.svg text-style-01-ref.svg
+== text-style-01d.svg text-style-01-ref.svg
+== text-style-01e.svg text-style-01-ref.svg
+
+== text-stroke-scaling-01.svg text-stroke-scaling-01-ref.svg
+fuzzy(0-16,0-3) == text-stroke-scaling-02a.html text-stroke-scaling-02-ref.html # antialiasing
+fuzzy(0-16,0-3) == text-stroke-scaling-02b.html text-stroke-scaling-02-ref.html # antialiasing
+== text-stroke-scaling-02a.html text-stroke-scaling-02b.html
+== textPath-01.svg textPath-01-ref.svg
+== textPath-02.svg pass.svg
+fuzzy(0-1,0-610) == textPath-03.svg pass.svg
+== textPath-04.svg pass.svg
+== textPath-05.html pass.svg
+== textPath-06.svg pass.svg
+== textPath-line-01.svg textPath-line-01-ref.svg
+== textPath-path-attribute-01.svg textPath-path-attribute-01-ref.svg
+== textPath-side-attribute-01.svg pass.svg
+
+== text-white-space-01.svg text-white-space-01-ref.svg
+
+== thin-stroke-01.svg pass.svg
+
+== transform-origin-presentation-01.svg pass.svg
+
+== transform-outer-svg-01.svg transform-outer-svg-01-ref.svg
+== css-transform-svg.html css-transform-svg-ref.html
+
+== tspan-dxdy-01.svg tspan-dxdy-ref.svg
+== tspan-dxdy-02.svg tspan-dxdy-ref.svg
+== tspan-dxdy-03.svg tspan-dxdy-ref.svg
+== tspan-dxdy-04.svg tspan-dxdy-ref.svg
+== tspan-dxdy-05.svg tspan-dxdy-ref.svg
+== tspan-dxdy-06.svg tspan-dxdy-ref.svg
+== tspan-dxdy-textPath-01.svg tspan-dxdy-textPath-01-ref.svg
+== tspan-rotate-01.svg tspan-rotate-ref.svg
+fuzzy(0-1,0-550) == tspan-rotate-02.svg tspan-rotate-02.svg
+fuzzy(0-1,0-550) == tspan-rotate-02.svg tspan-rotate-02-ref.svg
+fuzzy(0-1,0-550) == tspan-rotate-03.svg tspan-rotate-ref.svg
+fuzzy(0-1,0-550) == tspan-rotate-04.svg tspan-rotate-04.svg
+fuzzy(0-1,0-550) == tspan-rotate-04.svg tspan-rotate-04-ref.svg
+fuzzy(0-1,0-550) == tspan-rotate-05.svg tspan-rotate-ref.svg
+fuzzy(0-1,0-550) == tspan-rotate-06.svg tspan-rotate-ref.svg
+fuzzy(0-1,0-550) == tspan-rotate-07.svg tspan-rotate-07-ref.svg
+== tspan-rotate-textPath-01.svg tspan-rotate-textPath-01-ref.svg
+fuzzy(0-1,0-100) == tspan-xy-01.svg tspan-xy-ref.svg
+== tspan-xy-02.svg tspan-xy-ref.svg
+fuzzy(0-1,0-300) == tspan-xy-03.svg tspan-xy-ref.svg
+fuzzy(0-1,0-300) == tspan-xy-04.svg tspan-xy-ref.svg
+fuzzy(0-1,0-300) == tspan-xy-05.svg tspan-xy-ref.svg
+fuzzy(0-1,0-300) == tspan-xy-06.svg tspan-xy-ref.svg
+fuzzy(0-1,0-100) == tspan-xy-anchor-middle-01.svg tspan-xy-anchor-middle-ref.svg
+fuzzy(0-1,0-100) == tspan-xy-anchor-end-01.svg tspan-xy-anchor-end-ref.svg
+
+pref(layout.css.devPixelsPerPx,"1.0") == svg-blurry-with-subpixel-position.html svg-blurry-with-subpixel-position-ref.html
+
+== use-01.svg pass.svg
+== use-02.svg pass.svg
+== use-01-extref.svg pass.svg
+== use-02-extref.svg use-02-extref-ref.svg
+== use-extref-dataURI-01.svg pass.svg
+== use-children.svg pass.svg
+
+test-pref(svg.use-element.graphics-element-restrictions,0) == use-restrictions.svg use-restrictions-not-restricted-ref.svg
+test-pref(svg.use-element.graphics-element-restrictions,1) != use-restrictions.svg use-restrictions-not-restricted-ref.svg
+test-pref(svg.use-element.graphics-element-restrictions,1) ref-pref(svg.use-element.graphics-element-restrictions,2) != use-restrictions.svg use-restrictions.svg
+
+== use-element-shadow-tree-rule-matching.html pass.svg
+== use-image-01.svg pass.svg
+
+# test case for Fragment URLs
+# https://drafts.csswg.org/css-values/#local-urls
+== use-localRef-marker-01.svg use-localRef-marker-01-ref.svg
+== use-localRef-clipPath-01.svg use-localRef-clipPath-01-ref.svg
+== use-localRef-filter-01.svg use-localRef-filter-01-ref.svg
+== use-localRef-fill-01.svg use-localRef-fill-01-ref.svg
+== use-localRef-link.html pass.svg
+== use-localRef-stroke-01.svg use-localRef-stroke-01-ref.svg
+== use-localRef-mask-01.svg use-localRef-mask-01-ref.svg
+
+== userSpaceOnUse-and-pattern-01.svg userSpaceOnUse-and-pattern-01-ref.svg
+
+== viewBox-and-pattern-01.svg pass.svg
+== viewBox-and-pattern-02.svg pass.svg
+== viewBox-and-pattern-03.svg pass.svg
+== viewBox-and-pattern-04.svg pass.svg
+== viewBox-and-symbol-01.svg pass.svg
+== viewBox-invalid-01.svg pass.svg
+== viewBox-invalid-02.svg pass.svg
+== viewBox-valid-01.svg pass.svg
+== viewBox-valid-02.xhtml pass.svg
+== viewport-percent-graphic-user-01.svg pass.svg
+== winding-01.svg pass.svg
+
+== zero-stroke-01.svg pass.svg
+
+# currentColor override by color attribute
+== currentColor-override-flood.svg pass.svg
+== currentColor-override-lighting.svg currentColor-override-lighting-ref.svg
+== currentColor-override-stop.svg pass.svg
+
+defaults skip-if(ThreadSanitizer)
+
+== mask-invalidation.html mask-invalidation-ref.html
+== filter-in-mask.html filter-in-mask-ref.html
+== overflow-visible-image.html overflow-visible-image-ref.html
+
+# Shadow DOM id tracking.
+skip-if(/^Windows\x20NT\x206\.1/.test(http.oscpu)) skip-if(geckoview) == fragid-shadow-1.html fragid-shadow-ref.html # bug 1560367 for GV+WR, bug 1717061 for Win 7
+skip-if(/^Windows\x20NT\x206\.1/.test(http.oscpu)) skip-if(geckoview) == fragid-shadow-2.html fragid-shadow-ref.html # bug 1560367 for GV+WR, bug 1717061 for Win 7
+skip-if(/^Windows\x20NT\x206\.1/.test(http.oscpu)) skip-if(geckoview) == fragid-shadow-3.html fragid-shadow-ref.html # bug 1560367 for GV+WR, bug 1717061 for Win 7
+skip-if(/^Windows\x20NT\x206\.1/.test(http.oscpu)) skip-if(geckoview) == fragid-shadow-4.html fragid-shadow-ref.html # bug 1560367 for GV+WR, bug 1717061 for Win 7
+skip-if(/^Windows\x20NT\x206\.1/.test(http.oscpu)) skip-if(geckoview) == fragid-shadow-5.html fragid-shadow-ref.html # bug 1560367 for GV+WR, bug 1717061 for Win 7
+skip-if(/^Windows\x20NT\x206\.1/.test(http.oscpu)) skip-if(geckoview) == fragid-shadow-6.html fragid-shadow-ref.html # bug 1560367 for GV+WR, bug 1717061 for Win 7
+skip-if(/^Windows\x20NT\x206\.1/.test(http.oscpu)) skip-if(geckoview) == fragid-shadow-7.html fragid-shadow-ref.html # bug 1560367 for GV+WR, bug 1717061 for Win 7
+skip-if(/^Windows\x20NT\x206\.1/.test(http.oscpu)) skip-if(geckoview) == fragid-shadow-8.html fragid-shadow-ref.html # bug 1560367 for GV+WR, bug 1717061 for Win 7
+skip-if(/^Windows\x20NT\x206\.1/.test(http.oscpu)) skip-if(geckoview) == fragid-shadow-9.html fragid-shadow-ref.html # bug 1560367 for GV+WR, bug 1717061 for Win 7
+skip-if(/^Windows\x20NT\x206\.1/.test(http.oscpu)) skip-if(geckoview) == fragid-shadow-10.html fragid-shadow-ref.html # bug 1560367 for GV+WR, bug 1717061 for Win 7
+
+== mask-resource.html mask-resource-ref.html
+fails-if(Android) != mask-resource.html about:blank # The image the test uses is not on Android
+
+!= bug-1562091.html bug-1562091-ref.html
+== 1570363-1.html 1570363-1-ref.html
+
+fuzzy(0-1,0-150) == mask-opacity-invalidation-1.html mask-opacity-invalidation-1-ref.html # clip-path mask/opacity optimization
+skip-if(Android) skip-if(cocoaWidget) skip-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu)) == transform-animation-on-path.html transform-animation-on-path-ref.html #Bug 1638909
+
+fuzzy(0-20,0-110) == 1792313.svg 1792313-ref.svg
+pref(svg.use-element.recursive-clone-limit.enabled,1) != about:blank explosive-use.svg
diff --git a/layout/reftests/svg/rootElement-null-01.svg b/layout/reftests/svg/rootElement-null-01.svg
new file mode 100644
index 0000000000..2562bd1dcc
--- /dev/null
+++ b/layout/reftests/svg/rootElement-null-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" version="1.1"
+ onload="handleLoad(evt);">
+
+ <title>Testcase for accessing null rootContent</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=365611 -->
+
+ <script type="application/ecmascript">
+ <![CDATA[
+
+function handleLoad(event)
+{
+ var root = document.removeChild(document.documentElement);
+ if (document.documentElement == null) { // this shouldn't crash
+ document.appendChild(root);
+ document.getElementById('rect').setAttribute('fill', 'lime');
+ }
+}
+
+ ]]>
+ </script>
+
+ <rect id="rect" width="100%" height="100%" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/script-empty-01.svg b/layout/reftests/svg/script-empty-01.svg
new file mode 100644
index 0000000000..528f6a8aad
--- /dev/null
+++ b/layout/reftests/svg/script-empty-01.svg
@@ -0,0 +1,14 @@
+<!--
+ 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>Testcase for that xlink:href attribute overrides script content</title>
+
+ <rect id="r" width="100%" height="100%" fill="lime"/>
+
+ <script xlink:href="">
+ document.getElementById("r").style.fill = "red";
+ </script>
+</svg>
diff --git a/layout/reftests/svg/selector-01.svg b/layout/reftests/svg/selector-01.svg
new file mode 100644
index 0000000000..595d92ea43
--- /dev/null
+++ b/layout/reftests/svg/selector-01.svg
@@ -0,0 +1,19 @@
+<!--
+ 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 for invalid text</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=477996 -->
+
+ <defs>
+ <style type="text/css">
+ [transform="scale(2)"] { fill: lime }
+ </style>
+ </defs>
+ <g fill="red">
+ <rect transform="scale(2)" width="100%" height="100%" />
+ </g>
+</svg>
diff --git a/layout/reftests/svg/sizing/ahem.css b/layout/reftests/svg/sizing/ahem.css
new file mode 100644
index 0000000000..5cea74d04f
--- /dev/null
+++ b/layout/reftests/svg/sizing/ahem.css
@@ -0,0 +1,4 @@
+@font-face {
+ font-family: "Ahem";
+ src: url(../../fonts/Ahem.ttf);
+}
diff --git a/layout/reftests/svg/sizing/dynamic--inline-css-height.xhtml b/layout/reftests/svg/sizing/dynamic--inline-css-height.xhtml
new file mode 100644
index 0000000000..2abf3a32b1
--- /dev/null
+++ b/layout/reftests/svg/sizing/dynamic--inline-css-height.xhtml
@@ -0,0 +1,49 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait">
+ <head>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: change CSS 'height' property on inline SVG</title>
+
+ <!--
+ This testcase checks that when the value of the CSS 'height' property on
+ inline SVG is changed, the SVG resizes as expected.
+ -->
+
+ <style type="text/css">
+
+html, body {
+ padding: 0;
+ border: 0;
+ margin: 0;
+ width: 100%;
+ height: 100%;
+ background: red;
+}
+
+ </style>
+ <script type="text/javascript">
+
+function resize_svg()
+{
+ document.getElementById('svg').style.height = '100%';
+ document.documentElement.removeAttribute('class');
+}
+
+document.addEventListener("MozReftestInvalidate", resize_svg, false);
+
+ </script>
+ </head>
+ <body>
+
+ <svg id="svg" xmlns="http://www.w3.org/2000/svg"
+ style="display:block; width:100%; height:0;" width="0" height="0">
+ <rect width="100%" height="100%" fill="lime"/>
+ </svg>
+
+ </body>
+</html>
diff --git a/layout/reftests/svg/sizing/dynamic--inline-css-width.xhtml b/layout/reftests/svg/sizing/dynamic--inline-css-width.xhtml
new file mode 100644
index 0000000000..b23407b6dc
--- /dev/null
+++ b/layout/reftests/svg/sizing/dynamic--inline-css-width.xhtml
@@ -0,0 +1,49 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait">
+ <head>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: change CSS 'width' property on inline SVG</title>
+
+ <!--
+ This testcase checks that when the value of the CSS 'width' property on
+ inline SVG is changed, the SVG resizes as expected.
+ -->
+
+ <style type="text/css">
+
+html, body {
+ padding: 0;
+ border: 0;
+ margin: 0;
+ width: 100%;
+ height: 100%;
+ background: red;
+}
+
+ </style>
+ <script type="text/javascript">
+
+function resize_svg()
+{
+ document.getElementById('svg').style.width = '100%';
+ document.documentElement.removeAttribute('class');
+}
+
+document.addEventListener("MozReftestInvalidate", resize_svg, false);
+
+ </script>
+ </head>
+ <body>
+
+ <svg id="svg" xmlns="http://www.w3.org/2000/svg"
+ style="display:block; width:0; height:100%;" width="0" height="0">
+ <rect width="100%" height="100%" fill="lime"/>
+ </svg>
+
+ </body>
+</html>
diff --git a/layout/reftests/svg/sizing/dynamic--inline-resize-window-height.xhtml b/layout/reftests/svg/sizing/dynamic--inline-resize-window-height.xhtml
new file mode 100644
index 0000000000..3091947d88
--- /dev/null
+++ b/layout/reftests/svg/sizing/dynamic--inline-resize-window-height.xhtml
@@ -0,0 +1,52 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait">
+ <head>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: resize of window height</title>
+
+ <!--
+ This testcase checks that SVG embedded inline with a percentage height is
+ updated correctly when the window is resized.
+ -->
+
+ <style type="text/css">
+
+html, body, div {
+ padding: 0;
+ border: 0;
+ margin: 0;
+ width: 100%;
+ height: 100%;
+ background: red;
+ overflow: hidden;
+}
+
+ </style>
+ <script type="text/javascript">
+
+var initial_height = top.innerHeight;
+top.innerHeight /= 2;
+
+function restore_height()
+{
+ top.innerHeight = initial_height;
+ document.documentElement.removeAttribute('class');
+}
+
+document.addEventListener("MozReftestInvalidate", restore_height, false);
+
+ </script>
+ </head>
+ <body>
+
+ <svg xmlns="http://www.w3.org/2000/svg" width="5000" height="100%">
+ <rect width="100%" height="100%" fill="lime"/>
+ </svg>
+
+ </body>
+</html>
diff --git a/layout/reftests/svg/sizing/dynamic--inline-resize-window-width.xhtml b/layout/reftests/svg/sizing/dynamic--inline-resize-window-width.xhtml
new file mode 100644
index 0000000000..dbf0c87620
--- /dev/null
+++ b/layout/reftests/svg/sizing/dynamic--inline-resize-window-width.xhtml
@@ -0,0 +1,52 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait">
+ <head>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: resize of window width</title>
+
+ <!--
+ This testcase checks that SVG embedded inline with a percentage width is
+ updated correctly when the window is resized.
+ -->
+
+ <style type="text/css">
+
+html, body, div {
+ padding: 0;
+ border: 0;
+ margin: 0;
+ width: 100%;
+ height: 100%;
+ background: red;
+ overflow: hidden;
+}
+
+ </style>
+ <script type="text/javascript">
+
+var initial_width = top.innerWidth;
+top.innerWidth /= 2;
+
+function restore_width()
+{
+ top.innerWidth = initial_width;
+ document.documentElement.removeAttribute('class');
+}
+
+document.addEventListener("MozReftestInvalidate", restore_width, false);
+
+ </script>
+ </head>
+ <body onload="restore_width()">
+
+ <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="5000">
+ <rect width="100%" height="100%" fill="lime"/>
+ </svg>
+
+ </body>
+</html>
diff --git a/layout/reftests/svg/sizing/dynamic--object--auto-auto--pct-px.html b/layout/reftests/svg/sizing/dynamic--object--auto-auto--pct-px.html
new file mode 100644
index 0000000000..1fbecb0dc7
--- /dev/null
+++ b/layout/reftests/svg/sizing/dynamic--object--auto-auto--pct-px.html
@@ -0,0 +1,43 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:auto; width="49%" height="70px"</title>
+
+ <!--
+ This testcase checks that the <object> element uses the intrinsic
+ height of the embedded SVG, but ignores the percentage width. Since
+ the intrinsic height is 70px, you should see a blue rectangle 300px
+ (the magic default) wide by 70px high when viewing this file. You
+ should not see any red.
+ -->
+
+ <style type="text/css">
+
+html, body {
+ padding: 0;
+ border: 0;
+ margin: 0;
+ width: 100%;
+ height: 100%;
+}
+
+object {
+ padding: 0;
+ margin: 50px;
+ background: red;
+}
+
+ </style>
+ </head>
+ <body>
+ <object data="object--auto-auto--pct-px.svg" type="image/svg+xml">
+ FAIL
+ </object>
+ </body>
+</html>
diff --git a/layout/reftests/svg/sizing/dynamic--object-svg-unloaded-a.svg b/layout/reftests/svg/sizing/dynamic--object-svg-unloaded-a.svg
new file mode 100644
index 0000000000..8ee8e25709
--- /dev/null
+++ b/layout/reftests/svg/sizing/dynamic--object-svg-unloaded-a.svg
@@ -0,0 +1,40 @@
+<!--
+ 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" width="70" height="70"
+ onload="handle_load(evt);">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>SVG embedded by reference by dynamic--object-svg-unloaded.xhtml</title>
+
+ <script type="text/javascript">
+
+var embedding_element;
+
+function handle_load(e)
+{
+ embedding_element = e.originalTarget.ownerDocument.defaultView.frameElement;
+ top.document.addEventListener("MozReftestInvalidate", load_new_page, false);
+}
+
+function load_new_page()
+{
+ // We could set embedding_element.data to load the new page, but that:
+ //
+ // a) Crashes if we don't use setTimeout
+ //
+ // b) Actually works, perhaps because it takes a different code path to the
+ // path that's taken when a user clicks on a link in the embedded SVG
+ //
+ // For these reasons we set document.location.href on the SVG document.
+
+ document.location.href = 'dynamic--object-svg-unloaded-b.xhtml';
+}
+
+ </script>
+
+ <rect width="100%" height="100%" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/dynamic--object-svg-unloaded-b.xhtml b/layout/reftests/svg/sizing/dynamic--object-svg-unloaded-b.xhtml
new file mode 100644
index 0000000000..7ed4c539ce
--- /dev/null
+++ b/layout/reftests/svg/sizing/dynamic--object-svg-unloaded-b.xhtml
@@ -0,0 +1,37 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>SVG embedded by reference by dynamic--object-svg-unloaded.xhtml</title>
+
+ <style type="text/css">
+
+html {
+ padding: 0;
+ border: 0;
+ margin: 0;
+ background: lime;
+}
+
+ </style>
+
+ <script type="text/javascript">
+
+var embedding_element;
+
+function handle_load(e)
+{
+ embedding_element = e.originalTarget.defaultView.frameElement;
+ embedding_element.ownerDocument.documentElement.removeAttribute('class');
+}
+
+ </script>
+
+ </head>
+ <body onload="handle_load(event);" style="display:none;"></body>
+</html>
diff --git a/layout/reftests/svg/sizing/dynamic--object-svg-unloaded.xhtml b/layout/reftests/svg/sizing/dynamic--object-svg-unloaded.xhtml
new file mode 100644
index 0000000000..6095e7cb18
--- /dev/null
+++ b/layout/reftests/svg/sizing/dynamic--object-svg-unloaded.xhtml
@@ -0,0 +1,48 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait">
+ <head>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: object should resize when SVG is unloaded</title>
+
+ <!--
+ This testcase checks that HTML <object> will resize correctly if it depends
+ on the intrinsic size of some embedded SVG, and then the SVG is replaced by
+ some other content (perhaps as a result of a link in the SVG being
+ clicked).
+ -->
+
+ <style type="text/css">
+
+html, body {
+ padding: 0;
+ border: 0;
+ margin: 0;
+ width: 100%;
+ height: 100%;
+ background: lime;
+}
+
+object {
+ background: red;
+ position: absolute;
+ left: 0;
+ top: 0;
+}
+
+ </style>
+ </head>
+ <body>
+
+ <div style="width:300px; height:150px; background:red;"></div>
+
+ <object data="dynamic--object-svg-unloaded-a.svg" type="image/svg+xml">
+ FAIL
+ </object>
+
+ </body>
+</html>
diff --git a/layout/reftests/svg/sizing/inline--display-block--01-ref.xhtml b/layout/reftests/svg/sizing/inline--display-block--01-ref.xhtml
new file mode 100644
index 0000000000..f258873729
--- /dev/null
+++ b/layout/reftests/svg/sizing/inline--display-block--01-ref.xhtml
@@ -0,0 +1,40 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Reference for test inline--display-block--01.xhtml</title>
+ <link rel="stylesheet" type="text/css" href="ahem.css" />
+
+ </head>
+ <body style="font: 10px/12px Ahem">
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+
+ <div style="width:51px; height:51px; background:blue; display:block; padding:0; border:1px solid blue; margin:0;">
+ </div>
+
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ </body>
+</html>
diff --git a/layout/reftests/svg/sizing/inline--display-block--01.xhtml b/layout/reftests/svg/sizing/inline--display-block--01.xhtml
new file mode 100644
index 0000000000..4b8cbe4266
--- /dev/null
+++ b/layout/reftests/svg/sizing/inline--display-block--01.xhtml
@@ -0,0 +1,47 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: display:block with width="51" height="51"</title>
+ <link rel="stylesheet" type="text/css" href="ahem.css" />
+
+ <!--
+ This testcase checks that SVG embedded inline with display:block is
+ positioned correctly.
+ -->
+
+ </head>
+ <body style="font: 10px/12px Ahem">
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+
+ <svg xmlns="http://www.w3.org/2000/svg" width="51" height="51"
+ style="display:block; padding:0; border:1px solid blue; margin:0;">
+ <rect width="100%" height="100%" fill="blue"/>
+ </svg>
+
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ </body>
+</html>
diff --git a/layout/reftests/svg/sizing/inline--display-inline--01-ref.xhtml b/layout/reftests/svg/sizing/inline--display-inline--01-ref.xhtml
new file mode 100644
index 0000000000..65cb6542ba
--- /dev/null
+++ b/layout/reftests/svg/sizing/inline--display-inline--01-ref.xhtml
@@ -0,0 +1,40 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Reference for test inline--display-inline--01.xhtml</title>
+ <link rel="stylesheet" type="text/css" href="ahem.css" />
+
+ </head>
+ <body style="font: 10px/12px Ahem">
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+
+ <img src="data:image/gif;base64,R0lGODlhAQABAPcAAAAAAIAAAACAAICAAAAAgIAAgACAgICAgMDAwP8AAAD%2FAP%2F%2FAAAA%2F%2F8A%2FwD%2F%2F%2F%2F%2F%2FwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMwAAZgAAmQAAzAAA%2FwAzAAAzMwAzZgAzmQAzzAAz%2FwBmAABmMwBmZgBmmQBmzABm%2FwCZAACZMwCZZgCZmQCZzACZ%2FwDMAADMMwDMZgDMmQDMzADM%2FwD%2FAAD%2FMwD%2FZgD%2FmQD%2FzAD%2F%2FzMAADMAMzMAZjMAmTMAzDMA%2FzMzADMzMzMzZjMzmTMzzDMz%2FzNmADNmMzNmZjNmmTNmzDNm%2FzOZADOZMzOZZjOZmTOZzDOZ%2FzPMADPMMzPMZjPMmTPMzDPM%2FzP%2FADP%2FMzP%2FZjP%2FmTP%2FzDP%2F%2F2YAAGYAM2YAZmYAmWYAzGYA%2F2YzAGYzM2YzZmYzmWYzzGYz%2F2ZmAGZmM2ZmZmZmmWZmzGZm%2F2aZAGaZM2aZZmaZmWaZzGaZ%2F2bMAGbMM2bMZmbMmWbMzGbM%2F2b%2FAGb%2FM2b%2FZmb%2FmWb%2FzGb%2F%2F5kAAJkAM5kAZpkAmZkAzJkA%2F5kzAJkzM5kzZpkzmZkzzJkz%2F5lmAJlmM5lmZplmmZlmzJlm%2F5mZAJmZM5mZZpmZmZmZzJmZ%2F5nMAJnMM5nMZpnMmZnMzJnM%2F5n%2FAJn%2FM5n%2FZpn%2FmZn%2FzJn%2F%2F8wAAMwAM8wAZswAmcwAzMwA%2F8wzAMwzM8wzZswzmcwzzMwz%2F8xmAMxmM8xmZsxmmcxmzMxm%2F8yZAMyZM8yZZsyZmcyZzMyZ%2F8zMAMzMM8zMZszMmczMzMzM%2F8z%2FAMz%2FM8z%2FZsz%2Fmcz%2FzMz%2F%2F%2F8AAP8AM%2F8AZv8Amf8AzP8A%2F%2F8zAP8zM%2F8zZv8zmf8zzP8z%2F%2F9mAP9mM%2F9mZv9mmf9mzP9m%2F%2F%2BZAP%2BZM%2F%2BZZv%2BZmf%2BZzP%2BZ%2F%2F%2FMAP%2FMM%2F%2FMZv%2FMmf%2FMzP%2FM%2F%2F%2F%2FAP%2F%2FM%2F%2F%2FZv%2F%2Fmf%2F%2FzP%2F%2F%2FywAAAAAAQABAAAIBAAZBAQAOw%3D%3D"
+ style="width:51px; height:51px; display:inline; padding:0; border:1px solid blue; margin:0;"/>
+
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ </body>
+</html>
diff --git a/layout/reftests/svg/sizing/inline--display-inline--01.xhtml b/layout/reftests/svg/sizing/inline--display-inline--01.xhtml
new file mode 100644
index 0000000000..5139f6e477
--- /dev/null
+++ b/layout/reftests/svg/sizing/inline--display-inline--01.xhtml
@@ -0,0 +1,47 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: display:inline with width="51" height="51"</title>
+ <link rel="stylesheet" type="text/css" href="ahem.css" />
+
+ <!--
+ This testcase checks that SVG embedded inline with display:inline is
+ positioned correctly.
+ -->
+
+ </head>
+ <body style="font: 10px/12px Ahem">
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+
+ <svg xmlns="http://www.w3.org/2000/svg" width="51" height="51"
+ style="display:inline; padding:0; border:1px solid blue; margin:0;">
+ <rect width="100%" height="100%" fill="blue"/>
+ </svg>
+
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ </body>
+</html>
diff --git a/layout/reftests/svg/sizing/inline--display-inline-block--01-ref.xhtml b/layout/reftests/svg/sizing/inline--display-inline-block--01-ref.xhtml
new file mode 100644
index 0000000000..93cb2d1ddf
--- /dev/null
+++ b/layout/reftests/svg/sizing/inline--display-inline-block--01-ref.xhtml
@@ -0,0 +1,40 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Reference for test inline--display-inline-block--01.xhtml</title>
+ <link rel="stylesheet" type="text/css" href="ahem.css" />
+
+ </head>
+ <body style="font: 10px/12px Ahem">
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+
+ <div style="width:51px; height:51px; background:blue; display:inline-block; padding:0; border:1px solid blue; margin:0;">
+ </div>
+
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ </body>
+</html>
diff --git a/layout/reftests/svg/sizing/inline--display-inline-block--01.xhtml b/layout/reftests/svg/sizing/inline--display-inline-block--01.xhtml
new file mode 100644
index 0000000000..f2f9a84812
--- /dev/null
+++ b/layout/reftests/svg/sizing/inline--display-inline-block--01.xhtml
@@ -0,0 +1,47 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: display:inline-block with width="51" height="51"</title>
+ <link rel="stylesheet" type="text/css" href="ahem.css" />
+
+ <!--
+ This testcase checks that SVG embedded inline with display:inline-block is
+ positioned correctly.
+ -->
+
+ </head>
+ <body style="font: 10px/12px Ahem">
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+
+ <svg xmlns="http://www.w3.org/2000/svg" width="51" height="51"
+ style="display:inline-block; padding:0; border:1px solid blue; margin:0;">
+ <rect width="100%" height="100%" fill="blue"/>
+ </svg>
+
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ </body>
+</html>
diff --git a/layout/reftests/svg/sizing/inline--float-left--01-ref.xhtml b/layout/reftests/svg/sizing/inline--float-left--01-ref.xhtml
new file mode 100644
index 0000000000..f46dc85919
--- /dev/null
+++ b/layout/reftests/svg/sizing/inline--float-left--01-ref.xhtml
@@ -0,0 +1,39 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Reference for test inline--float-left--01.xhtml</title>
+
+ </head>
+ <body>
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+
+ <div style="width:51px; height:51px; background:blue; float:left; padding:0; border:1px solid blue; margin:0;">
+ </div>
+
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ </body>
+</html>
diff --git a/layout/reftests/svg/sizing/inline--float-left--01.xhtml b/layout/reftests/svg/sizing/inline--float-left--01.xhtml
new file mode 100644
index 0000000000..f575db2e74
--- /dev/null
+++ b/layout/reftests/svg/sizing/inline--float-left--01.xhtml
@@ -0,0 +1,46 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: float:left with width="51" height="51"</title>
+
+ <!--
+ This testcase checks that SVG embedded inline with float:left is
+ positioned correctly.
+ -->
+
+ </head>
+ <body>
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+
+ <svg xmlns="http://www.w3.org/2000/svg" width="51" height="51"
+ style="float:left; padding:0; border:1px solid blue; margin:0;">
+ <rect width="100%" height="100%" fill="blue"/>
+ </svg>
+
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ </body>
+</html>
diff --git a/layout/reftests/svg/sizing/inline--float-right--01-ref.xhtml b/layout/reftests/svg/sizing/inline--float-right--01-ref.xhtml
new file mode 100644
index 0000000000..1803862f9e
--- /dev/null
+++ b/layout/reftests/svg/sizing/inline--float-right--01-ref.xhtml
@@ -0,0 +1,39 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Reference for test inline--float-right--01.xhtml</title>
+
+ </head>
+ <body>
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+
+ <div style="width:51px; height:51px; background:blue; float:right; padding:0; border:1px solid blue; margin:0;">
+ </div>
+
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ </body>
+</html>
diff --git a/layout/reftests/svg/sizing/inline--float-right--01.xhtml b/layout/reftests/svg/sizing/inline--float-right--01.xhtml
new file mode 100644
index 0000000000..1054c1b62f
--- /dev/null
+++ b/layout/reftests/svg/sizing/inline--float-right--01.xhtml
@@ -0,0 +1,46 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: float:right with width="51" height="51"</title>
+
+ <!--
+ This testcase checks that SVG embedded inline with float:right is
+ positioned correctly.
+ -->
+
+ </head>
+ <body>
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+
+ <svg xmlns="http://www.w3.org/2000/svg" width="51" height="51"
+ style="float:right; padding:0; border:1px solid blue; margin:0;">
+ <rect width="100%" height="100%" fill="blue"/>
+ </svg>
+
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ </body>
+</html>
diff --git a/layout/reftests/svg/sizing/inline--position-absolute--01-ref.xhtml b/layout/reftests/svg/sizing/inline--position-absolute--01-ref.xhtml
new file mode 100644
index 0000000000..24464c520a
--- /dev/null
+++ b/layout/reftests/svg/sizing/inline--position-absolute--01-ref.xhtml
@@ -0,0 +1,39 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Reference for test inline--position-absolute--01.xhtml</title>
+
+ </head>
+ <body>
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+
+ <div style="width:51px; height:51px; background:blue; position:absolute; top:51px; right:51px; padding:0; border:1px solid blue; margin:0;">
+ </div>
+
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ </body>
+</html>
diff --git a/layout/reftests/svg/sizing/inline--position-absolute--01.xhtml b/layout/reftests/svg/sizing/inline--position-absolute--01.xhtml
new file mode 100644
index 0000000000..370a9bc438
--- /dev/null
+++ b/layout/reftests/svg/sizing/inline--position-absolute--01.xhtml
@@ -0,0 +1,46 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: position:absolute with width="51" height="51"</title>
+
+ <!--
+ This testcase checks that SVG embedded inline with position:absolute is
+ positioned correctly.
+ -->
+
+ </head>
+ <body>
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+
+ <svg xmlns="http://www.w3.org/2000/svg" width="51" height="51"
+ style="position:absolute; top:51px; right:51px; padding:0; border:1px solid blue; margin:0;">
+ <rect width="100%" height="100%" fill="blue"/>
+ </svg>
+
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ </body>
+</html>
diff --git a/layout/reftests/svg/sizing/inline--position-absolute--02.xhtml b/layout/reftests/svg/sizing/inline--position-absolute--02.xhtml
new file mode 100644
index 0000000000..a9f7a2b7ed
--- /dev/null
+++ b/layout/reftests/svg/sizing/inline--position-absolute--02.xhtml
@@ -0,0 +1,50 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=342532 -->
+
+ <title>Test: percentage height on absolutely positioned SVG</title>
+
+ <!--
+ This testcase checks that percentage values for height on absolutely
+ positioned SVG will be computed relative to their containing block, and
+ not relative to the content area of the user agent.
+ -->
+
+ <style type="text/css">
+
+html, body {
+ padding: 0;
+ border: 0;
+ margin: 0;
+ height: 100%;
+ background: lime;
+}
+
+ </style>
+ </head>
+ <body>
+
+ <!-- create containing block for absolutely positioned children -->
+ <div style="position:relative;">
+
+ <!-- div to expand parent div to a computed height of 20px -->
+ <div style="height:20px; background:red;"/>
+
+ <!-- absolutely positioned SVG - the explicit 100% percentage height
+ should compute as a percentage of the parent div's computed height,
+ not as a percentage of the body's height! I.e. no red should show.
+ -->
+ <svg xmlns="http://www.w3.org/2000/svg" style="position:absolute; top:0; width: 100%; height: 100%">
+ <rect width="100%" height="100%" fill="red"/>
+ <rect width="100%" height="20px" fill="lime"/>
+ </svg>
+
+ </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/svg/sizing/inline--position-relative--01-ref.xhtml b/layout/reftests/svg/sizing/inline--position-relative--01-ref.xhtml
new file mode 100644
index 0000000000..dd7cff1e18
--- /dev/null
+++ b/layout/reftests/svg/sizing/inline--position-relative--01-ref.xhtml
@@ -0,0 +1,40 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Reference for test inline--position-relative--01.xhtml</title>
+ <link rel="stylesheet" type="text/css" href="ahem.css" />
+
+ </head>
+ <body style="font: 10px/12px Ahem">
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+
+ <img src="data:image/gif;base64,R0lGODlhAQABAPcAAAAAAIAAAACAAICAAAAAgIAAgACAgICAgMDAwP8AAAD%2FAP%2F%2FAAAA%2F%2F8A%2FwD%2F%2F%2F%2F%2F%2FwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMwAAZgAAmQAAzAAA%2FwAzAAAzMwAzZgAzmQAzzAAz%2FwBmAABmMwBmZgBmmQBmzABm%2FwCZAACZMwCZZgCZmQCZzACZ%2FwDMAADMMwDMZgDMmQDMzADM%2FwD%2FAAD%2FMwD%2FZgD%2FmQD%2FzAD%2F%2FzMAADMAMzMAZjMAmTMAzDMA%2FzMzADMzMzMzZjMzmTMzzDMz%2FzNmADNmMzNmZjNmmTNmzDNm%2FzOZADOZMzOZZjOZmTOZzDOZ%2FzPMADPMMzPMZjPMmTPMzDPM%2FzP%2FADP%2FMzP%2FZjP%2FmTP%2FzDP%2F%2F2YAAGYAM2YAZmYAmWYAzGYA%2F2YzAGYzM2YzZmYzmWYzzGYz%2F2ZmAGZmM2ZmZmZmmWZmzGZm%2F2aZAGaZM2aZZmaZmWaZzGaZ%2F2bMAGbMM2bMZmbMmWbMzGbM%2F2b%2FAGb%2FM2b%2FZmb%2FmWb%2FzGb%2F%2F5kAAJkAM5kAZpkAmZkAzJkA%2F5kzAJkzM5kzZpkzmZkzzJkz%2F5lmAJlmM5lmZplmmZlmzJlm%2F5mZAJmZM5mZZpmZmZmZzJmZ%2F5nMAJnMM5nMZpnMmZnMzJnM%2F5n%2FAJn%2FM5n%2FZpn%2FmZn%2FzJn%2F%2F8wAAMwAM8wAZswAmcwAzMwA%2F8wzAMwzM8wzZswzmcwzzMwz%2F8xmAMxmM8xmZsxmmcxmzMxm%2F8yZAMyZM8yZZsyZmcyZzMyZ%2F8zMAMzMM8zMZszMmczMzMzM%2F8z%2FAMz%2FM8z%2FZsz%2Fmcz%2FzMz%2F%2F%2F8AAP8AM%2F8AZv8Amf8AzP8A%2F%2F8zAP8zM%2F8zZv8zmf8zzP8z%2F%2F9mAP9mM%2F9mZv9mmf9mzP9m%2F%2F%2BZAP%2BZM%2F%2BZZv%2BZmf%2BZzP%2BZ%2F%2F%2FMAP%2FMM%2F%2FMZv%2FMmf%2FMzP%2FM%2F%2F%2F%2FAP%2F%2FM%2F%2F%2FZv%2F%2Fmf%2F%2FzP%2F%2F%2FywAAAAAAQABAAAIBAAZBAQAOw%3D%3D"
+ style="width:51px; height:51px; display:inline; position:relative; top:51px; right:51px; padding:0; border:1px solid blue; margin:0;"/>
+
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ </body>
+</html>
diff --git a/layout/reftests/svg/sizing/inline--position-relative--01.xhtml b/layout/reftests/svg/sizing/inline--position-relative--01.xhtml
new file mode 100644
index 0000000000..0e4c334fd1
--- /dev/null
+++ b/layout/reftests/svg/sizing/inline--position-relative--01.xhtml
@@ -0,0 +1,47 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: position:relative with width="51" height="51"</title>
+ <link rel="stylesheet" type="text/css" href="ahem.css" />
+
+ <!--
+ This testcase checks that SVG embedded inline with position:relative is
+ positioned correctly.
+ -->
+
+ </head>
+ <body style="font: 10px/12px Ahem">
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+
+ <svg xmlns="http://www.w3.org/2000/svg" width="51" height="51"
+ style="position:relative; top:51px; right:51px; padding:0; border:1px solid blue; margin:0;">
+ <rect width="100%" height="100%" fill="blue"/>
+ </svg>
+
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ </body>
+</html>
diff --git a/layout/reftests/svg/sizing/object--auto-auto--0-0.html b/layout/reftests/svg/sizing/object--auto-auto--0-0.html
new file mode 100644
index 0000000000..4601a0c37a
--- /dev/null
+++ b/layout/reftests/svg/sizing/object--auto-auto--0-0.html
@@ -0,0 +1,42 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:auto; width="0" height="0"</title>
+
+ <!--
+ This testcase checks that the <object> element uses the intrinsic width and
+ height of the embedded SVG. Since the intrinsic width and height are both
+ zero, you should not see any red when viewing this file.
+ -->
+
+ <style type="text/css">
+
+html, body {
+ padding: 0;
+ border: 0;
+ margin: 0;
+ width: 100%;
+ height: 100%;
+}
+
+object {
+ padding: 0;
+ border: 0;
+ margin: 50px;
+ background: red;
+}
+
+ </style>
+ </head>
+ <body>
+ <object data="object--auto-auto--0-0.svg" type="image/svg+xml">
+ FAIL
+ </object>
+ </body>
+</html>
diff --git a/layout/reftests/svg/sizing/object--auto-auto--0-0.svg b/layout/reftests/svg/sizing/object--auto-auto--0-0.svg
new file mode 100644
index 0000000000..fa0eddd82c
--- /dev/null
+++ b/layout/reftests/svg/sizing/object--auto-auto--0-0.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" version="1.1" width="0" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>SVG embedded by reference by object--auto-auto--0-0.html</title>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/object--auto-auto--0-pct--ref.html b/layout/reftests/svg/sizing/object--auto-auto--0-pct--ref.html
new file mode 100644
index 0000000000..1dff62fda5
--- /dev/null
+++ b/layout/reftests/svg/sizing/object--auto-auto--0-pct--ref.html
@@ -0,0 +1,37 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Reference for test object--auto-auto--0-pct.html</title>
+
+ <style type="text/css">
+
+html, body {
+ padding: 0;
+ border: 0;
+ margin: 0;
+ width: 100%;
+ height: 100%;
+ /* XXX Not sure why we get scrolling with 'div' but not 'object'. */
+ overflow: hidden;
+}
+
+div {
+ padding: 0;
+ border: 1px solid blue;
+ margin: 50px;
+ width: 0;
+ height: 150px;
+}
+
+ </style>
+ </head>
+ <body>
+ <div></div>
+ </body>
+</html>
diff --git a/layout/reftests/svg/sizing/object--auto-auto--0-pct.html b/layout/reftests/svg/sizing/object--auto-auto--0-pct.html
new file mode 100644
index 0000000000..92e266e5fd
--- /dev/null
+++ b/layout/reftests/svg/sizing/object--auto-auto--0-pct.html
@@ -0,0 +1,44 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:auto; width="0" height="49%"</title>
+
+ <!--
+ This testcase checks that the <object> element uses the intrinsic
+ width of the embedded SVG but ignores the (percentage) height.
+ Since the intrinsic width is zero, you should see a 1px blue border
+ around rectangle 0px wide by 150px high when viewing this file. You
+ should not see any red.
+ -->
+
+ <style type="text/css">
+
+html, body {
+ padding: 0;
+ border: 0;
+ margin: 0;
+ width: 100%;
+ height: 100%;
+}
+
+object {
+ padding: 0;
+ border: 1px solid blue;
+ margin: 50px;
+ background: red;
+}
+
+ </style>
+ </head>
+ <body>
+ <object data="object--auto-auto--0-pct.svg" type="image/svg+xml">
+ FAIL
+ </object>
+ </body>
+</html>
diff --git a/layout/reftests/svg/sizing/object--auto-auto--0-pct.svg b/layout/reftests/svg/sizing/object--auto-auto--0-pct.svg
new file mode 100644
index 0000000000..e955c400f0
--- /dev/null
+++ b/layout/reftests/svg/sizing/object--auto-auto--0-pct.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" version="1.1" width="0" height="49%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>SVG embedded by reference by object--auto-auto--0-pct.html</title>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/object--auto-auto--0-px--ref.html b/layout/reftests/svg/sizing/object--auto-auto--0-px--ref.html
new file mode 100644
index 0000000000..5c44bf52b6
--- /dev/null
+++ b/layout/reftests/svg/sizing/object--auto-auto--0-px--ref.html
@@ -0,0 +1,37 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Reference for test object--auto-auto--0-px.html</title>
+
+ <style type="text/css">
+
+html, body {
+ padding: 0;
+ border: 0;
+ margin: 0;
+ width: 100%;
+ height: 100%;
+ /* XXX Not sure why we get scrolling with 'div' but not 'object'. */
+ overflow: hidden;
+}
+
+div {
+ padding: 0;
+ border: 1px solid blue;
+ margin: 50px;
+ width: 0;
+ height: 70px;
+}
+
+ </style>
+ </head>
+ <body>
+ <div></div>
+ </body>
+</html>
diff --git a/layout/reftests/svg/sizing/object--auto-auto--0-px.html b/layout/reftests/svg/sizing/object--auto-auto--0-px.html
new file mode 100644
index 0000000000..ec0d8d694e
--- /dev/null
+++ b/layout/reftests/svg/sizing/object--auto-auto--0-px.html
@@ -0,0 +1,44 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:auto; width="0" height="70px"</title>
+
+ <!--
+ This testcase checks that the <object> element uses the intrinsic width and
+ height of the embedded SVG. Since the intrinsic width is zero and the
+ intrinsic height is 70px, you should see a 1px blue border around a
+ rectangle 0px wide by 70px high when viewing this file. You should not see
+ any red.
+ -->
+
+ <style type="text/css">
+
+html, body {
+ padding: 0;
+ border: 0;
+ margin: 0;
+ width: 100%;
+ height: 100%;
+}
+
+object {
+ padding: 0;
+ border: 1px solid blue;
+ margin: 50px;
+ background: red;
+}
+
+ </style>
+ </head>
+ <body>
+ <object data="object--auto-auto--0-px.svg" type="image/svg+xml">
+ FAIL
+ </object>
+ </body>
+</html>
diff --git a/layout/reftests/svg/sizing/object--auto-auto--0-px.svg b/layout/reftests/svg/sizing/object--auto-auto--0-px.svg
new file mode 100644
index 0000000000..0b4b0984d4
--- /dev/null
+++ b/layout/reftests/svg/sizing/object--auto-auto--0-px.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" version="1.1" width="0" height="70">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>SVG embedded by reference by object--auto-auto--0-px.html</title>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/object--auto-auto--pct-0--ref.html b/layout/reftests/svg/sizing/object--auto-auto--pct-0--ref.html
new file mode 100644
index 0000000000..257ff52684
--- /dev/null
+++ b/layout/reftests/svg/sizing/object--auto-auto--pct-0--ref.html
@@ -0,0 +1,37 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Reference for test object--auto-auto--pct-0.html</title>
+
+ <style type="text/css">
+
+html, body {
+ padding: 0;
+ border: 0;
+ margin: 0;
+ width: 100%;
+ height: 100%;
+ /* XXX Not sure why we get scrolling with 'div' but not 'object'. */
+ overflow: hidden;
+}
+
+div {
+ padding: 0;
+ border: 1px solid blue;
+ margin: 50px;
+ width: 300px;
+ height: 0;
+}
+
+ </style>
+ </head>
+ <body>
+ <div></div>
+ </body>
+</html>
diff --git a/layout/reftests/svg/sizing/object--auto-auto--pct-0.html b/layout/reftests/svg/sizing/object--auto-auto--pct-0.html
new file mode 100644
index 0000000000..231d4e4b3c
--- /dev/null
+++ b/layout/reftests/svg/sizing/object--auto-auto--pct-0.html
@@ -0,0 +1,44 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:auto; width="49%" height="0"</title>
+
+ <!--
+ This testcase checks that the <object> element uses the intrinsic
+ height of the embedded SVG, but ignores the percentage intrinsic
+ width. Since the intrinsic height is zero, you should see a 1px blue
+ border around a rectangle 300px wide by 0px high when viewing this
+ file. You should not see any red.
+ -->
+
+ <style type="text/css">
+
+html, body {
+ padding: 0;
+ border: 0;
+ margin: 0;
+ width: 100%;
+ height: 100%;
+}
+
+object {
+ padding: 0;
+ border: 1px solid blue;
+ margin: 50px;
+ background: red;
+}
+
+ </style>
+ </head>
+ <body>
+ <object data="object--auto-auto--pct-0.svg" type="image/svg+xml">
+ FAIL
+ </object>
+ </body>
+</html>
diff --git a/layout/reftests/svg/sizing/object--auto-auto--pct-0.svg b/layout/reftests/svg/sizing/object--auto-auto--pct-0.svg
new file mode 100644
index 0000000000..d460c2fa69
--- /dev/null
+++ b/layout/reftests/svg/sizing/object--auto-auto--pct-0.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" version="1.1" width="49%" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>SVG embedded by reference by object--auto-auto--pct-0.html</title>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/object--auto-auto--pct-pct--ref.html b/layout/reftests/svg/sizing/object--auto-auto--pct-pct--ref.html
new file mode 100644
index 0000000000..8e9ae6f878
--- /dev/null
+++ b/layout/reftests/svg/sizing/object--auto-auto--pct-pct--ref.html
@@ -0,0 +1,38 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Reference for test object--auto-auto--pct-pct.html</title>
+
+ <style type="text/css">
+
+html, body {
+ padding: 0;
+ border: 0;
+ margin: 0;
+ width: 100%;
+ height: 100%;
+ /* XXX Not sure why we get scrolling with 'div' but not 'object'. */
+ overflow: hidden;
+}
+
+div {
+ padding: 0;
+ border: 0;
+ margin: 50px;
+ width: 49%;
+ height: 49%;
+ background: blue;
+}
+
+ </style>
+ </head>
+ <body>
+ <div></div>
+ </body>
+</html>
diff --git a/layout/reftests/svg/sizing/object--auto-auto--pct-pct.html b/layout/reftests/svg/sizing/object--auto-auto--pct-pct.html
new file mode 100644
index 0000000000..3d05e12c41
--- /dev/null
+++ b/layout/reftests/svg/sizing/object--auto-auto--pct-pct.html
@@ -0,0 +1,42 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:auto; width="49%" height="49%"</title>
+
+ <!--
+ This testcase checks that the <object> element uses the intrinsic width and
+ height of the embedded SVG. Since the intrinsic width and height are both
+ 49%, you should see a blue rectangle 49% wide by 49% high when viewing this
+ file. You should not see any red.
+ -->
+
+ <style type="text/css">
+
+html, body {
+ padding: 0;
+ border: 0;
+ margin: 0;
+ width: 100%;
+ height: 100%;
+}
+
+object {
+ padding: 0;
+ margin: 50px;
+ background: red;
+}
+
+ </style>
+ </head>
+ <body>
+ <object data="object--auto-auto--pct-pct.svg" type="image/svg+xml">
+ FAIL
+ </object>
+ </body>
+</html>
diff --git a/layout/reftests/svg/sizing/object--auto-auto--pct-pct.svg b/layout/reftests/svg/sizing/object--auto-auto--pct-pct.svg
new file mode 100644
index 0000000000..c96b04a738
--- /dev/null
+++ b/layout/reftests/svg/sizing/object--auto-auto--pct-pct.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" version="1.1" width="49%" height="49%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>SVG embedded by reference by object--auto-auto--pct-pct.html</title>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/object--auto-auto--pct-px--ref.html b/layout/reftests/svg/sizing/object--auto-auto--pct-px--ref.html
new file mode 100644
index 0000000000..af3fa39a7d
--- /dev/null
+++ b/layout/reftests/svg/sizing/object--auto-auto--pct-px--ref.html
@@ -0,0 +1,38 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Reference for test object--auto-auto--pct-px.html</title>
+
+ <style type="text/css">
+
+html, body {
+ padding: 0;
+ border: 0;
+ margin: 0;
+ width: 100%;
+ height: 100%;
+ /* XXX Not sure why we get scrolling with 'div' but not 'object'. */
+ overflow: hidden;
+}
+
+div {
+ padding: 0;
+ border: 0;
+ margin: 50px;
+ width: 49%;
+ height: 70px;
+ background: blue;
+}
+
+ </style>
+ </head>
+ <body>
+ <div></div>
+ </body>
+</html>
diff --git a/layout/reftests/svg/sizing/object--auto-auto--pct-px.html b/layout/reftests/svg/sizing/object--auto-auto--pct-px.html
new file mode 100644
index 0000000000..d711e1bda1
--- /dev/null
+++ b/layout/reftests/svg/sizing/object--auto-auto--pct-px.html
@@ -0,0 +1,42 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:auto; width="49%" height="70px"</title>
+
+ <!--
+ This testcase checks that the <object> element uses the intrinsic width and
+ height of the embedded SVG. Since the intrinsic width is 49% and the
+ intrinsic height is 70px, you should see a blue rectangle 49% wide by 70px
+ high when viewing this file. You should not see any red.
+ -->
+
+ <style type="text/css">
+
+html, body {
+ padding: 0;
+ border: 0;
+ margin: 0;
+ width: 100%;
+ height: 100%;
+}
+
+object {
+ padding: 0;
+ margin: 50px;
+ background: red;
+}
+
+ </style>
+ </head>
+ <body>
+ <object data="object--auto-auto--pct-px.svg" type="image/svg+xml">
+ FAIL
+ </object>
+ </body>
+</html>
diff --git a/layout/reftests/svg/sizing/object--auto-auto--pct-px.svg b/layout/reftests/svg/sizing/object--auto-auto--pct-px.svg
new file mode 100644
index 0000000000..41fe8bd1d7
--- /dev/null
+++ b/layout/reftests/svg/sizing/object--auto-auto--pct-px.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" version="1.1" width="49%" height="70">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>SVG embedded by reference by object--auto-auto--pct-px.html</title>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/object--auto-auto--px-0--ref.html b/layout/reftests/svg/sizing/object--auto-auto--px-0--ref.html
new file mode 100644
index 0000000000..19a3ac08a6
--- /dev/null
+++ b/layout/reftests/svg/sizing/object--auto-auto--px-0--ref.html
@@ -0,0 +1,37 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Reference for test object--auto-auto--px-0.html</title>
+
+ <style type="text/css">
+
+html, body {
+ padding: 0;
+ border: 0;
+ margin: 0;
+ width: 100%;
+ height: 100%;
+ /* XXX Not sure why we get scrolling with 'div' but not 'object'. */
+ overflow: hidden;
+}
+
+div {
+ padding: 0;
+ border: 1px solid blue;
+ margin: 50px;
+ width: 70px;
+ height: 0;
+}
+
+ </style>
+ </head>
+ <body>
+ <div></div>
+ </body>
+</html>
diff --git a/layout/reftests/svg/sizing/object--auto-auto--px-0.html b/layout/reftests/svg/sizing/object--auto-auto--px-0.html
new file mode 100644
index 0000000000..9bdd4ed4a1
--- /dev/null
+++ b/layout/reftests/svg/sizing/object--auto-auto--px-0.html
@@ -0,0 +1,42 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:auto; width="70px" height="0"</title>
+
+ <!--
+ This testcase checks that the <object> element uses the intrinsic width and
+ height of the embedded SVG. Since the intrinsic width is 70px and the
+ intrinsic height is zero, you should see a 1px blue border around a
+ rectangle 70px wide by 0px high when viewing this file. You should not see
+ any red.
+ -->
+
+ <style type="text/css">
+
+html, body {
+ padding: 0;
+ border: 0;
+ margin: 0;
+}
+
+object {
+ padding: 0;
+ border: 1px solid blue;
+ margin: 50px;
+ background: red;
+}
+
+ </style>
+ </head>
+ <body>
+ <object data="object--auto-auto--px-0.svg" type="image/svg+xml">
+ FAIL
+ </object>
+ </body>
+</html>
diff --git a/layout/reftests/svg/sizing/object--auto-auto--px-0.svg b/layout/reftests/svg/sizing/object--auto-auto--px-0.svg
new file mode 100644
index 0000000000..9e0c2b1cf7
--- /dev/null
+++ b/layout/reftests/svg/sizing/object--auto-auto--px-0.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" version="1.1" width="70" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>SVG embedded by reference by object--auto-auto--px-0.html</title>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/object--auto-auto--px-pct--ref.html b/layout/reftests/svg/sizing/object--auto-auto--px-pct--ref.html
new file mode 100644
index 0000000000..7464351dd5
--- /dev/null
+++ b/layout/reftests/svg/sizing/object--auto-auto--px-pct--ref.html
@@ -0,0 +1,38 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Reference for test object--auto-auto--px-pct.html</title>
+
+ <style type="text/css">
+
+html, body {
+ padding: 0;
+ border: 0;
+ margin: 0;
+ width: 100%;
+ height: 100%;
+ /* XXX Not sure why we get scrolling with 'div' but not 'object'. */
+ overflow: hidden;
+}
+
+div {
+ padding: 0;
+ border: 0;
+ margin: 50px;
+ width: 70px;
+ height: 49%;
+ background: blue;
+}
+
+ </style>
+ </head>
+ <body>
+ <div></div>
+ </body>
+</html>
diff --git a/layout/reftests/svg/sizing/object--auto-auto--px-pct.html b/layout/reftests/svg/sizing/object--auto-auto--px-pct.html
new file mode 100644
index 0000000000..3d1591077e
--- /dev/null
+++ b/layout/reftests/svg/sizing/object--auto-auto--px-pct.html
@@ -0,0 +1,42 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:auto; width="70px" height="49%"</title>
+
+ <!--
+ This testcase checks that the <object> element uses the intrinsic width and
+ height of the embedded SVG. Since the intrinsic width is 70px and the
+ intrinsic height is 49%, you should see a blue rectangle 70px wide by 49%
+ high when viewing this file. You should not see any red.
+ -->
+
+ <style type="text/css">
+
+html, body {
+ padding: 0;
+ border: 0;
+ margin: 0;
+ width: 100%;
+ height: 100%;
+}
+
+object {
+ padding: 0;
+ margin: 50px;
+ background: red;
+}
+
+ </style>
+ </head>
+ <body>
+ <object data="object--auto-auto--px-pct.svg" type="image/svg+xml">
+ FAIL
+ </object>
+ </body>
+</html>
diff --git a/layout/reftests/svg/sizing/object--auto-auto--px-pct.svg b/layout/reftests/svg/sizing/object--auto-auto--px-pct.svg
new file mode 100644
index 0000000000..b409562ac3
--- /dev/null
+++ b/layout/reftests/svg/sizing/object--auto-auto--px-pct.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" version="1.1" width="70" height="49%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>SVG embedded by reference by object--auto-auto--px-pct.html</title>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/object--auto-auto--px-px--ref.html b/layout/reftests/svg/sizing/object--auto-auto--px-px--ref.html
new file mode 100644
index 0000000000..8f7b4ff769
--- /dev/null
+++ b/layout/reftests/svg/sizing/object--auto-auto--px-px--ref.html
@@ -0,0 +1,38 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Reference for test object--auto-auto--px-px.html</title>
+
+ <style type="text/css">
+
+html, body {
+ padding: 0;
+ border: 0;
+ margin: 0;
+ width: 100%;
+ height: 100%;
+ /* XXX Not sure why we get scrolling with 'div' but not 'object'. */
+ overflow: hidden;
+}
+
+div {
+ padding: 0;
+ border: 0;
+ margin: 50px;
+ width: 70px;
+ height: 70px;
+ background: blue;
+}
+
+ </style>
+ </head>
+ <body>
+ <div></div>
+ </body>
+</html>
diff --git a/layout/reftests/svg/sizing/object--auto-auto--px-px.html b/layout/reftests/svg/sizing/object--auto-auto--px-px.html
new file mode 100644
index 0000000000..7cb3011b4a
--- /dev/null
+++ b/layout/reftests/svg/sizing/object--auto-auto--px-px.html
@@ -0,0 +1,42 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:auto; width="70px" height="70px"</title>
+
+ <!--
+ This testcase checks that the <object> element uses the intrinsic width and
+ height of the embedded SVG. Since the intrinsic width is 70px and the
+ intrinsic height is 70px, you should see a blue rectangle 70px wide by 70px
+ high when viewing this file. You should not see any red.
+ -->
+
+ <style type="text/css">
+
+html, body {
+ padding: 0;
+ border: 0;
+ margin: 0;
+ width: 100%;
+ height: 100%;
+}
+
+object {
+ padding: 0;
+ margin: 50px;
+ background: red;
+}
+
+ </style>
+ </head>
+ <body>
+ <object data="object--auto-auto--px-px.svg" type="image/svg+xml">
+ FAIL
+ </object>
+ </body>
+</html>
diff --git a/layout/reftests/svg/sizing/object--auto-auto--px-px.svg b/layout/reftests/svg/sizing/object--auto-auto--px-px.svg
new file mode 100644
index 0000000000..6721898076
--- /dev/null
+++ b/layout/reftests/svg/sizing/object--auto-auto--px-px.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" version="1.1" width="70" height="70">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>SVG embedded by reference by object--auto-auto--px-px.html</title>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/object--pct-pct--0-0.html b/layout/reftests/svg/sizing/object--pct-pct--0-0.html
new file mode 100644
index 0000000000..22b287df62
--- /dev/null
+++ b/layout/reftests/svg/sizing/object--pct-pct--0-0.html
@@ -0,0 +1,30 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+ <head>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=288276 -->
+
+ <title>Test: the width/height of SVG embedded by reference must be overridden</title>
+
+ <style type="text/css">
+
+* {
+ padding: 0;
+ border: 0;
+ margin: 0;
+ width: 100%;
+ height: 100%;
+ background: red;
+}
+
+ </style>
+
+ </head>
+ <body>
+ <!-- embedded SVG has width="0" height="0" which should be overridden -->
+ <object type="image/svg+xml" data="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIwIiBoZWlnaHQ9IjAiPg0KICA8cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJsaW1lIi8%2BDQo8L3N2Zz4%3D">FAILED TO LOAD</object>
+ </body>
+</html>
diff --git a/layout/reftests/svg/sizing/pass-empty.svg b/layout/reftests/svg/sizing/pass-empty.svg
new file mode 100644
index 0000000000..67be674dc3
--- /dev/null
+++ b/layout/reftests/svg/sizing/pass-empty.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>Reference SVG for comparisons</title>
+ <!-- empty -->
+</svg>
diff --git a/layout/reftests/svg/sizing/pass-pct-height-square.xhtml b/layout/reftests/svg/sizing/pass-pct-height-square.xhtml
new file mode 100644
index 0000000000..ac6a60d1b4
--- /dev/null
+++ b/layout/reftests/svg/sizing/pass-pct-height-square.xhtml
@@ -0,0 +1,26 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>Reference file for comparisons</title>
+ <style type="text/css">
+
+* {
+ padding: 0;
+ border: 0;
+ margin: 0;
+}
+
+html, body {
+ height: 100%;
+}
+
+ </style>
+ </head>
+ <body>
+ <img src="data:image/gif;base64,R0lGODlhAQABAPcAAAAAAIAAAACAAICAAAAAgIAAgACAgICAgMDAwP8AAAD%2FAP%2F%2FAAAA%2F%2F8A%2FwD%2F%2F%2F%2F%2F%2FwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMwAAZgAAmQAAzAAA%2FwAzAAAzMwAzZgAzmQAzzAAz%2FwBmAABmMwBmZgBmmQBmzABm%2FwCZAACZMwCZZgCZmQCZzACZ%2FwDMAADMMwDMZgDMmQDMzADM%2FwD%2FAAD%2FMwD%2FZgD%2FmQD%2FzAD%2F%2FzMAADMAMzMAZjMAmTMAzDMA%2FzMzADMzMzMzZjMzmTMzzDMz%2FzNmADNmMzNmZjNmmTNmzDNm%2FzOZADOZMzOZZjOZmTOZzDOZ%2FzPMADPMMzPMZjPMmTPMzDPM%2FzP%2FADP%2FMzP%2FZjP%2FmTP%2FzDP%2F%2F2YAAGYAM2YAZmYAmWYAzGYA%2F2YzAGYzM2YzZmYzmWYzzGYz%2F2ZmAGZmM2ZmZmZmmWZmzGZm%2F2aZAGaZM2aZZmaZmWaZzGaZ%2F2bMAGbMM2bMZmbMmWbMzGbM%2F2b%2FAGb%2FM2b%2FZmb%2FmWb%2FzGb%2F%2F5kAAJkAM5kAZpkAmZkAzJkA%2F5kzAJkzM5kzZpkzmZkzzJkz%2F5lmAJlmM5lmZplmmZlmzJlm%2F5mZAJmZM5mZZpmZmZmZzJmZ%2F5nMAJnMM5nMZpnMmZnMzJnM%2F5n%2FAJn%2FM5n%2FZpn%2FmZn%2FzJn%2F%2F8wAAMwAM8wAZswAmcwAzMwA%2F8wzAMwzM8wzZswzmcwzzMwz%2F8xmAMxmM8xmZsxmmcxmzMxm%2F8yZAMyZM8yZZsyZmcyZzMyZ%2F8zMAMzMM8zMZszMmczMzMzM%2F8z%2FAMz%2FM8z%2FZsz%2Fmcz%2FzMz%2F%2F%2F8AAP8AM%2F8AZv8Amf8AzP8A%2F%2F8zAP8zM%2F8zZv8zmf8zzP8z%2F%2F9mAP9mM%2F9mZv9mmf9mzP9m%2F%2F%2BZAP%2BZM%2F%2BZZv%2BZmf%2BZzP%2BZ%2F%2F%2FMAP%2FMM%2F%2FMZv%2FMmf%2FMzP%2FM%2F%2F%2F%2FAP%2F%2FM%2F%2F%2FZv%2F%2Fmf%2F%2FzP%2F%2F%2FywAAAAAAQABAAAIBAAZBAQAOw%3D%3D"
+ style="height:49%;"/>
+ </body>
+</html>
diff --git a/layout/reftests/svg/sizing/pass-pct-pct.xhtml b/layout/reftests/svg/sizing/pass-pct-pct.xhtml
new file mode 100644
index 0000000000..e53d3e5fda
--- /dev/null
+++ b/layout/reftests/svg/sizing/pass-pct-pct.xhtml
@@ -0,0 +1,30 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>Reference file for comparisons</title>
+ <style type="text/css">
+
+* {
+ padding: 0;
+ border: 0;
+ margin: 0;
+}
+
+html, body {
+ width: 100%;
+ height: 100%;
+}
+
+div {
+ width: 49%;
+ height: 49%;
+ background: blue;
+}
+
+ </style>
+ </head>
+ <body><div></div></body>
+</html>
diff --git a/layout/reftests/svg/sizing/pass-pct-px.xhtml b/layout/reftests/svg/sizing/pass-pct-px.xhtml
new file mode 100644
index 0000000000..e1f5b4f7ae
--- /dev/null
+++ b/layout/reftests/svg/sizing/pass-pct-px.xhtml
@@ -0,0 +1,30 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>Reference file for comparisons</title>
+ <style type="text/css">
+
+* {
+ padding: 0;
+ border: 0;
+ margin: 0;
+}
+
+html, body {
+ width: 100%;
+ height: 100%;
+}
+
+div {
+ width: 49%;
+ height: 70px;
+ background: blue;
+}
+
+ </style>
+ </head>
+ <body><div></div></body>
+</html>
diff --git a/layout/reftests/svg/sizing/pass-pct-width-square.xhtml b/layout/reftests/svg/sizing/pass-pct-width-square.xhtml
new file mode 100644
index 0000000000..e257bde4aa
--- /dev/null
+++ b/layout/reftests/svg/sizing/pass-pct-width-square.xhtml
@@ -0,0 +1,22 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>Reference file for comparisons</title>
+ <style type="text/css">
+
+* {
+ padding: 0;
+ border: 0;
+ margin: 0;
+}
+
+ </style>
+ </head>
+ <body>
+ <img src="data:image/gif;base64,R0lGODlhAQABAPcAAAAAAIAAAACAAICAAAAAgIAAgACAgICAgMDAwP8AAAD%2FAP%2F%2FAAAA%2F%2F8A%2FwD%2F%2F%2F%2F%2F%2FwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMwAAZgAAmQAAzAAA%2FwAzAAAzMwAzZgAzmQAzzAAz%2FwBmAABmMwBmZgBmmQBmzABm%2FwCZAACZMwCZZgCZmQCZzACZ%2FwDMAADMMwDMZgDMmQDMzADM%2FwD%2FAAD%2FMwD%2FZgD%2FmQD%2FzAD%2F%2FzMAADMAMzMAZjMAmTMAzDMA%2FzMzADMzMzMzZjMzmTMzzDMz%2FzNmADNmMzNmZjNmmTNmzDNm%2FzOZADOZMzOZZjOZmTOZzDOZ%2FzPMADPMMzPMZjPMmTPMzDPM%2FzP%2FADP%2FMzP%2FZjP%2FmTP%2FzDP%2F%2F2YAAGYAM2YAZmYAmWYAzGYA%2F2YzAGYzM2YzZmYzmWYzzGYz%2F2ZmAGZmM2ZmZmZmmWZmzGZm%2F2aZAGaZM2aZZmaZmWaZzGaZ%2F2bMAGbMM2bMZmbMmWbMzGbM%2F2b%2FAGb%2FM2b%2FZmb%2FmWb%2FzGb%2F%2F5kAAJkAM5kAZpkAmZkAzJkA%2F5kzAJkzM5kzZpkzmZkzzJkz%2F5lmAJlmM5lmZplmmZlmzJlm%2F5mZAJmZM5mZZpmZmZmZzJmZ%2F5nMAJnMM5nMZpnMmZnMzJnM%2F5n%2FAJn%2FM5n%2FZpn%2FmZn%2FzJn%2F%2F8wAAMwAM8wAZswAmcwAzMwA%2F8wzAMwzM8wzZswzmcwzzMwz%2F8xmAMxmM8xmZsxmmcxmzMxm%2F8yZAMyZM8yZZsyZmcyZzMyZ%2F8zMAMzMM8zMZszMmczMzMzM%2F8z%2FAMz%2FM8z%2FZsz%2Fmcz%2FzMz%2F%2F%2F8AAP8AM%2F8AZv8Amf8AzP8A%2F%2F8zAP8zM%2F8zZv8zmf8zzP8z%2F%2F9mAP9mM%2F9mZv9mmf9mzP9m%2F%2F%2BZAP%2BZM%2F%2BZZv%2BZmf%2BZzP%2BZ%2F%2F%2FMAP%2FMM%2F%2FMZv%2FMmf%2FMzP%2FM%2F%2F%2F%2FAP%2F%2FM%2F%2F%2FZv%2F%2Fmf%2F%2FzP%2F%2F%2FywAAAAAAQABAAAIBAAZBAQAOw%3D%3D"
+ style="width:49%;"/>
+ </body>
+</html>
diff --git a/layout/reftests/svg/sizing/pass-px-pct.xhtml b/layout/reftests/svg/sizing/pass-px-pct.xhtml
new file mode 100644
index 0000000000..73f92e2adc
--- /dev/null
+++ b/layout/reftests/svg/sizing/pass-px-pct.xhtml
@@ -0,0 +1,30 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>Reference file for comparisons</title>
+ <style type="text/css">
+
+* {
+ padding: 0;
+ border: 0;
+ margin: 0;
+}
+
+html, body {
+ width: 100%;
+ height: 100%;
+}
+
+div {
+ width: 70px;
+ height: 49%;
+ background: blue;
+}
+
+ </style>
+ </head>
+ <body><div></div></body>
+</html>
diff --git a/layout/reftests/svg/sizing/pass-px-px.xhtml b/layout/reftests/svg/sizing/pass-px-px.xhtml
new file mode 100644
index 0000000000..5e2f598d53
--- /dev/null
+++ b/layout/reftests/svg/sizing/pass-px-px.xhtml
@@ -0,0 +1,30 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>Reference file for comparisons</title>
+ <style type="text/css">
+
+* {
+ padding: 0;
+ border: 0;
+ margin: 0;
+}
+
+html, body {
+ width: 100%;
+ height: 100%;
+}
+
+div {
+ width: 70px;
+ height: 70px;
+ background: blue;
+}
+
+ </style>
+ </head>
+ <body><div></div></body>
+</html>
diff --git a/layout/reftests/svg/sizing/pass.svg b/layout/reftests/svg/sizing/pass.svg
new file mode 100644
index 0000000000..c09c6601e8
--- /dev/null
+++ b/layout/reftests/svg/sizing/pass.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/sizing/reftest.list b/layout/reftests/svg/sizing/reftest.list
new file mode 100644
index 0000000000..4437da4299
--- /dev/null
+++ b/layout/reftests/svg/sizing/reftest.list
@@ -0,0 +1,311 @@
+
+# This directory contains tests that test the sizing of the SVG viewport into
+# which SVG is rendered. It includes tests for standalone SVG, SVG embedded by
+# reference using the HTML <object> element, and SVG rendered inline within
+# XHTML.
+#
+# SVG's <svg> element is a "replaced element". The main specification texts
+# covering how the <svg> element is sized are:
+#
+# http://www.w3.org/TR/SVGMobile12/coords.html#InitialViewport
+# http://www.w3.org/TR/SVGMobile12/coords.html#IntrinsicSizing
+# http://www.w3.org/TR/CSS21/visudet.html
+
+!= scrollbars-01.svg scrollbars-01-anti-ref.svg
+!= scrollbars-02.svg scrollbars-01-anti-ref.svg
+
+# Standalone tests
+#
+# To get reasonable test coverage of the implementation of the replaced element
+# algorythm we test all permutations of the CSS 'width' and 'height' properties
+# having the values zero, auto, a px value or a percentage value, and of the
+# intrinsic width and height (the 'width' and 'height' attributes) having the
+# values zero, a px value or a percentage value. This gives us 4*4*3*3 == 144
+# tests. On top of that, there are 12 cases from the 144 permutations for which
+# the 'viewBox' attribute should have an affect (see below).
+#
+# In the file names for the standalone tests that follow, the first two fields
+# denote the type of value specified for the CSS 'width' and 'height'
+# properties, and the third and four fields denote the type of value used for
+# the intrinsic width and height (i.e. the 'width' and 'height' attributes).
+#
+# Note that the standalone SVG testcases can't test defaulting to 300x150 px
+# because SVG always has an intrinsic width and height. To get the size of an
+# SVG to default to 300x150 px the SVG will need to have a containing block
+# that depends on the SVG's size (e.g. a floating containing block). Again, see
+# below for those tests.
+
+== standalone--0-0--0-0.svg pass-empty.svg
+== standalone--0-0--0-pct.svg pass-empty.svg
+== standalone--0-0--0-px.svg pass-empty.svg
+== standalone--0-0--pct-0.svg pass-empty.svg
+== standalone--0-0--pct-pct.svg pass-empty.svg
+== standalone--0-0--pct-px.svg pass-empty.svg
+== standalone--0-0--px-0.svg pass-empty.svg
+== standalone--0-0--px-pct.svg pass-empty.svg
+== standalone--0-0--px-px.svg pass-empty.svg
+
+== standalone--0-auto--0-0.svg pass-empty.svg
+== standalone--0-auto--0-pct.svg pass-empty.svg
+== standalone--0-auto--0-px.svg pass-empty.svg
+== standalone--0-auto--pct-0.svg pass-empty.svg
+== standalone--0-auto--pct-pct.svg pass-empty.svg
+== standalone--0-auto--pct-px.svg pass-empty.svg
+== standalone--0-auto--px-0.svg pass-empty.svg
+== standalone--0-auto--px-pct.svg pass-empty.svg
+== standalone--0-auto--px-px.svg pass-empty.svg
+
+== standalone--0-pct--0-0.svg pass-empty.svg
+== standalone--0-pct--0-pct.svg pass-empty.svg
+== standalone--0-pct--0-px.svg pass-empty.svg
+== standalone--0-pct--pct-0.svg pass-empty.svg
+== standalone--0-pct--pct-pct.svg pass-empty.svg
+== standalone--0-pct--pct-px.svg pass-empty.svg
+== standalone--0-pct--px-0.svg pass-empty.svg
+== standalone--0-pct--px-pct.svg pass-empty.svg
+== standalone--0-pct--px-px.svg pass-empty.svg
+
+== standalone--0-px--0-0.svg pass-empty.svg
+== standalone--0-px--0-pct.svg pass-empty.svg
+== standalone--0-px--0-px.svg pass-empty.svg
+== standalone--0-px--pct-0.svg pass-empty.svg
+== standalone--0-px--pct-pct.svg pass-empty.svg
+== standalone--0-px--pct-px.svg pass-empty.svg
+== standalone--0-px--px-0.svg pass-empty.svg
+== standalone--0-px--px-pct.svg pass-empty.svg
+== standalone--0-px--px-px.svg pass-empty.svg
+
+== standalone--auto-0--0-0.svg pass-empty.svg
+== standalone--auto-0--0-pct.svg pass-empty.svg
+== standalone--auto-0--0-px.svg pass-empty.svg
+== standalone--auto-0--pct-0.svg pass-empty.svg
+== standalone--auto-0--pct-pct.svg pass-empty.svg
+== standalone--auto-0--pct-px.svg pass-empty.svg
+== standalone--auto-0--px-0.svg pass-empty.svg
+== standalone--auto-0--px-pct.svg pass-empty.svg
+== standalone--auto-0--px-px.svg pass-empty.svg
+
+== standalone--auto-auto--0-0.svg pass-empty.svg
+== standalone--auto-auto--0-pct.svg pass-empty.svg
+== standalone--auto-auto--0-px.svg pass-empty.svg
+== standalone--auto-auto--pct-0.svg pass-empty.svg
+fuzzy-if(d2d,0-1,0-400) == standalone--auto-auto--pct-pct.svg pass-pct-pct.xhtml
+== standalone--auto-auto--pct-px.svg pass-pct-px.xhtml
+== standalone--auto-auto--px-0.svg pass-empty.svg
+== standalone--auto-auto--px-pct.svg pass-px-pct.xhtml
+== standalone--auto-auto--px-px.svg pass-px-px.xhtml
+
+== standalone--auto-pct--0-0.svg pass-empty.svg
+== standalone--auto-pct--0-pct.svg pass-empty.svg
+== standalone--auto-pct--0-px.svg pass-empty.svg
+fuzzy-if(d2d,0-1,0-400) == standalone--auto-pct--pct-0.svg pass-pct-pct.xhtml
+fuzzy-if(d2d,0-1,0-400) == standalone--auto-pct--pct-pct.svg pass-pct-pct.xhtml
+fuzzy-if(d2d,0-1,0-400) == standalone--auto-pct--pct-px.svg pass-pct-pct.xhtml
+== standalone--auto-pct--px-0.svg pass-px-pct.xhtml
+== standalone--auto-pct--px-pct.svg pass-px-pct.xhtml
+fuzzy-if(d2d,0-1,0-1000) == standalone--auto-pct--px-px.svg pass-pct-height-square.xhtml # intrinsic ratio!
+
+== standalone--auto-px--0-0.svg pass-empty.svg
+== standalone--auto-px--0-pct.svg pass-empty.svg
+== standalone--auto-px--0-px.svg pass-empty.svg
+== standalone--auto-px--pct-0.svg pass-pct-px.xhtml
+== standalone--auto-px--pct-pct.svg pass-pct-px.xhtml
+== standalone--auto-px--pct-px.svg pass-pct-px.xhtml
+== standalone--auto-px--px-0.svg pass-px-px.xhtml
+== standalone--auto-px--px-pct.svg pass-px-px.xhtml
+== standalone--auto-px--px-px.svg pass-px-px.xhtml # intrinsic ratio!
+
+== standalone--pct-0--0-0.svg pass-empty.svg
+== standalone--pct-0--0-pct.svg pass-empty.svg
+== standalone--pct-0--0-px.svg pass-empty.svg
+== standalone--pct-0--pct-0.svg pass-empty.svg
+== standalone--pct-0--pct-pct.svg pass-empty.svg
+== standalone--pct-0--pct-px.svg pass-empty.svg
+== standalone--pct-0--px-0.svg pass-empty.svg
+== standalone--pct-0--px-pct.svg pass-empty.svg
+== standalone--pct-0--px-px.svg pass-empty.svg
+
+== standalone--pct-auto--0-0.svg pass-empty.svg
+fuzzy-if(d2d,0-1,0-400) == standalone--pct-auto--0-pct.svg pass-pct-pct.xhtml
+== standalone--pct-auto--0-px.svg pass-pct-px.xhtml
+== standalone--pct-auto--pct-0.svg pass-empty.svg
+fuzzy-if(d2d,0-1,0-400) == standalone--pct-auto--pct-pct.svg pass-pct-pct.xhtml
+== standalone--pct-auto--pct-px.svg pass-pct-px.xhtml
+== standalone--pct-auto--px-0.svg pass-empty.svg
+fuzzy-if(d2d,0-1,0-400) == standalone--pct-auto--px-pct.svg pass-pct-pct.xhtml
+== standalone--pct-auto--px-px.svg pass-pct-width-square.xhtml # intrinsic ratio!
+
+fuzzy-if(d2d,0-1,0-400) == standalone--pct-pct--0-0.svg pass-pct-pct.xhtml
+fuzzy-if(d2d,0-1,0-400) == standalone--pct-pct--0-pct.svg pass-pct-pct.xhtml
+fuzzy-if(d2d,0-1,0-400) == standalone--pct-pct--0-px.svg pass-pct-pct.xhtml
+fuzzy-if(d2d,0-1,0-400) == standalone--pct-pct--pct-0.svg pass-pct-pct.xhtml
+fuzzy-if(d2d,0-1,0-400) == standalone--pct-pct--pct-pct.svg pass-pct-pct.xhtml
+fuzzy-if(d2d,0-1,0-400) == standalone--pct-pct--pct-px.svg pass-pct-pct.xhtml
+fuzzy-if(d2d,0-1,0-400) == standalone--pct-pct--px-0.svg pass-pct-pct.xhtml
+fuzzy-if(d2d,0-1,0-400) == standalone--pct-pct--px-pct.svg pass-pct-pct.xhtml
+fuzzy-if(d2d,0-1,0-400) == standalone--pct-pct--px-px.svg pass-pct-pct.xhtml
+
+== standalone--pct-px--0-0.svg pass-pct-px.xhtml
+== standalone--pct-px--0-pct.svg pass-pct-px.xhtml
+== standalone--pct-px--0-px.svg pass-pct-px.xhtml
+== standalone--pct-px--pct-0.svg pass-pct-px.xhtml
+== standalone--pct-px--pct-pct.svg pass-pct-px.xhtml
+== standalone--pct-px--pct-px.svg pass-pct-px.xhtml
+== standalone--pct-px--px-0.svg pass-pct-px.xhtml
+== standalone--pct-px--px-pct.svg pass-pct-px.xhtml
+== standalone--pct-px--px-px.svg pass-pct-px.xhtml
+
+== standalone--px-0--0-0.svg pass-empty.svg
+== standalone--px-0--0-pct.svg pass-empty.svg
+== standalone--px-0--0-px.svg pass-empty.svg
+== standalone--px-0--pct-0.svg pass-empty.svg
+== standalone--px-0--pct-pct.svg pass-empty.svg
+== standalone--px-0--pct-px.svg pass-empty.svg
+== standalone--px-0--px-0.svg pass-empty.svg
+== standalone--px-0--px-pct.svg pass-empty.svg
+== standalone--px-0--px-px.svg pass-empty.svg
+
+== standalone--px-auto--0-0.svg pass-empty.svg
+== standalone--px-auto--0-pct.svg pass-px-pct.xhtml
+== standalone--px-auto--0-px.svg pass-px-px.xhtml
+== standalone--px-auto--pct-0.svg pass-empty.svg
+== standalone--px-auto--pct-pct.svg pass-px-pct.xhtml
+== standalone--px-auto--pct-px.svg pass-px-px.xhtml
+== standalone--px-auto--px-0.svg pass-empty.svg
+== standalone--px-auto--px-pct.svg pass-px-pct.xhtml
+== standalone--px-auto--px-px.svg pass-px-px.xhtml # intrinsic ratio!
+
+== standalone--px-pct--0-0.svg pass-px-pct.xhtml
+== standalone--px-pct--0-pct.svg pass-px-pct.xhtml
+== standalone--px-pct--0-px.svg pass-px-pct.xhtml
+== standalone--px-pct--pct-0.svg pass-px-pct.xhtml
+== standalone--px-pct--pct-pct.svg pass-px-pct.xhtml
+== standalone--px-pct--pct-px.svg pass-px-pct.xhtml
+== standalone--px-pct--px-0.svg pass-px-pct.xhtml
+== standalone--px-pct--px-pct.svg pass-px-pct.xhtml
+== standalone--px-pct--px-px.svg pass-px-pct.xhtml
+
+== standalone--px-px--0-0.svg pass-px-px.xhtml
+== standalone--px-px--0-pct.svg pass-px-px.xhtml
+== standalone--px-px--0-px.svg pass-px-px.xhtml
+== standalone--px-px--pct-0.svg pass-px-px.xhtml
+== standalone--px-px--pct-pct.svg pass-px-px.xhtml
+== standalone--px-px--pct-px.svg pass-px-px.xhtml
+== standalone--px-px--px-0.svg pass-px-px.xhtml
+== standalone--px-px--px-pct.svg pass-px-px.xhtml
+== standalone--px-px--px-px.svg pass-px-px.xhtml
+
+
+# As mentioned above, the 'viewBox' attribute may play a part in the sizing of
+# the SVG viewport in 12 of the 144 standalone tests above. The 'viewBox'
+# attribute only affects the replaced element sizing algorithm (by providing an
+# intrinsic ratio) when the SVG 'width' and 'height' attributes don't provide
+# an intrinsic ratio but the algorithm says the intrinsic ratio should be used
+# if avaliable. In other words, this is when one of the CSS properties 'width'
+# or 'height' has the value 'auto' and the other has a non-zero value, while
+# one or both of the SVG 'width' and 'height' attributes has a percentage
+# value. For the standalone tests above that means the value of the 'viewBox'
+# attribute matters in the 12 cases that follow.
+#
+# XXX We could also check that 'viewBox' does NOT have an affect in the other
+# cases.
+#
+# XXX What about cases like standalone--auto-pct--0-px--viewBox.svg? Is the
+# intrinsic ratio zero and not used, or should we use the viewBox ratio?
+
+== standalone--auto-pct--pct-pct--viewBox.svg pass-pct-height-square.xhtml
+== standalone--auto-pct--pct-px--viewBox.svg pass-pct-height-square.xhtml
+== standalone--auto-pct--px-pct--viewBox.svg pass-pct-height-square.xhtml
+== standalone--auto-px--pct-pct--viewBox.svg pass-px-px.xhtml
+== standalone--auto-px--pct-px--viewBox.svg pass-px-px.xhtml
+== standalone--auto-px--px-pct--viewBox.svg pass-px-px.xhtml
+== standalone--pct-auto--pct-pct--viewBox.svg pass-pct-width-square.xhtml
+== standalone--pct-auto--pct-px--viewBox.svg pass-pct-width-square.xhtml
+== standalone--pct-auto--px-pct--viewBox.svg pass-pct-width-square.xhtml
+== standalone--px-auto--pct-pct--viewBox.svg pass-px-px.xhtml
+== standalone--px-auto--pct-px--viewBox.svg pass-px-px.xhtml
+== standalone--px-auto--px-pct--viewBox.svg pass-px-px.xhtml
+
+
+# Sanity tests. These tests check that our choice of percentage width (49%)
+# doesn't coincidently result in the same width as our choice of px width
+# (70px) or the fall back width (300 px), and that our choice of percentage
+# height (49%) doesn't coincidently result in the same height as our choice of
+# px height (70px) or the fall back height (150 px). This ensures that we won't
+# miss false positives for the tests:
+#
+# standalone--pct-xxx--px-xxx.svg
+# standalone--xxx-pct--xxx-px.svg
+# standalone--px-xxx--pct-xxx.svg
+# standalone--xxx-px--xxx-pct.svg
+#
+# if the user agent ignores the CSS property and uses the attribute instead.
+# This will happen if the content area width is 612 px or the content height is
+# 306 px. Hopefully it's unlikely testers will encounter this.
+
+!= standalone-sanity-width-pct.svg standalone-sanity-width-px.svg
+!= standalone-sanity-width-pct.svg standalone-sanity-width-300px.svg
+!= standalone-sanity-height-pct.svg standalone-sanity-height-px.svg
+!= standalone-sanity-height-pct.svg standalone-sanity-height-150px.svg
+
+
+# Embedded inline tests
+#
+# The standalone tests provide a reasonable workout for replaced element
+# algorithm sizing, but we also want to test that SVG embedded inline is
+# positioned correctly when the properties 'display', 'float' and 'position'
+# are set to different values.
+#
+# We could certainly expand on these tests, but they provide reasonable base
+# coverage.
+
+== inline--display-block--01.xhtml inline--display-block--01-ref.xhtml
+fuzzy-if(OSX,0-1,0-10) == inline--display-inline--01.xhtml inline--display-inline--01-ref.xhtml
+== inline--display-inline-block--01.xhtml inline--display-inline-block--01-ref.xhtml
+== inline--float-left--01.xhtml inline--float-left--01-ref.xhtml
+== inline--float-right--01.xhtml inline--float-right--01-ref.xhtml
+== inline--position-absolute--01.xhtml inline--position-absolute--01-ref.xhtml
+== inline--position-absolute--02.xhtml pass.svg
+== inline--position-relative--01.xhtml inline--position-relative--01-ref.xhtml
+
+
+# Embedded by reference tests
+#
+# One issue when it comes to documents embedded by reference is whether
+# non-'auto' values for the CSS 'width' and 'height' properties on the
+# _embedded_ document's root element should be used as intrinsic values by
+# replaced elements like HTML <object>. For the sake of simplicity we will
+# ignore this case for now, but it's certainly worth revisiting at some point
+# in the future.
+#
+# Since we have given the replaced element algorithm a reasonable workout in
+# the standalone tests, for the embedded by reference tests we will simply
+# check that the embedded SVG's intrinsic dimensions are used. The following
+# tests do not have any width or height on the <object> element so they should
+# be sized purely by the embedded SVG's intrinsic size.
+
+random-if(Android) == object--auto-auto--0-0.html pass-empty.svg # XXX add border
+random-if(Android) == object--auto-auto--0-pct.html object--auto-auto--0-pct--ref.html
+random-if(Android) == object--auto-auto--0-px.html object--auto-auto--0-px--ref.html
+random-if(Android) == object--auto-auto--pct-0.html object--auto-auto--pct-0--ref.html
+# The following four commented out tests fail post bug 428023:
+#== object--auto-auto--pct-pct.html object--auto-auto--pct-pct--ref.html
+#== object--auto-auto--pct-px.html object--auto-auto--pct-px--ref.html
+random-if(Android) == object--auto-auto--px-0.html object--auto-auto--px-0--ref.html
+#== object--auto-auto--px-pct.html object--auto-auto--px-pct--ref.html
+random-if(Android) == object--auto-auto--px-px.html object--auto-auto--px-px--ref.html
+#== object--pct-pct--0-0.html pass.svg
+
+
+# Assorted tests to check that dynamic changes work correctly
+#
+# Here we have an assortment of different tests to check that updates occur
+# correctly when changes are made that should result in a change in the size
+# or position of the SVG.
+
+== dynamic--inline-css-height.xhtml pass.svg
+== dynamic--inline-css-width.xhtml pass.svg
+skip == dynamic--inline-resize-window-height.xhtml pass.svg # XXX breaks the reftest run as the window height somehow is not restored
+skip == dynamic--inline-resize-window-width.xhtml pass.svg # Fails way too much
+random-if(Android) == dynamic--object-svg-unloaded.xhtml pass.svg
+# == dynamic--object--auto-auto--pct-px.html
diff --git a/layout/reftests/svg/sizing/scrollbars-01-anti-ref.svg b/layout/reftests/svg/sizing/scrollbars-01-anti-ref.svg
new file mode 100644
index 0000000000..a8d92e0847
--- /dev/null
+++ b/layout/reftests/svg/sizing/scrollbars-01-anti-ref.svg
@@ -0,0 +1,11 @@
+<!--
+ 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">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=771935 -->
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/scrollbars-01.svg b/layout/reftests/svg/sizing/scrollbars-01.svg
new file mode 100644
index 0000000000..4433307db4
--- /dev/null
+++ b/layout/reftests/svg/sizing/scrollbars-01.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" version="1.1" width="101%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=771935 -->
+
+ <title>Test that we're given scrollbars if wider than the browser's content area</title>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/scrollbars-02.svg b/layout/reftests/svg/sizing/scrollbars-02.svg
new file mode 100644
index 0000000000..9f9bc4af4e
--- /dev/null
+++ b/layout/reftests/svg/sizing/scrollbars-02.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" version="1.1" height="101%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=771935 -->
+
+ <title>Test that we're given scrollbars if wider than the browser's content area</title>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--0-0--0-0.svg b/layout/reftests/svg/sizing/standalone--0-0--0-0.svg
new file mode 100644
index 0000000000..06ee1b22b8
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--0-0--0-0.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" version="1.1"
+ style="width:0; height:0;" width="0" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:0; height:0; width="0" height="0"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'width' and 'height' properties
+ to zero prevents the SVG from being displayed. You should not see any red
+ when viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--0-0--0-pct.svg b/layout/reftests/svg/sizing/standalone--0-0--0-pct.svg
new file mode 100644
index 0000000000..e5a9a9f777
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--0-0--0-pct.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" version="1.1"
+ style="width:0; height:0;" width="0" height="49%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:0; height:0; width="0" height="49%"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'width' and 'height' properties
+ to zero prevents the SVG from being displayed. You should not see any red
+ when viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--0-0--0-px.svg b/layout/reftests/svg/sizing/standalone--0-0--0-px.svg
new file mode 100644
index 0000000000..5fa9391ad6
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--0-0--0-px.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" version="1.1"
+ style="width:0; height:0;" width="0" height="70">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:0; height:0; width="0" height="70"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'width' and 'height' properties
+ to zero prevents the SVG from being displayed. You should not see any red
+ when viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--0-0--pct-0.svg b/layout/reftests/svg/sizing/standalone--0-0--pct-0.svg
new file mode 100644
index 0000000000..a017d7d66a
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--0-0--pct-0.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" version="1.1"
+ style="width:0; height:0;" width="49%" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:0; height:0; width="49%" height="0"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'width' and 'height' properties
+ to zero prevents the SVG from being displayed. You should not see any red
+ when viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--0-0--pct-pct.svg b/layout/reftests/svg/sizing/standalone--0-0--pct-pct.svg
new file mode 100644
index 0000000000..8f50583adf
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--0-0--pct-pct.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" version="1.1"
+ style="width:0; height:0;" width="49%" height="49%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:0; height:0; width="49%" height="49%"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'width' and 'height' properties
+ to zero prevents the SVG from being displayed. You should not see any red
+ when viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--0-0--pct-px.svg b/layout/reftests/svg/sizing/standalone--0-0--pct-px.svg
new file mode 100644
index 0000000000..5ceba989bf
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--0-0--pct-px.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" version="1.1"
+ style="width:0; height:0;" width="49%" height="70">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:0; height:0; width="49%" height="70"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'width' and 'height' properties
+ to zero prevents the SVG from being displayed. You should not see any red
+ when viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--0-0--px-0.svg b/layout/reftests/svg/sizing/standalone--0-0--px-0.svg
new file mode 100644
index 0000000000..3bcf767095
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--0-0--px-0.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" version="1.1"
+ style="width:0; height:0;" width="70" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:0; height:0; width="70" height="0"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'width' and 'height' properties
+ to zero prevents the SVG from being displayed. You should not see any red
+ when viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--0-0--px-pct.svg b/layout/reftests/svg/sizing/standalone--0-0--px-pct.svg
new file mode 100644
index 0000000000..c414d1301a
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--0-0--px-pct.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" version="1.1"
+ style="width:0; height:0;" width="70" height="49%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:0; height:0; width="70" height="49%"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'width' and 'height' properties
+ to zero prevents the SVG from being displayed. You should not see any red
+ when viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--0-0--px-px.svg b/layout/reftests/svg/sizing/standalone--0-0--px-px.svg
new file mode 100644
index 0000000000..8bb0391948
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--0-0--px-px.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" version="1.1"
+ style="width:0; height:0;" width="70" height="70">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:0; height:0; width="70" height="70"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'width' and 'height' properties
+ to zero prevents the SVG from being displayed. You should not see any red
+ when viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--0-auto--0-0.svg b/layout/reftests/svg/sizing/standalone--0-auto--0-0.svg
new file mode 100644
index 0000000000..a7f9833d75
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--0-auto--0-0.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" version="1.1"
+ style="width:0; height:auto;" width="0" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:0; height:auto; width="0" height="0"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'width' property to zero prevents
+ the SVG from being displayed. You should not see any red when viewing this
+ file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--0-auto--0-pct.svg b/layout/reftests/svg/sizing/standalone--0-auto--0-pct.svg
new file mode 100644
index 0000000000..206b4111cf
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--0-auto--0-pct.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" version="1.1"
+ style="width:0; height:auto;" width="0" height="49%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:0; height:auto; width="0" height="49%"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'width' property to zero prevents
+ the SVG from being displayed. You should not see any red when viewing this
+ file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--0-auto--0-px.svg b/layout/reftests/svg/sizing/standalone--0-auto--0-px.svg
new file mode 100644
index 0000000000..e130c8ffc1
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--0-auto--0-px.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" version="1.1"
+ style="width:0; height:auto;" width="0" height="70">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:0; height:auto; width="0" height="70"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'width' property to zero prevents
+ the SVG from being displayed. You should not see any red when viewing this
+ file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--0-auto--pct-0.svg b/layout/reftests/svg/sizing/standalone--0-auto--pct-0.svg
new file mode 100644
index 0000000000..25f4e4dd9e
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--0-auto--pct-0.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" version="1.1"
+ style="width:0; height:auto;" width="49%" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:0; height:auto; width="49%" height="0"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'width' property to zero prevents
+ the SVG from being displayed. You should not see any red when viewing this
+ file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--0-auto--pct-pct.svg b/layout/reftests/svg/sizing/standalone--0-auto--pct-pct.svg
new file mode 100644
index 0000000000..c9bfd7ac3f
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--0-auto--pct-pct.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" version="1.1"
+ style="width:0; height:auto;" width="49%" height="49%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:0; height:auto; width="49%" height="49%"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'width' property to zero prevents
+ the SVG from being displayed. You should not see any red when viewing this
+ file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--0-auto--pct-px.svg b/layout/reftests/svg/sizing/standalone--0-auto--pct-px.svg
new file mode 100644
index 0000000000..c86f758553
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--0-auto--pct-px.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" version="1.1"
+ style="width:0; height:auto;" width="49%" height="70">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:0; height:auto; width="49%" height="70"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'width' property to zero prevents
+ the SVG from being displayed. You should not see any red when viewing this
+ file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--0-auto--px-0.svg b/layout/reftests/svg/sizing/standalone--0-auto--px-0.svg
new file mode 100644
index 0000000000..38fca0bd7f
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--0-auto--px-0.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" version="1.1"
+ style="width:0; height:auto;" width="70" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:0; height:auto; width="70" height="0"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'width' property to zero prevents
+ the SVG from being displayed. You should not see any red when viewing this
+ file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--0-auto--px-pct.svg b/layout/reftests/svg/sizing/standalone--0-auto--px-pct.svg
new file mode 100644
index 0000000000..7fc50a5b6a
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--0-auto--px-pct.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" version="1.1"
+ style="width:0; height:auto;" width="70" height="49%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:0; height:auto; width="70" height="49%"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'width' property to zero prevents
+ the SVG from being displayed. You should not see any red when viewing this
+ file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--0-auto--px-px.svg b/layout/reftests/svg/sizing/standalone--0-auto--px-px.svg
new file mode 100644
index 0000000000..a7d132473d
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--0-auto--px-px.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" version="1.1"
+ style="width:0; height:auto;" width="70" height="70">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:0; height:auto; width="70" height="70"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'width' property to zero prevents
+ the SVG from being displayed. You should not see any red when viewing this
+ file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--0-pct--0-0.svg b/layout/reftests/svg/sizing/standalone--0-pct--0-0.svg
new file mode 100644
index 0000000000..9938ee6892
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--0-pct--0-0.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" version="1.1"
+ style="width:0; height:49%;" width="0" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:0; height:49%; width="0" height="0"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'width' property to zero prevents
+ the SVG from being displayed. You should not see any red when viewing this
+ file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--0-pct--0-pct.svg b/layout/reftests/svg/sizing/standalone--0-pct--0-pct.svg
new file mode 100644
index 0000000000..8917bf10fe
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--0-pct--0-pct.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" version="1.1"
+ style="width:0; height:49%;" width="0" height="10%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:0; height:49%; width="0" height="10%"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'width' property to zero prevents
+ the SVG from being displayed. You should not see any red when viewing this
+ file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--0-pct--0-px.svg b/layout/reftests/svg/sizing/standalone--0-pct--0-px.svg
new file mode 100644
index 0000000000..5d1ccdc873
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--0-pct--0-px.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" version="1.1"
+ style="width:0; height:49%;" width="0" height="10">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:0; height:49%; width="0" height="10"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'width' property to zero prevents
+ the SVG from being displayed. You should not see any red when viewing this
+ file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--0-pct--pct-0.svg b/layout/reftests/svg/sizing/standalone--0-pct--pct-0.svg
new file mode 100644
index 0000000000..8df3fa2c79
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--0-pct--pct-0.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" version="1.1"
+ style="width:0; height:49%;" width="10%" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:0; height:49%; width="10%" height="0"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'width' property to zero prevents
+ the SVG from being displayed. You should not see any red when viewing this
+ file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--0-pct--pct-pct.svg b/layout/reftests/svg/sizing/standalone--0-pct--pct-pct.svg
new file mode 100644
index 0000000000..22c6a8f817
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--0-pct--pct-pct.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" version="1.1"
+ style="width:0; height:90%;" width="10%" height="10%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:0; height:49%; width="10%" height="10%"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'width' property to zero prevents
+ the SVG from being displayed. You should not see any red when viewing this
+ file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--0-pct--pct-px.svg b/layout/reftests/svg/sizing/standalone--0-pct--pct-px.svg
new file mode 100644
index 0000000000..99e317c310
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--0-pct--pct-px.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" version="1.1"
+ style="width:0; height:49%;" width="10%" height="10">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:0; height:49%; width="10%" height="10"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'width' property to zero prevents
+ the SVG from being displayed. You should not see any red when viewing this
+ file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--0-pct--px-0.svg b/layout/reftests/svg/sizing/standalone--0-pct--px-0.svg
new file mode 100644
index 0000000000..98e1a83803
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--0-pct--px-0.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" version="1.1"
+ style="width:0; height:49%;" width="10" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:0; height:49%; width="10" height="0"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'width' property to zero prevents
+ the SVG from being displayed. You should not see any red when viewing this
+ file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--0-pct--px-pct.svg b/layout/reftests/svg/sizing/standalone--0-pct--px-pct.svg
new file mode 100644
index 0000000000..cb06033245
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--0-pct--px-pct.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" version="1.1"
+ style="width:0; height:49%;" width="10" height="10%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:0; height:49%; width="10" height="10%"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'width' property to zero prevents
+ the SVG from being displayed. You should not see any red when viewing this
+ file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--0-pct--px-px.svg b/layout/reftests/svg/sizing/standalone--0-pct--px-px.svg
new file mode 100644
index 0000000000..80e9c1ac88
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--0-pct--px-px.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" version="1.1"
+ style="width:0; height:49%;" width="10" height="10">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:0; height:49%; width="10" height="10"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'width' property to zero prevents
+ the SVG from being displayed. You should not see any red when viewing this
+ file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--0-px--0-0.svg b/layout/reftests/svg/sizing/standalone--0-px--0-0.svg
new file mode 100644
index 0000000000..6ee5a3b425
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--0-px--0-0.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" version="1.1"
+ style="width:0; height:70px;" width="0" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:0; height:70px; width="0" height="0"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'width' property to zero prevents
+ the SVG from being displayed. You should not see any red when viewing this
+ file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--0-px--0-pct.svg b/layout/reftests/svg/sizing/standalone--0-px--0-pct.svg
new file mode 100644
index 0000000000..9b62bac9dd
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--0-px--0-pct.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" version="1.1"
+ style="width:0; height:70px;" width="0" height="49%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:0; height:70px; width="0" height="49%"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'width' property to zero prevents
+ the SVG from being displayed. You should not see any red when viewing this
+ file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--0-px--0-px.svg b/layout/reftests/svg/sizing/standalone--0-px--0-px.svg
new file mode 100644
index 0000000000..a324130290
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--0-px--0-px.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" version="1.1"
+ style="width:0; height:70px;" width="0" height="10">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:0; height:70px; width="0" height="10"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'width' property to zero prevents
+ the SVG from being displayed. You should not see any red when viewing this
+ file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--0-px--pct-0.svg b/layout/reftests/svg/sizing/standalone--0-px--pct-0.svg
new file mode 100644
index 0000000000..c9179e12ed
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--0-px--pct-0.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" version="1.1"
+ style="width:0; height:70px;" width="49%" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:0; height:70px; width="49%" height="0"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'width' property to zero prevents
+ the SVG from being displayed. You should not see any red when viewing this
+ file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--0-px--pct-pct.svg b/layout/reftests/svg/sizing/standalone--0-px--pct-pct.svg
new file mode 100644
index 0000000000..c4d82009cb
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--0-px--pct-pct.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" version="1.1"
+ style="width:0; height:70px;" width="49%" height="49%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:0; height:70px; width="49%" height="49%"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'width' property to zero prevents
+ the SVG from being displayed. You should not see any red when viewing this
+ file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--0-px--pct-px.svg b/layout/reftests/svg/sizing/standalone--0-px--pct-px.svg
new file mode 100644
index 0000000000..df2055df87
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--0-px--pct-px.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" version="1.1"
+ style="width:0; height:70px;" width="49%" height="10">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:0; height:70px; width="49%" height="10"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'width' property to zero prevents
+ the SVG from being displayed. You should not see any red when viewing this
+ file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--0-px--px-0.svg b/layout/reftests/svg/sizing/standalone--0-px--px-0.svg
new file mode 100644
index 0000000000..920cf6ef27
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--0-px--px-0.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" version="1.1"
+ style="width:0; height:70px;" width="10" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:0; height:70px; width="10" height="0"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'width' property to zero prevents
+ the SVG from being displayed. You should not see any red when viewing this
+ file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--0-px--px-pct.svg b/layout/reftests/svg/sizing/standalone--0-px--px-pct.svg
new file mode 100644
index 0000000000..bf9200e159
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--0-px--px-pct.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" version="1.1"
+ style="width:0; height:70px;" width="10" height="49%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:0; height:70px; width="10" height="49%"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'width' property to zero prevents
+ the SVG from being displayed. You should not see any red when viewing this
+ file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--0-px--px-px.svg b/layout/reftests/svg/sizing/standalone--0-px--px-px.svg
new file mode 100644
index 0000000000..7a62c3f633
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--0-px--px-px.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" version="1.1"
+ style="width:0; height:70px;" width="10" height="10">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:0; height:70px; width="10" height="10"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'width' property to zero prevents
+ the SVG from being displayed. You should not see any red when viewing this
+ file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--auto-0--0-0.svg b/layout/reftests/svg/sizing/standalone--auto-0--0-0.svg
new file mode 100644
index 0000000000..4dd222ddc1
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--auto-0--0-0.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" version="1.1"
+ style="width:auto; height:0;" width="0" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:0; width="0" height="0"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'height' property to zero
+ prevents the SVG from being displayed. You should not see any red when
+ viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--auto-0--0-pct.svg b/layout/reftests/svg/sizing/standalone--auto-0--0-pct.svg
new file mode 100644
index 0000000000..c564b9fd0d
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--auto-0--0-pct.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" version="1.1"
+ style="width:auto; height:0;" width="0" height="49%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:0; width="0" height="49%"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'height' property to zero
+ prevents the SVG from being displayed. You should not see any red when
+ viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--auto-0--0-px.svg b/layout/reftests/svg/sizing/standalone--auto-0--0-px.svg
new file mode 100644
index 0000000000..44defae6b6
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--auto-0--0-px.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" version="1.1"
+ style="width:auto; height:0;" width="0" height="10">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:0; width="0" height="10"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'height' property to zero
+ prevents the SVG from being displayed. You should not see any red when
+ viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--auto-0--pct-0.svg b/layout/reftests/svg/sizing/standalone--auto-0--pct-0.svg
new file mode 100644
index 0000000000..649b8224cc
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--auto-0--pct-0.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" version="1.1"
+ style="width:auto; height:0;" width="49%" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:0; width="49%" height="0"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'height' property to zero
+ prevents the SVG from being displayed. You should not see any red when
+ viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--auto-0--pct-pct.svg b/layout/reftests/svg/sizing/standalone--auto-0--pct-pct.svg
new file mode 100644
index 0000000000..8c9b139b7b
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--auto-0--pct-pct.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" version="1.1"
+ style="width:auto; height:0;" width="49%" height="49%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:0; width="49%" height="49%"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'height' property to zero
+ prevents the SVG from being displayed. You should not see any red when
+ viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--auto-0--pct-px.svg b/layout/reftests/svg/sizing/standalone--auto-0--pct-px.svg
new file mode 100644
index 0000000000..f62c14757d
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--auto-0--pct-px.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" version="1.1"
+ style="width:auto; height:0;" width="49%" height="10">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:0; width="49%" height="10"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'height' property to zero
+ prevents the SVG from being displayed. You should not see any red when
+ viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--auto-0--px-0.svg b/layout/reftests/svg/sizing/standalone--auto-0--px-0.svg
new file mode 100644
index 0000000000..5e38222fca
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--auto-0--px-0.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" version="1.1"
+ style="width:auto; height:0;" width="70" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:0; width="70" height="0"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'height' property to zero
+ prevents the SVG from being displayed. You should not see any red when
+ viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--auto-0--px-pct.svg b/layout/reftests/svg/sizing/standalone--auto-0--px-pct.svg
new file mode 100644
index 0000000000..cb77527312
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--auto-0--px-pct.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" version="1.1"
+ style="width:auto; height:0;" width="70" height="49%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:0; width="70" height="49%"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'height' property to zero
+ prevents the SVG from being displayed. You should not see any red when
+ viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--auto-0--px-px.svg b/layout/reftests/svg/sizing/standalone--auto-0--px-px.svg
new file mode 100644
index 0000000000..f4b0539ba9
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--auto-0--px-px.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" version="1.1"
+ style="width:auto; height:0;" width="70" height="70">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:0; width="70" height="70"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'height' property to zero
+ prevents the SVG from being displayed. You should not see any red when
+ viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--auto-auto--0-0.svg b/layout/reftests/svg/sizing/standalone--auto-auto--0-0.svg
new file mode 100644
index 0000000000..4156c11b41
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--auto-auto--0-0.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" version="1.1"
+ style="width:auto; height:auto;" width="0" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:auto; width="0" height="0"</title>
+
+ <desc>
+ This test checks that the 'width' and 'height' attributes are used when the
+ CSS 'width' and 'height' properties are both set to 'auto'. Setting the
+ 'width' and 'height' attributes to zero should prevent the SVG from being
+ displayed. You should not see any red when viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--auto-auto--0-pct.svg b/layout/reftests/svg/sizing/standalone--auto-auto--0-pct.svg
new file mode 100644
index 0000000000..b72fafff85
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--auto-auto--0-pct.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" version="1.1"
+ style="width:auto; height:auto;" width="0" height="49%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:auto; width="0" height="49%"</title>
+
+ <desc>
+ This test checks that the 'width' and 'height' attributes are used when the
+ CSS 'width' and 'height' properties are both set to 'auto'. Setting the
+ 'width' attributes to zero should prevent the SVG from being displayed. You
+ should not see any red when viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--auto-auto--0-px.svg b/layout/reftests/svg/sizing/standalone--auto-auto--0-px.svg
new file mode 100644
index 0000000000..284d422bad
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--auto-auto--0-px.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" version="1.1"
+ style="width:auto; height:auto;" width="0" height="70">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:auto; width="0" height="70"</title>
+
+ <desc>
+ This test checks that the 'width' and 'height' attributes are used when the
+ CSS 'width' and 'height' properties are both set to 'auto'. Setting the
+ 'width' attributes to zero should prevent the SVG from being displayed. You
+ should not see any red when viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--auto-auto--pct-0.svg b/layout/reftests/svg/sizing/standalone--auto-auto--pct-0.svg
new file mode 100644
index 0000000000..fb93cccc8a
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--auto-auto--pct-0.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" version="1.1"
+ style="width:auto; height:auto;" width="49%" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:auto; width="49%" height="0"</title>
+
+ <desc>
+ This test checks that the 'width' and 'height' attributes are used when the
+ CSS 'width' and 'height' properties are both set to 'auto'. Setting the
+ 'height' attributes to zero should prevent the SVG from being displayed.
+ You should not see any red when viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--auto-auto--pct-pct.svg b/layout/reftests/svg/sizing/standalone--auto-auto--pct-pct.svg
new file mode 100644
index 0000000000..4692dfc6fa
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--auto-auto--pct-pct.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" version="1.1"
+ style="width:auto; height:auto;" width="49%" height="49%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:auto; width="49%" height="49%"</title>
+
+ <desc>
+ This test checks that the 'width' and 'height' attributes are used when the
+ CSS 'width' and 'height' properties are both set to 'auto'. You should see
+ a blue rectangle 49% wide and 49% high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--auto-auto--pct-px.svg b/layout/reftests/svg/sizing/standalone--auto-auto--pct-px.svg
new file mode 100644
index 0000000000..be7d7736c5
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--auto-auto--pct-px.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" version="1.1"
+ style="width:auto; height:auto;" width="49%" height="70">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:auto; width="49%" height="70"</title>
+
+ <desc>
+ This test checks that the 'width' and 'height' attributes are used when the
+ CSS 'width' and 'height' properties are both set to 'auto'. You should see
+ a blue rectangle 49% wide and 70px high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--auto-auto--px-0.svg b/layout/reftests/svg/sizing/standalone--auto-auto--px-0.svg
new file mode 100644
index 0000000000..1ee6488d68
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--auto-auto--px-0.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" version="1.1"
+ style="width:auto; height:auto;" width="70" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:auto; width="70" height="0"</title>
+
+ <desc>
+ This test checks that the 'width' and 'height' attributes are used when the
+ CSS 'width' and 'height' properties are both set to 'auto'. Setting the
+ 'height' attributes to zero should prevent the SVG from being displayed.
+ You should not see any red when viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--auto-auto--px-pct.svg b/layout/reftests/svg/sizing/standalone--auto-auto--px-pct.svg
new file mode 100644
index 0000000000..97efb10be5
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--auto-auto--px-pct.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" version="1.1"
+ style="width:auto; height:auto;" width="70" height="49%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:auto; width="70" height="49%"</title>
+
+ <desc>
+ This test checks that the 'width' and 'height' attributes are used when the
+ CSS 'width' and 'height' properties are both set to 'auto'. You should see
+ a blue rectangle 70px wide and 49% high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--auto-auto--px-px.svg b/layout/reftests/svg/sizing/standalone--auto-auto--px-px.svg
new file mode 100644
index 0000000000..20c2717b55
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--auto-auto--px-px.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" version="1.1"
+ style="width:auto; height:auto;" width="70" height="70">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:auto; width="70" height="70"</title>
+
+ <desc>
+ This test checks that the 'width' and 'height' attributes are used when the
+ CSS 'width' and 'height' properties are both set to 'auto'. You should see
+ a blue rectangle 70px wide and 70px high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--auto-pct--0-0.svg b/layout/reftests/svg/sizing/standalone--auto-pct--0-0.svg
new file mode 100644
index 0000000000..8b76885e1c
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--auto-pct--0-0.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" version="1.1"
+ style="width:auto; height:49%;" width="0" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:49%; width="0" height="0"</title>
+
+ <desc>
+ This testcase checks that the intrinsic width will be taken as the used
+ width when the CSS 'width' property is set to 'auto', the 'height' property
+ is set to some other value, and there is no intrinsic ratio. Since the
+ 'width' attribute is set to zero, nothing should be displayed. You should
+ not see any red when viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--auto-pct--0-pct.svg b/layout/reftests/svg/sizing/standalone--auto-pct--0-pct.svg
new file mode 100644
index 0000000000..6409627b4c
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--auto-pct--0-pct.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" version="1.1"
+ style="width:auto; height:49%;" width="0" height="10%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:49%; width="0" height="10%"</title>
+
+ <desc>
+ This testcase checks that the intrinsic width will be taken as the used
+ width when the CSS 'width' property is set to 'auto', the 'height' property
+ is set to some other value, and there is no intrinsic ratio. Since the
+ 'width' attribute is set to zero, nothing should be displayed. You should
+ not see any red when viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--auto-pct--0-px.svg b/layout/reftests/svg/sizing/standalone--auto-pct--0-px.svg
new file mode 100644
index 0000000000..0e1edda2ed
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--auto-pct--0-px.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" version="1.1"
+ style="width:auto; height:49%;" width="0" height="10">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:49%; width="0" height="10"</title>
+
+ <desc>
+ This testcase checks that the intrinsic width will be taken as the used
+ width when the CSS 'width' property is set to 'auto', the 'height' property
+ is set to some other value, and there is no intrinsic ratio. Since the
+ 'width' attribute is set to zero, nothing should be displayed. You should
+ not see any red when viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--auto-pct--pct-0.svg b/layout/reftests/svg/sizing/standalone--auto-pct--pct-0.svg
new file mode 100644
index 0000000000..85c961c788
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--auto-pct--pct-0.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" version="1.1"
+ style="width:auto; height:49%;" width="49%" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:49%; width="49%" height="0"</title>
+
+ <desc>
+ This testcase checks that the intrinsic width will be taken as the used
+ width when the CSS 'width' property is set to 'auto', the 'height' property
+ is set to some other value, and there is no intrinsic ratio. You should see
+ a blue rectangle 49% wide and 49% high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--auto-pct--pct-pct--viewBox.svg b/layout/reftests/svg/sizing/standalone--auto-pct--pct-pct--viewBox.svg
new file mode 100644
index 0000000000..c7262a5ebd
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--auto-pct--pct-pct--viewBox.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"
+ style="width:auto; height:49%;" width="20%" height="10%"
+ viewBox="0 0 1 1">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:49%; width="20%" height="10%" viewBox="0 0 1 1"</title>
+
+ <desc>
+ This testcase checks that the intrinsic ratio will be taken from the
+ 'viewBox' attribute when the CSS 'width' property is set to 'auto', the
+ 'height' property is set to some other value, and the 'width' and 'height'
+ attributes do not provide an intrinsic ratio. You should see a blue square
+ with sides 49% the height of the content area when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--auto-pct--pct-pct.svg b/layout/reftests/svg/sizing/standalone--auto-pct--pct-pct.svg
new file mode 100644
index 0000000000..4c3e98c00e
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--auto-pct--pct-pct.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" version="1.1"
+ style="width:auto; height:49%;" width="49%" height="10%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:49%; width="49%" height="10%"</title>
+
+ <desc>
+ This testcase checks that the intrinsic width will be taken as the used
+ width when the CSS 'width' property is set to 'auto', the 'height' property
+ is set to some other value, and there is no intrinsic ratio. You should see
+ a blue rectangle 49% wide and 49% high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--auto-pct--pct-px--viewBox.svg b/layout/reftests/svg/sizing/standalone--auto-pct--pct-px--viewBox.svg
new file mode 100644
index 0000000000..caf4a17d91
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--auto-pct--pct-px--viewBox.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"
+ style="width:auto; height:49%;" width="10%" height="10"
+ viewBox="0 0 1 1">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:49%; width="10%" height="10" viewBox="0 0 1 1"</title>
+
+ <desc>
+ This testcase checks that the intrinsic ratio will be taken from the
+ 'viewBox' attribute when the CSS 'width' property is set to 'auto', the
+ 'height' property is set to some other value, and the 'width' and 'height'
+ attributes do not provide an intrinsic ratio. You should see a blue square
+ with sides 49% the height of the content area when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--auto-pct--pct-px.svg b/layout/reftests/svg/sizing/standalone--auto-pct--pct-px.svg
new file mode 100644
index 0000000000..d6c789f7e1
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--auto-pct--pct-px.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" version="1.1"
+ style="width:auto; height:49%;" width="49%" height="10">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:49%; width="49%" height="10"</title>
+
+ <desc>
+ This testcase checks that the intrinsic width will be taken as the used
+ width when the CSS 'width' property is set to 'auto', the 'height' property
+ is set to some other value, and there is no intrinsic ratio. You should see
+ a blue rectangle 49% wide and 49% high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--auto-pct--px-0.svg b/layout/reftests/svg/sizing/standalone--auto-pct--px-0.svg
new file mode 100644
index 0000000000..c2fd1e603b
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--auto-pct--px-0.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" version="1.1"
+ style="width:auto; height:49%;" width="70" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:49%; width="70" height="0"</title>
+
+ <desc>
+ This testcase checks that the intrinsic width will be taken as the used
+ width when the CSS 'width' property is set to 'auto', the 'height' property
+ is set to some other value, and there is no intrinsic ratio. You should see
+ a blue rectangle 70px wide and 49% high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--auto-pct--px-pct--viewBox.svg b/layout/reftests/svg/sizing/standalone--auto-pct--px-pct--viewBox.svg
new file mode 100644
index 0000000000..f2a789684a
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--auto-pct--px-pct--viewBox.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"
+ style="width:auto; height:49%;" width="70" height="10%"
+ viewBox="0 0 1 1">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:49%; width="70" height="10%" viewBox="0 0 1 1"</title>
+
+ <desc>
+ This testcase checks that the intrinsic ratio will be taken from the
+ 'viewBox' attribute when the CSS 'width' property is set to 'auto', the
+ 'height' property is set to some other value, and the 'width' and 'height'
+ attributes do not provide an intrinsic ratio. You should see a blue square
+ with sides 49% the height of the content area when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--auto-pct--px-pct.svg b/layout/reftests/svg/sizing/standalone--auto-pct--px-pct.svg
new file mode 100644
index 0000000000..4c601494a9
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--auto-pct--px-pct.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" version="1.1"
+ style="width:auto; height:49%;" width="70" height="10%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:49%; width="70" height="10%"</title>
+
+ <desc>
+ This testcase checks that the intrinsic width will be taken as the used
+ width when the CSS 'width' property is set to 'auto', the 'height' property
+ is set to some other value, and there is no intrinsic ratio. You should see
+ a blue rectangle 70px wide and 49% high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--auto-pct--px-px.svg b/layout/reftests/svg/sizing/standalone--auto-pct--px-px.svg
new file mode 100644
index 0000000000..ffe7fd570d
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--auto-pct--px-px.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" version="1.1"
+ style="width:auto; height:49%;" width="70" height="70">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:49%; width="70" height="70"</title>
+
+ <desc>
+ This testcase checks that the intrinsic ratio (1:1) will be used since the
+ CSS 'width' property is set to auto. You should see a blue square with
+ sides 49% the height of the content area when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--auto-px--0-0.svg b/layout/reftests/svg/sizing/standalone--auto-px--0-0.svg
new file mode 100644
index 0000000000..df1800ec28
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--auto-px--0-0.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" version="1.1"
+ style="width:auto; height:70px;" width="0" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:70px; width="0" height="0"</title>
+
+ <desc>
+ This testcase checks that the intrinsic width will be taken as the used
+ width when the CSS 'width' property is set to 'auto', the 'height' property
+ is set to some other value, and there is no intrinsic ratio. Since the
+ 'width' attribute is set to zero, nothing should be displayed. You should
+ not see any red when viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--auto-px--0-pct.svg b/layout/reftests/svg/sizing/standalone--auto-px--0-pct.svg
new file mode 100644
index 0000000000..ffb2400a62
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--auto-px--0-pct.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" version="1.1"
+ style="width:auto; height:70px;" width="0" height="49%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:70px; width="0" height="49%"</title>
+
+ <desc>
+ This testcase checks that the intrinsic width will be taken as the used
+ width when the CSS 'width' property is set to 'auto', the 'height' property
+ is set to some other value, and there is no intrinsic ratio. Since the
+ 'width' attribute is set to zero, nothing should be displayed. You should
+ not see any red when viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--auto-px--0-px.svg b/layout/reftests/svg/sizing/standalone--auto-px--0-px.svg
new file mode 100644
index 0000000000..72809a1305
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--auto-px--0-px.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" version="1.1"
+ style="width:auto; height:70px;" width="0" height="10">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:70px; width="0" height="10"</title>
+
+ <desc>
+ This testcase checks that the intrinsic width will be taken as the used
+ width when the CSS 'width' property is set to 'auto', the 'height' property
+ is set to some other value, and there is no intrinsic ratio. Since the
+ 'width' attribute is set to zero, nothing should be displayed. You should
+ not see any red when viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--auto-px--pct-0.svg b/layout/reftests/svg/sizing/standalone--auto-px--pct-0.svg
new file mode 100644
index 0000000000..efdab07b21
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--auto-px--pct-0.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" version="1.1"
+ style="width:auto; height:70px;" width="49%" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:70px; width="49%" height="0"</title>
+
+ <desc>
+ This testcase checks that the intrinsic width will be taken as the used
+ width when the CSS 'width' property is set to 'auto', the 'height' property
+ is set to some other value, and there is no intrinsic ratio. You should see
+ a blue rectangle 49% wide and 70px high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--auto-px--pct-pct--viewBox.svg b/layout/reftests/svg/sizing/standalone--auto-px--pct-pct--viewBox.svg
new file mode 100644
index 0000000000..f98e2b9d68
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--auto-px--pct-pct--viewBox.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"
+ style="width:auto; height:70px;" width="10%" height="49%"
+ viewBox="0 0 1 1">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:70px; width="10%" height="49%" viewBox="0 0 1 1"</title>
+
+ <desc>
+ This testcase checks that the intrinsic ratio will be taken from the
+ 'viewBox' attribute when the CSS 'width' property is set to 'auto', the
+ 'height' property is set to some other value, and the 'width' and 'height'
+ attributes do not provide an intrinsic ratio. You should see a blue square
+ with sides of length 70px when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--auto-px--pct-pct.svg b/layout/reftests/svg/sizing/standalone--auto-px--pct-pct.svg
new file mode 100644
index 0000000000..c5783ca175
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--auto-px--pct-pct.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" version="1.1"
+ style="width:auto; height:70px;" width="49%" height="49%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:70px; width="49%" height="49%"</title>
+
+ <desc>
+ This testcase checks that the intrinsic width will be taken as the used
+ width when the CSS 'width' property is set to 'auto', the 'height' property
+ is set to some other value, and there is no intrinsic ratio. You should see
+ a blue rectangle 49% wide and 70px high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--auto-px--pct-px--viewBox.svg b/layout/reftests/svg/sizing/standalone--auto-px--pct-px--viewBox.svg
new file mode 100644
index 0000000000..1327012dca
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--auto-px--pct-px--viewBox.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"
+ style="width:auto; height:70px;" width="49%" height="10"
+ viewBox="0 0 1 1">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:70px; width="49%" height="10" viewBox="0 0 1 1"</title>
+
+ <desc>
+ This testcase checks that the intrinsic ratio will be taken from the
+ 'viewBox' attribute when the CSS 'width' property is set to 'auto', the
+ 'height' property is set to some other value, and the 'width' and 'height'
+ attributes do not provide an intrinsic ratio. You should see a blue square
+ with sides of length 70px when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--auto-px--pct-px.svg b/layout/reftests/svg/sizing/standalone--auto-px--pct-px.svg
new file mode 100644
index 0000000000..91c62bb28c
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--auto-px--pct-px.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" version="1.1"
+ style="width:auto; height:70px;" width="49%" height="10">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:70px; width="49%" height="10"</title>
+
+ <desc>
+ This testcase checks that the intrinsic width will be taken as the used
+ width when the CSS 'width' property is set to 'auto', the 'height' property
+ is set to some other value, and there is no intrinsic ratio. You should see
+ a blue rectangle 49% wide and 70px high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--auto-px--px-0.svg b/layout/reftests/svg/sizing/standalone--auto-px--px-0.svg
new file mode 100644
index 0000000000..32c113b429
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--auto-px--px-0.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" version="1.1"
+ style="width:auto; height:70px;" width="70" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:70px; width="70" height="0"</title>
+
+ <desc>
+ This testcase checks that the intrinsic width will be taken as the used
+ width when the CSS 'width' property is set to 'auto', the 'height' property
+ is set to some other value, and there is no intrinsic ratio. You should see
+ a blue rectangle 70px wide and 70px high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--auto-px--px-pct--viewBox.svg b/layout/reftests/svg/sizing/standalone--auto-px--px-pct--viewBox.svg
new file mode 100644
index 0000000000..32151187a9
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--auto-px--px-pct--viewBox.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"
+ style="width:auto; height:70px;" width="10" height="49%"
+ viewBox="0 0 1 1">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:70px; width="10" height="49%" viewBox="0 0 1 1"</title>
+
+ <desc>
+ This testcase checks that the intrinsic ratio will be taken from the
+ 'viewBox' attribute when the CSS 'width' property is set to 'auto', the
+ 'height' property is set to some other value, and the 'width' and 'height'
+ attributes do not provide an intrinsic ratio. You should see a blue square
+ with sides of length 70px when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--auto-px--px-pct.svg b/layout/reftests/svg/sizing/standalone--auto-px--px-pct.svg
new file mode 100644
index 0000000000..fe35b2b1a0
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--auto-px--px-pct.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" version="1.1"
+ style="width:auto; height:70px;" width="70" height="49%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:70px; width="70" height="49%"</title>
+
+ <desc>
+ This testcase checks that the intrinsic width will be taken as the used
+ width when the CSS 'width' property is set to 'auto', the 'height' property
+ is set to some other value, and there is no intrinsic ratio. You should see
+ a blue rectangle 70px wide and 70px high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--auto-px--px-px.svg b/layout/reftests/svg/sizing/standalone--auto-px--px-px.svg
new file mode 100644
index 0000000000..f7cfc6f9e4
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--auto-px--px-px.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" version="1.1"
+ style="width:auto; height:70px;" width="1" height="1">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:70px; width="1" height="1"</title>
+
+ <desc>
+ This testcase checks that the intrinsic ratio (1:1) will be used since the
+ CSS 'width' property is set to auto. You should see a blue square with
+ sides of length 70px when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--pct-0--0-0.svg b/layout/reftests/svg/sizing/standalone--pct-0--0-0.svg
new file mode 100644
index 0000000000..788019e256
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--pct-0--0-0.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" version="1.1"
+ style="width:49%; height:0;" width="0" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:49%; height:0; width="0" height="0"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'height' property to zero
+ prevents the SVG from being displayed. You should not see any red when
+ viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--pct-0--0-pct.svg b/layout/reftests/svg/sizing/standalone--pct-0--0-pct.svg
new file mode 100644
index 0000000000..b9734786bc
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--pct-0--0-pct.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" version="1.1"
+ style="width:49%; height:0;" width="0" height="49%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:49%; height:0; width="0" height="49%"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'height' property to zero
+ prevents the SVG from being displayed. You should not see any red when
+ viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--pct-0--0-px.svg b/layout/reftests/svg/sizing/standalone--pct-0--0-px.svg
new file mode 100644
index 0000000000..f092b9a038
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--pct-0--0-px.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" version="1.1"
+ style="width:49%; height:0;" width="0" height="70">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:49%; height:0; width="0" height="70"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'height' property to zero
+ prevents the SVG from being displayed. You should not see any red when
+ viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--pct-0--pct-0.svg b/layout/reftests/svg/sizing/standalone--pct-0--pct-0.svg
new file mode 100644
index 0000000000..bc29ce6a3e
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--pct-0--pct-0.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" version="1.1"
+ style="width:49%; height:0;" width="49%" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:49%; height:0; width="49%" height="0"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'height' property to zero
+ prevents the SVG from being displayed. You should not see any red when
+ viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--pct-0--pct-pct.svg b/layout/reftests/svg/sizing/standalone--pct-0--pct-pct.svg
new file mode 100644
index 0000000000..0cc62c5049
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--pct-0--pct-pct.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" version="1.1"
+ style="width:49%; height:0;" width="49%" height="49%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:49%; height:0; width="49%" height="49%"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'height' property to zero
+ prevents the SVG from being displayed. You should not see any red when
+ viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--pct-0--pct-px.svg b/layout/reftests/svg/sizing/standalone--pct-0--pct-px.svg
new file mode 100644
index 0000000000..c65ed72dca
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--pct-0--pct-px.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" version="1.1"
+ style="width:49%; height:0;" width="49%" height="70">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:49%; height:0; width="49%" height="70"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'height' property to zero
+ prevents the SVG from being displayed. You should not see any red when
+ viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--pct-0--px-0.svg b/layout/reftests/svg/sizing/standalone--pct-0--px-0.svg
new file mode 100644
index 0000000000..2fb91a78d7
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--pct-0--px-0.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" version="1.1"
+ style="width:49%; height:0;" width="70" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:49%; height:0; width="70" height="0"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'height' property to zero
+ prevents the SVG from being displayed. You should not see any red when
+ viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--pct-0--px-pct.svg b/layout/reftests/svg/sizing/standalone--pct-0--px-pct.svg
new file mode 100644
index 0000000000..32d8c31738
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--pct-0--px-pct.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" version="1.1"
+ style="width:49%; height:0;" width="70" height="49%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:49%; height:0; width="70" height="49%"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'height' property to zero
+ prevents the SVG from being displayed. You should not see any red when
+ viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--pct-0--px-px.svg b/layout/reftests/svg/sizing/standalone--pct-0--px-px.svg
new file mode 100644
index 0000000000..99d685c106
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--pct-0--px-px.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" version="1.1"
+ style="width:49%; height:0;" width="70" height="70">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:49%; height:0; width="70" height="70"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'height' property to zero
+ prevents the SVG from being displayed. You should not see any red when
+ viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--pct-auto--0-0.svg b/layout/reftests/svg/sizing/standalone--pct-auto--0-0.svg
new file mode 100644
index 0000000000..1615ea6d37
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--pct-auto--0-0.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" version="1.1"
+ style="width:49%; height:auto;" width="0" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:49%; height:auto; width="0" height="0"</title>
+
+ <desc>
+ This testcase checks that the intrinsic height will be taken as the used
+ height when the CSS 'height' property is set to 'auto', the 'width'
+ property is set to some other value, and there is no intrinsic ratio. Since
+ the 'height' attribute is set to zero, nothing should be displayed. You
+ should not see any red when viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--pct-auto--0-pct.svg b/layout/reftests/svg/sizing/standalone--pct-auto--0-pct.svg
new file mode 100644
index 0000000000..46b14f432c
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--pct-auto--0-pct.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" version="1.1"
+ style="width:49%; height:auto;" width="0" height="49%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:49%; height:auto; width="0" height="49%"</title>
+
+ <desc>
+ This testcase checks that the intrinsic height will be taken as the used
+ height when the CSS 'height' property is set to 'auto', the 'width'
+ property is set to some other value, and there is no intrinsic ratio. You
+ should see a blue rectangle 49% wide and 49% high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--pct-auto--0-px.svg b/layout/reftests/svg/sizing/standalone--pct-auto--0-px.svg
new file mode 100644
index 0000000000..44e82d75ad
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--pct-auto--0-px.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" version="1.1"
+ style="width:49%; height:auto;" width="0" height="70">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:49%; height:auto; width="0" height="70"</title>
+
+ <desc>
+ This testcase checks that the intrinsic height will be taken as the used
+ height when the CSS 'height' property is set to 'auto', the 'width'
+ property is set to some other value, and there is no intrinsic ratio. You
+ should see a blue rectangle 49% wide and 70px high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--pct-auto--pct-0.svg b/layout/reftests/svg/sizing/standalone--pct-auto--pct-0.svg
new file mode 100644
index 0000000000..bc9917af28
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--pct-auto--pct-0.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" version="1.1"
+ style="width:49%; height:auto;" width="10%" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:49%; height:auto; width="10%" height="0"</title>
+
+ <desc>
+ This testcase checks that the intrinsic height will be taken as the used
+ height when the CSS 'height' property is set to 'auto', the 'width'
+ property is set to some other value, and there is no intrinsic ratio. Since
+ the 'height' attribute is set to zero, nothing should be displayed. You
+ should not see any red when viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--pct-auto--pct-pct--viewBox.svg b/layout/reftests/svg/sizing/standalone--pct-auto--pct-pct--viewBox.svg
new file mode 100644
index 0000000000..f29e6fca75
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--pct-auto--pct-pct--viewBox.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"
+ style="width:49%; height:auto;" width="10%" height="20%"
+ viewBox="0 0 1 1">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:49%; height:auto; width="10%" height="20%" viewBox="0 0 1 1"</title>
+
+ <desc>
+ This testcase checks that the intrinsic ratio will be taken from the
+ 'viewBox' attribute when the CSS 'height' property is set to 'auto', the
+ 'width' property is set to some other value, and the 'width' and 'height'
+ attributes do not provide an intrinsic ratio. You should see a blue square
+ with sides 49% the height of the content area when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--pct-auto--pct-pct.svg b/layout/reftests/svg/sizing/standalone--pct-auto--pct-pct.svg
new file mode 100644
index 0000000000..6c0dae659d
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--pct-auto--pct-pct.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" version="1.1"
+ style="width:49%; height:auto;" width="10%" height="49%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:49%; height:auto; width="10%" height="49%"</title>
+
+ <desc>
+ This testcase checks that the intrinsic height will be taken as the used
+ height when the CSS 'height' property is set to 'auto', the 'width'
+ property is set to some other value, and there is no intrinsic ratio. You
+ should see a blue rectangle 49% wide and 49% high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--pct-auto--pct-px--viewBox.svg b/layout/reftests/svg/sizing/standalone--pct-auto--pct-px--viewBox.svg
new file mode 100644
index 0000000000..6622bd6f75
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--pct-auto--pct-px--viewBox.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"
+ style="width:49%; height:auto;" width="10%" height="70"
+ viewBox="0 0 1 1">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:49%; height:auto; width="10%" height="70" viewBox="0 0 1 1"</title>
+
+ <desc>
+ This testcase checks that the intrinsic ratio will be taken from the
+ 'viewBox' attribute when the CSS 'height' property is set to 'auto', the
+ 'width' property is set to some other value, and the 'width' and 'height'
+ attributes do not provide an intrinsic ratio. You should see a blue square
+ with sides 49% the height of the content area when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--pct-auto--pct-px.svg b/layout/reftests/svg/sizing/standalone--pct-auto--pct-px.svg
new file mode 100644
index 0000000000..c3bacfdff0
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--pct-auto--pct-px.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" version="1.1"
+ style="width:49%; height:auto;" width="10%" height="70">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:49%; height:auto; width="10%" height="70"</title>
+
+ <desc>
+ This testcase checks that the intrinsic height will be taken as the used
+ height when the CSS 'height' property is set to 'auto', the 'width'
+ property is set to some other value, and there is no intrinsic ratio. You
+ should see a blue rectangle 49% wide and 70px high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--pct-auto--px-0.svg b/layout/reftests/svg/sizing/standalone--pct-auto--px-0.svg
new file mode 100644
index 0000000000..058d60b0cd
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--pct-auto--px-0.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" version="1.1"
+ style="width:49%; height:auto;" width="70" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:49%; height:auto; width="70" height="0"</title>
+
+ <desc>
+ This testcase checks that the intrinsic height will be taken as the used
+ height when the CSS 'height' property is set to 'auto', the 'width'
+ property is set to some other value, and there is no intrinsic ratio. Since
+ the 'height' attribute is set to zero, nothing should be displayed. You
+ should not see any red when viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--pct-auto--px-pct--viewBox.svg b/layout/reftests/svg/sizing/standalone--pct-auto--px-pct--viewBox.svg
new file mode 100644
index 0000000000..9e5d41bf8a
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--pct-auto--px-pct--viewBox.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"
+ style="width:49%; height:auto;" width="70" height="20%"
+ viewBox="0 0 1 1">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:49%; height:auto; width="70" height="20%" viewBox="0 0 1 1"</title>
+
+ <desc>
+ This testcase checks that the intrinsic ratio will be taken from the
+ 'viewBox' attribute when the CSS 'height' property is set to 'auto', the
+ 'width' property is set to some other value, and the 'width' and 'height'
+ attributes do not provide an intrinsic ratio. You should see a blue square
+ with sides 49% the height of the content area when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--pct-auto--px-pct.svg b/layout/reftests/svg/sizing/standalone--pct-auto--px-pct.svg
new file mode 100644
index 0000000000..141fa273ff
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--pct-auto--px-pct.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" version="1.1"
+ style="width:49%; height:auto;" width="70" height="49%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:49%; height:auto; width="70" height="49%"</title>
+
+ <desc>
+ This testcase checks that the intrinsic height will be taken as the used
+ height when the CSS 'height' property is set to 'auto', the 'width'
+ property is set to some other value, and there is no intrinsic ratio. You
+ should see a blue rectangle 49% wide and 49% high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--pct-auto--px-px.svg b/layout/reftests/svg/sizing/standalone--pct-auto--px-px.svg
new file mode 100644
index 0000000000..ef19a9be11
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--pct-auto--px-px.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" version="1.1"
+ style="width:49%; height:auto;" width="70" height="70">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:49%; height:auto; width="70" height="70"</title>
+
+ <desc>
+ This testcase checks that the intrinsic ratio (1:1) will be used since the
+ CSS 'height' property is set to auto. You should see a blue square with
+ sides 49% the width of the content area when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--pct-pct--0-0.svg b/layout/reftests/svg/sizing/standalone--pct-pct--0-0.svg
new file mode 100644
index 0000000000..d13cb402eb
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--pct-pct--0-0.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" version="1.1"
+ style="width:49%; height:49%;" width="0" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:49%; height:49%; width="0" height="0"</title>
+
+ <desc>
+ This test checks that the CSS 'width' and 'height' properties take
+ precedence over the SVG 'width' and 'height' attributes. You should see a
+ blue rectangle 49% wide and 49% high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--pct-pct--0-pct.svg b/layout/reftests/svg/sizing/standalone--pct-pct--0-pct.svg
new file mode 100644
index 0000000000..42f674f1c7
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--pct-pct--0-pct.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" version="1.1"
+ style="width:49%; height:49%;" width="0" height="10%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:49%; height:49%; width="0" height="10%"</title>
+
+ <desc>
+ This test checks that the CSS 'width' and 'height' properties take
+ precedence over the SVG 'width' and 'height' attributes. You should see a
+ blue rectangle 49% wide and 49% high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--pct-pct--0-px.svg b/layout/reftests/svg/sizing/standalone--pct-pct--0-px.svg
new file mode 100644
index 0000000000..31c2d0f917
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--pct-pct--0-px.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" version="1.1"
+ style="width:49%; height:49%;" width="0" height="70">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:49%; height:49%; width="0" height="70"</title>
+
+ <desc>
+ This test checks that the CSS 'width' and 'height' properties take
+ precedence over the SVG 'width' and 'height' attributes. You should see a
+ blue rectangle 49% wide and 49% high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--pct-pct--pct-0.svg b/layout/reftests/svg/sizing/standalone--pct-pct--pct-0.svg
new file mode 100644
index 0000000000..6ebadb5fed
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--pct-pct--pct-0.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" version="1.1"
+ style="width:49%; height:49%;" width="10%" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:49%; height:49%; width="10%" height="0"</title>
+
+ <desc>
+ This test checks that the CSS 'width' and 'height' properties take
+ precedence over the SVG 'width' and 'height' attributes. You should see a
+ blue rectangle 49% wide and 49% high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--pct-pct--pct-pct.svg b/layout/reftests/svg/sizing/standalone--pct-pct--pct-pct.svg
new file mode 100644
index 0000000000..85ff4a96bd
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--pct-pct--pct-pct.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" version="1.1"
+ style="width:49%; height:49%;" width="10%" height="10%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:49%; height:49%; width="10%" height="10%"</title>
+
+ <desc>
+ This test checks that the CSS 'width' and 'height' properties take
+ precedence over the SVG 'width' and 'height' attributes. You should see a
+ blue rectangle 49% wide and 49% high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--pct-pct--pct-px.svg b/layout/reftests/svg/sizing/standalone--pct-pct--pct-px.svg
new file mode 100644
index 0000000000..7c5c13d7a8
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--pct-pct--pct-px.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" version="1.1"
+ style="width:49%; height:49%;" width="10%" height="70">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:49%; height:49%; width="10%" height="70"</title>
+
+ <desc>
+ This test checks that the CSS 'width' and 'height' properties take
+ precedence over the SVG 'width' and 'height' attributes. You should see a
+ blue rectangle 49% wide and 49% high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--pct-pct--px-0.svg b/layout/reftests/svg/sizing/standalone--pct-pct--px-0.svg
new file mode 100644
index 0000000000..08b549457d
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--pct-pct--px-0.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" version="1.1"
+ style="width:49%; height:49%;" width="70" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:49%; height:49%; width="70" height="0"</title>
+
+ <desc>
+ This test checks that the CSS 'width' and 'height' properties take
+ precedence over the SVG 'width' and 'height' attributes. You should see a
+ blue rectangle 49% wide and 49% high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--pct-pct--px-pct.svg b/layout/reftests/svg/sizing/standalone--pct-pct--px-pct.svg
new file mode 100644
index 0000000000..9c7cff9dac
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--pct-pct--px-pct.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" version="1.1"
+ style="width:49%; height:49%;" width="70" height="10%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:49%; height:49%; width="70" height="10%"</title>
+
+ <desc>
+ This test checks that the CSS 'width' and 'height' properties take
+ precedence over the SVG 'width' and 'height' attributes. You should see a
+ blue rectangle 49% wide and 49% high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--pct-pct--px-px.svg b/layout/reftests/svg/sizing/standalone--pct-pct--px-px.svg
new file mode 100644
index 0000000000..131719ec99
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--pct-pct--px-px.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" version="1.1"
+ style="width:49%; height:49%;" width="70" height="70">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:49%; height:49%; width="70" height="70"</title>
+
+ <desc>
+ This test checks that the CSS 'width' and 'height' properties take
+ precedence over the SVG 'width' and 'height' attributes. You should see a
+ blue rectangle 49% wide and 49% high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--pct-px--0-0.svg b/layout/reftests/svg/sizing/standalone--pct-px--0-0.svg
new file mode 100644
index 0000000000..7de487cc27
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--pct-px--0-0.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" version="1.1"
+ style="width:49%; height:70px;" width="0" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:49%; height:70px; width="0" height="0"</title>
+
+ <desc>
+ This test checks that the CSS 'width' and 'height' properties take
+ precedence over the SVG 'width' and 'height' attributes. You should see a
+ blue rectangle 49% wide and 70px high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--pct-px--0-pct.svg b/layout/reftests/svg/sizing/standalone--pct-px--0-pct.svg
new file mode 100644
index 0000000000..82e8c58ebe
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--pct-px--0-pct.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" version="1.1"
+ style="width:49%; height:70px;" width="0" height="49%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:49%; height:70px; width="0" height="49%"</title>
+
+ <desc>
+ This test checks that the CSS 'width' and 'height' properties take
+ precedence over the SVG 'width' and 'height' attributes. You should see a
+ blue rectangle 49% wide and 70px high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--pct-px--0-px.svg b/layout/reftests/svg/sizing/standalone--pct-px--0-px.svg
new file mode 100644
index 0000000000..165613e31a
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--pct-px--0-px.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" version="1.1"
+ style="width:49%; height:70px;" width="0" height="10">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:49%; height:70px; width="0" height="10"</title>
+
+ <desc>
+ This test checks that the CSS 'width' and 'height' properties take
+ precedence over the SVG 'width' and 'height' attributes. You should see a
+ blue rectangle 49% wide and 70px high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--pct-px--pct-0.svg b/layout/reftests/svg/sizing/standalone--pct-px--pct-0.svg
new file mode 100644
index 0000000000..e194b61893
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--pct-px--pct-0.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" version="1.1"
+ style="width:49%; height:70px;" width="10%" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:49%; height:70px; width="10%" height="0"</title>
+
+ <desc>
+ This test checks that the CSS 'width' and 'height' properties take
+ precedence over the SVG 'width' and 'height' attributes. You should see a
+ blue rectangle 49% wide and 70px high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--pct-px--pct-pct.svg b/layout/reftests/svg/sizing/standalone--pct-px--pct-pct.svg
new file mode 100644
index 0000000000..47a36ddbd9
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--pct-px--pct-pct.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" version="1.1"
+ style="width:49%; height:70px;" width="10%" height="49%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:49%; height:70px; width="10%" height="49%"</title>
+
+ <desc>
+ This test checks that the CSS 'width' and 'height' properties take
+ precedence over the SVG 'width' and 'height' attributes. You should see a
+ blue rectangle 49% wide and 70px high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--pct-px--pct-px.svg b/layout/reftests/svg/sizing/standalone--pct-px--pct-px.svg
new file mode 100644
index 0000000000..0c90cf5fbc
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--pct-px--pct-px.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" version="1.1"
+ style="width:49%; height:70px;" width="10%" height="10">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:49%; height:70px; width="10%" height="10"</title>
+
+ <desc>
+ This test checks that the CSS 'width' and 'height' properties take
+ precedence over the SVG 'width' and 'height' attributes. You should see a
+ blue rectangle 49% wide and 70px high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--pct-px--px-0.svg b/layout/reftests/svg/sizing/standalone--pct-px--px-0.svg
new file mode 100644
index 0000000000..892cd41ed3
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--pct-px--px-0.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" version="1.1"
+ style="width:49%; height:70px;" width="70" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:49%; height:70px; width="70" height="0"</title>
+
+ <desc>
+ This test checks that the CSS 'width' and 'height' properties take
+ precedence over the SVG 'width' and 'height' attributes. You should see a
+ blue rectangle 49% wide and 70px high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--pct-px--px-pct.svg b/layout/reftests/svg/sizing/standalone--pct-px--px-pct.svg
new file mode 100644
index 0000000000..bb95c9b6f0
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--pct-px--px-pct.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" version="1.1"
+ style="width:49%; height:70px;" width="70" height="49%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:49%; height:70px; width="70" height="49%"</title>
+
+ <desc>
+ This test checks that the CSS 'width' and 'height' properties take
+ precedence over the SVG 'width' and 'height' attributes. You should see a
+ blue rectangle 49% wide and 70px high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--pct-px--px-px.svg b/layout/reftests/svg/sizing/standalone--pct-px--px-px.svg
new file mode 100644
index 0000000000..c846ffda9c
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--pct-px--px-px.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" version="1.1"
+ style="width:49%; height:70px;" width="70" height="10">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:49%; height:70px; width="70" height="10"</title>
+
+ <desc>
+ This test checks that the CSS 'width' and 'height' properties take
+ precedence over the SVG 'width' and 'height' attributes. You should see a
+ blue rectangle 49% wide and 70px high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--px-0--0-0.svg b/layout/reftests/svg/sizing/standalone--px-0--0-0.svg
new file mode 100644
index 0000000000..16f26042ab
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--px-0--0-0.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" version="1.1"
+ style="width:70px; height:0;" width="0" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:70px; height:0; width="0" height="0"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'height' property to zero
+ prevents the SVG from being displayed. You should not see any red when
+ viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--px-0--0-pct.svg b/layout/reftests/svg/sizing/standalone--px-0--0-pct.svg
new file mode 100644
index 0000000000..ba8566af7a
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--px-0--0-pct.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" version="1.1"
+ style="width:70px; height:0;" width="0" height="49%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:70px; height:0; width="0" height="49%"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'height' property to zero
+ prevents the SVG from being displayed. You should not see any red when
+ viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--px-0--0-px.svg b/layout/reftests/svg/sizing/standalone--px-0--0-px.svg
new file mode 100644
index 0000000000..c227eb9887
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--px-0--0-px.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" version="1.1"
+ style="width:70px; height:0;" width="0" height="70">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:70px; height:0; width="0" height="70"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'height' property to zero
+ prevents the SVG from being displayed. You should not see any red when
+ viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--px-0--pct-0.svg b/layout/reftests/svg/sizing/standalone--px-0--pct-0.svg
new file mode 100644
index 0000000000..af2e327bc5
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--px-0--pct-0.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" version="1.1"
+ style="width:70px; height:0;" width="49%" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:70px; height:0; width="49%" height="0"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'height' property to zero
+ prevents the SVG from being displayed. You should not see any red when
+ viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--px-0--pct-pct.svg b/layout/reftests/svg/sizing/standalone--px-0--pct-pct.svg
new file mode 100644
index 0000000000..014341caa9
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--px-0--pct-pct.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" version="1.1"
+ style="width:70px; height:0;" width="49%" height="49%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:70px; height:0; width="49%" height="49%"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'height' property to zero
+ prevents the SVG from being displayed. You should not see any red when
+ viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--px-0--pct-px.svg b/layout/reftests/svg/sizing/standalone--px-0--pct-px.svg
new file mode 100644
index 0000000000..89d5a4725b
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--px-0--pct-px.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" version="1.1"
+ style="width:70px; height:0;" width="49%" height="70">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:70px; height:0; width="49%" height="70"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'height' property to zero
+ prevents the SVG from being displayed. You should not see any red when
+ viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--px-0--px-0.svg b/layout/reftests/svg/sizing/standalone--px-0--px-0.svg
new file mode 100644
index 0000000000..d9cded74b0
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--px-0--px-0.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" version="1.1"
+ style="width:70px; height:0;" width="10" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:70px; height:0; width="10" height="0"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'height' property to zero
+ prevents the SVG from being displayed. You should not see any red when
+ viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--px-0--px-pct.svg b/layout/reftests/svg/sizing/standalone--px-0--px-pct.svg
new file mode 100644
index 0000000000..ae3f2e83a3
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--px-0--px-pct.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" version="1.1"
+ style="width:70px; height:0;" width="10" height="49%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:70px; height:0; width="10" height="49%"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'height' property to zero
+ prevents the SVG from being displayed. You should not see any red when
+ viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--px-0--px-px.svg b/layout/reftests/svg/sizing/standalone--px-0--px-px.svg
new file mode 100644
index 0000000000..9fd20fe474
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--px-0--px-px.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" version="1.1"
+ style="width:70px; height:0;" width="10" height="70">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:70px; height:0; width="10" height="70"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'height' property to zero
+ prevents the SVG from being displayed. You should not see any red when
+ viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--px-auto--0-0.svg b/layout/reftests/svg/sizing/standalone--px-auto--0-0.svg
new file mode 100644
index 0000000000..a5dceb2643
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--px-auto--0-0.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" version="1.1"
+ style="width:70px; height:auto;" width="0" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:70px; height:auto; width="0" height="0"</title>
+
+ <desc>
+ This testcase checks that the intrinsic height will be taken as the used
+ height when the CSS 'height' property is set to 'auto', the 'width'
+ property is set to some other value, and there is no intrinsic ratio. Since
+ the 'height' attribute is set to zero, nothing should be displayed. You
+ should not see any red when viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--px-auto--0-pct.svg b/layout/reftests/svg/sizing/standalone--px-auto--0-pct.svg
new file mode 100644
index 0000000000..7fe4ee8275
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--px-auto--0-pct.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" version="1.1"
+ style="width:70px; height:auto;" width="0" height="49%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:70px; height:auto; width="0" height="49%"</title>
+
+ <desc>
+ This testcase checks that the intrinsic height will be taken as the used
+ height when the CSS 'height' property is set to 'auto', the 'width'
+ property is set to some other value, and there is no intrinsic ratio. You
+ should see a blue rectangle 70px wide and 49% high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--px-auto--0-px.svg b/layout/reftests/svg/sizing/standalone--px-auto--0-px.svg
new file mode 100644
index 0000000000..06b4bd45ba
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--px-auto--0-px.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" version="1.1"
+ style="width:70px; height:auto;" width="0" height="70">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:70px; height:auto; width="0" height="70"</title>
+
+ <desc>
+ This testcase checks that the intrinsic height will be taken as the used
+ height when the CSS 'height' property is set to 'auto', the 'width'
+ property is set to some other value, and there is no intrinsic ratio. You
+ should see a blue rectangle 70px wide and 70px high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--px-auto--pct-0.svg b/layout/reftests/svg/sizing/standalone--px-auto--pct-0.svg
new file mode 100644
index 0000000000..23db638fb4
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--px-auto--pct-0.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" version="1.1"
+ style="width:70px; height:auto;" width="49%" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:70px; height:auto; width="49%" height="0"</title>
+
+ <desc>
+ This testcase checks that the intrinsic height will be taken as the used
+ height when the CSS 'height' property is set to 'auto', the 'width'
+ property is set to some other value, and there is no intrinsic ratio. Since
+ the 'height' attribute is set to zero, nothing should be displayed. You
+ should not see any red when viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--px-auto--pct-pct--viewBox.svg b/layout/reftests/svg/sizing/standalone--px-auto--pct-pct--viewBox.svg
new file mode 100644
index 0000000000..3551c67b8a
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--px-auto--pct-pct--viewBox.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"
+ style="width:70px; height:auto;" width="20%" height="49%"
+ viewBox="0 0 1 1">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:70px; height:auto; width="20%" height="49%" viewBox="0 0 1 1"</title>
+
+ <desc>
+ This testcase checks that the intrinsic ratio will be taken from the
+ 'viewBox' attribute when the CSS 'height' property is set to 'auto', the
+ 'width' property is set to some other value, and the 'width' and 'height'
+ attributes do not provide an intrinsic ratio. You should see a blue square
+ with sides of length 70px when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--px-auto--pct-pct.svg b/layout/reftests/svg/sizing/standalone--px-auto--pct-pct.svg
new file mode 100644
index 0000000000..f823a264fc
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--px-auto--pct-pct.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" version="1.1"
+ style="width:70px; height:auto;" width="49%" height="49%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:70px; height:auto; width="49%" height="49%"</title>
+
+ <desc>
+ This testcase checks that the intrinsic height will be taken as the used
+ height when the CSS 'height' property is set to 'auto', the 'width'
+ property is set to some other value, and there is no intrinsic ratio. You
+ should see a blue rectangle 70px wide and 49% high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--px-auto--pct-px--viewBox.svg b/layout/reftests/svg/sizing/standalone--px-auto--pct-px--viewBox.svg
new file mode 100644
index 0000000000..d311a1681e
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--px-auto--pct-px--viewBox.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"
+ style="width:70px; height:auto;" width="49%" height="10"
+ viewBox="0 0 1 1">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:70px; height:auto; width="49%" height="10" viewBox="0 0 1 1"</title>
+
+ <desc>
+ This testcase checks that the intrinsic ratio will be taken from the
+ 'viewBox' attribute when the CSS 'height' property is set to 'auto', the
+ 'width' property is set to some other value, and the 'width' and 'height'
+ attributes do not provide an intrinsic ratio. You should see a blue square
+ with sides of length 70px when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--px-auto--pct-px.svg b/layout/reftests/svg/sizing/standalone--px-auto--pct-px.svg
new file mode 100644
index 0000000000..881a1f29c0
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--px-auto--pct-px.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" version="1.1"
+ style="width:70px; height:auto;" width="49%" height="70">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:70px; height:auto; width="49%" height="70"</title>
+
+ <desc>
+ This testcase checks that the intrinsic height will be taken as the used
+ height when the CSS 'height' property is set to 'auto', the 'width'
+ property is set to some other value, and there is no intrinsic ratio. You
+ should see a blue rectangle 70px wide and 70px high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--px-auto--px-0.svg b/layout/reftests/svg/sizing/standalone--px-auto--px-0.svg
new file mode 100644
index 0000000000..8e62aff883
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--px-auto--px-0.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" version="1.1"
+ style="width:70px; height:auto;" width="10" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:70px; height:auto; width="10" height="0"</title>
+
+ <desc>
+ This testcase checks that the intrinsic height will be taken as the used
+ height when the CSS 'height' property is set to 'auto', the 'width'
+ property is set to some other value, and there is no intrinsic ratio. Since
+ the 'height' attribute is set to zero, nothing should be displayed. You
+ should not see any red when viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--px-auto--px-pct--viewBox.svg b/layout/reftests/svg/sizing/standalone--px-auto--px-pct--viewBox.svg
new file mode 100644
index 0000000000..79d6e39e70
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--px-auto--px-pct--viewBox.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"
+ style="width:70px; height:auto;" width="10" height="49%"
+ viewBox="0 0 1 1">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:70px; height:auto; width="10" height="49%" viewBox="0 0 1 1"</title>
+
+ <desc>
+ This testcase checks that the intrinsic ratio will be taken from the
+ 'viewBox' attribute when the CSS 'height' property is set to 'auto', the
+ 'width' property is set to some other value, and the 'width' and 'height'
+ attributes do not provide an intrinsic ratio. You should see a blue square
+ with sides of length 70px when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--px-auto--px-pct.svg b/layout/reftests/svg/sizing/standalone--px-auto--px-pct.svg
new file mode 100644
index 0000000000..af42e2f270
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--px-auto--px-pct.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" version="1.1"
+ style="width:70px; height:auto;" width="10" height="49%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:70px; height:auto; width="10" height="49%"</title>
+
+ <desc>
+ This testcase checks that the intrinsic height will be taken as the used
+ height when the CSS 'height' property is set to 'auto', the 'width'
+ property is set to some other value, and there is no intrinsic ratio. You
+ should see a blue rectangle 70px wide and 49% high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--px-auto--px-px.svg b/layout/reftests/svg/sizing/standalone--px-auto--px-px.svg
new file mode 100644
index 0000000000..ce7872b456
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--px-auto--px-px.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" version="1.1"
+ style="width:70px; height:auto;" width="1" height="1">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:70px; height:auto; width="1" height="1"</title>
+
+ <desc>
+ This testcase checks that the intrinsic ratio (1:1) will be used since the
+ CSS 'height' property is set to auto. You should see a blue square with
+ sides of length 70px when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--px-pct--0-0.svg b/layout/reftests/svg/sizing/standalone--px-pct--0-0.svg
new file mode 100644
index 0000000000..66c7159c52
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--px-pct--0-0.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" version="1.1"
+ style="width:70px; height:49%;" width="0" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:70px; height:49%; width="0" height="0"</title>
+
+ <desc>
+ This test checks that the CSS 'width' and 'height' properties take
+ precedence over the SVG 'width' and 'height' attributes. You should see a
+ blue rectangle 70px wide and 49% high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--px-pct--0-pct.svg b/layout/reftests/svg/sizing/standalone--px-pct--0-pct.svg
new file mode 100644
index 0000000000..43b2fe4f3a
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--px-pct--0-pct.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" version="1.1"
+ style="width:70px; height:49%;" width="0" height="10%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:70px; height:49%; width="0" height="10%"</title>
+
+ <desc>
+ This test checks that the CSS 'width' and 'height' properties take
+ precedence over the SVG 'width' and 'height' attributes. You should see a
+ blue rectangle 70px wide and 49% high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--px-pct--0-px.svg b/layout/reftests/svg/sizing/standalone--px-pct--0-px.svg
new file mode 100644
index 0000000000..caa951ca20
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--px-pct--0-px.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" version="1.1"
+ style="width:70px; height:49%;" width="0" height="70">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:70px; height:49%; width="0" height="70"</title>
+
+ <desc>
+ This test checks that the CSS 'width' and 'height' properties take
+ precedence over the SVG 'width' and 'height' attributes. You should see a
+ blue rectangle 70px wide and 49% high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--px-pct--pct-0.svg b/layout/reftests/svg/sizing/standalone--px-pct--pct-0.svg
new file mode 100644
index 0000000000..5dd6e8cf4f
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--px-pct--pct-0.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" version="1.1"
+ style="width:70px; height:49%;" width="49%" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:70px; height:49%; width="49%" height="0"</title>
+
+ <desc>
+ This test checks that the CSS 'width' and 'height' properties take
+ precedence over the SVG 'width' and 'height' attributes. You should see a
+ blue rectangle 70px wide and 49% high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--px-pct--pct-pct.svg b/layout/reftests/svg/sizing/standalone--px-pct--pct-pct.svg
new file mode 100644
index 0000000000..bca83300e1
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--px-pct--pct-pct.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" version="1.1"
+ style="width:70px; height:49%;" width="49%" height="10%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:70px; height:49%; width="49%" height="10%"</title>
+
+ <desc>
+ This test checks that the CSS 'width' and 'height' properties take
+ precedence over the SVG 'width' and 'height' attributes. You should see a
+ blue rectangle 70px wide and 49% high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--px-pct--pct-px.svg b/layout/reftests/svg/sizing/standalone--px-pct--pct-px.svg
new file mode 100644
index 0000000000..7e5036407c
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--px-pct--pct-px.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" version="1.1"
+ style="width:70px; height:49%;" width="49%" height="70">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:70px; height:49%; width="49%" height="70"</title>
+
+ <desc>
+ This test checks that the CSS 'width' and 'height' properties take
+ precedence over the SVG 'width' and 'height' attributes. You should see a
+ blue rectangle 70px wide and 49% high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--px-pct--px-0.svg b/layout/reftests/svg/sizing/standalone--px-pct--px-0.svg
new file mode 100644
index 0000000000..b81a35d96d
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--px-pct--px-0.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" version="1.1"
+ style="width:70px; height:49%;" width="10" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:70px; height:49%; width="10" height="0"</title>
+
+ <desc>
+ This test checks that the CSS 'width' and 'height' properties take
+ precedence over the SVG 'width' and 'height' attributes. You should see a
+ blue rectangle 70px wide and 49% high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--px-pct--px-pct.svg b/layout/reftests/svg/sizing/standalone--px-pct--px-pct.svg
new file mode 100644
index 0000000000..9a0cabbf11
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--px-pct--px-pct.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" version="1.1"
+ style="width:70px; height:49%;" width="10" height="10%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:70px; height:49%; width="10" height="10%"</title>
+
+ <desc>
+ This test checks that the CSS 'width' and 'height' properties take
+ precedence over the SVG 'width' and 'height' attributes. You should see a
+ blue rectangle 70px wide and 49% high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--px-pct--px-px.svg b/layout/reftests/svg/sizing/standalone--px-pct--px-px.svg
new file mode 100644
index 0000000000..85f4bc946a
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--px-pct--px-px.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" version="1.1"
+ style="width:70px; height:49%;" width="10" height="70">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:70px; height:49%; width="10" height="70"</title>
+
+ <desc>
+ This test checks that the CSS 'width' and 'height' properties take
+ precedence over the SVG 'width' and 'height' attributes. You should see a
+ blue rectangle 70px wide and 49% high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--px-px--0-0.svg b/layout/reftests/svg/sizing/standalone--px-px--0-0.svg
new file mode 100644
index 0000000000..5cd0d5cd2b
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--px-px--0-0.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" version="1.1"
+ style="width:70px; height:70px;" width="0" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:70px; height:70px; width="0" height="0"</title>
+
+ <desc>
+ This test checks that the CSS 'width' and 'height' properties take
+ precedence over the SVG 'width' and 'height' attributes. You should see a
+ blue rectangle 70px wide and 70px high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--px-px--0-pct.svg b/layout/reftests/svg/sizing/standalone--px-px--0-pct.svg
new file mode 100644
index 0000000000..f9c54e45af
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--px-px--0-pct.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" version="1.1"
+ style="width:70px; height:70px;" width="0" height="49%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:70px; height:70px; width="0" height="49%"</title>
+
+ <desc>
+ This test checks that the CSS 'width' and 'height' properties take
+ precedence over the SVG 'width' and 'height' attributes. You should see a
+ blue rectangle 70px wide and 70px high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--px-px--0-px.svg b/layout/reftests/svg/sizing/standalone--px-px--0-px.svg
new file mode 100644
index 0000000000..1c802d12e2
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--px-px--0-px.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" version="1.1"
+ style="width:70px; height:70px;" width="0" height="10">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:70px; height:70px; width="0" height="10"</title>
+
+ <desc>
+ This test checks that the CSS 'width' and 'height' properties take
+ precedence over the SVG 'width' and 'height' attributes. You should see a
+ blue rectangle 70px wide and 70px high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--px-px--pct-0.svg b/layout/reftests/svg/sizing/standalone--px-px--pct-0.svg
new file mode 100644
index 0000000000..c311b88edd
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--px-px--pct-0.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" version="1.1"
+ style="width:70px; height:70px;" width="49%" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:70px; height:70px; width="49%" height="0"</title>
+
+ <desc>
+ This test checks that the CSS 'width' and 'height' properties take
+ precedence over the SVG 'width' and 'height' attributes. You should see a
+ blue rectangle 70px wide and 70px high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--px-px--pct-pct.svg b/layout/reftests/svg/sizing/standalone--px-px--pct-pct.svg
new file mode 100644
index 0000000000..3f89fe4e13
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--px-px--pct-pct.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" version="1.1"
+ style="width:70px; height:70px;" width="49%" height="49%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:70px; height:70px; width="49%" height="49%"</title>
+
+ <desc>
+ This test checks that the CSS 'width' and 'height' properties take
+ precedence over the SVG 'width' and 'height' attributes. You should see a
+ blue rectangle 70px wide and 70px high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--px-px--pct-px.svg b/layout/reftests/svg/sizing/standalone--px-px--pct-px.svg
new file mode 100644
index 0000000000..567bff9538
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--px-px--pct-px.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" version="1.1"
+ style="width:70px; height:70px;" width="49%" height="10">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:70px; height:70px; width="49%" height="10"</title>
+
+ <desc>
+ This test checks that the CSS 'width' and 'height' properties take
+ precedence over the SVG 'width' and 'height' attributes. You should see a
+ blue rectangle 70px wide and 70px high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--px-px--px-0.svg b/layout/reftests/svg/sizing/standalone--px-px--px-0.svg
new file mode 100644
index 0000000000..d33e353918
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--px-px--px-0.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" version="1.1"
+ style="width:70px; height:70px;" width="10" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:70px; height:70px; width="10" height="0"</title>
+
+ <desc>
+ This test checks that the CSS 'width' and 'height' properties take
+ precedence over the SVG 'width' and 'height' attributes. You should see a
+ blue rectangle 70px wide and 70px high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--px-px--px-pct.svg b/layout/reftests/svg/sizing/standalone--px-px--px-pct.svg
new file mode 100644
index 0000000000..94d3d6e9de
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--px-px--px-pct.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" version="1.1"
+ style="width:70px; height:70px;" width="10" height="49%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:70px; height:70px; width="10" height="49%"</title>
+
+ <desc>
+ This test checks that the CSS 'width' and 'height' properties take
+ precedence over the SVG 'width' and 'height' attributes. You should see a
+ blue rectangle 70px wide and 70px high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--px-px--px-px.svg b/layout/reftests/svg/sizing/standalone--px-px--px-px.svg
new file mode 100644
index 0000000000..fbd9142af8
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone--px-px--px-px.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" version="1.1"
+ style="width:70px; height:70px;" width="10" height="10">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:70px; height:70px; width="10" height="10"</title>
+
+ <desc>
+ This test checks that the CSS 'width' and 'height' properties take
+ precedence over the SVG 'width' and 'height' attributes. You should see a
+ blue rectangle 70px wide and 70px high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone-sanity-height-150px.svg b/layout/reftests/svg/sizing/standalone-sanity-height-150px.svg
new file mode 100644
index 0000000000..b460f4b808
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone-sanity-height-150px.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>Sanity check percentage width</title>
+ <rect width="100%" height="150" fill="blue"/>
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone-sanity-height-pct.svg b/layout/reftests/svg/sizing/standalone-sanity-height-pct.svg
new file mode 100644
index 0000000000..113613fa36
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone-sanity-height-pct.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>Sanity check percentage width</title>
+ <rect width="100%" height="49%" fill="blue"/>
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone-sanity-height-px.svg b/layout/reftests/svg/sizing/standalone-sanity-height-px.svg
new file mode 100644
index 0000000000..01c72df5a8
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone-sanity-height-px.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>Sanity check percentage width</title>
+ <rect width="100%" height="70" fill="blue"/>
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone-sanity-width-300px.svg b/layout/reftests/svg/sizing/standalone-sanity-width-300px.svg
new file mode 100644
index 0000000000..318bf38af2
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone-sanity-width-300px.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>Sanity check percentage width</title>
+ <rect width="300" height="100%" fill="blue"/>
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone-sanity-width-pct.svg b/layout/reftests/svg/sizing/standalone-sanity-width-pct.svg
new file mode 100644
index 0000000000..050cad0943
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone-sanity-width-pct.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>Sanity check percentage width</title>
+ <rect width="49%" height="100%" fill="blue"/>
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone-sanity-width-px.svg b/layout/reftests/svg/sizing/standalone-sanity-width-px.svg
new file mode 100644
index 0000000000..2abcc29dd6
--- /dev/null
+++ b/layout/reftests/svg/sizing/standalone-sanity-width-px.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>Sanity check percentage width</title>
+ <rect width="70" height="100%" fill="blue"/>
+</svg>
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>
+
diff --git a/layout/reftests/svg/stroke-dasharray-01-ref.svg b/layout/reftests/svg/stroke-dasharray-01-ref.svg
new file mode 100644
index 0000000000..78d9c2d518
--- /dev/null
+++ b/layout/reftests/svg/stroke-dasharray-01-ref.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">
+ <title>Reference for a stroke with a dasharray whose gaps add up to 0 still painting</title>
+ <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=885585 -->
+
+ <g fill="none" stroke="black" stroke-width="2">
+ <path d="M 100,100 v 100"/>
+ <path d="M 110,100 h 100"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/stroke-dasharray-01.svg b/layout/reftests/svg/stroke-dasharray-01.svg
new file mode 100644
index 0000000000..39746863ec
--- /dev/null
+++ b/layout/reftests/svg/stroke-dasharray-01.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">
+ <title>Test for a stroke with a dasharray whose gaps add up to 0 still painting</title>
+ <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=885585 -->
+
+ <g fill="none" stroke="black" stroke-width="2" stroke-dasharray="10 0">
+ <path d="M 100,100 v 100"/>
+ <path d="M 110,100 h 100"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/stroke-dasharray-02.svg b/layout/reftests/svg/stroke-dasharray-02.svg
new file mode 100644
index 0000000000..147498f4e3
--- /dev/null
+++ b/layout/reftests/svg/stroke-dasharray-02.svg
@@ -0,0 +1,48 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+
+ <title>Test the start point and direction of dashing on circle and ellipse</title>
+
+ <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=944704 -->
+
+ <rect width="100%" height="100%" fill="lime"/>
+
+ <!-- Test circle element dashes cover two red circles -->
+ <circle cx="100" cy="62" r="8" fill="red"/>
+ <circle cx="66" cy="98" r="8" fill="red"/>
+ <circle cx="50" cy="50" r="50" fill="none" stroke="lime" stroke-width="30" stroke-dasharray="25 25 25 100000"/>
+
+ <!-- Sanity test to check that two circles cover circle element dashes (i.e. that the previous check didn't pass because the stroke was solid) -->
+ <circle cx="200" cy="50" r="50" fill="none" stroke="red" stroke-width="10" stroke-dasharray="10 40 10 100000"/>
+ <circle cx="250" cy="56" r="11" fill="lime"/>
+ <circle cx="223" cy="96" r="11" fill="lime"/>
+
+ <!-- Test ellipse element dashes cover two red circles -->
+ <circle cx="95" cy="211" r="8" fill="red"/>
+ <circle cx="47" cy="225" r="8" fill="red"/>
+ <ellipse cx="50" cy="200" rx="50" ry="25" fill="none" stroke="lime" stroke-width="25" stroke-dasharray="25 25 25 100000"/>
+
+ <!-- Sanity test to check that two circles cover ellipse element dashes (i.e. that the previous check didn't pass because the stroke was solid) -->
+ <ellipse cx="200" cy="200" rx="50" ry="25" fill="none" stroke="red" stroke-width="10" stroke-dasharray="10 40 10 100000"/>
+ <circle cx="250" cy="205" r="11" fill="lime"/>
+ <circle cx="206" cy="225" r="11" fill="lime"/>
+
+ <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=1131264 -->
+ <!-- small circles take a different code path -->
+
+ <!-- Test circle element dashes cover two red circles -->
+ <circle cx="125" cy="325" r="8" fill="red"/>
+ <circle cx="50" cy="380" r="8" fill="red"/>
+ <circle cx="0" cy="0" r=".0008" fill="none" stroke="lime" stroke-width=".0003" stroke-dasharray=".0005 .0005 .0005 100"
+ transform="translate(50, 300) scale(1e5, 1e5)"/>
+
+ <!-- Sanity test to check that two circles cover circle element dashes (i.e. that the previous check didn't pass because the stroke was solid) -->
+ <circle cx="0" cy="0" r=".0008" fill="none" stroke="red" stroke-width=".0001" stroke-dasharray=".0001 .0005 .0001 100"
+ transform="translate(180, 300) scale(1e5, 1e5)"/>
+ <circle cx="260" cy="305" r="14" fill="lime"/>
+ <circle cx="235" cy="358" r="14" fill="lime"/>
+
+</svg>
diff --git a/layout/reftests/svg/stroke-dasharray-03.svg b/layout/reftests/svg/stroke-dasharray-03.svg
new file mode 100644
index 0000000000..b8dd8928c2
--- /dev/null
+++ b/layout/reftests/svg/stroke-dasharray-03.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">
+
+ <title>Test the start point and direction of dashing on rect</title>
+
+ <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=1122578 -->
+
+ <rect width="100%" height="100%" fill="lime"/>
+
+ <rect x="20" y="20" width="100" height="60" fill="none" stroke="red" stroke-width="10" stroke-dasharray="120,10000"/>
+ <path d="M20,20 h100 v20" fill="none" stroke="lime" stroke-width="10"/>
+
+ <rect x="20" y="100" width="100" height="60" fill="none" stroke="red" stroke-width="10" stroke-dasharray="120,10000" rx="10" ry="10"/>
+ <path d="M30,100 h80 a10,10 0 0 1 10,10 v25" fill="none" stroke="lime" stroke-width="14"/>
+
+</svg>
+
diff --git a/layout/reftests/svg/stroke-dasharray-and-pathLength-01.svg b/layout/reftests/svg/stroke-dasharray-and-pathLength-01.svg
new file mode 100644
index 0000000000..77f5a4d1b3
--- /dev/null
+++ b/layout/reftests/svg/stroke-dasharray-and-pathLength-01.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">
+ <title>Test stroke-dasharray with pathLength and scaling</title>
+ <rect width="100%" height="100%" fill="lime"/>
+ <!--
+ Here we set the 'pathLength' to twice the actual length of the path,
+ which should cause the stroke-dasharray values to be scaled down by one
+ half. Visually, this should effectively cancel out the 2x scaling along
+ the x-axis introduced by the 'transform' attribute.
+ -->
+ <path d="M0.5,10 L100.5,10" stroke="red" stroke-width="18" stroke-dasharray="18 22" pathLength="200" transform="scale(2,1)"/>
+ <rect x="1" y="1" width="18" height="18" fill="lime"/>
+ <rect x="41" y="1" width="18" height="18" fill="lime"/>
+ <rect x="81" y="1" width="18" height="18" fill="lime"/>
+ <rect x="121" y="1" width="18" height="18" fill="lime"/>
+ <rect x="161" y="1" width="18" height="18" fill="lime"/>
+</svg>
diff --git a/layout/reftests/svg/stroke-dasharray-and-text-01-ref.svg b/layout/reftests/svg/stroke-dasharray-and-text-01-ref.svg
new file mode 100644
index 0000000000..77f9e01141
--- /dev/null
+++ b/layout/reftests/svg/stroke-dasharray-and-text-01-ref.svg
@@ -0,0 +1,10 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+ <title>Test stroke-dasharray with text and zooming</title>
+ <g fill="none" stroke-width="2" stroke="black" stroke-dasharray="64" stroke-linejoin="round" stroke-linecap="round">
+ <text font-size="128" x="128" y="128">|</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/stroke-dasharray-and-text-01.svg b/layout/reftests/svg/stroke-dasharray-and-text-01.svg
new file mode 100644
index 0000000000..6e7b165f26
--- /dev/null
+++ b/layout/reftests/svg/stroke-dasharray-and-text-01.svg
@@ -0,0 +1,11 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" reftest-zoom="2"
+ width="50%" height="50%">
+ <title>Test stroke-dasharray with text and zooming</title>
+ <g fill="none" stroke-width="1" stroke="black" stroke-dasharray="32" stroke-linejoin="round" stroke-linecap="round">
+ <text font-size="64" x="64" y="64">|</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/stroke-dashoffset-01.svg b/layout/reftests/svg/stroke-dashoffset-01.svg
new file mode 100644
index 0000000000..e79325c4eb
--- /dev/null
+++ b/layout/reftests/svg/stroke-dashoffset-01.svg
@@ -0,0 +1,30 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+ <title>Test that stroke-dashoffset is independent of stroke-width</title>
+ <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=885585 -->
+
+ <rect width="100%" height="100%" fill="lime"/>
+
+ <path d="M10,30 h300" stroke="red" stroke-width="40" stroke-dashoffset="10" stroke-dasharray="50"/>
+ <path d="M10,70 h300" stroke="red" stroke-width="20" stroke-dashoffset="20" stroke-dasharray="50"/>
+ <path d="M10,95 h300" stroke="red" stroke-width="10" stroke-dashoffset="40" stroke-dasharray="50"/>
+
+ <!-- if the stroke-dashoffset is independent of the stroke width then these should cover what's above -->
+ <rect x="10" y="10" width="40" height="40" fill="lime"/>
+ <rect x="100" y="10" width="50" height="40" fill="lime"/>
+ <rect x="200" y="10" width="50" height="40" fill="lime"/>
+ <rect x="300" y="10" width="10" height="40" fill="lime"/>
+
+ <rect x="10" y="60" width="30" height="20" fill="lime"/>
+ <rect x="90" y="60" width="50" height="20" fill="lime"/>
+ <rect x="190" y="60" width="50" height="20" fill="lime"/>
+ <rect x="290" y="60" width="20" height="20" fill="lime"/>
+
+ <rect x="10" y="90" width="10" height="10" fill="lime"/>
+ <rect x="70" y="90" width="50" height="10" fill="lime"/>
+ <rect x="170" y="90" width="50" height="10" fill="lime"/>
+ <rect x="270" y="90" width="40" height="10" fill="lime"/>
+</svg>
diff --git a/layout/reftests/svg/stroke-dashoffset-and-pathLength-01.svg b/layout/reftests/svg/stroke-dashoffset-and-pathLength-01.svg
new file mode 100644
index 0000000000..2a009961d4
--- /dev/null
+++ b/layout/reftests/svg/stroke-dashoffset-and-pathLength-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">
+ <title>Test stroke-dashoffset with pathLength</title>
+ <!--
+ The path is much longer than 100 user units, so if the pathLength is not
+ factored into the stroke-dashoffset calculation, the stroke will be visible.
+ A correct implementation will see the first dash pushed off the end of the
+ path which will mean that the path does not display at all.
+ -->
+ <style>
+ path {
+ fill: none;
+ stroke-width: 5;
+ stroke: red;
+ stroke-dasharray: 100;
+ stroke-dashoffset: 100;
+ }
+ </style>
+ <rect width="100%" height="100%" fill="lime"/>
+
+ <path pathLength="100" d="M175,25 A150,150,0,1,1,175,325 A150,150,0,1,1,175,25"/>
+</svg>
diff --git a/layout/reftests/svg/stroke-linecap-circle-ellipse-01-ref.svg b/layout/reftests/svg/stroke-linecap-circle-ellipse-01-ref.svg
new file mode 100644
index 0000000000..47065f0e87
--- /dev/null
+++ b/layout/reftests/svg/stroke-linecap-circle-ellipse-01-ref.svg
@@ -0,0 +1,14 @@
+<!--
+ 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 to test that stroke-linecap:"square" is ignored on circles and ellipses</title>
+ <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=1178159 -->
+
+ <circle cx="300" cy="300" r="200" stroke="black" fill="none"
+ stroke-width="80"/>
+
+ <ellipse cx="300" cy="750" rx="150" ry="100" fill="none"
+ stroke="blue" stroke-width="80"/>
+</svg>
diff --git a/layout/reftests/svg/stroke-linecap-circle-ellipse-01.svg b/layout/reftests/svg/stroke-linecap-circle-ellipse-01.svg
new file mode 100644
index 0000000000..81fc433271
--- /dev/null
+++ b/layout/reftests/svg/stroke-linecap-circle-ellipse-01.svg
@@ -0,0 +1,14 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+ <title>Test that stroke-linecap:"square" is ignored on circles and ellipses</title>
+ <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=1178159 -->
+
+ <circle cx="300" cy="300" r="200" stroke="black" fill="none"
+ stroke-width="80" stroke-linecap="square"/>
+
+ <ellipse cx="300" cy="750" rx="150" ry="100" fill="none"
+ stroke="blue" stroke-width="80" stroke-linecap="square"/>
+</svg>
diff --git a/layout/reftests/svg/stroke-linecap-circle-ellipse-dashed-01.svg b/layout/reftests/svg/stroke-linecap-circle-ellipse-dashed-01.svg
new file mode 100644
index 0000000000..4ea509fbd6
--- /dev/null
+++ b/layout/reftests/svg/stroke-linecap-circle-ellipse-dashed-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">
+ <title>Test that stroke-linecap != "butt" is not ignored on circles and
+ ellipses with dashed stroke</title>
+ <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=1242147 -->
+
+ <rect width="100%" height="100%" fill="lime" />
+
+ <circle cx="100" cy="100" r="25" fill="red" />
+ <circle cx="500" cy="100" r="25" fill="red" />
+ <!-- a half circle -->
+ <circle cx="300" cy="100" r="200" stroke="lime" fill="none"
+ stroke-width="80" stroke-linecap="round"
+ stroke-dasharray="628.318 1000" />
+
+ <path d="M 100,400 l 0,0" stroke="red" stroke-width="50"
+ stroke-linecap="square" />
+ <path d="M 500,400 l 0,0" stroke="red" stroke-width="50"
+ stroke-linecap="square" />
+ <!-- another half circle -->
+ <ellipse cx="300" cy="400" rx="200" ry="200" fill="none"
+ stroke="lime" stroke-width="80" stroke-linecap="square"
+ stroke-dasharray="628.318 1000" />
+
+</svg>
diff --git a/layout/reftests/svg/stroke-linecap-round-w-zero-length-segs-01.svg b/layout/reftests/svg/stroke-linecap-round-w-zero-length-segs-01.svg
new file mode 100644
index 0000000000..5a6c6ad2c2
--- /dev/null
+++ b/layout/reftests/svg/stroke-linecap-round-w-zero-length-segs-01.svg
@@ -0,0 +1,169 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+
+ <title>Test 'stroke-linecap: round' with zero length path segments</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=1075399 for paths and
+ https://bugzilla.mozilla.org/show_bug.cgi?id=1187770 for lines -->
+
+ <style>
+
+path, line {
+ stroke-width: 20px;
+ stroke-linecap: round;
+}
+
+circle {
+ fill: red;
+}
+
+/* expect lime circles to cover red circles */
+path.circles-expected, line.circles-expected {
+ stroke: lime;
+}
+
+path.circles-not-expected {
+ stroke: red;
+}
+
+/* thicker stroke to cover circles-not-expected paths */
+path.coverer {
+ stroke: lime;
+ stroke-width: 24px;
+}
+
+/* to show edges of shapes to help in debugging:
+g > circle {
+ stroke: red;
+ stroke-width: 5px;
+}
+path.coverer {
+ stroke: lime;
+ stroke-width: 18px;
+}
+*/
+
+ </style>
+
+ <rect width="100%" height="100%" style="fill:lime"/>
+
+ <!-- Column 1: test single segment zero-length subpaths: -->
+
+ <g transform="translate(25,25)">
+ <circle cx="0" cy="0" r="8"/>
+ <circle cx="50" cy="50" r="8"/>
+ <circle cx="100" cy="100" r="8"/>
+ <path class="circles-expected" d="M0,0 L0,0 M20,20 L30,30 M50,50 L50,50 M70,70 L80,80 M100,100 L100,100"/>
+ </g>
+
+ <g transform="translate(25,75)">
+ <circle cx="0" cy="0" r="8"/>
+ <circle cx="50" cy="50" r="8"/>
+ <circle cx="100" cy="100" r="8"/>
+ <path class="circles-expected" d="M0,0 C0,0 0,0 0,0 M20,20 L30,30 M50,50 C50,50 50,50 50,50 M70,70 L80,80 M100,100 C100,100 100,100 100,100"/>
+ </g>
+
+ <g transform="translate(25,125)">
+ <circle cx="0" cy="0" r="8"/>
+ <circle cx="50" cy="50" r="8"/>
+ <circle cx="100" cy="100" r="8"/>
+ <path class="circles-expected" d="M0,0 A0,10 0 0 0 0,0 M20,20 L30,30 M50,50 A0,10 0 0 0 50,50 M70,70 L80,80 M100,100 A0,10 0 0 0 100,100"/>
+ </g>
+
+ <g transform="translate(25,175)">
+ <circle cx="0" cy="0" r="8"/>
+ <circle cx="50" cy="50" r="8"/>
+ <circle cx="100" cy="100" r="8"/>
+ <path class="circles-expected" d="M0,0 Z M20,20 L30,30 M50,50 Z M70,70 L80,80 M100,100 Z"/>
+ </g>
+
+
+ <!-- Column 2: test multi-segment zero-length subpaths: -->
+
+ <g transform="translate(175,25)">
+ <circle cx="0" cy="0" r="8"/>
+ <circle cx="50" cy="50" r="8"/>
+ <circle cx="100" cy="100" r="8"/>
+ <path class="circles-expected" d="M0,0 L0,0 M0,0 L0,0 M20,20 L30,30 M50,50 L50,50 L50,50 M70,70 L80,80 M100,100 L100,100 L100,100"/>
+ </g>
+
+ <g transform="translate(177,75)">
+ <circle cx="0" cy="0" r="8"/>
+ <circle cx="50" cy="50" r="8"/>
+ <circle cx="100" cy="100" r="8"/>
+ <path class="circles-expected" d="M0,0 C0,0 0,0 0,0 C0,0 0,0 0,0 M20,20 L30,30 M50,50 C50,50 50,50 50,50 C50,50 50,50 50,50 M70,70 L80,80 M100,100 C100,100 100,100 100,100 C100,100 100,100 100,100"/>
+ </g>
+
+ <g transform="translate(175,125)">
+ <circle cx="0" cy="0" r="8"/>
+ <circle cx="50" cy="50" r="8"/>
+ <circle cx="100" cy="100" r="8"/>
+ <path class="circles-expected" d="M0,0 A0,10 0 0 0 0,0 A0,10 0 0 0 0,0 M20,20 L30,30 M50,50 A0,10 0 0 0 50,50 A0,10 0 0 0 50,50 M70,70 L80,80 M100,100 A0,10 0 0 0 100,100 A0,10 0 0 0 100,100"/>
+ </g>
+
+ <g transform="translate(175,175)">
+ <circle cx="0" cy="0" r="8"/>
+ <circle cx="50" cy="50" r="8"/>
+ <circle cx="100" cy="100" r="8"/>
+ <path class="circles-expected" d="M0,0 Z Z M20,20 L30,30 M50,50 Z Z M70,70 L80,80 M100,100 Z Z"/>
+ </g>
+
+
+ <!-- Column 3: test non-zero-length subpaths that begin, end and contain
+ zero length segments: -->
+
+ <g transform="translate(325,25)">
+ <path class="circles-not-expected" d="M20,20 L20,20 L30,30 L30,30 L40,40 L40,40"/>
+ <path class="coverer" d="M20,20 L40,40"/>
+ </g>
+
+ <g transform="translate(325,75)">
+ <path class="circles-not-expected" d="M20,20 C20,20 20,20 20,20 C20,20 30,30 30,30 C30,30 30,30 30,30 C30,30 40,40 40,40 C40,40 40,40 40,40"/>
+ <path class="coverer" d="M20,20 L40,40"/>
+ </g>
+
+ <g transform="translate(325,125)">
+ <path class="circles-not-expected" d="M20,20 A0,10 0 0 0 20,20 A0,10 0 0 0 30,30 A0,10 0 0 0 30,30 A0,10 0 0 0 40,40 A0,10 0 0 0 40,40"/>
+ <path class="coverer" d="M20,20 L40,40"/>
+ </g>
+
+ <!-- this one is shorter because the Z's mean we only have path end points
+ at 20,20 -->
+ <g transform="translate(325,175)">
+ <circle cx="20" cy="20" r="8"/>
+ <path class="circles-expected" d="M20,20 Z L30,30 Z L40,40 Z"/>
+ </g>
+
+
+ <!-- Column 4: test lone movetos -->
+
+ <g transform="translate(425,25)">
+ <path class="circles-not-expected" d="M0,0 M0,0 M20,20 L30,30 M50,50 M50,50 M70,70 L80,80 M100,100 M100,100"/>
+ <path class="coverer" d="M20,20 L30,30 M70,70 L80,80"/>
+ </g>
+
+ <!-- Column 5: test stroke-dasharray -->
+
+ <g transform="translate(525,25)">
+ <circle cy="0" r="8"/>
+ <circle cy="40" r="8"/>
+ <circle cy="80" r="8"/>
+ <path class="circles-expected" d="M0,0v81" stroke-dasharray="0 40" />
+ </g>
+ <g transform="translate(575,25)">
+ <circle cy="0" r="8"/>
+ <circle cy="40" r="8"/>
+ <circle cy="80" r="8"/>
+ <path class="circles-expected" d="M0,0v81" stroke-dasharray="0" />
+ </g>
+
+ <!-- Column 6: test zero-length line -->
+ <g transform="translate(625, 25)">
+ <circle cy="0" r="8" />
+ <line class="circles-expected" x1="0" y1="0" x2="0" y2="0" />
+ </g>
+
+</svg>
diff --git a/layout/reftests/svg/stroke-linecap-round-w-zero-length-segs-02.svg b/layout/reftests/svg/stroke-linecap-round-w-zero-length-segs-02.svg
new file mode 100644
index 0000000000..223a5e0df3
--- /dev/null
+++ b/layout/reftests/svg/stroke-linecap-round-w-zero-length-segs-02.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" class="reftest-wait">
+
+ <title>Test invalidation for 'stroke-linecap: round' with zero length path segments</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=1075399 for path and
+ https://bugzilla.mozilla.org/show_bug.cgi?id=1187770 for line -->
+
+ <script>
+
+function run()
+{
+ document.getElementById('path').setAttribute('stroke-linecap', 'butt');
+ document.getElementById('line').setAttribute('stroke-linecap', 'butt');
+ document.documentElement.removeAttribute('class');
+}
+
+window.addEventListener("MozReftestInvalidate", run, false);
+
+ </script>
+
+ <rect width="100%" height="100%" style="fill:lime"/>
+
+ <path id="path" stroke="red" stroke-width="200" stroke-linecap="round"
+ d="M100,100 L100,100"/>
+ <line id="line" stroke="red" stroke-width="200" stroke-linecap="round"
+ x1="300" y1="300" x2="300" y2="300"/>
+
+</svg>
diff --git a/layout/reftests/svg/stroke-linecap-round-w-zero-length-segs-03.svg b/layout/reftests/svg/stroke-linecap-round-w-zero-length-segs-03.svg
new file mode 100644
index 0000000000..7d63b537b4
--- /dev/null
+++ b/layout/reftests/svg/stroke-linecap-round-w-zero-length-segs-03.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <rect width="100%" height="100%" fill="lime"/>
+ <g fill="red">
+ <circle cx="40" cy="50" r="18"/>
+ <circle cx="260" cy="50" r="18"/>
+ </g>
+ <g stroke-width="40" stroke="lime" stroke-linecap="round">
+ <path d="M40, 50z m220,0z"/>
+ </g>
+</svg>
+
diff --git a/layout/reftests/svg/stroke-linecap-square-w-zero-length-segs-01.svg b/layout/reftests/svg/stroke-linecap-square-w-zero-length-segs-01.svg
new file mode 100644
index 0000000000..df395b0e16
--- /dev/null
+++ b/layout/reftests/svg/stroke-linecap-square-w-zero-length-segs-01.svg
@@ -0,0 +1,154 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+
+ <title>Test 'stroke-linecap: square' with zero length path segments</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=589648 for paths and
+ https://bugzilla.mozilla.org/show_bug.cgi?id=1187770 for lines -->
+
+ <style>
+
+path, line {
+ stroke-width: 20px;
+ stroke-linecap: square;
+}
+
+rect {
+ fill: red;
+}
+
+/* expect lime squares to cover red rects */
+path.squares-expected, line.squares-expected {
+ stroke: lime;
+}
+
+path.squares-not-expected {
+ stroke: red;
+}
+
+/* thicker stroke to cover squares-not-expected paths */
+path.coverer {
+ stroke: lime;
+ stroke-width: 24px;
+}
+
+/* to show edges of shapes to help in debugging:
+g > rect {
+ stroke: red;
+ stroke-width: 5px;
+}
+path.coverer {
+ stroke: lime;
+ stroke-width: 18px;
+}
+*/
+
+ </style>
+
+ <rect width="100%" height="100%" style="fill:lime"/>
+
+ <!-- Column 1: test single segment zero-length subpaths: -->
+
+ <g transform="translate(25,25)">
+ <rect x="-9" y="-9" width="18" height="18"/>
+ <rect x="41" y="41" width="18" height="18"/>
+ <rect x="91" y="91" width="18" height="18"/>
+ <path class="squares-expected" d="M0,0 L0,0 M20,20 L30,30 M50,50 L50,50 M70,70 L80,80 M100,100 L100,100"/>
+ </g>
+
+ <g transform="translate(25,75)">
+ <rect x="-9" y="-9" width="18" height="18"/>
+ <rect x="41" y="41" width="18" height="18"/>
+ <rect x="91" y="91" width="18" height="18"/>
+ <path class="squares-expected" d="M0,0 C0,0 0,0 0,0 M20,20 L30,30 M50,50 C50,50 50,50 50,50 M70,70 L80,80 M100,100 C100,100 100,100 100,100"/>
+ </g>
+
+ <g transform="translate(25,125)">
+ <rect x="-9" y="-9" width="18" height="18"/>
+ <rect x="41" y="41" width="18" height="18"/>
+ <rect x="91" y="91" width="18" height="18"/>
+ <path class="squares-expected" d="M0,0 A0,10 0 0 0 0,0 M20,20 L30,30 M50,50 A0,10 0 0 0 50,50 M70,70 L80,80 M100,100 A0,10 0 0 0 100,100"/>
+ </g>
+
+ <g transform="translate(25,175)">
+ <rect x="-9" y="-9" width="18" height="18"/>
+ <rect x="41" y="41" width="18" height="18"/>
+ <rect x="91" y="91" width="18" height="18"/>
+ <path class="squares-expected" d="M0,0 Z M20,20 L30,30 M50,50 Z M70,70 L80,80 M100,100 Z"/>
+ </g>
+
+
+ <!-- Column 2: test multi-segment zero-length subpaths: -->
+
+ <g transform="translate(175,25)">
+ <rect x="-9" y="-9" width="18" height="18"/>
+ <rect x="41" y="41" width="18" height="18"/>
+ <rect x="91" y="91" width="18" height="18"/>
+ <path class="squares-expected" d="M0,0 L0,0 M0,0 L0,0 M20,20 L30,30 M50,50 L50,50 L50,50 M70,70 L80,80 M100,100 L100,100 L100,100"/>
+ </g>
+
+ <g transform="translate(177,75)">
+ <rect x="-9" y="-9" width="18" height="18"/>
+ <rect x="41" y="41" width="18" height="18"/>
+ <rect x="91" y="91" width="18" height="18"/>
+ <path class="squares-expected" d="M0,0 C0,0 0,0 0,0 C0,0 0,0 0,0 M20,20 L30,30 M50,50 C50,50 50,50 50,50 C50,50 50,50 50,50 M70,70 L80,80 M100,100 C100,100 100,100 100,100 C100,100 100,100 100,100"/>
+ </g>
+
+ <g transform="translate(175,125)">
+ <rect x="-9" y="-9" width="18" height="18"/>
+ <rect x="41" y="41" width="18" height="18"/>
+ <rect x="91" y="91" width="18" height="18"/>
+ <path class="squares-expected" d="M0,0 A0,10 0 0 0 0,0 A0,10 0 0 0 0,0 M20,20 L30,30 M50,50 A0,10 0 0 0 50,50 A0,10 0 0 0 50,50 M70,70 L80,80 M100,100 A0,10 0 0 0 100,100 A0,10 0 0 0 100,100"/>
+ </g>
+
+ <g transform="translate(175,175)">
+ <rect x="-9" y="-9" width="18" height="18"/>
+ <rect x="41" y="41" width="18" height="18"/>
+ <rect x="91" y="91" width="18" height="18"/>
+ <path class="squares-expected" d="M0,0 Z Z M20,20 L30,30 M50,50 Z Z M70,70 L80,80 M100,100 Z Z"/>
+ </g>
+
+
+ <!-- Column 3: test non-zero-length subpaths that begin, end and contain
+ zero length segments: -->
+
+ <g transform="translate(325,25)">
+ <path class="squares-not-expected" d="M20,20 L20,20 L30,30 L30,30 L40,40 L40,40"/>
+ <path class="coverer" d="M20,20 L40,40"/>
+ </g>
+
+ <g transform="translate(325,75)">
+ <path class="squares-not-expected" d="M20,20 C20,20 20,20 20,20 C20,20 30,30 30,30 C30,30 30,30 30,30 C30,30 40,40 40,40 C40,40 40,40 40,40"/>
+ <path class="coverer" d="M20,20 L40,40"/>
+ </g>
+
+ <g transform="translate(325,125)">
+ <path class="squares-not-expected" d="M20,20 A0,10 0 0 0 20,20 A0,10 0 0 0 30,30 A0,10 0 0 0 30,30 A0,10 0 0 0 40,40 A0,10 0 0 0 40,40"/>
+ <path class="coverer" d="M20,20 L40,40"/>
+ </g>
+
+ <!-- this one is shorter because the Z's mean we only have path end points
+ at 20,20 -->
+ <g transform="translate(325,175)">
+ <rect x="11" y="11" width="18" height="18"/>
+ <path class="squares-expected" d="M20,20 Z L30,30 Z L40,40 Z"/>
+ </g>
+
+
+ <!-- Column 4: test lone movetos -->
+
+ <g transform="translate(425,25)">
+ <path class="squares-not-expected" d="M0,0 M0,0 M20,20 L30,30 M50,50 M50,50 M70,70 L80,80 M100,100 M100,100"/>
+ <path class="coverer" d="M20,20 L30,30 M70,70 L80,80"/>
+ </g>
+
+ <!-- Column 5: test zero-length line -->
+ <g transform="translate(525, 25)">
+ <rect x="-9" y="-9" width="18" height="18"/>
+ <line class="squares-expected" x1="0" y1="0" x2="0" y2="0" />
+ </g>
+
+</svg>
diff --git a/layout/reftests/svg/stroke-linecap-square-w-zero-length-segs-02.svg b/layout/reftests/svg/stroke-linecap-square-w-zero-length-segs-02.svg
new file mode 100644
index 0000000000..506b2f12fd
--- /dev/null
+++ b/layout/reftests/svg/stroke-linecap-square-w-zero-length-segs-02.svg
@@ -0,0 +1,33 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait">
+
+ <title>Test 'stroke-linecap: square' with zero length path segments</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=589648 for path and
+ https://bugzilla.mozilla.org/show_bug.cgi?id=1187770 for line -->
+
+ <script>
+
+function run()
+{
+ document.getElementById('path').setAttribute('stroke-linecap', 'butt');
+ document.getElementById('line').setAttribute('stroke-linecap', 'butt');
+ document.documentElement.removeAttribute('class');
+}
+
+window.addEventListener("MozReftestInvalidate", run, false);
+
+ </script>
+
+ <rect width="100%" height="100%" style="fill:lime"/>
+
+ <path id="path" stroke="red" stroke-width="200" stroke-linecap="square"
+ d="M100,100 L100,100"/>
+
+ <line id="line" stroke="red" stroke-width="200" stroke-linecap="square"
+ x1="300" y1="300" x2="300" y2="300"/>
+
+</svg>
diff --git a/layout/reftests/svg/stroke-width-percentage-01.svg b/layout/reftests/svg/stroke-width-percentage-01.svg
new file mode 100644
index 0000000000..e147ed2fa9
--- /dev/null
+++ b/layout/reftests/svg/stroke-width-percentage-01.svg
@@ -0,0 +1,14 @@
+<!--
+ 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 for percentage stroke-width</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=373485 -->
+
+ <rect width="100%" height="100%" fill="red"/>
+ <line y1="50%" x2="100%" y2="50%" stroke="lime" stroke-width="200%"/>
+
+</svg>
diff --git a/layout/reftests/svg/stroke-width-percentage-02-ref.svg b/layout/reftests/svg/stroke-width-percentage-02-ref.svg
new file mode 100644
index 0000000000..538f013979
--- /dev/null
+++ b/layout/reftests/svg/stroke-width-percentage-02-ref.svg
@@ -0,0 +1,7 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+ <rect width="100" height="50" fill="blue"/>
+</svg>
diff --git a/layout/reftests/svg/stroke-width-percentage-02a.svg b/layout/reftests/svg/stroke-width-percentage-02a.svg
new file mode 100644
index 0000000000..233baf98a7
--- /dev/null
+++ b/layout/reftests/svg/stroke-width-percentage-02a.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" class="reftest-wait">
+ <title>Test percentage stroke-width repaints after viewport size change</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=875069 -->
+ <script>
+
+function doTest() {
+ document.getElementById("inner").setAttribute("width", "100");
+ document.getElementById("inner").setAttribute("height", "100");
+ document.documentElement.removeAttribute('class');
+}
+
+document.addEventListener("MozReftestInvalidate", doTest, false);
+setTimeout(doTest, 4000); // fallback for running outside reftest
+
+ </script>
+ <svg id="inner" width="50" height="50">
+ <!-- Don't give the line's x/y attributes percentages since that
+ may trigger reflow in which case this test wouldn't be
+ testing what we intend!
+ -->
+ <line x1="50" x2="50" y2="50" stroke="blue" stroke-width="100%"/>
+ </svg>
+</svg>
diff --git a/layout/reftests/svg/stroke-width-percentage-02b.svg b/layout/reftests/svg/stroke-width-percentage-02b.svg
new file mode 100644
index 0000000000..7a02de656e
--- /dev/null
+++ b/layout/reftests/svg/stroke-width-percentage-02b.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" class="reftest-wait"
+ id="outer" style="width:50px; height:50px;">
+ <title>Test percentage stroke-width repaints after viewport size change</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=875069 -->
+ <script>
+
+function doTest() {
+ document.getElementById("outer").style.width = "100px";
+ document.getElementById("outer").style.height = "100px";
+ document.documentElement.removeAttribute('class');
+}
+
+document.addEventListener("MozReftestInvalidate", doTest, false);
+setTimeout(doTest, 4000); // fallback for running outside reftest
+
+ </script>
+ <!-- Don't give the line's x/y attributes percentages since that
+ may trigger reflow in which case this test wouldn't be
+ testing what we intend!
+ -->
+ <line x1="50" x2="50" y2="50" stroke="blue" stroke-width="100%"/>
+</svg>
diff --git a/layout/reftests/svg/stroke-width-percentage-03-iframe.svg b/layout/reftests/svg/stroke-width-percentage-03-iframe.svg
new file mode 100644
index 0000000000..5b9ceab1e2
--- /dev/null
+++ b/layout/reftests/svg/stroke-width-percentage-03-iframe.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">
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=875069 -->
+
+ <!-- Don't give the line's x/y attributes percentages since that
+ may trigger reflow in which case this test wouldn't be
+ testing what we intend!
+ -->
+ <line x1="50" x2="50" y2="50" stroke="blue" stroke-width="100%"/>
+</svg>
diff --git a/layout/reftests/svg/stroke-width-percentage-03-ref.xhtml b/layout/reftests/svg/stroke-width-percentage-03-ref.xhtml
new file mode 100644
index 0000000000..52de4624d2
--- /dev/null
+++ b/layout/reftests/svg/stroke-width-percentage-03-ref.xhtml
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=875069 -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <body>
+ <div id="container" style="width: 100px; height: 50px; background: blue;">
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/svg/stroke-width-percentage-03.xhtml b/layout/reftests/svg/stroke-width-percentage-03.xhtml
new file mode 100644
index 0000000000..c702ab8881
--- /dev/null
+++ b/layout/reftests/svg/stroke-width-percentage-03.xhtml
@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=875069 -->
+<!--
+ This test checks that when the content area of the window resizes without
+ any style change that we reflow stroked SVG elements that have
+ 'vector-effect' set to 'non-scaling-stroke' and that are under a
+ transformed ancestor. We use an iframe to allow us to resize the content
+ area of the embedded document without changing its style.
+
+ This test should end up rendering a blue square, 100px by 50px.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+ class="reftest-wait">
+ <head>
+ <style>
+
+#frame {
+ /* width and height are given the same value since percentage stroke resolves
+ as sqrt(width^2 + height^2).
+ */
+ width: 50px;
+ height: 50px;
+ border: 0;
+}
+
+ </style>
+ <script>
+
+function doTest() {
+ document.getElementById("frame").style.width = "100px";
+ document.getElementById("frame").style.height = "100px";
+ document.documentElement.removeAttribute("class");
+}
+
+window.addEventListener("MozReftestInvalidate", doTest, false);
+setTimeout(doTest, 4000); // fallback for running outside reftest
+
+ </script>
+ </head>
+ <body>
+ <iframe id="frame" src="stroke-width-percentage-03-iframe.svg"></iframe>
+ </body>
+</html>
diff --git a/layout/reftests/svg/style-property-on-script-element-01.svg b/layout/reftests/svg/style-property-on-script-element-01.svg
new file mode 100644
index 0000000000..f4f76157bd
--- /dev/null
+++ b/layout/reftests/svg/style-property-on-script-element-01.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">
+
+ <title>Testcase ensuring 'style' is a property of SVGScriptElement</title>
+
+ <!-- For https://bugzilla.mozilla.org/show_bug.cgi?id=379178 -->
+
+ <rect id="rect" width="100%" height="100%" fill="lime"/>
+
+ <script id="script" type="application/javascript">
+
+if (typeof document.getElementById('script').style == 'undefined') {
+ document.getElementById('rect').setAttribute('fill', 'red');
+}
+
+ </script>
+
+</svg>
diff --git a/layout/reftests/svg/style-without-type-attribute.svg b/layout/reftests/svg/style-without-type-attribute.svg
new file mode 100644
index 0000000000..7ea8787198
--- /dev/null
+++ b/layout/reftests/svg/style-without-type-attribute.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" >
+
+ <title>Testcase for defaulting of 'type' attribute on &lt;style&gt;</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=421464 -->
+
+ <style>
+ #r1 { fill: lime; }
+ </style>
+
+ <style type="">
+ #r2 { fill: lime; }
+ </style>
+
+ <rect id="r1" width="50%" height="100%" fill="red"/>
+ <rect id="r2" x="50%" width="50%" height="100%" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/suspend-01.svg b/layout/reftests/svg/suspend-01.svg
new file mode 100644
index 0000000000..fa681fbe60
--- /dev/null
+++ b/layout/reftests/svg/suspend-01.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+ <title>Test that suspendRedraw doesn't apply after the end of a script</title>
+ <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=734079 -->
+
+ <rect width="100%" height="100%" fill="lime"/>
+ <script>
+ document.documentElement.suspendRedraw(10000);
+ </script>
+</svg>
diff --git a/layout/reftests/svg/suspend-02.svg b/layout/reftests/svg/suspend-02.svg
new file mode 100644
index 0000000000..a9f7ced9c4
--- /dev/null
+++ b/layout/reftests/svg/suspend-02.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait">
+ <title>Test that suspendRedraw doesn't apply after the end of a script</title>
+ <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=734079 -->
+
+ <script type="text/javascript">
+ <![CDATA[
+
+ document.addEventListener("MozReftestInvalidate", doTest, false);
+ setTimeout(doTest, 4000); // fallback for running outside reftest
+
+ function doTest() {
+ var svg = document.documentElement;
+ svg.suspendRedraw(10000);
+ document.getElementById("r").setAttribute("fill", "lime");
+ setTimeout(function() {
+ svg.removeAttribute("class");
+ }, 50);
+ }
+ ]]>
+ </script>
+ <rect id="r" width="100%" height="100%" fill="red"/>
+</svg>
diff --git a/layout/reftests/svg/suspend-03.svg b/layout/reftests/svg/suspend-03.svg
new file mode 100644
index 0000000000..33ceb09286
--- /dev/null
+++ b/layout/reftests/svg/suspend-03.svg
@@ -0,0 +1,24 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait" onload="f()">
+ <title>Test that suspendRedraw doesn't apply after the end of a script</title>
+ <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=734079 -->
+
+ <script>
+ function f() {
+ var svg = document.documentElement;
+ setTimeout(function() {
+ svg.suspendRedraw(10000);
+ setTimeout(function() {
+ svg.removeChild(document.getElementById("r"));
+ svg.removeAttribute("class");
+ }, 1);
+ }, 1);
+ }
+ </script>
+ <rect width="100%" height="100%" fill="lime"/>
+ <rect id="r" width="100%" height="100%" fill="red"/>
+</svg>
diff --git a/layout/reftests/svg/suspend-04.svg b/layout/reftests/svg/suspend-04.svg
new file mode 100644
index 0000000000..5ab4b7f249
--- /dev/null
+++ b/layout/reftests/svg/suspend-04.svg
@@ -0,0 +1,31 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait">
+ <title>Test that suspendRedraw doesn't apply after the end of a script</title>
+ <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=615146 -->
+
+ <script type="text/javascript">
+ <![CDATA[
+
+ document.addEventListener("MozReftestInvalidate", doTest, false);
+ setTimeout(doTest, 4000); // fallback for running outside reftest
+
+ function doTest() {
+ var svg = document.documentElement;
+ setTimeout(function() {
+ svg.suspendRedraw(10000);
+ var r = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+ r.setAttribute("width", "100%");
+ r.setAttribute("height", "100%");
+ r.setAttribute("fill", "lime");
+ svg.appendChild(r);
+ svg.removeAttribute("class");
+ }, 50);
+ }
+ ]]>
+ </script>
+ <rect width="100%" height="100%" fill="red"/>
+</svg>
diff --git a/layout/reftests/svg/suspend-05.svg b/layout/reftests/svg/suspend-05.svg
new file mode 100644
index 0000000000..eee051d8f3
--- /dev/null
+++ b/layout/reftests/svg/suspend-05.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait" onload="f()">
+ <title>Test that unsuspendRedrawAll works</title>
+ <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=615146 -->
+
+ <script>
+ function f() {
+ var svg = document.documentElement;
+ svg.suspendRedraw(10000);
+ setTimeout(function() {
+ svg.unsuspendRedrawAll();
+ svg.removeAttribute("class");
+ }, 1);
+ }
+ </script>
+ <rect width="100%" height="100%" fill="lime"/>
+</svg>
diff --git a/layout/reftests/svg/suspend-06.svg b/layout/reftests/svg/suspend-06.svg
new file mode 100644
index 0000000000..46551a25da
--- /dev/null
+++ b/layout/reftests/svg/suspend-06.svg
@@ -0,0 +1,24 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait" onload="f()">
+ <title>Test that unsuspendRedrawAll works</title>
+ <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=615146 -->
+
+ <script>
+ function f() {
+ var svg = document.documentElement;
+ setTimeout(function() {
+ svg.suspendRedraw(10000);
+ setTimeout(function() {
+ document.getElementById("r").setAttribute("fill", "lime");
+ svg.unsuspendRedrawAll();
+ svg.removeAttribute("class");
+ }, 1);
+ }, 1);
+ }
+ </script>
+ <rect id="r" width="100%" height="100%" fill="red"/>
+</svg>
diff --git a/layout/reftests/svg/suspend-07.svg b/layout/reftests/svg/suspend-07.svg
new file mode 100644
index 0000000000..25f6e337f7
--- /dev/null
+++ b/layout/reftests/svg/suspend-07.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait" onload="f()">
+ <title>Test that unsuspendRedrawAll works</title>
+ <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=615146 -->
+
+ <script>
+ function f() {
+ var svg = document.documentElement;
+ setTimeout(function() {
+ svg.suspendRedraw(10000);
+ setTimeout(function() {
+ svg.removeChild(document.getElementById("r"));
+ svg.unsuspendRedrawAll();
+ svg.removeAttribute("class");
+ }, 1);
+ }, 1);
+ }
+ </script>
+ <rect width="100%" height="100%" fill="lime"/>
+ <rect id="r" width="100%" height="100%" fill="red"/>
+</svg>
diff --git a/layout/reftests/svg/suspend-08.svg b/layout/reftests/svg/suspend-08.svg
new file mode 100644
index 0000000000..363842911e
--- /dev/null
+++ b/layout/reftests/svg/suspend-08.svg
@@ -0,0 +1,28 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait" onload="f()">
+ <title>Test that unsuspendRedrawAll works</title>
+ <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=615146 -->
+
+ <script>
+ function f() {
+ var svg = document.documentElement;
+ setTimeout(function() {
+ svg.suspendRedraw(10000);
+ setTimeout(function() {
+ var r = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+ r.setAttribute("width", "100%");
+ r.setAttribute("height", "100%");
+ r.setAttribute("fill", "lime");
+ svg.appendChild(r);
+ svg.unsuspendRedrawAll();
+ svg.removeAttribute("class");
+ }, 1);
+ }, 1);
+ }
+ </script>
+ <rect width="100%" height="100%" fill="red"/>
+</svg>
diff --git a/layout/reftests/svg/svg-blurry-with-subpixel-position-ref.html b/layout/reftests/svg/svg-blurry-with-subpixel-position-ref.html
new file mode 100644
index 0000000000..c315509d72
--- /dev/null
+++ b/layout/reftests/svg/svg-blurry-with-subpixel-position-ref.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<style>
+ svg {
+ width:750px;
+ height:750px;
+ margin:3px;
+ }
+</style>
+
+<svg viewBox="0.5 0.5 750 750">
+ <path d="M3,6L277,6M3,12L277,12M3,18L277,18M3,24L277,24M3,30L277,30M3,36L277,36M3,42L277,42M3,48L277,48M3,54L277,54M3,60L277,60M3,66L277,66M3,72L277,72M3,78L277,78M3,84L277,84M3,90L277,90M3,96L277,96M3,102L277,102M3,108L277,108M3,114L277,114" style="stroke-width:1; stroke:black;" />
+ <path d="M6,3L6,277M12,3L12,277M18,3L18,277M24,3L24,277M30,3L30,277M36,3L36,277M42,3L42,277M48,3L48,277M54,3L54,277M60,3L60,277M66,3L66,277M72,3L72,277M78,3L78,277M84,3L84,277M90,3L90,277M96,3L96,277M102,3L102,277M108,3L108,277M114,3L114,277" style="stroke-width:1; stroke:black;" />
+</svg>
diff --git a/layout/reftests/svg/svg-blurry-with-subpixel-position.html b/layout/reftests/svg/svg-blurry-with-subpixel-position.html
new file mode 100644
index 0000000000..20bca71741
--- /dev/null
+++ b/layout/reftests/svg/svg-blurry-with-subpixel-position.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<style>
+ svg {
+ width:750px;
+ height:750px;
+ margin:2.5px;
+ }
+</style>
+
+<svg viewBox="0.5 0.5 750 750">
+ <path d="M3,6L277,6M3,12L277,12M3,18L277,18M3,24L277,24M3,30L277,30M3,36L277,36M3,42L277,42M3,48L277,48M3,54L277,54M3,60L277,60M3,66L277,66M3,72L277,72M3,78L277,78M3,84L277,84M3,90L277,90M3,96L277,96M3,102L277,102M3,108L277,108M3,114L277,114" style="stroke-width:1; stroke:black;" />
+ <path d="M6,3L6,277M12,3L12,277M18,3L18,277M24,3L24,277M30,3L30,277M36,3L36,277M42,3L42,277M48,3L48,277M54,3L54,277M60,3L60,277M66,3L66,277M72,3L72,277M78,3L78,277M84,3L84,277M90,3L90,277M96,3L96,277M102,3L102,277M108,3L108,277M114,3L114,277" style="stroke-width:1; stroke:black;" />
+</svg>
diff --git a/layout/reftests/svg/svg-effects-area-unzoomed-ref.xhtml b/layout/reftests/svg/svg-effects-area-unzoomed-ref.xhtml
new file mode 100644
index 0000000000..48e4c2e0d1
--- /dev/null
+++ b/layout/reftests/svg/svg-effects-area-unzoomed-ref.xhtml
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+<head>
+ <title>Test for bug 541270 (SVG Effects area)</title>
+ <style type="text/css">
+ html, body, div { display: block; width: 100%; height: 100%; border: none; margin: 0; padding: 0; }
+ /* ick, filters can't be display: none or inside of something display:none! */
+ svg { display: block; height: 0; }
+ </style>
+</head>
+<body>
+ <div style="background: #fc3"><div style="background: #3c6; width: 100px;height:25px" /></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-effects-area-unzoomed.xhtml b/layout/reftests/svg/svg-effects-area-unzoomed.xhtml
new file mode 100644
index 0000000000..3b2139b9e6
--- /dev/null
+++ b/layout/reftests/svg/svg-effects-area-unzoomed.xhtml
@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+<head>
+ <title>Test for bug 541270 (SVG Effects area)</title>
+ <style type="text/css">
+ html, body, div { display: block; width: 100%; height: 100%; border: none; margin: 0; padding: 0; }
+ /* ick, filters can't be display: none or inside of something display:none! */
+ svg { display: block; height: 0; }
+ </style>
+</head>
+<body>
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
+ <defs>
+ <!-- use a filter that doesn't change anything (since the background
+ is opaque, we can apply a gamma correction to the alpha channel)
+ but is unlikely to be optimized away -->
+ <!-- use sRGB to avoid errors creeping in -->
+ <filter id="notMuch" x="0%" y="0%" width="100%" height="100%"
+ style="color-interpolation-filters: sRGB">
+ <feComponentTransfer>
+ <feFuncR type="linear" intercept="0" slope="1" />
+ <feFuncG type="linear" intercept="0" slope="1" />
+ <feFuncB type="linear" intercept="0" slope="1" />
+ <feFuncA type="gamma" exponent="0.5" />
+ </feComponentTransfer>
+ </filter>
+ </defs>
+ </svg>
+ <div style="background: #fc3; filter:url(#notMuch)"><div style="background: #3c6; width: 100px;height:25px" /></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-effects-area-zoomed-in-ref.xhtml b/layout/reftests/svg/svg-effects-area-zoomed-in-ref.xhtml
new file mode 100644
index 0000000000..76b99cb3b2
--- /dev/null
+++ b/layout/reftests/svg/svg-effects-area-zoomed-in-ref.xhtml
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" reftest-zoom="2">
+<head>
+ <title>Test for bug 541270 (SVG Effects area)</title>
+ <style type="text/css">
+ html, body, div { display: block; width: 100%; height: 100%; border: none; margin: 0; padding: 0; }
+ /* ick, filters can't be display: none or inside of something display:none! */
+ svg { display: block; height: 0; }
+ </style>
+</head>
+<body>
+ <div style="background: #fc3"><div style="background: #3c6; width: 100px;height:25px" /></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-effects-area-zoomed-in.xhtml b/layout/reftests/svg/svg-effects-area-zoomed-in.xhtml
new file mode 100644
index 0000000000..086b981b4b
--- /dev/null
+++ b/layout/reftests/svg/svg-effects-area-zoomed-in.xhtml
@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" reftest-zoom="2">
+<head>
+ <title>Test for bug 541270 (SVG Effects area)</title>
+ <style type="text/css">
+ html, body, div { display: block; width: 100%; height: 100%; border: none; margin: 0; padding: 0; }
+ /* ick, filters can't be display: none or inside of something display:none! */
+ svg { display: block; height: 0; }
+ </style>
+</head>
+<body>
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
+ <defs>
+ <!-- use a filter that doesn't change anything (since the background
+ is opaque, we can apply a gamma correction to the alpha channel)
+ but is unlikely to be optimized away -->
+ <!-- use sRGB to avoid errors creeping in -->
+ <filter id="notMuch" x="0%" y="0%" width="100%" height="100%"
+ style="color-interpolation-filters: sRGB">
+ <feComponentTransfer>
+ <feFuncR type="linear" intercept="0" slope="1" />
+ <feFuncG type="linear" intercept="0" slope="1" />
+ <feFuncB type="linear" intercept="0" slope="1" />
+ <feFuncA type="gamma" exponent="0.5" />
+ </feComponentTransfer>
+ </filter>
+ </defs>
+ </svg>
+ <div style="background: #fc3; filter:url(#notMuch)"><div style="background: #3c6; width: 100px;height:25px" /></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-effects-area-zoomed-out-ref.xhtml b/layout/reftests/svg/svg-effects-area-zoomed-out-ref.xhtml
new file mode 100644
index 0000000000..494989f09a
--- /dev/null
+++ b/layout/reftests/svg/svg-effects-area-zoomed-out-ref.xhtml
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" reftest-zoom="0.6">
+<head>
+ <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, user-scalable=no" />
+ <title>Test for bug 541270 (SVG Effects area)</title>
+ <style type="text/css">
+ html, body, div { display: block; width: 100%; height: 100%; border: none; margin: 0; padding: 0; }
+ /* ick, filters can't be display: none or inside of something display:none! */
+ svg { display: block; height: 0; }
+ </style>
+</head>
+<body>
+ <div style="background: #fc3"><div style="background: #3c6; width: 100px;height:25px" /></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-effects-area-zoomed-out.xhtml b/layout/reftests/svg/svg-effects-area-zoomed-out.xhtml
new file mode 100644
index 0000000000..8600eb9b75
--- /dev/null
+++ b/layout/reftests/svg/svg-effects-area-zoomed-out.xhtml
@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" reftest-zoom="0.6">
+<head>
+ <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, user-scalable=no" />
+ <title>Test for bug 541270 (SVG Effects area)</title>
+ <style type="text/css">
+ html, body, div { display: block; width: 100%; height: 100%; border: none; margin: 0; padding: 0; }
+ /* ick, filters can't be display: none or inside of something display:none! */
+ svg { display: block; height: 0; }
+ </style>
+</head>
+<body>
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
+ <defs>
+ <!-- use a filter that doesn't change anything (since the background
+ is opaque, we can apply a gamma correction to the alpha channel)
+ but is unlikely to be optimized away -->
+ <!-- use sRGB to avoid errors creeping in -->
+ <filter id="notMuch" x="0%" y="0%" width="100%" height="100%"
+ style="color-interpolation-filters: sRGB">
+ <feComponentTransfer>
+ <feFuncR type="linear" intercept="0" slope="1" />
+ <feFuncG type="linear" intercept="0" slope="1" />
+ <feFuncB type="linear" intercept="0" slope="1" />
+ <feFuncA type="gamma" exponent="0.5" />
+ </feComponentTransfer>
+ </filter>
+ </defs>
+ </svg>
+ <div style="background: #fc3; filter:url(#notMuch)"><div style="background: #3c6; width: 100px;height:25px" /></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-in-foreignObject-01-ref.xhtml b/layout/reftests/svg/svg-in-foreignObject-01-ref.xhtml
new file mode 100644
index 0000000000..f701e5d010
--- /dev/null
+++ b/layout/reftests/svg/svg-in-foreignObject-01-ref.xhtml
@@ -0,0 +1,24 @@
+<!--
+ 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">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=411146 -->
+
+ <title>Reference for svg-in-foreignObject-01.xhtml</title>
+
+ <svg width="25%" height="25%">
+ <ellipse cx="50%" cy="50%" rx="50%" ry="50%" fill="blue"/>
+ </svg>
+ <svg x="25%" width="25%" height="25%">
+ <ellipse cx="50%" cy="50%" rx="50%" ry="50%" fill="blue"/>
+ </svg>
+ <svg y="25%" width="25%" height="25%">
+ <ellipse cx="50%" cy="50%" rx="50%" ry="50%" fill="blue"/>
+ </svg>
+ <svg x="25%" y="25%" width="25%" height="25%">
+ <ellipse cx="50%" cy="50%" rx="50%" ry="50%" fill="blue"/>
+ </svg>
+
+</svg>
diff --git a/layout/reftests/svg/svg-in-foreignObject-01.xhtml b/layout/reftests/svg/svg-in-foreignObject-01.xhtml
new file mode 100644
index 0000000000..0c5cc85cf1
--- /dev/null
+++ b/layout/reftests/svg/svg-in-foreignObject-01.xhtml
@@ -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" version="1.1">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=411146 -->
+
+ <title>Test percentages dimensions for SVG inside a foreignObject</title>
+
+ <foreignObject width="50%" height="50%">
+ <svg xmlns="http://www.w3.org/2000/svg" style="width: 50%; height: 50%">
+ <ellipse cx="50%" cy="50%" rx="50%" ry="50%" fill="blue"/>
+ </svg>
+ </foreignObject>
+
+ <svg x="25%" width="25%" height="25%">
+ <ellipse cx="50%" cy="50%" rx="50%" ry="50%" fill="blue"/>
+ </svg>
+ <svg y="25%" width="25%" height="25%">
+ <ellipse cx="50%" cy="50%" rx="50%" ry="50%" fill="blue"/>
+ </svg>
+ <svg x="25%" y="25%" width="25%" height="25%">
+ <ellipse cx="50%" cy="50%" rx="50%" ry="50%" fill="blue"/>
+ </svg>
+
+</svg>
diff --git a/layout/reftests/svg/svg-in-foreignObject-02.xhtml b/layout/reftests/svg/svg-in-foreignObject-02.xhtml
new file mode 100644
index 0000000000..c7d7bc8bcf
--- /dev/null
+++ b/layout/reftests/svg/svg-in-foreignObject-02.xhtml
@@ -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" version="1.1">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=411146 -->
+
+ <title>Test percentages dimensions for SVG inside a foreignObject</title>
+
+ <foreignObject width="50%" height="50%">
+ <div xmlns="http://www.w3.org/1999/xhtml" style="width:100%;height:100%;">
+ <svg xmlns="http://www.w3.org/2000/svg" style="width: 50%; height: 50%">
+ <ellipse cx="50%" cy="50%" rx="50%" ry="50%" fill="blue"/>
+ </svg>
+ </div>
+ </foreignObject>
+
+ <svg x="25%" width="25%" height="25%">
+ <ellipse cx="50%" cy="50%" rx="50%" ry="50%" fill="blue"/>
+ </svg>
+ <svg y="25%" width="25%" height="25%">
+ <ellipse cx="50%" cy="50%" rx="50%" ry="50%" fill="blue"/>
+ </svg>
+ <svg x="25%" y="25%" width="25%" height="25%">
+ <ellipse cx="50%" cy="50%" rx="50%" ry="50%" fill="blue"/>
+ </svg>
+
+</svg>
diff --git a/layout/reftests/svg/svg-in-inner-svg-dimensions.svg b/layout/reftests/svg/svg-in-inner-svg-dimensions.svg
new file mode 100644
index 0000000000..7268dfe160
--- /dev/null
+++ b/layout/reftests/svg/svg-in-inner-svg-dimensions.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <title>Test that percentage width/height for inner-&lt;svg&gt; resolves against the nearest &lt;svg&gt; ancestor, not the outer-&lt;svg&gt;</title>
+ <rect width="100%" height="100%" fill="lime"/>
+ <!-- This red rect should be covered by the lime one below -->
+ <rect x="50" y="50" width="50" height="50" fill="red"/>
+ <svg width="100" height="100">
+ <svg viewBox="0 0 100 100">
+ <rect x="50" y="50" width="50" height="50" fill="lime"/>
+ </svg>
+ </svg>
+</svg> \ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/box-decoration-break-01-ref.xhtml b/layout/reftests/svg/svg-integration/box-decoration-break-01-ref.xhtml
new file mode 100644
index 0000000000..45cbb2ee3d
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/box-decoration-break-01-ref.xhtml
@@ -0,0 +1,37 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+ <meta charset="utf-8" />
+ <style>
+ .clip {
+ clip-path:url(#path);
+ }
+ span {
+ font: 24px sans-serif;
+ line-height: 2;
+ color: lime;
+ background: lime;
+ }
+ br {
+ line-height: 0;
+ }
+ </style>
+</head>
+<body>
+ <h2>Box-Decoration-Break: Clone</h2>
+ <span class="clip">The</span><br />
+ <span class="clip">quick</span><br />
+ <span class="clip">orange fox</span>
+
+ <h2>Box-Decoration-Break: Slice</h2>
+ <span>The</span>
+
+ <svg xmlns="http://www.w3.org/2000/svg" height="0">
+ <defs>
+ <clipPath id="path" clipPathUnits="objectBoundingBox">
+ <rect x="0" y="0" width="1" height="0.3"/>
+ </clipPath>
+ </defs>
+ </svg>
+
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/box-decoration-break-01.xhtml b/layout/reftests/svg/svg-integration/box-decoration-break-01.xhtml
new file mode 100644
index 0000000000..a033175cd0
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/box-decoration-break-01.xhtml
@@ -0,0 +1,41 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+ <meta charset="utf-8" />
+ <title>Test of box-decoration-break with clip-path: url</title>
+ <style>
+ .clone {
+ box-decoration-break: clone;
+ }
+ span {
+ font: 24px sans-serif;
+ line-height: 2;
+ color: lime;
+ background: lime;
+ clip-path: url(#path);
+ }
+ br {
+ line-height: 0;
+ }
+ </style>
+</head>
+<body>
+ <h2>Box-Decoration-Break: Clone</h2>
+ <span class="clone">The<br />quick<br />orange fox</span>
+
+ <h2>Box-Decoration-Break: Slice</h2>
+ <span>The<br />quick<br />orange fox</span>
+
+ <svg xmlns="http://www.w3.org/2000/svg" height="0">
+ <defs>
+ <clipPath id="path" clipPathUnits="objectBoundingBox">
+ <rect x="0" y="0" width="1" height="0.3"/>
+ </clipPath>
+ </defs>
+ </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/box-decoration-break-02-ref.xhtml b/layout/reftests/svg/svg-integration/box-decoration-break-02-ref.xhtml
new file mode 100644
index 0000000000..43d6d45efa
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/box-decoration-break-02-ref.xhtml
@@ -0,0 +1,27 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+ <meta charset="utf-8" />
+ <style>
+ span {
+ font: 24px sans-serif;
+ line-height: 2;
+ color: lime;
+ background: lime;
+ }
+ br {
+ line-height: 0;
+ }
+ </style>
+</head>
+<body>
+ <h2>Box-Decoration-Break: Clone</h2>
+ <span>The</span><br />
+ <span>quick</span><br />
+ <span>orange fox</span>
+
+ <h2>Box-Decoration-Break: Slice</h2>
+ <span>The</span><br />
+ <span>quick</span><br />
+ <span>orange fox</span>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/box-decoration-break-02.xhtml b/layout/reftests/svg/svg-integration/box-decoration-break-02.xhtml
new file mode 100644
index 0000000000..f76d679d15
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/box-decoration-break-02.xhtml
@@ -0,0 +1,33 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+ <meta charset="utf-8" />
+ <title>Test of box-decoration-break with filter</title>
+ <style>
+ .clone {
+ box-decoration-break: clone;
+ }
+ span {
+ font: 24px sans-serif;
+ line-height: 2;
+ color: lime;
+ background: lime;
+ filter: blur(0px);
+ }
+ br {
+ line-height: 0;
+ }
+ </style>
+</head>
+<body>
+ <h2>Box-Decoration-Break: Clone</h2>
+ <span class="clone">The<br />quick<br />orange fox</span>
+
+ <h2>Box-Decoration-Break: Slice</h2>
+ <span>The<br />quick<br />orange fox</span>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/box-decoration-break-03.xhtml b/layout/reftests/svg/svg-integration/box-decoration-break-03.xhtml
new file mode 100644
index 0000000000..1563b24cf7
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/box-decoration-break-03.xhtml
@@ -0,0 +1,42 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+ <meta charset="utf-8" />
+ <title>Test of box-decoration-break with clip-path: url and filter</title>
+ <style>
+ .clone {
+ box-decoration-break: clone;
+ }
+ span {
+ font: 24px sans-serif;
+ line-height: 2;
+ color: lime;
+ background: lime;
+ clip-path: url(#path);
+ filter: blur(0px);
+ }
+ br {
+ line-height: 0;
+ }
+ </style>
+</head>
+<body>
+ <h2>Box-Decoration-Break: Clone</h2>
+ <span class="clone">The<br />quick<br />orange fox</span>
+
+ <h2>Box-Decoration-Break: Slice</h2>
+ <span>The<br />quick<br />orange fox</span>
+
+ <svg xmlns="http://www.w3.org/2000/svg" height="0">
+ <defs>
+ <clipPath id="path" clipPathUnits="objectBoundingBox">
+ <rect x="0" y="0" width="1" height="0.3"/>
+ </clipPath>
+ </defs>
+ </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-001-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-001-ref.html
new file mode 100644
index 0000000000..34def2ff95
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-001-ref.html
@@ -0,0 +1,20 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Masking: Ref test for clip-path's circle function 001</title>
+ <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+</head>
+<body>
+ <p>The test passes if there is a green circle.</p>
+ <div style="width: 100px; height: 100px; border: solid green 50px; background-color: green; clip-path: url(#c1)"></div>
+ <svg>
+ <clipPath id="c1">
+ <circle cx="100" cy="100" r="100"/>
+ </clipPath>
+ </svg>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-001.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-001.html
new file mode 100644
index 0000000000..c506a2b684
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-001.html
@@ -0,0 +1,21 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Masking: Test clip-path property and circle function with no values</title>
+ <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+ <link rel="match" href="clip-path-circle-001-ref.html">
+ <meta name="assert" content="The clip-path property takes the basic shape
+ circle without values for clipping of a square. On pass you should see
+ a green circle.">
+</head>
+<body>
+ <p>The test passes if there is a green circle.</p>
+ <div style="width: 100px; height: 100px; border: solid green 50px; background-color: green; clip-path: circle();"></div>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-002-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-002-ref.html
new file mode 100644
index 0000000000..007cd80c9d
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-002-ref.html
@@ -0,0 +1,20 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Masking: Ref test for clip-path's circle function 002</title>
+ <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+</head>
+<body>
+ <p>The test passes if there is a green circle.</p>
+ <div style="width: 200px; height: 200px; background-color: green; clip-path: url(#c1);"></div>
+ <svg>
+ <clipPath id="c1">
+ <circle cx="100" cy="100" r="100"/>
+ </clipPath>
+ </svg>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-002.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-002.html
new file mode 100644
index 0000000000..c242dc91b3
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-002.html
@@ -0,0 +1,21 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Masking: Test clip-path property and circle function with farthest-side</title>
+ <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+ <link rel="match" href="clip-path-circle-001-ref.html">
+ <meta name="assert" content="The clip-path property takes the basic shape
+ circle with farthest-side for clipping of a square. On pass you should see
+ a green circle.">
+</head>
+<body>
+ <p>The test passes if there is a green circle.</p>
+ <div style="width: 100px; height: 100px; border: solid green 50px; background-color: green; clip-path: circle(farthest-side);"></div>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-003-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-003-ref.html
new file mode 100644
index 0000000000..4bb8d89ee1
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-003-ref.html
@@ -0,0 +1,20 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Masking: Ref test for clip-path's circle function 003</title>
+ <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+</head>
+<body>
+ <p>The test passes if there is a green circle.</p>
+ <div style="padding-left: 200px; width: 200px; height: 200px; background-color: green; clip-path: url(#c1);"></div>
+ <svg>
+ <clipPath id="c1">
+ <circle cx="100" cy="100" r="100"/>
+ </clipPath>
+ </svg>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-003.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-003.html
new file mode 100644
index 0000000000..ae4d2d5098
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-003.html
@@ -0,0 +1,21 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Masking: Test clip-path property and circle function with closest-side</title>
+ <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+ <link rel="match" href="clip-path-circle-001-ref.html">
+ <meta name="assert" content="The clip-path property takes the basic shape
+ circle with the value closest-side for clipping of a square. On pass you
+ should see a green circle.">
+</head>
+<body>
+ <p>The test passes if there is a green circle.</p>
+ <div style="width: 100px; height: 100px; border: solid green 50px; background-color: green; clip-path: circle(closest-side);"></div>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-004-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-004-ref.html
new file mode 100644
index 0000000000..3885dd5547
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-004-ref.html
@@ -0,0 +1,20 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Masking: Ref test for clip-path's circle function 004</title>
+ <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+</head>
+<body>
+ <p>The test passes if there is a green circle.</p>
+ <div style="padding-top: 200px; width: 200px; height: 200px; background-color: green; clip-path: url(#c1);"></div>
+ <svg>
+ <clipPath id="c1">
+ <circle cx="100" cy="100" r="100"/>
+ </clipPath>
+ </svg>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-004.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-004.html
new file mode 100644
index 0000000000..6bff6f8399
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-004.html
@@ -0,0 +1,21 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Masking: Test clip-path property and circle function with position 001</title>
+ <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+ <link rel="match" href="clip-path-circle-001-ref.html">
+ <meta name="assert" content="The clip-path property takes the basic shape
+ circle with a position for clipping of a rectangle. On pass you should see
+ a green circle.">
+</head>
+<body>
+ <p>The test passes if there is a green circle.</p>
+ <div style="width: 0; height: 100px; border: solid green 100px; background-color: green; clip-path: circle(at top 100px left 50%);"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-005-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-005-ref.html
new file mode 100644
index 0000000000..1a52c69567
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-005-ref.html
@@ -0,0 +1,20 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Masking: Ref test for clip-path's circle function 005</title>
+ <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+</head>
+<body>
+ <p>The test passes if there is a green circle.</p>
+ <div style="padding-top: 200px; width: 200px; height: 200px; background-color: green; clip-path: url(#c1);"></div>
+ <svg>
+ <clipPath id="c1">
+ <circle cx="100" cy="300" r="100"/>
+ </clipPath>
+ </svg>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-005.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-005.html
new file mode 100644
index 0000000000..aeea854ea2
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-005.html
@@ -0,0 +1,21 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Masking: Test clip-path property and circle function with position 002</title>
+ <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+ <link rel="match" href="clip-path-circle-002-ref.html">
+ <meta name="assert" content="The clip-path property takes the basic shape
+ circle with a position for clipping of a rectangle. On pass you should see
+ a green circle.">
+</head>
+<body>
+ <p>The test passes if there is a green circle.</p>
+ <div style="width: 200px; height: 200px; background-color: green; clip-path: circle(at bottom 100px left 50%);"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-006-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-006-ref.html
new file mode 100644
index 0000000000..a07cbb66cd
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-006-ref.html
@@ -0,0 +1,20 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Masking: Ref test for clip-path's circle function 006</title>
+ <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+</head>
+<body>
+ <p>The test passes if there is a green circle.</p>
+ <div style="width: 400px; height: 400px; background-color: green; clip-path: url(#c1);"></div>
+ <svg>
+ <clipPath id="c1">
+ <circle cx="100" cy="100" r="100"/>
+ </clipPath>
+ </svg>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-006.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-006.html
new file mode 100644
index 0000000000..423f4b24ca
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-006.html
@@ -0,0 +1,21 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Masking: Test clip-path property and circle function with position 003</title>
+ <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+ <link rel="match" href="clip-path-circle-001-ref.html">
+ <meta name="assert" content="The clip-path property takes the basic shape
+ circle with a position for clipping of a rectangle. On pass you should see
+ a green circle.">
+</head>
+<body>
+ <p>The test passes if there is a green circle.</p>
+ <div style="width: 100px; height: 0; border: solid green 100px; background-color: green; clip-path: circle(at left 100px top 50%);"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-007-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-007-ref.html
new file mode 100644
index 0000000000..caba51737b
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-007-ref.html
@@ -0,0 +1,20 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Masking: Ref test for clip-path's circle function 007</title>
+ <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+</head>
+<body>
+ <p>The test passes if there is a green circle.</p>
+ <div style="margin: 50px; padding: 50px; border: 50px solid green; width: 100px; height: 100px; background-color: green; clip-path: url(#c1);"></div>
+ <svg>
+ <clipPath id="c1">
+ <circle cx="100" cy="100" r="100"/>
+ </clipPath>
+ </svg>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-007.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-007.html
new file mode 100644
index 0000000000..fbf204fd7e
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-007.html
@@ -0,0 +1,21 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Masking: Test clip-path property and circle function with position 004</title>
+ <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+ <link rel="match" href="clip-path-circle-002-ref.html">
+ <meta name="assert" content="The clip-path property takes the basic shape
+ circle with a position for clipping of a rectangle. On pass you should see
+ a green circle.">
+</head>
+<body>
+ <p>The test passes if there is a green circle.</p>
+ <div style="width: 200px; height: 200px; background-color: green; clip-path: circle(at right 100px top 50%);"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-008-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-008-ref.html
new file mode 100644
index 0000000000..cdf8da8ede
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-008-ref.html
@@ -0,0 +1,20 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Masking: Ref test for clip-path's circle function 008</title>
+ <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+</head>
+<body>
+ <p>The test passes if there is a green circle.</p>
+ <div style="margin: 50px; padding: 50px; border: 50px solid green; width: 100px; height: 100px; background-color: green; clip-path: url(#c1);"></div>
+ <svg>
+ <clipPath id="c1">
+ <circle cx="150" cy="150" r="100"/>
+ </clipPath>
+ </svg>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-008.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-008.html
new file mode 100644
index 0000000000..564b6cd105
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-008.html
@@ -0,0 +1,21 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Masking: Test clip-path property and circle function with position 005</title>
+ <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+ <link rel="match" href="clip-path-circle-002-ref.html">
+ <meta name="assert" content="The clip-path property takes the basic shape
+ circle with a position for clipping of a rectangle. On pass you should see
+ a green circle.">
+</head>
+<body>
+ <p>The test passes if there is a green circle.</p>
+ <div style="width: 200px; height: 200px; padding-left: 200px; background-color: green; clip-path: circle(at left -100px top 50%) content-box;"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-009-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-009-ref.html
new file mode 100644
index 0000000000..7d055c4d7d
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-009-ref.html
@@ -0,0 +1,20 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Masking: Ref test for clip-path's circle function 009</title>
+ <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+</head>
+<body>
+ <p>The test passes if there is a green circle.</p>
+ <div style="margin: 50px; padding: 50px; border: 50px solid green; width: 100px; height: 100px; background-color: green; clip-path: url(#c1);"></div>
+ <svg>
+ <clipPath id="c1">
+ <circle cx="200" cy="200" r="100"/>
+ </clipPath>
+ </svg>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-009.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-009.html
new file mode 100644
index 0000000000..949c6afd14
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-009.html
@@ -0,0 +1,21 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Masking: Test clip-path property and circle function with position 006</title>
+ <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+ <link rel="match" href="clip-path-circle-003-ref.html">
+ <meta name="assert" content="The clip-path property takes the basic shape
+ circle with a position for clipping of a rectangle. On pass you should see
+ a green circle.">
+</head>
+<body>
+ <p>The test passes if there is a green circle.</p>
+ <div style="padding-right: 200px; width: 0; height: 200px; background-color: green; clip-path: circle(at right -100px top 50%) content-box;"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-010-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-010-ref.html
new file mode 100644
index 0000000000..7fed7ee45c
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-010-ref.html
@@ -0,0 +1,20 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Masking: Ref test for clip-path's circle function 010</title>
+ <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+</head>
+<body>
+ <p>The test passes if there is a green circle.</p>
+ <div style="padding: 100px; width: 200px; height: 200px; background-color: green; clip-path: url(#c1);"></div>
+ <svg>
+ <clipPath id="c1">
+ <circle cx="200" cy="200" r="100"/>
+ </clipPath>
+ </svg>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-010.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-010.html
new file mode 100644
index 0000000000..4952c6f48d
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-010.html
@@ -0,0 +1,21 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Masking: Test clip-path property and circle function with position 007</title>
+ <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+ <link rel="match" href="clip-path-circle-004-ref.html">
+ <meta name="assert" content="The clip-path property takes the basic shape
+ circle with a position for clipping of a rectangle. On pass you should see
+ a green circle.">
+</head>
+<body>
+ <p>The test passes if there is a green circle.</p>
+ <div style="width: 200px; height: 200px; padding-top: 200px; background-color: green; clip-path: circle(at top -100px left 50%) content-box;"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-011.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-011.html
new file mode 100644
index 0000000000..d2a00b5e80
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-011.html
@@ -0,0 +1,21 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Masking: Test clip-path property and circle function with position 008</title>
+ <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+ <link rel="match" href="clip-path-circle-005-ref.html">
+ <meta name="assert" content="The clip-path property takes the basic shape
+ circle with a position for clipping of a rectangle. On pass you should see
+ a green circle.">
+</head>
+<body>
+ <p>The test passes if there is a green circle.</p>
+ <div style="width: 200px; height: 200px; padding-bottom: 200px; background-color: green; clip-path: circle(at bottom -100px left 50%) content-box;"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-012.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-012.html
new file mode 100644
index 0000000000..efded811f8
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-012.html
@@ -0,0 +1,21 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Masking: Test clip-path property and circle function with position 009</title>
+ <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+ <link rel="match" href="clip-path-circle-006-ref.html">
+ <meta name="assert" content="The clip-path property takes the basic shape
+ circle with a position for clipping of a rectangle. On pass you should see
+ a green circle.">
+</head>
+<body>
+ <p>The test passes if there is a green circle.</p>
+ <div style="width: 400px; height: 400px; background-color: green; clip-path: circle(100px at 100px 100px);"></div>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-013.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-013.html
new file mode 100644
index 0000000000..482980af9b
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-013.html
@@ -0,0 +1,21 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Masking: Test clip-path property and circle function with position 010</title>
+ <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+ <link rel="match" href="clip-path-circle-002-ref.html">
+ <meta name="assert" content="The clip-path property takes the basic shape
+ circle with a position for clipping of a rectangle. On pass you should see
+ a green circle.">
+</head>
+<body>
+ <p>The test passes if there is a green circle.</p>
+ <div style="width: 400px; height: 400px; background-color: green; clip-path: circle(25% at 25% 25%);"></div>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-014.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-014.html
new file mode 100644
index 0000000000..3c4b35d7d3
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-014.html
@@ -0,0 +1,21 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Masking: Test clip-path property and circle function with border-box</title>
+ <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+ <link rel="match" href="clip-path-circle-007-ref.html">
+ <meta name="assert" content="The clip-path property takes the basic shape
+ circle with a position and the keyword border-box for clipping of a
+ rectangle. On pass you should see a green circle.">
+</head>
+<body>
+ <p>The test passes if there is a green circle.</p>
+ <div style="margin: 50px; padding: 50px; border: 50px solid green; width: 100px; height: 100px; background-color: green; clip-path: circle(100px at 100px 100px) border-box;"></div>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-015.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-015.html
new file mode 100644
index 0000000000..bc8e161cc6
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-015.html
@@ -0,0 +1,21 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Masking: Test clip-path property and circle function with padding-box</title>
+ <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+ <link rel="match" href="clip-path-circle-008-ref.html">
+ <meta name="assert" content="The clip-path property takes the basic shape
+ circle with a position and the keyword padding-box for clipping of a
+ rectangle. On pass you should see a green circle.">
+</head>
+<body>
+ <p>The test passes if there is a green circle.</p>
+ <div style="margin: 50px; padding: 50px; border: 50px solid green; width: 100px; height: 100px; background-color: green; clip-path: circle(100px at 100px 100px) padding-box;"></div>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-016.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-016.html
new file mode 100644
index 0000000000..7cea5f2bbb
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-016.html
@@ -0,0 +1,21 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Masking: Test clip-path property and circle function with content-box</title>
+ <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+ <link rel="match" href="clip-path-circle-009-ref.html">
+ <meta name="assert" content="The clip-path property takes the basic shape
+ circle with a position and the keyword content-box for clipping of a
+ rectangle. On pass you should see a green circle.">
+</head>
+<body>
+ <p>The test passes if there is a green circle.</p>
+ <div style="margin: 50px; padding: 50px; border: 50px solid green; width: 100px; height: 100px; background-color: green; clip-path: circle(100px at 100px 100px) content-box;"></div>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-017.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-017.html
new file mode 100644
index 0000000000..4947ac1a27
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-017.html
@@ -0,0 +1,21 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Masking: Test clip-path property and circle function with margin-box</title>
+ <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+ <link rel="match" href="clip-path-circle-007-ref.html">
+ <meta name="assert" content="The clip-path property takes the basic shape
+ circle with a position and the keyword margin-box for clipping of a
+ rectangle. On pass you should see a green circle.">
+</head>
+<body>
+ <p>The test passes if there is a green circle.</p>
+ <div style="margin: 50px; padding: 50px; border: 50px solid green; width: 100px; height: 100px; background-color: green; box-shadow: 0 0 0 50px green; clip-path: circle(100px at 150px 150px) margin-box;"></div>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-018.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-018.html
new file mode 100644
index 0000000000..b41d7aecc5
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-018.html
@@ -0,0 +1,21 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Masking: Test clip-path property and circle function on rectangle 001</title>
+ <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+ <link rel="match" href="clip-path-circle-010-ref.html">
+ <meta name="assert" content="The clip-path property takes the basic shape
+ circle with a position for clipping of a differently sized rectangle. On
+ pass you should see a green circle.">
+</head>
+<body>
+ <p>The test passes if there is a green circle.</p>
+ <div style="width: 200px; height: 100px; background-color: green; clip-path: circle(farthest-side at center 100px) content-box; padding: 100px;"></div>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-019.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-019.html
new file mode 100644
index 0000000000..395002a2d2
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-019.html
@@ -0,0 +1,21 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Masking: Test clip-path property and circle function on rectangle 002</title>
+ <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+ <link rel="match" href="clip-path-circle-002-ref.html">
+ <meta name="assert" content="The clip-path property takes the basic shape
+ circle with a position for clipping of a differently sized rectangle. On
+ pass you should see a green circle.">
+</head>
+<body>
+ <p>The test passes if there is a green circle.</p>
+ <div style="width: 200px; height: 400px; background-color: green; clip-path: circle(closest-side at center 100px) content-box;"></div>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-020.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-020.html
new file mode 100644
index 0000000000..82b52ae457
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-020.html
@@ -0,0 +1,23 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Masking: Test clip-path property and circle function on rectangle 003</title>
+ <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+ <link rel="match" href="clip-path-circle-002-ref.html">
+ <meta name="assert" content="The clip-path property takes the basic shape
+ circle with a position for clipping of a differently sized rectangle. This
+ also tests the correct usage of the specified formula:
+ r = sqrt(width^2 + height^2)
+ On pass you should see a green circle.">
+</head>
+<body>
+ <p>The test passes if there is a green circle.</p>
+ <div style="width: 60px; height: 80px; padding: 60px 70px 60px 70px; background-color: green; clip-path: circle(100px) content-box;"></div>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-021-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-021-ref.html
new file mode 100644
index 0000000000..c87ded532f
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-021-ref.html
@@ -0,0 +1,16 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Masking: Test clip-path property and circle function on circle 021</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+</head>
+<body>
+ <p>The test passes if there is a green circle.</p>
+ <div style="width: 600px; height: 600px; background-color: green; clip-path: circle();"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-021.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-021.html
new file mode 100644
index 0000000000..a9229e6ea7
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-021.html
@@ -0,0 +1,20 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Masking: Test clip-path property and circle function on circle 021</title>
+ <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+ <link rel="match" href="clip-path-circle-021-ref.html">
+ <meta name="assert" content="The clip-path property takes the basic shape circle() with large reference box and percentage radius.">
+</head>
+<body>
+ <p>The test passes if there is a green circle.</p>
+ <div style="width: 600px; height: 600px; background-color: green; clip-path: circle(50%);"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-001-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-001-ref.html
new file mode 100644
index 0000000000..fc0392da94
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-001-ref.html
@@ -0,0 +1,20 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Masking: Ref test for clip-path's ellipse function 001</title>
+ <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+</head>
+<body>
+ <p>The test passes if there is a green horizontal ellipse.</p>
+ <div style="width: 400px; height: 200px; background-color: green; clip-path: url(#c1);"></div>
+ <svg>
+ <clipPath id="c1">
+ <ellipse cx="200" cy="100" rx="200" ry="100"/>
+ </clipPath>
+ </svg>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-001.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-001.html
new file mode 100644
index 0000000000..77ff7b9b0e
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-001.html
@@ -0,0 +1,21 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Masking: Test clip-path property and ellipse function without values</title>
+ <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+ <link rel="match" href="clip-path-ellipse-001-ref.html">
+ <meta name="assert" content="The clip-path property takes the basic shape
+ ellipse without values for clipping of a rectangle. On pass you should see
+ a green horizontal ellipse.">
+</head>
+<body>
+ <p>The test passes if there is a green horizontal ellipse.</p>
+ <div style="width: 400px; height: 200px; background-color: green; clip-path: ellipse();"></div>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-002.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-002.html
new file mode 100644
index 0000000000..6b80585b90
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-002.html
@@ -0,0 +1,21 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Masking: Test clip-path property and ellipse function with absolute radii</title>
+ <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+ <link rel="match" href="clip-path-ellipse-001-ref.html">
+ <meta name="assert" content="The clip-path property takes the basic shape
+ ellipse with absolute radii for clipping of a rectangle. On pass you should
+ see a green horizontal ellipse.">
+</head>
+<body>
+ <p>The test passes if there is a green horizontal ellipse.</p>
+ <div style="width: 400px; height: 200px; background-color: green; clip-path: ellipse(200px 100px);"></div>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-003.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-003.html
new file mode 100644
index 0000000000..9b1051d189
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-003.html
@@ -0,0 +1,21 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Masking: Test clip-path property and ellipse function percentage radii</title>
+ <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+ <link rel="match" href="clip-path-ellipse-001-ref.html">
+ <meta name="assert" content="The clip-path property takes the basic shape
+ ellipse with percentage radii for clipping of a rectangle. On pass you
+ should see a green horizontal ellipse.">
+</head>
+<body>
+ <p>The test passes if there is a green horizontal ellipse.</p>
+ <div style="width: 400px; height: 200px; background-color: green; clip-path: ellipse(50% 50%);"></div>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-004.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-004.html
new file mode 100644
index 0000000000..b1d05cddf5
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-004.html
@@ -0,0 +1,21 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Masking: Test clip-path property and ellipse function with farthest-side</title>
+ <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+ <link rel="match" href="clip-path-ellipse-001-ref.html">
+ <meta name="assert" content="The clip-path property takes the basic shape
+ ellipse with the value farthest-side for clipping of a rectangle. On pass
+ you should see a green horizontal ellipse.">
+</head>
+<body>
+ <p>The test passes if there is a green horizontal ellipse.</p>
+ <div style="width: 400px; height: 200px; background-color: green; clip-path: ellipse(farthest-side farthest-side);"></div>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-005.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-005.html
new file mode 100644
index 0000000000..116a08e4c1
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-005.html
@@ -0,0 +1,21 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Masking: Test clip-path property and ellipse function with closest-side</title>
+ <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+ <link rel="match" href="clip-path-ellipse-001-ref.html">
+ <meta name="assert" content="The clip-path property takes the basic shape
+ ellipse with the value closest-side and position for clipping of a
+ rectangle. On pass you should see a green horizontal ellipse.">
+</head>
+<body>
+ <p>The test passes if there is a green horizontal ellipse.</p>
+ <div style="width: 400px; height: 200px; padding-top: 200px; background-color: green; clip-path: ellipse(closest-side closest-side at top -100px left 50%) content-box;"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-006.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-006.html
new file mode 100644
index 0000000000..39c07e98e4
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-006.html
@@ -0,0 +1,21 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Masking: Test clip-path property and ellipse function with position 001</title>
+ <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+ <link rel="match" href="clip-path-ellipse-001-ref.html">
+ <meta name="assert" content="The clip-path property takes the basic shape
+ ellipse with a position for clipping of a rectangle. On pass you should see
+ a green horizontal ellipse.">
+</head>
+<body>
+ <p>The test passes if there is a green horizontal ellipse.</p>
+ <div style="width: 400px; height: 200px; padding-left: 200px; background-color: green; clip-path: ellipse(200px closest-side at left center) content-box;"></div>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-007.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-007.html
new file mode 100644
index 0000000000..ca23693c2c
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-007.html
@@ -0,0 +1,21 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Masking: Test clip-path property and ellipse function with position 002</title>
+ <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+ <link rel="match" href="clip-path-ellipse-001-ref.html">
+ <meta name="assert" content="The clip-path property takes the basic shape
+ ellipse with a position for clipping of a rectangle. On pass you should see
+ a green horizontal ellipse.">
+</head>
+<body>
+ <p>The test passes if there is a green horizontal ellipse.</p>
+ <div style="width: 200px; height: 200px; padding-left: 200px; background-color: green; clip-path: ellipse(farthest-side 50% at left center) content-box;"></div>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-008.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-008.html
new file mode 100644
index 0000000000..560cfc0761
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-008.html
@@ -0,0 +1,21 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Masking: Test clip-path property and ellipse function with border-box</title>
+ <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+ <link rel="match" href="clip-path-ellipse-001-ref.html">
+ <meta name="assert" content="The clip-path property takes the basic shape
+ ellipse with the keyword border-box for clipping of a rectangle. On pass
+ you should see a green horizontal ellipse.">
+</head>
+<body>
+ <p>The test passes if there is a green horizontal ellipse.</p>
+ <div style="width: 200px; height: 200px; padding-left: 200px; background-color: green; clip-path: ellipse(closest-side closest-side) border-box;"></div>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-001-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-001-ref.html
new file mode 100644
index 0000000000..6bfa2d39fd
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-001-ref.html
@@ -0,0 +1,26 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Masking: Reference for clip-path's inset function 001</title>
+ <link rel="author" title="Manish Goregaokar" href="mailto:manish@mozilla.com">
+ <style type="text/css">
+ #square {
+ width: 100px;
+ height: 100px;
+ border: solid green 40px;
+ background-color: green;
+ position: relative;
+ top: 10px;
+ left: 10px;
+ }
+ </style>
+</head>
+<body>
+ <p>The test passes if there is a green square not touching the edges</p>
+ <div id="square"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-001a.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-001a.html
new file mode 100644
index 0000000000..35eab0305c
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-001a.html
@@ -0,0 +1,26 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Masking: Test clip-path property and inset function with 10px on all sides</title>
+ <link rel="help" href="https://drafts.csswg.org/css-shapes/#typedef-basic-shape">
+ <link rel="match" href="clip-path-inset-001-ref.html">
+ <link rel="author" title="Manish Goregaokar" href="mailto:manish@mozilla.com">
+ <style type="text/css">
+ #square {
+ width: 100px;
+ height: 100px;
+ border: solid green 50px;
+ background-color: green;
+ clip-path: inset(10px);
+ }
+ </style>
+</head>
+<body>
+ <p>The test passes if there is a green square not touching the edges</p>
+ <div id="square"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-001b.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-001b.html
new file mode 100644
index 0000000000..7af06c8907
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-001b.html
@@ -0,0 +1,28 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Masking: Test clip-path property and inset function with different insets on each side</title>
+ <link rel="help" href="https://drafts.csswg.org/css-shapes/#typedef-basic-shape">
+ <link rel="match" href="clip-path-inset-001-ref.html">
+ <link rel="author" title="Manish Goregaokar" href="mailto:manish@mozilla.com">
+ <style type="text/css">
+ #square {
+ width: 120px;
+ height: 100px;
+ border: solid green 50px;
+ background-color: green;
+ clip-path: inset(10px 20px);
+ position: relative;
+ left: -10px;
+ }
+ </style>
+</head>
+<body>
+ <p>The test passes if there is a green square not touching the edges</p>
+ <div id="square"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-001c.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-001c.html
new file mode 100644
index 0000000000..81c016084c
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-001c.html
@@ -0,0 +1,29 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Masking: Test clip-path property and inset function with different insets for all 4 sides</title>
+ <link rel="help" href="https://drafts.csswg.org/css-shapes/#typedef-basic-shape">
+ <link rel="match" href="clip-path-inset-001-ref.html">
+ <link rel="author" title="Manish Goregaokar" href="mailto:manish@mozilla.com">
+ <style type="text/css">
+ #square {
+ width: 110px;
+ height: 100px;
+ border: solid green 50px;
+ background-color: green;
+ clip-path: inset(5px 10px 15px 20px);
+ position: relative;
+ left: -10px;
+ top: 5px;
+ }
+ </style>
+</head>
+<body>
+ <p>The test passes if there is a green square not touching the edges</p>
+ <div id="square"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-002-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-002-ref.html
new file mode 100644
index 0000000000..1c15399e3d
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-002-ref.html
@@ -0,0 +1,26 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Masking: Reference for clip-path's inset function (with rounded corners) 002</title>
+ <link rel="author" title="Manish Goregaokar" href="mailto:manish@mozilla.com">
+ <style type="text/css">
+ #square {
+ width: 180px;
+ height: 180px;
+ background-color: green;
+ position: relative;
+ top: 10px;
+ left: 10px;
+ border-radius: 20px;
+ }
+ </style>
+</head>
+<body>
+ <p>The test passes if there is a green rect not touching the sides with rounded corners</p>
+ <div id="square"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-002a.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-002a.html
new file mode 100644
index 0000000000..2ac95f1beb
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-002a.html
@@ -0,0 +1,26 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Masking: Test clip-path property and inset function with uniformly rounded corners</title>
+ <link rel="help" href="https://drafts.csswg.org/css-shapes/#typedef-basic-shape">
+ <link rel="match" href="clip-path-inset-002-ref.html">
+ <link rel="author" title="Manish Goregaokar" href="mailto:manish@mozilla.com">
+ <style type="text/css">
+ #square {
+ width: 100px;
+ height: 100px;
+ border: solid green 50px;
+ background-color: green;
+ clip-path: inset(10px round 20px);
+ }
+ </style>
+</head>
+<body>
+ <p>The test passes if there is a green rect not touching the sides with rounded corners</p>
+ <div id="square"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-002b.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-002b.html
new file mode 100644
index 0000000000..1a87f8258a
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-002b.html
@@ -0,0 +1,26 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Masking: Test clip-path property and inset function with uniformly rounded corners</title>
+ <link rel="help" href="https://drafts.csswg.org/css-shapes/#typedef-basic-shape">
+ <link rel="match" href="clip-path-inset-002-ref.html">
+ <link rel="author" title="Manish Goregaokar" href="mailto:manish@mozilla.com">
+ <style type="text/css">
+ #square {
+ width: 100px;
+ height: 100px;
+ border: solid green 50px;
+ background-color: green;
+ clip-path: inset(10px round 20px 20px 20px 20px);
+ }
+ </style>
+</head>
+<body>
+ <p>The test passes if there is a green rect not touching the sides with rounded corners</p>
+ <div id="square"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-002c.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-002c.html
new file mode 100644
index 0000000000..01b60634f7
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-002c.html
@@ -0,0 +1,26 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Masking: Test clip-path property and inset function with uniformly rounded corners</title>
+ <link rel="help" href="https://drafts.csswg.org/css-shapes/#typedef-basic-shape">
+ <link rel="match" href="clip-path-inset-002-ref.html">
+ <link rel="author" title="Manish Goregaokar" href="mailto:manish@mozilla.com">
+ <style type="text/css">
+ #square {
+ width: 100px;
+ height: 100px;
+ border: solid green 50px;
+ background-color: green;
+ clip-path: inset(10px round 20px / 20px);
+ }
+ </style>
+</head>
+<body>
+ <p>The test passes if there is a green rect not touching the sides with rounded corners</p>
+ <div id="square"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-003-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-003-ref.html
new file mode 100644
index 0000000000..faec64ce7c
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-003-ref.html
@@ -0,0 +1,26 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Masking: Ref test for clip-path's inset function (with different rounded corners) 003</title>
+ <link rel="author" title="Manish Goregaokar" href="mailto:manish@mozilla.com">
+ <style type="text/css">
+ #square {
+ width: 180px;
+ height: 180px;
+ background-color: green;
+ position: relative;
+ top: 10px;
+ left: 10px;
+ border-radius: 10px 20px 30px 40px / 50px 60px 70px 80px;
+ }
+ </style>
+</head>
+<body>
+ <p>The test passes if there is a green rect not touching the sides with rounded corners, with different radii</p>
+ <div id="square"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-003.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-003.html
new file mode 100644
index 0000000000..5c57c39239
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-003.html
@@ -0,0 +1,26 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Masking: Test clip-path property and inset function with different rounded corners</title>
+ <link rel="help" href="https://drafts.csswg.org/css-shapes/#typedef-basic-shape">
+ <link rel="match" href="clip-path-inset-003-ref.html">
+ <link rel="author" title="Manish Goregaokar" href="mailto:manish@mozilla.com">
+ <style type="text/css">
+ #square {
+ width: 100px;
+ height: 100px;
+ border: solid green 50px;
+ background-color: green;
+ clip-path: inset(10px round 10px 20px 30px 40px / 50px 60px 70px 80px);
+ }
+ </style>
+</head>
+<body>
+ <p>The test passes if there is a green rect not touching the sides with rounded corners, with different radii</p>
+ <div id="square"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-001.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-001.html
new file mode 100644
index 0000000000..bd3093f15b
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-001.html
@@ -0,0 +1,21 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Masking: Test clip-path property and polygon function with absolute values</title>
+ <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+ <link rel="match" href="clip-path-rectangle-ref.html">
+ <meta name="assert" content="The clip-path property takes the basic shape
+ 'polygon' for clipping. Test absolute value arguments. On pass you should
+ see a green square and no red.">
+</head>
+<body>
+ <p>The test passes if there is a green rectangle and no red.</p>
+ <div style="width: 150px; height: 100px; border: solid red 50px; background-color: green; clip-path: polygon(50px 50px, 200px 50px, 200px 150px, 50px 150px)"></div>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-002.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-002.html
new file mode 100644
index 0000000000..b34a73228e
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-002.html
@@ -0,0 +1,24 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Masking: Test clip-path property and polygon function with percentage values</title>
+ <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+ <link rel="match" href="clip-path-rectangle-ref.html">
+ <meta name="assert" content="The clip-path property takes the basic shape
+ 'polygon' for clipping. Test percentage values for arguments. Percentage
+ values are relative to specified reference box. If no reference box was
+ specified, percentage values are relative to border-box. A number of
+ percentage values are specified as coordinates. On pass you should see a
+ green square and no red.">
+</head>
+<body>
+ <p>The test passes if there is a green rectangle and no red.</p>
+ <div style="width: 150px; height: 100px; border: solid red 50px; background-color: green; clip-path: polygon(20% 25%, 80% 25%, 80% 75%, 20% 75%)"></div>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-003.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-003.html
new file mode 100644
index 0000000000..067a3f939a
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-003.html
@@ -0,0 +1,21 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Masking: Test clip-path property and polygon function with absolute and percentage values</title>
+ <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+ <link rel="match" href="clip-path-rectangle-ref.html">
+ <meta name="assert" content="The clip-path property takes the basic shape
+ 'polygon' for clipping. Test absolute and percentage value arguments. On
+ pass you should see a green square and no red.">
+</head>
+<body>
+ <p>The test passes if there is a green rectangle and no red.</p>
+ <div style="width: 150px; height: 100px; border: solid red 50px; background-color: green; position: absolute; clip-path: polygon(20% 50px, 200px 25%, 200px 150px, 20% 75%)"></div>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-004.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-004.html
new file mode 100644
index 0000000000..7c937ed3ea
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-004.html
@@ -0,0 +1,25 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Masking: Test clip-path property and polygon function with fill rule evenodd</title>
+ <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+ <link rel="match" href="clip-path-rectangle-border-ref.html">
+ <meta name="assert" content="The clip-path property takes the basic shape 'polygon' for clipping.
+ The point list for the polygon creates a 'whole' with the dimension of the background. With
+ the fill rule 'evenodd', this whole is clipped out. The clipping makes the green background
+ of the parent div box visible.
+ On pass you should see a green box with a blue border.">
+</head>
+<body>
+ <p>The test passes if there is a green rectangle with a blue border.</p>
+ <div style="background-color: green; width: 250px;">
+ <div style="width: 150px; height: 100px; border: solid blue 50px; background-color: red; clip-path: polygon(evenodd, 0 0, 250px 0, 250px 200px, 0 200px, 0 50px, 200px 50px, 200px 150px, 50px 150px, 50px 50px, 0 50px)"></div>
+ </div>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-005.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-005.html
new file mode 100644
index 0000000000..5b141290fe
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-005.html
@@ -0,0 +1,26 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Masking: Test clip-path property and polygon function with fill rule nonzero</title>
+ <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+ <link rel="match" href="clip-path-rectangle-border-ref.html">
+ <meta name="assert" content="The clip-path property takes the basic shape
+ 'polygon' for clipping. The point list for the polygon creates a 'hole'
+ with the dimension of the background of the clipped element. With the fill
+ rule 'nonzero', this hole is clipped out. The clipping makes the green
+ background of the parent div box visible. On pass you should see a green
+ square with a blue border.">
+</head>
+<body>
+ <p>The test passes if there is a green rectangle with a blue border.</p>
+ <div style="background-color: green; width: 250px;">
+ <div style="width: 150px; height: 100px; border: solid blue 50px; background-color: red; clip-path: polygon(nonzero, 0 0, 250px 0, 250px 200px, 0 200px, 0 50px, 50px 50px, 50px 150px, 200px 150px, 200px 50px, 0 50px)"></div>
+ </div>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-006.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-006.html
new file mode 100644
index 0000000000..cb345de91d
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-006.html
@@ -0,0 +1,33 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Masking: Test clip-path and polygon with padding-box</title>
+ <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+ <link rel="match" href="clip-path-square-001-ref.html">
+ <meta name="assert" content="The clip-path property allows specifying
+ basic shapes and reference boxes. This test checks the usage of the correct
+ reference box 'padding-box' for the polygon() function by mixing percentage
+ and absolute values as coordinates. On sucess you should see a green square
+ and no red.">
+</head>
+<style>
+div {
+ width: 50px;
+ height: 50px;
+ background-color: green;
+ padding: 25px;
+ margin: 25px;
+ border: red solid 50px;
+}
+</style>
+<body>
+ <p>The test passes if there is a green square and no red.</p>
+ <div style="clip-path: polygon(0% 0%, 100% 0%, 100px 100%, 0 100px) padding-box"></div>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-007.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-007.html
new file mode 100644
index 0000000000..9d3c2dc9c3
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-007.html
@@ -0,0 +1,34 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Masking: Test clip-path and polygon with border-box</title>
+ <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+ <link rel="match" href="clip-path-stripes-001-ref.html">
+ <meta name="assert" content="The clip-path property allows specifying
+ basic shapes and reference boxes. This test checks the usage of the correct
+ reference box 'border-box' for the polygon() function by mixing percentage
+ and absolute values as coordinates. On sucess you should see a green
+ vertical stripe next to a lime green vertical stripe. Both should be of equal
+ size.">
+<style>
+div {
+ width: 50px;
+ height: 50px;
+ background-color: green;
+ padding: 25px;
+ margin: 25px;
+ border: red solid 50px;
+ border-left: lime solid 50px;
+}
+</style>
+<body>
+ <p>The test passes if you see a green vertical stripe next to a lime green vertical stripe, both stripes should be of equal size and there should be no red.</p>
+ <div style="clip-path: polygon(0% 25%, 50% 50px, 100px 75%, 0 150px) border-box"></div>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-008.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-008.html
new file mode 100644
index 0000000000..04edaf5a5a
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-008.html
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Masking: Test clip-path and polygon with margin-box</title>
+ <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+ <link rel="match" href="clip-path-stripes-002-ref.html">
+ <meta name="assert" content="The clip-path property allows specifying
+ basic shapes and reference boxes. This test checks the usage of the correct
+ reference box 'margin-box' for the polygon() function by mixing percentage
+ and absolute values as coordinates. On sucess you should see a green
+ vertical stripe next to a lime green vertical stripe. Both should be of equal
+ size.">
+</head>
+<style>
+div {
+ width: 50px;
+ height: 50px;
+ background-color: green;
+ padding: 25px;
+ margin: 25px;
+ border: red solid 25px;
+ border-left: lime solid 25px;
+}
+</style>
+<body>
+ <p>The test passes if you see a green vertical stripe next to a lime green vertical stripe, both stripes should be of equal size and there should be no red.</p>
+ <div style="clip-path: polygon(12.5% 25%, 37.5% 50px, 75px 50%, 25px 100px) margin-box"></div>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-009.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-009.html
new file mode 100644
index 0000000000..2debdc38e4
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-009.html
@@ -0,0 +1,33 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Masking: Test clip-path and polygon with content-box</title>
+ <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+ <link rel="match" href="clip-path-square-002-ref.html">
+ <meta name="assert" content="The clip-path property allows specifying
+ basic shapes and reference boxes. This test checks the usage of the correct
+ reference box 'content-box' for the polygon() function by mixing percentage
+ and absolute values as coordinates. On sucess you should see a green square
+ and no red.">
+</head>
+<style>
+div {
+ width: 50px;
+ height: 50px;
+ background-color: green;
+ padding: 25px;
+ margin: 25px;
+ border: red solid 25px;
+}
+</style>
+<body>
+ <p>The test passes if there is a green square and no red.</p>
+ <div style="clip-path: polygon(0% 0px, 50px 0%, 100% 50px, 0px 100%) content-box"></div>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-010.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-010.html
new file mode 100644
index 0000000000..c5656d134b
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-010.html
@@ -0,0 +1,36 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Masking: Test clip-path and polygon with fill-box</title>
+ <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+ <link rel="match" href="clip-path-stripes-001-ref.html">
+ <meta name="assert" content="The clip-path property allows specifying
+ basic shapes and reference boxes. This test checks the usage of the correct
+ reference box. 'fill-box' was specified but is not supported for HTML
+ elements. The used value should be 'border-box' for the polygon() function
+ instead. By mixing percentage and absolute values as coordinates we check
+ the correct used reference box. On sucess you should see a green
+ vertical stripe next to a lime green vertical stripe. Both should be of equal
+ size.">
+<style>
+div {
+ width: 50px;
+ height: 50px;
+ background-color: green;
+ padding: 25px;
+ margin: 25px;
+ border: red solid 50px;
+ border-left: lime solid 50px;
+}
+</style>
+<body>
+ <p>The test passes if you see a green vertical stripe next to a lime green vertical stripe, both stripes should be of equal size and there should be no red.</p>
+ <div style="clip-path: polygon(0% 25%, 50% 50px, 100px 75%, 0 150px) fill-box"></div>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-011.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-011.html
new file mode 100644
index 0000000000..f8a80ef2df
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-011.html
@@ -0,0 +1,36 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Masking: Test clip-path and polygon with stroke-box</title>
+ <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+ <link rel="match" href="clip-path-stripes-001-ref.html">
+ <meta name="assert" content="The clip-path property allows specifying
+ basic shapes and reference boxes. This test checks the usage of the correct
+ reference box. 'stroke-box' was specified but is not supported for HTML
+ elements. The used value should be 'border-box' for the polygon() function
+ instead. By mixing percentage and absolute values as coordinates we check
+ the correct used reference box. On sucess you should see a green
+ vertical stripe next to a lime green vertical stripe. Both should be of equal
+ size.">
+<style>
+div {
+ width: 50px;
+ height: 50px;
+ background-color: green;
+ padding: 25px;
+ margin: 25px;
+ border: red solid 50px;
+ border-left: lime solid 50px;
+}
+</style>
+<body>
+ <p>The test passes if you see a green vertical stripe next to a lime green vertical stripe, both stripes should be of equal size and there should be no red.</p>
+ <div style="clip-path: polygon(0% 25%, 50% 50px, 100px 75%, 0 150px) stroke-box"></div>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-012.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-012.html
new file mode 100644
index 0000000000..dc48d662e5
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-012.html
@@ -0,0 +1,36 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Masking: Test clip-path and polygon with view-box</title>
+ <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+ <link rel="match" href="clip-path-stripes-001-ref.html">
+ <meta name="assert" content="The clip-path property allows specifying
+ basic shapes and reference boxes. This test checks the usage of the correct
+ reference box. 'view-box' was specified but is not supported for HTML
+ elements. The used value should be 'border-box' for the polygon() function
+ instead. By mixing percentage and absolute values as coordinates we check
+ the correct used reference box. On sucess you should see a green
+ vertical stripe next to a lime green vertical stripe. Both should be of equal
+ size.">
+<style>
+div {
+ width: 50px;
+ height: 50px;
+ background-color: green;
+ padding: 25px;
+ margin: 25px;
+ border: red solid 50px;
+ border-left: lime solid 50px;
+}
+</style>
+<body>
+ <p>The test passes if you see a green vertical stripe next to a lime green vertical stripe, both stripes should be of equal size and there should be no red.</p>
+ <div style="clip-path: polygon(0% 25%, 50% 50px, 100px 75%, 0 150px) view-box"></div>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-013.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-013.html
new file mode 100644
index 0000000000..203c7e1015
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-013.html
@@ -0,0 +1,51 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Masking: Test clip-path and polygon different units</title>
+ <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+ <link rel="match" href="clip-path-stripes-003-ref.html">
+ <meta name="assert" content="Test the support of different units for
+ polygon coordinates. The test passes if you see a multiple green and blue
+ stripe pairs. For each pair, the blue and green stripe must be of same
+ length.">
+<style>
+div {
+ width: 100%;
+ height: 20px;
+ background-color: green;
+ padding: 0;
+ margin: 0;
+}
+div:nth-child(odd) {
+ margin-bottom: 5px;
+ background-color: blue;
+}
+</style>
+<body>
+ <p>The test passes if you see a multiple green and blue stripe pairs. For each pair, the blue and green stripe must be of same length.</p>
+ <div style="clip-path: polygon(0 0, 50% 0, 50% 20px, 0 20px)"></div>
+ <div style="width: 50%"></div>
+
+ <div style="clip-path: polygon(0 0, 20em 0, 20em 20px, 0 20px)"></div>
+ <div style="width: 20em"></div>
+
+ <!-- Activate when SVG2 is supported.
+ <div style="clip-path: polygon(0 0, 50vw 0, 50vw 20px, 0 20px)"></div>
+ <div style="width: 50vw"></div>
+
+ <div style="clip-path: polygon(0 0, 40vh 0, 40vh 20px, 0 20px)"></div>
+ <div style="width: 40vh"></div>
+
+ <div style="clip-path: polygon(0 0, calc(30% + 15px) 0, calc(30% + 15px) 20px, 0 20px)"></div>
+ <div style="width: calc(30% + 15px)"></div>-->
+
+ <div style="clip-path: polygon(0 0, 30ex 0, 30ex 20px, 0 20px)"></div>
+ <div style="width: 30ex"></div>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-rectangle-border-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-rectangle-border-ref.html
new file mode 100644
index 0000000000..2a9f65f163
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-rectangle-border-ref.html
@@ -0,0 +1,15 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+</head>
+<body>
+ <p>The test passes if there is a green rectangle with a blue border.</p>
+ <div style="width: 150px; height: 100px; border: solid blue 50px; background-color: green;"></div>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-rectangle-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-rectangle-ref.html
new file mode 100644
index 0000000000..45bc902c3d
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-rectangle-ref.html
@@ -0,0 +1,15 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+</head>
+<body>
+ <p>The test passes if there is a green rectangle and no red.</p>
+ <div style="margin-top: 50px; margin-left: 50px; position: absolute; width: 150px; height: 100px; background-color: green;"></div>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-square-001-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-square-001-ref.html
new file mode 100644
index 0000000000..f0f26e065c
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-square-001-ref.html
@@ -0,0 +1,15 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Masking: Reftest reference</title>
+ <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+</head>
+<body>
+ <p>The test passes if there is a green square and no red.</p>
+ <div style="width: 100px; height: 100px; background-color: green; margin: 75px;"></div>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-square-002-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-square-002-ref.html
new file mode 100644
index 0000000000..1831ecebae
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-square-002-ref.html
@@ -0,0 +1,15 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Masking: Reftest reference</title>
+ <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+</head>
+<body>
+ <p>The test passes if there is a green square and no red.</p>
+ <div style="width: 50px; height: 50px; background-color: green; margin: 75px;"></div>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-stripes-001-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-stripes-001-ref.html
new file mode 100644
index 0000000000..6add82da00
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-stripes-001-ref.html
@@ -0,0 +1,39 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Masking: Test clip-path and polygon with border-box</title>
+ <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+ <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+ <link rel="match" href="clip-path-stripes-001-ref.html">
+ <meta name="assert" content="The clip-path property allows specifying
+ basic shapes and reference boxes. This test checks the usage of the correct
+ reference box 'border-box' for the polygon() function by mixing percentage
+ and absolute values as coordinates. On sucess you should see a green
+ vertical stripe next to a lime green vertical stripe. Both should be of equal
+ size.">
+<style>
+div {
+ width: 50px;
+ height: 50px;
+ background-color: green;
+ padding: 25px;
+ margin: 25px;
+ border: red solid 50px;
+ border-left: lime solid 50px;
+}
+</style>
+<body>
+ <p>The test passes if you see a green vertical stripe next to a lime green vertical stripe, both stripes should be of equal size and there should be no red.</p>
+ <div style="clip-path: url(#c1)"></div>
+ <svg>
+ <clipPath id="c1">
+ <rect x="0" y="50" width="100" height="100"/>
+ </clipPath>
+ </svg>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-stripes-002-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-stripes-002-ref.html
new file mode 100644
index 0000000000..6a0132fb69
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-stripes-002-ref.html
@@ -0,0 +1,31 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Masking: Reftest reference</title>
+ <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+</head>
+<style>
+div {
+ width: 50px;
+ height: 50px;
+ background-color: green;
+ padding: 25px;
+ margin: 25px;
+ border: red solid 25px;
+ border-left: lime solid 25px;
+}
+</style>
+<body>
+ <p>The test passes if you see a green vertical stripe next to a lime green vertical stripe, both stripes should be of equal size and there should be no red.</p>
+ <div style="clip-path: polygon(12.5% 25%, 37.5% 50px, 75px 50%, 25px 100px) margin-box"></div>
+ <svg>
+ <clipPath id="c1">
+ <rect x="0" y="50" width="50" height="50"/>
+ </clipPath>
+ </svg>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-stripes-003-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-stripes-003-ref.html
new file mode 100644
index 0000000000..731ff91533
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-stripes-003-ref.html
@@ -0,0 +1,63 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Masking: Reftest reference</title>
+ <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+<style>
+div {
+ height: 20px;
+ width: 100%;
+ background-color: green;
+ padding: 0;
+ margin: 0;
+}
+div:nth-child(odd) {
+ margin-bottom: 5px;
+ background-color: blue;
+}
+</style>
+<body>
+ <p>The test passes if you see a multiple green and blue stripe pairs. For each pair, the blue and green stripe must be of same length.</p>
+ <div style="clip-path: url(#c1)"></div>
+ <div style="width: 50%"></div>
+
+ <div style="clip-path: url(#c2)"></div>
+ <div style="width: 20em"></div>
+
+ <!--<div style="clip-path: url(#c3)"></div>
+ <div style="width: 50vw"></div>
+
+ <div style="clip-path: url(#c4)"></div>
+ <div style="width: 40vh"></div>
+
+ <div style="clip-path: url(#c5)"></div>
+ <div style="width: calc(30% + 15px)"></div>-->
+
+ <div style="clip-path: url(#c6)"></div>
+ <div style="width: 30ex"></div>
+ <svg>
+ <clipPath id="c1" clipPathUnits="objectBoundingBox">
+ <rect width="0.5" height="1"/>
+ </clipPath>
+ <clipPath id="c2">
+ <rect width="20em" height="20"/>
+ </clipPath>
+ <!--<clipPath id="c3">
+ <rect width="50vw" height="20"/>
+ </clipPath>
+ <clipPath id="c4">
+ <rect width="40vh" height="20"/>
+ </clipPath>
+ <clipPath id="c5">
+ <rect width="calc(30% + 15px)" height="20"/>
+ </clipPath>-->
+ <clipPath id="c6">
+ <rect width="30ex" height="20"/>
+ </clipPath>
+ </svg>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-stroke-001-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-stroke-001-ref.html
new file mode 100644
index 0000000000..64d41f90c5
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-stroke-001-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+</head>
+<body>
+ <svg width="367" height="146.8" style="overflow: hidden;" aria-label="A chart.">
+ <g>
+ <rect x="20" y="22" width="297" height="119" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect>
+ <g>
+ <g>
+ <rect x="20" y="140" width="297" height="1" stroke="none" stroke-width="0" fill="#dddddd"></rect>
+ </g>
+ <g>
+ <path d="M25.785714285714285,131.35382L36.35714285714286,140.5L46.92857142857143,136.76864333333333L57.5,140.5L68.07142857142857,140.5L78.64285714285714,108.29988466666667L89.21428571428571,140.5L99.78571428571428,138.777318L110.35714285714286,140.5L120.92857142857143,136.838106L131.5,136.09950466666666L142.07142857142856,137.82533333333333L152.64285714285714,128.40448866666668L163.21428571428572,133.099748L173.78571428571428,140.5L184.35714285714286,125.99917666666667L194.92857142857142,127.75560666666667L205.5,134.93449066666668L216.07142857142856,125.536184L226.64285714285714,140.29468L237.21428571428572,138.080528L247.78571428571428,136.22847866666666L258.3571428571429,140.5L268.92857142857144,122.33464733333334L279.5,140.5L290.07142857142856,140.5L300.6428571428571,32.77095600000001L311.2142857142857,106.47371666666666" stroke="#5f8fc9" stroke-width="2" fill-opacity="1" fill="none"></path>
+ </g>
+ </g>
+ </g>
+ </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-stroke-001.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-stroke-001.html
new file mode 100644
index 0000000000..30ddee2d56
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-stroke-001.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+</head>
+<body>
+ <svg width="367" height="146.8" style="overflow: hidden;" aria-label="A chart.">
+ <defs id="defs">
+ <clipPath id="_ABSTRACT_RENDERER_ID_1">
+ <rect x="20" y="22" width="297" height="124"></rect>
+ </clipPath>
+ </defs>
+ <g>
+ <rect x="20" y="22" width="297" height="119" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect>
+ <g clip-path="url(#_ABSTRACT_RENDERER_ID_1)">
+ <g>
+ <rect x="20" y="140" width="297" height="1" stroke="none" stroke-width="0" fill="#dddddd"></rect>
+ </g>
+ <g>
+ <path d="M25.785714285714285,131.35382L36.35714285714286,140.5L46.92857142857143,136.76864333333333L57.5,140.5L68.07142857142857,140.5L78.64285714285714,108.29988466666667L89.21428571428571,140.5L99.78571428571428,138.777318L110.35714285714286,140.5L120.92857142857143,136.838106L131.5,136.09950466666666L142.07142857142856,137.82533333333333L152.64285714285714,128.40448866666668L163.21428571428572,133.099748L173.78571428571428,140.5L184.35714285714286,125.99917666666667L194.92857142857142,127.75560666666667L205.5,134.93449066666668L216.07142857142856,125.536184L226.64285714285714,140.29468L237.21428571428572,138.080528L247.78571428571428,136.22847866666666L258.3571428571429,140.5L268.92857142857144,122.33464733333334L279.5,140.5L290.07142857142856,140.5L300.6428571428571,32.77095600000001L311.2142857142857,106.47371666666666" stroke="#5f8fc9" stroke-width="2" fill-opacity="1" fill="none"></path>
+ </g>
+ </g>
+ </g>
+ </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-transform-001-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-transform-001-ref.html
new file mode 100644
index 0000000000..f4a0c48e93
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-transform-001-ref.html
@@ -0,0 +1,5 @@
+<svg>
+ <g>
+ <circle cx="50" cy="50" r="50" style="fill: green;"></circle>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-transform-001.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-transform-001.html
new file mode 100644
index 0000000000..44ec2997f2
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-transform-001.html
@@ -0,0 +1,10 @@
+<svg>
+ <defs>
+ <clipPath id="clip" transform="translate(-50,0)">
+ <rect x="0" y="0" width="100" height="100" transform="translate(50,0)"></rect>
+ </clipPath>
+ </defs>
+ <g clip-path="url(#clip)">
+ <circle cx="50" cy="50" r="50" style="fill: green;"></circle>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/svg-integration/clip-path/reftest.list b/layout/reftests/svg/svg-integration/clip-path/reftest.list
new file mode 100644
index 0000000000..914c4f6168
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/reftest.list
@@ -0,0 +1,61 @@
+# These tests verify that CSS clip-path behaves properly.
+# e.g. clip-path: polygon(nonzero, 3px 3px, 20% 20%)
+
+# Following tests adapted from W3C csswg-test repo
+== clip-path-polygon-001.html clip-path-rectangle-ref.html
+== clip-path-polygon-002.html clip-path-rectangle-ref.html
+== clip-path-polygon-003.html clip-path-rectangle-ref.html
+== clip-path-polygon-004.html clip-path-rectangle-border-ref.html
+== clip-path-polygon-005.html clip-path-rectangle-border-ref.html
+== clip-path-polygon-006.html clip-path-square-001-ref.html
+== clip-path-polygon-007.html clip-path-stripes-001-ref.html
+== clip-path-polygon-008.html clip-path-stripes-002-ref.html
+== clip-path-polygon-009.html clip-path-square-002-ref.html
+== clip-path-polygon-010.html clip-path-stripes-001-ref.html
+== clip-path-polygon-011.html clip-path-stripes-001-ref.html
+== clip-path-polygon-012.html clip-path-stripes-001-ref.html
+fuzzy(0-1,0-20) == clip-path-polygon-013.html clip-path-stripes-003-ref.html
+
+fuzzy-if(!useDrawSnapshot,35-70,696-800) == clip-path-circle-001.html clip-path-circle-001-ref.html
+fuzzy-if(!useDrawSnapshot,35-70,696-800) == clip-path-circle-002.html clip-path-circle-001-ref.html
+fuzzy-if(!useDrawSnapshot,35-70,696-800) == clip-path-circle-003.html clip-path-circle-001-ref.html
+fuzzy-if(!useDrawSnapshot,35-70,696-800) == clip-path-circle-004.html clip-path-circle-001-ref.html
+fuzzy-if(!useDrawSnapshot,35-70,696-800) == clip-path-circle-005.html clip-path-circle-002-ref.html
+fuzzy-if(!useDrawSnapshot,35-70,696-800) == clip-path-circle-006.html clip-path-circle-001-ref.html
+fuzzy-if(!useDrawSnapshot,35-70,696-800) == clip-path-circle-007.html clip-path-circle-002-ref.html
+fuzzy-if(!useDrawSnapshot,35-70,696-800) == clip-path-circle-008.html clip-path-circle-002-ref.html
+fuzzy-if(!useDrawSnapshot,35-70,696-800) == clip-path-circle-009.html clip-path-circle-003-ref.html
+fuzzy-if(!useDrawSnapshot,35-70,696-800) == clip-path-circle-010.html clip-path-circle-004-ref.html
+fuzzy-if(!useDrawSnapshot,35-70,696-800) == clip-path-circle-011.html clip-path-circle-005-ref.html
+fuzzy-if(!useDrawSnapshot,35-70,696-800) == clip-path-circle-012.html clip-path-circle-006-ref.html
+fuzzy-if(!useDrawSnapshot,35-70,696-800) == clip-path-circle-013.html clip-path-circle-002-ref.html
+fuzzy-if(!useDrawSnapshot,34-70,696-920) == clip-path-circle-014.html clip-path-circle-007-ref.html
+fuzzy-if(!useDrawSnapshot,34-70,696-920) == clip-path-circle-015.html clip-path-circle-008-ref.html
+fuzzy-if(!useDrawSnapshot,34-70,696-920) == clip-path-circle-016.html clip-path-circle-009-ref.html
+fuzzy-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu),0-16,0-9) fuzzy-if(!useDrawSnapshot,34-70,696-920) == clip-path-circle-017.html clip-path-circle-007-ref.html
+fuzzy-if(!useDrawSnapshot,35-70,696-800) == clip-path-circle-018.html clip-path-circle-010-ref.html
+fuzzy-if(!useDrawSnapshot,35-70,696-800) == clip-path-circle-019.html clip-path-circle-002-ref.html
+fuzzy-if(!useDrawSnapshot,35-70,696-800) == clip-path-circle-020.html clip-path-circle-002-ref.html
+fuzzy-if(winWidget||cocoaWidget,0-1,0-5) == clip-path-circle-021.html clip-path-circle-021-ref.html
+
+fuzzy-if(!useDrawSnapshot,36-40,1096-1162) == clip-path-ellipse-001.html clip-path-ellipse-001-ref.html
+fuzzy-if(!useDrawSnapshot,36-40,1096-1162) == clip-path-ellipse-002.html clip-path-ellipse-001-ref.html
+fuzzy-if(!useDrawSnapshot,36-40,1096-1162) == clip-path-ellipse-003.html clip-path-ellipse-001-ref.html
+fuzzy-if(!useDrawSnapshot,36-40,1096-1162) == clip-path-ellipse-004.html clip-path-ellipse-001-ref.html
+fuzzy-if(!useDrawSnapshot,36-40,1096-1162) == clip-path-ellipse-005.html clip-path-ellipse-001-ref.html
+fuzzy-if(!useDrawSnapshot,36-40,1096-1162) == clip-path-ellipse-006.html clip-path-ellipse-001-ref.html
+fuzzy-if(!useDrawSnapshot,36-40,1096-1162) == clip-path-ellipse-007.html clip-path-ellipse-001-ref.html
+fuzzy-if(!useDrawSnapshot,36-40,1096-1162) == clip-path-ellipse-008.html clip-path-ellipse-001-ref.html
+
+== clip-path-inset-001a.html clip-path-inset-001-ref.html
+== clip-path-inset-001b.html clip-path-inset-001-ref.html
+== clip-path-inset-001c.html clip-path-inset-001-ref.html
+# Anti-aliasing behavior for masking and borders is different
+fuzzy-if(useDrawSnapshot,0-64,0-146) fuzzy-if(!useDrawSnapshot,0-2,0-28) == clip-path-inset-002a.html clip-path-inset-002-ref.html
+fuzzy-if(useDrawSnapshot,0-64,0-146) fuzzy-if(!useDrawSnapshot,0-2,0-28) == clip-path-inset-002b.html clip-path-inset-002-ref.html
+fuzzy-if(useDrawSnapshot,0-64,0-146) fuzzy-if(!useDrawSnapshot,0-2,0-28) == clip-path-inset-002c.html clip-path-inset-002-ref.html
+fuzzy-if(useDrawSnapshot,0-64,0-340) fuzzy-if(!useDrawSnapshot,0-1,0-60) == clip-path-inset-003.html clip-path-inset-003-ref.html
+
+fuzzy(0-1,0-17) == clip-path-stroke-001.html clip-path-stroke-001-ref.html
+
+== clip-path-transform-001.html clip-path-transform-001-ref.html
diff --git a/layout/reftests/svg/svg-integration/clipPath-html-01-extref.xhtml b/layout/reftests/svg/svg-integration/clipPath-html-01-extref.xhtml
new file mode 100644
index 0000000000..7751e5f1fb
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clipPath-html-01-extref.xhtml
@@ -0,0 +1,15 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+<body style="margin:0">
+ <div style="position:absolute; top:0; left:0; clip-path: url(clipPath-html-01.xhtml#c1); width:500px; height:500px; background:lime;"></div>
+ <svg:svg height="0">
+ <!-- use an empty g to force clipPath-html-01.xhtml to load before onload -->
+ <svg:use xlink:href="clipPath-html-01.xhtml#empty" />
+ </svg:svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clipPath-html-01-ref.svg b/layout/reftests/svg/svg-integration/clipPath-html-01-ref.svg
new file mode 100644
index 0000000000..182b042172
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clipPath-html-01-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" version="1.1"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <rect x="250" y="0" width="250" height="500" fill="lime"/>
+</svg>
diff --git a/layout/reftests/svg/svg-integration/clipPath-html-01.xhtml b/layout/reftests/svg/svg-integration/clipPath-html-01.xhtml
new file mode 100644
index 0000000000..d1f5135053
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clipPath-html-01.xhtml
@@ -0,0 +1,18 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:svg="http://www.w3.org/2000/svg">
+<body style="margin:0">
+ <div style="clip-path: url(#c1); width:500px; height:500px; background:lime;"></div>
+ <svg:svg height="0">
+ <!-- so that other documents can svg:use this one and force it to
+ load before onload -->
+ <svg:g id="empty" />
+ <svg:clipPath id="c1" clipPathUnits="objectBoundingBox">
+ <svg:rect x="0.5" y="0" width="0.5" height="1"/>
+ </svg:clipPath>
+ </svg:svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clipPath-html-02-extref.xhtml b/layout/reftests/svg/svg-integration/clipPath-html-02-extref.xhtml
new file mode 100644
index 0000000000..433d5d471f
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clipPath-html-02-extref.xhtml
@@ -0,0 +1,18 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+<body style="margin:0">
+ <div style="clip-path: url(clipPath-html-02.xhtml#c1); width:500px; height:200px; background:lime;">
+ <div style="height:200px;"/>
+ <div style="height:200px; background:blue;"/>
+ </div>
+ <svg:svg height="0">
+ <!-- use an empty g to force clipPath-html-02.xhtml to load before onload -->
+ <svg:use xlink:href="clipPath-html-02.xhtml#empty" />
+ </svg:svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clipPath-html-02-ref.svg b/layout/reftests/svg/svg-integration/clipPath-html-02-ref.svg
new file mode 100644
index 0000000000..83065a0cd6
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clipPath-html-02-ref.svg
@@ -0,0 +1,9 @@
+<!--
+ 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"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <rect x="0" y="0" width="500" height="200" fill="lime"/>
+ <rect x="0" y="200" width="500" height="120" fill="blue"/>
+</svg>
diff --git a/layout/reftests/svg/svg-integration/clipPath-html-02.xhtml b/layout/reftests/svg/svg-integration/clipPath-html-02.xhtml
new file mode 100644
index 0000000000..8429e71c7a
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clipPath-html-02.xhtml
@@ -0,0 +1,23 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+<body style="margin:0">
+ <div style="clip-path: url(#c1); width:500px; height:200px; background:lime;">
+ <div style="height:200px;"/>
+ <div style="height:200px; background:blue;"/>
+ </div>
+
+ <svg:svg height="0">
+ <!-- so that other documents can svg:use this one and force it to
+ load before onload -->
+ <svg:g id="empty" />
+ <svg:clipPath id="c1" clipPathUnits="objectBoundingBox">
+ <svg:rect x="0" y="0" width="1" height="0.8"/>
+ </svg:clipPath>
+ </svg:svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clipPath-html-03-extref.xhtml b/layout/reftests/svg/svg-integration/clipPath-html-03-extref.xhtml
new file mode 100644
index 0000000000..fb0d8e87cf
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clipPath-html-03-extref.xhtml
@@ -0,0 +1,18 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+<body style="margin:0">
+ <div style="clip-path: url(clipPath-html-03.xhtml#c1); width:500px; height:200px; background:lime;">
+ <div style="height:200px;"/>
+ <div style="height:200px; background:blue;"/>
+ </div>
+ <svg:svg height="0">
+ <!-- use an empty g to force clipPath-html-03.xhtml to load before onload -->
+ <svg:use xlink:href="clipPath-html-03.xhtml#empty" />
+ </svg:svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clipPath-html-03-ref.svg b/layout/reftests/svg/svg-integration/clipPath-html-03-ref.svg
new file mode 100644
index 0000000000..19cf5eb16b
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clipPath-html-03-ref.svg
@@ -0,0 +1,10 @@
+<!--
+ 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"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <rect x="0" y="0" width="100" height="150" fill="lime"/>
+ <rect x="100" y="0" width="100" height="200" fill="lime"/>
+ <rect x="100" y="200" width="100" height="100" fill="blue"/>
+</svg>
diff --git a/layout/reftests/svg/svg-integration/clipPath-html-03.xhtml b/layout/reftests/svg/svg-integration/clipPath-html-03.xhtml
new file mode 100644
index 0000000000..eb6a1edbcc
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clipPath-html-03.xhtml
@@ -0,0 +1,23 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:svg="http://www.w3.org/2000/svg">
+<body style="margin:0">
+ <div style="clip-path: url(#c1); width:500px; height:200px; background:lime;">
+ <div style="height:200px;"/>
+ <div style="height:200px; background:blue;"/>
+ </div>
+
+ <svg:svg height="0">
+ <!-- so that other documents can svg:use this one and force it to
+ load before onload -->
+ <svg:g id="empty" />
+ <svg:clipPath id="c1">
+ <svg:rect x="0" y="0" width="100" height="150"/>
+ <svg:rect x="100" y="0" width="100" height="300"/>
+ </svg:clipPath>
+ </svg:svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clipPath-html-04-extref.xhtml b/layout/reftests/svg/svg-integration/clipPath-html-04-extref.xhtml
new file mode 100644
index 0000000000..4f35f255bf
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clipPath-html-04-extref.xhtml
@@ -0,0 +1,22 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+<head>
+<style>
+.unit { display:inline-block; width:100px; height:1px; }
+</style>
+</head>
+<body style="margin:0; width:350px; line-height:100px;">
+ <span class="unit"/><span class="unit"
+ /><span style="clip-path:url(clipPath-html-04.xhtml#c1); background:lime;"><span class="unit"/><span class="unit"
+ /></span>
+ <svg:svg height="0">
+ <!-- use an empty g to force clipPath-html-04.xhtml to load before onload -->
+ <svg:use xlink:href="clipPath-html-04.xhtml#empty" />
+ </svg:svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clipPath-html-04-ref.xhtml b/layout/reftests/svg/svg-integration/clipPath-html-04-ref.xhtml
new file mode 100644
index 0000000000..640997d4d2
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clipPath-html-04-ref.xhtml
@@ -0,0 +1,14 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+<body style="margin:0; line-height:100px;">
+ <span style="display:inline-block; width:200px;"
+ /><span style="background:lime;"><span style="display:inline-block; width:50px;"/></span><br/>
+ <span style="display:inline-block; width:50px;"
+ /><span style="background:lime;"><span style="display:inline-block; width:50px;"/></span>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clipPath-html-04.xhtml b/layout/reftests/svg/svg-integration/clipPath-html-04.xhtml
new file mode 100644
index 0000000000..a516f1ff1e
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clipPath-html-04.xhtml
@@ -0,0 +1,27 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+<head>
+<style>
+.unit { display:inline-block; width:100px; height:1px; }
+</style>
+</head>
+<body style="margin:0; width:350px; line-height:100px;">
+ <span class="unit"/><span class="unit"
+ /><span style="clip-path:url(#c1); background:lime;"><span class="unit"/><span class="unit"
+ /></span>
+
+ <svg:svg height="0">
+ <!-- so that other documents can svg:use this one and force it to
+ load before onload -->
+ <svg:g id="empty" />
+ <svg:clipPath id="c1">
+ <svg:rect x="50" y="0" width="200" height="200"/>
+ </svg:clipPath>
+ </svg:svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clipPath-html-05-extref.xhtml b/layout/reftests/svg/svg-integration/clipPath-html-05-extref.xhtml
new file mode 100644
index 0000000000..6d4e7c8972
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clipPath-html-05-extref.xhtml
@@ -0,0 +1,22 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+<head>
+<style>
+.unit { display:inline-block; width:100px; height:1px; }
+</style>
+</head>
+<body style="margin:0; width:350px; line-height:100px;">
+ <span class="unit"/><span class="unit"
+ /><span style="clip-path:url(clipPath-html-05.xhtml#c1); background:lime;"><span class="unit"/><span class="unit"
+ /></span>
+ <svg:svg height="0">
+ <!-- use an empty g to force clipPath-html-05.xhtml to load before onload -->
+ <svg:use xlink:href="clipPath-html-05.xhtml#empty" />
+ </svg:svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clipPath-html-05-ref.xhtml b/layout/reftests/svg/svg-integration/clipPath-html-05-ref.xhtml
new file mode 100644
index 0000000000..f6e7d26eca
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clipPath-html-05-ref.xhtml
@@ -0,0 +1,14 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+<body style="margin:0; line-height:100px;">
+ <span style="display:inline-block; width:200px;"
+ /><span style="background:lime;"><span style="display:inline-block; width:70px;"/></span><br/>
+ <span style="display:inline-block; width:30px;"
+ /><span style="background:lime;"><span style="display:inline-block; width:70px;"/></span>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clipPath-html-05.xhtml b/layout/reftests/svg/svg-integration/clipPath-html-05.xhtml
new file mode 100644
index 0000000000..15a3be6b61
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clipPath-html-05.xhtml
@@ -0,0 +1,27 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+<head>
+<style>
+.unit { display:inline-block; width:100px; height:1px; }
+</style>
+</head>
+<body style="margin:0; width:350px; line-height:100px;">
+ <span class="unit"/><span class="unit"
+ /><span style="clip-path:url(#c1); background:lime;"><span class="unit"/><span class="unit"
+ /></span>
+
+ <svg:svg height="0">
+ <!-- so that other documents can svg:use this one and force it to
+ load before onload -->
+ <svg:g id="empty" />
+ <svg:clipPath id="c1" clipPathUnits="objectBoundingBox">
+ <svg:rect x="0.1" y="0" width="0.8" height="1"/>
+ </svg:clipPath>
+ </svg:svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clipPath-html-06-extref.xhtml b/layout/reftests/svg/svg-integration/clipPath-html-06-extref.xhtml
new file mode 100644
index 0000000000..339bc629a4
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clipPath-html-06-extref.xhtml
@@ -0,0 +1,24 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+<head>
+<style>
+.unit { display:inline-block; width:100px; height:10px; }
+</style>
+</head>
+<body style="margin:0">
+ <span style="clip-path: url(clipPath-html-06.xhtml#c1);">
+ <span class="unit" style="background:lime;"></span>
+ <div style="height:200px; width:100px;"/>
+ <span class="unit" style="background:lime;"></span>
+ </span>
+ <svg:svg height="0" style="display: block">
+ <!-- use an empty g to force clipPath-html-06.xhtml to load before onload -->
+ <svg:use xlink:href="clipPath-html-06.xhtml#empty" />
+ </svg:svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clipPath-html-06-ref.xhtml b/layout/reftests/svg/svg-integration/clipPath-html-06-ref.xhtml
new file mode 100644
index 0000000000..747f8105ef
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clipPath-html-06-ref.xhtml
@@ -0,0 +1,20 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+<head>
+<style>
+.unit { display:inline-block; width:50px; height:10px; }
+</style>
+</head>
+<body style="margin:0">
+ <span>
+ <span class="unit"></span>
+ <div style="height:200px;"/>
+ <span class="unit" style="background:lime;"></span>
+ </span>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clipPath-html-06.xhtml b/layout/reftests/svg/svg-integration/clipPath-html-06.xhtml
new file mode 100644
index 0000000000..8008d576e5
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clipPath-html-06.xhtml
@@ -0,0 +1,29 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+<head>
+<style>
+.unit { display:inline-block; width:100px; height:10px; }
+</style>
+</head>
+<body style="margin:0">
+ <span style="clip-path: url(#c1);">
+ <span class="unit" style="background:lime;"></span>
+ <div style="height:200px; width:100px;"/>
+ <span class="unit" style="background:lime;"></span>
+ </span>
+
+ <svg:svg height="0" style="display: block">
+ <!-- so that other documents can svg:use this one and force it to
+ load before onload -->
+ <svg:g id="empty" />
+ <svg:clipPath id="c1" clipPathUnits="objectBoundingBox">
+ <svg:rect x="0" y="0.5" width="0.5" height="0.5"/>
+ </svg:clipPath>
+ </svg:svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clipPath-html-07-ref.svg b/layout/reftests/svg/svg-integration/clipPath-html-07-ref.svg
new file mode 100644
index 0000000000..4d7153968a
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clipPath-html-07-ref.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <rect x="100" y="100" width="100" height="100" fill="black"/>
+ <rect x="150" y="150" width="50" height="50" fill="yellow"/>
+</svg>
diff --git a/layout/reftests/svg/svg-integration/clipPath-html-07.xhtml b/layout/reftests/svg/svg-integration/clipPath-html-07.xhtml
new file mode 100644
index 0000000000..8391ad01e6
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clipPath-html-07.xhtml
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=822014 -->
+ <head>
+ <title>Test clip-path on outer-&lt;svg&gt; with border</title>
+ <style>
+
+html, body {
+ border: 0; margin: 0;
+}
+
+ </style>
+ </head>
+ <body>
+ <svg xmlns="http://www.w3.org/2000/svg"
+ width="200" height="200" clip-path="url(#cp)"
+ style="border: solid 100px black; margin: 50px;">
+
+ <clipPath id="cp">
+ <path d="M50,50 150,50 150,150 50,150 z"/>
+ </clipPath>
+
+ <rect width="100%" height="100%" fill="yellow"/>
+
+ </svg>
+ </body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clipPath-html-08.xhtml b/layout/reftests/svg/svg-integration/clipPath-html-08.xhtml
new file mode 100644
index 0000000000..3eb0dfa3c3
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clipPath-html-08.xhtml
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=822014 -->
+ <head>
+ <title>Test clip-path on &lt;div&gt; with border</title>
+ <style>
+
+html, body {
+ border: 0; margin: 0;
+}
+
+ </style>
+ </head>
+ <body>
+ <div style="clip-path: url(#cp); width: 200px; height: 200px; background: yellow; border: solid 100px black; margin: 50px;"></div>
+ <svg xmlns="http://www.w3.org/2000/svg" height="0">
+ <clipPath id="cp">
+ <path d="M50,50 150,50 150,150 50,150 z"/>
+ </clipPath>
+ </svg>
+ </body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clipPath-html-zoomed-01.xhtml b/layout/reftests/svg/svg-integration/clipPath-html-zoomed-01.xhtml
new file mode 100644
index 0000000000..4f98941543
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clipPath-html-zoomed-01.xhtml
@@ -0,0 +1,15 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:svg="http://www.w3.org/2000/svg" reftest-zoom="2">
+<body style="margin:0">
+ <div style="clip-path: url(#c1); width:250px; height:250px; background:lime;"></div>
+ <svg:svg height="0">
+ <svg:clipPath id="c1" clipPathUnits="objectBoundingBox">
+ <svg:rect x="0.5" y="0" width="0.5" height="1"/>
+ </svg:clipPath>
+ </svg:svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clipPath-transformed-html-01.xhtml b/layout/reftests/svg/svg-integration/clipPath-transformed-html-01.xhtml
new file mode 100644
index 0000000000..e1569f1f6c
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clipPath-transformed-html-01.xhtml
@@ -0,0 +1,44 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+ <title>Test SVG clipPath clipping of transformed HTML elements</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=773197 -->
+ <style type="text/css">
+
+* { margin: 0; border: 0; padding: 0;}
+
+div {
+ position: absolute;
+ left: 1px;
+ top: 1px;
+ width: 3px;
+ height: 3px;
+ transform: scale(100,100);
+ transform-origin: 0 0;
+}
+
+ </style>
+</head>
+<body bgcolor="lime">
+
+ <svg xmlns="http://www.w3.org/2000/svg" width="300" height="300"
+ style="display:block; position:absolute;">
+ <clipPath id="cp1" x="0" y="0" width="1" height="1" clipPathUnits="objectBoundingBox">
+ <circle cx="0.5" cy="0.5" r="0.01" fill="white"/>
+ <circle cx="0.5" cy="0.5" r="0.48" fill="white"/>
+ </clipPath>
+ <clipPath id="cp2" x="0" y="0" width="1" height="1" clipPathUnits="objectBoundingBox">
+ <circle cx="0.5" cy="0.5" r="0.01" fill="white"/>
+ <circle cx="0.5" cy="0.5" r="0.50" fill="white"/>
+ </clipPath>
+ <circle cx="150" cy="150" r="147" fill="red"/>
+ </svg>
+
+ <div style="background: red; clip-path: url(#cp1);"/>
+ <div style="background: lime; clip-path: url(#cp2);"/>
+
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clipPath-transformed-html-02.xhtml b/layout/reftests/svg/svg-integration/clipPath-transformed-html-02.xhtml
new file mode 100644
index 0000000000..a36782231e
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clipPath-transformed-html-02.xhtml
@@ -0,0 +1,44 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+ <title>Test SVG clipPath clipping of transformed HTML elements</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=773197 -->
+ <style type="text/css">
+
+* { margin: 0; border: 0; padding: 0;}
+
+div {
+ position: absolute;
+ left: 50px;
+ top: 50px;
+ width: 150px;
+ height: 150px;
+ transform: scale(2,2);
+ transform-origin: 0 0;
+}
+
+ </style>
+</head>
+<body bgcolor="lime">
+
+ <svg xmlns="http://www.w3.org/2000/svg" width="350" height="350"
+ style="display:block; position:absolute;">
+ <clipPath id="cp1" x="0" y="0" width="1" height="1" clipPathUnits="objectBoundingBox">
+ <circle cx="0.5" cy="0.5" r="0.01" fill="white"/>
+ <circle cx="0.5" cy="0.5" r="0.48" fill="white"/>
+ </clipPath>
+ <clipPath id="cp2" x="0" y="0" width="1" height="1" clipPathUnits="objectBoundingBox">
+ <circle cx="0.5" cy="0.5" r="0.01" fill="white"/>
+ <circle cx="0.5" cy="0.5" r="0.50" fill="white"/>
+ </clipPath>
+ <circle cx="200" cy="200" r="147" fill="red"/>
+ </svg>
+
+ <div style="background: red; clip-path: url(#cp1);"/>
+ <div style="background: lime; clip-path: url(#cp2);"/>
+
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/conditions-outer-svg-01.xhtml b/layout/reftests/svg/svg-integration/conditions-outer-svg-01.xhtml
new file mode 100644
index 0000000000..f28425ee07
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/conditions-outer-svg-01.xhtml
@@ -0,0 +1,18 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:svg="http://www.w3.org/2000/svg">
+<head>
+ <title>Test that conditional processing attributes on outer 'svg' elements are honored</title>
+ <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=615146 -->
+ <style>svg { position: absolute; top: 0; left: 0; height: 100%; width: 100% }</style>
+</head>
+<body>
+
+<svg:svg><svg:rect width="100%" height="100%" fill="lime"/></svg:svg>
+<svg:svg systemLanguage="x"><svg:rect width="100%" height="100%" fill="red"/></svg:svg>
+
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/conditions-outer-svg-02.xhtml b/layout/reftests/svg/svg-integration/conditions-outer-svg-02.xhtml
new file mode 100644
index 0000000000..e60477f112
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/conditions-outer-svg-02.xhtml
@@ -0,0 +1,19 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+<head>
+ <title>Test that using elements from conditional-failing outer 'svg' elements works</title>
+ <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=615146 -->
+ <style>svg { position: absolute; top: 0; left: 0; height: 100%; width: 100% }</style>
+</head>
+<body>
+
+<svg:svg requiredExtensions="x"><svg:rect id="r" width="100%" height="100%" fill="lime"/></svg:svg>
+<svg:svg><svg:use xlink:href="#r"/></svg:svg>
+
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/css-and-svg-filter-01-ref.html b/layout/reftests/svg/svg-integration/css-and-svg-filter-01-ref.html
new file mode 100644
index 0000000000..5ca68b1f66
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/css-and-svg-filter-01-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+<body>
+
+ <svg class="dark" width="400" height="110">
+ <rect width="300" height="100" style="fill:rgb(0,0,0);" />
+ </svg>
+
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/css-and-svg-filter-01.html b/layout/reftests/svg/svg-integration/css-and-svg-filter-01.html
new file mode 100644
index 0000000000..7b278d1b10
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/css-and-svg-filter-01.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <style>
+ .dark {
+ filter: invert(1) url("#balance-color") ;
+ }
+ </style>
+</head>
+<body>
+
+ <svg class="dark" width="400" height="110">
+ <rect width="300" height="100" style="fill:rgb(255,255,255);" />
+ </svg>
+
+ <svg width="10" height="10">
+ <defs>
+ <filter id="balance-color">
+ <feColorMatrix type="matrix"
+ values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0">
+ </feColorMatrix>
+ </filter>
+ </defs>
+ </svg>
+
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/dynamic-conditions-outer-svg-01.xhtml b/layout/reftests/svg/svg-integration/dynamic-conditions-outer-svg-01.xhtml
new file mode 100644
index 0000000000..213f713a59
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/dynamic-conditions-outer-svg-01.xhtml
@@ -0,0 +1,18 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:svg="http://www.w3.org/2000/svg">
+<head>
+ <title>Test that conditional processing attributes on outer 'svg' elements are honored</title>
+ <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=615146 -->
+ <style>svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style>
+</head>
+<body onload="document.getElementById('a').setAttribute('requiredExtensions', 'x')">
+
+<svg:svg><svg:rect width="100%" height="100%" fill="lime"/></svg:svg>
+<svg:svg id="a"><svg:rect width="100%" height="100%" fill="red"/></svg:svg>
+
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/dynamic-conditions-outer-svg-02.xhtml b/layout/reftests/svg/svg-integration/dynamic-conditions-outer-svg-02.xhtml
new file mode 100644
index 0000000000..a2087c5da5
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/dynamic-conditions-outer-svg-02.xhtml
@@ -0,0 +1,18 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:svg="http://www.w3.org/2000/svg">
+<head>
+ <title>Test that conditional processing attributes on outer 'svg' elements are honored</title>
+ <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=615146 -->
+ <style>svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style>
+</head>
+<body onload="document.getElementById('a').removeAttribute('requiredExtensions')">
+
+<svg:svg><svg:rect width="100%" height="100%" fill="red"/></svg:svg>
+<svg:svg id="a" requiredExtensions="x"><svg:rect width="100%" height="100%" fill="lime"/></svg:svg>
+
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/dynamic-conditions-outer-svg-03.xhtml b/layout/reftests/svg/svg-integration/dynamic-conditions-outer-svg-03.xhtml
new file mode 100644
index 0000000000..f042469e35
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/dynamic-conditions-outer-svg-03.xhtml
@@ -0,0 +1,18 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:svg="http://www.w3.org/2000/svg">
+<head>
+ <title>Test that conditional processing attributes on outer 'svg' elements are honored</title>
+ <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=615146 -->
+ <style>svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style>
+</head>
+<body onload="document.getElementById('a').setAttribute('systemLanguage', 'x')">
+
+<svg:svg><svg:rect width="100%" height="100%" fill="lime"/></svg:svg>
+<svg:svg id="a" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Gradient"><svg:rect width="100%" height="100%" fill="red"/></svg:svg>
+
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/dynamic-conditions-outer-svg-04.xhtml b/layout/reftests/svg/svg-integration/dynamic-conditions-outer-svg-04.xhtml
new file mode 100644
index 0000000000..f82f3d510a
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/dynamic-conditions-outer-svg-04.xhtml
@@ -0,0 +1,18 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:svg="http://www.w3.org/2000/svg">
+<head>
+ <title>Test that conditional processing attributes on outer 'svg' elements are honored</title>
+ <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=615146 -->
+ <style>svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style>
+</head>
+<body onload="document.getElementById('a').setAttribute('requiredFeatures', 'http://www.w3.org/TR/SVG11/feature#Gradient')">
+
+<svg:svg><svg:rect width="100%" height="100%" fill="red"/></svg:svg>
+<svg:svg id="a" requiredFeatures="x"><svg:rect width="100%" height="100%" fill="lime"/></svg:svg>
+
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/filter-html-01-extref.xhtml b/layout/reftests/svg/svg-integration/filter-html-01-extref.xhtml
new file mode 100644
index 0000000000..cb6a72388e
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/filter-html-01-extref.xhtml
@@ -0,0 +1,15 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+<body style="margin:0">
+ <div style="background:lime; width:200px; height:200px; margin:50px; filter:url(filter-html-01.xhtml#f1)"/>
+ <svg:svg height="0">
+ <!-- use an empty g to force filter-html-01.xhtml to load before onload -->
+ <svg:use xlink:href="filter-html-01.xhtml#empty" />
+ </svg:svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/filter-html-01-ref.svg b/layout/reftests/svg/svg-integration/filter-html-01-ref.svg
new file mode 100644
index 0000000000..ecc3d4f9d6
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/filter-html-01-ref.svg
@@ -0,0 +1,14 @@
+<!--
+ 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"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <filter id="f1">
+ <feFlood flood-color="black" result="black"/>
+ <feComposite in="SourceAlpha" operator="in"/>
+ <feOffset dx="10" dy="10"/>
+ <feComposite in="SourceGraphic"/>
+ </filter>
+ <rect x="50" y="50" width="200" height="200" fill="lime" filter="url(#f1)"/>
+</svg>
diff --git a/layout/reftests/svg/svg-integration/filter-html-01.xhtml b/layout/reftests/svg/svg-integration/filter-html-01.xhtml
new file mode 100644
index 0000000000..8e048cb1ac
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/filter-html-01.xhtml
@@ -0,0 +1,21 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:svg="http://www.w3.org/2000/svg">
+<body style="margin:0">
+ <div style="background:lime; width:200px; height:200px; margin:50px; filter:url(#f1)"/>
+ <svg:svg height="0">
+ <!-- so that other documents can svg:use this one and force it to
+ load before onload -->
+ <svg:g id="empty" />
+ <svg:filter id="f1">
+ <svg:feFlood flood-color="black" result="black"/>
+ <svg:feComposite in="SourceAlpha" operator="in"/>
+ <svg:feOffset dx="10" dy="10"/>
+ <svg:feComposite in="SourceGraphic"/>
+ </svg:filter>
+ </svg:svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/filter-html-dynamic-01-ref.xhtml b/layout/reftests/svg/svg-integration/filter-html-dynamic-01-ref.xhtml
new file mode 100644
index 0000000000..1c222befa4
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/filter-html-dynamic-01-ref.xhtml
@@ -0,0 +1,23 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:svg="http://www.w3.org/2000/svg">
+<head>
+<style>
+ div{
+ left: 10px;
+ top: 10px;
+ position: absolute;
+ width : 100px;
+ height : 100px;
+ margin : 10px;
+ background : lime;
+ }
+</style>
+</head>
+<body style="margin:0">
+<div></div>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/filter-html-dynamic-01.xhtml b/layout/reftests/svg/svg-integration/filter-html-dynamic-01.xhtml
new file mode 100644
index 0000000000..7a6a4ab07c
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/filter-html-dynamic-01.xhtml
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:svg="http://www.w3.org/2000/svg">
+<head>
+<style>
+ div{
+ left: 10px;
+ top: 10px;
+ position: absolute;
+ width : 100px;
+ height : 100px;
+ margin : 10px;
+ background : red;
+ filter:url(#flood);
+ }
+</style>
+</head>
+<body style="margin:0">
+<script>
+ window.addEventListener('load',function(e){
+ var div = document.createElement('div');
+ document.body.appendChild(div);
+ },false);
+</script>
+
+<svg:svg width="0" height="0">
+ <svg:filter id="flood" x="0" y="0" width="100%" height="100%" filterUnits="userSpaceOnUse">
+ <svg:feFlood flood-color="lime"/>
+ </svg:filter>
+</svg:svg>
+</body>
+</html> \ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/filter-html-zoomed-01.xhtml b/layout/reftests/svg/svg-integration/filter-html-zoomed-01.xhtml
new file mode 100644
index 0000000000..b84d4e9d74
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/filter-html-zoomed-01.xhtml
@@ -0,0 +1,18 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:svg="http://www.w3.org/2000/svg" reftest-zoom="2">
+<body style="margin:0">
+ <div style="background:lime; width:100px; height:100px; margin:25px; filter:url(#f1)"/>
+ <svg:svg height="0">
+ <svg:filter id="f1">
+ <svg:feFlood flood-color="black" result="black"/>
+ <svg:feComposite in="SourceAlpha" operator="in"/>
+ <svg:feOffset dx="5" dy="5"/>
+ <svg:feComposite in="SourceGraphic"/>
+ </svg:filter>
+ </svg:svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/mask-clipPath-opacity-01-ref.xhtml b/layout/reftests/svg/svg-integration/mask-clipPath-opacity-01-ref.xhtml
new file mode 100644
index 0000000000..95d1a24588
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/mask-clipPath-opacity-01-ref.xhtml
@@ -0,0 +1,14 @@
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<head>
+<style>
+ div {
+ width: 50px;
+ height: 100px;
+ background-color: rgba(0,0,255,0.5);
+ }
+</style>
+</head>
+<body>
+ <div/>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/mask-clipPath-opacity-01a.xhtml b/layout/reftests/svg/svg-integration/mask-clipPath-opacity-01a.xhtml
new file mode 100644
index 0000000000..d845463e01
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/mask-clipPath-opacity-01a.xhtml
@@ -0,0 +1,20 @@
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<head>
+<style>
+ div {
+ width: 100px;
+ height: 100px;
+ mask: url(#m1);
+ background-color: blue;
+ }
+</style>
+</head>
+<body>
+ <div/>
+ <svg:svg height="0">
+ <svg:mask id="m1" style="mask-type:alpha">
+ <svg:rect x="0" y="0" width="50" height="100" style="stroke:none; fill: #ffffff" fill-opacity="0.5"/>
+ </svg:mask>
+ </svg:svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/mask-clipPath-opacity-01b.xhtml b/layout/reftests/svg/svg-integration/mask-clipPath-opacity-01b.xhtml
new file mode 100644
index 0000000000..fc05430db0
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/mask-clipPath-opacity-01b.xhtml
@@ -0,0 +1,21 @@
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<head>
+<style>
+ div {
+ width: 100px;
+ height: 100px;
+ opacity: 0.5;
+ mask:url(#m1);
+ background-color: blue;
+ }
+</style>
+</head>
+<body>
+ <div/>
+ <svg:svg height="0">
+ <svg:mask id="m1" style="mask-type:alpha">
+ <svg:rect x="0" y="0" width="50" height="100" style="stroke:none; fill: #ffffff"/>
+ </svg:mask>
+ </svg:svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/mask-clipPath-opacity-01c.xhtml b/layout/reftests/svg/svg-integration/mask-clipPath-opacity-01c.xhtml
new file mode 100644
index 0000000000..e59812267d
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/mask-clipPath-opacity-01c.xhtml
@@ -0,0 +1,21 @@
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<head>
+<style>
+ div {
+ width: 100px;
+ height: 100px;
+ clip-path: url(#c1);
+ background-color: blue;
+ opacity: 0.5;
+ }
+</style>
+</head>
+<body>
+ <div/>
+ <svg:svg height="0">
+ <svg:clipPath id="c1">
+ <svg:rect x="0" y="0" width="50" height="100"/>
+ </svg:clipPath>
+ </svg:svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/mask-clipPath-opacity-01d.xhtml b/layout/reftests/svg/svg-integration/mask-clipPath-opacity-01d.xhtml
new file mode 100644
index 0000000000..e59812267d
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/mask-clipPath-opacity-01d.xhtml
@@ -0,0 +1,21 @@
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<head>
+<style>
+ div {
+ width: 100px;
+ height: 100px;
+ clip-path: url(#c1);
+ background-color: blue;
+ opacity: 0.5;
+ }
+</style>
+</head>
+<body>
+ <div/>
+ <svg:svg height="0">
+ <svg:clipPath id="c1">
+ <svg:rect x="0" y="0" width="50" height="100"/>
+ </svg:clipPath>
+ </svg:svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/mask-clipPath-opacity-01e.xhtml b/layout/reftests/svg/svg-integration/mask-clipPath-opacity-01e.xhtml
new file mode 100644
index 0000000000..83356f9336
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/mask-clipPath-opacity-01e.xhtml
@@ -0,0 +1,25 @@
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<head>
+<style>
+ div {
+ width: 100px;
+ height: 100px;
+ clip-path: url(#c1);
+ mask:url(#m1);
+ background-color: blue;
+ opacity: 0.5;
+ }
+</style>
+</head>
+<body>
+ <div/>
+ <svg:svg height="0">
+ <svg:mask id="m1" style="mask-type:alpha">
+ <svg:rect x="0" y="0" width="100" height="100" style="stroke:none; fill: #ffffff"/>
+ </svg:mask>
+ <svg:clipPath id="c1">
+ <svg:rect x="0" y="0" width="50" height="100"/>
+ </svg:clipPath>
+ </svg:svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/mask-html-01-extref-01.xhtml b/layout/reftests/svg/svg-integration/mask-html-01-extref-01.xhtml
new file mode 100644
index 0000000000..fba9fc4b0b
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/mask-html-01-extref-01.xhtml
@@ -0,0 +1,15 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+<body style="margin:0">
+ <div style="mask: url(mask-html-01.xhtml#m1); width:500px; height:500px; background:lime;"></div>
+ <svg:svg height="0">
+ <!-- use an empty g to force mask-html-01.xhtml to load before onload -->
+ <svg:use xlink:href="mask-html-01.xhtml#empty" />
+ </svg:svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/mask-html-01-extref-02.xhtml b/layout/reftests/svg/svg-integration/mask-html-01-extref-02.xhtml
new file mode 100644
index 0000000000..1fc3ecf084
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/mask-html-01-extref-02.xhtml
@@ -0,0 +1,15 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+<body style="margin:0">
+ <div style="mask: url(mask-html-01-resource.svg#m1); width:500px; height:500px; background:lime;"></div>
+ <svg:svg height="0">
+ <!-- use an empty g to force mask-html-01-resource.svg to load before onload -->
+ <svg:use xlink:href="mask-html-01-resource.svg#empty" />
+ </svg:svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/mask-html-01-ref.svg b/layout/reftests/svg/svg-integration/mask-html-01-ref.svg
new file mode 100644
index 0000000000..5afbf8f0c0
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/mask-html-01-ref.svg
@@ -0,0 +1,16 @@
+<!--
+ 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"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <rect x="0" y="0" width="500" height="500" style="mask: url(#m1); fill: lime;"/>
+ <mask id="m1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
+ <linearGradient id="g" gradientUnits="objectBoundingBox" x2="0" y2="1">
+ <stop stop-color="white" offset="0"/>
+ <stop stop-color="white" stop-opacity="0" offset="1"/>
+ </linearGradient>
+ <circle cx="0.25" cy="0.25" r="0.25" id="circle" fill="white"/>
+ <rect x="0.5" y="0" width="0.5" height="1" fill="url(#g)"/>
+ </mask>
+</svg>
diff --git a/layout/reftests/svg/svg-integration/mask-html-01-resource.svg b/layout/reftests/svg/svg-integration/mask-html-01-resource.svg
new file mode 100644
index 0000000000..5522555f80
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/mask-html-01-resource.svg
@@ -0,0 +1,33 @@
+<?xml-stylesheet
+ type="text/css"
+ href="data:text/css,circle { fill: white }" ?>
+<!-- test for javascript: execution: shouldn't happen -->
+<?xml-stylesheet
+ type="text/css"
+ href="javascript:'circle { fill: black }'" ?>
+<svg height="0" xmlns="http://www.w3.org/2000/svg">
+ <style type="text/css">
+ /* XXXbz this should really be an external reference to mask-html-01.xhtml
+ but there's the little problem of "fill" not using nsReferencedElement
+ yet, so that's broken */
+ /* Test that media queries work on resource documents while we're here */
+ @media (min-resolution: 1dpi) {
+ rect { fill: url(#g); }
+ }
+ </style>
+ <!-- so that other documents can svg:use this one and force it to
+ load before onload -->
+ <g id="empty" />
+ <mask id="m1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
+ <linearGradient id="g" gradientUnits="objectBoundingBox" x2="0" y2="1">
+ <stop stop-color="white" offset="0"/>
+ <stop stop-color="white" stop-opacity="0" offset="1"/>
+ </linearGradient>
+ <circle cx="0.25" cy="0.25" r="0.25" id="circle" fill="black"/>
+ <rect x="0.5" y="0" width="0.5" height="1" fill="black"/>
+ </mask>
+ <script type="application/ecmascript">
+ // Make sure scripts don't run
+ document.getElementById("m1").textContent = "";
+ </script>
+</svg>
diff --git a/layout/reftests/svg/svg-integration/mask-html-01.xhtml b/layout/reftests/svg/svg-integration/mask-html-01.xhtml
new file mode 100644
index 0000000000..77c3b5c9c9
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/mask-html-01.xhtml
@@ -0,0 +1,23 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:svg="http://www.w3.org/2000/svg">
+<body style="margin:0">
+ <div style="mask: url(#m1); width:500px; height:500px; background:lime;"></div>
+ <svg:svg height="0">
+ <!-- so that other documents can svg:use this one and force it to
+ load before onload -->
+ <svg:g id="empty" />
+ <svg:mask id="m1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
+ <svg:linearGradient id="g" gradientUnits="objectBoundingBox" x2="0" y2="1">
+ <svg:stop stop-color="white" offset="0"/>
+ <svg:stop stop-color="white" stop-opacity="0" offset="1"/>
+ </svg:linearGradient>
+ <svg:circle cx="0.25" cy="0.25" r="0.25" id="circle" fill="white"/>
+ <svg:rect x="0.5" y="0" width="0.5" height="1" fill="url(#g)"/>
+ </svg:mask>
+ </svg:svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/mask-html-zoomed-01.xhtml b/layout/reftests/svg/svg-integration/mask-html-zoomed-01.xhtml
new file mode 100644
index 0000000000..bc89dfa723
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/mask-html-zoomed-01.xhtml
@@ -0,0 +1,20 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:svg="http://www.w3.org/2000/svg" reftest-zoom="2">
+<body style="margin:0">
+ <div style="mask: url(#m1); width:250px; height:250px; background:lime;"></div>
+ <svg:svg height="0">
+ <svg:mask id="m1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
+ <svg:linearGradient id="g" gradientUnits="objectBoundingBox" x2="0" y2="1">
+ <svg:stop stop-color="white" offset="0"/>
+ <svg:stop stop-color="white" stop-opacity="0" offset="1"/>
+ </svg:linearGradient>
+ <svg:circle cx="0.25" cy="0.25" r="0.25" id="circle" fill="white"/>
+ <svg:rect x="0.5" y="0" width="0.5" height="1" fill="url(#g)"/>
+ </svg:mask>
+ </svg:svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/mask-mask-clipPath-opacity-scale-ref.xhtml b/layout/reftests/svg/svg-integration/mask-mask-clipPath-opacity-scale-ref.xhtml
new file mode 100644
index 0000000000..8e870b8627
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/mask-mask-clipPath-opacity-scale-ref.xhtml
@@ -0,0 +1,15 @@
+<html reftest-zoom="2.0" xmlns="http://www.w3.org/1999/xhtml">
+
+<head>
+<style>
+ div {
+ width: 50px;
+ height: 100px;
+ background-color: rgba(0,0,255,0.5);
+}
+</style>
+</head>
+<body>
+ <div/>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/mask-mask-clipPath-opacity-scale.xhtml b/layout/reftests/svg/svg-integration/mask-mask-clipPath-opacity-scale.xhtml
new file mode 100644
index 0000000000..b2df18034d
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/mask-mask-clipPath-opacity-scale.xhtml
@@ -0,0 +1,25 @@
+<html reftest-zoom="2.0" xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<head>
+<style>
+ div {
+ width: 100px;
+ height: 100px;
+ clip-path: url(#c1);
+ mask:url(#m1), url(#m1);
+ background-color: blue;
+ opacity: 0.5;
+ }
+</style>
+</head>
+<body>
+ <div/>
+ <svg:svg height="0">
+ <svg:mask id="m1" style="mask-type:alpha">
+ <svg:rect x="0" y="0" width="100" height="100" style="stroke:none; fill: #ffffff"/>
+ </svg:mask>
+ <svg:clipPath id="c1">
+ <svg:rect x="0" y="0" width="50" height="100"/>
+ </svg:clipPath>
+ </svg:svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/mask-transformed-html-01.xhtml b/layout/reftests/svg/svg-integration/mask-transformed-html-01.xhtml
new file mode 100644
index 0000000000..1e1a2ed552
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/mask-transformed-html-01.xhtml
@@ -0,0 +1,42 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+ <title>Test SVG masking of transformed HTML elements</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=769103 -->
+ <style type="text/css">
+
+* { margin: 0; border: 0; padding: 0;}
+
+div {
+ position: absolute;
+ left: 1px;
+ top: 1px;
+ width: 3px;
+ height: 3px;
+ transform: scale(100,100);
+ transform-origin: 0 0;
+}
+
+ </style>
+</head>
+<body bgcolor="lime">
+
+ <svg xmlns="http://www.w3.org/2000/svg" width="300" height="300"
+ style="display:block; position:absolute;">
+ <mask id="mask1" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
+ <circle cx="0.5" cy="0.5" r="0.48" fill="white"/>
+ </mask>
+ <mask id="mask2" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
+ <circle cx="0.5" cy="0.5" r="0.5" fill="white"/>
+ </mask>
+ <circle cx="150" cy="150" r="147" fill="red"/>
+ </svg>
+
+ <div style="background: red; mask: url(#mask1);"/>
+ <div style="background: lime; mask: url(#mask2);"/>
+
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/mask-transformed-html-02.xhtml b/layout/reftests/svg/svg-integration/mask-transformed-html-02.xhtml
new file mode 100644
index 0000000000..c83f5a3ea9
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/mask-transformed-html-02.xhtml
@@ -0,0 +1,42 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+ <title>Test SVG masking of transformed HTML elements</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=769103 -->
+ <style type="text/css">
+
+* { margin: 0; border: 0; padding: 0;}
+
+div {
+ position: absolute;
+ left: 50px;
+ top: 50px;
+ width: 150px;
+ height: 150px;
+ transform: scale(2,2);
+ transform-origin: 0 0;
+}
+
+ </style>
+</head>
+<body bgcolor="lime">
+
+ <svg xmlns="http://www.w3.org/2000/svg" width="350" height="350"
+ style="display:block; position:absolute;">
+ <mask id="mask1" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
+ <circle cx="0.5" cy="0.5" r="0.48" fill="white"/>
+ </mask>
+ <mask id="mask2" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
+ <circle cx="0.5" cy="0.5" r="0.50" fill="white"/>
+ </mask>
+ <circle cx="200" cy="200" r="147" fill="red"/>
+ </svg>
+
+ <div style="background: red; mask: url(#mask1);"/>
+ <div style="background: lime; mask: url(#mask2);"/>
+
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/patterned-svg-under-transformed-html-01.xhtml b/layout/reftests/svg/svg-integration/patterned-svg-under-transformed-html-01.xhtml
new file mode 100644
index 0000000000..66291d3bf6
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/patterned-svg-under-transformed-html-01.xhtml
@@ -0,0 +1,47 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+ <title>Test SVG patterning under transformed HTML elements</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=769970 -->
+ <style type="text/css">
+
+* { margin: 0; border: 0; padding: 0;}
+
+svg {
+ display: block;
+ position: absolute;
+}
+
+.scaled {
+ left: 1px;
+ top: 1px;
+ width: 3px;
+ height: 3px;
+ transform: scale(100,100);
+ transform-origin: 0 0;
+}
+
+ </style>
+</head>
+<body bgcolor="lime">
+
+ <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
+ <circle cx="151" cy="151" r="148" fill="red"/>
+ </svg>
+
+ <svg xmlns="http://www.w3.org/2000/svg" class="scaled">
+ <pattern id="redDot" width="1" height="1">
+ <circle cx="1.5" cy="1.5" r="1.48" fill="red"/>
+ </pattern>
+ <pattern id="limeDot" width="1" height="1">
+ <circle cx="1.5" cy="1.5" r="1.5" fill="lime"/>
+ </pattern>
+ <rect width="100%" height="100%" fill="url(#redDot)"/>
+ <rect width="100%" height="100%" fill="url(#limeDot)"/>
+ </svg>
+
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/patterned-svg-under-transformed-html-02.xhtml b/layout/reftests/svg/svg-integration/patterned-svg-under-transformed-html-02.xhtml
new file mode 100644
index 0000000000..f9182b272b
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/patterned-svg-under-transformed-html-02.xhtml
@@ -0,0 +1,47 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+ <title>Test SVG patterning under transformed HTML elements</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=769970 -->
+ <style type="text/css">
+
+* { margin: 0; border: 0; padding: 0;}
+
+svg {
+ display: block;
+ position: absolute;
+}
+
+.scaled {
+ left: 50px;
+ top: 50px;
+ width: 150px;
+ height: 150px;
+ transform: scale(2,2);
+ transform-origin: 0 0;
+}
+
+ </style>
+</head>
+<body bgcolor="lime">
+
+ <svg xmlns="http://www.w3.org/2000/svg" width="350" height="350">
+ <circle cx="200" cy="200" r="147" fill="red"/>
+ </svg>
+
+ <svg xmlns="http://www.w3.org/2000/svg" class="scaled">
+ <pattern id="redDot" width="1" height="1">
+ <circle cx="75" cy="75" r="74" fill="red"/>
+ </pattern>
+ <pattern id="limeDot" width="1" height="1">
+ <circle cx="75" cy="75" r="75" fill="lime"/>
+ </pattern>
+ <rect width="100%" height="100%" fill="url(#redDot)"/>
+ <rect width="100%" height="100%" fill="url(#limeDot)"/>
+ </svg>
+
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/reftest.list b/layout/reftests/svg/svg-integration/reftest.list
new file mode 100644
index 0000000000..478a129aa6
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/reftest.list
@@ -0,0 +1,53 @@
+# clip-path tests
+include clip-path/reftest.list
+
+== clipPath-html-01.xhtml clipPath-html-01-ref.svg
+== clipPath-html-01-extref.xhtml clipPath-html-01-ref.svg
+== clipPath-html-02.xhtml clipPath-html-02-ref.svg
+== clipPath-html-02-extref.xhtml clipPath-html-02-ref.svg
+== clipPath-html-03.xhtml clipPath-html-03-ref.svg
+== clipPath-html-03-extref.xhtml clipPath-html-03-ref.svg
+== clipPath-html-04.xhtml clipPath-html-04-ref.xhtml
+== clipPath-html-04-extref.xhtml clipPath-html-04-ref.xhtml
+fuzzy(0-140,0-70) == clipPath-html-05.xhtml clipPath-html-05-ref.xhtml # Bug 776089
+fuzzy(0-140,0-70) == clipPath-html-05-extref.xhtml clipPath-html-05-ref.xhtml # Bug 776089
+fuzzy-if(Android,0-255,0-30) == clipPath-html-06.xhtml clipPath-html-06-ref.xhtml
+fuzzy-if(Android,0-255,0-30) == clipPath-html-06-extref.xhtml clipPath-html-06-ref.xhtml
+== clipPath-html-07.xhtml clipPath-html-07-ref.svg
+== clipPath-html-08.xhtml clipPath-html-07-ref.svg # reuse 07-ref.svg
+fails-if(useDrawSnapshot) == clipPath-html-zoomed-01.xhtml clipPath-html-01-ref.svg
+== clipPath-transformed-html-01.xhtml ../pass.svg
+== clipPath-transformed-html-02.xhtml ../pass.svg
+== css-and-svg-filter-01.html css-and-svg-filter-01-ref.html
+== conditions-outer-svg-01.xhtml ../pass.svg
+== conditions-outer-svg-02.xhtml ../pass.svg
+== dynamic-conditions-outer-svg-01.xhtml ../pass.svg
+== dynamic-conditions-outer-svg-02.xhtml ../pass.svg
+== dynamic-conditions-outer-svg-03.xhtml ../pass.svg
+== dynamic-conditions-outer-svg-04.xhtml ../pass.svg
+== filter-html-01.xhtml filter-html-01-ref.svg
+== filter-html-dynamic-01.xhtml filter-html-dynamic-01-ref.xhtml
+random-if(Android) == filter-html-01-extref.xhtml filter-html-01-ref.svg # Android: bug 1198380
+fails-if(useDrawSnapshot) == filter-html-zoomed-01.xhtml filter-html-01-ref.svg
+fuzzy(0-1,0-125414) == mask-html-01.xhtml mask-html-01-ref.svg
+fuzzy(0-1,0-125414) == mask-html-01-extref-01.xhtml mask-html-01-ref.svg
+== mask-html-01-extref-02.xhtml mask-html-01-ref.svg
+fuzzy(0-1,0-125414) fails-if(useDrawSnapshot) == mask-html-zoomed-01.xhtml mask-html-01-ref.svg
+== mask-transformed-html-01.xhtml ../pass.svg
+== mask-transformed-html-02.xhtml ../pass.svg
+fuzzy(0-1,0-5) == patterned-svg-under-transformed-html-01.xhtml ../pass.svg
+== patterned-svg-under-transformed-html-02.xhtml ../pass.svg
+
+fuzzy(0-1,0-5000) == mask-clipPath-opacity-01a.xhtml mask-clipPath-opacity-01-ref.xhtml
+fuzzy(0-1,0-5000) == mask-clipPath-opacity-01b.xhtml mask-clipPath-opacity-01-ref.xhtml
+fuzzy(0-1,0-5000) == mask-clipPath-opacity-01c.xhtml mask-clipPath-opacity-01-ref.xhtml
+fuzzy(0-1,0-5000) == mask-clipPath-opacity-01d.xhtml mask-clipPath-opacity-01-ref.xhtml
+fuzzy(0-1,0-5000) == mask-clipPath-opacity-01e.xhtml mask-clipPath-opacity-01-ref.xhtml
+fuzzy(0-1,0-5000) == mask-mask-clipPath-opacity-scale.xhtml mask-mask-clipPath-opacity-scale-ref.xhtml
+
+== transform-outer-svg-01.xhtml transform-outer-svg-01-ref.xhtml
+
+# box-decoration-break tests
+fuzzy-if(Android,0-4,0-10) == box-decoration-break-01.xhtml box-decoration-break-01-ref.xhtml
+fuzzy(0-119,0-16) == box-decoration-break-02.xhtml box-decoration-break-02-ref.xhtml
+fuzzy(0-67,0-238) == box-decoration-break-03.xhtml box-decoration-break-01-ref.xhtml
diff --git a/layout/reftests/svg/svg-integration/transform-outer-svg-01-ref.xhtml b/layout/reftests/svg/svg-integration/transform-outer-svg-01-ref.xhtml
new file mode 100644
index 0000000000..3fa609a94b
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/transform-outer-svg-01-ref.xhtml
@@ -0,0 +1,18 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+ <title>Test that the 'transform' attribute transforms our border too</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=1353697 -->
+</head>
+<body>
+
+ <svg xmlns="http://www.w3.org/2000/svg" width="250" height="250">
+ <rect x="75" y="75" width="150" height="150" fill="none" stroke="black" stroke-width="50"/>
+ <rect x="125" y="125" width="50" height="50" fill="blue"/>
+ </svg>
+
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/transform-outer-svg-01.xhtml b/layout/reftests/svg/svg-integration/transform-outer-svg-01.xhtml
new file mode 100644
index 0000000000..10484fbb97
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/transform-outer-svg-01.xhtml
@@ -0,0 +1,18 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+ <title>Test that the 'transform' attribute transforms our border too</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=1353697 -->
+</head>
+<body>
+
+ <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"
+ style="border: 50px solid black;" transform="translate(50,50)">
+ <rect x="25" y="25" width="50" height="50" fill="blue"/>
+ </svg>
+
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-transform-01.svg b/layout/reftests/svg/svg-transform-01.svg
new file mode 100644
index 0000000000..9bc81acd9d
--- /dev/null
+++ b/layout/reftests/svg/svg-transform-01.svg
@@ -0,0 +1,16 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=861188 -->
+
+ <rect width="100%" height="100%" fill="lime"/>
+
+ <svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" x="100" y="100" viewBox="0 0 640 480">
+ <rect width="100%" height="100%" fill="red"/>
+ </svg>
+ <svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" x="100" y="100" viewBox="0 0 640 480" transform="">
+ <rect width="100%" height="100%" fill="lime"/>
+ </svg>
+</svg>
diff --git a/layout/reftests/svg/svg-transform-02.svg b/layout/reftests/svg/svg-transform-02.svg
new file mode 100644
index 0000000000..53f6718c93
--- /dev/null
+++ b/layout/reftests/svg/svg-transform-02.svg
@@ -0,0 +1,16 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=863994 -->
+
+ <rect width="100%" height="100%" fill="lime"/>
+
+ <svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" x="100" y="100" viewBox="0 0 640 480">
+ <rect width="100%" height="100%" fill="red"/>
+ </svg>
+ <svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" x="100" y="100" viewBox="0 0 640 480" transform="translate(0, 0)">
+ <rect width="100%" height="100%" fill="lime"/>
+ </svg>
+</svg>
diff --git a/layout/reftests/svg/switch-01.svg b/layout/reftests/svg/switch-01.svg
new file mode 100644
index 0000000000..1244525bb9
--- /dev/null
+++ b/layout/reftests/svg/switch-01.svg
@@ -0,0 +1,64 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
+ <title>Testcase for switch</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=409383 -->
+
+ <rect width="100%" height="100%" fill="lime"/>
+
+ <rect x="50" y="100" width="50" height="50" fill="red"/>
+ <switch>
+ <!-- first switch item is visible -->
+ <rect x="50" y="100" width="50" height="50" fill="lime"/>
+ <rect x="50" y="100" width="50" height="50" fill="red"/>
+ <rect x="50" y="100" width="50" height="50" fill="red"/>
+ <rect x="50" y="100" width="50" height="50" fill="red"/>
+ <rect x="50" y="100" width="50" height="50" fill="red"/>
+ <rect x="50" y="100" width="50" height="50" fill="red"/>
+ <rect x="50" y="100" width="50" height="50" fill="red"/>
+ <rect x="50" y="100" width="50" height="50" fill="red"/>
+ <rect x="50" y="100" width="50" height="50" fill="red"/>
+ <rect x="50" y="100" width="50" height="50" fill="red"/>
+ <rect x="50" y="100" width="50" height="50" fill="red"/>
+ <rect x="50" y="100" width="50" height="50" fill="red"/>
+ </switch>
+
+ <rect x="200" y="100" width="50" height="50" fill="red"/>
+ <switch>
+ <!-- test non-matching system language -->
+ <rect systemLanguage="foo" x="200" y="100" width="50" height="50" fill="red"/>
+ <rect x="200" y="100" width="50" height="50" fill="lime"/>
+ <rect x="200" y="100" width="50" height="50" fill="red"/>
+ <rect x="200" y="100" width="50" height="50" fill="red"/>
+ </switch>
+
+ <rect x="50" y="200" width="50" height="50" fill="red"/>
+ <switch>
+ <!-- test matching required features -->
+ <rect requiredFeatures="http://www.w3.org/TR/SVG11/feature#CoreAttribute http://www.w3.org/TR/SVG11/feature#Gradient"
+ x="50" y="200" width="50" height="50" fill="lime"/>
+ <rect x="50" y="200" width="50" height="50" fill="red"/>
+ <rect x="50" y="200" width="50" height="50" fill="red"/>
+ </switch>
+
+ <!-- this rectangle intentionally left green -->
+ <rect x="200" y="200" width="50" height="50" fill="lime"/>
+
+ <rect x="50" y="300" width="50" height="50" fill="red"/>
+ <switch>
+ <!-- test non-matching required extensions -->
+ <rect requiredExtensions="foo" x="50" y="300" width="50" height="50" fill="red"/>
+ <rect x="50" y="300" width="50" height="50" fill="lime"/>
+ <rect x="50" y="300" width="50" height="50" fill="red"/>
+ <rect x="50" y="300" width="50" height="50" fill="red"/>
+ </switch>
+
+ <switch>
+ <!-- test display:none - should see nothing here -->
+ <rect style="display: none;" x="200" y="300" width="50" height="50" fill="red"/>
+ <rect x="200" y="300" width="50" height="50" fill="red"/>
+ </switch>
+</svg>
diff --git a/layout/reftests/svg/symbol-01-ref.svg b/layout/reftests/svg/symbol-01-ref.svg
new file mode 100644
index 0000000000..efddfe8273
--- /dev/null
+++ b/layout/reftests/svg/symbol-01-ref.svg
@@ -0,0 +1,7 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+ <circle cx='50' cy='50' r='40' fill='green'/>
+</svg>
diff --git a/layout/reftests/svg/symbol-01.svg b/layout/reftests/svg/symbol-01.svg
new file mode 100644
index 0000000000..905a697e7a
--- /dev/null
+++ b/layout/reftests/svg/symbol-01.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'>
+ <style type="text/css"><![CDATA[
+ #s {
+ display: inline;
+ }
+ ]]></style>
+ <!--
+ A basic test that referencing a <symbol> with a <use> works.
+ Note that the fill specified on the <use> inherits into the
+ <use> shadow tree.
+ Also <symbol> itself should have |display:none !important|.
+ -->
+ <symbol id='s' viewBox='100 100 10 10'>
+ <circle cx='105' cy='105' r='4'/>
+ </symbol>
+ <use xlink:href='#s' x='0' y='0' width='100' height='100' fill='green'/>
+</svg>
diff --git a/layout/reftests/svg/text-font-size-01.svg b/layout/reftests/svg/text-font-size-01.svg
new file mode 100644
index 0000000000..e9d67571a6
--- /dev/null
+++ b/layout/reftests/svg/text-font-size-01.svg
@@ -0,0 +1,19 @@
+<!--
+ 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>Test text with zero font-size</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=732819 -->
+
+ <rect width="100%" height="100%" fill="lime"/>
+
+ <text x="10" y="50" font-size="0">Some
+ <tspan dy="30">text</tspan>
+ that should not show.
+ </text>
+
+</svg>
+
diff --git a/layout/reftests/svg/text-font-weight-01-ref.svg b/layout/reftests/svg/text-font-weight-01-ref.svg
new file mode 100644
index 0000000000..1c0ffea49b
--- /dev/null
+++ b/layout/reftests/svg/text-font-weight-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" version="1.1">
+
+ <title>Reference for text font-weight</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=379284 -->
+
+ <g id="test-body-content" font-family="Georgia, 'Times New Roman', Times, 'MS Mincho', serif" font-size="30">
+ <text font-weight="normal" x="10" y="50">This should be normal</text>
+ <text font-weight="bold" x="10" y="100">This should be bold</text>
+ <text font-weight="400" x="10" y="150">This should be normal</text>
+ <text font-weight="700" x="10" y="200">This should be bold</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text-font-weight-01.svg b/layout/reftests/svg/text-font-weight-01.svg
new file mode 100644
index 0000000000..ae784b8e5b
--- /dev/null
+++ b/layout/reftests/svg/text-font-weight-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" version="1.1">
+
+ <title>Testcase for text font-weight</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=379284 -->
+
+ <g id="test-body-content" font-family="Georgia, 'Times New Roman', Times, 'MS Mincho', serif" font-size="30">
+ <g font-weight="bold">
+ <text font-weight="lighter" x="10" y="50">This should be normal</text>
+ </g>
+ <g font-weight="normal">
+ <text font-weight="bolder" x="10" y="100">This should be bold</text>
+ </g>
+ <g font-weight="700">
+ <text font-weight="lighter" x="10" y="150">This should be normal</text>
+ </g>
+ <g font-weight="400">
+ <text font-weight="bolder" x="10" y="200">This should be bold</text>
+ </g>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text-gradient-01-ref.svg b/layout/reftests/svg/text-gradient-01-ref.svg
new file mode 100644
index 0000000000..7acd518487
--- /dev/null
+++ b/layout/reftests/svg/text-gradient-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">
+
+<title>Reference for gradient on text</title>
+
+<!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=424586 -->
+
+ <defs>
+ <linearGradient id="grad" x1="0.0" y1="0.0" x2="1.0" y2="0.0">
+ <stop stop-color="green" offset="0.0"/>
+ <stop stop-color="blue" offset="1.0"/>
+ </linearGradient>
+ </defs>
+ <text font-size="3.5em" x="100" y="100" fill="url(#grad)">PASS</text>
+</svg>
diff --git a/layout/reftests/svg/text-gradient-01.svg b/layout/reftests/svg/text-gradient-01.svg
new file mode 100644
index 0000000000..9185d106c3
--- /dev/null
+++ b/layout/reftests/svg/text-gradient-01.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">
+
+<title>Testcase for gradient on text</title>
+
+<!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=424586 -->
+
+ <defs>
+ <linearGradient id="grad" x1="0.0" y1="0.0" x2="1.0" y2="0.0">
+ <stop stop-color="green" offset="0.0"/>
+ <stop stop-color="blue" offset="1.0"/>
+ </linearGradient>
+ </defs>
+ <!-- check the gradient moves with the transform -->
+ <g transform="translate(100,100)">
+ <text font-size="3.5em" fill="url(#grad)">PASS</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text-gradient-02-ref.svg b/layout/reftests/svg/text-gradient-02-ref.svg
new file mode 100644
index 0000000000..e3d74773dc
--- /dev/null
+++ b/layout/reftests/svg/text-gradient-02-ref.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">
+
+<title>Reference for gradient on text</title>
+
+<!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=577850 -->
+
+ <defs>
+ <linearGradient id="gradient" x1="0" x2="0" y1="0" y2="1">
+ <stop offset="0.0" stop-color="rgb(0, 0, 0)"/>
+ <stop offset="0.5" stop-color="rgb(255, 255, 255)"/>
+ <stop offset="1.0" stop-color="rgb(0, 0, 0)"/>
+ </linearGradient>
+ </defs>
+
+ <text x="0, 30, 60, 0, 40, 70" y="0, 0, 0, 1em, 1em, 1em" fill="url(#gradient)" font-size="60" transform="translate(50, 80)">
+ FooBar
+ </text>
+</svg>
diff --git a/layout/reftests/svg/text-gradient-02.svg b/layout/reftests/svg/text-gradient-02.svg
new file mode 100644
index 0000000000..b418bec990
--- /dev/null
+++ b/layout/reftests/svg/text-gradient-02.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">
+
+<title>Testcase for gradient on text</title>
+
+<!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=577850 -->
+
+ <defs>
+ <linearGradient id="gradient" x1="0" x2="0" y1="0" y2="1">
+ <stop offset="0.00" stop-color="rgb(0, 0, 0)"/>
+ <stop offset="0.50" stop-color="rgb(255, 255, 255)"/>
+ <stop offset="1.00" stop-color="rgb(0, 0, 0)"/>
+ </linearGradient>
+ </defs>
+
+ <text fill="url(#gradient)" font-size="60" transform="translate(50, 80)">
+ <tspan x="0, 30, 60" y="0" >Foo</tspan>
+ <tspan x="0, 40, 70" dy="1em">Bar</tspan>
+ </text>
+</svg>
diff --git a/layout/reftests/svg/text-gradient-03.svg b/layout/reftests/svg/text-gradient-03.svg
new file mode 100644
index 0000000000..c1b1bbfb82
--- /dev/null
+++ b/layout/reftests/svg/text-gradient-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">
+
+ <title>Testcase for gradient on text</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=611975 -->
+ <defs>
+ <linearGradient id="grad" x1="0" y1="-0.1" x2="0" y2="1" gradientUnits="objectBoundingBox">
+ <stop stop-color="red" offset="-10%"/>
+ <stop stop-color="lime" offset="0%"/>
+ </linearGradient>
+ </defs>
+
+ <g fill="lime">
+ <rect width="100%" height="100%"/>
+ <text x="100" y="100" stroke-width="5" stroke="url(#grad)" font-size="80px">SHOULD NOT SEE THIS</text>
+ </g>
+
+</svg>
diff --git a/layout/reftests/svg/text-gradient-04-ref.svg b/layout/reftests/svg/text-gradient-04-ref.svg
new file mode 100644
index 0000000000..11c187e0c0
--- /dev/null
+++ b/layout/reftests/svg/text-gradient-04-ref.svg
@@ -0,0 +1,19 @@
+<!--
+ 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 gradients being positioned correctly within filters</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=797708 -->
+
+ <clipPath id="c">
+ <path d="M 130,70 h 40 v 40 h -40 z
+ M 230,70 h 40 v 40 h -40 z"/>
+ </clipPath>
+
+ <g clip-path="url(#c)">
+ <rect x="100" y="50" width="100" height="100" fill="red"/>
+ <rect x="200" y="50" width="100" height="100" fill="blue"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text-gradient-04.svg b/layout/reftests/svg/text-gradient-04.svg
new file mode 100644
index 0000000000..6eaffbcf02
--- /dev/null
+++ b/layout/reftests/svg/text-gradient-04.svg
@@ -0,0 +1,39 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+
+ <title>Test for gradients being positioned correctly within filters</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=797708 -->
+
+ <style>
+ @font-face {
+ src: url(../fonts/Ahem.ttf);
+ font-family: Ahem;
+ }
+ </style>
+
+ <linearGradient id="g" gradientUnits="userSpaceOnUse" x1="100" y1="0" x2="300" y2="0">
+ <stop offset="0" stop-color="red"/>
+ <stop offset="0.5" stop-color="red"/>
+ <stop offset="0.5" stop-color="blue"/>
+ <stop offset="1" stop-color="blue"/>
+ </linearGradient>
+
+ <filter id="f">
+ <feMerge>
+ <feMergeNode in="SourceGraphic"/>
+ </feMerge>
+ </filter>
+
+ <clipPath id="c">
+ <path d="M 130,70 h 40 v 40 h -40 z
+ M 230,70 h 40 v 40 h -40 z"/>
+ </clipPath>
+
+ <g style="font: 64px Ahem; fill: url(#g); text-anchor: middle; filter: url(#f); clip-path: url(#c)">
+ <text x="150" y="100">a</text>
+ <text x="250" y="100">a</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text-in-link-01-ref.svg b/layout/reftests/svg/text-in-link-01-ref.svg
new file mode 100644
index 0000000000..67beb778ac
--- /dev/null
+++ b/layout/reftests/svg/text-in-link-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" version="1.1"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ style="font-size:2em;">
+
+ <title>Reference to check that text in links is displayed</title>
+
+ <!-- link in text -->
+ <text x="10" y="50" fill="lime">This should be green</text>
+
+ <!-- link in tspan -->
+ <text x="10" y="100" fill="lime">This should be green</text>
+
+ <!-- tspan in link -->
+ <text x="10" y="150" fill="lime">This should be green</text>
+
+</svg>
diff --git a/layout/reftests/svg/text-in-link-01.svg b/layout/reftests/svg/text-in-link-01.svg
new file mode 100644
index 0000000000..2a95da1fd2
--- /dev/null
+++ b/layout/reftests/svg/text-in-link-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" version="1.1"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ style="font-size:2em;">
+
+ <title>Testcase to check that text in links is displayed</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=330059 -->
+
+ <!-- link in text -->
+ <text x="10" y="50">
+ <a fill="lime">This should be green</a>
+ </text>
+
+ <!-- link in tspan -->
+ <text x="10" y="100">
+ <tspan><a fill="lime">This should be green</a></tspan>
+ </text>
+
+ <!-- tspan in link -->
+ <text>
+ <a><tspan x="10" y="150" fill="lime">This should be green</tspan></a>
+ </text>
+
+</svg>
diff --git a/layout/reftests/svg/text-in-link-02-ref.svg b/layout/reftests/svg/text-in-link-02-ref.svg
new file mode 100644
index 0000000000..bb6fdb4ddd
--- /dev/null
+++ b/layout/reftests/svg/text-in-link-02-ref.svg
@@ -0,0 +1,12 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="300" height="50" viewBox="0 0 300 50">
+ <title>Reference to check that links with viewBoxes work</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=534216 -->
+
+ <text x="0" y="15"><tspan>AAAAA</tspan><tspan>BBBBB</tspan><tspan>CCCCC</tspan><tspan>DDDDD</tspan>
+ </text>
+</svg>
diff --git a/layout/reftests/svg/text-in-link-02.svg b/layout/reftests/svg/text-in-link-02.svg
new file mode 100644
index 0000000000..4fa8d5f949
--- /dev/null
+++ b/layout/reftests/svg/text-in-link-02.svg
@@ -0,0 +1,11 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="300" height="50" viewBox="0 0 300 50">
+ <title>Testcase to check that links with viewBoxes work</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=534216 -->
+
+ <text x="0" y="15"><a>AAAAA</a><a>BBBBB</a><a>CCCCC</a><a>DDDDD</a></text>
+</svg>
diff --git a/layout/reftests/svg/text-in-link-03-ref.svg b/layout/reftests/svg/text-in-link-03-ref.svg
new file mode 100644
index 0000000000..c667992494
--- /dev/null
+++ b/layout/reftests/svg/text-in-link-03-ref.svg
@@ -0,0 +1,11 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="300" height="50">
+ <title>Reference to check that CSS works for links</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=570354 -->
+
+ <text x="0" y="25"><tspan font-size="15">AAAAA</tspan></text>
+</svg>
diff --git a/layout/reftests/svg/text-in-link-03.svg b/layout/reftests/svg/text-in-link-03.svg
new file mode 100644
index 0000000000..9db19b0176
--- /dev/null
+++ b/layout/reftests/svg/text-in-link-03.svg
@@ -0,0 +1,11 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="300" height="50">
+ <title>Testcase to check that CSS works for links</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=570354 -->
+
+ <text x="0" y="25"><a font-size="15"><tspan>AAAAA</tspan></a></text>
+</svg>
diff --git a/layout/reftests/svg/text-language-00-ref.xhtml b/layout/reftests/svg/text-language-00-ref.xhtml
new file mode 100644
index 0000000000..4b6c8c4248
--- /dev/null
+++ b/layout/reftests/svg/text-language-00-ref.xhtml
@@ -0,0 +1,28 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>SVG, text, language...</title>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<style type="text/css">
+body {
+ font-family: sans-serif;
+ font-size: 24px;
+ margin: 24px;
+}
+div {
+ height: 100px;
+}
+</style>
+</head>
+
+<body>
+<div lang="en">
+ <p>Hello world, 你好吗?</p>
+</div>
+<div lang="en">
+ <p>Hello world, 你好吗?</p>
+</div>
+<div lang="en">
+ <p>Hello world, 你好吗?</p>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/svg/text-language-00.xhtml b/layout/reftests/svg/text-language-00.xhtml
new file mode 100644
index 0000000000..5e9cc6d953
--- /dev/null
+++ b/layout/reftests/svg/text-language-00.xhtml
@@ -0,0 +1,32 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>SVG, text, language...</title>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<style type="text/css">
+body {
+ font-family: sans-serif;
+ font-size: 24px;
+ margin: 24px;
+}
+div {
+ height: 100px;
+}
+</style>
+</head>
+
+<!-- This file, which does NOT use SVG, serves as a sanity-check;
+ if this reftest fails (i.e. test and reference images match)
+ then our font configuration is not suitable for this test
+ and the SVG testcases must be expected to fail as well. -->
+<body>
+<div lang="ar">
+ <p>Hello world, 你好吗?</p>
+</div>
+<div lang="zh-TW">
+ <p>Hello world, 你好吗?</p>
+</div>
+<div lang="ja">
+ <p>Hello world, 你好吗?</p>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/svg/text-language-01-ref.xhtml b/layout/reftests/svg/text-language-01-ref.xhtml
new file mode 100644
index 0000000000..7f7b254a11
--- /dev/null
+++ b/layout/reftests/svg/text-language-01-ref.xhtml
@@ -0,0 +1,35 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>SVG, text, language...</title>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<style type="text/css">
+body {
+ font-family: sans-serif;
+ font-size: 24px;
+ margin: 24px;
+}
+div {
+ height: 100px;
+}
+</style>
+</head>
+
+<body>
+<div lang="en">
+ <svg xmlns="http://www.w3.org/2000/svg" height="200">
+ <text y="50">Hello world, 你好吗?</text>
+ </svg>
+</div>
+<div lang="en">
+ <svg xmlns="http://www.w3.org/2000/svg" height="200">
+ <text y="50">Hello world, 你好吗?</text>
+ </svg>
+</div>
+<div lang="en">
+ <svg xmlns="http://www.w3.org/2000/svg" height="200">
+ <text y="50">Hello world, 你好吗?</text>
+ </svg>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/svg/text-language-01.xhtml b/layout/reftests/svg/text-language-01.xhtml
new file mode 100644
index 0000000000..a208c04b9f
--- /dev/null
+++ b/layout/reftests/svg/text-language-01.xhtml
@@ -0,0 +1,37 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>SVG, text, language...</title>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<style type="text/css">
+body {
+ font-family: sans-serif;
+ font-size: 24px;
+ margin: 24px;
+}
+div {
+ height: 100px;
+}
+</style>
+</head>
+
+<!-- The reference is tagged as "en", the test cases as other languages.
+ Expectation is that these will have different default fonts,
+ so the test and reference should NOT match. -->
+<body>
+<div lang="ar" style="height:100px">
+ <svg xmlns="http://www.w3.org/2000/svg" height="200">
+ <text y="50">Hello world, 你好吗?</text>
+ </svg>
+</div>
+<div lang="zh-TW" style="height:100px">
+ <svg xmlns="http://www.w3.org/2000/svg" height="200">
+ <text y="50">Hello world, 你好吗?</text>
+ </svg>
+</div>
+<div lang="ja" style="height:100px">
+ <svg xmlns="http://www.w3.org/2000/svg" height="200">
+ <text y="50">Hello world, 你好吗?</text>
+ </svg>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/svg/text-layout-01-ref.svg b/layout/reftests/svg/text-layout-01-ref.svg
new file mode 100644
index 0000000000..abaa11f310
--- /dev/null
+++ b/layout/reftests/svg/text-layout-01-ref.svg
@@ -0,0 +1,42 @@
+<!--
+ 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"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ font-family="monospace" font-size="20" xml:space="preserve">
+
+ <title>Reference to check that dx, dy works for text</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=388547 -->
+
+ <text x="30" y="30">TEST1</text>
+
+ <text x="30" y="60">T</text>
+ <text x="30" y="70"> E</text>
+ <text x="40" y="80"> ST2</text>
+
+ <text x="30" y="100">T</text>
+ <text x="30" y="110"> E</text>
+ <text x="40" y="120"> ST3</text>
+
+ <text x="30" y="160">T</text>
+ <text x="30" y="150"> EST4</text>
+
+ <text x="40" y="200">TEST5</text>
+
+ <text x="220" y="30">T</text>
+ <text x="240" y="30">E</text>
+ <text x="260" y="30">S</text>
+ <text x="280" y="30">T6</text>
+
+ <text x="220" y="70">T</text>
+ <text x="220" y="90">E</text>
+ <text x="220" y="110">S</text>
+ <text x="220" y="130">T</text>
+ <text x="220" y="150">7</text>
+
+ <text x="220" y="200">T ST8</text>
+
+ <g transform="translate(150,100)rotate(45)"><text>A</text></g>
+</svg>
diff --git a/layout/reftests/svg/text-layout-01.svg b/layout/reftests/svg/text-layout-01.svg
new file mode 100644
index 0000000000..25c28d6b3a
--- /dev/null
+++ b/layout/reftests/svg/text-layout-01.svg
@@ -0,0 +1,36 @@
+<!--
+ 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"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ font-family="monospace" font-size="20" xml:space="preserve">
+
+ <title>Testcase to check that dx, dy works for text</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=388547 -->
+
+ <defs>
+ <path id="h1" d="M 30,150 h 100"/>
+ <path id="h2" d="M 30,200 h 100"/>
+ <path id="h3" d="M 220,200 h 100"/>
+ </defs>
+
+ <text x="20" y="20" dx="10" dy="10">TEST1</text>
+
+ <text x="30" y="60" dx="0, 0, 10" dy="0, 10, 10">TEST2</text>
+
+ <text x="30" y="100">T<tspan dx="0, 10" dy="10, 10">EST</tspan>3</text>
+
+ <text><textPath xlink:href="#h1"><tspan dy="10, -10">TE</tspan>ST4</textPath></text>
+
+ <text><textPath xlink:href="#h2"><tspan dx="10">TE</tspan>ST5</textPath></text>
+
+ <text x="220, 240, 260, 280" y="30">TEST6</text>
+
+ <text x="220, 220, 220, 220, 220" y="70, 90, 110, 130, 150">TEST7</text>
+
+ <text><textPath xlink:href="#h3"><tspan dx="0,1000,-1000">TES</tspan>T8</textPath></text>
+
+ <text x="150" y="100" rotate="45">A</text>
+</svg>
diff --git a/layout/reftests/svg/text-layout-02-ref.svg b/layout/reftests/svg/text-layout-02-ref.svg
new file mode 100644
index 0000000000..7f416b1e90
--- /dev/null
+++ b/layout/reftests/svg/text-layout-02-ref.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" version="1.1"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ font-family="monospace" font-size="20" xml:space="preserve">
+
+ <title>Reference to check that a single rotate value works for text</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=521636 -->
+
+ <defs>
+ <path id="h1" d="M 30,150 h 100"/>
+ </defs>
+
+ <text x="20" y="20" rotate="90,90,90,90,90">TEST1</text>
+
+ <text><textPath xlink:href="#h1"><tspan rotate="90,90">TE</tspan>ST4</textPath></text>
+
+</svg>
diff --git a/layout/reftests/svg/text-layout-02.svg b/layout/reftests/svg/text-layout-02.svg
new file mode 100644
index 0000000000..cb9a6eb9bf
--- /dev/null
+++ b/layout/reftests/svg/text-layout-02.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" version="1.1"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ font-family="monospace" font-size="20" xml:space="preserve">
+
+ <title>Testcase to check that a single rotate value works for text</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=521636 -->
+
+ <defs>
+ <path id="h1" d="M 30,150 h 100"/>
+ </defs>
+
+ <text x="20" y="20" rotate="90">TEST1</text>
+
+ <text><textPath xlink:href="#h1"><tspan rotate="90">TE</tspan>ST4</textPath></text>
+
+</svg>
diff --git a/layout/reftests/svg/text-layout-03-ref.svg b/layout/reftests/svg/text-layout-03-ref.svg
new file mode 100644
index 0000000000..1b035782d2
--- /dev/null
+++ b/layout/reftests/svg/text-layout-03-ref.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">
+ <title>Reference to check that nodes without text don't affect whitespace handling</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=617737 -->
+
+ <g text-anchor="end" font-size="30">
+ <text x="100" y="75">ABC </text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text-layout-03.svg b/layout/reftests/svg/text-layout-03.svg
new file mode 100644
index 0000000000..934dab5772
--- /dev/null
+++ b/layout/reftests/svg/text-layout-03.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">
+ <title>Testcase to check that nodes without text don't affect whitespace handling</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=617737 -->
+
+ <g text-anchor="end" font-size="30">
+ <text x="100" y="75">ABC <tspan/></text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text-layout-04-ref.svg b/layout/reftests/svg/text-layout-04-ref.svg
new file mode 100644
index 0000000000..638e0336b8
--- /dev/null
+++ b/layout/reftests/svg/text-layout-04-ref.svg
@@ -0,0 +1,11 @@
+<!--
+ 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 to check whitespace handling</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=620286 -->
+
+ <text x="10" y="50" font-size="50">A <tspan/>B</text>
+</svg>
diff --git a/layout/reftests/svg/text-layout-04.svg b/layout/reftests/svg/text-layout-04.svg
new file mode 100644
index 0000000000..1c72cb4354
--- /dev/null
+++ b/layout/reftests/svg/text-layout-04.svg
@@ -0,0 +1,11 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+ <title>Testcase to check whitespace handling</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=620286 -->
+
+ <text x="10" y="50" font-size="50">A <tspan/> B</text>
+</svg>
diff --git a/layout/reftests/svg/text-layout-05-ref.svg b/layout/reftests/svg/text-layout-05-ref.svg
new file mode 100644
index 0000000000..3f0c996d9f
--- /dev/null
+++ b/layout/reftests/svg/text-layout-05-ref.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">
+ <title>Reference to check that dominant-baseline works for tspan</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=672519 -->
+
+ <rect width="100%" height="100%" fill="lime"/>
+ <text x="20" y="200" dominant-baseline="central"
+ font-family="monospace" font-size="50px">foo bar baz</text>
+</svg>
diff --git a/layout/reftests/svg/text-layout-05.svg b/layout/reftests/svg/text-layout-05.svg
new file mode 100644
index 0000000000..7842f1bcd8
--- /dev/null
+++ b/layout/reftests/svg/text-layout-05.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">
+ <title>Testcase to check that dominant-baseline works for tspan</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=672519 -->
+
+ <rect width="100%" height="100%" fill="lime"/>
+ <text x="20" y="200" dominant-baseline="central"
+ font-family="monospace" font-size="50px"><tspan>foo </tspan><tspan>bar </tspan><tspan>baz</tspan></text>
+</svg>
diff --git a/layout/reftests/svg/text-layout-06-ref.svg b/layout/reftests/svg/text-layout-06-ref.svg
new file mode 100644
index 0000000000..9751d1a17e
--- /dev/null
+++ b/layout/reftests/svg/text-layout-06-ref.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">
+ <title>Reference to check fill and stroke handling</title>
+
+ <linearGradient id="transparent">
+ <stop stop-opacity="0"/>
+ </linearGradient>
+ <text x="50" y="80" font-size="80" fill="blue" stroke="url(#transparent)">A B</text>
+ <text x="50" y="80" font-size="80" fill="none" stroke="yellow" stroke-width="2">A B</text>
+</svg>
diff --git a/layout/reftests/svg/text-layout-06.svg b/layout/reftests/svg/text-layout-06.svg
new file mode 100644
index 0000000000..5e8e49b91d
--- /dev/null
+++ b/layout/reftests/svg/text-layout-06.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+ <title>Testcase to check fill and stroke handling</title>
+
+ <text x="50" y="80" font-size="80" fill="blue" stroke="yellow" stroke-width="2">A B</text>
+</svg>
diff --git a/layout/reftests/svg/text-layout-07-ref.svg b/layout/reftests/svg/text-layout-07-ref.svg
new file mode 100644
index 0000000000..939b1faea2
--- /dev/null
+++ b/layout/reftests/svg/text-layout-07-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">
+ <text transform="translate(0, 31)" font-size="120" text-anchor="middle">
+ <tspan y="122.3" x="273">ABC</tspan></text>
+</svg>
diff --git a/layout/reftests/svg/text-layout-07.svg b/layout/reftests/svg/text-layout-07.svg
new file mode 100644
index 0000000000..056827043b
--- /dev/null
+++ b/layout/reftests/svg/text-layout-07.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+ <text transform="translate(0, 31)" font-size="120" text-anchor="middle">
+ <tspan y="122.3" x="273">ABC</tspan>
+ </text>
+</svg>
diff --git a/layout/reftests/svg/text-layout-08-ref.svg b/layout/reftests/svg/text-layout-08-ref.svg
new file mode 100644
index 0000000000..e4c6612754
--- /dev/null
+++ b/layout/reftests/svg/text-layout-08-ref.svg
@@ -0,0 +1,7 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+ <text x="100" y="100" rotate="-10 -10 10 10 10" style="font: 48px sans-serif">A B C</text>
+</svg>
diff --git a/layout/reftests/svg/text-layout-08.svg b/layout/reftests/svg/text-layout-08.svg
new file mode 100644
index 0000000000..1d17f2d613
--- /dev/null
+++ b/layout/reftests/svg/text-layout-08.svg
@@ -0,0 +1,10 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+ <text x="100" y="100" rotate="-10 -10 -10 -10 -10" style="font: 48px sans-serif">
+ A
+ <tspan rotate="10">B C</tspan>
+ </text>
+</svg>
diff --git a/layout/reftests/svg/text-layout-09.svg b/layout/reftests/svg/text-layout-09.svg
new file mode 100644
index 0000000000..c5a0626c08
--- /dev/null
+++ b/layout/reftests/svg/text-layout-09.svg
@@ -0,0 +1,49 @@
+<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" class="reftest-wait">
+
+ <foreignObject><canvas xmlns="http://www.w3.org/1999/xhtml" id="canvas"/></foreignObject>
+
+ <rect width="100%" height="100%" fill="lime"/>
+
+ <g fill="red">
+ <text dominant-baseline="hanging" x="70" y="70">hanging</text>
+ <text dominant-baseline="mathematical" x="70" y="140">mathematical</text>
+ </g>
+
+ <g fill="lime">
+ <text id="hanging" x="70" y="70" dy="0">hanging</text>
+ <text id="mathematical" x="70" y="140" dy="0">mathematical</text>
+ </g>
+
+ <style><![CDATA[
+ text {
+ font: bold 30px Verdana, Helvetica, Arial, sans-serif;
+ }
+ ]]></style>
+ <script>
+ function cover(id, offset) {
+ let element = document.getElementById(id);
+ element.dy.baseVal[0].value = offset;
+ let rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+ let bbox = element.getBBox();
+ rect.x.baseVal.value = bbox.x;
+ rect.y.baseVal.value = bbox.y;
+ rect.width.baseVal.value = bbox.width;
+ rect.height.baseVal.value = bbox.height;
+ element.parentElement.appendChild(rect);
+ }
+ onload = function() {
+ const canvas = document.getElementById('canvas');
+ const ctx = canvas.getContext('2d');
+ ctx.font = 'bold 30px Verdana, Helvetica, Arial, sans-serif';
+
+ let text = 'h';
+ let textMetrics = ctx.measureText(text);
+
+ cover("hanging", textMetrics.actualBoundingBoxAscent * 1.1);
+
+ cover("mathematical", textMetrics.actualBoundingBoxAscent / 2 * 1.4);
+
+ document.documentElement.removeAttribute('class');
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/text-layout-10.svg b/layout/reftests/svg/text-layout-10.svg
new file mode 100644
index 0000000000..cf4397d85a
--- /dev/null
+++ b/layout/reftests/svg/text-layout-10.svg
@@ -0,0 +1,66 @@
+<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" class="reftest-wait">
+
+ <foreignObject><canvas xmlns="http://www.w3.org/1999/xhtml" id="canvas"/></foreignObject>
+
+ <rect width="100%" height="100%" fill="lime"/>
+
+ <g fill="red">
+ <text dominant-baseline="alphabetic" x="10" y="20">Alphabetic</text>
+ <text dominant-baseline="auto" x="80" y="20">Auto</text>
+ <text dominant-baseline="middle" x="150" y="20">Middle</text>
+ <text dominant-baseline="hanging" x="220" y="20">Hanging</text>
+ <text dominant-baseline="central" x="290" y="20">Central</text>
+ <text dominant-baseline="mathematical" x="360" y="20">Mathematical</text>
+ </g>
+
+ <g fill="lime">
+ <text id="alphabetic" dominant-baseline="text-before-edge" x="10" y="20" dx="0">Alphabetic</text>
+ <text id="auto" dominant-baseline="text-before-edge" x="80" y="20" dx="0">Auto</text>
+ <text id="middle" dominant-baseline="text-before-edge" x="150" y="20" dx="0">Middle</text>
+ <text id="hanging" dominant-baseline="text-before-edge" x="220" y="20" dx="0">Hanging</text>
+ <text id="central" dominant-baseline="text-before-edge" x="290" y="20" dx="0">Central</text>
+ <text id="mathematical" dominant-baseline="text-before-edge" x="360" y="20" dx="0">Mathematical</text>
+ </g>
+
+ <style><![CDATA[
+ text {
+ font: bold 30px Verdana, Helvetica, Arial, sans-serif;
+ writing-mode: vertical-rl;
+ }
+ ]]></style>
+ <script>
+ function cover(id, offset) {
+ let element = document.getElementById(id);
+ element.dx.baseVal[0].value = offset;
+ let rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+ let bbox = element.getBBox();
+ rect.x.baseVal.value = bbox.x;
+ rect.y.baseVal.value = bbox.y;
+ rect.width.baseVal.value = bbox.width;
+ rect.height.baseVal.value = bbox.height;
+ element.parentElement.appendChild(rect);
+ }
+ onload = function() {
+ const canvas = document.getElementById('canvas');
+ const ctx = canvas.getContext('2d');
+ ctx.font = 'bold 30px Verdana, Helvetica, Arial, sans-serif';
+
+ let text = 'h';
+ let textMetrics = ctx.measureText(text);
+
+ cover("alphabetic", textMetrics.actualBoundingBoxAscent);
+
+ cover("auto", textMetrics.actualBoundingBoxAscent * 0.8);
+
+ cover("middle", textMetrics.actualBoundingBoxAscent * 0.6);
+
+ cover("hanging", textMetrics.actualBoundingBoxAscent * 0.1);
+
+ cover("central", textMetrics.actualBoundingBoxAscent * 0.7);
+
+ cover("mathematical", textMetrics.actualBoundingBoxAscent * 0.4);
+
+ document.documentElement.removeAttribute('class');
+ }
+ </script>
+</svg>
diff --git a/layout/reftests/svg/text-scale-01-ref.svg b/layout/reftests/svg/text-scale-01-ref.svg
new file mode 100644
index 0000000000..bf481bfdfa
--- /dev/null
+++ b/layout/reftests/svg/text-scale-01-ref.svg
@@ -0,0 +1,14 @@
+<!--
+ 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>Reference for text scaling</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=392233 -->
+
+ <text x="0" y="128" font-size="128">Hello</text>
+ <text x="0" y="256" font-size="128">Hello</text>
+ <text x="0" y="384" font-size="128">Hello</text>
+</svg>
diff --git a/layout/reftests/svg/text-scale-01.svg b/layout/reftests/svg/text-scale-01.svg
new file mode 100644
index 0000000000..e109d91541
--- /dev/null
+++ b/layout/reftests/svg/text-scale-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" version="1.1">
+
+ <title>Testcase for text scaling</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=392233 -->
+ <!-- we use powers of two for the scales so they can be represented
+ exactly in a floating point representation -->
+
+ <g transform="scale(8)">
+ <text x="0" y="16" font-size="16">Hello</text>
+ </g>
+ <g transform="scale(64)">
+ <text x="0" y="4" font-size="2">Hello</text>
+ </g>
+ <g transform="scale(512)">
+ <text x="0" y="0.75" font-size="0.25">Hello</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text-scale-02-ref.svg b/layout/reftests/svg/text-scale-02-ref.svg
new file mode 100644
index 0000000000..efc1c63df0
--- /dev/null
+++ b/layout/reftests/svg/text-scale-02-ref.svg
@@ -0,0 +1,11 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+ <linearGradient id="g" gradientUnits="userSpaceOnUse" x1="100" y1="100" x2="500" y2="500">
+ <stop stop-color="red"/>
+ <stop stop-color="yellow" offset="1"/>
+ </linearGradient>
+ <rect x="100" y="100" width="400" height="400" fill="url(#g)"/>
+</svg>
diff --git a/layout/reftests/svg/text-scale-02.svg b/layout/reftests/svg/text-scale-02.svg
new file mode 100644
index 0000000000..d8d8d69e80
--- /dev/null
+++ b/layout/reftests/svg/text-scale-02.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">
+ <style>
+ @font-face {
+ font-family: Ahem;
+ src: url(../fonts/Ahem.ttf);
+ }
+ </style>
+ <linearGradient id="g" gradientUnits="userSpaceOnUse" x1="100" y1="100" x2="500" y2="500">
+ <stop stop-color="red"/>
+ <stop stop-color="yellow" offset="1"/>
+ </linearGradient>
+ <text x="100" y="420" style="font: 400px Ahem; fill: url(#g)">a</text>
+</svg>
diff --git a/layout/reftests/svg/text-scale-03-ref.svg b/layout/reftests/svg/text-scale-03-ref.svg
new file mode 100644
index 0000000000..7bba5f0f8e
--- /dev/null
+++ b/layout/reftests/svg/text-scale-03-ref.svg
@@ -0,0 +1,7 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+ <rect x="100" y="100" width="400" height="400" style="fill: none; font: 400px Ahem; stroke: black; stroke-width: 8px"/>
+</svg>
diff --git a/layout/reftests/svg/text-scale-03.svg b/layout/reftests/svg/text-scale-03.svg
new file mode 100644
index 0000000000..1e3483e28e
--- /dev/null
+++ b/layout/reftests/svg/text-scale-03.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">
+ <style>
+ @font-face {
+ font-family: Ahem;
+ src: url(../fonts/Ahem.ttf);
+ }
+ </style>
+ <text x="100" y="420" style="fill: none; font: 400px Ahem; stroke: black; stroke-width: 8px">a</text>
+</svg>
diff --git a/layout/reftests/svg/text-stroke-scaling-01-ref.svg b/layout/reftests/svg/text-stroke-scaling-01-ref.svg
new file mode 100644
index 0000000000..8467e78574
--- /dev/null
+++ b/layout/reftests/svg/text-stroke-scaling-01-ref.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
+
+ <title>Reference for stroke-width of text with scaling</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=595209 -->
+
+ <g transform="scale(2)">
+ <text x="10" y="30"
+ fill="black" stroke="black" stroke-width="1">a</text>
+ <text x="20" y="30"
+ fill="black" stroke="black" stroke-width="1">b</text>
+ <text x="30" y="30"
+ fill="black" stroke="black" stroke-width="1">c</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text-stroke-scaling-01.svg b/layout/reftests/svg/text-stroke-scaling-01.svg
new file mode 100644
index 0000000000..5801a86e2b
--- /dev/null
+++ b/layout/reftests/svg/text-stroke-scaling-01.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
+
+ <title>Testcase for stroke-width of text with scaling</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=595209 -->
+
+ <g transform="scale(2)">
+ <text x="10, 20, 30" y="30" rotate="0"
+ fill="black" stroke="black" stroke-width="1">abc</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text-stroke-scaling-02-ref.html b/layout/reftests/svg/text-stroke-scaling-02-ref.html
new file mode 100644
index 0000000000..cc54d7edd4
--- /dev/null
+++ b/layout/reftests/svg/text-stroke-scaling-02-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+ <svg width="500" height="400">
+ <text x="0" y="20" style="stroke: orange; stroke-width: 0.5px"
+ transform="scale(4)">
+ This is some text
+ </text>
+ </svg>
+</html>
diff --git a/layout/reftests/svg/text-stroke-scaling-02a.html b/layout/reftests/svg/text-stroke-scaling-02a.html
new file mode 100644
index 0000000000..194b58cd06
--- /dev/null
+++ b/layout/reftests/svg/text-stroke-scaling-02a.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <svg width="500" height="400">
+ <text x="0" y="20" style="stroke: orange; stroke-width: 2px"
+ transform="scale(4)">
+ This is some text
+ </text>
+ </svg>
+ <script>
+ onload = function() {
+ var obj = document.querySelector("text");
+ window.w = obj.getBoundingClientRect().width;
+ obj.style.vectorEffect = "non-scaling-stroke";
+ document.documentElement.className = "";
+ }
+ </script>
+</html>
diff --git a/layout/reftests/svg/text-stroke-scaling-02b.html b/layout/reftests/svg/text-stroke-scaling-02b.html
new file mode 100644
index 0000000000..162b418a45
--- /dev/null
+++ b/layout/reftests/svg/text-stroke-scaling-02b.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+ <svg width="500" height="400">
+ <text x="0" y="20" style="stroke: orange; vector-effect: non-scaling-stroke;
+ stroke-width: 2px"
+ transform="scale(4)">
+ This is some text
+ </text>
+ </svg>
+</html>
diff --git a/layout/reftests/svg/text-style-01-ref.svg b/layout/reftests/svg/text-style-01-ref.svg
new file mode 100644
index 0000000000..9e5b67263e
--- /dev/null
+++ b/layout/reftests/svg/text-style-01-ref.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">
+
+<title>Reference for style changes</title>
+
+<!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=395155 -->
+
+<style id="s" type="text/css">
+tspan { fill: green; }
+</style>
+
+<text>
+ <tspan x="10" y="50">
+ This should be green
+ </tspan>
+</text>
+
+</svg>
diff --git a/layout/reftests/svg/text-style-01a.svg b/layout/reftests/svg/text-style-01a.svg
new file mode 100644
index 0000000000..4e8fc8ea35
--- /dev/null
+++ b/layout/reftests/svg/text-style-01a.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" onload="m();">
+
+<title>Testcase for style changes</title>
+
+<!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=395155 -->
+
+<style id="s" type="text/css">
+* { fill: red; }
+</style>
+
+<script>
+function m()
+{
+ var s = document.getElementById("s");
+ s.appendChild(document.createTextNode("tspan { fill: green }"));
+}
+</script>
+
+<text>
+ <tspan x="10" y="50">
+ This should be green
+ </tspan>
+</text>
+
+</svg>
diff --git a/layout/reftests/svg/text-style-01b.svg b/layout/reftests/svg/text-style-01b.svg
new file mode 100644
index 0000000000..dd07f3a930
--- /dev/null
+++ b/layout/reftests/svg/text-style-01b.svg
@@ -0,0 +1,30 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" onload="m();">
+
+<title>Testcase for style changes</title>
+
+<!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=395155 -->
+
+<style id="s" type="text/css">
+* { fill: red; }
+</style>
+
+<script>
+function m()
+{
+ var s = document.getElementById("s");
+ s.appendChild(document.createTextNode("tspan { fill: "));
+ s.appendChild(document.createTextNode("green }"));
+}
+</script>
+
+<text>
+ <tspan x="10" y="50">
+ This should be green
+ </tspan>
+</text>
+
+</svg>
diff --git a/layout/reftests/svg/text-style-01c.svg b/layout/reftests/svg/text-style-01c.svg
new file mode 100644
index 0000000000..aeff296fb3
--- /dev/null
+++ b/layout/reftests/svg/text-style-01c.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" onload="m();">
+
+<title>Testcase for style changes</title>
+
+<!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=395155 -->
+
+<style id="s" type="text/css">
+tspan { fill: red; }
+</style>
+
+<script>
+function m()
+{
+ var s = document.getElementById("s");
+ s.firstChild.data = s.firstChild.data.replace("red", "green");
+}
+</script>
+
+<text>
+ <tspan x="10" y="50">
+ This should be green
+ </tspan>
+</text>
+
+</svg>
diff --git a/layout/reftests/svg/text-style-01d.svg b/layout/reftests/svg/text-style-01d.svg
new file mode 100644
index 0000000000..c32a70545e
--- /dev/null
+++ b/layout/reftests/svg/text-style-01d.svg
@@ -0,0 +1,30 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" onload="m();">
+
+<title>Testcase for style changes</title>
+
+<!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=395155 -->
+
+<style id="s" type="text/css">
+* { fill: red; }
+</style>
+
+<script>
+function m()
+{
+ var s = document.getElementById("s");
+ s.appendChild(document.createTextNode(""));
+ s.firstChild.data = "tspan { fill: green }";
+}
+</script>
+
+<text>
+ <tspan x="10" y="50">
+ This should be green
+ </tspan>
+</text>
+
+</svg>
diff --git a/layout/reftests/svg/text-style-01e.svg b/layout/reftests/svg/text-style-01e.svg
new file mode 100644
index 0000000000..9f621bcdbe
--- /dev/null
+++ b/layout/reftests/svg/text-style-01e.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" onload="m();">
+
+<title>Testcase for style changes</title>
+
+<!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=395155 -->
+
+<style id="s" type="text/css">
+tspan { fill: red; }
+</style>
+
+<script>
+function m()
+{
+ var s = document.getElementById("s");
+ s.appendChild(document.createTextNode("tspan { fill: green }"));
+ s.appendChild(document.createTextNode("tspan { fill: red }"));
+ s.removeChild(s.lastChild);
+}
+</script>
+
+<text>
+ <tspan x="10" y="50">
+ This should be green
+ </tspan>
+</text>
+
+</svg>
diff --git a/layout/reftests/svg/text-white-space-01-ref.svg b/layout/reftests/svg/text-white-space-01-ref.svg
new file mode 100644
index 0000000000..54ec18fe83
--- /dev/null
+++ b/layout/reftests/svg/text-white-space-01-ref.svg
@@ -0,0 +1,14 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:h="http://www.w3.org/1999/xhtml">
+ <title>Reference to check xml:space mapping to white-space for foreignObject</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=828962 -->
+
+ <text x="10" y="20">A&#160;&#160;&#160;&#160;B</text>
+ <foreignObject x="10" y="40" width="100" height="100"><h:p>A&#160;B</h:p></foreignObject>
+ <foreignObject x="10" y="140" width="100" height="100"><h:p>A&#160;&#160;&#160;&#160;B<h:br/>C</h:p></foreignObject>
+</svg>
diff --git a/layout/reftests/svg/text-white-space-01.svg b/layout/reftests/svg/text-white-space-01.svg
new file mode 100644
index 0000000000..daaa85148b
--- /dev/null
+++ b/layout/reftests/svg/text-white-space-01.svg
@@ -0,0 +1,15 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:h="http://www.w3.org/1999/xhtml" xml:space="preserve">
+ <title>Testcase to check xml:space mapping to white-space for foreignObject</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=828962 -->
+
+ <text x="10" y="20">A B</text>
+ <foreignObject x="10" y="40" width="100" height="100"><h:p>A B</h:p></foreignObject>
+ <foreignObject x="10" y="140" width="100" height="100" style="white-space: pre"><h:p>A B
+C</h:p></foreignObject>
+</svg>
diff --git a/layout/reftests/svg/text/clipPath-applied-ref.svg b/layout/reftests/svg/text/clipPath-applied-ref.svg
new file mode 100644
index 0000000000..e628a865c9
--- /dev/null
+++ b/layout/reftests/svg/text/clipPath-applied-ref.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">
+ <style>
+ @font-face {
+ font-family: Ahem;
+ src: url(../../fonts/Ahem.ttf);
+ }
+ </style>
+ <g style="font: 32px Ahem; fill: blue; white-space: pre">
+ <text x="20" y="100">one</text>
+ <text x="20" y="200">three</text>
+ <text x="20" y="150" text-decoration="line-through"> </text>
+ <text x="20" y="250" text-decoration="line-through"> </text>
+ </g>
+ <rect x="100" width="300" height="400" fill="white"/>
+ <g fill="none" stroke="black" stroke-width="4" shape-rendering="crispEdges">
+ <rect x="20" y="73" width="96" height="32"/>
+ <rect x="20" y="173" width="96" height="32"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/clipPath-applied.svg b/layout/reftests/svg/text/clipPath-applied.svg
new file mode 100644
index 0000000000..ba213f8bc5
--- /dev/null
+++ b/layout/reftests/svg/text/clipPath-applied.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">
+ <style>
+ @font-face {
+ font-family: Ahem;
+ src: url(../../fonts/Ahem.ttf);
+ }
+ </style>
+ <defs>
+ <clipPath id="c" x="0" y="0" width="600" height="400">
+ <rect width="100" height="400"/>
+ </clipPath>
+ </defs>
+ <g style="font: 32px Ahem; fill: blue; white-space: pre">
+ <text x="20" y="100" clip-path="url(#c)">one</text>
+ <text x="20" y="150" clip-path="url(#c)" style="text-decoration: line-through"> </text>
+ <g clip-path="url(#c)">
+ <text x="20" y="200">three</text>
+ <text x="20" y="250" style="text-decoration: line-through"> </text>
+ </g>
+ </g>
+ <g fill="none" stroke="black" stroke-width="4" shape-rendering="crispEdges">
+ <rect x="20" y="73" width="96" height="32"/>
+ <rect x="20" y="173" width="96" height="32"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/clipPath-content-2-ref.svg b/layout/reftests/svg/text/clipPath-content-2-ref.svg
new file mode 100644
index 0000000000..9404d5a495
--- /dev/null
+++ b/layout/reftests/svg/text/clipPath-content-2-ref.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">
+ <style>
+ @font-face {
+ font-family: Ahem;
+ src: url(../../fonts/Ahem.ttf);
+ }
+ </style>
+ <!-- We stick this in a pattern instead of rendering the <text> elements
+ directly so that it gets the same mFontSizeScaleFactor, and thus
+ will get the same thickness text decoration line. -->
+ <pattern id="p" x="0" y="0" width="600" height="400" patternUnits="userSpaceOnUse">
+ <g style="font: 32px Ahem; white-space: pre; fill: blue">
+ <text x="20" y="100">one</text>
+ <text x="20" y="150" style="text-decoration: line-through"> </text>
+ </g>
+ </pattern>
+ <rect width="600" height="400" fill="url(#p)"/>
+ <g fill="none" stroke="black" stroke-width="4" shape-rendering="crispEdges">
+ <rect x="20" y="73" width="96" height="32"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/clipPath-content-2.svg b/layout/reftests/svg/text/clipPath-content-2.svg
new file mode 100644
index 0000000000..fb3483641e
--- /dev/null
+++ b/layout/reftests/svg/text/clipPath-content-2.svg
@@ -0,0 +1,42 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait">
+ <style>
+ @font-face {
+ font-family: Ahem;
+ src: url(../../fonts/Ahem.ttf);
+ }
+ </style>
+ <defs>
+ <clipPath id="c" x="0" y="0" width="600" height="400">
+ <text x="20" y="100" style="font: 32px Ahem; white-space: pre">one</text>
+ <text x="20" y="150" style="font: 32px Ahem; white-space: pre; text-decoration: line-through"> </text>
+ </clipPath>
+ </defs>
+ <rect x="0" y="0" width="600" height="400" fill="blue" clip-path="url(#c)"/>
+ <g fill="none" stroke="black" stroke-width="4" shape-rendering="crispEdges">
+ <rect x="20" y="73" width="96" height="32"/>
+ </g>
+ <script>
+ function waitUntilFontLoaded() {
+ var canvas = document.createElementNS("http://www.w3.org/1999/xhtml", "canvas");
+ canvas.width = 100;
+ canvas.height = 100;
+ var ctx = canvas.getContext("2d");
+ ctx.font = "100px Ahem";
+ ctx.fillText("_", 0, 100);
+ var img = ctx.getImageData(50, 50, 1, 1);
+ if (img.data[3] == 255) {
+ setTimeout(function() {
+ document.documentElement.removeAttribute("class");
+ }, 1);
+ } else {
+ setTimeout(waitUntilFontLoaded, 200);
+ }
+ }
+
+ setTimeout(waitUntilFontLoaded, 200);
+ </script>
+</svg>
diff --git a/layout/reftests/svg/text/clipPath-content-ref.svg b/layout/reftests/svg/text/clipPath-content-ref.svg
new file mode 100644
index 0000000000..4a37d44755
--- /dev/null
+++ b/layout/reftests/svg/text/clipPath-content-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">
+ <style>
+ @font-face {
+ font-family: Ahem;
+ src: url(../../fonts/Ahem.ttf);
+ }
+ </style>
+ <g style="font: 32px Ahem; white-space: pre; fill: blue">
+ <text x="20" y="100">one</text>
+ </g>
+ <g fill="none" stroke="black" stroke-width="4" shape-rendering="crispEdges">
+ <rect x="20" y="73" width="96" height="32"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/clipPath-content.svg b/layout/reftests/svg/text/clipPath-content.svg
new file mode 100644
index 0000000000..a365b002a5
--- /dev/null
+++ b/layout/reftests/svg/text/clipPath-content.svg
@@ -0,0 +1,41 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait">
+ <style>
+ @font-face {
+ font-family: Ahem;
+ src: url(../../fonts/Ahem.ttf);
+ }
+ </style>
+ <defs>
+ <clipPath id="c" x="0" y="0" width="600" height="400">
+ <text x="20" y="100" style="font: 32px Ahem; white-space: pre">one</text>
+ </clipPath>
+ </defs>
+ <rect x="0" y="0" width="600" height="400" fill="blue" clip-path="url(#c)"/>
+ <g fill="none" stroke="black" stroke-width="4" shape-rendering="crispEdges">
+ <rect x="20" y="73" width="96" height="32"/>
+ </g>
+ <script>
+ function waitUntilFontLoaded() {
+ var canvas = document.createElementNS("http://www.w3.org/1999/xhtml", "canvas");
+ canvas.width = 100;
+ canvas.height = 100;
+ var ctx = canvas.getContext("2d");
+ ctx.font = "100px Ahem";
+ ctx.fillText("_", 0, 100);
+ var img = ctx.getImageData(50, 50, 1, 1);
+ if (img.data[3] == 255) {
+ setTimeout(function() {
+ document.documentElement.removeAttribute("class");
+ }, 1);
+ } else {
+ setTimeout(waitUntilFontLoaded, 200);
+ }
+ }
+
+ setTimeout(waitUntilFontLoaded, 200);
+ </script>
+</svg>
diff --git a/layout/reftests/svg/text/deselectAll-ref.svg b/layout/reftests/svg/text/deselectAll-ref.svg
new file mode 100644
index 0000000000..228b0755db
--- /dev/null
+++ b/layout/reftests/svg/text/deselectAll-ref.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text>hello</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/deselectAll.svg b/layout/reftests/svg/text/deselectAll.svg
new file mode 100644
index 0000000000..6c0c18d2bc
--- /dev/null
+++ b/layout/reftests/svg/text/deselectAll.svg
@@ -0,0 +1,14 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text>hello</text>
+ </g>
+ <script>
+ var text = document.getElementsByTagName("text")[0];
+ text.selectSubString(1, 3);
+ document.documentElement.deselectAll();
+ </script>
+</svg>
diff --git a/layout/reftests/svg/text/display-none-1.svg b/layout/reftests/svg/text/display-none-1.svg
new file mode 100644
index 0000000000..f24835479c
--- /dev/null
+++ b/layout/reftests/svg/text/display-none-1.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text><tspan display="none">xx</tspan>hello</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/display-none-2.svg b/layout/reftests/svg/text/display-none-2.svg
new file mode 100644
index 0000000000..cec10efd21
--- /dev/null
+++ b/layout/reftests/svg/text/display-none-2.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text>he<tspan display="none">xx</tspan>llo</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/display-none-3.svg b/layout/reftests/svg/text/display-none-3.svg
new file mode 100644
index 0000000000..9d616067b1
--- /dev/null
+++ b/layout/reftests/svg/text/display-none-3.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text>hello<tspan display="none">xx</tspan></text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/display-none-4.svg b/layout/reftests/svg/text/display-none-4.svg
new file mode 100644
index 0000000000..84fa857444
--- /dev/null
+++ b/layout/reftests/svg/text/display-none-4.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"
+ style="font: 16px sans-serif">
+ <text x="100" y="100">hello</text>
+ <text x="100" y="200"><textPath display="none">f</textPath></text>
+</svg>
diff --git a/layout/reftests/svg/text/dynamic-dominant-baseline-ref.svg b/layout/reftests/svg/text/dynamic-dominant-baseline-ref.svg
new file mode 100644
index 0000000000..f8b0956208
--- /dev/null
+++ b/layout/reftests/svg/text/dynamic-dominant-baseline-ref.svg
@@ -0,0 +1,7 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+ <text x="100" y="100" font-family="sans-serif" dominant-baseline="central">hello <tspan font-size="48px">there</tspan></text>
+</svg>
diff --git a/layout/reftests/svg/text/dynamic-dominant-baseline.svg b/layout/reftests/svg/text/dynamic-dominant-baseline.svg
new file mode 100644
index 0000000000..5a05b801c8
--- /dev/null
+++ b/layout/reftests/svg/text/dynamic-dominant-baseline.svg
@@ -0,0 +1,15 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait">
+ <text x="100" y="100" font-family="sans-serif">hello <tspan font-size="48px">there</tspan></text>
+ <script>
+ function f() {
+ document.getElementsByTagName("text")[0].style.dominantBaseline = "central";
+ document.documentElement.removeAttribute("class");
+ }
+
+ window.addEventListener("MozReftestInvalidate", f, false);
+ </script>
+</svg>
diff --git a/layout/reftests/svg/text/dynamic-font-size-2-ref.svg b/layout/reftests/svg/text/dynamic-font-size-2-ref.svg
new file mode 100644
index 0000000000..d4f0a7a967
--- /dev/null
+++ b/layout/reftests/svg/text/dynamic-font-size-2-ref.svg
@@ -0,0 +1,15 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+ <style>
+ svg { font: 32px sans-serif; }
+ </style>
+ <defs>
+ <mask id="m" x="0" y="0" width="600" height="400">
+ <text x="100" y="100" fill="white"><tspan>abc</tspan><tspan>def</tspan></text>
+ </mask>
+ </defs>
+ <rect width="600" height="400" fill="blue" mask="url(#m)"/>
+</svg>
diff --git a/layout/reftests/svg/text/dynamic-font-size-2.svg b/layout/reftests/svg/text/dynamic-font-size-2.svg
new file mode 100644
index 0000000000..3e9a0ced3f
--- /dev/null
+++ b/layout/reftests/svg/text/dynamic-font-size-2.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" class="reftest-wait">
+ <!--
+ This tests that a style change on a <text> element within a resource
+ element like <mask> will cause a reflow of the <text>.
+ -->
+ <style>
+ svg { font: 16px sans-serif; }
+ svg.a { font-size: 32px; }
+ </style>
+ <defs>
+ <mask id="m" x="0" y="0" width="600" height="400">
+ <text x="100" y="100" fill="white"><tspan>abc</tspan><tspan>def</tspan></text>
+ </mask>
+ </defs>
+ <rect width="600" height="400" fill="blue" mask="url(#m)"/>
+ <script>
+ function doTest() {
+ document.documentElement.setAttribute("class", "a");
+ }
+
+ window.addEventListener("MozReftestInvalidate", doTest, false);
+ window.setTimeout(doTest, 4000); // fallback for running outside reftest
+ </script>
+</svg>
diff --git a/layout/reftests/svg/text/dynamic-font-size-3-ref.svg b/layout/reftests/svg/text/dynamic-font-size-3-ref.svg
new file mode 100644
index 0000000000..a2f5e5f8e4
--- /dev/null
+++ b/layout/reftests/svg/text/dynamic-font-size-3-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">
+ <style>
+ g { font: 32px sans-serif; }
+ </style>
+ <defs>
+ <g>
+ <mask id="m" x="0" y="0" width="600" height="400">
+ <text x="100" y="100" fill="white"><tspan>abc</tspan><tspan>def</tspan></text>
+ </mask>
+ </g>
+ </defs>
+ <rect width="600" height="400" fill="blue" mask="url(#m)"/>
+</svg>
diff --git a/layout/reftests/svg/text/dynamic-font-size-3.svg b/layout/reftests/svg/text/dynamic-font-size-3.svg
new file mode 100644
index 0000000000..c7f1dcb1d9
--- /dev/null
+++ b/layout/reftests/svg/text/dynamic-font-size-3.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" class="reftest-wait">
+ <!--
+ This tests that a style change on a <text> element within a resource
+ element like <mask> will cause a reflow of the <text>.
+ -->
+ <style>
+ g { font: 16px sans-serif; }
+ g.a { font-size: 32px; }
+ </style>
+ <defs>
+ <g>
+ <mask id="m" x="0" y="0" width="600" height="400">
+ <text x="100" y="100" fill="white"><tspan>abc</tspan><tspan>def</tspan></text>
+ </mask>
+ </g>
+ </defs>
+ <rect width="600" height="400" fill="blue" mask="url(#m)"/>
+ <script>
+ function doTest() {
+ document.querySelector("g").setAttribute("class", "a");
+ document.documentElement.removeAttribute("class");
+ }
+
+ window.addEventListener("MozReftestInvalidate", doTest, false);
+ window.setTimeout(doTest, 4000); // fallback for running outside reftest
+ </script>
+</svg>
diff --git a/layout/reftests/svg/text/dynamic-font-size-4-ref.svg b/layout/reftests/svg/text/dynamic-font-size-4-ref.svg
new file mode 100644
index 0000000000..62d280caf2
--- /dev/null
+++ b/layout/reftests/svg/text/dynamic-font-size-4-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">
+ <style>
+ g text { font: 32px sans-serif; }
+ </style>
+ <defs>
+ <g>
+ <mask id="m" x="0" y="0" width="600" height="400">
+ <text x="100" y="100" fill="white"><tspan>abc</tspan><tspan>def</tspan></text>
+ </mask>
+ </g>
+ </defs>
+ <rect width="600" height="400" fill="blue" mask="url(#m)"/>
+</svg>
diff --git a/layout/reftests/svg/text/dynamic-font-size-4.svg b/layout/reftests/svg/text/dynamic-font-size-4.svg
new file mode 100644
index 0000000000..4131e08e11
--- /dev/null
+++ b/layout/reftests/svg/text/dynamic-font-size-4.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" class="reftest-wait">
+ <!--
+ This tests that a style change on a <text> element within a resource
+ element like <mask> will cause a reflow of the <text>.
+ -->
+ <style>
+ g text { font: 16px sans-serif; }
+ g.a text { font-size: 32px; }
+ </style>
+ <defs>
+ <g>
+ <mask id="m" x="0" y="0" width="600" height="400">
+ <text x="100" y="100" fill="white"><tspan>abc</tspan><tspan>def</tspan></text>
+ </mask>
+ </g>
+ </defs>
+ <rect width="600" height="400" fill="blue" mask="url(#m)"/>
+ <script>
+ function doTest() {
+ document.querySelector("g").setAttribute("class", "a");
+ document.documentElement.removeAttribute("class");
+ }
+
+ window.addEventListener("MozReftestInvalidate", doTest, false);
+ window.setTimeout(doTest, 4000); // fallback for running outside reftest
+ </script>
+</svg>
diff --git a/layout/reftests/svg/text/dynamic-font-size-ref.svg b/layout/reftests/svg/text/dynamic-font-size-ref.svg
new file mode 100644
index 0000000000..64879d3ee4
--- /dev/null
+++ b/layout/reftests/svg/text/dynamic-font-size-ref.svg
@@ -0,0 +1,7 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+ <text x="100" y="100" style="font: 16px sans-serif">hello there</text>
+</svg>
diff --git a/layout/reftests/svg/text/dynamic-font-size.svg b/layout/reftests/svg/text/dynamic-font-size.svg
new file mode 100644
index 0000000000..f7a55bd897
--- /dev/null
+++ b/layout/reftests/svg/text/dynamic-font-size.svg
@@ -0,0 +1,15 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait">
+ <text x="100" y="100" style="font: 32px sans-serif"><tspan>hello</tspan> there</text>
+ <script>
+ function f() {
+ document.getElementsByTagName("text")[0].style.fontSize = "16px";
+ document.documentElement.removeAttribute("class");
+ }
+
+ window.addEventListener("MozReftestInvalidate", f, false);
+ </script>
+</svg>
diff --git a/layout/reftests/svg/text/dynamic-multiple-x-ref.svg b/layout/reftests/svg/text/dynamic-multiple-x-ref.svg
new file mode 100644
index 0000000000..b0ecda41d5
--- /dev/null
+++ b/layout/reftests/svg/text/dynamic-multiple-x-ref.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" style="font: 16px sans-serif">
+ <text x="100 150 200 250" y="50">34</text>
+ <text x="100 150 200 250" y="100">34</text>
+ <text x="100 150 200 250" y="150">1234</text>
+ <text x="200 250" y="200">34</text>
+ <text x="100 150 200 250 300 350" y="250">123456</text>
+ <text x="100 150 300 350" y="300">1256</text>
+ <text x="200 250" y="350">34</text>
+</svg>
diff --git a/layout/reftests/svg/text/dynamic-multiple-x.svg b/layout/reftests/svg/text/dynamic-multiple-x.svg
new file mode 100644
index 0000000000..23f2b20f6c
--- /dev/null
+++ b/layout/reftests/svg/text/dynamic-multiple-x.svg
@@ -0,0 +1,55 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait" style="font: 16px sans-serif">
+ <text x="100 150 200 250" y="50"><tspan>12</tspan>34</text>
+ <text x="100 150 200 250" y="100"><tspan display="none">12</tspan>34</text>
+ <text x="100 150 200 250" y="150">34</text>
+ <text x="100 150 200 250" y="200">34</text>
+ <text x="100 150 200 250 300 350" y="250"><tspan>12</tspan>56</text>
+ <text x="100 150 200 250 300 350" y="300"><tspan>12</tspan>56</text>
+ <text x="100 150 200 250" y="350"><tspan display="none"/>34</text>
+
+ <script>
+ function newTSpan(s) {
+ var e = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
+ e.textContent = s;
+ return e;
+ }
+
+ function f() {
+ window.removeEventListener("MozAfterPaint", f);
+
+ var t = document.getElementsByTagName("text");
+ var e;
+
+ t[0].removeChild(t[0].firstChild);
+
+ t[1].removeChild(t[1].firstChild);
+
+ e = newTSpan("12");
+ t[2].insertBefore(e, t[2].firstChild);
+
+ e = newTSpan("12");
+ e.setAttribute("display", "none");
+ t[3].insertBefore(e, t[3].firstChild);
+
+ e = newTSpan("34");
+ t[4].firstChild.appendChild(e);
+
+ e = newTSpan("34");
+ e.setAttribute("display", "none");
+ t[5].firstChild.appendChild(e);
+
+ e = newTSpan("12");
+ t[6].firstChild.appendChild(e);
+
+ setTimeout(function() {
+ document.documentElement.removeAttribute("class");
+ }, 0);
+ }
+
+ window.addEventListener("MozAfterPaint", f, false);
+ </script>
+</svg>
diff --git a/layout/reftests/svg/text/dynamic-non-scaling-stroke-ref.svg b/layout/reftests/svg/text/dynamic-non-scaling-stroke-ref.svg
new file mode 100644
index 0000000000..8fb57ed2c1
--- /dev/null
+++ b/layout/reftests/svg/text/dynamic-non-scaling-stroke-ref.svg
@@ -0,0 +1,11 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" style="font: 32px sans-serif; text-rendering: geometricPrecision">
+ <text x="100" y="100" stroke="blue" stroke-width="5"><tspan>hello</tspan> there</text>
+
+ <text x="100" y="160" stroke="blue" stroke-width="5"><tspan>hello</tspan> there</text>
+
+ <text x="100" y="220" stroke="blue" stroke-width="5"><tspan>hello</tspan> there</text>
+</svg>
diff --git a/layout/reftests/svg/text/dynamic-non-scaling-stroke.svg b/layout/reftests/svg/text/dynamic-non-scaling-stroke.svg
new file mode 100644
index 0000000000..ea3ba19909
--- /dev/null
+++ b/layout/reftests/svg/text/dynamic-non-scaling-stroke.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" class="reftest-wait">
+ <title>Test non-scaling-stroke repainting when ancestor transforms change</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=875069 -->
+<style>
+ .noscale {
+ vector-effect: non-scaling-stroke;
+ }
+</style>
+ <script>
+
+function doTest() {
+ document.getElementById("g").setAttribute("transform", "scale(2)");
+ document.documentElement.removeAttribute('class');
+}
+
+document.addEventListener("MozReftestInvalidate", doTest, false);
+setTimeout(doTest, 4000); // fallback for running outside reftest
+
+ </script>
+ <g id="g" style="font: 16px sans-serif; text-rendering: geometricPrecision">
+ <text x="50" y="50" stroke="blue" stroke-width="5" class="noscale"><tspan class="noscale">hello</tspan> there</text>
+
+ <text x="50" y="80" stroke="blue" stroke-width="2.5"><tspan class="noscale" stroke-width="5">hello</tspan> there</text>
+
+ <text x="50" y="110" stroke="blue" stroke-width="5" class="noscale"><tspan stroke-width="2.5">hello</tspan> there</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/dynamic-text-shadow.svg b/layout/reftests/svg/text/dynamic-text-shadow.svg
new file mode 100644
index 0000000000..469eaa6023
--- /dev/null
+++ b/layout/reftests/svg/text/dynamic-text-shadow.svg
@@ -0,0 +1,15 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait">
+ <text x="30" y="30" fill="green" style="text-shadow: #cc9900 20px 12px 2px">Hello</text>
+ <script>
+ function f() {
+ document.getElementsByTagName("text")[0].style.textShadow = "grey 3px 3px";
+ document.documentElement.removeAttribute("class");
+ }
+
+ window.addEventListener("MozReftestInvalidate", f, false);
+ </script>
+</svg>
diff --git a/layout/reftests/svg/text/filter-applied-ref.svg b/layout/reftests/svg/text/filter-applied-ref.svg
new file mode 100644
index 0000000000..cd55e7e3f3
--- /dev/null
+++ b/layout/reftests/svg/text/filter-applied-ref.svg
@@ -0,0 +1,33 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+ <style>
+ @font-face {
+ font-family: Ahem;
+ src: url(../../fonts/Ahem.ttf);
+ }
+ </style>
+ <defs>
+ <filter id="f" x="0" y="0" width="150%" height="100%" filterUnits="objectBoundingBox">
+ <feFlood flood-color="yellow" result="flood"/>
+ <feMerge>
+ <feMergeNode in="flood"/>
+ <feMergeNode in="SourceGraphic"/>
+ </feMerge>
+ </filter>
+ </defs>
+ <g style="font: 32px Ahem; fill: blue">
+ <rect x="20" y="74" width="96" height="32" filter="url(#f)"/>
+ <g filter="url(#f)">
+ <rect x="20" y="174" width="160" height="32"/>
+ </g>
+ </g>
+ <g fill="none" stroke="black" stroke-width="4" shape-rendering="crispEdges">
+ <rect x="20" y="73" width="96" height="32"/>
+ <rect x="20" y="73" width="144" height="32"/>
+ <rect x="20" y="173" width="160" height="32"/>
+ <rect x="20" y="173" width="240" height="32"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/filter-applied.svg b/layout/reftests/svg/text/filter-applied.svg
new file mode 100644
index 0000000000..a60b6571c1
--- /dev/null
+++ b/layout/reftests/svg/text/filter-applied.svg
@@ -0,0 +1,40 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+ <style>
+ @font-face {
+ font-family: Ahem;
+ src: url(../../fonts/Ahem.ttf);
+ }
+ </style>
+ <defs>
+ <filter id="f1" x="20" y="73" width="144" height="32" filterUnits="userSpaceOnUse">
+ <feFlood flood-color="yellow" result="flood"/>
+ <feMerge>
+ <feMergeNode in="flood"/>
+ <feMergeNode in="SourceGraphic"/>
+ </feMerge>
+ </filter>
+ <filter id="f2" x="20" y="173" width="240" height="32" filterUnits="userSpaceOnUse">
+ <feFlood flood-color="yellow" result="flood"/>
+ <feMerge>
+ <feMergeNode in="flood"/>
+ <feMergeNode in="SourceGraphic"/>
+ </feMerge>
+ </filter>
+ </defs>
+ <g style="font: 32px Ahem; fill: blue">
+ <text x="20" y="100" filter="url(#f1)">one</text>
+ <g filter="url(#f2)">
+ <text x="20" y="200">three</text>
+ </g>
+ </g>
+ <g fill="none" stroke="black" stroke-width="4" shape-rendering="crispEdges">
+ <rect x="20" y="73" width="96" height="32"/>
+ <rect x="20" y="73" width="144" height="32"/>
+ <rect x="20" y="173" width="160" height="32"/>
+ <rect x="20" y="173" width="240" height="32"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/ignore-before-after.svg b/layout/reftests/svg/text/ignore-before-after.svg
new file mode 100644
index 0000000000..8db670fa33
--- /dev/null
+++ b/layout/reftests/svg/text/ignore-before-after.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" width="700" height="200">
+ <style>
+ text::before { content: "I said '" }
+ text::after { content: "'." }
+ tspan::before { content: "out " }
+ tspan::after { content: " to" }
+ </style>
+ <text x="100" y="100" style="font: 16px sans-serif">hello <tspan>there</tspan> everyone</text>
+</svg>
diff --git a/layout/reftests/svg/text/ignore-border.svg b/layout/reftests/svg/text/ignore-border.svg
new file mode 100644
index 0000000000..cb16461f79
--- /dev/null
+++ b/layout/reftests/svg/text/ignore-border.svg
@@ -0,0 +1,7 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200">
+ <text x="100" y="100" style="font: 16px sans-serif">hello <tspan style="border: 8px solid black">there</tspan> everyone</text>
+</svg>
diff --git a/layout/reftests/svg/text/ignore-display-ref.svg b/layout/reftests/svg/text/ignore-display-ref.svg
new file mode 100644
index 0000000000..689bdc5b1f
--- /dev/null
+++ b/layout/reftests/svg/text/ignore-display-ref.svg
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="400">
+ <g style="font: 16px sans-serif">
+ <text x="100" y="40">hello there everyone</text>
+ <text x="100" y="60">hello there everyone</text>
+ <text x="100" y="80">hello there everyone</text>
+ <text x="100" y="100">hello there everyone</text>
+ <text x="100" y="120">hello there everyone</text>
+ <text x="100" y="140">hello there everyone</text>
+ <text x="100" y="160">hello there everyone</text>
+ <text x="100" y="180">hello there everyone</text>
+ <text x="100" y="200">hello there everyone</text>
+ <text x="100" y="220">hello there everyone</text>
+ <text x="100" y="240">hello there everyone</text>
+ <text x="100" y="260">hello there everyone</text>
+ <text x="100" y="280">hello there everyone</text>
+
+ <text x="400" y="40">hello there everyone</text>
+ <text x="400" y="60">hello there everyone</text>
+ <text x="400" y="80">hello there everyone</text>
+ <text x="400" y="100">hello there everyone</text>
+ <text x="400" y="120">hello there everyone</text>
+ <text x="400" y="140">hello there everyone</text>
+ <text x="400" y="160">hello there everyone</text>
+ <text x="400" y="180">hello there everyone</text>
+ <text x="400" y="200">hello there everyone</text>
+ <text x="400" y="220">hello there everyone</text>
+ <text x="400" y="240">hello there everyone</text>
+ <text x="400" y="260">hello there everyone</text>
+ <text x="400" y="280">hello there everyone</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/ignore-display.svg b/layout/reftests/svg/text/ignore-display.svg
new file mode 100644
index 0000000000..17856ad71b
--- /dev/null
+++ b/layout/reftests/svg/text/ignore-display.svg
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="400">
+ <g style="font: 16px sans-serif">
+ <text x="100" y="40">hello <tspan style="display: block">there</tspan> everyone</text>
+ <text x="100" y="60">hello <tspan style="display: list-item">there</tspan> everyone</text>
+ <text x="100" y="80">hello <tspan style="display: inline-block">there</tspan> everyone</text>
+ <text x="100" y="100">hello <tspan style="display: table">there</tspan> everyone</text>
+ <text x="100" y="120">hello <tspan style="display: inline-table">there</tspan> everyone</text>
+ <text x="100" y="140">hello <tspan style="display: table-row-group">there</tspan> everyone</text>
+ <text x="100" y="160">hello <tspan style="display: table-header-group">there</tspan> everyone</text>
+ <text x="100" y="180">hello <tspan style="display: table-footer-group">there</tspan> everyone</text>
+ <text x="100" y="200">hello <tspan style="display: table-row">there</tspan> everyone</text>
+ <text x="100" y="220">hello <tspan style="display: table-column-group">there</tspan> everyone</text>
+ <text x="100" y="240">hello <tspan style="display: table-column">there</tspan> everyone</text>
+ <text x="100" y="260">hello <tspan style="display: table-cell">there</tspan> everyone</text>
+ <text x="100" y="280">hello <tspan style="display: table-caption">there</tspan> everyone</text>
+
+ <text x="400" y="40" style="display: block">hello there everyone</text>
+ <text x="400" y="60" style="display: list-item">hello there everyone</text>
+ <text x="400" y="80" style="display: inline-block">hello there everyone</text>
+ <text x="400" y="100" style="display: table">hello there everyone</text>
+ <text x="400" y="120" style="display: inline-table">hello there everyone</text>
+ <text x="400" y="140" style="display: table-row-group">hello there everyone</text>
+ <text x="400" y="160" style="display: table-header-group">hello there everyone</text>
+ <text x="400" y="180" style="display: table-footer-group">hello there everyone</text>
+ <text x="400" y="200" style="display: table-row">hello there everyone</text>
+ <text x="400" y="220" style="display: table-column-group">hello there everyone</text>
+ <text x="400" y="240" style="display: table-column">hello there everyone</text>
+ <text x="400" y="260" style="display: table-cell">hello there everyone</text>
+ <text x="400" y="280" style="display: table-caption">hello there everyone</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/ignore-float-first-letter.svg b/layout/reftests/svg/text/ignore-float-first-letter.svg
new file mode 100644
index 0000000000..94ca633d68
--- /dev/null
+++ b/layout/reftests/svg/text/ignore-float-first-letter.svg
@@ -0,0 +1,10 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200">
+ <style>
+ text:first-letter { float: right }
+ </style>
+ <text x="100" y="100" style="font: 16px sans-serif">hello there everyone</text>
+</svg>
diff --git a/layout/reftests/svg/text/ignore-float.svg b/layout/reftests/svg/text/ignore-float.svg
new file mode 100644
index 0000000000..cb4b72898a
--- /dev/null
+++ b/layout/reftests/svg/text/ignore-float.svg
@@ -0,0 +1,7 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200">
+ <text x="100" y="100" style="font: 16px sans-serif">hello <tspan style="float: right">there</tspan> everyone</text>
+</svg>
diff --git a/layout/reftests/svg/text/ignore-invalid-child-2-ref.svg b/layout/reftests/svg/text/ignore-invalid-child-2-ref.svg
new file mode 100644
index 0000000000..ece0929ddf
--- /dev/null
+++ b/layout/reftests/svg/text/ignore-invalid-child-2-ref.svg
@@ -0,0 +1,12 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200">
+ <text x="100" y="100" style="font: 16px sans-serif">
+ <tspan>
+ ab
+ ef
+ </tspan>
+ </text>
+</svg>
diff --git a/layout/reftests/svg/text/ignore-invalid-child-2.svg b/layout/reftests/svg/text/ignore-invalid-child-2.svg
new file mode 100644
index 0000000000..0617c46940
--- /dev/null
+++ b/layout/reftests/svg/text/ignore-invalid-child-2.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" width="700" height="200">
+ <text x="100" y="100" style="font: 16px sans-serif">
+ <tspan>
+ ab
+ <progress xmlns="http://www.w3.org/1999/xhtml">cd</progress>
+ ef
+ </tspan>
+ </text>
+</svg>
diff --git a/layout/reftests/svg/text/ignore-invalid-child-ref.svg b/layout/reftests/svg/text/ignore-invalid-child-ref.svg
new file mode 100644
index 0000000000..3740106794
--- /dev/null
+++ b/layout/reftests/svg/text/ignore-invalid-child-ref.svg
@@ -0,0 +1,7 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200">
+ <text x="100" y="100" style="font: 16px sans-serif">abef</text>
+</svg>
diff --git a/layout/reftests/svg/text/ignore-invalid-child.svg b/layout/reftests/svg/text/ignore-invalid-child.svg
new file mode 100644
index 0000000000..37f6fa494d
--- /dev/null
+++ b/layout/reftests/svg/text/ignore-invalid-child.svg
@@ -0,0 +1,7 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200">
+ <text x="100" y="100" style="font: 16px sans-serif">ab<a xmlns="data:,">cd</a>ef</text>
+</svg>
diff --git a/layout/reftests/svg/text/ignore-margin.svg b/layout/reftests/svg/text/ignore-margin.svg
new file mode 100644
index 0000000000..37d263e7b8
--- /dev/null
+++ b/layout/reftests/svg/text/ignore-margin.svg
@@ -0,0 +1,7 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200">
+ <text x="100" y="100" style="font: 16px sans-serif">hello <tspan style="margin: 20px">there</tspan> everyone</text>
+</svg>
diff --git a/layout/reftests/svg/text/ignore-overflow-scroll.svg b/layout/reftests/svg/text/ignore-overflow-scroll.svg
new file mode 100644
index 0000000000..eecc3b32af
--- /dev/null
+++ b/layout/reftests/svg/text/ignore-overflow-scroll.svg
@@ -0,0 +1,7 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200">
+ <text x="100" y="100" style="font: 16px sans-serif; overflow: scroll">hello <tspan style="display: block; overflow: scroll">there</tspan> everyone</text>
+</svg>
diff --git a/layout/reftests/svg/text/ignore-padding.svg b/layout/reftests/svg/text/ignore-padding.svg
new file mode 100644
index 0000000000..3fb410cdb3
--- /dev/null
+++ b/layout/reftests/svg/text/ignore-padding.svg
@@ -0,0 +1,7 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200">
+ <text x="100" y="100" style="font: 16px sans-serif">hello <tspan style="padding: 20px">there</tspan> everyone</text>
+</svg>
diff --git a/layout/reftests/svg/text/ignore-position-ref.svg b/layout/reftests/svg/text/ignore-position-ref.svg
new file mode 100644
index 0000000000..3d265f2ab7
--- /dev/null
+++ b/layout/reftests/svg/text/ignore-position-ref.svg
@@ -0,0 +1,12 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200">
+ <g style="font: 16px sans-serif">
+ <text x="100" y="40">hello there everyone</text>
+ <text x="100" y="60">hello there everyone</text>
+ <text x="100" y="80">hello there everyone</text>
+ <text x="100" y="100">hello there everyone</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/ignore-position.svg b/layout/reftests/svg/text/ignore-position.svg
new file mode 100644
index 0000000000..ec0878264f
--- /dev/null
+++ b/layout/reftests/svg/text/ignore-position.svg
@@ -0,0 +1,12 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200">
+ <g style="font: 16px sans-serif">
+ <text x="100" y="40">hello <tspan style="position: relative; left: 20px">there</tspan> everyone</text>
+ <text x="100" y="60">hello <tspan style="position: absolute; top: 0; left: 0">there</tspan> everyone</text>
+ <text x="100" y="80">hello <tspan style="position: fixed; top: 0; left: 0">there</tspan> everyone</text>
+ <text x="100" y="100">hello <tspan style="position: sticky; left: 500px">there</tspan> everyone</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/ignore-prop-ref.svg b/layout/reftests/svg/text/ignore-prop-ref.svg
new file mode 100644
index 0000000000..d0f7035fc6
--- /dev/null
+++ b/layout/reftests/svg/text/ignore-prop-ref.svg
@@ -0,0 +1,7 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200">
+ <text x="100" y="100" style="font: 16px sans-serif">hello there everyone</text>
+</svg>
diff --git a/layout/reftests/svg/text/ignore-text-align-2-ref.svg b/layout/reftests/svg/text/ignore-text-align-2-ref.svg
new file mode 100644
index 0000000000..58a786fa6e
--- /dev/null
+++ b/layout/reftests/svg/text/ignore-text-align-2-ref.svg
@@ -0,0 +1,10 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text>Hello.</text>
+ <text y="20">Goodbye.</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/ignore-text-align-2.svg b/layout/reftests/svg/text/ignore-text-align-2.svg
new file mode 100644
index 0000000000..0210124e88
--- /dev/null
+++ b/layout/reftests/svg/text/ignore-text-align-2.svg
@@ -0,0 +1,10 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text style="white-space: pre-line; line-height: 20px; text-align: center">Hello.
+Goodbye.</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/ignore-text-align.svg b/layout/reftests/svg/text/ignore-text-align.svg
new file mode 100644
index 0000000000..5f072818e6
--- /dev/null
+++ b/layout/reftests/svg/text/ignore-text-align.svg
@@ -0,0 +1,7 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200">
+ <text x="100" y="100" style="font: 16px sans-serif; text-align: center">hello there everyone</text>
+</svg>
diff --git a/layout/reftests/svg/text/ignore-vertical-align-ref.svg b/layout/reftests/svg/text/ignore-vertical-align-ref.svg
new file mode 100644
index 0000000000..c4c7995f95
--- /dev/null
+++ b/layout/reftests/svg/text/ignore-vertical-align-ref.svg
@@ -0,0 +1,7 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200">
+ <text x="100" y="100" style="font: 16px sans-serif">hello <tspan style="font-size: 24px">there</tspan> everyone</text>
+</svg>
diff --git a/layout/reftests/svg/text/ignore-vertical-align.svg b/layout/reftests/svg/text/ignore-vertical-align.svg
new file mode 100644
index 0000000000..03612bc770
--- /dev/null
+++ b/layout/reftests/svg/text/ignore-vertical-align.svg
@@ -0,0 +1,7 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200">
+ <text x="100" y="100" style="font: 16px sans-serif">hello <tspan style="vertical-align: top; font-size: 24px">there</tspan> everyone</text>
+</svg>
diff --git a/layout/reftests/svg/text/link-surrounding.svg b/layout/reftests/svg/text/link-surrounding.svg
new file mode 100644
index 0000000000..19e7c562c1
--- /dev/null
+++ b/layout/reftests/svg/text/link-surrounding.svg
@@ -0,0 +1,9 @@
+<!--
+ 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" width="700" height="200">
+ <a xlink:href="data:," transform="translate(100,100)" style="font: 16px sans-serif">
+ <text>hello</text>
+ </a>
+</svg>
diff --git a/layout/reftests/svg/text/mask-applied-ref.svg b/layout/reftests/svg/text/mask-applied-ref.svg
new file mode 100644
index 0000000000..e628a865c9
--- /dev/null
+++ b/layout/reftests/svg/text/mask-applied-ref.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">
+ <style>
+ @font-face {
+ font-family: Ahem;
+ src: url(../../fonts/Ahem.ttf);
+ }
+ </style>
+ <g style="font: 32px Ahem; fill: blue; white-space: pre">
+ <text x="20" y="100">one</text>
+ <text x="20" y="200">three</text>
+ <text x="20" y="150" text-decoration="line-through"> </text>
+ <text x="20" y="250" text-decoration="line-through"> </text>
+ </g>
+ <rect x="100" width="300" height="400" fill="white"/>
+ <g fill="none" stroke="black" stroke-width="4" shape-rendering="crispEdges">
+ <rect x="20" y="73" width="96" height="32"/>
+ <rect x="20" y="173" width="96" height="32"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/mask-applied.svg b/layout/reftests/svg/text/mask-applied.svg
new file mode 100644
index 0000000000..36f1ad380e
--- /dev/null
+++ b/layout/reftests/svg/text/mask-applied.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">
+ <style>
+ @font-face {
+ font-family: Ahem;
+ src: url(../../fonts/Ahem.ttf);
+ }
+ </style>
+ <defs>
+ <mask id="m" x="0" y="0" width="600" height="400">
+ <rect width="100" height="400" fill="white"/>
+ </mask>
+ </defs>
+ <g style="font: 32px Ahem; fill: blue; white-space: pre">
+ <text x="20" y="100" mask="url(#m)">one</text>
+ <text x="20" y="150" mask="url(#m)" style="text-decoration: line-through"> </text>
+ <g mask="url(#m)">
+ <text x="20" y="200">three</text>
+ <text x="20" y="250" style="text-decoration: line-through"> </text>
+ </g>
+ </g>
+ <g fill="none" stroke="black" stroke-width="4" shape-rendering="crispEdges">
+ <rect x="20" y="73" width="96" height="32"/>
+ <rect x="20" y="173" width="96" height="32"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/mask-content-2-ref.svg b/layout/reftests/svg/text/mask-content-2-ref.svg
new file mode 100644
index 0000000000..9404d5a495
--- /dev/null
+++ b/layout/reftests/svg/text/mask-content-2-ref.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">
+ <style>
+ @font-face {
+ font-family: Ahem;
+ src: url(../../fonts/Ahem.ttf);
+ }
+ </style>
+ <!-- We stick this in a pattern instead of rendering the <text> elements
+ directly so that it gets the same mFontSizeScaleFactor, and thus
+ will get the same thickness text decoration line. -->
+ <pattern id="p" x="0" y="0" width="600" height="400" patternUnits="userSpaceOnUse">
+ <g style="font: 32px Ahem; white-space: pre; fill: blue">
+ <text x="20" y="100">one</text>
+ <text x="20" y="150" style="text-decoration: line-through"> </text>
+ </g>
+ </pattern>
+ <rect width="600" height="400" fill="url(#p)"/>
+ <g fill="none" stroke="black" stroke-width="4" shape-rendering="crispEdges">
+ <rect x="20" y="73" width="96" height="32"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/mask-content-2.svg b/layout/reftests/svg/text/mask-content-2.svg
new file mode 100644
index 0000000000..06d487d2ab
--- /dev/null
+++ b/layout/reftests/svg/text/mask-content-2.svg
@@ -0,0 +1,44 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait">
+ <style>
+ @font-face {
+ font-family: Ahem;
+ src: url(../../fonts/Ahem.ttf);
+ }
+ </style>
+ <defs>
+ <mask id="m" x="0" y="0" width="600" height="400">
+ <g style="font: 32px Ahem; white-space: pre; fill: white">
+ <text x="20" y="100">one</text>
+ <text x="20" y="150" style="text-decoration: line-through"> </text>
+ </g>
+ </mask>
+ </defs>
+ <rect x="0" y="0" width="600" height="400" fill="blue" mask="url(#m)"/>
+ <g fill="none" stroke="black" stroke-width="4" shape-rendering="crispEdges">
+ <rect x="20" y="73" width="96" height="32"/>
+ </g>
+ <script>
+ function waitUntilFontLoaded() {
+ var canvas = document.createElementNS("http://www.w3.org/1999/xhtml", "canvas");
+ canvas.width = 100;
+ canvas.height = 100;
+ var ctx = canvas.getContext("2d");
+ ctx.font = "100px Ahem";
+ ctx.fillText("_", 0, 100);
+ var img = ctx.getImageData(50, 50, 1, 1);
+ if (img.data[3] == 255) {
+ setTimeout(function() {
+ document.documentElement.removeAttribute("class");
+ }, 1);
+ } else {
+ setTimeout(waitUntilFontLoaded, 200);
+ }
+ }
+
+ setTimeout(waitUntilFontLoaded, 200);
+ </script>
+</svg>
diff --git a/layout/reftests/svg/text/mask-content-ref.svg b/layout/reftests/svg/text/mask-content-ref.svg
new file mode 100644
index 0000000000..4a37d44755
--- /dev/null
+++ b/layout/reftests/svg/text/mask-content-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">
+ <style>
+ @font-face {
+ font-family: Ahem;
+ src: url(../../fonts/Ahem.ttf);
+ }
+ </style>
+ <g style="font: 32px Ahem; white-space: pre; fill: blue">
+ <text x="20" y="100">one</text>
+ </g>
+ <g fill="none" stroke="black" stroke-width="4" shape-rendering="crispEdges">
+ <rect x="20" y="73" width="96" height="32"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/mask-content.svg b/layout/reftests/svg/text/mask-content.svg
new file mode 100644
index 0000000000..35dfd81c33
--- /dev/null
+++ b/layout/reftests/svg/text/mask-content.svg
@@ -0,0 +1,43 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait">
+ <style>
+ @font-face {
+ font-family: Ahem;
+ src: url(../../fonts/Ahem.ttf);
+ }
+ </style>
+ <defs>
+ <mask id="m" x="0" y="0" width="600" height="400">
+ <g style="font: 32px Ahem; white-space: pre; fill: white">
+ <text x="20" y="100">one</text>
+ </g>
+ </mask>
+ </defs>
+ <rect x="0" y="0" width="600" height="400" fill="blue" mask="url(#m)"/>
+ <g fill="none" stroke="black" stroke-width="4" shape-rendering="crispEdges">
+ <rect x="20" y="73" width="96" height="32"/>
+ </g>
+ <script>
+ function waitUntilFontLoaded() {
+ var canvas = document.createElementNS("http://www.w3.org/1999/xhtml", "canvas");
+ canvas.width = 100;
+ canvas.height = 100;
+ var ctx = canvas.getContext("2d");
+ ctx.font = "100px Ahem";
+ ctx.fillText("_", 0, 100);
+ var img = ctx.getImageData(50, 50, 1, 1);
+ if (img.data[3] == 255) {
+ setTimeout(function() {
+ document.documentElement.removeAttribute("class");
+ }, 1);
+ } else {
+ setTimeout(waitUntilFontLoaded, 200);
+ }
+ }
+
+ setTimeout(waitUntilFontLoaded, 200);
+ </script>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-chunks-bidi-ref.svg b/layout/reftests/svg/text/multiple-chunks-bidi-ref.svg
new file mode 100644
index 0000000000..bb8321d7a1
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-chunks-bidi-ref.svg
@@ -0,0 +1,10 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x="100" text-anchor="end">אב</text>
+ <text x="300" text-anchor="end"><tspan visibility="hidden">אב</tspan>לגabc</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-chunks-bidi.svg b/layout/reftests/svg/text/multiple-chunks-bidi.svg
new file mode 100644
index 0000000000..5392ecd382
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-chunks-bidi.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x="100" text-anchor='end'>אב<tspan x='300'>ל</tspan>גabc</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-chunks-different-anchor-bidi-ref.svg b/layout/reftests/svg/text/multiple-chunks-different-anchor-bidi-ref.svg
new file mode 100644
index 0000000000..23ed5e1cdb
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-chunks-different-anchor-bidi-ref.svg
@@ -0,0 +1,10 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x="100" text-anchor="end">אב</text>
+ <text x="300" text-anchor="middle"><tspan visibility="hidden">אב</tspan>לגabc</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-chunks-different-anchor-bidi.svg b/layout/reftests/svg/text/multiple-chunks-different-anchor-bidi.svg
new file mode 100644
index 0000000000..daef0c2ad5
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-chunks-different-anchor-bidi.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x="100" text-anchor='end'>אב<tspan x='300' text-anchor='middle'>ל</tspan>גabc</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-chunks-different-anchor-ref.svg b/layout/reftests/svg/text/multiple-chunks-different-anchor-ref.svg
new file mode 100644
index 0000000000..5ea33edcc0
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-chunks-different-anchor-ref.svg
@@ -0,0 +1,10 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x="100" text-anchor="end">he</text>
+ <text x="300" text-anchor="middle">llo</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-chunks-different-anchor-rtl-ref.svg b/layout/reftests/svg/text/multiple-chunks-different-anchor-rtl-ref.svg
new file mode 100644
index 0000000000..0c0156fe5f
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-chunks-different-anchor-rtl-ref.svg
@@ -0,0 +1,10 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x="100">אב</text>
+ <text x="300" text-anchor="middle">גדה</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-chunks-different-anchor-rtl.svg b/layout/reftests/svg/text/multiple-chunks-different-anchor-rtl.svg
new file mode 100644
index 0000000000..11ad062604
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-chunks-different-anchor-rtl.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x='100' text-anchor='end' direction='rtl'>אב<tspan x='300' text-anchor='middle'>ג</tspan>דה</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-chunks-different-anchor.svg b/layout/reftests/svg/text/multiple-chunks-different-anchor.svg
new file mode 100644
index 0000000000..5517412795
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-chunks-different-anchor.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x='100' text-anchor='end'>he<tspan x='300' text-anchor='middle'>l</tspan>lo</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-chunks-direction-and-anchor-ref.svg b/layout/reftests/svg/text/multiple-chunks-direction-and-anchor-ref.svg
new file mode 100644
index 0000000000..77a7b805e2
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-chunks-direction-and-anchor-ref.svg
@@ -0,0 +1,10 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x="100" text-anchor="end">ab</text>
+ <text x="300" text-anchor="end">cde</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-chunks-directions-and-anchor-dx-ref.svg b/layout/reftests/svg/text/multiple-chunks-directions-and-anchor-dx-ref.svg
new file mode 100644
index 0000000000..55d9a75adf
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-chunks-directions-and-anchor-dx-ref.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x='100' text-anchor='end'>ab<tspan x='300' direction='rtl' text-anchor='start'>c</tspan>de</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-chunks-directions-and-anchor-dx.svg b/layout/reftests/svg/text/multiple-chunks-directions-and-anchor-dx.svg
new file mode 100644
index 0000000000..97f9b36d87
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-chunks-directions-and-anchor-dx.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x='90' dx='10' text-anchor='end'>ab<tspan x='280' dx='20' direction='rtl' text-anchor='start'>c</tspan>de</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-chunks-directions-and-anchor-multiple-dx-ref.svg b/layout/reftests/svg/text/multiple-chunks-directions-and-anchor-multiple-dx-ref.svg
new file mode 100644
index 0000000000..cd128b8d01
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-chunks-directions-and-anchor-multiple-dx-ref.svg
@@ -0,0 +1,11 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x="110" text-anchor="end">ab</text>
+ <text x="290" text-anchor="end">c<tspan visibility="hidden">de</tspan></text>
+ <text x="320" text-anchor="end">de</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-chunks-directions-and-anchor-multiple-dx.svg b/layout/reftests/svg/text/multiple-chunks-directions-and-anchor-multiple-dx.svg
new file mode 100644
index 0000000000..7703a6986f
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-chunks-directions-and-anchor-multiple-dx.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x='100' dx='10' text-anchor='end'>ab<tspan x='300' dx='20 30' direction='rtl' text-anchor='start'>cd</tspan>e</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-chunks-directions-and-anchor-ref.svg b/layout/reftests/svg/text/multiple-chunks-directions-and-anchor-ref.svg
new file mode 100644
index 0000000000..77a7b805e2
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-chunks-directions-and-anchor-ref.svg
@@ -0,0 +1,10 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x="100" text-anchor="end">ab</text>
+ <text x="300" text-anchor="end">cde</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-chunks-directions-and-anchor.svg b/layout/reftests/svg/text/multiple-chunks-directions-and-anchor.svg
new file mode 100644
index 0000000000..55d9a75adf
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-chunks-directions-and-anchor.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x='100' text-anchor='end'>ab<tspan x='300' direction='rtl' text-anchor='start'>c</tspan>de</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-chunks-dx-bidi-ref.svg b/layout/reftests/svg/text/multiple-chunks-dx-bidi-ref.svg
new file mode 100644
index 0000000000..5392ecd382
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-chunks-dx-bidi-ref.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x="100" text-anchor='end'>אב<tspan x='300'>ל</tspan>גabc</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-chunks-dx-bidi.svg b/layout/reftests/svg/text/multiple-chunks-dx-bidi.svg
new file mode 100644
index 0000000000..e682281a0f
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-chunks-dx-bidi.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x="90" dx="10" text-anchor='end'>אב<tspan x='280' dx='20'>ל</tspan>גabc</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-chunks-dx-different-anchor-bidi-ref.svg b/layout/reftests/svg/text/multiple-chunks-dx-different-anchor-bidi-ref.svg
new file mode 100644
index 0000000000..daef0c2ad5
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-chunks-dx-different-anchor-bidi-ref.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x="100" text-anchor='end'>אב<tspan x='300' text-anchor='middle'>ל</tspan>גabc</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-chunks-dx-different-anchor-bidi.svg b/layout/reftests/svg/text/multiple-chunks-dx-different-anchor-bidi.svg
new file mode 100644
index 0000000000..1f7a628ed3
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-chunks-dx-different-anchor-bidi.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x="90" dx='10' text-anchor='end'>אב<tspan x='280' dx='20' text-anchor='middle'>ל</tspan>גabc</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-chunks-dx-different-anchor-ref.svg b/layout/reftests/svg/text/multiple-chunks-dx-different-anchor-ref.svg
new file mode 100644
index 0000000000..5517412795
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-chunks-dx-different-anchor-ref.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x='100' text-anchor='end'>he<tspan x='300' text-anchor='middle'>l</tspan>lo</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-chunks-dx-different-anchor-rtl-ref.svg b/layout/reftests/svg/text/multiple-chunks-dx-different-anchor-rtl-ref.svg
new file mode 100644
index 0000000000..11ad062604
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-chunks-dx-different-anchor-rtl-ref.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x='100' text-anchor='end' direction='rtl'>אב<tspan x='300' text-anchor='middle'>ג</tspan>דה</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-chunks-dx-different-anchor-rtl.svg b/layout/reftests/svg/text/multiple-chunks-dx-different-anchor-rtl.svg
new file mode 100644
index 0000000000..b8213875a2
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-chunks-dx-different-anchor-rtl.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x='90' dx='10' text-anchor='end' direction='rtl'>אב<tspan x='280' dx='20' text-anchor='middle'>ג</tspan>דה</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-chunks-dx-different-anchor.svg b/layout/reftests/svg/text/multiple-chunks-dx-different-anchor.svg
new file mode 100644
index 0000000000..5c896d887e
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-chunks-dx-different-anchor.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x='90' dx='10' text-anchor='end'>he<tspan x='280' dx='20' text-anchor='middle'>l</tspan>lo</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-chunks-dx-ref.svg b/layout/reftests/svg/text/multiple-chunks-dx-ref.svg
new file mode 100644
index 0000000000..e0962bbe12
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-chunks-dx-ref.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x='100' text-anchor='end'>he<tspan x='300'>l</tspan>lo</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-chunks-dx-rtl-ref.svg b/layout/reftests/svg/text/multiple-chunks-dx-rtl-ref.svg
new file mode 100644
index 0000000000..dc53101f65
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-chunks-dx-rtl-ref.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x='100' text-anchor='end' direction='rtl'>אב<tspan x='300'>ג</tspan>דה</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-chunks-dx-rtl.svg b/layout/reftests/svg/text/multiple-chunks-dx-rtl.svg
new file mode 100644
index 0000000000..0becadf0c5
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-chunks-dx-rtl.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x='90' dx='10' text-anchor='end' direction='rtl'>אב<tspan x='280' dx='20'>ג</tspan>דה</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-chunks-dx.svg b/layout/reftests/svg/text/multiple-chunks-dx.svg
new file mode 100644
index 0000000000..d764453102
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-chunks-dx.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x='90' dx='10' text-anchor='end'>he<tspan x='280' dx='20'>l</tspan>lo</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-chunks-fill-color-ref.svg b/layout/reftests/svg/text/multiple-chunks-fill-color-ref.svg
new file mode 100644
index 0000000000..ac4703b778
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-chunks-fill-color-ref.svg
@@ -0,0 +1,12 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <g fill="blue">
+ <text x="100" text-anchor="end">he</text>
+ <text x="300" text-anchor="end"><tspan fill="green">l</tspan>lo</text>
+ </g>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-chunks-fill-color.svg b/layout/reftests/svg/text/multiple-chunks-fill-color.svg
new file mode 100644
index 0000000000..13a557a3ca
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-chunks-fill-color.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x='100' text-anchor='end' fill='blue'>he<tspan x='300' fill='green'>l</tspan>lo</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-chunks-letter-spacing-ref.svg b/layout/reftests/svg/text/multiple-chunks-letter-spacing-ref.svg
new file mode 100644
index 0000000000..1c32f85c82
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-chunks-letter-spacing-ref.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" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <!--
+ Place characters, end-anchored, as follows:
+
+ First anchored chunk:
+ "h": 100 - adv("e") - 2 * letter-spacing
+ "e": 100 - letter-spacing
+
+ Second anchored chunk:
+ "l": 300 - adv("lo") - 3 * letter-spacing
+ "l": 300 - adv("o") - 2 * letter-spacing
+ "o": 300 - letter-spacing
+ -->
+ <text x='100' text-anchor='end' dx="-40">h<tspan fill="none">e</tspan></text>
+ <text x='100' text-anchor='end' dx="-20">e</text>
+ <text x='300' text-anchor='end' dx="-60">l<tspan fill="none">lo</tspan></text>
+ <text x='300' text-anchor='end' dx="-40">l<tspan fill="none">o</tspan></text>
+ <text x='300' text-anchor='end' dx="-20">o</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-chunks-letter-spacing.svg b/layout/reftests/svg/text/multiple-chunks-letter-spacing.svg
new file mode 100644
index 0000000000..27cf54e835
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-chunks-letter-spacing.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif; letter-spacing: 20px;">
+ <text x='100' text-anchor='end'>he<tspan x='300'>l</tspan>lo</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-chunks-multiple-dx-bidi-ref.svg b/layout/reftests/svg/text/multiple-chunks-multiple-dx-bidi-ref.svg
new file mode 100644
index 0000000000..eb9ed17d52
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-chunks-multiple-dx-bidi-ref.svg
@@ -0,0 +1,11 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x="110" text-anchor="end">אב</text>
+ <text x="320" text-anchor="end"><tspan visibility="hidden">אבל</tspan>גשabc</text>
+ <text x="270" text-anchor="end"><tspan visibility="hidden">אב</tspan>ל<tspan visibility="hidden">גשabc</tspan></text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-chunks-multiple-dx-bidi.svg b/layout/reftests/svg/text/multiple-chunks-multiple-dx-bidi.svg
new file mode 100644
index 0000000000..82cb1cbc3d
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-chunks-multiple-dx-bidi.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x="100" dx="10" text-anchor='end'>אב<tspan x='300' dx='20 50'>לג</tspan>שabc</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-chunks-multiple-dx-different-anchor-bidi-ref.svg b/layout/reftests/svg/text/multiple-chunks-multiple-dx-different-anchor-bidi-ref.svg
new file mode 100644
index 0000000000..8d590eb66a
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-chunks-multiple-dx-different-anchor-bidi-ref.svg
@@ -0,0 +1,10 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x="100" dx='10' text-anchor='end'>אב</text>
+ <text x='320' dx='0 0 0 30' text-anchor='middle'><tspan visibility="hidden">אב</tspan>לגשabc</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-chunks-multiple-dx-different-anchor-bidi.svg b/layout/reftests/svg/text/multiple-chunks-multiple-dx-different-anchor-bidi.svg
new file mode 100644
index 0000000000..391638507e
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-chunks-multiple-dx-different-anchor-bidi.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x="100" dx='10' text-anchor='end'>אב<tspan x='300' dx='20 30' text-anchor='middle'>לג</tspan>שabc</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-chunks-multiple-dx-different-anchor-ref.svg b/layout/reftests/svg/text/multiple-chunks-multiple-dx-different-anchor-ref.svg
new file mode 100644
index 0000000000..fe04a27f73
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-chunks-multiple-dx-different-anchor-ref.svg
@@ -0,0 +1,10 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x="100" dx='10' text-anchor="end">he</text>
+ <text x='300' dx='20 30' text-anchor='middle'>llo</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-chunks-multiple-dx-different-anchor-rtl-ref.svg b/layout/reftests/svg/text/multiple-chunks-multiple-dx-different-anchor-rtl-ref.svg
new file mode 100644
index 0000000000..af08cca907
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-chunks-multiple-dx-different-anchor-rtl-ref.svg
@@ -0,0 +1,10 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x="100" dx='10'>אב</text>
+ <text x='320' dx='0 0 0 30' text-anchor='middle'><tspan visibility="hidden">אב</tspan>גדה</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-chunks-multiple-dx-different-anchor-rtl.svg b/layout/reftests/svg/text/multiple-chunks-multiple-dx-different-anchor-rtl.svg
new file mode 100644
index 0000000000..5e9c3bdfe3
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-chunks-multiple-dx-different-anchor-rtl.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x='100' dx='10' text-anchor='end' direction='rtl'>אב<tspan x='300' dx='20 30' text-anchor='middle'>גד</tspan>ה</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-chunks-multiple-dx-different-anchor.svg b/layout/reftests/svg/text/multiple-chunks-multiple-dx-different-anchor.svg
new file mode 100644
index 0000000000..7394342572
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-chunks-multiple-dx-different-anchor.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x='100' dx='10' text-anchor='end'>he<tspan x='300' dx='20 30' text-anchor='middle'>ll</tspan>o</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-chunks-multiple-dx-ref.svg b/layout/reftests/svg/text/multiple-chunks-multiple-dx-ref.svg
new file mode 100644
index 0000000000..0e1929938c
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-chunks-multiple-dx-ref.svg
@@ -0,0 +1,10 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x='100' dx='10' text-anchor='end'>he</text>
+ <text x='300' dx='20 30' text-anchor="end">llo</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-chunks-multiple-dx-rtl-ref.svg b/layout/reftests/svg/text/multiple-chunks-multiple-dx-rtl-ref.svg
new file mode 100644
index 0000000000..a708bad73b
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-chunks-multiple-dx-rtl-ref.svg
@@ -0,0 +1,10 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x="110">אב</text>
+ <text x="320" dx="0 0 0 30"><tspan visibility="hidden">אב</tspan>גדה</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-chunks-multiple-dx-rtl.svg b/layout/reftests/svg/text/multiple-chunks-multiple-dx-rtl.svg
new file mode 100644
index 0000000000..ed9fd85f7f
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-chunks-multiple-dx-rtl.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x='100' dx='10' text-anchor='end' direction='rtl'>אב<tspan x='300' dx='20 30'>גד</tspan>ה</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-chunks-multiple-dx.svg b/layout/reftests/svg/text/multiple-chunks-multiple-dx.svg
new file mode 100644
index 0000000000..60874a6d9e
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-chunks-multiple-dx.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x='100' dx='10' text-anchor='end'>he<tspan x='300' dx='20 30'>ll</tspan>o</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-chunks-ref.svg b/layout/reftests/svg/text/multiple-chunks-ref.svg
new file mode 100644
index 0000000000..5e23dac0de
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-chunks-ref.svg
@@ -0,0 +1,10 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x='100' text-anchor='end'>he</text>
+ <text x='300' text-anchor='end'>llo</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-chunks-rtl-ref.svg b/layout/reftests/svg/text/multiple-chunks-rtl-ref.svg
new file mode 100644
index 0000000000..3f104064c9
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-chunks-rtl-ref.svg
@@ -0,0 +1,10 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x="100" text-anchor="end" direction="rtl">אב</text>
+ <text x="300" text-anchor="end" direction="rtl"><tspan visibility="hidden">אב</tspan>גדה</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-chunks-rtl.svg b/layout/reftests/svg/text/multiple-chunks-rtl.svg
new file mode 100644
index 0000000000..dc53101f65
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-chunks-rtl.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x='100' text-anchor='end' direction='rtl'>אב<tspan x='300'>ג</tspan>דה</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-chunks-selection-ref.svg b/layout/reftests/svg/text/multiple-chunks-selection-ref.svg
new file mode 100644
index 0000000000..e0f417e31a
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-chunks-selection-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" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x='100' text-anchor='end'>he</text>
+ <text x='300' text-anchor='end'>llo</text>
+ </g>
+ <script>
+ var text = document.getElementsByTagName("text");
+ var range = document.createRange();
+ range.setStart(text[0].firstChild, 1);
+ range.setEnd(text[1].firstChild, 2);
+ window.getSelection().addRange(range);
+ </script>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-chunks-selection.svg b/layout/reftests/svg/text/multiple-chunks-selection.svg
new file mode 100644
index 0000000000..12816b189a
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-chunks-selection.svg
@@ -0,0 +1,16 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x='100' text-anchor='end'>he<tspan x='300'>l</tspan>lo</text>
+ </g>
+ <script>
+ var text = document.getElementsByTagName("text")[0];
+ var range = document.createRange();
+ range.setStart(text.firstChild, 1);
+ range.setEnd(text.lastChild, 1);
+ window.getSelection().addRange(range);
+ </script>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-chunks.svg b/layout/reftests/svg/text/multiple-chunks.svg
new file mode 100644
index 0000000000..e0962bbe12
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-chunks.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x='100' text-anchor='end'>he<tspan x='300'>l</tspan>lo</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-text-selection-ref.html b/layout/reftests/svg/text/multiple-text-selection-ref.html
new file mode 100644
index 0000000000..63b15c53df
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-text-selection-ref.html
@@ -0,0 +1,23 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<style>
+html, body { margin: 0 }
+svg, div { display: inline-block; width: 700px; height: 200px }
+div { font: 16px sans-serif }
+#a { margin-left: -700px; vertical-align: 100px }
+#b { margin-left: -700px; vertical-align: 50px }
+span { margin-left: 100px }
+</style>
+<body>
+ <svg></svg><div id=a><span>hello</span></div><div id=b><span>there</span></div>
+ <script>
+ var span = document.getElementsByTagName("span");
+ var range = document.createRange();
+ range.setStart(span[0].firstChild, 1);
+ range.setEnd(span[1].firstChild, 4);
+ window.getSelection().addRange(range);
+ </script>
+</body>
diff --git a/layout/reftests/svg/text/multiple-text-selection.svg b/layout/reftests/svg/text/multiple-text-selection.svg
new file mode 100644
index 0000000000..98188b1341
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-text-selection.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" width="700" height="200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text>hello</text>
+ <text y="50">there</text>
+ </g>
+ <script>
+ var text = document.getElementsByTagName("text");
+ var range = document.createRange();
+ range.setStart(text[0].firstChild, 1);
+ range.setEnd(text[1].firstChild, 4);
+ window.getSelection().addRange(range);
+ </script>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-x-anchor-end-bidi-ref.svg b/layout/reftests/svg/text/multiple-x-anchor-end-bidi-ref.svg
new file mode 100644
index 0000000000..8ecea9ddc3
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-x-anchor-end-bidi-ref.svg
@@ -0,0 +1,10 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x="100" text-anchor="end">א</text>
+ <text x="200" text-anchor="end"><tspan visibility="hidden" direction="ltr" unicode-bidi="override">א</tspan>בגabc</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-x-anchor-end-bidi.svg b/layout/reftests/svg/text/multiple-x-anchor-end-bidi.svg
new file mode 100644
index 0000000000..6d49872aae
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-x-anchor-end-bidi.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x="100 200" text-anchor='end'>אבגabc</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-x-anchor-end-ref.svg b/layout/reftests/svg/text/multiple-x-anchor-end-ref.svg
new file mode 100644
index 0000000000..04aa3c9e9f
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-x-anchor-end-ref.svg
@@ -0,0 +1,10 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x='100' text-anchor='end'>h</text>
+ <text x='200' text-anchor='end'>ello</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-x-anchor-end-rtl-ref.svg b/layout/reftests/svg/text/multiple-x-anchor-end-rtl-ref.svg
new file mode 100644
index 0000000000..024b35e43a
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-x-anchor-end-rtl-ref.svg
@@ -0,0 +1,10 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x='300'>א</text>
+ <text x='200'>בגדה</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-x-anchor-end-rtl.svg b/layout/reftests/svg/text/multiple-x-anchor-end-rtl.svg
new file mode 100644
index 0000000000..2c9531e078
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-x-anchor-end-rtl.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x='300 200' direction='rtl' text-anchor='end'>אבגדה</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-x-anchor-end.svg b/layout/reftests/svg/text/multiple-x-anchor-end.svg
new file mode 100644
index 0000000000..5add7ca56a
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-x-anchor-end.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x='100 200' text-anchor='end'>hello</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-x-bidi-ref.svg b/layout/reftests/svg/text/multiple-x-bidi-ref.svg
new file mode 100644
index 0000000000..2be20970e3
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-x-bidi-ref.svg
@@ -0,0 +1,10 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x="100">א</text>
+ <text x="200"><tspan visibility="hidden" direction="ltr" unicode-bidi="override">א</tspan>בגabc</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-x-bidi.svg b/layout/reftests/svg/text/multiple-x-bidi.svg
new file mode 100644
index 0000000000..55f265b9c2
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-x-bidi.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x='100 200'>אבגabc</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-x-dx-anchor-end-bidi.svg b/layout/reftests/svg/text/multiple-x-dx-anchor-end-bidi.svg
new file mode 100644
index 0000000000..ca5ae35de6
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-x-dx-anchor-end-bidi.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x="100 200" dx='10' text-anchor='end'>אבגabc</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-x-dx-anchor-end-rtl.svg b/layout/reftests/svg/text/multiple-x-dx-anchor-end-rtl.svg
new file mode 100644
index 0000000000..c7bb9e1abe
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-x-dx-anchor-end-rtl.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x='300 200' dx='10' direction='rtl' text-anchor='end'>אבגדה</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-x-dx-anchor-end.svg b/layout/reftests/svg/text/multiple-x-dx-anchor-end.svg
new file mode 100644
index 0000000000..ebf6691fc7
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-x-dx-anchor-end.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x='100 200' dx='10' text-anchor='end'>hello</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-x-dx-bidi-ref.svg b/layout/reftests/svg/text/multiple-x-dx-bidi-ref.svg
new file mode 100644
index 0000000000..55f265b9c2
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-x-dx-bidi-ref.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x='100 200'>אבגabc</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-x-dx-bidi.svg b/layout/reftests/svg/text/multiple-x-dx-bidi.svg
new file mode 100644
index 0000000000..52b67d9256
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-x-dx-bidi.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x='90 200' dx='10'>אבגabc</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-x-dx-ref.svg b/layout/reftests/svg/text/multiple-x-dx-ref.svg
new file mode 100644
index 0000000000..a1e8c71279
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-x-dx-ref.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x='100 200'>hello</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-x-dx-rtl-ref.svg b/layout/reftests/svg/text/multiple-x-dx-rtl-ref.svg
new file mode 100644
index 0000000000..9955e22e96
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-x-dx-rtl-ref.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text direction='rtl' x='300 200'>אבגדה</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-x-dx-rtl.svg b/layout/reftests/svg/text/multiple-x-dx-rtl.svg
new file mode 100644
index 0000000000..f5bc8647d2
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-x-dx-rtl.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text direction='rtl' x='290 200' dx='10'>אבגדה</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-x-dx.svg b/layout/reftests/svg/text/multiple-x-dx.svg
new file mode 100644
index 0000000000..589d7ef955
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-x-dx.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x='90 200' dx='10'>hello</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-x-holes-bidi-ref.svg b/layout/reftests/svg/text/multiple-x-holes-bidi-ref.svg
new file mode 100644
index 0000000000..34cf120e2b
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-x-holes-bidi-ref.svg
@@ -0,0 +1,11 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x='100'>א</text>
+ <text x='200'>בל</text>
+ <text x='300'><tspan visibility="hidden">אבל</tspan>גabc</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-x-holes-bidi.svg b/layout/reftests/svg/text/multiple-x-holes-bidi.svg
new file mode 100644
index 0000000000..429e286fb8
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-x-holes-bidi.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x='100 200'>אבל<tspan x='300'>גa</tspan>bc</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-x-holes-dx-bidi-ref.svg b/layout/reftests/svg/text/multiple-x-holes-dx-bidi-ref.svg
new file mode 100644
index 0000000000..429e286fb8
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-x-holes-dx-bidi-ref.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x='100 200'>אבל<tspan x='300'>גa</tspan>bc</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-x-holes-dx-bidi.svg b/layout/reftests/svg/text/multiple-x-holes-dx-bidi.svg
new file mode 100644
index 0000000000..482c1892da
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-x-holes-dx-bidi.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x='90 200' dx='10'>אבל<tspan x='280' dx='20'>גa</tspan>bc</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-x-holes-dx-ref.svg b/layout/reftests/svg/text/multiple-x-holes-dx-ref.svg
new file mode 100644
index 0000000000..2fb60e1618
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-x-holes-dx-ref.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x='100 200'>hel<tspan x='300'>l</tspan>o</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-x-holes-dx-rtl.svg b/layout/reftests/svg/text/multiple-x-holes-dx-rtl.svg
new file mode 100644
index 0000000000..8c4b01ecb6
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-x-holes-dx-rtl.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x='100 200' dx='10' direction='rtl'>אבג<tspan x='300' dx='20'>ד</tspan>ה</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-x-holes-dx.svg b/layout/reftests/svg/text/multiple-x-holes-dx.svg
new file mode 100644
index 0000000000..e6d0f5d07b
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-x-holes-dx.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x='90 200' dx='10'>hel<tspan x='280' dx='20'>l</tspan>o</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-x-holes-multiple-dx-bidi-ref.svg b/layout/reftests/svg/text/multiple-x-holes-multiple-dx-bidi-ref.svg
new file mode 100644
index 0000000000..429e286fb8
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-x-holes-multiple-dx-bidi-ref.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x='100 200'>אבל<tspan x='300'>גa</tspan>bc</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-x-holes-multiple-dx-bidi.svg b/layout/reftests/svg/text/multiple-x-holes-multiple-dx-bidi.svg
new file mode 100644
index 0000000000..203e3f92ad
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-x-holes-multiple-dx-bidi.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x='90 180' dx='10 20'>אבל<tspan x='270' dx='30'>גa</tspan>bc</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-x-holes-multiple-dx-ref.svg b/layout/reftests/svg/text/multiple-x-holes-multiple-dx-ref.svg
new file mode 100644
index 0000000000..2fb60e1618
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-x-holes-multiple-dx-ref.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x='100 200'>hel<tspan x='300'>l</tspan>o</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-x-holes-multiple-dx-rtl-ref.svg b/layout/reftests/svg/text/multiple-x-holes-multiple-dx-rtl-ref.svg
new file mode 100644
index 0000000000..5ea60be2bd
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-x-holes-multiple-dx-rtl-ref.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x='100 200' direction='rtl'>אבג<tspan x='300'>ד</tspan>ה</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-x-holes-multiple-dx-rtl.svg b/layout/reftests/svg/text/multiple-x-holes-multiple-dx-rtl.svg
new file mode 100644
index 0000000000..93c1168015
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-x-holes-multiple-dx-rtl.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x='90 180' dx='10 20' direction='rtl'>אבג<tspan x='270' dx='30'>ד</tspan>ה</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-x-holes-multiple-dx.svg b/layout/reftests/svg/text/multiple-x-holes-multiple-dx.svg
new file mode 100644
index 0000000000..492c6bca77
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-x-holes-multiple-dx.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x='90 180' dx='10 20'>hel<tspan x='270' dx='30'>l</tspan>o</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-x-holes-ref.svg b/layout/reftests/svg/text/multiple-x-holes-ref.svg
new file mode 100644
index 0000000000..33a4e6e69c
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-x-holes-ref.svg
@@ -0,0 +1,11 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x='100'>h</text>
+ <text x='200'>el</text>
+ <text x='300'>lo</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-x-holes-rtl-ref.svg b/layout/reftests/svg/text/multiple-x-holes-rtl-ref.svg
new file mode 100644
index 0000000000..2349179119
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-x-holes-rtl-ref.svg
@@ -0,0 +1,11 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x='100' direction='rtl'>א</text>
+ <text x='200' direction='rtl'>בג</text>
+ <text x='300' direction='rtl'>דה</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-x-holes-rtl.svg b/layout/reftests/svg/text/multiple-x-holes-rtl.svg
new file mode 100644
index 0000000000..5ea60be2bd
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-x-holes-rtl.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x='100 200' direction='rtl'>אבג<tspan x='300'>ד</tspan>ה</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-x-holes.svg b/layout/reftests/svg/text/multiple-x-holes.svg
new file mode 100644
index 0000000000..2fb60e1618
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-x-holes.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x='100 200'>hel<tspan x='300'>l</tspan>o</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-x-multiple-dx-anchor-end-bidi-ref.svg b/layout/reftests/svg/text/multiple-x-multiple-dx-anchor-end-bidi-ref.svg
new file mode 100644
index 0000000000..bdb3cd58bc
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-x-multiple-dx-anchor-end-bidi-ref.svg
@@ -0,0 +1,11 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x="110" text-anchor="end">א</text>
+ <text x="220" text-anchor="end"><tspan visibility="hidden">אב</tspan>גabc</text>
+ <text x="190" text-anchor="end"><tspan visibility="hidden">א</tspan>ב<tspan visibility="hidden">abc</tspan></text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-x-multiple-dx-anchor-end-bidi.svg b/layout/reftests/svg/text/multiple-x-multiple-dx-anchor-end-bidi.svg
new file mode 100644
index 0000000000..0be270e550
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-x-multiple-dx-anchor-end-bidi.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x="100 200" dx='10 20 30' text-anchor='end'>אבגabc</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-x-multiple-dx-anchor-end-ref.svg b/layout/reftests/svg/text/multiple-x-multiple-dx-anchor-end-ref.svg
new file mode 100644
index 0000000000..e466df84ca
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-x-multiple-dx-anchor-end-ref.svg
@@ -0,0 +1,11 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x='110' text-anchor='end'>h</text>
+ <text x='190' text-anchor='end'>e<tspan visibility="hidden">llo</tspan></text>
+ <text x='220' text-anchor='end'>llo</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-x-multiple-dx-anchor-end-rtl-ref.svg b/layout/reftests/svg/text/multiple-x-multiple-dx-anchor-end-rtl-ref.svg
new file mode 100644
index 0000000000..09b0238aa2
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-x-multiple-dx-anchor-end-rtl-ref.svg
@@ -0,0 +1,11 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x="310">א</text>
+ <text x='250'>ב<tspan visibility="hidden">גדה</tspan></text>
+ <text x='220'><tspan visibility="hidden">ב</tspan>גדה</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-x-multiple-dx-anchor-end-rtl.svg b/layout/reftests/svg/text/multiple-x-multiple-dx-anchor-end-rtl.svg
new file mode 100644
index 0000000000..80af12be22
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-x-multiple-dx-anchor-end-rtl.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x='300 200' dx='10 20 -30' direction='rtl' text-anchor='end'>אבגדה</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-x-multiple-dx-anchor-end.svg b/layout/reftests/svg/text/multiple-x-multiple-dx-anchor-end.svg
new file mode 100644
index 0000000000..dae9225b0c
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-x-multiple-dx-anchor-end.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x='100 200' dx='10 20 30' text-anchor='end'>hello</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-x-multiple-dx-bidi-ref.svg b/layout/reftests/svg/text/multiple-x-multiple-dx-bidi-ref.svg
new file mode 100644
index 0000000000..ae5f778e21
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-x-multiple-dx-bidi-ref.svg
@@ -0,0 +1,12 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x="110">א</text>
+ <text x="220">ב</text>
+ <text x="250" text-anchor="end">ג</text>
+ <text x="250"><tspan visibility="hidden">אב</tspan>abc</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-x-multiple-dx-bidi.svg b/layout/reftests/svg/text/multiple-x-multiple-dx-bidi.svg
new file mode 100644
index 0000000000..d951b6d668
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-x-multiple-dx-bidi.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x='100 200' dx='10 20 30'>אבגabc</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-x-multiple-dx-ref.svg b/layout/reftests/svg/text/multiple-x-multiple-dx-ref.svg
new file mode 100644
index 0000000000..b0879a43fd
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-x-multiple-dx-ref.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x='100 200' dx='10 20 30'>hello</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-x-multiple-dx-rtl-ref.svg b/layout/reftests/svg/text/multiple-x-multiple-dx-rtl-ref.svg
new file mode 100644
index 0000000000..d1eb6c8848
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-x-multiple-dx-rtl-ref.svg
@@ -0,0 +1,11 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x="310" text-anchor="end">א</text>
+ <text x="220" text-anchor="end">ב</text>
+ <text x="190" text-anchor="end"><tspan visibility="hidden">ב</tspan>גדה</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-x-multiple-dx-rtl.svg b/layout/reftests/svg/text/multiple-x-multiple-dx-rtl.svg
new file mode 100644
index 0000000000..ca1c8c64a9
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-x-multiple-dx-rtl.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text direction='rtl' x='300 200' dx='10 20 -30'>אבגדה</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-x-multiple-dx.svg b/layout/reftests/svg/text/multiple-x-multiple-dx.svg
new file mode 100644
index 0000000000..b0879a43fd
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-x-multiple-dx.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x='100 200' dx='10 20 30'>hello</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-x-percentages-2-iframe-ref.svg b/layout/reftests/svg/text/multiple-x-percentages-2-iframe-ref.svg
new file mode 100644
index 0000000000..bf2ff14e3f
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-x-percentages-2-iframe-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">
+ <text x="50 100" y="100" style="font: 16px sans-serif">hello</text>
+ <text x="150" y="100 150" style="font: 16px sans-serif">there</text>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-x-percentages-2-iframe.svg b/layout/reftests/svg/text/multiple-x-percentages-2-iframe.svg
new file mode 100644
index 0000000000..03a336d74c
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-x-percentages-2-iframe.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">
+ <text x="50 50%" y="100" style="font: 16px sans-serif">hello</text>
+ <text x="150" y="100 75%" style="font: 16px sans-serif">there</text>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-x-percentages-2-ref.html b/layout/reftests/svg/text/multiple-x-percentages-2-ref.html
new file mode 100644
index 0000000000..5597555323
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-x-percentages-2-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<iframe style="width: 200px; height: 200px; border: 0" src="multiple-x-percentages-2-iframe-ref.svg"></iframe>
diff --git a/layout/reftests/svg/text/multiple-x-percentages-2.html b/layout/reftests/svg/text/multiple-x-percentages-2.html
new file mode 100644
index 0000000000..d554b7445c
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-x-percentages-2.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait">
+<iframe style="width: 400px; height: 400px; border: 0" src="multiple-x-percentages-2-iframe.svg"></iframe>
+<script>
+function doTest() {
+ var iframe = document.querySelector("iframe");
+ iframe.style.width = "200px";
+ iframe.style.height = "200px";
+ document.documentElement.removeAttribute("class");
+}
+
+window.addEventListener("MozReftestInvalidate", doTest);
+setTimeout(doTest, 4000); // fallback for running outside reftest
+</script>
diff --git a/layout/reftests/svg/text/multiple-x-percentages-3-iframe-ref.svg b/layout/reftests/svg/text/multiple-x-percentages-3-iframe-ref.svg
new file mode 100644
index 0000000000..0e148f4257
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-x-percentages-3-iframe-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">
+ <text x="50 60 70 80 90 100" y="100" style="font: 16px sans-serif">hello!</text>
+ <text x="150" y="100 110 120 130 140 150" style="font: 16px sans-serif">there!</text>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-x-percentages-3-iframe.svg b/layout/reftests/svg/text/multiple-x-percentages-3-iframe.svg
new file mode 100644
index 0000000000..a8d7e937c3
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-x-percentages-3-iframe.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">
+ <text x="50 60 70 80 90 50%" y="100" style="font: 16px sans-serif">hello</text>
+ <text x="150" y="100 110 120 130 140 75%" style="font: 16px sans-serif">there</text>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-x-percentages-3-ref.html b/layout/reftests/svg/text/multiple-x-percentages-3-ref.html
new file mode 100644
index 0000000000..fdf7ad890f
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-x-percentages-3-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<iframe style="width: 200px; height: 200px; border: 0" src="multiple-x-percentages-3-iframe-ref.svg"></iframe>
diff --git a/layout/reftests/svg/text/multiple-x-percentages-3.html b/layout/reftests/svg/text/multiple-x-percentages-3.html
new file mode 100644
index 0000000000..409c305d15
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-x-percentages-3.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait">
+<iframe style="width: 400px; height: 400px; border: 0" src="multiple-x-percentages-3-iframe.svg"></iframe>
+<script>
+var iframe = document.querySelector("iframe");
+
+function doTest() {
+ window.removeEventListener("MozReftestInvalidate", doTest);
+
+ iframe.style.width = "200px";
+ iframe.style.height = "200px";
+
+ var text = iframe.contentDocument.querySelectorAll("text");
+ text[0].firstChild.nodeValue += "!";
+ text[1].firstChild.nodeValue += "!";
+
+ document.documentElement.removeAttribute("class");
+}
+
+window.addEventListener("MozReftestInvalidate", doTest);
+</script>
diff --git a/layout/reftests/svg/text/multiple-x-percentages-ref.svg b/layout/reftests/svg/text/multiple-x-percentages-ref.svg
new file mode 100644
index 0000000000..78f6ab9223
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-x-percentages-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" width="200" height="200">
+ <text x="50 100" y="100" style="font: 16px sans-serif">hello</text>
+ <text x="150" y="100 150" style="font: 16px sans-serif">there</text>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-x-percentages.svg b/layout/reftests/svg/text/multiple-x-percentages.svg
new file mode 100644
index 0000000000..faf7a64ced
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-x-percentages.svg
@@ -0,0 +1,15 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" class="reftest-wait">
+ <text x="50 50%" y="100" style="font: 16px sans-serif">hello</text>
+ <text x="150" y="100 75%" style="font: 16px sans-serif">there</text>
+ <script>
+ window.addEventListener("MozReftestInvalidate", function() {
+ document.documentElement.setAttribute("width", "200");
+ document.documentElement.setAttribute("height", "200");
+ document.documentElement.removeAttribute("class");
+ }, false);
+ </script>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-x-ref.svg b/layout/reftests/svg/text/multiple-x-ref.svg
new file mode 100644
index 0000000000..97ae33e5b9
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-x-ref.svg
@@ -0,0 +1,10 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x='100'>h</text>
+ <text x='200'>ello</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-x-rtl-ref.svg b/layout/reftests/svg/text/multiple-x-rtl-ref.svg
new file mode 100644
index 0000000000..90b62d8420
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-x-rtl-ref.svg
@@ -0,0 +1,10 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x='300' direction='rtl'>א</text>
+ <text x='200' direction='rtl'>בגדה</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-x-rtl.svg b/layout/reftests/svg/text/multiple-x-rtl.svg
new file mode 100644
index 0000000000..9955e22e96
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-x-rtl.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text direction='rtl' x='300 200'>אבגדה</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-x-white-space-ref.svg b/layout/reftests/svg/text/multiple-x-white-space-ref.svg
new file mode 100644
index 0000000000..c8ac8f67da
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-x-white-space-ref.svg
@@ -0,0 +1,11 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" style="font-family: sans-serif; font-size: 16px; line-height: 20px">
+ <text x="50 150" y="100">ab</text>
+ <text x="50 350" y="200 220">ab</text>
+ <text x="50 150" y="300 320">ab</text>
+ <text x="50 150" y="400 420">ab</text>
+ <text x="50 100" y="500">a b</text>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-x-white-space.svg b/layout/reftests/svg/text/multiple-x-white-space.svg
new file mode 100644
index 0000000000..f62b2747f5
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-x-white-space.svg
@@ -0,0 +1,15 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" style="font-family: sans-serif; font-size: 16px; line-height: 20px">
+ <text x="50 100 150 200 250 300 350" y="100">a
+ b</text>
+ <text x="50 100 150 200 250 300 350" y="200" style="white-space: pre">a
+ b</text>
+ <text x="50 100 150 200 250 300 350" y="300" style="white-space: pre-line">a
+ b</text>
+ <text x="50 100 150" y="400" style="white-space: pre">a
+b</text>
+ <text y="500"><tspan x="50 100 150 200">a </tspan>b</text>
+</svg>
diff --git a/layout/reftests/svg/text/multiple-x.svg b/layout/reftests/svg/text/multiple-x.svg
new file mode 100644
index 0000000000..a1e8c71279
--- /dev/null
+++ b/layout/reftests/svg/text/multiple-x.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x='100 200'>hello</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/pattern-content-ref.svg b/layout/reftests/svg/text/pattern-content-ref.svg
new file mode 100644
index 0000000000..6f2d74b0ec
--- /dev/null
+++ b/layout/reftests/svg/text/pattern-content-ref.svg
@@ -0,0 +1,16 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+ <defs>
+ <pattern id="p2" width="8" height="8" patternUnits="userSpaceOnUse">
+ <rect x="-1" y="-1" width="10" height="10" fill="yellow"/>
+ <rect width="4" height="4"/>
+ <rect x="4" y="4" width="4" height="4"/>
+ </pattern>
+ </defs>
+ <g transform="scale(2)translate(50,120)scale(4)">
+ <text style="font: bold 48px sans-serif; fill: url(#p2); stroke: black; stroke-width: 1px">a</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/pattern-content.svg b/layout/reftests/svg/text/pattern-content.svg
new file mode 100644
index 0000000000..fcee528d47
--- /dev/null
+++ b/layout/reftests/svg/text/pattern-content.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">
+ <defs>
+ <pattern id="p2" width="8" height="8" patternUnits="userSpaceOnUse">
+ <rect x="-1" y="-1" width="10" height="10" fill="yellow"/>
+ <rect width="4" height="4"/>
+ <rect x="4" y="4" width="4" height="4"/>
+ </pattern>
+ <pattern id="p" width="200" height="200" patternUnits="userSpaceOnUse">
+ <g transform="translate(50,120)scale(4)">
+ <text style="font: bold 48px sans-serif; fill: url(#p2)">a</text>
+ </g>
+ </pattern>
+ </defs>
+ <rect width="200" height="200" fill="url(#p)" transform="scale(2)"/>
+ <g transform="scale(2)translate(50,120)scale(4)">
+ <text style="font: bold 48px sans-serif; fill: none; stroke: black; stroke-width: 1px">a</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/pseudo-first-letter-2-ref.svg b/layout/reftests/svg/text/pseudo-first-letter-2-ref.svg
new file mode 100644
index 0000000000..b0954b3d5d
--- /dev/null
+++ b/layout/reftests/svg/text/pseudo-first-letter-2-ref.svg
@@ -0,0 +1,7 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200">
+ <text x="100" y="100" style="font: 16px sans-serif">&#x0301;t</text>
+</svg>
diff --git a/layout/reftests/svg/text/pseudo-first-letter-2.svg b/layout/reftests/svg/text/pseudo-first-letter-2.svg
new file mode 100644
index 0000000000..a88d8d8058
--- /dev/null
+++ b/layout/reftests/svg/text/pseudo-first-letter-2.svg
@@ -0,0 +1,10 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200">
+ <style>
+ text::first-letter { font-size: 32px }
+ </style>
+ <text x="100" y="100" style="font: 16px sans-serif">&#x0301;t</text>
+</svg>
diff --git a/layout/reftests/svg/text/pseudo-first-letter-ref.svg b/layout/reftests/svg/text/pseudo-first-letter-ref.svg
new file mode 100644
index 0000000000..b76cd93c21
--- /dev/null
+++ b/layout/reftests/svg/text/pseudo-first-letter-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" width="700" height="200">
+ <text x="100" y="100" style="font: 16px sans-serif"><tspan font-size="32px">h</tspan>ello there everyone
+ <tspan x="100" y="120">and good night</tspan></text>
+</svg>
diff --git a/layout/reftests/svg/text/pseudo-first-letter.svg b/layout/reftests/svg/text/pseudo-first-letter.svg
new file mode 100644
index 0000000000..3d59e6b002
--- /dev/null
+++ b/layout/reftests/svg/text/pseudo-first-letter.svg
@@ -0,0 +1,11 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200">
+ <style>
+ text::first-letter { font-size: 32px }
+ </style>
+ <text x="100" y="100" style="font: 16px sans-serif">hello there everyone
+ <tspan x="100" y="120">and good night</tspan></text>
+</svg>
diff --git a/layout/reftests/svg/text/pseudo-first-line-2-ref.svg b/layout/reftests/svg/text/pseudo-first-line-2-ref.svg
new file mode 100644
index 0000000000..f436ab0f6a
--- /dev/null
+++ b/layout/reftests/svg/text/pseudo-first-line-2-ref.svg
@@ -0,0 +1,10 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200">
+ <g style="font: 16px sans-serif; text-decoration-skip-ink: none;">
+ <text x="100" y="100" text-decoration="underline">hello there everyone</text>
+ <text x="100" y="120">and good night</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/pseudo-first-line-2.svg b/layout/reftests/svg/text/pseudo-first-line-2.svg
new file mode 100644
index 0000000000..d27a03461e
--- /dev/null
+++ b/layout/reftests/svg/text/pseudo-first-line-2.svg
@@ -0,0 +1,14 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200">
+ <style>
+ text::first-line {
+ text-decoration: underline;
+ text-decoration-skip-ink: none;
+ }
+ </style>
+ <text x="100" y="100" style="font: 16px sans-serif; white-space: pre-line; line-height: 20px">hello there everyone
+ and good night</text>
+</svg>
diff --git a/layout/reftests/svg/text/pseudo-first-line-ref.svg b/layout/reftests/svg/text/pseudo-first-line-ref.svg
new file mode 100644
index 0000000000..9573b0a627
--- /dev/null
+++ b/layout/reftests/svg/text/pseudo-first-line-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" width="700" height="200">
+ <text x="100" y="100" style="font: 16px sans-serif; text-decoration: underline">hello there everyone
+ <tspan x="100" y="120">and good night</tspan></text>
+</svg>
diff --git a/layout/reftests/svg/text/pseudo-first-line.svg b/layout/reftests/svg/text/pseudo-first-line.svg
new file mode 100644
index 0000000000..1347e302a6
--- /dev/null
+++ b/layout/reftests/svg/text/pseudo-first-line.svg
@@ -0,0 +1,11 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200">
+ <style>
+ text::first-line { text-decoration: underline }
+ </style>
+ <text x="100" y="100" style="font: 16px sans-serif">hello there everyone
+ <tspan x="100" y="120">and good night</tspan></text>
+</svg>
diff --git a/layout/reftests/svg/text/reftest.list b/layout/reftests/svg/text/reftest.list
new file mode 100644
index 0000000000..644bafb4f3
--- /dev/null
+++ b/layout/reftests/svg/text/reftest.list
@@ -0,0 +1,216 @@
+fuzzy-if(winWidget,47-127,221-254) == simple.svg simple-ref.html
+== simple-2.svg simple.svg
+fuzzy-if(winWidget,47-127,221-254) == simple-underline.svg simple-underline-ref.html
+== simple-underline-scaled.svg simple-underline-scaled-ref.svg
+fuzzy-if(winWidget,47-166,255-318) fuzzy-if(OSX,0-1,0-1) == simple-anchor-end-bidi.svg simple-anchor-end-bidi-ref.html
+fuzzy-if(winWidget,47-139,181-204) == simple-anchor-end-rtl.svg simple-anchor-end-rtl-ref.html
+fuzzy-if(winWidget,47-137,181-250) == simple-anchor-end.svg simple-anchor-end-ref.html
+fuzzy-if(dwrite,0-104,0-131) fuzzy-if(cocoaWidget,0-143,0-124) fuzzy-if(!(gtkWidget||geckoview),79-200,59-319) == simple-anchor-middle-bidi.svg simple-anchor-middle-bidi-ref.html
+fuzzy-if(winWidget,47-138,188-207) == simple-anchor-middle-rtl.svg simple-anchor-middle-rtl-ref.html
+fuzzy(0-111,0-81) fuzzy-if(winWidget,47-181,221-257) == simple-anchor-middle.svg simple-anchor-middle-ref.html
+fuzzy-if(winWidget,47-138,260-319) == simple-bidi.svg simple-bidi-ref.html
+== simple-bidi-2.svg simple-bidi.svg
+
+== simple-dx.svg simple.svg
+== simple-dx-2.svg simple-dx-2-ref.svg
+== simple-dx-anchor-end-bidi.svg simple-dx-anchor-end-bidi-ref.svg
+== simple-dx-anchor-end-rtl.svg simple-dx-anchor-end-rtl-ref.svg
+== simple-dx-anchor-end.svg simple-dx-anchor-end-ref.svg
+== simple-dx-anchor-middle-bidi.svg simple-dx-anchor-middle-bidi-ref.svg
+== simple-dx-anchor-middle-rtl.svg simple-dx-anchor-middle-rtl-ref.svg
+== simple-dx-anchor-middle.svg simple-dx-anchor-middle-ref.svg
+== simple-dx-bidi.svg simple-dx-bidi-ref.svg
+== simple-dx-bidi-2.svg simple-dx-bidi-2-ref.svg
+== simple-dx-rtl.svg simple-dx-rtl-ref.svg
+== simple-dx-rtl-2.svg simple-dx-rtl-2-ref.svg
+
+== simple-fill-color-dynamic.svg simple-fill-color-dynamic-ref.svg
+fuzzy-if(winWidget,47-129,221-254) fuzzy-if(OSX,23-65,195-196) == simple-fill-color.svg simple-fill-color-ref.html
+== simple-fill-gradient.svg simple-fill-gradient-ref.svg
+== simple-fill-none.svg simple.svg
+== simple-pointer-events.svg simple.svg
+
+fuzzy-if(winWidget,47-127,221-254) == simple-multiple-dx.svg simple-multiple-dx-ref.html
+== simple-multiple-dx-2.svg simple-multiple-dx.svg
+== simple-multiple-dx-anchor-end-bidi.svg simple-multiple-dx-anchor-end-bidi-ref.svg
+== simple-multiple-dx-anchor-middle-bidi.svg simple-multiple-dx-anchor-middle-bidi-ref.svg
+== simple-multiple-dx-anchor-end-rtl.svg simple-multiple-dx-anchor-end-rtl-ref.svg
+== simple-multiple-dx-anchor-end.svg simple-multiple-dx-anchor-end-ref.svg
+fuzzy(0-1,0-2) == simple-multiple-dx-anchor-middle-rtl.svg simple-multiple-dx-anchor-middle-rtl-ref.svg
+== simple-multiple-dx-anchor-middle.svg simple-multiple-dx-anchor-middle-ref.svg
+== simple-multiple-dx-bidi.svg simple-multiple-dx-bidi-ref.svg
+== simple-multiple-dx-bidi-2.svg simple-multiple-dx-bidi.svg
+== simple-multiple-dx-rtl.svg simple-multiple-dx-rtl-ref.svg
+== simple-multiple-dx-rtl-2.svg simple-multiple-dx-rtl.svg
+
+fuzzy-if(winWidget,47-138,183-206) == simple-rtl.svg simple-rtl-ref.html
+== simple-rtl-2.svg simple-rtl.svg
+== simple-transform-rotate.svg simple-transform-rotate-ref.svg
+
+== multiple-x.svg multiple-x-ref.svg
+== multiple-x-bidi.svg multiple-x-bidi-ref.svg
+== multiple-x-rtl.svg multiple-x-rtl-ref.svg
+== multiple-x-anchor-end-bidi.svg multiple-x-anchor-end-bidi-ref.svg
+== multiple-x-anchor-end-rtl.svg multiple-x-anchor-end-rtl-ref.svg
+== multiple-x-anchor-end.svg multiple-x-anchor-end-ref.svg
+== multiple-x-dx-bidi.svg multiple-x-dx-bidi-ref.svg
+== multiple-x-dx-rtl.svg multiple-x-dx-rtl-ref.svg
+== multiple-x-dx.svg multiple-x-dx-ref.svg
+fuzzy-if(Android,0-65,0-74) == multiple-x-holes-bidi.svg multiple-x-holes-bidi-ref.svg
+== multiple-x-holes-dx-bidi.svg multiple-x-holes-dx-bidi-ref.svg
+== multiple-x-holes.svg multiple-x-holes-ref.svg
+== multiple-x-holes-dx.svg multiple-x-holes-dx-ref.svg
+== multiple-x-holes-multiple-dx-bidi.svg multiple-x-holes-multiple-dx-bidi-ref.svg
+== multiple-x-holes-multiple-dx-rtl.svg multiple-x-holes-multiple-dx-rtl-ref.svg
+== multiple-x-holes-multiple-dx.svg multiple-x-holes-multiple-dx-ref.svg
+fuzzy-if(Android,0-192,0-82) == multiple-x-holes-rtl.svg multiple-x-holes-rtl-ref.svg
+== multiple-x-multiple-dx-bidi.svg multiple-x-multiple-dx-bidi-ref.svg
+== multiple-x-multiple-dx-rtl.svg multiple-x-multiple-dx-rtl-ref.svg
+== multiple-x-multiple-dx.svg multiple-x-multiple-dx-ref.svg
+== multiple-x-multiple-dx-anchor-end-bidi.svg multiple-x-multiple-dx-anchor-end-bidi-ref.svg
+== multiple-x-multiple-dx-anchor-end-rtl.svg multiple-x-multiple-dx-anchor-end-rtl-ref.svg
+== multiple-x-multiple-dx-anchor-end.svg multiple-x-multiple-dx-anchor-end-ref.svg
+
+== multiple-x-percentages.svg multiple-x-percentages-ref.svg
+== multiple-x-percentages-2.html multiple-x-percentages-2-ref.html
+== multiple-x-percentages-3.html multiple-x-percentages-3-ref.html
+
+== multiple-x-white-space.svg multiple-x-white-space-ref.svg
+
+fails-if(geckoview) == multiple-chunks-bidi.svg multiple-chunks-bidi-ref.svg # Bug 1558513 for GV
+fails-if(geckoview) == multiple-chunks-different-anchor-bidi.svg multiple-chunks-different-anchor-bidi-ref.svg # Bug 1558513 for GV
+fuzzy-if(Android,0-128,0-177) == multiple-chunks-different-anchor-rtl.svg multiple-chunks-different-anchor-rtl-ref.svg
+== multiple-chunks-different-anchor.svg multiple-chunks-different-anchor-ref.svg
+fuzzy-if(Android,0-242,0-81) == multiple-chunks-directions-and-anchor.svg multiple-chunks-directions-and-anchor-ref.svg
+== multiple-chunks-directions-and-anchor-dx.svg multiple-chunks-directions-and-anchor-dx-ref.svg
+fuzzy-if(Android,0-242,0-81) == multiple-chunks-directions-and-anchor-multiple-dx.svg multiple-chunks-directions-and-anchor-multiple-dx-ref.svg
+== multiple-chunks-dx-bidi.svg multiple-chunks-dx-bidi-ref.svg
+== multiple-chunks-dx-different-anchor-bidi.svg multiple-chunks-dx-different-anchor-bidi-ref.svg
+== multiple-chunks-dx-different-anchor-rtl.svg multiple-chunks-dx-different-anchor-rtl-ref.svg
+== multiple-chunks-dx-different-anchor.svg multiple-chunks-dx-different-anchor-ref.svg
+== multiple-chunks-dx-rtl.svg multiple-chunks-dx-rtl-ref.svg
+== multiple-chunks-dx.svg multiple-chunks-dx-ref.svg
+== multiple-chunks-fill-color.svg multiple-chunks-fill-color-ref.svg
+fails-if(geckoview) == multiple-chunks-multiple-dx-bidi.svg multiple-chunks-multiple-dx-bidi-ref.svg # Bug 1558513 for GV
+fails-if(geckoview) == multiple-chunks-multiple-dx-different-anchor-bidi.svg multiple-chunks-multiple-dx-different-anchor-bidi-ref.svg # Bug 1558513 for GV
+fuzzy-if(Android13,192-192,55-106) == multiple-chunks-multiple-dx-different-anchor-rtl.svg multiple-chunks-multiple-dx-different-anchor-rtl-ref.svg
+== multiple-chunks-multiple-dx-different-anchor.svg multiple-chunks-multiple-dx-different-anchor-ref.svg
+fuzzy-if(Android13,192-192,55-113) == multiple-chunks-multiple-dx-rtl.svg multiple-chunks-multiple-dx-rtl-ref.svg
+== multiple-chunks-multiple-dx.svg multiple-chunks-multiple-dx-ref.svg
+== multiple-chunks-rtl.svg multiple-chunks-rtl-ref.svg
+== multiple-chunks.svg multiple-chunks-ref.svg
+
+== display-none-1.svg simple.svg
+== display-none-2.svg simple.svg
+== display-none-3.svg simple.svg
+== display-none-4.svg simple.svg
+
+== simple-multiline.svg simple-multiline-ref.svg
+== simple-multiline-number.svg simple-multiline-number-ref.svg
+== simple-multiline-pc.svg simple-multiline-pc-ref.svg
+== simple-multiline-anchor-end.svg simple-multiline-anchor-end-ref.svg
+
+fuzzy(0-1,0-15) == textpath.svg textpath-ref.svg
+== textpath-a.svg textpath-a-ref.svg
+== textpath-anchor-middle.svg textpath-anchor-middle-ref.svg
+== textpath-anchor-end.svg textpath-anchor-end-ref.svg
+== textpath-cluster.svg textpath-cluster-ref.svg
+== textpath-cluster-2.svg textpath-cluster-2-ref.svg
+== textpath-invalid-parent.svg textpath-invalid-parent-ref.svg
+== textpath-multiline.svg textpath-multiline-ref.svg
+== textpath-multiline-2.svg textpath-multiline-2-ref.svg
+== textpath-after.svg textpath-after-ref.svg
+== textpath-multiple.svg ../pass.svg
+== textpath-after-anchor-end.svg textpath-after-anchor-end-ref.svg
+== textpath-reset-position.svg textpath-reset-position-ref.svg
+== textpath-inherit-position.svg textpath-inherit-position-ref.svg
+
+== textLength.svg textLength-ref.svg
+fuzzy(0-1,0-200) == textLength-2.svg textLength-2-ref.svg
+fuzzy(0-4,0-100) == textLength-3.svg textLength-3-ref.svg
+== textLength-4.svg textLength-4-ref.svg
+== textLength-5.svg textLength-5-ref.svg
+== textLength-6.svg textLength-6-ref.svg
+
+# text-shadow
+fuzzy(0-127,0-5) fuzzy-if(Android,0-127,0-12) == text-shadow.svg text-shadow-ref.svg
+
+# vertical text
+== vertical-01.svg vertical-01-ref.svg
+
+# tests for ignoring various properties
+== ignore-border.svg ignore-prop-ref.svg
+== ignore-display.svg ignore-display-ref.svg
+== ignore-float.svg ignore-prop-ref.svg
+== ignore-float-first-letter.svg ignore-prop-ref.svg
+== ignore-position.svg ignore-position-ref.svg
+== ignore-margin.svg ignore-prop-ref.svg
+== ignore-padding.svg ignore-prop-ref.svg
+== ignore-vertical-align.svg ignore-vertical-align-ref.svg
+== ignore-overflow-scroll.svg ignore-prop-ref.svg
+== ignore-text-align.svg ignore-prop-ref.svg
+== ignore-text-align-2.svg ignore-text-align-2-ref.svg
+
+# pseudo-elements
+== pseudo-first-line.svg pseudo-first-line-ref.svg
+== pseudo-first-line-2.svg pseudo-first-line-2-ref.svg
+== pseudo-first-letter.svg pseudo-first-letter-ref.svg
+== pseudo-first-letter-2.svg pseudo-first-letter-2-ref.svg
+== ignore-before-after.svg ignore-prop-ref.svg
+
+# invalid child nodes
+== ignore-invalid-child.svg ignore-invalid-child-ref.svg
+== ignore-invalid-child-2.svg ignore-invalid-child-2-ref.svg
+
+# text inside a link
+== link-surrounding.svg simple.svg
+
+# dynamic document changes
+== dynamic-font-size.svg dynamic-font-size-ref.svg
+== dynamic-font-size-2.svg dynamic-font-size-2-ref.svg
+== dynamic-font-size-3.svg dynamic-font-size-3-ref.svg
+== dynamic-font-size-4.svg dynamic-font-size-4-ref.svg
+== dynamic-dominant-baseline.svg dynamic-dominant-baseline-ref.svg
+== dynamic-multiple-x.svg dynamic-multiple-x-ref.svg
+fuzzy(0-1,0-200) == dynamic-non-scaling-stroke.svg dynamic-non-scaling-stroke-ref.svg #Bug 885316
+fuzzy(0-127,0-5) fuzzy-if(Android,0-127,0-41) == dynamic-text-shadow.svg text-shadow-ref.svg
+
+# text and masks
+fuzzy-if(winWidget,0-50,0-224) == mask-applied.svg mask-applied-ref.svg
+fuzzy-if(winWidget,0-105,0-112) == mask-content.svg mask-content-ref.svg
+fuzzy-if(winWidget,0-53,0-112) == mask-content-2.svg mask-content-2-ref.svg
+
+# text and clipPaths
+== clipPath-applied.svg clipPath-applied-ref.svg
+fuzzy-if(winWidget,0-105,0-56) == clipPath-content.svg clipPath-content-ref.svg
+fuzzy-if(winWidget,0-53,0-112) == clipPath-content-2.svg clipPath-content-2-ref.svg
+
+# text and patterns
+== pattern-content.svg pattern-content-ref.svg
+
+# text and filters
+fuzzy-if(winWidget,0-126,0-336) == filter-applied.svg filter-applied-ref.svg
+
+# vertical text
+fuzzy(0-1,0-80) == textpath-vertical-dx.svg textpath-vertical-dx-ref.svg
+fuzzy(0-1,0-80) == textpath-vertical-x.svg textpath-vertical-x-ref.svg
+
+# selection
+needs-focus == deselectAll.svg deselectAll-ref.svg
+fuzzy(0-1,0-250) needs-focus == selectSubString.svg selectSubString-ref.svg
+fuzzy(0-1,0-600) needs-focus == selectSubString-2.svg selectSubString-2-ref.svg
+fuzzy(0-1,0-250) needs-focus == selectSubString-3.svg selectSubString-3-ref.svg
+fuzzy-if(!geckoview,0-1,0-237) needs-focus fuzzy-if(winWidget,55-148,200-254) == simple-selection.svg simple-selection-ref.html
+fuzzy(0-1,0-100) needs-focus fuzzy-if(winWidget,55-148,200-318) == simple-bidi-selection.svg simple-bidi-selection-ref.html
+fuzzy(0-1,0-50) needs-focus fuzzy-if(winWidget,55-148,200-254) fuzzy-if(OSX,1-65,19-196) == simple-fill-color-selection.svg simple-fill-color-selection-ref.html
+fuzzy(0-1,0-150) needs-focus fuzzy-if(winWidget,125-148,221-254) fuzzy-if(/^Windows\x20NT\x206\.1/.test(http.oscpu),55-56,200-200) == simple-underline-selection.svg simple-underline-selection-ref.html # Bug 1392106
+fuzzy(0-1,0-300) needs-focus fuzzy-if(Android13,0-3,0-926) fuzzy-if(winWidget,134-152,432-501) fuzzy-if(/^Windows\x20NT\x206\.1/.test(http.oscpu),55-56,382-382) == multiple-text-selection.svg multiple-text-selection-ref.html # Bug 1392106
+needs-focus == multiple-chunks-selection.svg multiple-chunks-selection-ref.svg
+fuzzy(0-1,0-200) needs-focus == textpath-selection.svg textpath-selection-ref.svg
+
+# letter-spacing and word-spacing
+== simple-letter-spacing.svg simple-letter-spacing-ref.svg
+== simple-word-spacing.svg simple-word-spacing-ref.svg
+== multiple-chunks-letter-spacing.svg multiple-chunks-letter-spacing-ref.svg
+
+== tspan-shaping.svg tspan-shaping-ref.svg
diff --git a/layout/reftests/svg/text/selectSubString-2-ref.svg b/layout/reftests/svg/text/selectSubString-2-ref.svg
new file mode 100644
index 0000000000..87984048da
--- /dev/null
+++ b/layout/reftests/svg/text/selectSubString-2-ref.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" width="700" height="200" class="reftest-wait">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text>hello</text>
+ </g>
+ <script>
+ function f() {
+ var text = document.getElementsByTagName("text")[0];
+ var range = document.createRange();
+ range.setStart(text.firstChild, 0);
+ range.setEnd(text.firstChild, 5);
+ window.getSelection().addRange(range);
+ document.documentElement.removeAttribute("class");
+ }
+
+ window.addEventListener("MozReftestInvalidate", f, false);
+ </script>
+</svg>
diff --git a/layout/reftests/svg/text/selectSubString-2.svg b/layout/reftests/svg/text/selectSubString-2.svg
new file mode 100644
index 0000000000..d92e86b63b
--- /dev/null
+++ b/layout/reftests/svg/text/selectSubString-2.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" width="700" height="200" class="reftest-wait">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text>hello</text>
+ </g>
+ <script>
+ function f() {
+ var text = document.getElementsByTagName("text")[0];
+ text.selectSubString(0, 5);
+ document.documentElement.removeAttribute("class");
+ }
+
+ window.addEventListener("MozReftestInvalidate", f, false);
+ </script>
+</svg>
diff --git a/layout/reftests/svg/text/selectSubString-3-ref.svg b/layout/reftests/svg/text/selectSubString-3-ref.svg
new file mode 100644
index 0000000000..8a7fc2abb8
--- /dev/null
+++ b/layout/reftests/svg/text/selectSubString-3-ref.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" width="700" height="200" class="reftest-wait">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text>abc אבג 123 דהו def</text>
+ </g>
+ <script>
+ function f() {
+ var text = document.getElementsByTagName("text")[0];
+ var range = document.createRange();
+ range.setStart(text.firstChild, 0);
+ range.setEnd(text.firstChild, 9);
+ window.getSelection().addRange(range);
+ document.documentElement.removeAttribute("class");
+ }
+
+ window.addEventListener("MozReftestInvalidate", f, false);
+ </script>
+</svg>
diff --git a/layout/reftests/svg/text/selectSubString-3.svg b/layout/reftests/svg/text/selectSubString-3.svg
new file mode 100644
index 0000000000..902859a6a2
--- /dev/null
+++ b/layout/reftests/svg/text/selectSubString-3.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" width="700" height="200" class="reftest-wait">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text>
+ abc אבג 123 דהו def
+ </text>
+ </g>
+ <script>
+ function f() {
+ var text = document.getElementsByTagName("text")[0];
+ text.selectSubString(0, 9);
+ document.documentElement.removeAttribute("class");
+ }
+
+ window.addEventListener("MozReftestInvalidate", f, false);
+ </script>
+</svg>
diff --git a/layout/reftests/svg/text/selectSubString-ref.svg b/layout/reftests/svg/text/selectSubString-ref.svg
new file mode 100644
index 0000000000..cc11cd22c0
--- /dev/null
+++ b/layout/reftests/svg/text/selectSubString-ref.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" width="700" height="200" class="reftest-wait">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text>hello</text>
+ </g>
+ <script>
+ function f() {
+ var text = document.getElementsByTagName("text")[0];
+ var range = document.createRange();
+ range.setStart(text.firstChild, 1);
+ range.setEnd(text.firstChild, 4);
+ window.getSelection().addRange(range);
+ document.documentElement.removeAttribute("class");
+ }
+
+ window.addEventListener("MozReftestInvalidate", f, false);
+ </script>
+</svg>
diff --git a/layout/reftests/svg/text/selectSubString.svg b/layout/reftests/svg/text/selectSubString.svg
new file mode 100644
index 0000000000..3329b2c924
--- /dev/null
+++ b/layout/reftests/svg/text/selectSubString.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" width="700" height="200" class="reftest-wait">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text>hello</text>
+ </g>
+ <script>
+ function f() {
+ var text = document.getElementsByTagName("text")[0];
+ text.selectSubString(1, 3);
+ document.documentElement.removeAttribute("class");
+ }
+
+ window.addEventListener("MozReftestInvalidate", f, false);
+ </script>
+</svg>
diff --git a/layout/reftests/svg/text/simple-2.svg b/layout/reftests/svg/text/simple-2.svg
new file mode 100644
index 0000000000..871e5418d9
--- /dev/null
+++ b/layout/reftests/svg/text/simple-2.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(0,100)" style="font: 16px sans-serif">
+ <text x="100">hello</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/simple-anchor-end-bidi-ref.html b/layout/reftests/svg/text/simple-anchor-end-bidi-ref.html
new file mode 100644
index 0000000000..ad561778c3
--- /dev/null
+++ b/layout/reftests/svg/text/simple-anchor-end-bidi-ref.html
@@ -0,0 +1,15 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<meta charset=UTF-8>
+<style>
+html, body { margin: 0 }
+svg, div { display: inline-block; width: 700px; height: 200px }
+div { font: 16px sans-serif; position: relative; margin-left: -700px; vertical-align: 100px }
+div { text-align: right }
+span { position: relative; left: -500px }
+</style>
+<body>
+<svg></svg><div><span>אבגabc</span></div>
diff --git a/layout/reftests/svg/text/simple-anchor-end-bidi.svg b/layout/reftests/svg/text/simple-anchor-end-bidi.svg
new file mode 100644
index 0000000000..430fb8f11d
--- /dev/null
+++ b/layout/reftests/svg/text/simple-anchor-end-bidi.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x="100" text-anchor="end">אבגabc</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/simple-anchor-end-ref.html b/layout/reftests/svg/text/simple-anchor-end-ref.html
new file mode 100644
index 0000000000..ae31b12211
--- /dev/null
+++ b/layout/reftests/svg/text/simple-anchor-end-ref.html
@@ -0,0 +1,15 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<meta charset=UTF-8>
+<style>
+html, body { margin: 0 }
+svg, div { display: inline-block; width: 700px; height: 200px }
+div { font: 16px sans-serif; position: relative; margin-left: -700px; vertical-align: 100px }
+div { text-align: right }
+span { position: relative; left: -500px }
+</style>
+<body>
+<svg></svg><div><span>hello</span></div>
diff --git a/layout/reftests/svg/text/simple-anchor-end-rtl-ref.html b/layout/reftests/svg/text/simple-anchor-end-rtl-ref.html
new file mode 100644
index 0000000000..0d0e1435f4
--- /dev/null
+++ b/layout/reftests/svg/text/simple-anchor-end-rtl-ref.html
@@ -0,0 +1,15 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<meta charset=UTF-8>
+<style>
+html, body { margin: 0 }
+svg, div { display: inline-block; width: 700px; height: 200px }
+div { font: 16px sans-serif; position: relative; margin-left: -700px; vertical-align: 100px }
+div { text-align: left }
+span { position: relative; left: 300px }
+</style>
+<body>
+<svg></svg><div><span>אבגדה</span></div>
diff --git a/layout/reftests/svg/text/simple-anchor-end-rtl.svg b/layout/reftests/svg/text/simple-anchor-end-rtl.svg
new file mode 100644
index 0000000000..66b0f9c2ae
--- /dev/null
+++ b/layout/reftests/svg/text/simple-anchor-end-rtl.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x='200' direction='rtl' text-anchor='end'>אבגדה</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/simple-anchor-end.svg b/layout/reftests/svg/text/simple-anchor-end.svg
new file mode 100644
index 0000000000..bd97d05b32
--- /dev/null
+++ b/layout/reftests/svg/text/simple-anchor-end.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x="100" text-anchor="end">hello</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/simple-anchor-middle-bidi-ref.html b/layout/reftests/svg/text/simple-anchor-middle-bidi-ref.html
new file mode 100644
index 0000000000..6fe675123a
--- /dev/null
+++ b/layout/reftests/svg/text/simple-anchor-middle-bidi-ref.html
@@ -0,0 +1,15 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<meta charset=UTF-8>
+<style>
+html, body { margin: 0 }
+svg, div { display: inline-block; width: 700px; height: 200px }
+div { font: 16px sans-serif; position: relative; margin-left: -700px; vertical-align: 100px }
+div { text-align: center }
+span { position: relative; left: -150px }
+</style>
+<body>
+<svg></svg><div><span>אבגabc</span></div>
diff --git a/layout/reftests/svg/text/simple-anchor-middle-bidi.svg b/layout/reftests/svg/text/simple-anchor-middle-bidi.svg
new file mode 100644
index 0000000000..cf1db5d6c3
--- /dev/null
+++ b/layout/reftests/svg/text/simple-anchor-middle-bidi.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x="100" text-anchor="middle">אבגabc</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/simple-anchor-middle-ref.html b/layout/reftests/svg/text/simple-anchor-middle-ref.html
new file mode 100644
index 0000000000..3c6a21d629
--- /dev/null
+++ b/layout/reftests/svg/text/simple-anchor-middle-ref.html
@@ -0,0 +1,15 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<meta charset=UTF-8>
+<style>
+html, body { margin: 0 }
+svg, div { display: inline-block; width: 700px; height: 200px }
+div { font: 16px sans-serif; position: relative; margin-left: -700px; vertical-align: 100px }
+div { text-align: center }
+span { position: relative; left: -150px }
+</style>
+<body>
+<svg></svg><div><span>hello</span></div>
diff --git a/layout/reftests/svg/text/simple-anchor-middle-rtl-ref.html b/layout/reftests/svg/text/simple-anchor-middle-rtl-ref.html
new file mode 100644
index 0000000000..31b35a768c
--- /dev/null
+++ b/layout/reftests/svg/text/simple-anchor-middle-rtl-ref.html
@@ -0,0 +1,15 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<meta charset=UTF-8>
+<style>
+html, body { margin: 0 }
+svg, div { display: inline-block; width: 700px; height: 200px }
+div { font: 16px sans-serif; position: relative; margin-left: -700px; vertical-align: 100px }
+div { text-align: center }
+span { position: relative; left: -50px }
+</style>
+<body>
+<svg></svg><div><span>אבגדה</span></div>
diff --git a/layout/reftests/svg/text/simple-anchor-middle-rtl.svg b/layout/reftests/svg/text/simple-anchor-middle-rtl.svg
new file mode 100644
index 0000000000..ce1adc9852
--- /dev/null
+++ b/layout/reftests/svg/text/simple-anchor-middle-rtl.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x='200' direction='rtl' text-anchor='middle'>אבגדה</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/simple-anchor-middle.svg b/layout/reftests/svg/text/simple-anchor-middle.svg
new file mode 100644
index 0000000000..93f3ed5538
--- /dev/null
+++ b/layout/reftests/svg/text/simple-anchor-middle.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x="100" text-anchor="middle">hello</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/simple-bidi-2.svg b/layout/reftests/svg/text/simple-bidi-2.svg
new file mode 100644
index 0000000000..2097b40d0b
--- /dev/null
+++ b/layout/reftests/svg/text/simple-bidi-2.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(0,100)" style="font: 16px sans-serif">
+ <text x="100">אבגabc</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/simple-bidi-ref.html b/layout/reftests/svg/text/simple-bidi-ref.html
new file mode 100644
index 0000000000..fac6834498
--- /dev/null
+++ b/layout/reftests/svg/text/simple-bidi-ref.html
@@ -0,0 +1,15 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<meta charset=UTF-8>
+<style>
+html, body { margin: 0 }
+svg, div { display: inline-block; width: 700px; height: 200px }
+div { font: 16px sans-serif; position: relative; margin-left: -700px; vertical-align: 100px }
+div { text-align: left }
+span { position: relative; left: 100px }
+</style>
+<body>
+<svg></svg><div><span>אבגabc</span></div>
diff --git a/layout/reftests/svg/text/simple-bidi-selection-ref.html b/layout/reftests/svg/text/simple-bidi-selection-ref.html
new file mode 100644
index 0000000000..8e0f500c13
--- /dev/null
+++ b/layout/reftests/svg/text/simple-bidi-selection-ref.html
@@ -0,0 +1,22 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<meta charset=UTF-8>
+<style>
+html, body { margin: 0 }
+svg, div { display: inline-block; width: 700px; height: 200px }
+div { font: 16px sans-serif; position: relative; margin-left: -700px; vertical-align: 100px }
+div { text-align: left }
+span { position: relative; left: 100px }
+</style>
+<body>
+<svg></svg><div><span>אבגabc</span></div>
+<script>
+ var span = document.getElementsByTagName("span")[0];
+ var range = document.createRange();
+ range.setStart(span.firstChild, 1);
+ range.setEnd(span.firstChild, 5);
+ window.getSelection().addRange(range);
+</script>
diff --git a/layout/reftests/svg/text/simple-bidi-selection.svg b/layout/reftests/svg/text/simple-bidi-selection.svg
new file mode 100644
index 0000000000..da336d89c8
--- /dev/null
+++ b/layout/reftests/svg/text/simple-bidi-selection.svg
@@ -0,0 +1,16 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text>אבגabc</text>
+ </g>
+ <script>
+ var text = document.getElementsByTagName("text")[0];
+ var range = document.createRange();
+ range.setStart(text.firstChild, 1);
+ range.setEnd(text.firstChild, 5);
+ window.getSelection().addRange(range);
+ </script>
+</svg>
diff --git a/layout/reftests/svg/text/simple-bidi.svg b/layout/reftests/svg/text/simple-bidi.svg
new file mode 100644
index 0000000000..a2cedaf927
--- /dev/null
+++ b/layout/reftests/svg/text/simple-bidi.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text>אבגabc</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/simple-dx-2-ref.svg b/layout/reftests/svg/text/simple-dx-2-ref.svg
new file mode 100644
index 0000000000..871e5418d9
--- /dev/null
+++ b/layout/reftests/svg/text/simple-dx-2-ref.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(0,100)" style="font: 16px sans-serif">
+ <text x="100">hello</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/simple-dx-2.svg b/layout/reftests/svg/text/simple-dx-2.svg
new file mode 100644
index 0000000000..4cdc5d0965
--- /dev/null
+++ b/layout/reftests/svg/text/simple-dx-2.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(0,100)" style="font: 16px sans-serif">
+ <text x="50" dx="50">hello</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/simple-dx-anchor-end-bidi-ref.svg b/layout/reftests/svg/text/simple-dx-anchor-end-bidi-ref.svg
new file mode 100644
index 0000000000..430fb8f11d
--- /dev/null
+++ b/layout/reftests/svg/text/simple-dx-anchor-end-bidi-ref.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x="100" text-anchor="end">אבגabc</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/simple-dx-anchor-end-bidi.svg b/layout/reftests/svg/text/simple-dx-anchor-end-bidi.svg
new file mode 100644
index 0000000000..24b3b2362e
--- /dev/null
+++ b/layout/reftests/svg/text/simple-dx-anchor-end-bidi.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x="50" dx="50" text-anchor="end">אבגabc</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/simple-dx-anchor-end-ref.svg b/layout/reftests/svg/text/simple-dx-anchor-end-ref.svg
new file mode 100644
index 0000000000..bd97d05b32
--- /dev/null
+++ b/layout/reftests/svg/text/simple-dx-anchor-end-ref.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x="100" text-anchor="end">hello</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/simple-dx-anchor-end-rtl-ref.svg b/layout/reftests/svg/text/simple-dx-anchor-end-rtl-ref.svg
new file mode 100644
index 0000000000..66b0f9c2ae
--- /dev/null
+++ b/layout/reftests/svg/text/simple-dx-anchor-end-rtl-ref.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x='200' direction='rtl' text-anchor='end'>אבגדה</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/simple-dx-anchor-end-rtl.svg b/layout/reftests/svg/text/simple-dx-anchor-end-rtl.svg
new file mode 100644
index 0000000000..7f8a221b8e
--- /dev/null
+++ b/layout/reftests/svg/text/simple-dx-anchor-end-rtl.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x='100' dx='100' direction='rtl' text-anchor='end'>אבגדה</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/simple-dx-anchor-end.svg b/layout/reftests/svg/text/simple-dx-anchor-end.svg
new file mode 100644
index 0000000000..186a69e18d
--- /dev/null
+++ b/layout/reftests/svg/text/simple-dx-anchor-end.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x="50" dx="50" text-anchor="end">hello</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/simple-dx-anchor-middle-bidi-ref.svg b/layout/reftests/svg/text/simple-dx-anchor-middle-bidi-ref.svg
new file mode 100644
index 0000000000..cf1db5d6c3
--- /dev/null
+++ b/layout/reftests/svg/text/simple-dx-anchor-middle-bidi-ref.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x="100" text-anchor="middle">אבגabc</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/simple-dx-anchor-middle-bidi.svg b/layout/reftests/svg/text/simple-dx-anchor-middle-bidi.svg
new file mode 100644
index 0000000000..7d928bbd0e
--- /dev/null
+++ b/layout/reftests/svg/text/simple-dx-anchor-middle-bidi.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x="50" dx="50" text-anchor="middle">אבגabc</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/simple-dx-anchor-middle-ref.svg b/layout/reftests/svg/text/simple-dx-anchor-middle-ref.svg
new file mode 100644
index 0000000000..93f3ed5538
--- /dev/null
+++ b/layout/reftests/svg/text/simple-dx-anchor-middle-ref.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x="100" text-anchor="middle">hello</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/simple-dx-anchor-middle-rtl-ref.svg b/layout/reftests/svg/text/simple-dx-anchor-middle-rtl-ref.svg
new file mode 100644
index 0000000000..ce1adc9852
--- /dev/null
+++ b/layout/reftests/svg/text/simple-dx-anchor-middle-rtl-ref.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x='200' direction='rtl' text-anchor='middle'>אבגדה</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/simple-dx-anchor-middle-rtl.svg b/layout/reftests/svg/text/simple-dx-anchor-middle-rtl.svg
new file mode 100644
index 0000000000..4a5e1a0128
--- /dev/null
+++ b/layout/reftests/svg/text/simple-dx-anchor-middle-rtl.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x='100' dx='100' direction='rtl' text-anchor='middle'>אבגדה</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/simple-dx-anchor-middle.svg b/layout/reftests/svg/text/simple-dx-anchor-middle.svg
new file mode 100644
index 0000000000..68d9888e7f
--- /dev/null
+++ b/layout/reftests/svg/text/simple-dx-anchor-middle.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x="50" dx="50" text-anchor="middle">hello</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/simple-dx-bidi-2-ref.svg b/layout/reftests/svg/text/simple-dx-bidi-2-ref.svg
new file mode 100644
index 0000000000..2097b40d0b
--- /dev/null
+++ b/layout/reftests/svg/text/simple-dx-bidi-2-ref.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(0,100)" style="font: 16px sans-serif">
+ <text x="100">אבגabc</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/simple-dx-bidi-2.svg b/layout/reftests/svg/text/simple-dx-bidi-2.svg
new file mode 100644
index 0000000000..c210041822
--- /dev/null
+++ b/layout/reftests/svg/text/simple-dx-bidi-2.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(0,100)" style="font: 16px sans-serif">
+ <text x="50" dx="50">אבגabc</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/simple-dx-bidi-ref.svg b/layout/reftests/svg/text/simple-dx-bidi-ref.svg
new file mode 100644
index 0000000000..a2cedaf927
--- /dev/null
+++ b/layout/reftests/svg/text/simple-dx-bidi-ref.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text>אבגabc</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/simple-dx-bidi.svg b/layout/reftests/svg/text/simple-dx-bidi.svg
new file mode 100644
index 0000000000..0e56b92553
--- /dev/null
+++ b/layout/reftests/svg/text/simple-dx-bidi.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(0,100)" style="font: 16px sans-serif">
+ <text dx='100'>אבגabc</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/simple-dx-rtl-2-ref.svg b/layout/reftests/svg/text/simple-dx-rtl-2-ref.svg
new file mode 100644
index 0000000000..725a8901fb
--- /dev/null
+++ b/layout/reftests/svg/text/simple-dx-rtl-2-ref.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(0,100)" style="font: 16px sans-serif">
+ <text direction='rtl' x='100'>אבגדה</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/simple-dx-rtl-2.svg b/layout/reftests/svg/text/simple-dx-rtl-2.svg
new file mode 100644
index 0000000000..55aede4edf
--- /dev/null
+++ b/layout/reftests/svg/text/simple-dx-rtl-2.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(50,100)" style="font: 16px sans-serif">
+ <text direction='rtl' x='25' dx='25'>אבגדה</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/simple-dx-rtl-ref.svg b/layout/reftests/svg/text/simple-dx-rtl-ref.svg
new file mode 100644
index 0000000000..cdce9d87ad
--- /dev/null
+++ b/layout/reftests/svg/text/simple-dx-rtl-ref.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text direction='rtl'>אבגדה</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/simple-dx-rtl.svg b/layout/reftests/svg/text/simple-dx-rtl.svg
new file mode 100644
index 0000000000..878614a95b
--- /dev/null
+++ b/layout/reftests/svg/text/simple-dx-rtl.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(50,100)" style="font: 16px sans-serif">
+ <text dx="50" direction='rtl'>אבגדה</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/simple-dx.svg b/layout/reftests/svg/text/simple-dx.svg
new file mode 100644
index 0000000000..8ab0a152df
--- /dev/null
+++ b/layout/reftests/svg/text/simple-dx.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(0,100)" style="font: 16px sans-serif">
+ <text dx="100">hello</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/simple-fill-color-dynamic-ref.svg b/layout/reftests/svg/text/simple-fill-color-dynamic-ref.svg
new file mode 100644
index 0000000000..195e0a22a0
--- /dev/null
+++ b/layout/reftests/svg/text/simple-fill-color-dynamic-ref.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif; fill: green">
+ <text>hello</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/simple-fill-color-dynamic.svg b/layout/reftests/svg/text/simple-fill-color-dynamic.svg
new file mode 100644
index 0000000000..2846216da7
--- /dev/null
+++ b/layout/reftests/svg/text/simple-fill-color-dynamic.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" width="700" height="200" viewBox="0 0 700 200" class="reftest-wait">
+ <g transform="translate(100,100)" style="font: 16px sans-serif; fill: red">
+ <text>hello</text>
+ </g>
+ <script>
+ function when(type, f) {
+ var g = function(evt) {
+ window.removeEventListener(type, g, false);
+ f(evt);
+ };
+ window.addEventListener(type, g, false);
+ }
+
+ when("MozReftestInvalidate", function() {
+ document.getElementsByTagName("g")[0].style.fill = "green";
+ when("MozAfterPaint", function() {
+ document.documentElement.removeAttribute("class");
+ });
+ });
+ </script>
+</svg>
diff --git a/layout/reftests/svg/text/simple-fill-color-ref.html b/layout/reftests/svg/text/simple-fill-color-ref.html
new file mode 100644
index 0000000000..3f72aabfde
--- /dev/null
+++ b/layout/reftests/svg/text/simple-fill-color-ref.html
@@ -0,0 +1,14 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<style>
+html, body { margin: 0 }
+svg, div { display: inline-block; width: 700px; height: 200px }
+div { font: 16px sans-serif; margin-left: -700px; vertical-align: 100px }
+span { margin-left: 100px; color: green }
+</style>
+<body>
+ <svg></svg><div><span>hello</span></div>
+</body>
diff --git a/layout/reftests/svg/text/simple-fill-color-selection-ref.html b/layout/reftests/svg/text/simple-fill-color-selection-ref.html
new file mode 100644
index 0000000000..9e43d703ea
--- /dev/null
+++ b/layout/reftests/svg/text/simple-fill-color-selection-ref.html
@@ -0,0 +1,21 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<style>
+html, body { margin: 0 }
+svg, div { display: inline-block; width: 700px; height: 200px }
+div { font: 16px sans-serif; margin-left: -700px; vertical-align: 100px }
+span { margin-left: 100px; color: green }
+</style>
+<body>
+ <svg></svg><div><span>hello</span></div>
+ <script>
+ var span = document.getElementsByTagName("span")[0];
+ var range = document.createRange();
+ range.setStart(span.firstChild, 1);
+ range.setEnd(span.firstChild, 4);
+ window.getSelection().addRange(range);
+ </script>
+</body>
diff --git a/layout/reftests/svg/text/simple-fill-color-selection.svg b/layout/reftests/svg/text/simple-fill-color-selection.svg
new file mode 100644
index 0000000000..810343af64
--- /dev/null
+++ b/layout/reftests/svg/text/simple-fill-color-selection.svg
@@ -0,0 +1,16 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif; fill: green">
+ <text>hello</text>
+ </g>
+ <script>
+ var text = document.getElementsByTagName("text")[0];
+ var range = document.createRange();
+ range.setStart(text.firstChild, 1);
+ range.setEnd(text.firstChild, 4);
+ window.getSelection().addRange(range);
+ </script>
+</svg>
diff --git a/layout/reftests/svg/text/simple-fill-color.svg b/layout/reftests/svg/text/simple-fill-color.svg
new file mode 100644
index 0000000000..195e0a22a0
--- /dev/null
+++ b/layout/reftests/svg/text/simple-fill-color.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif; fill: green">
+ <text>hello</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/simple-fill-gradient-ref.svg b/layout/reftests/svg/text/simple-fill-gradient-ref.svg
new file mode 100644
index 0000000000..b0d625f70c
--- /dev/null
+++ b/layout/reftests/svg/text/simple-fill-gradient-ref.svg
@@ -0,0 +1,14 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <linearGradient id="g" gradientUnits="userSpaceOnUse" x1="0" y1="-13" x2="0" y2="3">
+ <stop offset="0" stop-color="red"/>
+ <stop offset="1" stop-color="yellow"/>
+ </linearGradient>
+ <g transform="translate(100,100)">
+ <rect x="0" y="-13" width="16" height="16" fill="url(#g)"/>
+ <rect x="0" y="-13" width="16" height="16" stroke="black" stroke-width="2" fill="none"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/simple-fill-gradient.svg b/layout/reftests/svg/text/simple-fill-gradient.svg
new file mode 100644
index 0000000000..74ec4507aa
--- /dev/null
+++ b/layout/reftests/svg/text/simple-fill-gradient.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" width="700" height="200" viewBox="0 0 700 200">
+ <style>
+ @font-face {
+ font-family: Ahem;
+ src: url(../../fonts/Ahem.ttf);
+ }
+ </style>
+ <linearGradient id="g" gradientUnits="userSpaceOnUse" x1="0" y1="-13" x2="0" y2="3">
+ <stop offset="0" stop-color="red"/>
+ <stop offset="1" stop-color="yellow"/>
+ </linearGradient>
+ <g transform="translate(100,100)" style="font: 16px Ahem">
+ <text fill="url(#g)">a</text>
+ <rect x="0" y="-13" width="16" height="16" stroke="black" stroke-width="2" fill="none"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/simple-fill-none.svg b/layout/reftests/svg/text/simple-fill-none.svg
new file mode 100644
index 0000000000..20b1987d39
--- /dev/null
+++ b/layout/reftests/svg/text/simple-fill-none.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text>hello<tspan fill="none">ooo</tspan></text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/simple-letter-spacing-ref.svg b/layout/reftests/svg/text/simple-letter-spacing-ref.svg
new file mode 100644
index 0000000000..062e2f7281
--- /dev/null
+++ b/layout/reftests/svg/text/simple-letter-spacing-ref.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(0,100)" style="font: 16px sans-serif">
+ <text x="100" dx="0 20 20 20 20">hello</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/simple-letter-spacing.svg b/layout/reftests/svg/text/simple-letter-spacing.svg
new file mode 100644
index 0000000000..9f17ff188f
--- /dev/null
+++ b/layout/reftests/svg/text/simple-letter-spacing.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(0,100)" style="font: 16px sans-serif; letter-spacing: 20px;">
+ <text x="100">hello</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/simple-multiline-anchor-end-ref.svg b/layout/reftests/svg/text/simple-multiline-anchor-end-ref.svg
new file mode 100644
index 0000000000..ac6bea46f5
--- /dev/null
+++ b/layout/reftests/svg/text/simple-multiline-anchor-end-ref.svg
@@ -0,0 +1,12 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <g text-anchor="end">
+ <text x="100">Hello.</text>
+ <text x="100" y="20">Goodbye.</text>
+ </g>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/simple-multiline-anchor-end.svg b/layout/reftests/svg/text/simple-multiline-anchor-end.svg
new file mode 100644
index 0000000000..667e5411dd
--- /dev/null
+++ b/layout/reftests/svg/text/simple-multiline-anchor-end.svg
@@ -0,0 +1,10 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x="100" text-anchor="end" style="white-space: pre-line; line-height: 20px">Hello.
+Goodbye.</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/simple-multiline-number-ref.svg b/layout/reftests/svg/text/simple-multiline-number-ref.svg
new file mode 100644
index 0000000000..58a786fa6e
--- /dev/null
+++ b/layout/reftests/svg/text/simple-multiline-number-ref.svg
@@ -0,0 +1,10 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text>Hello.</text>
+ <text y="20">Goodbye.</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/simple-multiline-number.svg b/layout/reftests/svg/text/simple-multiline-number.svg
new file mode 100644
index 0000000000..4073169416
--- /dev/null
+++ b/layout/reftests/svg/text/simple-multiline-number.svg
@@ -0,0 +1,10 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text style="white-space: pre-line; line-height: 1.25">Hello.
+Goodbye.</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/simple-multiline-pc-ref.svg b/layout/reftests/svg/text/simple-multiline-pc-ref.svg
new file mode 100644
index 0000000000..58a786fa6e
--- /dev/null
+++ b/layout/reftests/svg/text/simple-multiline-pc-ref.svg
@@ -0,0 +1,10 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text>Hello.</text>
+ <text y="20">Goodbye.</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/simple-multiline-pc.svg b/layout/reftests/svg/text/simple-multiline-pc.svg
new file mode 100644
index 0000000000..12f96c3d3c
--- /dev/null
+++ b/layout/reftests/svg/text/simple-multiline-pc.svg
@@ -0,0 +1,10 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text style="white-space: pre-line; line-height: 125%">Hello.
+Goodbye.</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/simple-multiline-ref.svg b/layout/reftests/svg/text/simple-multiline-ref.svg
new file mode 100644
index 0000000000..58a786fa6e
--- /dev/null
+++ b/layout/reftests/svg/text/simple-multiline-ref.svg
@@ -0,0 +1,10 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text>Hello.</text>
+ <text y="20">Goodbye.</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/simple-multiline.svg b/layout/reftests/svg/text/simple-multiline.svg
new file mode 100644
index 0000000000..12beaff511
--- /dev/null
+++ b/layout/reftests/svg/text/simple-multiline.svg
@@ -0,0 +1,10 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text style="white-space: pre-line; line-height: 20px">Hello.
+Goodbye.</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/simple-multiple-dx-2.svg b/layout/reftests/svg/text/simple-multiple-dx-2.svg
new file mode 100644
index 0000000000..12802190c7
--- /dev/null
+++ b/layout/reftests/svg/text/simple-multiple-dx-2.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(0,100)" style="font: 16px sans-serif">
+ <text x="50" dx="60 20 30">hello</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/simple-multiple-dx-anchor-end-bidi-ref.svg b/layout/reftests/svg/text/simple-multiple-dx-anchor-end-bidi-ref.svg
new file mode 100644
index 0000000000..9ba587826d
--- /dev/null
+++ b/layout/reftests/svg/text/simple-multiple-dx-anchor-end-bidi-ref.svg
@@ -0,0 +1,11 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x="100" text-anchor="end"><tspan visibility="hidden">אב</tspan>גabc</text>
+ <text x="50" text-anchor="end"><tspan visibility="hidden">א</tspan>ב<tspan visibility="hidden">גabc</tspan></text>
+ <text x="20" text-anchor="end">א<tspan visibility="hidden">בגabc</tspan></text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/simple-multiple-dx-anchor-end-bidi.svg b/layout/reftests/svg/text/simple-multiple-dx-anchor-end-bidi.svg
new file mode 100644
index 0000000000..10758b48a6
--- /dev/null
+++ b/layout/reftests/svg/text/simple-multiple-dx-anchor-end-bidi.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x="90" dx="10 30 50" text-anchor="end">אבגabc</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/simple-multiple-dx-anchor-end-ref.svg b/layout/reftests/svg/text/simple-multiple-dx-anchor-end-ref.svg
new file mode 100644
index 0000000000..8725cd4ad4
--- /dev/null
+++ b/layout/reftests/svg/text/simple-multiple-dx-anchor-end-ref.svg
@@ -0,0 +1,11 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x="110" text-anchor="end">llo</text>
+ <text x="80" text-anchor="end"><tspan visibility="hidden">h</tspan>e<tspan visibility="hidden">llo</tspan></text>
+ <text x="60" text-anchor="end">h<tspan visibility="hidden">ello</tspan></text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/simple-multiple-dx-anchor-end-rtl-ref.svg b/layout/reftests/svg/text/simple-multiple-dx-anchor-end-rtl-ref.svg
new file mode 100644
index 0000000000..24fe83db65
--- /dev/null
+++ b/layout/reftests/svg/text/simple-multiple-dx-anchor-end-rtl-ref.svg
@@ -0,0 +1,11 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x="110" text-anchor="end" direction="rtl">גדה</text>
+ <text x="140" text-anchor="end" direction="rtl">ב<tspan visibility="hidden">גדה</tspan></text>
+ <text x="160" text-anchor="end" direction="rtl">א<tspan visibility="hidden">בגדה</tspan></text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/simple-multiple-dx-anchor-end-rtl.svg b/layout/reftests/svg/text/simple-multiple-dx-anchor-end-rtl.svg
new file mode 100644
index 0000000000..d11ab10e06
--- /dev/null
+++ b/layout/reftests/svg/text/simple-multiple-dx-anchor-end-rtl.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x='100' dx='10 -20 -30' direction='rtl' text-anchor='end'>אבגדה</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/simple-multiple-dx-anchor-end.svg b/layout/reftests/svg/text/simple-multiple-dx-anchor-end.svg
new file mode 100644
index 0000000000..34e0bdf535
--- /dev/null
+++ b/layout/reftests/svg/text/simple-multiple-dx-anchor-end.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x="100" dx="10 20 30" text-anchor="end">hello</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/simple-multiple-dx-anchor-middle-bidi-ref.svg b/layout/reftests/svg/text/simple-multiple-dx-anchor-middle-bidi-ref.svg
new file mode 100644
index 0000000000..9ed3955c54
--- /dev/null
+++ b/layout/reftests/svg/text/simple-multiple-dx-anchor-middle-bidi-ref.svg
@@ -0,0 +1,15 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <style>
+ @font-face {
+ font-family: Ahem;
+ src: url(../../fonts/Ahem.ttf);
+ }
+ </style>
+ <g transform="translate(100,100)" style="font: 16px Ahem">
+ <text x="214" fill="blue"><tspan direction="rtl" unicode-bidi="bidi-override" fill="red">x y z</tspan><tspan visibility="hidden">ww</tspan>a b<tspan visibility="hidden">w</tspan> c</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/simple-multiple-dx-anchor-middle-bidi.svg b/layout/reftests/svg/text/simple-multiple-dx-anchor-middle-bidi.svg
new file mode 100644
index 0000000000..20eef41cf8
--- /dev/null
+++ b/layout/reftests/svg/text/simple-multiple-dx-anchor-middle-bidi.svg
@@ -0,0 +1,15 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <style>
+ @font-face {
+ font-family: Ahem;
+ src: url(../../fonts/Ahem.ttf);
+ }
+ </style>
+ <g transform="translate(100,100)" style="font: 16px Ahem">
+ <text x="110" dx="0 0 0 0 0 32 0 0 16" text-anchor="middle" fill="blue"><tspan direction="rtl" unicode-bidi="bidi-override" fill="red">x y z</tspan>a b c</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/simple-multiple-dx-anchor-middle-ref.svg b/layout/reftests/svg/text/simple-multiple-dx-anchor-middle-ref.svg
new file mode 100644
index 0000000000..96443ddc25
--- /dev/null
+++ b/layout/reftests/svg/text/simple-multiple-dx-anchor-middle-ref.svg
@@ -0,0 +1,15 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <style>
+ @font-face {
+ font-family: Ahem;
+ src: url(../../fonts/Ahem.ttf);
+ }
+ </style>
+ <g transform="translate(100,100)" style="font: 16px Ahem">
+ <text x="12"><tspan visibility="hidden">w</tspan><tspan fill="green">h</tspan><tspan visibility="hidden">w</tspan> e <tspan visibility="hidden">w</tspan>l l o</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/simple-multiple-dx-anchor-middle-rtl-ref.svg b/layout/reftests/svg/text/simple-multiple-dx-anchor-middle-rtl-ref.svg
new file mode 100644
index 0000000000..740e21fa34
--- /dev/null
+++ b/layout/reftests/svg/text/simple-multiple-dx-anchor-middle-rtl-ref.svg
@@ -0,0 +1,15 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <style>
+ @font-face {
+ font-family: Ahem;
+ src: url(../../fonts/Ahem.ttf);
+ }
+ </style>
+ <g transform="translate(100,100)" style="font: 16px Ahem">
+ <text x="280"><tspan direction="rtl" unicode-bidi="bidi-override"><tspan fill="green">a</tspan><tspan visibility="hidden">ww</tspan>b c d e</tspan></text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/simple-multiple-dx-anchor-middle-rtl.svg b/layout/reftests/svg/text/simple-multiple-dx-anchor-middle-rtl.svg
new file mode 100644
index 0000000000..414bf0fa1d
--- /dev/null
+++ b/layout/reftests/svg/text/simple-multiple-dx-anchor-middle-rtl.svg
@@ -0,0 +1,15 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <style>
+ @font-face {
+ font-family: Ahem;
+ src: url(../../fonts/Ahem.ttf);
+ }
+ </style>
+ <g transform="translate(100,100)" style="font: 16px Ahem">
+ <text x='200' dx='0 0 -16' direction='rtl' text-anchor='middle'><tspan direction='rtl' unicode-bidi='bidi-override'><tspan fill="green">a</tspan> b c d e</tspan></text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/simple-multiple-dx-anchor-middle.svg b/layout/reftests/svg/text/simple-multiple-dx-anchor-middle.svg
new file mode 100644
index 0000000000..392f4e35eb
--- /dev/null
+++ b/layout/reftests/svg/text/simple-multiple-dx-anchor-middle.svg
@@ -0,0 +1,15 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <style>
+ @font-face {
+ font-family: Ahem;
+ src: url(../../fonts/Ahem.ttf);
+ }
+ </style>
+ <g transform="translate(100,100)" style="font: 16px Ahem">
+ <text x="100" dx="16 0 16 0 16" text-anchor="middle"><tspan fill="green">h</tspan> e l l o</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/simple-multiple-dx-bidi-2.svg b/layout/reftests/svg/text/simple-multiple-dx-bidi-2.svg
new file mode 100644
index 0000000000..7f29cad1ef
--- /dev/null
+++ b/layout/reftests/svg/text/simple-multiple-dx-bidi-2.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x="110" dx="0 -30 -100">אבגabc</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/simple-multiple-dx-bidi-ref.svg b/layout/reftests/svg/text/simple-multiple-dx-bidi-ref.svg
new file mode 100644
index 0000000000..a1748dcb64
--- /dev/null
+++ b/layout/reftests/svg/text/simple-multiple-dx-bidi-ref.svg
@@ -0,0 +1,11 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x='110'><tspan visibility="hidden">אב</tspan>גabc</text>
+ <text x='210'><tspan visibility="hidden">א</tspan>ב<tspan visibility="hidden">גabc</tspan></text>
+ <text x='240'>א<tspan visibility="hidden">בגabc</tspan></text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/simple-multiple-dx-bidi.svg b/layout/reftests/svg/text/simple-multiple-dx-bidi.svg
new file mode 100644
index 0000000000..7dfc20f838
--- /dev/null
+++ b/layout/reftests/svg/text/simple-multiple-dx-bidi.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x="110" dx='0 -30 -100'>אבגabc</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/simple-multiple-dx-ref.html b/layout/reftests/svg/text/simple-multiple-dx-ref.html
new file mode 100644
index 0000000000..53b20148a9
--- /dev/null
+++ b/layout/reftests/svg/text/simple-multiple-dx-ref.html
@@ -0,0 +1,14 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<style>
+html, body { margin: 0 }
+svg, div { display: inline-block; width: 700px; height: 200px }
+div { font: 16px sans-serif; margin-left: -700px; vertical-align: 100px }
+div > span { margin-left: 110px }
+</style>
+<body>
+ <svg></svg><div><span>h<span style="padding-left: 20px"></span>e<span style="padding-left: 30px"></span>llo</span></div>
+</body>
diff --git a/layout/reftests/svg/text/simple-multiple-dx-rtl-2.svg b/layout/reftests/svg/text/simple-multiple-dx-rtl-2.svg
new file mode 100644
index 0000000000..cca2629c0d
--- /dev/null
+++ b/layout/reftests/svg/text/simple-multiple-dx-rtl-2.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text direction='rtl' x='100' dx='10 -20 -30'>אבגדה</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/simple-multiple-dx-rtl-ref.svg b/layout/reftests/svg/text/simple-multiple-dx-rtl-ref.svg
new file mode 100644
index 0000000000..41eb27b8d7
--- /dev/null
+++ b/layout/reftests/svg/text/simple-multiple-dx-rtl-ref.svg
@@ -0,0 +1,11 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text x="110" direction='rtl'>א</text>
+ <text x="90" direction='rtl'><tspan visibility="hidden">א</tspan>ב</text>
+ <text x="60" direction='rtl'><tspan visibility="hidden">אב</tspan>גדה</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/simple-multiple-dx-rtl.svg b/layout/reftests/svg/text/simple-multiple-dx-rtl.svg
new file mode 100644
index 0000000000..16632b13da
--- /dev/null
+++ b/layout/reftests/svg/text/simple-multiple-dx-rtl.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text dx="110 -20 -30" direction='rtl'>אבגדה</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/simple-multiple-dx.svg b/layout/reftests/svg/text/simple-multiple-dx.svg
new file mode 100644
index 0000000000..883e088180
--- /dev/null
+++ b/layout/reftests/svg/text/simple-multiple-dx.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text dx="10 20 30">hello</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/simple-pointer-events.svg b/layout/reftests/svg/text/simple-pointer-events.svg
new file mode 100644
index 0000000000..6c572418bb
--- /dev/null
+++ b/layout/reftests/svg/text/simple-pointer-events.svg
@@ -0,0 +1,7 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+ <text x="100" y="100" style="font: 16px sans-serif; pointer-events: none">hello</text>
+</svg>
diff --git a/layout/reftests/svg/text/simple-ref.html b/layout/reftests/svg/text/simple-ref.html
new file mode 100644
index 0000000000..410cd19bf2
--- /dev/null
+++ b/layout/reftests/svg/text/simple-ref.html
@@ -0,0 +1,14 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<style>
+html, body { margin: 0 }
+svg, div { display: inline-block; width: 700px; height: 200px }
+div { font: 16px sans-serif; margin-left: -700px; vertical-align: 100px }
+span { margin-left: 100px }
+</style>
+<body>
+ <svg></svg><div><span>hello</span></div>
+</body>
diff --git a/layout/reftests/svg/text/simple-rtl-2.svg b/layout/reftests/svg/text/simple-rtl-2.svg
new file mode 100644
index 0000000000..725a8901fb
--- /dev/null
+++ b/layout/reftests/svg/text/simple-rtl-2.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(0,100)" style="font: 16px sans-serif">
+ <text direction='rtl' x='100'>אבגדה</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/simple-rtl-ref.html b/layout/reftests/svg/text/simple-rtl-ref.html
new file mode 100644
index 0000000000..a82eb1e7e4
--- /dev/null
+++ b/layout/reftests/svg/text/simple-rtl-ref.html
@@ -0,0 +1,15 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<meta charset=UTF-8>
+<style>
+html, body { margin: 0 }
+svg, div { display: inline-block; width: 700px; height: 200px }
+div { font: 16px sans-serif; position: relative; margin-left: -700px; vertical-align: 100px }
+div { text-align: right; width: 200px }
+span { position: relative; right: 100px }
+</style>
+<body>
+<svg></svg><div><span>אבגדה</span></div>
diff --git a/layout/reftests/svg/text/simple-rtl.svg b/layout/reftests/svg/text/simple-rtl.svg
new file mode 100644
index 0000000000..cdce9d87ad
--- /dev/null
+++ b/layout/reftests/svg/text/simple-rtl.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text direction='rtl'>אבגדה</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/simple-selection-ref.html b/layout/reftests/svg/text/simple-selection-ref.html
new file mode 100644
index 0000000000..45ee3cfec9
--- /dev/null
+++ b/layout/reftests/svg/text/simple-selection-ref.html
@@ -0,0 +1,21 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<style>
+html, body { margin: 0 }
+svg, div { display: inline-block; width: 700px; height: 200px }
+div { font: 16px sans-serif; margin-left: -700px; vertical-align: 100px }
+span { margin-left: 100px }
+</style>
+<body>
+ <svg></svg><div><span>hello</span></div>
+ <script>
+ var span = document.getElementsByTagName("span")[0];
+ var range = document.createRange();
+ range.setStart(span.firstChild, 1);
+ range.setEnd(span.firstChild, 4);
+ window.getSelection().addRange(range);
+ </script>
+</body>
diff --git a/layout/reftests/svg/text/simple-selection.svg b/layout/reftests/svg/text/simple-selection.svg
new file mode 100644
index 0000000000..227f587a74
--- /dev/null
+++ b/layout/reftests/svg/text/simple-selection.svg
@@ -0,0 +1,16 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text>hello</text>
+ </g>
+ <script>
+ var text = document.getElementsByTagName("text")[0];
+ var range = document.createRange();
+ range.setStart(text.firstChild, 1);
+ range.setEnd(text.firstChild, 4);
+ window.getSelection().addRange(range);
+ </script>
+</svg>
diff --git a/layout/reftests/svg/text/simple-transform-rotate-ref.svg b/layout/reftests/svg/text/simple-transform-rotate-ref.svg
new file mode 100644
index 0000000000..40439005ad
--- /dev/null
+++ b/layout/reftests/svg/text/simple-transform-rotate-ref.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" width="700" height="200" viewBox="0 0 700 200">
+ <style>
+ @font-face {
+ font-family: Ahem;
+ src: url(../../fonts/Ahem.ttf);
+ }
+ </style>
+ <text x="100" y="100" rotate="45" style="font: 32px Ahem">a</text>
+</svg>
diff --git a/layout/reftests/svg/text/simple-transform-rotate.svg b/layout/reftests/svg/text/simple-transform-rotate.svg
new file mode 100644
index 0000000000..18dd8f5479
--- /dev/null
+++ b/layout/reftests/svg/text/simple-transform-rotate.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" width="700" height="200" viewBox="0 0 700 200">
+ <style>
+ @font-face {
+ font-family: Ahem;
+ src: url(../../fonts/Ahem.ttf);
+ }
+ </style>
+ <text transform="translate(100,100)rotate(45)" style="font: 32px Ahem">a</text>
+</svg>
diff --git a/layout/reftests/svg/text/simple-underline-ref.html b/layout/reftests/svg/text/simple-underline-ref.html
new file mode 100644
index 0000000000..b7a63e6bb5
--- /dev/null
+++ b/layout/reftests/svg/text/simple-underline-ref.html
@@ -0,0 +1,14 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<style>
+html, body { margin: 0 }
+svg, div { display: inline-block; width: 700px; height: 200px }
+div { font: 16px sans-serif; text-decoration: underline; margin-left: -700px; vertical-align: 100px }
+span { margin-left: 100px; }
+</style>
+<body>
+ <svg></svg><div><span>hello</span></div>
+</body>
diff --git a/layout/reftests/svg/text/simple-underline-scaled-ref.svg b/layout/reftests/svg/text/simple-underline-scaled-ref.svg
new file mode 100644
index 0000000000..3c7b0688b7
--- /dev/null
+++ b/layout/reftests/svg/text/simple-underline-scaled-ref.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <text x="20" y="100" style="font: 64px sans-serif; text-decoration: underline">Hello</text>
+</svg>
diff --git a/layout/reftests/svg/text/simple-underline-scaled.svg b/layout/reftests/svg/text/simple-underline-scaled.svg
new file mode 100644
index 0000000000..61f808faff
--- /dev/null
+++ b/layout/reftests/svg/text/simple-underline-scaled.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <text x="10" y="50" style="font: 32px sans-serif; text-decoration: underline" transform="scale(2)">Hello</text>
+</svg>
diff --git a/layout/reftests/svg/text/simple-underline-selection-ref.html b/layout/reftests/svg/text/simple-underline-selection-ref.html
new file mode 100644
index 0000000000..b754ae0e8a
--- /dev/null
+++ b/layout/reftests/svg/text/simple-underline-selection-ref.html
@@ -0,0 +1,21 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<style>
+html, body { margin: 0 }
+svg, div { display: inline-block; width: 700px; height: 200px }
+div { font: 16px sans-serif; text-decoration: underline; margin-left: -700px; vertical-align: 100px }
+span { margin-left: 100px; }
+</style>
+<body>
+ <svg></svg><div><span>hello</span></div>
+ <script>
+ var span = document.getElementsByTagName("span")[0];
+ var range = document.createRange();
+ range.setStart(span.firstChild, 1);
+ range.setEnd(span.firstChild, 4);
+ window.getSelection().addRange(range);
+ </script>
+</body>
diff --git a/layout/reftests/svg/text/simple-underline-selection.svg b/layout/reftests/svg/text/simple-underline-selection.svg
new file mode 100644
index 0000000000..a4f3e9b480
--- /dev/null
+++ b/layout/reftests/svg/text/simple-underline-selection.svg
@@ -0,0 +1,16 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif; text-decoration: underline">
+ <text>hello</text>
+ </g>
+ <script>
+ var text = document.getElementsByTagName("text")[0];
+ var range = document.createRange();
+ range.setStart(text.firstChild, 1);
+ range.setEnd(text.firstChild, 4);
+ window.getSelection().addRange(range);
+ </script>
+</svg>
diff --git a/layout/reftests/svg/text/simple-underline.svg b/layout/reftests/svg/text/simple-underline.svg
new file mode 100644
index 0000000000..9143963539
--- /dev/null
+++ b/layout/reftests/svg/text/simple-underline.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif; text-decoration: underline">
+ <text>hello</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/simple-word-spacing-ref.svg b/layout/reftests/svg/text/simple-word-spacing-ref.svg
new file mode 100644
index 0000000000..aec2f9890c
--- /dev/null
+++ b/layout/reftests/svg/text/simple-word-spacing-ref.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(0,100)" style="font: 16px sans-serif">
+ <text x="100">hello <tspan dx="20">there</tspan></text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/simple-word-spacing.svg b/layout/reftests/svg/text/simple-word-spacing.svg
new file mode 100644
index 0000000000..7ad1d5435d
--- /dev/null
+++ b/layout/reftests/svg/text/simple-word-spacing.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200">
+ <g transform="translate(0,100)" style="font: 16px sans-serif; word-spacing: 20px;">
+ <text x="100">hello there</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/simple.svg b/layout/reftests/svg/text/simple.svg
new file mode 100644
index 0000000000..228b0755db
--- /dev/null
+++ b/layout/reftests/svg/text/simple.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200">
+ <g transform="translate(100,100)" style="font: 16px sans-serif">
+ <text>hello</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/text-shadow-ref.svg b/layout/reftests/svg/text/text-shadow-ref.svg
new file mode 100644
index 0000000000..0fff19f144
--- /dev/null
+++ b/layout/reftests/svg/text/text-shadow-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">
+ <text x="33" y="33" fill="grey">Hello</text>
+ <text x="30" y="30" fill="green">Hello</text>
+</svg>
diff --git a/layout/reftests/svg/text/text-shadow.svg b/layout/reftests/svg/text/text-shadow.svg
new file mode 100644
index 0000000000..35875f51df
--- /dev/null
+++ b/layout/reftests/svg/text/text-shadow.svg
@@ -0,0 +1,7 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+ <text x="30" y="30" fill="green" style="text-shadow: grey 3px 3px;">Hello</text>
+</svg>
diff --git a/layout/reftests/svg/text/textLength-2-ref.svg b/layout/reftests/svg/text/textLength-2-ref.svg
new file mode 100644
index 0000000000..ac7b10cba9
--- /dev/null
+++ b/layout/reftests/svg/text/textLength-2-ref.svg
@@ -0,0 +1,40 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <style>
+ @font-face { font-family: Linux Libertine; src: url(../../fonts/LinLibertine_Re-4.7.5.woff); }
+ svg { font: 50px Linux Libertine; text-rendering: geometricPrecision; }
+ </style>
+ <!-- the unscaled width of the "123" is 66 -->
+ <g text-anchor="end" transform="translate(200,0)">
+ <g stroke="red">
+ <path d="M 0,40 h-66"/>
+ <path d="M 0,80 h-132"/>
+ <path d="M 0,120 h-132"/>
+ <path d="M 0,160 h-44"/>
+ <path d="M 0,200 h-44"/>
+ </g>
+
+ <g fill="aqua">
+ <text y="40">123</text>
+ <text x="-132" y="80" text-anchor="start">1</text>
+ <text x="-66" y="80" text-anchor="middle">2</text>
+ <text y="80">3</text>
+ <text transform="scale(2,1)" y="120">123</text>
+ <text x="-44" y="160" text-anchor="start">1</text>
+ <text x="-22" y="160" text-anchor="middle">2</text>
+ <text y="160">3</text>
+ <text transform="scale(0.6666666666,1)" y="200">123</text>
+ </g>
+
+ <g fill="none" stroke="black" stroke-width="2px">
+ <text y="40">123</text>
+ <text x="-132" y="80" text-anchor="start">1</text>
+ <text x="-66" y="80" text-anchor="middle">2</text>
+ <text y="80">3</text>
+ <text transform="scale(2,1)" y="120">123</text>
+ <text x="-44" y="160" text-anchor="start">1</text>
+ <text x="-22" y="160" text-anchor="middle">2</text>
+ <text y="160">3</text>
+ <text transform="scale(0.6666666666,1)" y="200">123</text>
+ </g>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/textLength-2.svg b/layout/reftests/svg/text/textLength-2.svg
new file mode 100644
index 0000000000..ad66e9fc1e
--- /dev/null
+++ b/layout/reftests/svg/text/textLength-2.svg
@@ -0,0 +1,36 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <style>
+ @font-face { font-family: Linux Libertine; src: url(../../fonts/LinLibertine_Re-4.7.5.woff); }
+ svg { font: 50px Linux Libertine; text-rendering: geometricPrecision; }
+ </style>
+ <!-- the unscaled width of the "123" is 66 -->
+ <g text-anchor="end" transform="translate(200,0)">
+ <g stroke="red">
+ <path d="M 0,40 h-66"/>
+ <path d="M 0,80 h-132"/>
+ <path d="M 0,120 h-132"/>
+ <path d="M 0,160 h-44"/>
+ <path d="M 0,200 h-44"/>
+ </g>
+
+ <g fill="aqua">
+ <text y="40">123</text>
+ <text y="80" textLength="132">123</text>
+ <text y="120" textLength="132" lengthAdjust="spacingAndGlyphs">123</text>
+ <text y="160" textLength="44">123</text>
+ <text y="200" textLength="44" lengthAdjust="spacingAndGlyphs">123</text>
+ </g>
+
+ <g fill="none" stroke="black" stroke-width="2px">
+ <text y="40">123</text>
+ <text x="-132" y="80" text-anchor="start">1</text>
+ <text x="-66" y="80" text-anchor="middle">2</text>
+ <text y="80">3</text>
+ <text transform="scale(2,1)" y="120">123</text>
+ <text x="-44" y="160" text-anchor="start">1</text>
+ <text x="-22" y="160" text-anchor="middle">2</text>
+ <text y="160">3</text>
+ <text transform="scale(0.6666666666,1)" y="200">123</text>
+ </g>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/textLength-3-ref.svg b/layout/reftests/svg/text/textLength-3-ref.svg
new file mode 100644
index 0000000000..a36feab1d9
--- /dev/null
+++ b/layout/reftests/svg/text/textLength-3-ref.svg
@@ -0,0 +1,43 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <style>
+ @font-face { font-family: Linux Libertine; src: url(../../fonts/LinLibertine_Re-4.7.5.woff); }
+ svg { font: 50px Linux Libertine; text-rendering: geometricPrecision; }
+ </style>
+ <linearGradient id="aqua">
+ <stop stop-color="aqua"/>
+ </linearGradient>
+ <!-- the unscaled width of the "123" is 66 -->
+ <g transform="translate(50,0)">
+ <g stroke="red">
+ <path id="p1" d="M 0,40 v 66" stroke="red"/>
+ <path id="p2" d="M 40,40 v 132" stroke="red"/>
+ <path id="p3" d="M 80,40 v 132" stroke="red"/>
+ <path id="p4" d="M 120,40 v 44" stroke="red"/>
+ <path id="p5" d="M 160,40 v 44" stroke="red"/>
+ </g>
+
+ <g fill="url(#aqua)">
+ <text transform="translate(40,40)rotate(90)" y="40">123</text>
+ <text transform="translate(80,40)rotate(90)" y="40">1</text>
+ <text transform="translate(80,40)rotate(90)" x="66" y="40" text-anchor="middle">2</text>
+ <text transform="translate(80,40)rotate(90)" x="132" y="40" text-anchor="end">3</text>
+ <text transform="translate(80,40)rotate(90)scale(2,1)">123</text>
+ <text transform="translate(120,40)rotate(90)">1</text>
+ <text transform="translate(120,40)rotate(90)" x="22" text-anchor="middle">2</text>
+ <text transform="translate(120,40)rotate(90)" x="44" text-anchor="end">3</text>
+ <text transform="translate(160,40)rotate(90)scale(0.66666666,1)">123</text>
+ </g>
+
+ <g fill="none" stroke="black" stroke-width="2px">
+ <text transform="translate(40,40)rotate(90)" y="40">123</text>
+ <text transform="translate(80,40)rotate(90)" y="40">1</text>
+ <text transform="translate(80,40)rotate(90)" x="66" y="40" text-anchor="middle">2</text>
+ <text transform="translate(80,40)rotate(90)" x="132" y="40" text-anchor="end">3</text>
+ <text transform="translate(80,40)rotate(90)scale(2,1)">123</text>
+ <text transform="translate(120,40)rotate(90)">1</text>
+ <text transform="translate(120,40)rotate(90)" x="22" text-anchor="middle">2</text>
+ <text transform="translate(120,40)rotate(90)" x="44" text-anchor="end">3</text>
+ <text transform="translate(160,40)rotate(90)scale(0.66666666,1)">123</text>
+ </g>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/textLength-3.svg b/layout/reftests/svg/text/textLength-3.svg
new file mode 100644
index 0000000000..b3b8d93da6
--- /dev/null
+++ b/layout/reftests/svg/text/textLength-3.svg
@@ -0,0 +1,40 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <style>
+ @font-face { font-family: Linux Libertine; src: url(../../fonts/LinLibertine_Re-4.7.5.woff); }
+ svg { font: 50px Linux Libertine; text-rendering: geometricPrecision; }
+ </style>
+ <linearGradient id="aqua">
+ <stop stop-color="aqua"/>
+ </linearGradient>
+ <!-- the unscaled width of the "123" is 66 -->
+ <g transform="translate(50,0)">
+ <g stroke="red">
+ <path id="p1" d="M 0,40 v 66"/>
+ <path id="p2" d="M 40,40 v 132"/>
+ <path id="p3" d="M 80,40 v 132"/>
+ <path id="p4" d="M 120,40 v 44"/>
+ <path id="p5" d="M 160,40 v 44"/>
+ </g>
+
+ <g fill="url(#aqua)">
+ <text><textPath xlink:href="#p1">123</textPath></text>
+ <text textLength="132"><textPath xlink:href="#p2">123</textPath></text>
+ <text id="t" textLength="132" lengthAdjust="spacingAndGlyphs"><textPath xlink:href="#p3">123</textPath></text>
+ <text textLength="44"><textPath xlink:href="#p4">123</textPath></text>
+ <text textLength="44" lengthAdjust="spacingAndGlyphs"><textPath xlink:href="#p5">123</textPath></text>
+ </g>
+
+ <g fill="none" stroke="black" stroke-width="2px">
+ <text transform="translate(40,40)rotate(90)" y="40">123</text>
+ <text transform="translate(80,40)rotate(90)" y="40">1</text>
+ <text transform="translate(80,40)rotate(90)" x="66" y="40" text-anchor="middle">2</text>
+ <text transform="translate(80,40)rotate(90)" x="132" y="40" text-anchor="end">3</text>
+ <text transform="translate(80,40)rotate(90)scale(2,1)">123</text>
+ <text transform="translate(120,40)rotate(90)">1</text>
+ <text transform="translate(120,40)rotate(90)" x="22" text-anchor="middle">2</text>
+ <text transform="translate(120,40)rotate(90)" x="44" text-anchor="end">3</text>
+ <text transform="translate(160,40)rotate(90)scale(0.66666666,1)">123</text>
+ </g>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/textLength-4-ref.svg b/layout/reftests/svg/text/textLength-4-ref.svg
new file mode 100644
index 0000000000..1a7153b323
--- /dev/null
+++ b/layout/reftests/svg/text/textLength-4-ref.svg
@@ -0,0 +1,28 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <style>
+ @font-face {
+ font-family: Linux Libertine;
+ src: url(../../fonts/LinLibertine_Re-4.7.5.woff);
+ }
+ </style>
+ <!-- the unscaled width of the "123" is 66 -->
+ <linearGradient id="g1" x1="0" y1="0" x2="66" y2="0" gradientUnits="userSpaceOnUse">
+ <stop stop-color="red"/>
+ <stop offset="0.333333" stop-color="red"/>
+ <stop offset="0.333333" stop-color="yellow"/>
+ <stop offset="0.666666" stop-color="yellow"/>
+ <stop offset="0.666666" stop-color="red"/>
+ <stop offset="1" stop-color="red"/>
+ </linearGradient>
+ <linearGradient id="g2" x1="100" y1="0" x2="232" y2="0" gradientUnits="userSpaceOnUse">
+ <stop stop-color="red"/>
+ <stop offset="0.333333" stop-color="red"/>
+ <stop offset="0.333333" stop-color="yellow"/>
+ <stop offset="0.666666" stop-color="yellow"/>
+ <stop offset="0.666666" stop-color="red"/>
+ <stop offset="1" stop-color="red"/>
+ </linearGradient>
+ <text transform="scale(2,1)translate(50,0)" y="100" style="font: 50px Linux Libertine; text-rendering: geometricPrecision; fill: url(#g1)">123</text>
+ <text transform="scale(2,1)translate(50,0)" y="100" style="font: 50px Linux Libertine; text-rendering: geometricPrecision; fill: none; stroke: black; stroke-width: 2px">123</text>
+ <rect x="100" y="110" width="132" height="10" fill="url(#g2)"/>
+</svg>
diff --git a/layout/reftests/svg/text/textLength-4.svg b/layout/reftests/svg/text/textLength-4.svg
new file mode 100644
index 0000000000..d346304712
--- /dev/null
+++ b/layout/reftests/svg/text/textLength-4.svg
@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <style>
+ @font-face {
+ font-family: Linux Libertine;
+ src: url(../../fonts/LinLibertine_Re-4.7.5.woff);
+ }
+ </style>
+ <!-- the unscaled width of the "123" is 66 -->
+ <linearGradient id="g" x1="100" y1="0" x2="232" y2="0" gradientUnits="userSpaceOnUse">
+ <stop stop-color="red"/>
+ <stop offset="0.333333" stop-color="red"/>
+ <stop offset="0.333333" stop-color="yellow"/>
+ <stop offset="0.666666" stop-color="yellow"/>
+ <stop offset="0.666666" stop-color="red"/>
+ <stop offset="1" stop-color="red"/>
+ </linearGradient>
+ <text x="100" y="100" style="font: 50px Linux Libertine; text-rendering: geometricPrecision" textLength="132" lengthAdjust="spacingAndGlyphs" fill="url(#g)">123</text>
+ <text transform="scale(2,1)translate(50,0)" y="100" style="font: 50px Linux Libertine; text-rendering: geometricPrecision; fill: none; stroke: black; stroke-width: 2px">123</text>
+ <rect x="100" y="110" width="132" height="10" fill="url(#g)"/>
+</svg>
diff --git a/layout/reftests/svg/text/textLength-5-ref.svg b/layout/reftests/svg/text/textLength-5-ref.svg
new file mode 100644
index 0000000000..2c6e7c2a43
--- /dev/null
+++ b/layout/reftests/svg/text/textLength-5-ref.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <text x="100" y="100" style="font: 32px sans-serif" textLength="50" lengthAdjust="spacingAndGlyphs">hello</text>
+ <text x="100" y="140" style="font: 32px sans-serif" textLength="50" lengthAdjust="spacingAndGlyphs">hello</text>
+</svg>
diff --git a/layout/reftests/svg/text/textLength-5.svg b/layout/reftests/svg/text/textLength-5.svg
new file mode 100644
index 0000000000..52e2fc3a30
--- /dev/null
+++ b/layout/reftests/svg/text/textLength-5.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <text x="100" y="100" style="font: 32px sans-serif" textLength="100" lengthAdjust="spacingAndGlyphs">hello<tspan x="100" y="140">hello</tspan></text>
+</svg>
diff --git a/layout/reftests/svg/text/textLength-6-ref.svg b/layout/reftests/svg/text/textLength-6-ref.svg
new file mode 100644
index 0000000000..2c6e7c2a43
--- /dev/null
+++ b/layout/reftests/svg/text/textLength-6-ref.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <text x="100" y="100" style="font: 32px sans-serif" textLength="50" lengthAdjust="spacingAndGlyphs">hello</text>
+ <text x="100" y="140" style="font: 32px sans-serif" textLength="50" lengthAdjust="spacingAndGlyphs">hello</text>
+</svg>
diff --git a/layout/reftests/svg/text/textLength-6.svg b/layout/reftests/svg/text/textLength-6.svg
new file mode 100644
index 0000000000..587124f712
--- /dev/null
+++ b/layout/reftests/svg/text/textLength-6.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <text x="100" y="100" style="font: 32px sans-serif">hello<tspan x="100" y="140">hello</tspan>
+ <animate attributeName="textLength" begin="-100s" dur="200s" values="50; 100; 100; 150"/>
+ <set attributeName="lengthAdjust" to="spacingAndGlyphs"/></text>
+</svg>
diff --git a/layout/reftests/svg/text/textLength-ref.svg b/layout/reftests/svg/text/textLength-ref.svg
new file mode 100644
index 0000000000..bcdb21f4c7
--- /dev/null
+++ b/layout/reftests/svg/text/textLength-ref.svg
@@ -0,0 +1,40 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <style>
+ @font-face { font-family: Linux Libertine; src: url(../../fonts/LinLibertine_Re-4.7.5.woff); }
+ svg { font: 50px Linux Libertine; text-rendering: geometricPrecision; }
+ </style>
+ <!-- the unscaled width of the "123" is 66 -->
+ <g transform="translate(50,0)">
+ <g stroke="red">
+ <path d="M 0,40 h 66"/>
+ <path d="M 0,80 h 132"/>
+ <path d="M 0,120 h 132"/>
+ <path d="M 0,160 h 44"/>
+ <path d="M 0,200 h 44"/>
+ </g>
+
+ <g fill="aqua">
+ <text y="40">123</text>
+ <text y="80">1</text>
+ <text x="66" y="80" text-anchor="middle">2</text>
+ <text x="132" y="80" text-anchor="end">3</text>
+ <text transform="scale(2,1)" y="120">123</text>
+ <text y="160">1</text>
+ <text x="22" y="160" text-anchor="middle">2</text>
+ <text x="44" y="160" text-anchor="end">3</text>
+ <text transform="scale(0.6666666666,1)" y="200">123</text>
+ </g>
+
+ <g fill="none" stroke="black" stroke-width="2px">
+ <text y="40">123</text>
+ <text y="80">1</text>
+ <text x="66" y="80" text-anchor="middle">2</text>
+ <text x="132" y="80" text-anchor="end">3</text>
+ <text transform="scale(2,1)" y="120">123</text>
+ <text y="160">1</text>
+ <text x="22" y="160" text-anchor="middle">2</text>
+ <text x="44" y="160" text-anchor="end">3</text>
+ <text transform="scale(0.6666666666,1)" y="200">123</text>
+ </g>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/textLength.svg b/layout/reftests/svg/text/textLength.svg
new file mode 100644
index 0000000000..93dd2e61fb
--- /dev/null
+++ b/layout/reftests/svg/text/textLength.svg
@@ -0,0 +1,36 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <style>
+ @font-face { font-family: Linux Libertine; src: url(../../fonts/LinLibertine_Re-4.7.5.woff); }
+ svg { font: 50px Linux Libertine; text-rendering: geometricPrecision; }
+ </style>
+ <!-- the unscaled width of the "123" is 66 -->
+ <g transform="translate(50,0)">
+ <g stroke="red">
+ <path d="M 0,40 h 66"/>
+ <path d="M 0,80 h 132"/>
+ <path d="M 0,120 h 132"/>
+ <path d="M 0,160 h 44"/>
+ <path d="M 0,200 h 44"/>
+ </g>
+
+ <g fill="aqua">
+ <text y="40">123</text>
+ <text y="80" textLength="132">123</text>
+ <text y="120" textLength="132" lengthAdjust="spacingAndGlyphs">123</text>
+ <text y="160" textLength="44">123</text>
+ <text y="200" textLength="44" lengthAdjust="spacingAndGlyphs">123</text>
+ </g>
+
+ <g fill="none" stroke="black" stroke-width="2px">
+ <text y="40">123</text>
+ <text y="80">1</text>
+ <text x="66" y="80" text-anchor="middle">2</text>
+ <text x="132" y="80" text-anchor="end">3</text>
+ <text transform="scale(2,1)" y="120">123</text>
+ <text y="160">1</text>
+ <text x="22" y="160" text-anchor="middle">2</text>
+ <text x="44" y="160" text-anchor="end">3</text>
+ <text transform="scale(0.6666666666,1)" y="200">123</text>
+ </g>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/textpath-a-ref.svg b/layout/reftests/svg/text/textpath-a-ref.svg
new file mode 100644
index 0000000000..50de8ee340
--- /dev/null
+++ b/layout/reftests/svg/text/textpath-a-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" xmlns:xlink="http://www.w3.org/1999/xlink" style="font: 16px sans-serif">
+ <path id="p" d="M 100,100 h 100"/>
+ <text><textPath xlink:href="#p">hello</textPath></text>
+</svg>
diff --git a/layout/reftests/svg/text/textpath-a.svg b/layout/reftests/svg/text/textpath-a.svg
new file mode 100644
index 0000000000..639f47db44
--- /dev/null
+++ b/layout/reftests/svg/text/textpath-a.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" xmlns:xlink="http://www.w3.org/1999/xlink" style="font: 16px sans-serif">
+ <path id="p" d="M 100,100 h 100"/>
+ <text><a><textPath xlink:href="#p">hello</textPath></a></text>
+</svg>
diff --git a/layout/reftests/svg/text/textpath-after-anchor-end-ref.svg b/layout/reftests/svg/text/textpath-after-anchor-end-ref.svg
new file mode 100644
index 0000000000..5b32f54610
--- /dev/null
+++ b/layout/reftests/svg/text/textpath-after-anchor-end-ref.svg
@@ -0,0 +1,10 @@
+<!--
+ 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">
+ <g transform="translate(150,50)" style="font: 32px sans-serif">
+ <path id="p" d="M 100,100 l 100,100"/>
+ <text text-anchor="end"><textPath xlink:href="#p" startOffset="100%">hello</textPath><tspan y="0">there</tspan></text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/textpath-after-anchor-end.svg b/layout/reftests/svg/text/textpath-after-anchor-end.svg
new file mode 100644
index 0000000000..4a8a19b087
--- /dev/null
+++ b/layout/reftests/svg/text/textpath-after-anchor-end.svg
@@ -0,0 +1,10 @@
+<!--
+ 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">
+ <g transform="translate(150,50)" style="font: 32px sans-serif">
+ <path id="p" d="M 100,100 l 100,100"/>
+ <text text-anchor="end"><textPath xlink:href="#p" startOffset="100%">hello</textPath>there</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/textpath-after-ref.svg b/layout/reftests/svg/text/textpath-after-ref.svg
new file mode 100644
index 0000000000..c90ae4fccd
--- /dev/null
+++ b/layout/reftests/svg/text/textpath-after-ref.svg
@@ -0,0 +1,11 @@
+<!--
+ 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">
+ <g transform="translate(50,50)" style="font: 32px sans-serif">
+ <path id="p" d="M 100,100 l 100,100"/>
+ <text><textPath xlink:href="#p">hello</textPath></text>
+ <text><tspan visibility="hidden">hello</tspan>there</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/textpath-after.svg b/layout/reftests/svg/text/textpath-after.svg
new file mode 100644
index 0000000000..b250e833e9
--- /dev/null
+++ b/layout/reftests/svg/text/textpath-after.svg
@@ -0,0 +1,10 @@
+<!--
+ 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">
+ <g transform="translate(50,50)" style="font: 32px sans-serif">
+ <path id="p" d="M 100,100 l 100,100"/>
+ <text><textPath xlink:href="#p">hello</textPath>there</text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/textpath-anchor-end-ref.svg b/layout/reftests/svg/text/textpath-anchor-end-ref.svg
new file mode 100644
index 0000000000..27d80ae053
--- /dev/null
+++ b/layout/reftests/svg/text/textpath-anchor-end-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">
+ <path id="p" d="M 0,100 h 200"/>
+ <text x="200" y="100" text-anchor="end" style="font: 16px sans-serif">hello</text>
+</svg>
diff --git a/layout/reftests/svg/text/textpath-anchor-end.svg b/layout/reftests/svg/text/textpath-anchor-end.svg
new file mode 100644
index 0000000000..f77549ab7f
--- /dev/null
+++ b/layout/reftests/svg/text/textpath-anchor-end.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" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <path id="p" d="M 0,100 h 200"/>
+ <text text-anchor="end" style="font: 16px sans-serif"><textPath xlink:href="#p" startOffset="100%">hello</textPath></text>
+</svg>
diff --git a/layout/reftests/svg/text/textpath-anchor-middle-ref.svg b/layout/reftests/svg/text/textpath-anchor-middle-ref.svg
new file mode 100644
index 0000000000..dfa19bc42b
--- /dev/null
+++ b/layout/reftests/svg/text/textpath-anchor-middle-ref.svg
@@ -0,0 +1,7 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+ <text x="100" y="100" text-anchor="middle" style="font: 16px sans-serif">ABCDE</text>
+</svg>
diff --git a/layout/reftests/svg/text/textpath-anchor-middle.svg b/layout/reftests/svg/text/textpath-anchor-middle.svg
new file mode 100644
index 0000000000..8f7b347e25
--- /dev/null
+++ b/layout/reftests/svg/text/textpath-anchor-middle.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" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <path id="p" d="M 0,100 h 200"/>
+ <text text-anchor="middle" style="font: 16px sans-serif"><textPath xlink:href="#p" startOffset="50%">ABCDE</textPath></text>
+</svg>
diff --git a/layout/reftests/svg/text/textpath-cluster-2-ref.svg b/layout/reftests/svg/text/textpath-cluster-2-ref.svg
new file mode 100644
index 0000000000..7a16f55d14
--- /dev/null
+++ b/layout/reftests/svg/text/textpath-cluster-2-ref.svg
@@ -0,0 +1,8 @@
+<svg height="250" width="250" xmlns="http://www.w3.org/2000/svg">
+ <defs>
+ <path id="path" d="M 10 50 H 200" />
+ </defs>
+ <text font-size="36">
+ <textPath href="#path">abcd</textPath>
+ </text>
+</svg>
diff --git a/layout/reftests/svg/text/textpath-cluster-2.svg b/layout/reftests/svg/text/textpath-cluster-2.svg
new file mode 100644
index 0000000000..925f2d7c2f
--- /dev/null
+++ b/layout/reftests/svg/text/textpath-cluster-2.svg
@@ -0,0 +1,9 @@
+<svg height="250" width="250" xmlns="http://www.w3.org/2000/svg">
+ <defs>
+ <path id="path" d="M 10 50 H 200" />
+ </defs>
+ <text font-size="36">
+ <!-- Next line ends with whitespace. Do not change it -->
+ <textPath href="#path">abcd</textPath>
+ </text>
+</svg>
diff --git a/layout/reftests/svg/text/textpath-cluster-ref.svg b/layout/reftests/svg/text/textpath-cluster-ref.svg
new file mode 100644
index 0000000000..f88983c23b
--- /dev/null
+++ b/layout/reftests/svg/text/textpath-cluster-ref.svg
@@ -0,0 +1,12 @@
+<svg width="500" height="500" xmlns="http://www.w3.org/2000/svg" >
+ <defs>
+ <path id="path" d="M 100 200 C 200 100 300 0 400 100" />
+ <style>
+ text {
+ font: 40px monospace;
+ }
+ </style>
+ </defs>
+
+ <text transform="translate(0, 40)">a <textPath href="#path">b </textPath>c</text>
+</svg>
diff --git a/layout/reftests/svg/text/textpath-cluster.svg b/layout/reftests/svg/text/textpath-cluster.svg
new file mode 100644
index 0000000000..7861eb5c2b
--- /dev/null
+++ b/layout/reftests/svg/text/textpath-cluster.svg
@@ -0,0 +1,12 @@
+<svg width="500" height="500" xmlns="http://www.w3.org/2000/svg" >
+ <defs>
+ <path id="path" d="M 100 200 C 200 100 300 0 400 100" />
+ <style>
+ text {
+ font: 40px monospace;
+ }
+ </style>
+ </defs>
+
+ <text transform="translate(0, 40)">a <textPath href="#path">b </textPath> c</text>
+</svg>
diff --git a/layout/reftests/svg/text/textpath-inherit-position-ref.svg b/layout/reftests/svg/text/textpath-inherit-position-ref.svg
new file mode 100644
index 0000000000..305330b171
--- /dev/null
+++ b/layout/reftests/svg/text/textpath-inherit-position-ref.svg
@@ -0,0 +1,10 @@
+<!--
+ 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">
+ <g transform="translate(150,50)" style="font: 32px sans-serif">
+ <path id="p" d="M 100,100 l 100,100"/>
+ <text x="0 20 40 60 80">hello <textPath xlink:href="#p"><tspan x="50">there</tspan></textPath></text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/textpath-inherit-position.svg b/layout/reftests/svg/text/textpath-inherit-position.svg
new file mode 100644
index 0000000000..d728c3c8e1
--- /dev/null
+++ b/layout/reftests/svg/text/textpath-inherit-position.svg
@@ -0,0 +1,10 @@
+<!--
+ 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">
+ <g transform="translate(150,50)" style="font: 32px sans-serif">
+ <path id="p" d="M 100,100 l 100,100"/>
+ <text x="0 20 40 60 80 100 50" y="0 0 0 0 0 0 200">hello <textPath xlink:href="#p">there</textPath></text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/textpath-invalid-parent-ref.svg b/layout/reftests/svg/text/textpath-invalid-parent-ref.svg
new file mode 100644
index 0000000000..ecb9af043c
--- /dev/null
+++ b/layout/reftests/svg/text/textpath-invalid-parent-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" xmlns:xlink="http://www.w3.org/1999/xlink" style="font: 16px sans-serif">
+ <path id="p" d="M 100,100 h 100"/>
+ <text x="50" y="100">hello<tspan><textPath xlink:href="#p"> or not</textPath></tspan></text>
+</svg>
diff --git a/layout/reftests/svg/text/textpath-invalid-parent.svg b/layout/reftests/svg/text/textpath-invalid-parent.svg
new file mode 100644
index 0000000000..ecb9af043c
--- /dev/null
+++ b/layout/reftests/svg/text/textpath-invalid-parent.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" xmlns:xlink="http://www.w3.org/1999/xlink" style="font: 16px sans-serif">
+ <path id="p" d="M 100,100 h 100"/>
+ <text x="50" y="100">hello<tspan><textPath xlink:href="#p"> or not</textPath></tspan></text>
+</svg>
diff --git a/layout/reftests/svg/text/textpath-multiline-2-ref.svg b/layout/reftests/svg/text/textpath-multiline-2-ref.svg
new file mode 100644
index 0000000000..8bd2b7cb3c
--- /dev/null
+++ b/layout/reftests/svg/text/textpath-multiline-2-ref.svg
@@ -0,0 +1,12 @@
+<!--
+ 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">
+ <path id="p" d="M 50,200 C 50,100 300,100 300,200" fill="none"/>
+ <text style="font: 24px/30px sans-serif; text-anchor: middle">
+ <textPath xlink:href="#p" startOffset="50%">
+ <tspan x="0" y="0">hello</tspan><tspan x="0" y="30">hello</tspan><tspan x="0" y="60">hello</tspan>
+ </textPath>
+ </text>
+</svg>
diff --git a/layout/reftests/svg/text/textpath-multiline-2.svg b/layout/reftests/svg/text/textpath-multiline-2.svg
new file mode 100644
index 0000000000..363cf8be5b
--- /dev/null
+++ b/layout/reftests/svg/text/textpath-multiline-2.svg
@@ -0,0 +1,12 @@
+<!--
+ 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">
+ <path id="p" d="M 50,200 C 50,100 300,100 300,200" fill="none"/>
+ <text style="white-space: pre-line; font: 24px/30px sans-serif; text-anchor: middle">
+ <textPath xlink:href="#p" startOffset="50%">hello
+hello
+hello</textPath>
+ </text>
+</svg>
diff --git a/layout/reftests/svg/text/textpath-multiline-ref.svg b/layout/reftests/svg/text/textpath-multiline-ref.svg
new file mode 100644
index 0000000000..d6d0ed7bbc
--- /dev/null
+++ b/layout/reftests/svg/text/textpath-multiline-ref.svg
@@ -0,0 +1,9 @@
+<!--
+ 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">
+ <text x="100" y="100" style="line-height: 20px; white-space: pre-line; font: 16px sans-serif">line 1
+line 2
+line 3</text>
+</svg>
diff --git a/layout/reftests/svg/text/textpath-multiline.svg b/layout/reftests/svg/text/textpath-multiline.svg
new file mode 100644
index 0000000000..06f5ec3796
--- /dev/null
+++ b/layout/reftests/svg/text/textpath-multiline.svg
@@ -0,0 +1,12 @@
+<!--
+ 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">
+ <path id="p" d="M 100,100 h 400"/>
+ <text style="white-space: pre-line; line-height: 20px; font: 16px sans-serif">
+ <textPath xlink:href="#p">line 1
+line 2
+line 3</textPath>
+ </text>
+</svg>
diff --git a/layout/reftests/svg/text/textpath-multiple.svg b/layout/reftests/svg/text/textpath-multiple.svg
new file mode 100644
index 0000000000..417084c455
--- /dev/null
+++ b/layout/reftests/svg/text/textpath-multiple.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
+ <defs>
+ <path id="path1" d="M100,100 H300"/>
+ <path id="path2" d="M200,100 H300"/>
+ </defs>
+ <rect width="100%" height="100%" fill="lime"/>
+ <g font-size="50px">
+ <text fill="red"><textPath href="#path1">Text</textPath> <textPath href="#path2">Text</textPath></text>
+ <text fill="lime" stroke="lime" stroke-width="4px"><textPath href="#path1">Text</textPath><textPath href="#path2">Text</textPath></text>
+ </g>
+</svg>
+
+
diff --git a/layout/reftests/svg/text/textpath-ref.svg b/layout/reftests/svg/text/textpath-ref.svg
new file mode 100644
index 0000000000..5bd8d5b9dc
--- /dev/null
+++ b/layout/reftests/svg/text/textpath-ref.svg
@@ -0,0 +1,33 @@
+<!--
+ 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">
+ <path id="p" d="M 100,100 h 50 v 200" fill="none" stroke="red" stroke-width="1"/>
+ <g style="font: 30px monospace">
+ <text x="100" y="100">a</text>
+ </g>
+ <script><![CDATA[
+ function put(s, x, y, r) {
+ var e = document.createElementNS("http://www.w3.org/2000/svg", "text");
+ e.setAttribute("x", x);
+ e.setAttribute("y", y);
+ e.setAttribute("rotate", r);
+ e.textContent = s;
+ g.appendChild(e);
+ }
+
+ var s = "a.b.c.d.e.";
+ var text = document.getElementsByTagName("text")[0];
+ var g = text.parentNode;
+ var adv = text.getSubStringLength(0, 1);
+ for (var i = 1; i < s.length; i++) {
+ var x = i * adv;
+ if (x + adv / 2 < 50) {
+ put(s[i], 100 + x, 100, 0);
+ } else {
+ put(s[i], 150, 50 + x, 90);
+ }
+ }
+ ]]></script>
+</svg>
diff --git a/layout/reftests/svg/text/textpath-reset-position-ref.svg b/layout/reftests/svg/text/textpath-reset-position-ref.svg
new file mode 100644
index 0000000000..6dce784958
--- /dev/null
+++ b/layout/reftests/svg/text/textpath-reset-position-ref.svg
@@ -0,0 +1,10 @@
+<!--
+ 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">
+ <g transform="translate(150,50)" style="font: 32px sans-serif">
+ <path id="p" d="M 100,100 l 100,100"/>
+ <text x="50">hello <textPath xlink:href="#p"><tspan x="0">there</tspan></textPath></text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/textpath-reset-position.svg b/layout/reftests/svg/text/textpath-reset-position.svg
new file mode 100644
index 0000000000..2d2181a14e
--- /dev/null
+++ b/layout/reftests/svg/text/textpath-reset-position.svg
@@ -0,0 +1,10 @@
+<!--
+ 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">
+ <g transform="translate(150,50)" style="font: 32px sans-serif">
+ <path id="p" d="M 100,100 l 100,100"/>
+ <text x="50">hello <textPath xlink:href="#p">there</textPath></text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/text/textpath-selection-ref.svg b/layout/reftests/svg/text/textpath-selection-ref.svg
new file mode 100644
index 0000000000..4d06ad0217
--- /dev/null
+++ b/layout/reftests/svg/text/textpath-selection-ref.svg
@@ -0,0 +1,39 @@
+<!--
+ 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">
+ <path id="p" d="M 100,100 h 50 v 200" fill="none" stroke="red" stroke-width="1"/>
+ <g style="font: 30px monospace">
+ <text x="100" y="100">a</text>
+ </g>
+ <script><![CDATA[
+ function put(s, x, y, r) {
+ var e = document.createElementNS("http://www.w3.org/2000/svg", "text");
+ e.setAttribute("x", x);
+ e.setAttribute("y", y);
+ e.setAttribute("rotate", r);
+ e.textContent = s;
+ g.appendChild(e);
+ }
+
+ var s = "a.b.c.d.e.";
+ var text = document.getElementsByTagName("text")[0];
+ var g = text.parentNode;
+ var adv = text.getSubStringLength(0, 1);
+ for (var i = 1; i < s.length; i++) {
+ var x = i * adv;
+ if (x + adv / 2 < 50) {
+ put(s[i], 100 + x, 100, 0);
+ } else {
+ put(s[i], 150, 50 + x, 90);
+ }
+ }
+
+ var lastText = document.getElementsByTagName("text")[s.length - 1];
+ var range = document.createRange();
+ range.setStart(text.firstChild, 1);
+ range.setEnd(lastText.firstChild, 0);
+ window.getSelection().addRange(range);
+ ]]></script>
+</svg>
diff --git a/layout/reftests/svg/text/textpath-selection.svg b/layout/reftests/svg/text/textpath-selection.svg
new file mode 100644
index 0000000000..6e98a9d845
--- /dev/null
+++ b/layout/reftests/svg/text/textpath-selection.svg
@@ -0,0 +1,15 @@
+<!--
+ 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">
+ <path id="p" d="M 100,100 h 50 v 200" fill="none" stroke="red" stroke-width="1"/>
+ <text style="font: 30px monospace"><textPath xlink:href="#p">a.b.c.d.e.</textPath></text>
+ <script>
+ var textPath = document.getElementsByTagName("textPath")[0];
+ var range = document.createRange();
+ range.setStart(textPath.firstChild, 1);
+ range.setEnd(textPath.firstChild, 9);
+ window.getSelection().addRange(range);
+ </script>
+</svg>
diff --git a/layout/reftests/svg/text/textpath-vertical-dx-ref.svg b/layout/reftests/svg/text/textpath-vertical-dx-ref.svg
new file mode 100644
index 0000000000..e73812b61e
--- /dev/null
+++ b/layout/reftests/svg/text/textpath-vertical-dx-ref.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <style>
+ path { stroke: red; }
+ text { writing-mode: vertical-rl; font: 24px sans-serif; }
+ </style>
+ <path id="p" d="M 40,40 v 150"/>
+ <text transform="translate(16, 0)"><textPath xlink:href="#p">中国 China</textPath></text>
+</svg>
diff --git a/layout/reftests/svg/text/textpath-vertical-dx.svg b/layout/reftests/svg/text/textpath-vertical-dx.svg
new file mode 100644
index 0000000000..92657cd3c2
--- /dev/null
+++ b/layout/reftests/svg/text/textpath-vertical-dx.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <style>
+ path { stroke: red; }
+ text { writing-mode: vertical-rl; font: 24px sans-serif; }
+ </style>
+ <path id="p" d="M 40,40 v 150"/>
+ <text dx="16"><textPath xlink:href="#p">中国 China</textPath></text>
+</svg>
diff --git a/layout/reftests/svg/text/textpath-vertical-x-ref.svg b/layout/reftests/svg/text/textpath-vertical-x-ref.svg
new file mode 100644
index 0000000000..aeb00c2bb9
--- /dev/null
+++ b/layout/reftests/svg/text/textpath-vertical-x-ref.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <style>
+ path { stroke: red; }
+ text { writing-mode: vertical-rl; font: 24px sans-serif; }
+ </style>
+ <path id="p" d="M 40,40 v 150"/>
+ <text><textPath xlink:href="#p">中国 China</textPath></text>
+</svg>
diff --git a/layout/reftests/svg/text/textpath-vertical-x.svg b/layout/reftests/svg/text/textpath-vertical-x.svg
new file mode 100644
index 0000000000..c94a6739b1
--- /dev/null
+++ b/layout/reftests/svg/text/textpath-vertical-x.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <style>
+ path { stroke: red; }
+ text { writing-mode: vertical-rl; font: 24px sans-serif; }
+ </style>
+ <path id="p" d="M 40,40 v 150"/>
+ <text x="16"><textPath xlink:href="#p">中国 China</textPath></text>
+</svg>
diff --git a/layout/reftests/svg/text/textpath.svg b/layout/reftests/svg/text/textpath.svg
new file mode 100644
index 0000000000..cba2085c9f
--- /dev/null
+++ b/layout/reftests/svg/text/textpath.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" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <path id="p" d="M 100,100 h 50 v 200" fill="none" stroke="red" stroke-width="1"/>
+ <text style="font: 30px monospace"><textPath xlink:href="#p">a.b.c.d.e.</textPath></text>
+</svg>
diff --git a/layout/reftests/svg/text/tspan-shaping-ref.svg b/layout/reftests/svg/text/tspan-shaping-ref.svg
new file mode 100644
index 0000000000..2f10e32dda
--- /dev/null
+++ b/layout/reftests/svg/text/tspan-shaping-ref.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
+ <!-- any font with an "fi" ligature will do, try a few likely names: -->
+ <text x="0" y="50" style="font: 50px Calibri, DejaVu Serif, FreeSerif, Times, serif">
+ <tspan x="20" dy="0">off</tspan>
+ <tspan x="20" dy="50">ice</tspan>
+ </text>
+</svg>
diff --git a/layout/reftests/svg/text/tspan-shaping.svg b/layout/reftests/svg/text/tspan-shaping.svg
new file mode 100644
index 0000000000..3a81bc2da0
--- /dev/null
+++ b/layout/reftests/svg/text/tspan-shaping.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
+ <!-- any font with an "fi" ligature will do, try a few likely names: -->
+ <text x="0" y="50" style="font: 50px Calibri, DejaVu Serif, FreeSerif, Times, serif">
+ <tspan x="20" dy="0">off</tspan><tspan x="20" dy="50">ice</tspan>
+ </text>
+</svg>
diff --git a/layout/reftests/svg/text/vertical-01-ref.svg b/layout/reftests/svg/text/vertical-01-ref.svg
new file mode 100644
index 0000000000..31989c4265
--- /dev/null
+++ b/layout/reftests/svg/text/vertical-01-ref.svg
@@ -0,0 +1,12 @@
+<!--
+ 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">
+ <defs>
+ <path id="path" d="M 100, 100 v 200" />
+ </defs>
+ <text style="font: 48px sans-serif" text-rendering="geometricPrecision">
+ <textPath xlink:href="#path">A B C</textPath>
+ </text>
+</svg>
diff --git a/layout/reftests/svg/text/vertical-01.svg b/layout/reftests/svg/text/vertical-01.svg
new file mode 100644
index 0000000000..a5fe02af0a
--- /dev/null
+++ b/layout/reftests/svg/text/vertical-01.svg
@@ -0,0 +1,10 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+ <text x="100" y="100" text-rendering="geometricPrecision"
+ writing-mode="vertical-rl" style="text-orientation: sideways-right;font: 48px sans-serif">
+ A B C
+ </text>
+</svg>
diff --git a/layout/reftests/svg/textPath-01-ref.svg b/layout/reftests/svg/textPath-01-ref.svg
new file mode 100644
index 0000000000..711e0fe5aa
--- /dev/null
+++ b/layout/reftests/svg/textPath-01-ref.svg
@@ -0,0 +1,16 @@
+<!--
+ 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" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Reference to check that percentage startOffset ignores pathLength</title>
+
+ <defs>
+ <path id="x" d="M 0 100 h 400"/>
+ </defs>
+
+ <text>
+ <textPath xlink:href="#x" font-size="20" fill="black" startOffset="50%">Should see this</textPath>
+ </text>
+
+</svg>
diff --git a/layout/reftests/svg/textPath-01.svg b/layout/reftests/svg/textPath-01.svg
new file mode 100644
index 0000000000..6543044e67
--- /dev/null
+++ b/layout/reftests/svg/textPath-01.svg
@@ -0,0 +1,16 @@
+<!--
+ 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" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Testcase to check that percentage startOffset ignores pathLength</title>
+
+ <defs>
+ <path id="x" pathLength="20" d="M 0 100 h 400"/>
+ </defs>
+
+ <text>
+ <textPath xlink:href="#x" font-size="20" fill="black" startOffset="50%">Should see this</textPath>
+ </text>
+
+</svg>
diff --git a/layout/reftests/svg/textPath-02.svg b/layout/reftests/svg/textPath-02.svg
new file mode 100644
index 0000000000..c24422a2ad
--- /dev/null
+++ b/layout/reftests/svg/textPath-02.svg
@@ -0,0 +1,15 @@
+<!--
+ 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" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Test effect on startOffset of a scale transform on a textPath's path</title>
+ <defs>
+ <path id="path" d="M20,20 C20,150 150,150 150,20" pathLength="100" transform="scale(2,1)" fill="none" stroke="black"/>
+ </defs>
+ <rect width="100%" height="100%" fill="lime"/>
+ <text y="50">
+ <textPath xlink:href="#path" font-size="20" fill="red" startOffset="50">FAIL</textPath>
+ </text>
+ <rect x="160" y="80" width="100" height="60" fill="lime"/>
+</svg>
diff --git a/layout/reftests/svg/textPath-03.svg b/layout/reftests/svg/textPath-03.svg
new file mode 100644
index 0000000000..e4c224efc7
--- /dev/null
+++ b/layout/reftests/svg/textPath-03.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" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Test effect on startOffset in em units</title>
+
+ <defs>
+ <path id="p" d="M100,100 h200" stroke="red"/>
+ </defs>
+
+ <rect width="100%" height="100%" fill="lime"/>
+
+ <text font-size="50" fill="red">
+ <textPath xlink:href="#p" startOffset="2em">abc</textPath>
+ </text>
+ <text x="100" y="100" dx="2em" font-size="50" stroke-width="4" fill="lime" stroke="lime">abc</text>
+</svg>
diff --git a/layout/reftests/svg/textPath-04.svg b/layout/reftests/svg/textPath-04.svg
new file mode 100644
index 0000000000..fe487bd19d
--- /dev/null
+++ b/layout/reftests/svg/textPath-04.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" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Test effect on display:none on path</title>
+
+ <defs>
+<!--
+ <path id="p" display="none" d="M100,100 h200"/>
+-->
+ <path id="p" d="M100,100 h200"/>
+ </defs>
+
+ <rect width="100%" height="100%" fill="lime"/>
+
+ <!-- check if something displays, its displayed in the right place -->
+ <text font-size="50" fill="red" transform="translate(0,100)">
+ <textPath xlink:href="#p">abc</textPath>
+ </text>
+ <text x="100" y="200" font-size="50" stroke-width="4" fill="lime" stroke="lime">abc</text>
+
+ <!-- check something displays -->
+ <text x="200" y="200" font-size="50" fill="red">abc</text>
+ <text font-size="50" stroke-width="4" stroke="lime" fill="lime" transform="translate(100,100)">
+ <textPath xlink:href="#p">abc</textPath>
+ </text>
+</svg>
diff --git a/layout/reftests/svg/textPath-05.html b/layout/reftests/svg/textPath-05.html
new file mode 100644
index 0000000000..489a2b842e
--- /dev/null
+++ b/layout/reftests/svg/textPath-05.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html style="background-color: lime;">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+</head>
+<body>
+ <span style="display:none;"> דניאל גל</span>
+ <svg width="100%" height="100%">
+ <defs>
+ <path id="p" d="M50,50h400"/>
+ </defs>
+ <text fill="lime" font-size="50px">
+ <textPath xlink:href="#p"><tspan>I should be lime</tspan></textPath>
+ </text>
+ </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/textPath-06.svg b/layout/reftests/svg/textPath-06.svg
new file mode 100644
index 0000000000..1cff33a780
--- /dev/null
+++ b/layout/reftests/svg/textPath-06.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <defs>
+ <path id="path" d="" />
+ </defs>
+
+ <rect fill="lime" width="100%" height="100%"/>
+
+ <text y="50" font-size="50" fill="red" >
+ <textPath path="">Empty paths should be invisible</textPath>
+ </text>
+
+ <text y="100" font-size="50" fill="red" >
+ <textPath href="#path">Empty paths should be invisible</textPath>
+ </text>
+
+ <text y="150" font-size="50" fill="red" >
+ <textPath>No path at all should be invisible too</textPath>
+ </text>
+</svg>
diff --git a/layout/reftests/svg/textPath-line-01-ref.svg b/layout/reftests/svg/textPath-line-01-ref.svg
new file mode 100644
index 0000000000..cd1fa42591
--- /dev/null
+++ b/layout/reftests/svg/textPath-line-01-ref.svg
@@ -0,0 +1,16 @@
+<!--
+ 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" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Reference to check that textPath can point to a line</title>
+
+ <defs>
+ <path id="x" d="M 100 100 h 400"/>
+ </defs>
+
+ <text>
+ <textPath xlink:href="#x" font-size="20" fill="black">Should see this</textPath>
+ </text>
+
+</svg>
diff --git a/layout/reftests/svg/textPath-line-01.svg b/layout/reftests/svg/textPath-line-01.svg
new file mode 100644
index 0000000000..9fc8571576
--- /dev/null
+++ b/layout/reftests/svg/textPath-line-01.svg
@@ -0,0 +1,16 @@
+<!--
+ 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" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Testcase to check that textPath can point to a line</title>
+
+ <defs>
+ <line id="x" x1="100" y1="100" x2="500" y2="100"/>
+ </defs>
+
+ <text>
+ <textPath xlink:href="#x" font-size="20" fill="black">Should see this</textPath>
+ </text>
+
+</svg>
diff --git a/layout/reftests/svg/textPath-path-attribute-01-ref.svg b/layout/reftests/svg/textPath-path-attribute-01-ref.svg
new file mode 100644
index 0000000000..6c90cf505d
--- /dev/null
+++ b/layout/reftests/svg/textPath-path-attribute-01-ref.svg
@@ -0,0 +1,24 @@
+<!--
+ 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 path attribute on textPath</title>
+
+ <defs>
+ <path id="path" d="M 100 100 h 400"/>
+ </defs>
+
+ <text font-size="20">
+ <textPath href="#path">Text on path with path attribute</textPath>
+ </text>
+
+ <text transform="translate(0,50)" font-size="20">
+ <textPath href="#path">Animate the path attribute into place</textPath>
+ </text>
+
+ <text transform="translate(0,100)" font-size="20">
+ <textPath href="#path">Ensure path is preferred over href</textPath>
+ </text>
+
+</svg>
diff --git a/layout/reftests/svg/textPath-path-attribute-01.svg b/layout/reftests/svg/textPath-path-attribute-01.svg
new file mode 100644
index 0000000000..8470ee0348
--- /dev/null
+++ b/layout/reftests/svg/textPath-path-attribute-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">
+ <title>Testcase for path attribute on textPath</title>
+
+ <defs>
+ <path id="path" d="M 100 100 h 400"/>
+ </defs>
+
+ <text font-size="20">
+ <textPath path="M 100 100 h 400">Text on path with path attribute</textPath>
+ </text>
+
+ <text transform="translate(0,50)" font-size="20">
+ <textPath>Animate the path attribute into place
+ <set attributeName="path" to="M 100 100 h 400"/>
+ </textPath>
+ </text>
+
+ <text transform="translate(0,100)" font-size="20">
+ <textPath path="M 400 100 h 400" href="#path">Ensure path is preferred over href
+ <set attributeName="path" to=""/>
+ </textPath>
+ </text>
+
+</svg>
diff --git a/layout/reftests/svg/textPath-side-attribute-01.svg b/layout/reftests/svg/textPath-side-attribute-01.svg
new file mode 100644
index 0000000000..ac71fd5698
--- /dev/null
+++ b/layout/reftests/svg/textPath-side-attribute-01.svg
@@ -0,0 +1,45 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <defs>
+ <path id="path1" d="M100 100 h 300"/>
+ <!-- path2 is drawn in the same place but the opposite direction to path1
+ so using it should give the same result as side="right" -->
+ <path id="path2" d="M400 100 h -300"/>
+ </defs>
+
+ <rect fill="lime" width="100%" height="100%"/>
+
+ <text font-size="30" fill="red">
+ <textPath side="right" href="#path1">Text on a path.</textPath>
+ </text>
+
+ <text font-size="30" fill="lime" stroke="lime" stroke-width="4">
+ <textPath href="#path2">Text on a path.</textPath>
+ </text>
+
+ <text transform="translate(0, 50)" font-size="30" fill="red">
+ <textPath href="#path2">Text on a path.</textPath>
+ </text>
+
+ <text transform="translate(0, 50)" font-size="30" fill="lime" stroke="lime" stroke-width="4">
+ <textPath side="right" href="#path1">Text on a path.</textPath>
+ </text>
+
+ <text transform="translate(0, 100)" font-size="30" fill="red">
+ <textPath href="#path2">Text on a path.</textPath>
+ </text>
+
+ <text transform="translate(0, 100)" font-size="30" fill="lime" stroke="lime" stroke-width="4">
+ <textPath href="#path1">Text on a path.
+ <set attributeName="side" to="right"/>
+ </textPath>
+ </text>
+
+ <text transform="translate(0, 150)" font-size="30" fill="red">
+ <textPath href="#path1">Text on a path.</textPath>
+ </text>
+
+ <text transform="translate(0, 150)" font-size="30" fill="lime" stroke="lime" stroke-width="4">
+ <textPath side="left" href="#path1">Text on a path.</textPath>
+ </text>
+
+</svg>
diff --git a/layout/reftests/svg/thin-stroke-01.svg b/layout/reftests/svg/thin-stroke-01.svg
new file mode 100644
index 0000000000..204bc90a6e
--- /dev/null
+++ b/layout/reftests/svg/thin-stroke-01.svg
@@ -0,0 +1,10 @@
+<!--
+ 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"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Test for a thin stroke-width render</title>
+
+ <rect width="100%" height="100%" fill="lime" stroke="black" stroke-width="0.0001"/>
+</svg>
diff --git a/layout/reftests/svg/transform-animation-on-path-ref.html b/layout/reftests/svg/transform-animation-on-path-ref.html
new file mode 100644
index 0000000000..ecdf155e82
--- /dev/null
+++ b/layout/reftests/svg/transform-animation-on-path-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+<svg width="500" height="500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2">
+ <path id="target" d="M .1 .1 H .9 V .9 H .10 L .10 .10"/>
+</svg>
+</html>
diff --git a/layout/reftests/svg/transform-animation-on-path.html b/layout/reftests/svg/transform-animation-on-path.html
new file mode 100644
index 0000000000..065e080a9e
--- /dev/null
+++ b/layout/reftests/svg/transform-animation-on-path.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html class="reftest-wait reftest-no-flush">
+<style>
+@keyframes anim {
+ from { transform: scale(1); }
+ to { transform: scale(0); }
+}
+</style>
+<svg width="500" height="500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2">
+ <path id="target" d="M .1 .1 H .9 V .9 H .10 L .10 .10"/>
+</svg>
+<script>
+document.addEventListener("MozReftestInvalidate", () => {
+ target.style.animation = "anim 100s step-end reverse";
+ target.addEventListener("animationstart", () => {
+ document.documentElement.classList.remove("reftest-wait");
+ });
+});
+</script>
+</html>
diff --git a/layout/reftests/svg/transform-origin-presentation-01.svg b/layout/reftests/svg/transform-origin-presentation-01.svg
new file mode 100644
index 0000000000..b59fa5f11e
--- /dev/null
+++ b/layout/reftests/svg/transform-origin-presentation-01.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 200 100" preserveAspectRatio="none">
+ <rect width="200" height="100" fill="red"/>
+ <rect width="100" height="200" x="50" y="-50" fill="lime" transform="rotate(90)" transform-origin="center"/>
+</svg>
diff --git a/layout/reftests/svg/transform-outer-svg-01-ref.svg b/layout/reftests/svg/transform-outer-svg-01-ref.svg
new file mode 100644
index 0000000000..e6cc4b49a2
--- /dev/null
+++ b/layout/reftests/svg/transform-outer-svg-01-ref.svg
@@ -0,0 +1,9 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="250" height="250">
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=1353697 -->
+ <rect x="75" y="75" width="150" height="150" fill="none" stroke="black" stroke-width="50"/>
+ <rect x="125" y="125" width="50" height="50" fill="blue"/>
+</svg>
diff --git a/layout/reftests/svg/transform-outer-svg-01.svg b/layout/reftests/svg/transform-outer-svg-01.svg
new file mode 100644
index 0000000000..c4b26c6378
--- /dev/null
+++ b/layout/reftests/svg/transform-outer-svg-01.svg
@@ -0,0 +1,10 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"
+ style="border: 50px solid black;" transform="translate(50,50)">
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=1353697 -->
+ <title>Test that the 'transform' attribute transforms our border too</title>
+ <rect x="25" y="25" width="50" height="50" fill="blue"/>
+</svg>
diff --git a/layout/reftests/svg/tspan-dxdy-01.svg b/layout/reftests/svg/tspan-dxdy-01.svg
new file mode 100644
index 0000000000..1113ab95a8
--- /dev/null
+++ b/layout/reftests/svg/tspan-dxdy-01.svg
@@ -0,0 +1,10 @@
+<!--
+ 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"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Testcase for tspan with ancestor dx/dy attributes</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=333698 -->
+ <text dx="50 40 40 0" dy="20 20 40 -20"><tspan>abcdef</tspan></text>
+</svg>
diff --git a/layout/reftests/svg/tspan-dxdy-02.svg b/layout/reftests/svg/tspan-dxdy-02.svg
new file mode 100644
index 0000000000..8f60510288
--- /dev/null
+++ b/layout/reftests/svg/tspan-dxdy-02.svg
@@ -0,0 +1,10 @@
+<!--
+ 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"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Testcase for tspan with ancestor dx/dy attributes</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=333698 -->
+ <text dx="0 40 40 0" dy="20 20 40 -20"><tspan dx="50">abcdef</tspan></text>
+</svg>
diff --git a/layout/reftests/svg/tspan-dxdy-03.svg b/layout/reftests/svg/tspan-dxdy-03.svg
new file mode 100644
index 0000000000..febe8623f1
--- /dev/null
+++ b/layout/reftests/svg/tspan-dxdy-03.svg
@@ -0,0 +1,10 @@
+<!--
+ 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"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Testcase for tspan with ancestor dx/dy attributes</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=333698 -->
+ <text dx="50 40 40 0" dy="20 20 40 -20"><tspan>a</tspan>bcdef</text>
+</svg>
diff --git a/layout/reftests/svg/tspan-dxdy-04.svg b/layout/reftests/svg/tspan-dxdy-04.svg
new file mode 100644
index 0000000000..f8a2e2ad25
--- /dev/null
+++ b/layout/reftests/svg/tspan-dxdy-04.svg
@@ -0,0 +1,10 @@
+<!--
+ 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"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Testcase for tspan with ancestor dx/dy attributes</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=333698 -->
+ <text dx="50 0 40 0" dy="20 0 0 -20">a<tspan dx="40" dy="20 40 40">bc</tspan>def</text>
+</svg>
diff --git a/layout/reftests/svg/tspan-dxdy-05.svg b/layout/reftests/svg/tspan-dxdy-05.svg
new file mode 100644
index 0000000000..205c71f62e
--- /dev/null
+++ b/layout/reftests/svg/tspan-dxdy-05.svg
@@ -0,0 +1,10 @@
+<!--
+ 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"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Testcase for tspan with ancestor x/y attributes</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=333698 -->
+ <text dx="50 40 40 0" dy="20 20 40 -20"><tspan><tspan>a</tspan>b<tspan>cde</tspan>f</tspan></text>
+</svg>
diff --git a/layout/reftests/svg/tspan-dxdy-06.svg b/layout/reftests/svg/tspan-dxdy-06.svg
new file mode 100644
index 0000000000..57eb0c6481
--- /dev/null
+++ b/layout/reftests/svg/tspan-dxdy-06.svg
@@ -0,0 +1,10 @@
+<!--
+ 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"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Testcase for tspan with ancestor x/y attributes</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=333698 -->
+ <text dx="50 40 40 0" dy="20 20 40 -20">abc<tspan>def</tspan></text>
+</svg>
diff --git a/layout/reftests/svg/tspan-dxdy-ref.svg b/layout/reftests/svg/tspan-dxdy-ref.svg
new file mode 100644
index 0000000000..543866c47b
--- /dev/null
+++ b/layout/reftests/svg/tspan-dxdy-ref.svg
@@ -0,0 +1,10 @@
+<!--
+ 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"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Reference for tspan with ancestor dx/dy attributes</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=333698 -->
+ <text dx="50 40 40 0" dy="20 20 40 -20">abcdef</text>
+</svg>
diff --git a/layout/reftests/svg/tspan-dxdy-textPath-01-ref.svg b/layout/reftests/svg/tspan-dxdy-textPath-01-ref.svg
new file mode 100644
index 0000000000..940554855a
--- /dev/null
+++ b/layout/reftests/svg/tspan-dxdy-textPath-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" version="1.1"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Reference for tspan with ancestor dx/dy attributes and textPath</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=333698 -->
+ <defs>
+ <path id="path" d="M 50 20 l 100 10 l 100 -10" fill="none" stroke="black"/>
+ </defs>
+ <g>
+ <use xlink:href="#path"/>
+ <text><textPath xlink:href="#path"><tspan dx="10 20 10" dy="-10 10 15 -15">abcdef</tspan></textPath></text>
+ </g>
+ <g transform="translate(0, 50)">
+ <use xlink:href="#path"/>
+ <text><textPath xlink:href="#path" startOffset="33%"><tspan dx="10 20 10" dy="-10 10 15 -15">abcdef</tspan></textPath></text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/tspan-dxdy-textPath-01.svg b/layout/reftests/svg/tspan-dxdy-textPath-01.svg
new file mode 100644
index 0000000000..40eb331c38
--- /dev/null
+++ b/layout/reftests/svg/tspan-dxdy-textPath-01.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" version="1.1"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Testcase for tspan with ancestor dx/dy attributes and textPath</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=333698 -->
+ <defs>
+ <path id="path" d="M 50 20 l 100 10 l 100 -10" fill="none" stroke="black"/>
+ </defs>
+ <g>
+ <use xlink:href="#path"/>
+ <text dx="10 20 10" dy="-10 10 15 -15"><textPath xlink:href="#path"><tspan><tspan>a</tspan>b<tspan>cde</tspan>f</tspan></textPath></text>
+ </g>
+ <g transform="translate(0, 50)">
+ <use xlink:href="#path"/>
+ <text dx="10 20 10" dy="-10 10 15 -15"><textPath xlink:href="#path" startOffset="33%"><tspan><tspan>a</tspan>b<tspan>cde</tspan>f</tspan></textPath></text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/tspan-rotate-01.svg b/layout/reftests/svg/tspan-rotate-01.svg
new file mode 100644
index 0000000000..8f13b29881
--- /dev/null
+++ b/layout/reftests/svg/tspan-rotate-01.svg
@@ -0,0 +1,11 @@
+<!--
+ 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"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Testcase for tspan with ancestor rotate attribute</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=333698 -->
+ <text x="50 100 150" y="20 40 80 60" rotate="90 45 -45 180"><tspan>abcdef</tspan></text>
+ <use xlink:href="tspan-xy-ref.svg#grid"/>
+</svg>
diff --git a/layout/reftests/svg/tspan-rotate-02-ref.svg b/layout/reftests/svg/tspan-rotate-02-ref.svg
new file mode 100644
index 0000000000..54160f3236
--- /dev/null
+++ b/layout/reftests/svg/tspan-rotate-02-ref.svg
@@ -0,0 +1,11 @@
+<!--
+ 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"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Reference for tspan with ancestor rotate attribute</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=333698 -->
+ <text x="50 100 150" y="20 40 80 60" rotate="90 90 90 90 90">abcdef</text>
+ <use xlink:href="tspan-xy-ref.svg#grid"/>
+</svg>
diff --git a/layout/reftests/svg/tspan-rotate-02.svg b/layout/reftests/svg/tspan-rotate-02.svg
new file mode 100644
index 0000000000..63b479f99e
--- /dev/null
+++ b/layout/reftests/svg/tspan-rotate-02.svg
@@ -0,0 +1,11 @@
+<!--
+ 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"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Testcase for tspan with ancestor rotate attribute</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=333698 -->
+ <text x="50 100 150" y="20 40 80 60" rotate="0 45 -45 180"><tspan rotate="90">abcdef</tspan></text>
+ <use xlink:href="tspan-xy-ref.svg#grid"/>
+</svg>
diff --git a/layout/reftests/svg/tspan-rotate-03.svg b/layout/reftests/svg/tspan-rotate-03.svg
new file mode 100644
index 0000000000..77edefece0
--- /dev/null
+++ b/layout/reftests/svg/tspan-rotate-03.svg
@@ -0,0 +1,11 @@
+<!--
+ 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"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Testcase for tspan with ancestor rotate attribute</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=333698 -->
+ <text x="50 100 150" y="20 40 80 60" rotate="90 45 -45 180"><tspan>a</tspan>bcdef</text>
+ <use xlink:href="tspan-xy-ref.svg#grid"/>
+</svg>
diff --git a/layout/reftests/svg/tspan-rotate-04-ref.svg b/layout/reftests/svg/tspan-rotate-04-ref.svg
new file mode 100644
index 0000000000..700b85dfb5
--- /dev/null
+++ b/layout/reftests/svg/tspan-rotate-04-ref.svg
@@ -0,0 +1,11 @@
+<!--
+ 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"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Reference for tspan with ancestor rotate attribute</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=333698 -->
+ <text x="50 100 150" y="20 40 80 60" rotate="90 45 45 180 180 180">abcdef</text>
+ <use xlink:href="tspan-xy-ref.svg#grid"/>
+</svg>
diff --git a/layout/reftests/svg/tspan-rotate-04.svg b/layout/reftests/svg/tspan-rotate-04.svg
new file mode 100644
index 0000000000..b817ab1547
--- /dev/null
+++ b/layout/reftests/svg/tspan-rotate-04.svg
@@ -0,0 +1,11 @@
+<!--
+ 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"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Testcase for tspan with ancestor rotate attribute</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=333698 -->
+ <text x="50 100 150" y="20 40 80 60" rotate="90 0 -45 180">a<tspan rotate="45">bc</tspan>def</text>
+ <use xlink:href="tspan-xy-ref.svg#grid"/>
+</svg>
diff --git a/layout/reftests/svg/tspan-rotate-05.svg b/layout/reftests/svg/tspan-rotate-05.svg
new file mode 100644
index 0000000000..562b3f8c3a
--- /dev/null
+++ b/layout/reftests/svg/tspan-rotate-05.svg
@@ -0,0 +1,11 @@
+<!--
+ 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"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Testcase for tspan with ancestor rotate attribute</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=333698 -->
+ <text x="50 100 150" y="20 40 80 60" rotate="90 45 -45 180"><tspan><tspan>a</tspan>b<tspan>cde</tspan>f</tspan></text>
+ <use xlink:href="tspan-xy-ref.svg#grid"/>
+</svg>
diff --git a/layout/reftests/svg/tspan-rotate-06.svg b/layout/reftests/svg/tspan-rotate-06.svg
new file mode 100644
index 0000000000..5bece763e8
--- /dev/null
+++ b/layout/reftests/svg/tspan-rotate-06.svg
@@ -0,0 +1,11 @@
+<!--
+ 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"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Testcase for tspan with ancestor rotate attribute</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=333698 -->
+ <text x="50 100 150" y="20 40 80 60" rotate="90 45 -45 180">abc<tspan>def</tspan></text>
+ <use xlink:href="tspan-xy-ref.svg#grid"/>
+</svg>
diff --git a/layout/reftests/svg/tspan-rotate-07-ref.svg b/layout/reftests/svg/tspan-rotate-07-ref.svg
new file mode 100644
index 0000000000..5494cda6c2
--- /dev/null
+++ b/layout/reftests/svg/tspan-rotate-07-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">
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=862158 -->
+ <text x="100" y="100" style="font: 32px sans-serif" rotate="45 0">A B</text>
+</svg>
diff --git a/layout/reftests/svg/tspan-rotate-07.svg b/layout/reftests/svg/tspan-rotate-07.svg
new file mode 100644
index 0000000000..83b1dbdde1
--- /dev/null
+++ b/layout/reftests/svg/tspan-rotate-07.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">
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=862158 -->
+ <text x="100" y="100" style="font: 32px sans-serif"><tspan rotate="45">A </tspan>B</text>
+</svg>
diff --git a/layout/reftests/svg/tspan-rotate-ref.svg b/layout/reftests/svg/tspan-rotate-ref.svg
new file mode 100644
index 0000000000..1f2d213426
--- /dev/null
+++ b/layout/reftests/svg/tspan-rotate-ref.svg
@@ -0,0 +1,11 @@
+<!--
+ 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"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Reference for tspan with ancestor rotate attribute</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=333698 -->
+ <text rotate="90 45 -45 180" x="50 100 150" y="20 40 80 60">abcdef</text>
+ <use xlink:href="tspan-xy-ref.svg#grid"/>
+</svg>
diff --git a/layout/reftests/svg/tspan-rotate-textPath-01-ref.svg b/layout/reftests/svg/tspan-rotate-textPath-01-ref.svg
new file mode 100644
index 0000000000..02234fb470
--- /dev/null
+++ b/layout/reftests/svg/tspan-rotate-textPath-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" version="1.1"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Testcase for tspan with ancestor rotate attribute and textPath</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=333698 -->
+ <defs>
+ <path id="path" d="M 50 20 l 50 10 l 50 -10" fill="none" stroke="black"/>
+ </defs>
+ <g>
+ <use xlink:href="#path"/>
+ <text><textPath xlink:href="#path"><tspan rotate="90 45 -45 180 180 180">abcdef</tspan></textPath></text>
+ </g>
+ <g transform="translate(0, 50)">
+ <use xlink:href="#path"/>
+ <text><textPath xlink:href="#path" startOffset="33%"><tspan rotate="90 45 -45 180 180 180">abcdef</tspan></textPath></text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/tspan-rotate-textPath-01.svg b/layout/reftests/svg/tspan-rotate-textPath-01.svg
new file mode 100644
index 0000000000..0b4a63cab2
--- /dev/null
+++ b/layout/reftests/svg/tspan-rotate-textPath-01.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" version="1.1"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Testcase for tspan with ancestor rotate attribute and textPath</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=333698 -->
+ <defs>
+ <path id="path" d="M 50 20 l 50 10 l 50 -10" fill="none" stroke="black"/>
+ </defs>
+ <g>
+ <use xlink:href="#path"/>
+ <text rotate="90 45 -45 180"><textPath xlink:href="#path"><tspan><tspan>a</tspan>b<tspan>cde</tspan>f</tspan></textPath></text>
+ </g>
+ <g transform="translate(0, 50)">
+ <use xlink:href="#path"/>
+ <text rotate="90 45 -45 180"><textPath xlink:href="#path" startOffset="33%"><tspan><tspan>a</tspan>b<tspan>cde</tspan>f</tspan></textPath></text>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/tspan-xy-01.svg b/layout/reftests/svg/tspan-xy-01.svg
new file mode 100644
index 0000000000..1951b2746e
--- /dev/null
+++ b/layout/reftests/svg/tspan-xy-01.svg
@@ -0,0 +1,11 @@
+<!--
+ 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"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Testcase for tspan with ancestor x/y attributes</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=333698 -->
+ <text x="50 100 150" y="20 40 80 60"><tspan>abcdef</tspan></text>
+ <use xlink:href="tspan-xy-ref.svg#grid"/>
+</svg>
diff --git a/layout/reftests/svg/tspan-xy-02.svg b/layout/reftests/svg/tspan-xy-02.svg
new file mode 100644
index 0000000000..41125214a4
--- /dev/null
+++ b/layout/reftests/svg/tspan-xy-02.svg
@@ -0,0 +1,11 @@
+<!--
+ 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"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Testcase for tspan with ancestor x/y attributes</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=333698 -->
+ <text x="100 100 150" y="20 40 80 60"><tspan x="50">abcdef</tspan></text>
+ <use xlink:href="tspan-xy-ref.svg#grid"/>
+</svg>
diff --git a/layout/reftests/svg/tspan-xy-03.svg b/layout/reftests/svg/tspan-xy-03.svg
new file mode 100644
index 0000000000..07605288dd
--- /dev/null
+++ b/layout/reftests/svg/tspan-xy-03.svg
@@ -0,0 +1,11 @@
+<!--
+ 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"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Testcase for tspan with ancestor x/y attributes</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=333698 -->
+ <text x="50 100 150" y="20 40 80 60"><tspan>a</tspan>bcdef</text>
+ <use xlink:href="tspan-xy-ref.svg#grid"/>
+</svg>
diff --git a/layout/reftests/svg/tspan-xy-04.svg b/layout/reftests/svg/tspan-xy-04.svg
new file mode 100644
index 0000000000..09d0b018dc
--- /dev/null
+++ b/layout/reftests/svg/tspan-xy-04.svg
@@ -0,0 +1,11 @@
+<!--
+ 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"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Testcase for tspan with ancestor x/y attributes</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=333698 -->
+ <text x="50 0 150" y="20 0 0 60">a<tspan x="100" y="40 80 100">bc</tspan>def</text>
+ <use xlink:href="tspan-xy-ref.svg#grid"/>
+</svg>
diff --git a/layout/reftests/svg/tspan-xy-05.svg b/layout/reftests/svg/tspan-xy-05.svg
new file mode 100644
index 0000000000..a4a065578c
--- /dev/null
+++ b/layout/reftests/svg/tspan-xy-05.svg
@@ -0,0 +1,11 @@
+<!--
+ 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"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Testcase for tspan with ancestor x/y attributes</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=333698 -->
+ <text x="50 100 150" y="20 40 80 60"><tspan><tspan>a</tspan>b<tspan>cde</tspan>f</tspan></text>
+ <use xlink:href="tspan-xy-ref.svg#grid"/>
+</svg>
diff --git a/layout/reftests/svg/tspan-xy-06.svg b/layout/reftests/svg/tspan-xy-06.svg
new file mode 100644
index 0000000000..cad1e47b01
--- /dev/null
+++ b/layout/reftests/svg/tspan-xy-06.svg
@@ -0,0 +1,11 @@
+<!--
+ 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"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Testcase for tspan with ancestor x/y attributes</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=333698 -->
+ <text x="50 100 150" y="20 40 80 60">abc<tspan>def</tspan></text>
+ <use xlink:href="tspan-xy-ref.svg#grid"/>
+</svg>
diff --git a/layout/reftests/svg/tspan-xy-anchor-end-01.svg b/layout/reftests/svg/tspan-xy-anchor-end-01.svg
new file mode 100644
index 0000000000..0937f69829
--- /dev/null
+++ b/layout/reftests/svg/tspan-xy-anchor-end-01.svg
@@ -0,0 +1,11 @@
+<!--
+ 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"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Testcase for tspan with ancestor x/y attributes</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=333698 -->
+ <text x="50 100 150" y="20 40 80 60" text-anchor="end"><tspan>abcdef</tspan></text>
+ <use xlink:href="tspan-xy-ref.svg#grid" />
+</svg>
diff --git a/layout/reftests/svg/tspan-xy-anchor-end-ref.svg b/layout/reftests/svg/tspan-xy-anchor-end-ref.svg
new file mode 100644
index 0000000000..34f8c60e41
--- /dev/null
+++ b/layout/reftests/svg/tspan-xy-anchor-end-ref.svg
@@ -0,0 +1,11 @@
+<!--
+ 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"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Testcase for tspan with ancestor x/y attributes</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=333698 -->
+ <text x="50 100 150" y="20 40 80 60" text-anchor="end">abcdef</text>
+ <use xlink:href="tspan-xy-ref.svg#grid" />
+</svg>
diff --git a/layout/reftests/svg/tspan-xy-anchor-middle-01.svg b/layout/reftests/svg/tspan-xy-anchor-middle-01.svg
new file mode 100644
index 0000000000..a692acd596
--- /dev/null
+++ b/layout/reftests/svg/tspan-xy-anchor-middle-01.svg
@@ -0,0 +1,11 @@
+<!--
+ 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"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Testcase for tspan with ancestor x/y attributes</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=333698 -->
+ <text x="50 100 150" y="20 40 80 60" text-anchor="middle"><tspan>abcdef</tspan></text>
+ <use xlink:href="tspan-xy-ref.svg#grid" />
+</svg>
diff --git a/layout/reftests/svg/tspan-xy-anchor-middle-ref.svg b/layout/reftests/svg/tspan-xy-anchor-middle-ref.svg
new file mode 100644
index 0000000000..616787fc01
--- /dev/null
+++ b/layout/reftests/svg/tspan-xy-anchor-middle-ref.svg
@@ -0,0 +1,11 @@
+<!--
+ 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"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Reference for tspan with ancestor x/y attributes</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=333698 -->
+ <text x="50 100 150" y="20 40 80 60" text-anchor="middle">abcdef</text>
+ <use xlink:href="tspan-xy-ref.svg#grid" />
+</svg>
diff --git a/layout/reftests/svg/tspan-xy-ref.svg b/layout/reftests/svg/tspan-xy-ref.svg
new file mode 100644
index 0000000000..28c2b040d8
--- /dev/null
+++ b/layout/reftests/svg/tspan-xy-ref.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"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Reference for tspan with ancestor x/y attributes</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=333698 -->
+ <text x="50 100 150" y="20 40 80 60">abcdef</text>
+
+ <g id="grid">
+ <line x1="10" y1="20" x2="200" y2="20" stroke="black"/>
+ <line x1="50" y1="10" x2="50" y2="100" stroke="black"/>
+
+ <line x1="10" y1="40" x2="200" y2="40" stroke="black"/>
+ <line x1="100" y1="10" x2="100" y2="100" stroke="black"/>
+
+ <line x1="10" y1="80" x2="200" y2="80" stroke="black"/>
+ <line x1="150" y1="10" x2="150" y2="100" stroke="black"/>
+
+ <line x1="10" y1="60" x2="200" y2="60" stroke="black"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/use-01-extref-resource.svg b/layout/reftests/svg/use-01-extref-resource.svg
new file mode 100644
index 0000000000..b3484478d2
--- /dev/null
+++ b/layout/reftests/svg/use-01-extref-resource.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" version="1.1"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <g id="g3">
+ <rect width="11%" height="100%" fill="lime" id="r1"/>
+ </g>
+ <g id="g4">
+ <rect width="11%" height="100%" fill="lime"/>
+ <use x="10%" xlink:href="#r1"/>
+ <use x="20%" xlink:href="use-01-extref.svg#r2"/>
+ <use x="10%" xlink:href="use-01-extref.svg#g1"/>
+ </g>
+ <g id="g5">
+ <use xlink:href="#r1"/>
+ <use x="-60%" xlink:href="use-01-extref.svg#g2"/>
+ </g>
+ <g id="g6">
+ <use xlink:href="#r1"/>
+ <use x="10%" xlink:href="#g7"/>
+ </g>
+ <g id="g7">
+ <use xlink:href="#g6"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/use-01-extref.svg b/layout/reftests/svg/use-01-extref.svg
new file mode 100644
index 0000000000..8a2c0a68a7
--- /dev/null
+++ b/layout/reftests/svg/use-01-extref.svg
@@ -0,0 +1,24 @@
+<!--
+ 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"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Testing that dynamic changes to the element for a given ID are reflected in 'use'</title>
+
+ <use x="10%" xlink:href="use-01-extref-resource.svg#r1"/>
+
+ <g id="g1">
+ <use x="20%" xlink:href="use-01-extref-resource.svg#g3"/>
+ </g>
+
+ <use x="30%" xlink:href="use-01-extref-resource.svg#g4"/>
+
+ <g id="g2">
+ <use x="70%" xlink:href="use-01-extref-resource.svg#g5"/>
+ </g>
+
+ <use x="80%" xlink:href="use-01-extref-resource.svg#g6"/>
+
+ <rect width="11%" height="100%" fill="lime" id="r2"/>
+</svg>
diff --git a/layout/reftests/svg/use-01.svg b/layout/reftests/svg/use-01.svg
new file mode 100644
index 0000000000..9f92754186
--- /dev/null
+++ b/layout/reftests/svg/use-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" version="1.1"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Testing that 'use' with zero width/height is not displayed</title>
+ <defs>
+ <symbol id="red">
+ <rect width="100" height="100" fill="red"/>
+ </symbol>
+ <symbol id="lime">
+ <rect width="100" height="100" fill="lime"/>
+ </symbol>
+ </defs>
+ <rect width="100%" height="100%" fill="lime"/>
+
+ <!-- zero width/height pointing at symbol should disable -->
+ <use x="0" y="0" width="0" xlink:href="#red"/>
+ <use x="150" y="0" height="0" xlink:href="#red"/>
+
+ <rect x="0" y="150" width="100" height="100" fill="red"/>
+ <!-- no width/height specified should display though -->
+ <use x="0" y="150" xlink:href="#lime"/>
+</svg>
diff --git a/layout/reftests/svg/use-02-extref-ref.svg b/layout/reftests/svg/use-02-extref-ref.svg
new file mode 100644
index 0000000000..c5b0d6c6cd
--- /dev/null
+++ b/layout/reftests/svg/use-02-extref-ref.svg
@@ -0,0 +1,30 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg">
+ <g id="testContent" color="forestgreen">
+ <defs>
+ <linearGradient id="linearGrad" gradientUnits="objectBoundingBox" y1="0" x1="0" y2="1" x2="1">
+ <stop offset="0%" stop-color="royalblue"/>
+ <stop offset="33%" stop-color="white"/>
+ <stop offset="50%" stop-color="darkblue"/>
+ <stop offset="66%" stop-color="white"/>
+ <stop offset="100%" stop-color="royalblue"/>
+ </linearGradient>
+
+ <radialGradient id="radialGrad" gradientUnits="objectBoundingBox" cx="0.5" cy="0.5" r="0.5" fx="0.15" fy="0.15">
+ <stop offset="000%" stop-color="orange" />
+ <stop offset="033%" stop-color="red" />
+ <stop offset="050%" stop-color="gold" />
+ <stop offset="066%" stop-color="red" />
+ <stop offset="100%" stop-color="orange" />
+ </radialGradient>
+ </defs>
+
+ <rect x="0" y="0" width="200" height="125" stroke="none"
+ fill="url(#linearGrad)"/>
+ <rect x="200" y="0" width="200" height="125" stroke="none"
+ fill="currentColor"/>
+ <rect x="0" y="125" width="200" height="125" stroke="none"
+ fill="currentColor"/>
+ <rect x="200" y="125" width="200" height="125" stroke="none" fill="url(#radialGrad)" />
+ </g>
+</svg>
diff --git a/layout/reftests/svg/use-02-extref-resource.svg b/layout/reftests/svg/use-02-extref-resource.svg
new file mode 100644
index 0000000000..005ad6373e
--- /dev/null
+++ b/layout/reftests/svg/use-02-extref-resource.svg
@@ -0,0 +1,34 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg">
+ <g color="ghostwhite">
+ <defs>
+ <linearGradient id="linearGrad1" gradientUnits="objectBoundingBox" y1="0" x1="0" y2="1" x2="1" >
+ <stop offset="000%" stop-color="orange" />
+ <stop offset="033%" stop-color="red" />
+ <stop offset="050%" stop-color="gold" />
+ <stop offset="066%" stop-color="red" />
+ <stop offset="100%" stop-color="orange" />
+ </linearGradient>
+
+ <radialGradient id="radialGrad1" gradientUnits="objectBoundingBox" cx="0.5" cy="0.5" r="0.5" fx="0.15" fy="0.15" >
+ <stop offset="000%" stop-color="orange" />
+ <stop offset="033%" stop-color="red" />
+ <stop offset="050%" stop-color="gold" />
+ <stop offset="066%" stop-color="red" />
+ <stop offset="100%" stop-color="orange" />
+ </radialGradient>
+ </defs>
+
+ <g>
+ <g id="foreign">
+ <foreignObject x="0" y="0" width="100" height="100">
+ <p xmlns="http://www.w3.org/1999/xhtml">Foo</p>
+ </foreignObject>
+ </g>
+ <rect id="rect1" x="0" y="0" width="200" height="125" stroke="none" />
+ <rect id="rect2" x="200" y="0" width="200" height="125" stroke="none" />
+ <rect id="rect3" x="0" y="125" width="200" height="125" stroke="none" fill="currentColor"/>
+ <rect id="rect4" x="200" y="125" width="200" height="125" stroke="none" fill="url(#radialGrad1)" />
+ </g>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/use-02-extref.svg b/layout/reftests/svg/use-02-extref.svg
new file mode 100644
index 0000000000..9dc7a5c770
--- /dev/null
+++ b/layout/reftests/svg/use-02-extref.svg
@@ -0,0 +1,28 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <g color="forestgreen">
+ <defs>
+ <linearGradient id="linearGrad1" gradientUnits="objectBoundingBox" y1="0" x1="0" y2="1" x2="1">
+ <stop offset="0%" stop-color="royalblue"/>
+ <stop offset="33%" stop-color="white"/>
+ <stop offset="50%" stop-color="darkblue"/>
+ <stop offset="66%" stop-color="white"/>
+ <stop offset="100%" stop-color="royalblue"/>
+ </linearGradient>
+
+ <radialGradient id="radialGrad1" gradientUnits="objectBoundingBox" cx="0.5" cy="0.5" r="0.5" fx="0.15" fy="0.15">
+ <stop offset="00%" stop-color="royalblue"/>
+ <stop offset="33%" stop-color="white"/>
+ <stop offset="50%" stop-color="darkblue"/>
+ <stop offset="66%" stop-color="white"/>
+ <stop offset="100%" stop-color="royalblue"/>
+ </radialGradient>
+ </defs>
+
+ <use xlink:href="use-02-extref-resource.svg#rect1" fill="url(#linearGrad1)"/>
+ <use xlink:href="use-02-extref-resource.svg#rect2" fill="currentColor"/>
+ <use xlink:href="use-02-extref-resource.svg#rect3"/>
+ <use xlink:href="use-02-extref-resource.svg#rect4"/>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/use-02.svg b/layout/reftests/svg/use-02.svg
new file mode 100644
index 0000000000..5ebaed85dc
--- /dev/null
+++ b/layout/reftests/svg/use-02.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <title>Testing that 'use' with zero width/height is displayed when
+ not referencing svg or symbol elements</title>
+ <defs>
+ <rect id="to-cover" x="2" y="2" height="96" width="96" fill="red"/>
+ <rect id="r" x="0" y="0" height="100" width="100" fill="lime"/>
+ </defs>
+ <rect width="100%" height="100%" fill="lime"/>
+
+ <use href="#to-cover"/>
+ <use x="110" href="#to-cover"/>
+ <use y="110" href="#to-cover"/>
+
+ <use href="#r" width="0" height="0" />
+ <use x="110" href="#r" width="0" />
+ <use y="110" href="#r" height="0" />
+</svg>
diff --git a/layout/reftests/svg/use-children.svg b/layout/reftests/svg/use-children.svg
new file mode 100644
index 0000000000..f0b04e3163
--- /dev/null
+++ b/layout/reftests/svg/use-children.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" version="1.1"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Testing that 'use' doesn't render its kids.</title>
+
+ <rect width="100%" height="100%" fill="lime" id="r1"/>
+ <use id="u2" x="0%" width="100%">
+ <rect width="100%" height="100%" fill="red" id="r2"/>
+ </use>
+</svg>
diff --git a/layout/reftests/svg/use-element-shadow-tree-rule-matching.html b/layout/reftests/svg/use-element-shadow-tree-rule-matching.html
new file mode 100644
index 0000000000..e73c910939
--- /dev/null
+++ b/layout/reftests/svg/use-element-shadow-tree-rule-matching.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html>
+<style type="text/css">
+ div {
+ width: 100px;
+ height:100px;
+ position: fixed;
+ }
+
+ /* #outer is in main DOM, circle instance in use-element shadow DOM,
+ should not match this rule for cloned circle instance. */
+ #outer circle {
+ stroke: red;
+ fill: red;
+ stroke-width: 4px;
+ }
+
+ /* div is in main DOM, rect instance in use-element shadow DOM.
+ should not match this rule for cloned rect instance. */
+ div rect {
+ stroke: red;
+ fill: red;
+ stroke-width: 4px;
+ }
+
+ /* use element is host of shadow tree, not part of it. This rule should
+ not match any elements in the use-element shadow tree. */
+ use > rect, use > circle {
+ stroke: red;
+ fill: red;
+ stroke-width: 4px;
+ }
+
+ /* A cloned symbol instance inside an use-element shadow tree should match
+ rules of symbol tag, instead of svg tag. */
+ svg {
+ fill: red;
+ }
+ symbol {
+ fill: lime;
+ }
+</style>
+
+<body style="background-color: lime;">
+
+<svg>
+ <defs>
+ <circle id="circle" cx="25" cy="25" r="25" />
+ <rect id="rect" width="100" height="100"/>
+ <symbol id="symbol">
+ <circle cx="25" cy="25" r="25" />
+ </symbol>
+ </defs>
+
+ <g id="outer">
+ <use xlink:href="#circle" fill="lime" width="50" height="50" />
+ </g>
+</svg>
+
+<div style="left: 0px; top: 10px;">
+ <svg>
+ <use xlink:href="#rect" fill="lime" width="50" height="50" />
+ </svg>
+</div>
+
+<div style="left: 110px; top: 10px;">
+ <svg>
+ <use xlink:href="#symbol" fill="lime" width="50" height="50" />
+ </svg>
+</div>
+
+<div style="left: 220px; top: 10px;">
+ <svg>
+ <use xlink:href="#symbol" width="50" height="50" />
+ </svg>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/svg/use-extref-dataURI-01.svg b/layout/reftests/svg/use-extref-dataURI-01.svg
new file mode 100644
index 0000000000..3274a21264
--- /dev/null
+++ b/layout/reftests/svg/use-extref-dataURI-01.svg
@@ -0,0 +1,12 @@
+<!--
+ 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>
+ Testcase for bug 686013: &lt;use&gt; targeting a fragment in a data URI
+ </title>
+ <rect fill="red" height="100%" width="100%"/>
+ <use xlink:href="data:image/svg+xml,&lt;svg xmlns='http://www.w3.org/2000/svg'&gt;&lt;rect id='target' height='100%' width='100%' fill='lime'/&gt;&lt;rect height='100%' width='100%' fill='orange'/&gt;&lt;/svg&gt;#target"/>
+</svg>
diff --git a/layout/reftests/svg/use-image-01.svg b/layout/reftests/svg/use-image-01.svg
new file mode 100644
index 0000000000..a49d15411d
--- /dev/null
+++ b/layout/reftests/svg/use-image-01.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect width="100%" height="100%" fill="url(#pattern0)"/>
+<defs>
+<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0" />
+</pattern>
+<image id="image0" width="100%" height="100%" xlink:href="pass.svg"/>
+</defs>
+</svg>
+
diff --git a/layout/reftests/svg/use-localRef-clipPath-01-ref.svg b/layout/reftests/svg/use-localRef-clipPath-01-ref.svg
new file mode 100644
index 0000000000..8383a720ea
--- /dev/null
+++ b/layout/reftests/svg/use-localRef-clipPath-01-ref.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Reference for clipPath linked to local-ref URL</title>
+ <defs>
+ <clipPath id="clip1">
+ <circle cx="50" cy="50" r="50"/>
+ </clipPath>
+ <clipPath id="clip2">
+ <circle cx="50" cy="150" r="50"/>
+ </clipPath>
+ <clipPath id="clip3">
+ <circle cx="50" cy="250" r="50"/>
+ </clipPath>
+ </defs>
+ <rect x="0" y="0" width="100" height="100" fill="blue" clip-path="url(#clip1)"/>
+ <rect x="0" y="100" width="100" height="100" fill="blue" clip-path="url(#clip2)"/>
+ <rect x="0" y="200" width="100" height="100" fill="blue" clip-path="url(#clip3)"/>
+</svg> \ No newline at end of file
diff --git a/layout/reftests/svg/use-localRef-clipPath-01.svg b/layout/reftests/svg/use-localRef-clipPath-01.svg
new file mode 100644
index 0000000000..5bc697608a
--- /dev/null
+++ b/layout/reftests/svg/use-localRef-clipPath-01.svg
@@ -0,0 +1,23 @@
+<?xml-stylesheet href="use-localRef.css" type="text/css"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Testcase for clipPath linked to local-ref URL</title>
+ <defs>
+ <clipPath id="circleClip1">
+ <circle cx="50" cy="50" r="0"/>
+ </clipPath>
+ <clipPath id="circleClip2">
+ <circle cx="50" cy="150" r="50"/>
+ </clipPath>
+ <clipPath id="circleClip3">
+ <circle cx="50" cy="250" r="50"/>
+ </clipPath>
+ </defs>
+ <style>
+ #cp3 {
+ clip-path: url(#circleClip3);
+ }
+ </style>
+ <use xlink:href="use-localRef-clipPath-resource.svg#cp1"/>
+ <use xlink:href="use-localRef-clipPath-resource.svg#cp2" clip-path="url(#circleClip2)"/>
+ <use xlink:href="use-localRef-clipPath-resource.svg#cp3"/>
+</svg>
diff --git a/layout/reftests/svg/use-localRef-clipPath-resource.svg b/layout/reftests/svg/use-localRef-clipPath-resource.svg
new file mode 100644
index 0000000000..96e2d1095a
--- /dev/null
+++ b/layout/reftests/svg/use-localRef-clipPath-resource.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+ <clipPath id="circleClip1">
+ <circle cx="50" cy="50" r="50"/>
+ </clipPath>
+ <clipPath id="circleClip2">
+ <circle cx="50" cy="150" r="0"/>
+ </clipPath>
+ <clipPath id="circleClip3">
+ <circle cx="50" cy="250" r="0"/>
+ </clipPath>
+ </defs>
+ <rect id="cp1" x="0" y="0" width="100" height="100" fill="blue" clip-path="url(#circleClip1)"/>
+ <rect id="cp2" x="0" y="100" width="100" height="100" fill="blue"/>
+ <rect id="cp3" x="0" y="200" width="100" height="100" fill="blue"/>
+</svg> \ No newline at end of file
diff --git a/layout/reftests/svg/use-localRef-fill-01-ref.svg b/layout/reftests/svg/use-localRef-fill-01-ref.svg
new file mode 100644
index 0000000000..407e0a78c1
--- /dev/null
+++ b/layout/reftests/svg/use-localRef-fill-01-ref.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Reference for fill linked to local-ref URL</title>
+ <defs>
+ <linearGradient id="gradient1">
+ <stop offset="0%" stop-color="white"/>
+ <stop offset="100%" stop-color="blue"/>
+ </linearGradient>
+ </defs>
+ <rect x="10" y="10" width="80" height="80" fill="url(#gradient1)"/>
+ <rect x="10" y="110" width="80" height="80" fill="url(#gradient1)"/>
+ <rect x="10" y="210" width="80" height="80" fill="url(#gradient1)"/>
+</svg> \ No newline at end of file
diff --git a/layout/reftests/svg/use-localRef-fill-01.svg b/layout/reftests/svg/use-localRef-fill-01.svg
new file mode 100644
index 0000000000..d8f9c7c6eb
--- /dev/null
+++ b/layout/reftests/svg/use-localRef-fill-01.svg
@@ -0,0 +1,25 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Testcase for fill linked to local-ref URL</title>
+ <defs>
+ <linearGradient id="gradient1">
+ <stop offset="0%" stop-color="blue"/>
+ <stop offset="100%" stop-color="blue"/>
+ </linearGradient>
+ <linearGradient id="gradient2">
+ <stop offset="0%" stop-color="white"/>
+ <stop offset="100%" stop-color="blue"/>
+ </linearGradient>
+ <linearGradient id="gradient3">
+ <stop offset="0%" stop-color="white"/>
+ <stop offset="100%" stop-color="blue"/>
+ </linearGradient>
+ </defs>
+ <style>
+ #fill3 {
+ fill: url(#gradient3);
+ }
+ </style>
+ <use xlink:href="use-localRef-fill-resource.svg#fill1"/>
+ <use xlink:href="use-localRef-fill-resource.svg#fill2" fill="url(#gradient2)"/>
+ <use xlink:href="use-localRef-fill-resource.svg#fill3"/>
+</svg>
diff --git a/layout/reftests/svg/use-localRef-fill-resource.svg b/layout/reftests/svg/use-localRef-fill-resource.svg
new file mode 100644
index 0000000000..4771a77d92
--- /dev/null
+++ b/layout/reftests/svg/use-localRef-fill-resource.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+ <linearGradient id="gradient1">
+ <stop offset="0%" stop-color="white"/>
+ <stop offset="100%" stop-color="blue"/>
+ </linearGradient>
+ <linearGradient id="gradient2">
+ <stop offset="0%" stop-color="blue"/>
+ <stop offset="100%" stop-color="blue"/>
+ </linearGradient>
+ <linearGradient id="gradient3">
+ <stop offset="0%" stop-color="blue"/>
+ <stop offset="100%" stop-color="blue"/>
+ </linearGradient>
+ </defs>
+ <rect id="fill1" x="10" y="10" width="80" height="80" fill="url(#gradient1)"/>
+ <rect id="fill2" x="10" y="110" width="80" height="80"/>
+ <rect id="fill3" x="10" y="210" width="80" height="80"/>
+</svg> \ No newline at end of file
diff --git a/layout/reftests/svg/use-localRef-filter-01-ref.svg b/layout/reftests/svg/use-localRef-filter-01-ref.svg
new file mode 100644
index 0000000000..aedde40006
--- /dev/null
+++ b/layout/reftests/svg/use-localRef-filter-01-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 filter linked to local-ref URL</title>
+ <defs>
+ <filter id="blurFilter" x="-10" y="-10" width="100" height="100">
+ <feGaussianBlur in="SourceGraphic" stdDeviation="10" />
+ </filter>
+ </defs>
+ <rect x="10" y="10" width="80" height="80" fill="blue" filter="url(#blurFilter)"/>
+ <rect x="10" y="110" width="80" height="80" fill="blue" filter="url(#blurFilter)"/>
+ <rect x="10" y="210" width="80" height="80" fill="blue" filter="url(#blurFilter)"/>
+</svg> \ No newline at end of file
diff --git a/layout/reftests/svg/use-localRef-filter-01.svg b/layout/reftests/svg/use-localRef-filter-01.svg
new file mode 100644
index 0000000000..aad16794b0
--- /dev/null
+++ b/layout/reftests/svg/use-localRef-filter-01.svg
@@ -0,0 +1,22 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Testcase for filter linked to local-ref URL</title>
+ <defs>
+ <filter id="blurFilter1" x="-10" y="-10" width="100" height="100">
+ <feGaussianBlur in="SourceGraphic" stdDeviation="0" />
+ </filter>
+ <filter id="blurFilter2" x="-10" y="-10" width="100" height="100">
+ <feGaussianBlur in="SourceGraphic" stdDeviation="10" />
+ </filter>
+ <filter id="blurFilter3" x="-10" y="-10" width="100" height="100">
+ <feGaussianBlur in="SourceGraphic" stdDeviation="10" />
+ </filter>
+ </defs>
+ <style>
+ #f3 {
+ filter: url(#blurFilter3);
+ }
+ </style>
+ <use xlink:href="use-localRef-filter-resource.svg#f1"/>
+ <use xlink:href="use-localRef-filter-resource.svg#f2" filter="url(#blurFilter2)"/>
+ <use xlink:href="use-localRef-filter-resource.svg#f3"/>
+</svg>
diff --git a/layout/reftests/svg/use-localRef-filter-resource.svg b/layout/reftests/svg/use-localRef-filter-resource.svg
new file mode 100644
index 0000000000..55c05a4ad4
--- /dev/null
+++ b/layout/reftests/svg/use-localRef-filter-resource.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+ <filter id="blurFilter1" x="-10" y="-10" width="100" height="100">
+ <feGaussianBlur in="SourceGraphic" stdDeviation="10" />
+ </filter>
+ <filter id="blurFilter2" x="-10" y="-10" width="100" height="100">
+ <feGaussianBlur in="SourceGraphic" stdDeviation="0" />
+ </filter>
+ <filter id="blurFilter3" x="-10" y="-10" width="100" height="100">
+ <feGaussianBlur in="SourceGraphic" stdDeviation="0" />
+ </filter>
+ </defs>
+ <rect id="f1" x="10" y="10" width="80" height="80" fill="blue" filter="url(#blurFilter1)"/>
+ <rect id="f2" x="10" y="110" width="80" height="80" fill="blue"/>
+ <rect id="f3" x="10" y="210" width="80" height="80" fill="blue"/>
+</svg> \ No newline at end of file
diff --git a/layout/reftests/svg/use-localRef-link.html b/layout/reftests/svg/use-localRef-link.html
new file mode 100644
index 0000000000..6f6d6feeb3
--- /dev/null
+++ b/layout/reftests/svg/use-localRef-link.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<head>
+<base href="/test">
+</head>
+<body style="background-color: lime;">
+ <svg width="100" height="100">
+ <defs>
+ <rect id="a" x="0" y="0" width="50" height="50" fill="lime"/>
+ </defs>
+ <rect x="0" y="0" width="50" height="50" fill="red"/>
+ <use xlink:href="#a"/>
+ </svg>
+</body>
+</html>
+
diff --git a/layout/reftests/svg/use-localRef-marker-01-ref.svg b/layout/reftests/svg/use-localRef-marker-01-ref.svg
new file mode 100644
index 0000000000..fdfca07335
--- /dev/null
+++ b/layout/reftests/svg/use-localRef-marker-01-ref.svg
@@ -0,0 +1,29 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Reference for marker linked to local-ref URL</title>
+ <defs>
+ <marker id="limeCircle" markerWidth="8" markerHeight="8" refX="5" refY="5">
+ <circle cx="5" cy="5" r="2" style="stroke: none; fill:lime;"/>
+ </marker>
+ <marker id="blueCircle" markerWidth="8" markerHeight="8" refX="5" refY="5">
+ <circle cx="5" cy="5" r="2" style="stroke: none; fill:blue;"/>
+ </marker>
+ <marker id="purpleCircle" markerWidth="8" markerHeight="8" refX="5" refY="5">
+ <circle cx="5" cy="5" r="2" style="stroke: none; fill:purple;"/>
+ </marker>
+ </defs>
+ <style>
+ path {
+ stroke: blue;
+ stroke-width: 2px;
+ }
+ </style>
+ <path d="M20,20 L70,20 L120,20" style="marker-start: url(#limeCircle);"/>
+ <path d="M20,40 L70,40 L120,40" style="marker-start: url(#blueCircle);"/>
+ <path d="M20,60 L70,60 L120,60" style="marker-start: url(#blueCircle);"/>
+ <path d="M20,80 L70,80 L120,80" style="marker-mid: url(#limeCircle);"/>
+ <path d="M20,100 L70,100 L120,100" style="marker-mid: url(#blueCircle);"/>
+ <path d="M20,120 L70,120 L120,120" style="marker-mid: url(#blueCircle);"/>
+ <path d="M20,140 L70,140 L120,140" style="marker-end: url(#limeCircle);"/>
+ <path d="M20,160 L70,160 L120,160" style="marker-end: url(#blueCircle);"/>
+ <path d="M20,180 L70,180 L120,180" style="marker-end: url(#blueCircle);"/>
+</svg> \ No newline at end of file
diff --git a/layout/reftests/svg/use-localRef-marker-01.svg b/layout/reftests/svg/use-localRef-marker-01.svg
new file mode 100644
index 0000000000..643f9687f7
--- /dev/null
+++ b/layout/reftests/svg/use-localRef-marker-01.svg
@@ -0,0 +1,30 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Testcase for marker linked to local-ref URL</title>
+ <defs>
+ <marker id="circleMarker" markerWidth="8" markerHeight="8" refX="5" refY="5">
+ <circle cx="5" cy="5" r="2" style="stroke: none; fill:blue;"/>
+ </marker>
+ </defs>
+ <style>
+ #markerA3 {
+ marker-start: url(#circleMarker);
+ }
+ #markerB3 {
+ marker-mid: url(#circleMarker);
+ }
+ #markerC3 {
+ marker-end: url(#circleMarker);
+ }
+ </style>
+ <use xlink:href="use-localRef-marker-resource.svg#markerA1"/>
+ <use xlink:href="use-localRef-marker-resource.svg#markerA2" style="marker-start: url(#circleMarker);"/>
+ <use xlink:href="use-localRef-marker-resource.svg#markerA3"/>
+
+ <use xlink:href="use-localRef-marker-resource.svg#markerB1"/>
+ <use xlink:href="use-localRef-marker-resource.svg#markerB2" style="marker-mid: url(#circleMarker);"/>
+ <use xlink:href="use-localRef-marker-resource.svg#markerB3"/>
+
+ <use xlink:href="use-localRef-marker-resource.svg#markerC1"/>
+ <use xlink:href="use-localRef-marker-resource.svg#markerC2" style="marker-end: url(#circleMarker);"/>
+ <use xlink:href="use-localRef-marker-resource.svg#markerC3"/>
+</svg> \ No newline at end of file
diff --git a/layout/reftests/svg/use-localRef-marker-resource.svg b/layout/reftests/svg/use-localRef-marker-resource.svg
new file mode 100644
index 0000000000..2586abeb6f
--- /dev/null
+++ b/layout/reftests/svg/use-localRef-marker-resource.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+ <marker id="circleMarker" markerWidth="8" markerHeight="8" refX="5" refY="5">
+ <circle cx="5" cy="5" r="2" style="stroke: none; fill:lime;"/>
+ </marker>
+ </defs>
+ <path id="markerA1" d="M20,20 L70,20 L120,20" style="stroke: blue; stroke-width: 2px; marker-start: url(#circleMarker);"/>
+ <path id="markerA2" d="M20,40 L70,40 L120,40" style="stroke: blue; stroke-width: 2px;"/>
+ <path id="markerA3" d="M20,60 L70,60 L120,60" style="stroke: blue; stroke-width: 2px;"/>
+
+ <path id="markerB1" d="M20,80 L70,80 L120,80" style="stroke: blue; stroke-width: 2px; marker-mid: url(#circleMarker);"/>
+ <path id="markerB2" d="M20,100 L70,100 L120,100" style="stroke: blue; stroke-width: 2px;"/>
+ <path id="markerB3" d="M20,120 L70,120 L120,120" style="stroke: blue; stroke-width: 2px;"/>
+
+ <path id="markerC1" d="M20,140 L70,140 L120,140" style="stroke: blue; stroke-width: 2px; marker-end: url(#circleMarker);"/>
+ <path id="markerC2" d="M20,160 L70,160 L120,160" style="stroke: blue; stroke-width: 2px;"/>
+ <path id="markerC3" d="M20,180 L70,180 L120,180" style="stroke: blue; stroke-width: 2px;;"/>
+</svg> \ No newline at end of file
diff --git a/layout/reftests/svg/use-localRef-mask-01-ref.svg b/layout/reftests/svg/use-localRef-mask-01-ref.svg
new file mode 100644
index 0000000000..2eeba09464
--- /dev/null
+++ b/layout/reftests/svg/use-localRef-mask-01-ref.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Reference for mask linked to local-ref URL</title>
+ <defs>
+ <mask id="circleMask1" x="0" y="0" width="100" height="100" >
+ <circle cx="50" cy="50" r="40" style="stroke:none; fill: #ffffff"/>
+ </mask>
+ <mask id="circleMask2" x="0" y="0" width="100" height="100" >
+ <circle cx="50" cy="150" r="40" style="stroke:none; fill: #ffffff"/>
+ </mask>
+ <mask id="circleMask3" x="0" y="0" width="100" height="100" >
+ <circle cx="50" cy="250" r="40" style="stroke:none; fill: #ffffff"/>
+ </mask>
+ </defs>
+ <rect id="mask1" x="10" y="10" width="80" height="80" fill="blue" mask="url(#circleMask1)"/>
+ <rect id="mask2" x="10" y="110" width="80" fill="blue" height="80" mask="url(#circleMask2)"/>
+ <rect id="mask3" x="10" y="210" width="80" fill="blue" height="80" mask="url(#circleMask3)"/>
+</svg> \ No newline at end of file
diff --git a/layout/reftests/svg/use-localRef-mask-01.svg b/layout/reftests/svg/use-localRef-mask-01.svg
new file mode 100644
index 0000000000..fa524e9f9c
--- /dev/null
+++ b/layout/reftests/svg/use-localRef-mask-01.svg
@@ -0,0 +1,22 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Testcase for mask linked to local-ref URL</title>
+ <defs>
+ <mask id="circleMask1" x="0" y="0" width="100" height="100" >
+ <circle cx="50" cy="50" r="0" style="stroke:none; fill: #ffffff"/>
+ </mask>
+ <mask id="circleMask2" x="0" y="0" width="100" height="100" >
+ <circle cx="50" cy="150" r="40" style="stroke:none; fill: #ffffff"/>
+ </mask>
+ <mask id="circleMask3" x="0" y="0" width="100" height="100" >
+ <circle cx="50" cy="250" r="40" style="stroke:none; fill: #ffffff"/>
+ </mask>
+ </defs>
+ <style>
+ #mask3 {
+ mask: url(#circleMask3);
+ }
+ </style>
+ <use xlink:href="use-localRef-mask-resource.svg#mask1"/>
+ <use xlink:href="use-localRef-mask-resource.svg#mask2" mask="url(#circleMask2)"/>
+ <use xlink:href="use-localRef-mask-resource.svg#mask3"/>
+</svg>
diff --git a/layout/reftests/svg/use-localRef-mask-resource.svg b/layout/reftests/svg/use-localRef-mask-resource.svg
new file mode 100644
index 0000000000..49d7b6cc4a
--- /dev/null
+++ b/layout/reftests/svg/use-localRef-mask-resource.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+ <mask id="circleMask1" x="0" y="0" width="100" height="100" >
+ <circle cx="50" cy="50" r="40" style="stroke:none; fill: #ffffff"/>
+ </mask>
+ <mask id="circleMask2" x="0" y="0" width="100" height="100" >
+ <circle cx="50" cy="150" r="0" style="stroke:none; fill: #ffffff"/>
+ </mask>
+ <mask id="circleMask3" x="0" y="0" width="100" height="100" >
+ <circle cx="50" cy="250" r="0" style="stroke:none; fill: #ffffff"/>
+ </mask>
+ </defs>
+ <rect id="mask1" x="10" y="10" width="80" height="80" fill="blue" mask="url(#circleMask1)"/>
+ <rect id="mask2" x="10" y="110" width="80" fill="blue" height="80"/>
+ <rect id="mask3" x="10" y="210" width="80" fill="blue" height="80"/>
+</svg> \ No newline at end of file
diff --git a/layout/reftests/svg/use-localRef-stroke-01-ref.svg b/layout/reftests/svg/use-localRef-stroke-01-ref.svg
new file mode 100644
index 0000000000..ce7695684e
--- /dev/null
+++ b/layout/reftests/svg/use-localRef-stroke-01-ref.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Reference for stroke linked to local-ref URL</title>
+ <defs>
+ <linearGradient id="gradient1">
+ <stop offset="0%" stop-color="white"/>
+ <stop offset="100%" stop-color="blue"/>
+ </linearGradient>
+ </defs>
+ <rect x="10" y="10" width="80" height="80" stroke-width="5" fill="white" stroke="url(#gradient1)"/>
+ <rect x="10" y="110" width="80" height="80" stroke-width="5" fill="white" stroke="url(#gradient1)"/>
+ <rect x="10" y="210" width="80" height="80" stroke-width="5" fill="white" stroke="url(#gradient1)"/>
+</svg> \ No newline at end of file
diff --git a/layout/reftests/svg/use-localRef-stroke-01.svg b/layout/reftests/svg/use-localRef-stroke-01.svg
new file mode 100644
index 0000000000..1e8e3e5922
--- /dev/null
+++ b/layout/reftests/svg/use-localRef-stroke-01.svg
@@ -0,0 +1,26 @@
+<?xml-stylesheet href="use-localRef.css" type="text/css"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Testcase for stroke linked to local-ref URL</title>
+ <defs>
+ <linearGradient id="gradient1">
+ <stop offset="0%" stop-color="blue"/>
+ <stop offset="100%" stop-color="blue"/>
+ </linearGradient>
+ <linearGradient id="gradient2">
+ <stop offset="0%" stop-color="white"/>
+ <stop offset="100%" stop-color="blue"/>
+ </linearGradient>
+ <linearGradient id="gradient3">
+ <stop offset="0%" stop-color="white"/>
+ <stop offset="100%" stop-color="blue"/>
+ </linearGradient>
+ </defs>
+ <style>
+ #stroke3 {
+ stroke: url(#gradient3);
+ }
+ </style>
+ <use xlink:href="use-localRef-stroke-resource.svg#stroke1"/>
+ <use xlink:href="use-localRef-stroke-resource.svg#stroke2" stroke="url(#gradient2)"/>
+ <use xlink:href="use-localRef-stroke-resource.svg#stroke3"/>
+</svg>
diff --git a/layout/reftests/svg/use-localRef-stroke-resource.svg b/layout/reftests/svg/use-localRef-stroke-resource.svg
new file mode 100644
index 0000000000..e78b95dc56
--- /dev/null
+++ b/layout/reftests/svg/use-localRef-stroke-resource.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+ <linearGradient id="gradient1">
+ <stop offset="0%" stop-color="white"/>
+ <stop offset="100%" stop-color="blue"/>
+ </linearGradient>
+ <linearGradient id="gradient2">
+ <stop offset="0%" stop-color="blue"/>
+ <stop offset="100%" stop-color="blue"/>
+ </linearGradient>
+ <linearGradient id="gradient3">
+ <stop offset="0%" stop-color="blue"/>
+ <stop offset="100%" stop-color="blue"/>
+ </linearGradient>
+ </defs>
+ <rect id="stroke1" x="10" y="10" width="80" height="80" fill="white" stroke-width="5" stroke="url(#gradient1)"/>
+ <rect id="stroke2" x="10" y="110" width="80" height="80" fill="white" stroke-width="5" />
+ <rect id="stroke3" x="10" y="210" width="80" height="80" fill="white" stroke-width="5" />
+</svg> \ No newline at end of file
diff --git a/layout/reftests/svg/use-restrictions-not-restricted-ref.svg b/layout/reftests/svg/use-restrictions-not-restricted-ref.svg
new file mode 100644
index 0000000000..524bc7c8c9
--- /dev/null
+++ b/layout/reftests/svg/use-restrictions-not-restricted-ref.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg">
+ <g color="green">
+ <foreignObject x="0" y="0" width="100" height="100">
+ <p xmlns="http://www.w3.org/1999/xhtml">Foo</p>
+ </foreignObject>
+ <foreignObject x="100" y="0" width="100" height="100">
+ <p xmlns="http://www.w3.org/1999/xhtml">Foo</p>
+ </foreignObject>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/use-restrictions.svg b/layout/reftests/svg/use-restrictions.svg
new file mode 100644
index 0000000000..8cadeb6be2
--- /dev/null
+++ b/layout/reftests/svg/use-restrictions.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg">
+ <defs>
+ <g id="foreign">
+ <foreignObject x="100" y="0" width="100" height="100">
+ <p xmlns="http://www.w3.org/1999/xhtml">Foo</p>
+ </foreignObject>
+ </g>
+ </defs>
+ <g color="green">
+ <use href="use-02-extref-resource.svg#foreign" />
+ <use href="#foreign" />
+ </g>
+</svg>
diff --git a/layout/reftests/svg/userSpaceOnUse-and-pattern-01-ref.svg b/layout/reftests/svg/userSpaceOnUse-and-pattern-01-ref.svg
new file mode 100644
index 0000000000..03315272d4
--- /dev/null
+++ b/layout/reftests/svg/userSpaceOnUse-and-pattern-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" width="100" height="100">
+
+ <title>Reference for elements referencing an userSpaceOnUse pattern</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=521759 -->
+
+ <defs>
+ <pattern id="test" patternUnits="userSpaceOnUse" width="100" height="100" viewBox="0 0 10 10">
+ <rect x="0" y="0" width="10" height="10" fill="lime" />
+ </pattern>
+ </defs>
+ <rect x="20" y="20" width="100" height="100" fill="url(#test)" />
+</svg>
diff --git a/layout/reftests/svg/userSpaceOnUse-and-pattern-01.svg b/layout/reftests/svg/userSpaceOnUse-and-pattern-01.svg
new file mode 100644
index 0000000000..11638e0b1e
--- /dev/null
+++ b/layout/reftests/svg/userSpaceOnUse-and-pattern-01.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" width="100" height="100">
+
+ <title>Testcase for elements referencing an userSpaceOnUse pattern</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=521759 -->
+
+ <defs>
+ <pattern id="test" patternUnits="userSpaceOnUse" width="20%" height="20%" viewBox="0 0 10 10">
+ <rect x="0" y="0" width="10" height="10" fill="lime" />
+ </pattern>
+ </defs>
+ <rect x="20" y="20" width="100" height="100" fill="red" />
+ <rect x="20" y="20" width="100" height="100" fill="url(#test)" />
+</svg>
diff --git a/layout/reftests/svg/viewBox-and-pattern-01.svg b/layout/reftests/svg/viewBox-and-pattern-01.svg
new file mode 100644
index 0000000000..065d77a315
--- /dev/null
+++ b/layout/reftests/svg/viewBox-and-pattern-01.svg
@@ -0,0 +1,19 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
+
+ <title>Testcase for elements referencing a viewBox pattern</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=519368 -->
+
+ <defs>
+ <pattern id="test" patternUnits="userSpaceOnUse" x="10" y="10" width="20" height="20" viewBox="10 10 10 10">
+ <rect x="10" y="10" width="10" height="10" fill="lime" />
+ </pattern>
+ </defs>
+ <rect width="100%" height="100%" fill="lime" />
+ <rect x="20" y="20" width="100" height="100" fill="red" />
+ <rect x="20" y="20" width="100" height="100" fill="url(#test)" />
+</svg>
diff --git a/layout/reftests/svg/viewBox-and-pattern-02.svg b/layout/reftests/svg/viewBox-and-pattern-02.svg
new file mode 100644
index 0000000000..43f50b9d5a
--- /dev/null
+++ b/layout/reftests/svg/viewBox-and-pattern-02.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" width="100%" height="100%">
+
+ <title>Testcase for elements referencing a viewBox pattern</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=773467 -->
+
+ <defs>
+ <pattern id="test" x="10" y="10" width="20" height="20" viewBox="10 10 10 10"
+ patternContentUnits="userSpaceOnUse">
+ <rect x="10" y="10" width="10" height="10" fill="lime" />
+ </pattern>
+ </defs>
+ <rect width="100%" height="100%" fill="lime" />
+ <rect x="20" y="20" width="100" height="100" fill="red" />
+ <rect x="20" y="20" width="100" height="100" fill="url(#test)" />
+</svg>
diff --git a/layout/reftests/svg/viewBox-and-pattern-03.svg b/layout/reftests/svg/viewBox-and-pattern-03.svg
new file mode 100644
index 0000000000..d671f59ab2
--- /dev/null
+++ b/layout/reftests/svg/viewBox-and-pattern-03.svg
@@ -0,0 +1,19 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
+
+ <title>Testcase for elements referencing a viewBox pattern</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=773467 -->
+
+ <defs>
+ <pattern id="test" width="1" height="2" viewBox="0 0 10 10" patternUnits="userSpaceOnUse">
+ <rect y="-3" width="10" height="5" fill="lime" />
+ </pattern>
+ </defs>
+ <rect width="100%" height="100%" fill="lime" />
+ <rect transform="scale(10)" x=".2" y=".2" width="1" height="0.5" fill="red" />
+ <rect transform="scale(10)" x=".2" y=".2" width="1" height="0.5" fill="url(#test)" />
+</svg>
diff --git a/layout/reftests/svg/viewBox-and-pattern-04.svg b/layout/reftests/svg/viewBox-and-pattern-04.svg
new file mode 100644
index 0000000000..8963bb9366
--- /dev/null
+++ b/layout/reftests/svg/viewBox-and-pattern-04.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">
+ <defs>
+ <pattern id="p2"
+ height="1" width="1"
+ viewBox="0 0 10 10"
+ preserveAspectRatio="xMidYMid meet">
+ <circle cx="5" cy="5" r="5px" fill="red"/>
+ </pattern>
+ </defs>
+ <rect width="100%" height="100%" fill="lime"/>
+ <rect width="300" height="100" fill="url(#p2)"/>
+ <rect x="100" width="100" height="100" fill="lime"/>
+</svg>
diff --git a/layout/reftests/svg/viewBox-and-symbol-01.svg b/layout/reftests/svg/viewBox-and-symbol-01.svg
new file mode 100644
index 0000000000..5c8ebf7bc3
--- /dev/null
+++ b/layout/reftests/svg/viewBox-and-symbol-01.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ <defs>
+ <symbol id="mySymbol" viewBox="0 0 20 20">
+ <rect fill="lime" x="50%" height="20px" width="3%"/>
+ </symbol>
+ </defs>
+ <rect width="100%" height="100%" fill="lime"/>
+ <svg viewBox="0 0 20 20">
+ <rect fill="red" x="50%" height="20px" width="2%"/>
+ </svg>
+ <svg>
+ <use href="#mySymbol"/>
+ </svg>
+</svg>
diff --git a/layout/reftests/svg/viewBox-invalid-01.svg b/layout/reftests/svg/viewBox-invalid-01.svg
new file mode 100644
index 0000000000..f9239afb03
--- /dev/null
+++ b/layout/reftests/svg/viewBox-invalid-01.svg
@@ -0,0 +1,127 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Testing invalid values for |viewBox| attribute</title>
+ <defs>
+ <rect id="redRect" fill="red" height="10" width="10"/>
+ <rect id="limeRect" fill="lime" height="10" width="10"/>
+ </defs>
+ <rect fill="lime" height="100%" width="100%"/>
+
+ <!-- SUMMARY: Each <svg> subdocument below has an invalid viewBox. If we
+ honor the invalid viewBox (ignoring typos), that will make us scale
+ the <use>'d redRect to appear larger than the limeRect, and we'll have
+ some red showing (and we'll fail the test). -->
+
+ <!-- First row: Initial comma(s) -->
+ <g transform="translate(0, 0)">
+ <g transform="translate(0, 0)">
+ <svg width="20" height="20" viewBox=",0,0,1,1">
+ <use xlink:href="#redRect"/>
+ </svg><use xlink:href="#limeRect"/>
+ </g>
+ <g transform="translate(40, 0)">
+ <svg width="20" height="20" viewBox=",,0,0,1,1">
+ <use xlink:href="#redRect"/>
+ </svg><use xlink:href="#limeRect"/>
+ </g>
+ <g transform="translate(80, 0)">
+ <svg width="20" height="20" viewBox=", ,0,0,1,1">
+ <use xlink:href="#redRect"/>
+ </svg><use xlink:href="#limeRect"/>
+ </g>
+ <g transform="translate(120, 0)">
+ <svg width="20" height="20" viewBox=", 0,0,1,1">
+ <use xlink:href="#redRect"/>
+ </svg><use xlink:href="#limeRect"/>
+ </g>
+ <g transform="translate(160, 0)">
+ <svg width="20" height="20" viewBox=",,, 0,0,1,1">
+ <use xlink:href="#redRect"/>
+ </svg><use xlink:href="#limeRect"/>
+ </g>
+ </g>
+ <!-- Second row: Trailing comma(s) -->
+ <g transform="translate(0, 40)">
+ <g transform="translate(0, 0)">
+ <svg width="20" height="20" viewBox="0,0,1,1,">
+ <use xlink:href="#redRect"/>
+ </svg><use xlink:href="#limeRect"/>
+ </g>
+ <g transform="translate(40, 0)">
+ <svg width="20" height="20" viewBox="0,0,1,1 ,">
+ <use xlink:href="#redRect"/>
+ </svg><use xlink:href="#limeRect"/>
+ </g>
+ <g transform="translate(80, 0)">
+ <svg width="20" height="20" viewBox="0,0,1,1,,">
+ <use xlink:href="#redRect"/>
+ </svg><use xlink:href="#limeRect"/>
+ </g>
+ <g transform="translate(120, 0)">
+ <svg width="20" height="20" viewBox="0,0,1,1, ,">
+ <use xlink:href="#redRect"/>
+ </svg><use xlink:href="#limeRect"/>
+ </g>
+ <g transform="translate(160, 0)">
+ <svg width="20" height="20" viewBox="0,0,1,1 ,,,">
+ <use xlink:href="#redRect"/>
+ </svg><use xlink:href="#limeRect"/>
+ </g>
+ </g>
+ <!-- Third row: Repeated commas in the middle -->
+ <g transform="translate(0, 80)">
+ <g transform="translate(0, 0)">
+ <svg width="20" height="20" viewBox="0,,0,1,1">
+ <use xlink:href="#redRect"/>
+ </svg><use xlink:href="#limeRect"/>
+ </g>
+ <g transform="translate(40, 0)">
+ <svg width="20" height="20" viewBox="0,,,0,1,1">
+ <use xlink:href="#redRect"/>
+ </svg><use xlink:href="#limeRect"/>
+ </g>
+ <g transform="translate(80, 0)">
+ <svg width="20" height="20" viewBox="0, ,0,1,1">
+ <use xlink:href="#redRect"/>
+ </svg><use xlink:href="#limeRect"/>
+ </g>
+ <g transform="translate(120, 0)">
+ <svg width="20" height="20" viewBox="0 0,, 1,1">
+ <use xlink:href="#redRect"/>
+ </svg><use xlink:href="#limeRect"/>
+ </g>
+ <g transform="translate(160, 0)">
+ <svg width="20" height="20" viewBox="0 0,,1 1">
+ <use xlink:href="#redRect"/>
+ </svg><use xlink:href="#limeRect"/>
+ </g>
+ </g>
+ <!-- Fourth row: wrong number of values -->
+ <g transform="translate(0, 120)">
+ <g transform="translate(0, 0)">
+ <svg width="20" height="20" viewBox="">
+ <use xlink:href="#redRect"/>
+ </svg><use xlink:href="#limeRect"/>
+ </g>
+ <g transform="translate(40, 0)">
+ <svg width="20" height="20" viewBox="0">
+ <use xlink:href="#redRect"/>
+ </svg><use xlink:href="#limeRect"/>
+ </g>
+ <g transform="translate(80, 0)">
+ <svg width="20" height="20" viewBox="0 0">
+ <use xlink:href="#redRect"/>
+ </svg><use xlink:href="#limeRect"/>
+ </g>
+ <g transform="translate(120, 0)">
+ <svg width="20" height="20" viewBox="0 0 1">
+ <use xlink:href="#redRect"/>
+ </svg><use xlink:href="#limeRect"/>
+ </g>
+ <g transform="translate(160, 0)">
+ <svg width="20" height="20" viewBox="0 0 1 1 1 ">
+ <use xlink:href="#redRect"/>
+ </svg><use xlink:href="#limeRect"/>
+ </g>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/viewBox-invalid-02.svg b/layout/reftests/svg/viewBox-invalid-02.svg
new file mode 100644
index 0000000000..8463d9859c
--- /dev/null
+++ b/layout/reftests/svg/viewBox-invalid-02.svg
@@ -0,0 +1,38 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Testing invalid values for |viewBox| attributes</title>
+ <defs>
+ <rect id="redRect" fill="red" height="10" width="10"/>
+ <rect id="limeRect" fill="lime" height="10" width="10"/>
+ </defs>
+ <rect fill="lime" height="100%" width="100%"/>
+
+ <g transform="translate(0, 0)">
+ <use xlink:href="#redRect"/>
+ <!-- negative width/height in viewBox should ignore entire attribute -->
+ <svg width="20" height="20" viewBox="0,0,0,-1">
+ <use xlink:href="#limeRect"/>
+ </svg>
+ </g>
+ <g transform="translate(20, 0)">
+ <use xlink:href="#redRect"/>
+ <!-- negative width/height in viewBox should ignore entire attribute -->
+ <svg width="20" height="20" viewBox="0,0,-1,0">
+ <use xlink:href="#limeRect"/>
+ </svg>
+ </g>
+ <g transform="translate(40, 0)">
+ <use xlink:href="#limeRect"/>
+ <!-- zero width/height in viewBox should render nothing -->
+ <svg width="20" height="20" viewBox="0,0,0,20">
+ <use xlink:href="#redRect"/>
+ </svg>
+ </g>
+ <g transform="translate(60, 0)">
+ <use xlink:href="#limeRect"/>
+ <!-- zero width/height in viewBox should render nothing -->
+ <svg width="20" height="20" viewBox="0,0,20,0">
+ <use xlink:href="#redRect"/>
+ </svg>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/viewBox-valid-01.svg b/layout/reftests/svg/viewBox-valid-01.svg
new file mode 100644
index 0000000000..38ee208889
--- /dev/null
+++ b/layout/reftests/svg/viewBox-valid-01.svg
@@ -0,0 +1,96 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Testing valid values for |viewBox| attribute</title>
+ <defs>
+ <rect id="redRect" fill="red" height="20" width="20"/>
+ <rect id="limeRect" fill="lime" height="10" width="10"/>
+ </defs>
+ <rect fill="lime" height="100%" width="100%"/>
+
+ <!-- SUMMARY: Each <svg> subdocument below has a valid viewBox. If we honor
+ the valid viewBox (ignoring typos), that will make us scale the <use>'d
+ limeRect to appear as big as than the redRect, and we'll have no red
+ showing (and we'll pass the test). -->
+
+ <!-- First row: no commas at all -->
+ <g transform="translate(0, 0)">
+ <g transform="translate(0, 0)">
+ <use xlink:href="#redRect"/>
+ <svg width="20" height="20" viewBox="0 0 10 10">
+ <use xlink:href="#limeRect"/>
+ </svg>
+ </g>
+ <g transform="translate(40, 0)">
+ <use xlink:href="#redRect"/>
+ <svg width="20" height="20" viewBox=" 0 0 10 10">
+ <use xlink:href="#limeRect"/>
+ </svg>
+ </g>
+ <g transform="translate(80, 0)">
+ <use xlink:href="#redRect"/>
+ <svg width="20" height="20" viewBox="0 0 10 10 ">
+ <use xlink:href="#limeRect"/>
+ </svg>
+ </g>
+ <g transform="translate(120, 0)">
+ <use xlink:href="#redRect"/>
+ <svg width="20" height="20" viewBox=" 0 0 10 10 ">
+ <use xlink:href="#limeRect"/>
+ </svg>
+ </g>
+ </g>
+ <!-- Second row: some commas -->
+ <g transform="translate(0, 40)">
+ <g transform="translate(0, 0)">
+ <use xlink:href="#redRect"/>
+ <svg width="20" height="20" viewBox="0,0 10 10">
+ <use xlink:href="#limeRect"/>
+ </svg>
+ </g>
+ <g transform="translate(40, 0)">
+ <use xlink:href="#redRect"/>
+ <svg width="20" height="20" viewBox="0 0,10 10">
+ <use xlink:href="#limeRect"/>
+ </svg>
+ </g>
+ <g transform="translate(80, 0)">
+ <use xlink:href="#redRect"/>
+ <svg width="20" height="20" viewBox="0 0 10,10">
+ <use xlink:href="#limeRect"/>
+ </svg>
+ </g>
+ <g transform="translate(120, 0)">
+ <use xlink:href="#redRect"/>
+ <svg width="20" height="20" viewBox="0,0,10,10">
+ <use xlink:href="#limeRect"/>
+ </svg>
+ </g>
+ </g>
+ <!-- Third row: commas & whitespace mixed -->
+ <g transform="translate(0, 80)">
+ <g transform="translate(0, 0)">
+ <use xlink:href="#redRect"/>
+ <svg width="20" height="20" viewBox="0, 0 10 10">
+ <use xlink:href="#limeRect"/>
+ </svg>
+ </g>
+ <g transform="translate(40, 0)">
+ <use xlink:href="#redRect"/>
+ <svg width="20" height="20" viewBox="0 0 , 10 10">
+ <use xlink:href="#limeRect"/>
+ </svg>
+ </g>
+ <g transform="translate(80, 0)">
+ <use xlink:href="#redRect"/>
+ <svg width="20" height="20" viewBox="0 0 10 ,10">
+ <use xlink:href="#limeRect"/>
+ </svg>
+ </g>
+ <g transform="translate(120, 0)">
+ <use xlink:href="#redRect"/>
+ <svg width="20" height="20" viewBox=" 0 ,0, 10,10 ">
+ <use xlink:href="#limeRect"/>
+ </svg>
+ </g>
+ </g>
+</svg>
diff --git a/layout/reftests/svg/viewBox-valid-02.xhtml b/layout/reftests/svg/viewBox-valid-02.xhtml
new file mode 100644
index 0000000000..b6c8551b2e
--- /dev/null
+++ b/layout/reftests/svg/viewBox-valid-02.xhtml
@@ -0,0 +1,27 @@
+<?xml version="1.0"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+ <title>Test viewBox translating out-of-viewport rect into viewport</title>
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=773450 -->
+ <style>
+
+div, svg {
+ display: block;
+ position: absolute;
+ width: 100px;
+ height: 100px;
+}
+
+ </style>
+</head>
+<body bgcolor="lime">
+ <div style="background:red;"/>
+ <svg viewBox="100 0 100 100" xmlns="http://www.w3.org/2000/svg">
+ <rect x="100" y="0" width="100" height="100" fill="lime"/>
+ </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/viewport-percent-graphic-user-01.svg b/layout/reftests/svg/viewport-percent-graphic-user-01.svg
new file mode 100644
index 0000000000..808888b459
--- /dev/null
+++ b/layout/reftests/svg/viewport-percent-graphic-user-01.svg
@@ -0,0 +1,15 @@
+<!--
+ 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"
+ width="100%" height="100%">
+
+ <title>Testcase for percentage units on viewport and user units on graphic</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=367352 -->
+
+ <rect width="100%" height="100%" fill="red"/>
+ <rect width="32767" height="32767" fill="lime"/>
+
+</svg>
diff --git a/layout/reftests/svg/winding-01.svg b/layout/reftests/svg/winding-01.svg
new file mode 100644
index 0000000000..a8651ef705
--- /dev/null
+++ b/layout/reftests/svg/winding-01.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
+
+ <title>Testcase for path with evenodd winding</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=786216 -->
+
+ <rect width="100%" height="100%" fill="lime"/>
+
+ <path fill-rule="evenodd" fill="red" d="M100,100 l 50,0 0,50 -50,0 0,-50 50,0 0,50 -50,0 0,-50z"/>
+
+</svg>
diff --git a/layout/reftests/svg/zero-stroke-01.svg b/layout/reftests/svg/zero-stroke-01.svg
new file mode 100644
index 0000000000..6d2392c348
--- /dev/null
+++ b/layout/reftests/svg/zero-stroke-01.svg
@@ -0,0 +1,12 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+
+ <title>Testcase for stroke-width="0"</title>
+
+ <rect width="100%" height="100%" fill="lime"/>
+ <text font-size="50" fill="lime" x="100" y="100" stroke="red" stroke-width="0">should not see this</text>
+
+</svg>