summaryrefslogtreecommitdiffstats
path: root/layout/reftests/svg/as-image
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 01:47:29 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 01:47:29 +0000
commit0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d (patch)
treea31f07c9bcca9d56ce61e9a1ffd30ef350d513aa /layout/reftests/svg/as-image
parentInitial commit. (diff)
downloadfirefox-esr-0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d.tar.xz
firefox-esr-0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d.zip
Adding upstream version 115.8.0esr.upstream/115.8.0esr
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'layout/reftests/svg/as-image')
-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
243 files changed, 4098 insertions, 0 deletions
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>